/* Signup Wizard Styles */

.novia-form-public {
    font-size: 14px;
}

.novia-form-public > div {
    font-weight: bold;
    padding: 0.5em 0em;
}

.novia-form-public input[type="text"], .novia-form-public input[type="date"], .novia-form-public textarea {
    padding: 3px !important;
    width: 350px;
}

.novia-form-public input[type="text"]:focus:focus-visible, .novia-form-public input[type="date"]:focus:focus-visible, .novia-form-public textarea:focus:focus-visible {
    border: 1px solid transparent !important;
    outline: 1px solid #09f !important;
}

.novia-form-public h4 {
    margin-bottom: 6px !important;
    font-size: 17px !important;
    color: #777 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2em !important;
}

.submit-btn {
    margin-top: 3em;
}

.novia-form-public textarea {
    width: 550px;
    height: 150px;
}

.state path, .dccircle, .state polygon  {
    fill: #ddd;
    stroke: #fff;
    cursor: pointer;
    transition-property: all;
    transition-duration: 250ms;
}

[id="MI"].state path, [id="MI"].state polygon {
    stroke-width: 0.7;
}

.state path:hover, .dccircle:hover, .state polygon:hover {
    fill: #09f;
}

.novia-progress-overlay {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
    z-index: 100001;
    display: none;
}

.novia-progress-msg {
    align-self: center;
    justify-self: center;
    display: flex;
    background-color: #fff;
    padding: 20px 50px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 10px;
    box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
}

.novia-subscription-listing-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
    font-size:16px;
}

.novia-subscription-listing {
    background-color: #f3f3f3;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
    position: relative;
    padding-bottom: 36px;
    min-width: 200px;
}

.novia-subscription-listing a.button {
    margin-left: 0em !important;
}

.novia-subscription-listing p.product.woocommerce.add_to_cart_inline {
    padding: 0px !important;
    margin-bottom: 0px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.novia-subscription-select {
    margin-bottom: 1em;
    text-align: center;
}

.novia-subscription-toggle {
    background-color: #ddd;
    border-radius: 36px;
    display: inline-block;
    position: relative;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.1) inset;
}

.novia-subscription-toggle-item {
    display: inline-block;
    padding: 8px 16px;
    cursor: pointer;
}

.novia-subscription-toggle-item.selected {
    background-color: #1c184e;
    color: #fff;
    border-radius: 36px;
    font-weight: bold;
    box-shadow: 0px 1px 5px rgba(0,0,0,0.5);
    z-index: 1;
}

iframe.novia-doc-preview {
    width: 100%;
    height: 800px;
}

.novia-font-menu {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 2px;
    margin-top:10px;
}

.novia-font-menu > div {
    text-align: center;
    padding: 15px;
    font-size: 24px;
    cursor: pointer;
    background-color:#eee;
    border-radius:5px;
}

.novia-font-menu > div:hover {
    background-color: #e3e3e3;
}

.novia-font-menu > div.selected {
    background-color: #046bd2;
    color: #fff;
}

.novia-signature-choices > div {
    display: inline-block;
    padding: 5px 16px;
    cursor: pointer;
    border-radius: 28px;
}

.novia-signature-choices i {
    margin-right: 6px;
}

.novia-signature-choices {
    display: inline-block;
    background-color: #eee;
    border-radius: 28px;
    margin:10px 0px;
    margin-bottom:20px;
}

.novia-signature-choices > div:hover {
    color:#000;
}

.novia-signature-choices > div.selected {
    background-color: #046bd2;
    color: #fff;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}

a.novia-clear-signature {
    text-decoration: none !important;
    color: #a00;
    display: inline-block;
    margin-left: 2em;
}

a.novia-clear-signature:hover {
    color: #f00;
}

button[disabled] {
    background-color: #ddd !important;
    color: #eee !important;
}

div#success {
    text-align: center;
}

div#success .fa-check-circle {
    color: #9fd590;
    font-size: 36px;
}

div#success h3 {
    color: #290;
    margin-top: 10px;
    margin-bottom: 5px;
}

div#success p {
    color: #777;
}

.dashboard-section {
    background-color: #fff;
    padding: 15px;
    margin: 1em 0em;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
}

.novia-dashboard-top {
    background-color: #1C184E;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
    padding: 15px;
    font-size: 14px;
    overflow: hidden;
    color:#fff;
}

.novia-dash-subscription {
    display: inline-block;
}

.novia-dash-subscription > div {
    display: inline-block;
    margin-right: 1em;
    vertical-align: -12%;
}

.novia-dash-org {
    float: right;
}
.novia-dash-org > div {
    display: inline-block;
    margin-left: 1em;
    vertical-align: -34%;
}

.novia-dashboard-top strong {
    background-color: #f1f1f1;
    color: #141414;
    padding: 1px 4px;
    border-radius: 3px;
}


.novia-dash-sub-name a, .novia-dash-org a {
    display: inline-block;
    font-size: 13px;
    margin-left: 1em;
    color: #bbb6ff;
}

.novia-dash-sub-name a:hover, .novia-dash-org a:hover {
    color:#fff;
}

.novia-dash-subscription img {
    margin-right: 1em;
}

.woocommerce-MyAccount-content {
    float: none !important;
    width: auto !important;
}

.novia-tab {
    display: inline-block;
    padding: 8px 16px;
    background-color: #dddfe3;
    cursor: pointer;
}

.novia-tab:hover {
    background-color: #ccced2;
}

.novia-tabs {
    margin-bottom: 1em;
    border-bottom: 1px solid #ccc;
}

.novia-tab.selected {
    background-color: #fff;
    font-weight: bold;
    border-top: 2px solid #2271b1;
}

.novia-tab-content {
    display: none;
}

.novia-tabs.subtabs {
    border-bottom: none;
    font-size: 13px;
}

.subtabs .novia-tab {
    background-color: transparent;
    color: #2271b1;
    font-weight: bold;
    padding: 3px 10px;
}

.subtabs .novia-tab.selected {
    border-top: none;
    border-bottom: 2px solid #09f;
    color: #09f;
}

.novia-dashboard-docs td, .novia-dashboard-docs th, .novia-dashboard-docs {
    border: none;
}

.novia-dashboard-docs th {
    text-align: left;
    color: #222;
}

table.novia-dashboard-docs {
    font-size: 13px;
    line-height: 1.2;
}

.novia-dashboard-docs tbody > tr:nth-child(2n+1) {
    background-color: #fff;
}

.novia-tally {
    display: inline-block;
    color: #63a100;
    font-size: 12px;
    margin-left: 3px;
    vertical-align: 0%;
}

.novia-admin-tally {
    color: #63a100;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    margin-left: 3px;
}

.novia-dashboard-docs a {
    display: inline-block;
    padding: 4px;
    font-size: 13px;
    font-weight: bold;
}

.novia-signature-container {
    display: inline-block;
    padding: 0em 1em;
}

.novia-signature-container select {
    padding: 2px 16px;
    padding-right: 24px;
}

.novia-signature-container label {
    cursor: pointer;
}

.novia-signature-container input[type="radio"] {
    margin-right: 4px;
    vertical-align: -4%;
}

.button-primary.red {
    background-color: #900;
}

.button-primary.red:hover {
    background-color: #a00;
}

.button-primary.green {
    background-color: #290;
}

.button-primary.green:hover {
    background-color: #2aab05;
}

#cReview select {
    width: auto;
    padding: 0px 10px;
}

.novia-dialog-backdrop {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.7);
    z-index: 100000;
    text-align: center;
    display:none;
    white-space:nowrap;
}

.novia-dialog {
    background-color: #fff;
    display: inline-block;
    box-shadow: 0px 3px 10px rgba(0,0,0,0.3);
    vertical-align: middle;
    text-align: left;
    white-space:normal;
    max-width:100%;
}

.novia-dialog-backdrop::before {
    content: " ";
    display: inline-block;
    width: 1px;
    height: 100%;
    margin-right: -1px;
    vertical-align: middle;
}

.novia-dialog-title {
    background-color: #2271b1;
    padding: 10px;
    color: #fff;
    font-weight: bold;
}

.novia-dialog-body {
    padding: 10px;
}

.novia-dialog-body2 {
    overflow-y: scroll;
    height: calc(100vh - 200px);
    padding: 15px;
}

.novia-dialog-title i {
    float: right;
    cursor: pointer;
}

.novia-form-public select {
    padding: 0px 10px !important;
    padding-right: 25px !important;
}

.novia-form-public label {
    display: block;
    padding: 3px 10px;
    cursor: pointer;
}

.novia-form-public input[type="radio"] {
    margin-right: 5px;
}


.novia-review-checklist label {
    display: block;
    margin: 10px;
    font-weight:normal;
}

.novia-review-checklist .novia-required {
    font-weight: bold;
}

.novia-required-asterisk {
    color:#a00;
}

text.state-abbrev {
    font-family: Roboto;
    font-size: 12px;
    font-weight: bold;
    pointer-events: none;
    fill: rgba(0, 0, 0, 0.3);
}

path.abbrev-line {
    stroke: rgba(0,0,0,0.15);
    pointer-events: none;
}

text.state-abbrev.clickable {
    cursor:pointer;
    pointer-events: all;
}

text.state-abbrev.clickable:hover {
    fill: #09f;
}

.public-workflow path, .public-workflow polygon {
    opacity: 0.7;
    cursor: pointer;
}

.public-workflow path:hover, .public-workflow polygon:hover {
    opacity: 1;
}

.public-workflow path.selected, .public-workflow polygon.selected {
    opacity: 1;
    stroke: #fff;
    stroke-width: 7px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-opacity: 0.5;
}

.staff-workflow {
    max-width:890px;
}

.novia-form-columns {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 25px;
}

.novia-form-preview {
    position: relative;
}

.novia-preview-scroll {
    position: sticky;
    top: 0px;
    overflow-y: scroll;
    background-color: #f3f3f3;
    padding: 20px;
    box-sizing: border-box;
}

.novia-preview-scroll > img {
    box-shadow: 0px 2px 10px rgba(0,0,0,0.2);
}

.novia-county-columns {
    display: grid;
    grid-template-columns: 0px 1fr 1fr 220px;
    grid-gap: 25px;
}

.novia-county-list {
    column-count: 3;
    column-gap: 20px;
    font-size: 13px;
    line-height: 1.5em;
}

.editing path[title], .editing polygon[title] {
    fill: #f0f;
}

.novia-form-list-columns {
    display: grid;
    grid-template-columns: 0px 1fr 0px 220px;
    grid-gap: 25px;
}

#cCountyShape {
    display:none;
}

#cCountyShape polygon, #cCountyShape path {
    fill: #ddd;
    stroke-width: 0.1;
    stroke: #ccc;
}

#cFormList a {
    text-decoration: none;
    white-space: nowrap;
    display: block;
    padding: 8px;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
    margin: 1em 0em;
}

.novia-edit-org td {
    border: none;
}

table.novia-edit-org {
    border: none;
    font-size:14px;
}


.novia-refund-link-container {
    float: right;
    margin-top: 40px;
    margin-right: 15px;
}

.novia-refund-link-container a {
    color: #a00;
}

input.invalid, textarea.invalid {
    outline: 1px solid #f00;
    outline-offset: -1px;
}

span.asterisk {
    color: #f00;
}

.invalid-message {
    color: #a00;
    display: none;
}

p.novia-disclaimer {
    width: 550px;
    font-size: 12px;
    line-height: 1.5em;
    margin-top: 1em;
}

.novia-sale {
    font-size:18px;font-weight:bold;color: #493ce7;background-color: #ffff89;display: inline-block;padding: 0px 10px;border-radius: 5px;
}


.novia-subscription-listing a {
    position: absolute !important;
    bottom: 22px;
    left: 0px;
}

table.novia-dashboard-docs th {
    white-space: nowrap;
}

.novia-tab-content p {
    font-size: 13px;
    line-height: 1.4em;
    color: #000;
    margin-top: 1em;
}

.novia-dashboard-docs td:last-child a {
    display: block;
    width: 150px;
}


.novia-operations-report {
    width:3000px;
}

.novia-operations-report th {
    text-align:left;
    vertical-align: bottom;
    padding: 4px 8px;
    background-color: #ccc;
    color: #444;
    cursor:pointer;
}

.novia-operations-report th:hover {
    background-color:#bbb;
}

.novia-operations-report td {
    white-space:nowrap;
    padding:0px 5px;
}

.novia-operations-report .sorted {
    background-color:#444 !important;
    color:#fff !important;
}

.novia-operations-fields label {
    display: inline !important;
}

.novia-operations-rejected {
    background-color: #a00;
    color: #fff;
}

tr.novia-operations-alert {
    background-color: #ffffb8;
}

.novia-organization-alert {
    margin-bottom: 2em;
    padding: 12px;
    background-color: #fff;
    border-left: 4px solid #a00;
    color: #000;
    box-shadow: 0px 1px 5px rgba(0,0,0,0.2) !important;
    cursor: pointer;
    display: block;
}

.novia-organization-alert .fa-exclamation-triangle {
    color: #fa0;
    margin-right: 4px;
    margin-left: 4px;
}

.novia-search {
    padding: 10px 0px;
}

td.op-report-link {
    cursor: pointer;
    color: #2271b1;
    text-decoration: underline;
}

.novia-upload-error {

}

h2.novia-editing-label {
    font-size: 20px;
    font-weight: bold;
}

.novia-certification-scroll {
    width: 100%;
    max-height: 400px;
    overflow-y: scroll;
    font-size: 14px;
    margin-bottom: 1em;
}

.novia-certification-scroll td {
    padding: 2px 12px;
}

span.novia-req-certified {
    background-color: #290;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    padding: 3px 8px;
    border-radius: 14px;
    display: inline-block;
    margin: 3px;
    cursor:pointer
}

#cWorkflow .novia-tab-content {
    overflow-x: scroll;
}

