*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/*code By Rajesh*/

:root {
    --navy: #0b1f3a;
    --navy-mid: #163261;
    --gold: #c9973a;
    --gold-lt: #e8bf6a;
    --white: #ffffff;
}

/* html, body {
      height: 100%;
     
      overflow: hidden;
    } */

html {
    height: auto;
}

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');


body {
    min-height: 100vh;
    overflow-y: auto;
    scroll-behavior: smooth;
    font-family: "Oswald", sans-serif;
    font-family: "Lato", sans-serif;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    overflow-x: hidden;
    scrollbar-width: none;
}

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


.spacer1px {
    clear: both;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    height: 1px;
    background: none;
    margin: 0px 0px 0px 0px;
    width: 100%;
    border: none;
}

.spacer5px {
    clear: both;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    height: 5px;
    background: none;
    margin: 0px 0px 0px 0px;
    width: 100%;
    border: none;
}

.spacer15px {
    clear: both;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    height: 15px;
    background: none;
    margin: 0px 0px 0px 0px;
    width: 100%;
    border: none;
}

.spacer10px {
    clear: both;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    height: 10px;
    background: none;
    margin: 0px 0px 0px 0px;
    width: 100%;
    border: none;
}

.spacer20px {
    clear: both;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    height: 20px;
    background: none;
    margin: 0px 0px 0px 0px;
    width: 100%;
    border: none;
}

.spacer30px {
    clear: both;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    height: 30px;
    background: none;
    margin: 0px 0px 0px 0px;
    width: 100%;
    border: none;
}

.spacer50px {
    clear: both;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    height: 50px;
    background: none;
    margin: 0px 0px 0px 0px;
    width: 100%;
    border: none;
}

.spacer80px {
    clear: both;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    height: 50px;
    background: none;
    margin: 0px 0px 0px 0px;
    width: 100%;
    border: none;
}

.page {
    width: 100vw;
    min-height: 100vh;
    position: relative;
    /* overflow: hidden; */
    display: flex;
    flex-direction: column;
    background-image: url("../images/mact-images/bg1.jpg");
    background-size: cover;
    background-position: center;
    z-index: 11;
}

    .page::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* background: linear-gradient(180deg, #b8d4ea 0%, #cde2f2 18%, #ddedf8 38%, #edf5fbe3 58%, #f6fafdd9 78%, #ffffffc9 100%); */
        background: linear-gradient(180deg, #3c6687 0%, #537590db 18%, #8ba9be00 38%, #edf5fb00 58%, #f6fafd00 78%, #ffffff 100%);
        /* background: linear-gradient(295deg, #aa8c6d 0%, #ffffffc9 18%, #ddedf8eb 38%, #ffffff3b 58%, #afafafd9 78%, #00000000 100%); */
        /* background: linear-gradient(195deg, rgb(214 208 208 / 51%) 0%, rgb(219 209 209 / 16%) 40%, rgb(162 144 124 / 14%) 100%); */
        backdrop-filter: blur(2px);
        z-index: 1;
    }

    .page > * {
        position: relative;
        z-index: 2;
    }

.courthouse-wrap {
    display: flex;
    position: absolute;
    right: 0px;
    justify-content: flex-end;
    bottom: 0;
}

.courthouse-wrap-new {
    display: flex;
    position: absolute;
    left: 0px;
    justify-content: flex-end;
    bottom: 0;
}

    .courthouse-wrap-new img {
        width: 400px;
    }

.courthouse-wrap img {
    width: 400px;
}

.gavel-wrap {
    position: absolute;
    right: 3%;
    bottom: 0;
    z-index: 2;
    width: 220px;
    opacity: 0.20;
    pointer-events: none;
}

.floating-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 52px 0;
}

.hdr-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.logo-ring {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid rgba(11, 31, 58, 0.2);
    padding: 3px;
    background: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

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

.brand-info h1 {
    font-size: 1.18rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.brand-info p {
    font-size: 12px;
    font-weight: 600;
    color: #ffc300;
    opacity: 0.45;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: 3px;
}


.hdr-acc {
    display: flex;
    align-items: center;
    gap: 6px;
}

.acc-label {
    font-size: 13px;
    color: rgb(208 160 69);
    font-weight: 600;
    margin-right: 4px;
    letter-spacing: 0.06em;
}

.acc-btn {
    width: 32px;
    height: 32px;
    border: 1.5px solid rgba(11, 31, 58, 0.18);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s;
    backdrop-filter: blur(4px);
}

    .acc-btn:hover,
    .acc-btn.on {
        background: var(--navy);
        color: var(--white);
        border-color: var(--navy);
    }

.hero {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px 40px;
}


    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.75) 20%, rgb(255 255 255 / 34%) 45%, rgb(255 255 255 / 0%) 65%, rgb(255 255 255 / 0%) 100%), linear-gradient(to bottom, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 0%) 30%, rgb(0 0 0 / 0%) 70%, rgb(0 0 0 / 0%) 100%);
        pointer-events: none;
    }




.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(11, 31, 58, 0.12);
    backdrop-filter: blur(8px);
    border-radius: 30px;
    padding: 5px 18px;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #005fff;
    margin-bottom: 18px;
    animation: fadeDown 0.55s ease both;
}

    .eyebrow .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--gold);
    }


.hero-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
    color: var(--navy);
    line-height: 1.2;
    max-width: 760px;
    margin-bottom: 12px;
    animation: fadeUp 0.6s ease 0.08s both;
    text-shadow: -8px 3px 20px rgb(255 255 255 / 93%);
    backdrop-filter: blur(2px);
    /* background: #d2b88000; */
    /* background: linear-gradient(180deg, #b8d4ea 0%, #cde2f2 18%, #ddedf8 38%, #edf5fbe3 58%, #f6fafdd9 78%, #ffffffc9 100%); */
    border-radius: 10px;
    padding: 5px;
    -webkit-animation: fadeUp 0.6s ease 0.08s both;
    font-family: "Oswald", sans-serif;
}

    .hero-title .accent {
        background: linear-gradient(120deg, #0b1f3a, #ffffff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: #734c00;
        /* -webkit-text-fill-color: #6b0f0f; */

        background-clip: text;
        font-family: "Oswald", sans-serif;
    }


.gold-rule {
    width: 64px;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--gold-lt));
    border-radius: 2px;
    margin: 0 auto 16px;
    animation: growX 0.55s ease 0.2s both;
    transform-origin: center;
}

@keyframes growX {
    from {
        transform: scaleX(0);
        opacity: 0;
    }

    to {
        transform: scaleX(1);
        opacity: 1;
    }
}


.hero-sub {
    font-size: 17px;
    font-weight: 500;
    color: rgb(0 0 0);
    max-width: 460px;
    line-height: 1.75;
    margin-bottom: 36px;
    animation: fadeUp 0.6s ease 0.18s both;
    text-shadow: 0px 0px 6px rgb(24 0 0 / 60%);
    font-family: "Oswald", sans-serif;
}


.btns {
    display: flex;
    gap: 40px;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeUp 0.6s ease 0.28s both;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 24px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.18s, box-shadow 0.18s, background 0.18s, border-color 0.18s;
    white-space: nowrap;
}

    .btn:hover {
        transform: translateY(-2px);
    }

.btn-glass {
    display: flex;
    flex-direction: column;
    width: 150px;
    height: 100px;
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(11, 31, 58, 0.15);
    color: var(--navy);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(8px);
}

    .btn-glass img {
        width: 40px;
    }

    .btn-glass:hover {
        border-color: rgba(11, 31, 58, 0.35);
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 6px 22px rgba(11, 31, 58, 0.12);
        font-family: "Oswald", sans-serif;
    }

.btn-navy {
    display: flex;
    flex-direction: column;
    width: 150px;
    height: 100px;
    background: var(--navy);
    color: var(--white);
    box-shadow: 0 4px 18px rgba(11, 31, 58, 0.28);
    font-family: "Oswald", sans-serif;
}

    .btn-navy img {
        width: 40px;
    }

    .btn-navy:hover {
        background: var(--navy-mid);
        box-shadow: 0 8px 28px rgba(11, 31, 58, 0.38);
        font-family: "Oswald", sans-serif;
    }


.btn-gold_1 {
    display: flex;
    flex-direction: column;
    width: 150px;
    height: 100px;
    background: linear-gradient(135deg, var(--gold), var(--gold-lt));
    color: var(--navy);
    box-shadow: 0 4px 18px rgba(201, 151, 58, 0.3);
    font-family: "Oswald", sans-serif;
}

    .btn-gold_1 img {
        width: 40px;
    }

    .btn-gold_1:hover {
        box-shadow: 0 8px 28px rgba(201, 151, 58, 0.45);
    }

.btn-icon {
    font-size: 1rem;
}

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

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

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

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




.login-wrapper {
    display: flex;
    width: 100%;
    max-width: 920px;
    background: var(--white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.12);
    animation: fadeUp 0.55s ease both;
}

/* Left panel */
.panel-left {
    /*    background: #960018;*/
    /*    background: linear-gradient(175deg, #1e3444 0%, #2a5270 50%, #24394f 100%);*/
    /*    background: linear-gradient(175deg, var(--crimson-deep) 0%, var(--crimson) 50%, #7B1A1A 100%);*/
    /*background: linear-gradient( 135deg, #6E0B19 0%, #8f1526 50%, #6a0e19 100% );*/
    background: linear-gradient(135deg, #bc3e20 0%, #8f1526 50%, #45130f 100%);
    color: var(--white);
    padding: 56px 44px;
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

    .panel-left::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        pointer-events: none;
    }

.emblem img {
    width: 40%;
    position: relative;
    margin: 0 auto;
    display: flex;
}

.panel-left .emblem {
    margin-bottom: 20px;
}

.panel-left h2 {
    font-size: 1.65rem;
    line-height: 1.3;
    margin-bottom: 14px;
    color: var(--white);
    font-family: "Oswald", sans-serif;
    text-align: center;
}

    .panel-left h2 span {
        color: var(--gold-light);
    }

.panel-left p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.65;
    margin-bottom: 30px;
    font-family: "Oswald", sans-serif;
    text-align: center;
}

.feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .feature-list li {
        font-size: 0.82rem;
        color: rgba(255, 255, 255, 0.75);
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .feature-list li::before {
            content: '✓';
            background: var(--gold);
            color: var(--white);
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            font-weight: 700;
            flex-shrink: 0;
        }


.panel-right {
    flex: 1;
    padding: 30px;
    height: 600px;
    overflow-y: scroll;
    scroll-behavior: smooth;
    scrollbar-width: 0px;
}

    .panel-right::-webkit-scrollbar {
        display: none;
    }

    .panel-right h3 {
        font-size: 1.55rem;
        color: var(--navy);
        margin-bottom: 10px;
    }

    .panel-right > p {
        font-size: 16px;
        color: var(--muted);
        margin-bottom: 20px;
        font-family: cursive;
    }

.form-group {
    margin-bottom: 20px;
}

label {
    display: block !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--navy) !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 7px !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
select {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 7px;
    font-size: 0.9rem;
    color: var(--text);
    background: #fafafa;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

    input:focus,
    select:focus {
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(201, 151, 58, 0.15);
        background: var(--white);
    }

.input-hint {
    font-size: 0.74rem;
    color: var(--muted);
    margin-top: 5px;
}

.row-group {
    display: flex;
    gap: 14px;
}

    .row-group .form-group {
        flex: 1;
    }

.forgot-link {
    display: block;
    text-align: right;
    font-size: 0.8rem;
    color: var(--gold);
    text-decoration: none;
    margin-top: -10px;
    margin-bottom: 0px;
}

    .forgot-link:hover {
        text-decoration: underline;
    }

.btn-submit {
    padding: 13px;
    background: var(--navy);
    color: var(--white);
    border: none;
    border-radius: 7px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

    .btn-submit:hover {
        background: var(--navy-mid);
        transform: translateY(-1px);
    }

    .btn-submit:active {
        transform: translateY(0);
    }

.divider-text {
    text-align: center;
    color: #000;
    font-size: 14px;
    margin: 20px 0;
    position: relative;
    font-family: cursive;
    font-weight: 600;
}

    .divider-text::before,
    .divider-text::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 38%;
        height: 1px;
        background: #e5e7eb;
    }

    .divider-text::before {
        left: 0;
    }

    .divider-text::after {
        right: 0;
    }

.register-link {
    text-align: center;
    font-size: 0.85rem;
    color: #000;
    font-family: cursive;
}

    .register-link a {
        color: var(--gold);
        font-weight: 600;
        text-decoration: none;
    }

        .register-link a:hover {
            text-decoration: underline;
        }


.error-msg {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: var(--error);
    font-size: 0.82rem;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 18px;
    display: none;
}

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

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

.roles {
    display: flex;
    gap: 8px;
    margin: 20px 0 16px;
    flex-wrap: wrap;
}

.role-btn {
    flex: 1;
    min-width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 4px 8px;
    border: 2px solid #385c7b42;
    border-radius: 10px;
    background: var(--off-white);
    cursor: pointer;
    font-size: 0.7rem;
    color: var(--text-mid);
    font-weight: 600;
    transition: border-color .2s, background .2s, color .2s, box-shadow .2s;
}

    .role-btn .role-icon {
        font-size: 1.5rem;
    }

    .role-btn:hover,
    .role-btn.active {
        border-color: var(--blue);
        background: #eef2fb;
        color: #0b1f3a;
        box-shadow: 0 2px 8px rgb(24 64 154 / 24%);
    }

    .role-btn.active {
        border: 2px solid #004581;
    }






/* REGISTER_PAGE */

main {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.register-box {
    background: var(--white);
    border-radius: 14px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 760px;
    overflow: visible;
    animation: fadeUp 0.55s ease both;
}

.steps-bar {
    /*    background: #9b1c1c;*/
    background: linear-gradient(175deg, #1e3444 0%, #2a5270 50%, #24394f 100%);
    padding: 22px 40px;
    display: flex;
    align-items: center;
    gap: 0;
}

.step {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.step-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 700;
    transition: all 0.3s;
    flex-shrink: 0;
}

.step.active .step-num {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--white);
}

.step.done .step-num {
    background: #006a25;
    border-color: #ffc107;
    color: #ffffff;
}

.step-label {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.06em;
    font-weight: 600;
}

.step.active .step-label {
    color: var(--white);
}

.step.done .step-label {
    color: rgba(255, 255, 255, 0.7);
}

.step-connector {
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 12px;
}

.form-body {
    padding: 15px 48px;
    max-height: 530px;
    overflow-y: auto;
    scroll-behavior: smooth;
    height: 530px;
    scrollbar-width: 0px;
}

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


.step-heading {
    margin-bottom: 28px;
}

    .step-heading h2 {
        font-size: 1.5rem;
        color: var(--navy);
    }

    .step-heading p {
        font-size: 0.84rem;
        color: var(--muted);
        margin-top: 5px;
    }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.form-group {
    margin-bottom: 18px;
}

label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: 0.05em;
    margin-bottom: 7px;
}

input,
select,
textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 7px;
    font-size: 0.9rem;
    color: #fff;
    background: #5a2d0c;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

    input:focus,
    select:focus,
    textarea:focus {
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(201, 151, 58, 0.15);
        background: var(--white);
        color: #000;
    }

    input.invalid {
        border-color: var(--error);
    }

textarea {
    resize: vertical;
    min-height: 80px;
}

.hint {
    font-size: 0.72rem;
    color: var(--muted);
    margin-top: 5px;
}

.full-width {
    grid-column: 1 / -1;
}

.strength-bar {
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}

.strength-fill {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    transition: width 0.3s, background 0.3s;
}

.strength-text {
    font-size: 0.72rem;
    margin-top: 4px;
    color: var(--muted);
}

.terms-box {
    background: var(--cream);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 20px;
}

    .terms-box p {
        font-size: 0.8rem;
        color: var(--muted);
        line-height: 1.6;
    }

.check-label {
    align-items: flex-start;
    cursor: pointer;
    font-size: 0.84rem;
    color: var(--text);
}

    .check-label input[type="checkbox"] {
        width: auto;
        margin-top: 2px;
        flex-shrink: 0;
        accent-color: var(--navy);
    }


.btn-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
    gap: 12px;
}

.btn-back {
    background: transparent;
    border: 1.5px solid #d1d5db;
    color: var(--muted);
    padding: 11px 26px;
    border-radius: 7px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

    .btn-back:hover {
        border-color: var(--navy);
        color: var(--navy);
    }

.btn-next {
    background: var(--gold);
    border: none;
    color: var(--white);
    padding: 11px 32px;
    border-radius: 7px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

    .btn-next:hover {
        background: #b8872e;
        transform: translateY(-1px);
    }

.btn-submit {
    /*    background: var(--navy);*/
    /*    background: linear-gradient(175deg, var(--crimson-deep) 0%, var(--crimson) 50%, #7B1A1A 100%);*/
    background: #8a1223;
    border: none;
    color: var(--white);
    padding: 12px 36px;
    border-radius: 7px;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.2s;
}

    .btn-submit:hover {
        /*        background: var(--navy-mid);*/
        /*        background: linear-gradient(175deg, var(--crimson-deep) 0%, var(--crimson) 50%, #7B1A1A 100%);*/
        background: #861322;
    }

/* Error */
.alert {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.82rem;
    margin-bottom: 16px;
    display: none;
}

.alert-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: var(--error);
}

/* Success overlay */
.success-screen {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 64px 48px;
}

.success-icon {
    width: 72px;
    height: 72px;
    background: #007a2a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    margin-bottom: 22px;
    color: #fff;
}

.success-screen h2 {
    font-size: 1.7rem;
    color: var(--navy);
    margin-bottom: 12px;
}

.success-screen p {
    font-size: 0.9rem;
    color: var(--muted);
    margin-bottom: 28px;
    line-height: 1.6;
}

.success-screen a {
    display: inline-block;
    background: var(--navy);
    color: var(--white);
    padding: 12px 32px;
    border-radius: 7px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.05em;
}

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

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



/* DASHBOARD_PAGE */

:root {
    --crimson: #9B1C1C;
    --crimson-deep: #6B0F0F;
    --crimson-light: #C53030;
    --gold: #C9962A;
    --gold-light: #F0C060;
    --gold-pale: #FDF3DC;
    --ink: #1A1A2E;
    --ink-mid: #2D2D44;
    --slate: #4A5568;
    --mist: #EDF2F7;
    --white: #FFFFFF;
    --surface: #F7F8FC;
    --border: #E2E8F0;
    --success: #276749;
    --success-bg: #F0FFF4;
    --warning: #975A16;
    --warning-bg: #FFFAF0;
    --alert-red: #C53030;
    --alert-bg: #FFF5F5;
    --sidebar-w: 260px;
}



.sidebar {
    width: 260px;
    min-height: 100vh;
    background: linear-gradient(175deg, var(--crimson-deep) 0%, var(--crimson) 50%, #7B1A1A 100%);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    box-shadow: 4px 0 24px rgba(155, 28, 28, .25);
}

    .sidebar::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        pointer-events: none;
    }

.logo-area {
    padding: 28px 24px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    width: 65px;
    height: 65px;
    background: rgba(255, 255, 255, .15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .2);
    flex: 0 0 65px;
}

    .logo-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 5px;
    }

.logo_anch {
    position: relative;
    text-decoration: none;
}

.logo-text h2 {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .3px;
}

.logo-text span {
    color: rgba(255, 255, 255, .55);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
}

.nav-label {
    padding: 24px 24px 8px;
    color: rgba(255, 255, 255, .4);
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 600;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    margin: 2px 12px;
    border-radius: 10px;
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
}

    .nav-item:hover {
        background: rgba(255, 255, 255, .08);
        color: #fff;
    }

    .nav-item.active {
        background: rgba(255, 255, 255, .18);
        color: #fff;
        box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
    }

    .nav-item .icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: rgba(255, 255, 255, .1);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        flex-shrink: 0;
    }

    .nav-item.active .icon {
        background: rgba(255, 255, 255, .2);
    }

.sidebar-footer {
    margin-top: auto;
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: var(--crimson-deep);
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, .3);
}

.user-info h4 {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    margin: 0px;
    min-width: 130px;
    word-wrap: break-word;
}

.user-info span {
    color: rgba(255, 255, 255, .5);
    font-size: 11px;
}

.power-btn {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border: none;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .6);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all .2s;
    text-decoration: none;
    flex: 0 0 30px;
}

    .power-btn:hover {
        background: rgba(255, 255, 255, .2);
        color: #fff;
    }

.main {
    margin-left: 260px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #f7f4ef;
}

.topbar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 0 32px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .05);
    /*! background: #f7f4ef; */
}

.topbar-left h1 {
    font-size: 22px;
    color: var(--ink);
    font-weight: 700;
}

