@charset "UTF-8";

html body {
    border-radius: 10px;
    font-family: 'Roboto', sans-serif;
}

.form-header-navbar {
    background-color: #6d4fb3;
    border-bottom-right-radius: 25px;
    padding-top: 5px;
}

.form-header {
    color: #8b58c1; /* Change the text color */
    font-family: 'Roboto', sans-serif;
    font-size: 16px !important;
    font-weight: bold !important;
    text-decoration: none; /* Remove underline if needed */
    height: 30px;
    text-align: center;
}

.card {
    margin: 10px 10px 10px 10px !important;
    padding: 0px 0px !important;
    border: none;
    border-radius: 10px;
}

.card-header {
    padding-left: 7px !important;
    background-color: #fff !important;
    height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #8b58c1;
    font-weight: bold;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    border: none !important; /* <-- This ensures all borders are removed */
}

.card .card-header a {
    font-size: 1.4rem;
    font-weight: bold;
    display: flex;
}

.card-body {
    border: none;
    box-shadow: 0px 0px 12px #77767629;
    border-radius: 10px;
    padding: 0px !important;
}

.form-label {
    font-size: 1rem;
    font-weight: 500 !important;
    opacity: 1;
    margin-bottom: 0 !important;
    padding: 2px 5px;
}

td.form-label {
    font-family: 'Roboto', sans-serif;
    font-weight: 300 !important; /* Change font weight */
    padding-top: 5px !important;
    font-size: 1rem;
    margin-bottom: 0rem !important;
    color: rgb(7 27 129); /* try other color*/
}

.form-control {
    border: 1px solid #e8e8e8;
    height: 30px !important;
}

.form-control-multi {
    border: 1px solid #e8e8e8;
    font-family: 'Roboto', sans-serif;
    padding-left: 5px !important;
    width: 100% !important;
}

.form-floating > .form-control, .form-floating > .form-control-plaintext, .form-floating > .form-select {
    min-height: calc(3.5rem + calc(var(--bs-border-width)* 2));
    line-height: 1.25;
}

.form-control:disabled {
    background-color: #F3F3F3 !important;
    opacity: 1;
}

.form-control:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: #6d4fb3;
    outline: 0;
    box-shadow: 0 0 0 0.075rem rgba(13, 110, 253, 0.25);
}

.form-select {
    -webkit-box-align: center;
    align-items: center;
    background-color: white;
    border-color: #e8e8e8;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    cursor: default;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    position: relative;
    transition: 100ms;
    box-sizing: border-box;
    outline: 0px !important;
}

    .form-select option {
        background-color: #fff;
        opacity: 1;
    }

        .form-select option:nth-child(even) {
            background-color: #f1f1f1;
        }

        .form-select option:nth-child(odd) {
            background-color: #FFF;
        }

    .form-select:disabled {
        color: #555;
        background-color: #f5f3f3;
        opacity: 1;
    }

    .form-select:focus {
        background-color: #f5f3f3 !important;
        border-color: #6d4fb3;
        outline: 0;
        box-shadow: 0 0 0 0.075rem rgba(13, 110, 253, 0.25);
    }

.form-check {
    font-family: 'Roboto', sans-serif;
    border-radius: 10px !important;
    height: 27px !important;
    padding-left: 0em !important;
    min-width: 150px;
}

    .form-check label {
        padding-left: 7px !important;
        font-weight: 500 !important;
    }

    .form-check input[type="radio"] {
        padding: 10px; /* Adjust padding as needed */
    }

.form-check-radio {
    font-family: 'Roboto', sans-serif;
    border-radius: 10px !important;
    height: 27px !important;
    padding-left: 0em !important;
    min-width: 150px;
}

    .form-check-radio td {
        padding: 5px;
    }

    .form-check-radio label {
        font-size: 1.4rem;
        padding-left: 7px !important;
        font-weight: 500 !important;
    }

    .form-check-radio input[type="radio"] {
        padding: 10px; /* Adjust padding as needed */
    }

/* RadioButtonList / CheckBoxList: options side by side, wrapping to the next line when there's no room.
   Works for RepeatLayout="Flow" (span) and the default RepeatLayout="Table" (table / tbody / tr / td). */
.radio-inline,
table.radio-inline,
table.radio-list {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    position: relative;
    width: auto !important;
    max-width: 100%;
    border: 0;
    margin: 0;
}

    /* table layout: let the row and its cells flow like the span version */
    table.radio-inline > tbody,
    table.radio-inline tr,
    table.radio-list > tbody,
    table.radio-list tr {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        width: auto !important;
        max-width: 100%;
    }

    table.radio-inline td,
    table.radio-list td {
        display: block !important;
        position: relative;
        flex: 0 0 auto;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .radio-inline input[type="radio"],
    .radio-inline input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        margin: 0;
        pointer-events: none;
    }

span.radio-inline label,
table.radio-inline label {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: var(--ctl-h);
    padding: 0 16px;
    margin: 0 !important;
    border: 1px solid var(--ctl-line);
    border-radius: 999px;
    background: #fff;
    font-size: 13.5px;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: border-color .12s, background-color .12s;
}
span.radio-inline label:hover, table.radio-inline label:hover { border-color: var(--ctl-accent); }
span.radio-inline label::before, table.radio-inline label::before {
        content: "";
        flex: 0 0 auto;
        width: 14px;
        height: 14px;
        box-sizing: border-box;
        border: 2px solid #94a3b8;
        border-radius: 50%;
        background: #fff;
    }
