.swal2-popup {
    border-radius: 12px !important;
    padding: 1.5rem !important;
    max-width: 95vw !important;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

.swal2-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    text-align: center !important;
    color: #072E60 !important;
    white-space: normal !important;
}

.swal2-html-container {
    font-size: 14px !important;
    font-weight: 400 !important;
    text-align: center !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    color: #072E60 !important;
}

.swal2-actions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
}

    .swal2-actions .swal2-confirm:not(:only-child),
    .swal2-actions .swal2-cancel:not(:only-child) {
        flex: 1 1 auto !important;
        max-width: 50% !important;
    }

    .swal2-actions .swal2-confirm:only-child,
    .swal2-actions .swal2-cancel:only-child {
        flex: 0 0 auto !important;
        width: auto !important;
        justify-self: center !important;
    }

.swal2-confirm,
.swal2-cancel {
    width: auto !important;
    min-width: max-content !important;
    text-align: center !important;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: 'SF Pro Medium';
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
}

.swal2-confirm {
    background: #072E60 !important;
    color: #FFFFFF !important;
    border: none !important;
}

    .swal2-confirm:hover {
        background: #0a3a7d !important;
    }

.swal2-cancel {
    background: #FFFFFF !important;
    color: #072E60 !important;
    border: 1px solid #072E60 !important;
}

    .swal2-cancel:hover {
        background: #f2f6fa !important;
    }


.swal-text-wrap {
    display: block !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
    max-width: 100% !important;
}

.custom-error-popup {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.error-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.error-icon {
    background: #dc3545;
    color: #fff;
    font-size: 2.5em;
    font-weight: bold;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.error-text {
    font-size: 16px;
    color: #072E60;
    font-weight: 500;
    max-width: 90%;
    word-wrap: break-word;
}

.custom-error-actions {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 20px !important;
}

.custom-error-button {
    background: #072E60 !important;
    color: #fff !important;
    border-radius: 8px !important;
    border: none;
    outline: none;
    padding: 10px 20px !important;
    font-weight: 600 !important;
}




html {
    overscroll-behavior: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
}

#app {
    margin-top: 20px !important;
    background: white !important;
    width: 100vw !important;
    padding-bottom: 100px !important;
}

.title {
    font-size: 24px;
    color: #000000;
}
.form-button {
    width: 100%;
    background: #072E60;
    color: #FFFFFF;
    padding: 10px 16px;
    text-align: center;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    outline: none;
}

.page-header {
    margin: 0 !important;
    padding: 10px 2px;
    background-color: #fff;
    box-sizing: border-box;
}
.form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
}

.dropdown-icon-inside {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    pointer-events: none;
}

    .dropdown-icon-inside img {
        height: 14px;
        width: 14px;
    }

.title-name {
    font-size: 12px;
    color: #171D25;
}

.checkbox-text {
    font-size: 16px;
    color: #000000;
}

.container-fluid {
    min-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 80px;
}

.stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
}

.step-img {
    width: 28px;
    height: 28px;
    z-index: 2;
}

.custom-radio {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

    .custom-radio input[type="radio"] {
        display: none;
    }

    .custom-radio img {
        width: 30px;
        height: 30px;
        margin-bottom: 8px;
    }

.partition-line {
    flex-grow: 1;
    background-color: #ccc;
    border-radius: 2px;
    align-self: center;
    margin: 0 8px;
    transition: background-color 0.3s;
}

.radioinfo {
    font-size: 12px;
    font-family: SF Pro;
}

.button-padding {
    margin-top: 40px;
}


.form-button {
    width: 100%;
    background: #072E60;
    color: #FFFFFF;
    padding: 10px 16px;
    text-align: center;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    outline: none;
}

.btn-half {
    display: flex;
    font-size: 15px;
    font-family: 'SF Pro';
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #fff;
    border: 1px solid #072E60;
    color: #072E60;
    padding: 16px;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    min-height: 48px;
    white-space: nowrap;
    gap: 2px;
}

.btn-adopt {
    display: block;
    width: 100%;
    font-family: 'SF Pro';
    background: #072E60;
    color: #fff;
    padding: 14px;
    border-radius: 8px;
    text-align: center;
    font-weight: normal;
}

.terms {
    font: 16px 'SF Pro';
    color: #000;
}

.form-control {
    border-radius: 0;
    font-size: 13px;
    padding: 12px 5px;
}

.form-control-label {
    width: 100%;
}

.signature-block.draw-signature {
    flex-direction: column;
    height: calc(100vh - 250px);
    padding: 0;
    gap: 10px;
    box-sizing: border-box;
    display: flex;
    width: 90vw;
    margin: 0 auto;
}

.draw-sign-container {
    flex-grow: 3;
    position: relative;
    max-height: 55%;
}

.draw-initial-container {
    flex-grow: 1;
    position: relative;
    max-height: 35%;
}


.draw-sign-container-ls {
    flex-grow: 3;
    position: relative;
    max-height: 80%;
}

.draw-initial-container-ls {
    flex-grow: 1;
    position: relative;
    max-height: 80%;
}



.draw-sign-canvas,
.draw-initial-canvas {
    width: 100%;
    height: 100%;
    border: 2px dotted #072E60;
    border-radius: 8px;
    background-color: #fff;
    margin: 0;
}

.clear-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    z-index: 2;
}

    .clear-btn:hover {
        background: #c82333;
    }

.form-group {
    margin-bottom: 1rem;
}

.modal-header {
    background: var(--primary);
    color: #fff !important;
}

    .modal-header .modal-title {
        color: #fff !important;
    }

.signature-block.font-signature .signature-preview {
    padding: 20px 15px;
    background: var(--secondary-label-light-color);
}

    .signature-block.font-signature .signature-preview .preview-name {
        width: 70%;
        float: left;
        padding-right: 15px;
    }

        .signature-block.font-signature .signature-preview .preview-name .name-signed,
        .signature-block.font-signature .signature-preview .preview-initials .initials-signed {
            display: block;
            font-size: 25px;
            font-family: 'Allura', cursive;
            color: var(--primary-dark);
        }

        .signature-block.font-signature .signature-preview .preview-name .name-label,
        .signature-block.font-signature .signature-preview .preview-initials .initials-label {
            text-transform: uppercase;
            font-size: 12px;
        }

.signature-block.draw-signature .col-draw-sign {
    flex: 0 0 500px;
    max-width: 100%;
}

.signature-block.draw-signature .col-draw-initial {
    flex: 0 0 200px;
    max-width: 100%;
}

.canvas-label {
    position: absolute;
    top: 8px;
    left: 12px;
    font-family: 'SF Pro';
    font-size: 14px;
    font-weight: 600;
    color: #072E60;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.6);
    padding: 2px 6px;
    border-radius: 4px;
}

.header-fixed {
    flex-shrink: 0;
}

.back-button {
    height: 30px;
    margin-right: 12px;
}

.signature-name-input {
    border-radius: 8px;
    flex: 0 0 80%;
}

.signature-initials-input {
    border-radius: 8px;
    flex: 0 0 18%;
}

.upload-label {
    font-family: 'SF Pro';
}

