#hbjk {
         margin-top: 100px;
       }

#navbar_header-id{
        width: 15%;
}
#navbar_header-id2{
      width: 40%;
}
#titl1{
float: left;
}
titl12{
      float: left;
      }


      /* Modal Container Styling */
      .modal-container {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
      /*    background: #e3f2fd; */
          padding: 5px;
      }
      .show-modal {
        font-size: 15px;
        font-weight: 400;
        color: #fff;
      /*   padding: 10px 15px; */
        border: none;
        background: #671CC9;
        border-radius: 6px;
        cursor: pointer;
      }

      /* Button and anchor link styling */
      button, .button-link {
          font-size: 18px;
          font-weight: 400;
          color: #fff;
          padding: 14px 22px;
          border: none;
          background: #671CC9;
          border-radius: 6px;
          cursor: pointer;
          text-align: center;
          box-sizing: border-box;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          min-width: 150px;
          height: 50px;
          line-height: 20px;
      }

      .button-link {
          text-decoration: none;
          display: inline-flex;
          justify-content: center;
          align-items: center;
      }

      a {
          margin: 0;
          padding: 0;
      }






      /* Hide Show Button When Modal is Active */
      .modal-container.active .show-modal {
          display: none;
      }

      /* Overlay Styling */
      .overlay {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
          background: rgba(0, 0, 0, 0.3);
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.3s ease;
      }
      .modal-container.active .overlay {
          display: block;
          opacity: 1;
          pointer-events: auto;
      }

      /* Modal Box Styling */
      .modal-box {
          display: none;
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          max-width: 380px;
          width: 100%;
          padding: 30px 20px;
          border-radius: 24px;
          background-color: #fff;
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
          opacity: 0;
          pointer-events: none;
          transition: all 0.3s ease;
          transform: translate(-50%, -50%) scale(1.2);
      }
      .modal-container.active .modal-box {
          display: flex;
          flex-direction: column;
          align-items: center;
          opacity: 1;
          pointer-events: auto;
          transform: translate(-50%, -50%) scale(1);
      }

      /* Icon Styling */
      .modal-box i {
          font-size: 70px;
          color: #4070f4;
      }

      /* Text Styling */
      .modal-box h2 {
          margin-top: 20px;
          font-size: 25px;
          font-weight: 500;
          color: #333;
      }
      .modal-box h3 {
          font-size: 16px;
          font-weight: 400;
          color: #333;
          text-align: center;
      }

      /* Button Group Styling */
      .modal-box .buttons {
          margin-top: 25px;
      }
      .modal-box button {
          font-size: 14px;
          padding: 6px 12px;
          margin: 0 10px;
      }

/* Certificate request pages */
#huro-app .landing-page-wrapper .hero-body .title span {
    color: #671cc9;
}

.marketing-hero.is-centered .hero-body .hero-mockup {
    max-width: 740px;
    margin: 0 auto;
}

.is-dark .nav-link {
    color: white !important;
}

.feather {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

[data-hint]:after {
    content: attr(data-hint);
    background-color: black;
    color: white;
    white-space: pre;
    display: inline-block;
}

.request-page {
    background: #f5f6fa !important;
    min-height: calc(100vh - 78px);
    padding: 124px 0 64px;
}

.view-wrapper.is-webapp.request-page {
    padding-top: 124px !important;
}

.request-shell {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
}

.request-page .page-content.request-shell {
    padding: 0;
}

.request-page .page-content-inner {
    width: 100%;
}

.request-heading {
    margin-bottom: 26px;
}

.request-kicker {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(103, 28, 201, .09);
    color: #671cc9;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.request-heading h1 {
    margin: 12px 0 8px;
    color: #24213f;
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 800;
}

.request-heading p {
    color: #5f6685;
    font-size: .98rem;
    line-height: 1.7;
}

.request-progress-card,
.request-form-card,
.request-aside-card,
.request-page .form-outer {
    border: 1px solid #e3e6ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(35, 38, 59, .06);
}

.request-progress-card {
    padding: 18px 28px;
    margin-bottom: 24px;
}

.request-progress-card .steps {
    align-items: center;
}

.request-progress-card .form-stepper {
    padding: 0;
}

.request-progress-card .steps-segment {
    display: flex;
    align-items: center;
    position: relative;
    min-height: 40px;
}

.request-progress-card .steps-segment::after {
    content: "" !important;
    position: static !important;
    display: block;
    flex: 1 1 36px;
    min-width: 28px;
    height: 2px !important;
    margin: 0 16px;
    background: #d9deea;
    transform: none;
    z-index: 0;
}

.request-progress-card .steps-segment.is-completed::after {
    background: #671cc9;
}

.request-progress-card .steps-segment.is-completed .steps-marker,
.request-progress-card .steps-segment.is-active .steps-marker {
    background: #671cc9;
    border-color: #671cc9;
    color: #fff;
}

.request-progress-card .steps-segment.is-active .steps-marker {
    box-shadow: 0 0 0 6px rgba(103, 28, 201, .13);
}

.request-progress-card .steps-segment.is-active .step-info {
    color: #671cc9;
}

.request-progress-card .steps-segment.is-completed .steps-marker {
    font-size: 0 !important;
}

.request-progress-card .steps-segment.is-completed .steps-marker::before {
    content: "";
    width: 13px;
    height: 7px;
    border: solid #fff;
    border-width: 0 0 3px 3px;
    transform: rotate(-45deg) translate(1px, -1px);
}

.request-progress-card .steps-marker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px !important;
    height: 36px !important;
    margin-top: 0 !important;
    border: 2px solid #d9deea;
    border-radius: 50%;
    background: #d1d5df;
    color: #555b73;
    font-size: .96rem !important;
    font-weight: 700;
}

.request-progress-card .steps-content {
    margin-left: 0 !important;
    padding-left: 12px;
}

.request-progress-card .step-info {
    margin: 0;
    color: #3d4160;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
    white-space: nowrap;
}

.request-progress-card .request-compact-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
}

.request-progress-card .request-compact-stepper .steps-segment {
    flex: 0 0 auto;
}

.request-progress-card .request-compact-stepper .steps-segment:not(:last-child) {
    flex: 1 1 auto;
}

.request-grid,
.request-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}

.request-form-card,
.request-page .form-outer {
    overflow: hidden;
}

.request-form-header,
.request-page .form-header-inner {
    padding: 24px 28px;
    border-bottom: 1px solid #eceef5;
}

.request-page .form-header {
    position: static;
    border-bottom: 0;
    background: #fff;
}

.request-form-header h2,
.request-page .form-header h3 {
    margin: 0 0 6px;
    color: #24213f;
    font-size: 1.2rem;
    font-weight: 800;
}