.radio-inline input[type="checkbox"] + label::before { border-radius: 4px; }
.radio-inline input:checked + label {
    border-color: var(--ctl-accent);
    background: var(--ctl-accent-bg);
    color: #1d4ed8;
    font-weight: 600;
}
.radio-inline input[type="radio"]:checked + label::before {
        border-color: var(--ctl-accent);
        background: radial-gradient(circle, var(--ctl-accent) 0 3px, #fff 3.5px);
    }
.radio-inline input[type="checkbox"]:checked + label::before {
        border-color: var(--ctl-accent);
        background: var(--ctl-accent);
        box-shadow: inset 0 0 0 2px #fff;
    }
.radio-inline input:focus-visible + label { outline: 2px solid var(--ctl-accent); outline-offset: 2px; }
.radio-inline input:disabled + label { opacity: .5; cursor: not-allowed; }

.radio-inline br {
    display: none;
}

/* Radio / checkbox list + remarks box in one <div class="d-flex">:
   the options and the box sit on one line when there's room, and wrap neatly when there isn't */

.d-flex:has(> .radio-inline),
.d-flex:has(> table.radio-list),
.d-flex.opt-row {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    min-width: 0;
}

.d-flex > .radio-inline,
    .d-flex > table.radio-list {
        flex: 0 1 auto;
        min-width: 0;
    }

.d-flex > .radio-inline ~ input[type="text"],
    .d-flex > .radio-inline ~ textarea,
    .d-flex > .radio-inline ~ .asp-textbox,
    .d-flex > table.radio-list ~ input[type="text"],
    .d-flex > table.radio-list ~ .asp-textbox {
        flex: 1 1 220px;           /* takes the rest of the line, at least 220px, else moves below */
        width: auto;
        min-width: 0;
        max-width: 100%;
    }

.btn-success-custom {
    --bs-btn-color: #fff;
    --bs-btn-bg: #198754;
    --bs-btn-border-color: #198754;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #157347;
    --bs-btn-hover-border-color: #146c43;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #146c43;
    --bs-btn-active-border-color: #13653f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #198754;
    --bs-btn-disabled-border-color: #198754;
}

.form-control_newx {
    width: 100%;
    padding: 0.155rem 0.75rem;
    font-size: 1rem;
    font-weight: 200;
    line-height: 1.0;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-label_new {
    font-weight: 500;
    margin-bottom: 0.5rem;
    font-size: 15px;
    box-sizing: border-box;
    font-family: var(--bs-body-font-family);
}

.form-header_new {
    color: white;
    text-decoration: none;
    font-weight: 600;
    background-color: #4682b4;
    height: 30px;
}

.form-control-mizoram {
    display: block;
    width: 100%;
    padding: 0.155rem 0.75rem;
    font-size: 1rem;
    font-weight: 200;
    line-height: 1.5 !important;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    background-clip: padding-box;
    border: 1px solid #DCF0FA;
    border-radius: var(--bs-border-radius);
    transition: border-color 0.05s ease-in-out, box-shadow 0.05s ease-in-out;
}

.btn__primary--large1 {
    background-color: #0073b1;
    border: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    outline-width: 2px;
    padding: 0 25px;
    position: relative;
    text-align: center;
    text-decoration: none;
    -webkit-transition-duration: 167ms;
    transition-duration: 167ms;
    -webkit-transition-property: background-color,color,-webkit-box-shadow;
    transition-property: background-color,color,-webkit-box-shadow;
    transition-property: background-color,box-shadow,color;
    transition-property: background-color,box-shadow,color,-webkit-box-shadow;
    -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    vertical-align: middle;
    z-index: 0;
    background: var(--color-action, #0a66c2) !important;
    border-radius: 28px !important
}

.form-control1 {
    padding: 0; /* Remove padding */
    padding-left: 5px !important;
    font-size: 1.1rem;
    border-radius: 10px !important;
    width: 320px;
}

body {
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    background: #f6f6f6 0% 0% no-repeat padding-box !important;
}

    body::-webkit-scrollbar {
        display: none;
    }

.content {
    padding-top: 90px;
}

.content-new {
    font-family: Verdana;
    line-height: 15px;
    padding: 0; /* Remove padding */
    padding-left: 5px !important;
    font-size: 1.7rem !important;
    border-radius: 10px !important;
}

.form-header1 {
    color: white; /* Change the text color */
    text-decoration: none; /* Remove underline if needed */
    font-weight: 600;
    background-color: #4682b4;
    height: 30px;
}

.form-label1 {
    font-weight: 500;
    margin-left: 10px;
}

/*new gridview */

.gridView {
    flex: auto;
    margin: 0px 0px 5px 0px !important;
    border: solid 1px #cccccc !important;
    width: 100%;
    height: contain;
    background-color: white;
    max-height: 300px;
    overflow-y: auto;
}

    .gridView tbody tr th {
        background-color: #fff;
        border: 1px solid #cccccc;
        border-radius: 1px;
        color: #0b57d0;
        height: contain;
        font-weight: 600;
        padding: .5rem;
        text-align: center;
        position: sticky;
        z-index: 1;
    }

    .gridView thead tr th {
        background-color: #fff;
        border: 1px solid #cccccc;
        border-radius: 1px;
        color: #0b57d0;
        height: contain;
        font-weight: 600;
        padding: .5rem;
        text-align: center;
        position: sticky;
        top: -2px;
        z-index: 1;
    }

    .gridView tr th a {
        color: #0070BB;
        text-align: left;
        font-weight: bold;
    }

    .gridView tr td {
        border: 1px solid #cccccc !important;
        background-color: white;
        font-size: 1.4rem;
        color: #555555;
        font-weight: 300;
        padding: .5rem;
    }

.gridheader1 {
    font-weight: bold;
    font-family: Verdana, sans-serif;
    font-size: 15px;
    background-color: #A4DDED;
    line-height: 30px;
}

/*end gridview */

.gridheader-new {
    font-weight: bold;
    font-family: Verdana;
    font-size: 12px;
    color: white;
    background-color: #4682b4;
    line-height: 20px;
}

.gridheader-sub {
    font-weight: bold;
    font-family: Verdana;
    font-size: 12px;
    color: white;
    background-color: #6aa7da;
    line-height: 20px;
}

.textborder {
    border-radius: 15px;
}

.textwidth {
    width: 58%;
}

.gridView-small {
    font-size: 1.4rem;
    font-family: 'Roboto', sans-serif;
    line-height: 15px;
    padding-top: 5px;
    border: solid 1px #2577A9 !important;
    width: 100%;
    height: contain;
    margin-bottom: 15px !important;
    box-shadow: 5px 5px 10px #c7c7c7, -5px -5px 10px #ffffff !important;
    border-radius: 7px !important;
    overflow: hidden;
}

    .gridView-small tr:nth-child(even) {
        font-size: 1.4rem;
        font-family: 'Roboto', sans-serif;
        border: solid 1px #8bbee8 !important;
        background-color: #FFF;
    }

    .gridView-small tr:nth-child(odd) {
        font-size: 1.4rem;
        font-family: 'Roboto', sans-serif;
        border: solid 1px #8bbee8 !important;
        background-color: #d0e2f4;
    }

    .gridView-small tr:nth-child(even) td {
        font-size: 1.2rem;
        font-family: 'Roboto', sans-serif;
        border: solid 1px #8bbee8 !important;
        background-color: #FFF;
    }

    .gridView-small tr:nth-child(odd) td {
        font-size: 1.2rem;
        font-family: 'Roboto', sans-serif;
        border: solid 1px #8bbee8 !important;
        background-color: #d0e2f4;
    }

    .gridView-small tr {
        font-size: 1.2rem;
        font-family: 'Roboto', sans-serif;
        border-top-left-radius: 10px !important;
        border-top-right-radius: 10px !important;
    }

        .gridView-small tr th {
            border: solid 1px #8bbee8 !important;
            color: white;
            background-color: #4682b4;
            text-align: center;
        }

            .gridView-small tr th:first-child {
                border-top-left-radius: 10px !important;
            }

            .gridView-small tr th:last-child {
                border-top-right-radius: 10px !important;
            }

            .gridView-small tr th a {
                color: white;
                background-color: #4682b4;
                text-align: center;
            }

.ul-bg-dark {
    background-color: #254961;
}

    .ul-bg-dark li a {
        color: white;
    }

        .ul-bg-dark li a:focus {
            color: lightblue;
        }

.headerContent2 {
    color: white;
    font-size: 1.7rem !important;
    background-color: #2577A9;
    text-align: left;
    font-weight: 400;
}

.container-fluid {
    --bs-gutter-x: 0.5rem !important;
    width: 98% !important;
}

.btn_gridpage table tr td {
    background-color: #FFF;
    border: none;
}

.btn_gridpage a {
    margin-right: 3px !important;
    color: gray;
    display: inline-block;
    font-weight: 600;
    font-family: inherit;
    width: 25px;
    line-height: 25px;
    overflow: hidden;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition-duration: 167ms;
    background: var(--color-action, #d0e2f4) !important;
    border-radius: 28px !important;
}

.btn_gridpage tr:nth-child(even) {
    border: none !important;
    background-color: #FFF;
}

.btn_gridpage tr:nth-child(odd) {
    border: none !important;
    background-color: #FFF;
}

.btn_gridpage tr:nth-child(even) td {
    border: none !important;
    background-color: #FFF;
}

.btn_gridpage tr:nth-child(odd) td {
    border: none !important;
    background-color: #FFF;
}

.btn_gridpage a:hover {
    color: #0073b1;
    display: inline-block;
    font-weight: 600;
    font-family: inherit;
    width: 25px;
    line-height: 25px;
    overflow: hidden;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition-duration: 167ms;
    background: var(--color-action, #d0e2f4) !important;
    border-radius: 28px !important;
}

.btn_gridpage span {
    margin-right: 3px !important;
    background-color: #0073b1;
    border: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-weight: 600;
    font-family: inherit;
    height: 25px;
    width: 25px;
    line-height: 25px;
    overflow: hidden;
    outline-width: 2px;
    position: relative;
    text-align: center;
    text-decoration: none;
    -webkit-transition-duration: 167ms;
    transition-duration: 167ms;
    -webkit-transition-property: background-color,color,-webkit-box-shadow;
    transition-property: background-color,color,-webkit-box-shadow;
    transition-property: background-color,box-shadow,color;
    transition-property: background-color,box-shadow,color,-webkit-box-shadow;
    -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    vertical-align: middle;
    z-index: 0;
    background: var(--color-action, #0a66c2) !important;
    border-radius: 28px !important
}

.sidebar-content {
    border-radius: 4px;
}

.btn-primary {
    background-color: var(--navy);
    border-color: var(--navy);
}

    .btn-primary:hover {
        background-color: var(--navy-mid);
        border-color: var(--navy-mid);
    }

    .btn-primary:disabled {
        background-color: #5E44E2;
        border-color: #5E44E2;
    }

.btn-secondary {
    background-color: #6c757d;
    border-color: #5E44E2 !important;
}

    .btn-secondary:hover {
        background-color: #e8e8e8;
        border-color: #555555;
        color: #555555;
    }

.form-label-value {
    display: flex; /* make it flex */
    align-items: center; /* vertical center */
    width: 100%;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: #f5f5f5;
    background-clip: padding-box;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    padding-left: 8px !important;
    font-size: 1.2rem !important;
    border: 1px solid #e8e8e8;
    border-radius: 5px !important;
    height: 35px !important;
}

.table {
    padding: 0.1rem 0.1rem !important;
}

tr {
    font-size: 13px;
    display: table-row;
    vertical-align: inherit;
    unicode-bidi: isolate;
    border-color: #cccccc inherit;
}

.row {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

.btn {
    display: inline-block;
    font-size: 1.4rem !important;
    font-weight: 600;
    margin-bottom: 0;
    text-align: center !important;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    background-image: none;
    border: 1px solid #FFF !important;
    padding: 4px 15px !important;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Shadow for highlight */
}

.btn-sm-gridview {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-border-radius: var(--bs-border-radius-sm);
    padding-top: 0px;
    padding-bottom: 0px;
}

.nav-link.active {
    margin: 5px 5px 5px 5px;
    background-color: #6d4fb3 !important;
    color: #FFF !important;
}

.nav > li > a {
    padding: 5px 5px !important;
    font-size: 15px !important;
}

.overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

.col-sm-2 {
    padding: 0px 10px !important;
}

.input-group-row {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.input-group-sm {
    display: flex;
    align-items: flex-start;
}

.row {
    --bs-gutter-x: 1.5rem;
    margin-left: unset !important;
    margin-right: unset !important;
}

.close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2
}

    .close:focus, .close:hover {
        color: #000;
        text-decoration: none;
        cursor: pointer;
        filter: alpha(opacity=50);
        opacity: .5
    }

button.close {
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.fade_alert {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear
}

    .fade_alert.in {
        opacity: 1
    }

.modal-fullscreen-static {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    padding: 20px;
    border-radius: 10px;
    z-index: 1000; /* Ensure it stays on top */
}

    .modal-fullscreen-static .header {
        font-size: 18px;
        color: white;
        margin-bottom: 10px;
        text-align: center;
    }

    .modal-fullscreen-static .body {
        text-align: center;
    }

.powered-by {
    background-color: #ffffff;
}

.contentNews {
    width: 100%;
    height: 10%;
}

.notif-container {
    width: 350px;
    border: 1px solid green;
    background-color: white;
    z-index: 10000;
    padding: 5px;
    border-radius: 12px;
    margin-bottom: 5px;
}

.notification-wrapper {
    overflow: auto;
    bottom: 10px;
    right: 10px;
    max-height: 200px;
    width: 100%;
    padding: 5px;
    background-color: #eceff1;
}

.FT14 {
    font-size: 14px;
}

.child-header {
    display: flex;
    align-items: center;
    background: #a93900;
    color: black;
    flex-wrap: wrap;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: 60px !important;
}

.header {
    flex-wrap: wrap;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

    .header .entity-name {
        text-align: left;
        flex: 1;
    }

    .header .logo-container {
        flex: 1;
        text-align: center;
    }

    .header .user-details {
        text-align: right;
        flex: 1;
    }

@media only screen and (max-width: 767px) {
    .header img {
        height: 30px;
    }
}

#userdetails {
    width: 100%;
    text-align: right;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.modal-fullscreen {
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    padding: 20px;
    border-radius: 10px; /* Ensure it stays on top */
}

    .modal-fullscreen .header {
        font-size: 18px;
        color: white;
        margin-bottom: 10px;
        text-align: center;
    }

    .modal-fullscreen .body {
        text-align: center;
    }

.modal-fullscreen-notransform {
    position: fixed;
    top: 50%;
    left: 50%; /* Semi-transparent background */
    padding: 20px;
    border-radius: 10px;
    z-index: 1000; /* Ensure it stays on top */
}

    .modal-fullscreen-notransform .header {
        font-size: 18px;
        color: white;
        margin-bottom: 10px;
        text-align: center;
    }

    .modal-fullscreen-notransform .body {
        text-align: center;
    }
/* Dark semi-transparent overlay */ /* Below the modal */ /* Initially hidden */

.header .logo {
    flex: 1;
    vertical-align: top;
}

    .header .logo img {
        max-width: 100px;
        background-color: rgba(255, 255, 255, 0.3);
        padding: 1px;
        border-radius: 5px;
    }

.header-text {
    flex: 2;
    text-align: center;
    font-size: 1.2em;
    margin: 0;
    line-height: 1.2;
    padding: 0 10px;
    color: white;
}

.alert {
    --bs-alert-padding-x: 0.1rem !important;
    --bs-alert-padding-y: 0.1rem !important;
    margin-bottom: 2px !important;
    border-radius: 0px !important;
}

.modal-footer {
    padding: 0 !important;
}

.modal-open {
    padding-right: 0px !important;
}

body {
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    padding-right: 0px !important;
}

.modal-header {
    display: block !important;
    padding: 0px !important;
}

.modal-body {
    padding: 0px !important;
    margin-bottom: 0px !important;
}

.alert-dismissible {
    padding-right: 1rem !important;
}

.footer {
    background: transparent linear-gradient(98deg, #6d4fb3 0%,#165FC7 100%) 0% 0% no-repeat padding-box;
}

.footer-large-font {
    font-family: Poppins;
    font-size: 20px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #fdffff;
}

.mizoram-title {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #424242;
}

.mizoram-value {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #424242;
}

.mizoram-content {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.38;
    letter-spacing: normal;
    text-align: left;
    text-align-last: left;
    color: #1f1f1f;
}

.btn-filled-primary {
    border-radius: 8px;
    background-color: #3a66b5;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
    min-height: 2.572em;
    border: none;
}

.btn-filled-secondary {
    border-radius: 8px;
    background-color: #c7c7c7;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #2e2c2c;
    min-height: 2.572em;
    border: none;
}

.full-width {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.half-width {
    width: 50% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.container-75 {
    width: 75%;
    margin: 0 auto; /* To center it horizontally */
}

.container-50 {
    width: 50%;
    margin: 0 auto; /* To center it horizontally */
}

.container-25 {
    width: 25%;
    margin: 0 auto; /* To center it horizontally */
}

.form-control-filled {
    border-radius: 8px !important;
}

    .form-control-filled:disabled {
        background-color: #eaeaea;
        opacity: 1;
    }

    .form-control-filled:focus {
        color: var(--bs-body-color);
        background-color: var(--bs-body-bg);
        border-color: #6d4fb3;
        outline: 0;
        box-shadow: 0 0 0 0.075rem rgba(13, 110, 253, 0.25);
    }

.form-select-mizoram {
    display: block;
    width: 100%;
    padding: 0.155rem 0.75rem;
    font-size: 1.5rem;
    font-weight: 200;
    line-height: 2.0;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    background-clip: padding-box;
    border-radius: var(--bs-border-radius);
    transition: border-color 0.05s ease-in-out, box-shadow 0.05s ease-in-out;
    border: 1px solid #DCF0FA;
}

    .form-select-mizoram:disabled {
        background-color: #eaeaea;
        opacity: 1;
    }

    .form-select-mizoram:focus {
        color: var(--bs-body-color);
        background-color: var(--bs-body-bg);
        border-color: rgba(0,0,0,0.5);
        outline: 0;
        box-shadow: 0 0 0 0.075rem rgba(13, 110, 253, 0.25);
    }

.header-mizoram {
    margin-top: 0;
}

@media (max-width: 375px) {
    .header-mizoram {
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {
    .header-mizoram {
        font-size: 14px !important;
    }
}

@media (max-width: 768px) {
    .header-mizoram {
        font-size: 16px !important;
        margin-right: 0;
        margin-top: 0px !important;
    }
}

@media (max-width: 1768px) {
    .header-mizoram {
        font-size: 18px !important;
        margin-right: 0;
        margin-top: 0px !important;
    }
}

.header-mizoram {
    margin-bottom: 5px;
    font-family: 'Segoe UI', sans-serif;
    line-height: 1.4;
    color: #fff;
    font-weight: 500;
    font-size: 1rem; /* base font size = 16px */
}

/* Responsive scaling using rems */
@media (max-width: 768px) {
    .header-mizoram {
        font-size: 0.95rem;
    }
}

@media (max-width: 576px) {
    .header-mizoram {
        font-size: 0.85rem;
    }
}

@media (max-width: 375px) {
    .header-mizoram {
        font-size: 0.8rem;
    }
}

.formheader-mizoram {
    font-family: 'Roboto', sans-serif;
    font-size: 25px;
    line-height: 20px;
    font-weight: 700 !important;
    margin-bottom: 5px;
    padding-top: 5px;
    color: #21709E;
}

.fa, .fab, .fad, .fal, .far, .fas {
    line-height: 1.5 !important;
    font-size: 17px !important;
    font-family: 'Roboto', sans-serif;
}

.danger {
    color: red !important;
}

.w-90 {
    width: 90% !important;
}

.w-10 {
    width: 10% !important;
}

.mb-3 {
    margin-bottom: 0.5rem !important;
    width: 100%
}

.fa-eye-slash {
    width: 24px;
    height: 24px;
    background-image: url('../images/ICONS/Icon_Eye_Close.png'); /* Path to your local image */
    background-size: contain;
    background-repeat: no-repeat;
}

    .fa-eye-slash:before {
        content: none !important;
    }
/* For the .fa-eye icon */
.fa-eye {
    width: 24px;
    height: 24px;
    background-image: url('../images/ICONS/Icon_Eye_Open.png'); /* Path to your local image */
    background-size: contain;
    background-repeat: no-repeat;
}

    .fa-eye:before {
        content: none !important;
    }

.vh-110 {
    height: 110vh !important;
}

sup {
    color: red;
}

.card-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    border: 1px solid #ddd;
    width: 100%;
    background-color: #fff;
    border-bottom-right-radius: 30px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    transition: box-shadow 0.4s ease, transform 0.4s ease, background-color 0.4s ease;
    overflow: auto; /* Ensure scrollability within card */ /* Adjust based on header/footer height */
}

.div_home {
    border: none;
    background: linear-gradient( to right, rgba(224, 179, 255, 0.8), rgba(204, 153, 255, 0.8), rgba(166, 77, 255, 0.8), rgba(128, 0, 204, 0.8), rgba(77, 0, 153, 0.8) );
    width: 24%;
    height: 7%;
    position: relative;
    overflow: hidden;
    clip-path: polygon(100% 20%, 0 15%,0 250%);
    z-index: -1;
}

.powered-by {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-image: linear-gradient(to right, #0054A8, #8B6FFF);
}

tr.form-label {
    display: contents;
}

.table-hover tbody tr:hover {
    background-color: #f5f5f5;
}

.modal-header {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #165FC7;
}

.modal-body {
    font-size: 14px;
    margin-bottom: 15px;
}

.modal-footer {
    text-align: center;
}

.centered-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Modal backdrop */

.confirm {
    top: 50% !important;
    left: 50% !important;
}

.modalBackground {
    opacity: .8;
    background-color: #333333;
    z-index: 1040 !important;
}
/* Modal popup content */
.modelpopup {
    position: fixed !important;
    -moz-box-shadow: 0 1px 2px #303030;
    -moz-border-radius: 8px 8px 8px 8px;
    transition: top 0.5s ease-in-out, opacity 0.5s ease-in-out;
    overflow-y: auto !important;
    max-width: 90%; /* responsive for smaller screens */
    max-height: 80vh;
    overflow-y: auto;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    padding: 20px;
    color: #333;
    z-index: 1050;
    top: 25% !important;
}
/*Sanjeev Changes */

.custom-grid {
    font-family: 'Segoe UI', sans-serif;
    background-color: white;
    color: black;
    cursor: pointer;
    border: 1px solid #ccc;
}

    .custom-grid th {
        color: #8b58c1 !important;
        background-color: #f9f9f9;
        padding: 12px 10px;
        text-align: center;
        position: relative;
        cursor: pointer;
    }

        .custom-grid th a {
            color: #8b58c1 !important;
        }

    .custom-grid td span {
        display: flex;
        align-items: flex-start;
    }

    .custom-grid tr:nth-child(even) {
        background-color: #e0e0e0;
    }

/* Pager Styling */
.pager {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    width: 100%;
    padding: 10px;
    gap: 4px;
    box-sizing: border-box;
}

    .pager a,
    .pager span,
    .pager label {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 12px;
        background-color: #f1f1f1;
        color: #000;
        text-decoration: none;
        font-size: 13px;
    }

    .pager span {
        background-color: #00b386;
        color: white;
        font-weight: bold;
    }
/* Make pager container tighter */
.custom-grid .pager {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}
    /* Style individual pager items */
    .custom-grid .pager a,
    .custom-grid .pager span {
        padding: 2px 6px !important;
        margin: 0;
        font-size: 10px;
        height: 24px;
        line-height: 20px;
        border-radius: 12px;
        background-color: #f1f1f1;
        color: #000;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Active pager span */
    .custom-grid .pager span {
        background-color: #00b386;
        color: white;
        font-weight: bold;
    }

/* Reduce padding on td that contains pager */

.custom-grid tr td[colspan] {
    height: 32px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.custom-grid tbody tr:nth-child(even) {
    background-color: #e0e0e0;
}

.custom-grid tbody tr:hover {
    background-color: #d6eaf8 !important;
}

/* Match hyperlink color on hover */ /* Same as the hovered row text color */

.user-dropdown {
    width: 220px;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #165FC7;
    border-radius: 0 0 12px 12px;
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 999;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

    .user-dropdown li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

.dropdown-link {
    display: flex;
    align-items: center;
    color: white !important;
    padding: 12px 16px;
    text-decoration: none !important;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    width: 100%;
    box-sizing: border-box;
    transition: background 0.3s ease;
}

    .dropdown-link:hover {
        background-color: #134BA0;
        color: #fff;
    }

    .dropdown-link img {
        width: 18px;
        margin-right: 10px;
    }

@media (max-width: 768px) {
    .user-dropdown {
        right: 10px;
        width: 95%;
    }
}

.input-prefix-container {
    position: relative;
}

/* Prefix styles */
.input-prefix {
    position: absolute;
    left: 12px; /* Adjust based on your preference */
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    color: #555;
    pointer-events: none;
    z-index: 2;
}

/* Textbox padding to accommodate prefix */
.input-prefix-container input {
    padding-left: 35px; /* Add enough padding to avoid overlap */
    z-index: 1;
}

.custom-alert-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10500;
}

.custom-alert-box {
    background-color: #fff;
    padding: 30px 40px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    text-align: center;
    max-width: 500px;
    width: 90%;
}

.custom-alert-icon {
    font-size: 60px;
    margin-bottom: 10px;
}

.success-icon {
    color: #28a745;
}

.error-icon {
    color: #dc3545;
}

.custom-alert-message {
    font-weight: 800;
    font-size: 1.2rem;
}

.custom-alert-subtext {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 20px;
}

.gradient-icon {
    background: linear-gradient(98deg, #6d4fb3 0%, #165FC7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.btn-gradient-icon {
    color: #fff !important;
    background: linear-gradient(98deg, #6d4fb3 0%, #165FC7 100%) !important;
    border-color: #6d4fb3 !important;
}

#searchtab .nav-link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: #f0f0f0;
    color: #999;
    font-size: 0.9rem;
    font-weight: bold;
    white-space: nowrap;
    transition: all 0.3s ease;
    margin-right: 2px;
    border: 1px solid #ccc;
    border-bottom: none;
}

    #searchtab .nav-link.active {
        background-color: #007bff;
        color: #fff !important;
        border-color: #007bff;
        border-bottom: none;
        filter: none;
        pointer-events: auto;
        z-index: 2;
    }

#searchtab {
    top: 61px;
    right: 0;
    left: 0;
    z-index: 999;
    background-color: white;
    border-bottom: 1px solid #ccc;
    white-space: nowrap;
}

.custom-loader {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4); /* semi-transparent overlay */
    z-index: 1065 !important; /* higher than modal popup */
    display: flex;
    align-items: center;
    justify-content: center;
}

header.navbar-fixed-top {
    margin-bottom: 20px; /* Adjust the value as needed */
}

.container-fluid1 {
    margin-top: 20px; /* Adjust as needed */
}

.Table-header {
    padding-left: 7px !important;
    background-color: #6a64c5 !important;
    height: 35px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white !important;
    font-weight: bold;
    border-top-left-radius: 2px !important;
    border-top-right-radius: 2px !important;
    border-bottom: 1px solid #e8e8e8;
}

.label-colour {
    color: #8b58c1 !important;
}

input[type=checkbox], input[type=radio] {
    margin: 4px 0 0;
    margin-left: 20px;
    margin-top: 1px\9;
    line-height: normal;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.5); /* Dark semi-transparent overlay */
    z-index: 999; /* Below the modal */
    display: none; /* Initially hidden */
}

.navbar {
    z-index: 999 !important;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px
}

::-webkit-scrollbar-track {
    background: transparent
}

::-webkit-scrollbar-thumb {
    background: rgba(7,26,82,.22);
    border-radius: 10px
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(7,26,82,.22) transparent
}

:root {
    /* form controls (asp-textbox / asp-select / asp-label / radio pills / form-table) */
    --ctl-h: 35px;
    --ctl-line: #cbd5e1;
    --ctl-accent: #2563eb;
    --ctl-accent-bg: #eff6ff;
    --ctl-ro-bg: #f1f5f9;

    /* NHIS portal palette (Tailwind blue-900 / green-600 / orange-600 / gray / slate) */
    --cm-blue-900: #1e3a8a;
    --cm-blue-800: #1e40af;
    --cm-blue-700: #1d4ed8;
    --cm-blue-300: #93c5fd;
    --cm-blue-100: #dbeafe;
    --cm-blue-50: #eff6ff;
    --cm-green: #16a34a;
    --cm-green-dark: #15803d;
    --cm-orange: #ea580c;
    --cm-orange-dark: #c2410c;
    --cm-gray-900: #111827;
    --cm-gray-800: #1f2937;
    --cm-gray-700: #374151;
    --cm-gray-600: #4b5563;
    --cm-gray-500: #6b7280;
    --cm-gray-300: #d1d5db;
    --cm-gray-200: #e5e7eb;
    --cm-gray-100: #f3f4f6;
    --cm-gray-50: #f9fafb;
    --cm-slate-950: #020617;
    --cm-slate-900: #0f172a;
    --cm-slate-400: #94a3b8;
    --cm-slate-300: #cbd5e1;
    /* Theme tokens used across the site (mapped to the palette) */
    --navy: var(--cm-blue-900);
    --navy-mid: var(--cm-blue-800);
    --navy-light: var(--cm-blue-700);
    --accent: var(--cm-blue-700);
    --bg: var(--cm-gray-50);
    --surface: #fff;
    --border: var(--cm-gray-200);
    --text-dark: var(--cm-gray-900);
    --text-mid: var(--cm-gray-600);
    --text-soft: var(--cm-gray-500);
    --text-muted: var(--cm-gray-600);
    --success: #15803d;
    --success-bg: #dcfce7;
    --success-bd: #86efac;
    --info: #1d4ed8;
    --info-bg: #dbeafe;
    --info-bd: #93c5fd;
    --warn: #92400e;
    --warn-bg: #fef3c7;
    --warn-bd: #fcd34d;
    --danger: #991b1b;
    --danger-bg: #fee2e2;
    --danger-bd: #fca5a5;
    --r-sm: 6px;
    --r-md: 8px;
    --sh-sm: 0 1px 3px 0 rgba(0,0,0,.10), 0 1px 2px -1px rgba(0,0,0,.10);
    --sh-md: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.10);
    --navy-deep: var(--cm-slate-900);
    --blue: var(--cm-blue-900);
    --blue-bright: var(--cm-blue-700);
    --sky: var(--cm-blue-50);
    --yellow: var(--cm-orange);
    --yellow-btn: var(--cm-blue-50);
    --yellow-bg-1: #fff;
    --yellow-bg-2: var(--cm-gray-50);
    --cream: #fff;
    --paper: #fff;
    --ink: var(--cm-gray-700);
    --ink-2: var(--cm-gray-600);
    --line: var(--cm-gray-200);
    --sans: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --serif: var(--sans);
    /* Bootstrap theme hooks */
    --bs-body-font-family: var(--sans);
    --bs-body-color: var(--ink);
    --bs-link-color: var(--blue);
    --bs-link-hover-color: var(--navy-mid);
    --bs-link-color-rgb: 30, 58, 138;
    --bs-link-hover-color-rgb: 30, 64, 175;
    /* Login page palette (LoginPPN_uictn.aspx) — used by the master header & footer */
    --lp-maroon: #0a2150;
    --lp-maroon-dark: #0a2150;
    --lp-yellow: #F6C945;
    --lp-yellow-btn: #F8E79A;
    --lp-cream: #FFF9EA;
    --lp-line: #E4DABD;
    --lp-ink: #0F1E3A;
    --lp-ink-2: #33415F;
    --lp-emblem-bg: #F4E3AE;
    --lp-emblem-border: #3E7B3A;
    --lp-footer-text: #D5DEEE;
}

html, body {
    font-family: var(--sans);
    background: var(--bg);
    min-height: 100vh;
    color: var(--text-dark);
    display: flex;
    flex-direction: column;
    font-size: 12px;
}

/* ── HEADER ─────────────────────────────────────── */
.ch-header {
    background: linear-gradient(130deg,#071a52 0%,#0d2872 45%,#1340a8 100%);
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 52px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 3px 16px rgba(7,26,82,.40);
    flex-shrink: 0;
}

    .ch-header::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg,#38bdf8,#3b82f6,#818cf8);
    }

.logo-mark {
    width: 34px;
    height: 34px;
    background: rgba(255,255,255,.10);
    border: 1.5px solid rgba(255,255,255,.22);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 4px;
}

.header-right {
    flex-wrap: wrap;
    justify-content: flex-end
}

.header-nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap
}

    .header-nav-links a, .header-nav-links .asp-lnk {
        color: rgba(255,255,255,.80);
        font-size: 11px;
        font-weight: 600;
        text-decoration: none;
        padding: 4px 10px;
        border-radius: var(--r-sm);
        border: 1px solid rgba(255,255,255,.15);
        background: rgba(255,255,255,.07);
        transition: all .15s;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

        .header-nav-links a:hover, .header-nav-links .asp-lnk:hover {
            background: rgba(255,255,255,.16);
            color: #fff;
            border-color: rgba(255,255,255,.30);
        }

.btn-logout-new {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(180deg,#e53535,#b91c1c);
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: var(--r-sm);
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 0 #7f1d1d;
    transition: opacity .1s;
}

    .btn-logout-new:hover {
        opacity: .88
    }

/* ── REF STRIP ───────────────────────────────────── */
.ref-strip {
    background: #FFFEFA;
    border-bottom: 1px thin #4a5568;
    padding: 0px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.ref-strip-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.ref-id-badge {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    color: #4a5568 !important;
    letter-spacing: .02em;
}

.locked-lbl {
    font-size: 13px;
    font-weight: 500;
    color: #fca5a5;
    /*background: rgba(239,68,68,.15);*/
    /*border: 1px solid rgba(239,68,68,.30);*/
    padding: 2px 8px;
    border-radius: 100px;
}

.withheld-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #fcd34d;
    font-size: 10px;
    font-weight: 700;
    background: rgba(251,191,36,.10);
    border: 1px solid rgba(251,191,36,.25);
    padding: 2px 9px;
    border-radius: 100px;
    cursor: pointer;
    text-decoration: none;
    transition: all .14s;
}

    .withheld-btn:hover {
        background: rgba(251,191,36,.20);
    }

.ref-strip-right {
    display: flex;
    align-items: center;
    gap: 6px
}

.emergency-badge {
    font-size: 10px;
    font-weight: 700;
    background: rgba(239,68,68,.15);
    color: #fca5a5;
    border: 1px solid rgba(239,68,68,.30);
    padding: 2px 9px;
    border-radius: 100px;
}

/* ── MAIN ───────────────────────────────────────── */
.ch-main {
    flex: 1;
    padding: 10px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    align-self: stretch
}

/* ── SECTION CARDS ──────────────────────────────── */
.section-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
    overflow: hidden;
}

.section-head {
    background: #4a5568;
    color: whitesmoke;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.section-head-table {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--border)
}

.section-head-title {
    color: rgba(255,255,255,.65);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.section-head svg {
    width: 20px;
    height: 20px;
    color: rgba(255,255,255,.65);
    flex-shrink: 0
}

.section-head-sub {
    background: var(--navy-mid);
    padding: 5px 14px;
}

.section-head-sub-title {
    color: rgba(255,255,255,.90);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* ── HISTORY TABLE ───────────────────────────────── */
.history-wrap {
    overflow-x: auto
}

.history-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px
}

    .history-tbl th {
        color: #4a5568;
        background: whitesmoke;
        font-size: 12px !important;
        font-weight: 600 !important;
        letter-spacing: 0.07em !important;
        text-transform: uppercase !important;
        padding: 8px 16px !important;
        text-align: left !important;
        white-space: nowrap !important;
        border: 1px solid #1a2a42 !important;
    }

    .history-tbl td {
        padding: 8px 10px;
        text-align: center;
        border-bottom: 1px solid var(--cm-gray-100);
        font-weight: 500;
        border: 1px solid #1a2a42 !important;
    }

    .history-tbl tr:last-child td {
        border-bottom: none
    }

    .history-tbl tbody tr:hover {
        background: var(--cm-blue-50)
    }

    .history-tbl td a {
        color: var(--accent);
        font-weight: 700;
        text-decoration: none
    }

        .history-tbl td a:hover {
            color: var(--navy)
        }

/* ── FIELD GRID ─────────────────────────────────── */
.fields-body {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 0
}

.field-row {
    display: grid;
    gap: 6px 10px;
    padding: 7px 0;
    /*border-bottom: 1px solid #edf2fb;*/
}

    .field-row:last-child {
        border-bottom: none
    }

    .field-row.cols-4 {
        grid-template-columns: repeat(4,1fr)
    }

    .field-row.cols-3 {
        grid-template-columns: repeat(3,1fr)
    }

    .field-row.cols-2 {
        grid-template-columns: repeat(2,1fr)
    }

    .field-row.cols-1 {
        grid-template-columns: 1fr
    }

.fc {
    display: flex;
    flex-direction: column;
    gap: 3px
}

    .fc.span2 {
        grid-column: span 2
    }

    .fc.span3 {
        grid-column: span 3
    }

    .fc.span4 {
        grid-column: span 4
    }

.fc-label {
    font-size: 12px;
    font-weight: 600;
    /*color: #4a5568 !important;*/
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.5;
    display: block;
    /*font-family: var(--serif);*/
    color: var(--ink) !important;
}

    .fc-label span, .fc-label label {
        font-size: 12px;
        font-weight: 600;
        color: #4a5568 !important;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    /* Required-field asterisk: bold and vertically centred on the label text */
    .fc-label sup {
        font-size: 14px;
        font-weight: 800;
        color: #ef4444;
        line-height: 1;
        vertical-align: middle;
        position: relative;
        /*top: 0.15em;*/ /* the "*" glyph sits high in the font, this pulls it to the text's middle */
        margin-left: 2px;
    }

    .fc-label .dl-btn {
        text-transform: none;
        font-size: 12px;
        font-weight: 600;
    }

.field label, .field > label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #4a5568 !important;
    display: block;
}

.fc-val {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    /*padding: 5px 10px;*/
    font-size: 13px !important;
    font-weight: 500;
    color: var(--text-dark);
    min-height: 35px;
    /*display: flex;*/
    align-items: center;
    line-height: 1.5;
    flex-wrap: wrap;
    /*gap: 3px;*/
}

    .fc-val span, .fc-val label {
        font-size: 13px !important;
    }

    .fc-val.val-green {
        color: #15803d;
        font-weight: 500;
        background: #f0fdf4;
        border-color: #bbf7d0
    }

    .fc-val.val-cost {
        font-family: var(--sans);
        font-size: 13px;
        font-weight: 500;
        color: var(--success);
        background: #f0fdf4;
        border-color: #bbf7d0;
    }

    .fc-val.mono {
        font-family: 'Sora',monospace;
        font-size: 13px;
        color: var(--navy)
    }

    .fc-val.italic-blue {
        color: var(--info);
        font-weight: 500;
        font-style: italic
    }

    .fc-val.val-blue {
        color: var(--info);
        font-weight: 500;
        background: var(--info-bg);
        border-color: var(--info-bd)
    }

    .fc-val.bare {
        background: none;
        border: none;
        padding: 3px 0;
        min-height: unset
    }

    .fc-val a {
        color: var(--accent);
        font-weight: 500;
        text-decoration: none
    }

        .fc-val a:hover {
            color: var(--navy)
        }

/* status badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 100px;
    letter-spacing: .04em;
    white-space: nowrap;
}

.badge-approved {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-bd)
}

    .badge-approved::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #22c55e;
        flex-shrink: 0
    }

.hid-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: var(--info-bg);
    color: var(--info);
    font-weight: 700;
    font-size: 11px;
    border: 1px solid var(--info-bd)
}

.badge-submitted {
    background: var(--info-bg);
    color: var(--info);
    border: 1px solid var(--info-bd)
}

.badge-rejected {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger-bd)
}

.badge-pending {
    background: var(--warn-bg);
    color: var(--warn);
    border: 1px solid var(--warn-bd)
}

.approved-amt-lg {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 800;
    color: var(--success)
}

/* ── BILLING TABLE ──────────────────────────────── */
.billing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px
}

    .billing-table th {
        background: whitesmoke;
        color: #4a5568;
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: .07em;
        text-transform: uppercase;
        padding: 8px 10px;
        text-align: center;
        border: 1px solid #1a2a42 !important;
    }

        .billing-table th:first-child {
            text-align: left
        }

    .billing-table td {
        padding: 7px 10px;
        border-bottom: 1px solid #edf2fb;
        color: var(--text-mid);
        text-align: center;
        vertical-align: middle;
        border: 1px solid #1a2a42 !important;
    }

        .billing-table td:first-child {
            text-align: left;
            font-weight: 600;
            color: var(--text-dark)
        }

    .billing-table tr:last-child td {
        border-bottom: none
    }

    .billing-table tbody tr:hover {
        background: #f5f8ff
    }

    .billing-table .section-row td {
        background: linear-gradient(90deg,#e8f0ff,#f0f5ff);
        font-weight: 700;
        font-size: 10px;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--navy-mid);
        padding: 5px 10px;
    }

    .billing-table .subtotal-row td {
        background: #f0fdf4;
        font-weight: 700;
        border-top: 1px solid #bbf7d0;
    }

.subtotal-amt {
    color: var(--success);
    font-weight: 800;
    font-family: var(--sans)
}

/* ── ACTION BUTTONS ─────────────────────────────── */
.action-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--navy);
    --bs-btn-border-color: var(--navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--navy-mid);
    --bs-btn-hover-border-color: var(--navy-mid);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--navy-mid);
    --bs-btn-active-border-color: var(--navy-mid);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--navy);
    --bs-btn-disabled-border-color: var(--navy);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--navy);
    color: #fff;
    font-family: inherit;
    /*font-size: 11px;*/
    font-weight: 500;
    padding: 6px 14px;
    border-radius: var(--r-sm);
    border: none;
    cursor: pointer;
    box-shadow: var(--sh-sm);
    transition: opacity .1s;
    white-space: nowrap;
}

    .btn-primary:hover {
        opacity: 1;
        background: var(--navy-mid)
    }

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--navy);
    --bs-btn-border-color: var(--navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--navy-mid);
    --bs-btn-hover-border-color: var(--navy-mid);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--navy-mid);
    --bs-btn-active-border-color: var(--navy-mid);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--navy);
    --bs-btn-disabled-border-color: var(--navy);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    font-family: inherit;
    /*font-size: 11px;*/
    font-weight: 500;
    padding: 6px 14px;
    border-radius: var(--r-sm);
    border: 1px solid var(--navy);
    cursor: pointer;
    box-shadow: var(--sh-sm);
    transition: opacity .1s;
    white-space: nowrap;
}

    .btn-secondary:hover {
        opacity: 1;
        background: var(--cm-blue-50)
    }

.btn-warning {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--cm-orange);
    color: #fff;
    font-family: inherit;
    /*font-size: 11px;*/
    font-weight: 500;
    padding: 6px 14px;
    border-radius: var(--r-sm);
    border: none;
    cursor: pointer;
    box-shadow: var(--sh-sm);
    transition: opacity .1s;
    white-space: nowrap;
}

    .btn-warning:hover {
        opacity: 1;
        background: var(--cm-orange-dark)
    }

.btn-success {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--cm-green);
    color: #fff;
    font-family: inherit;
    /*font-size: 11px;*/
    font-weight: 500;
    padding: 6px 14px;
    border-radius: var(--r-sm);
    border: none;
    cursor: pointer;
    box-shadow: var(--sh-sm);
    transition: opacity .1s;
    white-space: nowrap;
}

    .btn-success:hover {
        opacity: 1;
        background: var(--cm-green-dark)
    }

.btn-link-score {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent);
    /*font-size: 11px;*/
    font-weight: 500;
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid var(--info-bd);
    border-radius: var(--r-sm);
    background: var(--info-bg);
    transition: all .14s;
    white-space: nowrap;
}

    .btn-link-score:hover {
        background: var(--accent);
        color: #fff;
        border-color: var(--accent)
    }

/* Aspect form controls matching ASP rendering */
.asp-textbox {
    box-sizing: border-box;
    width: 100%;
    height: var(--ctl-h);
    padding: 0 12px;
    border: 1px solid var(--ctl-line);
    border-radius: 6px;
    font-family: var(--sans);
    font-size: 1.2rem;
    color: #1e293b;
    background: #fff;
    transition: border-color .14s, box-shadow .14s;
}

    .asp-textbox:focus {
    outline: none;
    border-color: var(--ctl-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15)
    }

    .asp-textbox::placeholder { color: #94a3b8; }

    textarea.asp-textbox {
    height: auto;
    min-height: 72px;
    padding: 10px 12px;
    line-height: 1.45;
    resize: vertical;
}

    .asp-textbox[readonly],
.asp-textbox:disabled {
    background: var(--ctl-ro-bg);
    border-color: #e2e8f0;
    color: #475569;
    cursor: default;
}

.watermarked {
    box-sizing: border-box;
    width: 100%;
    height: var(--ctl-h);
    padding: 0 12px;
    border: 1px solid var(--ctl-line);
    border-radius: 6px;
    font-family: var(--sans);
    font-size: 13.5px;
    color: #94a3b8;
    background: #fff;
    transition: border-color .14s, box-shadow .14s;
}

    .watermarked:focus {
        outline: none;
        border-color: var(--ctl-accent);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .15)
    }