.novia-dashboard-docs a[data-action] {
    display: block;
    vertical-align: top;
    margin: 3px 0px;
    background-color: rgba(0, 0, 0, 0.1);
    font-size: 11px;
    text-decoration: none;
    border-radius: 3px;
    min-width: 100px;
    text-align: center;
    background: linear-gradient(0deg, #ddd, #eee);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
}

.novia-dashboard-docs a[data-action]:hover {
    color: #fff;
    background: linear-gradient(0deg, #005f9f, #09f);
}

.novia-dashboard-docs a[data-action="refund"]:hover, .novia-dashboard-docs a[data-action="delete"]:hover {
    color: #fff;
    background: linear-gradient(0deg, #800, #922);
}


.novia-dashboard-docs td {
    vertical-align: top;
    border-bottom: 1px solid #ccc;
}

span.novia-ecert-asterisk {
    color: #09f;
}

span.novia-ecert-description {
    display: block;
    font-size: 13px;
    font-weight: bold;
    padding-top:8px;
}

span.novia-ecert-description .novia-ecert-asterisk {
    font-size: 1.5em;
    vertical-align: -11%;
    margin-right: 3px;
}

.novia-edit-user {
    padding-bottom: 1em;
}

.novia-edit-user > div {
    padding: 10px 0em;
    font-size: 15px;
    font-weight: bold;
}

.novia-edit-user input {
    width: 300px;
    padding: 7px;
}

.novia-edit-profile input {
    width: 400px;
}

.novia-edit-profile-field {
    font-size: 14px;
    font-weight: bold;
    padding: 1em 0em;
}

.novia-county-list .novia-req-certified {
    padding: 0px 4px;
    margin: 0px;
    margin-left: 3px;
    line-height: 16px;
}

.novia-ecert-description .novia-req-certified {
    line-height: 12px;
    padding: 3px 5px;
}

.novia-upload-field input[type="text"] {
    width: 100%;
    padding: 4px;
    font-size: 14px;
}

.novia-upload-field {
    padding: 0.5em;
}

.novia-upload-field strong {
    font-size: 13px;
}

.novia-tab-content[data-channel="recording"], .novia-tab-content[data-channel="dashboard"] {
    overflow-x: scroll;
}

.novia-dashboard-docs td:first-child {
    background-color: rgba(0,0,0,0.05);
}

tr.novia-operations-alert[data-refunded="1"] {
    text-decoration: line-through;
}

li.novia-priority-support {
    color: #f00;
    font-size: 1.2em;
}

.novia-notary .novia-tab.selected {
    background-color: #1c184e;
    color: #fff;
    border-top: 2px solid #978fff;
}

.novia-notary .novia-tab {
    background-color: #fff;
    color: #1c184e;
    font-weight: bold;
}

.novia-notary .novia-tabs {
    border-bottom: 1px solid #1c184e;
}

.novia-notary .novia-notary-count {
    background-color: #02c6ae;
    padding: 2px 7px;
    border-radius: 24px;
    font-size: 14px;
    margin-left: 4px;
    color:#fff;
}

.novia-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 0px 20px;
}

.novia-profile-box {
    border-radius: 8px;
    box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
    padding: 15px;
    margin: 20px 0px;
}

.novia-profile-box h3 {
    font-size: 17px !important;
    font-weight: bold;
    margin-bottom: 0px !important;
}

.novia-profile-field label {
    font-weight: bold;
    font-size: 15px;
}

.novia-profile-field input[type="text"],
.novia-profile-field input[type="date"] {
    width: 100%;
    box-sizing: border-box;
    padding: 3px !important;
    font-size: 14px;
    border: 1px solid rgb(226, 232, 240);
}

.novia-profile-field textarea {
     width: 100%;
     box-sizing: border-box;
     padding: 3px !important;
     font-size: 14px;
     border: 1px solid rgb(226, 232, 240);
    height:100px;
 }

.novia-profile-field {
    padding: 8px 0px;
}

input.novia-service {
    width: 150px;
}

input.novia-currency {
    width: 80px;
    text-align:right;
}

.novia-service-fees td {
    padding: 5px;
    border: none;
}

.novia-service-fees {
    border: none;
}

.novia-service-fees input {
    padding: 3px !important;
    font-size: 14px;
}

.novia-service-fees .fas {
    cursor: pointer;
    opacity: 0.5;
    padding: 1px;
    position: relative;
    top: 2px;
}

.novia-service-fees td {
    white-space: nowrap;
}

.novia-service-fees .fas:hover {
    opacity: 1;
}

.novia-service-fees .fa-times:hover {
    color: #a00;
}

.novia-service-fees .fa-chevron-up:hover, .novia-service-fees .fa-chevron-down:hover {
    color: #09f;
}

.novia-service-fee-container {
    margin-top: 1em;
}

.novia-profile-box button {
    width: 100%;
    margin-bottom: 5px;
}

.novia-profile-box button .fas {
    margin-right: 8px;
}

.novia-profile-field i.fas.fa-asterisk {
    color: #a00;
    font-size: 9px;
    vertical-align: 60%;
}

.novia-ipen-signature {
    background-color: #eee;
    padding: 10px;
    text-align: center;
    margin: 8px 0px;
    margin-bottom:0px;
    display: none;
}

.novia-ipen-signature img {
    max-width: 100%;
    max-height: 200px;
}

.novia-ipen-screen {
    display:none;
}

.novia-ipen-icon-question {
    display: grid;
    grid-template-columns: 36px 1fr;
    line-height: 36px;
    grid-gap: 10px;
    font-weight: bold;
    font-size: 19px;
    margin: 1em 0em;
}

.novia-ipen-icon-question > .fas {
    font-size: 36px;
}

.novia-ipen-notarize-draw {
    background-color: #eee;
    padding: 20px;
    position:relative;
    overflow:hidden;
    cursor:crosshair;
}

.novia-ipen-rectangle {
    position: absolute;
    border: 2px solid #ccc;
    background-color: rgba(200, 200, 200, 0.2);
    cursor: move;
    top:-20px;
    left:-20px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 14px;
    line-height: 30px;
}

.novia-ipen-rectangle[data-type="0"] {
    border: 2px solid #a5cfeb;
}

.novia-ipen-rectangle[data-type="1"] {
    border: 2px solid #c9e7c0;
}

.novia-ipen-rectangle[data-type="2"] {
    border: 2px solid #e3d2b1;
}

.novia-ipen-rectangle[data-type="3"] {
    border: 2px solid #e5cce5;
}

.novia-ipen-rectangle[data-type="4"] {
    border: 2px solid #c1e7e7;
}

.novia-ipen-rectangle.novia-ipen-selected {
    border: 2px solid #3498db !important;
    background-color: rgba(52, 152, 219, 0.2);
    z-index:1;
}

.novia-ipen-handle {
    width: 10px;
    height: 10px;
    background-color: #bbb;
    position: absolute;
    cursor: pointer;
    display:none;
}

.novia-ipen-selected .novia-ipen-handle {
    background-color:#3498db;
    display:block;
}

.novia-ipen-handle.nw { top: -5px; left: -5px; cursor: nw-resize; }
.novia-ipen-handle.ne { top: -5px; right: -5px; cursor: ne-resize; }
.novia-ipen-handle.sw { bottom: -5px; left: -5px; cursor: sw-resize; }
.novia-ipen-handle.se { bottom: -5px; right: -5px; cursor: se-resize; }
.novia-ipen-handle.n { top: -5px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
.novia-ipen-handle.s { bottom: -5px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
.novia-ipen-handle.e { top: 50%; right: -5px; transform: translateY(-50%); cursor: e-resize; }
.novia-ipen-handle.w { top: 50%; left: -5px; transform: translateY(-50%); cursor: w-resize; }

.novia-ipen-notarize-draw > img {
    pointer-events: none;
    box-shadow: 0px 2px 10px rgba(0,0,0,0.2);
    width:940px;
    height:1216px;
    max-width:none;
}

.novia-ipen-notary-columns {
    display: grid;
    grid-template-columns: 220px 1fr;
}

.novia-ipen-notarize-mode {
    padding: 6px 16px;
    margin: 4px 2px;
    background-color: #fff;
    border-radius: 5px;
    cursor: pointer;
    color: #555;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
    font-size: 15px;
    display: inline-block;
}

.novia-ipen-notarize-mode:hover {
    background-color: #ddd;
}

.novia-ipen-notarize-mode.novia-ipen-mode-selected {
    background-color: #1c184e;
    color: #fff;
    font-weight: bold;
}
.novia-ipen-notarize-modes {
    position:sticky;
    top:0px;
    z-index:2;
    background-color: #f3f3f3;
    padding: 8px;
    border:1px solid #ddd;
}

.novia-ipen-notarize-mode i {
    width: 26px;
}

.novia-ipen-rectangle input[type="text"] {
    width: calc(100% - 10px);
    background-color: transparent !important;
    text-shadow: 0px 0px 3px #fff;
    margin: 5px;
    padding: 0px !important;
    line-height: 1em !important;
    box-sizing: border-box !important;
    font-size: 14px;
}

.novia-ipen-delete {
    cursor: pointer;
    top: -7px;
    position: absolute;
    left: -35px;
    opacity: 0.4;
    display:none;
    font-size: 30px;
    color: #a00;
}

.novia-ipen-delete:hover {
    color: #a00;
    opacity: 1;
    background-color:#fff;
}

.novia-ipen-selected .novia-ipen-delete {
    display:block;
}

.novia-notary-invite-box input {
    padding: 5px;
    font-size: 14px;
    width: 300px;
    margin-right: 7px;
}

.novia-notary-invite-box {
    font-weight: bold;
    font-size: 14px;
    line-height: 1em;
    margin-bottom: 5em;
}

.novia-notary-list {
    overflow-y: scroll;
    background-color: #eee;
    padding: 1em;
    height: 600px;
}

.novia-notary-entry {
    background-color: #fff;
    border-radius: 12px;
    padding: 1em;
    display: grid;
    grid-template-columns: 46px 1fr;
    grid-gap: 15px;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.1);
    cursor: pointer;
    margin-bottom: 7px;
}

.novia-notary-entry .fa-user {
    font-size: 24px;
    /* padding: 5px; */
    background-color: #eee;
    border-radius: 30px;
    width: 46px;
    height: 46px;
    text-align: center;
    line-height: 46px;
    color: #aaa;
}

.novia-notary-entry > div {
    font-size: 15px;
}

.novia-notary-entry h4 {
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 2px;
    margin-top: 3px;
}

.novia-notary-entry > div > div {
    line-height: 1em;
}

.novia-notary-entry:hover {
    outline: 1px solid #02c6ae;
}

.novia-notary-entry a {
    color: #02c6ae;
}

.novia-customer-screen {
    display:none;
}

.novia-notary-entry.novia-static-entry:hover {
    outline: none;
}

.novia-notary-entry.novia-static-entry {
    box-shadow: none;
    padding: 1em 0em;
    cursor: default;
}

.novia-notary-page-heading {
    background-color: #eee;
    padding: 1em;
    border-radius: 5px;
    margin-top: 1em;
    display: grid;
    grid-template-columns: 46px 1fr 250px;
    align-items: center;
    grid-gap: 15px;
}

.novia-notary-page-heading h4 {
    margin: 0px !important;
}

.novia-notary-page-heading .fa-user {
    font-size: 24px;
    /* padding: 5px; */
    background-color: #fff;
    border-radius: 30px;
    width: 46px;
    height: 46px;
    text-align: center;
    line-height: 46px;
    color: #aaa;
}

.novia-notary-page-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1em;
}

.novia-notary-page-columns h3 {
    font-size: 21px !important;
    font-weight: bold;
    margin-bottom: 8px !important;
}

.novia-notary-page-columns > div > div {
    margin-left: 1em;
    margin-bottom: 1em;
    line-height: 1.15em;
}

.novia-ipen-itemdesc {
    position: absolute;
    left:0px;
    bottom: -23px;
    font-size: 13px;
    font-weight: bold;
    border: 1px solid #000;
    padding: 2px 7px;
    line-height: 1em;
    display: none;
    white-space:nowrap;
}

.novia-ipen-selected .novia-ipen-itemdesc {
    display: inline-block;
}

.novia-page-controls {
    position: absolute;
    right: 10px;
    top: 10px;
    background-color: rgba(0,0,0,0.7);
    color: #fff;
    border-radius: 5px;
    padding: 2px 10px;
    vertical-align: middle;
    font-size: 13px;
    line-height: 24px;
}

.novia-page-controls > span {
    cursor: pointer;
    padding: 3px 8px;
    font-size: 14px;
    font-weight: bold;
    margin: 0px 2px;
    border-radius: 3px;
}

.novia-page-controls > span:hover {
    background-color: #333;
}

.novia-page-controls > span.selected {
    background-color: #fff;
    color: #000;
}

.novia-ipen-pages > span {
    display: inline-block;
    padding: 3px 9px;
    font-size: 15px;
    font-weight: bold;
    background-color: #eee;
    border-radius: 4px;
    cursor: pointer;
}

.novia-ipen-pages {
    line-height: 18px;
}

.novia-ipen-pages > span:hover {
    background-color: #ddd;
}

.novia-ipen-pages > span.selected {
    background-color: #1c184e;
    color: #fff;
}

.novia-ipen-notary-category {
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #1c184e;
    line-height: 22px;
    margin-bottom: 10px;
    margin-top: 15px;
}

.ipen-disclaimer {
    margin-top: 1em;
    padding: 10px;
    font-size: 13px;
    line-height: 1.25em;
    background-color: #eee;
}

.ipen-notary-option-description {font-weight: normal;font-size: 13px;line-height: 1.25em;background-color: #eee;padding: 10px;margin-bottom: 1em;}

.ipen-notary-option-description ul {
    margin: 0px !important;
    padding: 0px !important;
    padding-left: 16px !important;
}

tr.novia-highlight-row {
    background-color: #ffd !important;
    outline: 1px solid #fa0;
    outline-offset: -1px;
}

span.novia-ipen-remaining {
    font-size: 11px;
    white-space: nowrap;
    color: #1c184e;
    margin-top: 5px;
    display: inline-block;
    font-weight: bold;
}

option[disabled] {
    color: #bbb;
    font-style: italic;
}

input.novia-manual-link {
    width: 100%;
    box-sizing: border-box;
    font-size: 13px;
    padding: 4px 10px !important;
    max-width: 800px;
    margin-bottom:0.5em;
}

.novia-pagination {
    padding: 1em 0em;
}

.novia-page {
    background-color: #ddd;
    border-radius: 3px;
    margin-left: 5px;
    cursor: pointer;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 5px;
    width: 32px;
    height: 22px;
    line-height: 22px;
    text-align: center;
}

.novia-page.selected {
    background-color: #2271b1;
    color: #fff;
}

.novia-page:hover {
    background-color: #ccc;
}

.novia-page.selected:hover {
    background-color: #2271b1;
}

.novia-profile-alert {
    padding: 15px;
    margin-top: 1em;
    background-color: #1c184e;
    color: #fff;
    font-weight: bold;
}

.novia-notary thead > tr {
    background-color: #ddd;
}

.novia-notary thead th[data-sort] {
    cursor: pointer;
}

.novia-notary thead th[data-sort]:hover {
    background-color: #ccc;
}

.novia-notary thead th.sorted {
    background-color: #1c184e;
    color: #fff;
}
.novia-notary thead th.sorted:hover {
    background-color: #1c184e !important;
}

.novia-notary thead th.sorted .fa-arrow-down {
    display: inline-block;
}

.novia-notary thead th.sorted .fa-arrow-up {
    display: none;
}

.novia-notary thead th.sorted.desc .fa-arrow-down {
    display: none;
}

.novia-notary thead th.sorted.desc .fa-arrow-up {
    display: inline-block;
}

.novia-notary thead th .fas {
    display: none;
    margin-right: 5px;
}

.novia-notary-instructions h2 {
    font-size: 24px !important;
    font-weight: bold;
}

.novia-notary-instructions h3 {
    font-size: 20px !important;
}

.novia-notary-instruction-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px;
    grid-template-rows: auto auto auto auto;
}

.novia-notary-instruction-grid > div {
    border: 1px solid #cacbef;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.14);
}

div#advanced-ads-selling-setup-head {
    padding: 2em;
    padding-bottom: 0em;
}

div#advanced-ads-selling-wrapper {
    margin: 2em;
    border: 1px solid #ddd;
    padding: 2em;
}

.advanced-ads-selling-setup-ad-details-content {
    position: relative;
    top: -29px;
    left: 20px;
}

[name="advanced-ads-selling-upload-ad"] + label {
    font-weight: bold;
}

.advanced-ads-selling-setup-ad-details > label {
    font-weight: bold;
    display: inline-block;
    margin-right: 12px;
}

.advanced-ads-selling-setup-ad-details-submit {
    position: relative;
    top: -29px;
    right: -25px;
}

.novia-pricing-save-callout {
    position: absolute;
    top: 7px;
    right: -135px;
    font-size: 15px;
    background-color: #f75212;
    color: #fff;
    padding: 0px 10px;
    border-radius: 6px;
    font-weight: bold;
}

.novia-average-price {
    text-align: center;
    background-color: #e5e5e5;
    padding: 4px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom:1.5em;
}

.novia-annual-compare {
    padding: 10px;
    background: #fff;
    margin-top: -1em;
    text-align: center;
}

.novia-subscription-popular {
    position: absolute;
    top: 0px;
    right: 20px;
    background-color: #fa0;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    line-height: 1.5em;
    padding: 0px 10px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
}

.novia-dashboard-buttons {
    position: absolute;
    right: 0px;
}


/* Begin RON signer dialog */

/* Utility */

#add-signers-dialog {
    --brand-blue-light: #DBEAFE;
    --brand-blue:       #3B82F6;
    --brand-blue-dark:  #2563EB;
    --brand-gray-50:    #F9FAFB;
    --brand-gray-100:   #F3F4F6;
    --brand-gray-200:   #E5E7EB;
    --brand-gray-300:   #D1D5DB;
    --brand-gray-400:   #9CA3AF;
    --brand-gray-500:   #6B7280;
    --brand-gray-600:   #4B5563;
    --brand-gray-700:   #374151;
    --red-500:          #EF4444;
}

#add-signers-dialog .hidden {
    display: none !important;
}

/* Dialog Container */
#add-signers-dialog .dialog {
    background-color: #fff;
    width: 100%;
    max-width: 56rem;       /* max-w-4xl */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); /* shadow-2xl */
    overflow: hidden;
    transform: translateZ(0);
    transition: all .2s ease-in-out;
}

/* Padding Wrapper */
#add-signers-dialog .dialog-content {
    padding: 1.5rem; /* p-6 */
}
@media (min-width: 640px) {
    #add-signers-dialog .dialog-content {
        padding: 2rem; /* sm:p-8 */
    }
}

/* Header */
#add-signers-dialog .dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem; /* mb-6 */
}
#add-signers-dialog .dialog-header-title-group {
    display: flex;
    align-items: center;
    gap: 1rem; /* gap-4 */
}
#add-signers-dialog .dialog-header-icon {
    width: 3rem; /* w-12 */
    height: 3rem; /* h-12 */
    background-color: var(--brand-blue-light);
    color: var(--brand-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px; /* rounded-full */
}
#add-signers-dialog .dialog-title {
    font-size: 1.25rem;      /* text-xl */
    line-height: 1.75rem;
    font-weight: 700;        /* font-bold */
    color: var(--brand-gray-700);
}
#add-signers-dialog .dialog-subtitle {
    font-size: 0.875rem;     /* text-sm */
    line-height: 1.25rem;
    color: var(--brand-gray-500);
}
#add-signers-dialog .dialog-close-btn {
    background: none;
    border: none;
    color: var(--brand-gray-400);
    cursor: pointer;
    transition: color .2s ease-in-out;
}
#add-signers-dialog .dialog-close-btn:hover {
    color: var(--brand-gray-600);
}

/* Signers List */
#add-signers-dialog .signers-list {
    margin-bottom: 2rem; /* mb-8 */
}
#add-signers-dialog .signers-list-title {
    font-size: 1.125rem;   /* text-lg */
    line-height: 1.75rem;
    font-weight: 600;      /* font-semibold */
    color: var(--brand-gray-700);
    margin-bottom: 1rem;   /* mb-4 */
}
#add-signers-dialog .signers-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;           /* space-y-3 */
}
#add-signers-dialog .signer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;          /* p-4 */
    background-color: var(--brand-gray-50);
    border: 1px solid var(--brand-gray-200);
    border-radius: 0.5rem;  /* rounded-lg */
}
#add-signers-dialog .signer-info {
    display: flex;
    align-items: center;
    gap: 1rem;              /* gap-4 */
}
#add-signers-dialog .signer-avatar {
    width: 2.5rem;          /* w-10 */
    height: 2.5rem;         /* h-10 */
    border-radius: 50%;
    object-fit: cover;
}
#add-signers-dialog .signer-name {
    font-weight: 600;       /* font-semibold */
    color: var(--brand-gray-700);
}
#add-signers-dialog .signer-email {
    font-size: 0.875rem;    /* text-sm */
    color: var(--brand-gray-500);
}
#add-signers-dialog .signer-remove-btn {
    background: none;
    border: none;
    color: var(--brand-gray-400);
    cursor: pointer;
    transition: color .2s ease-in-out;
}
#add-signers-dialog .signer-remove-btn:hover {
    color: var(--red-500);
}

/* Placeholder */
#add-signers-dialog .signers-placeholder {
    text-align: center;
    padding: 2rem 1rem;     /* py-8 */
    border: 2px dashed var(--brand-gray-200);
    border-radius: 0.5rem;  /* rounded-lg */
}
#add-signers-dialog .placeholder-icon {
    font-size: 1.875rem;    /* text-3xl */
    margin-bottom: 0.75rem; /* mb-3 */
    color: var(--brand-gray-300);
}
#add-signers-dialog .placeholder-text {
    color: var(--brand-gray-500);
}
#add-signers-dialog .placeholder-note {
    font-size: 0.875rem;    /* text-sm */
    color: var(--brand-gray-400);
}

/* Add Signer Form */
#add-signers-dialog .add-signer-form {
    background-color: var(--brand-gray-50);
    padding: 1.5rem;        /* p-6 */
    border: 1px solid var(--brand-gray-200);
    border-radius: 0.5rem;  /* rounded-lg */
}
#add-signers-dialog .form-section-title {
    font-size: 1.125rem;    /* text-lg */
    font-weight: 600;       /* font-semibold */
    color: var(--brand-gray-700);
    margin-bottom: 1rem;    /* mb-4 */
}
#add-signers-dialog .form-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;              /* gap-4 */
    align-items: end;
}
@media (min-width: 768px) {
    #add-signers-dialog .form-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* md:grid-cols-3 */
    }
}
#add-signers-dialog .form-field {
    /* spans 1 column by default */
}
#add-signers-dialog .form-label {
    display: block;
    font-size: 0.875rem;    /* text-sm */
    font-weight: 500;       /* font-medium */
    color: var(--brand-gray-600);
    margin-bottom: 0.25rem; /* mb-1 */
}
#add-signers-dialog .input-field {
    width: 100%;
    padding: 0.5rem 0.75rem; /* py-2 px-3 */
    border: 1px solid var(--brand-gray-300);
    border-radius: 0.375rem; /* rounded-md */
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); /* shadow-sm */
    transition: border .2s ease-in-out, box-shadow .2s ease-in-out;
}
#add-signers-dialog .input-field:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.5); /* focus:ring-brand-blue */
}
#add-signers-dialog .form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;       /* mt-4 */
}

/* Buttons */
#add-signers-dialog .btn {
    font-weight: 600;       /* font-semibold */
    border-radius: 0.375rem;/* rounded-md */
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); /* shadow-sm */
    transition: all .2s ease-in-out;
}
#add-signers-dialog .btn-add-signer {
    display: flex;
    align-items: center;
    gap: 0.5rem;            /* gap-2 */
    background-color: #fff;
    border: 1px solid var(--brand-gray-300);
    color: var(--brand-gray-700);
    padding: 0.5rem 1rem;   /* py-2 px-4 */
}
#add-signers-dialog .btn-add-signer:hover {
    background-color: var(--brand-gray-100);
}

/* Footer */
#add-signers-dialog .dialog-footer {
    background-color: var(--brand-gray-50);
    padding: 1rem 1.5rem;   /* py-4 px-6 */
    border-top: 1px solid var(--brand-gray-200);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;           /* gap-3 */
}
#add-signers-dialog .btn-cancel {
    padding: 0.5rem 1rem;   /* py-2 px-4 */
    font-size: 0.875rem;    /* text-sm */
    color: var(--brand-gray-600);
    background-color: #fff;
    border: 1px solid var(--brand-gray-300);
}
#add-signers-dialog .btn-cancel:hover {
    background-color: var(--brand-gray-100);
}
#add-signers-dialog .btn-primary {
    padding: 0.5rem 1rem;   /* py-2 px-4 */
    font-size: 0.875rem;    /* text-sm */
    color: #fff;
    background-color: var(--brand-blue);
    border-radius: 0.375rem;/* rounded-md */
}
#add-signers-dialog .btn-primary:hover {
    background-color: var(--brand-blue-dark);
}
#add-signers-dialog .btn-primary:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--brand-blue);
}


/* End RON signer dialog */

/* Termination Reminder Styles */
.termination-reminder-container {
    display: none;
    margin-top: 16px;
}

.termination-reminder-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1f2937;
}

.termination-reminder-description {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 12px;
}

.termination-reminder-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    color: #1f2937;
    background-color: white;
}

.termination-reminder-select:focus {
    outline: none;
    border-color: #3b82f6;
}

/* End Termination Reminder Styles */


@media screen and (max-width: 970px) {
    .novia-subscription-listing-container {
        grid-template-columns:1fr 1fr;
    }

    .novia-ipen-notary-columns {
        grid-template-columns: 1fr;
    }

    .novia-ipen-notarize-mode {
        display: inline-block;
    }

    .novia-dashboard-buttons {
        position: static;
        text-align:left;
    }
}

@media screen and (max-width: 767px) {
    .novia-subscription-listing-container {
        grid-template-columns:1fr;
    }


    .novia-notary-instruction-grid {
        grid-template-columns: 1fr;
        grid-gap: 15px;
    }

}

@media screen and (max-width:1284px) {
    .novia-ipen-notarize-draw {
        overflow-x: scroll;
    }
}