.request-form-header p,
.request-page .form-header p {
    margin: 0;
    color: #6d7390;
    font-size: .92rem;
    line-height: 1.6;
}

.request-form-body {
    padding: 28px;
}

.request-form-body .field {
    margin-bottom: 22px;
}

.request-form-body label,
.request-page label,
.request-page .label {
    color: #30344f;
    font-size: .9rem;
    font-weight: 700;
}

.request-form-body label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.request-required {
    color: #c62828;
}

.request-form-body .input,
.request-form-body .select select,
.request-page .input,
.request-page .select select,
.request-page .textarea {
    width: 100%;
    min-height: 46px;
    border-color: #dfe3ee;
    border-radius: 6px;
    color: #24213f;
    box-shadow: none;
}

.request-form-body .input:focus,
.request-form-body .select select:focus,
.request-page .input:focus,
.request-page .select select:focus,
.request-page .textarea:focus {
    border-color: #671cc9;
    box-shadow: 0 0 0 3px rgba(103, 28, 201, .12);
}

.request-page .form-layout {
    width: 100%;
    max-width: none;
    margin: 0;
}

.request-page .form-layout.is-stacked {
    width: 100% !important;
    max-width: none !important;
}

.request-page .form-layout .form-outer {
    width: 100%;
    max-width: none;
}

.request-page .form-body {
    padding: 0;
}

.request-page .form-section {
    padding: 24px 28px;
    border-bottom: 1px solid #eceef5;
}

.request-page .form-layout.is-stacked .form-outer .form-body .form-section {
    padding: 28px;
}

.request-page .form-section:last-child {
    border-bottom: 0;
}

.request-page .form-fieldset,
.request-page .columns {
    width: 100%;
}

.request-page .form-fieldset {
    max-width: none !important;
    margin: 0 !important;
    padding: 0;
}

.request-page .form-fieldset > .columns,
.request-page .form-fieldset > .columns.is-multiline {
    max-width: none !important;
    margin-left: -10px;
    margin-right: -10px;
}

.request-page .columns.is-multiline {
    margin-left: 0;
    margin-right: 0;
}

.request-page .columns.is-multiline > .column {
    padding-left: 10px;
    padding-right: 10px;
}

.request-page .columns.is-multiline > .column.is-6,
.request-page .columns.is-multiline > .column.is-4,
.request-page .columns.is-multiline > .column.is-8,
.request-page .columns.is-multiline > .column.is-14 {
    flex: none;
    width: 50%;
}

.request-page .columns.is-multiline > .column.is-12 {
    flex: none;
    width: 100%;
}

.request-page .fieldset-heading h3,
.request-page .form-section p[style*="font-weight"] {
    margin: 0 0 18px !important;
    color: #24213f !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
}

.request-page .dashboard-card {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.request-page .radio.is-outlined {
    min-height: 42px;
    margin: 6px 8px 6px 0;
    border-radius: 8px;
}

.conditional-section {
    display: none;
}

.conditional-section.is-visible {
    display: block;
}

.request-page .conditional-section {
    margin: 16px 0;
    padding: 20px !important;
    border: 1px solid #e3e6ef;
    border-radius: 8px;
    background: #fff;
    width: 100%;
}

.request-page .conditional-section > .columns {
    width: 100%;
}

.request-page .conditional-section hr {
    display: none;
}

.request-actions {
    display: flex;
    justify-content: flex-start;
    gap: 16px;
    padding: 20px 28px 26px;
    border-top: 1px solid #eceef5;
    background: #fbfcff;
}

.request-content-grid .request-actions {
    justify-content: flex-start;
}

.request-actions .button:last-child {
    margin-left: auto;
}

.request-actions .button {
    min-width: 150px;
    justify-content: center;
    border-radius: 6px;
    font-weight: 700;
}

.request-aside-card {
    padding: 24px;
}

.request-aside-card h3 {
    margin: 0 0 10px;
    color: #24213f;
    font-size: 1rem;
    font-weight: 800;
}

.request-aside-card p {
    color: #6d7390;
    font-size: .9rem;
    line-height: 1.65;
}

.request-page .radio {
    color: #30344f;
}

.request-section {
    padding: 24px 28px;
    border-bottom: 1px solid #eceef5;
}

.request-section h3 {
    margin: 0 0 6px;
    color: #24213f;
    font-size: 1rem;
    font-weight: 800;
}

.request-section p {
    margin: 0;
    color: #6d7390;
    font-size: .92rem;
    line-height: 1.6;
}

.request-choice-list {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.request-choice-list .radio {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    min-height: 72px;
    padding: 18px;
    border: 1px solid #dfe3ee;
    border-radius: 8px;
    background: #fff;
    color: #30344f;
    font-weight: 700;
    line-height: 1.45;
}

.request-choice-list .radio:hover {
    border-color: #bba7e7;
    background: #fbf9ff;
}

.request-choice-list .radio input {
    margin-top: 4px;
}

.request-choice-list .radio span:last-child {
    flex: 1;
}

.request-period-list {
    margin-top: 16px;
}

.request-period-list .field.is-grouped {
    gap: 12px;
}

.request-period-list .radio {
    min-width: 128px;
    justify-content: center;
    padding: 12px 16px;
    border: 1px solid #dfe3ee;
    border-radius: 8px;
    background: #fff;
    color: #30344f;
    font-weight: 800;
}

.request-workspace-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 18px;
}

.request-field label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: #30344f;
    font-size: .9rem;
    font-weight: 700;
}

.request-field .select select,
.request-field .textarea {
    min-height: 46px;
    border-color: #dfe3ee;
    border-radius: 6px;
    color: #24213f;
    box-shadow: none;
}

.request-field .select select:focus,
.request-field .textarea:focus {
    border-color: #671cc9;
    box-shadow: 0 0 0 3px rgba(103, 28, 201, .12);
}

.request-address {
    margin-top: 18px;
}

.request-section .form-fieldset,
.request-section .field,
.request-section .control,
.request-form-card .request-section .form-fieldset,
.request-form-card .request-section .field,
.request-form-card .request-section .control,
.request-form-card .request-payment-options {
    width: 100% !important;
    max-width: none !important;
}

.request-table {
    margin-top: 18px;
    border: 1px solid #e3e6ef;
    border-radius: 8px;
    overflow: hidden;
}