.breadcrumb {
    font-size: 12px;
    color: var(--slate);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    display: none;
}

    .breadcrumb span {
        color: var(--crimson);
        font-weight: 500;
    }

.topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.date-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--slate);
    font-weight: 500;
}

.icon-btn {
    width: 42px;
    height: 42px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    position: relative;
    transition: all .2s;
}

    .icon-btn:hover {
        background: var(--mist);
    }

.notif-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 7px;
    height: 7px;
    background: var(--gold);
    border-radius: 50%;
    border: 1.5px solid var(--white);
}

.wrapper {
    position: relative;
    padding: 0 30px;
    background: #f7f4ef;
}

.content {
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 100vh;
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    width: 100%;
}

.stat-card {
    background: var(--white);
    border-radius: 16px;
    padding: 22px 24px;
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}

    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(0, 0, 0, .09);
    }

    .stat-card::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 80px;
        border-radius: 0 16px 0 80px;
        opacity: .06;
    }

    .stat-card.cases::after {
        background: var(--crimson);
    }

    .stat-card.comp::after {
        background: var(--success);
    }

    .stat-card.hearing::after {
        background: var(--gold);
    }

    .stat-card.pending::after {
        background: var(--slate);
    }

.stat-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--slate);
    margin-bottom: 10px;
}

.stat-value {
    font-size: 30px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 10px;
}

.stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}

.badge-up {
    background: var(--success-bg);
    color: var(--success);
}

.badge-down {
    background: #FFF5F5;
    color: var(--alert-red);
}

.stat-icon {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.stat-card.cases .stat-icon {
    background: #FFF5F5;
}

.stat-card.comp .stat-icon {
    background: var(--success-bg);
}

.stat-card.hearing .stat-icon {
    background: var(--gold-pale);
}

.stat-card.pending .stat-icon {
    background: var(--mist);
}

.mid-row {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    width: 100%;
}

.infographic-card {
    background: var(--white);
    border-radius: 16px;
    border: 1px solid var(--border);
    padding: 24px;
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.card-title {
    font-size: 20px;
    font-weight: 700;
    text-transform: capitalize;
    background: linear-gradient(to bottom, #ff3a25, #8e1b14);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.card-subtitle {
    font-size: 12px;
    color: var(--slate);
    margin-top: 2px;
}

.view-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--crimson);
    cursor: pointer;
    text-decoration: none;
    padding: 6px 14px;
    border: 1px solid rgba(155, 28, 28, .2);
    border-radius: 20px;
    transition: all .2s;
}

    .view-link:hover {
        background: var(--crimson);
        color: #fff;
    }

.donut-section {
    display: flex;
    align-items: center;
    gap: 32px;
}

.donut-wrap {
    position: relative;
    flex-shrink: 0;
}

    .donut-wrap svg {
        display: block;
    }

.donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .donut-center .big {
        font-size: 18px;
        font-weight: 700;
        color: var(--ink);
    }

    .donut-center .lbl {
        font-size: 10px;
        color: var(--slate);
        font-weight: 500;
        letter-spacing: .5px;
        text-transform: uppercase;
    }

.legend-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.legend-name {
    font-size: 13px;
    color: var(--slate);
    flex: 1;
}

.legend-count {
    font-family: 'DM Mono', monospace;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}

.legend-pct {
    font-size: 11px;
    color: var(--slate);
    margin-left: 4px;
}

.legend-bar-wrap {
    width: 80px;
    height: 5px;
    background: var(--mist);
    border-radius: 3px;
    overflow: hidden;
}

.legend-bar {
    height: 100%;
    border-radius: 3px;
    transition: width .8s cubic-bezier(.4, 0, .2, 1);
}

.actions-card {
    background: var(--white);
    border-radius: 16px;
    border: 1px solid var(--border);
    padding: 24px;
}

.action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.action-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    cursor: pointer;
    transition: all .22s;
    gap: 10px;
    background: var(--surface);
}

    .action-btn:hover {
        border-color: var(--crimson);
        background: var(--white);
        box-shadow: 0 4px 16px rgba(155, 28, 28, .1);
        transform: translateY(-1px);
    }

    .action-btn .a-icon {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .action-btn .a-label {
        font-size: 13px;
        font-weight: 600;
        color: var(--ink);
    }

    .action-btn .a-desc {
        font-size: 11px;
        color: var(--slate);
        margin-top: 2px;
    }

.charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    width: 100%;
}

.bars-chart {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 4px;
}

.bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bar-label {
    font-size: 12px;
    color: var(--slate);
    width: 110px;
    flex-shrink: 0;
    text-align: right;
}

.bar-track {
    flex: 1;
    height: 28px;
    background: var(--mist);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.bar-fill {
    height: 100%;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: #fff;
    font-weight: 500;
    transition: width 1s cubic-bezier(.4, 0, .2, 1);
    position: relative;
}

.sparkline-wrap {
    margin-top: 8px;
}

.spark-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--slate);
    margin-top: 6px;
    font-family: 'DM Mono', monospace;
}

.alerts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
}

.alert-card {
    border-radius: 16px;
    border: 1px solid;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}

    .alert-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(0, 0, 0, .1);
    }

    .alert-card.urgent {
        border-color: rgba(197, 48, 48, .25);
        background: #FFFBFB;
    }

    .alert-card.scheduled {
        border-color: rgba(201, 150, 42, .25);
        background: #FFFDF5;
    }

.alert-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid;
}

.alert-card.urgent .alert-header {
    border-color: rgba(197, 48, 48, .15);
    background: rgba(197, 48, 48, .04);
}

.alert-card.scheduled .alert-header {
    border-color: rgba(201, 150, 42, .15);
    background: rgba(201, 150, 42, .04);
}

.alert-badge-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pulse-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

    .pulse-dot.red {
        background: var(--alert-red);
    }

    .pulse-dot.gold {
        background: var(--gold);
    }

    .pulse-dot::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        animation: pulse 2s infinite;
    }

    .pulse-dot.red::after {
        border: 2px solid var(--alert-red);
    }

    .pulse-dot.gold::after {
        border: 2px solid var(--gold);
    }

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: .8;
    }

    70% {
        transform: scale(1.6);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.alert-type {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.urgent .alert-type {
    color: var(--alert-red);
}

.scheduled .alert-type {
    color: var(--gold);
}

.alert-pill {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}

.urgent .alert-pill {
    background: rgba(197, 48, 48, .1);
    color: var(--alert-red);
}

.scheduled .alert-pill {
    background: rgba(201, 150, 42, .1);
    color: var(--gold);
}

.time-chip {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
}

.urgent .time-chip {
    background: var(--ink);
    color: #fff;
}

.scheduled .time-chip {
    background: var(--gold);
    color: #fff;
}

.alert-body {
    padding: 18px;
}

.case-meta {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--slate);
    margin-bottom: 8px;
}

    .case-meta span {
        color: var(--crimson);
    }

.case-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
    line-height: 1.35;
}

.case-desc {
    font-size: 12px;
    color: var(--slate);
    line-height: 1.6;
    margin-bottom: 16px;
}

.tags-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.tag {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--mist);
    color: var(--slate);
    border: 1px solid var(--border);
}

.view-case-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .2s;
}

.urgent .view-case-btn {
    background: var(--crimson);
    color: #fff;
}

    .urgent .view-case-btn:hover {
        background: var(--crimson-deep);
    }

.scheduled .view-case-btn {
    background: var(--gold);
    color: #fff;
}

    .scheduled .view-case-btn:hover {
        background: var(--warning);
    }

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

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

.stat-card {
    animation: fadeUp .4s ease both;
}

    .stat-card:nth-child(1) {
        animation-delay: .05s;
    }

    .stat-card:nth-child(2) {
        animation-delay: .1s;
    }

    .stat-card:nth-child(3) {
        animation-delay: .15s;
    }

    .stat-card:nth-child(4) {
        animation-delay: .2s;
    }

.infographic-card,
.actions-card,
.charts-row > *,
.alert-card {
    animation: fadeUp .5s ease both;
}

.docs-tag {
    background: rgba(201, 150, 42, .12);
    color: var(--warning);
    border-color: rgba(201, 150, 42, .2);
}




/* ADVOCATE_DASHBOARD_PAGE */

.stat-card.cases::after {
    background: var(--crimson);
}

.stat-card.hearing::after {
    background: var(--success);
}

.stat-card.pending::after {
    background: var(--gold);
}

.stat-card.reports::after {
    background: var(--slate);
}

.badge-gold {
    background: var(--gold-pale);
    color: var(--warning);
}

.stat-card.cases .stat-icon {
    background: #FFF5F5;
}

.stat-card.hearing .stat-icon {
    background: var(--success-bg);
}

.stat-card.pending .stat-icon {
    background: var(--gold-pale);
}

.stat-card.reports .stat-icon {
    background: var(--mist);
}

.infographic-card,
.actions-card {
    background: var(--white);
    border-radius: 16px;
    border: 1px solid var(--border);
    padding: 24px;
}


/* INSURANCE_DASHBOARD_PAGE */

.stats-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    width: 100%;
}

.action-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.action-row-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    transition: all .22s;
    text-decoration: none;
}

    .action-row-btn:hover {
        border-color: var(--crimson);
        background: var(--white);
        box-shadow: 0 4px 16px rgba(155, 28, 28, .1);
        transform: translateX(3px);
    }

    .action-row-btn .a-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
    }

    .action-row-btn .a-text .a-label {
        font-size: 13px;
        font-weight: 600;
        color: var(--ink);
    }

    .action-row-btn .a-text .a-desc {
        font-size: 11px;
        color: var(--slate);
        margin-top: 2px;
    }

    .action-row-btn .a-arrow {
        margin-left: auto;
        color: var(--slate);
        font-size: 16px;
        transition: transform .2s;
    }

    .action-row-btn:hover .a-arrow {
        transform: translateX(4px);
        color: var(--crimson);
    }


.case-action-card {
    background: var(--white);
    border-radius: 16px;
    border: 1px solid var(--border);
    padding: 24px;
    overflow: hidden;
}

.case-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}

.active-pill {
    display: inline-flex;
    align-items: center;
    background: var(--success-bg);
    color: var(--success);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    float: right;
}

.case-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}

.case-meta2 {
    font-size: 11px;
    color: var(--slate);
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

    .case-meta2 span {
        display: flex;
        align-items: center;
        gap: 4px;
    }

.card {
    background: var(--white);
    border-radius: 16px;
    border: 1px solid var(--border);
    padding: 24px;
    overflow: hidden;
}

.case-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--gold);
}

.active-pill {
    background: var(--success-bg);
    color: var(--success);
}

.prog-section {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.prog-label-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

    .prog-label-row span:first-child {
        font-size: 12px;
        color: var(--slate);
    }

    .prog-label-row span:last-child {
        font-size: 12px;
        font-weight: 600;
        color: var(--ink);
    }

.prog-track {
    height: 7px;
    background: var(--mist);
    border-radius: 4px;
    overflow: hidden;
}

.prog-fill {
    height: 100%;
    border-radius: 4px;
}



.deposit-alert {
    border-radius: 16px;
    border: 1px solid rgba(201, 150, 42, .3);
    background: #FFFDF5;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}

    .deposit-alert:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(0, 0, 0, .1);
    }

.deposit-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid rgba(201, 150, 42, .15) !important;
    background: rgba(201, 150, 42, .05);
    color: #000;
}

.dep-badge-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pulse-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

    .pulse-dot.gold {
        background: var(--gold);
    }

        .pulse-dot.gold::after {
            content: '';
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            border: 2px solid var(--gold);
            animation: pulse 2s infinite;
        }

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: .8;
    }

    70% {
        transform: scale(1.6);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.dep-type {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold);
}

.dep-pill {
    background: rgba(201, 150, 42, .1);
    color: var(--gold);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}

.dep-time-wrap {
    text-align: right;
}

.dep-time {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--gold);
    color: #fff;
}

.dep-date {
    font-size: 10px;
    color: var(--slate);
    margin-top: 4px;
}

.deposit-body {
    padding: 18px;
}

.dep-case-meta {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--slate);
    margin-bottom: 8px;
}

    .dep-case-meta span {
        color: var(--crimson);
    }

.dep-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
    line-height: 1.35;
}

.dep-desc {
    font-size: 12px;
    color: var(--slate);
    line-height: 1.6;
    margin-bottom: 16px;
}

.dep-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.dep-tag {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
}

    .dep-tag.due {
        background: rgba(201, 150, 42, .12);
        color: var(--warning);
        border: 1px solid rgba(201, 150, 42, .2);
    }

    .dep-tag.pend {
        background: var(--mist);
        color: var(--slate);
        border: 1px solid var(--border);
    }

.view-dep-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: var(--gold);
    color: #fff;
    transition: all .2s;
}

    .view-dep-btn:hover {
        background: var(--warning);
    }

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

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






/* TRIBUNAL_DASHBOARD_PAGE  */

.card_action {
    background: var(--white);
    border-radius: 14px;
    border: 1px solid var(--border);
    padding: 22px;
    overflow: hidden;
    animation: fadeUp .5s ease both;
}

.card-title_action {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
}

.card-subtitle_action {
    font-size: 11px;
    color: var(--slate);
    margin-bottom: 18px;
}

.qa-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.qa-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
}

    .qa-btn:hover {
        border-color: #c0392b;
        background: #fff0ee;
        box-shadow: 0 4px 14px rgba(155, 28, 28, .1);
    }

.qa-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--mist);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.qa-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
}



.status-cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    width: 100%;
}

.status-card {
    border-radius: 14px;
    border: 1px solid var(--border);
    overflow: hidden;
    background: var(--white);
    animation: fadeUp .5s ease both;
    transition: transform .2s, box-shadow .2s;
}

    .status-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(0, 0, 0, .09);
    }

.sc-header {
    padding: 12px 16px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
}

.sc-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--slate);
}

.sc-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
}

.scb-gold {
    background: var(--gold);
    color: #fff;
}

.scb-blue {
    background: var(--blue);
    color: #fff;
}

.scb-slate {
    background: var(--slate);
    color: #fff;
}

.sc-body {
    padding: 16px;
}

.sc-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 14px;
}


.comp-amount-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--slate);
    margin-bottom: 5px;
}

.comp-date-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 14px;
}

.comp-amount {
    font-size: 26px;
    font-weight: 700;
    color: var(--ink);
}

    .comp-amount sup {
        font-size: 14px;
    }

.comp-date-box {
    text-align: right;
}

.comp-date-label {
    font-size: 9px;
    color: var(--slate);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.comp-date-val {
    font-size: 12px;
    font-weight: 700;
    color: var(--crimson);
}

.tag-row {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 7px;
    background: var(--mist);
    color: var(--slate);
    border: 1px solid var(--border);
}


.dep-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.dep-box {
    border-radius: 10px;
    padding: 12px;
}

.dep-box-green {
    background: var(--success-bg);
}

.dep-box-red {
    background: #FFF5F5;
}

.dep-box-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 5px;
}

.dep-box-green .dep-box-label {
    color: var(--success);
}

.dep-box-red .dep-box-label {
    color: var(--crimson-light);
}

.dep-box-val {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 4px;
}

.dep-box-sub {
    font-size: 10px;
    color: var(--slate);
}

.prog-label-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

    .prog-label-row span:first-child {
        font-size: 11px;
        color: var(--slate);
    }

    .prog-label-row span:last-child {
        font-size: 11px;
        font-weight: 700;
        color: var(--ink);
    }

.prog-track {
    height: 6px;
    background: var(--mist);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.prog-fill {
    height: 100%;
    border-radius: 4px;
}

.prog-note {
    font-size: 10px;
    color: var(--slate);
    display: flex;
    align-items: center;
    gap: 5px;
}


.disb-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.disb-box {
    border-radius: 10px;
    padding: 12px;
}

.disb-box-teal {
    background: #EBF8FF;
}

.disb-box-pink {
    background: #FFF5F5;
}

.disb-box-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 5px;
}

.disb-box-teal .disb-box-label {
    color: var(--blue);
}

.disb-box-pink .disb-box-label {
    color: var(--crimson-light);
}

.disb-box-val {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 4px;
}

.disb-box-sub {
    font-size: 10px;
    color: var(--slate);
}


.alert-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .1);
}

.alert-card.gold-alert {
    border-color: rgba(201, 150, 42, .25);
}

.alert-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
}

.alert-card:not(.gold-alert) .alert-header {
    background: rgba(155, 28, 28, .04);
    border-bottom: 1px solid rgba(155, 28, 28, .1);
}

.alert-card.gold-alert .alert-header {
    background: rgba(201, 150, 42, .04);
    border-bottom: 1px solid rgba(201, 150, 42, .12);
}

.alert-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pulse-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

    .pulse-dot.red {
        background: var(--crimson-light);
    }

    .pulse-dot.gold {
        background: var(--gold);
    }

    .pulse-dot.red::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 2px solid var(--crimson-light);
        animation: pulse 2s infinite;
    }

    .pulse-dot.gold::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 2px solid var(--gold);
        animation: pulse 2s infinite;
    }

.alert-type {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

    .alert-type.red {
        color: var(--crimson-light);
    }

    .alert-type.gold {
        color: var(--gold);
    }

.alert-status-pill {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
}

.pill-red {
    background: rgba(155, 28, 28, .08);
    color: var(--crimson-light);
    border: 1px solid rgba(155, 28, 28, .15);
}

.pill-gold {
    background: rgba(201, 150, 42, .1);
    color: var(--warning);
    border: 1px solid rgba(201, 150, 42, .2);
}

.alert-time-wrap {
    text-align: right;
}

.alert-time {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 6px;
    color: #fff;
    display: inline-block;
}

.at-dark {
    background: var(--ink);
}

.at-gold {
    background: var(--gold);
}

.alert-date {
    font-size: 10px;
    color: var(--slate);
    margin-top: 3px;
}

.alert-body {
    padding: 16px;
    background: var(--white);
}

.alert-case-meta {
    font-size: 10px;
    font-weight: 700;
    color: var(--crimson);
    margin-bottom: 6px;
}

    .alert-case-meta span {
        color: var(--slate);
        font-weight: 400;
    }

.alert-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
    line-height: 1.35;
}

.alert-desc {
    font-size: 11px;
    color: var(--slate);
    line-height: 1.65;
    margin-bottom: 14px;
}

.alert-tags {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.alert-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 7px;
}

.at-dark-tag {
    background: var(--ink);
    color: #fff;
}

.at-muted {
    background: var(--mist);
    color: var(--slate);
    border: 1px solid var(--border);
}

.at-gold-tag {
    background: rgba(201, 150, 42, .1);
    color: var(--warning);
    border: 1px solid rgba(201, 150, 42, .2);
}

.view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .2s;
}

.btn-crimson {
    background: var(--crimson);
    color: #fff;
}

    .btn-crimson:hover {
        background: var(--crimson-deep);
    }

.btn-gold {
    background: var(--gold);
    color: #fff;
}

    .btn-gold:hover {
        background: var(--warning);
    }

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

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

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: .8;
    }

    70% {
        transform: scale(1.6);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}






/* BANK_DASHBOARD_PAGE */

.deposit-overview {
    background: var(--card);
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 20px;
}

.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

    .card-header h3 {
        font-size: 14px;
        font-weight: 700;
    }

    .card-header p {
        font-size: 11px;
        color: var(--text3);
        margin-top: 2px;
    }

.view-report {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}

.donut-row {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 20px;
}

.donut-wrap {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

    .donut-wrap svg {
        width: 100%;
        height: 100%;
    }

.donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .donut-center span {
        font-size: 18px;
        font-weight: 700;
    }

    .donut-center small {
        font-size: 9px;
        color: var(--text3);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.legend-label {
    font-size: 12px;
    color: var(--text2);
    flex: 1;
}

.legend-val {
    font-size: 12px;
    font-weight: 600;
}

.legend-pct {
    font-size: 11px;
    color: var(--text3);
    margin-left: 4px;
}

.section-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text3);
    margin-bottom: 10px;
}

.completion-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cb-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cb-label {
    font-size: 11px;
    color: var(--text2);
    width: 80px;
    flex-shrink: 0;
}