.asp-textarea {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--cm-gray-300);
    border-radius: 5px;
    font-family: var(--sans);
    font-size: 1.2rem;
    color: var(--text-dark);
    background: #fff;
    transition: border-color .14s;
    min-height: 35px;
}

    .asp-textarea:focus {
        outline: none;
        border-color: var(--navy);
        box-shadow: 0 0 0 3px var(--cm-blue-100)
    }

.asp-select {
    box-sizing: border-box;
    height: var(--ctl-h);
    max-width: 100%;
    padding: 0 34px 0 12px;
    border: 1px solid var(--ctl-line);
    border-radius: 6px;
    font-family: var(--sans);
    font-size: 1.2rem;
    color: #1e293b;
    cursor: pointer;
    transition: border-color .14s, box-shadow .14s;
    -webkit-appearance: none;
    appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
}

    .asp-select:focus {
    outline: none;
    border-color: var(--ctl-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15)
    }

    .asp-select:disabled {
    background-color: var(--ctl-ro-bg);
    color: #64748b;
    cursor: not-allowed;
}

    select.asp-select[multiple],
select.asp-select[size] {
    height: auto;
    padding: 6px 8px;
    background-image: none;
}

    /* Read-only value (asp:Label) shown like a filled box: Payer, Payer Zone, approved details… */

.asp-label {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--ctl-h);
    padding: 0 12px;
    font-size: 1.2rem;
    color: #1e293b;
    background: var(--ctl-ro-bg);
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    word-break: break-word;
}

    .asp-label.asp-label-multi {
        align-items: flex-start;
        min-height: 72px;
        padding: 10px 12px;
        white-space: pre-wrap;
    }

    .asp-label:empty::before { content: "\2014"; color: #94a3b8; }

/*.asp-textarea {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--cm-gray-300);
    border-radius: 5px;
    font-family: var(--sans);
    font-size: 1.2rem;
    color: var(--text-dark);
    background: #fff;
    resize: vertical;
    transition: border-color .14s;
}

    .asp-textarea:focus {
        outline: none;
        border-color: var(--accent)
    }*/

.form-label {
    font-size: 1rem;
    font-weight: 600;
    color: #4a5568 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 3px;
    line-height: 1.3;
}

    .form-label span, .form-label label {
        font-size: 1rem;
        font-weight: 600;
        color: #4a5568 !important;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    .form-label sup {
        font-size: 1rem;
        font-weight: 700;
        color: #ef4444
    }

.diff-amount {
    font-family: var(--sans);
    font-weight: 800;
    font-size: 13px;
    color: var(--success)
}

/* upload grids */
.upload-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px
}

    .upload-tbl th {
        background: whitesmoke;
        color: #4a5568;
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: .07em;
        text-transform: uppercase;
        padding: 7px 10px;
        text-align: left;
        border: 1px solid #1a2a42 !important;
    }

    .upload-tbl td {
        padding: 7px 10px;
        border-bottom: 1px solid var(--cm-gray-100);
        color: var(--text-mid);
        border: 1px solid #1a2a42 !important;
    }

    .upload-tbl tr:last-child td {
        border-bottom: none
    }

    .upload-tbl tbody tr:hover {
        background: var(--cm-blue-50)
    }

.dl-btn {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5c636a;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-disabled-opacity: .65;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 8px;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: var(--bs-btn-bg);
    border: 1px solid var(--bs-btn-border-color);
    border-radius: 4px;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

    .dl-btn:hover {
        color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
        text-decoration: none;
    }

    .dl-btn:focus-visible {
        outline: 0;
        color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
        box-shadow: 0 0 0 3px rgba(var(--bs-btn-focus-shadow-rgb), .5);
    }

    .dl-btn:active {
        color: var(--bs-btn-active-color);
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);
    }

    .dl-btn:disabled,
    .dl-btn.disabled,
    .dl-btn[disabled] {
        pointer-events: none;
        opacity: var(--bs-btn-disabled-opacity);
    }


/* Cap details table */
.cap-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 6px 10px;
    padding: 8px 12px;
}

/* CAP/Approver sections */
.approver-section {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.form-row {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px 10px;
    align-items: start
}

    .form-row.cols-2 {
        grid-template-columns: repeat(2,1fr)
    }

    .form-row.cols-3 {
        grid-template-columns: repeat(3,1fr)
    }

.form-col {
    display: flex;
    flex-direction: column;
    gap: 3px
}

    .form-col.span2 {
        grid-column: span 2
    }

    .form-col.span3 {
        grid-column: span 3
    }

    .form-col.span4 {
        grid-column: span 4
    }

/* Modal overlays (keep original modal popup extender styles working) */
.modalBackground {
    background: rgba(7,26,82,.50) !important;
    backdrop-filter: blur(3px)
}

.modalPopup {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-md) !important;
    box-shadow: 0 10px 40px rgba(7,26,82,.25) !important;
    padding: 0 !important;
    overflow: hidden;
}

.modal-head {
    background: var(--navy);
    padding: 10px 14px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .04em;
}

.modal-body {
    padding: 14px
}

.modal-footer {
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: center;
    gap: 8px;
}

/* chunk/notes */
.info-note {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--info-bg);
    border: 1px solid var(--info-bd);
    border-radius: var(--r-sm);
    padding: 6px 10px;
    font-size: 10.5px;
    color: var(--info);
    font-weight: 600;
}

/* CAP details grid */
.cap-card {
    background: #f4f7fd;
    border: 1px solid #dce6f5;
    border-radius: 6px;
    padding: 7px 10px;
}

.cap-card-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 2px
}

.cap-card-val {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dark)
}

/* Sub-section divider */
.subsection-divider {
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 5px 14px;
    font-size: 10px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Package table */
.pkg-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px
}

    .pkg-tbl th {
        /*background: var(--navy);*/
        color: var(--navy);
        font-size: 1.1rem;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        padding: 7px 10px;
        text-align: left;
    }

    .pkg-tbl td {
        padding: 7px 10px;
        border-bottom: 1px solid var(--cm-gray-100);
        color: var(--text-mid)
    }

    .pkg-tbl tr:last-child td {
        border-bottom: none
    }

    .pkg-tbl tfoot td {
        background: #f0fdf4;
        font-weight: 700;
        color: var(--success);
        border-top: 1px solid #bbf7d0;
    }

/* Inline msg link area */
.msg-link-area {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
}

    .msg-link-area a {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        color: var(--accent);
        font-size: 11px;
        font-weight: 700;
        text-decoration: none;
        padding: 4px 10px;
        border: 1px solid var(--info-bd);
        border-radius: var(--r-sm);
        background: var(--info-bg);
        transition: all .14s;
    }

        .msg-link-area a:hover {
            background: var(--accent);
            color: #fff
        }

/* Download all buttons bar */
.download-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: #f8faff;
}

/* Field visit/MandM sub-section info */
.field-info-row {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 6px 10px;
    padding: 7px 0;
    border-bottom: 1px solid #edf2fb;
}

    .field-info-row:last-child {
        border-bottom: none
    }

/* validation link */
.validation-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent);
    font-size: 10.5px;
    font-weight: 700;
    text-decoration: none;
    margin-left: 6px;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(6px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* "backwards" (not "both"): once the fade-in ends no transform is left on the card.
   A leftover transform would pin any position:fixed child (e.g. the loader) to the card's corner. */
.section-card, .action-bar {
    animation: fadeUp .22s ease backwards
}

/* hide legacy grid styling that conflicts */
table.content, table.contents {
    border: none !important;
    box-shadow: none !important
}

/*.gridheader, .gridheader1, .headerContent, .headerContent2, .headerContent1 {
    display: none !important
}*/

.content, .contents {
    padding: 0 !important;
    border: none !important
}

.contentField, .contentBack, .bluecontentbold, .greencontent, .formbutton {
    display: none !important
}
/* breadcrumb strip */
.nav-crumb {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 14px;
}

.nav-crumb-lbl {
    color: #4a5568 !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase
}

.nav-crumb-val {
    color: #4a5568 !important;
    font-size: 12px;
    font-weight: 600
}

ref-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: linear-gradient(90deg, #f0f5ff, #e8f0ff);
    border-bottom: 1px solid var(--border);
}

.ref-id {
    font-family: var(--sans);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--navy)
}

.ref-banner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
    overflow: hidden
}

/* ── REFINED STYLES FOR TPADETAILS & FORM INPUTS ──── */
.strip-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    /*background: rgba(37,99,235,.10);
    border: 1px solid rgba(37,99,235,.25);*/
    padding: 2px 9px;
    border-radius: 100px;
    cursor: pointer;
    text-decoration: none;
    transition: all .14s;
}

    .strip-link:hover {
        /*background: rgba(37,99,235,.25);*/
        color: var(--navy-mid);
    }

.fc-val.val-strong {
    font-weight: 700;
    color: #000000;
}

.fc-val.val-danger {
    font-weight: 700;
    color: var(--danger);
    background: var(--danger-bg);
    border-color: var(--danger-bd);
}

.fc-val.val-warn {
    font-weight: 700;
    color: var(--warn);
    background: var(--warn-bg);
    border-color: var(--warn-bd);
}

.fc-val.val-info {
    font-weight: 600;
    color: var(--info);
    background: var(--info-bg);
    border-color: var(--info-bd);
}

.msg-label {
    display: block;
    text-align: center;
    padding: 8px;
    font-weight: 700;
    font-size: 1.2rem;
}

.fields-body input[type="text"],
.fields-body textarea,
.fields-body select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #b0c4e8;
    border-radius: 5px;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text-dark);
    background: #fff;
    transition: border-color .14s;
    min-height: 35px;
}

    .fields-body input[type="text"]:focus,
    .fields-body textarea:focus,
    .fields-body select:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 2px rgba(37,99,235,.12);
    }

.fields-body textarea {
    resize: vertical;
}

.fields-body table {
    border: none !important;
    box-shadow: none !important;
}

    .fields-body table td {
        border: none !important;
        padding: 2px 6px !important;
        font-size: 11px;
    }

.emergency-strip {
    display: none;
}

.d-none {
    display: none !important;
}

.wrap {
    font-family: var(--sans);
    background: var(--bg);
    min-height: 500px;
    overflow: hidden;
}

/* HEADER — matches the login page header (cream strip, coloured top border) */
.header {
    background: radial-gradient(60% 140% at 92% 0%, rgba(46, 107, 181, .30), transparent 60%), var(--nh-bg);
    color: #fff;
    font-family: var(--nh-font);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px; /* 4px colour band + 60px bar */
    border-top: none;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 6px 20px -12px rgba(0, 0, 0, .55);
    position: relative;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.menu-level-1,
.menu-level-1 ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-item > a:hover,
.menu-item:hover > a {
    background: var(--navy-mid);
    color: #ffffff;
}

.menu-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid rgba(255,255,255,0.45);
    margin-left: 8px;
    flex-shrink: 0;
    transition: border-left-color 0.15s, transform 0.2s;
}

.menu-item:hover > a .menu-arrow {
    border-left-color: #fff;
}

.menu-level-1 > .menu-item {
    position: relative;
}

.submenu > .menu-item {
    position: relative;
}

.submenu .menu-item > a:hover,
.submenu .menu-item:hover > a {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.menu-level-2 {
    border-left: 2px solid var(--cm-blue-300);
}

.menu-level-3 {
    border-left: 2px solid var(--cm-orange);
}

.menu-level-4 {
    border-left: 2px solid var(--cm-green);
}

.menu-btn {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    color: #fff;
    font-size: 18px;
    line-height: 1;
}

    .menu-btn:hover {
        background: rgba(255, 255, 255, .16);
        color: #fff;
        border-color: rgba(255, 255, 255, .28);
    }

    .menu-btn span {
        display: block;
        width: 16px;
        height: 1.5px;
        background: currentColor;
        box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
    }

.emblem {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.header-title {
    color: #fff;
    font-family: var(--nh-font);
    font-size: clamp(16px, 1.9vw, 21px);
    font-weight: 700;
    line-height: 1.2;
    min-width: 0;
    letter-spacing: -.01em;
}

    .header-title small {
        display: block;
        font-family: var(--nh-font);
        font-size: 12px;
        font-weight: 500;
        color: var(--nh-on-dark);
        letter-spacing: normal;
        text-transform: none;
        margin-bottom: 3px;
    }

.header-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.user-info {
    text-align: right;
    color: #D2DFF7;
    font-size: 12px;
    line-height: 1.6;
    font-family: var(--nh-font);
}

    .user-info strong,
    .user-info .username {
        color: #fff;
        font-weight: 600;
    }

.role-badge {
    display: inline-block;
    background: var(--nh-gold);
    color: var(--nh-bg);
    font-size: 11px;
    font-weight: 700;
    padding: 0px 7px;
    border-radius: 100px;
    border: none;
    letter-spacing: 0.04em;
}

.logout-btn {
    background: linear-gradient(180deg, #e53935 0%, #b71c1c 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 0 #7f0000, 0 4px 12px rgba(183,28,28,0.4);
    transition: transform 0.12s, box-shadow 0.12s;
    transform: translateY(-1px);
}

    .logout-btn:hover {
        transform: translateY(0px);
        box-shadow: 0 1px 0 #7f0000, 0 2px 8px rgba(183,28,28,0.4);
    }

    .logout-btn:active {
        transform: translateY(1px);
        box-shadow: 0 0px 0 #7f0000;
    }

.avatar {
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,0.18);
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
}

/* PAGE BODY */

/* PAGE HEADING */
/* Page title — bar in the same style as .section-head */
.page-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 10px 15px;
    background: #4a5568;
    color: rgba(255, 255, 255, .92);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
    line-height: 1.3;
    border-radius: 6px;
    position: relative;
}

    /* icon in front of the title (like the svg in .section-head) */
    .page-title::before {
        content: '';
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.65)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h4'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
    }

    /* the old blue underline is no longer used */
    .page-title::after {
        content: none;
    }

    /* links / labels inside the bar (e.g. Ref ID link) stay readable */
    .page-title a,
    .page-title span {
        color: inherit;
    }

/* When .page-title is a table cell (old form-table headers), keep it a cell */
td.page-title,
th.page-title {
    display: table-cell;
    border-radius: 0;
}

    td.page-title::before,
    th.page-title::before {
        display: inline-block;
        vertical-align: middle;
        margin-right: 8px;
    }

@media (max-width: 575.98px) {
    .page-title {
        padding: 8px 12px;
        font-size: 1.2rem;
    }
}

/* FILTER BAR */
.filter-card {
    background: #FFFEFA;
    border-radius: var(--r-md);
    padding: 17px 22px 16px;
    box-shadow: var(--sh-sm);
    border: 1px solid var(--border);
    margin-top: 5px;
}

.filter-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}

.filter-group label, .filter-group span[id] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-mid);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.filter-group input, .filter-group select {
    width: 100%;
    height: 30px;
    background: #fff;
    border: 1px solid var(--cm-gray-300);
    border-radius: 5px;
    padding: 0 12px;
    font-size: 13px;
    color: var(--text-dark);
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .filter-group input:focus, .filter-group select:focus {
        border-color: var(--navy);
        box-shadow: 0 0 0 3px var(--cm-blue-100);
    }

/* ACTION BUTTONS */
.btn-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── PAGE TOOLBAR: search box + buttons on one line (e.g. ManageUsers) ── */
.page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.toolbar-search {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 420px;
    max-width: 680px;
}

    .toolbar-search .toolbar-label {
        margin: 0;
        white-space: nowrap;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-mid);
    }

    .toolbar-search .asp-textbox {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

@media (max-width: 575.98px) {
    .toolbar-search {
        flex-wrap: wrap;
    }

        .toolbar-search .asp-textbox {
            flex-basis: 100%;
        }
}

/* Server message under a toolbar; hidden while empty */
.page-msg {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--navy);
}

    .page-msg:empty {
        display: none;
    }

/* ── Action buttons: Bootstrap 5 .btn pattern ──
   Each colour class only sets the --bs-btn-* variables; .btn3d uses them.
   Icons are SVG backgrounds, so they also work on <input type="submit"> (asp:Button),
   where ::before cannot be used. Swap an icon by changing --btn-icon / --btn-icon-hover. */
.btn3d {
    --bs-btn-padding-x: 14px;
    --bs-btn-padding-y: 6px;
    --bs-btn-font-size: 14px;
    --bs-btn-font-weight: 500;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-width: 1px;
    --bs-btn-border-radius: 6px;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
    --bs-btn-focus-box-shadow: 0 0 0 4px rgba(var(--bs-btn-focus-shadow-rgb), .5);
    --bs-btn-disabled-opacity: .65;
    --btn-icon-size: 16px;
    --btn-icon-gap: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x) var(--bs-btn-padding-y) calc(var(--bs-btn-padding-x) + var(--btn-icon-size) + var(--btn-icon-gap));
    font-family: var(--sans);
    font-size: var(--bs-btn-font-size) !important;
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    height: auto;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    background-image: var(--btn-icon);
    background-repeat: no-repeat;
    background-position: var(--bs-btn-padding-x) center;
    background-size: var(--btn-icon-size) var(--btn-icon-size);
    box-shadow: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

    .btn3d:hover {
        color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
        background-image: var(--btn-icon-hover, var(--btn-icon));
    }

    .btn3d:focus-visible {
        outline: 0;
        color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
        background-image: var(--btn-icon-hover, var(--btn-icon));
        box-shadow: var(--bs-btn-focus-box-shadow);
    }

    .btn3d:active {
        color: var(--bs-btn-active-color);
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);
        background-image: var(--btn-icon-hover, var(--btn-icon));
    }

    .btn3d:disabled,
    .btn3d.disabled,
    .btn3d[disabled] {
        pointer-events: none;
        opacity: var(--bs-btn-disabled-opacity);
    }

/* Unsubmitted — grey outline, document + pencil */
.btn-unsubmitted {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cm-gray-600);
    --bs-btn-border-color: var(--cm-gray-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cm-gray-700);
    --bs-btn-hover-border-color: var(--cm-gray-700);
    --bs-btn-focus-shadow-rgb: 15, 118, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cm-gray-800);
    --bs-btn-active-border-color: var(--cm-gray-800);
    --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h5'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M19 8v3'/%3E%3Cpath d='M17.5 14.5l2 2L15 21h-2v-2z'/%3E%3C/svg%3E");
    --btn-icon-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h5'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M19 8v3'/%3E%3Cpath d='M17.5 14.5l2 2L15 21h-2v-2z'/%3E%3C/svg%3E");
}

/* Submitted — solid teal, paper plane */
.btn-submitted {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0f766e;
    --bs-btn-border-color: #0f766e;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #115e59;
    --bs-btn-hover-border-color: #115e59;
    --bs-btn-focus-shadow-rgb: 15, 118, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #134e4a;
    --bs-btn-active-border-color: #134e4a;
    --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3L10 14'/%3E%3Cpath d='M21 3l-7 18-4-7-7-4z'/%3E%3C/svg%3E");
}

/* Pending — solid amber with dark text, hourglass */
.btn-pending {
    --bs-btn-color: #1f2937;
    --bs-btn-bg: #f59e0b;
    --bs-btn-border-color: #f59e0b;
    --bs-btn-hover-color: #1f2937;
    --bs-btn-hover-bg: #d97706;
    --bs-btn-hover-border-color: #d97706;
    --bs-btn-focus-shadow-rgb: 245, 158, 11;
    --bs-btn-active-color: #1f2937;
    --bs-btn-active-bg: #b45309;
    --bs-btn-active-border-color: #b45309;
    --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12'/%3E%3Cpath d='M6 21h12'/%3E%3Cpath d='M7 3c0 5 5 6 5 9s-5 4-5 9'/%3E%3Cpath d='M17 3c0 5-5 6-5 9s5 4 5 9'/%3E%3C/svg%3E");
}

/* Unprocessed — solid orange, clock */
.btn-unprocessed {
    --bs-btn-color: #fff;
    --bs-btn-bg: #c2410c;
    --bs-btn-border-color: #c2410c;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #9a3412;
    --bs-btn-hover-border-color: #9a3412;
    --bs-btn-focus-shadow-rgb: 194, 65, 12;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #7c2d12;
    --bs-btn-active-border-color: #7c2d12;
    --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

/* Processed — solid green, check circle */
.btn-processed {
    --bs-btn-color: #fff;
    --bs-btn-bg: #15803d;
    --bs-btn-border-color: #15803d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #166534;
    --bs-btn-hover-border-color: #166534;
    --bs-btn-focus-shadow-rgb: 21, 128, 61;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #14532d;
    --bs-btn-active-border-color: #14532d;
    --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9.5'/%3E%3C/svg%3E");
}

/* All Transactions — navy outline, list */
.btn-alltransaction {
    --bs-btn-color: var(--navy);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--navy);
    --bs-btn-hover-border-color: var(--navy);
    --bs-btn-focus-shadow-rgb: 30, 58, 138;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--navy-mid);
    --bs-btn-active-border-color: var(--navy-mid);
    --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e3a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11'/%3E%3Cpath d='M9 12h11'/%3E%3Cpath d='M9 18h11'/%3E%3Cpath d='M4 6h.01'/%3E%3Cpath d='M4 12h.01'/%3E%3Cpath d='M4 18h.01'/%3E%3C/svg%3E");
    --btn-icon-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11'/%3E%3Cpath d='M9 12h11'/%3E%3Cpath d='M9 18h11'/%3E%3Cpath d='M4 6h.01'/%3E%3Cpath d='M4 12h.01'/%3E%3Cpath d='M4 18h.01'/%3E%3C/svg%3E");
}

/* Search — solid navy (primary), magnifier */
.btn-search {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--navy);
    --bs-btn-border-color: var(--navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--navy-mid);
    --bs-btn-hover-border-color: var(--navy-mid);
    --bs-btn-focus-shadow-rgb: 30, 58, 138;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cm-blue-700);
    --bs-btn-active-border-color: var(--cm-blue-700);
    --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
}

/* Verify — solid violet, shield + check */
.btn-verify {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6d28d9;
    --bs-btn-border-color: #6d28d9;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5b21b6;
    --bs-btn-hover-border-color: #5b21b6;
    --bs-btn-focus-shadow-rgb: 109, 40, 217;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4c1d95;
    --bs-btn-active-border-color: #4c1d95;
    --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8.3-8 9-4.6-.7-8-4.5-8-9V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-4.5'/%3E%3C/svg%3E");
}

/* Reset — red outline, rotate-left */
.btn-reset {
    --bs-btn-color: #b91c1c;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #dc2626;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #dc2626;
    --bs-btn-hover-border-color: #dc2626;
    --bs-btn-focus-shadow-rgb: 220, 38, 38;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b91c1c;
    --bs-btn-active-border-color: #b91c1c;
    --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v5h5'/%3E%3C/svg%3E");
    --btn-icon-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v5h5'/%3E%3C/svg%3E");
}


/* Download — navy outline, download-arrow icon */
.btn-download {
    --bs-btn-color: var(--navy);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--navy);
    --bs-btn-hover-border-color: var(--navy);
    --bs-btn-focus-shadow-rgb: 30, 58, 138;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--navy-mid);
    --bs-btn-active-border-color: var(--navy-mid);
    --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e3a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E");
    --btn-icon-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E");
}
/* Add — solid green, plus icon */
/* Add New — same style as Back / Next: blue outline on white, fills blue with white text on hover */
.btn-add {
    --bs-btn-color: var(--navy);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--navy);
    --bs-btn-hover-border-color: var(--navy);
    --bs-btn-focus-shadow-rgb: 30, 58, 138;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--navy-mid);
    --bs-btn-active-border-color: var(--navy-mid);
    --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e3a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21a7 7 0 0 1 14 0'/%3E%3Cpath d='M19 8v6'/%3E%3Cpath d='M16 11h6'/%3E%3C/svg%3E");
    --btn-icon-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21a7 7 0 0 1 14 0'/%3E%3Cpath d='M19 8v6'/%3E%3Cpath d='M16 11h6'/%3E%3C/svg%3E");
}
/* Back — navy outline, arrow-left icon (fills navy on hover) */
.btn-back {
    --bs-btn-color: var(--navy);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--navy);
    --bs-btn-hover-border-color: var(--navy);
    --bs-btn-focus-shadow-rgb: 30, 58, 138;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--navy-mid);
    --bs-btn-active-border-color: var(--navy-mid);
    --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e3a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M12 19l-7-7 7-7'/%3E%3C/svg%3E");
    --btn-icon-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M12 19l-7-7 7-7'/%3E%3C/svg%3E");
}

/* Next — navy outline, arrow-right icon AFTER the text (fills navy on hover) */
.btn-next {
    --bs-btn-color: var(--navy);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--navy);
    --bs-btn-hover-border-color: var(--navy);
    --bs-btn-focus-shadow-rgb: 30, 58, 138;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--navy-mid);
    --bs-btn-active-border-color: var(--navy-mid);
    --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e3a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5l7 7-7 7'/%3E%3C/svg%3E");
    --btn-icon-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5l7 7-7 7'/%3E%3C/svg%3E");
}
/* View — same style as Back / Next / Add New: blue outline on white, fills blue with white text on hover */
.btn-view {
    --bs-btn-color: var(--navy);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--navy);
    --bs-btn-hover-border-color: var(--navy);
    --bs-btn-focus-shadow-rgb: 30, 58, 138;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--navy-mid);
    --bs-btn-active-border-color: var(--navy-mid);
    --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e3a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    --btn-icon-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