.uploaded-signature-img {
    width: 150px;
    height: 100px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

/* Signed cursive was clipped at the top: the script font's tall letters poke
   past the tight 1.05 line box, and both the ink box and its row trim their
   overflow. Free both layers and give the line box real headroom - the fitter
   already guarantees the width fits, so nothing can spill sideways. Website
   only; the App keeps its own CSS.
   (body prefix: this file loads BEFORE EditorStyle, so it must outrank it.) */
body .data-item[data-type="SIGNATURE"] .field.signed .signature-row,
body .editor-container-body .doc-page-body > div > .data-item[data-type="SIGNATURE"] .field.signed .signature-row {
    overflow: visible !important;
}

body .data-item[data-type="SIGNATURE"] .field.signed .signature-body,
body .editor-container-body .doc-page-body > div > .data-item[data-type="SIGNATURE"] .field.signed .signature-body {
    overflow: visible !important;
}

/* The real tail-cutter: script capitals and finals (the t of "Account", the d
   of "Bahzad") paint their flourish BEYOND the letter's layout width, and that
   overhang landed under the opaque stamp. Padding on the ink span reserves
   the room - the auto-fitter measures the span WITH its padding, so the name
   shrinks just enough and the flourish lands on empty canvas. The top gets a
   whisker of line padding for the same reason. */
body .data-item[data-type="SIGNATURE"] .field.signed .signature-body .sig-ink,
body .editor-container-body .doc-page-body > div > .data-item[data-type="SIGNATURE"] .field.signed .signature-body .sig-ink {
    padding: 0.08em 0.35em 0 0.05em !important;
}

/* The sticky "Assign the user before the signing" strip has a 10%-transparent
   background in the shared markup, so the document text bleeds through it while
   scrolling. This is the same tint made solid (its exact colour over white);
   website only - the App keeps its own copy of this file. */
.assign-msg {
    background: #EEF1FD !important;
    border-bottom: 1px solid #E3E8F4;
}

/* On the website the Adopt Your Signature screen is a side panel, so its
   action buttons stay inside that panel instead of pinning to the viewport
   (the App keeps the fixed bar in its own copy of this file). */
.bottom-action-bar {
    position: static;
    width: 100%;
    background: #fff;
    padding: 10px 0;
}

.signature-container {
    margin-top: 20px;
    padding: 10px;
}

/* Inside the sign/initials modal the header row ("< Adopt Your Signature") sat
   tucked under the website's fixed chrome - only the back button's bottom edge
   peeked out at the top-left. Push the modal's content clear of the chrome.
   (This file is the website's own copy; the App keeps its own spacing.) */
.modal.form-modal .signature-container {
    margin-top: 56px;
}

/* The drawing block sizes itself by App screen math (100vh minus a fixed app
   header) - inside the website's modal that left huge empty gaps between the
   two pads AND pushed the Adopt & Sign button off the bottom of the screen.
   Give it the room that actually exists between the header and the buttons,
   and let the two pads stretch to FILL it - big drawing area, no dead space
   under Adopt & Sign. */
.modal.form-modal .signature-block.draw-signature {
    height: calc(100vh - 300px);
    min-height: 420px;
}

    /* the canvases follow their containers instead of a fixed 200px - the
       higher specificity beats the component style's fixed height */
    .modal.form-modal .draw-sign-canvas,
    .modal.form-modal .draw-initial-canvas {
        height: 100% !important;
    }

/* While any modal or sheet is open, the floating sidebar toggle (the little
   dotted button) has no business hovering above it. */
body:has(.modal.show) .navbar-toggler,
body:has(.offcanvas.show) .navbar-toggler {
    visibility: hidden;
}

.signature-header {
    flex-shrink: 0;
}

.signature-heading {
    margin-bottom: 0;
}


.contact-wrapper {
    display: flex;
    align-items: stretch;
    position: relative;
    overflow: visible;
    background: transparent !important;
    box-shadow: none !important;
}

.contact-card {
    width: 100%;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 -2px 4px rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: stretch;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

.contact-content {
    flex: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contact-buttons {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 8px;
    padding: 0 8px;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0 12px 12px 0;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.3s ease;
}

    .contact-buttons a {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        cursor: pointer;
    }

    .contact-buttons img {
        width: 16px;
        height: 16px;
        pointer-events: none;
    }

    .contact-buttons a:nth-child(1) {
        background: #CFE4FF;
    }

    .contact-buttons a:nth-child(2) {
        background: #E4E4FF;
    }

    .contact-buttons a:nth-child(3) {
        background: #CFE4FF;
    }

    .contact-buttons a:nth-child(4) {
        background: #FFCFCF;
    }

.contact-wrapper.swiped .contact-card {
    transform: translateX(-50%);
}

.contact-wrapper.swiped .contact-buttons {
    opacity: 1;
    pointer-events: auto;
}

.contact-name {
    font-size: 18px;
    font-weight: 500;
    color: #312E2E;
}

.contact-date {
    font-weight: 400;
    font-size: 12px;
    color: #312E2E;
}

.contact-locked {
    font-size: 12px;
    color: #000000;
}

.rename-btn img {
    filter: invert(11%) sepia(87%) saturate(5494%) hue-rotate(192deg) brightness(94%) contrast(93%);
}
.info-bubble {
    --bubble-bg: #e9f5ff;
    display: inline-block;
    background-color: var(--bubble-bg);
    color: #072E60;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
    border: 1px solid #e9f5ff;
    position: relative;
    white-space: normal;
    text-align: center;
    max-width: 100%;
}

    .info-bubble::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -16px;
        transform: translateY(-50%);
        border-width: 10px;
        border-style: solid;
        border-color: transparent transparent transparent var(--bubble-bg);
    }


.contract-search-control img {
    position: absolute;
    top: 10px;
    left: 12px;
    height: 20px;
    width: 20px;
}

.contract-search-control input {
    height: 40px;
    padding-left: 40px;
}

.icon-blue {
    color: #062e64 !important;
}

.signature-body-default {
    background: white;
    color: black;
  border:1px solid #072E60;
}

.doc-page-item, .doc-page-container, .doc-page-body, .doc-page {
    min-height: 100px !important;
}


.modal-save-button,
.modal-discard-button {
    flex: 1; 
    height: 48px;
    border-radius: 10px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.modal-save-button {
    border: none;
    background: #072E60;
    color: #FFFFFF;
}

.modal-discard-button {
    border: 1px solid #072E60;
    background: #FFFFFF;
    color: #072E60;
}


.rightButtonGroup {
    display: flex;
    gap: 10px;
    width: 100%;
}

.checkbox-wrapper {
    width: 100%;
}


.lock-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.editor-container-header {
    margin-top: 60px;
    padding-top: 20px;
}

.info-bubble {
    top: -20px;
}

.upload-photo-button {
    display: inline-block;
    background-color: #072E60;
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    transition: background 0.2s ease-in-out;
}

.upload-btn button,
.upload-btn label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    margin: 0;
    background: #072E60;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    width: auto;
    height: auto;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    transition: background 0.2s ease-in-out;
}
.button-outline {
    border: none;
    outline: none;
    width: auto;
    background: #FFFFFF;
    color: #072E60;
    border: 1px solid;
    border-color: #072E60;
    padding: 10px 16px;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    display: block;
    white-space: nowrap
}
/* Dropdown list */
.autocomplete-wrapper .autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    list-style: none;
    margin: 4px 0 0 0;
    padding: 0;
}

.nav-tabs-custom {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #072E60;
    margin-bottom : 2rem;
}

    .nav-tabs-custom .nav-link {
        flex: 1;
        text-align: center;
        padding: 12px;
        font-weight: 500;
        color: #072E60;
        background: white;
        border: 1px solid #072E60;
        border-bottom: none;
        cursor: pointer;
    }

        .nav-tabs-custom .nav-link.active {
            background-color: #072E60;
            color: #fff !important;
        }
.modal-footer-custom {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 1rem;
}

    .modal-footer-custom .modal-save-button,
    .modal-footer-custom .modal-discard-button {
        flex: 1;
        width: 50%; 
        text-align: center;
    }

.autocomplete-wrapper .autocomplete-item {
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f1f1;
    transition: background 0.2s, color 0.2s;
    font-size: 0.95rem;
}

    .autocomplete-wrapper .autocomplete-item:last-child {
        border-bottom: none;
    }

    .autocomplete-wrapper .autocomplete-item:hover {
        background-color: #f0f8ff;
        color: #000;
    }

.autocomplete-wrapper .autocomplete-text small {
    color: #555;
    font-size: 0.85rem;
}


.autocomplete-wrapper .search-clear-btn {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    font-size: 18px;
    cursor: pointer;
    color: #888;
    transition: color 0.2s;
}

    .autocomplete-wrapper .search-clear-btn:hover {
        color: #000;
    }


.autocomplete-wrapper .search-control {
    height: 42px;
    padding-left: 40px;
    border-radius: 8px;
    border: 1px solid #ccc;
    transition: border 0.2s, box-shadow 0.2s;
}


.autocomplete-wrapper .search-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    height: 20px;
    width: 20px;
    pointer-events: none;
}