.cb-track {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.cb-fill {
    height: 100%;
    border-radius: 10px;
}

.cb-pct {
    font-size: 11px;
    font-weight: 600;
    color: var(--text2);
    width: 28px;
    text-align: right;
}


.quick-panel {
    background: var(--card);
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

    .quick-panel h3 {
        font-size: 14px;
        font-weight: 700;
    }

    .quick-panel p {
        font-size: 11px;
        color: var(--text3);
        margin-top: 1px;
    }

.qa-btn {
    background: var(--bg);
    border-radius: 10px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
}

    .qa-btn:hover {
        border-color: var(--accent);
        background: var(--red-light);
    }

.qa-btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.qa-btn-text {
    flex: 1;
}

    .qa-btn-text h4 {
        font-size: 12px;
        font-weight: 600;
    }

    .qa-btn-text p {
        font-size: 10px;
        color: var(--text3);
        margin-top: 1px;
    }

.qa-btn-arrow {
    color: var(--text3);
    font-size: 14px;
}


.active-case-chip {
    background: var(--bg);
    border-radius: 10px;
    border: 1px solid var(--border);
    padding: 12px 14px;
}

.chip-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.chip-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent2);
}

.chip-active {
    font-size: 9px;
    font-weight: 600;
    color: var(--green);
    background: var(--green-light);
    border-radius: 20px;
    padding: 2px 7px;
}

.chip-case-name {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
}

.chip-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.chip-tag {
    font-size: 10px;
    color: var(--text3);
    background: var(--tag-bg);
    border-radius: 4px;
    padding: 2px 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.chip-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chip-action-btn {
    background: var(--green-light);
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.15s;
}

    .chip-action-btn:hover {
        background: #d0eedd;
    }

    .chip-action-btn .icon {
        font-size: 13px;
    }

    .chip-action-btn h5 {
        font-size: 11px;
        font-weight: 600;
        color: var(--green);
    }

    .chip-action-btn p {
        font-size: 10px;
        color: var(--text3);
        margin-top: 1px;
    }

    .chip-action-btn .arrow {
        margin-left: auto;
        color: var(--green);
        font-size: 12px;
    }


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

.court-dist {
    background: var(--card);
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 20px;
}

.court-bars {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 4px;
}

.court-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.court-label {
    font-size: 11px;
    color: var(--text2);
    width: 68px;
    flex-shrink: 0;
}

.court-track {
    flex: 1;
    height: 22px;
    background: var(--border);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.court-fill {
    height: 100%;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    transition: width 0.6s ease;
}

    .court-fill span {
        font-size: 11px;
        font-weight: 700;
        color: #fff;
    }


.weekly {
    background: var(--card);
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 20px;
}

.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 90px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.bar-group {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 3px;
}

.bar {
    flex: 1;
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: height 0.4s;
}

    .bar.completed {
        background: #2c3e50;
    }

    .bar.pending {
        background: #d4a017;
        opacity: 0.85;
    }

.bar-days {
    display: flex;
    gap: 8px;
}

.bar-day {
    flex: 1;
    text-align: center;
    font-size: 10px;
    color: var(--text3);
}

.bar-legend {
    display: flex;
    gap: 14px;
    margin-top: 6px;
}

.bl-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text2);
}

.bl-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}




/* FORGOT_PASSWORD_PAGE */

.resets-link {
    background: #0b1f3a;
    border: none;
    color: #FFFFFF;
    padding: 12px 36px;
    border-radius: 7px;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    display: flex;
    width: 230px;
    object-fit: contain;
    position: relative;
    top: 10px;
}

    .resets-link:hover {
        background: #163261;
        transform: translateY(-1px);
    }

.forgot-pannel {
    position: relative;
    top: 80px;
}











/* WELCOMEPAGE_RESPONSIVE */

@media (max-width: 768px) {
    .floating-header {
        flex-direction: column-reverse;
    }

    .hdr-acc {
        position: relative;
        left: 45px;
    }

    .hdr-brand {
        flex-direction: column;
        position: relative;
        top: 15px;
    }

    .brand-info p {
        font-size: 10px;
    }

    .hero {
        top: 30px;
    }

    .courthouse-wrap img {
        width: 90px;
    }

    .eyebrow {
        font-size: 8px;
    }

    .dot {
        display: none;
    }

    .login-wrapper {
        flex-direction: column;
    }

    .panel-left {
        flex: 0;
    }

        .panel-left .emblem {
            margin-bottom: 0px;
        }

    main {
        top: 35px;
    }
}







* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
}

:root {
    --primary: #7b1113;
    --primary-dark: #5b0d0f;
    --primary-light: #a12226;
    --gold: #d4af37;
    --gold-soft: #f6e7a8;
    --navy: #14213d;
    --text: #1b2430;
    --muted: #6b7280;
    --white: #ffffff;
    --bg: #f5f7fb;
    --border: rgba(123, 17, 19, 0.12);
    --shadow: 0 20px 60px rgba(20, 33, 61, 0.14);
    --radius-xl: 28px;
    --radius-lg: 18px;
    --radius-md: 14px;
}


.page-shell {
    position: relative;
    padding: 20px 0;
}

    .page-shell:before,
    .page-shell:after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(10px);
        opacity: 0.45;
        z-index: 0;
    }

    .page-shell:before {
        width: 280px;
        height: 280px;
        background: rgba(212, 175, 55, 0.16);
        top: 30px;
        left: 30px;
    }

    .page-shell:after {
        width: 320px;
        height: 320px;
        background: rgba(123, 17, 19, 0.10);
        bottom: 20px;
        right: 20px;
    }

.portal-wrap {
    max-width: 900px;
    margin: 0 auto;
    min-height: calc(100vh - 200px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.65);
    border-radius: 32px;
    overflow: hidden;
    box-shadow: var(--shadow);
    position: relative;
    z-index: 1;
}

.login-left {
    position: relative;
    padding: 54px 48px;
    background: linear-gradient(180deg, rgba(20,33,61,0.06), rgba(20,33,61,0.02)), linear-gradient(140deg, #7b1113 0%, #8e171a 36%, #4d0b0d 100%);
    color: #fff;
    overflow: hidden;
}

    .login-left:before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.12), transparent 22%), radial-gradient(circle at 80% 25%, rgba(212,175,55,0.18), transparent 20%), radial-gradient(circle at 50% 100%, rgba(255,255,255,0.09), transparent 30%);
        pointer-events: none;
    }

    .login-left:after {
        content: "⚖";
        position: absolute;
        right: -22px;
        bottom: -34px;
        font-size: 220px;
        line-height: 1;
        color: rgba(255,255,255,0.06);
        font-family: serif;
        pointer-events: none;
    }

.login-left-content {
    position: relative;
    z-index: 2;
    max-width: 560px;
}

.login-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.10);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 28px;
}

.login-logo-wrap {
    width: 86px;
    height: 86px;
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255,255,255,0.24), rgba(255,255,255,0.08));
    border: 1px solid rgba(255,255,255,0.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

    .login-logo-wrap svg {
        width: 54px;
        height: 54px;
    }

.login-brand {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1.1;
    margin-bottom: 10px;
    text-align: center;
}

    .login-brand span {
        color: var(--gold-soft);
    }

.login-tagline {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255,255,255,0.88);
    max-width: 500px;
    margin-bottom: 0px;
    text-align: center
}

.feature-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 18px;
    color: #fff;
}

.info-strips {
    display: grid;
    gap: 16px;
}

.info-strip {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(8px);
}

.strip-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.07));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

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

.strip-text strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #fff;
}

.strip-text span {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255,255,255,0.78);
}

.trust-note {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.trust-chip {
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 12px;
    color: rgba(255,255,255,0.90);
    font-weight: 600;
}

.login-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.88));
}

.login-form-box {
    width: 100%;
    max-width: 500px;
    background: #fff;
    border-radius: 28px;
    padding: 15px 20px 15px;
    border: 1px solid rgba(20,33,61,0.06);
    box-shadow: 0 14px 40px rgba(20, 33, 61, 0.08);
}

.login-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

    .login-topbar .mini-badge {
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(123, 17, 19, 0.08);
        color: var(--primary);
        font-size: 12px;
        font-weight: 700;
        border: 1px solid rgba(123, 17, 19, 0.10);
    }

.login-form-box h2 {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
    /*    color: #1d3b7b;*/
    /*    color: #761212;*/
    color: #9a1c3c;
    margin-bottom: 8px;
}

.login-form-box p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
    margin-bottom: 0px;
}

.formcontainer,
.login-form-section,
.login-formsec {
    width: 100%;
}

.form-group {
    margin-bottom: 18px;
    position: relative;
}

.form-label {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 9px;
    letter-spacing: 0.2px;
}

.form-input-wrap {
    position: relative;
}

.icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    opacity: 0.80;
    pointer-events: none;
    z-index: 22222;
}

.form-input,
.form-control,
input[type="text"],
input[type="password"] {
    width: 100%;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #20394b7d;
    background: #eee;
    outline: none;
    padding: 0 15px 0 48px;
    font-size: 13px;
    color: var(--text);
    transition: all 0.25s ease;
    font-family: inherit;
    font-weight: 500;
    z-index: 9999;
    position: relative;
}

    .form-input:focus,
    .form-control:focus,
    input[type="text"]:focus,
    input[type="password"]:focus {
        border-color: rgb(20, 33, 61);
        background: #fff;
        box-shadow: 0 0 0 4px rgba(123, 17, 19, 0.08);
    }

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
    -webkit-text-fill-color: #000 !important; /* text color */
    transition: background-color 5000s ease-in-out 0s;
}

.password-wrapper {
    position: relative;
}

    .password-wrapper .form-control {
        padding-right: 48px;
    }

.eye-icon {
    position: absolute;
    right: 16px;
    top: 0;
    transform: translateY(80%);
    font-size: 16px;
    color: #7c8798;
    cursor: pointer;
    z-index: 99999;
    height: 40px;
}

#dvCaptcha {
    margin-top: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.form-options {
    margin-top: 18px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.remember-label {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
    user-select: none;
    padding-left: 25px;
    position: relative;
}

    .remember-label input {
        accent-color: var(--primary);
        position: absolute !important;
        left: -50px !important;
    }

.forgot-link,
.frd-link {
    font-size: 13px;
    font-weight: 600;
    color: #14213d;
    text-decoration: none;
    transition: 0.2s ease;
}

    .forgot-link:hover,
    .frd-link:hover {
        color: #14213d;
        text-decoration: underline;
    }

.btn-login {
    width: 100%;
    height: 56px;
    border: none;
    outline: none;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.3px;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(123, 17, 19, 0.22);
    transition: all 0.25s ease;
}

    .btn-login:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 34px rgba(123, 17, 19, 0.24);
    }

    .btn-login:active {
        transform: translateY(0);
    }

.login-footer-note {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    background: linear-gradient(180deg, #fff8df 0%, #fff3c1 100%);
    border: 1px solid rgba(212, 175, 55, 0.28);
    color: #765907;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
    font-weight: 600;
}

.back-wrap {
    text-align: center;
    margin-top: 22px;
}

.back-link {
    color: #6b7280;
    font-size: 13px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.2s ease;
}

    .back-link:hover {
        color: var(--primary);
    }

.something {
    border-color: #dc2626 !important;
    background: #fff5f5 !important;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.08) !important;
}

#lblMsg,
span[id*="rfvCaptcha"] {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
}

@media (max-width: 1100px) {
    .portal-wrap {
        grid-template-columns: 1fr;
    }

    .login-left {
        padding: 42px 28px;
    }

    .login-right {
        padding: 24px;
    }
}

@media (max-width: 640px) {
    .page-shell {
        padding: 14px;
    }

    .login-left,
    .login-right {
        padding: 20px;
    }

    .login-form-box {
        padding: 24px 18px;
        border-radius: 22px;
    }

    .login-brand {
        font-size: 30px;
    }

    .login-form-box h2 {
        font-size: 24px;
    }

    .form-options {
        align-items: flex-start;
        flex-direction: column;
    }

    #dvCaptcha iframe {
        transform: scale(0.92);
        transform-origin: left top;
    }
}



.new_register_grid {
    position: relative;
    /*max-width: 95%;
    grid-template-columns: 1fr 2fr;*/
    max-width: 65%;
    grid-template-columns: 1fr;
}

    .new_register_grid .panel-left {
        display: none;
    }

    .new_register_grid .login-form-box {
        max-width: 100%;
    }

    .new_register_grid .register_class_sec_forms {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 10px;
        align-items: center;
        border: 1.2px dashed #9a874e;
        padding: 10px;
        border-radius: 5px;
    }

    .new_register_grid .form-group {
        margin-bottom: 10px;
        position: relative;
        height: auto;
    }

    .new_register_grid .form-label {
        height: 22px;
        display: flex;
        align-content: center;
    }

#btnVerify {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 34px;
    right: 5px;
    background: #1d3b7b;
    color: #fff;
    height: 35px;
    padding: 0;
    z-index: 9999;
}

#btnOtpVerify {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 34px;
    right: 5px;
    background: #1d3b7b;
    color: #fff;
    height: 35px;
    padding: 0;
    z-index: 9999;
}

.Bank_text_sec h3 {
    position: relative;
    border-left: 2px solid #284a66;
    padding-left: 10px;
    color: #311404;
    margin: 20px 0 20px 0;
}

.regist_btns {
    position: relative;
    display: flex;
    align-content: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.new_box_bg {
    grid-template-columns: 1fr 1fr 1fr !important;
}

#btnInsert {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1d3b7b;
    color: #fff;
    height: 35px;
    padding: 0;
    top: 7px;
    position: relative;
    cursor: pointer;
}

#ddlDocumentType {
    padding-left: 15px;
}

#fuDocuments {
    padding-left: 15px;
    padding-top: 10px;
}

.text_jpg {
    position: absolute;
    bottom: -20px;
    left: 0;
}

.formcontainer {
    /*height: 400px;
    overflow-y: scroll;*/
    position: relative;
}

#gvDocuments {
    position: relative;
    margin-top: 20px;
    width: 100%;
}

    #gvDocuments th {
        background: linear-gradient(135deg, #1e3c72, #2a5298);
        color: #fff;
        padding: 5px 3px;
        font-size: 14px;
        border: 1px solid #ccc !important;
        text-align: center;
        font-weight: 500;
    }

    #gvDocuments tr td {
        background: #fff;
        color: #fff;
        padding: 5px 3px;
        font-size: 14px;
        color: #000;
        border: 1px solid #ccc !important;
        text-align: center;
        font-weight: 500;
    }



#ContentPlaceHolder1_gvDocuments {
    position: relative;
    margin-top: 20px;
    width: 100%;
}

    #ContentPlaceHolder1_gvDocuments th {
        background: linear-gradient(to bottom, #c0392b, #8e1b14);
        color: #fff;
        padding: 10px 3px;
        font-size: 14px;
        border: 1px solid #ccc !important;
        text-align: center;
        font-weight: 500;
    }

    #ContentPlaceHolder1_gvDocuments tr td {
        background: #fff;
        color: #fff;
        padding: 5px 3px;
        font-size: 14px;
        color: #000;
        border: 1px solid #ccc !important;
        text-align: center;
        font-weight: 500;
    }

    #ContentPlaceHolder1_gvDocuments input {
        padding-left: 0px;
    }


#btnView {
    position: absolute;
    right: 0;
    bottom: 23px;
    width: 70px;
    height: 30px;
    padding: 0;
    right: 10px;
    background: #9a874e;
    color: #fff;
    cursor: pointer;
}

footer {
    position: relative;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #38230a;
    padding: 0 0 0px 0;
    bottom: 20px;
    right: 0px;
    left: 0px;
    display: none;
}


/*Profile and changepassword*/

* ── CONTENT ── */
.content {
    padding: 24px 28px;
    flex: 1;
}


/* ══════════════════════════════════
   PROFILE PAGE
══════════════════════════════════ */
.pro-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Banner card */
.banner-card {
    grid-column: 1/-1;
    background: linear-gradient(175deg, var(--crimson-deep) 0%, var(--crimson) 50%, #7B1A1A 100%);
    border-radius: 12px;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

    .banner-card::before {
        content: '';
        position: absolute;
        right: -40px;
        top: -40px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: rgba(201,150,42,0.12);
    }

    .banner-card::after {
        content: '';
        position: absolute;
        right: 60px;
        bottom: -60px;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background: rgba(255,255,255,0.04);
    }

.banner-left {
    display: flex;
    align-items: center;
    gap: 18px;
    z-index: 1;
}

.avatar-ring {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 500;
    color: var(--crimson-deep);
    border: 3px solid rgba(240,192,96,0.5);
    flex-shrink: 0;
}

.banner-name {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 2px;
}

.banner-role {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    margin-bottom: 8px;
}

.banner-tags {
    display: flex;
    gap: 6px;
}

.btag {
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 20px;
    font-weight: 500;
}

.btag-gold {
    background: rgba(201,150,42,0.22);
    color: var(--gold-light);
}

.btag-green {
    background: rgba(39,103,73,0.3);
    color: #6ee7b7;
}

.banner-stats {
    display: flex;
    gap: 28px;
    z-index: 1;
}

.bstat {
    text-align: center;
}

.bstat-num {
    font-size: 22px;
    font-weight: 500;
    color: var(--gold-light);
}

.bstat-lbl {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    margin-top: 1px;
}

.bstat-div {
    width: 1px;
    background: rgba(255,255,255,0.12);
    align-self: stretch;
}

/* Section label */
.sec-label {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.07em;
    color: var(--crimson);
    text-transform: uppercase;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .sec-label::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--border);
    }

/* Fields */
.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .field-group.full {
        grid-column: 1/-1;
    }

.fl {
    font-size: 11px;
    color: var(--slate);
    font-weight: 500;
}

.fi {
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--ink);
    background: var(--white);
    outline: none;
    width: 100%;
    transition: border-color 0.15s;
}

    .fi:focus {
        border-color: var(--crimson-light);
    }

    .fi.ro {
        background: var(--mist);
        color: var(--slate);
        border-style: dashed;
    }

select.fi {
    appearance: none;
    cursor: pointer;
}

/* Info card */
.info-card {
    background: #9b1c1c12;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
}

/* Action row */
.act-row {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.btn {
    padding: 8px 18px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
}

.btn-p {
    background: linear-gradient(135deg, #A82A20 0%, #FACC15 100%);
    color: #fff;
}

    .btn-p:hover {
        background: var(--crimson-deep);
    }

.btn-o {
    background: #f0dea8;
    color: #731111;
    border: 1px dashed rgb(151, 27, 27);
}

    .btn-o:hover {
        border-color: var(--crimson);
        color: var(--crimson);
    }

/* Timeline */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tl-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

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

.tl-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}

    .tl-dot.green {
        background: var(--success);
    }

    .tl-dot.gold {
        background: var(--gold);
    }

    .tl-dot.red {
        background: var(--crimson-light);
    }

.tl-main {
    flex: 1;
}

.tl-text {
    font-size: 12px;
    color: var(--ink);
}

.tl-time {
    font-size: 11px;
    color: var(--slate);
    margin-top: 2px;
}

/* ══════════════════════════════════
   PASSWORD PAGE
══════════════════════════════════ */
.pwd-layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 20px;
}

/* Steps */
.steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 24px;
}

.step {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.step-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
    border: 2px solid var(--border);
    color: var(--slate);
    background: var(--white);
}

.step.done .step-circle {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

.step.active .step-circle {
    background: var(--crimson);
    border-color: var(--crimson);
    color: #fff;
}

.step-label {
    font-size: 12px;
    color: var(--slate);
}

.step.active .step-label {
    color: var(--crimson);
    font-weight: 500;
}

.step-line {
    flex: 1;
    height: 1px;
    background: var(--border);
    margin: 0 8px;
}

/* Password fields */
.pwd-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pwd-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pwd-iw {
    position: relative;
}

    .pwd-iw .fi {
        padding-right: 42px;
    }

.eye {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--slate);
    font-size: 13px;
    padding: 0;
    display: flex;
    align-items: center;
}

/* Strength meter */
.str-wrap {
    margin-top: 8px;
}

.str-bars {
    display: flex;
    gap: 3px;
    height: 5px;
    margin-bottom: 6px;
}

.sbar {
    flex: 1;
    border-radius: 3px;
    background: var(--border);
    transition: background 0.25s;
}

    .sbar.w {
        background: #E53E3E;
    }

    .sbar.f {
        background: var(--gold);
    }

    .sbar.s {
        background: var(--success);
    }

.str-meta {
    display: flex;
    justify-content: space-between;
}

.str-lbl {
    font-size: 11px;
    color: var(--slate);
}

.str-val {
    font-size: 11px;
    font-weight: 500;
}

/* Match indicator */
.match-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.match-icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 500;
}

    .match-icon.ok {
        background: var(--success-bg);
        color: var(--success);
    }

    .match-icon.no {
        background: #FFF5F5;
        color: var(--crimson-light);
    }

.match-txt {
    font-size: 11px;
}

/* Tips sidebar */
.tips-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.req-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.req-head {
    padding: 26px 28px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #be3329;
    font-size: 17px;
    font-weight: 800;
}

.req-head-title {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
}