/* Upload — same style as Back / Next / Add New / View: blue outline on white, fills blue with white text on hover */
.btn-upload {
    --bs-btn-color: var(--navy);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--navy);
    --bs-btn-hover-border-color: var(--navy);
    --bs-btn-focus-shadow-rgb: 30, 58, 138;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--navy-mid);
    --bs-btn-active-border-color: var(--navy-mid);
    --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e3a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4'/%3E%3Cpath d='M7 9l5-5 5 5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E");
    --btn-icon-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4'/%3E%3Cpath d='M7 9l5-5 5 5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E");
}
/* .btn3d puts the icon on the left; for Next move it to the right */
.btn3d.btn-next {
    padding: var(--bs-btn-padding-y) calc(var(--bs-btn-padding-x) + var(--btn-icon-size) + var(--btn-icon-gap)) var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    background-position: right var(--bs-btn-padding-x) center;
}


/* TABLE */
.table-card {
    background: #fff;
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
    border: 1px solid var(--border);
    overflow: hidden;
}

.table-responsive {
    overflow-x: auto;
}

.custom-grid {
    width: 100%;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    font-size: 12px;
}

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

.custom-grid .gridheader1 th,
.custom-grid th {
    /*background: linear-gradient(135deg, #0a2150 0%, #1a3e7e 100%);*/
    color: rgba(255,255,255,0.92);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 14px 16px;
    text-align: left;
    white-space: nowrap;
    border: none;
}

.custom-grid tr {
    border-bottom: 1px solid #e9f0fb;
    transition: background 0.15s;
}

    .custom-grid tr:last-child {
        border-bottom: none;
    }

    .custom-grid tr.alternating td,
    .custom-grid tr[style*="ghostwhite"] td {
        background: #f8fbff;
    }

.custom-grid td {
    padding: 0px 0px;
    color: #1a2a42;
    vertical-align: middle;
    border: none;
}

.custom-grid a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    font-size: 12.5px;
    transition: color 0.15s;
}

    .custom-grid a:hover {
        color: var(--navy);
        text-decoration: underline;
    }

.custom-grid .pagination-ys td {
    padding: 10px 16px;
    background: var(--bg);
    border-top: 1px solid var(--border);
}

.custom-grid .pagination-ys a,
.custom-grid .pagination-ys span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #d0ddf0;
    background: #fff;
    border-radius: 6px;
    font-size: 1.2rem;
    font-weight: 500;
    color: #1a2a42;
    text-decoration: none;
    margin: 0 2px;
    transition: background 0.15s;
}

.custom-grid .pagination-ys span {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}

.custom-grid .pagination-ys a:hover {
    background: var(--cm-blue-50);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}



th {
    /*color: rgba(255,255,255,0.92);*/
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 14px 16px;
    text-align: left;
    white-space: nowrap;
}

    th:last-child {
        text-align: right;
    }

tbody tr {
    border-bottom: 1px solid #e9f0fb;
    transition: background 0.15s;
}

    tbody tr:last-child {
        border-bottom: none;
    }

    tbody tr:hover {
        background: #f0f7ff;
    }

    tbody tr:nth-child(even) {
        background: #f8fbff;
    }

        tbody tr:nth-child(even):hover {
            background: #eaf4ff;
        }

td {
    padding: 13px 16px;
    color: #1a2a42;
    vertical-align: middle;
}

/*    td:last-child {
        text-align: right;
    }*/

.ref-link {
    color: #1565c0;
    font-weight: 600;
    text-decoration: none;
    font-size: 12.5px;
    transition: color 0.15s;
}

    .ref-link:hover {
        color: #0a3e8c;
        text-decoration: underline;
    }

.patient-name {
    font-weight: 500;
    color: #0a2150;
}

.payer-chip {
    display: inline-block;
    background: #e8f4fd;
    color: #1565c0;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 100px;
    border: 1px solid #b3d4f5;
    letter-spacing: 0.04em;
}

.time-cell {
    color: #5b6e8c;
    font-size: 12px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 100px;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.status-approved {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

    .status-approved::before {
        content: '';
        width: 6px;
        height: 6px;
        background: #43a047;
        border-radius: 50%;
        display: block;
    }

.status-needinfo {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
}

    .status-needinfo::before {
        content: '';
        width: 6px;
        height: 6px;
        background: #fb8c00;
        border-radius: 50%;
        display: block;
    }

.status-submitted {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
}

    .status-submitted::before {
        content: '';
        width: 6px;
        height: 6px;
        background: #1e88e5;
        border-radius: 50%;
        display: block;
    }

.amount {
    font-weight: 600;
    color: #1b5e20;
    font-size: 13px;
}

.table-footer {
    padding: 0px 1px;
    background: #f5f8fd;
    font-size: 12px;
    color: #5b6e8c;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pagination {
    display: flex;
    gap: 1px;
}

.pg-btn {
    width: 28px;
    cursor: pointer;
}

    .pg-btn.active {
        background: #1565c0;
        color: #fff;
        border-color: #1565c0;
    }

    .pg-btn:hover:not(.active) {
        background: #eaf4ff;
    }

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--sans);
    background: #f0f4f8;
    color: var(--text-dark);
    min-height: 100vh;
}

/* TOP NAV */
.topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(135deg, #0f2557 0%, #1a3a7c 60%, #1e56db 100%);
    display: flex;
    align-items: center;
    padding: 0 16px;
    z-index: 9000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    gap: 14px;
    border-radius: 18px 18px 0 0;
}

.btn-hamburger {
    background: rgba(255,255,255,0.10);
    border: 1.5px solid rgba(255,255,255,0.25);
    border-radius: 6px;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 6px 10px;
    transition: background 0.15s;
    flex-shrink: 0;
}

    .btn-hamburger:hover {
        background: rgba(255,255,255,0.22);
    }

.topnav-icon {
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.30);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

    .topnav-icon img {
        height: 26px;
        width: 26px;
        object-fit: contain;
        filter: brightness(0) invert(1);
    }

.topnav-title {
    flex: 1;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.01em;
}

    .topnav-title small {
        display: block;
        font-size: 11px;
        font-weight: 400;
        color: rgba(255,255,255,0.72);
        letter-spacing: 0.02em;
    }

.topnav-user {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
}

    .topnav-user .welcome-block {
        text-align: right;
        line-height: 1.4;
    }

    .topnav-user .username {
        font-weight: 700;
        color: #fff;
        font-size: 13px;
    }

    .topnav-user .role-badge {
        display: inline-block;
        background: rgba(99,179,237,0.25);
        border: 1px solid rgba(99,179,237,0.50);
        color: #90cdf4;
        font-size: 10px;
        font-weight: 600;
        border-radius: 999px;
        padding: 1px 8px;
        letter-spacing: 0.03em;
    }

    .topnav-user .hosp-label {
        font-size: 11px;
        color: rgba(255,255,255,0.65);
    }

.avatar-menu {
    position: relative;
    flex-shrink: 0;
}

.topnav-avatar {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--nh-emerald), var(--nh-teal-d));
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--nh-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
}

.avatar-menu:hover .topnav-avatar,
.avatar-menu:focus-within .topnav-avatar {
    background: var(--nh-teal-d);
    box-shadow: 0 0 0 3px var(--nh-gold);
}

.avatar-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 160px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.18);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 9100;
}

.avatar-menu:hover .avatar-dropdown,
.avatar-menu:focus-within .avatar-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.avatar-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 12px;
    width: 12px;
    height: 12px;
    background: #fff;
    transform: rotate(45deg);
    border-radius: 2px;
    box-shadow: -2px -2px 5px rgba(0,0,0,0.06);
}

.avatar-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    text-decoration: none;
    transition: background 0.12s;
    position: relative;
    z-index: 1;
}

    .avatar-dropdown a:hover {
        background: #f1f5f9;
    }

    .avatar-dropdown a.dropdown-logout {
        color: #dc2626;
        border-top: 1px solid #f1f5f9;
    }

        .avatar-dropdown a.dropdown-logout:hover {
            background: #fff5f5;
        }

.dropdown-icon {
    font-size: 15px;
    opacity: 0.75;
}

/* DIM OVERLAY */
#sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.40);
    z-index: 9998;
    cursor: pointer;
}

    #sidebar-overlay.visible {
        display: block;
    }

/* SIDEBAR */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 256px;
    height: 100vh;
    background: var(--nh-bg-2);
    border-top: none;
    z-index: 9999;
    overflow-y: auto;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0,0,0,0.30);
    display: flex;
    flex-direction: column;
}

    .sidebar.hidden {
        transform: translateX(-100%);
    }

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    min-height: 60px;
    flex-shrink: 0;
}

.sidebar-logo-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .sidebar-logo-wrapper img {
        height: 32px;
        max-width: 130px;
        object-fit: contain;
        filter: brightness(0) invert(1);
    }

.sidebar-logo-text {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.btn-sidebar-close {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.20);
    color: rgba(255,255,255,0.85);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 5px;
    transition: background 0.15s;
}

    .btn-sidebar-close:hover {
        background: rgba(255,255,255,0.22);
        color: #fff;
    }

.sidebar-content {
    padding: 8px 0 24px;
    flex: 1;
}

.sidebar-section-label {
    padding: 10px 20px 4px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cm-blue-300);
}

.sidebar-content ul#ddtabs2 {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .sidebar-content ul#ddtabs2 li a:hover,
    .sidebar-content ul#ddtabs2 li a:focus {
        background: var(--cm-orange);
        color: #fff;
        border-left-color: var(--lp-yellow);
    }

.main-wrapper {
    margin-top: 60px;
    min-height: calc(100vh - 60px);
    background: #f0f4f8;
}

.news-strip {
    background: #1a3a7c;
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    padding: 0;
    overflow: hidden;
}

    .news-strip table {
        width: 100%;
    }

    .news-strip td {
        padding: 4px 8px;
    }

body.sidebar-open {
    overflow: hidden;
}

.contents {
    width: 100%;
}

.footershade {
    height: 4px;
    background: linear-gradient(90deg,#1a3a7c,#1e56db,#1a3a7c);
}

.contentNews {
    background: var(--navy);
}

.bluecontent {
    color: #fff;
    font-weight: 600;
}

.glowingtabs {
    background: transparent;
}

.hdr {
    background: #0D2149;
    border-bottom: 2px solid #1E3A7A;
    padding: 0 24px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.hdr-logos {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-circle {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    border: none;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 0 3px var(--nh-gold);
}

    .logo-circle img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: contain;
    }

    .logo-circle i {
        color: var(--navy);
        font-size: 20px;
    }

.hdr-title {
    flex: 1;
    text-align: center;
    color: #E8F0FF;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

    .hdr-title span {
        color: #7CB9FF;
    }

.hdr-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lang-badge {
    background: #122A5E;
    border: 1px solid #2A5BC7;
    color: #93BBEA;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.4px;
    cursor: pointer;
}

.custom-grid .grid-row td {
    padding: 13px 16px;
    color: #1a2a42;
    vertical-align: middle;
    border-bottom: 1px solid #e9f0fb !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

.custom-grid .alt-row td {
    padding: 13px 16px;
    color: #1a2a42;
    vertical-align: middle;
    background: #f8fbff !important;
    border-bottom: 1px solid #e9f0fb !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

.custom-grid tr:hover td {
    background: #f0f7ff !important;
}

.text-right {
    text-align: right !important;
}

.text-left {
    text-align: left !important;
}

.custom-grid .table-footer {
    padding: 0px 0px;
    background: #f5f8fd;
    border-top: 1px solid #e0eaf5;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: 1px solid #d0ddf0;
    background: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #1a2a42 !important;
    text-decoration: none !important;
    margin: 0 2px;
    transition: background 0.15s;
}

    .pg-btn:hover {
        background: #eaf4ff !important;
        color: #1565c0 !important;
    }

.pg-info {
    font-size: 12px;
    color: #5b6e8c;
    padding: 0 8px;
}

.custom-grid th,
.custom-grid tr.gridheader1 th,
table.custom-grid thead tr th,
.custom-grid .gridheader1 th {
    /*background: linear-gradient(135deg, #0a2150 0%, #1a3e7e 100%) !important;*/
    color: var(--lp-maroon) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    padding: 8px 16px !important;
    text-align: left !important;
    white-space: nowrap !important;
    border: none !important;
}

    .custom-grid th a, .custom-grid th a:visited, .custom-grid th a:hover {
        color: rgba(255, 255, 255, 0.92) !important;
        text-decoration: none !important;
        font-weight: 600 !important;
        font-size: 11.5px !important;
        letter-spacing: 0.07em !important;
        text-transform: uppercase !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

.custom-grid td {
    align-content: baseline;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

.custom-grid tr.gridheader1 th {
    /*background: linear-gradient(135deg, #0a2150 0%, #1a3e7e 100%) !important;*/
    color: var(--lp-maroon) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    padding: 14px 16px !important;
    text-align: left !important;
    white-space: nowrap !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

    .custom-grid tr.gridheader1 th a,
    .custom-grid tr.gridheader1 th a:visited,
    .custom-grid tr.gridheader1 th a:hover {
        color: var(--lp-maroon) !important;
        text-decoration: none !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        letter-spacing: 0.07em !important;
        text-transform: uppercase !important;
        display: block !important;
    }

.ftr {
    background: var(--nh-bg);
    flex-shrink: 0;
    color: #8FA8D6;
    border-top: 1px solid rgba(255, 255, 255, .10);
}

.ftr-top {
    background: transparent;
    padding: 2px 5px;
    text-align: center;
}

.ftr-top-title {
    color: #8FA8D6;
    /*font-family: var(--sans);*/
    font-size: 12.5px;
    font-weight: 500;
    /*letter-spacing: 0.12em;*/
    /*text-transform: uppercase;*/
    letter-spacing: normal;
    text-transform: none;
    font-family: var(--nh-font);
}

.sidebar li::marker {
    display: none !important;
    content: '' !important;
}

.sidebar-content ul li a.active-link, .menu-item > a.active-link {
    background: var(--cm-orange) !important;
    color: #ffffff !important;
    border-left: 3px solid var(--cm-orange) !important;
    font-weight: 700 !important;
}

.menu-item.active-parent > a {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-left: 3px solid var(--cm-orange) !important;
}

.submenu .menu-item > a.active-link {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    border-left: 3px solid var(--cm-orange) !important;
    font-weight: 700 !important;
}

.active-breadcrumb {
    background: #fff;
    padding: 6px 16px;
    font-size: 12px;
    color: #5b6e8c;
    border-bottom: 1px solid #e0eaf5;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .active-breadcrumb span {
        color: #1a56db;
        font-weight: 600;
    }

    .active-breadcrumb .sep {
        color: #b0bec5;
    }

.active-nav-indicator {
    background: linear-gradient(90deg, #1e3a7c, #1a56db);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid #4fc3f7;
}

    .active-nav-indicator .nav-trail {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .active-nav-indicator .nav-item {
        color: rgba(255,255,255,0.7);
    }

        .active-nav-indicator .nav-item.current {
            color: #4fc3f7;
            font-weight: 700;
        }

    .active-nav-indicator .nav-sep {
        color: rgba(255,255,255,0.4);
        font-size: 10px;
    }

.bluecontentbold {
    color: darkblue;
}

.btn-update {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    background: linear-gradient(180deg, #42a5f5 0%, #1565c0 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 0 #0d3b7a;
    transition: transform 0.1s, box-shadow 0.1s;
    transform: translateY(-1px);
    white-space: nowrap;
}

    .btn-update:hover {
        transform: translateY(-2px);
        box-shadow: 0 3px 0 #0d3b7a, 0 5px 10px rgba(21,101,192,0.3);
    }

    .btn-update:active {
        transform: translateY(1px);
        box-shadow: 0 1px 0 #0d3b7a;
    }

.report-card {
    background: #fff;
    border-radius: 14px;
    padding: 16px 20px;
    box-shadow: 0 2px 12px rgba(10,33,80,0.08);
    border: 1px solid rgba(30,136,229,0.1);
    margin-bottom: 8px;
}

.report-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #0a2150;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e9f0fb;
}

.field-label {
    font-size: 10px;
    font-weight: 600;
    color: #5b6e8c;
    letter-spacing: .07em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.report-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

    .report-grid select, .report-grid textarea {
        width: 100%;
    }

.btn-save {
    background: linear-gradient(180deg, #42a5f5 0%, #1565c0 100%);
    color: #fff;
    /*box-shadow: 0 3px 0 #0d3b7a, 0 5px 14px rgba(21,101,192,0.3);*/
    /*height: 25px;*/
}

    .btn-save:hover {
        background: linear-gradient(180deg,#1565c0 0%, #42a5f5 100%);
        transform: translateY(-1px);
        /*box-shadow: 0 4px 0 #0d3b7a, 0 8px 18px rgba(21,101,192,0.35);*/
    }

.btn-clear {
    background: linear-gradient(180deg, #78909c 0%, #37474f 100%);
    color: #fff;
    box-shadow: 0 3px 0 #263238, 0 5px 14px rgba(55,71,79,0.3);
    height: 25px;
}

    .btn-clear:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 0 #263238, 0 8px 18px rgba(55,71,79,0.35);
    }

.new-select {
    width: 100% !important;
    height: 25px !important;
    background: #f5f8fd !important;
    border: 1.5px solid #d0ddf0 !important;
    border-radius: 8px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    color: #1a2a42 !important;
    font-family: inherit !important;
    outline: none !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
    cursor: pointer !important;
}

    .new-select:focus {
        border-color: #1e88e5 !important;
        box-shadow: 0 0 0 3px rgba(30,136,229,0.10) !important;
    }

.btn-emergency {
    background: linear-gradient(180deg, #ef5350 0%, #b71c1c 100%);
    color: #fff;
    box-shadow: 0 3px 0 #7f0000, 0 5px 14px rgba(183,28,28,0.32);
    height: 25px;
}

    .btn-emergency:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 0 #7f0000, 0 8px 18px rgba(183,28,28,0.35);
    }

    .btn-emergency:active {
        box-shadow: 0 1px 0 #7f0000;
    }

.modal-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: transparent;
    padding: 0;
    border-radius: 0;
    transform: none; /* the older .modal-fullscreen rule shifted this by -50%/-50%, pushing the loader into the top-left corner */
}

.vh-100 {
    height: 100vh;
}

.d-flex {
    display: flex;
}

.justify-content-center {
    justify-content: center;
}

.align-items-center {
    align-items: center;
}

.text-center {
    text-align: center;
}

.container-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.body {
    background: #FFFEFA;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* ── Page loader: grey overlay over the whole screen, spinner in the centre ──
   Markup:  <div class="loader-wrap"><div class="spinner-ring"><svg class="ping-icon">…</svg></div>
                <div class="loader-text">Please wait…</div></div>                              */
.loader-wrap {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 10050;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(17, 24, 39, 0.45);
    -webkit-backdrop-filter: grayscale(0.6) blur(1px);
    backdrop-filter: grayscale(0.6) blur(1px);
    cursor: wait;
}

/* White disc with the logo; only the ring around it spins */
.spinner-ring {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #fff;
    color: var(--navy);
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

    .spinner-ring::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 50%;
        border: 6px solid var(--cm-gray-200);
        border-top-color: var(--navy);
        border-right-color: var(--cm-orange);
        animation: spin .9s linear infinite;
    }

.ping-icon {
    width: 1em;
    height: 1em;
    animation: ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.loader-text {
    color: #fff;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

@media (prefers-reduced-motion: reduce) {
    .spinner-ring::before {
        animation-duration: 2.5s;
    }

    .ping-icon {
        animation: none;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ping {
    0% {
        transform: scale(.85);
        opacity: 1;
    }

    75%, 100% {
        transform: scale(1.25);
        opacity: .35;
    }
}

/* ═══════════════════════════════════════════
       PIN SIDEBAR — NEW ADDITIONS ONLY
       All existing rules above are untouched.
    ═══════════════════════════════════════════ */

/* Pin button inside sidebar header */
.btn-pin {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.75);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 9px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-family: var(--sans);
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
}

    .btn-pin:hover {
        background: rgba(255,255,255,0.20);
        color: #fff;
    }
    /* Active / pinned state */
    .btn-pin.pinned {
        background: rgba(79,195,247,0.22);
        border-color: rgba(79,195,247,0.55);
        color: #4fc3f7;
    }

/* When pinned: sidebar always visible */
body.sidebar-pinned .sidebar {
    transform: translateX(0) !important;
    box-shadow: 2px 0 8px rgba(0,0,0,0.18);
}
/* Overlay suppressed when pinned */
body.sidebar-pinned #sidebar-overlay {
    display: none !important;
}
/* Close button hidden when pinned (pin replaces it) */
body.sidebar-pinned .btn-sidebar-close {
    display: none;
}

/* Header shifts right when pinned */
.header {
    transition: padding-left 0.25s cubic-bezier(0.4,0,0.2,1);
}

body.sidebar-pinned .header {
    padding-left: calc(256px + 16px);
}

/* Main content shifts right when pinned */
.body {
    margin: 0;
    transition: margin-left 0.25s cubic-bezier(0.4,0,0.2,1);
}

body.sidebar-pinned .body {
    margin-left: 256px;
}

/* Footer + news strip also shift */
.ftr, table#tblScrolling {
    transition: margin-left 0.25s cubic-bezier(0.4,0,0.2,1);
}

body.sidebar-pinned .ftr,
body.sidebar-pinned table#tblScrolling {
    margin-left: 256px;
}

/* CHANGE THIS - remove fixed width, let it grow */
.menu-level-1 {
    width: auto; /* ← was 200px */
    min-width: 200px; /* ← add min-width instead */
    border-radius: 6px;
}

/* CHANGE THIS - ensure full width anchor */
.menu-item > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 14px;
    color: #d0d8e8;
    text-decoration: none;
    font-size: 13px;
    transition: background 0.15s;
    white-space: nowrap;
    width: 100%; /* ← add this */
    box-sizing: border-box; /* ← add this */
}

/* CHANGE THIS - submenu full width */
.submenu {
    display: none;
    position: static;
    min-width: 0;
    width: auto;
    background: rgba(0, 0, 0, 0.18);
    border: none;
    border-radius: 6px;
    box-shadow: none;
    white-space: normal;
    box-sizing: border-box;
    margin: 2px 0 4px 10px;
    padding: 3px 0;
    overflow: hidden;
}

/* Submenus open underneath their parent item (accordion) */
.menu-item.sub-open > .submenu {
    display: block;
}

/* Arrow points down while its submenu is open */
.menu-item.sub-open > a .menu-arrow {
    transform: rotate(90deg);
    border-left-color: #fff;
}

/* Less side padding for nested items so deeper levels still fit */
.sidebar-content ul#ddtabs2 .submenu li {
    padding: 0 4px;
}

/* CHANGE THIS - submenu anchor full width */
.submenu .menu-item > a {
    color: rgba(255, 255, 255, 0.85);
    padding: 7px 12px;
    width: 100%; /* ← add this */
    box-sizing: border-box; /* ← add this */
    display: flex; /* ← add this */
    align-items: center; /* ← add this */
    justify-content: space-between; /* ← add this */
    font-size: 12.5px;
}

.sidebar-content ul#ddtabs2 li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: 7px;
    transition: background 0.15s, color 0.15s;
    border-left: 3px solid transparent;
    width: 100%; /* ← add this */
    box-sizing: border-box; /* ← add this */
    color: rgba(255,255,255,0.85); /* ← add default color */
}
/* CHANGE THIS */
.sidebar-content ul#ddtabs2 li {
    margin: 1px 0; /* ← was: 1px 8px — remove side margin */
    padding: 0 8px; /* ← move padding here instead */
    box-sizing: border-box;
}


/* ═══════════════════════════════════════════
   LAYOUT: STICKY FOOTER + MOBILE RESPONSIVE
   (moved here from HS_Hosp_User.master)
   ═══════════════════════════════════════════ */

/* Sticky footer: the page fills the screen and the footer sits at the bottom */
body > form {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.wrap {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

    .wrap > .header,
    .wrap > .ftr,
    .wrap > .contentNews {
        flex-shrink: 0;
    }

    .wrap > .body {
        flex: 1 0 auto;
        min-width: 0;
    }

    .wrap > .ftr {
        margin-top: auto;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

/* Keep page content inside the screen */
.body img,
.body iframe,
.body video {
    max-width: 100%;
}

.body img {
    height: auto;
}

/* User name / role inside the avatar menu (shown on phones only) */
.dropdown-user {
    display: none;
}

/* ── Tablet & below ── */
@media (max-width: 991.98px) {
    /* Wide grids scroll sideways inside the content area instead of the whole page */
    .wrap > .body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Pinning only makes sense on wide screens */
    .btn-pin {
        display: none !important;
    }

    .sidebar {
        max-width: 86vw;
    }

        .sidebar .menu-item > a,
        .sidebar-content ul#ddtabs2 li a {
            min-height: 44px;
            white-space: normal;
        }

    .header {
        flex-wrap: nowrap;
        gap: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .header-left {
        flex: 1 1 auto;
        min-width: 0;
        gap: 8px;
    }

    .header-right {
        flex-shrink: 0;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .header-title {
        min-width: 0;
        font-size: 14px;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .menu-btn {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }
}

/* ── Tablet forms: 4- and 3-column grids drop to 2 columns (4 → 2 → 1) ── */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .field-row.cols-4,
    .field-row.cols-3,
    .form-row,
    .form-row.cols-3,
    .field-info-row,
    .cap-grid,
    .filter-row,
    .report-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Items that spanned 3 or 4 columns now take the full row */
    .fc.span3,
    .fc.span4,
    .form-col.span3,
    .form-col.span4 {
        grid-column: 1 / -1;
    }

    .field-row > *,
    .form-row > *,
    .field-info-row > *,
    .cap-grid > *,
    .filter-row > *,
    .report-grid > * {
        min-width: 0;
    }

    .field-row input:not([type="checkbox"]):not([type="radio"]):not([type="image"]):not([type="hidden"]),
    .field-row select,
    .field-row textarea,
    .form-row input:not([type="checkbox"]):not([type="radio"]):not([type="image"]):not([type="hidden"]),
    .form-row select,
    .form-row textarea {
        max-width: 100%;
    }
}

/* ── Mobile forms: one control per line, full width ── */
@media (max-width: 767.98px) {
    .field-row,
    .form-row,
    .field-info-row,
    .cap-grid,
    .filter-row,
    .report-grid {
        grid-template-columns: 1fr !important;
    }

        .field-row > *,
        .form-row > *,
        .field-info-row > *,
        .cap-grid > *,
        .filter-row > *,
        .report-grid > * {
            grid-column: 1 / -1 !important;
            min-width: 0;
        }

        .field-row input:not([type="checkbox"]):not([type="radio"]):not([type="image"]):not([type="hidden"]),
        .field-row select,
        .field-row textarea,
        .form-row input:not([type="checkbox"]):not([type="radio"]):not([type="image"]):not([type="hidden"]),
        .form-row select,
        .form-row textarea {
            width: 100% !important;
            max-width: 100%;
            box-sizing: border-box;
        }
}

/* ── Phones ── */
@media (max-width: 575.98px) {
    .header-right .user-info {
        display: none;
    }

    .logo-circle {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    .header-title {
        font-size: 12.5px;
    }

        .header-title small {
            font-size: 8.5px;
            letter-spacing: .04em;
        }

    .avatar-dropdown {
        max-width: calc(100vw - 20px);
    }

    .dropdown-user {
        display: block;
        padding: 10px 14px;
        font-size: 12.5px;
        line-height: 1.4;
        color: #475569;
        border-bottom: 1px solid #dce3ed;
        word-break: break-word;
    }

        .dropdown-user b {
            display: block;
            color: #0f2557;
        }

    /* News strip: stack cells instead of a 4-column table */
    .contentNews,
    .contentNews tbody,
    .contentNews tr,
    .contentNews td {
        display: block;
        width: 100% !important;
    }

        .contentNews td {
            text-align: left !important;
            padding: 6px 10px;
        }

        .contentNews img {
            width: 56px;
        }
}

/* ==========================================================================
   FIELD DOCTOR MANAGEMENT INBOX PORTAL (PayerFieldDocInbox.aspx)
   ========================================================================== */

.pdi-wrapper {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding-bottom: 20px;
}

/* ── Header Toolbar Card ── */
.pdi-top-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 12px 20px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    box-shadow: 0 2px 10px rgba(10, 33, 80, 0.06);
    border: 1px solid rgba(30, 136, 229, 0.12);
}

.pdi-title-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pdi-title-icon-badge {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1565c0;
    flex-shrink: 0;
}

.pdi-title-text {
    display: flex;
    flex-direction: column;
}

.pdi-page-heading {
    font-size: 16px;
    font-weight: 700;
    color: #0a2150;
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.pdi-page-subtext {
    font-size: 11.5px;
    color: #64748b;
    margin-top: 2px;
    font-weight: 500;
}

.pdi-user-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pdi-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 20px;
    background: #f1f5fa;
    border: 1px solid #d8e2ef;
    font-size: 12px;
    color: #334155;
    font-weight: 500;
}

    .pdi-user-pill .pdi-welcome-txt {
        color: #64748b;
    }

.pdi-username-val {
    font-weight: 700;
    color: #0a2150;
}

.pdi-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    background: #fff1f0;
    border: 1px solid #ffa39e;
    color: #cf1322;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

    .pdi-logout-btn:hover {
        background: #ff4d4f;
        color: #ffffff;
        border-color: #ff4d4f;
        box-shadow: 0 2px 8px rgba(255, 77, 79, 0.25);
        text-decoration: none;
    }

/* ── Tabs Bar Card ── */
.pdi-tabs-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 8px 12px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    box-shadow: 0 2px 10px rgba(10, 33, 80, 0.06);
    border: 1px solid rgba(30, 136, 229, 0.12);
}

    .pdi-tabs-card ul#ddtabs2 {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .pdi-tabs-card ul#ddtabs2 li {
            margin: 0;
            padding: 0;
            display: inline-block;
        }

            .pdi-tabs-card ul#ddtabs2 li:empty {
                display: none !important;
            }

        .pdi-tabs-card ul#ddtabs2 a {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            font-size: 12.5px;
            font-weight: 600;
            color: #475569;
            text-decoration: none;
            border-radius: 8px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            transition: all 0.18s ease-in-out;
            cursor: pointer;
            outline: none;
        }

            .pdi-tabs-card ul#ddtabs2 a span {
                display: inline-block;
                color: inherit;
                font-weight: inherit;
            }

            .pdi-tabs-card ul#ddtabs2 a:hover {
                background: #eef4fe;
                color: #1565c0;
                border-color: #b9d3f5;
                box-shadow: 0 2px 6px rgba(30, 136, 229, 0.10);
            }

            .pdi-tabs-card ul#ddtabs2 a.selected {
                background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%) !important;
                color: #ffffff !important;
                border-color: #1565c0 !important;
                box-shadow: 0 4px 12px rgba(21, 101, 192, 0.28) !important;
            }

                .pdi-tabs-card ul#ddtabs2 a.selected span {
                    color: #ffffff !important;
                }

.pdi-fullpage-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: #1565c0;
    background: #eef4fe;
    border: 1px solid #c8dbf7;
    border-radius: 7px;
    text-decoration: none;
    transition: all 0.15s ease;
    margin-left: auto;
}

    .pdi-fullpage-link:hover {
        background: #1565c0;
        color: #ffffff;
        border-color: #1565c0;
        text-decoration: none;
    }

/* ── Tab Content / iFrame Card ── */
.pdi-frame-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 2px 14px rgba(10, 33, 80, 0.08);
    border: 1px solid rgba(30, 136, 229, 0.12);
    min-height: 720px;
    box-sizing: border-box;
}

    .pdi-frame-card #countrydivcontainer {
        width: 100%;
        min-height: 700px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

        .pdi-frame-card #countrydivcontainer iframe,
        .pdi-frame-card .tabcontentiframe {
            width: 100% !important;
            min-height: 720px !important;
            border: none !important;
            display: block !important;
            background: #ffffff !important;
            border-radius: 8px !important;
        }

/* ── Responsive adjustments ── */
@media (max-width: 768px) {
    .pdi-top-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .pdi-user-controls {
        width: 100%;
        justify-content: space-between;
    }

    .pdi-tabs-card ul#ddtabs2 a {
        padding: 7px 12px;
        font-size: 12px;
    }
}


/* ═══════════════════════════════════════════
   STANDALONE ADMIN PAGES (table layouts)
   Banks, CategoryMaster, BulkImport*, Claims* …
   Replace the old Stylehcon.css / stylesync.css classes and inline styles
   ═══════════════════════════════════════════ */
body.admin-page {
    padding: 12px 16px;
}

/* Outer layout table (was style="width:100%") */
.layout-table {
    width: 100%;
    border-collapse: collapse;
}

    .layout-table > tbody > tr > td {
        padding: 0;
    }

/* Form tables (was class="content" / "contents") */
.form-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13.5px;
    color: #1e293b;
}

    .form-table td {
    padding: 10px 14px;
    vertical-align: middle;
    text-align: left;
    border-bottom: 1px solid #eef2f7;
    }

    .form-table tr:last-child > td { border-bottom: 0; }

    .form-table tr:hover > td { background-color: #fafcff; }

    /* row of column captions (was headerContent / headerContent2 rows) */
    .form-table tr.ft-head td {
    padding: 10px 14px 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    }

    /* shaded row (was contentBack, which Custom.css hides) */
    .form-table tr.ft-alt td {
    background: #f8fafc;
    }

    /* section heading row inside a table (was gridheader1 on a <tr>) */
    .form-table tr.ft-section td {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--navy);
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    }