.persons-list .actionButtons a:nth-child(1) {
    background: #CFE4FF;
}

.persons-list .actionButtons a:nth-child(2) {
    background: #CFE4FF;
}

.text-style {
    color: #072E60;
    font-weight: 400;
}
.signature-row {
    display: flex !important;
    align-items: center !important;
    gap: 100px !important;
}

.signature-body img {
    height: 100% !important;
    max-height: none !important;
    width: 100% !important;
    object-fit: fill !important;
    display: block !important;
}

.signature-footer{
    background-color: #072E60 !important;
    color: white !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    line-height: 1.2 !important;
    font-size: 8px !important;
    white-space: nowrap !important;
    width: max-content !important;
    height: auto !important;
    box-sizing: border-box;
}

    .signature-footer span {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        color: white !important;
    }

.data-item[data-type="INITIALS"] .signature-row {
    display: flex !important;
    align-items: center !important;
    gap: 100px !important;
}

.data-item[data-type="INITIALS"] .signature-body {
    float: none !important;
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    text-align: center !important;
    background: transparent !important;
}

.data-item[data-type="INITIALS"] .signature-footer {
    background-color: #072E60 !important;
    color: white !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    line-height: 1.2 !important;
    font-size: 8px !important;
    white-space: nowrap !important;
    width: max-content !important;
    height: auto !important;
    box-sizing: border-box;
    z-index: 1 !important;
}

    .data-item[data-type="INITIALS"] .signature-footer span {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        color: white !important;
    }

.editor-field-option{
    background:#072E60 !important;
    color:white !important;
}


.text-container {
    border:0.5px solid #072E60 !important;
    border-radius:0 !important;
}

.ui-move-handle,
.ui-resizable-handle {
    background: white !important;
    color: #072E60 !important;
    touch-action: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    pointer-events: auto !important;
}


.ui-draggable,
.ui-resizable {
    touch-action: none !important;
}


.tooltip-text {
    background: #072E60 !important;
    color: white !important;
    display: inline-block !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    position: absolute !important;
    transform: translateY(-6px);
}
    .tooltip-text::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 20px;
        border-width: 6px;
        border-style: solid;
        border-color: #072E60 transparent transparent transparent; 
    }
.tooltip-handle {
    position: relative;
    z-index: 95;
    display: inline-block;
    border: 1px solid #072E60;
    padding: 2px 6px;
    border-radius: 4px;
    background-color: #072E60;
    color: white;
}
.card.card-gray .card-body {
    padding: 4px 18px;
    border: solid 1px #eaedf2;
    background-color: #eaedf2;
    border-radius: 10px;
}

.add-document-form {
    margin-top: 25px;
}

.action-buttons-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    background-color: white;
    margin-bottom: 10px;
}

.action-button {
    flex: 1;
    text-align: center;
    padding: 14px 0;
    font-weight: 600;
    font-size: 16px;
    color: #072E60;
    border: 1px solid #072E60;
    background-color: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .action-button.active,
    .action-button:hover {
        background-color: #072E60;
        color: white;
        border: 2px solid #072E60;
    }

    .action-button img {
        height: 18px;
        margin-left: 6px;
        vertical-align: middle;
    }

.action-buttons-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    width: 100%;
    background-color: white;
}

.rename-btn img {
    filter: invert(11%) sepia(87%) saturate(5494%) hue-rotate(192deg) brightness(94%) contrast(93%);
}

.hidden-input {
    display: none !important;
}

.toggle-arrow-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: #072E60;
    font-size: 22px;
    line-height: 1;
    transition: transform 0.25s ease, color 0.25s ease;
}

.btn-action {
    color: #f76f15 !important;
}

.toggle-arrow-btn:hover {
    transform: scale(1.2);
    color: #0a4fa7;
}

.toggle-arrow-btn:focus {
    outline: none;
    box-shadow: none;
}
.fixed-bottom-bar {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #ffffff;
    padding: 10px 12px;
    z-index: 5;
}

.attachment-email-box {
    width: 100%;
}

.attachment-email-title {
    font-size: 14px;
    font-weight: 600;
    color: #6c757d;
}

.attachment-email-container {
    background: #f8f9fa;
    border: 1px solid #e2e6ea;
    padding: 12px;
    border-radius: 12px;
    margin-top: 6px;
    text-align: center; 
}

.attachment-email-text {
    font-size: 13px;
    word-break: break-all;
    margin-bottom: 8px;
}

.attachment-email-copy-btn {
    background: #e9ecef;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}

    .attachment-email-copy-btn:hover {
        background: #dee2e6;
    }
.attachment-email-help {
    margin-top: 10px;
    font-size: 13px;
    color: #5a5f68;
    line-height: 1.5;
    font-style: italic;
    font-weight: 500;
    border-left: 2px solid #c0c4cc;
    padding-left: 8px;
    opacity: 0.9;
}

.editor-container-body .doc-page-body > div[data-type="INITIALS"] .field,
.editor-container-body .doc-page-body > div[data-type="SIGNATURE"] .field {
    width: 200px !important; 
    height: 50px !important; 
    min-width: 180px !important;
}


.editor-container-body .doc-page-body > div > .data-item .field.signed .signature-row:has(img) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 8px !important;
    gap: 10px !important; 
    box-sizing: border-box !important;
    background-color: rgba(0,0,0,0.02); 
}


.editor-container-body .doc-page-body > div > .data-item .field.signed .signature-body:has(img) {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 1 !important; 
    height: 100% !important;
}