.request-table .table {
    margin-bottom: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.request-table th {
    background: #f0f2f7;
    color: #24213f;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.request-table td,
.request-table th {
    padding: 8px 10px;
    vertical-align: middle;
}

.request-table .column {
    padding: 4px 0;
}

.request-table h4 {
    margin: 0;
    color: #24213f;
    font-size: .82rem;
    font-weight: 900;
    line-height: 1.3;
}

.request-table .input {
    min-height: 34px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #24213f;
    font-weight: 700;
}

.request-payment-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
    width: 100%;
}

.request-payment-options .radio {
    width: 100% !important;
    min-height: 58px;
    margin: 0;
    padding: 16px;
    border: 1px solid #dfe3ee;
    border-radius: 8px;
    background: #fff;
    color: #30344f;
    font-weight: 800;
}

.request-reference {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f4f0fb;
    color: #671cc9;
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
}

.request-summary-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border: 1px solid #e3e6ef;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.request-summary-item {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    gap: 18px;
    min-height: 0;
    padding: 14px 18px;
    border: 0;
    border-bottom: 1px solid #eceef5;
    border-radius: 0;
    background: #fff;
}

.request-summary-item:last-child {
    border-bottom: 0;
}

.request-summary-item span {
    display: block;
    margin-bottom: 0;
    color: #717891;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.request-summary-item strong {
    display: block;
    color: #24213f;
    font-size: .98rem;
    font-weight: 800;
    line-height: 1.45;
}

.download-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    margin-top: 22px;
    padding: 22px;
    border-radius: 8px;
    background: #f4f0fb;
}

.download-panel h3 {
    margin: 0 0 6px;
    color: #24213f;
    font-size: 1.05rem;
    font-weight: 800;
}

.download-panel p {
    margin: 0;
    color: #625b73;
}

.download-panel .button {
    min-width: 150px;
    justify-content: center;
    border-radius: 6px;
    font-weight: 700;
}

.deposit-block {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.agency-link,
.deposit-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px;
    border: 1px solid #e3e6ef;
    border-radius: 8px;
    background: #fff;
    color: inherit;
}

.agency-link:hover {
    border-color: rgba(103, 28, 201, .35);
}

.agency-link .icon,
.deposit-note .icon {
    width: 24px;
    min-width: 24px;
    color: #671cc9;
}

.agency-link strong,
.deposit-note strong {
    color: #24213f;
    font-weight: 800;
}

.agency-link span,
.deposit-note span {
    display: block;
    margin-top: 4px;
    color: #6d7390;
    font-size: .92rem;
    line-height: 1.5;
}

.request-check-list {
    margin: 18px 0 0;
}

.request-check-list li {
    display: flex;
    gap: 10px;
    color: #3f435d;
    font-size: .9rem;
    line-height: 1.45;
}

.request-check-list li + li {
    margin-top: 12px;
}

.request-check-list i {
    width: 18px;
    min-width: 18px;
    color: #671cc9;
}

.request-check-list svg,
.request-check-list .feather {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    margin-top: 1px;
    color: #671cc9;
    stroke-width: 2.5;
}

.request-notice {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 8px;
    background: #f4f0fb;
    color: #4c4262;
    font-size: .86rem;
    line-height: 1.55;
}

.popup-container {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    z-index: 1000;
    background: rgba(24, 24, 38, .52);
    transition: opacity .25s ease, visibility .25s ease;
}

.request-notification-popup {
    background: rgba(23, 24, 38, .46);
    backdrop-filter: blur(1px);
}

.popup-container.show {
    visibility: visible;
    opacity: 1;
}

.popup {
    width: min(420px, calc(100% - 32px));
    padding: 26px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 22px 50px rgba(28, 29, 48, .22);
    text-align: center;
}

.request-notification-popup .popup {
    width: min(390px, calc(100% - 32px));
    padding: 24px 26px 26px;
    border: 1px solid #e7e9f2;
    box-shadow: 0 18px 42px rgba(28, 29, 48, .18);
}

.popup-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    margin-bottom: 12px;
    padding: 0 11px;
    border-radius: 999px;
    background: #f4f0fb;
    color: #671cc9;
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.popup h2 {
    margin: 0 0 10px;
    color: #24213f;
    font-size: 1.25rem;
    font-weight: 800;
}

.request-notification-popup .popup h2 {
    margin-bottom: 8px;
    font-size: 1.18rem;
}

.popup p {
    margin: 0 0 18px;
    color: #636982;
    line-height: 1.6;
}

.request-notification-popup .popup p {
    margin-bottom: 20px;
    color: #68708a;
    font-size: .95rem;
    line-height: 1.55;
}

.request-notification-popup .popup .button {
    min-width: 180px;
    min-height: 42px;
    border-radius: 6px;
    font-size: .92rem;
    font-weight: 800;
}

.webapp-navbar {
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
}

.webapp-navbar .webapp-navbar-inner {
    width: min(100%, 1440px);
    margin: 0 auto;
    padding-right: 28px;
    padding-left: 28px;
}

.webapp-navbar .left .light-image {
    width: 220px !important;
    max-width: 220px !important;
    height: auto !important;
}

.webapp-navbar .button.h-button,
.webapp-navbar button.button {
    height: 42px;
    min-width: 0;
    padding: 0 16px;
    font-size: .88rem;
    font-weight: 700;
}

.webapp-navbar .button span,
.webapp-navbar button.button span,
.webapp-navbar .head-action a,
.webapp-navbar .head-action span {
    font-weight: 700;
}

.webapp-navbar .service-dropdown-menu {
    min-width: 360px;
    max-width: 360px;
    padding-top: 12px;
}

.dropdown.is-spaced .dropdown-item.is-media .icon
{
    height: 42px;
    width: 42px;
}

.webapp-navbar .service-dropdown-content {
    border: 1px solid #e3e6ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(36, 33, 63, .12);
}

.webapp-navbar .webapp-navbar-inner .center .centered-drops .centered-drop .dropdown .dropdown-menu, .webapp-navbar .webapp-navbar-inner .center .centered-drops .centered-button .dropdown .dropdown-menu
{
    margin-top: 0 ;
}

.webapp-navbar .service-dropdown-content .dropdown-item.is-media {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    color: #24213f;
    white-space: normal;
    overflow: hidden;
}

.webapp-navbar .service-dropdown-content .dropdown-item.is-media:hover {
    background: #f8f4ff;
}

.webapp-navbar .service-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 6px;
    background: #f0e7ff;
    color: #671cc9;
}

.webapp-navbar .service-nav-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.1;
}

.webapp-navbar .service-dropdown-content .meta {
    min-width: 0;
    overflow: hidden;
}

.webapp-navbar .service-dropdown-content .meta > span:first-child {
    display: block;
    margin-bottom: 2px;
    color: #24213f;
    font-size: .9rem;
    font-weight: 850;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
}