/* Package Feature CSS */

.filters {
    background: white;
    margin: 10px;
    padding: 20px;
    border-radius: 5px;
    border: 1px solid #eee;
}

.package {
    margin: 25px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    background: white;
    border: 1px solid #eee;
}
.filters input, .filters select, .filters button {
    margin: 10px;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.filters .search input {
    border: none;
    outline: none;
    margin: 0px;
    padding: 0px;
    min-width: 315px;
    padding: 12px;
    padding-left: 0px;
}

.search {
    border: 1px solid #ccc;
    border-radius: 5px;
    display: inline-block;
    color: #ccc;
    margin-right: 10px;
}

.search i {
    margin-left: 10px;
    margin-right: 5px;
    color: #ccc;
}

.package-section {
    background-color: white;
    padding: 20px;
    margin: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    font-size: 14px;
}

.package-header {
    background-color: #F1F5F9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 5px 5px 0px 0px;
    padding: 20px;
    padding-bottom: 10px;
}
.document-table {
    width: 100%;
    border-collapse: collapse;
    line-height: 40px;
    border:0 none transparent;
    margin-bottom:-1px;
}
.document-table th, .document-table td {
    text-align: center;
    padding: 10px;
    border:0 none transparent;
    border-bottom: 1px solid #eee;
}

.document-table th {
    color: #6F798C;
}

.status {
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 0.9em;
    color: white;
}
.status.pending {
    background-color: #DBEAFE;
    color: #485AC1;
    font-weight: 500;
}
.status.upload {
    background-color: #DBEAFE;
    color: #485AC1;
    font-weight: 500;
}
.status.ready {
    background-color: #FEF9C3;
    color: #966F39;
    font-weight: 500;
}
.status.complete {
    background-color: #D1FAE5;
    color: #358B86;
    font-weight: 500;
}
.btn-primary {
    background-color: #00c48c;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    margin: 5px;
}
.btn-secondary {
    background-color: #1e2a3b;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    margin: 5px;
}

.btn {
    background-color: white;
    color: #1e2a3b;
    border: 1px solid #F1F5F9;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    margin-right: 10px;
}


.btn:hover {
    background-color: #F1F5F9;
    border: .1px solid #F1F5F9;
    transition-duration: .2s;

}

.help-center-button {
    background-color: white;
    color: #1e2a3b;
    border: 1px solid #F1F5F9;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    margin: 5px;
}


.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #fff;
    min-width: 180px;
    box-shadow: 0px 8px 20px rgba(0,0,0,0.15);
    z-index: 1;
    border-radius: 5px;
    overflow: hidden;
    padding: 8px 4px;
}





.dropdown-content a {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 0px;
    text-decoration: none;
    color: #2d2d2d;
    font-size: 14px;
    transition: background 0.2s;
    line-height: 20px;
    border-radius: 5px;
    text-align: left;
}


.filters-bottom-row .btn-dropdown {
    min-width: 360px;
    margin-left: 0px;
    text-align: left;
}

.filters-bottom-row .btn-dropdown i {
    text-align: right;
    margin-left: 240px;
    margin-right: 0px;
}

.filters-button-row .btn{
    margin-left: 0px;
}


.btn-dropdown, .btn-normal {
    background-color: white !important;
    color: #1e2a3b !important;
    border: 1px solid #ccc;
    padding: 9px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.btn-dropdown i, select i {
    margin-left: 15px;
    color: #ccc;
}

.btn-dropdown:last-child i {
    margin-left: 0px;
    color: #1e2a3b;
}

.dropdown-content a:hover {
    background-color: #f8f8f8;
    border-radius: 5px;
    color: #000;
}
.dropdown-content .delete {
    color: #e74c3c;
}
.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content a.delete:hover {
    color: #f00;
}

.three-dots {
    cursor: pointer;
    font-size: 25px;
    padding: 0 12px;
    color: #1e2a3b;
    font-weight: bold;
    position: relative;
    top: -6px;
}

.package-section h1 {
    margin-left: 50px;
}

.package-section h2 {
    color: #000;
    font-size: 24px;
}

.package-section i {
    margin-right: 5px;
}

.filter-container {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.tabs {
    display: flex;
    margin: 0 10px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    overflow: hidden;
}
.tab {
    flex: 1;
    padding: 12px 20px;
    text-align: center;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #6F798C;
}


.tab:hover {
    background-color: #F1F5F9;
    margin: 5px;
    border-radius: 5px;
    color: #1e2a3b;
}

.tab i {
    font-size: 16px;
    margin-right:5px;
}

.tab.active {
    background-color: #F1F5F9;
    margin: 5px;
    border-radius: 5px;
    color: #1e2a3b;

}

.package-section-heading {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

.package-section p {
    color: #6F798C;
}

.package-info-header {
    text-align: center;
    color:#000;
    font-size:1.2em;
}
.package-info {
    color: #6F798C;
    text-align: center;
    line-height: 24px;
}

.line{
    border: 1px solid  #F1F5F9;
}

.filters-top-row {
    width: 100%;
}

.pkg-line > strong {
    color: #000;
    display: block;
    margin-bottom: -4px;
    font-weight: 500;
}

.pkg-line {
    font-size: 14px;
    margin: 0.5em 0em;
}

.pkg-line span {
    color: #f00;
    font-size: 1.2em;
    margin-left: 2px;
}

.pkg-line input, .pkg-line select {
    padding: 5px !important;
    width: 100%;
    font-size:inherit !important;
    border-radius: 5px !important;
}

.pkg-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

.novia-package-form {
    text-align:left;
    display:block;
    width: 100%;
}

select.invalid {
    border: 1px solid #f00 !important;
}

.package-icon-sprite {
    display:inline-block;
    width:64px;
    height:64px;
    margin-bottom:0.5em;
    background-repeat:no-repeat;
    background-position:0px -64px;
    background-image:url(/wp-content/plugins/novia-document-processing/assets/packages-icon-sprite.png);
}

.package-icon-sprite.cube {
    background-position-x: 0px;
}

.active .package-icon-sprite {
    background-position-y: 0px;
}

.package-icon-sprite.doc {
    background-position-x: -64px;
}

.package-icon-sprite.checkmark {
    background-position-x: -128px;
}

.package-icon-sprite.ai-select {
    background-position-x: -192px;
}

.package-icon-sprite.ai-fill {
    background-position-x: -256px;
}

.package-icon-sprite.ai-edit {
    background-position-x: -320px;
}

.package-timeline-item {
    text-align: center;
    font-weight: bold;
    overflow: visible;
    width: 100px;
    line-height: 1.2em;
}

.package-timeline-item.active {
    color:#2563eb;
}

.package-timeline-separator > div {
    border-top: 1px solid #ccc;
    margin-top: 32px;
}

.package-timeline {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    transform: scale(0.8);
}

.package-timeline.with-ai {
    grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto;
    width: 150%;
    transform: scale(0.65);
    margin-left: -25%;
    margin-right: -25%;
}

.package-timeline-separator.active > div {
    border-color: #2563eb;
}

.ai-visible {
    display:none;
}

.with-ai .ai-visible {
    display:block;
}

.novia-trade-list label {
    display:block;
    padding:2px;
}

.novia-trade-list input {
    margin-right:5px;
}

.package-section-heading h2, .package-section-heading p {
    margin-bottom: 0px !important;
}

.new-package-button {
    display: inline-grid;
    grid-template-columns: auto 1fr;
    grid-gap: 8px;
    align-items: start;
    background-color: #1d4ed8 !important;
    color: #fff !important;
    border-color: #1d4ed8;
}

.new-package-button:hover {
    background-color: #1a42b5 !important;
    border-color: #1a42b5;
}

.package-button-label {
    display: grid;
    text-align: left;
    grid-template-rows: auto auto;
    grid-gap: 3px;
}

.package-button-label > strong {
    font-size: 16px;
}

.package-button-label > span {
    font-weight: normal;
    font-size: 13px;
}


.novia-dialog-backdrop2 {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    text-align: center;
    display:none;
    white-space:nowrap;
}

.novia-dialog2 {
    background-color: #fff;
    display: inline-block;
    box-shadow: 0px 3px 10px rgba(0,0,0,0.3);
    vertical-align: middle;
    text-align: left;
    white-space:normal;
    max-width:100%;
    padding:22px;
    border-radius:8px;
}

.novia-dialog-backdrop2::before {
    content: " ";
    display: inline-block;
    width: 1px;
    height: 100%;
    margin-right: -1px;
    vertical-align: middle;
}

.novia-dialog2 .btn-normal {
    background-color: #0f172a !important;
    color:#fff !important;
    font-weight:500;
}

.novia-dialog2 .btn-normal:hover {
    opacity:0.9;
    border-color:#fff;
}

.novia-dialog2 .btn-normal:active, .novia-dialog2 .btn-normal:focus {
    border-color:#fff;
}

.novia-dialog2 .btn-normal i {
    margin-right:5px;
    opacity:0.5;
}

.novia-dialog-title2 h2 {
    color: #000;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 0px !important;
    clear: none;
}

.novia-dialog-title2 span {
    font-size: 13px;
}

.novia-dialog-title2 i {
    float: right;
    cursor:pointer;
}

.package-drop-zone {
    text-align: center;
    padding: 10px;
    border: 2px dashed #ccc;
    border-radius: 6px;
    margin: 1em 0em;
    cursor:pointer;
}

.package-drop-zone p {
    margin: 0px;
}

.package-notice {
    font-size: 14px;
    padding: 1em;
    border-radius: 8px;
    margin: 0.5em 0em;
    line-height: 1.3em;
}

.pkg-yellow {
    background-color: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.pkg-blue {
    color: #1e40af;
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
}

.package-info-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    margin: 15px;
    font-size: 14px;
    line-height: 1.3em;
}

.package-info-columns strong {
    display: block;
}

.package-info-columns span {
    display: block;
}

.novia-package-form .package {
    margin: 25px 0px;
}

.package-document-entry {
    display: grid;
    grid-template-columns: auto 1fr 100px 100px;
    align-items: center;
    font-size: 12px;
    padding: 10px 15px;
    grid-gap: 10px;
    line-height: 1.25em;
}

.package-document-entry .fa-file {
    color: #3b82f6;
    font-size: 22px;
}

.package-document-entry strong {
    display: block;
    font-size: 14px;
    color: #000;
}

.package-drop-zone.dragover {
    border: 2px dashed #2563eb;
    background-color: #eff6ff;
    color: #2563eb;
}

.package-file-manager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px;
    min-width: 600px;
}

.package-document-entry.editable {
    grid-template-columns: 1fr auto auto auto;
}

.package-document-entry .fa-eye, .package-document-entry .fa-times {
    font-size: 16px;
    margin: 0px 4px;
    cursor: pointer;
    opacity: 0.5;
}

.package-document-entry .fa-eye:hover {
    opacity: 1;
    color: #3b82f6;
}

.package-document-entry .fa-times:hover {
    color: #a00;
    opacity: 1;
}


.package-file-manager.no-files {
    display: block;
}

.package-file-manager.no-files .package, .package-file-manager.no-files iframe {
    display: none;
}

.package-document-entry select {
    line-height: 1em;
    padding: 4px !important;
    font-size: 13px;
    padding-right: 2em !important;
    margin-top: 2px;
    cursor:pointer
}

.package-file-import {
    width: 600px;
    height: 300px;
    overflow-y: scroll;
    font-size: 13px;
    border: 1px solid #ddd;
    padding: 5px;
    margin-bottom: 18px;
}

.package-file-import > div {
    display: grid;
    padding:0px 8px;
    grid-template-columns: auto 55px 1fr auto;
    grid-gap: 18px;
    cursor: pointer;
    align-items: center;
}

.package-file-import-radios {
    font-size: 13px;
    font-weight: bold;
    color: #000;
}

.package-file-import-radios > label {
    display: inline-grid;
    grid-template-columns: auto auto;
    grid-gap: 5px;
    margin-right: 1em;
    align-items: center;
    line-height: 1em;
    cursor: pointer;
}

.package-file-import > div:hover {
    background-color: #eee;
}

span.novia-package-number {
    display: inline-block;
    background-color: #4d95de;
    color: #fff;
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: bold;
    cursor:pointer;
}

.novia-ipen-pkg-doclist > div {
    display: block;
    padding: 8px;
    font-size: 13px;
    line-height: 1.2em;
    cursor: pointer;
    border-radius:5px;
}

.novia-ipen-pkg-doclist strong, .novia-ipen-pkg-doclist span {
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.novia-ipen-pkg-doclist > div:hover {
    background-color: rgba(0,0,0,0.05);
}

.novia-ipen-pkg-doclist > div.selected {
    background-color: #1c184e;
    color: #fff;
}

.novia-ipen-left-pane {
    padding:8px;
}

.novia-package-download {
    width:500px;height:200px;overflow-y:scroll;font-size:14px;
}

.novia-package-download input[type="text"] {
    padding: 5px;
    font-size: 14px;
}

.novia-package-download > div {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 0px 10px;
    padding: 3px;
    padding-bottom:10px;
}

.novia-package-download {
    border: 1px solid #e7e7e7;
    margin-top: -1em;
    margin-bottom: 2em;
    padding: 10px;
}

.dropdown-content .fas {
    margin-right: 10px;
}

.package-next-step > span {
    font-size: 12px;
}

.package-next-step > strong {
    display: block;
    color: #000;
}

.package-next-step {
    line-height: 1.2em;
    text-align: center;
}

.package-document-filename input[type="text"] {
    max-width: 100%;
    box-sizing: border-box;
    padding: 2px;
    min-width: 0px;
    font-size:13px;
}

.package-document-filename {grid-column-start: 3;grid-column-end: 5;display: grid !important;}

span.package-document-status {
    display: inline-block;
    padding: 5px 14px;
    background-color: #dfffd5;
    color: #290;
    font-weight: bold;
    border-radius: 15px;
}

.package-document-entry label {
    color: #000;
}

.package-document-entry input[type="checkbox"] {
    vertical-align: -2px;
    margin-right: 2px;
}

.package-document-entry + .package-document-entry {
    border-top: 1px solid #eee;
}

.package-document-status.purple {
    background-color: #f1deff;
    color: #401a5d;
}

.package-document-status.yellow {
    background-color: #fff9d0;
    color: #5d5100;
}

.document-table .package-document-status {
    line-height: 1.2em;
}

.novia-package-download > div + div {
    border-top: 1px solid #eee;
}

.package-download-title {
    grid-column-start: 1;
    grid-column-end: 3;
    font-weight: bold;
    color: #555;
}

.package-document-entry.editable {
    cursor:pointer;
}

.package-document-entry.editable:hover {
    background-color:#eee;
}

.novia-doc-type {
    display: grid;
    grid-template-columns: auto 200px 200px;
    grid-gap: 15px;
    align-content: center;
    align-items: center;
}

.novia-doc-types {
    font-size: 14px;
    overflow-y: scroll;
    width: auto;
    height: 240px;
    padding: 10px;
    border: 1px solid #eee;
}


.novia-doc-type select {
    font-size: inherit;
    padding: 5px;
}

.novia-doc-type > span:nth-of-type(2) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.package-document-entry input[type="text"] {
    font-size: 13px;
    padding: 5px !important;
}

span.novia-package-notary {
    font-size: 11px;
    line-height: 1.2em;
    display: inline-block;
}

.novia-package-advanced {
    font-size: 11px;
    color: #ccc;
    border-bottom: 1px solid #ddd;
    margin: 5px;
    padding-top: 8px;
    text-align: left;
    line-height: 1.2em;
}

.novia-page-image-loading {
    background-color: #eee;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 2;
    width: 100%;
    height: 100%;
    text-align: center;
    box-sizing: border-box;
    padding-top: 2em;
    font-weight: bold;
    cursor:default;
}

/* Begin package notary dialog */

/* Scope all rules under #package-notary-dialog */
#package-notary-dialog .package-dialog {
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 64rem;
}

#package-notary-dialog .dialog-content {
    padding: 1.5rem;
}
@media (min-width: 640px) {
    #package-notary-dialog .dialog-content { padding: 2rem; }
}

#package-notary-dialog .dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}
#package-notary-dialog .dialog-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}
#package-notary-dialog .header-icon-wrapper {
    background-color: #3B82F6;
    color: #ffffff;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
}
#package-notary-dialog .header-icon-wrapper i {
    font-size: 1.25rem;
}
#package-notary-dialog .header-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1F2937;
    margin: 0;
}
@media (min-width: 640px) {
    #package-notary-dialog .header-title { font-size: 1.5rem; }
}
#package-notary-dialog .header-subtitle {
    color: #6B7280;
    margin:0px;
}
#package-notary-dialog .close-button {
    background: transparent;
    border: none;
    color: #9CA3AF;
    cursor: pointer;
    transition: color 0.2s;
}
#package-notary-dialog .close-button i {
    font-size: 1.5rem;
}
#package-notary-dialog .close-button:hover {
    color: #4B5563;
}

#package-notary-dialog .info-banner {
    background-color: rgba(219,234,254,0.6);
    border: 1px solid #BFDBFE;
    color: #1E40AF;
    padding: 1rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
}
#package-notary-dialog .info-banner-icon {
    margin-top: 0.25rem;
    font-size: 1.25rem;
    color: #3B82F6;
}
#package-notary-dialog .info-banner-heading {
    font-weight: 700;
    margin: 0;
    font-size:1em;
}
#package-notary-dialog .info-banner-text {
    font-size: 0.875rem;
    color: rgba(29, 78, 216, 0.9);
    margin: 0;
    line-height: 1.2em;
    margin-top: 8px;
}

#package-notary-dialog .options-grid {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}
@media (min-width: 768px) {
    #package-notary-dialog .options-grid { grid-template-columns: repeat(3,1fr); }
}

#package-notary-dialog .option-card {
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
    padding: 1.25rem;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: box-shadow 0.2s;
    cursor:pointer;
    transform: scale(0.95);
}
#package-notary-dialog .option-card:hover {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
#package-notary-dialog .option-card .option-icon-wrapper,
#package-notary-dialog .option-card .option-icon-wrapper {
    background-color: #F3F4F6;
}
#package-notary-dialog .option-card.selected-card .option-icon-wrapper {
    background-color: #ffffff;
}
#package-notary-dialog .option-card.selected-card {
    border: 2px solid #3B82F6;
    background-color: #EFF6FF;
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    transform: scale(1.00);
}

#package-notary-dialog .option-icon-wrapper {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    margin-bottom: 1rem;
}
#package-notary-dialog .option-card .option-icon-wrapper i {
    color: #4B5563;
    font-size: 1.25rem;
}
#package-notary-dialog .option-card.selected-card .option-icon-wrapper i {
    color: #2563EB;
    font-size: 1.25rem;
}

#package-notary-dialog .option-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 1rem;
}
#package-notary-dialog .option-badge {
    padding: 1em;
    font-weight: 600;
}
#package-notary-dialog .option-badge--availability {
    background-color: #D1FAE5;
    color: #166534;
    font-size: 0.75rem;
}
#package-notary-dialog .option-badge--price {
    background-color: #DBEAFE;
    color: #1E40AF;
    font-size: 12px;
    border-radius: 0.375rem;
    line-height:1.3em;
    width: 100%;
    margin-top: 1em;
}
#package-notary-dialog .option-price-text {
    font-size: 0.75rem;
    font-weight: 400;
}
#package-notary-dialog .option-badge ul {
    margin-left: 1.5em;
    margin-bottom: 0em;
}
#package-notary-dialog .option-card-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1F2937;
    margin: 0;
}
#package-notary-dialog .option-card-text {
    color: #6B7280;
    margin: 0.5rem 0 1rem 0;
    line-height: 1.3;
    font-size: 14px;
}

#package-notary-dialog .feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: #4B5563;
    font-size: 0.875rem;
}
#package-notary-dialog .feature-list li {
    display: flex;
    align-items: start;
    gap: 0.5rem;
}
#package-notary-dialog .feature-list li i {
    color: #10B981;
    margin-top: 4px;
}

#package-notary-dialog .ipen-details-form {
    background-color: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
    padding: 1.5rem;
}
#package-notary-dialog .ipen-details-form-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
#package-notary-dialog .ipen-form-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1F2937;
    margin: 0;
}