.req-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.req-row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.req-check {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid var(--border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

    .req-check.pass {
        background: var(--success-bg);
        border-color: var(--success);
        color: var(--success);
    }

.req-text {
    font-size: 12px;
    color: #442812;
}

    .req-text.pass {
        color: var(--success);
    }

.last-chg {
    background: var(--gold-pale);
    border: 1px solid #E8C862;
    border-radius: 12px;
    padding: 14px 16px;
}

.lc-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.lc-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lc-title {
    font-size: 13px;
    font-weight: 500;
    color: #7A5B10;
}

.lc-sub {
    font-size: 12px;
    color: #975A16;
    line-height: 1.5;
}

.sec-tips {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
}

.st-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
}

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

.st-bar {
    width: 3px;
    border-radius: 2px;
    background: var(--crimson-light);
    align-self: stretch;
    flex-shrink: 0;
}

.st-text {
    font-size: 12px;
    color: var(--slate);
    line-height: 1.4;
}

.new_info {
    grid-column: 1/-1;
}

.grid_grid_div_pos {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 20px;
}

.error_msg_sec {
    position: absolute;
}

.grid_grid_div_pos label {
    min-height: 25px;
}

#ContentPlaceHolder1_fuPhoto {
    padding-top: 8px;
}

#ContentPlaceHolder1_fuSign {
    padding-top: 8px;
}

.flex_btn_sec {
    display: flex;
    align-content: center;
    gap: 40px;
    width: 40%;
    margin: 30px auto 0px !important;
}

.panel-heading {
    position: relative;
    font-size: 20px;
    margin: 0 0 20px 0;
}

#passwordRequirements {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mt20 {
    position: relative;
    margin-top: 20px !important;
}



.left-side-inner {
    height: 100%;
    overflow-y: scroll;
    scrollbar-width: none;
}

.page-heading {
    position: relative;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #f7f4ef;
}

    .page-heading h3 {
        font-size: 25px;
        font-weight: 500;
        color: #a00000;
    }

    .page-heading ul {
        display: flex;
        position: relative;
        gap: 20px;
    }

        .page-heading ul li {
            list-style: none;
            color: #573a21;
            font-size: 16px;
            font-weight: 500;
            text-decoration: none;
            list-style: none;
            position: relative;
        }

            .page-heading ul li:before {
                position: absolute;
                content: '/';
                right: -12px;
            }

            .page-heading ul li:last-child::before {
                display: none;
            }

            .page-heading ul li a {
                color: #573a21;
                font-size: 16px;
                font-weight: 500;
                text-decoration: none;
                list-style: none;
            }

.menu_master {
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 0;
    border-radius: 10px;
    margin-bottom: 30px;
}

    .menu_master .panel-heading {
        background: #93855b;
        padding: 0px;
        border-radius: 5px 5px 0 0;
        color: #8f121d;
        background: #f7f4ef;
        box-shadow: 0 4px 12px rgba(255, 0, 0, 0.08);
        /* background: linear-gradient(to right, #573a21, #f0db91);*/
        /*        background: linear-gradient(90deg, #4A1010 0%, #6B3020 30%, #8B6914 70%, #C8A84B 100%);*/
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .menu_master .tools {
        display: none;
    }

    .menu_master .panel-body {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
        padding: 0 25px 20px;
    }

.new_panel_body_menu {
    grid-template-columns: 1fr 1fr !important;
}

.menu_master .edit-btn-new-save {
    position: absolute;
    right: 20px;
    top: 36px;
    width: 75px;
    background: linear-gradient(to bottom, #c0392b, #8e1b14);
    color: #fff;
    height: 30px;
    padding: 0;
    z-index: 99999;
    cursor: pointer;
}

.sec_form_group {
    position: relative;
}

.menu_master .form-group {
    margin-bottom: 10px;
    position: relative;
}

.menu_master .form-label {
    font-size: 14px !important;
    margin-bottom: 10px;
    letter-spacing: 0.2px;
    height: 25px;
}

.sec_form_group_btn {
    position: relative;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .sec_form_group_btn .edit-btn-new-save {
        position: relative;
        right: 0;
        top: 0;
        width: 110px;
        height: 40px;
        padding: 0;
        background: #8f121d;
        color: #fff;
        cursor: pointer;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        border-radius: 5px;
        /*background: linear-gradient(175deg, var(--crimson-deep) 0%, var(--crimson) 50%, #7B1A1A 100%);*/
        background: linear-gradient(to bottom, #c0392b, #8e1b14);
    }

    .sec_form_group_btn .edit-btn-new-reset {
        position: relative;
        right: 0;
        top: 0;
        width: 110px;
        height: 40px;
        padding: 0;
        background: #fff;
        color: #baa775;
        cursor: pointer;
        border: 2px solid #baa775;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        text-decoration: none;
        border-radius: 10px;
    }

.sec_form_group_btn {
    position: relative;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    margin: 0px auto 20px;
    gap: 20px;
    padding-bottom: 20px;
}


.new_menu_table {
    position: relative;
}

    .new_menu_table .dataTables_wrapper:nth-child(1) .row {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }


div.dataTables_wrapper div.dataTables_length select {
    width: 100px !important;
}

.table.dataTable th {
    width: auto !important;
}

.block_dis {
    display: block !important;
}

.new_menu_table table th {
    /*background: #4b1111;*/
    color: #fff;
    font-size: 14px;
    padding: 12px 15px;
    font-family: 'DM Sans', sans-serif;
    border: 1px solid #e5ddd0 !important;
    background: linear-gradient(to bottom, #c0392b, #8e1b14);
    text-align: left;
}

    .new_menu_table table th:first-child {
        text-align: center;
    }

.new_menu_table table tbody tr td {
    background: #fff;
    color: #3c200b;
    font-size: 14px;
    padding: 8px 15px;
    font-family: 'DM Sans', sans-serif;
    text-align: left;
}

    .new_menu_table table tbody tr td:first-child {
        text-align: center;
    }

.new_menu_table .pagination ul {
    display: flex;
    gap: 12px;
    list-style: none;
}

    .new_menu_table .pagination ul li::marker {
        display: none;
    }

    .new_menu_table .pagination ul li {
        list-style: none;
    }

        .new_menu_table .pagination ul li a {
            color: #3c200b
        }

.new_password_master {
    position: relative;
}

    .new_password_master .panel-body {
        display: flex;
        flex-direction: column;
    }

    .new_password_master #ContentPlaceHolder1_upYojanaDetails {
        display: grid;
        grid-column-gap: 20px;
        grid-template-columns: 1fr 1fr 1fr;
    }
/*.absolute_div{
    position:absolute;
}*/
.mt30 {
    position: relative;
    margin: 30px 0 0 0;
}

.new_password_master .form-group small {
    position: absolute;
    left: 0px;
    bottom: -20px;
}

#ContentPlaceHolder1_btnInsert {
    position: relative;
    height: 40px;
    background: #3f220e;
    color: #fff;
    width: 100%;
    top: 12px;
}

.new_box_bg1 {
    grid-template-columns: 1fr 1fr 1fr !important;
    display: grid;
    align-items: center;
    gap: 20px;
}

div.dataTables_wrapper div.dataTables_filter {
    text-align: right;
    right: 0px;
    width: 100%;
    position: relative;
}

table.dataTable {
    flex: 0 0 100%;
}

.new_menu_table .dataTables_wrapper .row .col-xs-12 {
    width: 100% !important;
    display: flex !important;
}

.new_menu_table .dataTables_wrapper table tbody td div {
    width: auto;
}


.new_menu_table .dataTables_wrapper:nth-child(3) .row .col-xs-12 {
    width: auto;
}

div.dataTables_wrapper div.dataTables_paginate {
    margin: 0;
    white-space: nowrap;
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
}

#grd_filter input {
    width: 40%;
    padding-left: 10px;
}

.dataTables_filter {
    width: 40%;
    padding-left: 10px;
}

.new_grid_sec_single {
    grid-template-columns: 1fr !important;
}

    .new_grid_sec_single .d-flex {
        position: relative;
        display: flex;
        align-items: center;
    }

        .new_grid_sec_single .d-flex input {
            padding-top: 5px;
        }

#ContentPlaceHolder1_btnUploadExcel {
    position: relative;
    margin: 10px 0 0 10px;
    padding: 0;
    background: #000;
    padding: 0 10px;
    color: #fff;
}

.class_download {
    position: relative;
    margin: 10px 0 0 20px !important;
    padding: 0;
    background: #841616;
    padding: 0 10px;
    color: #fff;
}

.new_menu_table {
    position: relative;
}

    .new_menu_table ul.nav-tabs {
        position: relative;
        display: flex;
        align-content: center;
        justify-content: center;
        gap: 20px;
    }

        .new_menu_table ul.nav-tabs li {
            list-style-type: none;
        }

        .new_menu_table ul.nav-tabs a {
            position: relative;
            display: flex;
            align-content: center;
            align-items: center;
            background: #433119;
            padding: 10px 10px;
            border-radius: 5px;
            color: #fff;
            text-decoration: none;
        }

div.dataTables_wrapper div.dataTables_filter input {
    width: auto;
}

.send_btn {
    background: #831515 !important;
}

.btn-add-case {
    position: relative !important;
    top: 15px;
    left: 10px;
    width: 130px !important;
    height: 40px !important;
    font-size: 17px;
}

.formcontainer {
    scrollbar-width: none;
}

    .formcontainer::-webkit-scrollbar {
        display: none;
    }

.btn-submit.new_bg {
    background: #bd984e;
}

.user_registration_page #btnVerify {
    top: 31px;
}

.user_registration_page #btnOtpVerify {
    top: 31px;
}

.user_registration_page #btnAddRes {
    position: relative;
    left: 0;
    top: 6px;
    background: #bd984e;
    color: #fff;
    width: 100px;
    height: 40px;
    padding: 0;
}

.new_grid > :nth-child(4) {
    grid-column: 1 / -1; /* full width */
}

.login-formsec {
    margin-top: 10px;
}

    .login-formsec .form-input, .form-control, input[type="text"], input[type="password"] {
        padding: 0 15px 0 48px;
    }

.register_class_sec .form-input, .form-control, input[type="text"], input[type="password"] {
    padding: 0 15px 0 40px;
    background: #f6f6f6;
}

.delete-icon {
    width: 30px;
    height: 30px !important;
    padding: 0 !important;
    border: none;
    margin: 0 auto !important;
    text-align: center !important;
}
/*.rem_text{
    font-size:12px;
}*/
.case_det_label_filelds {
    position: relative;
    grid-template-columns: 1fr 1fr 1fr !important;
}

    .case_det_label_filelds .form-group {
        position: relative;
        display: flex;
        gap: 10px;
    }

    .case_det_label_filelds .form-input-wrap {
        position: relative;
    }

        .case_det_label_filelds .form-input-wrap .icon {
            display: none;
        }

        .case_det_label_filelds .form-input-wrap span {
            border: none;
            padding-left: 0px;
            font-size: 14px;
            font-weight: 600;
            color: #594d29;
            background: none;
            /*        background: #e7bb67;
        padding-right: 0;
        border-radius: 10px 0;
        padding: 5px;*/
        }

    .case_det_label_filelds .form-label {
        height: auto;
        margin: 0px !important;
        min-width: 145px;
        font-size: 12px !important;
    }

#lblOtpStatus {
    position: absolute;
    font-size: 10px;
}

#lblError {
    position: absolute;
    left: 0;
    bottom: -20px;
    font-size: 10px;
}

#lblErrorR {
    position: absolute;
    left: 0;
    bottom: -20px;
    font-size: 10px;
}

#lblErrorP {
    position: absolute;
    left: 0;
    bottom: -20px;
    font-size: 10px;
}

#lblError1 {
    position: absolute;
    left: 0;
    bottom: -20px;
    font-size: 10px;
}

.validation-error {
    color: red;
    font-weight: 500 !important;
    font-size: 10px !important;
    position: absolute !important;
    bottom: -15px !important;
    left: 0;
}

#ddlFilingFor {
    padding-left: 48px;
}

.respond_div > :last-child {
    grid-column: 1 / -1;
}

#grdResp {
    position: relative;
    margin-top: 20px;
    width: 100%;
}

    #grdResp th {
        background: #bd984e;
        color: #fff;
        padding: 5px 3px;
        font-size: 14px;
        border: 1px solid #ccc !important;
        text-align: center;
        font-weight: 500;
    }


    #grdResp tr td {
        background: #fff;
        color: #fff;
        padding: 5px 3px;
        font-size: 14px;
        color: #000;
        border: 1px solid #ccc !important;
        text-align: center;
        font-weight: 500;
    }


.upload_excel_btn {
    position: relative;
    margin: 0px 0 0 10px !important;
    padding: 0;
    background: #000;
    padding: 0 10px;
    color: #fff;
    height: 40px;
}

.download_excel_btn {
    position: relative;
    margin: 0px 0 0 20px !important;
    padding: 0;
    background: #841616;
    padding: 0 10px;
    color: #fff;
    height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 10px;
}

.doc_grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

    .doc_grid span {
        position: relative;
        display: flex;
    }

.check_box {
    position: relative;
    top: 10px;
}

    .check_box input {
        height: 20px;
        width: 20px;
        margin-right: 10px;
    }

.toast-messgae {
    background: linear-gradient(175deg, var(--crimson-deep) 0%, var(--crimson) 50%, #7B1A1A 100%) !important;
}

.grid_grid_div_pos .form-group {
    margin-bottom: 10px;
}

    .grid_grid_div_pos .form-group input {
        padding: 0 15px 0 15px;
    }

    .grid_grid_div_pos .form-group select {
        padding: 0 15px 0 15px;
    }

#imgPhotoPreview {
    background: #856941;
    padding: 2px;
    margin-top: 10px;
}

#imgSignPreview {
    background: #856941;
    padding: 2px;
    margin-top: 10px;
}

.main-content .spacer50px {
    background: #f7f4ef;
}

table #btnEdit {
    color: #fff;
    background: #9c1212;
    width: 95%;
}

#ContentPlaceHolder1_fuDocuments {
    padding-top: 7px;
}

.track_case #grdResp th {
    background: #445d95;
    padding: 9px 5px;
}

.track_case #grdResp tr td {
    padding: 9px 5px;
}

.track_case #gvDocuments th {
    background: #445d95;
    padding: 9px 10px;
    text-align: left;
}

    .track_case #gvDocuments th:first-child {
        text-align: center;
    }

    .track_case #gvDocuments th:last-child {
        text-align: center;
    }

.track_case #gvDocuments tr td {
    padding: 9px 10px;
    text-align: left;
}

    .track_case #gvDocuments tr td:first-child {
        text-align: center;
    }

    .track_case #gvDocuments tr td:last-child {
        text-align: center;
    }

.track_case #btnView {
    background: #14213d;
}

.dataTable .editBtn {
    height: 30px;
    padding: 0;
}

.dataTable .edit-btn-new {
    height: 30px;
    padding: 0;
}

div.dataTables_wrapper div.dataTables_length label {
    text-transform: capitalize;
}

.master_roles_sec {
    position: relative;
}

    .master_roles_sec .sec_form_group_btn {
        justify-content: flex-start;
        top: 12px;
    }

        .master_roles_sec .sec_form_group_btn .edit-btn-new-save {
            height: 40px;
        }

        .master_roles_sec .sec_form_group_btn .edit-btn-new-reset {
            height: 40px;
        }

    .master_roles_sec input {
        padding-left: 15px;
    }

.menu_master select {
    padding-left: 15px;
}

.menu_master input {
    padding-left: 15px;
}

.page_shell_new {
    position: relative;
    padding: 20px 0;
}

    .page_shell_new .login-form-box h2 {
        margin-bottom: 20px;
    }


.acc-head {
    padding: 12px 20px;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    background: #f4f1eb;
    margin-bottom: 0px;
    border-radius: 5px;
    font-family: inherit;
    color: #14213d;
    display: flex;
    align-content: center;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    transition: 0.5s ease-in-out;
}

.accordion-box {
    position: relative;
    border-bottom: 1px solid #f4f1eb;
    padding: 0;
    margin-bottom: 20px;
}

.acc-head::after {
    content: "+";
    position: relative;
    right: 10px;
    top: 0;
    font-size: 20px;
    font-weight: 700;
    height: 30px;
    width: 30px;
    background: #14213d;
    display: flex;
    align-content: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    transition: 0.5s ease-in-out;
}

.acc-head.active {
    background: #fff;
    padding-left: 0;
    color: #660303;
    font-size: 20px;
    margin-bottom: 10px;
    transition: 0.5s ease-in-out;
}

    .acc-head.active:after {
        content: "−";
        right: -20px;
        transition: 0.5s ease-in-out;
    }



.new_register_grid .login-form-box h2 {
    margin-bottom: 20px;
}

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

    .chnage_pass_div_sec > :first-child {
        grid-column: 1 / -1;
        makes it full width
    }

.mt_auto {
    position: relative;
    width: 50%;
    margin: 0 auto;
}

table.dataTable {
    border: none;
}

.new_menu_table table tbody tr td {
    border: none;
    border-left: 1px solid #d4c5a9 !important;
    border-bottom: 1px solid #d4c5a9 !important;
    border-right: 1px solid #a92b204d;
}

.chkEdit input[type="checkbox"] {
    accent-color: #4d7b20;
}

.new_register_grid .login-form-box {
    padding: 25px 30px 10px;
}

.change_main_div {
    width: 100%;
    position: relative;
}

    .change_main_div .info-card {
        height: auto;
        background: #ffffff;
        border: 1px solid #edd8d2;
        border-radius: 22px;
        box-shadow: 0 10px 30px rgba(123, 54, 31, 0.08);
        padding: 30px 34px;
    }

    .change_main_div .req-body {
        height: 235px;
    }

.chnage_pass_div_sec input {
    padding-left: 15px;
}


.hero_main {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #fff7f2, #fffaf8);
    border: 1px solid var(--border);
    border-radius: 24px;
    min-height: auto;
    padding: 5px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

    .hero_main::before {
        content: "";
        position: absolute;
        top: -20px;
        right: 120px;
        width: 560px;
        height: 180px;
        opacity: .6;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 180'><path d='M0 90 C80 10,160 10,240 90 S400 170,520 90 S680 10,760 90' fill='none' stroke='%23efc1b7' stroke-width='2'/><path d='M0 105 C80 25,160 25,240 105 S400 185,520 105 S680 25,760 105' fill='none' stroke='%23f3c9bf' stroke-width='2'/><path d='M0 120 C80 40,160 40,240 120 S400 200,520 120 S680 40,760 120' fill='none' stroke='%23f6d8d2' stroke-width='2'/></svg>") no-repeat center/contain;
        pointer-events: none;
    }

.hero-left {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 20px;
}

.mini-lock {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffd5d0, #fff0ee);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.hero-title h2 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 8px;
    color: #000;
    font-family: "DM Sans", sans-serif;
}

.hero-title p {
    font-size: 16px;
    color: #847b79;
    font-family: "DM Sans", sans-serif;
}

.hero-right {
    position: relative;
    width: 200px;
    height: 120px;
    flex-shrink: 0;
}

    .hero-right svg {
        position: absolute;
        right: 0;
        top: -8px;
        width: 190px;
        height: auto;
    }


.bottom-card {
    background: linear-gradient(180deg, #fff7f2, #fffaf8);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 150px;
    overflow: hidden;
    position: relative;
    margin: 30px 0;
    /*display:none;*/
}

.bottom-left {
    display: flex;
    align-items: center;
    gap: 22px;
    position: relative;
    z-index: 1;
}

.shield-mini svg {
    width: 92px;
    height: 92px;
}

.bottom-text h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.bottom-text p {
    color: #77706e;
    font-size: 15px;
    line-height: 1.7;
    max-width: 420px;
}

.bottom-illustration {
    position: relative;
    z-index: 1;
}

    .bottom-illustration svg {
        width: 330px;
        height: auto;
        display: block;
    }

.bottom-card::before,
.bottom-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 120px;
    height: 90px;
    opacity: .28;
    background-repeat: no-repeat;
    background-size: contain;
}

.bottom-card::before {
    left: 40px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 100'><path d='M12 90 C30 70, 40 40, 45 18 C56 46, 70 66, 90 86' fill='none' stroke='%23e7c1bb' stroke-width='3'/><path d='M78 92 C88 68, 103 42, 118 20 C123 50,129 68,132 88' fill='none' stroke='%23e7c1bb' stroke-width='3'/></svg>");
}

.bottom-card::after {
    right: 120px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 100'><path d='M12 90 C30 70, 40 40, 45 18 C56 46, 70 66, 90 86' fill='none' stroke='%23e7c1bb' stroke-width='3'/><path d='M78 92 C88 68, 103 42, 118 20 C123 50,129 68,132 88' fill='none' stroke='%23e7c1bb' stroke-width='3'/></svg>");
}

.change_main_div .info-card h3 {
    color: #c73a33;
    font-size: 18px;
    margin-bottom: 22px;
}

.req-body-new {
    padding: 6px 28px 26px;
    position: relative;
}

.req-list {
    list-style: none;
}

    .req-list li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 0px 0 0 0;
        font-size: 14px;
        color: #3e3e3e;
    }