.webapp-navbar .service-dropdown-content .meta > span:last-child {
    display: -webkit-box;
    overflow: hidden;
    color: #7b839c;
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.client-page {
    width: 100%;
    margin-left: 0;
    padding: 124px 0 78px;
    background: #f6f7fb;
}

.client-page-shell {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
}

.client-page-heading {
    max-width: 760px;
    margin-bottom: 30px;
}

.client-page-heading h1 {
    margin: 12px 0 8px;
    color: #24213f;
    font-size: 2.35rem;
    font-weight: 900;
    line-height: 1.15;
}

.client-page-heading p {
    max-width: 680px;
    margin: 0;
    color: #626a84;
    font-size: 1rem;
    line-height: 1.7;
}

.client-card {
    border: 1px solid #e2e5ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(38, 42, 64, .07);
}

.client-grid {
    display: grid;
    gap: 24px;
    align-items: start;
}

.client-grid.is-two-columns {
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
}

.client-grid.is-even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.client-button,
.client-page .button,
.request-page .button,
.webapp-navbar .button {
    border-radius: 6px !important;
}

.client-button,
.client-page .button,
.request-page .button {
    min-height: 40px;
    font-size: .88rem;
    font-weight: 850;
}

.client-button.is-primary,
.client-page .button.is-primary,
.request-page .button.is-primary,
.request-actions .button.is-primary,
.download-panel .button.is-primary,
.client-profile-primary,
.client-modal-danger {
    border-color: #671cc9;
    background: #671cc9;
    color: #fff !important;
}

.client-button.is-primary:hover,
.client-page .button.is-primary:hover,
.request-page .button.is-primary:hover,
.request-actions .button.is-primary:hover,
.download-panel .button.is-primary:hover,
.client-profile-primary:hover,
.client-modal-danger:hover {
    border-color: #5b18b4;
    background: #5b18b4;
    color: #fff !important;
}

.client-button.is-secondary,
.client-profile-secondary,
.client-modal-secondary,
.request-page .button.is-light,
.request-page .button.is-dark-outlined {
    border: 1px solid #dfe3ee;
    background: #fff;
    color: #424861;
}

.client-button.is-secondary:hover,
.client-profile-secondary:hover,
.client-modal-secondary:hover,
.request-page .button.is-light:hover,
.request-page .button.is-dark-outlined:hover {
    border-color: #cfd5e2;
    background: #fafbfe;
    color: #24213f;
}

.webapp-navbar .button.is-warning.is-outlined {
    min-height: 40px;
    border: 1px solid #dfe3ee !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #424861 !important;
    font-size: .88rem;
    font-weight: 850;
}

.webapp-navbar .button.is-warning.is-outlined:hover {
    border-color: #cfd5e2 !important;
    background: #fafbfe !important;
    color: #24213f !important;
}

.client-requests-page.view-wrapper {
    width: 100%;
    margin-left: 0;
    padding: 0;
    background: #f6f7fb;
}

.client-requests-page .page-content-wrapper {
    min-height: 620px;
}

.client-requests-shell {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
    padding: 124px 0 70px;
}

.client-requests-heading {
    margin-bottom: 26px;
}

.client-requests-heading span {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: #f0e9fb;
    color: #671cc9;
    font-size: .74rem;
    font-weight: 850;
    text-transform: uppercase;
}

.client-requests-heading h1 {
    margin: 12px 0 8px;
    color: #24213f;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.2;
}

.client-requests-heading p {
    max-width: 760px;
    color: #68708a;
    font-size: .98rem;
    line-height: 1.65;
}

.client-requests-card,
.client-empty-state {
    border: 1px solid #e3e6ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(35, 38, 59, .06);
}

.client-requests-card {
    overflow: visible;
}

.client-requests-table-wrap {
    width: 100%;
    overflow: visible;
}

.client-requests-table {
    display: table;
    width: 100%;
    min-width: 1040px;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    background: #fff;
}

.client-requests-table thead {
    background: #fafbfe;
}

.client-requests-table tr {
    border: 0;
    background: transparent;
}

.client-requests-table tbody tr {
    border-top: 1px solid #edf0f6;
}

.client-requests-table tbody tr:hover {
    background: #fbfaff;
}

.client-requests-table th,
.client-requests-table td {
    border: 0;
    padding: 18px 18px;
    color: #30344d;
    font-size: .92rem;
    line-height: 1.45;
    vertical-align: middle;
}

.client-requests-table th {
    color: #252a44;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: 0;
    text-align: left;
    text-transform: uppercase;
}

.client-requests-table th:last-child,
.client-requests-table td:last-child {
    width: 136px;
    text-align: right;
}

.client-reference {
    color: #3b256b;
    font-weight: 850;
    white-space: nowrap;
}

.request-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    background: #eef1f6;
    color: #4d556f;
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
}

.request-status-badge.is-submit,
.request-status-badge.is-sent,
.request-status-badge.is-received,
.request-status-badge.is-processing {
    background: #eef5ff;
    color: #235d9f;
}

.request-status-badge.is-draft {
    background: #f5f1e9;
    color: #7a5a1c;
}

.request-status-badge.is-approved,
.request-status-badge.is-accepted,
.request-status-badge.is-generated,
.request-status-badge.is-delivered,
.request-status-badge.is-closed,
.request-status-badge.is-completed {
    background: #edf8f2;
    color: #1f7a4d;
}

.request-status-badge.is-rejected,
.request-status-badge.is-revoked {
    background: #fff0f0;
    color: #b4232f;
}

.client-request-actions {
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.client-actions-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: 118px;
    height: 38px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #dfe3ee;
    border-radius: 6px;
    background: #fff;
    color: #424861;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.client-actions-trigger svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.6;
    transition: transform .18s ease;
}

.client-request-actions.is-active .client-actions-trigger {
    border-color: rgba(103, 28, 201, .32);
    background: #f8f4ff;
    color: #671cc9;
}

.client-request-actions.is-active .client-actions-trigger svg {
    transform: rotate(180deg);
}

.client-actions-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    display: none;
    width: 210px;
    padding: 8px;
    border: 1px solid #e3e6ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(35, 38, 59, .16);
    text-align: left;
}

.client-request-actions.is-active .client-actions-menu {
    display: block;
}

.client-action-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 6px;
    color: #424861;
    font-size: .82rem;
    font-weight: 800;
}

.client-action-item i {
    color: #671cc9;
    font-size: .92rem;
}

.client-action-item:hover {
    background: #f8f4ff;
    color: #671cc9;
}

.client-action-item.is-danger i,
.client-action-item.is-danger:hover {
    color: #b4232f;
}

.client-action-item.is-danger:hover {
    background: #fff6f6;
}

.client-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0;
    padding: 18px 20px;
    border-top: 1px solid #edf0f6;
}

.client-pagination .pagination-list {
    flex-grow: 0;
    order: 0;
}

.client-pagination-nav {
    display: flex;
    gap: 8px;
}

.client-pagination .pagination-link,
.client-pagination .pagination-previous,
.client-pagination .pagination-next {
    min-width: 34px;
    height: 34px;
    border-color: #dfe3ee;
    box-shadow: none;
    font-size: .86rem;
    font-weight: 850;
}