.editor-container-body .doc-page-body > div > .data-item .field.signed .signature-footer {
    background-color: #072E60 !important;
    color: #FFFFFF !important;
    flex: 0 0 100px !important; 
    height: 36px !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

    .editor-container-body .doc-page-body > div > .data-item .field.signed .signature-footer span {
        font-size: 8px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        display: block !important;
    }

.preview-btn-row {
    width: calc(100% - 32px);
    margin: 0 auto;
    gap: 8px;
    background-color: #E6EFFF;
    padding: 8px;
    border-radius: 10px;
    align-items: center;
}
.Search-div {
    background: #072E60 !important;
    color: white !important;
}
/* ------------------------------------------------------------------ */
/* WEBSITE-ONLY from here down. Everything above is a copy of the     */
/* App's custom.css; keep web-specific styling below this line so the */
/* two files stay easy to diff.                                       */
/*                                                                    */
/* web-parity 2026-08-19: the owner wants every row-action icon in    */
/* the same light-sky chip the People edit/delete buttons use. That   */
/* chip is .actionButtons a in the shared app.css (33x33, radius 6)   */
/* plus #CFE4FF from this file - the document rows' gear button       */
/* (.toggle-arrow-btn) just never got it. padding is !important       */
/* because the markup carries Bootstrap py-2/pl-2 utilities, which    */
/* are themselves !important.                                         */
/* ------------------------------------------------------------------ */
.toggle-arrow-btn {
    background: #CFE4FF;
    border: none;
    border-radius: 6px;
    width: 33px;
    height: 33px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

    .toggle-arrow-btn img {
        width: 20px;
        height: 20px;
    }

/* web-parity 2026-08-19: the editor's toolbar (Save / Download / Email / Request
   sign, plus Add and Search) sat ON TOP of the document - the page top hid
   behind it. The shared editor page was tuned for the phone's own mobile
   layout; the desktop skin that was meant to handle this (EditorV2_Style.css)
   has been commented out in every host since V 87.11. Website fix: force the
   header back into normal flow and let the document body take whatever
   viewport height remains below it, however tall the header happens to be
   (sub-toolbars included). */
.editor-main .editor-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh;
}

    .editor-main .editor-container .editor-container-header,
    .editor-main .editor-container .editor-container-header.v2 {
        position: static !important;
        width: auto !important;
        flex: 0 0 auto;
    }

    .editor-main .editor-container .editor-container-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        margin-top: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 10px 0 30px !important;
    }

/* The floating Sign-or-Initials button (rendered by the shared editor page for
   the website only): the two choice blocks stay hidden until the mouse is over
   the button, then fan out upward. !important because the markup carries a
   display:flex fallback inline, so the choices still work if this file ever
   fails to load. */
.web-sign-fab .web-sign-fab-options {
    display: none !important;
}

.web-sign-fab:hover .web-sign-fab-options,
.web-sign-fab:focus-within .web-sign-fab-options {
    display: flex !important;
}

/* web-parity 2026-08-19: icon-only Search chip at the right end of the editor's
   title row (directly above Request sign) - same light-sky chip family as the
   other row-action icons. */
.web-editor-search-btn {
    background: #CFE4FF;
    border-radius: 6px;
    width: 33px;
    height: 33px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #072E60;
    font-size: 18px;
    text-decoration: none;
}

    .web-editor-search-btn:hover {
        background: #b9d8ff;
        color: #072E60;
    }

/* web-parity 2026-08-19: compact document-actions menu that opens at the gear
   button on the website (replacing the full-screen bottom sheet, which is a
   phone pattern and rendered as a mostly blank page on a monitor). */
.web-doc-menu-host {
    position: relative;
}

.web-doc-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 810;
    min-width: 190px;
    background: #fff;
    border: 1px solid #e3eaf2;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(7, 46, 96, .16);
    padding: 6px;
}

.web-doc-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: #072E60;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

    .web-doc-menu-item i {
        font-size: 17px;
        width: 20px;
        text-align: center;
    }

    .web-doc-menu-item:hover {
        background: #eef5ff;
        color: #072E60;
        text-decoration: none;
    }

.web-doc-menu-danger {
    color: #c0392b;
}

    .web-doc-menu-danger:hover {
        background: #fdecec;
        color: #c0392b;
    }

.web-doc-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 800;
    background: transparent;
}

/* web-parity fix: every .contact-card is its own layer at z-index 2, so the
   card BELOW an open gear menu painted straight over it (the menu appeared
   sliced between rows). While a row's menu is open, lift that row above its
   siblings and make sure nothing on the way clips it. */
.contact-wrapper:has(.web-doc-menu),
.contact-card:has(.web-doc-menu) {
    z-index: 850 !important;
    position: relative;
    overflow: visible !important;
}

.contact-content:has(.web-doc-menu),
.touch-wrapper:has(.web-doc-menu) {
    overflow: visible !important;
}

/* web-parity 2026-08-19: Add Documents and Attachment Details share the
   add-documents-off-canvas class - a full-height phone bottom sheet that
   rendered as a huge blank page on a monitor. On the website it becomes a
   centered dialog card sized to its content. Flow and markup untouched. */
.offcanvas.add-documents-off-canvas.showing,
.offcanvas.add-documents-off-canvas.show {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(560px, 92vw) !important;
    height: auto !important;
    max-height: 82vh !important;
    border-radius: 16px !important;
    border: 1px solid #e3eaf2 !important;
    box-shadow: 0 24px 64px rgba(7, 46, 96, .25) !important;
}

.offcanvas.add-documents-off-canvas .offcanvas-body {
    overflow-y: auto;
    padding: 8px 24px 28px !important;
}

.offcanvas.add-documents-off-canvas .offcanvas-header {
    padding: 18px 24px 6px !important;
}

/* web-parity 2026-08-19: reusable centered-dialog treatment. Any offcanvas
   tagged web-center-dialog (currently the Add/Edit Person form in all four
   places it opens) shows as a centered card on the website instead of a
   phone bottom sheet. Class is present in shared markup but only styled
   here, so the App keeps its sheets. */
.offcanvas.web-center-dialog.showing,
.offcanvas.web-center-dialog.show {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(560px, 92vw) !important;
    height: auto !important;
    max-height: 88vh !important;
    border-radius: 16px !important;
    border: 1px solid #e3eaf2 !important;
    box-shadow: 0 24px 64px rgba(7, 46, 96, .25) !important;
}

.offcanvas.web-center-dialog .offcanvas-body {
    overflow-y: auto;
    padding: 8px 24px 28px !important;
}

.offcanvas.web-center-dialog .offcanvas-header {
    padding: 18px 24px 6px !important;
}

/* web-parity fix: inside a centered dialog the offcanvas BODY kept stretching
   to the sheet height it was born with (flex-grow) - the Create Contract card
   showed a page of empty white under its buttons, plus a stray scrollbar. Pin
   the body to its content; the card hugs whatever is inside it. */
.offcanvas.web-center-dialog.showing,
.offcanvas.web-center-dialog.show {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
}

    .offcanvas.web-center-dialog.showing .offcanvas-body,
    .offcanvas.web-center-dialog.show .offcanvas-body {
        flex: 0 1 auto !important;
        height: auto !important;
        max-height: calc(88vh - 70px);
    }

/* web-parity fix 2: the REAL height culprit. The App stylesheet (copied above)
   gives every .container-fluid a min-height of 100vh plus its own scrollbar -
   right for full-screen phone pages, wrong inside a dialog. Create Contract's
   form is wrapped in container-fluid, so the "content" was a full screen tall
   no matter what the card did. Inside a centered dialog those phone rules are
   switched off. */
.offcanvas.web-center-dialog .container-fluid {
    min-height: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}

/* web-parity 2026-08-19: the estimate/invoice flow's 3-step indicator
   (General Info / Additional Info / Messages, rendered by CompanyInfo).
   It lays its dots and labels out with space-between and only 35px side
   margins - correct on a 375px phone, but on a monitor it strands the three
   steps at the far edges of the page. Capped and centred here; the App keeps
   its full-width phone layout because it never loads this file. */