#package-notary-dialog .notary-selection-group {
    margin-bottom: 1rem;
}
#package-notary-dialog .notary-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1F2937;
    margin-bottom: 0.375rem;
}
#package-notary-dialog .select-wrapper {
    position: relative;
}
#package-notary-dialog .notary-select {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 0.375rem;
    padding: 0.625rem 2.5rem 0.625rem 1rem;
    font-size: 0.875rem;
    color: #1F2937;
    appearance: none;
}
#package-notary-dialog .notary-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.5);
    border-color: #3B82F6;
}
#package-notary-dialog .select-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0.75rem;
    pointer-events: none;
    color: #9CA3AF;
}
#package-notary-dialog .notary-help {
    font-size: 0.75rem;
    color: #6B7280;
    margin-top: 0.375rem;
}

#package-notary-dialog .next-steps-banner {
    background-color: rgba(220,252,231,0.7);
    border: 1px solid #C6F6D5;
    color: #166534;
    padding: 1rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
#package-notary-dialog .next-steps-banner-icon {
    margin-top: 0.25rem;
    font-size: 1.25rem;
    color: #16A34A;
}
#package-notary-dialog .next-steps-banner-title {
    font-weight: 700;
    margin: 0;
    font-size:1em;
}
#package-notary-dialog .next-steps-banner-text {
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.3em;
    margin-top: 8px;
}

#package-notary-dialog .dialog-footer {
    background-color: #F9FAFB;
    padding: 1.25rem 2rem;
    border-top: 1px solid #E5E7EB;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

#package-notary-dialog .btn {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
    border: none;
}
#package-notary-dialog .btn--cancel {
    background-color: #ffffff;
    color: #4B5563;
    border: 1px solid #E5E7EB;
}
#package-notary-dialog .btn--cancel:hover {
    background-color: #F3F4F6;
}
#package-notary-dialog .btn--submit {
    background-color: #2563EB;
    color: #ffffff;
}
#package-notary-dialog .btn--submit:hover {
    background-color: #1D4ED8;
}

/* End package notary dialog */

/* Start RON notification dialog */

/* Content wrapper */
#ron-ready-dialog .ron-dialog__content {
    padding: 2rem;                               /* 32px */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Icon */
#ron-ready-dialog .ron-dialog__icon-wrapper {
    width: 4rem;                                 /* 64px */
    height: 4rem;                                /* 64px */
    background-color: #DBEAFE;                   /* brand-blue-light */
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;                      /* 20px */
}
#ron-ready-dialog .ron-dialog__icon {
    font-size: 1.5rem;                           /* 24px */
    color: #2563EB;                              /* brand-blue */
}

/* Title */
#ron-ready-dialog .ron-dialog__title {
    font-size: 1.25rem;                          /* 20px */
    font-weight: 700;
    color: #1F2937;                              /* brand-gray-800 */
    text-align: center;
    margin-bottom: 0.75rem;                      /* 12px */
}

/* Body text */
#ron-ready-dialog .ron-dialog__text {
    text-align: center;
    color: #374151;                              /* brand-gray-700 */
    line-height: 1.625;
}
#ron-ready-dialog .ron-dialog__question {
    margin-top: 0.5rem;                          /* 8px */
}

/* Actions bar */
#ron-ready-dialog .ron-dialog__actions {

    padding: 1.25rem 2rem;                       /* 20px 32px */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align:center;
    padding-top:0em;
}
#ron-ready-dialog .ron-dialog__actions > * + * {
    margin-left: 1rem;                           /* 16px */
}

/* Buttons */
#ron-ready-dialog .btn {
    padding: 0.625rem 1.5rem;                    /* 10px 24px */
    font-weight: 600;
    border-radius: 0.5rem;                       /* 8px */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}
#ron-ready-dialog .btn:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

#ron-ready-dialog .btn--secondary {
    background-color: #ffffff;
    border: 1px solid #D1D5DB;                  /* gray-300 */
    color: #374151;                              /* brand-gray-700 */
}
#ron-ready-dialog .btn--secondary:hover {
    background-color: #F9FAFB;
}
#ron-ready-dialog .btn--secondary:focus {
    outline-color: #9CA3AF;                     /* gray-400 */
}

#ron-ready-dialog .btn--primary {
    background-color: #2563EB;                  /* brand-blue */
    color: #ffffff;
}
#ron-ready-dialog .btn--primary:hover {
    background-color: #1D4ED8;                  /* brand-blue-dark */
}
#ron-ready-dialog .btn--primary:focus {
    outline-color: #2563EB;                     /* brand-blue */
}

/* End RON notification dialog */

.package-ron-ready {
    background-color: #0077dd;
    color: #fff;
    font-weight: bold;
    padding: 8px;
    display: grid;
    grid-template-columns: 1fr 212px;
    align-items: center;
}

.package-ron-actions button {
    width: 100%;
    color: #0077dd !important;
    background-color: #fff !important;
    vertical-align: middle;
}

.package-ron-actions button:hover {
    color: #00447e !important;
    background-color: #fff !important;
}

.package-ron-actions button > i {
    vertical-align: -20%;
}

.package-ron-actions button + button {
    margin-top: 4px;
}

.package-ron-inprogress {
    font-size: 18px;
    display:grid;
    grid-template-columns:auto 1fr;
    grid-gap:10px;
    align-items: center;
}

.package-ron-inprogress i {
    font-size: 28px;
    padding: 10px;
    width: auto;
    height: auto;
    background-color: rgba(0,0,0,0.2);
    border-radius: 30px;
    margin-left: 10px;
}

span.package-ron-emaildetails {
    font-size: 13px;
    font-weight: normal;
    opacity: 0.8;
}

span.package-ron-emaildetails a {
    color: #fff;
    text-decoration: underline;
}

.package-ron-error {
    background-color: #900;
    color: #fff;
}

.package-ron-complete {
    background-color: #290;
    color: #fff;
}

.package-ron-error .package-ron-inprogress, .package-ron-complete .package-ron-inprogress {
    font-size: 15px;
    font-weight: bold;
}

.package-ron-error .dashicons, .package-ron-complete .dashicons {
    font-size: 1em;
    margin: 8px;
    margin-right: 0px;
}

/* RON Delivery Info Dialog */

/* Header */
#ron-delivery-info-dialog .dialog-header {
    padding: 1.5rem;
    border-bottom: 1px solid #E5E7EB;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
#ron-delivery-info-dialog .header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}
#ron-delivery-info-dialog .icon-circle {
    width: 3rem;
    height: 3rem;
    background-color: #3B82F6;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
}
#ron-delivery-info-dialog .header-title h2 {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: #1F2937;
}
#ron-delivery-info-dialog .header-title p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #6B7280;
}
#ron-delivery-info-dialog .close-button {
    background: transparent;
    border: none;
    color: #9CA3AF;
    cursor: pointer;
    font-size: 1.125rem;
    line-height: 1.75rem;
}
#ron-delivery-info-dialog .close-button:hover {
    color: #4B5563;
}

/* Content */
#ron-delivery-info-dialog .dialog-content {
    padding: 1.5rem;
    overflow-y: scroll;
}

/* Signers List Section */
#ron-delivery-info-dialog .signers-list-section > * + * {
    margin-top: 1rem;
}
#ron-delivery-info-dialog h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: #374151;
}

#ron-delivery-info-dialog .signers-table-container {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    overflow: hidden;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
#ron-delivery-info-dialog .signers-table {
    width: calc(100% + 2px);
    border-collapse: collapse;
    text-align: left;
    font-size: 0.875rem;
    color: #4B5563;
    margin-bottom: 0px;
    margin: -1px;
}
#ron-delivery-info-dialog .signers-table thead {
    background-color: #F9FAFB;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
}
#ron-delivery-info-dialog .signers-table th,
#ron-delivery-info-dialog .signers-table td {
    padding: 0.75rem 1.5rem;
}
#ron-delivery-info-dialog .signers-table tbody tr {
    background-color: #ffffff;
    border-bottom: 1px solid #E5E7EB;
}
#ron-delivery-info-dialog .signers-table tbody tr:last-child {
    border-bottom: none;
}
#ron-delivery-info-dialog .signers-table tbody td:first-child,
#ron-delivery-info-dialog .signers-table tbody td:nth-child(2) {
    font-weight: 500;
    color: #1F2937;
}
#ron-delivery-info-dialog .emails-sent {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: #6B7280;
}
#ron-delivery-info-dialog .emails-sent i {
    color: #9CA3AF;
}

/* Signing Link Section */
#ron-delivery-info-dialog .signing-link-section {
    margin-top:1.5em;
}
#ron-delivery-info-dialog .signing-link-section > * + * {
    margin-top: 0.75rem;
}
#ron-delivery-info-dialog .signing-link-section label {
    display: block;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: #374151;
}
#ron-delivery-info-dialog .link-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
#ron-delivery-info-dialog .link-input {
    width: 100%;
    padding: 0.625rem;
    padding-right: 3rem;
    background-color: #F9FAFB;
    border: 1px solid #D1D5DB;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #111827;
}
#ron-delivery-info-dialog .copy-button {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #6B7280;
    cursor: pointer;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    transition: color 200ms, background-color 200ms;
}
#ron-delivery-info-dialog .copy-button:hover {
    color: #3B82F6;
    background-color: #DBEAFE;
}
#ron-delivery-info-dialog .copy-feedback {
    position: absolute;
    right: 3rem;
    padding: 0.25rem 0.5rem;
    background-color: #1F2937;
    color: #ffffff;
    font-size: 0.75rem;
    line-height: 1rem;
    border-radius: 0.375rem;
    opacity: 0;
    transition: opacity 300ms;
}
#ron-delivery-info-dialog .signing-desc {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1rem;
    color: #6B7280;
}

/* Info Box */
#ron-delivery-info-dialog .info-box-next-steps {
    background-color: #EFF6FF;
    border-left: 4px solid #60A5FA;
    padding: 1rem;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    margin-top:1em;
}
#ron-delivery-info-dialog .info-box-inner {
    display: flex;
}
#ron-delivery-info-dialog .info-icon {
    flex-shrink: 0;
}
#ron-delivery-info-dialog .info-text {
    margin-left: 0.75rem;
}
#ron-delivery-info-dialog .info-text p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #1D4ED8;
}
#ron-delivery-info-dialog .info-text .font-semibold {
    font-weight: 600;
}

/* Footer */
#ron-delivery-info-dialog .dialog-footer {
    padding: 1rem;
    padding-bottom:0em;
    display: flex;
    justify-content: flex-end;
}
#ron-delivery-info-dialog .done-button {
    padding: 0.5rem 1rem;
    background-color: #2563EB;
    color: #ffffff;
    font-weight: 600;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 200ms;
}
#ron-delivery-info-dialog .done-button:hover {
    background-color: #1D4ED8;
}
#ron-delivery-info-dialog .done-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
    outline-offset: 2px;
}

.info-icon .dashicons {
    color: #1d4ed8;
}

/* End RON delivery info dialog */

/* 1) Define the animated class */
.pulse-outline {
    /* start with a transparent outline */
    outline: 2px solid rgba(0, 123, 255, 0);
    outline-offset: 4px;              /* space the outline away from the element */

    /* run the fade animation forever, alternating direction */
    animation: pulse-outline 1s ease-in-out infinite alternate;
}

/* 2) Define the keyframes */
@keyframes pulse-outline {
    /* at the end of each cycle, make the outline fully opaque */
    to {
        outline-color: rgba(0, 123, 255, 1);
    }
}

.highlighted-package {
    outline: 1px solid #ffa500;
}

.novia-doc-type.disabled-doc {
    color: #d78d00;
}

.novia-doc-type.disabled-doc .fa-times-circle {
    margin-right: 5px;
}

section.restriction-section.info-banner.orange-banner {
    background-color: #fffdcb !important;
    border: 1px solid #fa0 !important;
    color: #885a00 !important;
}

.orange-banner h2 {
    color: #c98f07;
}

/* Start owner information dialog */

/* Root container */
#ownerInformation.order-container {
    width: 100%;
    max-width: 48rem;
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1),
    0 10px 10px -5px rgba(0,0,0,0.04);
    overflow: hidden;
    font-family: sans-serif;
}

/* Header */
#ownerInformation .dialog-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}
#ownerInformation .header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#ownerInformation .header-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}
#ownerInformation .icon-circle {
    width: 2.75rem;
    height: 2.75rem;
    background-color: #2563eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#ownerInformation .icon-large {
    font-size: 1.25rem;
    color: #fff;
}
#ownerInformation .header-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}
#ownerInformation .header-subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}
#ownerInformation .close-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    padding: 0;
}
#ownerInformation .close-btn:hover {
    color: #4b5563;
}
#ownerInformation .icon-close {
    font-size: 1.5rem;
}

/* Content */
#ownerInformation .dialog-content {
    padding: 2rem;
}
#ownerInformation .dialog-content > * + * {
    margin-top: 2rem;
}

/* Section headings */
#ownerInformation .section-heading {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1rem;
}

/* Owner-details grid */
#ownerInformation .section-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    #ownerInformation .section-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .field-wrapper.col-span-2 {
        grid-column: span 2;
    }
}

/* Form fields */
#ownerInformation .field-wrapper { }
#ownerInformation .form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}
#ownerInformation .form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    color: #374151;
}
#ownerInformation .form-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.5);
}

/* Radio options */


#ownerInformation .radio-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) {
    #ownerInformation .radio-options {
        grid-template-columns: repeat(2, 1fr);
    }
}
#ownerInformation .radio-card {
    padding: 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
}
#ownerInformation .radio-card:has(label input:checked) {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.5);
}
#ownerInformation .radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
}
#ownerInformation .custom-radio {
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid #d1d5db;
}
#ownerInformation .custom-radio:focus {
    outline: none;
}
#ownerInformation .radio-label span {
    margin-left: 0.75rem;
    font-size: 1rem;
    font-weight: 500;
    color: #374151;
}

/* eSignature details */
#ownerInformation .details-section {
    display: none;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}
#ownerInformation .details-section.active {
    display: block;
}
#ownerInformation .details-section .field-wrapper + .field-wrapper {
    margin-top: 1.5rem;
}

/* Footer */
#ownerInformation .dialog-footer {
    padding: 1.25rem 2rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
}
#ownerInformation .btn-cancel {
    background-color: #e5e7eb;
    color: #374151;
    font-weight: 500;
    padding: 0.625rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    cursor: pointer;
}
#ownerInformation .btn-cancel:hover {
    background-color: #d1d5db;
}
#ownerInformation .btn-cancel:focus {
    outline: none;
    box-shadow: 0 0 0 2px #6b7280;
}
#ownerInformation .btn-submit {
    background-color: #2563eb;
    color: #fff;
    font-weight: 700;
    padding: 0.625rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    cursor: pointer;
}
#ownerInformation .btn-submit:hover {
    background-color: #1e40af;
}
#ownerInformation .btn-submit:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.5);
}

#ownerInformation .dashicons-admin-users {
    color: #fff;
}

#ownerInformation .input-error {
    border-color: #e53e3e !important;
    box-shadow: 0 0 0 2px rgba(229,62,62,0.5);
}

#ownerInformation .error-text {
    color: #e53e3e;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* End owner information dialog */

/* Start signature dialog */

/* Container */
#signatureDialog.dialog-container {
    width: 100%;
    max-width: 42rem;            /* 672px */
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    overflow: hidden;
    font-family: sans-serif;
}

/* Header */
#signatureDialog .dialog-header {
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid #E5E7EB;
}
#signatureDialog .header-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}
#signatureDialog .icon-container {
    width: 3rem;
    height: 3rem;
    background-color: #2563EB;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#signatureDialog .icon-container i {
    font-size: 1.25rem;
    color: #ffffff;
}
#signatureDialog .dialog-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1F2937;
}
#signatureDialog .dialog-subtitle {
    margin: 0;
    font-size: 0.875rem;
    color: #6B7280;
}
#signatureDialog .close-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #9CA3AF;
    transition: color 0.2s;
}
#signatureDialog .close-btn:hover {
    color: #4B5563;
}
#signatureDialog .close-btn i {
    font-size: 1.25rem;
}

/* Form section */
#signatureDialog .form-section {
    padding: 1.5rem;
}
#signatureDialog .form-section > * + * {
    margin-top: 1.5rem;
}
#signatureDialog .input-group {}
#signatureDialog .input-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}
#signatureDialog .input-field {
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid #D1D5DB;
    border-radius: 0.375rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    color: #1F2937;
}
#signatureDialog .input-field::placeholder {
    color: #9CA3AF;
}
#signatureDialog .input-field:focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.5);
}
#signatureDialog .textarea-field {
    resize: none;
}

/* Footer */
#signatureDialog .dialog-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #E5E7EB;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
}
#signatureDialog .btn {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
#signatureDialog .btn-cancel {
    background-color: #ffffff;
    color: #4B5563;
    border: 1px solid #D1D5DB;
}
#signatureDialog .btn-cancel:hover {
    background-color: #F9FAFB;
}
#signatureDialog .btn-submit {
    background-color: #2563EB;
    color: #ffffff;
    border: none;
}
#signatureDialog .btn-submit:hover {
    background-color: #1D4ED8;
}

/* End signature dialog*/

/* Start additional document dialog */
/* Container */
#additionalDocFoundDialog.dialog-container {
    width: 100%;
    max-width: 32rem; /* 512px */
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1),
    0 10px 10px -5px rgba(0,0,0,0.04);
    transform: none;
    transition: all 0.2s ease-in-out;
    font-family: sans-serif;
}

/* Header */
#additionalDocFoundDialog .dialog-header {
    padding: 1.5rem;
}
#additionalDocFoundDialog .header-flex {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
#additionalDocFoundDialog .header-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}
#additionalDocFoundDialog .icon-circle {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: #2563EB;
    display: flex;
    align-items: center;
    justify-content: center;
}
#additionalDocFoundDialog .icon-circle i {
    font-size: 1.25rem;
    color: #ffffff;
}
#additionalDocFoundDialog .header-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1F2937;
}
#additionalDocFoundDialog .header-subtitle {
    margin: 0;
    font-size: 0.875rem;
    color: #6B7280;
}
#additionalDocFoundDialog .close-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #9CA3AF;
    transition: color 0.2s;
}
#additionalDocFoundDialog .close-btn:hover {
    color: #4B5563;
}
#additionalDocFoundDialog .close-btn i {
    font-size: 1.125rem;
}

/* Content */
#additionalDocFoundDialog .content-section {
    padding: 0 1.5rem 1.5rem;
    border-top: 1px solid #E5E7EB;
}
#additionalDocFoundDialog .content-text {
    margin-top: 1.5rem;
    font-size: 1rem;
    color: #374151;
    line-height: 1.625;
}

/* Footer */
#additionalDocFoundDialog .dialog-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    background-color: #F9FAFB;
    padding: 1rem 1.5rem;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}
#additionalDocFoundDialog .btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
}
#additionalDocFoundDialog .btn-cancel {
    background-color: #ffffff;
    color: #374151;
    border: 1px solid #D1D5DB;
    outline: none;
}
#additionalDocFoundDialog .btn-cancel:hover {
    background-color: #F9FAFB;
}
#additionalDocFoundDialog .btn-cancel:focus {
    box-shadow: 0 0 0 2px rgba(37,99,235,0.5);
}
#additionalDocFoundDialog .btn-primary {
    background-color: #2563EB;
    color: #ffffff;
    border: none;
    outline: none;
}
#additionalDocFoundDialog .btn-primary:hover {
    background-color: #1E40AF;
}
#additionalDocFoundDialog .btn-primary:focus {
    box-shadow: 0 0 0 2px rgba(37,99,235,0.5);
}
/* End additional document dialog */

/* Additional package dialog styles */

#creation-method-selection {
    padding-top: 2rem;
    /* color palette */
    --brand-gray-900: #111827;
    --brand-gray-800: #1F2937;
    --brand-gray-700: #374151;
    --brand-gray-500: #6B7280;
    --brand-gray-300: #D1D5DB;
    --brand-gray-100: #F3F4F6;
    --brand-gray-50: #F9FAFB;
    --brand-blue: #3B82F6;
    --blue-50: #EFF6FF;
    --blue-100: #DBEAFE;
    --blue-700: #1D4ED8;
}