.client-pagination .pagination-link.is-current {
    border-color: #671cc9;
    background: #671cc9;
    color: #fff;
}

.client-empty-state {
    padding: 36px 32px;
}

.client-empty-state h2 {
    margin: 0 0 8px;
    color: #24213f;
    font-size: 1.25rem;
    font-weight: 900;
}

.client-empty-state p {
    margin: 0 0 20px;
    color: #68708a;
}

.client-delete-modal .modal-card {
    width: min(92vw, 440px);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 18px 46px rgba(21, 24, 39, .2);
}

.client-delete-modal .modal-background {
    background: rgba(20, 22, 34, .44);
}

.client-delete-modal .modal-card-head,
.client-delete-modal .modal-card-body,
.client-delete-modal .modal-card-foot {
    border: 0;
    background: #fff;
}

.client-delete-modal .modal-card-head {
    align-items: center;
    padding: 24px 26px 10px;
}

.client-delete-modal .delete {
    width: 26px;
    min-width: 26px;
    height: 26px;
    min-height: 26px;
    margin-left: auto;
    background: #f1f2f6;
}

.client-delete-modal .delete::before,
.client-delete-modal .delete::after {
    background-color: #68708a;
}

.client-delete-modal .modal-card-title {
    color: #24213f;
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1.25;
}

.client-delete-modal .modal-card-body {
    padding: 8px 26px 24px;
    color: #68708a;
    font-size: .95rem;
    line-height: 1.55;
}

.client-delete-modal .modal-card-foot {
    justify-content: flex-end;
    gap: 10px;
    padding: 0 26px 26px;
}

.client-delete-modal .modal-card-foot .button {
    min-width: 112px;
    height: 40px;
    min-height: 40px;
    border-radius: 6px;
    font-size: .86rem;
    font-weight: 850;
}

.client-modal-secondary {
    border: 1px solid #dfe3ee;
    background: #fff;
    color: #424861;
}

.client-modal-secondary:hover {
    border-color: #cfd5e2;
    background: #fafbfe;
    color: #24213f;
}

.client-modal-danger {
    border: 1px solid #671cc9;
    background: #671cc9;
    color: #fff !important;
}

.client-modal-danger:hover {
    border-color: #5b18b4;
    background: #5b18b4;
    color: #fff !important;
}

.client-revoke-modal .modal-background {
    background: rgba(20, 22, 34, .52);
}

.client-revoke-modal .modal-card {
    width: min(92vw, 760px);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 24px 58px rgba(21, 24, 39, .24);
}

.client-revoke-modal .modal-card-head,
.client-revoke-modal .modal-card-body,
.client-revoke-modal .modal-card-foot {
    border: 0;
    background: #fff;
}

.client-revoke-modal .modal-card-head {
    align-items: flex-start;
    padding: 28px 32px 18px;
    border-bottom: 1px solid #edf0f6;
}

.client-revoke-modal .modal-card-title {
    color: #24213f;
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1.25;
}

.client-revoke-modal-subtitle {
    margin-top: 8px;
    color: #68708a;
    font-size: .9rem;
    font-weight: 650;
}

.client-revoke-modal .delete {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    margin-left: auto;
    background: #f1f2f6;
}

.client-revoke-modal .delete::before,
.client-revoke-modal .delete::after {
    background-color: #68708a;
}

.client-revoke-modal .modal-card-body {
    padding: 26px 32px 28px;
}

.client-revoke-alert,
.client-revoke-error {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 8px;
    font-weight: 800;
    line-height: 1.4;
}

.client-revoke-alert {
    border: 1px solid #ffd5df;
    background: #fff3f6;
    color: #b42346;
}

.client-revoke-alert svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.client-revoke-error {
    border: 1px solid #ffc7c7;
    background: #fff0f0;
    color: #b4232f;
}

.client-revoke-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 24px;
}

.client-revoke-summary > div {
    min-width: 0;
    padding: 14px;
    border: 1px solid #e6e9f2;
    border-radius: 8px;
    background: #fbfcff;
}

.client-revoke-summary dt {
    margin-bottom: 6px;
    color: #737b94;
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.client-revoke-summary dd {
    margin: 0;
    color: #30344d;
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.client-revoke-field {
    margin-bottom: 18px;
}

.client-revoke-field .label {
    color: #30344d;
    font-size: .88rem;
    font-weight: 850;
}

.client-revoke-help {
    margin: -4px 0 10px;
    color: #68708a;
    font-size: .84rem;
    font-weight: 650;
    line-height: 1.45;
}

.client-revoke-field .input,
.client-revoke-field .select select {
    min-height: 46px;
    border-color: #dfe3ee;
    border-radius: 6px;
    color: #24213f;
    box-shadow: none;
}

.client-revoke-field .input:focus,
.client-revoke-field .select select:focus {
    border-color: #671cc9;
    box-shadow: 0 0 0 3px rgba(103, 28, 201, .12);
}

.client-revoke-modal .modal-card-foot {
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 32px 28px;
    border-top: 1px solid #edf0f6;
}

.client-revoke-modal .modal-card-foot .button {
    min-width: 142px;
    min-height: 44px;
    border-radius: 6px;
    font-size: .9rem;
    font-weight: 850;
}

.client-revoke-confirm {
    border-color: #e9265f;
    background: #e9265f;
    color: #fff;
}

.client-revoke-confirm:hover,
.client-revoke-confirm:focus {
    border-color: #cf1f52;
    background: #cf1f52;
    color: #fff;
}

.client-request-detail-page .client-requests-shell {
    width: min(1120px, calc(100% - 48px));
}

.client-profile-grid {
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
}

.client-profile-summary {
    display: grid;
    gap: 18px;
    padding: 28px;
}

.client-profile-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: #f0e9fb;
    color: #671cc9;
}

.client-profile-avatar svg {
    width: 23px;
    height: 23px;
    stroke-width: 2.4;
}

.client-profile-summary h2 {
    margin: 0;
    color: #24213f;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.25;
}

.client-profile-summary p {
    margin: 6px 0 0;
    color: #68708a;
    font-size: .9rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.client-profile-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(103, 28, 201, .18);
    border-radius: 8px;
    background: #fbf8ff;
    color: #671cc9;
    font-size: .88rem;
    font-weight: 850;
}

.client-profile-card {
    overflow: hidden;
}

.client-profile-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 28px;
    border-bottom: 1px solid #edf0f6;
}

.client-profile-card-head h2 {
    margin: 0;
    color: #24213f;
    font-size: 1.22rem;
    font-weight: 900;
    line-height: 1.25;
}

.client-profile-card-head p {
    margin: 6px 0 0;
    color: #717891;
    font-size: .92rem;
    line-height: 1.55;
}