.radioline,
.radiotext {
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* The dotted connector between steps is a 50x5 image holding six 4px dots.
   Where the CSS stretches it (flex: 1) without fixing a height, the image
   keeps its shape as it widens - on a wide screen it scales roughly 11x and
   the dots become large grey circles. InvoiceEstimate.razor already pins
   height: 9px; this gives the same pin to the copies that lack one. */
.partition-img {
    height: 9px;
}

/* ------------------------------------------------------------------ */
/* web-parity 2026-08-20: persistent left menu on the website.         */
/*                                                                     */
/* The nav is a phone drawer - fixed at left, slid out of view with    */
/* translateX(-100%), brought back by the hamburger with a dark        */
/* backdrop over the page. Right on a phone; on a monitor it wastes    */
/* the whole left margin and hides navigation behind a tap.            */
/*                                                                     */
/* From 992px up it becomes a normal sidebar: always on screen, no     */
/* backdrop, no hamburger, and the header and page content are inset   */
/* by its width so nothing sits underneath it. Below 992px (narrow     */
/* windows) the drawer behaves exactly as before, and the App never    */
/* loads this file at all.                                             */
/*                                                                     */
/* The editor is excluded: it is a full-bleed workspace whose own      */
/* layout owns the full width, so it keeps the drawer. Both navs use   */
/* the same ids, so the editor is identified by .editor-main on its    */
/* wrapper.                                                            */
/*                                                                     */
/* Every rule is also gated on body:has(.sidebar-header) - the element */
/* the sidebar renders only when someone is signed in. Signed-out      */
/* pages such as /Sign-up sit inside .main-wrapper too but have no     */
/* sidebar, so without that gate they were being inset by 248px for a  */
/* menu that was not there, pushing the whole page off centre and off  */
/* the right edge.                                                     */
/* ------------------------------------------------------------------ */
@media (min-width: 992px) {

    body:has(.sidebar-header):not(:has(.editor-main)) #navbar-main-collapse {
        /* Bootstrap keeps a .collapse hidden until .show, so display is
           forced as well as the transform undone. */
        display: block !important;
        transform: none !important;
        width: 248px !important;
        border-right: 1px solid #e3eaf2;
        padding-bottom: 24px;
    }

    /* The hamburger and its page-dimming backdrop have nothing to do
       once the menu is permanent. */
    body:has(.sidebar-header):not(:has(.editor-main)) .navbar-toggler,
    body:has(.sidebar-header):not(:has(.editor-main)) .sidebar-backdrop {
        display: none !important;
    }

    /* The sidebar carries the logo at its top, so the centred copy in
       the header would be a second one. */
    body:has(.sidebar-header):not(:has(.editor-main)) #header-main #navbar-logo {
        display: none;
    }

    /* Inset the header bar and the page body by the sidebar width. */
    body:has(.sidebar-header):not(:has(.editor-main)) #header-main,
    body:has(.sidebar-header):not(:has(.editor-main)) .main-wrapper {
        padding-left: 248px;
    }
}

/* web-parity 2026-08-20: keep the profile menu inside the window.
   The avatar menu is marked dropdown-menu-right (Bootstrap 4 wording), but
   the page also loads Bootstrap 5, and the positioning script writes inline
   left/transform values of its own - so the panel anchored to the avatar's
   LEFT edge and ran off the right of the screen. At 90% zoom there was just
   enough room, which is why it only looked broken at 100%.
   Pinned under the avatar and aligned to its right edge instead; the
   !important values are needed to beat the inline styles the script sets. */
#header-main .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    margin-top: 8px;
    max-width: calc(100vw - 24px);
}

/* web-parity 2026-08-24: the new GoDocX.ai logo is a squarer lockup than the
   one it replaced - 138x32 where the old mark was 142x23. The sidebar header
   in NavMenu.razor sizes it by WIDTH only (width:150px; height:auto), so the
   same rule that used to yield a 24px-tall logo now yields 35px and crowds the
   sidebar. That markup is shared with the iPhone app, which loads its own,
   older copy of the image and still needs the width rule, so the correction
   belongs here in the website-only stylesheet rather than in the component. */
.sidebar-header img[src*="modulelogo"] {
    width: auto !important;
    height: 30px;
    max-width: 100%;
}

/* ===========================================================================
   SIGN-UP PAGE - blue and white (web-parity 2026-08-24)

   /Sign-up renders Client/Pages/SignUp.razor, which is shared with the iPhone
   app, and its plan-card colours are written into a <style> block inside that
   component. Editing them there would restyle the app too, so the website's
   version is corrected here instead - custom.css is loaded only by the web
   host, never by the app.

   That inline <style> sits in the body and therefore wins over anything in
   the head at equal specificity, which is why every rule below is scoped to
   the .planPricing section: it both outranks the component and keeps these
   colours off every other page in the signed-in app.
   =========================================================================== */

/* Cards were a warm cream (#fffbf9); the highlighted one was slate (#394157). */
.planPricing .plan-list .col-plan {
    background: #F7F9FE !important;
}

.planPricing .plan-list .col-plan,
.planPricing .plan-list .col-plan:not(.selected) {
    border-color: #E4EAF6 !important;
}

.planPricing .plan-list .col-plan.selected,
.planPricing .plan-list .col-plan.selected::before {
    background: #2B3990 !important;
}

/* Prices were the old orange #f27720. The component deliberately exempts
   .plan-price from the white text it applies inside the highlighted card, so
   that one has to be turned white separately or it stays orange on navy. */
.planPricing .plan-price {
    color: #2B3990 !important;
}

.planPricing .plan-list .col-plan.selected .plan-price {
    color: #FFFFFF !important;
}

/* The balloons come from sprite.png with the orange baked into the artwork,
   so no colour property can reach them - rotating the hue turns them blue.
   Same treatment as the landing page. Replace with blue artwork when there
   is one, and drop this. */
.planPricing .plan-title::before {
    filter: hue-rotate(205deg) saturate(1.15);
}

/* TRY FOR FREE and Sign in, under the cards: btn-primary was the theme slate
   and btn-secondary a flat grey. */
.planPricing .btn-primary {
    background-color: #2B3990 !important;
    border-color: #2B3990 !important;
    color: #FFFFFF !important;
}

    .planPricing .btn-primary:hover,
    .planPricing .btn-primary:focus {
        background-color: #1B2566 !important;
        border-color: #1B2566 !important;
    }

.planPricing .btn-secondary {
    background-color: #EEF1FC !important;
    border-color: #C6D0F5 !important;
    color: #2B3990 !important;
}

    .planPricing .btn-secondary:hover,
    .planPricing .btn-secondary:focus {
        background-color: #DDE3F8 !important;
        border-color: #A9B8EE !important;
        color: #1B2566 !important;
    }

/* AI allowances inside the sign-up plan cards. Matches the landing page block
   in landing.css. The highlighted plan is navy, so its text has to lift. */
.planPricing .plan-list .plan-ai {
    margin: 16px auto 4px;
    padding-top: 14px;
    border-top: 1px solid #E4EAF6;
    max-width: 210px;
    text-align: center;
}

    .planPricing .plan-list .plan-ai span {
        display: block;
        font-size: 13px;
        line-height: 1.75;
        color: #46506B;
    }

    .planPricing .plan-list .plan-ai .plan-ai-head {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: #2B3990;
        margin-bottom: 4px;
    }

.planPricing .plan-list .col-plan.selected .plan-ai {
    border-top-color: rgba(255,255,255,.28);
}

    .planPricing .plan-list .col-plan.selected .plan-ai .plan-ai-head {
        color: #C6D0F5 !important;
    }

/* Plan icons: documents, not balloons.

   The theme drew these from sprite.png with the old orange baked in, which is
   why they were being hue-rotated to blue. These replace the sprite outright,
   so the filter has to come off too or the new blue would be rotated again.
   Widths differ because the icon widens with the plan - one page, one signed
   page, two, three - the same escalation the balloons had.

   Two colourways: the highlighted plan sits on navy, where a navy icon is
   invisible. Same drawings, lighter stroke. *_SEL_* rules below carry them. */