#creation-method-selection .section-title,
#document-selection .section-title,
#common-field-screen .section-title,
#acro-form-fill .section-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: var(--brand-gray-900);
    margin-bottom: 1.5rem;
    text-align: center;
}

#creation-method-selection .grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) {
    #creation-method-selection .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

#creation-method-selection .card {
    border: 1px solid var(--brand-gray-300);
    border-radius: 0.5rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: box-shadow 0.3s;
}

/* Upload card hover shadow */
#creation-method-selection .card--upload:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* AI card special border, background and shadow */
#creation-method-selection .card--ai {
    border-width: 2px;
    border-color: var(--brand-blue);
    background-color: var(--blue-50);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}

#creation-method-selection .card-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}
#creation-method-selection .upload-icon {
    background-color: var(--brand-gray-100);
}
#creation-method-selection .ai-icon {
    background-color: var(--blue-100);
}
#creation-method-selection .icon {
    font-size: 1.25rem;
    color: var(--brand-blue);
}

#creation-method-selection .card-title {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: var(--brand-gray-800);
    margin-bottom: 0.5rem;
}

#creation-method-selection .card-desc {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--brand-gray-500);
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

#creation-method-selection .card-button {
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    transition: background-color 0.2s;
}

/* Upload button */
#creation-method-selection .upload-button {
    color: var(--brand-gray-700);
    background-color: #ffffff;
    border-color: var(--brand-gray-300);
}
#creation-method-selection .upload-button:hover {
    background-color: var(--brand-gray-50);
}

/* AI button */
#creation-method-selection .ai-button {
    color: #ffffff;
    background-color: var(--brand-blue);
    border-color: transparent;
}
#creation-method-selection .ai-button:hover {
    background-color: var(--blue-700);
}

#document-selection {
    /* Color palette */
    margin-top:2em;
    --brand-gray-300: #D1D5DB;
    --brand-gray-700: #374151;
    --brand-gray-800: #1F2937;
    --brand-blue:   #3B82F6;
    --blue-50:      #EFF6FF;
    --blue-100:     #DBEAFE;
}

/* Vertical spacing between direct children (space-y-4) */
#document-selection > * + * {
    margin-top: 1rem;
}

/* Header row: flex, space-between, center */
#document-selection .section-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    grid-gap: 20px;
    width: 700px;
    margin-top: 1em;
}

/* Search wrapper: relative, full‑width, max‑width: 24rem */
#document-selection .search-wrapper {
    position: relative;
}

/* Search input */
#document-selection .search-input {
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border: 1px solid var(--brand-gray-300);
    border-radius: 0.375rem;
}
#document-selection .search-input:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 0.2rem var(--brand-blue);
}

/* Checkbox + label wrapper in header */
#document-selection .header-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Checkbox inputs */
#document-selection .checkbox-input {
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--brand-gray-300);
    border-radius: 0.25rem;
    accent-color: var(--brand-blue);
}
#document-selection .checkbox-input:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--brand-blue);
}

/* Label text next to header checkbox */
#document-selection .checkbox-label {
    margin-left: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--brand-gray-700);
}

/* List of document items with vertical gaps (space-y-3) */
#document-selection .doc-list > * + * {
    margin-top: 0.75rem;
}

/* Individual document item */
#document-selection .doc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    border: 1px solid #dddddd;
    border-radius: 0.5rem;
    /* background-color: var(--blue-50); */
    cursor: pointer;
}

#document-selection .doc-item.checked {
    border: 1px solid var(--brand-blue);
    background-color: var(--blue-50);
}

/* Left side of a doc item: checkbox, icon, name */
#document-selection .doc-item-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Document file icon */
#document-selection .doc-icon {
    color: var(--brand-gray-500);
    font-size: 1rem;
}

/* Document name text */
#document-selection .doc-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--brand-gray-800);
}

/* Tag on the right of a doc item */
#document-selection .doc-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--brand-blue);
    background-color: var(--blue-100);
    border: 1px solid var(--brand-blue);
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
}

/* Root color variables */
#common-field-screen {
    margin-top:2em;
    --blue-50: #EFF6FF;
    --blue-200: #BFDBFE;
    --blue-500: #3B82F6;
    --brand-gray-800: #1F2937;
    --brand-gray-700: #374151;
    --brand-gray-600: #4B5563;
    --brand-gray-300: #D1D5DB;
    --green-200: #A7F3D0;
    --green-600: #16A34A;
}

/* AI Notice Banner */
#common-field-screen .notice-banner {
    background-color: var(--blue-50);
    border: 1px solid var(--blue-200);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom:1em;
    margin-top:1em;
}
#common-field-screen .banner-content {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    grid-gap: 10px;
}
#common-field-screen .banner-icon-container {
    flex-shrink: 0;
}
#common-field-screen .banner-icon {
    color: var(--blue-500);
    margin-top: 0.25rem;
    font-size: 1.25rem;
}
#common-field-screen .banner-text h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brand-gray-800);
}
#common-field-screen .banner-text {
    margin-bottom: -4px;
}
#common-field-screen .banner-text p {
    font-size: 0.875rem;
    color: var(--brand-gray-600);
}

/* Common Fields Form */
#common-field-screen .common-fields-form {
    background-color: #ffffff;
    border: 1px solid var(--green-200);
    border-radius: 0.5rem;
    padding: 1.5rem;
}
#common-field-screen .fields-header {
    display: grid;
    align-items: center;
    grid-gap: 0.5rem;
    margin-bottom: 1.5rem;
    grid-template-columns: auto 1fr;
}
#common-field-screen .fields-header-icon {
    color: var(--green-600);
    font-size: 1rem;
}
#common-field-screen .fields-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-gray-800);
    margin-bottom: 0px;
}

/* Grid Layout for Fields */
#common-field-screen .fields-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem 1.5rem;
}
@media (min-width: 768px) {
    #common-field-screen .fields-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Individual Field */
#common-field-screen .field-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--brand-gray-700);
    margin-bottom: 0.25rem;
}
#common-field-screen .field-input {
    width: 100%;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--brand-gray-300);
    border-radius: 0.375rem;
    background-color: #ffffff;
    color: var(--brand-gray-700);
}
#common-field-screen .field-input:focus {
    outline: none;
    border-color: var(--blue-500);
    box-shadow: 0 0 0 0.2rem var(--blue-500);
}

/* Color palette */
#acro-form-fill {
    --brand-gray-50:  #F9FAFB;
    --brand-gray-100: #F3F4F6;
    --brand-gray-200: #E5E7EB;
    --brand-gray-500: #6B7280;
    --brand-gray-600: #4B5563;
    --brand-gray-800: #1F2937;
    --brand-blue:    #3B82F6;
}

/* --- Document Tabs --- */
#acro-form-fill .tabs-container {
    background-color: var(--brand-gray-100);
    padding: 0.25rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1em 0em;
}
#acro-form-fill .tabs-list {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: max-content;
}
#acro-form-fill .tab-button {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--brand-gray-500);
    background-color: transparent;
    border: none;
    border-radius: 0.375rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
}
#acro-form-fill .tab-button:hover {
    background-color: var(--brand-gray-200);
}
#acro-form-fill .tab-button--active {
    color: var(--brand-gray-800);
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* --- PDF Preview Area --- */
#acro-form-fill .preview-container {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid var(--brand-gray-200);
    border-radius: 0.5rem;
    overflow: hidden;
}
#acro-form-fill .preview-toolbar {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid var(--brand-gray-200);
    background-color: var(--brand-gray-50);
}
#acro-form-fill .toolbar-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
#acro-form-fill .toolbar-icon {
    color: var(--brand-gray-600);
    font-size: 1rem;
}
#acro-form-fill .toolbar-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brand-gray-800);
}

/* --- PDF Viewer Frame --- */
#acro-form-fill .pdf-viewer {
    flex: 1 1 auto;
    background-color: rgba(229, 231, 235, 0.5); /* brand-gray-200 at 50% */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    height: calc(100vh - 500px);
}
#acro-form-fill .pdf-frame {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
#acro-form-fill .pdf-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.package-document-status.yellow.pulse-outline {
    cursor:pointer;
}

.package-upload-error {
    color: #a00;
    font-weight: bold;
    display:none;
}

/* Root container */
#upload-complete-dialog {
    /* Brand colors – replace these with your actual brand values */
    --brand-text: #111827;
    --brand-subtext: #6B7280;
    --brand-dark: #1E40AF;
}

/* Header */
#upload-complete-dialog .header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 1rem;
    border-bottom: 1px solid transparent;
}
#upload-complete-dialog .header-title {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    color: var(--brand-text);
}
#upload-complete-dialog .header-subtitle {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--brand-subtext);
    margin-top: 0.25rem;
}

/* Close‐icon button */
#upload-complete-dialog .btn-icon-close {
    background: none;
    border: none;
    color: rgba(156, 163, 175, 1); /* gray-400 */
    cursor: pointer;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#upload-complete-dialog .btn-icon-close:hover {
    color: rgba(107, 114, 128, 1); /* gray-600 */
}

/* Content block */
#upload-complete-dialog .content {
    text-align: center;
    /* padding: 2.5rem 0; */
    padding: 10px;
    background-color: #e6f3ff;
    border: 1px solid #9ac7ff;
    border-radius: 8px;
    margin-bottom: 2em;
    margin-top: -1em;
}
#upload-complete-dialog .title-medium {
    font-size: 1rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: var(--brand-text);
    margin-bottom: 0px;
}
#upload-complete-dialog .content-subtitle {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--brand-subtext);
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

/* Actions */
#upload-complete-dialog .actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* "Upload More" button */
#upload-complete-dialog .btn-upload-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid #D1D5DB; /* gray-300 */
    border-radius: 0.5rem;
    font-weight: 600;
    color: var(--brand-text);
    background-color: transparent;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#upload-complete-dialog .btn-upload-more:hover {
    background-color: #F9FAFB; /* gray-50 */
}
#upload-complete-dialog .btn-upload-more:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.5); /* focus:ring-brand-dark/50 */
}

/* "Continue to Cart" button */
#upload-complete-dialog .btn-continue {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.875rem 1rem;
    background-color: var(--brand-dark);
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow:
            0 4px 6px -1px rgba(0, 0, 0, 0.1),
            0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#upload-complete-dialog .btn-continue:hover {
    background-color: rgba(30, 64, 175, 0.9); /* bg-opacity-90 */
}
#upload-complete-dialog .btn-continue:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--brand-dark);
}

/* Icon spacing inside action buttons */
#upload-complete-dialog .btn-upload-more i,
#upload-complete-dialog .btn-continue i {
    margin-right: 0.75rem;
}

/* Footer */
#upload-complete-dialog .footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 2rem;
}
#upload-complete-dialog .btn-close-text {
    background: none;
    border: none;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    color: var(--brand-subtext);
    cursor: pointer;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#upload-complete-dialog .btn-close-text:hover {
    color: var(--brand-text);
}

/* Root overlay */
#override-dialog.dialog-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

/* Dialog container */
#override-dialog .dialog-container {
    background-color: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 28rem;
    margin: 0 1rem;
    transform: none;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header */
#override-dialog .dialog-header {
    padding: 1rem 1.5rem; /* py-4 px-6 */
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#override-dialog .dialog-title {
    margin: 0;
    font-size: 1.25rem;    /* text-xl */
    line-height: 1.75rem;  /* leading-7 */
    font-weight: 600;      /* font-semibold */
    color: #111827;        /* text-gray-900 */
}
#override-dialog .close-button {
    background: none;
    border: none;
    padding: 0;
    color: #9ca3af;        /* text-gray-400 */
    cursor: pointer;
    transition: color 150ms ease-in-out; /* transition-colors */
}
#override-dialog .close-button:hover {
    color: #4b5563;        /* hover:text-gray-600 */
}
#override-dialog .close-button .close-icon {
    font-size: 1.25rem;    /* text-xl */
    line-height: 1.75rem;
}

/* Body */
#override-dialog .dialog-body {
    padding: 1.5rem;       /* py-6 px-6 */
}
#override-dialog .info-section {
    margin-bottom: 1rem;   /* mb-4 */
}
#override-dialog .info-content {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem; /* mb-3 */
}
#override-dialog .icon-container {
    width: 2.5rem;         /* w-10 */
    height: 2.5rem;        /* h-10 */
    background-color: #fff4c7;
    border-radius: 9999px; /* rounded-full */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem; /* mr-3 */
}
#override-dialog .warning-icon {
    color: #d97706;        /* text-amber-600 */
    font-size: 1.25rem;
    line-height: 1.2rem;
}
#override-dialog .info-text {
    display: flex;
    flex-direction: column;
}
#override-dialog .info-title {
    margin: 0;
    font-size: 0.875rem;   /* text-sm */
    line-height: 1.25rem;
    font-weight: 500;      /* font-medium */
    color: #111827;        /* text-gray-900 */
}
#override-dialog .info-subtitle {
    margin: 0.25rem 0 0 0;
    font-size: 0.75rem;    /* text-xs */
    line-height: 1rem;
    color: #6b7280;        /* text-gray-500 */
}

/* Reason input */

#override-dialog .reason-label {
    display: block;
    font-size: 0.875rem;   /* text-sm */
    line-height: 1.25rem;
    font-weight: 500;      /* font-medium */
    color: #374151;        /* text-gray-700 */
}
#override-dialog .required-asterisk {
    color: #ef4444;        /* text-red-500 */
}
#override-dialog .reason-textarea {
    width: 100%;
    margin-top: 0.5rem;    /* mb-2 equivalent */
    padding: 0.5rem 0.75rem; /* py-2 px-3 */
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.5rem; /* rounded-lg */
    resize: none;          /* resize-none */
    transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out; /* transition-colors */
}
#override-dialog .reason-textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); /* ring-2 ring-blue-500 */
    border-color: #3b82f6; /* focus:border-blue-500 */
}

/* Footer */
#override-dialog .dialog-footer {
    padding: 1rem 1.5rem;  /* py-4 px-6 */
    background-color: #f9fafb; /* bg-gray-50 */
    border-bottom-left-radius: 0.75rem;  /* rounded-b-xl */
    border-bottom-right-radius: 0.75rem;
}
#override-dialog .footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;         /* gap-3 */
}
#override-dialog .cancel-button {
    padding: 0.5rem 1rem;  /* py-2 px-4 */
    font-size: 0.875rem;   /* text-sm */
    line-height: 1.25rem;
    font-weight: 500;      /* font-medium */
    color: #374151;        /* text-gray-700 */
    background-color: #fff;/* bg-white */
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.5rem; /* rounded-lg */
    cursor: pointer;
    transition: background-color 150ms ease-in-out; /* transition-colors */
}
#override-dialog .cancel-button:hover {
    background-color: #f9fafb; /* hover:bg-gray-50 */
}
#override-dialog .cancel-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.5); /* focus:ring-gray-500 */
    outline-offset: 2px;      /* focus:ring-offset-2 */
}

#override-dialog .confirm-button {
    padding: 0.5rem 1rem;  /* py-2 px-4 */
    font-size: 0.875rem;   /* text-sm */
    line-height: 1.25rem;
    font-weight: 500;      /* font-medium */
    color: #fff;           /* text-white */
    background-color: #2563eb; /* bg-blue-600 */
    border: none;
    border-radius: 0.5rem; /* rounded-lg */
    cursor: pointer;
    transition: background-color 150ms ease-in-out; /* transition-colors */
}
#override-dialog .confirm-button:hover {
    background-color: #1d4ed8; /* hover:bg-blue-700 */
}
#override-dialog .confirm-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); /* focus:ring-blue-500 */
    outline-offset: 2px;      /* focus:ring-offset-2 */
}
#override-dialog .confirm-button:disabled {
    opacity: 0.5;             /* disabled:opacity-50 */
    cursor: not-allowed;      /* disabled:cursor-not-allowed */
}
#override-dialog .confirm-icon {
    margin-right: 0.5rem;      /* mr-2 */
}

/* =============== */
/* Scoped to root  */
/* =============== */

/* Utilities used by components (scoped) */
#upload-dialog .is-hidden { display: none !important; }
#upload-dialog .sr-only {
    position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip: rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Spacing + layout shells */
#upload-dialog .pad-8 { padding: 2rem; } /* p-8 */
#upload-dialog .grid-two-col {
    display: grid; grid-template-columns: 1fr; gap: 2rem;
}
#upload-dialog .grid-two-col {
    height: calc(100vh - 250px);
    overflow-y: scroll;
}
@media (min-width: 1024px) {
    #upload-dialog .grid-two-col { grid-template-columns: 1fr 1fr; }
}

/* Header */
#upload-dialog .header-title { font-size: 1.5rem; font-weight: 700; color: #1f2937; } /* text-2xl, gray-800 */
#upload-dialog .header-sub  { color: #6b7280; margin-top: 0.25rem; } /* text-gray-500 mt-1 */
#upload-dialog .icon-btn {
    position:absolute;right:0px; color: #9ca3af; background: transparent; border: none; cursor: pointer;
}
#upload-dialog .icon-btn:hover { color: #4b5563; }

/* Toggle group (Single/Multiple) */
#upload-dialog .toggle-group {
    display: flex; gap: 0.25rem; background: #f9fafb; border: 1px solid #e5e7eb;
    border-radius: 0.5rem; padding: 0.25rem;
}
#upload-dialog .toggle {
    flex: 1; text-align: center; padding: 0.5rem 1rem; border-radius: 0.375rem;
    font-size: 0.875rem; font-weight: 500; cursor: pointer; border: 1px solid transparent; background: transparent; color:#6b7280;
}
#upload-dialog .toggle:hover { background: #f3f4f6; }
#upload-dialog .toggle--active {
    background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    font-weight: 600; color: #0d9488; /* brand-primary */
}

/* Drop area */
#upload-dialog .file-area { position: relative; }
#upload-dialog .file-input { display: none; }
#upload-dialog .file-placeholder {
    border: 2px dashed #d1d5db; border-radius: 0.5rem; padding: 2.5rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; cursor: pointer; transition: background-color .2s ease;
}
#upload-dialog .file-placeholder:hover { background: #f9fafb; } /* hover:bg-gray-50 */
#upload-dialog .file-placeholder .icon-circle {
    background:#f3f4f6; border-radius:9999px; padding:1rem; display:inline-flex;
}
#upload-dialog .file-preview {
    border: 2px dashed #d1d5db; border-radius: 0.5rem; padding: 1rem;
    display: flex; align-items: center; justify-content: space-between;
}

/* Form & fields */
#upload-dialog .form { display: flex; flex-direction: column; gap: 1.25rem; } /* space-y-5 */
#upload-dialog .field { display: block; }
#upload-dialog .label { display:block; font-size:0.875rem; font-weight:500; color:#374151; margin-bottom:0.25rem; }
#upload-dialog .label .muted { color:#9ca3af; font-weight:400; }
#upload-dialog .req { color:#ef4444; }

#upload-dialog .input-wrap { position: relative; }
#upload-dialog .text-input,
#upload-dialog .select {
    width: 100%; border: 1px solid #d1d5db; border-radius: 0.375rem; padding: 0.5rem 0.75rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); outline: none; font-size: 1rem; line-height: 1.5rem;
    transition: box-shadow .2s ease, border-color .2s ease;
    background:#fff;
}
#upload-dialog .text-input:focus,
#upload-dialog .select:focus {
    --brand: #0d9488; /* brand primary */
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(13,148,136,0.25); /* focus:ring-brand-primary */
}

#upload-dialog .input-icon {
    position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
    color: #9ca3af;
}

/* Radio button group (Yes/No/Not Required) */
#upload-dialog .radio-row { display: flex; align-items: center; gap: 0.5rem; }
#upload-dialog .radio-chip {
    display: block; text-align: center; font-size: 0.875rem; padding: 0.5rem 1rem; border-radius: 0.375rem;
    border: 1px solid #d1d5db; color:#111827; user-select: none;
}
#upload-dialog label.radio { flex:1; cursor: pointer; }
#upload-dialog label.radio > input[type="radio"]:checked {
    background: #eff6ff;                /* blue-50 */
    border-color: #0d9488;
    color: #0d9488; font-weight: 600;
}