.client-profile-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.client-profile-actions .button {
    min-width: 116px;
    min-height: 40px;
    border-radius: 6px;
    font-size: .86rem;
    font-weight: 850;
}

.client-profile-secondary {
    border: 1px solid #dfe3ee;
    background: #fff;
    color: #424861;
}

.client-profile-secondary:hover {
    border-color: #cfd5e2;
    background: #fafbfe;
    color: #24213f;
}

.client-profile-primary {
    border: 1px solid #671cc9;
    background: #671cc9;
    color: #fff !important;
}

.client-profile-primary:hover {
    border-color: #5b18b4;
    background: #5b18b4;
    color: #fff !important;
}

.client-profile-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 24px;
    padding: 28px;
}

.client-profile-form .field {
    margin: 0;
}

.client-profile-form .field.is-full {
    grid-column: 1 / -1;
}

.client-profile-form label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    color: #30344f;
    font-size: .88rem;
    font-weight: 800;
}

.client-profile-form .control.has-icon {
    position: relative;
    display: block;
}

.client-profile-form .input {
    display: block;
    width: 100%;
    height: 48px;
    min-height: 48px;
    padding-left: 46px;
    border: 1px solid #dfe3ee;
    border-radius: 6px;
    background: #fff;
    color: #24213f;
    font-size: .94rem;
    font-weight: 700;
    box-shadow: none;
}

.client-profile-form .input:focus {
    border-color: #671cc9;
    box-shadow: 0 0 0 3px rgba(103, 28, 201, .12);
}

.client-profile-form .input:disabled {
    background: #f5f6fa;
    color: #68708a;
    opacity: 1;
}

.client-profile-form .form-icon {
    position: absolute;
    top: 24px !important;
    left: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    transform: translateY(-50%) !important;
    color: #b8becd;
    pointer-events: none;
    z-index: 2;
}

.client-profile-form .form-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.2;
}

.client-profile-form .help {
    min-height: 18px;
    margin-top: 6px;
    font-size: .78rem;
}

.client-detail-topbar {
    margin-bottom: 18px;
}

.client-back-link {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid #dfe3ee;
    border-radius: 6px;
    background: #fff;
    color: #424861;
    font-size: .88rem;
    font-weight: 850;
}

.client-back-link svg {
    width: 17px;
    height: 17px;
    margin-right: 8px;
    stroke-width: 2.2;
}

.client-back-link:hover {
    border-color: rgba(103, 28, 201, .28);
    background: #f8f4ff;
    color: #671cc9;
}

.client-detail-heading {
    margin-bottom: 20px;
}

.client-detail-single {
    padding: 28px 30px;
}

.client-detail-section {
    padding: 24px 0;
    border-top: 1px solid #edf0f6;
}

.client-detail-section:first-child {
    padding-top: 0;
    border-top: 0;
}

.client-detail-section:last-child {
    padding-bottom: 0;
}

.client-detail-section h2 {
    margin: 0 0 18px;
    color: #24213f;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.25;
}

.client-detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 28px;
    margin: 0;
}

.client-detail-list.is-three-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.client-detail-list > div {
    min-width: 0;
}

.client-detail-list dt {
    margin-bottom: 6px;
    color: #737b94;
    font-size: .76rem;
    font-weight: 850;
    text-transform: uppercase;
}

.client-detail-list dd {
    margin: 0;
    color: #30344d;
    font-size: .92rem;
    font-weight: 750;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.client-detail-list .request-status-badge {
    margin-top: 0;
}

.client-detail-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.client-detail-summary > div {
    min-height: 96px;
    padding: 20px;
    border: 1px solid #e3e6ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(35, 38, 59, .05);
}

.client-detail-summary span {
    display: block;
    margin-bottom: 8px;
    color: #737b94;
    font-size: .76rem;
    font-weight: 850;
    text-transform: uppercase;
}

.client-detail-summary strong {
    color: #24213f;
    font-size: 1rem;
    font-weight: 900;
}

.client-detail-summary .request-status-badge {
    margin-top: 0;
}

.client-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.client-detail-card {
    padding: 24px;
    border: 1px solid #e3e6ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(35, 38, 59, .05);
}

.client-detail-card.is-wide {
    grid-column: 1 / -1;
}

.client-detail-card h2 {
    margin: 0 0 18px;
    color: #24213f;
    font-size: 1.05rem;
    font-weight: 900;
}

.client-detail-card dl {
    margin: 0;
}

.client-detail-card dl > div {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 18px;
    padding: 12px 0;
    border-top: 1px solid #edf0f6;
}

.client-detail-card dl > div:first-child {
    border-top: 0;
    padding-top: 0;
}

.client-detail-card dl > div:last-child {
    padding-bottom: 0;
}

.client-detail-card dt {
    color: #737b94;
    font-size: .82rem;
    font-weight: 850;
}

.client-detail-card dd {
    margin: 0;
    color: #30344d;
    font-size: .92rem;
    font-weight: 650;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.client-detail-list-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
}

.public-auth-page {
    display: flex;
    align-items: flex-start;
    min-height: 680px;
    padding: 86px 0 70px;
    background: #f6f7fb;
}

.public-auth-page .container {
    width: 100%;
}

.public-auth-shell {
    width: min(100%, 620px);
    margin: 0 auto;
}

.public-auth-shell.is-compact {
    width: min(100%, 520px);
}

.public-auth-kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: 14px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #f0e9fb;
    color: #671cc9;
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.public-auth-card {
    padding: 34px 38px 30px;
    border: 1px solid #e2e5ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(38, 42, 64, .08);
}

.public-auth-head {
    margin-bottom: 24px;
    text-align: center;
}

.public-auth-head h2 {
    margin: 0;
    color: #24213f;
    font-size: 1.75rem;
    font-weight: 900;
}

.public-auth-head p {
    margin: 8px 0 0;
    color: #717891;
    line-height: 1.55;
}

.public-auth-form .field {
    margin-bottom: 16px;
}

.public-auth-form .label {
    color: #3d405c;
    font-size: .88rem;
    font-weight: 800;
}

.public-auth-form .input {
    min-height: 48px;
    border-color: #dfe3ee;
    border-radius: 6px;
    color: #24213f;
    box-shadow: none;
}

.public-auth-form .input:focus {
    border-color: #671cc9;
    box-shadow: 0 0 0 3px rgba(103, 28, 201, .12);
}

.public-auth-form .icon {
    color: #9aa2b8;
}

.public-auth-message {
    margin: 4px 0 18px;
    border-radius: 8px;
    font-weight: 700;
}

.public-auth-submit {
    min-height: 48px;
    border-radius: 6px;
    font-weight: 800;
}

.public-auth-secondary-form {
    margin-top: 12px;
}

.public-auth-secondary-button {
    min-height: 44px;
    border-radius: 6px;
    color: #4a4f6a;
    font-weight: 800;
}

.public-auth-code-input {
    letter-spacing: .08em;
}

.public-auth-captcha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.public-auth-captcha .captcha {
    display: block;
    width: 100%;
    min-height: 58px;
    max-height: 72px;
    padding: 8px 12px;
    border: 1px solid #dfe3ee;
    border-radius: 6px;
    background: #fbfcff;
    object-fit: contain;
}

.public-auth-refresh {
    min-height: 42px;
    border-radius: 6px;
    color: #4a4f6a;
    font-weight: 800;
}

.public-auth-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #edf0f6;
}