.planPricing .plan-list .col-plan .plan-title.plan-doc-1::before, .planPricing .plan-list .col-plan .plan-title.plan-doc-2::before,
.planPricing .plan-list .col-plan .plan-title.plan-doc-3::before, .planPricing .plan-list .col-plan .plan-title.plan-doc-4::before {
    filter: none;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    height: 62px;
}

.planPricing .plan-list .col-plan .plan-title.plan-doc-1::before { width: 31px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 64' fill='none' stroke='%232B3990' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M20 8 v8 h8'/%3E%3Cpath d='M10 28 h12'/%3E%3Cpath d='M10 36 h12'/%3E%3Cpath d='M10 44 h8'/%3E%3C/svg%3E"); }
.planPricing .plan-list .col-plan .plan-title.plan-doc-2::before { width: 31px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 64' fill='none' stroke='%232B3990' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M20 8 v8 h8'/%3E%3Cpath d='M10 28 h12'/%3E%3Cpath d='M10 36 h12'/%3E%3Cpath d='M10 45 c2 .5 3-1.2 3.6-3 .4-1.3 0-2.1-.7-1.8-.9 .4-.8 2.1 0 3.5 .7 1.3 1.8 1.9 2.9 1.9 1.2 0 1.9-1.5 3.8-2.3'/%3E%3C/svg%3E"); }
.planPricing .plan-list .col-plan .plan-title.plan-doc-3::before { width: 56px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 64' fill='none' stroke='%232B3990' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M18 8 v8 h8'/%3E%3Cpath d='M8 28 h12'/%3E%3Cpath d='M8 36 h12'/%3E%3Cpath d='M8 44 h8'/%3E%3Cpath d='M30 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M46 8 v8 h8'/%3E%3Cpath d='M36 28 h12'/%3E%3Cpath d='M36 36 h12'/%3E%3Cpath d='M36 44 h8'/%3E%3C/svg%3E"); }
.planPricing .plan-list .col-plan .plan-title.plan-doc-4::before { width: 81px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 64' fill='none' stroke='%232B3990' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M18 8 v8 h8'/%3E%3Cpath d='M8 28 h12'/%3E%3Cpath d='M8 36 h12'/%3E%3Cpath d='M8 44 h8'/%3E%3Cpath d='M30 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M46 8 v8 h8'/%3E%3Cpath d='M36 28 h12'/%3E%3Cpath d='M36 36 h12'/%3E%3Cpath d='M36 44 h8'/%3E%3Cpath d='M58 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M74 8 v8 h8'/%3E%3Cpath d='M64 28 h12'/%3E%3Cpath d='M64 36 h12'/%3E%3Cpath d='M64 44 h8'/%3E%3C/svg%3E"); }

/* Here the navy card is whichever one the visitor has selected, so the light
   colourway follows .selected rather than a fixed column. */
.planPricing .plan-list .col-plan.selected .plan-title.plan-doc-1::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 64' fill='none' stroke='%23C6D0F5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M20 8 v8 h8'/%3E%3Cpath d='M10 28 h12'/%3E%3Cpath d='M10 36 h12'/%3E%3Cpath d='M10 44 h8'/%3E%3C/svg%3E"); }
.planPricing .plan-list .col-plan.selected .plan-title.plan-doc-2::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 64' fill='none' stroke='%23C6D0F5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M20 8 v8 h8'/%3E%3Cpath d='M10 28 h12'/%3E%3Cpath d='M10 36 h12'/%3E%3Cpath d='M10 45 c2 .5 3-1.2 3.6-3 .4-1.3 0-2.1-.7-1.8-.9 .4-.8 2.1 0 3.5 .7 1.3 1.8 1.9 2.9 1.9 1.2 0 1.9-1.5 3.8-2.3'/%3E%3C/svg%3E"); }
.planPricing .plan-list .col-plan.selected .plan-title.plan-doc-3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 64' fill='none' stroke='%23C6D0F5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M18 8 v8 h8'/%3E%3Cpath d='M8 28 h12'/%3E%3Cpath d='M8 36 h12'/%3E%3Cpath d='M8 44 h8'/%3E%3Cpath d='M30 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M46 8 v8 h8'/%3E%3Cpath d='M36 28 h12'/%3E%3Cpath d='M36 36 h12'/%3E%3Cpath d='M36 44 h8'/%3E%3C/svg%3E"); }
.planPricing .plan-list .col-plan.selected .plan-title.plan-doc-4::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 64' fill='none' stroke='%23C6D0F5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M18 8 v8 h8'/%3E%3Cpath d='M8 28 h12'/%3E%3Cpath d='M8 36 h12'/%3E%3Cpath d='M8 44 h8'/%3E%3Cpath d='M30 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M46 8 v8 h8'/%3E%3Cpath d='M36 28 h12'/%3E%3Cpath d='M36 36 h12'/%3E%3Cpath d='M36 44 h8'/%3E%3Cpath d='M58 8 h16 l8 8 v40 h-24 z'/%3E%3Cpath d='M74 8 v8 h8'/%3E%3Cpath d='M64 28 h12'/%3E%3Cpath d='M64 36 h12'/%3E%3Cpath d='M64 44 h8'/%3E%3C/svg%3E"); }

/* The feature comparison table under the plans marks each column with a tick
   coloured by a utility class - text-success, text-secondary, text-primary.
   --secondary is still the old orange in the app's LayoutStyle, so the Pro
   column's tick stayed orange after everything around it went blue. Scoped to
   this section rather than redefining --secondary globally, which would
   recolour buttons and badges across the whole signed-in website. */
.planPricing .text-secondary {
    color: #2B3990 !important;
}

/* Same orange sprite tick as the landing page, on the sign-up comparison
   table. The Pro column is the only one cut from the orange artwork. */
.planPricing .container.plan-table tr td:nth-child(4) span.feat-icon {
    filter: hue-rotate(205deg) saturate(1.15);
}

/* ===========================================================================
   DASHBOARD CHROME (web-parity 2026-08-27)

   Two things the owner asked for after seeing the rebuilt dashboard:

   1. The profile picture sat in a white strip ABOVE the blue banner, so the
      page opened with a band of empty white and the avatar marooned in it.
      It now sits on the banner itself: the fixed header keeps its position
      but gives up its white background, and the dashboard is pulled up
      underneath it so the banner starts at the very top of the window.

      The header's height is not a number anyone wrote down - it comes out of
      the avatar, its padding and the nav around it - so fc-sidebar.js measures
      the real element and publishes it as --fc-headerh. The 76px fallback is
      what it measures today, used only if that script never runs.

   2. The sidebar was permanent from 992px up, with the hamburger hidden. It
      is now collapsible again on any width: the hamburger comes back, and
      collapsing it drops the 248px inset so the page takes the full window.
      The choice is remembered per browser.

   Scoped to the dashboard by :has(.fcd) - the wrapper the rebuilt page
   renders - so no other signed-in page loses its white header bar. The
   editor stays excluded exactly as the block above excludes it.
   ========================================================================= */

/* --- 1. the banner reaches the top, and the avatar rides on it ---------- */
body:has(.fcd) #header-main {
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Pull the page up by the whole gap above it, not by the header's height - the
   wrapper the dashboard sits in contributes space of its own, so measuring the
   header alone left a white band above the banner. fc-sidebar.js measures the
   gap itself; 76px is only the fallback for when that script never runs. */
body:has(.fcd) .fcd {
    margin-top: calc(-1 * var(--fc-dashpull, 76px));
}

/* Room under the header so the greeting never sits beneath the avatar. */
body:has(.fcd) .fcd-banner {
    padding-top: calc(var(--fc-headerh, 48px) + 14px);
}

/* navbar-icon.svg is already a white disc with navy line-art inside it, so it
   reads on the navy banner as it is. An earlier version inverted it to make it
   "visible" and turned the whole disc into a solid white blob - the artwork was
   never dark to begin with. */

/* --- 2. the sidebar collapses, and the page takes the space ------------- */
@media (min-width: 992px) {

    /* Undoes the display:none in the persistent-sidebar block above. Same
       specificity, later in the file, so this is the one that applies. */
    body:has(.sidebar-header):not(:has(.editor-main)) .navbar-toggler {
        display: inline-flex !important;
        align-items: center;
    }

    body.fc-nav-collapsed:has(.sidebar-header):not(:has(.editor-main)) #navbar-main-collapse {
        display: none !important;
    }

    body.fc-nav-collapsed:has(.sidebar-header):not(:has(.editor-main)) #header-main,
    body.fc-nav-collapsed:has(.sidebar-header):not(:has(.editor-main)) .main-wrapper {
        padding-left: 0;
    }
}

/* With the sidebar collapsed its logo goes with it, so the header's own copy -
   hidden while the sidebar is permanent, to avoid showing two - comes back. */
@media (min-width: 992px) {
    body.fc-nav-collapsed:has(.sidebar-header):not(:has(.editor-main)) #header-main #navbar-logo {
        display: inline-block;
    }
}

/* On the dashboard that logo sits on the navy banner, so it needs the light
   artwork drawn for dark grounds. An earlier version reached for a white-out
   filter instead, which flattened the whole lockup - mark and wordmark alike -
   into one blank white shape.

   The <img> src is written in NavMenu.razor, which the App shares, so it cannot
   be repointed from here. Instead the image is faded out and its own link
   carries the light file as a background: the img still occupies the layout, so
   the link inherits exactly the right size. */
body:has(.fcd) #header-main a:has( > #navbar-logo) {
    display: inline-block;
    background-image: url('/Images/modulelogo-light.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

body:has(.fcd) #header-main #navbar-logo {
    opacity: 0;
}

/* --- the hamburger belongs beside the logo, not adrift in the banner ------
   It sat wherever the header's flex row happened to put it, which on the
   dashboard was floating over the top-left of the banner. Pinned instead to
   the end of the sidebar's own column, so it reads as the control that folds
   that column away - and moves to the far left once the column is gone, where
   it is the only way back. Positions are measured from the window because
   #header-main is fixed, so the header's 248px inset does not shift them. */
@media (min-width: 992px) {
    body:has(.sidebar-header):not(:has(.editor-main)) .navbar-toggler {
        position: absolute;
        top: 14px;
        left: 196px;
        z-index: 10;
    }

    body.fc-nav-collapsed:has(.sidebar-header):not(:has(.editor-main)) .navbar-toggler {
        left: 14px;
    }
}

/* --- the sidebar slides, it does not blink out of existence --------------
   Collapsing was a straight display:none, which cannot be animated: the menu
   vanished and the page snapped 248px wider in one frame. The panel now slides
   out under its own width while the inset that holds the page off it unwinds
   over the same interval, so the two read as one movement.

   visibility waits for the slide to finish (0s delay, .26s out) so the hidden
   panel stops taking clicks and keyboard focus once it is actually gone,
   without popping away before it has left. */
@media (min-width: 992px) {

    body:has(.sidebar-header):not(:has(.editor-main)) #navbar-main-collapse {
        transition: transform .26s ease, opacity .2s ease, visibility 0s;
        will-change: transform;
    }

    body:has(.sidebar-header):not(:has(.editor-main)) #header-main,
    body:has(.sidebar-header):not(:has(.editor-main)) .main-wrapper {
        transition: padding-left .26s ease;
    }

    body:has(.sidebar-header):not(:has(.editor-main)) .navbar-toggler {
        transition: left .26s ease;
    }

    /* Replaces display:none. The base rule forces transform:none !important to
       undo Bootstrap, so this needs !important of its own to win. */
    body.fc-nav-collapsed:has(.sidebar-header):not(:has(.editor-main)) #navbar-main-collapse {
        display: block !important;
        transform: translateX(-100%) !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform .26s ease, opacity .2s ease, visibility 0s .26s;
    }
}