/* Preview panel card */
#upload-dialog .preview {
    background:#fff; border:1px solid #e5e7eb; border-radius:0.5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    display:flex; flex-direction:column;

    width: 450px;

}
#upload-dialog .preview-head {
    padding: 1rem; border-bottom:1px solid #e5e7eb; display:flex; justify-content:space-between; align-items:center;
}
#upload-dialog .preview-title { font-weight:600; color:#1f2937; }
#upload-dialog .btn-row { display:flex; align-items:center; gap:0.5rem; }

#upload-dialog .preview-toolbar {
    background:#1f2937; color:#fff; padding:0.5rem; display:flex; align-items:center; justify-content:space-between; font-size:0.875rem;
}
#upload-dialog .toolbar-left, #upload-dialog .toolbar-right { display:flex; align-items:center; gap:0.75rem; }
#upload-dialog .pager {
    display:flex; align-items:center; background:#111827; border-radius:0.375rem; overflow:hidden;
}
#upload-dialog .pager input { background:transparent; width:2rem; text-align:center; border:none; color:#fff; outline:none; padding:0.25rem 0; }
#upload-dialog .pager span { display:inline-block; padding:0 0.5rem; }

#upload-dialog .preview-content {
    flex-grow:1; background:#f9fafb; padding:2rem; overflow-y:auto;
}
#upload-dialog .doc-page {
    background:#fff; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -4px rgba(0,0,0,0.1);
    padding:3rem; margin-left:auto; margin-right:auto; max-width:42rem; height:600px;
}
#upload-dialog .doc-page h1 { font-size:1.875rem; font-weight:700; margin-bottom:1.5rem; }
#upload-dialog .doc-page p { color:#4b5563; }

/* Footer */
#upload-dialog .footer {
    display:flex; justify-content:flex-end; align-items:center;
    padding:1rem 2rem; background:#f9fafb; border-top:1px solid #e5e7eb; border-bottom-left-radius:0.75rem; border-bottom-right-radius:0.75rem;
}

/* Buttons */
#upload-dialog .btn {
    font-weight:600; padding:0.5rem 1rem; border-radius:0.5rem; border:1px solid transparent; background:transparent; cursor:pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
#upload-dialog .btn-muted { color:#4b5563; }
#upload-dialog .btn-muted:hover { background:#e5e7eb; }

#upload-dialog .btn-outline {
    font-size:0.875rem; padding:0.375rem 0.75rem; border:1px solid #d1d5db; border-radius:0.375rem;
}
#upload-dialog .btn-outline:hover { background:#f3f4f6; }

#upload-dialog .btn-brand {
    background:#0d9488; color:#fff; padding:0.5rem 1.25rem; border-radius:0.5rem;
}
#upload-dialog .btn-brand:hover { background:#0b7d73; } /* brand-primary-dark-ish */

#upload-dialog .btn-brand-dark {
    background:#111827; color:#fff; padding:0.5rem 1.25rem; border-radius:0.5rem;
}
#upload-dialog .btn-brand-dark:hover { background:#1f2937; }

/* Small helpers */
#upload-dialog .stack-6 { display:flex; flex-direction:column; gap:1.5rem; } /* space-y-6 */
#upload-dialog .mt-4 { margin-top:1rem; }
#upload-dialog .text-red { color:#ef4444; }
#upload-dialog .text-gray-500 { color:#6b7280; }
#upload-dialog .text-gray-700 { color:#374151; }
#upload-dialog .text-gray-600 { color:#4b5563; }
#upload-dialog .text-red-500 { color:#ef4444; }
#upload-dialog .text-2xl { font-size:1.5rem; }
#upload-dialog .text-center { text-align:center; }
#upload-dialog .flex-row { display:flex; align-items:center; gap:0.5rem; }

#upload-dialog .preview iframe {
    width:100%;
    height:100%;
    box-sizing:border-box;
}

.novia-upload-dialog {
    display:grid;
    grid-template-columns: 640px 450px;
    grid-gap:1em;
}

#ifrUploadPreview {
    width:100%;height:100%;box-sizing:border-box;
    position:relative;z-index:1;
}

.novia-upload-preview {
    background-color:#eee;
    position:relative;
}

span.file-specs {
    display: block;
    margin-bottom: -1em;
    margin-top: -7px;
    font-size: 13px;
}

#cIsNotarized h4 {
    font-size: 15px;
}

#cIsNotarized > div {
    font-size: 13px;
}

.electronic-notary-info {
    padding: 1em;
    background: #e6f2fb;
    margin: 0.5em 0em;
    border: 1px solid #bedef5;
    border-radius: 7px;
}

.electronic-notary-info ul {
    margin-bottom: 0em;
}

/* Subscription Dialog */

.fg-backdrop {
    align-items: center;
    justify-content: center;
}

.fg-dialog {
    white-space: normal;
}

.fg-dialog .modal-header {
    background: #2d3748;
    color: white;
    padding: 16px 24px;
    font-weight: 600;
    font-size: 14px;
}
.fg-dialog .modal-overlay {
    position: relative;
    background: rgba(0,0,0,0.5);
    padding: 60px 20px;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fg-dialog .modal {
    background:white;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    max-width: 480px;
    width: 100%;
    overflow-y: scroll;
    white-space: normal;
    max-height: calc(100vh - 60px);
}
.fg-dialog .modal-content { padding: 32px; }
.fg-dialog .modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.fg-dialog .warning-icon { background: #fef3cd; color: #d97706; }
.fg-dialog .error-icon   { background: #fee2e2; color: #dc2626; }

.fg-dialog h2 {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 12px;
    text-align: center;
}
.fg-dialog .subtitle {
    color: #6b7280;
    text-align: center;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.5;
}

.fg-dialog .loss-list {
    background: #fef9e7;
    border: 1px solid #fbbf24;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
}
.fg-dialog .loss-title {
    font-weight: 600;
    color: #92400e;
    margin-bottom: 12px;
    font-size: 14px;
}
.fg-dialog .loss-items {
    list-style: none;
    text-align: left;
}
.fg-dialog .loss-items li {
    color: #78350f;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
    font-size: 14px;
    line-height: 1.4;
}
.fg-dialog .loss-items li:before {
    content: "−";
    position: absolute;
    left: 0;
    font-weight: bold;
    color: #d97706;
}
.fg-dialog .loss-items li:last-child { margin-bottom: 0; }

.fg-dialog .cancel-loss-list { background: #fef2f2; border: 1px solid #f87171; }
.fg-dialog .cancel-loss-title { color: #991b1b; }
.fg-dialog .cancel-loss-items li { color: #7f1d1d; }
.fg-dialog .cancel-loss-items li:before { color: #dc2626; }

.fg-dialog .input-group { margin-bottom: 24px; }
.fg-dialog .input-label {
    display: block;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
    font-size: 14px;
}
.fg-dialog .input-field {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s;
}
.fg-dialog .input-field:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
}

.fg-dialog .modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 32px;
}
.fg-dialog .btn {
    flex: 1;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: var(--e-global-color-82ffc81) !important;
    color: #fff !important;
}
.fg-dialog .btn-cancel { background: #f3f4f6; color: #374151; }
.fg-dialog .btn-cancel:hover { background: #e5e7eb; }
.fg-dialog .btn-confirm { background: #dc2626; color: white; }
.fg-dialog .btn-confirm:hover { background: #b91c1c; }
.fg-dialog .btn-downgrade { background: #d97706; color: white; }
.fg-dialog .btn-downgrade:hover { background: #b45309; }

.fg-dialog .note {
    background: #f9fafb;
    border-radius: 6px;
    padding: 12px;
    margin-top: 16px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

#noviaFormList span.novia-req-certified {
    padding: 0px 8px;
    margin-left: 8px;
}

.recording-compliance-consent {
    background-color: #eeeeee;
    padding: 8px;
    font-size: 14px;
    line-height: 1.25em;
}

.consent-item {
    display: grid;
    grid-template-rows: auto auto;
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    background-color: #fff;
    grid-gap: 4px;
    cursor: pointer;
}

.consent-item.selected {
    background-color: #def;
    outline: 1px solid #6badef;
}

.consent-main {
    font-weight: bold;
}

.recording-compliance-consent h4 {
    font-weight: bold;
    font-size: 15px;
    margin: 0.5em 0em;
}

span.novia-req-consented {
    background-color: #006f99;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    padding: 3px 8px;
    border-radius: 14px;
    display: inline-block;
    margin: 3px;
}


/* ---- Scope everything to the root ---- */
#discussion-dialog {
    --brand-blue-500: #2563eb; /* Tailwind blue-600-ish */
    --brand-blue-600: #1d4ed8;
    --gray-50:  #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --white: #ffffff;
    font-family: inherit;
}

#discussion-dialog.is-open {
    display:block;
}

/* Root card */
#discussion-dialog.dd-root {
    width: 100%;
            /* max-w-2xl */
    background: var(--gray-50);
    border-radius: 0.5rem;         /* rounded-lg */
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* shadow-xl */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
#discussion-dialog .dd-header {
    padding: 1.5rem;               /* p-6 */
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
#discussion-dialog .dd-row {
    display: flex;
    align-items: center;
    gap: 1rem;                     /* gap-4 */
}
#discussion-dialog .dd-icon {
    width: 3rem; height: 3rem;     /* w-12 h-12 */
    background: var(--brand-blue-500);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    flex-shrink: 0;
}
#discussion-dialog .dd-title {
    font-size: 1.25rem; line-height: 1.75rem; /* text-xl */
    font-weight: 700;                          /* font-bold */
    color: var(--gray-800);
    margin: 0;
}
#discussion-dialog .dd-subtitle {
    font-size: 0.875rem; line-height: 1.25rem; /* text-sm */
    color: var(--gray-500);
    margin: 0.25rem 0 0 0;
}
#discussion-dialog .dd-btn-icon {
    background: transparent;
    border: 0;
    color: var(--gray-400);
    cursor: pointer;
    transition: color 150ms linear;
}
#discussion-dialog .dd-btn-icon:hover { color: var(--gray-600); }

/* Body */
#discussion-dialog .dd-body {
    width: 42rem;
    max-width:90vw;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    padding: 1.5rem 2rem;          /* py-6 px-8 */
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: 500px;
}
#discussion-dialog .dd-stack > * + * { margin-top: 1.5rem; } /* space-y-6 */

/* Comment */
#discussion-dialog .dd-comment {
    display: flex;
    align-items: flex-start;
    gap: 1rem;                     /* gap-4 */
}
#discussion-dialog .dd-avatar {
    width: 2.5rem; height: 2.5rem; /* w-10 h-10 */
    border-radius: 9999px;
    object-fit: cover;
}
#discussion-dialog .dd-flex-1 { flex: 1 1 auto; }
#discussion-dialog .dd-comment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#discussion-dialog .dd-name {
    font-weight: 600;              /* font-semibold */
    color: var(--gray-800);
    margin: 0;
}
#discussion-dialog .dd-time {
    font-size: 0.75rem; line-height: 1rem; /* text-xs */
    color: var(--gray-400);
}
#discussion-dialog .dd-text {
    color: var(--gray-600);
    margin: 0.25rem 0 0 0;         /* mt-1 */
}
#discussion-dialog .dd-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;                   /* gap-3 */
    font-size: 0.875rem; line-height: 1.25rem; /* text-sm */
    color: var(--gray-500);
}
#discussion-dialog .dd-link-btn {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;                   /* mr-1 equivalent via gap */
    transition: color 150ms linear;
    font-size: 12px;
}
#discussion-dialog .dd-link-btn--edit:hover { color: var(--brand-blue-500); }
#discussion-dialog .dd-link-btn--delete:hover { color: #ef4444; } /* red-500 */

button.dd-link-btn .dashicons {
    margin: 0px;
}

/* Form section */
#discussion-dialog .dd-form {
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    padding: 2rem;                  /* p-8 */
}
#discussion-dialog .dd-form-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
#discussion-dialog .dd-avatar--mt { margin-top: 0.5rem; } /* mt-2 */
#discussion-dialog .dd-form-label {
    display: block;
    font-size: 0.75rem; line-height: 1rem; /* text-xs */
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;         /* tracking-wider */
}
#discussion-dialog .dd-textarea {
    width: 100%;
    margin-top: 0.5rem;             /* mt-2 */
    padding: 0.75rem;               /* p-3 */
    border: 1px solid var(--gray-300);
    border-radius: 0.375rem;        /* rounded-md */
    transition: box-shadow 150ms ease, border-color 150ms ease;
    resize: vertical;
    min-height: 3.5rem;
    font: inherit;
}
#discussion-dialog .dd-textarea:focus {
    outline: none;
    border-color: var(--brand-blue-500);
    box-shadow: 0 0 0 2px var(--brand-blue-500); /* focus:ring-2 */
}

/* Footer */
#discussion-dialog .dd-footer {
    background: var(--gray-100);
    border-top: 1px solid var(--gray-200);
    padding: 1rem 1.5rem;           /* py-4 px-6 */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;                   /* gap-3 */
}

/* Buttons */
#discussion-dialog .dd-btn {
    font-size: 0.875rem; line-height: 1.25rem; /* text-sm */
    font-weight: 600;
    padding: 0.5rem 1rem;           /* py-2 px-4 */
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 150ms ease;
}
#discussion-dialog .dd-btn--secondary {
    color: var(--gray-700);
    background: var(--white);
    border: 1px solid var(--gray-300);
}
#discussion-dialog .dd-btn--secondary:hover { background: var(--gray-50); }
#discussion-dialog .dd-btn--primary {
    color: var(--white);
    background: var(--brand-blue-500);
    border: 1px solid transparent;
    padding: 0.5rem 1.25rem;        /* py-2 px-5 */
}
#discussion-dialog .dd-btn--primary:hover { background: var(--brand-blue-600); }

/* Icon spacing inside text buttons */
#discussion-dialog .dd-icon-inline { display: inline-flex; align-items: center; gap: 0.25rem; }

/* Ensure dashicons baseline alignment in circles */
#discussion-dialog .dd-icon .dashicons { line-height: 1; }