.req-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pink-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fde6e4;
    color: #d55b55;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.tick {
    color: var(--green);
    font-size: 19px;
    font-weight: 800;
}

.tip {
    margin-top: 18px;
    border: 1px solid #efd6c8;
    background: linear-gradient(180deg, #fff3e7, #fff7f1);
    border-radius: 18px;
    padding: 18px 18px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    color: #9a6b40;
    line-height: 1.6;
}

    .tip b {
        color: #b8752d;
    }

.strength-title {
    color: #7b7b7b;
    margin-bottom: 12px;
    font-size: 15px;
}

.bars {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

    .bars span {
        height: 8px;
        border-radius: 10px;
        display: block;
    }

        .bars span:nth-child(1) {
            background: #d61f2d;
        }

        .bars span:nth-child(2) {
            background: #ef7a19;
        }

        .bars span:nth-child(3) {
            background: #f3c224;
        }

        .bars span:nth-child(4) {
            background: #a7b844;
        }

        .bars span:nth-child(5) {
            background: #5ca84a;
        }

.strong-new {
    color: #2ba84a;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.scroll_off {
    overflow-y: hidden;
}




/* =========================
           NEW UI THEME START
        ========================== */

.theme-profile-page {
    padding: 20px 30px;
    background: radial-gradient(circle at top right, rgba(196, 27, 34, 0.05), transparent 22%), linear-gradient(180deg, #f8f4f2 0%, #f4efec 100%);
}

    .theme-profile-page .pro-layout {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .theme-profile-page .panel-default > .panel-heading,
    .theme-profile-page .panel-heading {
        display: none !important;
    }

    .theme-profile-page .panel-body,
    .theme-profile-page .panel {
        background: transparent !important;
    }

    .theme-profile-page .banner-card {
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 30px;
        padding: 15px 25px;
        border-radius: 15px;
        background: linear-gradient(135deg, #8e090f 0%, #be141b 48%, #d92822 100%);
        box-shadow: 0 18px 40px rgba(126, 11, 15, 0.18);
        margin-bottom: 10px;
    }

        .theme-profile-page .banner-card:before {
            content: "";
            position: absolute;
            right: -40px;
            top: -30px;
            width: 250px;
            height: 250px;
            border-radius: 50%;
            background: rgba(255,255,255,0.05);
        }

        .theme-profile-page .banner-card:after {
            content: "";
            position: absolute;
            right: 120px;
            top: -60px;
            width: 260px;
            height: 260px;
            border-radius: 50%;
            background: rgba(255,255,255,0.03);
        }

    .theme-profile-page .banner-left,
    .theme-profile-page .banner-stats {
        position: relative;
        z-index: 2;
    }

    .theme-profile-page .banner-left {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .theme-profile-page .avatar-ring {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: linear-gradient(135deg, #f5cf55 0%, #e4ac1c 100%);
        color: #7a1800;
        font-size: 28px;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: inset 0 0 0 3px rgba(255,255,255,0.15);
        flex-shrink: 0;
    }

    .theme-profile-page .banner-name {
        color: #fff;
        font-size: 25px;
        line-height: 1.1;
        font-weight: 800;
        margin-bottom: 8px;
    }

    .theme-profile-page .banner-role {
        color: rgba(255,255,255,0.86);
        font-size: 14px;
        margin-bottom: 10px;
    }

    .theme-profile-page .banner-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .theme-profile-page .btag {
        display: inline-flex;
        align-items: center;
        padding: 7px 14px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
    }

    .theme-profile-page .btag-gold {
        background: linear-gradient(135deg, #d89412 0%, #f0b02a 100%);
        color: #fff;
        box-shadow: 0 6px 14px rgba(226, 154, 26, 0.25);
    }

    .theme-profile-page .btag-green {
        background: linear-gradient(135deg, #2d8c52 0%, #3eaa69 100%);
        color: #fff;
        box-shadow: 0 6px 14px rgba(54, 152, 92, 0.25);
    }

    .theme-profile-page .banner-stats {
        display: flex;
        align-items: center;
        gap: 28px;
    }

    .theme-profile-page .bstat {
        text-align: center;
        min-width: 110px;
    }

    .theme-profile-page .bstat-num {
        color: #ffd15f;
        font-size: 26px;
        font-weight: 800;
        line-height: 1;
        margin-bottom: 6px;
    }

    .theme-profile-page .bstat-lbl {
        color: rgba(255,255,255,0.8);
        font-size: 13px;
        font-weight: 600;
    }

    .theme-profile-page .bstat-div {
        width: 1px;
        height: 48px;
        background: rgba(255,255,255,0.18);
    }

    .theme-profile-page .new_info {
        background: rgba(255,255,255,0.9);
        backdrop-filter: blur(5px);
        border: 1px solid #ead9d2;
        border-radius: 26px;
        box-shadow: 0 18px 40px rgba(50, 26, 17, 0.08);
        padding: 28px 26px 20px;
    }

    .theme-profile-page .sec-label {
        position: relative;
        display: inline-block;
        font-size: 26px;
        font-weight: 800;
        color: #b61f1d;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        margin-bottom: 24px;
        padding-left: 0;
    }

        .theme-profile-page .sec-label:after {
            content: "";
            display: block;
            width: 82px;
            height: 4px;
            margin-top: 10px;
            border-radius: 10px;
            background: linear-gradient(90deg, #c71d24, #f2b23f);
        }

    .theme-profile-page .grid_grid_div_pos {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 15px 20px;
        margin-bottom: 18px;
    }

    .theme-profile-page .form-group {
        margin-bottom: 6px;
    }

        .theme-profile-page .form-group label,
        .theme-profile-page .control-label {
            display: block;
            margin-bottom: 9px;
            color: #26324a;
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 0.2px;
        }

    .theme-profile-page .form-control,
    .theme-profile-page select,
    .theme-profile-page input[type="text"],
    .theme-profile-page input[type="password"],
    .theme-profile-page input[type="email"],
    .theme-profile-page input[type="number"],
    .theme-profile-page textarea {
        height: 40px;
        border-radius: 10px !important;
        border: 1.5px solid #d7c7c0 !important;
        background: #fff !important;
        box-shadow: none !important;
        padding: 5px 16px !important;
        font-size: 14px;
        color: #213047;
        transition: all .25s ease;
    }

        .theme-profile-page textarea.form-control {
            min-height: 120px;
            height: auto;
        }

        .theme-profile-page .form-control:focus,
        .theme-profile-page select:focus,
        .theme-profile-page input:focus,
        .theme-profile-page textarea:focus {
            border-color: #c82222 !important;
            box-shadow: 0 0 0 4px rgba(200, 34, 34, 0.10) !important;
        }

    .theme-profile-page .readonly-text,
    .theme-profile-page .readonly-text.form-control {
        background: linear-gradient(180deg, #fbfbfb 0%, #f2f2f4 100%) !important;
        color: #5c6273 !important;
        border-color: #d8dbe1 !important;
    }

    .theme-profile-page .error_msg_sec {
        grid-column: 1 / -1;
        margin-top: -2px;
        margin-bottom: 0;
    }

    .theme-profile-page .validation-error,
    .theme-profile-page span[style*="color: red"] {
        font-size: 12px !important;
    }

    .theme-profile-page .upload-card {
        background: linear-gradient(180deg, #fffefe 0%, #faf7f5 100%);
        border: 1px solid #ebd9d1;
        border-radius: 22px;
        padding: 18px 18px 12px;
        height: 100%;
        box-shadow: 0 10px 24px rgba(80, 41, 24, 0.05);
    }

    .theme-profile-page .disable-container .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .theme-profile-page .disable-container .col-sm-8,
    .theme-profile-page .disable-container .col-sm-4 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .theme-profile-page .disable-container .col-sm-4 {
        padding-top: 14px !important;
    }

    .theme-profile-page input[type="file"].form-control {
        height: 50px;
        padding: 10px 12px !important;
        background: #fff !important;
        border: 1.5px dashed #d6b7ae !important;
        border-radius: 16px !important;
    }

        .theme-profile-page input[type="file"].form-control:hover {
            border-color: #c82222 !important;
            background: #fffaf8 !important;
        }

    .theme-profile-page #imgPhotoPreview,
    .theme-profile-page #imgSignPreview {
        background: linear-gradient(180deg, #f8f3ef 0%, #efe7e1 100%);
        border: 2px solid #d8c0b1 !important;
        border-radius: 18px !important;
        padding: 8px;
        object-fit: contain;
        display: block;
    }

    .theme-profile-page .flex_btn_sec {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 18px;
        flex-wrap: nowrap;
        margin-top: 18px !important;
        padding-top: 8px;
    }

    .theme-profile-page .btn.btn-p,
    .theme-profile-page .btn.btn-o,
    .theme-profile-page .edit-btn-new-reset {
        min-width: 170px;
        height: 40px;
        border-radius: 5px !important;
        font-size: 16px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        padding: 0 26px !important;
        transition: all .25s ease;
    }

    .theme-profile-page .btn.btn-p {
        border: none !important;
        color: #fff !important;
        background: linear-gradient(135deg, #d61f27 0%, #a70f15 100%) !important;
        box-shadow: 0 14px 28px rgba(179, 18, 23, 0.22);
    }

        .theme-profile-page .btn.btn-p:hover {
            transform: translateY(-2px);
            box-shadow: 0 16px 30px rgba(179, 18, 23, 0.28);
        }

    .theme-profile-page .btn.btn-o,
    .theme-profile-page .edit-btn-new-reset {
        border: 1.5px solid #e29f7d !important;
        color: #a14f22 !important;
        background: linear-gradient(180deg, #fff6ee 0%, #fff2e6 100%) !important;
        box-shadow: none !important;
    }

        .theme-profile-page .btn.btn-o:hover,
        .theme-profile-page .edit-btn-new-reset:hover {
            background: #fff2e8 !important;
            border-color: #cb6734 !important;
            color: #923d12 !important;
        }

    .theme-profile-page .theme-dev-text {
        text-align: center;
        color: #8b776d;
        font-size: 15px;
        margin-top: 18px;
        font-weight: 500;
    }

        .theme-profile-page .theme-dev-text strong {
            color: #b61f1d;
            font-weight: 800;
        }

    .theme-profile-page .page-heading {
        display: none !important;
    }

@media (max-width: 1199px) {
    .theme-profile-page .banner-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .theme-profile-page .banner-stats {
        width: 100%;
        justify-content: space-between;
        gap: 14px;
        flex-wrap: wrap;
    }

    .theme-profile-page .grid_grid_div_pos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .theme-profile-page {
        padding: 14px 0 24px;
    }

        .theme-profile-page .banner-card {
            border-radius: 20px;
            padding: 18px;
        }

        .theme-profile-page .banner-name {
            font-size: 24px;
        }

        .theme-profile-page .avatar-ring {
            width: 58px;
            height: 58px;
            font-size: 22px;
        }

        .theme-profile-page .banner-stats {
            flex-direction: column;
            align-items: flex-start;
        }

        .theme-profile-page .bstat-div {
            display: none;
        }

        .theme-profile-page .new_info {
            padding: 20px 16px 16px;
            border-radius: 20px;
        }

        .theme-profile-page .sec-label {
            font-size: 22px;
        }

        .theme-profile-page .grid_grid_div_pos {
            grid-template-columns: 1fr;
        }

        .theme-profile-page .flex_btn_sec {
            flex-direction: column;
        }

        .theme-profile-page .btn.btn-p,
        .theme-profile-page .btn.btn-o,
        .theme-profile-page .edit-btn-new-reset {
            width: 100%;
        }
}

#ContentPlaceHolder1_btnChangePassword {
    height: 40px;
}

#passwordStrength {
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
}

.page-heading {
    position: relative;
}

    .page-heading h3 i {
        padding: 8px;
        background: #731111;
        border-radius: 5px;
        margin-right: 10px;
        color: #fff;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .page-heading h3 {
        display: flex;
        align-items: center;
        position: relative;
    }

    .page-heading ul li a:first-child {
        color: #001130;
    }

.pan_span {
    position: relative;
    /*    background: linear-gradient(175deg, var(--crimson-deep) 0%, var(--crimson) 50%, #7B1A1A 100%);*/
    color: #fff;
    padding: 15px;
    display: flex;
    margin-right: 20px;
    border-radius: 0 5px 5px 0;
    background: linear-gradient(to bottom, #c0392b, #8e1b14);
}

#grd_info {
    padding-bottom: 15px;
}

#grd_paginate {
    padding-bottom: 15px;
}

.master_all .panel-heading {
    margin-bottom: 10px !important;
}

.master_all .form-group label {
    font-size: 14px !important;
}

.master_all .mt20 {
    margin-top: 10px !important;
}

.master_all #ContentPlaceHolder1_btnInsert {
    background: linear-gradient(to bottom, #c0392b, #8e1b14);
    width: 50%;
}

.master_all #passwordRequirements {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: #fff;
    z-index: 99999;
    padding: 15px;
    border-radius: 10px;
    border-left: 5px solid #ff1e0f;
}

.nicescroll-rails div {
    background-color: rgb(157, 36, 27) !important;
}

.nicescroll-rails {
    background: #fff !important;
}

.menu_table_master_table table thead th {
    color: #fff;
    font-size: 14px;
    padding: 12px 5px;
}

.menu_table_master_table table tbody tr td {
    font-size: 14px;
    padding: 12px 5px;
    text-align: center;
    border: 1px solid #ccc !important;
}

.new_pass_box_z_index {
    z-index: 99999;
    position: relative;
    display: block;
}

.form-group.form-check {
    display: flex;
    align-content: center;
    top: 50px;
    gap: 10px;
}

.admin_craetion_table {
    position: relative;
    margin-top: 20px;
    width: 100%;
}

    .admin_craetion_table th {
        background: #bd984e;
        color: #fff;
        padding: 5px 3px;
        font-size: 14px;
        border: 1px solid #ccc !important;
        text-align: center;
        font-weight: 500;
    }

    .admin_craetion_table tr td {
        background: #fff;
        color: #fff;
        padding: 5px 3px;
        font-size: 14px;
        color: #000;
        border: 1px solid #ccc !important;
        text-align: center;
        font-weight: 500;
    }

    .admin_craetion_table .delete-icon {
        padding-left: 0px;
    }

.mt20_new {
    position: relative;
    top: 30px;
}

#btnAddPer, #btnAddVeh {
    top: 8px !important;
    cursor: pointer;
}

.toggle-password {
    color: #9b1c1c !important;
    z-index: 9999 !important;
    position: absolute;
    cursor: pointer;
}

.swal2-popup {
    background: linear-gradient(175deg, var(--crimson-deep) 0%, var(--crimson) 50%, #7B1A1A 100%);
    color: #fff;
}

.swal2-checkbox {
    background: #9a1c1c !important;
    width: fit-content !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

    .swal2-checkbox input {
        margin: 0px !important;
    }

.swal2-styled {
    width: 150px;
    font-size: 12px;
    background: #fff;
    color: #841616;
    font-weight: 600 !important;
    border: 1px solid #fff;
    transition: 0.5s ease-in-out;
}

    .swal2-styled:hover {
        background: #841616;
        color: #fff;
    }

.swal2-container.swal2-center.swal2-backdrop-show {
    z-index: 99999999;
}




.custom-tabs {
    border-bottom: 2px solid #e6e6e6;
    margin-bottom: 0px;
    list-style: none;
    padding-left: 0;
}

    /* IMPORTANT: make tabs side by side */
    .custom-tabs > li {
        display: inline-block;
        margin-right: 5px;
    }

        /* tab link */
        .custom-tabs > li > a {
            display: block;
            padding: 10px 20px;
            color: #444;
            font-weight: 600;
            text-decoration: none;
            border-bottom: 3px solid transparent;
        }

            /* hover */
            .custom-tabs > li > a:hover {
                color: #a82a20;
            }

        /* active */
        .custom-tabs > li.active > a,
        .custom-tabs > li.active > a:hover {
            color: #a82a20;
            border-bottom: 3px solid #aa2c21;
            background: #fff;
            border-radius: 5px;
        }

    /* remove bullet */
    .custom-tabs li {
        list-style: none;
    }

.action-btns {
    display: flex;
    gap: 6px;
    justify-content: center;
}

/* Approve button */
.btnApprove {
    background: #6c5632;
    color: white;
    border: none;
    padding: 12px 14px;
    padding-left: 14px;
    font-size: 0.9rem;
    border-radius: 4px;
    cursor: pointer;
}

    .btnApprove:hover {
        background: #a5291f;
    }

/* Reject button */
.btnReject {
    background: #992219;
    color: white;
    border: none;
    padding: 10px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
}

    .btnReject:hover {
        background: #c82333;
    }

.fliing_sec #ContentPlaceHolder1_gvCases_info {
    padding-top: 15px;
}

.fliing_sec #ContentPlaceHolder1_gvCases_paginate {
    padding-top: 15px;
}

.thank_you_popup_main {
    position: relative;
    margin-bottom: 15px;
}

    .thank_you_popup_main br {
        display: block;
        margin: 3px 0;
    }



#gvPerson {
    position: relative;
    margin-top: 20px;
    width: 100%;
    overflow-x: scroll !important;
    display: block;
    border: none;
}

    #gvPerson th {
        background: linear-gradient(135deg, #1e3c72, #2a5298);
        color: #fff;
        padding: 8px 20px;
        font-size: 14px;
        border: 1px solid #ccc !important;
        text-align: center;
        font-weight: 500;
    }

    #gvPerson tr td {
        background: #fff;
        color: #fff;
        padding: 8px 20px;
        font-size: 14px;
        color: #000;
        border: 1px solid #ccc !important;
        text-align: center;
        font-weight: 500;
    }

    #gvPerson tr:nth-child(even) td {
        background: #f4f1eb;
    }

.gv_person_table_body {
    position: relative;
    width: 1110px;
    overflow: scroll;
}

#gvVehicle {
    position: relative;
    margin-top: 20px;
    width: 100%;
    overflow-x: scroll !important;
    display: block;
    border: none;
}

    #gvVehicle th {
        background: linear-gradient(135deg, #1e3c72, #2a5298);
        color: #fff;
        padding: 8px 20px;
        font-size: 14px;
        border: 1px solid #ccc !important;
        text-align: center;
        font-weight: 500;
    }

    #gvVehicle tr td {
        background: #fff;
        color: #fff;
        padding: 8px 20px;
        font-size: 14px;
        color: #000;
        border: 1px solid #ccc !important;
        text-align: center;
        font-weight: 500;
    }

    #gvVehicle tr:nth-child(even) td {
        background: #f4f1eb;
    }

.new_head_padd.active {
    padding-bottom: 0px;
}

#txtTempRefNo {
    width: 350px;
}

.custom-modal-content {
    position: relative;
}

.docs_req_body {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 20px;
    border-bottom: 2px dashed #843932;
    margin-bottom: 15px;
}

    .docs_req_body h3 {
        color: #9a2219;
        font-size: 20px;
        font-weight: 600;
    }

    .docs_req_body .form-input {
        padding-left: 15px;
    }

    .docs_req_body .btnDynamic1 {
        top: 25px !important;
        background: linear-gradient(to bottom, #c0392b, #8e1b14) !important;
    }

.docs_req table {
    margin-top: 0px !important;
    margin-bottom: 20px !important;
    width: 100%;
}

    .docs_req table th {
        background: linear-gradient(to bottom, #c0392b, #8e1b14) !important;
    }

.docs_req .btn.btn-danger.btn-xs {
    background: linear-gradient(to bottom, #823203, #dd7c00) !important;
    color: #fff;
}

.btnDynamic2 {
    width: 150px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    height: 35px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    background: #9a2219;
    letter-spacing: 1px;
    color: #fff;
    padding: 0px;
}

.fc-toolbar .fc-toolbar-chunk:first-child .fc-button-group {
    gap: 10px;
}

.fc-prev-button {
    background: #fff !important;
    border: 1px solid #ccc !important;
    color: #d41515 !important;
    border-radius: 5px !important;
}

.fc-next-button {
    background: #fff !important;
    border: 1px solid #ccc !important;
    color: #d41515 !important;
    border-radius: 5px !important;
}

#lblName {
    color: #e51212;
}

#modalDocumentContainer {
    position: relative;
    margin-top: 10px;
}

    #modalDocumentContainer .row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-column-gap: 10px;
    }

.caseing_head_text {
    position: relative;
    font-size: 16px;
    margin-bottom: 14px;
    color: #9e0606;
    border-bottom: 1px dashed #9e0606;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

#grd_wrapper #ddlJudge {
    width: 140px;
}

#grd_wrapper #ctl00_ContentPlaceHolder1_grd_ctl02_txtNextDate {
    width: 100px;
}

.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
    opacity: .45;
}