/* Anyone who has asked their machine for less movement gets the same layout
   without the travel. */
@media (prefers-reduced-motion: reduce) {
    #navbar-main-collapse,
    #header-main,
    .main-wrapper,
    .navbar-toggler {
        transition: none !important;
    }
}

/* ===========================================================================
   THE SIDEBAR TOGGLE (web-parity 2026-08-27)

   The original navbar-icon.svg disc, kept at the owner's request - a version
   of this drew its own three-bar icon in CSS and folded it into a chevron;
   that was replaced by this, and the artwork stands on its own.

   Nothing here changes what the button looks like at rest. It gets the same
   spring as the panel when it slides across, and press and keyboard-focus
   states, which the bare image had neither of. Every selector carries
   #header-main because the component's <style> block sits in the body and
   outranks this file at equal specificity.
   ========================================================================= */
@media (min-width: 992px) {

    #header-main .navbar-toggler {
        cursor: pointer;
        transition: left .3s cubic-bezier(.22,1,.36,1), transform .2s ease;
    }

        #header-main .navbar-toggler:hover {
            transform: scale(1.06);
        }

        #header-main .navbar-toggler:active {
            transform: scale(.94);
        }

        /* Keyboard users get a visible ring; the mouse does not. */
        #header-main .navbar-toggler:focus-visible {
            outline: 2px solid #2B3990;
            outline-offset: 2px;
            border-radius: 50%;
        }

    /* --- the menu arrives, it does not just appear ----------------------- */
    /* Each item follows the one above it by a few hundredths of a second, so
       opening reads as the panel unfolding rather than a block of text landing
       all at once. Closing runs with no delay at all - a staggered exit only
       makes the panel feel slow to get out of the way. */
    #header-main #navbar-main-collapse .nav-item {
        transition: opacity .26s ease, transform .26s cubic-bezier(.22,1,.36,1);
    }

    body:not(.fc-nav-collapsed) #header-main #navbar-main-collapse .nav-item:nth-child(1) { transition-delay: .06s; }
    body:not(.fc-nav-collapsed) #header-main #navbar-main-collapse .nav-item:nth-child(2) { transition-delay: .09s; }
    body:not(.fc-nav-collapsed) #header-main #navbar-main-collapse .nav-item:nth-child(3) { transition-delay: .12s; }
    body:not(.fc-nav-collapsed) #header-main #navbar-main-collapse .nav-item:nth-child(4) { transition-delay: .15s; }
    body:not(.fc-nav-collapsed) #header-main #navbar-main-collapse .nav-item:nth-child(5) { transition-delay: .18s; }
    body:not(.fc-nav-collapsed) #header-main #navbar-main-collapse .nav-item:nth-child(6) { transition-delay: .21s; }
    body:not(.fc-nav-collapsed) #header-main #navbar-main-collapse .nav-item:nth-child(7) { transition-delay: .24s; }
    body:not(.fc-nav-collapsed) #header-main #navbar-main-collapse .nav-item:nth-child(8) { transition-delay: .27s; }
    body:not(.fc-nav-collapsed) #header-main #navbar-main-collapse .nav-item:nth-child(n+9) { transition-delay: .3s; }

    body.fc-nav-collapsed #header-main #navbar-main-collapse .nav-item {
        opacity: 0;
        transform: translateX(-10px);
        transition-delay: 0s;
    }

    /* The panel itself gets the same spring as everything else, and a soft
       edge so it reads as sitting above the page rather than cut out of it. */
    body:has(.sidebar-header):not(:has(.editor-main)) #navbar-main-collapse {
        transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .22s ease, visibility 0s;
        box-shadow: 0 0 24px rgba(16, 24, 51, .06);
    }

    body:has(.sidebar-header):not(:has(.editor-main)) #header-main,
    body:has(.sidebar-header):not(:has(.editor-main)) .main-wrapper {
        transition: padding-left .32s cubic-bezier(.22,1,.36,1);
    }

    body.fc-nav-collapsed:has(.sidebar-header):not(:has(.editor-main)) #navbar-main-collapse {
        transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .22s ease, visibility 0s .32s;
    }
}