/* overlay */
.dd-overlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); z-index: 9999; }
.dd-overlay__card { background: #fff; width: min(420px, 92vw); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.2); padding: 16px; }
.dd-overlay__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.dd-overlay__title {
    font-size: 20px;
    font-weight: bold;
    color: #a00;
}

p.dd-overlay__text {
    white-space: normal;
}
/* optional: danger look */
.dd-btn--danger { background: #c43c3c !important; color: #fff; }

.novia-upload-field { position: relative; }

.novia-help {
    position: relative; /* anchor for the tooltip */
    display: inline-flex;
    align-items: center;
}

.novia-help-icon {
    cursor: help;
    margin-left: 6px;
    color: #3c78d8;
}
.novia-help-icon:focus {
    outline: 2px solid #3c78d8;
    outline-offset: 2px;
    border-radius: 3px;
}

/* Tooltip base */
.novia-tooltip {
    position: absolute;           /* anchored to .novia-help */
    z-index: 10;
    min-width: 320px;
    background: #111;
    color: #fff;
    padding: .6em .8em;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.3;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    pointer-events: none;          /* hover doesn't move focus */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
    white-space: normal;
    margin-top:-10px;
}

/* Show on hover or keyboard focus */
.novia-help:hover .novia-tooltip,
.novia-help:focus-within .novia-tooltip,
.novia-help.is-open .novia-tooltip { /* for click/tap toggle (optional JS) */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

/* --- placements --- */

/* Right of the icon */
.novia-tooltip.is-right {
    top: 0;              /* align tops with the icon */
    left: calc(100% + 8px);
}
.novia-tooltip.is-right::after {
    content: "";
    position: absolute;
    left: -12px;
    top: 10px;
    border: 6px solid transparent;
    border-right-color: #111;
}

/* Below the icon */
.novia-tooltip.is-bottom {
    top: calc(100% + 8px);
    left: 0;
}
.novia-tooltip.is-bottom::after {
    content: "";
    position: absolute;
    top: -12px;
    left: 14px;
    border: 6px solid transparent;
    border-bottom-color: #111;
}

/* (Optional) keep tooltip inside the field’s width on small layouts */
@media (max-width: 480px) {
    .novia-tooltip { max-width: min(90vw, 320px); }
}
/* ===== Multiple File Dialog (scoped) =====
   Scope all rules to .mfd so nothing leaks globally.
   You can safely drop this into any project.
*/

/* Theme variables on the component root (not global :root) */
.mfd {
    --black: #0f172a;
    --grey: #e5e7eb;
    --dark-grey: #64748b;
    --light-grey: #f1f5f9;
    --blue: #2563eb;
    --bg: #fff;
    --text: #0f172a;
}

/* Basic reset within the component */
.mfd, .mfd * {
    box-sizing: border-box;
}

/* Optional demo container (only styles inside .mfd) */
.mfd .container {
    text-align: center;
}

.mfd .transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

/* Buttons */
.mfd button {
    cursor: pointer;
    display: flex;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: calc(.5rem - 2px);
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    padding: .5rem 1rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500;
}

.mfd button:hover {
    background-color: var(--light-grey);
    color: var(--text);
}

.mfd button.black {
    background-color: var(--black);
    color: #f8fafc;
    border-color: var(--black);
}
.mfd button.black:hover { background-color: #0f172ae6; }

.mfd button.blue {
    background-color: var(--blue);
    color: #ffffff;
    border-color: var(--blue);
}
.mfd button.blue:hover {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
}

.mfd button:active { transform: scale(0.98); }

/* Dialog */
.mfd .dialog-overlay {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.mfd .dialog-overlay.active { display: flex; }

.mfd .dialog-content {
    background-color: #ffffff;
    border-radius: .5rem;
    padding: 1.5rem;
    width: 100%;
    max-width: min(80rem, calc(100vw - 2rem));
    box-shadow: 0 4px 6px rgba(0,0,0,.1), 0 10px 20px rgba(0,0,0,.1);
    animation: mfd-slideIn 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@keyframes mfd-slideIn {
    from { transform: translateY(-50px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.mfd .dialog-header {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 6px;
}

.mfd .dialog-header h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #333;
    letter-spacing: -0.025em;
    line-height: 1;
    margin: 0;
}

.mfd .dialog-header p {
    font-size: .875rem;
    line-height: 1.25rem;
    margin: 0;
    color: var(--dark-grey);
}

.mfd .close-btn {
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.mfd .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.mfd .dialog-close {
    position: absolute;
    top: 0; right: 0;
    transform: translate(50%, -50%);
    color: var(--dark-grey);
    cursor: pointer;
    user-select: none;
    font-size: 1.5rem;
    line-height: 1rem;
}
.mfd .dialog-close:hover { color: var(--black); }

.mfd .dialog-body { width: 100%; height: 100%; min-height: 500px; }
.mfd .dialog-body.upload-document { display: flex; flex-direction: row; }

.mfd #centerSlider { cursor: ew-resize !important; position: relative; }
.mfd #centerSlider .line {
    background-color: var(--grey);
    width: 1px; height: 100%;
    margin: 0 16px;
}
.mfd #centerSlider .dragger {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    line-height: 0.15lh; letter-spacing: -0.05em;
    height: fit-content;
    padding: .2rem;
    background-color: var(--grey);
    border-radius: .25rem;
    display: flex; flex-direction: column;
    user-select: none;
}
.mfd #centerSlider .dragger span { transform: translate(-0.025rem, -1.75lh); }

/* Tabs */
.mfd .multi-tabs {
    background-color: var(--light-grey);
    padding: 0.25rem;
    color: var(--dark-grey);
    display: grid;
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    height: 2.5rem;
}
.mfd .multi-tabs > div {
    transition: all .15s cubic-bezier(.4,0,.2,1);
    font-weight: 500; font-size: .875rem; line-height: 1.25rem;
    padding: .375rem .75rem;
    border-radius: 4px;
    gap: .5rem;
    justify-content: center; align-items: center;
    display: flex; cursor: pointer; white-space: nowrap;
}
.mfd .multi-tabs > div.active {
    background-color: #fff; color: var(--black);
    box-shadow: 0 1px 2px 0 #0000000d;
}

.mfd .tab-content { display: flex; margin-top: 1rem; flex-direction: column; gap: 1rem; }

/* Upload boxes */
.mfd .file-upload-box {
    border: 2px dashed var(--grey);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .5rem;
    color: var(--dark-grey);
    position: relative; width: 100%;
}
.mfd .file-upload-box i { font-size: 2rem; }
.mfd .file-upload-box p { margin: 0; }
.mfd .file-upload-box p:nth-child(3) { font-size: .75rem; }
.mfd .file-upload-box:hover { background-color: #f9fafb; }
.mfd .file-upload-box input {
    opacity: 0; position: absolute; inset: 0; cursor: pointer;
}
.mfd .file-upload-box.dragover { background-color: #eff6ff; border-color: #60a5fa; }
.mfd .file-upload-box button { padding: .25rem .75rem; height: auto; }

/* Forms */
.mfd .doc-form { display: flex; flex-direction: column; gap: .5rem; }
.mfd .form-group { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; width: 100%; }
.mfd .form-group label { font-size: .875rem; font-weight: 500; }
.mfd .form-group label.is-required::after { content: ' *'; color: #ef4444; font-weight: 600; opacity: 1; transition: opacity .2s ease; }

.mfd .form-group input,
.mfd .form-group select,
.mfd .form-group .custom-select {
    width: 100%;
    padding: .5rem .75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: .875rem; line-height: 1.25rem;
    font-size: 13px;
    padding: 0.2em 0.5em;
    margin-top: -7px;
}
.mfd .form-group input:focus-visible,
.mfd .form-group select:focus { outline-offset: 2px; outline: 2px solid var(--black); }

/* Custom select */
.mfd .custom-select { position: relative; cursor: pointer; border: 1px solid #e2e8f0; border-radius: 6px; padding: .5rem .75rem; background: #fff; font-size: .875rem; line-height: 1.25rem; }
.mfd .custom-select .selected { display: flex; justify-content: space-between; align-items: center; }
.mfd .custom-select .selected::after {
    content: '\f107'; font-family: "Font Awesome 5 Free"; font-weight: 900; color: var(--dark-grey); transition: transform .2s ease;
}
.mfd .custom-select.active .selected::after { transform: rotate(180deg); }
.mfd .options {
    display: none; position: absolute; top: calc(100% + 2px); left: -1px; right: -1px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; z-index: 100;
    overflow: auto; padding: .5rem; max-height: 200px; box-shadow: 0 4px 6px rgba(0,0,0,.1);
}
.mfd .option {
    cursor: pointer; padding: .5rem 1rem; border-radius: 4px; display: flex; justify-content: space-between; align-items: center;
}
.mfd .option:hover { background-color: var(--light-grey); }
.mfd .option.selected { background-color: var(--light-grey); }
.mfd .option.selected::after {
    content: '\f00c'; font-family: "Font Awesome 5 Free"; font-weight: 900; color: var(--black);
}

.mfd #multiple_content.tab-content .doc-form {
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem;
}

/* Multi list */
.mfd .multi-doc-form { display: flex; flex-direction: column; border: 1px solid #e2e8f0; border-radius: 6px; }
.mfd .multi-doc-form .doc-list-header { background: #f9fafb; padding: 1rem; border-bottom: 1px solid #e2e8f0; font-weight: 600; }
.mfd .multi-doc-form .doc-list {
    display: flex; flex-direction: row; padding: .25rem; max-height: 300px; overflow-x: auto; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; gap: .25rem;
}
.mfd .multi-doc-form .doc-item {
    flex-shrink: 0;
    display: grid; grid-template-columns: auto auto 1fr auto; gap: .5rem;
    padding: .5rem .75rem; border-radius: 4px; cursor: pointer;
    justify-content: space-between; justify-items: start; align-items: center;
    position: relative; transition: background-color .2s ease;
}
.mfd .doc-item.selected { background: #ffffff; box-shadow: 0px 2px 1px 0px #0000000d; }
.mfd .doc-item > :nth-child(1) {
    font-size: .8rem; font-weight: 600; background: #e5e7eb; border-radius: 50%;
    aspect-ratio: 1 / 1; display: flex; justify-content: center; line-height: 1.25rem; width: 1.25rem; margin-right: .25rem;
}
.mfd .doc-item > :nth-child(3) {
    font-size: .875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 7rem;
}
.mfd .doc-item .status { margin-left: .25rem; width: 1rem; height: 1rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.mfd .doc-item .status div { width: .5rem; height: .5rem; border-radius: 50%; }
.mfd .doc-item .status.red div { background: #ef4444; }
.mfd .doc-item .status.yellow div { background: #f59e0b; }
.mfd .doc-item .status.green div { background: #22c55e; }
.mfd .doc-item .status.red { background: #fee2e2; }
.mfd .doc-item .status.yellow { background: #fef3c7; }
.mfd .doc-item .status.green { background: #bbf7d0; }
.mfd .doc-item .file-number {
    position: absolute; top: .5rem; right: .25rem;
    background: #f3f4f6; color: var(--dark-grey); font-size: .75rem; font-weight: 600;
    padding: .125rem .5rem; border-radius: 1rem; transform: translate(50%, -50%);
    border: 1px solid var(--grey); z-index: 1;
}

.mfd .multi-doc-form .doc-form { padding: 0 .5rem .5rem .5rem; }

/* Info box */
.mfd .doc-info-box { padding: .75rem; display: flex; flex-direction: column; }
.mfd .doc-info { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; gap: 1rem; }
.mfd .doc-title { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.mfd .doc-title > i { color: var(--blue); font-size: 1.25rem; }
.mfd .doc-title .review-status {
    font-size: .75rem; font-weight: 600; padding: .25rem .5rem; border-radius: 1rem;
    display: flex; align-items: center; gap: .25rem;
}
.mfd .doc-title .review-status.yellow { color: #b45309; background: #fffbeb; }
.mfd .doc-title .review-status.green { color: #15803d; background: #ecfdf5; }
.mfd .doc-title .review-status i {
    width: 14px; height: 14px; border: .125rem solid var(--grey); border-radius: 50%;
    font-size: .5rem; display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0;
}
.mfd .doc-title .review-status.yellow i { border-color: #b45309; }
.mfd .doc-title .review-status.green i { border-color: #15803d; }
.mfd .doc-info button i.fa-trash-can { color: #ef4444; }
.mfd .doc-info button:hover i.fa-trash-can { color: #b91c1c; }

.mfd .doc-info-box .progress-bar {
    width: 100%; height: .375rem; background: #e5e7eb; border-radius: 4px; overflow: visible; margin-top: 1.5rem; position: relative;
}
.mfd .doc-info-box .progress-bar::before {
    content: 'Document completion'; position: absolute; left: 0; top: -0.25rem; transform: translateY(-100%);
    font-size: .75rem; color: var(--dark-grey);
}
.mfd .doc-info-box .progress-bar::after {
    content: 'Required fields missing'; position: absolute; right: 0; top: -0.25rem; transform: translateY(-100%);
    font-size: .75rem; color: var(--dark-grey);
}
.mfd .doc-info-box .progress { height: 100%; background: var(--black); width: 0%; transition: width .3s ease; border-radius: 4px; }

/* Preview */
.mfd .document-preview { height: 100%; display: flex; flex-direction: column; }
.mfd .preview-header { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; align-items: center; }
.mfd .preview-header h3 { color: var(--black); font-weight: 600; }
.mfd .file-actions { display: flex; gap: 1rem; }
.mfd .preview-content { flex: 1; overflow: visible; display: flex; flex-direction: column; height: calc(100% - 10rem); }
.mfd .loading-spinner { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--medium-grey); }
.mfd .loading-spinner i { font-size: 2rem; margin-bottom: 1rem; }

.mfd .document-preview.maximized { border-radius: 6px; border: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,0.8); }
.mfd .document-preview.maximized .preview-header { padding: 1rem 1rem 0 1rem; }
.mfd .document-preview.maximized .preview-content { padding: 0 1rem 1rem 1rem; }

/* Image preview */
.mfd .image-preview { height: 100%; display: flex; align-items: center; justify-content: center; overflow: visible; }
.mfd .image-preview img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.1); }

/* PDF preview */
.mfd .pdf-preview { height: 100%; display: flex; flex-direction: column; }
.mfd .pdf-preview iframe { flex: 1; border: none; border-radius: 4px; }
.mfd .pdf-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; color: var(--medium-grey); }
.mfd .pdf-fallback i { font-size: 3rem; color: #dc2626; margin-bottom: 1rem; }

/* Text preview */
.mfd .text-preview { height: 100%; overflow: auto; }
.mfd .text-preview pre {
    margin: 0; white-space: pre-wrap; word-wrap: break-word;
    font-family: 'Courier New', monospace; font-size: .75rem; line-height: 1.4;
    background: #f8fafc; padding: 1rem; border-radius: 4px; border: 1px solid var(--light-grey);
}
.mfd .truncation-notice { margin-top: 1rem; font-style: italic; color: var(--medium-grey); text-align: center; }

/* Unsupported */
.mfd .unsupported-preview { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--medium-grey); }
.mfd .file-icon { position: relative; margin-bottom: 1rem; }
.mfd .file-icon i { font-size: 4rem; color: var(--light-grey); }
.mfd .extension {
    position: absolute; bottom: .5rem; left: 50%; transform: translateX(-50%);
    background: var(--dark-grey); color: #fff; font-size: .7rem; font-weight: bold; padding: .2rem .4rem; border-radius: 2px;
}
.mfd .unsupported-preview .file-name { font-weight: 600; color: var(--dark-grey); margin-bottom: .5rem; }
.mfd .preview-message { font-style: italic; margin-top: 1rem; }

.upload-document thead tr {
    background: #f4f4f4;
}

.upload-document table {
    border: none;
    font-size: 14px;
}

.upload-document td {
    border: none;
    padding: 7px;
}

.upload-document th {
    border: none;
    text-align: left;
}

.upload-document table select {
    font-size: inherit;
    padding: 5px;
    padding-right: 20px;
}

#cMfdTerms .novia-disclaimer {
    width: auto;
    margin-bottom: 5px;
    margin-top: 5px;
}

.mfd .custom-select.active .options {
    display: block;
}

/* red outline for invalid fields */
.form-group.invalid input,
.form-group.invalid .custom-select .selected {
    outline: 2px solid #e53935;
    border-color: #e53935;
}

.recording-compliance-consent.invalid {
    outline: 2px solid #e53935;
    border-radius: 8px;
    padding: 6px;
}

#cMfdTerms .consent-item.selected {
    border: 2px solid #3a7afe;
    border-radius: 8px;
}

.electronic-notary-info > * {
    margin: 0px !important;
}

.electronic-notary-info > h4 {
    font-size: 16px !important;
}

@media screen and (max-width:1000px) {
    .novia-upload-dialog {
        display:block;
        max-width:640px;
    }
    .novia-upload-preview {
        display:none;
    }
}

/* ===== Signup Wizard Styles ===== */
:root {
  --primary-color: #5DCEA5;
  --secondary-color: #4db890;
}
/* ===== Commonly used class ===== */
.a-cent-j-sb{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.a-cent-j-cent{
    display: flex;
    align-items: center;
    justify-content: center;
}
.fd-c{
    flex-direction: column;
}
.flex{
    display: flex;
}
.fw-500{
    font-weight: 500;
}
.bold{
    font-weight: bold;
}
.block{
    display: block;
}
.inline-block{
    display: inline-block;
}
.m-0{
    margin: 0;
}
.mb-10{
    margin-bottom: 10px;
}
.mb-20{
    margin-bottom: 20px;
}
.mb-40{
    margin-bottom: 40px;
}
.mt-20{
    margin-top: 20px;
}
.mt-40{
    margin-top: 40px;
}
.mb-4rem{
    margin-bottom: 4rem;
}
.gap-1rem{
    gap: 1rem;
}
.gap-2rem{
    gap: 2rem;
}
.relative{
    position: relative;
}
/* ===== REUSABLE BASE STYLES ===== */

/* Card base styles - shared by user-card, method-card, and option cards */
#signup-wizard-container .wizard-card-base {
  position: relative;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  align-items: center;
    overflow: hidden;
}

#signup-wizard-container .wizard-card-base:hover {
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(93, 206, 165, 0.15);
  transform: translateY(-2px);
}

#signup-wizard-container .wizard-card-base.disabled:hover {
  border-color: #e2e8f0;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

#signup-wizard-container .wizard-card-base.selected {
  border-color: var(--primary-color);
  background: linear-gradient(135deg, #f0fdf9 0%, #ffffff 100%);
  box-shadow: 0 4px 12px rgba(93, 206, 165, 0.2);
}

/* Selected checkmark badge - reused across multiple card types */
#signup-wizard-container .wizard-card-base.selected::after {
  content: "✓";
  position: absolute;
  top: 15px;
  right: 15px;
  width: 28px;
  height: 28px;
  background: #10b981;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
}

/* Custom radio button styles - shared across option types */
#signup-wizard-container .wizard-radio-base {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  background-color: white;
  transition: all 0.2s ease;
}

#signup-wizard-container .wizard-radio-base:checked {
  border-color: var(--primary-color);
  background-color: var(--primary-color);
}

#signup-wizard-container .wizard-radio-base:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: white;
}

#signup-wizard-container .wizard-radio-base:hover {
  border-color: var(--primary-color);
}

/* Wizard container layout styles */
#signup-wizard-container.wizard-container-base {
  max-width: 780px;
  margin: 0 auto;
  padding: 32px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

/* Bordered card sections */
.wizard-section-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  padding: 20px;
}

/* Alert/Message box base */
.wizard-message-base {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.wizard-message-base i {
  font-size: 20px;
  flex-shrink: 0;
}

/* Button navigation base */
.wizard-btn-base {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.wizard-btn-base:disabled {
  opacity: 0.99;
  cursor: not-allowed;
}

/* ===== SIGNUP WIZARD SPECIFIC STYLES ===== */

#signup-wizard-container {
  width: 100%;
  max-width: 900px;
  margin: 2rem auto;
  background-color: #ffffff;
  padding: 3rem 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

#signup-wizard-container .signup-title {
  font-size: 2rem;
  font-weight: 700;
  color: black;
}

#signup-wizard-container .step-label {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Progress Bar */
#signup-wizard-container .signup-progress-bar {
  width: 100%;
  height: 8px;
  background-color: #e2e8f0;
  border-radius: 9999px;
  overflow: hidden;
  margin-bottom: 3rem;
}

#signup-wizard-container .signup-progress-bar .signup-progress-fill {
  height: 100%;
  background-color: var(--primary-color);
  border-radius: 9999px;
  transition: width 0.3s ease-in-out;
}

/* User Cards - extends base card */
#signup-wizard-container .user-cards-container {
  gap: 1.5rem;
  margin-bottom: 3rem;
}
#signup-wizard-container .notary-cards-container {
    gap: 1.5rem;
    margin-bottom: 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#signup-wizard-container .user-card {
  padding: 2rem 1.5rem;
  width: 25rem;
}

#signup-wizard-container .user-card .card-icon {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

#signup-wizard-container .user-card p {
  font-size: 0.95rem;
  color: #718096;
  margin: 0;
  line-height: 1.5;
}

/* Notary Warning */
#signup-wizard-container .notary-warning {
  background-color: #fef3c7;
  border: 1px solid #fbbf24;
  padding: 0.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1rem;
  color: #f59e0b;
  font-size: 1.25rem;
  flex-shrink: 0;
  border-radius: 8px;
}

#signup-wizard-container .notary-warning p {
  margin: 0;
  color: #92400e;
  font-size: 0.95rem;
  line-height: 1.5;
}
/* Navigation Buttons */
#signup-wizard-container .navigation-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3rem;
    gap: 1rem;
}

#signup-wizard-container .btn-back {
    background-color: white;
    color: black;
    border: 2px solid #e2e8f0;
}

#signup-wizard-container .btn-back:hover:not(:disabled) {
    background-color: lightgray;
    border-color: #cbd5e0;
}

#signup-wizard-container .btn-continue {
    background-color: var(--primary-color);
    color: #ffffff;
    margin-left: auto;
}

#signup-wizard-container .btn-continue:hover:not(:disabled) {
    background-color: var(--secondary-color);
    box-shadow: 0 4px 12px rgba(93, 206, 165, 0.3);
}

/* Method Cards (Step 4) */
#signup-wizard-container .method-card {
    flex: 1;
    max-width: 280px;
    min-height: 280px;
    padding: 20px;
    border: 2px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#signup-wizard-container .method-card:hover {
    border-color: #10b981;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

#signup-wizard-container .create-icon {
    background: #dcfce7;
    color: var(--primary-color);
}

/* Upload Container (Step 5) */
#signup-wizard-container .upload-container {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

#signup-wizard-container .upload-card {
    width: 100%;
    max-width: 500px;
    padding: 40px 30px;
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    text-align: center;
    background: white;
}

#signup-wizard-container .upload-icon {
    color: var(--primary-color);
}

#signup-wizard-container .upload-text {
    color: #6b7280;
    margin-bottom: 20px;
}

#signup-wizard-container .btn-upload {
    background: #10b981;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#signup-wizard-container .btn-upload:hover {
    background: #059669;
}

#signup-wizard-container #file-selected {
    padding: 12px;
    background: #f3f4f6;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #1f2937;
}

#signup-wizard-container #file-selected i {
    color: #ef4444;
    font-size: 20px;
}

/* Project Type Grid (Step 3) */
#signup-wizard-container .project-type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 600px;
    margin: 24px auto 0;
}

/* Unified option card style - used for all option types */
#signup-wizard-container .project-type-option,
#signup-wizard-container .document-type-option {
    position: relative;
    cursor: pointer;
    align-items: center;
    padding: 16px 24px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    transition: all 0.2s ease;
}

#signup-wizard-container .project-type-option.selected {
    outline: 3px solid #17a2b8;
}

#signup-wizard-container .project-type-option:hover,
#signup-wizard-container .document-type-option:hover {
    border-color: #d1d5db;
    background: #f9fafb;
}

#signup-wizard-container .project-type-option input[type="radio"],
#signup-wizard-container .document-type-option input[type="radio"] {
    position: absolute;
    left: 16px;
    flex-shrink: 0;
}

/*
#signup-wizard-container .project-type-option:has(input[type="radio"]:checked),
#signup-wizard-container .document-type-option:has(input[type="radio"]:checked) {
  border-color: var(--primary-color);
  background: linear-gradient(135deg, #f0fdf9 0%, #ffffff 100%);
  box-shadow: 0 4px 12px rgba(93, 206, 165, 0.2);
}
*/

/* Label styling for options with content structure */
#signup-wizard-container .project-type-option label,
#signup-wizard-container .document-type-option label {
    flex: 1;
    margin-left: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

/* Simple text label (for options without description) */
#signup-wizard-container .project-type-option .radio-label,
#signup-wizard-container .document-type-option .radio-label {
    flex: 1;
    text-align: center;
    font-size: 15px;
    color: #4b5563;
    user-select: none;
    margin-left: 40px;
}

#signup-wizard-container .project-type-option input[type="radio"]:checked + .radio-label,
#signup-wizard-container .document-type-option input[type="radio"]:checked + .radio-label {
    font-weight: 600;
    color: #1f2937;
}

/* Content structure for options with title + description */
#signup-wizard-container .project-type-option .option-content,
#signup-wizard-container .document-type-option .option-content {
    text-align: left;
    flex: 1;
}

#signup-wizard-container .project-type-option .option-title,
#signup-wizard-container .document-type-option .option-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
}

#signup-wizard-container .project-type-option .option-description,
#signup-wizard-container .document-type-option .option-description {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.4;
}

/* Document Type Options (Step 4) */
#signup-wizard-container .document-type-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 640px;
    margin: 40px;
}

/* Sponsored Messages */
#signup-wizard-container .sponsored-message {
    background: linear-gradient(135deg, #f3e8ff 0%, #faf5ff 100%);
    border: 1px solid #e9d5ff;
    margin: 0 auto;
    max-width: 640px;
}