/* Field captions (was contentField / contentbold) */
.ft-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
    line-height: 1.3;
}

    .ft-label sup,
    .form-table tr.ft-head sup {
    color: #ef4444;
    font-weight: 700;
    margin-left: 2px;
    }

label.ft-label, span.ft-label {
    display: inline-block;
    margin: 0 6px 6px 0;
}

/* Button rows (replaces <br /> spacing and contentBack button bars) */
.form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0;
}

    .form-actions.center {
        justify-content: center;
    }

/* Links next to a page title, e.g. ClaimsDataUpdate */
.page-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: -4px 0 12px;
}

/* Cell / block helpers (were inline height / vertical-align / width) */
.cell-top {
    vertical-align: top !important;
}

.h-100 {
    height: 100px;
}

.h-300 {
    height: 300px;
}

.h-400 {
    height: 400px;
}

.h-500 {
    height: 500px;
}

.col-20 {
    width: 20%;
}

.col-25 {
    width: 25%;
}

.col-30 {
    width: 30%;
}

.col-50 {
    width: 50%;
}

.col-75 {
    width: 75%;
}

/* Fixed-width controls (were Width="…" on TextBox / DropDownList / Label) */
.asp-textbox.w-300, .asp-select.w-300 {
    width: 300px;
    max-width: 100%;
}

.asp-textbox.w-30p {
    width: 30%;
    min-width: 200px;
}

.asp-textbox.w-70p {
    width: 70%;
}

.asp-select.w-90p {
    width: 90%;
}

.ft-label.w-150 {
    width: 150px;
}

/* Confirm popup width (was Width="500px") */
.modal-500 {
    width: 500px;
    max-width: calc(100vw - 32px);
}

    .modal-500 .modal-head {
        line-height: 1.5;
    }

.modal-body-pad {
    padding: 14px 16px;
}

/* More helpers used by the Claims* / Courier* pages */
.col-40 {
    width: 40%;
}

.col-80 {
    width: 80%;
}

.h-200 {
    height: 200px;
}

.min-h-400 {
    min-height: 400px;
}

.pad-20 {
    padding: 20px;
}

.w-80px {
    width: 80px;
}

.w-120px {
    width: 120px;
}

.w-150px {
    width: 150px;
}

.w-100p {
    width: 100%;
}

.btn-row.start {
    justify-content: flex-start;
}

.col-10 {
    width: 10%;
}

.col-15 {
    width: 15%;
}

.col-16 {
    width: 16%;
}

.col-31 {
    width: 31%;
}

.col-38 {
    width: 38%;
}

.w-70px {
    width: 70px;
}

.w-100px {
    width: 100px;
}

.w-110px {
    width: 110px;
}

.w-800px {
    width: 800px;
    max-width: 100%;
}

.h-15 {
    height: 15px;
}

.h-120 {
    height: 120px;
}

.h-160 {
    height: 160px;
}

/* Helpers for the HIS / Hospital Empanelment / Invoice / Inventory pages */
.col-12 {
    width: 12%;
}

.col-33 {
    width: 33%;
}

.col-34 {
    width: 34%;
}

.h-50 {
    height: 50px;
}

.h-150 {
    height: 150px;
}

.w-200px {
    width: 200px;
}

.w-720px {
    width: 720px;
    max-width: 100%;
}

/* Grey backdrop behind a ModalPopupExtender (BackgroundCssClass="popUpStyle") */
.popUpStyle {
    background-color: rgba(17, 24, 39, 0.45);
}

.d-inline-block {
    display: inline-block;
}

.text-nowrap {
    white-space: nowrap;
}

.fw-bold {
    font-weight: 700;
}

.span-3 {
    grid-column: span 3;
}

.cursor-pointer {
    cursor: pointer;
}

.align-middle {
    vertical-align: middle;
}

.text-soft {
    color: var(--text-soft);
}

.text-danger {
    color: #dc2626;
}

/* Small helper line under a field (was font-size:10px; display:block) */
.field-hint {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    color: var(--text-soft);
}

/* A form table inside another one: no second border box */
.form-table .form-table {
    border: none;
    border-radius: 0;
    margin: 0;
    background: transparent;
}

/* "Powered by" strip under the logo on the empanelment wizard (was shade.gif background) */
.tab-strip-bar {
    padding: 4px 12px;
    margin-bottom: 8px;
    text-align: right;
    font-size: 11px;
    color: var(--text-mid);
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

    .tab-strip-bar img {
        height: 16px;
        vertical-align: middle;
    }

.center-800 {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Content wrapper for converted inbox pages (e.g. HospitalEmpanelmentInbox) */
.page-wrap {
    padding-bottom: 8px;
}

    .page-wrap > .filter-card {
        margin-bottom: 12px;
    }

        .page-wrap > .filter-card .field-row {
            margin-bottom: 8px;
        }

        .page-wrap > .filter-card .section-title {
            margin-top: 0;
        }

.w-600px {
    width: 600px;
    max-width: 100%;
}

.w-294px {
    width: 294px;
    max-width: 100%;
}

.w-300px {
    width: 300px;
    max-width: 100%;
}

.w-500px {
    width: 500px;
    max-width: 100%;
}

.w-85p {
    width: 85%;
}

/* Five percentage fields in one row (TaxServiceTDS_Insurance): 5 → 2 → 1 columns */
.tax-pct-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

@media (max-width: 900px) {
    .tax-pct-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .tax-pct-grid {
        grid-template-columns: 1fr;
    }
}

/* Input followed by a small unit, e.g. "18 %" (TaxServiceTDS_Insurance) */
.input-suffix-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pct-suffix {
    margin-left: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-soft);
    vertical-align: middle;
}

.min-w-280 {
    min-width: 280px;
}

.w-31px {
    width: 31px;
}

.w-90px {
    width: 90px;
}

.w-50p {
    width: 50%;
}

.h-48 {
    height: 48px;
}

/* Every percentage column width 0–99 %, so old <td style="width:N%"> map to .col-N */
.col-0 {
    width: 0%;
}

.col-1 {
    width: 1%;
}

.col-2 {
    width: 2%;
}

.col-3 {
    width: 3%;
}

.col-4 {
    width: 4%;
}

.col-5 {
    width: 5%;
}

.col-6 {
    width: 6%;
}

.col-7 {
    width: 7%;
}

.col-8 {
    width: 8%;
}

.col-9 {
    width: 9%;
}

.col-11 {
    width: 11%;
}

.col-13 {
    width: 13%;
}

.col-14 {
    width: 14%;
}

.col-17 {
    width: 17%;
}

.col-18 {
    width: 18%;
}

.col-19 {
    width: 19%;
}

.col-21 {
    width: 21%;
}

.col-22 {
    width: 22%;
}

.col-23 {
    width: 23%;
}

.col-24 {
    width: 24%;
}

.col-26 {
    width: 26%;
}

.col-27 {
    width: 27%;
}

.col-28 {
    width: 28%;
}

.col-29 {
    width: 29%;
}

.col-32 {
    width: 32%;
}

.col-35 {
    width: 35%;
}

.col-36 {
    width: 36%;
}

.col-37 {
    width: 37%;
}

.col-39 {
    width: 39%;
}

.col-41 {
    width: 41%;
}

.col-42 {
    width: 42%;
}

.col-43 {
    width: 43%;
}

.col-44 {
    width: 44%;
}

.col-45 {
    width: 45%;
}

.col-46 {
    width: 46%;
}

.col-47 {
    width: 47%;
}

.col-48 {
    width: 48%;
}

.col-49 {
    width: 49%;
}

.col-51 {
    width: 51%;
}

.col-52 {
    width: 52%;
}

.col-53 {
    width: 53%;
}

.col-54 {
    width: 54%;
}

.col-55 {
    width: 55%;
}

.col-56 {
    width: 56%;
}

.col-57 {
    width: 57%;
}

.col-58 {
    width: 58%;
}

.col-59 {
    width: 59%;
}

.col-60 {
    width: 60%;
}

.col-61 {
    width: 61%;
}

.col-62 {
    width: 62%;
}

.col-63 {
    width: 63%;
}

.col-64 {
    width: 64%;
}

.col-65 {
    width: 65%;
}

.col-66 {
    width: 66%;
}

.col-67 {
    width: 67%;
}

.col-68 {
    width: 68%;
}

.col-69 {
    width: 69%;
}

.col-70 {
    width: 70%;
}

.col-71 {
    width: 71%;
}

.col-72 {
    width: 72%;
}

.col-73 {
    width: 73%;
}

.col-74 {
    width: 74%;
}

.col-76 {
    width: 76%;
}

.col-77 {
    width: 77%;
}

.col-78 {
    width: 78%;
}

.col-79 {
    width: 79%;
}

.col-81 {
    width: 81%;
}

.col-82 {
    width: 82%;
}

.col-83 {
    width: 83%;
}

.col-84 {
    width: 84%;
}

.col-85 {
    width: 85%;
}

.col-86 {
    width: 86%;
}

.col-87 {
    width: 87%;
}

.col-88 {
    width: 88%;
}

.col-89 {
    width: 89%;
}

.col-90 {
    width: 90%;
}

.col-91 {
    width: 91%;
}

.col-92 {
    width: 92%;
}

.col-93 {
    width: 93%;
}

.col-94 {
    width: 94%;
}

.col-95 {
    width: 95%;
}

.col-96 {
    width: 96%;
}

.col-97 {
    width: 97%;
}

.col-98 {
    width: 98%;
}

.col-99 {
    width: 99%;
}

/* Fields side by side on one line (was display:flex; gap:16px) */
.inline-fields {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

/* RadioButtonList / CheckBoxList rendered as a table: items side by side, one line each */

        table.radio-list td input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
        }

        table.radio-list td label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: var(--ctl-h);
    padding: 0 16px;
    margin: 0;
    border: 1px solid var(--ctl-line);
    border-radius: 999px;
    background: #fff;
    font-size: 13.5px;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    user-select: none;
    transition: border-color .12s, background-color .12s;
        }

        table.radio-list td label:hover { border-color: var(--ctl-accent); }

        table.radio-list td label::before {
        content: "";
        flex: 0 0 auto;
        width: 14px;
        height: 14px;
        box-sizing: border-box;
        border: 2px solid #94a3b8;
        border-radius: 50%;
        background: #fff;
    }

        table.radio-list td input[type="checkbox"] + label::before { border-radius: 4px; }

        table.radio-list td input:checked + label {
    border-color: var(--ctl-accent);
    background: var(--ctl-accent-bg);
    color: #1d4ed8;
    font-weight: 600;
}

        table.radio-list td input[type="radio"]:checked + label::before {
        border-color: var(--ctl-accent);
        background: radial-gradient(circle, var(--ctl-accent) 0 3px, #fff 3.5px);
    }

        table.radio-list td input[type="checkbox"]:checked + label::before {
        border-color: var(--ctl-accent);
        background: var(--ctl-accent);
        box-shadow: inset 0 0 0 2px #fff;
    }

        table.radio-list td input:focus-visible + label { outline: 2px solid var(--ctl-accent); outline-offset: 2px; }

        table.radio-list td input:disabled + label { opacity: .5; cursor: not-allowed; }

/* Body text of printed letters (ProviderLetter; was in Style.css) */
.contentLetter {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-dark);
}

.text-11 {
    font-size: 11px;
}

.text-heading {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-dark);
}

.text-accent {
    color: var(--accent);
}

.z-100 {
    position: relative;
    z-index: 100;
}

.w-450px {
    width: 450px;
    max-width: 100%;
}

/* Dashed separator above a block (was border-top:1px dashed …) */
.divider-top {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}

/* Small line of text under a field */
.field-note {
    display: block;
    padding: 3px 0;
}

/* YUI pie-chart containers on PowerUserEqMISGraph (were #id rules in the page) */
.chart-box {
    width: 350px;
    max-width: 100%;
    height: 220px;
    margin: 0 auto;
}

    .chart-box.w-450px {
        width: 450px;
    }

.h-20 {
    height: 20px;
}

.w-138px {
    width: 138px;
}

.w-1000px {
    width: 1000px;
    max-width: calc(100vw - 32px);
}

/* GridView EmptyDataRowStyle CssClass="empty-grid-row" (e.g. ManageEntity) */
.custom-grid .empty-grid-row td {
    text-align: center;
    padding: 24px 16px !important;
    color: var(--text-soft);
    font-size: 13px;
    font-style: italic;
}

/* Small button for grid rows, e.g. "View MoU" */
.btn3d.btn-sm {
    --bs-btn-padding-y: 2px;
    --bs-btn-padding-x: 10px;
    --bs-btn-font-size: 11px;
    --btn-icon-size: 13px;
    --btn-icon-gap: 5px;
}

.text-10 {
    font-size: 10px;
}

.box-bordered {
    border: 1px solid var(--border);
    padding: 5px;
    border-radius: 4px;
}

.divider-bottom {
    border-bottom: 1px solid var(--cm-blue-300);
    margin-top: 5px;
}

td.divider-bottom {
    border-bottom-width: 1.5px;
    margin-top: 0;
}

.ft-small td, tr.ft-small {
    font-size: 9px;
    background-color: #f8f8ff;
}

/* Sub-heading above a group of fields (was headerContent2 on a div) */
.section-title {
    margin: 14px 0 6px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    background: var(--bg);
    border-left: 3px solid var(--navy);
    border-radius: 4px;
}

/* Sub-heading cell inside a form table (was headerContent2 on a td) */
.form-table td.ft-subhead,
td.ft-subhead {
    font-weight: 700;
    color: var(--navy);
    background: var(--bg);
}

/* Page break for printed invoices (the old page rule was written as
   ".break (pagebreak-after: always)", which browsers ignored) */
.break {
    page-break-after: always;
    break-after: page;
}

/* Small italic note row (Form16A) */
.ft-note td,
tr.ft-note {
    font-style: italic;
    vertical-align: bottom;
}

/* Orange status text (was in ClaimsValidationScoreCard's \3c style>; set from code-behind) */
.orangecontent {
    font-size: 11px;
    line-height: 15px;
    color: var(--cm-orange-dark);
}

/* Old CalendarPopup container (was style="visibility:hidden; position:absolute; …");
   CalendarPopup.js shows it by setting visibility inline */
.cal-popup {
    visibility: hidden;
    position: absolute;
    z-index: 1060;
    background-color: #f8f8ff;
}

/* Row of filter fields that wrap (was inline flex styles) */
.flex-fields {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
}

    .flex-fields > .flex-field {
        flex: 1 1 200px;
        min-width: 200px;
    }

/* Delete — solid red, trash icon */
.btn-delete {
    --bs-btn-color: #fff;
    --bs-btn-bg: #dc2626;
    --bs-btn-border-color: #dc2626;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #b91c1c;
    --bs-btn-hover-border-color: #b91c1c;
    --bs-btn-focus-shadow-rgb: 220, 38, 38;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #991b1b;
    --bs-btn-active-border-color: #991b1b;
    --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3Cpath d='M6 7l1 13h10l1-13'/%3E%3Cpath d='M9 7V4h6v3'/%3E%3C/svg%3E");
}

@media (max-width: 767.98px) {
    body.admin-page {
        padding: 10px;
    }

    .col-20, .col-25, .col-30, .col-50, .col-75 {
        width: auto;
    }

    .asp-textbox.w-30p, .asp-textbox.w-70p, .asp-select.w-90p {
        width: 100%;
    }
}


/* ═══════════════════════════════════════════
   MOBILE FORMS & DATE PICKER (e.g. HospitalEmpanelmentMIS)
   ═══════════════════════════════════════════ */

/* Calendar icon next to a date box */
.date-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

    .date-icon:hover {
        border-color: var(--navy);
        background: var(--cm-blue-50);
    }

    .date-icon img {
        width: 18px;
        height: 18px;
    }

.input-suffix-row > .asp-textbox {
    flex: 1 1 auto;
    min-width: 0;
}

/* Read-only date boxes still look like normal inputs and open the calendar on tap */
input.hasDatepicker[readonly] {
    background: #fff;
    cursor: pointer;
}

/* jQuery UI calendar: above the header/sidebar and never wider than the screen */
.ui-datepicker {
    z-index: 10070 !important;
    max-width: calc(100vw - 16px);
    font-family: var(--sans);
    font-size: 13px;
}

@media (max-width: 991.98px) {
    /* Stop a stray wide element from making phones zoom the whole page out */
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }
}

@media (max-width: 575.98px) {
    .page-wrap > .filter-card,
    .filter-card {
        padding: 14px 12px;
        margin-left: 0;
        margin-right: 0;
    }

    .page-title {
        font-size: 17px;
        padding-top: 10px;
    }

    .field-row {
        gap: 10px;
        padding: 4px 0;
    }

    /* Touch-friendly controls; 16px text stops iOS zooming in when a box is tapped */
    .filter-group label, .filter-group span[id] {
        font-size: 11.5px;
        margin-bottom: 4px;
    }

    .filter-group input,
    .filter-group select,
    .filter-group .asp-textbox,
    .filter-group .asp-select {
        height: 40px;
        min-height: 40px;
        font-size: 16px;
    }

    .date-icon {
        width: 40px;
        height: 40px;
    }

    /* Main action buttons share the row and are easy to tap */
    .filter-card .btn-row .btn3d {
        flex: 1 1 140px;
        min-height: 40px;
    }

    .ui-datepicker {
        font-size: 15px;
        width: auto !important;
    }

        .ui-datepicker table {
            font-size: 15px;
        }

        .ui-datepicker td a, .ui-datepicker td span {
            padding: 8px 4px !important;
            text-align: center;
        }
}


/* Public pages (hospital empanelment wizard: Instruction, Stage1–7):
   master-page header and footer, without the sidebar or user details */
.public-wrap > .body.public-body {
    padding: 14px 16px 20px;
}

@media (max-width: 575.98px) {
    .public-wrap > .body.public-body {
        padding: 10px;
    }
}