@media (prefers-reduced-motion: reduce) {
    #header-main .navbar-toggler,
    #header-main #navbar-main-collapse .nav-item {
        transition: none !important;
    }
}

/* ---------------------------------------------------------------------------
   web-parity: the editor's Add rail. On the website the toolbar's Add dropdown
   was squeezed under the Save row and clipped behind the assign banner, so the
   add tools (Text, Date, Checkbox, Strike, Image, Page) float in this rail on
   the LEFT of the document instead (markup in ContractEditor.razor, website
   only - the App never renders it).
   ------------------------------------------------------------------------ */
.web-add-rail {
    position: fixed;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10470;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 2px;
    width: 66px;
    height: 340px;   /* fixed so the field toolbox beside it can match */
    padding: 8px 5px;
    background: #fff;
    border: 1px solid #c9cfdd;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(6, 16, 36, .18);
}

    .web-add-rail .web-add-rail-title {
        text-align: center;
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #808AA4;
        margin-bottom: 4px;
    }

    .web-add-rail a,
    .web-add-rail label {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1px;
        margin: 0;
        padding: 7px 2px 6px;
        border-radius: 10px;
        color: #2B3990;
        text-decoration: none;
        font-size: 10.5px;
        font-weight: 700;
        line-height: 1.15;
        cursor: pointer;
        transition: background .15s ease, color .15s ease;
    }

        .web-add-rail a i,
        .web-add-rail label i {
            font-size: 21px;
        }

        .web-add-rail a:hover,
        .web-add-rail label:hover {
            background: #2B3990;
            color: #fff;
        }

/* if the window is too short for the whole rail, let it scroll inside itself */
@media (max-height: 560px) {
    .web-add-rail {
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }
}

/* ---------------------------------------------------------------------------
   web-parity: the Fill Form sheet is a bootstrap offcanvas (stacked around
   z-index 1045-1060), but the jQuery datepicker drops its calendar into <body>
   with a tiny z-index of its own - so picking a date drew the calendar BEHIND
   the sheet. Lift the calendar above every sheet and modal on the site.
   ------------------------------------------------------------------------ */
.datepicker.datepicker-dropdown {
    z-index: 12000 !important;
}

/* While any sheet (offcanvas) is open, freeze the page behind it - otherwise
   the page keeps its scrollbar next to the sheet and scrolls underneath.
   The page scrolls at the document (html) level, so body alone is not enough;
   and overscroll-behavior stops the wheel from "chaining" through to the page
   when the sheet's own scrolling reaches its end. */
html:has(.offcanvas.show),
body:has(.offcanvas.show) {
    overflow: hidden !important;
}

.offcanvas .offcanvas-body {
    overscroll-behavior: contain;
}

/* ---------------------------------------------------------------------------
   web-parity: the full-screen loader the shared screens drive via showLoader()
   and HideLoader(). The App defines this in its own host page (index.html);
   the website's host never had it, so uploads ran with no feedback and the
   Add Documents sheet looked frozen. Copied from the App verbatim.
   ------------------------------------------------------------------------ */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 12000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

    .loader-overlay.active {
        visibility: visible;
        opacity: 1;
        pointer-events: all;
    }

.loader-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #072E60;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: fc-loader-spin 1s linear infinite;
}

@keyframes fc-loader-spin {
    100% {
        transform: rotate(360deg);
    }
}

/* ---------------------------------------------------------------------------
   web-parity: the field toolbox (Typing / Position/Remove / Assign) is a
   full-width bottom band a third of the screen tall - phone-app ergonomics
   that kept colliding with the document on the website. On desktop widths it
   docks as a compact card on the RIGHT side of the document instead, matching
   the Sign/AI buttons' corner. Phone-width browsers keep the bottom sheet.
   Website-only file; the App is untouched.
   ------------------------------------------------------------------------ */
@media (min-width: 992px) {
    /* it sits on the LEFT, right in front of the Add rail (which stays put):
       same vertical centering, same card look (radius, border, shadow). */
    body #custom-submenu-container,
    body #custom-submenu-container.typing-active,
    body #custom-submenu-container.position-active,
    body #custom-submenu-container.assign-active {
        left: 90px !important;
        right: auto !important;
        bottom: auto !important;
        top: 50% !important;
        transform: translateY(-50%);
        width: 300px !important;
        height: auto !important;
        min-height: 340px;   /* matches the Add rail beside it */
        max-height: 80vh;
        overflow-y: auto !important;
        padding: 12px 14px 14px !important;
        border-radius: 16px !important;
        border: 1px solid #c9cfdd;
        box-shadow: 0 4px 14px rgba(6, 16, 36, 0.18) !important;
    }


        /* tabs become a segmented control instead of a squeezed underline row */
        body #custom-submenu-container .custom-submenu-tabs {
            background: #EEF1F8;
            border: none;
            border-radius: 10px;
            padding: 4px;
            gap: 4px;
            margin-bottom: 14px;
        }

            body #custom-submenu-container .custom-submenu-tabs .nav-link {
                font-size: 12.5px;
                padding: 8px 2px;
                border-radius: 8px;
                background: transparent;
                white-space: nowrap;
            }

                body #custom-submenu-container .custom-submenu-tabs .nav-link.active {
                    background: #072e60;
                    border-radius: 8px;
                    box-shadow: 0 2px 6px rgba(6, 16, 36, 0.25);
                }

        /* rows of tools wrap and breathe inside the card */
        body #custom-submenu-container .typing-row,
        body #custom-submenu-container .position-row {
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
            margin-bottom: 10px;
        }

        /* dropdowns stretch the card's width instead of floating loose */
        body #custom-submenu-container .tab-pane select,
        body #custom-submenu-container .tab-pane .form-control {
            width: 100%;
            border-radius: 10px;
            border: 1px solid #c9cfdd !important;
            padding: 9px 10px;
            font-size: 13px;
        }

        body #custom-submenu-container .typing-row select {
            width: auto;
            flex: 1 1 30%;
        }

        /* tool buttons get a consistent chip look */
        body #custom-submenu-container .btn-field-tool {
            border: 1px solid #E3E8F4 !important;
            border-radius: 9px;
            padding: 7px;
            background: #FBFCFE !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

            body #custom-submenu-container .btn-field-tool:hover {
                background: #EEF1F8 !important;
            }
}

/* The editor pages have no sidebar - pressing the sidebar toggle there dragged
   the dashboard nav into the editor and wrecked the layout (grey backdrop,
   document pushed aside). The editor layout wraps itself in .editor-main, so
   the toggle simply doesn't exist on those pages. */
body:has(.editor-main) .navbar-toggler {
    display: none !important;
}