.docs_req .close-modal {
    position: absolute;
    right: 20px;
    background: #9a2219;
    width: 30px;
    height: 30px;
    border-radius: 10px 0;
    color: #fff;
    display: flex;
    align-content: center;
    justify-content: center;
    opacity: 1;
    cursor: pointer;
    align-items: center;
    font-size: 22px;
    z-index: 9999;
}

.custom-modal .close-modal {
    position: absolute;
    right: 20px;
    background: #9a2219;
    width: 30px;
    height: 30px;
    border-radius: 10px 0;
    color: #fff;
    display: flex;
    align-content: center;
    justify-content: center;
    opacity: 1;
    cursor: pointer;
    align-items: center;
    font-size: 22px;
    z-index: 9999;
    top: 18px !important;
}

.box_main {
    background: #fff;
    border: 1px dotted #9a2219;
    border-radius: 8px;
    padding: 10px 10px;
    min-height: auto;
    box-shadow: none;
    display: flex;
    gap: 4px;
    flex-direction: column;
}

.box_main_cont {
    position: relative;
    font-size: 13px;
    font-weight: 500;
    color: #000;
}

.box_main_cont_in {
    position: relative;
    font-size: 9px;
    font-weight: 600;
    color: #9a2219;
}

.delete_icn {
    position: relative;
    position: relative;
    background: #fff;
    color: #9a2219;
    border: 1px dashed #a5291f;
}

#documentModal .custom-modal-content {
    width: 75%;
}

.custom-modal-content h3 {
    font-size: 22px;
}

.fc-daygrid-event {
    font-size: 12px;
    line-height: 1.4;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
}

.fc-button.fc-button-primary {
    background: #efeff2 !important;
    border: none !important;
    color: #af1111 !important;
    font-size: 15px !important;
}

    .fc-button.fc-button-primary.fc-button-active {
        background: #af1111 !important;
        color: #fff !important;
    }

.sub-menu-list::marker {
    display: none;
}

.menu-list.nav-active .sub-menu-list {
    padding-left: 25px;
    list-style: none;
}

.menu-list.open .sub-menu-list {
    padding-left: 15px;
    list-style: none;
}

.menu-list.nav-active .sub-menu-list li {
    transition: 0.5s ease-in-out;
}

    .menu-list.nav-active .sub-menu-list li:hover {
        padding-left: 5px;
        transition: 0.5s ease-in-out;
    }
/*.sub-menu-list li:hover {
    padding-left: 5px;
    transition: 0.5s ease-in-out;
}*/
.menu-list.nav-active .nav-item.has-toggle {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
}

.menu-list.open .nav-item.has-toggle {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
}



.btn.btn-primary.btn-xs.btn-view-docs {
    margin: 0 auto;
    display: flex;
}

#docTable_wrapper #docTable_filter {
    text-align: left !important;
    left: 0px !important;
}

#documentModal #modalDocumentContainer #docTable_wrapper .row:first-child .col-xs-12 {
    display: none;
}

#documentModal #modalDocumentContainer #docTable_wrapper .row {
    display: block;
}

.case_det_div_sec_table .row {
    grid-row-gap: 10px;
    display: grid;
}

.case_det_div_sec_table.row {
    grid-row-gap: 10px;
    display: grid;
}

.case_det_div_sec_table p {
    background: #fff;
    border: 1px dotted #9a2219;
    border-radius: 8px;
    padding: 10px 10px;
    min-height: auto;
    box-shadow: none;
    display: flex;
    gap: 4px;
    flex-direction: column;
}


    .case_det_div_sec_table p strong {
        position: relative;
        font-size: 13px;
        font-weight: 500;
        color: #000;
    }

.case_det_div_sec_table p {
    position: relative;
    font-size: 9px;
    font-weight: 600;
    color: #9a2219;
}

#btnSubmit {
    cursor: pointer;
}

.new_scroll table {
    position: relative;
    /*    overflow-x:scroll;*/
    width: 100%;
    display: block;
}

.attendance-dropdown {
    position: absolute !important;
    z-index: 99999 !important;
    width: 170px !important;
    height: 125px;
    overflow: scroll;
}

    .attendance-dropdown input[type="checkbox"] {
        position: relative;
        left: -70px;
        width: auto;
        top: 10px;
    }

    .attendance-dropdown br {
        display: none;
    }

    .attendance-dropdown label {
        padding-left: 20px;
        position: relative;
        top: -8px;
        text-align: left;
        font-size: 10px !important;
    }

.multi-select-container button {
    width: 100%;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #20394b7d;
    background: #eee;
    outline: none;
    padding: 0 15px;
    font-size: 12px;
    color: var(--text);
    transition: all 0.25s ease;
    font-family: inherit;
    font-weight: 500;
    z-index: 9999;
    position: relative;
}

.fliing_sec #ContentPlaceHolder1_gvCases_info {
    padding-top: 15px;
}

.fliing_sec #ContentPlaceHolder1_gvCases_paginate {
    padding-top: 15px;
}

.fliing_sec #ContentPlaceHolder1_gvProcessed_info {
    padding-top: 15px;
}

.fliing_sec #ContentPlaceHolder1_gvProcessed_paginate {
    padding-top: 15px;
}



/* Wrapper */
.register_class_sec_main {
    position: relative;
    overflow: hidden;
    padding-right: 10px;
}

/* Scroll container */
.register_class_sec {
    height: 450px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    width: calc(100% + 8px);
    padding-right: 8px;
    box-sizing: border-box;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #a8c3ff rgba(0, 0, 0, 0.05);
}

    /* Chrome, Edge, Brave, Safari */
    .register_class_sec::-webkit-scrollbar {
        width: 6px;
    }

    /* Track (background) */
    .register_class_sec::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 20px;
    }

    /* Thumb (light blue gradient) */
    .register_class_sec::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #8fb3ff, #c7dcff);
        border-radius: 20px;
        min-height: 40px;
        transition: all 0.3s ease;
    }

        /* Hover effect */
        .register_class_sec::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #6f9cff, #a8c3ff);
        }

    /* Remove arrows (buttons) */
    .register_class_sec::-webkit-scrollbar-button {
        display: none !important;
        width: 0;
        height: 0;
    }

        /* Extra safety for older browsers */
        .register_class_sec::-webkit-scrollbar-button:single-button,
        .register_class_sec::-webkit-scrollbar-button:start:decrement,
        .register_class_sec::-webkit-scrollbar-button:end:increment {
            display: none !important;
            width: 0;
            height: 0;
        }


@media only screen and (min-width:1501px) and (max-width:1600px) {
    .new_register_grid {
        max-width: 85%;
    }

    .form-input, .form-control, input[type="text"], input[type="password"] {
        font-size: 12px;
    }

    .new_register_grid .login-right .login-form-box {
        max-width: 100%;
        height: 560px;
    }

    .gv_person_table_body {
        width: 1160px;
        overflow-x: hidden;
        overflow-y: hidden;
    }
}





@media only screen and (min-width:1301px) and (max-width:1500px) {
    .new_register_grid {
        max-width: 85%;
    }
}



.dis_flex_sec_new {
    position: relative;
    display: flex;
    gap: 20px;
}

    .dis_flex_sec_new .btn-primary {
        color: #fff;
        background: #6a4b2c;
    }

    .dis_flex_sec_new .btn-danger {
        color: #fff;
        background: #901c15;
    }
/*.over_flow_x .row .col-xs-12{
    overflow-x: scroll;
}*/
.new_textare_sec {
    padding: 5px 5px 5px 15px !important;
}

.mar_0 {
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    top: 10px;
}

.table-loaded {
    position: relative;
    width: 100%;
    overflow-x: auto;
}

.table_scroll_sec {
    position: relative;
    width: 100%;
    overflow-x: auto;
}

    .table_scroll_sec table {
        width: 100%;
    }

.table-loaded table {
    width: 100%;
}

.mar_0.sec_form_group_btn {
    justify-content: flex-start;
}

.track_case_main_div {
    position: relative;
}

    .track_case_main_div .gv_person_table_body {
        overflow: hidden;
    }

.award_entry {
}

    .award_entry .custom-modal-content h3 {
        margin-bottom: 12px;
    }

#ContentPlaceHolder1_fuAwardPdf {
    padding: 8px 15px 0 40px;
}

#ContentPlaceHolder1_btnAddAward {
    height: 40px;
    margin-bottom: 0;
    position: relative;
}

.award_entry .docs_req_body {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.notification-bell {
    position: relative;
    text-decoration: none;
}

#notificationCount {
    position: absolute;
    top: -15px;
    right: -15px;
    color: #fff;
    border-radius: 50%;
    border: 1.5px solid #fff;
    font-size: 9px;
    width: 20px;
    height: 20px;
    font-weight: 600;
    background: #ff0000;
    padding: 0px;
    line-height: 18px;
    display: flex;
    align-content: center;
    justify-content: center;
}
/* Microsoft Edge password reveal icon remove */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

/* New Chromium Edge */
input::-webkit-credentials-auto-fill-button,
input::-webkit-contacts-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
    height: 0;
    width: 0;
    margin: 0;
}



/*.table-loaded::-webkit-scrollbar-track {
    background: transparent;
}

.table-loaded::-webkit-scrollbar-thumb {
    background: #f7f4ef;
    border-radius: 20px;
}*/

.head_tet_doc_sec {
    position: relative;
    font-size: 20px;
    margin-bottom: 14px;
    color: #9e0606;
    border-bottom: 1px dashed #9e0606;
    padding-bottom: 25px;
    margin-bottom: 20px;
}

.zoom_btn_sec {
    margin-bottom: 0;
    position: absolute;
    top: 18px;
    right: 60px;
}

    .zoom_btn_sec .btn {
        background: #9a2219;
        color: #fff;
    }

    .zoom_btn_sec .btn-warning {
        background: #6c5632;
    }

.acc-label.btn_acc {
    padding: 5px 15px 5px 10px;
    background: #fff2d6;
    border-radius: 12px;
    color: #a4192c;
}




.something {
    border: 2px solid red !important;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.1);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-box {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    width: 400px;
}


.custom_modal {
    width: 700px;
    padding: 0px;
    animation: popupAnim 0.3s ease;
    max-width: 700px;
    margin: 0 auto;
    min-height: calc(100vh - 253px);
    display: grid;
    grid-template-columns: 1fr;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 32px;
    overflow: hidden;
    box-shadow: var(--shadow);
    position: relative;
    z-index: 1;
    top: 15px;
}

@keyframes popupAnim {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.modal-header-custom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 0 20px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

    .modal-header-custom h2 {
        margin: 0;
        font-size: 24px;
        color: #1e293b;
        font-weight: 700;
    }

.close-icon {
    font-size: 20px;
    cursor: pointer;
    color: #ab8c2d;
    font-weight: bold;
    position: absolute;
    right: 15px;
    top: 5px;
    opacity: 0.7;
}

.form-group-custom {
    margin-bottom: 18px;
}

    .form-group-custom label {
        display: block;
        margin-bottom: 7px;
        font-size: 14px;
        font-weight: 600;
        color: #374151;
    }

.custom-input {
    width: 100%;
    height: 45px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    outline: none;
    transition: 0.3s;
}

    .custom-input:focus {
        border-color: #2563eb;
        box-shadow: 0 0 5px rgba(37,99,235,0.3);
    }

.btn-area {
    margin-bottom: 18px;
}

.custom-btn {
    width: 100%;
    height: 45px;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.otp-btn {
    background: #2563eb;
}

.verify-btn {
    background: #16a34a;
}

.resume-btn {
    background: #7c3aed;
}

.close-btn {
    background: #dc2626;
}

.custom-btn:hover {
    opacity: 0.9;
}

.ins_moda_logo_sec {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    /*    border-bottom: 1px dashed #ab8c2d;
    padding-bottom: 5px;
    margin-bottom: 5px;*/
    padding: 10px 15px;
}

.ins_moda_logo_sec_inner {
    position: relative;
    width: 5%;
    flex: 0 0 5%;
}

    .ins_moda_logo_sec_inner img {
        width: 100%;
        object-fit: cover;
    }

.inst_mod_text_sec {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: flex-start;
    align-items: baseline;
}

    .inst_mod_text_sec h6 {
        position: relative;
        color: #163261;
        font-size: 20px;
        font-family: "Oswald", sans-serif;
        margin-bottom: 0;
        text-align: left;
    }

    .inst_mod_text_sec h5 {
        position: relative;
        color: #ab8c2d;
        font-size: 12px;
        font-family: "Oswald", sans-serif;
        margin-bottom: 0;
        text-align: left;
    }

.modal_head_main_sec_close {
    position: relative;
}

.modal_banner_sec {
    position: relative;
    width: 100%;
    margin: 10px 0 0 0;
}
    /*.modal_banner_sec:after {
    position: absolute;
    content:'';
    background: url(../images/mact-images/insurance-img.png);
    margin-top: 10px;
    height: 700px;
    width: 670px;
    border-radius: 5px;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: contain;
}*/
    .modal_banner_sec img {
        width: 100%;
        object-fit: cover;
    }

    .modal_banner_sec h4 {
        position: absolute;
        left: 0;
        right: 12px;
        top: 60px;
        bottom: 0;
        width: 45%;
        margin: 0 auto;
        line-height: 30px;
        color: #4e411b;
        font-family: "Oswald", sans-serif;
        font-size: 21px;
    }

.h2_text_sec {
    position: relative;
    text-align: center;
    margin: 12px 0 0 0;
    font-size: 20px;
    font-weight: 600;
    color: #163261;
    font-family: "Oswald", sans-serif;
}

.new_from_sec_moda {
    margin-bottom: 18px;
    text-align: left;
    width: 100%;
    margin: 0 auto 0px;
    position: relative;
    padding: 0 20px;
}

    .new_from_sec_moda .otp-btn {
        background: #163261;
        height: 40px;
        bottom: 1px;
        position: relative;
    }

    .new_from_sec_moda .btn-area {
        position: relative;
        margin: 0px;
        top: 7px;
    }

.flex_row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
}

.main_brdr_sec_new {
    position: relative;
    margin: 10px 0;
    border: 1px dashed #ab8c2d;
    border-radius: 0 0 30px 30px;
}

/*    .main_brdr_sec_new .register_class_sec .form-input, .form-control {
        padding: 0 15px 0 15px
    }*/

.flex_row_new {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
    padding: 20px 0;
}

    .flex_row_new .form-group-custom {
        margin-bottom: 0;
    }

    .flex_row_new .btn-area {
        margin-bottom: 0;
        position: relative;
    }

    .flex_row_new .verify-btn {
        background: #069538;
        height: 40px !important;
        bottom: -10px;
        position: relative;
    }

.comp_head_main {
    position: relative;
    /*    height:450px;
    overflow-y:scroll;*/
}

.comp_main_sec_new_entry {
    position: relative;
    padding: 10px 0;
}

    .comp_main_sec_new_entry h2 {
        position: relative;
        font-size: 25px;
        font-family: "Oswald", sans-serif;
        color: #000;
        margin-bottom: 0px;
        font-weight: 600;
        background: linear-gradient(135deg, #0b3c78, #1d5ba8);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        display: inline-block;
        text-align: left;
    }

    .comp_main_sec_new_entry .search-field {
        position: relative;
        display: grid;
        grid-template-columns: 0.7fr 0.6fr 0.5fr 0.3fr;
        grid-column-gap: 10px;
        /*        border-bottom: 1px dashed #ab8c2d;
        margin-bottom: 20px;*/
    }

.new_cust_mod_lenh {
    width: 950px;
    max-width: 950px;
}

    .new_cust_mod_lenh .modal_banner_sec h4 {
        top: 95px;
        font-size: 20px;
        text-align: center;
    }

.comp_main_sec_new_entry .form-group {
    display: flex;
    flex-direction: column;
}

.new_modl_insurance .form-group input {
    padding-left: 15px;
}

.new_modl_insurance .form-group select {
    padding-left: 15px;
}

.new_modl_insurance #btnSubmit {
    display: flex;
    align-items: center;
    height: 40px !important;
    padding: 0 !important;
    margin: 0px !important;
    background: #4f321d;
    font-size: 14px;
    top: 22px !important;
    position: relative;
}

#resultSection {
    position: relative;
    display: flex;
    gap: 20px;
    border-bottom: 1px dashed #ab8c2d;
    padding-bottom: 20px;
}

.result-box {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.result-box {
    position: relative;
    display: flex;
    width: 50%;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

    .result-box h4 {
        font-size: 20px;
        font-weight: 600;
        color: #165388;
        font-family: "Oswald", sans-serif;
    }

    .result-box p {
        font-size: 16px;
        font-weight: 500;
        color: #000;
        margin-bottom: 5px;
    }

.compensation-entry .acc-body {
    width: 100%;
    position: relative;
}

#paymentSection {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 10px;
    border-bottom: 1px dashed #ab8c2d;
    margin-bottom: 20px;
}

#noAppealSection {
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 10px;
    border-bottom: 1px dashed #ab8c2d;
    padding-bottom: 20px;
}

.modal-header-custom h4 {
    position: relative;
    font-size: 18px;
    font-family: "Oswald", sans-serif;
    color: #000;
    margin-bottom: 10px;
}

.comp_head_main .close-btn {
    background: #1a559f;
    height: 30px;
    width: 30px;
    line-height: 25px;
    display: flex;
    align-content: center;
    justify-content: center;
    right: 12px;
    position: relative;
    border-radius: 5px;
    color: #fff;
    font-size: 20px;
}

.comp_head_main .modal-body-custom .row {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;
}

.comp_head_main .modal-header-custom {
    margin-bottom: 10px;
}

.comp_head_main .modal-body-custom .row div h5 {
    font-size: 14px;
    font-weight: 600;
    color: #165388;
    font-family: "Oswald", sans-serif;
    margin-bottom: 10px;
}

.comp_head_main .modal-footer-custom {
    position: relative;
    display: flex;
    align-content: center;
    justify-content: center;
    margin-top: 30px;
}

    .comp_head_main .modal-footer-custom .btn {
        background: #5a2d0c;
        color: #fff;
    }

#upiSection {
    display: block;
    width: 50%;
    margin: 0;
}

#imgQRCode {
    display: block;
    width: 100%;
}

#lblMessage {
    color: Green;
    font-size: 12px;
    margin: 0 0 10px 0;
    display: block;
}

#upiSection p {
    font-size: 12px;
    margin: 10px 0 0 0;
}

.new_panel_left::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("../images/mact-images/bg-left-1.png");
    pointer-events: none;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}