/* ═══════════════════════════════════════════
   FORM ROW / FORM COL: label-above-control fields in 4 columns (4 → 2 → 1)
   <div class="form-row cols-4"> <div class="form-col"> <div class="fc-label">…</div> <div class="fc-input">…</div> </div> …
   Replaces <table><tr><td>label</td><td>value</td>… (e.g. ClaimSubmit)
   ═══════════════════════════════════════════ */
.form-row.cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 16px;
    margin-bottom: 12px;
}

.form-row > .form-col,
.form-row > .fc-group > .form-col {
    min-width: 0;
    gap: 4px;
}

.form-row .fc-label {
    margin: 0;
}

/* the control(s) under a caption: text box, calendar icon, time drop-downs … on one line */
.form-row .fc-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 12.5px;
    color: var(--text-dark);
}

    .form-row .fc-input > .asp-textbox:not([class*="w-"]),
    .form-row .fc-input > textarea {
        flex: 1 1 160px;
        width: auto;
        min-width: 0;
    }

    .form-row .fc-input > select.asp-select {
        flex: 0 1 auto;
        width: auto;
        max-width: 100%;
    }

/* a former <tr id="…" runat="server">: invisible wrapper, its fields stay in the grid;
       hiding it (Visible=false or style display:none) still hides all its fields */
.form-row .fc-group {
    display: contents;
}

.form-row > .form-col.section-title {
    margin: 6px 0 0;
}

/* tables that stay tables inside a full-width column (doctor list, billing, implants) */
.form-row > .form-col.span4 > table {
    width: 100%;
}

.w-60px {
    width: 60px;
}

/* Date + time on one aligned line: [date][📅] [hour] [min] [AM/PM]  (Discharge / Surgery Date and Time) */
.form-row .fc-input.dt-row {
    flex-wrap: wrap;
    gap: 6px;
}

    .form-row .fc-input.dt-row > .dt-date {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 1 1 150px;
        min-width: 0;
    }

        .form-row .fc-input.dt-row > .dt-date > .asp-textbox {
            flex: 1 1 auto;
            width: auto;
            min-width: 0;
        }

    .form-row .fc-input.dt-row > .dt-hour {
        flex: 0 0 64px;
        width: 64px;
    }

    .form-row .fc-input.dt-row > .dt-min {
        flex: 0 0 52px;
        width: 52px;
        text-align: center;
    }

    .form-row .fc-input.dt-row > .dt-ampm {
        flex: 0 0 70px;
        width: 70px;
    }

    /* .asp-select has min-width:160px, which pushed hour / AM-PM onto new lines */
    .form-row .fc-input.dt-row > select.asp-select,
    .form-row .fc-input.dt-row > .asp-textbox,
    .form-row .fc-input.dt-row > .dt-date > .asp-textbox {
        min-width: 0;
    }

    /* NumericUpDownExtender wraps the minutes box in its own small table */
    .form-row .fc-input.dt-row > table {
        width: auto !important;
        margin: 0;
        flex: 0 0 auto;
    }

/* calendar icon next to any date box */
.form-row .fc-input > .date-icon {
    flex: 0 0 auto;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .form-row.cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .form-row > .form-col.span4 {
        overflow-x: auto;
    }
}


/* Ref ID link inside the ref strip (ClaimSubmit) */
.ref-id-badge a {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

    .ref-id-badge a:hover {
        text-decoration: underline;
    }


/* ═══════════════════════════════════════════
   APP MODAL — Bootstrap-style pop-up with an iframe
   (HospitalPreauthInbox: Update Discharge Date / Upload OT Notes; replaces dhtmlwindow)
   ═══════════════════════════════════════════ */
body.app-modal-open {
    overflow: hidden;
}

.app-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10040;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

    .app-modal.show {
        display: flex;
    }

.app-modal-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(17, 24, 39, 0.5);
}

.app-modal-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 890px;
    max-height: calc(100vh - 32px);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: appModalIn .18s ease-out;
}

@keyframes appModalIn {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.app-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--navy);
    color: #fff;
}

.app-modal-title {
    margin: 0;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.app-modal-close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    opacity: .85;
}

    .app-modal-close:hover,
    .app-modal-close:focus-visible {
        opacity: 1;
        background: rgba(255, 255, 255, 0.15);
        outline: none;
    }

.app-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    background: var(--bg);
}

    .app-modal-body iframe {
        display: block;
        width: 100%;
        height: 360px;
        max-height: calc(100vh - 160px);
        border: 0;
        background: #fff;
    }

.app-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    background: #fff;
}

@media (max-width: 575.98px) {
    .app-modal {
        padding: 8px;
    }

    .app-modal-body iframe {
        height: calc(100vh - 150px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-modal-dialog {
        animation: none;
    }
}


/* Pages shown inside the app modal's iframe (DischargeDateUpdate, OTNotes_Preauth) */
body.popup-page {
    padding: 14px 16px;
    background: #fff;
    min-height: 0;
}

.popup-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 24px;
    margin-bottom: 12px;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--text-dark);
    background: var(--bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--navy);
    border-radius: 6px;
}

    .popup-info b {
        color: var(--navy);
        font-weight: 700;
    }

.popup-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 12px;
}

    .popup-form > .form-col {
        flex: 1 1 260px;
        max-width: 420px;
    }

    .popup-form .dt-date {
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .popup-form .dt-date > .asp-textbox {
            flex: 1 1 auto;
            min-width: 0;
        }


/* ── Tabs (ajaxtabs/tabcontent.js) ───────────────────────────────── */
.shadetabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 4px 0 0;
    padding: 0 4px;
    list-style: none;
    border-bottom: 2px solid var(--border);
    overflow-x: auto; /* many tabs on a phone: swipe sideways */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    font-family: var(--sans);
}

    .shadetabs li {
        display: block;
        margin: 0 0 -2px; /* sits on the bottom border line */
        flex-shrink: 0;
    }

        .shadetabs li a,
        .shadetabs li a:visited {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 9px 16px;
            font-size: 13px;
            font-weight: 600;
            line-height: 1.2;
            color: var(--text-mid);
            text-decoration: none;
            white-space: nowrap;
            background: transparent;
            border: 1px solid transparent;
            border-bottom: 2px solid transparent;
            border-radius: 8px 8px 0 0;
            transition: color .15s, background-color .15s, border-color .15s;
        }

            .shadetabs li a:hover {
                color: var(--navy);
                background: var(--cm-blue-50);
                text-decoration: none;
            }

            .shadetabs li a:focus-visible {
                outline: 2px solid var(--navy);
                outline-offset: -2px;
            }

            /* selected tab (tabcontent.js puts "selected" on the <a>, or on the <li> if configured so) */
            .shadetabs li a.selected,
            .shadetabs li.selected a {
                color: var(--navy);
                background: #fff;
                border-color: var(--border);
                border-bottom: 2px solid var(--navy);
                cursor: default;
            }

                .shadetabs li a.selected:hover,
                .shadetabs li.selected a:hover {
                    background: #fff;
                    text-decoration: none;
                }

/* Panel under the tabs */
.tabcontent {
    padding: 14px 4px 4px;
}