.public-auth-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid #e5e8f1;
    border-radius: 6px;
    color: #4a4f6a;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
}

.public-auth-links a:hover {
    border-color: rgba(103, 28, 201, .35);
    color: #671cc9;
    background: #f7f2ff;
}

.public-auth-links.is-single {
    grid-template-columns: 1fr;
}

.public-auth-links.is-single a {
    min-height: 42px;
}

.public-contact-page {
    padding: 124px 0 78px;
    background: #f6f7fb;
}

.public-contact-heading {
    max-width: 720px;
    margin-bottom: 30px;
}

.public-contact-heading h1 {
    margin: 0;
    color: #24213f;
    font-size: 2.35rem;
    font-weight: 900;
    line-height: 1.15;
}

.public-contact-heading p {
    max-width: 620px;
    margin: 12px 0 0;
    color: #626a84;
    font-size: 1rem;
    line-height: 1.7;
}

.public-contact-grid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.public-contact-info,
.public-contact-form {
    border: 1px solid #e2e5ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(38, 42, 64, .07);
}

.public-contact-info {
    padding: 28px;
}

.public-contact-form {
    padding: 30px;
}

.public-contact-info h2,
.public-contact-form h2 {
    margin: 0;
    color: #24213f;
    font-size: 1.25rem;
    font-weight: 900;
}

.public-contact-form > p {
    margin: 8px 0 22px;
    color: #717891;
    line-height: 1.6;
}

.public-contact-list {
    display: grid;
    gap: 18px;
    margin-top: 22px;
}

.public-contact-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.public-contact-item .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #f0e9fb;
    color: #671cc9;
}

.public-contact-item strong {
    display: block;
    color: #3d405c;
    font-size: .86rem;
    font-weight: 900;
}

.public-contact-item p {
    margin: 4px 0 0;
    color: #626a84;
    line-height: 1.55;
}

.public-contact-item a {
    color: #4a4f6a;
    font-weight: 700;
}

.public-contact-item a:hover {
    color: #671cc9;
}

.public-contact-hubspot {
    min-height: 280px;
}

.public-support-page {
    padding: 124px 0 78px;
    background: #f6f7fb;
}

.public-support-heading {
    max-width: 760px;
    margin-bottom: 30px;
}

.public-support-heading h1 {
    margin: 0;
    color: #24213f;
    font-size: 2.35rem;
    font-weight: 900;
    line-height: 1.15;
}

.public-support-heading p {
    max-width: 680px;
    margin: 12px 0 0;
    color: #626a84;
    font-size: 1rem;
    line-height: 1.7;
}

.public-support-priority {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 20px;
    margin-bottom: 34px;
}

.public-support-feature,
.public-support-card {
    border: 1px solid #e2e5ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(38, 42, 64, .07);
}

.public-support-feature {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 18px;
    padding: 28px;
}

.public-support-feature.is-primary-resource {
    border-color: rgba(103, 28, 201, .28);
    background: #fbf9ff;
}

.public-support-icon,
.public-support-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f0e9fb;
    color: #671cc9;
}

.public-support-icon {
    width: 54px;
    height: 54px;
}

.public-support-card-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
}

.public-support-feature-body span {
    display: block;
    margin-bottom: 8px;
    color: #671cc9;
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.public-support-feature h2,
.public-support-section-head h2 {
    margin: 0;
    color: #24213f;
    font-weight: 900;
}

.public-support-feature h2 {
    font-size: 1.35rem;
}

.public-support-feature p,
.public-support-section-head p,
.public-support-card p {
    color: #626a84;
    line-height: 1.6;
}

.public-support-feature p {
    margin: 10px 0 20px;
}

.public-support-feature .button {
    min-height: 42px;
    border-radius: 6px;
    font-weight: 800;
}

.public-support-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.public-support-section-head h2 {
    font-size: 1.35rem;
}

.public-support-section-head p {
    max-width: 520px;
    margin: 0;
}

.public-support-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.public-support-card {
    display: flex;
    flex-direction: column;
    min-height: 260px;
    padding: 24px;
}

.public-support-card h3 {
    margin: 0;
    color: #24213f;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.35;
}

.public-support-card p {
    margin: 10px 0 20px;
}

.public-support-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin-top: auto;
    padding: 0 16px;
    border: 1px solid rgba(103, 28, 201, .32);
    border-radius: 6px;
    color: #671cc9;
    font-weight: 850;
}

.public-support-card a:hover {
    background: #f7f2ff;
}

.request-page .form-datepicker[readonly] {
    background: #fff;
    cursor: pointer;
}

.pika-single {
    z-index: 20000 !important;
    width: 300px !important;
    border: 1px solid #dfe3ef !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 14px 34px rgba(38, 42, 64, .16) !important;
    color: #24213f !important;
    font-family: inherit !important;
    overflow: hidden !important;
}

.pika-single.is-bound {
    position: absolute !important;
}

.pika-lendar {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
}

.pika-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    margin-bottom: 12px !important;
    text-align: center !important;
}

.pika-label {
    display: inline-flex !important;
    align-items: center !important;
    height: 32px !important;
    padding: 0 3px !important;
    background: transparent !important;
    color: #24213f !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.pika-title select {
    cursor: pointer !important;
}

.pika-prev,
.pika-next {
    position: absolute !important;
    top: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    background: transparent !important;
    opacity: 1 !important;
    overflow: hidden !important;
    text-indent: -9999px !important;
}

.pika-prev {
    left: 0 !important;
    float: none !important;
}

.pika-next {
    right: 0 !important;
    float: none !important;
}

.pika-prev::after,
.pika-next::after {
    content: "" !important;
    display: block !important;
    width: 9px !important;
    height: 9px !important;
    border-top: 2px solid #697086 !important;
    border-right: 2px solid #697086 !important;
}

.pika-prev::after {
    transform: rotate(-135deg) !important;
}

.pika-next::after {
    transform: rotate(45deg) !important;
}

.pika-prev:hover,
.pika-next:hover {
    border-color: #eadfff !important;
    background: #f6f1ff !important;
}