#signup-wizard-container .sponsored-message i {
    color: #9333ea;
}

#signup-wizard-container .sponsored-message span {
    color: #4b5563;
}

#signup-wizard-container .sponsored-message strong {
    color: #9333ea;
}

#signup-wizard-container .sponsored-link {
    color: #9333ea;
    text-decoration: underline;
    font-weight: 500;
}

#signup-wizard-container .sponsored-link:hover {
    color: #7e22ce;
}

#signup-wizard-container .sponsored-message-green {
    background: linear-gradient(135deg, #d1fae5 0%, #f0fdf4 100%);
    border: 1px solid #86efac;
    margin: 20px auto;
    max-width: 800px;
}

#signup-wizard-container .sponsored-message-green i {
    color: #047857;
}

#signup-wizard-container .sponsored-message-green span {
    color: #065f46;
}

#signup-wizard-container .sponsored-message-green strong {
    color: #047857;
}

/* Card Info Box */
#signup-wizard-container .card-info-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: #dbeafe;
    border-radius: 6px;
    margin-top: 16px;
    font-size: 13px;
    color: #1e40af;
    line-height: 1.4;
}

#signup-wizard-container .card-info-box i {
    font-size: 14px;
    flex-shrink: 0;
}

/* Form Styles */
#signup-wizard-container .form-section-title {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
    text-align: center;
}

#signup-wizard-container .form-section-description {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 24px;
    text-align: center;
}

#signup-wizard-container .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

#signup-wizard-container .form-field {
    margin-bottom: 16px;
}

#signup-wizard-container .form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 6px;
}

#signup-wizard-container .form-field input[type="text"],
#signup-wizard-container .form-field input[type="email"],
#signup-wizard-container .form-field input[type="password"],
#signup-wizard-container .form-field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    color: #1f2937;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

#signup-wizard-container .form-field input[type="text"]:focus,
#signup-wizard-container .form-field input[type="email"]:focus,
#signup-wizard-container .form-field input[type="password"]:focus,
#signup-wizard-container .form-field textarea:focus {
    outline: none;
    border-color: #3b82f6;
}

#signup-wizard-container .form-field input::placeholder,
#signup-wizard-container .form-field textarea::placeholder {
    color: #9ca3af;
}

#signup-wizard-container .form-field textarea {
    font-family: inherit;
    resize: vertical;
}

/* Social Login */
#signup-wizard-container .social-login-divider {
    position: relative;
    text-align: center;
    margin: 24px 0;
}

#signup-wizard-container .social-login-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e5e7eb;
    z-index: 0;
}

#signup-wizard-container .social-login-divider span {
    position: relative;
    display: inline-block;
    padding: 0 16px;
    background: white;
    color: #6b7280;
    font-size: 14px;
    z-index: 1;
}

#signup-wizard-container .social-login-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

#signup-wizard-container .social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: white;
    font-size: 15px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

#signup-wizard-container .social-btn:hover {
    border-color: #9ca3af;
    background: #f9fafb;
}

#signup-wizard-container .social-btn i {
    font-size: 18px;
}

#signup-wizard-container .google-btn i { color: #ea4335; }
#signup-wizard-container .facebook-btn i { color: #1877f2; }
#signup-wizard-container .yahoo-btn i { color: #6001d2; }

#signup-wizard-container .terms-text {
    text-align: center;
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

#signup-wizard-container .terms-link {
    color: #3b82f6;
    text-decoration: none;
}

#signup-wizard-container .terms-link:hover {
    text-decoration: underline;
}

/* Additional Info Section */
#signup-wizard-container .additional-info-container {
    max-width: 780px;
    margin: 0 auto;
}

#signup-wizard-container .info-section {
    margin-bottom: 20px;
}

#signup-wizard-container .info-section-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 16px;
}

#signup-wizard-container .info-card-title{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

#signup-wizard-container .checkbox-field {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
}

#signup-wizard-container .checkbox-field input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0 12px 0 0;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--primary-color);
    flex-shrink: 0;
}

#signup-wizard-container .checkbox-label {
    font-size: 15px;
    color: #4b5563;
    cursor: pointer;
    user-select: none;
    line-height: 1.5;
    text-align: center;
}

/* Document Creation Layout (Step 8) */
#signup-wizard-container .create-document-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}

#signup-wizard-container .document-form-column,
#signup-wizard-container .document-preview-column {
    display: flex;
    flex-direction: column;
}

#signup-wizard-container .preview-card {
    padding: 24px;
}

#signup-wizard-container .preview-document {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 24px;
    font-size: 14px;
    line-height: 1.6;
}

#signup-wizard-container .timeline-box {
    padding: 20px;
}

#signup-wizard-container .timeline-step {
    display: flex;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 20px;
}

#signup-wizard-container .timeline-step:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

#signup-wizard-container .timeline-number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
}

#signup-wizard-container .timeline-title {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 4px;
    color: #1f2937;
}

#signup-wizard-container .timeline-description {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 4px;
}

#signup-wizard-container .timeline-note {
    color: #10b981;
    font-size: 13px;
    font-weight: 500;
}

#signup-wizard-container .order-summary-card {
    padding: 24px;
}

#signup-wizard-container .summary-line {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
    color: #4b5563;
    font-size: 15px;
}

#signup-wizard-container .summary-line:last-of-type {
    border-bottom: 2px solid #d1d5db;
}

#signup-wizard-container .summary-total {
    display: flex;
    justify-content: space-between;
    padding-top: 16px;
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
}

#signup-wizard-container .info-box {
    background: #dbeafe;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    padding: 16px;
    font-size: 14px;
    color: #1e40af;
    line-height: 1.6;
}

#signup-wizard-container .warning-box {
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    gap: 12px;
    font-size: 14px;
    color: #92400e;
    line-height: 1.6;
}

#signup-wizard-container .warning-box i {
    flex-shrink: 0;
    font-size: 18px;
    color: #f59e0b;
}

/* Upload Dropzone */
#signup-wizard-container .upload-dropzone {
    background: white;
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 48px 24px;
    text-align: center;
    transition: all 0.3s ease;
}

#signup-wizard-container .upload-dropzone:hover {
    border-color: #9ca3af;
    background: #f9fafb;
}

#signup-wizard-container .upload-dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#signup-wizard-container .btn-choose-file {
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-block;
}

#signup-wizard-container .btn-choose-file:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    #signup-wizard-container {
        margin: 1rem;
        padding: 2rem 1.5rem;
    }

    #signup-wizard-container .signup-header h1 {
        font-size: 1.5rem;
    }

    #signup-wizard-container .user-cards-container,
    #signup-wizard-container .project-type-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    #signup-wizard-container .form-row,
    #signup-wizard-container .social-login-buttons {
        grid-template-columns: 1fr;
    }

    #signup-wizard-container .navigation-buttons {
        flex-direction: column-reverse;
    }

    #signup-wizard-container .btn-continue,
    #signup-wizard-container .btn-back {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 968px) {
    #signup-wizard-container .create-document-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Preview & Summary Section */
#signup-wizard-container .preview-card {
    margin-bottom: 24px;
}

#signup-wizard-container .preview-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

#signup-wizard-container .preview-card-icon {
    font-size: 20px;
}

#signup-wizard-container .preview-card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

#signup-wizard-container .preview-document-title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 16px;
}

#signup-wizard-container .preview-document-location {
    text-align: center;
    color: #6b7280;
    margin-bottom: 24px;
}

#signup-wizard-container .preview-document-field {
    margin-bottom: 12px;
}

#signup-wizard-container .preview-document-field-row {
    display: flex;
    gap: 32px;
    margin-bottom: 12px;
}

#signup-wizard-container .preview-document-placeholder {
    color: #6b7280;
}

#signup-wizard-container .upload-preview-empty {
    text-align: center;
    padding: 48px 24px;
}

#signup-wizard-container .upload-preview-icon-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

#signup-wizard-container .upload-preview-icon {
    color: #d1d5db;
}

#signup-wizard-container .upload-preview-text {
    color: #9ca3af;
    font-size: 15px;
    margin: 0;
}

/* Timeline Section */
#signup-wizard-container .timeline-section {
    margin-bottom: 24px;
}

#signup-wizard-container .timeline-section-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

#signup-wizard-container .timeline-step {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #e5e7eb;
}

#signup-wizard-container .timeline-step:last-child {
    border: none;
    padding-bottom: 0;
}

#signup-wizard-container .timeline-number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

#signup-wizard-container .timeline-title {
    font-weight: 600;
    margin-bottom: 4px;
    color: #1f2937;
}

#signup-wizard-container .timeline-description {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 4px;
}

#signup-wizard-container .timeline-note {
    color: #6b7280;
    font-size: 13px;
}

#signup-wizard-container .timeline-note-highlight {
    color: #3b82f6;
}

/* Order Summary */
#signup-wizard-container .order-summary-card { /* Uses wizard-section-card */ }

#signup-wizard-container .order-summary-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

#signup-wizard-container .order-summary-icon {
    font-size: 20px;
}

#signup-wizard-container .order-summary-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

#signup-wizard-container .summary-line {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 15px;
    color: #374151;
}

#signup-wizard-container .summary-total {
    display: flex;
    justify-content: space-between;
    padding: 16px 0 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}

/* Signup Wizard Method Card Consistency */
#signup-wizard-container .method-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 24px 20px 16px 20px;
    margin: 0 12px;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 260px;
    max-width: 340px;
    position: relative;
    transition: box-shadow 0.2s;
}

#signup-wizard-container .method-card.selected {
    box-shadow: 0 4px 16px rgba(59,130,246,0.15);
    border: 2px solid #3b82f6;
}

#signup-wizard-container .method-card .card-icon {
    margin: 12px auto;
}

#signup-wizard-container .method-card h4.bold {
    font-size: 20px;
    margin: 8px auto;
    color: #1f2937;
}

#signup-wizard-container .method-card .card-description {
    font-size: 15px;
    color: #374151;
    margin-bottom: 16px;
}

#signup-wizard-container .method-card .card-info-box {
    background: #f3f4f6;
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #047857;
    margin-top: 8px;
    border: 1px solid #e5e7eb;
    width: 100%;
}

#signup-wizard-container .method-card[data-method="upload"] .card-info-box {
    display: none !important;
}

#signup-wizard-container .card-icon.method-icon {
    padding: 1em;
    margin-bottom: 1em;
}

/* ===================================================
   Review Dialog Styles
   =================================================== */

.dialog-new {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: slideIn 0.3s ease-out;
}

.dialog-new .novia-dialog2 {
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    width: 90%;
    max-width: 500px;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dialog-new .dialog-header {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 1rem;
    position: relative;
}

.dialog-new .icon-circle {
    width: 56px;
    height: 56px;
    background: #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}

.dialog-new .icon-circle svg {
    color: #fff;
    fill: #fff;
}

.dialog-new .dialog-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
}

.dialog-new .dialog-subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

.dialog-new .close-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: #9ca3af;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    transition: all 0.2s;
}

.dialog-new .close-btn:hover {
    background: #f3f4f6;
    color: #4b5563;
}

.dialog-new .dialog-body {
    padding: 1rem;
}

.dialog-new h4{
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
}

.dialog-new .dialog-body-comment{
    font-size: 0.75rem;
    color: #6b7280;
}

.dialog-new .note-blue {
    margin-top:0.5rem;
    padding:0.75rem;
    background:#dbeafe;
    border-left:3px solid #3b82f6;
    border-radius:0.375rem;
}
/* Star Rating - Custom styling (avoid WooCommerce .star-rating) */
#reviewDialog .review-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-direction: column;
}

#reviewDialog .review-rating .stars {
    display: inline-block;
}

#reviewDialog .review-rating .star {
    display: inline-block;
    color: #d1d5db;
    font-size: 2.5rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    margin: 0 4px;
    transition: color 0.2s ease;
}

#reviewDialog .review-rating .star:hover,
#reviewDialog .review-rating .star.hover,
#reviewDialog .review-rating .star.selected{
    color: #f59e0b;
}

#reviewDialog .rating-text {
    font-size: 0.875rem;
    color: #6b7280;
}

#reviewDialog .rating-text.has-rating {
    color: #059669;
    font-weight: 500;
}

/* Comment Section */
#reviewDialog textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Footer Buttons */
.woocommerce .dialog-new button.button-primary,
.woocommerce .dialog-new button.button {
    opacity: 1;
    cursor: pointer;
    background-color: ghostwhite;
    color: darkslategray;
    border: 2px solid lightgray;
    border-radius: 8px;
}

.woocommerce .dialog-new button.button-primary:disabled{
    cursor: not-allowed;
}

.woocommerce .dialog-new button.button-primary:not(:disabled):hover,
.woocommerce .dialog-new button.button:hover {
    background-color: #e5e7eb;
    border: 2px solid lightgray;
    color: darkslategray;
}

/* Success Message */
.dialog-new .success-message {
    padding: 1rem;
    background: #d1fae5;
    border: 1px solid #10b981;
    border-radius: 0.5rem;
    color: #065f46;
    text-align: center;
    margin: 1rem 1.5rem;
    font-weight: 500;
}

/* Error Message */
.dialog-new .error-message {
    padding: 1rem;
    background: #fee2e2;
    border: 1px solid #ef4444;
    border-radius: 0.5rem;
    color: #991b1b;
    text-align: center;
    margin: 1rem 1.5rem;
    font-weight: 500;
}

.dialog-new .dialog-footer{
    display:flex;
    justify-content:space-between;
    padding:1rem 1rem 0;
    background:#f9fafb;
    border-top:1px solid #e5e7eb;
}

/* Responsive */
@media screen and (max-width: 640px) {
    #reviewDialog .novia-dialog2 {
        width: 95%;
        margin: 1rem;
    }

    #reviewDialog .star {
        font-size: 2rem;
    }

    #reviewDialog .dialog-footer {
        flex-direction: column;
        gap: 0.5rem;
    }

    #reviewDialog .dialog-footer > div {
        width: 100%;
    }

    #reviewDialog .dialog-footer button {
        width: 100%;
    }
}

.flex-col{
    display:flex;
    flex-direction:column;
}
.flex{
    display: flex
}
.a-cent{
    display: flex;
    align-items: center;
}
.j-cent{
    display: flex;
    justify-content: center;
}
.j-between{
    display: flex;
    justify-content: space-between;
}
.gap-05rem{
    gap: 0.5rem;
}
.gap-1rem{
    gap: 1rem;
}

#pdfContainer {
    position:relative;

}

.pdfSuperContainer {

}
/* End additional package dialog styles */

.novia-ai-progress-head {
    display: grid;
    grid-template-columns: 1fr auto;
}

.novia-ai-progress-info {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-gap: 1em;
    font-size: 13px;
}

.novia-ai-progress-stage-index {
    background-color: #d9ecff;
    color: #052b97;
    font-size: 13px;
    font-weight: bold;
    padding: 0px 16px;
    border-radius: 50px;
}

.novia-ai-progress {
    background-color: #fff;
    margin: 10px;
    padding: 1em;
    border-radius: 8px;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.05);
    cursor: pointer;
}

.novia-ai-progress-bar {
    background-color: #eee;
    height: 5px;
    margin-top: 11px;
}

.novia-ai-progress-bar-inner {
    background-color: #09f;
    height: 100%;
}

.ai-analysis-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    grid-gap: 1em;
    margin: 1em;
}

.ai-analysis-head h2 {
    font-size: 18px;
    font-weight: bold;
    margin: 0px !important;
}

.package-notice.pkg-blue {
    color: #000;
}

.ai-analysis-head .fa-bolt {
    /* padding: 1em; */
    border-radius: 30px;
    background: linear-gradient(90deg, #2664eb, #b77edd);
    width: 3em;
    display: inline-block;
    height: 3em;
    line-height: 3em;
    text-align: center;
    color: #fff;
}

.ai-analysis-head > div:last-child {
    opacity: 0.7;
    text-align: right;
}

.ai-analysis-overall-progress {
    display: grid;
    grid-template-columns: 1fr auto;
    margin: 1em;
    margin-top: 2em;
}

.ai-analysis-stage-progress {
    background-color: #fff;
    margin: 1em;
    padding: 1em;
    border-radius: 7px;
}

.ai-analysis-stage-description {
    display: grid;
    grid-template-columns: auto 1fr  auto;
    align-items: center;
    grid-gap: 1em;
    margin-bottom: 1em;
}

.ai-analysis-stage-description h3 {
    font-size: 17px;
    font-weight: bold;
}

.ai-analysis-stage-description .fas {
    color: #2664eb;
    font-size: 18px;
}

span.ai-analysis-stage-index {
    background-color: #d5e8ff;
    padding: 3px 12px;
    border-radius: 24px;
    color: #0a0c50;
    font-weight: bold;
    font-size: 12px;
}

.ai-analysis-stage-progress + div {
    margin: 1em;
}

.ai-analysis-stage-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1em;
    text-align: center;
    align-items: center;
    margin-top: 0.5em;
}

.ai-analysis-stage-list > div {
    display: grid;
    grid-template-rows: auto auto;
    padding: 1em;
    background-color: rgba(255,255,255,0.5);
    border: 2px solid rgba(0,0,0,0.05);
    border-radius: 8px;
    grid-gap: 0.5em;
    color: #24336a;
}

.ai-analysis-stage-list .fas {
    font-size: 22px;
    color: #637ee5;
}

.ai-analysis-stage.active {
    background-color: #d5e8ff;
    border: 2px solid #2664eb;
}

.common-fields-form h4 {
    grid-column: 1 / -1;
    font-size: 20px;
    margin-bottom: -10px;
    margin-top: 1em;
    color: #314f8f;
}

.order-filter-container {
    margin: 1em 0 1.5em;
    padding: 12px 16px;
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.order-filter-header {
    margin-bottom: 8px;
}

.order-filter-header h2 {
    margin: 0 0 4px;
    font-size: 20px;
}

.order-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.order-filter-group {
    display: flex;
    flex-direction: column;
    margin-right: 8px;
}

.order-filter-group label {
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 13px;
}

.order-filter-group input[type="number"],
.order-filter-group input[type="date"] {
    padding: 4px 8px;
    min-width: 160px;
    font-size: 13px;
}

.order-filter-group button {
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .order-filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .order-filter-group {
        width: 100%;
        margin-right: 0;
    }

    .order-filter-group input[type="number"],
    .order-filter-group input[type="date"],
    .order-filter-group button {
        width: 100%;
    }
}

.order-filter-container {
    margin: 1em 0 1.5em;
    padding: 12px 16px;
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.order-filter-header {
    margin-bottom: 8px;
}

.order-filter-header h2 {
    margin: 0 0 4px;
    font-size: 20px;
}

.order-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.order-filter-group {
    display: flex;
    flex-direction: column;
    margin-right: 8px;
}

.order-filter-group label {
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 13px;
}

.order-filter-group input[type="number"],
.order-filter-group input[type="date"] {
    padding: 4px 8px;
    min-width: 160px;
    font-size: 13px;
}

.order-filter-group button {
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
}

.adspace-grid {
    display:grid;grid-template-columns:1fr 200px; grid-gap:1em;
}

#cCountyBottomBanner, #cCountyTopBanner, #cStateTopBanner, #cStateBottomBanner {
    padding:1em 0em;
}

/* Only when notarized upload is invoked */
#mfd-root.mfd-notarized-single-only .mfd-multi-tab,
#mfd-root.mfd-notarized-single-only .mfd-batch-upload {
    display: none !important;
}


@media (max-width: 1200px) {

    .novia-counties-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
    }
}

@media (max-width: 1000px) {

    .novia-counties-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 768px) {
    .order-filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .order-filter-group {
        width: 100%;
        margin-right: 0;
    }

    .order-filter-group input[type="number"],
    .order-filter-group input[type="date"],
    .order-filter-group button {
        width: 100%;
    }

    .adspace-grid {
        grid-template-columns: 1fr;
    }

    .novia-counties-grid {
        grid-template-columns: 1fr !important;
        overflow-y: visible !important;
        max-height: none !important;
    }

    .novia-documents-grid {
        grid-template-columns: 1fr !important;
    }
}