@media (max-width: 575.98px) {
    .shadetabs li a,
    .shadetabs li a:visited {
        padding: 8px 12px;
        font-size: 12.5px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   NHIS LOGIN PAGE (LoginPPN_uictn.aspx) — design from nhis11-login.html
   Everything is scoped to html.nl-root / body.nhis-login / .nl-* so the
   rest of the site is not affected.
   ═══════════════════════════════════════════════════════════════ */
:root {
    --nh-bg: #0A2342;
    --nh-bg-2: #0F2F57;
    --nh-emerald: #2E6BB5;
    --nh-teal: #1F5AA6;
    --nh-teal-d: #164785;
    --nh-teal-50: #EEF3FA;
    --nh-gold: #9CC3EE;
    --nh-ink: #0B1B33;
    --nh-muted: #5D6B85;
    --nh-line: #DCE4F2;
    --nh-field: #F4F7FC;
    --nh-danger: #C0262D;
    --nh-on-dark: #AFC6F0;
    --nh-font: "Plus Jakarta Sans", "Noto Sans Tamil", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* undo the site-wide html/body rules on the login page */
html.nl-root {
    font-size: 14px;
    display: block;
    height: 100%;
    background: var(--nh-bg);
}

body.nhis-login {
    display: block;
    min-height: 100%;
    margin: 0;
    padding: 0 !important;
    border-radius: 0;
    font-family: var(--nh-font);
    font-size: 1rem;
    line-height: 1.5;
    color: #fff;
    background: var(--nh-bg) !important;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

    body.nhis-login :focus-visible { outline: 3px solid var(--nh-gold); outline-offset: 2px; border-radius: 8px; }
    body.nhis-login button { font: inherit; }

.nl-skip { position: absolute; left: -999px; top: 0; z-index: 50; padding: .6rem 1rem; color: #fff; background: var(--nh-teal); border-radius: 8px; }
    .nl-skip:focus { left: 1rem; top: 1rem; }

/* ── full-screen scene ── */
.nl-scene {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    padding: calc(.75rem + env(safe-area-inset-top, 0px)) clamp(1rem, 4vw, 3.25rem) calc(.75rem + env(safe-area-inset-bottom, 0px));
}

    .nl-scene::before {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        z-index: -3;
        background:
            radial-gradient(60% 70% at 92% 10%, rgba(46, 107, 181, .28), transparent 60%),
            radial-gradient(50% 60% at 85% 100%, rgba(156, 195, 238, .16), transparent 60%),
            var(--nh-bg);
    }

/* hero photo on the left, fading into the navy */
.nl-hero {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 64%;
    z-index: -2;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 14%);
    mask-image: linear-gradient(270deg, transparent 0%, #000 14%);
}

    .nl-hero img {
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 0% 30%;
        transform: scale(1.04);
        transform-origin: 0 30%;
        animation: nlSettle 2.2s cubic-bezier(.2, .7, .2, 1) forwards;
    }

    .nl-hero::after {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        background:
            linear-gradient(180deg, rgba(10, 35, 66, .55) 0%, rgba(10, 35, 66, 0) 16%),
            linear-gradient(0deg, rgba(10, 35, 66, .9) 0%, rgba(10, 35, 66, .45) 30%, rgba(10, 35, 66, 0) 55%);
    }

@keyframes nlSettle { to { transform: scale(1); } }

/* ── header ── */
.nl-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.nl-brand { display: flex; align-items: center; gap: .8rem; color: #fff; text-decoration: none; }
    .nl-brand small { display: block; font-size: .75rem; font-weight: 500; line-height: 1.2; color: var(--nh-on-dark); }
    .nl-brand strong { display: block; font-size: 1rem; font-weight: 700; line-height: 1.25; }
        .nl-brand strong span { color: var(--nh-gold); }

.nl-emblem {
    width: 3.15rem; height: 3.15rem; flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px var(--nh-gold);
    overflow: hidden;
}
    .nl-emblem img { width: 2.6rem; height: 2.6rem; object-fit: contain; }

.nl-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.nl-glass {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-radius: 12px;
}

.nl-help { display: flex; align-items: center; gap: .55rem; padding: .35rem .8rem .35rem .4rem; color: #fff; text-decoration: none; }
    .nl-help:hover { color: #fff; background: rgba(255, 255, 255, .14); }
    .nl-help .nl-ic { width: 2.15rem; height: 2.15rem; display: grid; place-items: center; border-radius: 9px; background: var(--nh-gold); color: var(--nh-bg); }
    .nl-help small { display: block; font-size: .66rem; line-height: 1.1; color: var(--nh-on-dark); }
    .nl-help b { font-size: .9rem; line-height: 1.2; }

.nl-tools { display: flex; align-items: center; gap: 2px; padding: 3px; }
    .nl-tools button { padding: .32rem .55rem; border: 0; border-radius: 9px; background: transparent; color: #D2DFF7; font-size: .78rem; font-weight: 700; cursor: pointer; }
        .nl-tools button:hover { color: #fff; }
        .nl-tools button[aria-pressed="true"] { background: #fff; color: var(--nh-bg); }
    .nl-tools .nl-sep { width: 1px; height: 16px; margin: 0 .15rem; background: rgba(255, 255, 255, .2); }

/* updates drop-down */
.nl-updates { position: relative; }
.nl-updates-btn { display: flex; align-items: center; gap: .45rem; padding: .5rem .8rem; color: #fff; font-size: .82rem; font-weight: 600; cursor: pointer; }
    .nl-updates-btn .nl-count { min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: var(--nh-gold); color: var(--nh-bg); font-size: .7rem; font-weight: 800; }

.nl-panel {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
    display: none;
    width: min(360px, calc(100vw - 2rem));
    padding: .9rem 1rem;
    color: var(--nh-ink);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5);
}
    .nl-panel.open { display: block; animation: nlPop .16s ease-out; }

@keyframes nlPop { from { opacity: 0; transform: translateY(-4px); } }

.nl-tabs { display: flex; gap: 2px; margin-bottom: .4rem; padding: 3px; background: var(--nh-field); border-radius: 10px; }
    .nl-tabs button { flex: 1; padding: .38rem; border: 0; border-radius: 8px; background: transparent; color: var(--nh-muted); font-size: .8rem; font-weight: 700; cursor: pointer; }
        .nl-tabs button[aria-selected="true"] { background: #fff; color: var(--nh-teal-d); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

.nl-news { list-style: none; margin: 0; padding: 0; }
    .nl-news li + li { border-top: 1px solid var(--nh-line); }
    .nl-news a { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; color: var(--nh-ink); font-size: .86rem; line-height: 1.4; text-decoration: none; }
        .nl-news a:hover span { color: var(--nh-teal); }
    .nl-news time { flex: none; width: 44px; padding: .2rem 0; text-align: center; background: var(--nh-teal-50); color: var(--nh-teal-d); border-radius: 9px; font-size: .66rem; font-weight: 600; line-height: 1.2; }
        .nl-news time b { display: block; font-size: 1rem; color: var(--nh-ink); }
    .nl-news .nl-news-empty { padding: .7rem 0; color: var(--nh-muted); font-size: .86rem; text-align: center; }

/* ── main area ── */
.nl-main {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28.5rem;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
    padding: 1.25rem 0 .75rem;
}
    .nl-main > .nl-story { grid-column: 1; grid-row: 1; }
    .nl-main > .nl-card { grid-column: 2; grid-row: 1; }

.nl-story { max-width: 720px; padding-bottom: .5rem; justify-self: start; }

.nl-tag {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-bottom: 1.1rem; padding: .35rem .85rem;
    color: var(--nh-gold); font-size: .82rem; font-weight: 700;
    background: rgba(10, 35, 66, .72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(156, 195, 238, .45);
    border-radius: 999px;
}
    .nl-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--nh-gold); box-shadow: 0 0 0 4px rgba(156, 195, 238, .25); }

.nl-story h1 { margin: 0 0 1rem; font-size: clamp(1.8rem, 3vw, 3.3rem); font-weight: 800; line-height: 1.03; letter-spacing: -.035em; color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); text-wrap: balance; }
    .nl-story h1 em { font-style: normal; background: linear-gradient(90deg, var(--nh-gold), #DCEAFA); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nl-story p { max-width: 52ch; margin: 0 0 1.4rem; color: #D6E2F8; font-size: 1rem; }

.nl-facts { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
    .nl-facts li { display: flex; align-items: center; gap: .5rem; padding: .45rem .85rem .45rem .45rem; border-radius: 999px; font-size: .86rem; font-weight: 600; }
    .nl-facts .nl-ic { width: 2rem; height: 2rem; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--nh-emerald), var(--nh-teal)); }

/* ── sign-in card ── */
.nl-card {
    position: relative;
    align-self: center;
    padding: 1.6rem 1.75rem 1.3rem;
    color: var(--nh-ink);
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .6);
    overflow: hidden;
    animation: nlRise .7s .15s cubic-bezier(.2, .7, .2, 1) backwards;
}
    .nl-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--nh-emerald), var(--nh-teal), var(--nh-gold)); }

@keyframes nlRise { from { opacity: 0; transform: translateY(18px); } }

.nl-card-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.nl-mark { width: 3.15rem; height: 3.15rem; flex: none; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--nh-emerald), var(--nh-teal-d)); box-shadow: 0 10px 20px -8px rgba(31, 90, 166, .7); }
.nl-card h2 { margin: 0; font-size: 1.45rem; font-weight: 800; line-height: 1.15; letter-spacing: -.025em; color: var(--nh-ink); }
.nl-card .nl-sub { margin: .15rem 0 0; color: var(--nh-muted); font-size: .88rem; }

.nl-form { display: flex; flex-direction: column; gap: 0; }

.nl-field label { display: block; margin-bottom: .3rem; font-size: .82rem; font-weight: 700; color: var(--nh-ink); }

.nl-control {
    display: flex; align-items: center;
    height: 3.15rem;
    background: var(--nh-field);
    border: 1.5px solid transparent;
    border-radius: 11px;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
    .nl-control:hover { border-color: var(--nh-line); }
    .nl-control:focus-within { border-color: var(--nh-teal); background: #fff; box-shadow: 0 0 0 4px rgba(46, 107, 181, .16); }
    .nl-control > svg { flex: none; margin-left: .9rem; color: #7C8AA5; }
    .nl-control:focus-within > svg { color: var(--nh-teal); }
    .nl-control input {
        flex: 1; min-width: 0; height: 100%;
        padding: 0 .8rem;
        border: 0; outline: 0;
        background: transparent;
        font: inherit; font-size: .95rem;
        color: var(--nh-ink);
    }
        .nl-control input::placeholder { color: #98A5BC; }

.nl-eye { height: 100%; padding: 0 .9rem; display: grid; place-items: center; border: 0; background: transparent; color: #7C8AA5; cursor: pointer; }
    .nl-eye:hover { color: var(--nh-teal); }

.nl-err { margin-top: .3rem; color: var(--nh-danger); font-size: .78rem; }
    .nl-err:empty { display: none; }

/* server message */
.nl-alert { display: block; padding: .6rem .8rem; color: var(--nh-danger); background: #FDF1F1; border: 1px solid #F3C9CB; border-radius: 10px; font-size: .84rem; font-weight: 600; }
    .nl-alert:empty { display: none; }

/* security code: input | image | refresh */
.nl-captcha-row { display: grid; grid-template-columns: minmax(0, 1fr) 7.4rem 3.15rem; gap: .5rem; }
    .nl-captcha-input > div,                     /* UpdatePanel wrapper */
    .nl-captcha-img > div { height: 100%; width: 100%; }
    .nl-captcha-input input { width: 100%; letter-spacing: .12em; }
    .nl-captcha-input input::placeholder { letter-spacing: 0; }

.nl-captcha-img { width: 7.4rem; height: 3.15rem; overflow: hidden; border-radius: 11px; background: #F2F6FC; border: 1.5px dashed #B9CDE8; }
    .nl-captcha-img img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; pointer-events: none; }
.nl-captcha-hidden { position: absolute; width: 0; height: 0; padding: 0; border: 0; opacity: 0; }

.nl-icon-btn {
    width: 3.15rem; height: 3.15rem;
    display: grid; place-items: center;
    border: 1.5px solid var(--nh-line); border-radius: 11px;
    background: #fff; color: var(--nh-teal-d);
    font-size: 1.2rem; font-weight: 700; line-height: 1;
    cursor: pointer;
}
    .nl-icon-btn:hover { border-color: var(--nh-teal); background: var(--nh-teal-50); }

.nl-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; font-size: .86rem; }
    .nl-row a { font-weight: 700; text-decoration: none; color: var(--nh-teal-d); }
        .nl-row a:hover { text-decoration: underline; text-underline-offset: 3px; }

.nl-btn-primary {
    position: relative;
    height: 3.45rem;
    margin: .35rem 0 .7rem;
    border: 0; border-radius: 12px;
    font-family: inherit; font-size: .98rem; font-weight: 800; letter-spacing: .02em;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(180deg, #2A63AD 0%, #1F5AA6 55%, #184C8E 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 6px 0 #0E2F5C, 0 12px 20px -6px rgba(14, 47, 92, .55);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
    transition: transform .1s ease, box-shadow .1s ease, background .2s;
}
    .nl-btn-primary:hover {
        background: linear-gradient(180deg, #3170BD 0%, #2463B3 55%, #1C559C 100%);
        transform: translateY(-1px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 7px 0 #0E2F5C, 0 16px 24px -6px rgba(14, 47, 92, .6);
    }
    .nl-btn-primary:active { transform: translateY(5px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3), 0 1px 0 #0E2F5C, 0 3px 6px -2px rgba(14, 47, 92, .5); }
    .nl-btn-primary:focus-visible { outline: 3px solid rgba(156, 195, 238, .9); outline-offset: 3px; }

.nl-btn-link { align-self: center; padding: .1rem .3rem; border: 0; background: transparent; color: var(--nh-muted); font-family: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
    .nl-btn-link:hover { color: var(--nh-teal-d); }

.nl-secure { display: flex; align-items: center; gap: .6rem; margin-top: .9rem; padding: .6rem .8rem; background: var(--nh-teal-50); border-radius: 12px; color: #3B4F72; font-size: .8rem; }
    .nl-secure .nl-ic { width: 2rem; height: 2rem; flex: none; display: grid; place-items: center; border-radius: 8px; background: #fff; color: var(--nh-teal); }

/* spacing between the visible parts of the form (replaces the flex gap) */
.nl-form > .nl-field,
.nl-form > .nl-row,
.nl-form > .nl-policy { margin-bottom: .8rem; }
.nl-form .nl-alert:not(:empty) { margin-bottom: .8rem; }
.nl-form > .nl-btn-link { align-self: center; }
.nl-result:not(:empty) { margin-top: .6rem; }

/* Drop-downs inside a field (ForgotPassword: security question) */
.nl-control select {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 .8rem;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: .95rem;
    color: var(--nh-ink);
    cursor: pointer;
}

.nl-control input:focus,
.nl-control input:focus-visible,
.nl-control select:focus,
.nl-control select:focus-visible {
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.nl-upper { text-transform: uppercase; letter-spacing: .12em; }
    .nl-upper::placeholder { text-transform: none; letter-spacing: 0; }

.nl-captcha-img img[onclick] { cursor: pointer; pointer-events: auto; }

/* date box + calendar icon */
.nl-date-row { grid-template-columns: minmax(0, 1fr) 3.15rem; }
.nl-icon-btn img { width: 20px; height: 20px; }

.nl-row-center { justify-content: center; }

.nl-mark-ok { background: linear-gradient(135deg, #2E9E6B, #1F7A52); box-shadow: 0 10px 20px -8px rgba(31, 122, 82, .6); }

/* password rules box (ForgotPassword step 2) */
.nl-policy {
    padding: .75rem .9rem;
    color: #3B4F72;
    background: var(--nh-teal-50);
    border-radius: 12px;
    font-size: .8rem;
}

    .nl-policy-head {
        display: flex;
        align-items: center;
        gap: .4rem;
        margin-bottom: .35rem;
        color: var(--nh-teal-d);
        font-weight: 700;
    }

    .nl-policy ul { margin: 0; padding-left: 1.1rem; line-height: 1.6; list-style: disc; }
    .nl-policy code { padding: 1px 5px; border-radius: 4px; background: #fff; color: var(--nh-teal-d); font-weight: 600; }

/* result message set by the code-behind (ForeColor Red / Green becomes an inline style) */
.nl-result {
    display: block;
    padding: .8rem 1rem;
    border-radius: 12px;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    color: var(--nh-ink);
    background: var(--nh-teal-50);
}

    .nl-result:empty { display: none !important; }

    .nl-result[style*="Red"], .nl-result[style*="red"] {
        color: var(--nh-danger) !important;
        background: #FDF1F1 !important;
        border: 1px solid #F3C9CB;
    }

    .nl-result[style*="Green"], .nl-result[style*="green"] {
        color: #1F7A52 !important;
        background: #ECFDF3 !important;
        border: 1px solid #A6F4C5;
    }

    .nl-result a {
        display: inline-flex;
        align-items: center;
        margin-left: .5rem;
        padding: .2rem .8rem;
        color: #fff !important;
        background: var(--nh-teal);
        border-radius: 8px;
        font-weight: 700;
        text-decoration: none;
    }

        .nl-result a:hover { background: var(--nh-teal-d); }

/* OTP / change-password pop-ups (ModalPopupExtender) */
body.nhis-login .modalPopup { color: var(--nh-ink); font-family: var(--nh-font); border-radius: 16px; }
.nl-otp-title { margin: 0 0 .75rem; font-size: 1.05rem; font-weight: 800; color: var(--nh-teal-d); }
.nl-otp-input { margin-bottom: .5rem; }

/* ── footer ── */
.nl-footer {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: .4rem 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: #8FA8D6; font-size: .78rem;
}

/* ── responsive ── */
@media (max-height: 800px) and (min-width: 1081px) {
    .nl-card { padding: 1.6rem 1.8rem 1.3rem; }
    .nl-card-head { margin-bottom: 1rem; }
    .nl-form { gap: .7rem; }
    .nl-secure, .nl-story p { display: none; }
}

@media (max-width: 1080px) {
    .nl-hero { bottom: auto; width: 100%; height: min(62vh, 560px); -webkit-mask-image: none; mask-image: none; }
        .nl-hero::after { background: linear-gradient(0deg, var(--nh-bg) 0%, rgba(10, 35, 66, .6) 35%, rgba(10, 35, 66, 0) 65%), linear-gradient(180deg, rgba(10, 35, 66, .75) 0%, rgba(10, 35, 66, 0) 25%); }
    .nl-main { grid-template-columns: 1fr; padding-top: calc(min(62vh, 560px) - 15rem); gap: 2rem; justify-items: center; }
        .nl-main > .nl-card, .nl-main > .nl-story { grid-column: auto; grid-row: auto; }
    .nl-story { justify-self: stretch; }
    .nl-card { width: 100%; max-width: 480px; }
}

@media (max-width: 640px) {
    .nl-hero { height: 440px; }
        .nl-hero img { object-position: 35% 25%; }
    .nl-main { padding-top: 190px; }
    .nl-brand small, .nl-help small { display: none; }
    .nl-brand strong { font-size: .86rem; }
    .nl-actions { width: 100%; }
    .nl-help { flex: 1; }
    .nl-tools { width: 100%; justify-content: space-between; }
        .nl-tools button { flex: 1; padding: .4rem .3rem; }
    .nl-story p, .nl-facts { display: none; }
    .nl-story h1 { font-size: 2.1rem; }
    .nl-tag { font-size: .75rem; }
    .nl-card { padding: 1.35rem 1.1rem 1.1rem; border-radius: 20px; }
    .nl-captcha-row { grid-template-columns: minmax(0, 1fr) 96px 44px; }
    .nl-captcha-img { width: 96px; }
}

@media (prefers-reduced-motion: reduce) {
    .nl-hero img { transform: none; animation: none; }
    .nl-card, .nl-panel.open { animation: none; }
    .nl-btn-primary, .nl-control { transition: none; }
}

/* Master page header extras (NHIS look): "Portal" accent + helpline pill */
.header-title strong { font-weight: 700; color: #fff; }
    .header-title strong span { color: var(--nh-gold); }

.hdr-help {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 5px;
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    font-family: var(--nh-font);
}

    .hdr-help:hover { color: #fff; background: rgba(255, 255, 255, .14); }
    .hdr-help .ic { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--nh-gold); color: var(--nh-bg); }
    .hdr-help small { display: block; font-size: 10.5px; line-height: 1.1; color: var(--nh-on-dark); }
    .hdr-help b { display: block; font-size: 13px; line-height: 1.2; }

@media (max-width: 991.98px) {
    .hdr-help small { display: none; }
}

@media (max-width: 575.98px) {
    .hdr-help { display: none; }
}


/* ═══════════════════════════════════════════
   NHIS LOGIN — MOBILE / TABLET LAYOUT (login + password reset)
   Card first, right under the header; story below it.
   ═══════════════════════════════════════════ */
@media (max-width: 1080px) {
    .nl-main {
        padding-top: 1rem;
        gap: 1.5rem;
        align-items: start;
    }

        .nl-main > .nl-card { order: -1; }        /* User Login / Reset password on top */
        .nl-main > .nl-story { order: 0; }

    /* photo only behind the header and the top of the card, fading into navy */
    .nl-hero { height: 340px; }

        .nl-hero::after {
            background:
                linear-gradient(180deg, rgba(10, 35, 66, .78) 0%, rgba(10, 35, 66, .45) 45%, var(--nh-bg) 100%);
        }

    .nl-story { text-align: center; justify-self: center; max-width: 560px; }
        .nl-story h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
        .nl-story p { margin-left: auto; margin-right: auto; }
        .nl-facts { justify-content: center; }
}

@media (max-width: 640px) {
    .nl-scene { padding-left: .75rem; padding-right: .75rem; }

    /* header: brand on the left, actions in one compact row underneath */
    .nl-header { gap: .6rem; }
        .nl-brand small { display: block; font-size: .68rem; }
        .nl-brand strong { font-size: .95rem; }

    .nl-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: .4rem;
    }

    /* glass chips need a darker base on top of the photo so text stays readable */
    .nl-glass { background: rgba(10, 35, 66, .62); border-color: rgba(255, 255, 255, .18); }

    .nl-help { padding: .3rem .6rem .3rem .3rem; gap: .4rem; }
        .nl-help .nl-ic { width: 26px; height: 26px; border-radius: 8px; }
        .nl-help b { font-size: .82rem; white-space: nowrap; }

    /* Hospital Login / Back to Sign in: icon only on small phones */
    .nl-help.nl-hosp b { display: none; }
    .nl-help.nl-hosp { padding: .3rem; }

    .nl-updates-btn { padding: .4rem .6rem; font-size: .8rem; }

    .nl-tools {
        order: 1;                 /* after the other buttons: its own full-width row */
        grid-column: 1 / -1;
        width: 100%;
        justify-content: space-between;
        padding: 2px;
    }

        .nl-tools button { flex: 1; padding: .3rem .2rem; font-size: .76rem; color: #E6EEFB; }

    .nl-panel { right: auto; left: 50%; transform: translateX(-50%); width: calc(100vw - 1.5rem); }
        .nl-panel.open { animation: none; }

    .nl-hero { height: 300px; }
        .nl-hero img { object-position: 40% 20%; }

    .nl-main { padding-top: .75rem; gap: 1.25rem; }

    .nl-card { padding: 1.25rem 1rem 1rem; border-radius: 18px; animation: none; }
    .nl-card-head { margin-bottom: .9rem; gap: .7rem; }
    .nl-mark { width: 40px; height: 40px; border-radius: 12px; }
    .nl-card h2 { font-size: 1.3rem; }

    /* 16px text inside inputs stops iPhones zooming in when a box is tapped */
    .nl-control input, .nl-control select { font-size: 16px; }

    .nl-captcha-row { grid-template-columns: minmax(0, 1fr) 92px 44px; gap: .4rem; }
    .nl-captcha-img { width: 92px; }

    .nl-story { padding-bottom: 0; }
        .nl-story h1 { font-size: 1.7rem; }
        .nl-tag { margin-bottom: .7rem; }

    .nl-footer { justify-content: center; text-align: center; }
}

@media (max-width: 360px) {
    .nl-help:not(.nl-hosp) small { display: none; }
    .nl-help b { font-size: .76rem; }
    .nl-captcha-row { grid-template-columns: minmax(0, 1fr) 84px 44px; }
    .nl-captcha-img { width: 84px; }
}


/* ═══════════════════════════════════════════
   PUBLIC PAGES WITH THE MASTER HEADER / FOOTER (no sidebar, no user details)
   PayerMemberSearch, PayerMemberPolicyInfoDetails
   ═══════════════════════════════════════════ */
body.public-page {
    padding: 0;
    background: var(--bg);
}

    body.public-page .public-wrap > .body.public-body {
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        padding: 16px 20px 24px;
    }

/* text box + small search icon button on one line */
.input-btn-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .input-btn-row > .asp-textbox { flex: 1 1 auto; min-width: 0; width: auto; }

.search-icon-btn {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    padding: 5px;
    cursor: pointer;
    background: var(--cm-blue-50);
    border: 1px solid var(--border);
    border-radius: 6px;
}

    .search-icon-btn:hover { border-color: var(--navy); }

/* small button on the right of a section head (e.g. Generate e-Card) */
.section-head .head-action {
    margin-left: auto;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 5px;
}

    .section-head .head-action:hover { background: rgba(255, 255, 255, .25); }

/* member details: two columns of fields + photo column */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.detail-main {
    grid-column: span 2;
    border-right: 1px solid #edf2fb;
}

.detail-photo { padding: 12px 14px; }

.photo-note {
    margin-top: 6px;
    font-size: 9px;
    color: #7b93b5;
    text-align: center;
}

@media (max-width: 767.98px) {
    .detail-grid { grid-template-columns: 1fr; }
    .detail-main { grid-column: auto; border-right: none; border-bottom: 1px solid #edf2fb; }
}

/* names stored in the legacy LT-ET-Ramya Tamil encoding: this font is required to show them */
.tamil-legacy { font-family: "LT-ET-Ramya", var(--sans); }
.tamil-legacy.fw-bold { font-size: 14px; }
.tamil-sub { display: block; font-size: 13px; color: #4a5e7a; }

.min-h-54 { min-height: 54px; }
.mb-8 { margin-bottom: 8px; }
.text-success { color: #15803d !important; }

/* tabs (were in PayerMemberPolicyInfoDetails' \3c style>) */
.tab-bar {
    display: flex;
    gap: 4px;
    padding: 10px 14px 0;
    border-bottom: 2px solid var(--border);
    background: #f8faff;
    overflow-x: auto;
}

.tab-btn {
    position: relative;
    bottom: -2px;
    padding: 7px 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-mid);
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    transition: all .15s;
}

    .tab-btn:hover { background: #eef2fb; color: var(--navy); }

    .tab-btn.active {
        color: var(--navy);
        background: #fff;
        border-color: var(--border);
        border-bottom-color: #fff;
    }

.tab-panels-wrap { min-height: 200px; }
.tab-panel { display: none; padding: 12px 14px; }
    .tab-panel.active { display: block; }

/* photo frame */
.photo-frame {
    width: 100%;
    min-height: 220px;
    overflow: hidden;
    background: #f4f7fd;
    border: 1px solid var(--border);
    border-radius: 8px;
}

    .photo-frame iframe {
        display: block;
        width: 100%;
        height: 220px;
        border: none;
    }


/* ── PUBLIC PAGES — TEXT SIZE 1.2rem (PayerMemberSearch, PayerMemberPolicyInfoDetails) ──
   The site's base size is 12px (html), so 1.2rem = 14.4px. Scoped to body.public-page only. */
body.public-page .public-body {
    font-size: 1.2rem;
}

    /* values, inputs, grids, messages */
    body.public-page .public-body .fc-val,
    body.public-page .public-body .asp-textbox,
    body.public-page .public-body .asp-select,
    body.public-page .public-body .custom-grid td,
    body.public-page .public-body .custom-grid th,
    body.public-page .public-body .page-msg,
    body.public-page .public-body .fields-body {
        font-size: 1.2rem !important;
    }

    /* field captions slightly smaller than the values, to keep the hierarchy */
    body.public-page .public-body .fc-label,
    body.public-page .public-body .form-label {
        font-size: 1.05rem;
    }

    /* headings */
    body.public-page .public-body .page-title { font-size: 1.3rem; }
    body.public-page .public-body .section-head-title { font-size: 1.15rem; }
    body.public-page .public-body .tab-btn { font-size: 1.05rem; }

    /* buttons */
    body.public-page .public-body .btn3d { --bs-btn-font-size: 1.2rem; }

    /* the Tamil-name labels had fixed px sizes */
    body.public-page .public-body .tamil-legacy.fw-bold { font-size: 1.3rem; }
    body.public-page .public-body .tamil-sub { font-size: 1.2rem; }


/* ═══════════════════════════════════════════
   PreAuthReqY.aspx — page styles (were the page's internal \3c style> blocks)
   Page-only class names (ped-*, nud-*, date-*, doc-table …), so other pages are not affected.
   ═══════════════════════════════════════════ */

.radio-list-compact {
    display: inline-block;
    width: auto;
}
.radio-list-compact table {
    width: auto;
    border-collapse: collapse;
}
.radio-list-compact td {
    width: auto;
    white-space: nowrap;
    padding-right: 18px;
}

.auto-style1 { font-weight:bold;font-family:Tahoma;font-size:12px;color:Black;background-image:url('../images/mainnavbg.png');line-height:20px;height:24px }
        .auto-style2 { height:31px }

        /* ── PAGE BACKGROUND ─────────────────────────────── */

        /* ── REF STRIP ──────────────────────────────────── */

        /* ── SECTION CARDS ──────────────────────────────── */
        @keyframes fadeUpPreauth { from { opacity:0; transform:translateY(4px) } to { opacity:1; transform:translateY(0) } }

        /* clip only the header corners, not the whole card */

        /* ── SUBSECTION DIVIDER ─────────────────────────── */

        /* ── FIELD GRID (fields-body / field-row / fc) ──── */

        /* ── PATIENT SECTION TABLE ──────────────────────────
           Pure HTML table with tbody — NO runat=server
           on the outer table or plain tr rows so ASP.NET
           cannot reorder them. Conditional tr runat=server
           rows (TR_PolicyProduct, TD_Corporate_lbl etc.) are
           server controls but since the table itself is plain
           HTML the row order is preserved exactly as written.
        ─────────────────────────────────────────────────── */

        /* UpdatePanel <span> must be block so it doesn't break layout */

        /* Panel td — no padding, no border (the inner table handles spacing) */

        /* Inner conditional table (Family Type, Village/Taluk) */

        /* ── FORM SECTION (approver-section inputs) ─────── */
        /* non-patient sections use form-row inside approver-section with padding */

        /* form-row = 4-col grid by default, matching field-row */

        /* UpdatePanel renders a wrapping <span> — make it transparent to grid */

        /* ── STANDARDIZED FORM LABELS (Matches TPA / Payer Zone * exactly) ── */

        /* All input controls = fc-val look */

        /* ── TABLES ──────────────────────────────────────── */
        /* First column (package name) left-aligned */

        /* Package row hover */

        /* SubTotal box — read-only appearance */

        /* ── STATUS BADGES ───────────────────────────────── */
        .badge-neutral   { background:#f1f5f9; color:var(--text-mid); border:1px solid #cbd5e1 }

        /* ── LINK / DOWNLOAD BUTTON ──────────────────────── */

        /* ── ACTION BAR ──────────────────────────────────── */
/* ── PED ROWS ────────────────────────────────────── */
.ped-row {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);   /* label | options + remarks */
    align-items: center;
    gap: 6px 16px;
    padding: 5px 0;
    border-bottom: 1px solid #edf2fb;
}
.ped-row.alt { background: #f4f7fd }
.ped-row:last-child { border-bottom: none }
.ped-label { font-size: 1rem; font-weight: 600; color: var(--text-soft); text-transform: uppercase; letter-spacing: .05em }

        /* ── SUPPRESS LEGACY CLASSES ─────────────────────── */

        /* ── RESPONSIVE ──────────────────────────────────── */
        @media (max-width:576px) {
            .ped-row { grid-template-columns:1fr }
        }
        /* ── Admission Date / Time inline row ── */
        .datetime-wrap {
            display: flex;
            align-items: center;
            gap: 6px;               /* increased from 4px for breathing room */
            flex-wrap: nowrap;
            overflow: visible;
        }
        .datetime-wrap > * { flex-shrink: 0; }

        .time-ddl   { width: 58px !important; min-width: 0 !important; }
        .minute-box { width: 36px !important; min-width: 0 !important; text-align: center; }
        .ampm-ddl   { width: 60px !important; min-width: 0 !important; }

        /* ── NUD wrap: minute input + ▲▼ buttons side by side ── */
        .nud-wrap {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            flex-shrink: 0;
        }

        /* NUD cloned text input — hide it, TxtMin is the real one */
        .nud-wrap > input[type="text"]:not(.minute-box) {
            display: none !important;
        }

        /* ▲▼ buttons — stacked vertically, fixed size */
        .nud-wrap > input[type="button"],
        .nud-wrap input[type="button"] {
            display: block !important;
            width: 16px !important;
            height: 13px !important;
            padding: 0 !important;
            margin: 0 !important;
            font-size: 8px !important;
            line-height: 1 !important;
            cursor: pointer;
            background: #eef2f8 !important;
            border: 1px solid #c8d5e8 !important;
            border-radius: 3px !important;
            color: #4a6080 !important;
            flex-shrink: 0;
            box-sizing: border-box !important;
            position: static !important;   /* prevent absolute bleed */
        }
        .nud-wrap > input[type="button"]:hover,
        .nud-wrap input[type="button"]:hover {
            background: #d8e4f5 !important;
        }

        /* NUD inner span/div — column so ▲ is above ▼ */
        .nud-wrap > span,
        .nud-wrap > div {
            display: inline-flex !important;
            flex-direction: column !important;
            gap: 1px !important;
            flex-shrink: 0;
            position: static !important;   /* prevent NUD from going absolute */
        }

        /* Gap between spinner and AM/PM */
        .ampm-ddl {
            width: 60px !important;
            min-width: 0 !important;
            margin-left: 6px !important;   /* ← breathing room after ▲▼ */
        }

        /* Extra left margin on Expected Discharge Date column */

        .date-wrap {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            flex: 0 0 auto;
        }
        .date-input  { flex: 0 0 82px !important; width: 82px !important; min-width:0 !important; }





    /* ── CALENDAR / DATE-PICKER WIDGETS (extends block above) ──
       date-input-lg, calendar-btn, calendar-icon, submit-time-label
       and doc-table are page-specific and not defined in the shared
       block, so they live here using the SAME design tokens. ── */
    .date-input-lg { width: 116px !important; flex-shrink: 0; }

    .calendar-btn,
    .calendar-icon {
        display: inline-flex; align-items: center; justify-content: center;
        flex-shrink: 0; cursor: pointer; opacity: .75; transition: opacity .15s; line-height: 0;
    }
    .calendar-btn:hover,
    .calendar-icon:hover { opacity: 1; }
    .calendar-btn img,
    .calendar-icon img { width: 20px; height: 20px; display: block; }

    /* ── "First Submission Time" read-only field (matches .fc-val look) ── */
    .submit-time-label {
        display: inline-flex; align-items: center; min-height: 28px;
        padding: 5px 9px; background: #f4f7fd; border: 1px solid #dce6f5; border-radius: 5px;
        font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; font-weight: 600;
        color: var(--text-dark); white-space: nowrap; width: 100%; box-sizing: border-box;
        overflow: hidden; text-overflow: ellipsis;
    }

    /* ── TREATING DOCTORS TABLE (matches history-tbl / pkg-tbl pattern) ── */
    .doc-table { width: 100%; border-collapse: collapse; font-size: 11px; table-layout: fixed; }
    .doc-table th {
        /*background: linear-gradient(135deg, var(--navy), var(--navy-mid));*/
        /*color: rgba(255,255,255,.88); font-size: 9.5px; font-weight: 700;*/
        letter-spacing: .06em; text-transform: uppercase; padding: 8px 9px;
        text-align: left; white-space: nowrap;
    }
    .doc-table th:first-child { text-align: center; width: 5%; }
    .doc-table td { padding: 7px 9px; border-bottom: 1px solid #edf2fb; vertical-align: middle; color: var(--text-mid); }
    .doc-table tbody tr:nth-child(even) td { background: #f7faff; }
    .doc-table tbody tr:last-child td { border-bottom: none; }
    .doc-table td:first-child { text-align: center; font-weight: 700; color: var(--text-mid); }

    /* Final enforcement of uniform form-label font sizing matching TPA / Payer Zone * */

    /* ── HMIS cards: the outer table only lays out header + grid rows ── */
    .hmis-card:not(:has(tr)) { display:none }
    .hmis-tbl > tbody > tr > td { padding:0; border:none; background:transparent }
    .hmis-body { overflow-x:auto; padding:8px 12px }

/* Package table, two rows per package (PreAuthReqY):
   row 1 = package | package cost | no of days
   row 2 = stratification | cost | implant | cost | sub total | add
   each package is its own <tbody class="pkg-group"> so both rows show / hide together */
.pa-req .pkg-tbl-2row { width: 100%; table-layout: fixed; }

    /* column widths (colgroup): the package name spans the first four */
    .pa-req .pkg-tbl-2row col.pkg-c-opt { width: 25%; }
    .pa-req .pkg-tbl-2row col.pkg-c-cost { width: 12%; }
    .pa-req .pkg-tbl-2row col.pkg-c-sub { width: 16%; }
    .pa-req .pkg-tbl-2row col.pkg-c-add { width: 10%; }

    /* caption above each control in the second row */
    .pa-req .pkg-tbl-2row .pkg-cap {
        display: block;
        margin-bottom: 4px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        text-align: left;
        color: var(--text-mid);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pa-req .pkg-tbl-2row tr.pkg-main td,
    .pa-req .pkg-tbl-2row tr.pkg-sub td { vertical-align: bottom; }

    /* a line between packages, none between a package's two rows */
    .pa-req .pkg-tbl-2row tbody.pkg-group tr.pkg-main td { border-top: 2px solid var(--border); padding-bottom: 4px; }
    .pa-req .pkg-tbl-2row tbody.pkg-group tr.pkg-sub td { border-top: none; padding-top: 4px; }
    .pa-req .pkg-tbl-2row tbody.pkg-row-alt td { background: #fafbff; }

    .pa-req .pkg-tbl-2row td .asp-textbox,
    .pa-req .pkg-tbl-2row td .asp-select { width: 100% !important; min-width: 0; box-sizing: border-box; }

    .pa-req .pkg-tbl-2row tr.pkg-sub td:first-child,
    .pa-req .pkg-tbl-2row tr.pkg-sub td:nth-child(3) { text-align: left; }

/* Stratification / Implant drop-downs */
.pa-req .pkg-tbl .pkg-opt:disabled {
    color: var(--text-soft);
    background: var(--bg);
    cursor: not-allowed;
}

/* cost boxes next to them: read-only, filled from the chosen option */
.pa-req .pkg-tbl .pkg-cost {
    text-align: right;
    font-weight: 600;
    color: var(--text-dark);
    background: var(--bg);
    cursor: default;
}


/* Submitted stratification / implant shown under a package (TPADetails "Treatment / Procedure Code & Package") */
.pkg-tbl tr.pkg-addon-row td {
    padding-top: 0;
    background: #f8fafc;
    border-top: none;
}

.pkg-addon {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;
    padding: 2px 0 6px;
    font-size: 12.5px;
}

.pkg-addon-item {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-width: 0;
}

.pkg-addon-lbl {
    padding: 1px 8px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--navy);
    background: var(--cm-blue-50);
    border-radius: 999px;
}

.pkg-addon-name {
    font-size: 1.1rem;
    color: var(--text-dark);
}

.pkg-addon-cost {
    font-weight: 600;
    color: var(--text-mid);
    white-space: nowrap;
}


/* ═══════════════════════════════════════════
   RMB FORM — form layout system (rows of 4 / 2 / 1 columns, label above control)
   <div class="rmb-form"> … <div class="rmb-row rmb-c4"> <div class="rmb-fc"> <span class="rmb-label">…</span> <div class="rmb-val">…</div> </div> … </div>
   Uses the same control tokens as .asp-textbox / .asp-select (--ctl-* in :root).
   ═══════════════════════════════════════════ */
.rmb-form {
    --rmb-h: var(--ctl-h, 42px);
    --rmb-line: var(--ctl-line, #cbd5e1);
    --rmb-accent: var(--ctl-accent, #2563eb);
    --rmb-accent-bg: var(--ctl-accent-bg, #eff6ff);
    --rmb-ro-bg: var(--ctl-ro-bg, #f1f5f9);
}

    /* ── Grid: every row shares the same 4 / 2 / 1 column tracks ── */
    .rmb-form .rmb-card {
        margin-bottom: 16px;
    }

    .rmb-form .rmb-body {
        display: flex;
        flex-direction: column;
    }

    .rmb-form .rmb-row {
        display: grid !important;
        gap: 14px 16px;
        align-items: stretch;
        margin: 0;
    }

        .rmb-form .rmb-row.rmb-c1 { grid-template-columns: minmax(0, 1fr); }
        .rmb-form .rmb-row.rmb-c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .rmb-form .rmb-row.rmb-c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .rmb-form .rmb-contents {
        display: contents;
    }

    .rmb-form .rmb-fc {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
    }

        .rmb-form .rmb-fc.rmb-s2 { grid-column: span 2; }
        .rmb-form .rmb-fc.rmb-s3 { grid-column: span 3; }

    /* textarea rows: keep labels level at the top */
    .rmb-form .rmb-row.rmb-align-top .rmb-label {
        flex: 0 0 auto;
    }

    /* Label fills the space above, so every input in a row starts at the same height */
    .rmb-form .rmb-label {
        flex: 1 0 auto;
        display: flex;
        align-items: flex-end;
        flex-wrap: wrap;
        line-height: 1.3;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #64748b;
    }

    /* ── Value area: NO grey box around controls ── */
    .rmb-form .rmb-val {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        min-width: 0;
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        min-height: 0 !important;
        border-radius: 0 !important;
    }

        .rmb-form .rmb-val.rmb-stack {
            flex-direction: column;
            align-items: stretch;
        }

        /* Read-only values (Payer, Payer Zone, approved details) keep a soft filled box */
        .rmb-form .rmb-val.rmb-ro {
            min-height: var(--rmb-h) !important;
            padding: 0 12px !important;
            box-sizing: border-box;
            background: var(--rmb-ro-bg) !important;
            border: 1px solid #e2e8f0 !important;
            border-radius: 6px !important;
        }

            .rmb-form .rmb-val.rmb-ro.rmb-ro-multi {
                min-height: 72px !important;
                align-items: flex-start;
                padding: 10px 12px !important;
            }

    /* Controls */
    .rmb-form .rmb-tb, .rmb-form .rmb-sel, .rmb-form .rmb-ta {
        box-sizing: border-box;
        max-width: 100%;
    }

    .rmb-form .rmb-ta {
        width: 100% !important;
        resize: vertical;
    }

    .rmb-form input[type=file] {
        max-width: 100%;
    }

    /* ── Composite fields: fixed grids so pieces never wrap or leave gaps ── */
    .rmb-form .rmb-val.rmb-lay-btn {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .rmb-form .rmb-val.rmb-lay-age {
        display: grid !important;
        grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr);
    }

    .rmb-form .rmb-val.rmb-lay-pair {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .rmb-form .rmb-val.rmb-lay-pkg {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 150px 96px;
    }

        .rmb-form .rmb-val.rmb-lay-btn > *, .rmb-form .rmb-val.rmb-lay-age > *,
        .rmb-form .rmb-val.rmb-lay-pair > *, .rmb-form .rmb-val.rmb-lay-pkg > * {
            width: 100% !important;
            min-width: 0 !important;
            margin: 0 !important;
        }

    .rmb-form .rmb-val.rmb-lay-btn > .rmb-btn,
    .rmb-form .rmb-val.rmb-lay-pair > .rmb-sep {
        width: auto !important;
    }

    .rmb-form .rmb-val.rmb-lay-btn > .rmb-btn {
        height: 100%;
        padding: 0 22px;
    }

    .rmb-form .rmb-val.rmb-lay-pkg > .rmb-btn {
        width: 100% !important;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 0 16px;
        white-space: nowrap;
        text-decoration: none;
    }

    .rmb-form .rmb-val.rmb-lay-date {
        flex-wrap: nowrap;
    }

    /* date | calendar | hour | : | min | AM/PM — fixed tracks, all on one line, same height */
    .rmb-form .rmb-val.rmb-lay-dt {
        display: grid !important;
        grid-template-columns: minmax(120px, 1fr) auto 76px auto 64px 84px;
        align-items: center;
        gap: 8px;
    }

        .rmb-form .rmb-val.rmb-lay-dt > .rmb-tb, .rmb-form .rmb-val.rmb-lay-dt > .rmb-sel {
            width: 100% !important;
            min-width: 0 !important;
            margin: 0 !important;
        }

        .rmb-form .rmb-val.rmb-lay-dt > .rmb-min {
            text-align: center;
            padding-left: 4px !important;
            padding-right: 4px !important;
        }

        .rmb-form .rmb-val.rmb-lay-dt > .rmb-sep {
            font-size: 18px;
            line-height: 1;
        }

    .rmb-form .rmb-w-date {
        width: 140px !important;
        flex: 0 0 auto;
    }

    .rmb-form .rmb-sep {
        color: #94a3b8;
        font-weight: 600;
    }

    .rmb-form .rmb-cal {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 6px;
        cursor: pointer;
    }

        .rmb-form .rmb-cal:hover { background: var(--rmb-accent-bg); }
        .rmb-form .rmb-cal img { width: 22px; height: 22px; }

    /* ── Radio / checkbox lists → tidy pill options, left-aligned, no spreading ── */
    .rmb-form .rmb-val.rmb-opts table.rmb-list {
        width: auto !important;
        border: 0 !important;
        background: transparent !important;
        margin: 0 !important;
    }

        .rmb-form .rmb-val.rmb-opts table.rmb-list,
        .rmb-form .rmb-val.rmb-opts table.rmb-list > tbody,
        .rmb-form .rmb-val.rmb-opts table.rmb-list tr {
            display: flex !important;
            flex-wrap: wrap;
            gap: 8px;
            width: auto !important;
        }

            .rmb-form .rmb-val.rmb-opts table.rmb-list td {
                display: block !important;
                position: relative;
                flex: 0 0 auto !important;
                width: auto !important;
                padding: 0 !important;
                border: 0 !important;
                background: transparent !important;
            }

                .rmb-form .rmb-val.rmb-opts table.rmb-list td input {
                    position: absolute;
                    opacity: 0;
                    width: 1px;
                    height: 1px;
                    margin: 0;
                }

                .rmb-form .rmb-val.rmb-opts table.rmb-list td label {
                    display: inline-flex !important;
                    align-items: center;
                    gap: 8px;
                    box-sizing: border-box;
                    min-height: var(--rmb-h);
                    padding: 0 16px;
                    margin: 0 !important;
                    border: 1px solid var(--rmb-line);
                    border-radius: 999px;
                    background: #fff;
                    font-size: 14px;
                    font-weight: 500;
                    color: #334155;
                    cursor: pointer;
                    white-space: nowrap;
                    user-select: none;
                    transition: border-color .12s, background-color .12s;
                }

                    .rmb-form .rmb-val.rmb-opts table.rmb-list td label:hover {
                        border-color: var(--rmb-accent);
                    }

                    .rmb-form .rmb-val.rmb-opts table.rmb-list td label::before {
                        content: "";
                        flex: 0 0 auto;
                        width: 14px;
                        height: 14px;
                        box-sizing: border-box;
                        border: 2px solid #94a3b8;
                        border-radius: 50%;
                        background: #fff;
                    }

                .rmb-form .rmb-val.rmb-opts table.rmb-list td input[type=checkbox] + label::before {
                    border-radius: 4px;
                }

                .rmb-form .rmb-val.rmb-opts table.rmb-list td input:checked + label {
                    border-color: var(--rmb-accent);
                    background: var(--rmb-accent-bg);
                    color: #1d4ed8;
                    font-weight: 600;
                }

                    .rmb-form .rmb-val.rmb-opts table.rmb-list td input:checked + label::before {
                        border-color: var(--rmb-accent);
                        background: radial-gradient(circle, var(--rmb-accent) 0 3px, #fff 3.5px);
                    }

                .rmb-form .rmb-val.rmb-opts table.rmb-list td input[type=checkbox]:checked + label::before {
                    background: var(--rmb-accent);
                    box-shadow: inset 0 0 0 2px #fff;
                }

                .rmb-form .rmb-val.rmb-opts table.rmb-list td input:focus-visible + label {
                    outline: 2px solid var(--rmb-accent);
                    outline-offset: 2px;
                }

                .rmb-form .rmb-val.rmb-opts table.rmb-list td input:disabled + label {
                    opacity: .5;
                    cursor: not-allowed;
                }

    /* ── Pre-existing diseases / habits: one compact line per condition ──
       Condition name | status pills | remarks — columns line up across all rows */
    .rmb-form .rmb-hx-list {
        display: grid;
        grid-template-columns: 220px 340px minmax(0, 1fr);
        column-gap: 16px;
    }

    .rmb-form .rmb-hx-row {
        display: contents;
    }

        .rmb-form .rmb-hx-row > * {
            padding: 7px 0;
            border-bottom: 1px solid #eef2f7;
            display: flex;
            align-items: center;
            min-width: 0;
        }

    .rmb-form .rmb-hx-list > .rmb-hx-row:last-child > *,
    .rmb-form .rmb-hx-list > .rmb-contents:last-child > .rmb-hx-row:last-child > * {
        border-bottom: 0;
    }

    .rmb-form .rmb-hx-head > * {
        padding: 0 0 6px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #64748b;
        border-bottom: 1px solid #e2e8f0;
    }

    .rmb-form .rmb-hx-name {
        font-weight: 600;
        color: #1e293b;
    }

    .rmb-form .rmb-val.rmb-hx-opts, .rmb-form .rmb-val.rmb-hx-remark {
        padding: 7px 0 !important;
        border-bottom: 1px solid #eef2f7 !important;
    }

        .rmb-form .rmb-val.rmb-hx-opts table.rmb-list tr {
            flex-wrap: nowrap !important;
            gap: 6px !important;
        }

        .rmb-form .rmb-val.rmb-hx-opts table.rmb-list td label {
            --rmb-h: 36px;
            padding: 0 12px;
            font-size: 13px;
        }

        .rmb-form .rmb-val.rmb-hx-remark > .rmb-tb {
            width: 100% !important;
        }

@media (max-width: 900px) {
    .rmb-form .rmb-hx-list { grid-template-columns: minmax(0, 1fr); }
    .rmb-form .rmb-hx-head { display: none; }

    .rmb-form .rmb-hx-row > * {
        border-bottom: 0;
        padding: 4px 0;
    }

    .rmb-form .rmb-val.rmb-hx-opts, .rmb-form .rmb-val.rmb-hx-remark {
        border-bottom: 0 !important;
        padding: 4px 0 !important;
    }

    .rmb-form .rmb-hx-row > .rmb-hx-remark, .rmb-form .rmb-hx-row > .rmb-hx-empty {
        padding-bottom: 12px !important;
        border-bottom: 1px solid #eef2f7 !important;
    }

    .rmb-form .rmb-val.rmb-hx-opts table.rmb-list tr { flex-wrap: wrap !important; }
}

.rmb-form sup.rmb-req {
    color: #ef4444;
    margin-left: 2px;
}

/* Message label: hidden when empty */
.rmb-form .rmb-msg { display: block; }
    .rmb-form .rmb-msg:empty { display: none; }
    .rmb-form .rmb-msg:not(:empty) { margin-bottom: 16px; }

.rmb-form .rmb-scroll { overflow-x: auto; }

.rmb-form .rmb-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 8px 0 24px;
}

/* progress popup lives outside .rmb-form, so it has its own unique class */
.rmb-progress {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    z-index: 2000;
}

/* Hidden rows (extra packages, maternity): must beat ".rmb-row { display:grid !important }" */
.rmb-form .rmb-hidden { display: none !important; }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .rmb-form .rmb-row.rmb-c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rmb-form .rmb-fc.rmb-s3 { grid-column: span 2; }
    .rmb-form .rmb-fc:empty { display: none; }
}

@media (max-width: 600px) {
    .rmb-form .rmb-row.rmb-c2, .rmb-form .rmb-row.rmb-c4 { grid-template-columns: minmax(0, 1fr); }
    .rmb-form .rmb-fc.rmb-s2, .rmb-form .rmb-fc.rmb-s3 { grid-column: auto; }
    .rmb-form .rmb-val.rmb-lay-pkg { grid-template-columns: minmax(0, 1fr) 120px; }
        .rmb-form .rmb-val.rmb-lay-pkg > .rmb-btn { grid-column: 1 / -1; }
    .rmb-form .rmb-val.rmb-lay-dt { grid-template-columns: minmax(0, 1fr) auto; }
        .rmb-form .rmb-val.rmb-lay-dt > .rmb-sel, .rmb-form .rmb-val.rmb-lay-dt > .rmb-min { grid-column: span 1; }
}


/* ── Login page pop-ups (change password / OTP): always centred in the window, sized to the screen ──
   The panels sit inside the sign-in card, so the card must not keep a transform after its intro
   animation (that is why .nl-card now uses "backwards", not "both"): a transform on an ancestor would
   make the fixed pop-up and its grey backdrop position against the card instead of the window. */
body.nhis-login .modalBackground {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10000 !important;
}

body.nhis-login .modalPopup.login-modal {
    position: fixed !important;
    top: 50% !important;           /* beats the left/top the ModalPopupExtender writes inline */
    left: 50% !important;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: min(var(--lm-w), calc(100vw - 24px)) !important;
    max-height: calc(100vh - 24px);
    overflow: auto;
    z-index: 10001 !important;
}

    body.nhis-login .modalPopup.login-modal-lg { --lm-w: 720px; }

        body.nhis-login .modalPopup.login-modal-lg iframe {
            display: block;
            width: 100%;
            height: min(500px, calc(100vh - 48px));   /* fits the change-password form without scrolling */
            border: 0;
        }

    body.nhis-login .modalPopup.login-modal-sm {
        --lm-w: 360px;
        padding: 20px !important;
    }

        body.nhis-login .modalPopup.login-modal-sm .form-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
        }

@media (max-width: 640px) {
    body.nhis-login .modalPopup.login-modal-lg iframe { height: calc(100vh - 48px); }
}


/* ── Change password page (shown in the login page's pop-up iframe) — same look as the login card ──
   Layout: header · "Password" (old | new | confirm) · "Security details" (question | answer | email)
           · message · actions pinned to the bottom of the pop-up. Sizes in px: the iframe has its own
           12px html base, so rem-based login sizes would come out too small here. */
body.cp-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: var(--nh-font);
    font-size: 14px;
    color: var(--nh-ink);
    background: #fff !important;
}

    body.cp-page > form {
        display: flex;
        flex-direction: column;
        flex: 1 0 auto;
    }

.cp-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--nh-line);
}

    .cp-head .nl-mark {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

.cp-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--nh-ink);
}

.cp-sub {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--nh-muted);
}

.cp-user {
    font-weight: 700;
    color: var(--nh-teal-d);
}

.cp-section {
    margin: 16px 20px 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nh-teal-d);
}

/* three fields per row (2 on narrow pop-ups, 1 on phones) */
.cp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 14px;
    padding: 0 20px;
}

body.cp-page .nl-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
}

    body.cp-page .nl-field label sup { color: var(--nh-danger); font-size: 12px; }

body.cp-page .nl-control {
    height: 44px;
    border-radius: 10px;
}

    body.cp-page .nl-control > svg { margin-left: 12px; }

    body.cp-page .nl-control input,
    body.cp-page .nl-control select {
        padding: 0 12px;
        font-size: 15px;
    }

        body.cp-page .nl-control input::placeholder { font-size: 14px; }

.cp-hint {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--nh-muted);
}

/* message from the code-behind: compact, left aligned */
body.cp-page .nl-result.cp-msg:not(:empty) {
    margin: 14px 20px 0;
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
}

/* actions always visible at the bottom of the pop-up */
.cp-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 14px 20px 16px;
    background: #fff;
    border-top: 1px solid var(--nh-line);
}

    /* Close: same height and corners as Update; padding set through the .btn3d variables so the
       icon keeps its own space (overriding padding-left directly put the icon on top of the text) */
    .cp-actions .btn3d {
        --bs-btn-padding-x: 20px;
        --bs-btn-font-size: 15px;
        --bs-btn-font-weight: 700;
        --bs-btn-border-radius: 12px;
        height: 46px;
        margin: 0;
    }

    .cp-actions .nl-btn-primary.cp-btn {
        width: auto;
        height: 46px;
        margin: 0;
        padding: 0 26px;
        font-size: 15px;
        border-radius: 12px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 3px 0 #0E2F5C, 0 8px 14px -6px rgba(14, 47, 92, .5);
    }

        .cp-actions .nl-btn-primary.cp-btn:hover { transform: translateY(-1px); }
        .cp-actions .nl-btn-primary.cp-btn:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3); }

body.cp-page .cp-grid + .cp-section { margin-top: 18px; }

@media (max-width: 680px) {
    .cp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .cp-grid { grid-template-columns: minmax(0, 1fr); padding: 0 14px; }
    .cp-head, .cp-actions { padding-left: 14px; padding-right: 14px; }
    .cp-section { margin-left: 14px; margin-right: 14px; }
    body.cp-page .nl-result.cp-msg:not(:empty) { margin-left: 14px; margin-right: 14px; }
    .cp-actions { flex-direction: column-reverse; align-items: stretch; }
        .cp-actions .nl-btn-primary.cp-btn { width: 100%; }
}


/* ═══════════════════════════════════════════
   PreAuthReqY — package table, 2 rows per package, fixed % columns, no horizontal scroll
   row 1: package (72%) | package cost (16%) | no of days (12%)
   row 2: ☐ stratification (25%) | cost (11%) | ☐ implant (25%) | cost (11%) | sub total (16%) | add (12%)
   (not scoped to .pa-req, so it works whatever wraps the table)
   ═══════════════════════════════════════════ */
.pkg-tbl-wrap {
    width: 100%;
    overflow: visible;           /* no scroll bar; the autocomplete list can still drop down */
}

table.pkg-tbl.pkg-tbl-2row {
    width: 100% !important;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

    .pkg-tbl-2row col.pkg-c-opt  { width: 25%; }
    .pkg-tbl-2row col.pkg-c-cost { width: 11%; }
    .pkg-tbl-2row col.pkg-c-sub  { width: 16%; }
    .pkg-tbl-2row col.pkg-c-add  { width: 12%; }

    .pkg-tbl-2row td {
        padding: 8px 6px;
        vertical-align: bottom;
        min-width: 0;
        text-align: left;
    }

        .pkg-tbl-2row td:first-child { padding-left: 12px; }
        .pkg-tbl-2row td:last-child { padding-right: 12px; }

    /* every control fills its cell, nothing forces the table wider */
    .pkg-tbl-2row td .asp-textbox,
    .pkg-tbl-2row td .asp-select,
    .pkg-tbl-2row td input.pkg-cost,
    .pkg-tbl-2row td input[type="text"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    .pkg-tbl-2row .pkg-cap {
        display: block;
        margin-bottom: 4px;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: #64748b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* "☐ Stratification" / "☐ Implant" — the checkbox switches its list and cost on */
    .pkg-tbl-2row .pkg-cap.pkg-chk {
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        color: var(--navy);
    }

        .pkg-tbl-2row .pkg-chk input[type="checkbox"] {
            width: 15px;
            height: 15px;
            margin: 0;
            flex: 0 0 auto;
            cursor: pointer;
            accent-color: var(--ctl-accent, #2563eb);
        }

    .pkg-tbl-2row td .pkg-cost { text-align: right; }

    .pkg-tbl-2row td .btn-secondary,
    .pkg-tbl-2row td .btn3d {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }

    /* one line between packages, none between a package's two rows */
    .pkg-tbl-2row tbody.pkg-group tr.pkg-main td { border-top: 2px solid var(--border); }
    .pkg-tbl-2row tbody.pkg-group:first-of-type tr.pkg-main td { border-top: 0; }
    .pkg-tbl-2row tbody.pkg-group tr.pkg-sub td { border-top: 0; padding-top: 2px; }
    .pkg-tbl-2row tbody.pkg-row-alt td { background: #fafbff; }

/* tablets / phones: each row becomes a 2-column grid instead of a table */
@media (max-width: 900px) {
    table.pkg-tbl.pkg-tbl-2row,
    .pkg-tbl-2row tbody { display: block; }
    .pkg-tbl-2row colgroup { display: none; }

    .pkg-tbl-2row tr.pkg-main,
    .pkg-tbl-2row tr.pkg-sub {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 10px;
        padding: 8px 12px;
    }

        .pkg-tbl-2row tr.pkg-main > td:first-child { grid-column: 1 / -1; }
        .pkg-tbl-2row tr > td { display: block; padding: 0 !important; border: 0 !important; }

    .pkg-tbl-2row tbody.pkg-group + tbody.pkg-group tr.pkg-main { border-top: 2px solid var(--border); }
}

/* ==========================================================================
   ADMIN & INBOX DASHBOARD TILES (EntityAdminInbox / PayerInbox)
   ========================================================================== */

.admin-dashboard-container {
    width: 100%;
    padding: 8px 12px 24px;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.admin-dashboard-container *, 
.admin-dashboard-container *::before, 
.admin-dashboard-container *::after {
    box-sizing: border-box;
}

/* ── Compact Tiles Grid ── */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.admin-tile {
    background: #ffffff;
    border: 1px solid #d5e0f2;
    border-radius: 8px;
    padding: 10px 14px;
    text-decoration: none !important;
    color: #1a2a42 !important;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform .15s ease-in-out, box-shadow .15s ease-in-out, border-color .15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    cursor: pointer;
}

.admin-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15,46,128,0.10);
    border-color: #1a3a7c;
    color: #0f2e80 !important;
}

.admin-tile:focus-visible {
    outline: 2px solid rgba(26,58,124,.4);
    outline-offset: 2px;
}

.admin-tile-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #edf2f9;
    color: #1a3a7c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}

.admin-tile:hover .admin-tile-icon {
    background: #1a3a7c;
    color: #ffffff;
}

.admin-tile-content {
    flex: 1;
    min-width: 0;
}

.admin-tile-title {
    font-size: 13px;
    font-weight: 700;
    color: #1a2a42;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.25;
}

.admin-tile:hover .admin-tile-title {
    color: #0f2e80;
}

.admin-tile-desc {
    font-size: 11px;
    color: #64748b;
    line-height: 1.3;
}

.badge-pending {
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    display: inline-block;
}

.badge-pending:empty {
    display: none;
}

.d-none {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .admin-tile, .admin-tile-icon { transition: none; }
    .admin-tile:hover { transform: none; }
}

@media (max-width: 560px) {
    .admin-grid { grid-template-columns: 1fr; }
}


/* ── Claim Re-Request (content page): file rows, kept data tables, pop-up text ── */
.claim-rr .fc-input.file-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

    .claim-rr .fc-input.file-cell input[type="file"] { max-width: 100%; }

.claim-rr .table-responsive > table.data-tbl { width: 100%; margin: 0; }

    .claim-rr table.data-tbl td { vertical-align: middle; }

        .claim-rr table.data-tbl td .asp-textbox,
        .claim-rr table.data-tbl td .asp-select { width: 100%; min-width: 120px; }

.claim-rr .modal-text {
    display: block;
    padding: 12px 16px 4px;
    font-size: 13px;
    color: var(--text-dark);
}

.claim-rr .form-actions.center { margin-top: 12px; }


/* ═══════════════════════════════════════════
   PreAuthReqY — PATIENT / MEMBER INFORMATION — responsive
   The section is a 4-column table (.pat-tbl, label above control in each cell).
   Desktop: unchanged. Tablet (< 992px): 2 fields per line. Phone (< 576px): 1 per line.
   The table rows become grids, so cells wrap instead of being squeezed.
   ═══════════════════════════════════════════ */
table.pat-tbl {
    width: 100%;
    table-layout: fixed;
}

    table.pat-tbl .asp-textbox,
    table.pat-tbl .asp-select {
        max-width: 100%;
        box-sizing: border-box;
    }

@media (max-width: 991.98px) {
    table.pat-tbl,
    table.pat-tbl > tbody,
    table.pat-tbl table.pat-inner,
    table.pat-tbl table.pat-inner > tbody {
        display: block;
        width: 100% !important;
    }

        /* each row → 2-column grid (rows hidden with style="display:none" stay hidden) */
        table.pat-tbl > tbody > tr,
        table.pat-tbl table.pat-inner tr {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px 14px;
            padding: 10px 12px;
        }

            table.pat-tbl > tbody > tr > td,
            table.pat-tbl table.pat-inner tr > td {
                display: block;
                width: auto !important;
                min-width: 0;
                padding: 0 !important;
                border: 0 !important;
            }

            /* wide cells (address, family-type panel, notes) take the whole line */
            table.pat-tbl > tbody > tr > td[colspan] { grid-column: 1 / -1; }

            /* empty spacer cells take no room */
            table.pat-tbl > tbody > tr > td:empty,
            table.pat-tbl table.pat-inner tr > td:empty { display: none; }

        table.pat-tbl > tbody > tr + tr { border-top: 1px solid var(--border); }

        /* the family-type panel sits inside a full-width cell: no double padding */
        table.pat-tbl td.pat-panel-td table.pat-inner tr { padding: 0; }

        /* controls fill their cell; small fixed pieces (age, unit) keep their size */
        table.pat-tbl td > .asp-textbox,
        table.pat-tbl td > .asp-select,
        table.pat-tbl td > input[type="text"],
        table.pat-tbl td > select,
        table.pat-tbl td > textarea {
            width: 100% !important;
        }

        /* label text wraps cleanly instead of breaking the column */
        table.pat-tbl .form-label {
            white-space: normal;
            word-break: normal;
            line-height: 1.3;
        }
}

@media (max-width: 575.98px) {
    table.pat-tbl > tbody > tr,
    table.pat-tbl table.pat-inner tr {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 10px;
    }

    table.pat-tbl td.pat-panel-td table.pat-inner tr { padding: 0; }
}


/* Pre-existing diseases: the second column holds the options and the remarks box */
.ped-row > .d-flex {
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    min-width: 0;
}

    .ped-row > .d-flex > .asp-textbox,
    .ped-row > .d-flex > input[type="text"] {
        flex: 1 1 260px;
        width: auto;
        min-width: 0;
        max-width: 100%;
    }


/* zero-padding helpers (same names as Bootstrap) */
.p-0 {
    padding: 0 !important;
}

.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.ps-0 {
    padding-left: 0 !important;
}

.pe-0 {
    padding-right: 0 !important;
}
/* Helpline pills: icon + stacked label/number, equal width */
.nl-helplines {
    display: inline-flex;
    align-items: stretch;
    gap: .5rem;
    flex-wrap: wrap;
}

    .nl-helplines .nl-help {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        min-width: 10.5rem; /* same width for both pills */
        padding-top: .4rem;
        padding-bottom: .4rem;
        text-decoration: none;
    }

    .nl-helplines .nl-ic {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

.nl-help-txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    text-align: left;
}

    .nl-help-txt small {
        font-size: .68rem;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        opacity: .85;
    }

    .nl-help-txt b {
        font-size: .88rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums; /* digits line up */
        white-space: nowrap; /* number never breaks */
    }

@media (max-width: 600px) {
    .nl-helplines {
        width: 100%;
    }

        .nl-helplines .nl-help {
            flex: 1 1 0;
            min-width: 0;
        }
}

/* ── Login page: scheduled-maintenance banner (top of the screen, above the header) ── */
.nl-maint {
    position: sticky;
    top: 0;
    z-index: 1200; /* above the header and the hero image */
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    color: #78350f;
    background: #fef3c7; /* amber: announcement */
    border-bottom: 1px solid #f59e0b;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .15);
    font-family: var(--nh-font);
    font-size: 14px;
    line-height: 1.45;
}

    .nl-maint[hidden] {
        display: none;
    }

    .nl-maint.is-live { /* maintenance running now: red */
        color: #7f1d1d;
        background: #fee2e2;
        border-bottom-color: #ef4444;
    }

.nl-maint-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .6);
}

.nl-maint-text {
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
}

    .nl-maint-text b {
        font-weight: 800;
        margin-right: 4px;
    }

.nl-maint-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 8px;
    opacity: .7;
    cursor: pointer;
}

    .nl-maint-close:hover,
    .nl-maint-close:focus-visible {
        opacity: 1;
        background: rgba(255, 255, 255, .5);
    }

@media (max-width: 640px) {
    .nl-maint {
        align-items: flex-start;
        padding: 8px 12px;
        font-size: 13px;
    }

    .nl-maint-icon {
        width: 26px;
        height: 26px;
    }
}
/* PreAuthReqY: Stratification drop-down + its "No Of Days" list side by side */
.pkg-strat-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

    .pkg-strat-wrap > .asp-select.pkg-opt {
        flex: 1 1 auto;
        min-width: 0;
        width: auto !important;
    }

    .pkg-strat-wrap > .pkg-strat-days {
        flex: 0 0 76px;
        width: 76px !important;
        min-width: 0 !important;
    }

        .pkg-strat-wrap > .pkg-strat-days:disabled {
            color: var(--text-soft);
            background-color: var(--bg);
        }