.new_panel_left::after {
    position: absolute;
    left: 0px;
    top: 0px;
    background: linear-gradient(175deg, #1e3444 0%, #2a5270 50%, #24394f 100%);
    content: '';
    height: 100%;
    width: 100%;
    opacity: 0.6;
}


.new_panel_left {
    /*    background: #960018;
    background: linear-gradient(175deg, #1e3444 0%, #2a5270 50%, #24394f 100%);*/
    color: var(--white);
    padding: 56px 44px;
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.login-left-content .emblem {
    margin-bottom: 20px;
}

.new_panel_left .login-tagline {
    text-shadow: 1px 1px 8px #000;
}

.mod_right_sec_new {
    position: relative;
    padding: 10px 10px 0 10px;
    box-shadow: rgba(0, 0, 0, 0.41) 0px 5px 15px;
    margin: 0px;
    border-radius: 30px;
    background: #fff;
}

.ins_moda_logo_sec:before {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: url("../images/mact-images/head_bg_new.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    border-radius: 30px 30px 0 0;
}

.custom_modal .login-brand {
    font-size: 33px;
}

.input_box_main_sec {
    position: relative;
}

    .input_box_main_sec i {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #888686;
        font-size: 15px;
        z-index: 999999;
        font-weight: 600;
    }


.features {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px dashed #d8c49a;
    padding: 20px 0;
}

.feature-box {
    padding: 0;
    text-align: center;
    border-right: 1px solid #ececec;
    transition: .3s;
}

    .feature-box:last-child {
        border-right: none;
    }

    .feature-box:hover {
        background: #fafcff;
    }

.feature-icon {
    width: 40px;
    height: 40px;
    margin: auto;
    border-radius: 50%;
    background: #e9e4d6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    box-shadow: rgba(171, 140, 45, 0.63) 0px 5px 15px;
}

    .feature-icon i {
        color: #b8861f;
        font-size: 18px;
    }

.feature-title {
    color: #223a5d;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
    min-height: auto;
}

.feature-desc {
    color: #69788d;
    font-size: 10px;
    line-height: 1.7;
    font-weight: 500;
}


.bottom-bar {
    background: #f2f7ff;
    padding: 15px 15px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #223a5d;
    font-size: 12px;
    border-top: 1px solid #e4edf8;
    border-radius: 0 0 30px 30px;
    justify-content: center;
}

    .bottom-bar i {
        color: #163d75;
    }

.ver_otp_box {
    justify-content: center;
    padding: 10px 0;
}

    .ver_otp_box .form-group-custom label {
        text-align: left;
    }

    .ver_otp_box .flex_row_new .verify-btn {
        width: 119px;
    }

.brdr_non {
    border-bottom: none;
    border-left: none;
    border-right: none;
}

.new_modl_insurance .modal-header-custom {
    justify-content: center;
}

    .new_modl_insurance .modal-header-custom .h2_text_sec {
        font-size: 25px;
        text-align: center;
    }

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

.new_cust_top_0 {
    top: 0px;
}

.comp_enter_box_shadow {
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 15px;
    border-radius: 10px;
    background: #fef9f2;
}

.section_title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 15px;
    border-bottom: 1px dashed #cda752;
    padding-bottom: 12px;
}

    .section_title .icon_new {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, #0b3c78, #1d5ba8);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 15px;
        box-shadow: 0 8px 18px rgba(13, 59, 120, .2);
    }

.comp_enter_box_shadow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #c59d45, #f0d089, #c59d45);
    border-radius: 15px 15px 0 0;
}




.comp_main_sec_new_entry .radio-group-custom {
    display: flex;
    align-items: center;
    gap: 35px;
    flex-wrap: wrap;
    padding-left: 5px;
    margin-bottom: 10px;
}

.comp_main_sec_new_entry .radio-item-custom {
    display: flex !important;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    /*    font-family: "Oswald", sans-serif;*/
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #3b2c13 !important;
    position: relative;
}

    .comp_main_sec_new_entry .radio-item-custom input[type="radio"] {
        appearance: none;
        -webkit-appearance: none;
        width: 24px;
        height: 24px;
        border: 3px solid #c8a44d;
        border-radius: 50%;
        background: #fff;
        cursor: pointer;
        position: relative;
        transition: all .3s ease;
        padding: 0px;
    }

        .comp_main_sec_new_entry .radio-item-custom input[type="radio"]:checked {
            border-color: #1f5fb9;
            box-shadow: 0 0 0 4px rgba(31,95,185,.12);
        }

        .comp_main_sec_new_entry .radio-item-custom input[type="radio"]::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #1f5fb9;
            transform: translate(-50%, -50%) scale(0);
            transition: .3s ease;
        }

        .comp_main_sec_new_entry .radio-item-custom input[type="radio"]:checked::before {
            transform: translate(-50%, -50%) scale(1);
        }

    .comp_main_sec_new_entry .radio-item-custom span {
        transition: .3s ease;
    }

    .comp_main_sec_new_entry .radio-item-custom input[type="radio"]:checked + span {
        color: #8b6a1f;
        font-weight: 600;
    }

.box_new_mod_box_sec {
    width: 100%;
    padding: 0px;
}

.comp_main_sec_new_entry .search-field label {
    font-family: "Lato", sans-serif !important;
    color: #000 !important;
}

.new_modl_insurance .form-group select {
    padding-left: 15px;
    background: transparent;
    border: 1px solid #c7a87d;
}

.new_modl_insurance .form-group input {
    padding-left: 15px;
    background: transparent;
    border: 1px solid #c7a87d;
}

.resend-otp-sec {
    position: absolute;
    right: 35px;
    bottom: 15px;
    margin: 0px !important;
}

    .resend-otp-sec .resend-otp-link {
        color: #092e54;
        text-decoration: none;
        font-size: 14px;
    }

.pad_modl_sec.modal-box {
    width: 100%;
    padding: 0px;
}

.new_submit_btn_sec_new {
    position: relative;
    flex-direction: inherit !important;
    justify-content: center !important;
    top: 0px !important;
}

    .new_submit_btn_sec_new #btnSubmit {
        top: 0px !important;
        background: linear-gradient(135deg, #0b3c78, #1d5ba8);
    }

.result-box {
    flex: 1;
    border: 1px dashed #d3ae5c;
    padding: 15px;
    background: #f6eddf;
    border-radius: 5px;
    box-shadow: 0 10px 28px rgba(0,0,0,.06);
}

.section_title h4 {
    position: relative;
    font-size: 16px;
    font-family: "Oswald", sans-serif;
    color: #000;
    margin-bottom: 0px;
    font-weight: 600;
    background: linear-gradient(135deg, #0b3c78, #1d5ba8);
    background-clip: border-box !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
    text-align: left;
}

.brd_all_none {
    position: relative;
    padding: 0px;
    border: none !important;
    margin: 0px;
}

    .brd_all_none .icon_new {
        width: 35px;
        height: 35px;
    }

.vs-box {
    display: flex;
    align-items: center;
    color: #1a56a0;
    font-weight: 600;
}

    .vs-box span {
        display: flex;
        align-items: center;
        color: #1a56a0;
        font-weight: 600;
    }

.brdr_sec_new_gap_dottes {
    position: relative;
    border-bottom: 1px dashed #d3ae5c;
    margin-bottom: 20px;
    /*    border-top: 1px dashed #d3ae5c;*/
    width: 100%;
    /*    padding-top: 10px;*/
}


.grad_btn_se_new {
    top: 0px !important;
    background: linear-gradient(135deg, #0b3c78, #1d5ba8);
    display: flex;
    align-items: center;
    height: 40px !important;
    padding: 0 !important;
    margin: 0px !important;
    font-size: 14px;
    position: relative;
}

.main_div_btn {
    width: 130px;
    margin: 0 auto;
}

#noAppealSection {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 0px;
}

.no_app_class_sec {
    padding-bottom: 0px !important;
    border-bottom: none !important;
}

#topSection {
    border-bottom: 1px dashed #d3ae5c;
    padding-bottom: 20px;
}

#gvPayment tbody tr th {
    background: linear-gradient(135deg, #0b3c78, #1d5ba8);
    color: #fff;
    font-size: 12px;
    height: 100%;
    font-weight: 600;
    text-align: center;
}

#gvPayment tbody tr td {
    border: 1px solid #ccc;
    /*    display: flex;
    align-content: center;*/
    font-size: 14px;
    text-align: center;
    color: #000;
}

.new_pay_btn_sec {
    margin-top: 10px !important;
    border-bottom: 1px dashed #d3ae5c;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

    .new_pay_btn_sec #btnSave {
        top: 0px !important;
        background: linear-gradient(135deg, #0b3c78, #1d5ba8);
        display: flex;
        align-items: center;
        height: 40px !important;
        margin: 0px !important;
        font-size: 14px;
        position: relative;
    }

.md_ftr_cout .btn-success {
    top: 0px !important;
    background: linear-gradient(135deg, #0b3c78, #1d5ba8);
    display: flex;
    align-items: center;
    height: 40px !important;
    margin: 0px !important;
    font-size: 14px;
    position: relative;
}

.new_pay_btn_sec .delete-icon {
    padding: 5px;
    background: #124686;
}

.head_flex_sec_new_pay {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

#ddlPaymentMethod {
    padding-left: 15px;
    background: transparent;
    border: 1px solid #c7a87d;
}

.scan_sec_qr {
    background: linear-gradient(135deg,#8b5a2b,#d4a646);
    background-clip: border-box !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
    text-align: left;
}

.grid_box_sec_new {
    display: flex;
    gap: 20px;
    flex-direction: column;
    justify-content: center;
    /*    width: 100%;*/
    align-items: center;
    /*    width: 290px;*/
    /*    margin: 0 auto;*/
}

.payment-left {
    position: relative;
    width: 100%;
}

.payment-right {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.payment-left h5 {
    position: relative;
    font-size: 16px;
    font-family: "Oswald", sans-serif;
    color: #000;
    margin-bottom: 0px;
    font-weight: 600;
    background: linear-gradient(135deg, #0b3c78, #1d5ba8);
    background-clip: border-box;
    background-clip: border-box;
    background-clip: border-box !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
    text-align: left;
    margin-bottom: 20px;
}

#upiSection {
    margin: 0 auto !important;
}

.comp_head_main .modal-footer-custom .btn {
    color: #fff;
    top: 0px !important;
    background: linear-gradient(135deg, #0b3c78, #1d5ba8);
    display: flex;
    align-items: center;
    height: 40px !important;
    margin: 0px !important;
    font-size: 14px;
    position: relative;
}

.scan_sec_qr {
    position: relative;
    font-size: 16px;
    font-family: "Oswald", sans-serif;
    color: #000;
    margin-bottom: 0px;
    font-weight: 600;
    background: linear-gradient(135deg, #0b3c78, #1d5ba8);
    background-clip: border-box;
    background-clip: border-box;
    background-clip: border-box !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
    text-align: left;
    margin-bottom: 20px;
}

.grid_box_pay_new {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    align-items: center;
}

.qr_img_sec {
    position: relative;
    width: 100%;
}

    .qr_img_sec img {
        width: 100%;
        object-fit: cover;
    }

.new_cust_ra_sec input[type="radio"]::before {
    left: 12px !important;
}

.bg_cust_marron {
    position: relative;
    width: 100%;
}

.party-wrapper {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 12px;
}

.search-card {
    background: #fff;
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(229, 18, 18, 0.29);
    margin-bottom: 20px;
    border-top: 3px solid #e51212;
}

.search-box {
    margin-top: 20px;
}

.search-title {
    width: 100% !important;
    background: #fff !important;
    color: #000 !important;
    padding: 12px 15px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 8px;
    margin-bottom: 15px;
    text-align: left;
    /*    border: 1px solid #d7443f !important;*/
    border-left: 5px solid #ee2d2d !important;
}

    .search-title i {
        width: 40px;
        height: 40px;
        line-height: 40px;
        background: linear-gradient(175deg, var(--crimson-deep) 0%, var(--crimson) 50%, #E51212 100%);
        border-radius: 50%;
        text-align: center;
        color: #fff;
        margin-right: 10px;
    }

.search-options {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 15px;
    margin-bottom: 0px;
}

.search-option {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border-top: 2px solid #e51212;
    border-top-color: rgb(229, 18, 18);
    border-radius: 10px;
    padding: 12px 15px;
    min-width: auto;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.29);
    display: flex !important;
}


    .search-option:hover {
        border-color: #166fda;
        background: #f4f8ff;
        transform: translateY(-2px);
    }

    .search-option input[type="radio"] {
        transform: scale(1.2);
        margin: 0;
        width: auto;
    }

    .search-option span {
        font-size: 14px;
        font-weight: 600;
        color: #442410;
    }

.search-container {
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    width: 60%;
}

.search-input-wrapper {
    position: relative;
    flex: 1;
    width: 100%;
}

    .search-input-wrapper input {
        padding-left: 20px !important;
    }

.search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #166fda;
    font-size: 16px;
}

.search-input {
    width: 100%;
    height: 52px;
    border-radius: 12px;
    border: 1px solid #dcdcdc;
    padding-left: 48px !important;
    font-size: 15px;
    font-weight: 500;
    background: #fff;
    transition: 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

    .search-input:focus {
        border-color: #166fda;
        box-shadow: 0 0 0 4px rgba(22,111,218,0.10);
        outline: none;
    }

.search-btn-wrapper {
    width: 220px;
}

.search-btn-new {
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 5px;
    background: linear-gradient(175deg, var(--crimson-deep) 0%, var(--crimson) 50%, #E51212 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    transition: 0.3s;
    box-shadow: 0 4px 12px rgba(22,111,218,0.25);
    padding: 0px !important;
}

.search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(22,111,218,0.35);
}



.case-details-wrapper {
    margin-top: 30px;
    background: #ffffff;
    border-radius: 0px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border: 1px solid #e9edf3;
}

.case-details-top {
    color: #fff;
    padding: 0;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #8f121d;
    background: #f7f4ef;
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.08);
}

    .case-details-top i {
        font-size: 18px;
        position: relative;
        color: #fff;
        padding: 15px;
        display: flex;
        margin-right: 5px;
        border-radius: 0 5px 5px 0;
        background: linear-gradient(to bottom, #c0392b, #8e1b14);
    }

.case-details-body {
    padding: 15px 20px;
    background: #f7f4ef;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.detail-item {
    background: #f7f4ef;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 12px;
    height: 100%;
    transition: 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .detail-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(22,111,218,0.08);
        border-color: #8d1818;
    }

.detail-heading {
    font-size: 10px;
    font-weight: 700;
    color: #936229;
    margin-bottom: 0px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-data {
    font-size: 12px;
    font-weight: 600;
    color: #000;
    word-break: break-word;
    line-height: 1.5;
    width: 60%;
}

.hearing-highlight {
    background: linear-gradient(to right, #fff5f5, #ffffff);
    border-color: #ffd7d7;
}

    .hearing-highlight .detail-heading {
        color: #d7443f;
    }

/* PERSON DETAILS */
.person-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 18px;
    margin-top: 5px;
}

.person-card {
    background: #f7f4ef;
    border: 1px solid #dbe5f0;
    border-radius: 14px;
    padding: 15px;
    transition: .3s;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

    .person-card:hover {
        transform: translateY(-3px);
        border-color: #a3281e;
    }

.person-header {
    background: linear-gradient(to bottom, #c0392b, #8e1b14) !important;
    color: #fff;
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: center;
}

.person-row {
    margin-bottom: 10px;
    font-size: 14px;
    color: #1f2937;
    line-height: 1.5;
}

    .person-row span {
        font-weight: 700;
        color: #000;
    }

.person-btns {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.bank-btn {
    width: 100%;
    border: none;
    padding: 10px;
    border-radius: 8px;
    background: #f7f4ef;
    color: #492c17;
    font-weight: 600;
    border: 1px solid #b93528;
}

.person-btns .bank-btn:nth-child(2) {
    background: #f7f4ef;
    color: #000;
    border: 1px solid #b93528;
}

.amount-btn {
    width: 100%;
    border: none;
    padding: 10px;
    border-radius: 8px;
    background: linear-gradient(to right,#16a34a,#22c55e);
    color: #fff;
    font-weight: 600;
}

.bank-modal-header {
    background: linear-gradient(to right,#166fda,#7384ff);
    color: #fff;
    border: none;
    border-bottom-width: medium;
    border-bottom-style: none;
    border-bottom-color: currentcolor;
    color: #8f121d;
    background: #f7f4ef;
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.08);
    padding: 10px 15px !important;
}

#bankModal .modal-body {
    padding: 5px 20px;
    background: #f7f4ef;
}

    #bankModal .modal-body input {
        background: #f7f4ef;
        border: 1px solid #7b7979 !important;
        height: 40px !important;
        border-radius: 5px !important;
        padding-left: 15px;
    }

    #bankModal .modal-body select {
        background: #f7f4ef;
        border: 1px solid #7b7979 !important;
        height: 40px !important;
        border-radius: 5px !important;
    }

    #bankModal .modal-body textarea {
        background: #f7f4ef;
        border: 1px solid #7b7979 !important;
        border-radius: 5px !important;
    }





#bankModal .modal-footer {
    background: #f7f4ef;
}

    #bankModal .modal-footer input {
        width: 30%;
        margin: 0 auto;
    }


.bank-label {
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 5px !important;
    display: block !important;
}

.bank-input {
    height: 48px !important;
    border-radius: 10px !important;
    border: 1px solid #dbe5f0 !important;
    box-shadow: none !important;
}

textarea.bank-input {
    height: auto !important;
}

.save-bank-btn {
    border: none;
    padding: 10px 25px;
    border-radius: 10px;
    background: #6c5632;
    color: #fff;
    font-weight: 700;
}

.main_div_sec_add_amnt {
    padding: 20px;
}

body.modal-open {
    overflow: hidden;
}

#DepositModal .modal-dialog {
    max-width: 900px;
}

#DepositModal .modal-body {
    padding: 15px 20px;
}

#DepositModal .modal-footer {
    background: #f7f4ef;
}

    #DepositModal .modal-footer input {
        width: 30%;
        margin: 0 auto;
    }


.deposit-modal .modal-content {
    border: none;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 15px 45px rgba(0,0,0,.15);
}

.deposit-header {
    background: linear-gradient(175deg, var(--crimson-deep) 0%, var(--crimson) 50%, #7B1A1A 100%);
    padding: 12px 15px;
    color: #fff;
    border: none;
}

    .deposit-header h4 {
        font-size: 18px;
        font-weight: 700;
        margin: 0;
    }

    .deposit-header .close {
        color: #fff;
        opacity: 1;
        font-size: 20px;
    }

/* SECTION CARD */
.deposit-card {
    background: #fff;
    border-radius: 18px;
    border-radius: 0;
    border: 0;
    padding: 0;
    box-shadow: 0 4px 15px rgba(0,0,0,.04);
}

.deposit-title {
    font-size: 16px;
    font-weight: 700;
    color: #8e1b1b;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .deposit-title i {
        background: #eef5ff;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* LABEL */
.deposit-label {
    font-size: 14px;
    font-weight: 700;
    color: #5f6b7a;
    margin-bottom: 8px;
    display: block;
}

.deposit-label {
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 5px !important;
    display: block !important;
}

/* DISPLAY BOX - CORRECTED */
.info-box,
.deposit-input {
    width: 100%;
    height: 40px;
    border: 1px solid #7b7979 !important;
    height: 40px !important;
    border-radius: 5px !important;
    padding-left: 15px;
    font-size: 14px;
    color: #2c3e50;
    font-weight: 600;
}

/* FIX FOR ASP:LABEL */
.info-box {
    display: block !important;
    line-height: 35px;
    word-break: break-word;
}

/* ADDRESS */
.info-box-multi {
    display: block !important;
    width: 100%;
    font-size: 15px;
    line-height: 24px;
    word-break: break-word;
    border: 1px solid #7b7979 !important;
    height: 60px !important;
    border-radius: 5px !important;
    padding-left: 15px;
}

.deposit-input:focus {
    border-color: #166fda;
    box-shadow: 0 0 0 4px rgba(22,111,218,.12);
}

.macc-heading {
    font-size: 18px;
    font-weight: 700;
    color: #9b1c1c;
    margin-bottom: 0px;
    padding-bottom: 10px;
    border-bottom: none;
    margin-top: 10px;
}

.close-row-btn {
    background: #971b1b;
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
    position: absolute;
    right: 15px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    line-height: 0;
    padding: 0;
    font-size: 18px;
}

    .close-row-btn:hover {
        background: #c82333;
    }

.add_row_btn_sec_new {
    position: absolute;
    right: 0;
    bottom: 60px;
    width: 15%;
    height: 40px;
    padding: 0;
    background: #6c5632;
    font-size: 14px;
}

.detail-data textarea {
    background: #f7f4ef;
}

#modalResume {
    z-index: 9999999999;
}

    #modalResume .modal-header-custom {
        padding-left: 0px;
    }

    #modalResume #lblHeading {
        font-size: 22px;
        font-weight: 500;
        color: #000;
    }

.close.text-white {
    padding: 0 !important;
    margin: 0 !important;
    color: #fff !important;
    opacity: 1;
}

.sidebar a,
.sidebar a:hover,
.sidebar a:focus,
.sidebar .nav-item,
.sidebar .nav-item.active {
    text-decoration: none !important;
}

/* prevent underline on active menu */
.sidebar .active {
    text-decoration: none !important;
}

.padd_new_sec_inner {
    padding: 15px 20px;
}

    .padd_new_sec_inner ul {
        position: relative;
        margin: 0 0 30px 0;
    }

.dopist_jud_of .modal-body {
    padding: 0 !important;
}

.dopist_jud_of .case-details-wrapper {
    box-shadow: none;
    border: none
}

.dopist_jud_of .person-header {
    width: 15% !important;
}

.button_wrapper .action_row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.button_wrapper .action_btn {
    background: #901919;
    padding: 5px 10px;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
}

.dopist_jud_of .person-grid {
    grid-template-columns: 1fr;
}

.dopist_jud_of .bank-title {
    position: relative;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #841616;
}