.pika-prev.is-disabled,
.pika-next.is-disabled {
    cursor: default !important;
    opacity: .35 !important;
}

.pika-table {
    display: table !important;
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 5px !important;
    table-layout: fixed !important;
    overflow: visible !important;
}

.pika-table thead {
    display: table-header-group !important;
    border: 0 !important;
    background: transparent !important;
}

.pika-table tbody {
    display: table-row-group !important;
    border: 0 !important;
    background: transparent !important;
}

.pika-table tr {
    display: table-row !important;
}

.pika-table th,
.pika-table td {
    width: 14.2857% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center !important;
    vertical-align: middle !important;
    overflow: visible !important;
}

.pika-table th {
    color: #697086 !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

.pika-table abbr {
    border: 0 !important;
    text-decoration: none !important;
    cursor: default !important;
}

.pika-table td.is-selected,
.pika-table td.is-today,
.pika-table td.has-event,
.pika-table td.is-startrange,
.pika-table td.is-endrange {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.pika-table td::before,
.pika-table td::after,
.pika-table td.is-selected::before,
.pika-table td.is-selected::after {
    content: none !important;
    display: none !important;
}

.pika-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    max-width: 32px !important;
    width: 32px !important;
    min-height: 0 !important;
    max-height: 32px !important;
    height: 32px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #3d405c !important;
    font-size: .88rem !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    text-align: center !important;
}

.pika-button:hover,
.pika-row.pick-whole-week:hover .pika-button {
    background: #f6f1ff !important;
    box-shadow: none !important;
    color: #671cc9 !important;
}

.is-today .pika-button {
    background: #f6f1ff !important;
    color: #671cc9 !important;
    font-weight: 900 !important;
}

.is-selected .pika-button,
.has-event .pika-button,
.is-startrange .pika-button,
.is-endrange .pika-button {
    background: #671cc9 !important;
    box-shadow: none !important;
    color: #fff !important;
    font-weight: 900 !important;
}

.is-disabled .pika-button,
.is-outside-current-month .pika-button {
    background: transparent !important;
    color: #b8becd !important;
    opacity: .45 !important;
    cursor: default !important;
}

.is-disabled .pika-button:hover,
.is-outside-current-month .pika-button:hover {
    background: transparent !important;
    color: #b8becd !important;
}

@media (max-width: 900px) {
    .client-page {
        padding: 104px 0 56px;
    }

    .client-page-shell {
        width: min(1120px, calc(100% - 32px));
    }

    .client-page-heading h1 {
        font-size: 1.8rem;
    }

    .client-grid,
    .client-grid.is-two-columns,
    .client-grid.is-even {
        grid-template-columns: 1fr;
    }

    .client-profile-card-head {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px 20px;
    }

    .client-profile-actions {
        width: 100%;
        justify-content: stretch;
    }

    .client-profile-actions .button {
        flex: 1;
    }

    .client-profile-form {
        grid-template-columns: 1fr;
        padding: 22px 20px;
    }

    .client-detail-list,
    .client-detail-list.is-three-columns {
        grid-template-columns: 1fr;
    }

    .client-detail-single {
        padding: 20px;
    }

    .client-detail-section {
        padding: 20px 0;
    }

    .request-page {
        padding: 104px 0 48px;
    }

    .view-wrapper.is-webapp.request-page {
        padding-top: 104px !important;
    }

    .request-heading h1 {
        font-size: 1.55rem;
    }

    .request-progress-card {
        padding: 16px;
        overflow-x: auto;
    }

    .request-progress-card .steps {
        min-width: 720px;
    }

    .request-progress-card .step-info {
        font-size: .92rem;
    }

    .request-grid,
    .request-content-grid,
    .request-workspace-grid,
    .request-payment-options,
    .request-summary-grid,
    .download-panel {
        grid-template-columns: 1fr;
    }

    .request-form-header,
    .request-form-body,
    .request-page .form-header-inner,
    .request-page .form-section,
    .request-actions {
        padding-left: 20px;
        padding-right: 20px;
    }

    .request-page .form-layout.is-stacked .form-outer .form-body .form-section {
        padding: 20px;
    }

    .request-page .form-header-inner {
        display: block;
    }

    .request-page .columns.is-multiline > .column.is-6,
    .request-page .columns.is-multiline > .column.is-4,
    .request-page .columns.is-multiline > .column.is-8,
    .request-page .columns.is-multiline > .column.is-14 {
        width: 100%;
    }

    .request-actions {
        justify-content: stretch;
        flex-direction: column-reverse;
    }

    .request-actions .button:last-child {
        margin-left: 0;
    }

    .request-actions .button,
    .download-panel .button {
        width: 100%;
    }

    .public-auth-page {
        min-height: 0;
        padding: 44px 0 52px;
    }

    .public-auth-shell {
        width: min(100%, 440px);
    }

    .public-auth-card {
        padding: 24px 20px;
    }

    .public-auth-links {
        grid-template-columns: 1fr;
    }

    .public-auth-captcha {
        grid-template-columns: 1fr;
    }

    .public-contact-page {
        padding: 42px 0 58px;
    }

    .public-contact-heading h1 {
        font-size: 1.85rem;
    }

    .public-contact-grid {
        grid-template-columns: 1fr;
    }

    .public-contact-info,
    .public-contact-form {
        padding: 22px 20px;
    }

    .public-support-page {
        padding: 42px 0 58px;
    }

    .public-support-heading h1 {
        font-size: 1.85rem;
    }

    .public-support-priority,
    .public-support-grid {
        grid-template-columns: 1fr;
    }

    .public-support-feature {
        grid-template-columns: 1fr;
        padding: 22px 20px;
    }

    .public-support-section-head {
        display: block;
    }

    .public-support-section-head p {
        margin-top: 8px;
    }

    .client-requests-shell {
        padding: 36px 16px 52px;
    }

    .client-requests-heading h1 {
        font-size: 1.65rem;
    }

    .client-requests-table {
        min-width: 980px;
    }

    .client-requests-table-wrap {
        overflow-x: auto;
    }

    .client-pagination {
        align-items: flex-start;
        flex-direction: column;
    }

    .client-request-actions {
        justify-content: flex-start;
    }

    .client-detail-summary,
    .client-detail-grid,
    .client-detail-list-grid,
    .client-revoke-summary {
        grid-template-columns: 1fr;
    }

    .client-revoke-modal .modal-card-head,
    .client-revoke-modal .modal-card-body,
    .client-revoke-modal .modal-card-foot {
        padding-left: 20px;
        padding-right: 20px;
    }

    .client-revoke-modal .modal-card-foot {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .client-revoke-modal .modal-card-foot .button {
        width: 100%;
    }

    .client-detail-card {
        padding: 20px;
    }

    .client-detail-card dl > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}