.dopist_jud_of .table.table-bordered.deposit-grid tbody tr th {
    background: linear-gradient(135deg, #941c1c, #931b1b);
    color: #fff;
    font-size: 12px;
    height: 100%;
    font-weight: 600;
    text-align: center;
}

.dopist_jud_of .table.table-bordered.deposit-grid tbody tr td {
    border: 1px solid #ccc;
    /*    display: flex;
    align-content: center;*/
    font-size: 14px;
    text-align: center;
    color: #000;
}

.dopist_jud_of .case-details-wrapper .case-details-body {
    padding: 15px 0px;
}

.dopist_jud_of .top-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.new_flex_remanrk {
    flex-direction: column;
    justify-content: center;
    display: flex;
    width: 45%;
    padding: 15px 20px;
    margin: 0 auto !important;
}

    .new_flex_remanrk #ContentPlaceHolder1_btnSubmit {
        width: 100%;
        height: 40px;
        border: none;
        border-radius: 5px;
        background: linear-gradient(175deg, var(--crimson-deep) 0%, var(--crimson) 50%, #E51212 100%) !important;
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        transition: 0.3s;
        box-shadow: 0 4px 12px rgba(22,111,218,0.25);
        padding: 0px !important;
    }

#modalResume .custom_modal {
    left: 15px;
}





#divmodalotp #lblResmOtpStatus {
    position: absolute;
    left: 0;
    bottom: -15px;
    font-size: 10px;
}

#addressError {
    position: absolute;
    font-size: 10px !important;
}






@media only screen and (min-width:1801px) and (max-width:1920px) {
    .portal-wrap {
        max-width: 900px;
        margin: 40px auto 0;
        min-height: calc(100vh - 380px);
    }

    .sidebar {
        width: 300px;
    }

    .main {
        margin-left: 300px;
    }
}



/*Responsive Start*/

@media only screen and (min-width:1301px) and (max-width:1400px) {
    .page-heading h3 {
        font-size: 20px;
    }

    .page-heading ul li a {
        font-size: 14px;
    }

    .menu_master .panel-heading {
        font-size: 16px;
    }

    .custom-tabs > li > a {
        font-size: 14px;
    }

    .new_menu_table table th {
        font-size: 12px;
    }

    .new_menu_table table tbody tr td {
        font-size: 14px;
    }

    .btnApprove {
        font-size: 12px;
    }

    .btnReject {
        font-size: 12px;
    }
}


.new_h2_cls {
    font-size: 22px !important;
    line-height: 1.2;
    font-weight: 800 !important;
    color: #1d3b7b !important;
    margin: 0 !important;
}

.icn_mob {
    top: 45% !important;
    font-size: 16px !important;
}

.ver_otp_sec_new {
    background: #163261 !important;
}



.custom-tabs-new {
    border-bottom: 2px solid #e6e6e6;
    margin-bottom: 0px;
    list-style: none;
    padding-left: 0;
    display: flex;
}


    .custom-tabs-new > li {
        margin-right: 5px;
        display: block;
        padding: 10px 20px;
        color: #444;
        font-weight: 600;
        text-decoration: none;
        border-bottom: 3px solid transparent;
    }




        .custom-tabs-new > li > hover {
            color: #a82a20;
        }


        .custom-tabs-new > li.active {
            color: #a82a20;
            border-bottom: 3px solid #aa2c21;
            background: #fff;
            border-radius: 5px;
        }


    .custom-tabs-new li {
        list-style: none;
    }

#ContentPlaceHolder1_gvSubmittedCase_wrapper .row:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#ContentPlaceHolder1_gvReturnCases_wrapper .row:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#ContentPlaceHolder1_gvSubmittedCase_wrapper .row:last-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    margin-bottom: 10px;
}

    #ContentPlaceHolder1_gvSubmittedCase_wrapper .row:last-child .col-xs-12:nth-child(2) {
        justify-content: flex-end;
    }

#ContentPlaceHolder1_gvReturnCases_wrapper .row:last-child .col-xs-12:nth-child(2) {
    justify-content: flex-end;
}

#ContentPlaceHolder1_gvReturnCases_wrapper .row:last-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    margin-bottom: 10px;
}

.btn-sm .fa.fa-eye {
    color: #000;
}

.wizard-card .pagination ul {
    display: flex;
    gap: 12px;
    list-style: none;
}

    .wizard-card .pagination ul li::marker {
        display: none;
    }

    .wizard-card .pagination ul li {
        list-style: none;
    }

        .wizard-card .pagination ul li a {
            color: #3c200b
        }

.clas_padd_sec input {
    padding-left: 15px;
}

#divClaimant textarea {
    padding-left: 15px;
    padding-top: 15px;
}

.new_wid_from_sec {
    width: 350px !important;
}

.padd-0 {
    padding-left: 0px !important;
}

.menu_master_new {
    margin: 0 15px;
}

.padd_all {
    padding: 0 15px 15px 15px;
}

.menu_master_new .panel-heading {
    margin: 0 0 15px 0;
}

.text_box_cust {
    position: relative;
}

.pos_abs_text_box {
    position: absolute;
    width: 70px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-align: center;
}

    .pos_abs_text_box input {
        background: #9b1c1c;
        color: #fff;
        border: 1px solid #fff;
    }

.menu_master_new .panel-body {
    display: block;
}

.table-striped {
    width: 100%;
    position: relative;
}

#previewContainer .row {
    padding: 10px 20px;
}

    #previewContainer .row div {
        font-size: 12px !important;
        margin-bottom: 3px;
    }

#previewContainer h5 {
    position: relative;
    font-size: 18px;
    padding: 12px 15px;
    color: #c98c38;
}

#previewContainer .table-striped {
    padding: 0 20px;
    padding-bottom: 15px;
}

#previewContainer hr {
    border: 1px dashed #992119;
    padding: 0px 0;
    margin: 10px 20px;
}

.text-center .btn {
    margin-bottom: 15px;
}

.dataTables_wrapper .table-striped {
    display: inline-table !important;
}

.modal-body-custom .section-title {
    background: #fff;
    color: #a62a1f;
    margin: 5px 0px;
}

.modal-body-custom .info-section {
    margin-bottom: 0px !important;
}

.modal-body-custom .card-section {
    margin-bottom: 10px;
}

#ContentPlaceHolder1_gvSubmitted tbody tr td:nth-child(10) input {
    background: linear-gradient(135deg, #28A745, #198754);
}

#ContentPlaceHolder1_gvSubmitted tbody tr td:nth-child(11) input {
    background: linear-gradient(135deg, #FFC107, #C77D00);
}

#ContentPlaceHolder1_gvSubmitted tbody tr td:nth-child(12) input {
    background: linear-gradient(135deg, #C62828, #8B0000);
}

#ContentPlaceHolder1_gvVerified tbody tr td:nth-child(9) input {
    background: linear-gradient(135deg, #FFC107, #C77D00);
}

#previewContainer .row .col-md-4 div span:first-child {
    color: #b23024;
    font-size: 12px;
    background: #f9f7f3;
    padding: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    width: 180px;
    display: inline-block;
    border: 1px dashed #ba352847;
}

#previewContainer .row .col-md-4 div span:nth-child(2) {
    background: #ffffff42;
    padding: 5px;
    border-radius: 5px;
    width: 120px;
    display: inline-block;
    border: 1px solid #efeded;
}

#caseModal .custom-modal-content {
    width: 80% !important;
}

#ContentPlaceHolder1_btnSearch {
    background: linear-gradient(135deg, #FFC107, #C77D00);
}

#ContentPlaceHolder1_gvSubmittedCase_info {
    font-size: 12px;
}

#ContentPlaceHolder1_gvSubmittedCase_paginate {
    font-size: 12px;
}

.wizard-footer button.btn.btn-secondary {
    background: #c79a4b;
    color: #fff;
}

.wizard-footer input#ContentPlaceHolder1_btnSubmit {
    background: #1f4c0ad9;
}

.wizard-footer button.btn.btn-next {
    background: linear-gradient(135deg, #711111, #8d5a18);
}


.info-label {
    color: #ad2e22;
}

.grid-item span.label {
    color: #ad2e22;
}

.modern-table tbody td {
    text-align: center;
}

.judgment-label {
    color: #ad2e22;
}

.financial-label {
    color: #ad2e22;
}

#ContentPlaceHolder1_txtFinalPayableAmount {
    background: linear-gradient(135deg, #9f251c, #0056b3);
    color: #fff;
    text-align: center;
}

.districtTable thead {
    background: linear-gradient(to bottom, #c0392b, #8e1b14);
    color: #fff;
}

.districtTable th:first-child {
    border-radius: 10px 0 0 0px;
}

.districtTable th:last-child {
    border-radius: 0px 10px 0 0;
}

.districtTable th {
    font-size: 12px;
    padding: 13px 0px;
}

.districtTable td {
    font-size: 12px;
}

.districtTable tbody td {
    text-align: center;
    padding: 12px 9px;
    border: 1px solid #f1f1f1;
    margin: 5px 0;
    /*    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;*/
}

.districtTable tbody tr:nth-child(even) {
    background: #FAFAFA;
}

.districtTable tbody tr:hover {
    background: #FFF8F2;
    transition: .3s;
}

.table-dark th {
    color: #a4192c;
    font-size: 16px !important;
    background: none !important;
}

/* Width */
::-webkit-scrollbar {
    width: 8px; /* Vertical scrollbar */
    height: 8px; /* Horizontal scrollbar */
}

/* Track */
::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 10px;
}

/* Thumb */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8B0000, #C62828);
    border-radius: 10px;
    border: 2px solid #f5f5f5;
}

    /* Hover */
    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #6D0000, #A61C1C);
    }

/* Thumb */
.table-loaded ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8B0000, #C62828);
    border-radius: 10px;
    border: 2px solid #f5f5f5;
}

    /* Hover */
    .table-loaded ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #6D0000, #A61C1C);
    }


.case-summary-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,.08);
    overflow: hidden;
    margin-bottom: 25px;
    width: 100%;
}

.case-summary-header {
    background: #fff;
    color: var(--ink);
    padding: 0 0 20px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .case-summary-header h3 {
        font-size: 20px;
        font-weight: 700;
        text-transform: capitalize;
        background: linear-gradient(to bottom, #ff3a25, #8e1b14);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
    }

    .case-summary-header span {
        font-size: 13px;
        opacity: .9;
        color: #4a5568;
    }

.summary-badge {
    background: linear-gradient(to bottom, #c0392b, #8e1b14);
    border: 1px solid #9b1c1c;
    padding: 8px 15px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}


.case-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .case-grid th {
        background: linear-gradient(to bottom, #c0392b, #8e1b14);
        color: #fff;
        padding: 13px;
        text-align: center;
        white-space: nowrap;
        font-weight: 600;
        font-size: 12px;
        border-right: 1px solid #fff;
    }

        .case-grid th:first-child {
            border-radius: 10px 0 0 0;
        }

        .case-grid th:last-child {
            border-radius: 0px 10px 0 0;
        }

    .case-grid td {
        border-bottom: 1px solid #ECECEC;
        vertical-align: middle;
        font-size: 12px;
        padding: 12px 9px;
        border: 1px solid #f1f1f1;
        margin: 5px 0;
        text-align: center !important;
    }

    .case-grid tr:nth-child(even) {
        background: #FAFAFA;
    }

    .case-grid tr:hover {
        background: #FFF8F2;
        transition: .3s;
    }

    /*    .case-grid td:nth-child(6),
    .case-grid td:nth-child(8),
    .case-grid td:nth-child(9),
    .case-grid td:nth-child(10) {
        text-align: right;
        font-weight: 600;
    }

    .case-grid td:nth-child(7) {
        white-space: pre-line;
        line-height: 24px;
        min-width: 260px;
    }

    .case-grid td:last-child {
        font-weight: 700;
        color: #0F766E;
    }*/

    .case-grid td:nth-child(7) {
        line-height: 24px;
    }

.chart-container .bar-label {
    font-size: 9px;
}

span#mobileError {
    font-size: 10px;
}

small#passwordMatch {
    position: relative;
    bottom: 0;
    font-size: 10px;
}


.new_panel_body_sec_new {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 0 25px 20px;
}

.panel_4_body {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

span#ContentPlaceHolder1_lblMsg {
    position: absolute;
    font-size: 10px;
}

.logo-text h2 span {
    /*display: block;*/
    display: none;
    line-height: 18px;
    color: #fff;
}

#ContentPlaceHolder1_gvSubmittedCase input.btn-sm {
    background: linear-gradient(135deg, #AF2F23, #b88e15);
}

.panel-body-new {
    padding: 0 25px 20px;
}

.new_row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
}

#ContentPlaceHolder1_fuSignature {
    padding-top: 8px;
}

#ContentPlaceHolder1_btnAddDisbursal {
    background: linear-gradient(to bottom, #c0392b, #8e1b14);
}

#ContentPlaceHolder1_imgPhotoPreview {
    position: relative;
    padding: 5px;
    margin-top: 10px;
    border: 2px dotted #9e251b !important;
}

#ContentPlaceHolder1_imgSignaturePreview {
    width: 120px !important;
    height: 120px !important;
    object-fit: cover !important;
    padding: 5px;
    margin-top: 10px;
    border: 2px dotted #9e251b !important;
}

.table_count tbody td:last-child {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#ContentPlaceHolder1_divDisbursalList .btn-warning.btn-xs {
    background: linear-gradient(135deg, #D29B19, #ad8100);
    width: 100%;
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
}

#ContentPlaceHolder1_divDisbursalList .btn-danger.btn-xs {
    background: linear-gradient(135deg, #901C15, #fe1500);
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}

#btnCompensationUnclaimed {
    background: linear-gradient(135deg, #AF2F23, #b88e15);
    padding: 5px;
    height: 31px;
    border: none;
    border-radius: 7px;
    font-size: 12px;
}

.new_cut_padd_col {
    background: #fff;
    color: #9a2219;
    padding: 15px 25px !important;
}

#CompensationUnclaimedModal .modal-dialog {
    position: relative;
}

.mod_body {
    background: #f8fafc;
    padding: 0 25px;
}

.modal-section-body-new {
    position: relative;
    padding: 0 25px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 20px;
}

    .modal-section-body-new #ContentPlaceHolder1_btnAdd {
        position: relative;
        right: -15px;
        bottom: -8px;
        width: 150px;
        z-index: 999999;
        height: 40px;
        background: linear-gradient(135deg, #977014, #ad8100);
    }

.reason_btn {
    position: relative;
    display: flex;
    align-items: center;
}

#ContentPlaceHolder1_txtReason {
    padding: 10px !important;
}

.modal-footer-new {
    position: relative;
}

#CompensationUnclaimedModal .table th {
    background: linear-gradient(to bottom, #c0392b, #8e1b14);
}

#ContentPlaceHolder1_btnSaveUnclaimed {
    width: 180px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    background: linear-gradient(to bottom, #c0392b, #8e1b14);
}

#CompensationUnclaimedModal .table td {
    text-align: center;
    font-size: 12px;
}

#ContentPlaceHolder1_grdPending .btn.btn-success.btn-sm {
    width: 150px;
    background: linear-gradient(135deg, #D29B19, #ad8100);
}






/*satya*/

.upload_btn_new {
    background: linear-gradient(135deg, #AD1000, #edb30e) !important;
    font-size: 14px;
    font-weight: 600;
}

.btn_approve_new {
    background: #0d924e;
    font-size: 12px;
    font-weight: 600;
}

.btn_reject_new {
    background: #bb1200;
    font-size: 12px;
    font-weight: 600;
}

.btn_sendback_new {
    background: #b36d00;
    font-size: 12px;
    font-weight: 600;
}

.btn_view_new i {
    color: #9a2219;
}

.document_sec_new {
    color: #9a2219;
}

.new_excel_btn_sec {
    text-align: center;
    position: relative;
    left: -27px;
}

.new_menu_table table tbody tr td:first-child {
    text-align: center;
    padding: 10px 15px;
}

.btn-excel {
    background: #a60000;
}

.btn-pdf {
    background: #b17c00;
}

    .btn-pdf:hover {
        background: #d4a126;
    }


.excel_main_sec {
    display: flex;
    justify-content: space-between;
    background: #f7f4ef;
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.08);
    align-items: center;
}

    .excel_main_sec .panel-heading {
        box-shadow: none;
        margin-bottom: 0 !important;
    }

.view_btn_new_doc {
    display: inline;
    color: #f7f4ef;
    text-decoration: underline;
    position: absolute;
    bottom: -60px;
    background: linear-gradient(135deg, #DE1000 0%, #8E1818 100%);
    padding: 8px 18px;
    border-radius: 10px;
    text-decoration: none;
}

.view_btn_top {
    position: relative;
    top: 10px;
}


#previewContainer .row div {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.mb-2 {
    display: flex;
    justify-content: start;
    align-items: center;
}

.receipt_entry_btn {
    background: linear-gradient(135deg, #BC5F0D, #e0af20);
}

#ContentPlaceHolder1_ddlRemitterType {
    background: #f6f6f6;
    color: #000;
    padding: 0 15px 0 40px;
    border-radius: 10px;
    border: 1px solid #8d99a2;
}

#ContentPlaceHolder1_ddlReceiptMode {
    background: #f6f6f6;
    color: #000;
    padding: 0 15px 0 40px;
    border-radius: 10px;
    border: 1px solid #8d99a2;
}

.smbt_sec_btn {
    background: linear-gradient(135deg, #AF2F23, #bca914) !important;
    font-size: 14px;
    font-weight: 500;
}

.dlt_btn_new {
    background: linear-gradient(135deg, #901C15, #fe1500);
    color: #fff;
}

.edit_btn_new_s {
    background: linear-gradient(135deg, #D29B19, #ad8100) !important;
}

.table-bordered thead th, .table-bordered th {
    background: linear-gradient(to bottom, #c0392b,#8e1b14);
}



.export-btn.btn-excel {
    padding: 0;
    margin: 0;
    font-family: 'DM Sans', sans-serif;
}

.export-btn.btn-pdf {
    padding: 0;
    margin: 0;
    font-family: 'DM Sans', sans-serif;
}


#ContentPlaceHolder1_txtAddress {
    padding: 15px;
}

.menu_master .panel-body {
    align-items: center;
}

.new_menu_table .dataTables_wrapper:nth-child(1) .row {
    z-index: 9;
}

.adv-table.editable-table {
    width: 100%;
}







.color-cards {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
    width: 100%;
}

.color-card {
    position: relative;
    overflow: hidden;
    padding: 20px 22px;
    border-radius: 18px;
    min-height: auto;
    transition: .35s;
    border: 1px solid rgba(255,255,255,.8);
    box-shadow: 0 10px 30px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.8);
}

    .color-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 35px rgba(0,0,0,.12);
    }

    /* Decorative Glow */

    .color-card::before {
        content: '';
        position: absolute;
        right: -40px;
        top: -40px;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background: rgba(255,255,255,.45);
    }

    .color-card::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,rgba(255,255,255,.22),transparent);
        pointer-events: none;
    }

/* Top */

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

.card-icon {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    box-shadow: 0 10px 25px rgba(0,0,0,.12);
}

.card-menu {
    border: 0;
    background: none;
    font-size: 22px;
    color: #444;
    cursor: pointer;
}

.badge {
    background: #ff2d55;
    color: #fff;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 30px;
    font-weight: 700;
}

/* Content */

.card-title {
    margin-top: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #3d3d3d;
}

.card-value {
    margin-top: 10px;
    font-size: 36px;
    font-weight: 700;
    color: #1e1e1e;
}

.card-bottom {
    margin-top: 00;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.growth {
    font-size: 13px;
    font-weight: 600;
}

.positive {
    color: #169b46;
}

.negative {
    color: #d32f2f;
}

.sparkline {
    width: 105px;
    height: 22px;
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ORANGE */

.orange {
    background: linear-gradient(135deg,#fff5ec,#ffe3cd);
}

    .orange .card-icon {
        background: linear-gradient(135deg,#ff7b29,#ff5a00);
    }

    .orange .sparkline path {
        stroke: #ff6a00;
    }

/* YELLOW */

.yellow {
    background: linear-gradient(135deg,#fff9e8,#fff0c8);
}

    .yellow .card-icon {
        background: linear-gradient(135deg,#ffbf00,#f59e0b);
    }

    .yellow .sparkline path {
        stroke: #f5a000;
    }

/* GREEN */

.green {
    background: linear-gradient(135deg,#effff0,#dff7dd);
}

    .green .card-icon {
        background: linear-gradient(135deg,#34c759,#16a34a);
    }

    .green .sparkline path {
        stroke: #22a447;
    }

/* RED */

.red {
    background: linear-gradient(135deg,#fff2f2,#ffe1e1);
}

    .red .card-icon {
        background: linear-gradient(135deg,#ef4444,#c1121f);
    }

    .red .sparkline path {
        stroke: #ef4444;
    }

/* Responsive */

@media(max-width:1200px) {

    .color-cards {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {

    .color-cards {
        grid-template-columns: 1fr;
    }
}
.dis_flex_sec_new_main{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    justify-content:flex-start;
}