/***********blazor default*************/
.invalid {
    border: 1px solid #ffa89f !important;
    background: #fff9f8;
}

.validation-message {
    color: red;
}

.form-validation-failed .validation-message {
    display: block;
}

.form-validation-failed .validation-summary-errors {
    display: block;
}

.form-validation-failed input.invalid,
.form-validation-failed select.invalid,
.form-validation-failed textarea.invalid,
.form-validation-failed .form-control.invalid,
.form-validation-failed .form-select.invalid {
    border: 1px solid #ffa89f !important;
    background: #fff9f8;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }
/******************************************/

@font-face {
    font-family: IY;
    font-style: normal;
    font-weight: 900;
    src: url('../Fonts/IY/IYBlack.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: IY;
    font-style: normal;
    font-weight: bold;
    src: url('../Fonts/IY/IYBold.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: IY;
    font-style: normal;
    font-weight: 300;
    src: url('../Fonts/IY/IYLight.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: IY;
    font-style: normal;
    font-weight: normal;
    src: url('../Fonts/IY/IY.woff') format('woff');
    font-display: swap;
}

html {
    font-family: IY !important;
}

.fw-black {
    font-weight: 900 !important;
}

.fs1-5x {
    font-size: 1.5rem;
}

.fs1-25x {
    font-size: 1.25rem;
}

.fs-12 {
    font-size: 12px !important;
}

.fs-13 {
    font-size: 13px !important;
}

.fs-14 {
    font-size: 14px !important;
}

body {
    font-family: IY !important;
    font-weight: 300;
    background-image: url(../img/main-pattern.webp);
    background-color: #ebf1f6;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    color: var(--darkblue);
    direction: rtl;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.curspointer {
    cursor: pointer;
}

table p {
    margin-bottom: 0.35rem;
}

/* width */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #d6d6d6;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #b9b9b9;
    }

.noaction .dxbl-grid-table tr > *:nth-child(1) {
    display: none;
}

.noaction .dxbl-grid-table colgroup > *:nth-child(1) {
    display: none;
}
/*****colors*****/
:root {
    --white: #fff;
    --purple: #6c5ffc;
    --lightpurple: #f0efff;
    --darkblue: #282f53;
    --green: #29b39c;
    --lightgreen: #e5fcf2;
    --yellow: #ffc107;
    --lightyellow: #ffecb9;
    --red: #e82646;
    --lightred: #ffebe9;
    --blue: #05c3fb;
    --lightblue: #e6f9ff;
}

button:focus {
    outline: none;
}

.btn:first-child:active {
    border-color: none;
}

.alert-danger {
    --bs-alert-color: #e82646;
    --bs-alert-bg: #e8264626;
    --bs-alert-border-color: #e8264666;
}

.fc-sm input {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

.fc-sm label {
    font-size: 0.8rem;
}

.input-group-text {
    height: 100%;
    border-radius: 0 0.375rem 0.375rem 0;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-right: calc(var(--bs-border-width)* -1);
    border-radius: 0.375rem 0 0 0.375rem;
}

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

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

.FormReadOnly {
    pointer-events: none;
}

    .FormReadOnly .dxbl-scroll-viewer {
        pointer-events: auto;
    }

    .FormReadOnly .dxbl-grid-table {
        pointer-events: none;
    }

    .FormReadOnly .dxbl-grid-bottom-panel.dxbl-pager-container {
        pointer-events: auto;
    }

/*******shared**********/
/*****buttons style*****/
.btnicon {
    vertical-align: middle;
}

.btn {
    margin: 1px;
}

.btn-purple {
    background: var(--purple);
    color: #fff;
    transition: all ease-out 0.5s;
}

    .btn-purple:hover {
        color: var(--darkblue) !important;
        box-shadow: inset 25rem 0 0 0 var(--lightpurple), 0 2px 10px #0000001f;
    }

.btn-purple-light {
    background: var(--lightpurple);
    color: #685bf3;
    box-shadow: 0 1px 0px #815ffc3d;
    /*border: 1px solid #815ffc14;*/
    transition: all ease-out 0.5s;
}

    .btn-purple-light:hover {
        color: #fff !important;
        box-shadow: inset 25rem 0 0 0 var(--purple), 0 2px 10px #0000001f;
    }

.btn-green {
    background: var(--green);
    color: #fff;
    transition: all ease-out 0.5s;
}

    .btn-green:hover {
        color: var(--darkblue) !important;
        box-shadow: inset 15rem 0 0 0 var(--lightgreen), 0 2px 10px #0000001f;
    }

.btn-green-light {
    background: var(--lightgreen);
    color: #177e6d;
    box-shadow: 0 1px 0px #0d78661f;
    /*border: 1px solid #29b39c1f;*/
    transition: all ease-out 0.5s;
}

    .btn-green-light:hover {
        color: #fff !important;
        box-shadow: inset 15rem 0 0 0 var(--green), 0 2px 10px #0000001f;
    }

.btn-yellow {
    background: var(--yellow);
    color: #282f53;
    transition: all ease-out 0.5s;
}

    .btn-yellow:hover {
        color: var(--darkblue) !important;
        box-shadow: inset 15rem 0 0 0 var(--lightyellow), 0 2px 10px #0000001f;
    }

.btn-yellow-light {
    background: var(--lightyellow);
    color: #e37f00;
    box-shadow: 0 1px 0px #be6c0036;
    /*border: 1px solid #ff910026;*/
    transition: all ease-out 0.5s;
}

    .btn-yellow-light:hover {
        color: var(--darkblue) !important;
        box-shadow: inset 15rem 0 0 0 var(--yellow), 0 2px 10px #0000001f;
    }

.btn-red {
    background: var(--red);
    color: #fff;
    transition: all ease-out 0.5s;
}

    .btn-red:hover {
        color: var(--darkblue) !important;
        box-shadow: inset 15rem 0 0 0 var(--lightred), 0 2px 10px #0000001f;
    }

.btn-red-light {
    background: var(--lightred);
    color: var(--red);
    box-shadow: 0 1px 0px #e8264630;
    /*border: 1px solid #e826461f;*/
    transition: all ease-out 0.5s;
}

    .btn-red-light:hover {
        color: #fff !important;
        box-shadow: inset 15rem 0 0 0 var(--red), 0 2px 10px #0000001f;
    }

.btn-blue {
    background: var(--blue);
    color: #fff;
    transition: all ease-out 0.5s;
}

    .btn-blue:hover {
        color: var(--darkblue) !important;
        box-shadow: inset 15rem 0 0 0 var(--lightblue), 0 2px 10px #0000001f;
    }

.btn-blue-light {
    background: var(--lightblue);
    color: #037799;
    box-shadow: 0 1px 0px #008db926;
    /*border: 1px solid #04c1fb26;*/
    transition: all ease-out 0.5s;
}

    .btn-blue-light:hover {
        color: #fff !important;
        box-shadow: inset 15rem 0 0 0 var(--blue), 0 2px 10px #0000001f;
    }

.btn-back {
    background: var(--lightpurple);
    color: var(--darkblue);
    transition: all ease-out 0.5s;
    margin-inline-start: auto;
}

    .btn-back .backicon {
        color: var(--purple);
        vertical-align: middle;
        transition: all ease-out 0.5s;
    }

    .btn-back:hover {
        color: #fff;
        box-shadow: inset 10rem 0 0 0 var(--purple), 0 3px 5px #6c5ffc24;
    }

        .btn-back:hover .backicon {
            color: #fff !important;
        }

.btnloading {
    position: relative;
    opacity: 0.6;
    pointer-events: none;
}

    .btnloading > * {
        visibility: hidden;
        opacity: 0;
        transition: all 0.2s;
    }

    .btnloading::after {
        content: "";
        position: absolute;
        width: 25px;
        height: 25px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        border: 4px dotted transparent;
        border-top-color: #ffffff;
        border-bottom-color: #ffffff;
        border-right-color: #ffffff;
        border-radius: 50%;
        animation: button-loading-spinner 1s ease infinite;
    }

@keyframes button-loading-spinner {
    from {
        transform: rotate(0turn);
    }

    to {
        transform: rotate(1turn);
    }
}

/*****End buttons style*****/

/*****text style*****/
.text-purple {
    color: var(--purple) !important;
}

.text-green {
    color: var(--green) !important;
}

.text-red {
    color: var(--red) !important;
}

.text-yellow {
    color: var(--yellow) !important;
}

.text-blue {
    color: var(--blue) !important;
}

.text-darkblue {
    color: var(--darkblue) !important;
}

/*****table color style*****/
.table-purple {
    --bs-table-bg: #6c5ffc29;
    --bs-table-border-color: #cac5fe;
    --bs-table-striped-bg: #6c5ffc29;
    --bs-table-active-bg: #6c5ffc29;
    --bs-table-hover-bg: #6c5ffc29;
    border-color: #cac5fe;
    border-bottom: none;
}

.table-yellow {
    --bs-table-bg: #ffc10733;
    --bs-table-border-color: #ffd968;
    --bs-table-striped-bg: #ffc10733;
    --bs-table-active-bg: #ffc10733;
    --bs-table-hover-bg: #ffc10733;
    border-color: #ffd968;
    border-bottom: none;
}

.table-green {
    --bs-table-bg: #74edb838;
    --bs-table-border-color: #a3dad1;
    --bs-table-striped-bg: #74edb838;
    --bs-table-active-bg: #74edb838;
    --bs-table-hover-bg: #74edb838;
    border-color: #a3dad1;
    border-bottom: none;
}

/*****bg style*****/
.bg-purple {
    background: var(--purple) !important;
}

.bg-lightpurple {
    background: var(--lightpurple) !important;
}

.bg-red {
    background: var(--red) !important;
}

.bg-lightred {
    background: var(--lightred) !important;
}

.bg-green {
    background: var(--green) !important;
}

.bg-lightgreen {
    background: var(--lightgreen) !important;
}

.bg-yellow {
    background: var(--yellow) !important;
}

.bg-lightyellow {
    background: var(--lightyellow) !important;
}

.bg-blue {
    background: var(--blue) !important;
}

.bg-lightblue {
    background: var(--lightblue) !important;
}

/*****End text style*****/

/********card style********/
.cardbox {
    background: var(--white);
    border-radius: 0.6rem;
    box-shadow: 0 2px 30px #0000000f;
}

.cardbox-header {
    display: flex;
    border-bottom: 1px solid #e9edf4;
    padding: 0.75rem;
    align-items: center;
}

    .cardbox-header .cardbox-title {
        font-weight: 900;
        font-size: 1.35rem;
    }

.cardbox-footer {
    border-top: 1px solid #e9edf4;
    padding: 0.5rem 0.75rem;
}


/********End card style********/

.hrdash {
    border-color: #e1e1e1;
    border-style: dashed;
    opacity: 1;
    box-shadow: 0 2px 0 #ffffff;
}

.fcbg {
    background-color: #f9fbff;
    border-radius: 0.6rem;
}

.form-control:focus {
    box-shadow: 0 0 0 .1rem rgba(13, 110, 253, .25);
}

.tblbgpurple.table thead th {
    background: linear-gradient(0deg, #f4f4ff, #ffffff);
}

/**table with fix top row**/
.table-fixtop {
    height: 300px;
    overflow: auto;
}

    .table-fixtop th,
    .table-fixtop thead {
        position: sticky;
        top: 0;
    }

/*############# override ##############*/
.modal-header {
    background: linear-gradient(360deg, #f0f8ff, transparent);
}

    .modal-header .fa-times {
        color: var(--darkblue);
    }

@media (min-width: 1200px) {
    .modal-xl {
        --bs-modal-width: 75% !important;
    }
}

@media (min-width: 1500px) {
    .modal-fullscreen {
        max-width: 1400px;
    }
}

@media (min-width: 1850px) {
    .modal-fullscreen {
        max-width: 1650px;
    }
}

.modal-fullscreen {
    margin: auto;
    height: 95%;
    top: 20px;
}

    .modal-fullscreen .modal-content {
        border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
        border-radius: var(--bs-modal-border-radius);
    }

.btn-group-sm > .btn, .btn-sm {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-border-radius: var(--bs-border-radius-sm);
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    color: #b7b7b7;
    pointer-events: none;
    background-color: #eeeeee;
    border-color: transparent;
    opacity: 0.65;
}

.form-control {
    border: 1px solid #dbe2ee;
    transition: box-shadow .15s ease-in-out;
}

.form-select {
    background-position: left 0.75rem center;
    padding: .375rem .75rem .375rem 2.25rem;
}

.control-label {
    margin-bottom: 0.25rem;
}

.tooltip {
    font-family: IY !important;
}

.btn {
    border-radius: 0.5rem !important;
}

.table {
    font-weight: normal;
    font-size: 15px;
    color: var(--darkblue);
    --bs-table-bg: inherit !important;
    --bs-table-color: inherit;
    --bs-table-border-color: #e9edf4;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: #fbfbff !important;
    box-shadow: none;
}

.table-hover > tbody > tr:hover > * {
    background: #fafafa !important;
    box-shadow: none;
    color: inherit;
}

/********blazor toast********/
.blazored-toast {
    border-radius: 12px !important;
    border: none !important;
    padding: 1rem 0 !important;
    transition: all ease-in-out 0.3s;
}

.blazored-toast-container {
    z-index: 99999 !important;
}

.blazored-toast-success {
    background-color: #4CAF50 !important;
    box-shadow: 0 0 12px #388E3C !important;
}

    .blazored-toast-success:hover {
        box-shadow: 0 0 5px #388E3C !important;
    }

.blazored-toast-error {
    background-color: #e82626 !important;
    box-shadow: 0 0 12px #e82626 !important;
}

    .blazored-toast-error:hover {
        box-shadow: 0 0 5px #e82626 !important;
    }

.blazored-toast-info {
    background-color: #05c3fb !important;
    box-shadow: 0 0 12px #03A9F4 !important;
}

    .blazored-toast-info:hover {
        box-shadow: 0 0 5px #03A9F4 !important;
    }

    .blazored-toast-info .blazored-toast-icon {
    }

.blazored-toast-warning {
    background-color: #FFB300 !important;
    box-shadow: 0 0 12px #FF6F00 !important;
}

    .blazored-toast-warning:hover {
        box-shadow: 0 0 5px #FF6F00 !important;
    }

.blazored-toast-progress {
    background-color: white;
    height: 2px;
    opacity: 0.7;
}

.blazored-toast .blazored-toast-close {
    color: #000 !important;
    font-size: 1rem !important;
    transition: all ease-in-out 0.2s;
}

    .blazored-toast .blazored-toast-close:hover {
        color: #fff !important;
    }

.blazored-toast-icon {
    color: #fff !important;
}

.blazored-toast-message {
    color: #fff;
    padding-inline-start: 6px;
}
/*********accordion**********/
.accordion {
    --bs-accordion-bg: transparent;
}

/*accordion arrow*/
.accordion-button::after {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-icon-width: 1.25rem;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23052c65'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button {
    color: var(--darkblue);
    border-radius: 0.6rem !important;
    transition: all ease-in-out 0.3s;
}

    .accordion-button:after {
        margin-right: auto;
        margin-left: unset;
    }

    .accordion-button:focus {
        border: none;
        box-shadow: none;
    }

    .accordion-button:not(.collapsed) {
        background-color: var(--lightblue);
        color: var(--darkblue);
    }

/**---------tabs-----------**/

.nav-tabs {
    padding-bottom: 0.4rem;
    border-bottom-color: #e9edf4;
}

    .nav-tabs .nav-link {
        color: #7871bf;
        font-weight: normal;
        background: var(--lightpurple);
        border-radius: 8px;
        margin: 5px 2px 0;
        padding: 0.3rem 0.75rem;
    }

        .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
            font-weight: normal;
            background: var(--purple);
            color: #fff;
            box-shadow: 0 2px 5px #6c5ffcba;
        }

    /******tab with arrow*****/
    .nav-tabs.tabArrow {
        border: none !important;
    }

        .nav-tabs.tabArrow .nav-link.active {
            position: relative;
        }

            .nav-tabs.tabArrow .nav-link.active:after {
                content: "";
                position: absolute;
                z-index: -1;
                width: 1rem;
                height: 1rem;
                bottom: -0.55rem;
                right: 47%;
                -webkit-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
                background: inherit;
                border-radius: 0.125rem;
            }
/*********************************************/
/*datatable*/
table.dataTable {
    border-collapse: collapse;
}

    table.dataTable.no-footer {
        border-bottom: 1px solid #e9edf4 !important;
    }

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: var(--darkblue);
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
}

.dataTables_filter input[type=search] {
    width: 30vw;
    background: #f0f4fb;
    border: 1px solid #dbe2ee;
    border-radius: 0.6rem;
    margin-inline-start: 0.25rem;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid #dbe2ee;
    border-radius: 0.6rem;
    background-color: #f0f4fb;
}

.dataTables_wrapper .dataTables_filter {
    float: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    border: none;
    border-radius: 0.6rem;
    background: var(--lightpurple) !important;
    color: var(--purple) !important;
    padding: 0.25rem 0.75rem;
    font-weight: normal;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.5rem;
    color: var(--purple) !important;
    border-radius: 0.6rem;
    padding: 0.25rem 0.75rem;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
        color: #bababa !important;
    }

table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th, table.dataTable tfoot td {
    text-align: center !important;
    background: linear-gradient(0deg, #f4f4ff, transparent);
}

table.dataTable thead th, table.dataTable thead td {
    border-bottom: none;
    vertical-align: middle;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: none !important;
}

.dataTables_scrollBody thead tr {
    border-color: transparent;
}
/******************************************************/
/*formio*/
.formio-component .table {
    word-break: normal !important;
}

.datagrid-table > tbody > tr > td {
    word-break: normal !important;
}

.formio-component-datagrid .datagrid-table,
.formio-component-datagrid .datagrid-table td,
.formio-component-datagrid .datagrid-table th {
    border: 2px dotted #e0eaf4 !important;
    background: linear-gradient(0deg, #f5faff, transparent);
    /*width: max-content;*/
}

.formio-component-datagrid.fixcontent .datagrid-table,
.formio-component-datagrid.fixcontent .datagrid-table td,
.formio-component-datagrid.fixcontent .datagrid-table th {
    width: max-content !important;
}

.formio-component-datagrid .datagrid-table {
    font-size: 12px;
}

    .formio-component-datagrid .datagrid-table .form-control {
        font-size: inherit;
    }

    .formio-component-datagrid .datagrid-table .choices,
    .formio-component-datagrid .datagrid-table .choices .choices__input {
        font-size: inherit;
    }

    .formio-component-datagrid .datagrid-table th {
        vertical-align: middle;
    }

        .formio-component-datagrid .datagrid-table th i {
            display: none;
        }

.formio-dialog.formio-dialog-theme-default .formio-dialog-content {
    font-family: inherit;
}

.formio-component .col-form-label {
    display: flex;
}

.btn-group-xxs > .btn, .btn-xxs, .component-btn-group .component-settings-button {
    padding: 2px 2px;
    font-size: 14px;
    line-height: 1.5em;
    border-radius: 4px !important;
    width: 25px;
    height: 25px;
}

.component-btn-group .component-settings-button {
    box-shadow: 0 0 10px 4px rgba(48,113,169,.6);
}

    .component-btn-group .component-settings-button.btn-default {
        background: #fff;
    }

.formio-component-file .fileSelector {
    min-width: 300px;
}

.formarea {
    overflow: hidden;
}

.builder-group-button {
    width: 100% !important;
    text-align: center;
}

.formcomponents .formcomponent {
    width: 100% !important;
    text-align: inherit;
    line-height: 1.5;
}

.formio-component .a-question-circle.text-muted {
    color: red !important;
}

.formio-dialog .form-check .form-check-input {
    float: none;
    margin-left: unset;
}

.formio-dialog.formio-dialog-theme-default .formio-dialog-content {
    background: var(--white);
}

.formio-dialog .card {
    border: none;
    box-shadow: 0px 2px 10px #2127491c;
}

.formio-dialog .card-header {
    background: linear-gradient(0deg, #f4f4ff, transparent);
    border: none;
    box-shadow: inset 0px -10px 16px -10px #4139972b;
}

/*rtl set*/
.formio-component-resource .control-label--hidden.field-required,
.formio-component-select .control-label--hidden.field-required {
    right: 5px;
}

.choices__item.choices__item--selectable {
    padding-right: unset !important;
    padding-left: 25px;
}

.formio-error-wrapper {
    background-color: transparent !important;
}

.control-label--hidden {
    display: none;
}
/****************************************/
.ace_editor {
    box-shadow: 1px 1px var(--lightpurple);
}

.ace-xcode .ace_gutter {
    background: var(--lightpurple);
}

/*صفحه نمایش درخواست*/
.formio-component .formio-component-datagrid .is-active.choices__list--dropdown,
.formio-component .formio-component-datagrid .is-active.choices__list[aria-expanded] {
    display: contents;
}

.choices__list--dropdown .choices__list,
.choices__list[aria-expanded] .choices__list {
    background: #fff;
}

.formio-component .formio-component-datagrid .choices[data-type*=select-one].is-open::after {
    border-color: transparent !important;
}

.formio-form .form-group {
    margin-top: 0.75rem;
}

.formio-form .choices__item.choices__item--selectable {
    padding-right: unset;
}

.formio-form .btn-secondary.formio-button-remove-row {
    color: var(--red);
    background: var(--lightred);
    border-color: var(--lightred);
    transition: all ease-in-out .3s;
}

    .formio-form .btn-secondary.formio-button-remove-row:hover {
        color: var(--red);
        background: var(--lightred);
        border-color: var(--red);
    }

    .formio-form .btn-secondary.formio-button-remove-row .fa-times-circle-o:before {
        content: "\f057";
        vertical-align: middle;
        font-size: large;
        font-weight: 300;
    }

/**************diagram.js******************/
.djs-context-pad.open {
    background: white;
    padding: 0.5rem;
    box-shadow: 0 2px 10px #0000007d;
    border-radius: 10px;
}

    .djs-context-pad.open:after {
        content: "";
        position: absolute;
        width: 1rem;
        height: 1rem;
        top: 1rem;
        inset-inline-start: -0.5rem;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(45deg);
        background: inherit;
        border-radius: 0.125rem;
        border-width: 1px 1px 0 0;
        border-style: solid;
        border-color: var(--white);
        box-shadow: -5px 5px 5px #12183f30;
    }

.djs-context-pad .group {
    text-align: center;
}

    .djs-context-pad .group .entry {
        margin: 3px;
        cursor: pointer;
        transition: all ease-in-out .2s;
        color: #000;
    }

.djs-context-pad .entry:hover {
    color: #FF5722 !important;
    background: transparent !important;
}

.djs-palette.two-column.open {
    width: 100% !important;
}

.djs-palette .group {
    display: inline-flex;
}

    .djs-palette .group .separator {
        display: none;
    }

.djs-palette.open .djs-palette-toggle {
    display: none;
}

.djs-palette {
    width: calc(100% - 50px);
    left: 0;
    right: unset;
    background: #fff !important;
    border-radius: 10px !important;
}

    .djs-palette .entry {
        cursor: pointer;
        line-height: normal !important;
    }

.djs-palette-entries .group[data-group="tools"] {
    background: linear-gradient(180deg, #ffecb973, transparent);
    box-shadow: 1px -2px 3px #0000001c;
    border-radius: 10px;
}

.diagramtools {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 0;
    right: 0;
    z-index: 1;
    background: var(--white);
    border: solid 1px #CCC;
    border-radius: 10px;
}

    .diagramtools .btn:hover {
        color: orangered;
    }
/*****************query builder**********************/
.query-builder {
    font-family: inherit !important;
    direction: rtl;
}

    .query-builder .pull-right {
        float: left !important;
    }

    .query-builder .btn-group > .btn {
        float: unset !important;
    }

    .query-builder .btn {
        border-radius: 5px !important;
    }

.rule-container .form-control {
    font-size: 14px;
    padding: 3px;
    margin: 3px 0;
}

.query-builder .group-conditions .btn-primary {
    background-color: #83b0d8;
    border-color: #83b0d8;
}

.query-builder .rules-group-container {
    padding: 20px 10px !important;
}

/*********datepicker*************/
jdp-container {
    background: var(--white) !important;
    color: var(--darkblue) !important;
    z-index: 2000 !important;
}

    jdp-container .jdp-day-name {
        background: transparent !important;
    }

    jdp-container .jdp-month select,
    jdp-container .jdp-year select {
        background: var(--lightpurple) !important;
        color: var(--darkblue) !important;
    }

    jdp-container .jdp-btn-close,
    jdp-container .jdp-btn-empty,
    jdp-container .jdp-btn-today {
        background: var(--purple) !important;
    }

    jdp-container .jdp-day,
    jdp-container .jdp-day-name {
        color: var(--darkblue) !important;
    }

        jdp-container .jdp-day-name.holly-day,
        jdp-container .jdp-day-name.last-week,
        jdp-container .jdp-day.holly-day,
        jdp-container .jdp-day.last-week {
            color: #f44336 !important;
        }

        jdp-container .jdp-day-name.selected,
        jdp-container .jdp-day.selected {
            background-color: var(--purple) !important;
        }

    jdp-container .jdp-months,
    jdp-container .jdp-years {
        fill: #fff !important;
        color: #fff !important;
    }

    jdp-container .jdp-icon-minus,
    jdp-container .jdp-icon-plus {
        background: var(--purple);
        border: none !important;
    }

    jdp-container .jdp-day-name.today,
    jdp-container .jdp-day.today {
        border-color: var(--darkblue) !important;
    }

    jdp-container .jdp-time-container .jdp-time select {
        background: var(--lightpurple) !important;
        border-radius: 50px !important;
    }

    jdp-container .jdp-time {
        background: var(--white) !important;
    }
/**********************************************/

/********select language********/
.selectlang {
    text-align: center;
}

    .selectlang img {
        filter: drop-shadow(0px 2px 1px #c3c3c3);
        cursor: pointer;
    }

        .selectlang img:hover {
            filter: drop-shadow(0px 1px 3px gray);
        }

/*****Login page — redesigned*****/
.login-page {
    --login-purple: #6c5ffc;
    --login-purple-dark: #4a3fd9;
    --login-purple-deep: #0d1a52;
    --login-surface: #ffffff;
    --login-surface-muted: #f7f6ff;
    --login-border: rgba(108, 95, 252, 0.14);
    --login-text: #282f53;
    --login-text-muted: #6c757d;
    --login-shadow: 0 24px 64px rgba(13, 26, 82, 0.14);
    --login-radius: 1.25rem;
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow-x: hidden;
}

.login-page__backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.login-page__gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 15% 20%, rgba(108, 95, 252, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 85% 80%, rgba(41, 179, 156, 0.12) 0%, transparent 50%),
        linear-gradient(145deg, #f4f2ff 0%, #eef0ff 38%, #f8f9ff 100%);
}

.login-page__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
}

.login-page__orb--1 {
    width: 28rem;
    height: 28rem;
    top: -8rem;
    inset-inline-start: -6rem;
    background: rgba(108, 95, 252, 0.35);
}

.login-page__orb--2 {
    width: 22rem;
    height: 22rem;
    bottom: -5rem;
    inset-inline-end: 10%;
    background: rgba(108, 95, 252, 0.2);
}

.login-page__orb--3 {
    width: 14rem;
    height: 14rem;
    top: 40%;
    inset-inline-end: -4rem;
    background: rgba(41, 179, 156, 0.18);
}

.login-page__shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    width: min(100%, 56rem);
    min-height: min(34rem, calc(100vh - 3rem));
    border-radius: calc(var(--login-radius) + 0.25rem);
    overflow: hidden;
    box-shadow: var(--login-shadow);
    border: 1px solid rgba(255, 255, 255, 0.65);
    background: var(--login-surface);
}

.login-page__hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2rem;
    background: linear-gradient(145deg, var(--login-purple) 0%, var(--login-purple-dark) 45%, var(--login-purple-deep) 100%);
    color: #fff;
    overflow: hidden;
}

.login-page__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.06) 0%, transparent 40%);
    pointer-events: none;
}

.login-page__hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
}

.login-page__logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.login-page__logo {
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}

.login-page__tagline {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
    text-wrap: balance;
}

.login-page__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.login-page__decor-ring {
    position: absolute;
    width: 12rem;
    height: 12rem;
    top: -3rem;
    inset-inline-end: -3rem;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.login-page__decor-dot {
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    bottom: 2.5rem;
    inset-inline-start: 2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
}

.login-page__decor-dot--2 {
    bottom: 3.5rem;
    inset-inline-start: 3rem;
    width: 0.35rem;
    height: 0.35rem;
    opacity: 0.6;
}

.login-page__form-area {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 2.25rem;
    background: var(--login-surface);
}

.login-page__form-card.loginform {
    width: 100%;
    max-width: 22rem;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.login-page__form-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
    text-align: center;
}

.login-page__form-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, var(--login-purple) 0%, var(--login-purple-deep) 100%);
    color: #fff;
    font-size: 1.25rem;
    box-shadow: 0 6px 18px rgba(108, 95, 252, 0.35);
}

.login-page__title,
.loginform h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--login-text);
    line-height: 1.3;
}

.login-lang-picker {
    margin-bottom: 1.25rem;
}

.login-lang-picker > p {
    margin-bottom: 0.55rem !important;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--login-text-muted);
    letter-spacing: 0.02em;
}

.login-lang-picker .selectlang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: var(--login-surface-muted);
    border: 1px solid var(--login-border);
}

.login-lang-picker .selectlang img {
    width: 1.65rem;
    height: auto;
    border-radius: 50%;
    filter: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.login-lang-picker .selectlang img:hover {
    transform: translateY(-2px) scale(1.06);
    filter: drop-shadow(0 3px 8px rgba(108, 95, 252, 0.35));
}

.login-lang-picker .hrdash {
    display: none;
}

.loginform .hrdash {
    display: none;
}

.loginform .selectlang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.35rem 0.75rem;
    margin-bottom: 1rem;
    border-radius: 999px;
    background: var(--login-surface-muted);
    border: 1px solid var(--login-border);
}

.loginform .selectlang img {
    width: 1.65rem;
    height: auto;
    border-radius: 50%;
    filter: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.loginform .selectlang img:hover {
    transform: translateY(-2px) scale(1.06);
    filter: drop-shadow(0 3px 8px rgba(108, 95, 252, 0.35));
}

.login-field__label,
.loginform .form-label {
    margin-bottom: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--login-text);
}

.login-field__wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.login-field__icon {
    position: absolute;
    inset-inline-end: 0.85rem;
    inset-inline-start: auto;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--login-purple);
    font-size: 0.95rem;
    opacity: 0.75;
    pointer-events: none;
}

.login-field__control,
.loginform .form-control {
    padding-block: 0.72rem;
    padding-inline: 0.85rem 2.65rem;
    border: 1.5px solid #e4e8f4;
    border-radius: 0.65rem;
    background: var(--login-surface-muted);
    color: var(--login-text);
    font-weight: 500;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.login-field__control:focus,
.loginform .form-control:focus {
    border-color: var(--login-purple);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(108, 95, 252, 0.14);
}

.login-field__toggle {
    position: absolute;
    inset-inline-end: 0.85rem;
    inset-inline-start: auto;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--login-purple);
    font-size: 0.95rem;
    opacity: 0.75;
    cursor: pointer;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.login-field__toggle:hover,
.login-field__toggle:focus-visible {
    opacity: 1;
    outline: none;
}

.password-field {
    position: relative;
    display: flex;
    align-items: center;
}

.password-field__control {
    padding-inline-end: 2.65rem;
}

.password-field__toggle {
    position: absolute;
    inset-inline-end: 0.85rem;
    inset-inline-start: auto;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--login-purple, #6c5ffc);
    font-size: 0.95rem;
    opacity: 0.75;
    cursor: pointer;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.password-field__toggle:hover,
.password-field__toggle:focus-visible {
    opacity: 1;
    outline: none;
}

.login-page__options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.login-remember {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--login-text-muted);
    cursor: pointer;
}

.login-remember .form-check-input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    border-color: #c8cfe8;
    cursor: pointer;
}

.login-remember .form-check-input:checked {
    background-color: var(--login-purple);
    border-color: var(--login-purple);
}

.login-page__forgot.loginlink,
.loginlink {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--login-purple);
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.login-page__forgot.loginlink:hover,
.loginlink:hover {
    color: var(--login-purple-dark);
    transform: translateX(-3px);
    text-decoration: none;
}

.login-page__validation,
.loginform .validation-summary-errors {
    font-size: 0.8125rem;
}

.login-page__api-error {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border-radius: 0.65rem;
    background: rgba(232, 38, 70, 0.08);
    border: 1px solid rgba(232, 38, 70, 0.22);
    color: #c62828;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5;
}

.login-page__api-error i {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.login-page__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.78rem 1.25rem;
    border: none;
    border-radius: 0.65rem;
    background: linear-gradient(135deg, var(--login-purple) 0%, var(--login-purple-dark) 100%);
    color: #fff !important;
    font-size: 0.9375rem;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(108, 95, 252, 0.38);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.login-page__submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(108, 95, 252, 0.45);
    color: #fff !important;
    filter: brightness(1.03);
}

.login-page__submit:active:not(:disabled) {
    transform: translateY(0);
}

.login-page__submit:disabled {
    opacity: 0.72;
}

.login-page__submit i {
    font-size: 0.95rem;
    opacity: 0.92;
}

/* Legacy — other auth pages (ForgotPassword, ResetPassword, …) */
.login-right {
    display: none;
}

.loginform .btn-purple {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.78rem 1.25rem;
    border: none;
    border-radius: 0.65rem;
    background: linear-gradient(135deg, var(--login-purple) 0%, var(--login-purple-dark) 100%);
    color: #fff !important;
    font-size: 0.9375rem;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(108, 95, 252, 0.38);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.loginform .btn-purple:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(108, 95, 252, 0.45);
    color: #fff !important;
}

.loginform {
    padding: 2rem 2.25rem;
    background: var(--login-surface);
    border-radius: var(--login-radius);
}

.loginform h1 {
    font-weight: 900;
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.loginform .form-control {
    padding: 0.72rem 0.85rem;
    border-radius: 0.65rem;
}

@media screen and (max-width: 768px) {
    .login-page {
        padding: 0.75rem;
        align-items: flex-start;
    }

    .login-page__shell {
        grid-template-columns: 1fr;
        min-height: auto;
        width: 100%;
        margin-top: 0.5rem;
    }

    .login-page__hero {
        padding: 1.75rem 1.25rem 1.5rem;
        min-height: auto;
    }

    .login-page__hero-inner {
        max-width: 100%;
        gap: 0.85rem;
    }

    .login-page__tagline {
        font-size: 0.9rem;
    }

    .login-page__logo {
        max-width: 8rem;
    }

    .login-page__form-area {
        padding: 1.5rem 1.25rem 1.75rem;
    }

    .login-page__form-card.loginform {
        max-width: 100%;
    }

    .login-page__title,
    .loginform h1 {
        font-size: 1.25rem;
    }

    .loginform {
        padding: 1.25rem;
    }
}

.countdown[disabled] {
    pointer-events: none;
    opacity: 0.75;
    background-color: #e5e5e5;
    border-color: #e5e5e5;
    border: none;
}

/*create entity*/
.settingbg {
    background: #93b0ff0d;
    border: 1px dashed #6c5ffc45;
}

/*******base template********/
main {
    display: flex;
    flex-wrap: nowrap;
    min-height: 100vh;
    min-height: 100dvh;
    height: -webkit-fill-available;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
}

.contentArea {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

.contentArea-scroll {
    flex: 1 1 auto;
    min-height: 0;
}

.contentArea-inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.contentArea-body {
    flex: 1 1 auto;
}

.dropdown-toggle {
    outline: 0;
}

.nav-flush .nav-link {
    border-radius: 0;
}

.btn-toggle {
    display: inline-flex;
    position: relative;
    width: 100%;
    align-items: center;
}

    .btn-toggle:hover {
        color: var(--purple);
        background-color: var(--lightpurple);
    }

    .btn-toggle::before {
        position: absolute;
        inset-inline-end: 5px;
        width: 1.25em;
        line-height: 0;
        content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
        transition: transform .35s ease;
        transform-origin: .5em 50%;
        transform: rotate(180deg);
    }

    .btn-toggle[aria-expanded="true"] {
        font-weight: bold;
    }

        .btn-toggle[aria-expanded="true"]::before {
            transform: rotate(90deg);
        }

.btn-toggle-nav a {
    display: inline-flex;
    padding: .1875rem .5rem;
    margin-top: .125rem;
    margin-left: 1.25rem;
    text-decoration: none;
}


.scrollarea {
    overflow-y: auto;
    overflow-x: hidden;
}

.toprow {
    display: flex;
    background: var(--white);
    align-items: center;
    height: 50px;
    min-height: 50px;
    border-bottom: 1px solid #e9edf4;
}

@media (max-width: 767.98px) {
    .toprow {
        transition: transform 0.28s ease;
        will-change: transform;
    }

    .toprow.navbar-hidden {
        transform: translateY(-100%);
        pointer-events: none;
    }
}

    .toprow .btnmenu {
        margin-inline-start: 5px;
        background: transparent;
        color: var(--purple);
        padding: 0.5rem;
        transition: all ease-out 0.3s;
        border-radius: 100px;
        width: 34px;
        height: 34px;
    }

        .toprow .btnmenu:hover {
            color: var(--darkblue);
            box-shadow: inset 2.5rem 0 0 0 var(--lightpurple), 0 3px 5px #6c5ffc24;
        }

.toptools {
    margin-inline-start: auto;
    margin-inline-end: 0.75rem;
}

    .toptools .btntools {
        display: inline-block;
        background: var(--lightpurple);
        color: var(--purple);
        border-radius: 12px;
        min-width: 34px;
        height: 34px;
        transition: all ease-out 0.3s;
    }

        .toptools .btntools:hover {
            color: var(--lightpurple);
            box-shadow: inset 13rem 0 0 0 var(--purple), 0 3px 5px #6c5ffc24;
        }


        .toptools .btntools .toolicon {
            font-size: 1.1rem;
            vertical-align: middle;
        }

    .toptools .dropdown-toggle::after {
        display: none;
    }

#btnLightMode {
    display: none;
}

#btnDarkMode {
    display: inline-block;
}

.userdropdown .dropdown-menu {
    border: none;
    font-size: 15px;
    padding: 0.75rem 0.5rem;
    direction: rtl;
    text-align: right;
    background: var(--white);
    box-shadow: 0px 1px 20px #12183f30;
}

    .userdropdown .dropdown-menu:after {
        content: "";
        position: absolute;
        z-index: -1;
        width: 1rem;
        height: 1rem;
        top: -0.375rem;
        left: 0.75rem;
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        background: inherit;
        border-radius: 0.125rem;
        border-width: 1px 1px 0 0;
        border-style: solid;
        border-color: var(--white);
        box-shadow: 5px -4px 5px #12183f30;
    }

.userdropdown .dropdown-item:active {
    background: var(--lightpurple);
    color: var(--purple);
}

.userdropdown .dropdown-menu h6 {
    font-weight: normal;
    font-size: 14px;
    text-align: center;
    color: var(--darkblue);
}

.userdropdown .dropdown-menu .dropdown-item {
    font-weight: 300;
    color: var(--darkblue);
    cursor: pointer;
}

.userdropdown .dropdown-item:focus,
.userdropdown .dropdown-item:hover {
    background: var(--lightpurple);
}

.usernameholder {
    font-size: 12px;
    color: var(--darkblue);
}

.notifico {
    display: none;
    position: absolute;
    padding: 0.3rem;
    background: red;
    border-radius: 100%;
    top: 0;
    inset-inline-start: -1px;
    border: 1px solid var(--white);
    animation: pulse 1.5s infinite;
}

    .notifico:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid red;
        opacity: 0;
        border-radius: 50%;
        width: 100%;
        height: 100%;
        animation: sonar 1.5s infinite;
    }

.showbagde .notifico {
    display: flex;
}

@keyframes sonar {
    0% {
        transform: scale(.9);
        opacity: 1;
    }

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

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

    20% {
        transform: scale(1.1);
    }

    50% {
        transform: scale(.9);
    }

    80% {
        transform: scale(1.1);
    }

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

/*menu collapsed*/
.menuCollapsed .sideArea {
    width: 80px !important;
}

    .menuCollapsed .sideArea .sidebarmenu {
        overflow-x: hidden;
    }

        .menuCollapsed .sideArea .sidebarmenu .nav-link-content {
            justify-content: center;
        }

        .menuCollapsed .sideArea .sidebarmenu .nav-item .nav-link .nav-link-text {
            opacity: 0;
            text-wrap: nowrap;
            width: 0;
        }

    .menuCollapsed .sideArea .version {
        padding: 0.5rem;
    }

    .menuCollapsed .sideArea .menu-category {
        opacity: 0;
        height: 0;
    }

    .menuCollapsed .sideArea .version a nav-link-text {
        font-size: 13px;
    }
    /*****************************/

    /*menu collapsed hover*/

    .menuCollapsed .sideArea:hover {
        width: 255px !important;
    }

        .menuCollapsed .sideArea:hover .sidebarmenu .nav-item .nav-link .nav-link-text {
            display: unset;
            opacity: 1;
        }

        .menuCollapsed .sideArea:hover .menu-category {
            opacity: 1 !important;
            height: auto !important;
        }

        .menuCollapsed .sideArea:hover .nav-link-content {
            justify-content: normal !important;
        }

/*****************************/

.sidebar-menu-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.sidebar-menu-toolbar:not(:has(.btn-purple)) {
    display: none;
}

.btn-sidebar-close {
    display: none;
}

/*menu collapse mobile screen*/
@media screen and (max-width: 991px) {
    .sideArea {
        width: 0 !important;
        display: block !important;
        position: fixed;
        height: 100vh;
        overflow-y: auto;
        z-index: 1000;
    }

    .sidebar-menu-toolbar {
        justify-content: space-between;
    }

    .sidebar-menu-toolbar:not(:has(.btn-purple)) {
        display: none;
    }

    .menuCollapsed .sideArea .sidebar-menu-toolbar:not(:has(.btn-purple)) {
        display: flex;
        justify-content: flex-end;
    }

    .menuCollapsed .sideArea .btn-sidebar-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 34px;
        height: 34px;
        padding: 0;
        background: var(--lightpurple);
        color: var(--purple);
        border: none;
        border-radius: 12px;
        transition: all ease-out 0.3s;
    }

        .menuCollapsed .sideArea .btn-sidebar-close:hover {
            color: var(--darkblue);
            box-shadow: 0 3px 5px #6c5ffc24;
        }

    .menuCollapsed .sideArea {
        width: 100% !important;
    }

        .menuCollapsed .sideArea .sidebarmenu .nav-link-content {
            justify-content: normal !important;
        }

        .menuCollapsed .sideArea .sidebarmenu .nav-item .nav-link .nav-link-text {
            opacity: 1;
            width: auto;
        }

    .sideArea .sidebarmenu .nav-item .nav-link .nav-link-text {
        opacity: 0;
        text-wrap: nowrap;
        width: 0;
    }

    .menuCollapsed .sideArea:hover {
        width: 100% !important;
    }

    .menuCollapsed .sideArea .menu-category {
        opacity: 1;
        height: auto;
    }
}

.sideArea {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-inline-end: 1px solid #e9edf4;
    width: 255px;
    background: var(--white);
    transition: all .5s ease;
}

.menu-category {
    color: var(--purple);
    font-weight: normal;
    font-size: 15px;
    transition: all .5s ease;
}

.sidebarlogo {
    border-bottom: 1px solid #e9edf4;
    display: flex;
    text-align: center;
    height: 50px;
    min-height: 50px;
    padding: 3px;
    align-items: center;
}

.logolight {
    display: block;
}

.logodark {
    display: none;
}

.logotop {
    display: none;
    margin-inline-start: 1rem;
}

@media screen and (max-width: 991px) {
    .logotop {
        display: unset !important;
    }
}

.sidebarmenu {
    overflow-y: auto;
    transition: all ease-in-out 0.3s;
}

    /* width */
    .sidebarmenu::-webkit-scrollbar {
        width: 6px;
    }

    .sidebarmenu .nav-link {
        padding: 0.5rem;
        border-radius: 8px;
        transition: all linear 0.3s;
    }

        .sidebarmenu .nav-link:hover,
        .sidebarmenu .nav-link.MenuActive {
            color: var(--purple);
            background: linear-gradient(270deg, var(--lightpurple), transparent);
        }

    .sidebarmenu .collapse.show .nav-link.submenu {
        padding-inline-start: 1.25rem;
    }


    .sidebarmenu .menuline {
        border-color: #f0f0f0;
        border-style: dashed;
        opacity: 1;
        margin: 0.2rem 0;
    }

    .sidebarmenu .nav-link-icon {
        padding-inline-end: 8px;
    }

    .sidebarmenu .nav-link-text {
        font-size: 13px;
    }

.sideArea .sidebarmenu .nav-item .nav-link .nav-link-text {
    transition: opacity .6s ease;
    opacity: 1;
}

.version {
    text-align: center;
    padding: 0.5rem 1rem;
}

    .version .nav-link-text {
        font-size: 14px;
    }

.footer p {
    color: #95a1b7;
    font-size: 14px;
    margin-bottom: 0.5rem;
}

.radiobox input[type=radio] {
    display: none;
}

    .radiobox input[type=radio] ~ label {
        background: #cacaca30;
        border-radius: 8px;
        padding: 0.25rem 1rem;
        cursor: pointer;
        transition: all ease-in-out 0.3s;
    }

        .radiobox input[type=radio] ~ label:hover {
            background: var(--yellow);
            color: black;
        }

    .radiobox input[type=radio]:checked ~ label {
        background: var(--yellow);
        color: black;
    }
/*******base template********/
/*********Home page**********/
.search-box {
    background: var(--white);
    border-radius: 100px;
    border: transparent;
    margin: 1rem;
    padding: 1rem 0.75rem;
    font-size: 15px;
}

    .search-box:focus {
        box-shadow: 0 4px 10px #12244d24;
    }

.servicecard {
    margin: 0.45rem;
    color: var(--darkblue);
    width: -webkit-fill-available;
    width: -moz-available;
    min-height: 100px;
    height: 100%;
    text-align: center;
    background: url(../img/bgcard.png) no-repeat bottom right;
    background-size: 45px;
    background-color: var(--white);
    padding: 1.25rem 0.5rem;
    border-radius: 20px;
    text-decoration: none;
    transition: all ease-out 0.3s;
    box-shadow: 0 0 30px #0000000a, inset 0 0px 30px #0063ff21;
    border: 2px solid white;
}

    .servicecard h3 {
        font-weight: bold;
        font-size: 1.05rem;
        line-height: 1.5;
    }

    .servicecard p {
        margin: 0.25rem 0 0;
        font-weight: 100;
    }

    .servicecard:hover {
        background-color: var(--purple);
        background-blend-mode: color-dodge;
        color: white;
    }

.servicecardEmpty {
    text-align: center;
    border-radius: 16px;
    transition: all ease-out 0.3s;
    background: linear-gradient(180deg,transparent, var(--white), transparent);
    padding: 2rem 0.5rem;
    box-shadow: 0 1px 8px #00000012;
    border: 1px solid var(--white);
}


/*Cartables/RequestDetail*/
.btncollapseRequestCycle:after {
    margin-inline-start: 10px !important;
}

.btncollapseRequestCycle .accordion-button:hover,
.btncollapseRequestCycle .accordion-button:focus {
    background-color: var(--lightpurple);
    padding: 0.75rem;
}

.jstree-default .jstree-anchor {
    font-size: 15px !important;
    font-weight: normal;
    height: 34px !important;
}

.jstree-default .jstree-hovered {
    border-radius: 7px;
}

.jstree-leaf {
    font-size: 19px;
    height: 34px;
}

    .jstree-leaf a.jstree-hovered {
        height: 34px;
    }

    .jstree-leaf a.jstree-clicked {
        height: 34px;
    }

.jstree-anchor a.jstree-hovered {
    height: 34px;
}

.jstree-anchor jstree-clicked {
    height: 34px;
}

.jstree-icon.fa-user-alt {
    color: var(--yellow);
    text-shadow: 0 1px 0px #0000002b;
}

.showState {
    border-radius: 100px;
    width: 23px;
    height: 23px;
    color: rgb(255, 255, 255);
    padding: 5px;
    vertical-align: top;
}

/*=========================================================================================*/
.checkasbuttonshow .inputGroup {
    margin: 3px;
    position: relative;
}

    .checkasbuttonshow .inputGroup input {
        width: 32px;
        height: 32px;
        order: 1;
        z-index: 2;
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        visibility: hidden;
    }

    .checkasbuttonshow .inputGroup label {
        padding: 6px 32px 6px 10px;
        border-radius: 6px;
        /*width: 100%;*/
        display: inline-block;
        color: #3c454c;
        cursor: pointer;
        position: relative;
        z-index: 2;
        transition: color 400ms ease-in;
        overflow: hidden;
        /* background: #ffffff; */
        /* border: 1px solid #ffffff; */
        margin-bottom: 0;
    }

    .checkasbuttonshow .inputGroup input:checked ~ label {
        color: #3e2fe1;
    }

        .checkasbuttonshow .inputGroup input:checked ~ label:before {
            transform: translate(-50%,-50%) scale3d(56,56,1);
            opacity: 1;
        }


    .checkasbuttonshow .inputGroup label:before {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        content: "";
        background-color: var(--lightpurple);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%) scale3d(1,1,1);
        transition: all 400ms cubic-bezier(.4,0,.2,1);
        opacity: 0;
        z-index: -1;
    }

    .checkasbuttonshow .inputGroup label:after {
        width: 20px;
        height: 20px;
        margin-inline-start: 6px;
        content: "";
        border: 1px solid #d1d7dc;
        background-color: #fff;
        border-radius: 3px;
        z-index: 2;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        transition: all 400ms ease-in;
    }

    .checkasbuttonshow .inputGroup input:checked ~ label:after {
        border-color: #fff;
        background-image: url(../img/download.svg);
        background-repeat: no-repeat;
        background-position: -3px -2px;
    }
/*# sourceMappingURL=adminlte.css.map */
.float-left {
    float: left !important;
}

.bootstrap-tagsinput .tag {
    color: #1f1f1fed !important;
}

.bootstrap-tagsinput {
    min-width: 100% !important;
}

    .bootstrap-tagsinput .tag [data-role="remove"] {
        color: red !important;
    }












.plans {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    max-width: 970px;
    padding: 40px 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    border-radius: 20px;
    -webkit-box-shadow: 0px 8px 10px 0px #d8dfeb;
    box-shadow: 0px 8px 10px 0px #d8dfeb;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

    .plans .plan input[type="radio"] {
        position: absolute;
        opacity: 0;
    }

    .plans .plan {
        cursor: pointer;
        width: 48.5%;
    }

        .plans .plan .plan-content {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding: 30px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            border: 2px solid #e1e2e7;
            border-radius: 10px;
            -webkit-transition: -webkit-box-shadow 0.4s;
            transition: -webkit-box-shadow 0.4s;
            -o-transition: box-shadow 0.4s;
            transition: box-shadow 0.4s;
            transition: box-shadow 0.4s, -webkit-box-shadow 0.4s;
            position: relative;
        }

            .plans .plan .plan-content img {
                margin-right: 30px;
                height: 72px;
            }

        .plans .plan .plan-details span {
            margin-bottom: 10px;
            display: block;
            font-size: 20px;
            line-height: 24px;
            color: #252f42;
        }

.container .title {
    font-size: 16px;
    font-weight: 500;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    color: #252f42;
    margin-bottom: 20px;
}

.plans .plan .plan-details p {
    color: #646a79;
    font-size: 14px;
    line-height: 18px;
}

.plans .plan .plan-content:hover {
    -webkit-box-shadow: 0px 3px 5px 0px #e8e8e8;
    box-shadow: 0px 3px 5px 0px #e8e8e8;
}

.plans .plan input[type="radio"]:checked + .plan-content:after {
    content: "";
    position: absolute;
    height: 8px;
    width: 8px;
    background: #216fe0;
    right: 20px;
    top: 20px;
    border-radius: 100%;
    border: 3px solid #fff;
    -webkit-box-shadow: 0px 0px 0px 2px #0066ff;
    box-shadow: 0px 0px 0px 2px #0066ff;
}

.plans .plan input[type="radio"]:checked + .plan-content {
    border: 2px solid #216ee0;
    background: #74c3e3d9;
    -webkit-transition: ease-in 0.3s;
    -o-transition: ease-in 0.3s;
    transition: ease-in 0.3s;
}

@media screen and (max-width: 991px) {
    .plans {
        margin: 0 20px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        padding: 15px;
    }

        .plans .plan {
            width: 100%;
        }

    .plan.complete-plan {
        margin-top: 20px;
    }

    .plans .plan .plan-content .plan-details {
        width: 70%;
        display: inline-block;
    }

    .plans .plan input[type="radio"]:checked + .plan-content:after {
        top: 45%;
        -webkit-transform: translate(-50%);
        -ms-transform: translate(-50%);
        transform: translate(-50%);
    }
}

@media screen and (max-width: 767px) {
    .plans .plan .plan-content .plan-details {
        width: 60%;
        display: inline-block;
    }
}

@media screen and (max-width: 540px) {
    .plans .plan .plan-content img {
        margin-bottom: 20px;
        height: 56px;
        -webkit-transition: height 0.4s;
        -o-transition: height 0.4s;
        transition: height 0.4s;
    }

    .plans .plan input[type="radio"]:checked + .plan-content:after {
        top: 20px;
        right: 10px;
    }

    .plans .plan .plan-content .plan-details {
        width: 100%;
    }

    .plans .plan .plan-content {
        padding: 20px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: baseline;
        -ms-flex-align: baseline;
        align-items: baseline;
    }
}

/* inspiration */
.inspiration {
    font-size: 12px;
    margin-top: 50px;
    position: absolute;
    bottom: 10px;
    font-weight: 300;
}

    .inspiration a {
        color: #666;
    }

@media screen and (max-width: 767px) {
    /* inspiration */
    .inspiration {
        display: none;
    }
}


.checkasbuttonshow .inputGroup {
    position: sticky !important;
}


.skills {
    max-width: 100%;
    margin: 40px auto;
    text-align: center;
}

    .skills .hr-text {
        font-size: 20px;
        position: relative;
        border: 0;
        height: 1.5em;
    }

        .skills .hr-text:before {
            content: "";
            background: linear-gradient(to right, transparent, #b2b2b2, transparent);
            position: absolute;
            left: 0;
            top: 50%;
            width: 100%;
            height: 1px;
        }

        .skills .hr-text:after {
            content: attr(data-content);
            position: relative;
            display: inline-block;
            color: var(--SkillTextColor);
            padding: 0 0.5em;
            line-height: 1.5em;
            background-color: var( --SkillBackGroudColor);
        }

    .skills li {
        display: inline-block;
        font-size: 14px;
    }

    .skills i {
        font-size: 7px;
    }

svg:not(:root).svg-inline--fa {
    overflow: visible
}

.svg-inline--fa {
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -.125em
}

    .svg-inline--fa.fa-lg {
        vertical-align: -.225em
    }

    .svg-inline--fa.fa-w-1 {
        width: .0625em
    }

    .svg-inline--fa.fa-w-2 {
        width: .125em
    }

    .svg-inline--fa.fa-w-3 {
        width: .1875em
    }

    .svg-inline--fa.fa-w-4 {
        width: .25em
    }

    .svg-inline--fa.fa-w-5 {
        width: .3125em
    }

    .svg-inline--fa.fa-w-6 {
        width: .375em
    }

    .svg-inline--fa.fa-w-7 {
        width: .4375em
    }

    .svg-inline--fa.fa-w-8 {
        width: .5em
    }

    .svg-inline--fa.fa-w-9 {
        width: .5625em
    }

    .svg-inline--fa.fa-w-10 {
        width: .625em
    }

    .svg-inline--fa.fa-w-11 {
        width: .6875em
    }

    .svg-inline--fa.fa-w-12 {
        width: .75em
    }

    .svg-inline--fa.fa-w-13 {
        width: .8125em
    }

    .svg-inline--fa.fa-w-14 {
        width: .875em
    }

    .svg-inline--fa.fa-w-15 {
        width: .9375em
    }

    .svg-inline--fa.fa-w-16 {
        width: 1em
    }

    .svg-inline--fa.fa-w-17 {
        width: 1.0625em
    }

    .svg-inline--fa.fa-w-18 {
        width: 1.125em
    }

    .svg-inline--fa.fa-w-19 {
        width: 1.1875em
    }

    .svg-inline--fa.fa-w-20 {
        width: 1.25em
    }

    .svg-inline--fa.fa-pull-left {
        margin-right: .3em;
        width: auto
    }

    .svg-inline--fa.fa-pull-right {
        margin-left: .3em;
        width: auto
    }

    .svg-inline--fa.fa-border {
        height: 1.5em
    }

    .svg-inline--fa.fa-li {
        width: 2em
    }

    .svg-inline--fa.fa-fw {
        width: 1.25em
    }

.fa-layers svg.svg-inline--fa {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0
}

.fa-layers {
    display: inline-block;
    height: 1em;
    position: relative;
    text-align: center;
    vertical-align: -.125em;
    width: 1em
}

    .fa-layers svg.svg-inline--fa {
        -webkit-transform-origin: center center;
        transform-origin: center center
    }

.fa-layers-counter, .fa-layers-text {
    display: inline-block;
    position: absolute;
    text-align: center
}

.fa-layers-text {
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-transform-origin: center center;
    transform-origin: center center
}

.fa-layers-counter {
    background-color: #ff253a;
    border-radius: 1em;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    height: 1.5em;
    line-height: 1;
    max-width: 5em;
    min-width: 1.5em;
    overflow: hidden;
    padding: .25em;
    right: 0;
    text-overflow: ellipsis;
    top: 0;
    -webkit-transform: scale(.25);
    transform: scale(.25);
    -webkit-transform-origin: top right;
    transform-origin: top right
}

.fa-layers-bottom-right {
    bottom: 0;
    right: 0;
    top: auto;
    -webkit-transform: scale(.25);
    transform: scale(.25);
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right
}

.fa-layers-bottom-left {
    bottom: 0;
    left: 0;
    right: auto;
    top: auto;
    -webkit-transform: scale(.25);
    transform: scale(.25);
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left
}

.fa-layers-top-right {
    right: 0;
    top: 0;
    -webkit-transform: scale(.25);
    transform: scale(.25);
    -webkit-transform-origin: top right;
    transform-origin: top right
}

.fa-layers-top-left {
    left: 0;
    right: auto;
    top: 0;
    -webkit-transform: scale(.25);
    transform: scale(.25);
    -webkit-transform-origin: top left;
    transform-origin: top left
}

.fa-lg {
    font-size: 1.3333333333em;
    line-height: .75em;
    vertical-align: -.0667em
}

.fa-xs {
    font-size: .75em
}

.fa-sm {
    font-size: .875em
}

.fa-1x {
    font-size: 1em
}

.fa-2x {
    font-size: 2em
}

.fa-3x {
    font-size: 3em
}

.fa-4x {
    font-size: 4em
}

.fa-5x {
    font-size: 5em
}

.fa-6x {
    font-size: 6em
}

.fa-7x {
    font-size: 7em
}

.fa-8x {
    font-size: 8em
}

.fa-9x {
    font-size: 9em
}

.fa-10x {
    font-size: 10em
}

.fa-fw {
    text-align: center;
    width: 1.25em
}

.fa-ul {
    list-style-type: none;
    margin-left: 2.5em;
    padding-left: 0
}

    .fa-ul > li {
        position: relative
    }

.fa-li {
    left: -2em;
    position: absolute;
    text-align: center;
    width: 2em;
    line-height: inherit
}

.fa-border {
    border: solid .08em #eee;
    border-radius: .1em;
    padding: .2em .25em .15em
}

.fa-pull-left {
    float: left
}

.fa-pull-right {
    float: right
}

.fa.fa-pull-left, .fab.fa-pull-left, .fal.fa-pull-left, .far.fa-pull-left, .fas.fa-pull-left {
    margin-right: .3em
}

.fa.fa-pull-right, .fab.fa-pull-right, .fal.fa-pull-right, .far.fa-pull-right, .fas.fa-pull-right {
    margin-left: .3em
}

.fa-spin {
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
}

.fa-pulse {
    -webkit-animation: fa-spin 1s infinite steps(8);
    animation: fa-spin 1s infinite steps(8)
}

@-webkit-keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.fa-rotate-90 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.fa-rotate-180 {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.fa-rotate-270 {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg)
}

.fa-flip-horizontal {
    -webkit-transform: scale(-1,1);
    transform: scale(-1,1)
}

.fa-flip-vertical {
    -webkit-transform: scale(1,-1);
    transform: scale(1,-1)
}

.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical {
    -webkit-transform: scale(-1,-1);
    transform: scale(-1,-1)
}

:root .fa-flip-both, :root .fa-flip-horizontal, :root .fa-flip-vertical, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-rotate-90 {
    -webkit-filter: none;
    filter: none
}

.fa-stack {
    display: inline-block;
    height: 2em;
    position: relative;
    width: 2.5em
}

.fa-stack-1x, .fa-stack-2x {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0
}

.svg-inline--fa.fa-stack-1x {
    height: 1em;
    width: 1.25em
}

.svg-inline--fa.fa-stack-2x {
    height: 2em;
    width: 2.5em
}

.fa-inverse {
    color: #fff
}

.sr-only {
    border: 0;
    clip: rect(0,0,0,0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.sr-only-focusable:active, .sr-only-focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto
}

.svg-inline--fa .fa-primary {
    fill: var(--fa-primary-color,currentColor);
    opacity: 1;
    opacity: var(--fa-primary-opacity,1)
}

.svg-inline--fa .fa-secondary {
    fill: var(--fa-secondary-color,currentColor);
    opacity: .4;
    opacity: var(--fa-secondary-opacity,.4)
}

.svg-inline--fa.fa-swap-opacity .fa-primary {
    opacity: .4;
    opacity: var(--fa-secondary-opacity,.4)
}

.svg-inline--fa.fa-swap-opacity .fa-secondary {
    opacity: 1;
    opacity: var(--fa-primary-opacity,1)
}

.svg-inline--fa mask .fa-primary, .svg-inline--fa mask .fa-secondary {
    fill: #000
}

.fad.fa-inverse {
    color: #fff
}

ul.nodes {
    padding: 0 !important;
}


.bjs-powered-by {
    display: none;
}

.disablediv {
    pointer-events: none;
    opacity: 0.4;
}


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


/*loading*/
.screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #4f57527a;
    display: flex;
    align-items: center;
    z-index: 10000;
}

.loaderAnim {
    width: 100%;
    /* height: 100%; */
    text-align: center;
}

.dot {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 28px 43px;
    display: inline-block;
}

    .dot:first-child:before {
        animation-delay: 0ms;
    }

    .dot:first-child:after {
        animation-delay: 0ms;
    }

    .dot:last-child:before {
        animation-delay: 200ms;
    }

    .dot:last-child:after {
        animation-delay: 200ms;
    }

    .dot:before {
        content: "";
        position: absolute;
        left: 0;
        width: 60px;
        height: 60px;
        background-color: blue;
        animation-name: dotHover;
        animation-duration: 900ms;
        animation-timing-function: cubic-bezier(.82,0,.26,1);
        animation-iteration-count: infinite;
        animation-delay: 100ms;
        background: #82fbd5;
        border-radius: 100%;
    }

    .dot:after {
        content: "";
        position: absolute;
        z-index: -1;
        background: black;
        box-shadow: 0px 0px 1px black;
        opacity: .20;
        width: 100%;
        height: 9px;
        left: 0;
        bottom: -2px;
        border-radius: 100%;
        animation-name: dotShadow;
        animation-duration: 900ms;
        animation-timing-function: cubic-bezier(.82,0,.26,1);
        animation-iteration-count: infinite;
        animation-delay: 100ms;
    }

@keyframes dotShadow {
    0% {
        transform: scaleX(1);
    }

    50% {
        opacity: 0;
        transform: scaleX(.6);
    }

    100% {
        transform: scaleX(1);
    }
}

@keyframes dotHover {
    0% {
        top: 0px;
    }

    50% {
        top: -50px;
        transform: scale(1.1);
    }

    100% {
        top: 0;
    }
}


/*todo*/
@media (min-width: 640px) {
    [dir=rtl] .choices__list--dropdown .choices__item--selectable, [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable {
        padding-left: 0px;
    }
}


/******mobile style******/
@media screen and (max-width: 768px) {
    .w-sm-100 {
        width: 100%;
    }

    .w-sm-50 {
        width: 47%;
    }

    .cardbox-header .cardbox-title {
        font-weight: bold;
        font-size: 1rem;
    }

    .cardbox-header {
        flex-flow: column-reverse;
    }

    .btn {
        --bs-btn-padding-y: 0.5rem;
        --bs-btn-padding-x: 0.5rem;
        --bs-btn-font-size: 0.875rem;
        --bs-btn-border-radius: var(--bs-border-radius-sm);
    }

    #fullscreen,
    #normalscreen {
        display: none !important;
    }

    .zoomhint {
        display: none !important;
    }

    .toptools {
        margin-inline-end: 3px !important;
    }

    .logotop {
        margin-inline-start: 0 !important;
    }

        .logotop img {
            width: 85px;
        }

    .usernameholder {
        white-space: nowrap;
        overflow: hidden;
        max-width: 4.25rem;
        display: inline-block;
        text-overflow: ellipsis;
        vertical-align: text-top;
    }
}

/*************dark mode**************/

.DarkMode:root {
    color-scheme: dark;
    --white: #2a2a4a;
    --lightpurple: #383964;
    --darkblue: #eaeaff;
    --lightyellow: #ffc1072b;
    --lightblue: #05c3fb29;
    --lightgreen: #29b39c45;
    --lightred: #ab505f4a;
    --bs-light-border-subtle: rgba(255, 255, 255, 0.12);
    --bs-light-bg-subtle: #93b0ff0d;
    --bs-body-bg: #2a2a4a;
    --bs-body-color: var(--darkblue);
    --bs-border-color: rgba(255, 255, 255, 0.12);
}

.DarkMode body {
    background-image: url(../img/main-pattern-dark.webp);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    color: var(--darkblue);
    background-color: #1a1a3c;
}

/* Track */
.DarkMode ::-webkit-scrollbar-track {
    background: #191a39;
}

/* Handle */
.DarkMode ::-webkit-scrollbar-thumb {
    background: #3e3e6f;
}

    /* Handle on hover */
    .DarkMode ::-webkit-scrollbar-thumb:hover {
        background: #52528c;
    }

.DarkMode #btnLightMode {
    display: inline-block;
}

.DarkMode #btnDarkMode {
    display: none
}

.DarkMode .btn-blue-light {
    color: #7ccae1;
}

.DarkMode .btn-green-light {
    color: #61d7c4;
}

.DarkMode .toprow,
.DarkMode .sideArea,
.DarkMode .hrdash,
.DarkMode .sidebarlogo,
.DarkMode .sidebarmenu .menuline,
.DarkMode .cardbox-header,
.DarkMode .dropdown-divider,
.DarkMode table.dataTable.no-footer,
.DarkMode .modal-header,
.DarkMode .blazored-modal .bm-header {
    border-color: rgba(255, 255, 255, 0.12);
}

.DarkMode .blazored-modal {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.DarkMode .table {
    --bs-table-border-color: rgba(255, 255, 255, 0.12);
}

.DarkMode .tblbgpurple.table thead th {
    background: #383964;
}

.DarkMode .formio-dialog .card-header {
    background: linear-gradient(180deg, #383964, #00000075);
}

.DarkMode table.dataTable thead th, .DarkMode table.dataTable thead td, .DarkMode table.dataTable tfoot th, .DarkMode table.dataTable tfoot td {
    background: #383964;
}

.DarkMode .table-hover > tbody > tr:hover > * {
    background: #1e1f40 !important
}

.DarkMode .dataTables_filter input[type=search],
.DarkMode .dataTables_wrapper .dataTables_length select,
.DarkMode .fcbg,
.DarkMode .list-group-item,
.DarkMode .form-control,
.DarkMode textarea,
.DarkMode input[type=text],
.DarkMode input[type=search],
.DarkMode input[type=password],
.DarkMode input[type=text].form-control,
.DarkMode .choices[data-type*=select-one] .choices__input {
    background: #2a2a4a !important;
    border: 1px solid #444460;
    color: var(--darkblue);
}

/* Override browser autofill bright background in dark mode */
.DarkMode input:-webkit-autofill,
.DarkMode input:-webkit-autofill:hover,
.DarkMode input:-webkit-autofill:focus,
.DarkMode input:-webkit-autofill:active,
.DarkMode textarea:-webkit-autofill,
.DarkMode textarea:-webkit-autofill:hover,
.DarkMode textarea:-webkit-autofill:focus,
.DarkMode textarea:-webkit-autofill:active,
.DarkMode select:-webkit-autofill,
.DarkMode select:-webkit-autofill:hover,
.DarkMode select:-webkit-autofill:focus,
.DarkMode select:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #2a2a4a inset !important;
    box-shadow: 0 0 0 1000px #2a2a4a inset !important;
    -webkit-text-fill-color: var(--darkblue) !important;
    caret-color: var(--darkblue);
    border-color: #444460 !important;
    transition: background-color 99999s ease-out 0s;
}

.DarkMode input:autofill,
.DarkMode input:autofill:hover,
.DarkMode input:autofill:focus,
.DarkMode textarea:autofill,
.DarkMode textarea:autofill:hover,
.DarkMode textarea:autofill:focus,
.DarkMode select:autofill,
.DarkMode select:autofill:hover,
.DarkMode select:autofill:focus {
    box-shadow: 0 0 0 1000px #2a2a4a inset;
    -webkit-text-fill-color: var(--darkblue);
    color: var(--darkblue);
}

.DarkMode ::placeholder {
    color: var(--darkblue);
    opacity: 0.5;
}

.DarkMode .input-group-text {
    background: #191a39;
    border: none;
    color: var(--darkblue);
}

.DarkMode .form-select,
.DarkMode select.form-control,
.DarkMode select {
    background-color: #383964 !important;
    border: 1px solid #444460;
    color: var(--darkblue);
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.DarkMode .btn-toggle::before {
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
}

.DarkMode .logolight {
    display: none;
}

.DarkMode .logodark {
    display: block;
}

.DarkMode .bg-light {
    background: #6c5ffc57 !important;
}

.DarkMode .nav-tabs,
.DarkMode .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    border-color: transparent;
}

.DarkMode .jstree-default.jstree-rtl .jstree-leaf > .jstree-ocl,
.DarkMode .jstree-default.jstree-rtl .jstree-open > .jstree-ocl {
    filter: brightness(7);
}

.DarkMode .dataTable tr {
    border-bottom: none;
}

.DarkMode table.dataTable.no-footer {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.DarkMode .modal-content,
.DarkMode .card-body,
.DarkMode .modal-header {
    background: var(--white);
    color: var(--darkblue);
}

.DarkMode .bm-header,
.DarkMode .bm-content {
    background: var(--white);
    color: var(--darkblue);
}

.DarkMode .card-title {
    color: var(--darkblue);
}

.DarkMode .formio-dialog-content {
    color: var(--darkblue);
}

.DarkMode .formio-component-datagrid .datagrid-table,
.DarkMode .formio-component-datagrid .datagrid-table td,
.DarkMode .formio-component-datagrid .datagrid-table th {
    background: #2a2a4a;
    border: 2px dotted #444460 !important;
}

.DarkMode .choices__list--dropdown .choices__list,
.DarkMode .choices__list[aria-expanded] .choices__list {
    background-color: #383964 !important;
}

.DarkMode .choices[data-type*=select-one]::after {
    border-color: #fff transparent transparent;
}

.DarkMode .choices__list--dropdown,
.choices__list[aria-expanded],
.DarkMode .choices__inner {
    background-color: #383964 !important;
    border: 1px solid #444460;
    color: var(--darkblue);
}

.DarkMode .table-striped > tbody > tr:nth-of-type(odd) > * {
    background: #383964 !important;
    box-shadow: none;
    color: var(--darkblue);
}

.DarkMode .choices[data-type*=select-one] .choices__button {
    filter: invert(1);
}

.DarkMode .choices__list--dropdown .choices__item--selectable.is-highlighted,
.DarkMode .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: #2a2a4a;
}

.DarkMode .text-muted {
    color: var(--darkblue) !important;
}

.DarkMode .accordion-button::after {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.DarkMode .tooltip {
    --bs-tooltip-bg: var(--darkblue) !important;
}

.DarkMode .query-builder .rules-group-container {
    background-color: #93b0ff0d;
}

.DarkMode .pagination {
    --bs-pagination-disabled-bg: transparent;
}

.DarkMode .tblblazor .popover .popover-header {
    background: #383964;
}

.DarkMode .tblblazor .popover {
    border: 2px solid #e9e9fe54;
}

    .DarkMode .tblblazor .popover .arrow {
        background: #e9e9fe54;
    }

.DarkMode .bs-popover-auto[data-popper-placement^=bottom] .popover-header::before,
.DarkMode .bs-popover-bottom .popover-header::before {
    border-bottom: none;
}

.DarkMode .nav-tabs .nav-link:focus,
.DarkMode .nav-tabs .nav-link:hover {
    border-color: var(--purple);
}

.DarkMode .dxbl-grid-table .dxbl-grid-header {
    background: linear-gradient(0deg, #383964, #626397);
    text-align: center;
    color: #dcdcf2 !important;
}

.DarkMode .dxbl-grid .dxbl-grid-table {
    border: 1px solid #8787bb !important;
    color: #dcdcf0;
}

.DarkMode .dxbl-grid > .dxbl-scroll-viewer {
    background-color: #383964;
}

.DarkMode .dxbl-grid {
    border: none;
}

.DarkMode .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-header,
.DarkMode .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content,
.DarkMode .btn-modal-custom {
    border-color: rgba(255, 255, 255, 0.12);
    background: var(--white);
    color: var(--darkblue);
}

    .DarkMode .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-header {
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important
    }

        .DarkMode .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-header .dxbl-popup-header-button {
            color: white;
            background: transparent;
        }

.DarkMode .graybar:after {
    background: linear-gradient(110deg, #383964 8%, #474778 18%, #383964 33%);
    background-size: 200% 100%;
}

.DarkMode .hrdash {
    
    box-shadow: none !important;
}

/************* employee profile Form 930 CU dark mode **************/

.DarkMode .employee-profile-cu {
    --profile-accent: #8b7cff;
    --profile-accent-dark: #6c5ffc;
    --profile-accent-soft: rgba(108, 95, 252, 0.18);
    --profile-border: rgba(255, 255, 255, 0.12);
    --profile-muted: rgba(234, 234, 255, 0.65);
    --profile-text: #eaeaff;
    --profile-surface: #2a2a4a;
    --profile-panel-bg: #2a2a4a;
    --profile-tab-strip-bg: #383964;
    --profile-tab-strip-border: rgba(255, 255, 255, 0.12);
    --profile-tab-text: rgba(234, 234, 255, 0.75);
    --profile-field-border: #444460;
    --profile-field-bg: #383964;
    --profile-actions-bg: #2a2a4a;
    --profile-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
    background: var(--profile-surface);
}

.DarkMode .employee-profile-cu .profile-tab-strip {
    background: #383964 !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

.DarkMode .employee-profile-cu .profile-tab-strip .profile-tabs .nav-link {
    color: #eaeaff !important;
    background: transparent !important;
}

.DarkMode .employee-profile-cu .profile-tab-strip .profile-tabs .nav-link i {
    color: #eaeaff !important;
    opacity: 0.82;
}

.DarkMode .employee-profile-cu .profile-tab-strip .profile-tabs .nav-link:hover:not(:disabled) {
    color: #b4a8ff !important;
    background: transparent !important;
    border-color: transparent !important;
}

.DarkMode .employee-profile-cu .profile-tab-strip .profile-tabs .nav-link.active {
    color: #b4a8ff !important;
    background: transparent !important;
    border-bottom-color: #8b7cff !important;
}

.DarkMode .employee-profile-cu .profile-tab-strip .profile-tabs .nav-link.active i {
    color: #b4a8ff !important;
    opacity: 1;
}

.DarkMode .employee-profile-cu .profile-tab-strip .profile-tabs .nav-link:disabled {
    color: rgba(234, 234, 255, 0.38) !important;
    opacity: 1 !important;
}

.DarkMode .employee-profile-cu .profile-tab-strip .profile-tabs .nav-link:disabled i {
    color: rgba(234, 234, 255, 0.38) !important;
}

.DarkMode .employee-profile-cu .profile-tab-panel {
    background: #2a2a4a !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
    color: #eaeaff;
}

.DarkMode .employee-profile-cu .profile-panel-title,
.DarkMode .employee-profile-cu .profile-section-title,
.DarkMode .employee-profile-cu .profile-section-title--secondary {
    color: #eaeaff !important;
}

.DarkMode .employee-profile-cu .profile-actions {
    background: #2a2a4a !important;
    border-top-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.28);
}

.DarkMode .employee-profile-cu .profile-actions-hint {
    color: rgba(234, 234, 255, 0.65);
}

.DarkMode .employee-profile-cu .profile-section-card {
    background: #2a2a4a !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.DarkMode .employee-profile-cu .profile-section-card--inline {
    background: transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

.DarkMode .employee-profile-cu .profile-section-card .form-label,
.DarkMode .employee-profile-cu .profile-section-card label.form-label {
    color: rgba(234, 234, 255, 0.65) !important;
}

.DarkMode .employee-profile-cu .profile-section-card .devdrop > label {
    color: rgba(234, 234, 255, 0.65) !important;
}

.DarkMode .employee-profile-cu .profile-section-card .devdrop:not(.devdrop--disabled) .dropdown-toggle.form-select {
    background-color: #383964 !important;
    border-color: #444460 !important;
    color: #eaeaff !important;
}

.DarkMode .employee-profile-cu .profile-section-card .form-control,
.DarkMode .employee-profile-cu .profile-section-card .form-control-sm,
.DarkMode .employee-profile-cu .profile-section-card input.form-control {
    background-color: #383964 !important;
    border-color: #444460 !important;
    color: #eaeaff !important;
}

.DarkMode .employee-profile-cu .profile-section-card .form-control:disabled,
.DarkMode .employee-profile-cu .profile-section-card input.form-control:disabled {
    background-color: #2f3058 !important;
    color: rgba(234, 234, 255, 0.72) !important;
}

.DarkMode .employee-profile-cu .profile-tab-panel .profile-docs-empty-state,
.DarkMode .employee-profile-cu .profile-tab-panel .profile-bank-empty-state,
.DarkMode .employee-profile-cu .profile-tab-panel .profile-contact-empty-state,
.DarkMode .form-930-employee-cu .profile-docs-empty-state,
.DarkMode .form-930-employee-cu .profile-bank-empty-state,
.DarkMode .form-930-employee-cu .profile-contact-empty-state {
    background: #2f3058;
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(234, 234, 255, 0.55);
}

.DarkMode .profile-family-empty-state {
    background: #2f3058 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: rgba(234, 234, 255, 0.55) !important;
}

.DarkMode .profile-family-cards .profile-family-card,
.DarkMode .profile-family-card {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22) !important;
}

.DarkMode .profile-family-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32) !important;
}

.DarkMode .profile-family-avatar {
    border-color: #383964 !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) !important;
    color: rgba(234, 234, 255, 0.82) !important;
    background: linear-gradient(135deg, #3f4070 0%, #2f3058 100%) !important;
}

.DarkMode .profile-family-avatar.relation-spouse {
    color: #f9a8d4 !important;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.28) 0%, rgba(244, 114, 182, 0.18) 100%) !important;
    box-shadow: 0 0 0 1px rgba(244, 114, 182, 0.35) !important;
}

.DarkMode .profile-family-avatar.relation-child {
    color: #93c5fd !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.28) 0%, rgba(96, 165, 250, 0.18) 100%) !important;
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.35) !important;
}

.DarkMode .profile-family-avatar.relation-parent {
    color: #c4b5fd !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.28) 0%, rgba(167, 139, 250, 0.18) 100%) !important;
    box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.35) !important;
}

.DarkMode .profile-family-avatar.relation-sibling {
    color: #5eead4 !important;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.28) 0%, rgba(45, 212, 191, 0.18) 100%) !important;
    box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.35) !important;
}

.DarkMode .profile-family-card-title,
.DarkMode .profile-family-attachments-title {
    color: #eaeaff !important;
}

.DarkMode .profile-family-card-meta {
    color: rgba(234, 234, 255, 0.6) !important;
}

.DarkMode .profile-family-badge--relation {
    background: rgba(99, 102, 241, 0.22) !important;
    color: #c7d2fe !important;
}

.DarkMode .profile-family-badge--study {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #fcd34d !important;
}

.DarkMode .profile-family-badge--dependent {
    background: rgba(5, 150, 105, 0.18) !important;
    color: #6ee7b7 !important;
}

.DarkMode .profile-family-badge--neutral {
    background: #2f3058 !important;
    color: rgba(234, 234, 255, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.DarkMode .profile-family-card-attachments {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

.DarkMode .profile-family-detail-list {
    background: #2f3058 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.DarkMode .profile-family-detail-list li {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.DarkMode .profile-family-detail-term {
    color: rgba(234, 234, 255, 0.5) !important;
}

.DarkMode .profile-family-detail-value {
    color: #eaeaff !important;
}

.DarkMode .profile-family-icon-btn {
    color: rgba(234, 234, 255, 0.55) !important;
}

.DarkMode .profile-family-icon-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #eaeaff !important;
}

.DarkMode .profile-family-icon-btn--danger:hover {
    background: rgba(220, 38, 38, 0.18) !important;
    color: #fca5a5 !important;
}

/******** Profile bank cards — dark mode **********/

.DarkMode .profile-bank-empty-state {
    background: #2f3058 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: rgba(234, 234, 255, 0.55) !important;
}

.DarkMode .profile-bank-cards .profile-bank-card,
.DarkMode .profile-bank-card {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22) !important;
}

.DarkMode .profile-bank-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32) !important;
}

.DarkMode .profile-bank-card::before {
    background: linear-gradient(90deg, #4b5563, #6b7280) !important;
}

.DarkMode .profile-bank-card.is-main::before {
    background: linear-gradient(90deg, #6c5ffc, #8b7cff) !important;
}

.DarkMode .profile-bank-icon {
    color: rgba(234, 234, 255, 0.82) !important;
    background: linear-gradient(135deg, #3f4070 0%, #2f3058 100%) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

.DarkMode .profile-bank-icon--logo {
    background: rgba(255, 255, 255, 0.96) !important;
}

.DarkMode .profile-bank-card.is-main .profile-bank-icon {
    color: #93c5fd !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.28) 0%, rgba(96, 165, 250, 0.18) 100%) !important;
    border-color: rgba(96, 165, 250, 0.35) !important;
}

.DarkMode .profile-bank-card-title {
    color: #eaeaff !important;
}

.DarkMode .profile-bank-card .profile-bank-card-meta,
.DarkMode .profile-bank-card .profile-bank-card-number,
.DarkMode .profile-bank-card .profile-bank-card-meta.profile-bank-card-number {
    color: rgba(234, 234, 255, 0.72) !important;
}

.DarkMode .profile-bank-card .profile-bank-card-number,
.DarkMode .profile-bank-card .profile-bank-card-meta.profile-bank-card-number {
    color: #c7d2fe !important;
}

.DarkMode .profile-bank-badge--main {
    background: rgba(59, 130, 246, 0.22) !important;
    color: #93c5fd !important;
}

.DarkMode .profile-bank-badge--active {
    background: rgba(5, 150, 105, 0.18) !important;
    color: #6ee7b7 !important;
}

.DarkMode .profile-bank-badge--inactive {
    background: #2f3058 !important;
    color: rgba(234, 234, 255, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.DarkMode .profile-bank-badge--neutral {
    background: #2f3058 !important;
    color: rgba(234, 234, 255, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.DarkMode .profile-bank-detail-list {
    background: #2f3058 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.DarkMode .profile-bank-detail-list li {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.DarkMode .profile-bank-detail-term {
    color: rgba(234, 234, 255, 0.5) !important;
}

.DarkMode .profile-bank-detail-value {
    color: #eaeaff !important;
}

.DarkMode .profile-bank-copy-btn {
    color: rgba(234, 234, 255, 0.45) !important;
}

.DarkMode .profile-bank-copy-btn:hover {
    background: rgba(108, 95, 252, 0.18) !important;
    color: #c4b5fd !important;
}

.DarkMode .profile-bank-icon-btn {
    color: rgba(234, 234, 255, 0.55) !important;
}

.DarkMode .profile-bank-icon-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #eaeaff !important;
}

.DarkMode .profile-bank-icon-btn--danger:hover {
    background: rgba(220, 38, 38, 0.18) !important;
    color: #fca5a5 !important;
}

/******** Profile contact cards — icons dark mode **********/

.DarkMode .profile-contact-cards .profile-contact-icon,
.DarkMode .profile-contact-card .profile-contact-icon {
    color: #7dd3fc !important;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.28) 0%, rgba(56, 189, 248, 0.18) 100%) !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
}

.DarkMode .profile-contact-cards .profile-contact-detail-icon--phone,
.DarkMode .profile-contact-card .profile-contact-detail-icon--phone {
    color: #93c5fd !important;
    background: rgba(59, 130, 246, 0.22) !important;
}

.DarkMode .profile-contact-cards .profile-contact-detail-icon--mobile,
.DarkMode .profile-contact-card .profile-contact-detail-icon--mobile {
    color: #6ee7b7 !important;
    background: rgba(5, 150, 105, 0.18) !important;
}

.DarkMode .profile-contact-cards .profile-contact-detail-icon--inside-email,
.DarkMode .profile-contact-card .profile-contact-detail-icon--inside-email {
    color: #c4b5fd !important;
    background: rgba(124, 58, 237, 0.22) !important;
}

.DarkMode .profile-contact-cards .profile-contact-detail-icon--outside-email,
.DarkMode .profile-contact-card .profile-contact-detail-icon--outside-email {
    color: #fdba74 !important;
    background: rgba(234, 88, 12, 0.18) !important;
}

.DarkMode .profile-contact-cards .profile-contact-icon-btn,
.DarkMode .profile-contact-card .profile-contact-icon-btn {
    color: rgba(234, 234, 255, 0.55) !important;
}

.DarkMode .profile-contact-cards .profile-contact-icon-btn:hover,
.DarkMode .profile-contact-card .profile-contact-icon-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #eaeaff !important;
}

.DarkMode .profile-contact-cards .profile-contact-icon-btn--danger:hover,
.DarkMode .profile-contact-card .profile-contact-icon-btn--danger:hover {
    background: rgba(220, 38, 38, 0.18) !important;
    color: #fca5a5 !important;
}

.DarkMode .employee-profile-cu .profile-tab-panel .profile-docs-item,
.DarkMode .employee-profile-cu .profile-tab-panel .profile-bank-card,
.DarkMode .employee-profile-cu .profile-tab-panel .profile-contact-card,
.DarkMode .form-930-employee-cu .profile-docs-item,
.DarkMode .form-930-employee-cu .profile-bank-card,
.DarkMode .form-930-employee-cu .profile-contact-card {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.DarkMode .employee-profile-cu .profile-tab-panel .profile-bank-detail-list,
.DarkMode .employee-profile-cu .profile-tab-panel .profile-contact-detail-list,
.DarkMode .form-930-employee-cu .profile-bank-detail-list,
.DarkMode .form-930-employee-cu .profile-contact-detail-list {
    background: #2f3058 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.DarkMode .employee-profile-cu .profile-tab-panel .work-experience-file-card,
.DarkMode .form-930-employee-cu .work-experience-file-card {
    background: #383964;
    border-color: rgba(255, 255, 255, 0.18);
}

.DarkMode .employee-profile-cu .profile-tab-panel .work-experience-file-hint {
    border-top-color: rgba(255, 255, 255, 0.12);
    color: rgba(234, 234, 255, 0.65);
}

.DarkMode .profile-info-section .form-label,
.DarkMode .profile-info-section h6.text-secondary {
    color: rgba(234, 234, 255, 0.82) !important;
}

.DarkMode .profile-family-section,
.DarkMode .profile-bank-section,
.DarkMode .profile-docs-section,
.DarkMode .profile-contact-section {
    color: #eaeaff;
}

.DarkMode .profile-bank-card-title,
.DarkMode .profile-docs-item-name,
.DarkMode .profile-contact-card-title,
.DarkMode .profile-bank-detail-value,
.DarkMode .profile-contact-detail-value {
    color: #eaeaff !important;
}

.DarkMode .profile-docs-item-meta,
.DarkMode .profile-contact-card-meta,
.DarkMode .profile-bank-detail-term,
.DarkMode .profile-contact-detail-term {
    color: rgba(234, 234, 255, 0.55) !important;
}

.DarkMode .profile-bank-detail-list li,
.DarkMode .profile-contact-detail-list li {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/******** Form 930 Employee Family CU / Fields — dark mode **********/

.DarkMode .employee-family-cu {
    background: #2a2a4a !important;
}

.DarkMode .employee-family-cu-intro {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(234, 234, 255, 0.82) !important;
}

.DarkMode .employee-family-cu-intro.text-success {
    background: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.28) !important;
    color: #6ee7b7 !important;
}

.DarkMode .employee-family-cu-section {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22) !important;
}

.DarkMode .employee-family-cu-section-head {
    background: linear-gradient(180deg, #3f4070 0%, #383964 100%) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.DarkMode .employee-family-cu-section-icon {
    background: rgba(124, 58, 237, 0.22) !important;
    color: #c4b5fd !important;
}

.DarkMode .employee-family-cu-section-icon--relation {
    background: rgba(109, 40, 217, 0.22) !important;
    color: #c4b5fd !important;
}

.DarkMode .employee-family-cu-section-icon--doc {
    background: rgba(234, 88, 12, 0.18) !important;
    color: #fdba74 !important;
}

.DarkMode .employee-family-cu-section-title {
    color: #eaeaff !important;
}

.DarkMode .employee-family-cu-section-sub {
    color: rgba(234, 234, 255, 0.6) !important;
}

.DarkMode .employee-family-cu-section-body .form-label,
.DarkMode .employee-family-cu .devdrop > label,
.DarkMode .employee-family-cu .bfu__label,
.DarkMode .employee-family-cu .employee-family-cu-uploader > label {
    color: rgba(234, 234, 255, 0.65) !important;
}

.DarkMode .employee-family-cu-section-body .form-control,
.DarkMode .employee-family-cu-section-body .form-control-sm,
.DarkMode .employee-family-cu-section-body textarea.form-control {
    background-color: #2f3058 !important;
    border-color: #444460 !important;
    color: #eaeaff !important;
}

.DarkMode .employee-family-cu-section-body .form-control:focus,
.DarkMode .employee-family-cu-section-body .form-control-sm:focus,
.DarkMode .employee-family-cu-section-body textarea.form-control:focus {
    border-color: #8b7cff !important;
    box-shadow: 0 0 0 0.15rem rgba(108, 95, 252, 0.22) !important;
}

.DarkMode .employee-family-cu-section-body .form-control::placeholder,
.DarkMode .employee-family-cu-section-body textarea.form-control::placeholder {
    color: rgba(234, 234, 255, 0.38) !important;
}

.DarkMode .employee-family-cu .devdrop:not(.devdrop--disabled) .dropdown-toggle.form-select {
    background-color: #2f3058 !important;
    border-color: #444460 !important;
    color: #eaeaff !important;
}

.DarkMode .employee-family-cu .devdrop.devdrop--disabled .dropdown-toggle.form-select {
    background-color: #2a2a4a !important;
    border-color: #444460 !important;
    color: rgba(234, 234, 255, 0.72) !important;
}

.DarkMode .employee-family-cu-switch__input {
    background-color: #4b5563 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.28) !important;
}

.DarkMode .employee-family-cu-switch__input::before {
    background: linear-gradient(180deg, #eaeaff 0%, #c7c9e8 100%) !important;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

.DarkMode .employee-family-cu-switch__input:checked {
    background-color: #22c55e !important;
}

.DarkMode .employee-family-cu-switch__input:checked::before {
    box-shadow:
        0 3px 10px rgba(22, 163, 74, 0.38),
        0 0 0 1px rgba(21, 128, 61, 0.2) !important;
}

.DarkMode .employee-family-cu-switch__input:focus {
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.28),
        0 0 0 0.2rem rgba(34, 197, 94, 0.22) !important;
}

.DarkMode .employee-family-cu-switch__label.is-on {
    color: #6ee7b7 !important;
}

.DarkMode .employee-family-cu-switch__label.is-off {
    color: rgba(234, 234, 255, 0.55) !important;
}

.DarkMode .employee-family-cu-section-body .text-muted {
    color: rgba(234, 234, 255, 0.55) !important;
}

.DarkMode .employee-family-cu .profile-docs-empty-state,
.DarkMode .employee-family-cu .profile-family-attachments-empty {
    background: #2f3058 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: rgba(234, 234, 255, 0.55) !important;
}

.DarkMode .employee-family-cu .profile-docs-empty-state i,
.DarkMode .employee-family-cu .profile-family-attachments-empty i {
    color: rgba(234, 234, 255, 0.45) !important;
    opacity: 0.85;
}

.DarkMode .employee-family-cu .profile-docs-empty-state span,
.DarkMode .employee-family-cu .profile-docs-empty-state p {
    color: rgba(234, 234, 255, 0.55) !important;
}

.DarkMode .employee-family-cu .profile-docs-list {
    padding: 0.45rem;
    background: #2f3058 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.65rem;
}

.DarkMode .employee-family-cu .profile-docs-list .profile-docs-item {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.DarkMode .employee-family-cu .profile-family-attachments .btn-outline-primary,
.DarkMode .employee-family-cu .profile-docs-toolbar .btn-outline-primary {
    color: #93c5fd !important;
    border-color: rgba(96, 165, 250, 0.45) !important;
    background: rgba(59, 130, 246, 0.12) !important;
}

.DarkMode .employee-family-cu .profile-family-attachments .btn-outline-primary:hover,
.DarkMode .employee-family-cu .profile-docs-toolbar .btn-outline-primary:hover,
.DarkMode .employee-family-cu .profile-family-attachments .btn-outline-primary:focus {
    color: #bfdbfe !important;
    background: rgba(59, 130, 246, 0.24) !important;
    border-color: rgba(147, 197, 253, 0.55) !important;
}

.DarkMode .employee-family-cu .profile-docs-download {
    color: #93c5fd !important;
    background: rgba(59, 130, 246, 0.16) !important;
    border-color: rgba(96, 165, 250, 0.35) !important;
}

.DarkMode .employee-family-cu .profile-docs-download:hover,
.DarkMode .employee-family-cu .profile-docs-download-btn:hover {
    color: #bfdbfe !important;
    background: rgba(59, 130, 246, 0.28) !important;
    border-color: rgba(147, 197, 253, 0.45) !important;
}

.DarkMode .employee-family-cu .profile-docs-action-btn {
    background: #2f3058 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(234, 234, 255, 0.55) !important;
}

.DarkMode .employee-family-cu .profile-docs-action-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #eaeaff !important;
}

.DarkMode .employee-family-cu .profile-docs-action-btn--danger {
    color: #fca5a5 !important;
    background: rgba(220, 38, 38, 0.14) !important;
    border-color: rgba(248, 113, 113, 0.35) !important;
}

.DarkMode .employee-family-cu .profile-docs-action-btn--danger:hover {
    background: rgba(220, 38, 38, 0.22) !important;
    color: #fecaca !important;
    border-color: rgba(248, 113, 113, 0.5) !important;
}

.DarkMode .employee-family-cu-actions {
    background: linear-gradient(180deg, rgba(42, 42, 74, 0.92) 0%, #2a2a4a 35%) !important;
    border-top-color: rgba(255, 255, 255, 0.12) !important;
}

.DarkMode .employee-family-cu-actions .btn-outline-secondary {
    color: #eaeaff !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

.DarkMode .employee-family-cu-actions .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #eaeaff !important;
}

.DarkMode .employee-family-cu-actions .btn-success {
    background: #6c5ffc !important;
    border-color: #5b4fe0 !important;
    color: #fff !important;
}

.DarkMode .employee-family-cu-actions .btn-success:hover {
    background: #5b4fe0 !important;
    border-color: #4f44c8 !important;
}

/******** Form 930 Document CU / Fields — dark mode **********/

.DarkMode .document-cu {
    background: #2a2a4a !important;
}

.DarkMode .document-cu-intro {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(234, 234, 255, 0.82) !important;
}

.DarkMode .document-cu-intro--edit {
    background: rgba(99, 102, 241, 0.14) !important;
    border-color: rgba(129, 140, 248, 0.28) !important;
    color: #c7d2fe !important;
}

.DarkMode .document-fields-section {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22) !important;
}

.DarkMode .document-fields-section-head {
    background: linear-gradient(180deg, #3f4070 0%, #383964 100%) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.DarkMode .document-fields-section-icon {
    background: rgba(59, 130, 246, 0.22) !important;
    color: #93c5fd !important;
}

.DarkMode .document-fields-section-icon--upload {
    background: rgba(234, 88, 12, 0.18) !important;
    color: #fdba74 !important;
}

.DarkMode .document-fields-section-title {
    color: #eaeaff !important;
}

.DarkMode .document-fields-section-sub {
    color: rgba(234, 234, 255, 0.6) !important;
}

.DarkMode .document-fields-status.is-empty {
    color: rgba(234, 234, 255, 0.55) !important;
    background: #2f3058 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.DarkMode .document-fields-status.is-ready {
    color: #6ee7b7 !important;
    background: rgba(5, 150, 105, 0.18) !important;
    border-color: rgba(52, 211, 153, 0.28) !important;
}

.DarkMode .document-fields-label,
.DarkMode .document-cu .document-fields .devdrop > label,
.DarkMode .document-cu .bfu__label {
    color: rgba(234, 234, 255, 0.65) !important;
}

.DarkMode .document-fields-input,
.DarkMode .document-fields .form-control-sm,
.DarkMode .document-fields-textarea {
    background-color: #2f3058 !important;
    border-color: #444460 !important;
    color: #eaeaff !important;
}

.DarkMode .document-fields-input:focus,
.DarkMode .document-fields .form-control-sm:focus,
.DarkMode .document-fields-textarea:focus {
    border-color: #8b7cff !important;
    box-shadow: 0 0 0 0.15rem rgba(108, 95, 252, 0.22) !important;
}

.DarkMode .document-fields-input::placeholder,
.DarkMode .document-fields-textarea::placeholder {
    color: rgba(234, 234, 255, 0.38) !important;
}

.DarkMode .document-cu .document-fields .devdrop:not(.devdrop--disabled) .dropdown-toggle.form-select {
    background-color: #2f3058 !important;
    border-color: #444460 !important;
    color: #eaeaff !important;
}

.DarkMode .document-cu .document-fields .devdrop.devdrop--disabled .dropdown-toggle.form-select {
    background-color: #2a2a4a !important;
    border-color: #444460 !important;
    color: rgba(234, 234, 255, 0.72) !important;
}

.DarkMode .document-fields-switch__input {
    background-color: #4b5563 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.28) !important;
}

.DarkMode .document-fields-switch__input::before {
    background: linear-gradient(180deg, #eaeaff 0%, #c7c9e8 100%) !important;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

.DarkMode .document-fields-switch__input:checked {
    background-color: #22c55e !important;
}

.DarkMode .document-fields-switch__input:checked::before {
    box-shadow:
        0 3px 10px rgba(22, 163, 74, 0.38),
        0 0 0 1px rgba(21, 128, 61, 0.2) !important;
}

.DarkMode .document-fields-switch__input:focus {
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.28),
        0 0 0 0.2rem rgba(34, 197, 94, 0.22) !important;
}

.DarkMode .document-fields-switch__label.is-on {
    color: #6ee7b7 !important;
}

.DarkMode .document-fields-switch__label.is-off {
    color: rgba(234, 234, 255, 0.55) !important;
}

.DarkMode .document-fields-upload-wrap {
    background:
        radial-gradient(circle at 50% 0%, rgba(108, 95, 252, 0.12) 0%, transparent 55%),
        linear-gradient(180deg, #2f3058 0%, #383964 100%) !important;
    border-top-color: rgba(255, 255, 255, 0.14) !important;
}

.DarkMode .document-fields-format-chip {
    color: rgba(234, 234, 255, 0.72) !important;
    background: #2f3058 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

.DarkMode .document-fields-upload-context {
    color: rgba(234, 234, 255, 0.6) !important;
}

.DarkMode .document-fields-upload-guide {
    color: #c7d2fe !important;
    background: rgba(99, 102, 241, 0.14) !important;
    border-color: rgba(129, 140, 248, 0.28) !important;
}

.DarkMode .document-fields-upload-note,
.DarkMode .document-cu-intro.text-muted {
    color: rgba(234, 234, 255, 0.55) !important;
}

.DarkMode .document-cu .document-fields-uploader .bfu__preview-zone {
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
}

.DarkMode .document-cu-actions {
    background: linear-gradient(180deg, rgba(42, 42, 74, 0.92) 0%, #2a2a4a 35%) !important;
    border-top-color: rgba(255, 255, 255, 0.12) !important;
}

.DarkMode .document-cu-actions .btn-outline-secondary {
    color: #eaeaff !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

.DarkMode .document-cu-actions .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #eaeaff !important;
}

.DarkMode .document-cu-actions .btn-success {
    background: #6c5ffc !important;
    border-color: #5b4fe0 !important;
    color: #fff !important;
}

.DarkMode .document-cu-actions .btn-success:hover:not(:disabled) {
    background: #5b4fe0 !important;
    border-color: #4f44c8 !important;
}

/******** Form 930 Bank Account CU — dark mode **********/

.DarkMode .bank-account-cu {
    background: #2a2a4a !important;
}

.DarkMode .bank-account-cu-intro {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(234, 234, 255, 0.82) !important;
}

.DarkMode .bank-account-cu-intro.text-muted {
    color: rgba(234, 234, 255, 0.55) !important;
}

.DarkMode .bank-account-cu-section {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22) !important;
}

.DarkMode .bank-account-cu-section-head {
    background: linear-gradient(180deg, #3f4070 0%, #383964 100%) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.DarkMode .bank-account-cu-section-icon {
    background: rgba(124, 58, 237, 0.22) !important;
    color: #c4b5fd !important;
}

.DarkMode .bank-account-cu-section-icon--bank {
    background: rgba(5, 150, 105, 0.18) !important;
    color: #6ee7b7 !important;
}

.DarkMode .bank-account-cu-section-icon--numbers {
    background: rgba(234, 88, 12, 0.18) !important;
    color: #fdba74 !important;
}

.DarkMode .bank-account-cu-section-title {
    color: #eaeaff !important;
}

.DarkMode .bank-account-cu-section-sub {
    color: rgba(234, 234, 255, 0.6) !important;
}

.DarkMode .bank-account-cu-section-body .form-label,
.DarkMode .bank-account-cu .devdrop > label {
    color: rgba(234, 234, 255, 0.65) !important;
}

.DarkMode .bank-account-cu-section-body .form-control,
.DarkMode .bank-account-cu-section-body .form-control-sm,
.DarkMode .bank-account-cu-section-body .form-select,
.DarkMode .bank-account-cu-section-body .form-select-sm {
    background-color: #2f3058 !important;
    border-color: #444460 !important;
    color: #eaeaff !important;
}

.DarkMode .bank-account-cu-section-body .form-control:focus,
.DarkMode .bank-account-cu-section-body .form-control-sm:focus,
.DarkMode .bank-account-cu-section-body .form-select:focus,
.DarkMode .bank-account-cu-section-body .form-select-sm:focus {
    border-color: #8b7cff !important;
    box-shadow: 0 0 0 0.15rem rgba(108, 95, 252, 0.22) !important;
}

.DarkMode .bank-account-cu-section-body .form-control:disabled,
.DarkMode .bank-account-cu-section-body input.form-control:disabled,
.DarkMode .bank-account-cu-section-body select.form-select:disabled {
    background-color: #2a2a4a !important;
    border-color: #444460 !important;
    color: rgba(234, 234, 255, 0.72) !important;
}

.DarkMode .bank-account-cu .bank-account-cu-placeholder {
    color: rgba(234, 234, 255, 0.55) !important;
    background: #2a2a4a !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

.DarkMode .bank-account-cu-section-body .form-control::placeholder {
    color: rgba(234, 234, 255, 0.38) !important;
}

.DarkMode .bank-account-cu .devdrop:not(.devdrop--disabled) .dropdown-toggle.form-select {
    background-color: #2f3058 !important;
    border-color: #444460 !important;
    color: #eaeaff !important;
}

.DarkMode .bank-account-cu .devdrop.devdrop--disabled .dropdown-toggle.form-select {
    background-color: #2a2a4a !important;
    border-color: #444460 !important;
    color: rgba(234, 234, 255, 0.72) !important;
}

.DarkMode .bank-account-cu-switch__input {
    background-color: #4b5563 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.28) !important;
}

.DarkMode .bank-account-cu-switch__input::before {
    background: linear-gradient(180deg, #eaeaff 0%, #c7c9e8 100%) !important;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

.DarkMode .bank-account-cu-switch__input:checked {
    background-color: #22c55e !important;
}

.DarkMode .bank-account-cu-switch__input:checked::before {
    box-shadow:
        0 3px 10px rgba(22, 163, 74, 0.38),
        0 0 0 1px rgba(21, 128, 61, 0.2) !important;
}

.DarkMode .bank-account-cu-switch__input:focus {
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.28),
        0 0 0 0.2rem rgba(34, 197, 94, 0.22) !important;
}

.DarkMode .bank-account-cu-switch__label.is-on {
    color: #6ee7b7 !important;
}

.DarkMode .bank-account-cu-switch__label.is-off {
    color: rgba(234, 234, 255, 0.55) !important;
}

.DarkMode .bank-account-cu-actions {
    background: linear-gradient(180deg, rgba(42, 42, 74, 0.92) 0%, #2a2a4a 35%) !important;
    border-top-color: rgba(255, 255, 255, 0.12) !important;
}

.DarkMode .bank-account-cu-actions .btn-outline-secondary {
    color: #eaeaff !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

.DarkMode .bank-account-cu-actions .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #eaeaff !important;
}

.DarkMode .bank-account-cu-actions .btn-success {
    background: #6c5ffc !important;
    border-color: #5b4fe0 !important;
    color: #fff !important;
}

.DarkMode .bank-account-cu-actions .btn-success:hover:not(:disabled) {
    background: #5b4fe0 !important;
    border-color: #4f44c8 !important;
}

/******** Form 930 Family Attachment CU / Fields — dark mode **********/

.DarkMode .family-att-cu {
    background: #2a2a4a !important;
}

.DarkMode .family-att-cu-intro {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(234, 234, 255, 0.82) !important;
}

.DarkMode .family-att-cu-intro--edit {
    background: rgba(99, 102, 241, 0.14) !important;
    border-color: rgba(129, 140, 248, 0.28) !important;
    color: #c7d2fe !important;
}

.DarkMode .family-att-cu-intro.text-muted {
    color: rgba(234, 234, 255, 0.55) !important;
}

.DarkMode .family-att-fields-section {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22) !important;
}

.DarkMode .family-att-fields-section-head {
    background: linear-gradient(180deg, #3f4070 0%, #383964 100%) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.DarkMode .family-att-fields-section-icon {
    background: rgba(124, 58, 237, 0.22) !important;
    color: #c4b5fd !important;
}

.DarkMode .family-att-fields-section-icon--upload {
    background: rgba(234, 88, 12, 0.18) !important;
    color: #fdba74 !important;
}

.DarkMode .family-att-fields-section-title {
    color: #eaeaff !important;
}

.DarkMode .family-att-fields-section-sub {
    color: rgba(234, 234, 255, 0.6) !important;
}

.DarkMode .family-att-fields-status.is-empty {
    color: #fcd34d !important;
    background: rgba(245, 158, 11, 0.14) !important;
    border-color: rgba(251, 191, 36, 0.28) !important;
}

.DarkMode .family-att-fields-status.is-ready {
    color: #6ee7b7 !important;
    background: rgba(5, 150, 105, 0.18) !important;
    border-color: rgba(52, 211, 153, 0.28) !important;
}

.DarkMode .family-att-cu .alert-info {
    background: rgba(99, 102, 241, 0.14) !important;
    border-color: rgba(129, 140, 248, 0.28) !important;
    color: #c7d2fe !important;
}

.DarkMode .family-att-fields-label,
.DarkMode .family-att-cu .family-att-fields .devdrop > label,
.DarkMode .family-att-cu .bfu__label {
    color: rgba(234, 234, 255, 0.65) !important;
}

.DarkMode .family-att-cu .family-att-fields-input,
.DarkMode .family-att-cu .family-att-fields .form-control-sm,
.DarkMode .family-att-cu .family-att-fields-textarea {
    background-color: #2f3058 !important;
    border-color: #444460 !important;
    color: #eaeaff !important;
}

.DarkMode .family-att-cu .family-att-fields-input:focus,
.DarkMode .family-att-cu .family-att-fields .form-control-sm:focus,
.DarkMode .family-att-cu .family-att-fields-textarea:focus {
    border-color: #8b7cff !important;
    box-shadow: 0 0 0 0.15rem rgba(108, 95, 252, 0.22) !important;
}

.DarkMode .family-att-cu .family-att-fields-input::placeholder,
.DarkMode .family-att-cu .family-att-fields-textarea::placeholder {
    color: rgba(234, 234, 255, 0.38) !important;
}

.DarkMode .family-att-cu .family-att-fields .devdrop:not(.devdrop--disabled) .dropdown-toggle.form-select {
    background-color: #2f3058 !important;
    border-color: #444460 !important;
    color: #eaeaff !important;
}

.DarkMode .family-att-cu .family-att-fields .devdrop.devdrop--disabled .dropdown-toggle.form-select {
    background-color: #2a2a4a !important;
    border-color: #444460 !important;
    color: rgba(234, 234, 255, 0.72) !important;
}

.DarkMode .family-att-fields-upload-wrap {
    background:
        radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.12) 0%, transparent 55%),
        linear-gradient(180deg, #2f3058 0%, #383964 100%) !important;
    border-top-color: rgba(255, 255, 255, 0.14) !important;
}

.DarkMode .family-att-fields-format-chip {
    color: rgba(234, 234, 255, 0.72) !important;
    background: #2f3058 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

.DarkMode .family-att-fields-upload-context {
    color: rgba(234, 234, 255, 0.6) !important;
}

.DarkMode .family-att-fields-upload-context strong {
    color: #eaeaff !important;
}

.DarkMode .family-att-fields-upload-note {
    color: rgba(234, 234, 255, 0.55) !important;
}

.DarkMode .family-att-cu .family-att-fields-uploader .bfu__preview-zone {
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
}

.DarkMode .family-att-cu-actions {
    background: linear-gradient(180deg, rgba(42, 42, 74, 0.92) 0%, #2a2a4a 35%) !important;
    border-top-color: rgba(255, 255, 255, 0.12) !important;
}

.DarkMode .family-att-cu-actions .btn-outline-secondary {
    color: #eaeaff !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

.DarkMode .family-att-cu-actions .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #eaeaff !important;
}

.DarkMode .family-att-cu-actions .btn-success {
    background: #6c5ffc !important;
    border-color: #5b4fe0 !important;
    color: #fff !important;
}

.DarkMode .family-att-cu-actions .btn-success:hover:not(:disabled) {
    background: #5b4fe0 !important;
    border-color: #4f44c8 !important;
}

/******** Home widgets (Index) — dark mode **********/

.DarkMode .home-widget {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.22) !important;
}

    .DarkMode .home-widget .home-widget-header {
        background: linear-gradient(180deg, #3f4070 0%, #2a2a4a 100%) !important;
        border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    }

.DarkMode .home-widget .home-widget-icon {
    background: rgba(41, 179, 156, 0.2) !important;
    color: #6ee7b7 !important;
}

.DarkMode .home-widget .home-widget-title {
    color: #eaeaff !important;
}

.DarkMode .home-widget .home-widget-subtitle {
    color: rgba(234, 234, 255, 0.6) !important;
}

.DarkMode .home-widget .home-widget-badge {
    color: #c4b5fd !important;
    background: rgba(108, 95, 252, 0.18) !important;
    border-color: rgba(108, 95, 252, 0.28) !important;
}

.DarkMode .home-widget .home-widget-body {
    background: #2a2a4a !important;
}

/* Calendar widget */
.DarkMode .home-widget-calendar .calendar-base {
    background-color: #2a2a4a !important;
    box-shadow: none !important;
    color: #eaeaff !important;
}

.DarkMode .home-widget-calendar .todayDate {
    background: linear-gradient(180deg, rgba(63, 64, 112, 0.85), transparent) !important;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15) !important;
    color: #eaeaff !important;
}

.DarkMode .home-widget-calendar .year,
.DarkMode .home-widget-calendar .year-meta,
.DarkMode .home-widget-calendar .days {
    color: #eaeaff !important;
}

.DarkMode .home-widget-calendar .months span {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.22) !important;
    background: #383964 !important;
    color: #eaeaff !important;
}

.DarkMode .home-widget-calendar .month-color {
    color: #6ee7b7 !important;
}

.DarkMode .home-widget-calendar .active-season-bg {
    background-color: #6c5ffc !important;
    color: #fff !important;
}

.DarkMode .home-widget-calendar .month-hover.active-season-cr {
    color: #fff !important;
}

.DarkMode .home-widget-calendar .month-line {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.DarkMode .home-widget-calendar .num-dates ul li {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.22) !important;
    color: #eaeaff !important;
}

.DarkMode .home-widget-calendar .num-dates ul li small#miladi,
.DarkMode .home-widget-calendar .num-dates ul li small#ghamari {
    opacity: 0.55 !important;
}

.DarkMode .home-widget-calendar .grey {
    color: rgba(234, 234, 255, 0.38) !important;
}

.DarkMode .home-widget-calendar .today {
    border-color: #8b7cff !important;
}

.DarkMode .home-widget-calendar .show-events {
    background: rgba(108, 95, 252, 0.22) !important;
    color: #eaeaff !important;
}

.DarkMode .home-widget-calendar .show-events:hover {
    background: #6c5ffc !important;
    color: #fff !important;
}

.DarkMode .home-widget-calendar .close-events:before,
.DarkMode .home-widget-calendar .show-events:before {
    filter: invert(1) brightness(2);
}

.DarkMode .home-widget-calendar .close-events:before {
    background: rgba(255, 255, 255, 0.08) !important;
}

.DarkMode .home-widget-calendar .events-list {
    color: #eaeaff !important;
}

.DarkMode .home-widget-calendar .posts {
    color: #93c5fd !important;
}

.DarkMode .home-widget-calendar .posts:hover {
    color: #6ee7b7 !important;
}

/* Notifications widget — panel content */
.DarkMode .home-widget-notifications .notifications-state {
    background: linear-gradient(180deg, #2f3058 0%, #383964 100%) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: rgba(234, 234, 255, 0.6) !important;
}

.DarkMode .home-widget-notifications .notifications-state strong {
    color: #eaeaff !important;
}

.DarkMode .home-widget-notifications .notifications-state-icon {
    color: #a5b4fc !important;
    opacity: 1 !important;
}

.DarkMode .home-widget-notifications .notifications-state-error {
    color: #fca5a5 !important;
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.14) 0%, #383964 100%) !important;
    border-color: rgba(248, 113, 113, 0.28) !important;
}

.DarkMode .home-widget-notifications .notifications-state-error .notifications-state-icon {
    color: #f87171 !important;
}

.DarkMode .home-widget-notifications .notifications-state-spinner {
    border-color: rgba(108, 95, 252, 0.22) !important;
    border-top-color: #8b7cff !important;
}

.DarkMode .home-widget-notifications .notifcard {
    color: #eaeaff !important;
    background: linear-gradient(135deg, #383964 0%, #2f3058 100%) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    border-inline-start-color: rgba(96, 165, 250, 0.55) !important;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.18) !important;
}

.DarkMode .home-widget-notifications .notifcard:hover {
    border-color: rgba(108, 95, 252, 0.35) !important;
    background: linear-gradient(135deg, #3f4070 0%, #383964 100%) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28) !important;
}

.DarkMode .home-widget-notifications .notifMeta-item {
    color: rgba(234, 234, 255, 0.55) !important;
}

.DarkMode .home-widget-notifications .notifMeta-item .fal {
    color: #a5b4fc !important;
}

.DarkMode .home-widget-notifications .notifcard .notifContent .notifTitle {
    color: #eaeaff !important;
}

.DarkMode .home-widget-notifications .notifcard .notifContent .notifShortText {
    color: rgba(234, 234, 255, 0.6) !important;
}

.DarkMode .home-widget-notifications .notifcard .notifContent .notifCat {
    color: #6ee7b7 !important;
    background: rgba(5, 150, 105, 0.18) !important;
}

.DarkMode .home-widget-notifications .notifcard-chevron {
    color: rgba(165, 180, 252, 0.45) !important;
}

.DarkMode .home-widget-notifications .notifcard:hover .notifcard-chevron {
    color: #c4b5fd !important;
}

/******** Processes list (Plugin.Processes List) — dark mode **********/

.DarkMode .search-box {
    background: #383964 !important;
    color: #eaeaff !important;
    border: 1px solid #444460 !important;
}

.DarkMode .search-box:focus {
    border-color: #8b7cff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32) !important;
    outline: none;
}

.DarkMode .search-box::placeholder {
    color: rgba(234, 234, 255, 0.45) !important;
}

.DarkMode .servicecard {
    color: #eaeaff !important;
    background-color: #2a2a4a !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.2), inset 0 0 24px rgba(108, 95, 252, 0.1) !important;
}

.DarkMode .servicecard h3 {
    color: #eaeaff !important;
}

.DarkMode .servicecard p {
    color: rgba(234, 234, 255, 0.62) !important;
}

.DarkMode .servicecard:hover {
    background-color: #6c5ffc !important;
    border-color: rgba(108, 95, 252, 0.45) !important;
    color: #fff !important;
    box-shadow: 0 8px 28px rgba(108, 95, 252, 0.28) !important;
}

.DarkMode .servicecard:hover h3,
.DarkMode .servicecard:hover p {
    color: #fff !important;
}

.DarkMode #ServiceCardHolder > span {
    color: rgba(234, 234, 255, 0.6) !important;
}

.DarkMode #ServiceCardHolder .col-12.px-3 {
    color: #eaeaff !important;
}

.DarkMode #ServiceCardHolder .text-yellow {
    color: #fcd34d !important;
}

.DarkMode .employee-930-contracts-tab .titleHeadBarBlue {
    background: rgba(108, 95, 252, 0.14);
    color: #eaeaff;
}

.DarkMode .employee-930-contracts-tab .table-light {
    --bs-table-bg: #383964;
    --bs-table-color: #eaeaff;
    --bs-table-border-color: rgba(255, 255, 255, 0.12);
}

.DarkMode .employee-930-contracts-tab .tblblazor.table {
    --bs-table-bg: #2a2a4a;
    --bs-table-color: #eaeaff;
    --bs-table-border-color: rgba(255, 255, 255, 0.12);
}

.DarkMode .employee-930-contracts-tab .tblblazor.table tbody tr {
    background-color: #2a2a4a;
}

.DarkMode .employee-930-contracts-tab .tblblazor.table tbody tr:nth-of-type(even) {
    background-color: #383964;
}

@media (max-width: 575.98px) {
    .DarkMode .employee-profile-cu .profile-tab-strip {
        background: #383964 !important;
    }

    .DarkMode .employee-profile-cu .profile-tab-strip .profile-tabs .nav-link {
        background: #383964 !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
        color: #eaeaff !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    }

    .DarkMode .employee-profile-cu .profile-tab-strip .profile-tabs .nav-link i {
        color: #eaeaff !important;
    }

    .DarkMode .employee-profile-cu .profile-tab-strip .profile-tabs .nav-link:hover:not(:disabled) {
        background: #383964 !important;
        border-color: #8b7cff !important;
        color: #b4a8ff !important;
    }

    .DarkMode .employee-profile-cu .profile-tab-strip .profile-tabs .nav-link.active {
        background: rgba(108, 95, 252, 0.18) !important;
        border-color: #8b7cff !important;
        color: #b4a8ff !important;
    }

    .DarkMode .employee-profile-cu .profile-tab-strip .profile-tabs .nav-link.active i {
        color: #b4a8ff !important;
    }

    .DarkMode .employee-profile-cu .profile-tab-strip .profile-tabs .nav-link:disabled {
        background: #2a2a4a !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        color: rgba(234, 234, 255, 0.38) !important;
    }
}

/********workflow setting component********/
.NodeItemSetting {
    position: absolute;
    direction: rtl;
    opacity: 0;
    width: 0;
    height: 0;
    background: var(--white);
    transition: all ease 0.4s;
    border-radius: 5px;
    z-index: 1;
}

    .NodeItemSetting.show {
        opacity: 1 !important;
        width: 250px;
        height: auto;
        box-shadow: 0 0 35px -17px #00000094;
    }

    .NodeItemSetting .NodeItemSettingContent .Settingtitle {
        font-weight: 900;
        text-align: center;
    }

.NodeItemSettingscroll {
    height: 48vh;
    overflow-y: auto;
}

.zoomhint {
    display: inline-block;
    background: var(--lightyellow);
    padding: 0.3rem 0.5rem;
    border-radius: 8px;
    direction: rtl;
}

.iconpicker {
    position: relative;
}

    .iconpicker .preview-container {
        position: absolute;
        background: var(--white);
        top: 39px;
        width: 100%;
        max-height: 210px;
        overflow: auto;
        box-shadow: 0 1px 8px #0000004f;
    }

    .iconpicker .icon-preview {
        width: 25%;
        cursor: pointer;
        display: inline-block;
        font-size: 23px;
        text-align: center;
        padding: 8px;
        border: 1px solid #f2f2f2;
        background: var(--white);
        color: var(--darkblue);
        transition: all ease-in-out 0.3s;
    }

        .iconpicker .icon-preview:hover {
            background: var(--purple);
            color: #fff;
        }

/*-------toggleSwitch---------*/
.toggleSwitch {
    display: inline-block;
    cursor: pointer;
    white-space: nowrap;
    line-height: 0;
    border-radius: 8px;
    box-shadow: 0px 2px 3px #00000026;
}

    .toggleSwitch input {
        display: none;
    }

        .toggleSwitch input:not(:checked) ~ .s1 {
            position: relative;
            padding: 0;
            display: none;
            transition: all linear 0.5s;
        }

        .toggleSwitch input:not(:checked) ~ .s2 {
            position: relative;
            padding: 1rem 0.5rem 1rem 1rem;
            width: auto;
            display: inline-block;
            opacity: 1;
            border-radius: 8px;
            transition: all linear 0.5s;
            animation-name: shakes;
            animation-duration: 0.3s;
        }

    .toggleSwitch .s2::after {
        content: '';
        position: absolute;
        background: linear-gradient(179deg, #ffda6a, #FF9800);
        height: 26px;
        width: 12px;
        border-radius: 5px;
        top: 3px;
        left: -3px;
        box-shadow: 2px 0px 3px #FFC107;
        border: 1px solid #FF9800;
        border-top: 3px solid #d5940d;
        border-right: 2px solid #b77515;
        animation-name: rotates;
        animation-duration: 0.3s;
    }

    .toggleSwitch input:checked ~ .s1 {
        position: relative;
        display: inline-block;
        padding: 1rem 1rem 1rem 0.5rem;
        opacity: 1;
        border-radius: 8px;
        width: auto !important;
        animation-name: shakes;
        animation-duration: 0.3s;
    }

        .toggleSwitch input:checked ~ .s1::after {
            content: '';
            position: absolute;
            background: linear-gradient(179deg, #f3ff7e, #4CAF50);
            height: 26px;
            width: 12px;
            border-radius: 5px;
            top: 3px;
            right: -3px;
            box-shadow: -2px 0px 3px #8BC34A;
            border: 1px solid #8BC34A;
            border-top: 3px solid #83ad52;
            border-left: 2px solid #53801f;
            animation-name: rotates;
            animation-duration: 0.3s;
        }

    .toggleSwitch input:checked ~ .s2 {
        display: none !important;
        width: 0 !important;
        padding: 0 !important;
    }

@keyframes shakes {
    0% {
        transform: translatex(0);
        opacity: 0;
    }

    100% {
        transform: translatex(5px);
        opacity: 1;
    }
}

@keyframes rotates {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.workflowToolsdrop .dropdown-toggle::after {
    display: none;
}

.workflowToolsdrop .dropdown-menu {
    border: none;
    font-size: 15px;
    direction: rtl;
    text-align: right;
    background: var(--white);
    box-shadow: 0px 1px 20px #12183f30;
}

    .workflowToolsdrop .dropdown-menu:after {
        content: "";
        position: absolute;
        z-index: -1;
        width: 1rem;
        height: 1rem;
        top: -0.375rem;
        right: 0.75rem;
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        background: inherit;
        border-radius: 0.125rem;
        border-width: 1px 1px 0 0;
        border-style: solid;
        border-color: var(--white);
        box-shadow: 5px -4px 5px #12183f30;
    }

.workflowToolsdrop .dropdown-item:active {
    background: var(--lightpurple);
    color: var(--purple);
}

.workflowToolsdrop .dropdown-menu h6 {
    font-weight: normal;
    font-size: 14px;
    text-align: center;
    color: var(--darkblue);
}

.workflowToolsdrop .dropdown-menu .dropdown-item {
    font-weight: 300;
    color: var(--darkblue);
}

.workflowToolsdrop .dropdown-item:focus,
.workflowToolsdrop .dropdown-item:hover {
    background: var(--lightpurple);
}

div:where(.swal2-container) div:where(.swal2-popup) {
    border-radius: 20px !important;
    background: var(--white) !important;
    color: var(--darkblue) !important;
}

div:where(.swal2-container) h2:where(.swal2-title) {
    font-size: 1.2rem !important;
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
    background-color: var(--green) !important;
}

    div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:focus {
        box-shadow: 0 0 0 3px #0096886b !important;
    }

div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel {
    background-color: var(--red) !important;
}

    div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel:focus {
        box-shadow: 0 0 0 3px #b20c284f !important;
    }
/*----------indexing----------*/
.IncludesIndices {
    overflow: auto;
    max-height: 250px;
}

.filterbox {
    margin: 1rem 1rem 0.5rem;
    padding: 0.5rem 0.5rem 1rem;
    border-radius: 0.6rem;
    background: linear-gradient(0deg, #ffd79312, #ffd79308);
    border: 1px dashed #dba40080;
}


/*****************dxbl Grid*************************/
.dxbl-grid-table .dxbl-grid-header {
    background: linear-gradient(0deg, #f4f4ff, #ffffff);
    text-align: center;
}

    .dxbl-grid-table .dxbl-grid-header .dxbl-grid-header-content {
        display: block !important;
    }

.dxbl-grid {
    --dxbl-grid-border-color: transparent !important;
    --dxbl-grid-min-width: auto !important;
}

    .dxbl-grid .dxbl-grid-table {
        border: 1px solid #e9edf4 !important;
        width: auto !important;
        text-align: center;
    }

        .dxbl-grid .dxbl-grid-table > thead > tr > th {
            min-width: 100px;
            user-select: none;
        }

.dxbl-grid-sort-asc, .dxbl-grid-sort-desc {
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--yellow);
    align-items: center;
    border-radius: 2px;
}

.dxbl-grid .dxbl-grid-table > tbody > tr > td:first-child,
.dxbl-grid .dxbl-grid-table > thead > tr > th:first-child {
    border-left-width: 1px !important;
}

.btnGridAddData .btnicon {
    overflow: visible !important;
}

.dxbl-grid .dxbl-grid-empty-data {
    text-align: start !important;
}

.dxbl-grid-table .btnclearDP {
    display: none;
}
/***********devX Modal***********/
.dxbl-modal > .dxbl-modal-root {
    transform: translate(100%, 0%); /*for rtl*/
    overflow: unset !important;
}

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-body {
        padding: 0 !important;
    }

.dxbl-modal .dxbl-fl {
    overflow: auto;
    max-height: calc(100vh - 9rem);
    min-height: 300px;
    padding: 1rem;
    font-size: 1rem;
    padding-bottom: 6rem;
}

/*.ModalWidth {
    max-width: 950px !important;
}*/

.dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-header {
    background: linear-gradient(360deg, #f0f8ff, transparent);
    border-bottom: 1px solid #dee2e6 !important;
    font-weight: 900 !important;
    padding: 0.5rem !important;
    font-size: 1.25rem !important;
}

.dxbl-grid-edit-form-buttons {
    text-align: center;
    padding: 1rem !important;
    border-top: 1px solid #eff1f3 !important;
}

.btn-modal-custom {
    position: absolute;
    bottom: 0;
    padding: 0.5rem;
    text-align: center;
    background: #ffffff;
    margin-inline-start: -0.25rem;
    border-radius: 0 0 5px 5px;
    border-top: 1px solid #f1f1f1;
}

.dxbl-scroll-viewer {
    overflow-x: auto !important;
}

.dxbl-scroll-viewer-content {
    display: contents;
}

/*.dxbl-scroll-viewer-hor-scroll-bar {
    display: none !important;
}*/

/********dropdown blazor**********/
.devdrop {
    width: 100%;
    position: relative;
}

.devdrop .dxbl-pager {
    text-align: center !important;
    display: block !important;
    margin-top: 0.5rem;
    --dxbl-pager-active-page-btn-bg: var(--purple);
}

.dxbl-pager .dxbl-btn .dxbl-image {
    transform: rotate(180deg);
}

.devdrop .dropdown-toggle,
.devdrop .dxbl-grid-table {
    text-align: start;
}

    .devdrop .dropdown-toggle::after {
        display: none;
    }

.devdrop .dropdown-menu {
    border: none;
    background: var(--white);
    box-shadow: 0px 1px 20px #12183f30;
    box-sizing: border-box;
    overflow: hidden;
    /* با strategy:fixed سراسری، width:100% نسبت به viewport است؛ عرض در JS از روی toggle ست می‌شود. */
    width: auto;
    min-width: 0;
}

/*
 * دسکتاپ: منوی باز باید بالای پنل/کارت هم‌سطح و داخل مودال دیده شود.
 * بدون z-index روی خود .devdrop، stacking context والد باعث می‌شود منو زیر پنل بعدی برود
 * (حتی اگر .dropdown-menu z-index بالاتری داشته باشد).
 */
@media (min-width: 768px) {
    .devdrop:has(> .dropdown-menu.show) {
        z-index: 1080;
    }

    .devdrop-in-modal:has(> .dropdown-menu.show) {
        z-index: 2000;
    }

    .devdrop .dropdown-menu.show {
        z-index: 1080;
    }

    .devdrop-in-modal .dropdown-menu.show {
        z-index: 2000;
    }

    /*
     * منو با Popper strategy:fixed از overflow:hidden والد خارج می‌شود.
     * عمداً overflow والد را visible نمی‌کنیم — حذف اسکرول‌بار مودال باعث
     * جابه‌جایی toggle و به‌هم‌ریختن موقعیت منو می‌شد.
     */
}

/* موبایل: منوی دراپ‌داون تمام‌صفحه (پوشش Popper و عرض toggle) */
@media (max-width: 767.98px) {
    .devdrop .dropdown-menu.show,
    .devdrop-in-modal .dropdown-menu.show {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
        z-index: 2000 !important;
        overflow: hidden;
    }

    html.devdrop-mobile-open {
        overflow: hidden;
    }
}

    .devdrop .dropdown-menu .dxbl-grid-table tr:hover {
        cursor: pointer;
        background: linear-gradient(270deg, var(--lightpurple), transparent);
    }

.devdrop .dxbl-grid .dxbl-grid-table {
    width: 100% !important;
}

    /*.devdrop .dxbl-grid-header-row {
    display: none;
}*/

    .devdrop .dxbl-grid .dxbl-grid-table > tbody > tr > td {
        font-size: 0.92rem;
    }

.devdrop .dxbl-pager .dxbl-btn {
    border-radius: 5px !important;
}

.devdrop .dxbl-scroll-viewer > .dxbl-scroll-viewer-content {
    max-height: 250px;
    padding-inline-start: 0.5rem;
}

/* فیلدهای غیرفعال — نشانگر و ظاهر روشن‌تر از پیش‌فرض بوت‌استرپ */
.form-control:disabled,
.form-select:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    cursor: no-drop;
    background-color: #f8f9fa;
    color: #495057;
    border-color: #e9ecef;
    opacity: 1;
}

/* دکمهٔ toggle کلاس form-select دارد ولی <select> نیست؛ استایل disabled بوت‌استرپ خودکار اعمال نمی‌شود */
.devdrop.devdrop--disabled .dropdown-toggle,
.devdrop .dropdown-toggle.form-select:disabled,
.devdrop .dropdown-toggle:disabled {
    background-color: #f8f9fa;
    color: #495057;
    border-color: #e9ecef;
    opacity: 1;
    cursor: no-drop;
    box-shadow: none;
}

.devdrop.devdrop--disabled > label {
    color: #6c757d;
}

.devdrop.devdrop--disabled .btnclearDP,
.devdrop.devdrop--disabled .btnaddDP {
    display: none;
}

/******** dropdown devdrop — dark mode **********/

.DarkMode .devdrop > label {
    color: rgba(234, 234, 255, 0.65);
}

.DarkMode .devdrop:not(.devdrop--disabled) .dropdown-toggle.form-select,
.DarkMode .devdrop:not(.devdrop--disabled) .dropdown-toggle {
    background-color: #383964 !important;
    border-color: #444460 !important;
    color: #eaeaff !important;
}

.DarkMode .devdrop.devdrop--disabled .dropdown-toggle,
.DarkMode .devdrop .dropdown-toggle.form-select:disabled,
.DarkMode .devdrop .dropdown-toggle:disabled,
.DarkMode .devdrop .dropdown-toggle[aria-disabled="true"] {
    background-color: #2f3058 !important;
    border-color: #444460 !important;
    color: rgba(234, 234, 255, 0.72) !important;
    opacity: 1 !important;
    cursor: no-drop;
    box-shadow: none;
}

.DarkMode .devdrop.devdrop--disabled > label {
    color: rgba(234, 234, 255, 0.45);
}

.DarkMode .devdrop .dropdown-menu {
    background: #2a2a4a !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    color: #eaeaff;
}

.DarkMode .devdrop .devdrop-menu__sheet-title {
    color: #eaeaff;
}

.DarkMode .devdrop .devdrop-menu__sheet-close {
    background: #383964;
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(234, 234, 255, 0.85);
}

.DarkMode .devdrop .devdrop-menu__sheet-close:hover,
.DarkMode .devdrop .devdrop-menu__sheet-close:focus-visible {
    background: rgba(108, 95, 252, 0.22);
    color: #eaeaff;
}

.DarkMode .devdrop .devdrop-menu__sheet-header {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.DarkMode .devdrop .dropdown-menu .form-control,
.DarkMode .devdrop .dropdown-menu input.form-control {
    background-color: #383964 !important;
    border-color: #444460 !important;
    color: #eaeaff !important;
}

.DarkMode .devdrop .dropdown-menu .table {
    --bs-table-bg: #2a2a4a;
    --bs-table-color: #eaeaff;
    --bs-table-border-color: rgba(255, 255, 255, 0.12);
    --bs-table-hover-bg: rgba(108, 95, 252, 0.14);
}

.DarkMode .devdrop .dropdown-menu .table thead th {
    background: #383964;
    color: #eaeaff;
    border-color: rgba(255, 255, 255, 0.12);
}

.DarkMode .devdrop .dropdown-menu .table tbody td {
    border-color: rgba(255, 255, 255, 0.1);
    color: #eaeaff;
}

.DarkMode .devdrop .dropdown-menu .table-purple {
    --bs-table-bg: rgba(108, 95, 252, 0.22);
    --bs-table-border-color: rgba(255, 255, 255, 0.14);
    --bs-table-striped-bg: rgba(108, 95, 252, 0.22);
    --bs-table-active-bg: rgba(108, 95, 252, 0.28);
    --bs-table-hover-bg: rgba(108, 95, 252, 0.28);
    border-color: rgba(255, 255, 255, 0.14);
    color: #eaeaff;
}

.DarkMode .devdrop .dropdown-menu .dxbl-grid-table tr:hover {
    background: linear-gradient(270deg, rgba(108, 95, 252, 0.2), transparent) !important;
}

.DarkMode .devdrop .dxbl-pager {
    --dxbl-pager-active-page-btn-bg: #6c5ffc;
}

.DarkMode .devdrop .devdrop-menu__grid .pagination {
    background: linear-gradient(180deg, #323456 0%, #2c2e4c 100%);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.DarkMode .devdrop .devdrop-menu__grid .pagination .page-link {
    color: rgba(234, 234, 255, 0.82);
}

.DarkMode .devdrop .devdrop-menu__grid .pagination .page-item.active .page-link {
    background: #8b7cff;
    color: #fff;
    box-shadow: 0 2px 8px rgba(108, 95, 252, 0.35);
}

.DarkMode .devdrop .devdrop-menu__grid .pagination .page-link:hover {
    background: rgba(108, 95, 252, 0.18);
    color: #eaeaff;
}

.DarkMode .devdrop .devdrop-menu__grid .pagination .page-item.disabled .page-link {
    color: rgba(234, 234, 255, 0.35);
}

.DarkMode .devdrop .devdrop-menu__grid .pagination .page-item:nth-last-child(3) .page-link,
.DarkMode .devdrop .devdrop-menu__grid .pagination .page-item:nth-last-child(2) .page-link {
    background: #383964;
    border-color: rgba(255, 255, 255, 0.14);
}

.DarkMode .devdrop .devdrop-menu__grid {
    scrollbar-color: rgba(139, 124, 255, 0.45) transparent;
}

.DarkMode .form-control:disabled,
.DarkMode .form-select:disabled,
.DarkMode input.form-control:disabled,
.DarkMode input:disabled,
.DarkMode textarea:disabled,
.DarkMode select:disabled {
    background-color: #2f3058 !important;
    color: rgba(234, 234, 255, 0.72) !important;
    border-color: #444460 !important;
    opacity: 1 !important;
    cursor: no-drop;
}

/******** BayaFileUploader (bfu) — dark mode **********/

.DarkMode .bfu__empty-cta {
    color: #93c5fd !important;
}

.DarkMode .bfu__meta-short {
    color: rgba(234, 234, 255, 0.55);
}

@media (max-width: 575.98px) {
    .DarkMode .bfu:not(.bfu--preview-only) .bfu__layout {
        background: #2a2a4a !important;
        border-color: rgba(255, 255, 255, 0.18) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22) !important;
    }

    .DarkMode .bfu--has-file:not(.bfu--preview-only) .bfu__layout {
        background: #32325a !important;
        border-color: rgba(52, 211, 153, 0.35) !important;
    }

    .DarkMode .bfu:not(.bfu--preview-only) .bfu__preview-zone {
        background: #2f3058 !important;
        border-inline-end-color: rgba(255, 255, 255, 0.12) !important;
    }

    .DarkMode .bfu--has-file:not(.bfu--preview-only) .bfu__preview-zone {
        background: rgba(16, 185, 129, 0.12) !important;
    }

    .DarkMode .bfu:not(.bfu--preview-only):not(.bfu--has-file) .bfu__btn--primary {
        background: #3b82f6 !important;
        border-color: #3b82f6 !important;
        color: #fff !important;
    }

    .DarkMode .bfu--stacked.bfu:not(.bfu--preview-only) .bfu__layout {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}

.DarkMode .bfu__label {
    color: rgba(234, 234, 255, 0.65) !important;
}

.DarkMode .bfu__preview-zone {
    background: #2f3058 !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22) !important;
}

.DarkMode .bfu__preview-zone--attached {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    border-style: solid !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24) !important;
}

.DarkMode .bfu--has-file .bfu__preview-zone {
    border-color: rgba(108, 95, 252, 0.32) !important;
}

.DarkMode .bfu__preview-zone--disabled {
    opacity: 0.55;
    background: #2a2a4a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.DarkMode .bfu__preview-zone--clickable:hover:not(.bfu__preview-zone--disabled) {
    border-color: rgba(139, 124, 255, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(108, 95, 252, 0.18) !important;
}

.DarkMode .bfu__empty {
    color: rgba(234, 234, 255, 0.55) !important;
}

.DarkMode .bfu__empty-icon {
    color: rgba(234, 234, 255, 0.45) !important;
}

.DarkMode .bfu__empty-text {
    color: rgba(234, 234, 255, 0.55) !important;
}

.DarkMode .bfu__file-chip {
    background: rgba(5, 150, 105, 0.18) !important;
    color: #6ee7b7 !important;
}

.DarkMode .bfu__file-chip-icon {
    color: #6ee7b7 !important;
}

.DarkMode .bfu__file-chip-text {
    color: #6ee7b7 !important;
}

.DarkMode .bfu__preview-btn:focus-visible {
    outline-color: #8b7cff;
}

.DarkMode .bfu__preview-overlay {
    background: rgba(15, 23, 42, 0.62);
    color: #fff;
}

.DarkMode .bfu__loading {
    background: rgba(42, 42, 74, 0.9);
    color: #93c5fd;
}

.DarkMode .bfu__spinner {
    border-color: rgba(147, 197, 253, 0.25);
    border-top-color: #93c5fd;
}

.DarkMode .bfu__meta {
    color: rgba(234, 234, 255, 0.65);
}

.DarkMode .bfu__meta--success {
    color: #6ee7b7;
}

.DarkMode .bfu__btn--primary {
    background: rgba(108, 95, 252, 0.18) !important;
    color: #b4a8ff !important;
    border-color: rgba(108, 95, 252, 0.35) !important;
}

.DarkMode .bfu__btn--primary:hover:not(:disabled) {
    background: #6c5ffc !important;
    color: #fff !important;
    border-color: #6c5ffc !important;
}

.DarkMode .bfu__btn--primary:disabled {
    background: rgba(108, 95, 252, 0.1) !important;
    color: rgba(234, 234, 255, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    opacity: 1 !important;
}

.DarkMode .bfu__btn--ghost {
    background: #383964 !important;
    color: rgba(234, 234, 255, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

.DarkMode .bfu__btn--ghost:hover:not(:disabled) {
    background: #3f4070 !important;
    color: #eaeaff !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

.DarkMode .bfu__btn--view {
    background: rgba(14, 165, 233, 0.14) !important;
    color: #7dd3fc !important;
    border-color: rgba(125, 211, 252, 0.25) !important;
}

.DarkMode .bfu__btn--view:hover:not(:disabled) {
    background: #0ea5e9 !important;
    color: #fff !important;
    border-color: #0ea5e9 !important;
}

.DarkMode .bfu__btn--download {
    background: rgba(245, 158, 11, 0.14) !important;
    color: #fcd34d !important;
    border-color: rgba(252, 211, 77, 0.25) !important;
}

.DarkMode .bfu__btn--download:hover:not(:disabled) {
    background: #f59e0b !important;
    color: #fff !important;
    border-color: #f59e0b !important;
}

.DarkMode .bfu__btn--danger {
    background: rgba(220, 38, 38, 0.16) !important;
    color: #fca5a5 !important;
    border-color: rgba(252, 165, 165, 0.22) !important;
}

.DarkMode .bfu__btn--danger:hover:not(:disabled) {
    background: #dc2626 !important;
    color: #fff !important;
    border-color: #dc2626 !important;
}

.DarkMode .bfu__error {
    background: rgba(220, 38, 38, 0.14);
    border-color: rgba(252, 165, 165, 0.2);
    color: #fca5a5;
}

.DarkMode .employee-profile-cu .profile-hero-photo .bfu__btn--primary {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

.DarkMode .employee-profile-cu .profile-hero-photo .bfu__btn--primary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: #fff !important;
    color: #fff !important;
}

.DarkMode .employee-profile-cu .profile-hero-photo .bfu__btn--view {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

.DarkMode .employee-profile-cu .profile-hero-photo .bfu__btn--view:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: #fff !important;
    color: #fff !important;
}

.DarkMode .employee-profile-cu .profile-hero-photo .bfu__btn--danger {
    background: rgba(220, 38, 38, 0.25) !important;
    color: #fecaca !important;
    border-color: rgba(254, 202, 202, 0.35) !important;
}

.DarkMode .employee-profile-cu .profile-hero-photo .bfu__btn--danger:hover:not(:disabled) {
    background: #dc2626 !important;
    color: #fff !important;
    border-color: #dc2626 !important;
}

.DarkMode .employee-profile-cu .profile-hero-photo .bfu__meta {
    color: rgba(255, 255, 255, 0.78);
}

.DarkMode .employee-profile-cu .profile-hero-photo .bfu__meta--success {
    color: #a7f3d0;
}

.DarkMode .employee-profile-cu .profile-hero-photo .bfu__preview-zone,
.DarkMode .employee-profile-cu .profile-hero-photo .bfu__preview-zone--attached,
.DarkMode .employee-profile-cu .profile-hero-photo .bfu__empty {
    border-color: rgba(255, 255, 255, 0.55) !important;
    background: rgba(0, 0, 0, 0.18) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
}

.DarkMode .work-experience-file-card .bfu__preview-zone,
.DarkMode .work-experience-file-card .bfu__preview-zone--attached,
.DarkMode .document-fields .bfu__preview-zone,
.DarkMode .document-fields .bfu__preview-zone--attached,
.DarkMode .family-att-fields .bfu__preview-zone,
.DarkMode .family-att-fields .bfu__preview-zone--attached {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22) !important;
}

.DarkMode .work-experience-file-card .bfu__label {
    color: rgba(234, 234, 255, 0.65) !important;
}

.DarkMode .work-experience-file-card .bfu__file-chip {
    background: rgba(5, 150, 105, 0.18) !important;
    color: #6ee7b7 !important;
}

.DarkMode .work-experience-file-card .bfu__file-chip-icon {
    color: #6ee7b7 !important;
}


.MessageText .MessageTitle {
    text-align: justify;
    transition: all ease-in-out 0.2s;
}

.MessageText:hover {
    cursor: pointer;
    color: var(--purple);
    font-weight: normal;
}

text, tspan {
    white-space: normal;
}

.messageWidgetitem:hover {
    cursor: pointer;
    background: linear-gradient(270deg, var(--lightpurple), transparent);
}

/************message badge*************/
.numberbadge {
    position: absolute;
    top: -3px;
    inset-inline-start: -7px;
    background: red;
    border-radius: 100px;
    height: 17px;
    padding: 5px;
    font-size: 11px;
    line-height: 8px;
    color: #fff;
    min-width: 17px;
    box-shadow: 0 2px 6px #ff0000eb;
}

/***********Blazore Table**************/
.tblblazor thead[role=search] {
    border-top-color: transparent !important;
}

.tblblazor .float-right {
    float: right;
}

.tblblazor th a {
    color: var(--green) !important;
    cursor: pointer;
}

.tblblazor thead[role=search] input[type=text] {
    height: 40px !important;
    margin: 0.25rem 0;
    border-radius: var(--bs-border-radius) !important;
    background: var(--white);
}

.tblblazor .popover {
    background: var(--white);
    border-radius: 0.6rem;
    box-shadow: 0px 1px 20px #12183f30;
    border: none;
    font-family: IY !important;
}

    .tblblazor .popover .arrow {
        position: absolute;
        left: 46% !important;
        background: #f5f5f5;
        z-index: -1;
        width: 1rem;
        height: 1rem;
        top: -0.375rem;
        -webkit-transform: rotate(-45deg) !important;
        -ms-transform: rotate(-45deg) !important;
        transform: rotate(-45deg) !important;
    }

    .tblblazor .popover .popover-header {
        background: #f5f5f5;
        border-bottom-color: transparent;
        text-align: center;
    }

    .tblblazor .popover .popover-body select {
        margin-bottom: 0.25rem;
    }

    .tblblazor .popover .popover-body hr {
        border-color: #e1e1e1;
        border-style: dashed;
        opacity: 1;
        margin: 0.5rem 0;
    }

.pagination .page-item:last-child .page-link,
.pagination .page-item select {
    border-radius: 0;
}

.pagination .page-link {
    color: var(--purple);
}

.pagination .page-item.disabled .page-link {
    color: var(--darkblue);
}


/******pagination myrequest page******/
.paginationarea {
    text-align: center;
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}

    .paginationarea .pager-link {
        border: none;
        cursor: pointer;
        border-radius: 0.6rem;
        text-decoration: none;
        color: var(--purple);
        padding: 0.25rem 0.75rem;
    }

        .paginationarea .pager-link.active {
            border: none;
            border-radius: 0.6rem;
            background: var(--lightpurple);
            color: var(--purple);
            padding: 0.25rem 0.75rem;
            font-weight: normal;
        }

        .paginationarea .pager-link:hover {
            background: linear-gradient(to bottom, #585858 0%, #111 100%);
            color: #fff !important;
        }

        .paginationarea .pager-link.disabled {
            color: #bababa !important;
            pointer-events: none;
        }

/***************Leave Form***********************/
.TrafficPermitHolder {
    border: 1px dashed #9fb9e3;
    border-radius: 0.6rem;
    background: #005aff0d !important;
}

    .TrafficPermitHolder .form-control {
        border: none;
    }

        .TrafficPermitHolder .form-control:disabled {
            background-color: #e6efff;
        }

.LeaveRadio,
.OvertimeRadio {
    background: var(--white);
    padding: 0 0 1rem 0;
}

    .LeaveRadio .radiodiv .form-check-label,
    .OvertimeRadio .radiodiv .form-check-label {
        margin: 0 0.25rem;
        display: block;
        opacity: 0.5;
        padding: 1rem;
        border-radius: 25px;
        cursor: pointer;
        font-weight: 900;
    }

    .LeaveRadio .radiodiv input[type="radio"],
    .OvertimeRadio .radiodiv input[type="radio"] {
        position: absolute;
        opacity: 0;
    }

    .LeaveRadio .radiodiv .radioselected,
    .OvertimeRadio .radiodiv .radioselected {
        background: #d1ffed;
        color: black;
        opacity: 1;
        -webkit-transition: ease-in 0.3s;
        -o-transition: ease-in 0.3s;
        transition: ease-in 0.3s;
    }

    .LeaveRadio > div > :first-child span:before {
        content: url('../img/clock.svg') !important;
        width: 75px;
        display: block;
        margin: auto;
    }

    .LeaveRadio > div > :nth-child(2) span:before {
        content: url('../img/sun.svg');
        width: 75px;
        display: block;
        margin: auto;
    }

    .OvertimeRadio > div > :first-child span:before {
        content: url('../img/workday.svg') !important;
        width: 75px;
        display: block;
        margin: auto;
    }

    .OvertimeRadio > div > :nth-child(2) span:before {
        content: url('../img/holiday.svg');
        width: 75px;
        display: block;
        margin: auto;
    }

/*برای اینکه اگر فیلد مقدار نداشت بکگراند بده بهش*/
.bgHasValue input:not([value=""]) {
    background: var(--green);
    color: #fff
}

/*********** تنظیمات سفارشی کارتابل *************/
.CartableNoHeader .CartableHeader {
    display: none;
}

.CartableHeader {
    margin-top: 0.75rem;
}

    .CartableHeader .CartableTitleBox {
        padding: 0.75rem 0.5rem;
        margin: 0;
        background: var(--purple);
        border-radius: 0.5rem;
        color: white;
        font-weight: 900;
        align-items: center;
        text-shadow: 0 1px black;
    }

.cartableInModal .CartableHeader {
    margin-top: 0.5rem !important;
}

    .cartableInModal .CartableHeader .CartableTitleBox {
        padding: 0.25rem !important;
    }

/*************Grid Skeleton Loader*****************/
.table .TdLoading {
    position: relative;
}

@keyframes loadingbar {
    to {
        background-position-x: -200%;
    }
}

.table .TdLoading {
    padding: 10px 0;
    min-width: 150px;
}

.graybar {
    min-height: 14px;
    width: 80%;
    margin: auto;
    position: relative;
}

    .graybar:after {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        content: "";
        border-radius: 9px;
        display: block;
        background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
        background-size: 200% 100%;
        animation: loadingbar 1.5s linear infinite;
    }

/**************Form Listi*******************/

.dropdown-toggle {
    outline: 0;
}

.filterArea .dropdown-toggle::after {
    display: none;
}

.filterdrop .dropdown-menu {
    border: none;
    font-size: 15px;
    padding: 0.75rem;
    direction: rtl;
    text-align: right;
    background: white;
    box-shadow: 0px 1px 20px #12183f30;
}

    .filterdrop .dropdown-menu:after {
        content: "";
        position: absolute;
        z-index: -1;
        width: 1rem;
        height: 1rem;
        top: -0.375rem;
        right: 0.75rem;
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        background: inherit;
        border-radius: 0.125rem;
        border-width: 1px 1px 0 0;
        border-style: solid;
        border-color: white;
        box-shadow: 5px -4px 5px #12183f30;
    }

.gridArea .dxbl-scroll-viewer-content {
    max-height: calc(100vh - 10rem);
}

.dxbl-grid .dxbl-grid-table .dxbl-grid-focused-row:not(.dxbl-grid-touch-selection):not(.dxbl-grid-touch-selection-edge) > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell)::before {
    background: #dad8ff4a !important;
}

.gridArea .dxbl-pager {
    --dxbl-pager-active-page-btn-bg: #6c5ffc !important;
    display: table;
    margin: 1rem auto 0;
}

.formListi .detailArea .form-control {
    min-height: calc(1.5em + .5rem + calc(var(--bs-border-width)* 2));
    padding: .25rem .5rem;
    font-size: .875rem;
    border-radius: var(--bs-border-radius-sm);
}

.formListi .detailArea .form-select {
    padding-top: .25rem;
    padding-bottom: .25rem;
    padding-left: .5rem;
    font-size: .875rem;
    border-radius: var(--bs-border-radius-sm);
}

.formListi .detailArea label {
    font-size: 13px;
}

.detailArea form div:not(.devdrop) {
    margin-top: .75rem;
}
/**************Form Listi*******************/
/*****************Blazored Modal*****************/
.bm-container {
    overflow: hidden !important;
}

.blazored-modal {
    padding: 0 !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 10px !important;
    background: var(--white) !important;
}

    .blazored-modal .bm-content {
        padding: 0.5rem !important;
        border-radius: 0 0 10px 10px;
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
    }

    .blazored-modal .bm-header {
        background: linear-gradient(360deg, #f0f8ff, transparent);
        border-bottom: 1px solid #dee2e6;
        padding: 0.2rem 0.75rem !important;
        align-items: baseline !important;
        border-radius: 10px 10px 0 0;
        justify-content: end !important;
    }

        .blazored-modal .bm-header:has(.bm-title) {
            justify-content: space-between !important;
        }

        .blazored-modal .bm-header .bm-title {
            font-weight: 900;
            font-size: 1rem !important;
        }

        .blazored-modal .bm-header .bm-close {
            margin: 0 !important;
            margin-inline-start: auto;
            padding: 0 !important;
            color: var(--darkblue);
        }

    .blazored-modal.size-fullscreen {
        width: 100vw;
        max-width: none;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* مودال مشخصات کارمند (Form_930_Employee_CU) — بزرگ‌تر از ExtraLarge پیش‌فرض */
    .blazored-modal.size-employee-cu {
        width: min(96vw, 1280px);
        max-width: 96vw;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* مودال wizard ایجاد حکم کارگزینی (Form_CreateVerdict) */
    .blazored-modal.size-create-verdict {
        width: min(98vw, 1400px);
        max-width: 98vw;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .blazored-modal.size-create-verdict .bm-content {
        max-height: calc(100vh - 4rem);
    }

    /* مودال‌های ثبت مجوز — کاردکس تردد */
    .blazored-modal.size-traffic-cardex-leave,
    .blazored-modal.size-traffic-cardex-overtime,
    .blazored-modal.size-traffic-cardex-assignment {
        width: min(96vw, 520px);
        max-width: 96vw;
        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 40px rgba(13, 26, 82, 0.12) !important;
    }

    .blazored-modal.size-traffic-cardex-leave .bm-header,
    .blazored-modal.size-traffic-cardex-overtime .bm-header,
    .blazored-modal.size-traffic-cardex-assignment .bm-header {
        display: none !important;
    }

    .blazored-modal.size-traffic-cardex-leave .bm-content,
    .blazored-modal.size-traffic-cardex-overtime .bm-content,
    .blazored-modal.size-traffic-cardex-assignment .bm-content {
        padding: 1.25rem 1.35rem 1.35rem !important;
        border-radius: 16px !important;
    }

/* موبایل: مودال‌های Blazored تمام‌ارتفاع صفحه */
@media (max-width: 767.98px) {
    .bm-container {
        padding: 0 !important;
    }

    .blazored-modal {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        max-height: 100% !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border-inline: none !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .blazored-modal .bm-header {
        border-radius: 0 !important;
        flex-shrink: 0;
    }

    .blazored-modal .bm-content {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none !important;
        height: auto;
        overflow-y: auto;
        border-radius: 0 !important;
    }

    .blazored-modal.size-small,
    .blazored-modal.size-medium,
    .blazored-modal.size-large,
    .blazored-modal.size-extra-large,
    .blazored-modal.size-fullscreen,
    .blazored-modal.size-employee-cu,
    .blazored-modal.size-create-verdict,
    .blazored-modal.size-traffic-cardex-leave,
    .blazored-modal.size-traffic-cardex-overtime,
    .blazored-modal.size-traffic-cardex-assignment {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 0 !important;
    }

    .blazored-modal.size-create-verdict .bm-content {
        max-height: none !important;
    }

    .blazored-modal.size-traffic-cardex-leave,
    .blazored-modal.size-traffic-cardex-overtime,
    .blazored-modal.size-traffic-cardex-assignment {
        box-shadow: none !important;
    }

    .blazored-modal.size-traffic-cardex-leave .bm-content,
    .blazored-modal.size-traffic-cardex-overtime .bm-content,
    .blazored-modal.size-traffic-cardex-assignment .bm-content {
        border-radius: 0 !important;
        height: 100%;
    }
}

@media (min-width: 1500px) {
    .blazored-modal.size-fullscreen {
        width: 1400px;
    }

    .blazored-modal.size-employee-cu {
        width: 1280px;
    }

    .blazored-modal.size-create-verdict {
        width: 1400px;
    }
}

@media (min-width: 1850px) {
    .blazored-modal.size-fullscreen {
        width: 1650px;
    }
}

/* CRS — confirmation modals (Blazored) */
.blazored-modal .crs-modal-confirm {
    text-align: center;
    padding: 0.35rem 0.25rem 0.2rem;
}

.blazored-modal .crs-modal-confirm__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 0.85rem;
    border-radius: 50%;
    font-size: 1.35rem;
    border: 1px solid transparent;
    box-shadow: 0 4px 14px rgba(13, 26, 82, 0.08);
}

.blazored-modal .crs-modal-confirm__icon--choice {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    color: #7c3aed;
    border-color: #ddd6fe;
}

.blazored-modal .crs-modal-confirm__icon--warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    color: #b45309;
    border-color: #fde68a;
}

.blazored-modal .crs-modal-confirm__icon--danger {
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
    color: #dc2626;
    border-color: #fecdd3;
}

.blazored-modal .crs-modal-confirm__icon--route {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #2563eb;
    border-color: #bfdbfe;
}

.blazored-modal .crs-modal-confirm__message {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #0f172a;
    margin-bottom: 0.85rem;
}

.blazored-modal .crs-modal-confirm__meta {
    display: inline-block;
    text-align: start;
    margin: 0 auto 0.85rem;
    padding: 0.55rem 0.75rem;
    list-style: none;
    background: #f8fafc;
    border: 1px solid #e8ecf4;
    border-radius: 0.5rem;
    font-size: 0.82rem;
    color: #64748b;
}

.blazored-modal .crs-modal-confirm__meta li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
}

.blazored-modal .crs-modal-confirm__meta li + li {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid #eef2f7;
}

.blazored-modal .crs-modal-confirm__meta-label {
    color: #94a3b8;
    font-weight: 600;
    white-space: nowrap;
}

.blazored-modal .crs-modal-confirm__code {
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
    background: #f4f4ff;
    color: #0d1a52;
    font-size: 0.78rem;
}

.blazored-modal .crs-modal-confirm__alert {
    margin-bottom: 0.75rem;
    padding: 0.45rem 0.65rem;
    border-radius: 0.45rem;
    font-size: 0.82rem;
    line-height: 1.55;
    text-align: start;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.blazored-modal .crs-modal-confirm__hint {
    margin-bottom: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #94a3b8;
}

.blazored-modal .crs-modal-confirm__options {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 0.85rem;
    text-align: start;
}

.blazored-modal .crs-modal-confirm__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid #e8ecf4;
    border-radius: 0.55rem;
    background: #fff;
    color: #334155;
    font-size: 0.84rem;
    line-height: 1.45;
    text-align: start;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.blazored-modal .crs-modal-confirm__option:hover {
    border-color: #c7d2fe;
    background: #fafaff;
}

.blazored-modal .crs-modal-confirm__option.is-selected {
    border-color: #7c3aed;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(99, 102, 241, 0.06) 100%);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
    color: #5b21b6;
    font-weight: 600;
}

.blazored-modal .crs-modal-confirm__option-check {
    color: #7c3aed;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.blazored-modal .crs-modal-confirm__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.15rem;
}

.blazored-modal .crs-modal-confirm__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.45rem 1.15rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 650;
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.blazored-modal .crs-modal-confirm__btn--confirm {
    color: #fff;
}

.blazored-modal .crs-modal-confirm__btn--confirm:hover:not(:disabled) {
    transform: translateY(-1px);
}

.blazored-modal .crs-modal-confirm__btn--confirm:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.blazored-modal .crs-modal-confirm__btn--primary {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.28);
}

.blazored-modal .crs-modal-confirm__btn--warning {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    box-shadow: 0 2px 10px rgba(217, 119, 6, 0.28);
}

.blazored-modal .crs-modal-confirm__btn--danger {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.28);
}

.blazored-modal .crs-modal-confirm__btn--cancel {
    color: #475569;
    background: #fff;
    border: 1px solid #e8ecf4;
}

.blazored-modal .crs-modal-confirm__btn--cancel:hover {
    background: #f8fafc;
}

/* Blazored Modal — dark mode (after light rules for cascade) */
.DarkMode .blazored-modal {
    background: #2a2a4a !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.DarkMode .blazored-modal .bm-header {
    background: linear-gradient(360deg, #3f4070 0%, #2a2a4a 100%) !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
    color: #eaeaff !important;
}

.DarkMode .blazored-modal .bm-header .bm-title {
    color: #eaeaff !important;
}

.DarkMode .blazored-modal .bm-header .bm-close {
    color: #eaeaff !important;
    opacity: 0.85;
}

.DarkMode .blazored-modal .bm-header .bm-close:hover {
    color: #fff !important;
    opacity: 1;
}

.DarkMode .blazored-modal .bm-content {
    background: #2a2a4a !important;
    color: #eaeaff !important;
}

/* Form 930 — delete confirm modal (dark mode) */
.DarkMode .blazored-modal .baya-delete-confirm__icon {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.22) 0%, rgba(248, 113, 113, 0.12) 100%) !important;
    color: #fca5a5 !important;
    border-color: rgba(248, 113, 113, 0.35) !important;
}

.DarkMode .blazored-modal .baya-delete-confirm__lead {
    color: rgba(234, 234, 255, 0.88) !important;
}

.DarkMode .blazored-modal .baya-delete-confirm__item {
    color: #eaeaff !important;
}

.DarkMode .blazored-modal .baya-delete-confirm__meta,
.DarkMode .blazored-modal .baya-delete-confirm .text-muted {
    color: rgba(234, 234, 255, 0.55) !important;
}

.DarkMode .blazored-modal .baya-delete-confirm__hint {
    color: rgba(234, 234, 255, 0.5) !important;
}

.DarkMode .blazored-modal .baya-delete-confirm .alert-warning {
    background: rgba(245, 158, 11, 0.14) !important;
    border-color: rgba(251, 191, 36, 0.35) !important;
    color: #fcd34d !important;
}

.DarkMode .blazored-modal .baya-delete-confirm__actions .btn-danger {
    background: #dc2626 !important;
    border-color: #b91c1c !important;
    color: #fff !important;
}

.DarkMode .blazored-modal .baya-delete-confirm__actions .btn-danger:hover {
    background: #b91c1c !important;
    border-color: #991b1b !important;
}

.DarkMode .blazored-modal .baya-delete-confirm__actions .btn-outline-secondary {
    color: #eaeaff !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    background: transparent !important;
}

.DarkMode .blazored-modal .baya-delete-confirm__actions .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #eaeaff !important;
}

/* CRS — confirmation modals (dark mode) */
.DarkMode .blazored-modal .crs-modal-confirm__icon--choice {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.22) 0%, rgba(139, 92, 246, 0.12) 100%) !important;
    color: #c4b5fd !important;
    border-color: rgba(167, 139, 250, 0.35) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.DarkMode .blazored-modal .crs-modal-confirm__icon--warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(251, 191, 36, 0.12) 100%) !important;
    color: #fcd34d !important;
    border-color: rgba(251, 191, 36, 0.35) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.DarkMode .blazored-modal .crs-modal-confirm__icon--danger {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.22) 0%, rgba(248, 113, 113, 0.12) 100%) !important;
    color: #fca5a5 !important;
    border-color: rgba(248, 113, 113, 0.35) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.DarkMode .blazored-modal .crs-modal-confirm__icon--route {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.22) 0%, rgba(96, 165, 250, 0.12) 100%) !important;
    color: #93c5fd !important;
    border-color: rgba(147, 197, 253, 0.35) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.DarkMode .blazored-modal .crs-modal-confirm__message {
    color: rgba(234, 234, 255, 0.88) !important;
}

.DarkMode .blazored-modal .crs-modal-confirm__message strong {
    color: #eaeaff !important;
}

.DarkMode .blazored-modal .crs-modal-confirm__meta {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(234, 234, 255, 0.72) !important;
}

.DarkMode .blazored-modal .crs-modal-confirm__meta li + li {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

.DarkMode .blazored-modal .crs-modal-confirm__meta-label {
    color: rgba(234, 234, 255, 0.55) !important;
}

.DarkMode .blazored-modal .crs-modal-confirm__code {
    background: rgba(108, 95, 252, 0.14) !important;
    color: #d4ccff !important;
}

.DarkMode .blazored-modal .crs-modal-confirm__alert {
    background: rgba(245, 158, 11, 0.14) !important;
    border-color: rgba(251, 191, 36, 0.35) !important;
    color: #fcd34d !important;
}

.DarkMode .blazored-modal .crs-modal-confirm__hint {
    color: rgba(234, 234, 255, 0.5) !important;
}

.DarkMode .blazored-modal .crs-modal-confirm__option {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #eaeaff !important;
}

.DarkMode .blazored-modal .crs-modal-confirm__option:hover {
    background: #2f3058 !important;
    border-color: rgba(167, 139, 250, 0.35) !important;
}

.DarkMode .blazored-modal .crs-modal-confirm__option.is-selected {
    background: rgba(124, 58, 237, 0.18) !important;
    border-color: rgba(167, 139, 250, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important;
    color: #c4b5fd !important;
}

.DarkMode .blazored-modal .crs-modal-confirm__option-check {
    color: #c4b5fd !important;
}

.DarkMode .blazored-modal .crs-modal-confirm__btn--primary {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
    color: #fff !important;
}

.DarkMode .blazored-modal .crs-modal-confirm__btn--warning {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    color: #fff !important;
}

.DarkMode .blazored-modal .crs-modal-confirm__btn--danger {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    color: #fff !important;
}

.DarkMode .blazored-modal .crs-modal-confirm__btn--cancel {
    color: #eaeaff !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

.DarkMode .blazored-modal .crs-modal-confirm__btn--cancel:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #eaeaff !important;
}

/*****************Blazored Modal*****************/

/*grid system for editgrid devExpress*/
@media (min-width: 576px) {
    .Gsyscol:has(.Gcol-sm) {
        -webkit-box-flex: 1;
        -webkit-flex: 1 0 0;
        -ms-flex: 1 0 0px;
        flex: 1 0 0
    }

    .Gsyscol:has(.Gcol-sm-1) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 8.3333333333%
    }

    .Gsyscol:has(.Gcol-sm-2) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .Gsyscol:has(.Gcol-sm-3) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%
    }

    .Gsyscol:has(.Gcol-sm-4) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .Gsyscol:has(.Gcol-sm-5) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 41.6666666667%
    }

    .Gsyscol:has(.Gcol-sm-6) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%
    }

    .Gsyscol:has(.Gcol-sm-7) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 58.3333333333%
    }

    .Gsyscol:has(.Gcol-sm-8) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 66.6666666667%
    }

    .Gsyscol:has(.Gcol-sm-9) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 75%
    }

    .Gsyscol:has(.Gcol-sm-10) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 83.3333333333%
    }

    .Gsyscol:has(.Gcol-sm-11) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 91.6666666667%
    }

    .Gsyscol:has(.Gcol-sm-12) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%
    }
}

@media (min-width: 768px) {
    .Gsyscol:has(.Gcol-md) {
        -webkit-box-flex: 1;
        -webkit-flex: 1 0 0;
        -ms-flex: 1 0 0px;
        flex: 1 0 0
    }

    .Gsyscol:has(.Gcol-md-1) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 8.3333333333%
    }

    .Gsyscol:has(.Gcol-md-2) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .Gsyscol:has(.Gcol-md-3) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%
    }

    .Gsyscol:has(.Gcol-md-4) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .Gsyscol:has(.Gcol-md-5) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 41.6666666667%
    }

    .Gsyscol:has(.Gcol-md-6) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%
    }

    .Gsyscol:has(.Gcol-md-7) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 58.3333333333%
    }

    .Gsyscol:has(.Gcol-md-8) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 66.6666666667%
    }

    .Gsyscol:has(.Gcol-md-9) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 75%
    }

    .Gsyscol:has(.Gcol-md-10) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 83.3333333333%
    }

    .Gsyscol:has(.Gcol-md-11) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 91.6666666667%
    }

    .Gsyscol:has(.Gcol-md-12) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%
    }
}

@media (min-width: 992px) {
    .Gsyscol:has(.Gcol-lg) {
        -webkit-box-flex: 1;
        -webkit-flex: 1 0 0;
        -ms-flex: 1 0 0px;
        flex: 1 0 0
    }

    .Gsyscol:has(.Gcol-lg-1) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 8.3333333333%
    }

    .Gsyscol:has(.Gcol-lg-2) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .Gsyscol:has(.Gcol-lg-3) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%
    }

    .Gsyscol:has(.Gcol-lg-4) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .Gsyscol:has(.Gcol-lg-5) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 41.6666666667%
    }

    .Gsyscol:has(.Gcol-lg-6) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%
    }

    .Gsyscol:has(.Gcol-lg-7) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 58.3333333333%
    }

    .Gsyscol:has(.Gcol-lg-8) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 66.6666666667%
    }

    .Gsyscol:has(.Gcol-lg-9) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 75%
    }

    .Gsyscol:has(.Gcol-lg-10) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 83.3333333333%
    }

    .Gsyscol:has(.Gcol-lg-11) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 91.6666666667%
    }

    .Gsyscol:has(.Gcol-lg-12) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%
    }
}

@media (min-width: 1200px) {
    .Gsyscol:has(.Gcol-xl) {
        -webkit-box-flex: 1;
        -webkit-flex: 1 0 0;
        -ms-flex: 1 0 0px;
        flex: 1 0 0
    }

    .Gsyscol:has(.Gcol-xl-1) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 8.3333333333%
    }

    .Gsyscol:has(.Gcol-xl-2) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .Gsyscol:has(.Gcol-xl-3) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%
    }

    .Gsyscol:has(.Gcol-xl-4) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .Gsyscol:has(.Gcol-xl-5) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 41.6666666667%
    }

    .Gsyscol:has(.Gcol-xl-6) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%
    }

    .Gsyscol:has(.Gcol-xl-7) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 58.3333333333%
    }

    .Gsyscol:has(.Gcol-xl-8) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 66.6666666667%
    }

    .Gsyscol:has(.Gcol-xl-9) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 75%
    }

    .Gsyscol:has(.Gcol-xl-10) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 83.3333333333%
    }

    .Gsyscol:has(.Gcol-xl-11) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 91.6666666667%
    }

    .Gsyscol:has(.Gcol-xl-12) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%
    }
}

@media (min-width: 1400px) {
    .Gsyscol:has(.Gcol-xxl) {
        -webkit-box-flex: 1;
        -webkit-flex: 1 0 0;
        -ms-flex: 1 0 0px;
        flex: 1 0 0
    }

    .Gsyscol:has(.Gcol-xxl-1) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 8.3333333333%
    }

    .Gsyscol:has(.Gcol-xxl-2) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .Gsyscol:has(.Gcol-xxl-3) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%
    }

    .Gsyscol:has(.Gcol-xxl-4) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .Gsyscol:has(.Gcol-xxl-5) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 41.6666666667%
    }

    .Gsyscol:has(.Gcol-xxl-6) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%
    }

    .Gsyscol:has(.Gcol-xxl-7) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 58.3333333333%
    }

    .Gsyscol:has(.Gcol-xxl-8) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 66.6666666667%
    }

    .Gsyscol:has(.Gcol-xxl-9) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 75%
    }

    .Gsyscol:has(.Gcol-xxl-10) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 83.3333333333%
    }

    .Gsyscol:has(.Gcol-xxl-11) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 91.6666666667%
    }

    .Gsyscol:has(.Gcol-xxl-12) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%
    }
}

.wrapper {
    display: flex;
}

.diagram-container {
    flex: 1;
    height: calc(100vh - 150px);
    background-size: 40px 40px;
    background-image: linear-gradient(to right, rgb(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgb(0, 0, 0, 0.05) 1px, transparent 1px);
}

/****report*****/
.reportbtndelColumn {
    max-width: 100px !important;
    min-width: 100px !important;
}

td.reportpathText {
    max-width: 300px !important;
    direction: ltr;
    text-align: left;
    overflow-wrap: break-word;
}

.reportinputCaption {
    max-width: 150px !important;
    min-width: 150px !important;
}

/*********grid system for filter form listi**********/
.filterbox {
    margin: 0.25rem 0.25rem 0.75rem;
    padding: 0.5rem 0.5rem 1rem;
    border-radius: 0.5rem;
    background: linear-gradient(0deg, #6c5ffc0d, #ffffff00);
    border: 1px dashed #6c5ffc66;
}

.filterCol {
    margin-top: 0.5rem;
    font-size: 13px;
}

    .filterCol .form-control,
    .filterCol .form-select {
        min-height: calc(1.5em + .5rem + calc(var(--bs-border-width) * 2));
        padding: .25rem .5rem;
        font-size: .875rem;
        border-radius: var(--bs-border-radius-sm);
    }

@media (min-width: 768px) {
    .filterCol {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 992px) {
    .filterCol {
        flex: 0 0 auto;
        width: 25%;
    }
}

@media (min-width: 1200px) {
    .filterCol {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
}

/*select2*/
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected, .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    color: #000000;
    background-color: #e9ecef;
}

.form-select-sm ~ .select2-container--bootstrap-5 .select2-selection {
    min-height: calc(1.5em + .5rem + 2px);
    padding: .25rem .5rem;
    font-size: .875rem;
    border-radius: .2rem;
    outline: 0;
    box-shadow: none;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    border-color: #86b7fe;
    box-shadow: none
}

.form-select-sm ~ .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    padding: .35em .65em;
    font-size: .675rem;
}

/*********btn clear dropdown**********/
.btnclearDP {
    position: absolute;
    color: var(--red);
    inset-inline-end: 43px;
    transform: scale(1.25);
    top: 54%;
    cursor: pointer;
    transition: all ease-in-out 0.3s;
}

    .btnclearDP:hover {
        text-shadow: 0 0px 4px var(--red);
    }

/*********btn add dropdown**********/
.btnaddDP {
    position: absolute;
    color: var(--purple);
    inset-inline-end: 43px;
    transform: scale(1.2);
    top: 54%;
    cursor: pointer;
    transition: all ease-in-out 0.3s;
    z-index: 2;
}

    .btnaddDP.btnaddDP-with-clear {
        inset-inline-end: 68px;
    }

    .btnaddDP:hover {
        text-shadow: 0 0 4px var(--purple);
    }

/********* devdrop in modals — reset/add vertically centered on toggle **********/
.blazored-modal .devdrop {
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
}

.blazored-modal .devdrop .btnclearDP,
.blazored-modal .devdrop .btnaddDP {
    top: 50%;
    transform: translateY(-50%) scale(1.1);
}

.blazored-modal .devdrop .btnaddDP.btnaddDP-with-clear {
    inset-inline-end: 68px;
}

.blazored-modal .devdrop:has(> label) .btnclearDP,
.blazored-modal .devdrop:has(> label) .btnaddDP {
    top: calc(0.35rem + 0.875rem * 1.4 + (calc(1.5em + 0.5rem + 2px) / 2));
    transform: translateY(-50%) scale(1.1);
}

/* کارتابل مجوز تردد */
.DidehNaShodeh {
    background-color: #fff8e1 !important;
}

.SelectedCnvasItem .djs-visual > :nth-child(1) {
    stroke: #28a745 !important;
    stroke-width: 3px !important;
}

.CurentCnvasItem .djs-visual > :nth-child(1) {
    stroke: #ffc107 !important;
    stroke-width: 4px !important;
}

/******** Traffic Permit — dark mode **********/

/* --- Index --- */
html.DarkMode .traffic-permit-index-page {
    --tp-primary: #8b7cff;
    --tp-primary-dark: #6c5ffc;
    --tp-primary-deep: #1a1a3c;
    --tp-primary-soft: rgba(108, 95, 252, 0.18);
    --tp-success: #34d399;
    --tp-success-soft: rgba(5, 150, 105, 0.2);
    --tp-warning: #fbbf24;
    --tp-warning-soft: rgba(217, 119, 6, 0.2);
    --tp-danger: #f87171;
    --tp-danger-soft: rgba(220, 38, 38, 0.2);
    --tp-danger-border: rgba(248, 113, 113, 0.35);
    --tp-danger-text: #fca5a5;
    --tp-leave: #f472b6;
    --tp-leave-soft: rgba(219, 39, 119, 0.2);
    --tp-overtime: #fbbf24;
    --tp-overtime-soft: rgba(180, 83, 9, 0.2);
    --tp-assignment: #22d3ee;
    --tp-assignment-soft: rgba(8, 145, 178, 0.2);
    --tp-surface: #2a2a4a;
    --tp-surface-muted: #383964;
    --tp-surface-elevated: #2f3058;
    --tp-border: rgba(255, 255, 255, 0.12);
    --tp-border-strong: rgba(255, 255, 255, 0.18);
    --tp-text: #eaeaff;
    --tp-text-secondary: rgba(234, 234, 255, 0.75);
    --tp-text-muted: rgba(234, 234, 255, 0.55);
    --tp-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.18);
    --tp-shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.32);
    --tp-mode-daily-bg: rgba(99, 102, 241, 0.2);
    --tp-mode-daily-text: #a5b4fc;
    --tp-mode-hourly-bg: rgba(234, 88, 12, 0.2);
    --tp-mode-hourly-text: #fdba74;
    --tp-tracking-code: #a5b4fc;
    --tp-action-bg: #383964;
    --tp-action-border: rgba(255, 255, 255, 0.12);
    --tp-action-text: rgba(234, 234, 255, 0.75);
}

html.DarkMode .traffic-permit-index-page .tp-hero {
    background: linear-gradient(135deg, #1a1a3c 0%, #24318a 48%, #6c5ffc 100%) !important;
}

html.DarkMode .traffic-permit-index-page .tp-segmented {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22);
}

html.DarkMode .traffic-permit-index-page .tp-date-field__input:focus {
    box-shadow: 0 0 0 3px rgba(108, 95, 252, 0.25);
}

html.DarkMode .traffic-permit-index-page .tp-list-toolbar {
    background: linear-gradient(180deg, #2f3058 0%, #2a2a4a 100%);
}

html.DarkMode .traffic-permit-index-page .tp-register-btn--secondary {
    color: rgba(234, 234, 255, 0.85);
    background: #383964;
    border-color: rgba(255, 255, 255, 0.12);
}

html.DarkMode .traffic-permit-index-page .tp-register-btn--secondary:hover {
    background: rgba(108, 95, 252, 0.18);
    border-color: rgba(139, 124, 255, 0.45);
    color: #c4b5fd;
}

html.DarkMode .traffic-permit-index-page .tp-action-btn--info:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(96, 165, 250, 0.4);
    color: #93c5fd;
}

html.DarkMode .traffic-permit-index-page .tp-action-btn--success:hover:not(:disabled) {
    background: rgba(5, 150, 105, 0.2);
    border-color: rgba(52, 211, 153, 0.4);
    color: #34d399;
}

html.DarkMode .traffic-permit-index-page .tp-action-btn--danger:hover:not(:disabled) {
    background: rgba(220, 38, 38, 0.2);
    border-color: rgba(248, 113, 113, 0.4);
    color: #f87171;
}

html.DarkMode .traffic-permit-index-page .tp-table-wrap .tp-table thead th,
html.DarkMode .traffic-permit-index-page .tp-table-wrap .tp-table__head th {
    background: #383964 !important;
    color: rgba(234, 234, 255, 0.75) !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

html.DarkMode .traffic-permit-index-page .tp-table-wrap .tp-table tbody td {
    background: #2a2a4a !important;
    color: #eaeaff !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

html.DarkMode .traffic-permit-index-page .tp-table-wrap .tp-table tbody tr:hover td {
    background: #2f3058 !important;
}

html.DarkMode .traffic-permit-index-page .tp-table-wrap thead[role=search] th,
html.DarkMode .traffic-permit-index-page .tp-table-wrap thead[role=search] input[type=text],
html.DarkMode .traffic-permit-index-page .tp-table-wrap .form-control-sm {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #eaeaff !important;
}

html.DarkMode .traffic-permit-index-page .tp-table-wrap thead[role=search] input[type=text]:focus,
html.DarkMode .traffic-permit-index-page .tp-table-wrap .form-control-sm:focus {
    border-color: #8b7cff !important;
    box-shadow: 0 0 0 3px rgba(108, 95, 252, 0.2) !important;
}

html.DarkMode .traffic-permit-index-page .tp-table-wrap .pagination .page-link {
    background: #383964;
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(234, 234, 255, 0.75);
}

html.DarkMode .traffic-permit-index-page .tp-table-wrap .pagination .page-item.active .page-link {
    background: #8b7cff;
    border-color: #8b7cff;
    color: #fff;
}

html.DarkMode .traffic-permit-index-page .tp-table-wrap .pagination .page-link:hover {
    background: rgba(108, 95, 252, 0.18);
    color: #eaeaff;
}

html.DarkMode .traffic-permit-index-page .tp-table-wrap th a {
    color: #34d399 !important;
}

/* --- Detail --- */
html.DarkMode .traffic-permit-detail-page {
    --tpd-primary: #8b7cff;
    --tpd-primary-dark: #6c5ffc;
    --tpd-primary-deep: #c4c4ff;
    --tpd-primary-soft: rgba(108, 95, 252, 0.18);
    --tpd-success: #34d399;
    --tpd-success-soft: rgba(5, 150, 105, 0.2);
    --tpd-warning: #fbbf24;
    --tpd-warning-soft: rgba(217, 119, 6, 0.2);
    --tpd-danger: #f87171;
    --tpd-danger-soft: rgba(220, 38, 38, 0.2);
    --tpd-danger-border: rgba(248, 113, 113, 0.35);
    --tpd-danger-text: #fca5a5;
    --tpd-leave: #f472b6;
    --tpd-leave-soft: rgba(219, 39, 119, 0.2);
    --tpd-overtime: #fbbf24;
    --tpd-overtime-soft: rgba(180, 83, 9, 0.2);
    --tpd-assignment: #22d3ee;
    --tpd-assignment-soft: rgba(8, 145, 178, 0.2);
    --tpd-surface: #2a2a4a;
    --tpd-surface-muted: #383964;
    --tpd-surface-elevated: #2f3058;
    --tpd-border: rgba(255, 255, 255, 0.12);
    --tpd-border-strong: rgba(255, 255, 255, 0.18);
    --tpd-text: #eaeaff;
    --tpd-text-secondary: rgba(234, 234, 255, 0.75);
    --tpd-text-muted: rgba(234, 234, 255, 0.55);
    --tpd-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.18);
    --tpd-mode-daily-bg: rgba(99, 102, 241, 0.2);
    --tpd-mode-daily-text: #a5b4fc;
    --tpd-mode-hourly-bg: rgba(234, 88, 12, 0.2);
    --tpd-mode-hourly-text: #fdba74;
    --tpd-back-link: #a5b4fc;
    --tpd-back-link-hover: #c4b5fd;
    --tpd-action-secondary-bg: #383964;
    --tpd-action-secondary-border: rgba(255, 255, 255, 0.12);
    --tpd-action-secondary-text: rgba(234, 234, 255, 0.75);
    --tpd-info-icon-bg: #383964;
    --tpd-info-icon-border: rgba(255, 255, 255, 0.12);
    --tpd-info-icon-color: rgba(234, 234, 255, 0.75);
}

html.DarkMode .traffic-permit-detail-page .tpd-action-btn--secondary:hover:not(:disabled) {
    background: #2f3058 !important;
    color: #eaeaff !important;
}

html.DarkMode .traffic-permit-detail-page .tpd-badge.tp-badge--success,
html.DarkMode .traffic-permit-detail-page .tp-badge--success {
    background: rgba(5, 150, 105, 0.2) !important;
    color: #34d399 !important;
}

html.DarkMode .traffic-permit-detail-page .tpd-badge.tp-badge--warning,
html.DarkMode .traffic-permit-detail-page .tp-badge--warning {
    background: rgba(217, 119, 6, 0.2) !important;
    color: #fbbf24 !important;
}

html.DarkMode .traffic-permit-detail-page .tpd-badge.tp-badge--danger,
html.DarkMode .traffic-permit-detail-page .tp-badge--danger {
    background: rgba(220, 38, 38, 0.2) !important;
    color: #f87171 !important;
}

/* --- Leave Editor --- */
html.DarkMode .traffic-permit-leave-editor-page .tple__shell {
    background: #2a2a4a !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 8px 28px rgba(0, 0, 0, 0.18);
}

html.DarkMode .traffic-permit-leave-editor-page .tple__overlay {
    background: rgba(42, 42, 74, 0.82);
}

html.DarkMode .traffic-permit-leave-editor-page .tclm__header {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

html.DarkMode .traffic-permit-leave-editor-page .tclm__title {
    color: #eaeaff;
}

html.DarkMode .traffic-permit-leave-editor-page .tclm__header-badge {
    background: rgba(219, 39, 119, 0.2);
    color: #f472b6;
    box-shadow: inset 0 0 0 1px rgba(244, 114, 182, 0.35);
}

html.DarkMode .traffic-permit-leave-editor-page .tclm__min-date {
    background: rgba(5, 195, 251, 0.12);
    border-inline-start-color: #05c3fb;
}

html.DarkMode .traffic-permit-leave-editor-page .tclm__min-date-text {
    color: rgba(234, 234, 255, 0.88);
}

html.DarkMode .traffic-permit-leave-editor-page .tclm__min-date-badge {
    background: rgba(5, 195, 251, 0.18);
    color: #7ccae1;
}

html.DarkMode .traffic-permit-leave-editor-page .tclm__alert--info {
    background: rgba(5, 195, 251, 0.12);
    color: #7ccae1;
    border-color: rgba(5, 195, 251, 0.35);
}

html.DarkMode .traffic-permit-leave-editor-page .tclm__alert--danger {
    background: rgba(220, 38, 38, 0.18);
    border-color: rgba(248, 113, 113, 0.35);
    color: #fca5a5;
}

html.DarkMode .traffic-permit-leave-editor-page .tclm__type-option--hourly.is-active {
    background: rgba(5, 150, 105, 0.22);
    box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.35);
}

html.DarkMode .traffic-permit-leave-editor-page .tclm__type-option--daily.is-active {
    background: rgba(217, 119, 6, 0.2);
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.35);
}

html.DarkMode .traffic-permit-leave-editor-page .tclm__type-label {
    color: rgba(234, 234, 255, 0.55);
}

html.DarkMode .traffic-permit-leave-editor-page .tclm__type-option.is-active .tclm__type-label {
    color: #eaeaff;
}

html.DarkMode .traffic-permit-leave-editor-page .tclm__type-icon--hourly {
    color: #34d399;
}

html.DarkMode .traffic-permit-leave-editor-page .tclm__type-icon--daily {
    color: #fbbf24;
}

html.DarkMode .traffic-permit-leave-editor-page .tclm__fields-panel {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.DarkMode .traffic-permit-leave-editor-page .tclm__label {
    color: rgba(234, 234, 255, 0.75);
}

html.DarkMode .traffic-permit-leave-editor-page .tclm__input-icon {
    color: rgba(234, 234, 255, 0.45);
}

html.DarkMode .traffic-permit-leave-editor-page .tclm__footer {
    border-top-color: rgba(255, 255, 255, 0.12);
}

html.DarkMode .traffic-permit-leave-editor-page input.form-control.tclm__input,
html.DarkMode .traffic-permit-leave-editor-page textarea.form-control.tclm__input {
    background-color: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #eaeaff !important;
}

html.DarkMode .traffic-permit-leave-editor-page input.form-control.tclm__input:focus,
html.DarkMode .traffic-permit-leave-editor-page textarea.form-control.tclm__input:focus {
    border-color: #8b7cff !important;
    box-shadow: 0 0 0 3px rgba(108, 95, 252, 0.2) !important;
}

html.DarkMode .traffic-permit-leave-editor-page input.form-control.tclm__input:disabled,
html.DarkMode .traffic-permit-leave-editor-page textarea.form-control.tclm__input:disabled {
    background-color: #2f3058 !important;
    color: rgba(234, 234, 255, 0.55) !important;
}

html.DarkMode .traffic-permit-leave-editor-page input.form-control.tclm__input::placeholder,
html.DarkMode .traffic-permit-leave-editor-page textarea.form-control.tclm__input::placeholder {
    color: rgba(234, 234, 255, 0.38);
    opacity: 1;
}

/* --- OverTime Editor --- */
html.DarkMode .traffic-permit-overtime-editor-page .tpoe__shell {
    background: #2a2a4a !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 8px 28px rgba(0, 0, 0, 0.18);
}

html.DarkMode .traffic-permit-overtime-editor-page .tpoe__overlay {
    background: rgba(42, 42, 74, 0.82);
}

html.DarkMode .traffic-permit-overtime-editor-page .tpoem__header {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

html.DarkMode .traffic-permit-overtime-editor-page .tpoem__title {
    color: #eaeaff;
}

html.DarkMode .traffic-permit-overtime-editor-page .tpoem__header-badge {
    background: rgba(38, 166, 154, 0.2);
    color: #2dd4bf;
    box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.35);
}

html.DarkMode .traffic-permit-overtime-editor-page .tpoem__alert--info {
    background: rgba(5, 195, 251, 0.12);
    color: #7ccae1;
    border-color: rgba(5, 195, 251, 0.35);
}

html.DarkMode .traffic-permit-overtime-editor-page .tpoem__alert--danger {
    background: rgba(220, 38, 38, 0.18);
    border-color: rgba(248, 113, 113, 0.35);
    color: #fca5a5;
}

html.DarkMode .traffic-permit-overtime-editor-page .tpoem__type-option--normal.is-active {
    background: rgba(5, 150, 105, 0.22);
    box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.35);
}

html.DarkMode .traffic-permit-overtime-editor-page .tpoem__type-option--holiday.is-active {
    background: rgba(217, 119, 6, 0.2);
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.35);
}

html.DarkMode .traffic-permit-overtime-editor-page .tpoem__type-label {
    color: rgba(234, 234, 255, 0.55);
}

html.DarkMode .traffic-permit-overtime-editor-page .tpoem__type-option.is-active .tpoem__type-label {
    color: #eaeaff;
}

html.DarkMode .traffic-permit-overtime-editor-page .tpoem__type-icon--normal {
    color: #d7ccc8;
}

html.DarkMode .traffic-permit-overtime-editor-page .tpoem__type-icon--holiday {
    color: #fbbf24;
}

html.DarkMode .traffic-permit-overtime-editor-page .tpoem__notice {
    background: rgba(217, 119, 6, 0.14);
    border-color: rgba(251, 191, 36, 0.35);
}

html.DarkMode .traffic-permit-overtime-editor-page .tpoem__notice-title,
html.DarkMode .traffic-permit-overtime-editor-page .tpoem__notice-text {
    color: #fcd34d;
}

html.DarkMode .traffic-permit-overtime-editor-page .tpoem__fields-panel {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.DarkMode .traffic-permit-overtime-editor-page .tpoem__label {
    color: rgba(234, 234, 255, 0.75);
}

html.DarkMode .traffic-permit-overtime-editor-page .tpoem__input-icon {
    color: rgba(234, 234, 255, 0.45);
}

html.DarkMode .traffic-permit-overtime-editor-page .tpoem__footer {
    border-top-color: rgba(255, 255, 255, 0.12);
}

html.DarkMode .traffic-permit-overtime-editor-page input.form-control.tpoem__input,
html.DarkMode .traffic-permit-overtime-editor-page textarea.form-control.tpoem__input {
    background-color: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #eaeaff !important;
}

html.DarkMode .traffic-permit-overtime-editor-page input.form-control.tpoem__input:focus,
html.DarkMode .traffic-permit-overtime-editor-page textarea.form-control.tpoem__input:focus {
    border-color: #8b7cff !important;
    box-shadow: 0 0 0 3px rgba(108, 95, 252, 0.2) !important;
}

html.DarkMode .traffic-permit-overtime-editor-page input.form-control.tpoem__input:disabled,
html.DarkMode .traffic-permit-overtime-editor-page textarea.form-control.tpoem__input:disabled {
    background-color: #2f3058 !important;
    color: rgba(234, 234, 255, 0.55) !important;
}

html.DarkMode .traffic-permit-overtime-editor-page input.form-control.tpoem__input::placeholder,
html.DarkMode .traffic-permit-overtime-editor-page textarea.form-control.tpoem__input::placeholder {
    color: rgba(234, 234, 255, 0.38);
    opacity: 1;
}

html.DarkMode .traffic-permit-overtime-editor-page .btn-red-light {
    background: #383964;
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(234, 234, 255, 0.75);
}

html.DarkMode .traffic-permit-overtime-editor-page .btn-red-light:hover:not(:disabled) {
    background: rgba(220, 38, 38, 0.2);
    border-color: rgba(248, 113, 113, 0.4);
    color: #f87171;
}

/* --- OverTime Group Editor --- */
html.DarkMode .traffic-permit-overtime-group-editor-page .tpag__card {
    background: #2a2a4a !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 8px 28px rgba(0, 0, 0, 0.18);
}

html.DarkMode .traffic-permit-overtime-group-editor-page .tpag__card-header {
    background: #383964;
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

html.DarkMode .traffic-permit-overtime-group-editor-page .tpag__card-title,
html.DarkMode .traffic-permit-overtime-group-editor-page .tpag__title {
    color: #eaeaff;
}

html.DarkMode .traffic-permit-overtime-group-editor-page .tpag__header-badge {
    background: rgba(124, 58, 237, 0.2);
    color: #a78bfa;
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.35);
}

html.DarkMode .traffic-permit-overtime-group-editor-page .tpag__card-icon--personnel {
    background: rgba(124, 58, 237, 0.2);
    color: #a78bfa;
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.35);
}

html.DarkMode .traffic-permit-overtime-group-editor-page .tpag__card-icon--form {
    background: rgba(38, 166, 154, 0.2);
    color: #2dd4bf;
    box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.35);
}

html.DarkMode .traffic-permit-overtime-group-editor-page .tpag__card--personnel .tsub__toolbar {
    background: #2a2a4a;
}

html.DarkMode .traffic-permit-overtime-group-editor-page .tpag__overlay {
    background: rgba(42, 42, 74, 0.82);
}

html.DarkMode .traffic-permit-overtime-group-editor-page .tpoem__alert--info {
    background: rgba(5, 195, 251, 0.12);
    color: #7ccae1;
    border-color: rgba(5, 195, 251, 0.35);
}

html.DarkMode .traffic-permit-overtime-group-editor-page .tpoem__alert--danger {
    background: rgba(220, 38, 38, 0.18);
    border-color: rgba(248, 113, 113, 0.35);
    color: #fca5a5;
}

html.DarkMode .traffic-permit-overtime-group-editor-page .tpoem__type-option--normal.is-active {
    background: rgba(5, 150, 105, 0.22);
    box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.35);
}

html.DarkMode .traffic-permit-overtime-group-editor-page .tpoem__type-option--holiday.is-active {
    background: rgba(217, 119, 6, 0.2);
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.35);
}

html.DarkMode .traffic-permit-overtime-group-editor-page .tpoem__type-label {
    color: rgba(234, 234, 255, 0.55);
}

html.DarkMode .traffic-permit-overtime-group-editor-page .tpoem__type-option.is-active .tpoem__type-label {
    color: #eaeaff;
}

html.DarkMode .traffic-permit-overtime-group-editor-page .tpoem__type-icon--normal {
    color: #d7ccc8;
}

html.DarkMode .traffic-permit-overtime-group-editor-page .tpoem__type-icon--holiday {
    color: #fbbf24;
}

html.DarkMode .traffic-permit-overtime-group-editor-page .tpoem__notice {
    background: rgba(217, 119, 6, 0.14);
    border-color: rgba(251, 191, 36, 0.35);
}

html.DarkMode .traffic-permit-overtime-group-editor-page .tpoem__notice-title,
html.DarkMode .traffic-permit-overtime-group-editor-page .tpoem__notice-text {
    color: #fcd34d;
}

html.DarkMode .traffic-permit-overtime-group-editor-page .tpoem__fields-panel {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.DarkMode .traffic-permit-overtime-group-editor-page .tpoem__label {
    color: rgba(234, 234, 255, 0.75);
}

html.DarkMode .traffic-permit-overtime-group-editor-page .tpoem__input-icon {
    color: rgba(234, 234, 255, 0.45);
}

html.DarkMode .traffic-permit-overtime-group-editor-page .tpoem__footer {
    border-top-color: rgba(255, 255, 255, 0.12);
}

html.DarkMode .traffic-permit-overtime-group-editor-page input.form-control.tpoem__input,
html.DarkMode .traffic-permit-overtime-group-editor-page textarea.form-control.tpoem__input {
    background-color: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #eaeaff !important;
}

html.DarkMode .traffic-permit-overtime-group-editor-page input.form-control.tpoem__input:focus,
html.DarkMode .traffic-permit-overtime-group-editor-page textarea.form-control.tpoem__input:focus {
    border-color: #8b7cff !important;
    box-shadow: 0 0 0 3px rgba(108, 95, 252, 0.2) !important;
}

html.DarkMode .traffic-permit-overtime-group-editor-page input.form-control.tpoem__input:disabled,
html.DarkMode .traffic-permit-overtime-group-editor-page textarea.form-control.tpoem__input:disabled {
    background-color: #2f3058 !important;
    color: rgba(234, 234, 255, 0.55) !important;
}

html.DarkMode .traffic-permit-overtime-group-editor-page input.form-control.tpoem__input::placeholder,
html.DarkMode .traffic-permit-overtime-group-editor-page textarea.form-control.tpoem__input::placeholder {
    color: rgba(234, 234, 255, 0.38);
    opacity: 1;
}

html.DarkMode .traffic-permit-overtime-group-editor-page .btn-red-light {
    background: #383964;
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(234, 234, 255, 0.75);
}

html.DarkMode .traffic-permit-overtime-group-editor-page .btn-red-light:hover:not(:disabled) {
    background: rgba(220, 38, 38, 0.2);
    border-color: rgba(248, 113, 113, 0.4);
    color: #f87171;
}

/* --- Leave Group Editor --- */
html.DarkMode .traffic-permit-leave-group-editor-page .tpag__card {
    background: #2a2a4a !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 8px 28px rgba(0, 0, 0, 0.18);
}

html.DarkMode .traffic-permit-leave-group-editor-page .tpag__card-header {
    background: #383964;
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

html.DarkMode .traffic-permit-leave-group-editor-page .tpag__card-title,
html.DarkMode .traffic-permit-leave-group-editor-page .tpag__title {
    color: #eaeaff;
}

html.DarkMode .traffic-permit-leave-group-editor-page .tpag__header-badge {
    background: rgba(124, 58, 237, 0.2);
    color: #a78bfa;
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.35);
}

html.DarkMode .traffic-permit-leave-group-editor-page .tpag__card-icon--personnel {
    background: rgba(124, 58, 237, 0.2);
    color: #a78bfa;
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.35);
}

html.DarkMode .traffic-permit-leave-group-editor-page .tpag__card-icon--form {
    background: rgba(219, 39, 119, 0.2);
    color: #f472b6;
    box-shadow: inset 0 0 0 1px rgba(244, 114, 182, 0.35);
}

html.DarkMode .traffic-permit-leave-group-editor-page .tpag__card--personnel .tsub__toolbar {
    background: #2a2a4a;
}

html.DarkMode .traffic-permit-leave-group-editor-page .tpag__overlay {
    background: rgba(42, 42, 74, 0.82);
}

html.DarkMode .traffic-permit-leave-group-editor-page .tclm__alert--info {
    background: rgba(5, 195, 251, 0.12);
    color: #7ccae1;
    border-color: rgba(5, 195, 251, 0.35);
}

html.DarkMode .traffic-permit-leave-group-editor-page .tclm__alert--danger {
    background: rgba(220, 38, 38, 0.18);
    border-color: rgba(248, 113, 113, 0.35);
    color: #fca5a5;
}

html.DarkMode .traffic-permit-leave-group-editor-page .tclm__type-option--hourly.is-active {
    background: rgba(5, 150, 105, 0.22);
    box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.35);
}

html.DarkMode .traffic-permit-leave-group-editor-page .tclm__type-option--daily.is-active {
    background: rgba(217, 119, 6, 0.2);
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.35);
}

html.DarkMode .traffic-permit-leave-group-editor-page .tclm__type-label {
    color: rgba(234, 234, 255, 0.55);
}

html.DarkMode .traffic-permit-leave-group-editor-page .tclm__type-option.is-active .tclm__type-label {
    color: #eaeaff;
}

html.DarkMode .traffic-permit-leave-group-editor-page .tclm__type-icon--hourly {
    color: #34d399;
}

html.DarkMode .traffic-permit-leave-group-editor-page .tclm__type-icon--daily {
    color: #fbbf24;
}

html.DarkMode .traffic-permit-leave-group-editor-page .tclm__min-date {
    background: rgba(5, 195, 251, 0.12);
    border-inline-start-color: #05c3fb;
}

html.DarkMode .traffic-permit-leave-group-editor-page .tclm__min-date-text {
    color: rgba(234, 234, 255, 0.88);
}

html.DarkMode .traffic-permit-leave-group-editor-page .tclm__min-date-badge {
    background: rgba(5, 195, 251, 0.18);
    color: #7ccae1;
}

html.DarkMode .traffic-permit-leave-group-editor-page .tclm__fields-panel {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.DarkMode .traffic-permit-leave-group-editor-page .tclm__label {
    color: rgba(234, 234, 255, 0.75);
}

html.DarkMode .traffic-permit-leave-group-editor-page .tclm__input-icon {
    color: rgba(234, 234, 255, 0.45);
}

html.DarkMode .traffic-permit-leave-group-editor-page input.form-control.tclm__input,
html.DarkMode .traffic-permit-leave-group-editor-page textarea.form-control.tclm__input {
    background-color: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #eaeaff !important;
}

html.DarkMode .traffic-permit-leave-group-editor-page input.form-control.tclm__input:focus,
html.DarkMode .traffic-permit-leave-group-editor-page textarea.form-control.tclm__input:focus {
    border-color: #8b7cff !important;
    box-shadow: 0 0 0 3px rgba(108, 95, 252, 0.2) !important;
}

html.DarkMode .traffic-permit-leave-group-editor-page input.form-control.tclm__input:disabled,
html.DarkMode .traffic-permit-leave-group-editor-page textarea.form-control.tclm__input:disabled {
    background-color: #2f3058 !important;
    color: rgba(234, 234, 255, 0.55) !important;
}

html.DarkMode .traffic-permit-leave-group-editor-page input.form-control.tclm__input::placeholder,
html.DarkMode .traffic-permit-leave-group-editor-page textarea.form-control.tclm__input::placeholder {
    color: rgba(234, 234, 255, 0.38);
    opacity: 1;
}

html.DarkMode .traffic-permit-leave-group-editor-page .btn-red-light {
    background: #383964;
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(234, 234, 255, 0.75);
}

html.DarkMode .traffic-permit-leave-group-editor-page .btn-red-light:hover:not(:disabled) {
    background: rgba(220, 38, 38, 0.2);
    border-color: rgba(248, 113, 113, 0.4);
    color: #f87171;
}

/* --- Assignment Editor --- */
html.DarkMode .traffic-permit-assignment-editor-page .tpae__shell {
    background: #2a2a4a !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 8px 28px rgba(0, 0, 0, 0.18);
}

html.DarkMode .traffic-permit-assignment-editor-page .tpae__overlay {
    background: rgba(42, 42, 74, 0.82);
}

html.DarkMode .traffic-permit-assignment-editor-page .tpaem__header {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

html.DarkMode .traffic-permit-assignment-editor-page .tpaem__title {
    color: #eaeaff;
}

html.DarkMode .traffic-permit-assignment-editor-page .tpaem__header-badge {
    background: rgba(8, 145, 178, 0.2);
    color: #22d3ee;
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.35);
}

html.DarkMode .traffic-permit-assignment-editor-page .tpaem__alert--info {
    background: rgba(5, 195, 251, 0.12);
    color: #7ccae1;
    border-color: rgba(5, 195, 251, 0.35);
}

html.DarkMode .traffic-permit-assignment-editor-page .tpaem__alert--danger {
    background: rgba(220, 38, 38, 0.18);
    border-color: rgba(248, 113, 113, 0.35);
    color: #fca5a5;
}

html.DarkMode .traffic-permit-assignment-editor-page .tpaem__type-option--hourly.is-active {
    background: rgba(5, 150, 105, 0.22);
    box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.35);
}

html.DarkMode .traffic-permit-assignment-editor-page .tpaem__type-option--daily.is-active {
    background: rgba(217, 119, 6, 0.2);
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.35);
}

html.DarkMode .traffic-permit-assignment-editor-page .tpaem__type-label {
    color: rgba(234, 234, 255, 0.55);
}

html.DarkMode .traffic-permit-assignment-editor-page .tpaem__type-option.is-active .tpaem__type-label {
    color: #eaeaff;
}

html.DarkMode .traffic-permit-assignment-editor-page .tpaem__type-icon--hourly {
    color: #34d399;
}

html.DarkMode .traffic-permit-assignment-editor-page .tpaem__type-icon--daily {
    color: #fbbf24;
}

html.DarkMode .traffic-permit-assignment-editor-page .tpaem__min-date {
    background: rgba(5, 195, 251, 0.12);
    border-inline-start-color: #05c3fb;
}

html.DarkMode .traffic-permit-assignment-editor-page .tpaem__min-date-text {
    color: rgba(234, 234, 255, 0.88);
}

html.DarkMode .traffic-permit-assignment-editor-page .tpaem__min-date-badge {
    background: rgba(5, 195, 251, 0.18);
    color: #7ccae1;
}

html.DarkMode .traffic-permit-assignment-editor-page .tpaem__fields-panel {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.DarkMode .traffic-permit-assignment-editor-page .tpaem__label {
    color: rgba(234, 234, 255, 0.75);
}

html.DarkMode .traffic-permit-assignment-editor-page .tpaem__input-icon {
    color: rgba(234, 234, 255, 0.45);
}

html.DarkMode .traffic-permit-assignment-editor-page .tpaem__footer {
    border-top-color: rgba(255, 255, 255, 0.12);
}

html.DarkMode .traffic-permit-assignment-editor-page input.form-control.tpaem__input,
html.DarkMode .traffic-permit-assignment-editor-page textarea.form-control.tpaem__input {
    background-color: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #eaeaff !important;
}

html.DarkMode .traffic-permit-assignment-editor-page input.form-control.tpaem__input:focus,
html.DarkMode .traffic-permit-assignment-editor-page textarea.form-control.tpaem__input:focus {
    border-color: #8b7cff !important;
    box-shadow: 0 0 0 3px rgba(108, 95, 252, 0.2) !important;
}

html.DarkMode .traffic-permit-assignment-editor-page input.form-control.tpaem__input:disabled,
html.DarkMode .traffic-permit-assignment-editor-page textarea.form-control.tpaem__input:disabled {
    background-color: #2f3058 !important;
    color: rgba(234, 234, 255, 0.55) !important;
}

html.DarkMode .traffic-permit-assignment-editor-page input.form-control.tpaem__input::placeholder,
html.DarkMode .traffic-permit-assignment-editor-page textarea.form-control.tpaem__input::placeholder {
    color: rgba(234, 234, 255, 0.38);
    opacity: 1;
}

html.DarkMode .traffic-permit-assignment-editor-page .btn-red-light {
    background: #383964;
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(234, 234, 255, 0.75);
}

html.DarkMode .traffic-permit-assignment-editor-page .btn-red-light:hover:not(:disabled) {
    background: rgba(220, 38, 38, 0.2);
    border-color: rgba(248, 113, 113, 0.4);
    color: #f87171;
}

/* --- Assignment Group Editor --- */
html.DarkMode .traffic-permit-assignment-group-editor-page .tpag__card {
    background: #2a2a4a !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 8px 28px rgba(0, 0, 0, 0.18);
}

html.DarkMode .traffic-permit-assignment-group-editor-page .tpag__card-header {
    background: #383964;
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

html.DarkMode .traffic-permit-assignment-group-editor-page .tpag__card-title,
html.DarkMode .traffic-permit-assignment-group-editor-page .tpag__title {
    color: #eaeaff;
}

html.DarkMode .traffic-permit-assignment-group-editor-page .tpag__header-badge {
    background: rgba(124, 58, 237, 0.2);
    color: #a78bfa;
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.35);
}

html.DarkMode .traffic-permit-assignment-group-editor-page .tpag__card-icon--personnel {
    background: rgba(124, 58, 237, 0.2);
    color: #a78bfa;
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.35);
}

html.DarkMode .traffic-permit-assignment-group-editor-page .tpag__card-icon--form {
    background: rgba(8, 145, 178, 0.2);
    color: #22d3ee;
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.35);
}

html.DarkMode .traffic-permit-assignment-group-editor-page .tpag__card--personnel .tsub__toolbar {
    background: #2a2a4a;
}

html.DarkMode .traffic-permit-assignment-group-editor-page .tpag__overlay {
    background: rgba(42, 42, 74, 0.82);
}

html.DarkMode .traffic-permit-assignment-group-editor-page .tpaem__header-badge--group {
    background: rgba(124, 58, 237, 0.2);
    color: #a78bfa;
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.35);
}

html.DarkMode .traffic-permit-assignment-group-editor-page .tpaem__alert--info {
    background: rgba(5, 195, 251, 0.12);
    color: #7ccae1;
    border-color: rgba(5, 195, 251, 0.35);
}

html.DarkMode .traffic-permit-assignment-group-editor-page .tpaem__alert--danger {
    background: rgba(220, 38, 38, 0.18);
    border-color: rgba(248, 113, 113, 0.35);
    color: #fca5a5;
}

html.DarkMode .traffic-permit-assignment-group-editor-page .tpaem__type-option--hourly.is-active {
    background: rgba(5, 150, 105, 0.22);
    box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.35);
}

html.DarkMode .traffic-permit-assignment-group-editor-page .tpaem__type-option--daily.is-active {
    background: rgba(217, 119, 6, 0.2);
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.35);
}

html.DarkMode .traffic-permit-assignment-group-editor-page .tpaem__type-label {
    color: rgba(234, 234, 255, 0.55);
}

html.DarkMode .traffic-permit-assignment-group-editor-page .tpaem__type-option.is-active .tpaem__type-label {
    color: #eaeaff;
}

html.DarkMode .traffic-permit-assignment-group-editor-page .tpaem__type-icon--hourly {
    color: #34d399;
}

html.DarkMode .traffic-permit-assignment-group-editor-page .tpaem__type-icon--daily {
    color: #fbbf24;
}

html.DarkMode .traffic-permit-assignment-group-editor-page .tpaem__min-date {
    background: rgba(5, 195, 251, 0.12);
    border-inline-start-color: #05c3fb;
}

html.DarkMode .traffic-permit-assignment-group-editor-page .tpaem__min-date-text {
    color: rgba(234, 234, 255, 0.88);
}

html.DarkMode .traffic-permit-assignment-group-editor-page .tpaem__min-date-badge {
    background: rgba(5, 195, 251, 0.18);
    color: #7ccae1;
}

html.DarkMode .traffic-permit-assignment-group-editor-page .tpaem__fields-panel {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.DarkMode .traffic-permit-assignment-group-editor-page .tpaem__label {
    color: rgba(234, 234, 255, 0.75);
}

html.DarkMode .traffic-permit-assignment-group-editor-page .tpaem__input-icon {
    color: rgba(234, 234, 255, 0.45);
}

html.DarkMode .traffic-permit-assignment-group-editor-page .tpaem__footer {
    border-top-color: rgba(255, 255, 255, 0.12);
}

html.DarkMode .traffic-permit-assignment-group-editor-page input.form-control.tpaem__input,
html.DarkMode .traffic-permit-assignment-group-editor-page textarea.form-control.tpaem__input {
    background-color: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #eaeaff !important;
}

html.DarkMode .traffic-permit-assignment-group-editor-page input.form-control.tpaem__input:focus,
html.DarkMode .traffic-permit-assignment-group-editor-page textarea.form-control.tpaem__input:focus {
    border-color: #8b7cff !important;
    box-shadow: 0 0 0 3px rgba(108, 95, 252, 0.2) !important;
}

html.DarkMode .traffic-permit-assignment-group-editor-page input.form-control.tpaem__input:disabled,
html.DarkMode .traffic-permit-assignment-group-editor-page textarea.form-control.tpaem__input:disabled {
    background-color: #2f3058 !important;
    color: rgba(234, 234, 255, 0.55) !important;
}

html.DarkMode .traffic-permit-assignment-group-editor-page input.form-control.tpaem__input::placeholder,
html.DarkMode .traffic-permit-assignment-group-editor-page textarea.form-control.tpaem__input::placeholder {
    color: rgba(234, 234, 255, 0.38);
    opacity: 1;
}

html.DarkMode .traffic-permit-assignment-group-editor-page .btn-red-light {
    background: #383964;
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(234, 234, 255, 0.75);
}

html.DarkMode .traffic-permit-assignment-group-editor-page .btn-red-light:hover:not(:disabled) {
    background: rgba(220, 38, 38, 0.2);
    border-color: rgba(248, 113, 113, 0.4);
    color: #f87171;
}

/******** Traffic Guard — dark mode **********/

html.DarkMode .traffic-guard-hub-page,
html.DarkMode .traffic-guard-invitation-page,
html.DarkMode .traffic-guard-permit-page,
html.DarkMode .traffic-cartable-page {
    --tg-primary: #8b7cff;
    --tg-primary-dark: #6c5ffc;
    --tg-primary-deep: #a5b4fc;
    --tg-primary-soft: rgba(108, 95, 252, 0.18);
    --tg-success: #34d399;
    --tg-success-soft: rgba(5, 150, 105, 0.2);
    --tg-warning: #fbbf24;
    --tg-warning-soft: rgba(217, 119, 6, 0.2);
    --tg-danger: #f87171;
    --tg-danger-soft: rgba(220, 38, 38, 0.2);
    --tg-danger-border: rgba(248, 113, 113, 0.35);
    --tg-danger-text: #fca5a5;
    --tg-mode-daily-bg: rgba(99, 102, 241, 0.2);
    --tg-mode-daily-text: #a5b4fc;
    --tg-mode-hourly-bg: rgba(234, 88, 12, 0.2);
    --tg-mode-hourly-text: #fdba74;
    --tg-leave: #f472b6;
    --tg-leave-deep: #fbcfe8;
    --tg-leave-soft: rgba(219, 39, 119, 0.2);
    --tg-overtime: #fbbf24;
    --tg-overtime-deep: #fcd34d;
    --tg-overtime-soft: rgba(180, 83, 9, 0.2);
    --tg-assignment: #22d3ee;
    --tg-assignment-deep: #67e8f9;
    --tg-assignment-soft: rgba(8, 145, 178, 0.2);
    --tg-invitation: #a78bfa;
    --tg-invitation-deep: #c4b5fd;
    --tg-invitation-soft: rgba(124, 58, 237, 0.2);
    --tg-surface: #2a2a4a;
    --tg-surface-muted: #383964;
    --tg-surface-elevated: #2f3058;
    --tg-border: rgba(255, 255, 255, 0.12);
    --tg-border-strong: rgba(255, 255, 255, 0.18);
    --tg-text: #eaeaff;
    --tg-text-secondary: rgba(234, 234, 255, 0.75);
    --tg-text-muted: rgba(234, 234, 255, 0.55);
    --tg-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.18);
}

html.DarkMode .traffic-guard-invitation-page {
    --tg-hero-accent: var(--tg-invitation);
    --tg-hero-deep: var(--tg-invitation-deep);
}

html.DarkMode .traffic-guard-permit-page {
    --tg-hero-accent: var(--tg-primary);
    --tg-hero-deep: var(--tg-primary-deep);
}

html.DarkMode .traffic-guard-permit-page.tg-permit-page--leave {
    --tg-hero-accent: var(--tg-leave);
    --tg-hero-deep: var(--tg-leave-deep);
}

html.DarkMode .traffic-guard-permit-page.tg-permit-page--overtime {
    --tg-hero-accent: var(--tg-overtime);
    --tg-hero-deep: var(--tg-overtime-deep);
}

html.DarkMode .traffic-guard-permit-page.tg-permit-page--assignment {
    --tg-hero-accent: var(--tg-assignment);
    --tg-hero-deep: var(--tg-assignment-deep);
}

html.DarkMode .traffic-guard-hub-page .tg-hero {
    background: linear-gradient(135deg, #1a1a3c 0%, #24318a 48%, #6c5ffc 100%) !important;
}

html.DarkMode .traffic-guard-invitation-page .tg-hero {
    background: linear-gradient(135deg, #1a1a3c 0%, #3b2763 52%, #7c3aed 100%) !important;
}

html.DarkMode .traffic-guard-permit-page .tg-hero {
    background: linear-gradient(135deg, #1a1a3c 0%, #24318a 52%, #6c5ffc 100%) !important;
}

html.DarkMode .traffic-guard-permit-page.tg-permit-page--leave .tg-hero {
    background: linear-gradient(135deg, #1a1a3c 0%, #4a1942 52%, #db2777 100%) !important;
}

html.DarkMode .traffic-guard-permit-page.tg-permit-page--overtime .tg-hero {
    background: linear-gradient(135deg, #1a1a3c 0%, #4a3412 52%, #b45309 100%) !important;
}

html.DarkMode .traffic-guard-permit-page.tg-permit-page--assignment .tg-hero {
    background: linear-gradient(135deg, #1a1a3c 0%, #164e63 52%, #0891b2 100%) !important;
}

html.DarkMode .traffic-cartable-page {
    --tc-primary: #818cf8;
    --tc-primary-deep: #c7d2fe;
    --tc-primary-soft: rgba(79, 70, 229, 0.2);
    --tc-success: #34d399;
    --tc-success-soft: rgba(5, 150, 105, 0.2);
    --tc-warning: #fbbf24;
    --tc-warning-soft: rgba(217, 119, 6, 0.2);
    --tc-info: #60a5fa;
    --tc-info-soft: rgba(37, 99, 235, 0.2);
    --tc-danger: #f87171;
    --tc-danger-soft: rgba(220, 38, 38, 0.2);
    --tc-danger-border: rgba(248, 113, 113, 0.35);
    --tc-danger-text: #fca5a5;
    --tc-surface: #2a2a4a;
    --tc-surface-muted: #383964;
    --tc-surface-elevated: #2f3058;
    --tc-border: rgba(255, 255, 255, 0.12);
    --tc-border-strong: rgba(255, 255, 255, 0.18);
    --tc-text: #eaeaff;
    --tc-text-secondary: rgba(234, 234, 255, 0.75);
    --tc-text-muted: rgba(234, 234, 255, 0.55);
    --tc-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.18);
    --tc-hero-accent: var(--tc-primary);
    --tc-hero-deep: var(--tc-primary-deep);
}

html.DarkMode .traffic-cartable-page .tc-hero {
    background: linear-gradient(135deg, #1a1a3c 0%, #312e81 52%, #4f46e5 100%) !important;
}

html.DarkMode .traffic-cartable-page .tc-nav__link.is-active {
    background: #eaeaff;
    color: #1a1a3c;
    border-color: #eaeaff;
}

html.DarkMode .traffic-cartable-page .tc-alert--danger {
    background: rgba(248, 113, 113, 0.12) !important;
    border-color: rgba(248, 113, 113, 0.28) !important;
    color: #fca5a5 !important;
}

html.DarkMode .traffic-cartable-page .tc-stat-card {
    background: linear-gradient(180deg, var(--tc-surface-elevated) 0%, var(--tc-surface) 100%) !important;
}

html.DarkMode .traffic-cartable-page .tc-table-wrap .tc-table thead th,
html.DarkMode .traffic-cartable-page .tc-table-wrap .tc-table__head th {
    background: #383964 !important;
    color: rgba(234, 234, 255, 0.75) !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

html.DarkMode .traffic-cartable-page .tc-table-wrap .tc-table tbody td {
    background: #2a2a4a !important;
    color: #eaeaff !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

html.DarkMode .traffic-cartable-page .tc-table-wrap .tc-table tbody tr:hover td {
    background: #2f3058 !important;
}

html.DarkMode .traffic-cartable-page .tc-table-wrap .tc-table tbody tr.tc-row--selected td {
    background: color-mix(in srgb, var(--tc-primary) 18%, #2f3058) !important;
    box-shadow: inset 1px 0 0 var(--tc-primary) !important;
}

html.DarkMode .traffic-cartable-page .tc-table-wrap thead[role=search] th,
html.DarkMode .traffic-cartable-page .tc-table-wrap thead[role=search] input[type=text],
html.DarkMode .traffic-cartable-page .tc-table-wrap .form-control-sm {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #eaeaff !important;
}

html.DarkMode .traffic-cartable-page .tc-table-wrap .pagination {
    background: linear-gradient(180deg, var(--tc-surface-elevated) 0%, var(--tc-surface-muted) 100%) !important;
}

html.DarkMode .traffic-cartable-page .tc-type-chip--leave {
    background: rgba(219, 39, 119, 0.2) !important;
    color: #f472b6 !important;
    border-color: rgba(244, 114, 182, 0.35) !important;
}

html.DarkMode .traffic-cartable-page .tc-type-chip--overtime,
html.DarkMode .traffic-cartable-detail-page .tc-type-chip--overtime {
    background: rgba(180, 83, 9, 0.2) !important;
    color: #fbbf24 !important;
    border-color: rgba(251, 191, 36, 0.35) !important;
}

html.DarkMode .traffic-cartable-page .tc-type-chip--assignment,
html.DarkMode .traffic-cartable-detail-page .tc-type-chip--assignment {
    background: rgba(8, 145, 178, 0.2) !important;
    color: #22d3ee !important;
    border-color: rgba(34, 211, 238, 0.35) !important;
}

html.DarkMode .traffic-cartable-page .tc-type-chip--invitation,
html.DarkMode .traffic-cartable-detail-page .tc-type-chip--invitation {
    background: rgba(124, 58, 237, 0.2) !important;
    color: #a78bfa !important;
    border-color: rgba(167, 139, 250, 0.35) !important;
}

html.DarkMode .traffic-cartable-detail-page .tc-type-chip--leave {
    background: rgba(219, 39, 119, 0.2) !important;
    color: #f472b6 !important;
    border-color: rgba(244, 114, 182, 0.35) !important;
}

html.DarkMode .traffic-cartable-detail-page.tc-detail-page--leave .tc-hero {
    background: linear-gradient(135deg, #1a1a3c 0%, #4a1942 52%, #db2777 100%) !important;
}

html.DarkMode .traffic-cartable-detail-page.tc-detail-page--overtime .tc-hero {
    background: linear-gradient(135deg, #1a1a3c 0%, #4a3412 52%, #b45309 100%) !important;
}

html.DarkMode .traffic-cartable-detail-page.tc-detail-page--assignment .tc-hero {
    background: linear-gradient(135deg, #1a1a3c 0%, #164e63 52%, #0891b2 100%) !important;
}

html.DarkMode .traffic-cartable-detail-page.tc-detail-page--invitation .tc-hero {
    background: linear-gradient(135deg, #1a1a3c 0%, #3b2763 52%, #7c3aed 100%) !important;
}

html.DarkMode .traffic-cartable-detail-page .tc-detail-summary {
    background: linear-gradient(180deg, #2f3058 0%, #2a2a4a 100%) !important;
}

html.DarkMode .traffic-cartable-detail-page .tc-detail-fact {
    background: #2a2a4a !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.DarkMode .traffic-cartable-detail-page .tc-detail-action-banner {
    background: rgba(217, 119, 6, 0.15) !important;
    border-bottom-color: rgba(251, 191, 36, 0.28) !important;
    color: #fcd34d !important;
}

html.DarkMode .traffic-cartable-detail-page .tc-panel {
    background: var(--tc-surface) !important;
}

html.DarkMode .traffic-cartable-detail-page .tc-panel__header {
    background: linear-gradient(180deg, var(--tc-surface-elevated) 0%, var(--tc-surface-muted) 100%) !important;
    color: var(--tc-text) !important;
}

html.DarkMode .traffic-cartable-detail-page .tc-referral-quote {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.15) 0%, #2a2a4a 100%) !important;
    color: rgba(234, 234, 255, 0.75) !important;
}

html.DarkMode .traffic-cartable-detail-page .tc-info-list__item {
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

html.DarkMode .traffic-cartable-detail-page .tc-form-field__textarea {
    background: var(--tc-surface-muted) !important;
    border-color: var(--tc-border) !important;
    color: var(--tc-text) !important;
}

html.DarkMode .tc-history {
    --tc-surface: #2a2a4a;
    --tc-surface-muted: #383964;
    --tc-border: rgba(255, 255, 255, 0.12);
    --tc-text: #eaeaff;
    --tc-text-secondary: rgba(234, 234, 255, 0.75);
    --tc-text-muted: rgba(234, 234, 255, 0.55);
    --tc-primary: #818cf8;
    --tc-primary-soft: rgba(79, 70, 229, 0.2);
    --tc-info-soft: rgba(37, 99, 235, 0.2);
    --tc-success-soft: rgba(5, 150, 105, 0.2);
    --tc-danger-soft: rgba(220, 38, 38, 0.2);
}

html.DarkMode .tc-history__toggle {
    background: linear-gradient(180deg, var(--tc-surface-elevated, #2f3058) 0%, var(--tc-surface-muted) 100%) !important;
}

html.DarkMode .tc-history-table thead th {
    background: #383964 !important;
    color: rgba(234, 234, 255, 0.75) !important;
}

html.DarkMode .tc-history-table tbody td {
    background: #2a2a4a !important;
    color: #eaeaff !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

html.DarkMode .tc-history-table tbody tr:hover td {
    background: #2f3058 !important;
}

html.DarkMode .tc-history-diagram-toolbar {
    background: linear-gradient(180deg, #2f3058 0%, #2a2a4a 100%) !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

html.DarkMode .tc-history-diagram-tool {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(234, 234, 255, 0.75) !important;
}

html.DarkMode .tc-history-diagram-tool:hover {
    background: rgba(79, 70, 229, 0.2) !important;
    border-color: rgba(129, 140, 248, 0.35) !important;
    color: #818cf8 !important;
}

html.DarkMode .tc-permit-summary {
    --tc-surface-muted: #383964;
    --tc-border: rgba(255, 255, 255, 0.12);
    --tc-text: #eaeaff;
    --tc-text-secondary: rgba(234, 234, 255, 0.75);
    --tc-text-muted: rgba(234, 234, 255, 0.55);
    --tc-primary: #818cf8;
    --tc-primary-soft: rgba(79, 70, 229, 0.2);
    --tc-danger: #f87171;
    --tc-danger-soft: rgba(220, 38, 38, 0.2);
}

html.DarkMode .traffic-guard-invitation-page .tg-nav__link.is-active,
html.DarkMode .traffic-guard-permit-page .tg-nav__link.is-active {
    background: #eaeaff;
    color: #1a1a3c;
    border-color: #eaeaff;
}

html.DarkMode .traffic-guard-hub-page .tg-hub-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

html.DarkMode .traffic-guard-invitation-page .tg-alert--danger,
html.DarkMode .traffic-guard-permit-page .tg-alert--danger {
    background: rgba(248, 113, 113, 0.12) !important;
    border-color: rgba(248, 113, 113, 0.28) !important;
    color: #fca5a5 !important;
}

html.DarkMode .traffic-guard-invitation-page .tg-filter .form-select,
html.DarkMode .traffic-guard-permit-page .tg-filter .form-select {
    background-color: var(--tg-surface) !important;
    border-color: var(--tg-border) !important;
    color: var(--tg-text) !important;
}

html.DarkMode .traffic-guard-invitation-page .tg-filter .form-select:disabled,
html.DarkMode .traffic-guard-permit-page .tg-filter .form-select:disabled {
    background-color: var(--tg-surface-muted) !important;
    color: var(--tg-text-muted) !important;
}

html.DarkMode .traffic-guard-invitation-page .tg-stat-card,
html.DarkMode .traffic-guard-permit-page .tg-stat-card {
    background: linear-gradient(180deg, var(--tg-surface-elevated) 0%, var(--tg-surface) 100%) !important;
}

html.DarkMode .traffic-guard-invitation-page .tg-table-wrap .tg-table thead th,
html.DarkMode .traffic-guard-invitation-page .tg-table-wrap .tg-table__head th,
html.DarkMode .traffic-guard-permit-page .tg-table-wrap .tg-table thead th,
html.DarkMode .traffic-guard-permit-page .tg-table-wrap .tg-table__head th {
    background: #383964 !important;
    color: rgba(234, 234, 255, 0.75) !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

html.DarkMode .traffic-guard-invitation-page .tg-table-wrap .tg-table tbody td,
html.DarkMode .traffic-guard-permit-page .tg-table-wrap .tg-table tbody td {
    background: #2a2a4a !important;
    color: #eaeaff !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

html.DarkMode .traffic-guard-invitation-page .tg-table-wrap .tg-table tbody tr:hover td,
html.DarkMode .traffic-guard-permit-page .tg-table-wrap .tg-table tbody tr:hover td {
    background: #2f3058 !important;
}

html.DarkMode .traffic-guard-invitation-page .tg-table-wrap thead[role=search] th,
html.DarkMode .traffic-guard-invitation-page .tg-table-wrap thead[role=search] input[type=text],
html.DarkMode .traffic-guard-invitation-page .tg-table-wrap .form-control-sm,
html.DarkMode .traffic-guard-permit-page .tg-table-wrap thead[role=search] th,
html.DarkMode .traffic-guard-permit-page .tg-table-wrap thead[role=search] input[type=text],
html.DarkMode .traffic-guard-permit-page .tg-table-wrap .form-control-sm {
    background: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #eaeaff !important;
}

html.DarkMode .traffic-guard-invitation-page .tg-table-wrap thead[role=search] input[type=text]:focus,
html.DarkMode .traffic-guard-invitation-page .tg-table-wrap .form-control-sm:focus,
html.DarkMode .traffic-guard-permit-page .tg-table-wrap thead[role=search] input[type=text]:focus,
html.DarkMode .traffic-guard-permit-page .tg-table-wrap .form-control-sm:focus {
    border-color: #8b7cff !important;
    box-shadow: 0 0 0 3px rgba(108, 95, 252, 0.2) !important;
}

html.DarkMode .traffic-guard-invitation-page .tg-table-wrap .pagination,
html.DarkMode .traffic-guard-permit-page .tg-table-wrap .pagination {
    background: linear-gradient(180deg, var(--tg-surface-elevated) 0%, var(--tg-surface-muted) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html.DarkMode .traffic-guard-invitation-page .tg-table-wrap .pagination .page-link,
html.DarkMode .traffic-guard-permit-page .tg-table-wrap .pagination .page-link {
    color: var(--tg-hero-accent);
}

html.DarkMode .traffic-guard-invitation-page .tg-table-wrap .pagination .page-link:hover,
html.DarkMode .traffic-guard-permit-page .tg-table-wrap .pagination .page-link:hover {
    background: rgba(108, 95, 252, 0.18) !important;
    color: #eaeaff !important;
}

html.DarkMode .traffic-guard-invitation-page .tg-table-wrap .pagination .page-item.disabled .page-link,
html.DarkMode .traffic-guard-permit-page .tg-table-wrap .pagination .page-item.disabled .page-link {
    color: rgba(234, 234, 255, 0.55) !important;
    background: var(--tg-surface-muted) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.DarkMode .traffic-guard-invitation-page .tg-table-wrap .pagination .page-item select.page-link,
html.DarkMode .traffic-guard-invitation-page .tg-table-wrap .pagination .page-item:nth-last-child(4) .page-link,
html.DarkMode .traffic-guard-invitation-page .tg-table-wrap .pagination .page-item:nth-last-child(1) .page-link,
html.DarkMode .traffic-guard-invitation-page .tg-table-wrap .pagination .page-item:nth-last-child(3) .page-link,
html.DarkMode .traffic-guard-invitation-page .tg-table-wrap .pagination .page-item:nth-last-child(2) .page-link,
html.DarkMode .traffic-guard-invitation-page .tg-table-wrap .pagination .page-item:nth-last-child(n+5):not(:nth-last-child(4)) .page-link,
html.DarkMode .traffic-guard-permit-page .tg-table-wrap .pagination .page-item select.page-link,
html.DarkMode .traffic-guard-permit-page .tg-table-wrap .pagination .page-item:nth-last-child(4) .page-link,
html.DarkMode .traffic-guard-permit-page .tg-table-wrap .pagination .page-item:nth-last-child(1) .page-link,
html.DarkMode .traffic-guard-permit-page .tg-table-wrap .pagination .page-item:nth-last-child(3) .page-link,
html.DarkMode .traffic-guard-permit-page .tg-table-wrap .pagination .page-item:nth-last-child(2) .page-link,
html.DarkMode .traffic-guard-permit-page .tg-table-wrap .pagination .page-item:nth-last-child(n+5):not(:nth-last-child(4)) .page-link {
    background: var(--tg-surface) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--tg-text) !important;
    box-shadow: none !important;
}

html.DarkMode .traffic-guard-invitation-page .tg-table-wrap .pagination .page-item:nth-last-child(n+5):not(:nth-last-child(4)) .page-link:hover,
html.DarkMode .traffic-guard-permit-page .tg-table-wrap .pagination .page-item:nth-last-child(n+5):not(:nth-last-child(4)) .page-link:hover {
    background: var(--tg-surface) !important;
    color: var(--tg-text) !important;
}

html.DarkMode .traffic-guard-invitation-page .tg-detail-toggle:hover:not(:disabled),
html.DarkMode .traffic-guard-invitation-page .tg-detail-toggle.is-expanded {
    color: var(--tg-invitation-deep) !important;
}

html.DarkMode .traffic-guard-page-header {
    background: linear-gradient(135deg, #383964 0%, #1a1a3c 100%) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28) !important;
}

html.DarkMode .traffic-guard-page-header .btn-outline-light:hover,
html.DarkMode .traffic-guard-page-header .btn-outline-light:focus {
    color: #1a1a3c !important;
}

html.DarkMode .traffic-guard-page-header .traffic-guard-page-header__nav-btn--active {
    color: #1a1a3c !important;
}

html.DarkMode .tg-invitation-detail {
    --tid-accent: #a78bfa;
    --tid-accent-soft: rgba(124, 58, 237, 0.18);
    --tid-accent-border: rgba(167, 139, 250, 0.35);
    --tid-surface: #2a2a4a;
    --tid-surface-muted: #383964;
    --tid-border: rgba(255, 255, 255, 0.12);
    --tid-text: #eaeaff;
    --tid-text-secondary: rgba(234, 234, 255, 0.75);
    --tid-text-muted: rgba(234, 234, 255, 0.55);
    --tid-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 6px 20px rgba(0, 0, 0, 0.18);
    background:
        radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.12) 0%, transparent 42%),
        linear-gradient(180deg, #2f3058 0%, var(--tid-surface) 100%) !important;
}

html.DarkMode .tg-invitation-detail--empty::before {
    color: rgba(167, 139, 250, 0.55);
}

html.DarkMode .tg-invitation-detail__item:nth-child(1) {
    --tid-label-color: #93c5fd;
    --tid-label-bg: rgba(37, 99, 235, 0.18);
    --tid-label-border: rgba(147, 197, 253, 0.35);
    --tid-note-accent: #60a5fa;
}

html.DarkMode .tg-invitation-detail__item:nth-child(2) {
    --tid-label-color: #5eead4;
    --tid-label-bg: rgba(13, 148, 136, 0.18);
    --tid-label-border: rgba(94, 234, 212, 0.35);
    --tid-note-accent: #2dd4bf;
}

html.DarkMode .tg-invitation-detail__item:nth-child(3) {
    --tid-label-color: #a5b4fc;
    --tid-label-bg: rgba(79, 70, 229, 0.18);
    --tid-label-border: rgba(165, 180, 252, 0.35);
    --tid-note-accent: #818cf8;
}

html.DarkMode .tg-invitation-detail__item:nth-child(4) {
    --tid-label-color: #fcd34d;
    --tid-label-bg: rgba(217, 119, 6, 0.18);
    --tid-label-border: rgba(252, 211, 77, 0.35);
    --tid-note-accent: #fbbf24;
}

html.DarkMode .tg-invitation-detail__item:nth-child(5) {
    --tid-label-color: #fda4af;
    --tid-label-bg: rgba(225, 29, 72, 0.18);
    --tid-label-border: rgba(253, 164, 175, 0.35);
    --tid-note-accent: #fb7185;
}

html.DarkMode .tg-invitation-detail__item:nth-child(6) {
    --tid-label-color: #67e8f9;
    --tid-label-bg: rgba(8, 145, 178, 0.18);
    --tid-label-border: rgba(103, 232, 249, 0.35);
    --tid-note-accent: #22d3ee;
}

html.DarkMode .tg-invitation-detail__item:nth-child(7) {
    --tid-label-color: #6ee7b7;
    --tid-label-bg: rgba(5, 150, 105, 0.18);
    --tid-label-border: rgba(110, 231, 183, 0.35);
    --tid-note-accent: #34d399;
}

html.DarkMode .tg-invitation-detail__note {
    background: linear-gradient(90deg, var(--tid-label-bg) 0%, rgba(56, 57, 100, 0.85) 100%) !important;
}

html.DarkMode .tg-invitation-detail-modal__guest {
    background: rgba(124, 58, 237, 0.14);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

html.DarkMode .tg-invitation-detail-modal__guest-label {
    color: #c4b5fd;
    background: #383964;
    border-color: rgba(167, 139, 250, 0.35);
}

html.DarkMode .tg-invitation-detail-modal__guest-name {
    color: #eaeaff;
}

html.DarkMode .tg-invitation-detail-modal__actions {
    border-top-color: rgba(255, 255, 255, 0.12);
}

html.DarkMode .tg-invitation-detail-modal__close-btn {
    background: #383964;
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(234, 234, 255, 0.85);
}

html.DarkMode .tg-invitation-detail-modal__close-btn:hover {
    background: #2f3058;
    border-color: rgba(255, 255, 255, 0.28);
    color: #eaeaff;
}

/******** Traffic Cardex — dark mode (comfort palette, aligned with .DarkMode:root) **********/

html.DarkMode .traffic-cardex-page {
    --tc-primary: #9aa4ff;
    --tc-primary-dark: #7c89e8;
    --tc-primary-deep: #b8b8dc;
    --tc-primary-soft: rgba(154, 164, 255, 0.12);
    --tc-success: #6bc9a8;
    --tc-success-soft: rgba(107, 201, 168, 0.14);
    --tc-warning: #e0b060;
    --tc-warning-soft: rgba(224, 176, 96, 0.14);
    --tc-danger: #e08080;
    --tc-danger-soft: rgba(224, 128, 128, 0.14);
    --tc-surface: #2a2a4a;
    --tc-surface-muted: #32335c;
    --tc-surface-elevated: #383964;
    --tc-surface-input: #3a3b66;
    --tc-border: rgba(255, 255, 255, 0.08);
    --tc-border-strong: rgba(255, 255, 255, 0.14);
    --tc-text: #d8d8f0;
    --tc-text-secondary: #b0b0cc;
    --tc-text-muted: #8888a8;
    --tc-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 4px 14px rgba(0, 0, 0, 0.14);
    --tc-shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.24);
}

html.DarkMode .traffic-cardex-page .tc-hero {
    background: linear-gradient(135deg, #1a1a3c 0%, #282850 52%, #383964 100%) !important;
}

html.DarkMode .traffic-cardex-page .tc-alert--danger {
    background: rgba(224, 128, 128, 0.12) !important;
    border-color: rgba(224, 128, 128, 0.28) !important;
    color: #e8b0b0 !important;
}

html.DarkMode .traffic-cardex-page .tc-segmented {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.16);
}

html.DarkMode .traffic-cardex-page .tc-nav-btn {
    background: var(--tc-surface-muted);
    color: var(--tc-text-secondary);
}

html.DarkMode .traffic-cardex-page .tc-nav-btn:hover:not(:disabled) {
    background: var(--tc-primary-soft);
    color: var(--tc-primary-deep);
}

html.DarkMode .traffic-cardex-page .tc-segmented__btn:hover:not(:disabled):not(.is-active) {
    background: var(--tc-primary-soft);
    color: var(--tc-primary-deep);
}

html.DarkMode .traffic-cardex-page .tc-date-field__input {
    background: var(--tc-surface-input);
    color: var(--tc-text);
}

html.DarkMode .traffic-cardex-page .tc-date-field__input:focus {
    background: var(--tc-surface-elevated);
    box-shadow: 0 0 0 3px rgba(154, 164, 255, 0.18);
}

html.DarkMode .traffic-cardex-page .tc-toolbar__dates {
    background: var(--tc-surface-muted);
    border-color: var(--tc-border);
}

html.DarkMode .traffic-cardex-page .tc-stat-card {
    background: var(--tc-surface-muted) !important;
    border-color: var(--tc-border) !important;
    box-shadow: var(--tc-shadow) !important;
    --tc-stat-icon-bg: rgba(154, 164, 255, 0.12);
    --tc-stat-icon-color: #a8b4e8;
}

html.DarkMode .traffic-cardex-page .tc-stat-card:hover {
    background: var(--tc-surface-elevated) !important;
    box-shadow: var(--tc-shadow-lg) !important;
}

html.DarkMode .traffic-cardex-page .tc-stat-card--overtime {
    --tc-stat-icon-bg: rgba(224, 176, 96, 0.14);
    --tc-stat-icon-color: #d8b878;
}

html.DarkMode .traffic-cardex-page .tc-stat-card--notset {
    --tc-stat-icon-bg: rgba(224, 128, 128, 0.14);
    --tc-stat-icon-color: #d89898;
}

html.DarkMode .traffic-cardex-page .tc-stat-card--leave {
    --tc-stat-icon-bg: rgba(200, 152, 184, 0.14);
    --tc-stat-icon-color: #c898b8;
}

html.DarkMode .traffic-cardex-page .tc-stat-card--assignment {
    --tc-stat-icon-bg: rgba(120, 184, 200, 0.14);
    --tc-stat-icon-color: #88b8c8;
}

html.DarkMode .traffic-cardex-page .tc-stat-card__icon {
    box-shadow: none;
}

html.DarkMode .traffic-cardex-page .tc-stat-card__value {
    text-shadow: none !important;
    color: var(--tc-text);
}

html.DarkMode .traffic-cardex-page .tc-stat-card__label {
    color: var(--tc-text-secondary);
}

html.DarkMode .traffic-cardex-page .tc-empty-state {
    background: var(--tc-surface-muted) !important;
    border-color: var(--tc-border-strong) !important;
}

html.DarkMode .traffic-cardex-page .tc-empty-state__icon {
    color: var(--tc-text-muted);
}

html.DarkMode .traffic-cardex-page .tc-empty-state__title {
    color: var(--tc-text);
}

html.DarkMode .traffic-cardex-page .tc-empty-state__hint {
    color: var(--tc-text-muted);
}

html.DarkMode .traffic-cardex-page .tc-week__header {
    color: var(--tc-text) !important;
    background: var(--tc-surface-muted) !important;
}

html.DarkMode .traffic-cardex-page .tc-row--today > td {
    background: linear-gradient(90deg, rgba(154, 164, 255, 0.1) 0%, rgba(154, 164, 255, 0.03) 100%) !important;
}

html.DarkMode .traffic-cardex-page .tc-row--off .tc-text-off {
    color: #d89898 !important;
}

html.DarkMode .traffic-cardex-page .tc-permit-chip {
    background: var(--tc-surface-muted) !important;
    border-color: var(--tc-border) !important;
}

html.DarkMode .traffic-cardex-page .tc-permit-chip:hover {
    background: var(--tc-primary-soft) !important;
    box-shadow: none;
}

html.DarkMode .traffic-cardex-page .tc-permit-chip__type {
    color: var(--tc-primary-deep);
}

html.DarkMode .traffic-cardex-page .tc-permit-chip__time {
    color: var(--tc-text-secondary);
}

html.DarkMode .traffic-cardex-page .tc-permit-chip__state {
    background: var(--tc-surface-elevated);
}

html.DarkMode .traffic-cardex-page .tc-context-menu__list {
    background: var(--tc-surface) !important;
    border-color: var(--tc-border) !important;
    box-shadow: var(--tc-shadow-lg) !important;
}

html.DarkMode .traffic-cardex-page .tc-context-menu__item {
    color: var(--tc-text);
}

html.DarkMode .traffic-cardex-page .tc-context-menu__item:hover {
    background: var(--tc-primary-soft);
    color: var(--tc-primary-deep);
}

html.DarkMode .traffic-cardex-page .tc-spinner {
    border-color: var(--tc-border);
    border-top-color: var(--tc-primary);
}

/* DayCardexBar — timeline & punches */
html.DarkMode .dcb {
    --dcb-border: rgba(255, 255, 255, 0.08);
    --dcb-muted: #8888a8;
    --dcb-in: #6bc9a8;
    --dcb-in-bg: rgba(107, 201, 168, 0.14);
    --dcb-out: #a8b4e8;
    --dcb-out-bg: rgba(168, 180, 232, 0.14);
}

html.DarkMode .dcb-track {
    background: linear-gradient(180deg, #32335c 0%, #2a2a4a 100%) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.16) !important;
}

html.DarkMode .dcb-punch--in {
    border-color: rgba(107, 201, 168, 0.28) !important;
}

html.DarkMode .dcb-punch--out {
    border-color: rgba(168, 180, 232, 0.28) !important;
}

html.DarkMode .dcb-punch:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

html.DarkMode .dcb-track--empty {
    background: transparent !important;
    border-color: transparent !important;
}

html.DarkMode .dcb-empty__text {
    opacity: 0.5;
}

html.DarkMode .dcb-segment:hover {
    filter: brightness(1.04);
}

/* Segment states — muted, distinguishable */
html.DarkMode .dcb-seg--movazafi {
    background: #454868 !important;
    color: #c8c8dc !important;
    box-shadow: #383850 0 -10px 4px inset !important;
}

html.DarkMode .dcb-seg--off {
    background: #3a3d58 !important;
    color: #9898b0 !important;
}

html.DarkMode .dcb-seg--hozor {
    background: #3a5c50 !important;
    color: #b8dcc8 !important;
    box-shadow: #2e4a40 0 -10px 4px inset !important;
}

html.DarkMode .dcb-seg--all {
    background: #3a6a58 !important;
    color: #c8e8d8 !important;
}

html.DarkMode .dcb-seg--not-complete {
    background: #4a5088 !important;
    color: #c8c8e8 !important;
}

html.DarkMode .dcb-seg--incomplete {
    background: #7a4050 !important;
    color: #e8c0c8 !important;
}

html.DarkMode .dcb-seg--overtime {
    background: #5a5078 !important;
    color: #d8d0e8 !important;
}

html.DarkMode .dcb-seg--assignment {
    background: #3a6070 !important;
    color: #b8d8e8 !important;
    box-shadow: #304858 0 -10px 4px inset !important;
}

html.DarkMode .dcb-seg--leave {
    background: #6a4868 !important;
    color: #e8c8e0 !important;
    box-shadow: #583848 0 -10px 4px inset !important;
}

html.DarkMode .dcb-seg--notset-none {
    background: #7a3848 !important;
    color: #f0d0d8 !important;
}

html.DarkMode .dcb-seg--notset-assignment {
    background: #3a5878 !important;
    color: #b8d0e8 !important;
    box-shadow: #304860 0 -10px 4px inset !important;
}

html.DarkMode .dcb-seg--notset-leave {
    background: #684858 !important;
    color: #e8c0d0 !important;
    box-shadow: #583848 0 -10px 4px inset !important;
}

html.DarkMode .dcb-seg--notset-other {
    background: #584878 !important;
    color: #d8c8e8 !important;
}

html.DarkMode .dcb-seg--otwork-pending {
    background: #6a5838 !important;
    color: #e8dcc0 !important;
    box-shadow: #584830 0 -10px 4px inset !important;
}

html.DarkMode .dcb-seg--otwork-approved {
    background: #3a6048 !important;
    color: #b8e0c8 !important;
    box-shadow: #304838 0 -10px 4px inset !important;
}

html.DarkMode .blazored-modal.size-traffic-cardex-leave,
html.DarkMode .blazored-modal.size-traffic-cardex-overtime,
html.DarkMode .blazored-modal.size-traffic-cardex-assignment {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important;
}

/* TrafficCardex Leave Modal — dark mode */
html.DarkMode .blazored-modal.size-traffic-cardex-leave .tclm {
    --tclm-navy: #d8d8f0;
    --tclm-mint: rgba(107, 201, 168, 0.14);
    --tclm-mint-border: rgba(107, 201, 168, 0.28);
    --tclm-border: rgba(255, 255, 255, 0.08);
    --tclm-text-muted: #8888a8;
    --tclm-icon-green: #6bc9a8;
    --tclm-icon-yellow: #e0b060;
}

html.DarkMode .blazored-modal.size-traffic-cardex-leave .tclm__header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html.DarkMode .blazored-modal.size-traffic-cardex-leave .tclm__title {
    color: #d8d8f0;
}

html.DarkMode .blazored-modal.size-traffic-cardex-leave .tclm__type-label {
    color: #8888a8;
}

html.DarkMode .blazored-modal.size-traffic-cardex-leave .tclm__type-option.is-active .tclm__type-label {
    color: #d8d8f0;
}

html.DarkMode .blazored-modal.size-traffic-cardex-leave .tclm__type-icon--hourly {
    color: #6bc9a8;
}

html.DarkMode .blazored-modal.size-traffic-cardex-leave .tclm__type-icon--daily {
    color: #e0b060;
}

html.DarkMode .blazored-modal.size-traffic-cardex-leave .tclm__type-option.is-active .tclm__type-icon--hourly {
    background: rgba(107, 201, 168, 0.14) !important;
    box-shadow: inset 0 0 0 1px rgba(107, 201, 168, 0.28) !important;
}

html.DarkMode .blazored-modal.size-traffic-cardex-leave .tclm__type-option.is-active .tclm__type-icon--daily {
    background: rgba(224, 176, 96, 0.14) !important;
    box-shadow: inset 0 0 0 1px rgba(224, 176, 96, 0.28) !important;
}

html.DarkMode .blazored-modal.size-traffic-cardex-leave .tclm__label {
    color: #b0b0cc;
}

html.DarkMode .blazored-modal.size-traffic-cardex-leave .tclm__footer {
    border-top-color: rgba(255, 255, 255, 0.08);
}

html.DarkMode .blazored-modal.size-traffic-cardex-leave input.form-control.tclm__input,
html.DarkMode .blazored-modal.size-traffic-cardex-leave textarea.form-control.tclm__input {
    background-color: #3a3b66 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #d8d8f0 !important;
}

html.DarkMode .blazored-modal.size-traffic-cardex-leave input.form-control.tclm__input:focus,
html.DarkMode .blazored-modal.size-traffic-cardex-leave textarea.form-control.tclm__input:focus {
    border-color: #9aa4ff !important;
    box-shadow: 0 0 0 3px rgba(154, 164, 255, 0.16) !important;
}

html.DarkMode .blazored-modal.size-traffic-cardex-leave input.form-control.tclm__input:disabled,
html.DarkMode .blazored-modal.size-traffic-cardex-leave textarea.form-control.tclm__input:disabled {
    background-color: #32335c !important;
    color: #8888a8 !important;
}

html.DarkMode .blazored-modal.size-traffic-cardex-leave input.form-control.tclm__input::placeholder,
html.DarkMode .blazored-modal.size-traffic-cardex-leave textarea.form-control.tclm__input::placeholder {
    color: #7878a0;
    opacity: 1;
}

html.DarkMode .blazored-modal.size-traffic-cardex-leave .btn-red-light {
    background: #32335c;
    border-color: rgba(255, 255, 255, 0.08);
    color: #b0b0cc;
}

html.DarkMode .blazored-modal.size-traffic-cardex-leave .btn-red-light:hover:not(:disabled) {
    background: rgba(224, 128, 128, 0.14);
    border-color: rgba(224, 128, 128, 0.28);
    color: #e08080;
}

/* TrafficCardex OverTime Modal — dark mode */
html.DarkMode .blazored-modal.size-traffic-cardex-overtime .tcom {
    --tcom-navy: #d8d8f0;
    --tcom-mint: rgba(107, 201, 168, 0.14);
    --tcom-mint-border: rgba(107, 201, 168, 0.28);
    --tcom-border: rgba(255, 255, 255, 0.08);
    --tcom-text-muted: #8888a8;
    --tcom-icon-brown: #b8a898;
    --tcom-icon-yellow: #e0b060;
    --tcom-notice-bg: rgba(224, 176, 96, 0.1);
    --tcom-notice-border: rgba(224, 176, 96, 0.24);
    --tcom-notice-text: #d8c080;
}

html.DarkMode .blazored-modal.size-traffic-cardex-overtime .tcom__header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html.DarkMode .blazored-modal.size-traffic-cardex-overtime .tcom__title {
    color: #d8d8f0;
}

html.DarkMode .blazored-modal.size-traffic-cardex-overtime .tcom__type-label {
    color: #8888a8;
}

html.DarkMode .blazored-modal.size-traffic-cardex-overtime .tcom__type-option.is-active .tcom__type-label {
    color: #d8d8f0;
}

html.DarkMode .blazored-modal.size-traffic-cardex-overtime .tcom__type-icon--normal {
    color: #b8a898;
}

html.DarkMode .blazored-modal.size-traffic-cardex-overtime .tcom__type-icon--holiday {
    color: #e0b060;
}

html.DarkMode .blazored-modal.size-traffic-cardex-overtime .tcom__type-option.is-active .tcom__type-icon--normal {
    background: rgba(107, 201, 168, 0.14) !important;
    box-shadow: inset 0 0 0 1px rgba(107, 201, 168, 0.28) !important;
}

html.DarkMode .blazored-modal.size-traffic-cardex-overtime .tcom__type-option.is-active .tcom__type-icon--holiday {
    background: rgba(224, 176, 96, 0.14) !important;
    box-shadow: inset 0 0 0 1px rgba(224, 176, 96, 0.28) !important;
}

html.DarkMode .blazored-modal.size-traffic-cardex-overtime .tcom__notice {
    background: rgba(224, 176, 96, 0.1) !important;
    border-color: rgba(224, 176, 96, 0.24) !important;
}

html.DarkMode .blazored-modal.size-traffic-cardex-overtime .tcom__notice-title,
html.DarkMode .blazored-modal.size-traffic-cardex-overtime .tcom__notice-text {
    color: #d8c080;
}

html.DarkMode .blazored-modal.size-traffic-cardex-overtime .tcom__label {
    color: #b0b0cc;
}

html.DarkMode .blazored-modal.size-traffic-cardex-overtime .tcom__footer {
    border-top-color: rgba(255, 255, 255, 0.08);
}

html.DarkMode .blazored-modal.size-traffic-cardex-overtime input.form-control.tcom__input,
html.DarkMode .blazored-modal.size-traffic-cardex-overtime textarea.form-control.tcom__input {
    background-color: #3a3b66 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #d8d8f0 !important;
}

html.DarkMode .blazored-modal.size-traffic-cardex-overtime input.form-control.tcom__input:focus,
html.DarkMode .blazored-modal.size-traffic-cardex-overtime textarea.form-control.tcom__input:focus {
    border-color: #9aa4ff !important;
    box-shadow: 0 0 0 3px rgba(154, 164, 255, 0.16) !important;
}

html.DarkMode .blazored-modal.size-traffic-cardex-overtime input.form-control.tcom__input:disabled,
html.DarkMode .blazored-modal.size-traffic-cardex-overtime textarea.form-control.tcom__input:disabled {
    background-color: #32335c !important;
    color: #8888a8 !important;
}

html.DarkMode .blazored-modal.size-traffic-cardex-overtime input.form-control.tcom__input::placeholder,
html.DarkMode .blazored-modal.size-traffic-cardex-overtime textarea.form-control.tcom__input::placeholder {
    color: #7878a0;
    opacity: 1;
}

html.DarkMode .blazored-modal.size-traffic-cardex-overtime .btn-red-light {
    background: #32335c;
    border-color: rgba(255, 255, 255, 0.08);
    color: #b0b0cc;
}

html.DarkMode .blazored-modal.size-traffic-cardex-overtime .btn-red-light:hover:not(:disabled) {
    background: rgba(224, 128, 128, 0.14);
    border-color: rgba(224, 128, 128, 0.28);
    color: #e08080;
}

/* TrafficCardex Assignment Modal — dark mode */
html.DarkMode .blazored-modal.size-traffic-cardex-assignment .tcam {
    --tcam-navy: #d8d8f0;
    --tcam-mint: rgba(107, 201, 168, 0.14);
    --tcam-mint-border: rgba(107, 201, 168, 0.28);
    --tcam-border: rgba(255, 255, 255, 0.08);
    --tcam-text-muted: #8888a8;
    --tcam-icon-green: #6bc9a8;
    --tcam-icon-yellow: #e0b060;
}

html.DarkMode .blazored-modal.size-traffic-cardex-assignment .tcam__header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html.DarkMode .blazored-modal.size-traffic-cardex-assignment .tcam__title {
    color: #d8d8f0;
}

html.DarkMode .blazored-modal.size-traffic-cardex-assignment .tcam__type-label {
    color: #8888a8;
}

html.DarkMode .blazored-modal.size-traffic-cardex-assignment .tcam__type-option.is-active .tcam__type-label {
    color: #d8d8f0;
}

html.DarkMode .blazored-modal.size-traffic-cardex-assignment .tcam__type-icon--hourly {
    color: #6bc9a8;
}

html.DarkMode .blazored-modal.size-traffic-cardex-assignment .tcam__type-icon--daily {
    color: #e0b060;
}

html.DarkMode .blazored-modal.size-traffic-cardex-assignment .tcam__type-option.is-active .tcam__type-icon--hourly {
    background: rgba(107, 201, 168, 0.14) !important;
    box-shadow: inset 0 0 0 1px rgba(107, 201, 168, 0.28) !important;
}

html.DarkMode .blazored-modal.size-traffic-cardex-assignment .tcam__type-option.is-active .tcam__type-icon--daily {
    background: rgba(224, 176, 96, 0.14) !important;
    box-shadow: inset 0 0 0 1px rgba(224, 176, 96, 0.28) !important;
}

html.DarkMode .blazored-modal.size-traffic-cardex-assignment .tcam__label {
    color: #b0b0cc;
}

html.DarkMode .blazored-modal.size-traffic-cardex-assignment .tcam__footer {
    border-top-color: rgba(255, 255, 255, 0.08);
}

html.DarkMode .blazored-modal.size-traffic-cardex-assignment input.form-control.tcam__input,
html.DarkMode .blazored-modal.size-traffic-cardex-assignment textarea.form-control.tcam__input {
    background-color: #3a3b66 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #d8d8f0 !important;
}

html.DarkMode .blazored-modal.size-traffic-cardex-assignment input.form-control.tcam__input:focus,
html.DarkMode .blazored-modal.size-traffic-cardex-assignment textarea.form-control.tcam__input:focus {
    border-color: #9aa4ff !important;
    box-shadow: 0 0 0 3px rgba(154, 164, 255, 0.16) !important;
}

html.DarkMode .blazored-modal.size-traffic-cardex-assignment input.form-control.tcam__input:disabled,
html.DarkMode .blazored-modal.size-traffic-cardex-assignment textarea.form-control.tcam__input:disabled {
    background-color: #32335c !important;
    color: #8888a8 !important;
}

html.DarkMode .blazored-modal.size-traffic-cardex-assignment input.form-control.tcam__input::placeholder,
html.DarkMode .blazored-modal.size-traffic-cardex-assignment textarea.form-control.tcam__input::placeholder {
    color: #7878a0;
    opacity: 1;
}

html.DarkMode .blazored-modal.size-traffic-cardex-assignment .btn-red-light {
    background: #32335c;
    border-color: rgba(255, 255, 255, 0.08);
    color: #b0b0cc;
}

html.DarkMode .blazored-modal.size-traffic-cardex-assignment .btn-red-light:hover:not(:disabled) {
    background: rgba(224, 128, 128, 0.14);
    border-color: rgba(224, 128, 128, 0.28);
    color: #e08080;
}

/******** Salary Slip — dark mode **********/

html.DarkMode .salary-slip-page {
    --ss-page-surface: #2a2a4a;
    --ss-page-surface-muted: #32335c;
    --ss-page-surface-elevated: #383964;
    --ss-page-surface-input: #3a3b66;
    --ss-page-border: rgba(255, 255, 255, 0.08);
    --ss-page-border-strong: rgba(255, 255, 255, 0.14);
    --ss-page-text: #d8d8f0;
    --ss-page-text-secondary: #b0b0cc;
    --ss-page-text-muted: #8888a8;
    --ss-page-primary: #9aa4ff;
    --ss-page-primary-dark: #b8b8dc;
    --ss-page-primary-soft: rgba(154, 164, 255, 0.12);
    --ss-page-hero: linear-gradient(135deg, #1a1a3c 0%, #282850 52%, #383964 100%);
    --ss-page-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 4px 14px rgba(0, 0, 0, 0.14);
}

html.DarkMode .salary-slip-page .purple_bg {
    background: var(--ss-page-primary-soft) !important;
    border-color: rgba(154, 164, 255, 0.22) !important;
}

html.DarkMode .salary-slip-page .form-header {
    background: var(--ss-page-hero) !important;
    box-shadow: var(--ss-page-shadow) !important;
}

html.DarkMode .salary-slip-page .text-muted,
html.DarkMode .salary-slip-page .salary-slip-init-loading .text-muted {
    color: var(--ss-page-text-muted) !important;
}

html.DarkMode .salary-slip-page .text-purple {
    color: var(--ss-page-primary) !important;
}

html.DarkMode .salary-slip-page .alert-danger {
    background: rgba(224, 128, 128, 0.12) !important;
    border-color: rgba(224, 128, 128, 0.28) !important;
    color: #e8b0b0 !important;
}

html.DarkMode .salary-slip-page .alert-warning {
    background: rgba(224, 176, 96, 0.1) !important;
    border-color: rgba(224, 176, 96, 0.24) !important;
    color: #d8c080 !important;
}

/* OTP card */
html.DarkMode .salary-slip-page .salary-slip-otp-card {
    background: var(--ss-page-surface) !important;
    border-color: var(--ss-page-border) !important;
    box-shadow: var(--ss-page-shadow) !important;
}

html.DarkMode .salary-slip-page .salary-slip-otp-icon {
    background: var(--ss-page-hero) !important;
    box-shadow: 0 4px 14px rgba(154, 164, 255, 0.2) !important;
}

html.DarkMode .salary-slip-page .salary-slip-otp-title {
    color: var(--ss-page-text) !important;
}

html.DarkMode .salary-slip-page .salary-slip-otp-desc {
    color: var(--ss-page-text-secondary) !important;
}

html.DarkMode .salary-slip-page .salary-slip-otp-phone {
    background: var(--ss-page-surface-muted) !important;
    color: var(--ss-page-text) !important;
}

html.DarkMode .salary-slip-page .salary-slip-otp-digits-label {
    color: var(--ss-page-text-muted) !important;
}

html.DarkMode .salary-slip-page .salary-slip-otp-digit {
    background: var(--ss-page-surface-input) !important;
    border-color: var(--ss-page-border) !important;
    color: var(--ss-page-text) !important;
}

html.DarkMode .salary-slip-page .salary-slip-otp-digit:focus {
    border-color: var(--ss-page-primary) !important;
    box-shadow: 0 0 0 3px rgba(154, 164, 255, 0.16) !important;
}

html.DarkMode .salary-slip-page .salary-slip-otp-digit:disabled {
    background: var(--ss-page-surface-muted) !important;
    opacity: 0.65;
}

html.DarkMode .salary-slip-page .btn-outline-secondary {
    color: var(--ss-page-text-secondary);
    border-color: var(--ss-page-border-strong);
}

html.DarkMode .salary-slip-page .btn-outline-secondary:hover:not(:disabled) {
    background: var(--ss-page-surface-muted);
    color: var(--ss-page-text);
    border-color: var(--ss-page-border-strong);
}

/* Period selection */
html.DarkMode .salary-slip-page .cardbox {
    background: var(--ss-page-surface) !important;
    box-shadow: var(--ss-page-shadow) !important;
    border-color: var(--ss-page-border) !important;
}

html.DarkMode .salary-slip-page .text-info {
    color: #78b8c8 !important;
}

html.DarkMode .salary-slip-page .salary-slip-period-picker {
    background: var(--ss-page-surface-muted) !important;
    border-color: var(--ss-page-border) !important;
    box-shadow: var(--ss-page-shadow) !important;
    border-top-color: var(--ss-page-primary) !important;
}

html.DarkMode .salary-slip-page .salary-slip-period-picker-icon {
    background: var(--ss-page-hero) !important;
    box-shadow: 0 4px 12px rgba(154, 164, 255, 0.18) !important;
}

html.DarkMode .salary-slip-page .salary-slip-period-picker-title {
    color: var(--ss-page-text) !important;
}

html.DarkMode .salary-slip-page .salary-slip-period-picker-subtitle {
    color: var(--ss-page-text-muted) !important;
}

html.DarkMode .salary-slip-page .salary-slip-period-preview {
    background: var(--ss-page-primary-soft) !important;
    border-color: rgba(154, 164, 255, 0.22) !important;
}

html.DarkMode .salary-slip-page .salary-slip-period-preview-label {
    color: var(--ss-page-text-muted) !important;
}

html.DarkMode .salary-slip-page .salary-slip-period-preview-value {
    color: var(--ss-page-primary) !important;
}

html.DarkMode .salary-slip-page .salary-slip-period-field-label {
    color: var(--ss-page-text) !important;
}

html.DarkMode .salary-slip-page .salary-slip-period-field-label i {
    color: var(--ss-page-primary) !important;
}

html.DarkMode .salary-slip-page .salary-slip-period-year-select {
    background-color: var(--ss-page-surface-input) !important;
    border-color: var(--ss-page-border) !important;
    color: var(--ss-page-text) !important;
}

html.DarkMode .salary-slip-page .salary-slip-period-year-select:focus {
    border-color: var(--ss-page-primary) !important;
    box-shadow: 0 0 0 3px rgba(154, 164, 255, 0.16) !important;
}

html.DarkMode .salary-slip-page .salary-slip-month-chip {
    background: var(--ss-page-surface-input) !important;
    border-color: var(--ss-page-border) !important;
    color: var(--ss-page-text) !important;
}

html.DarkMode .salary-slip-page .salary-slip-month-chip:hover:not(:disabled):not(.is-selected) {
    border-color: rgba(154, 164, 255, 0.35) !important;
    background: var(--ss-page-primary-soft) !important;
}

html.DarkMode .salary-slip-page .salary-slip-month-chip.is-selected {
    background: var(--ss-page-hero) !important;
    border-color: var(--ss-page-primary) !important;
    color: #fff !important;
    box-shadow: 0 3px 12px rgba(154, 164, 255, 0.2) !important;
}

html.DarkMode .salary-slip-page .salary-slip-period-quick {
    background: var(--ss-page-surface-muted) !important;
    border-color: var(--ss-page-border) !important;
    box-shadow: var(--ss-page-shadow) !important;
}

html.DarkMode .salary-slip-page .salary-slip-period-quick-header {
    color: var(--ss-page-text) !important;
    border-bottom-color: var(--ss-page-border) !important;
}

html.DarkMode .salary-slip-page .salary-slip-period-chip {
    background: rgba(107, 201, 168, 0.1) !important;
    border-color: rgba(107, 201, 168, 0.24) !important;
    color: #b8e0c8 !important;
}

html.DarkMode .salary-slip-page .salary-slip-period-chip:hover:not(:disabled) {
    background: linear-gradient(180deg, #3a7a52 0%, #2d5a3d 100%) !important;
    color: #fff !important;
    border-color: #6bc9a8 !important;
}

html.DarkMode .salary-slip-page .salary-slip-empty-state {
    color: var(--ss-page-text-muted) !important;
}

/* Unified toolbar header */
html.DarkMode .salary-slip-page .salary-slip-unified-header {
    background: var(--ss-page-hero) !important;
    box-shadow: var(--ss-page-shadow) !important;
}

html.DarkMode .salary-slip-page .ssuh-compare-row {
    background: rgba(0, 0, 0, 0.18) !important;
    border-top-color: var(--ss-page-border) !important;
}

html.DarkMode .salary-slip-page .ssuh-compare-error {
    color: #e8b0b0 !important;
}

/* Content & panels */
html.DarkMode .salary-slip-page .salary-slip-loading-overlay {
    background: rgba(42, 42, 74, 0.82) !important;
}

html.DarkMode .salary-slip-page .salary-slip-panel-card {
    background: var(--ss-page-surface-muted) !important;
    border-color: var(--ss-page-border) !important;
    box-shadow: var(--ss-page-shadow) !important;
}

html.DarkMode .salary-slip-page .salary-slip-panel-card--current {
    border-top-color: var(--ss-page-primary) !important;
}

html.DarkMode .salary-slip-page .salary-slip-panel-card--compare {
    border-top-color: #78b8c8 !important;
}

html.DarkMode .salary-slip-page .salary-slip-compare-placeholder {
    color: var(--ss-page-text-muted) !important;
}

/* Salary slip panel */
html.DarkMode .salary-slip-panel {
    --ssp-purple: #9aa4ff;
    --ssp-purple-dark: #b8b8dc;
    --ssp-purple-soft: rgba(154, 164, 255, 0.12);
    --ssp-green: #6bc9a8;
    --ssp-green-soft: rgba(107, 201, 168, 0.14);
    --ssp-red: #e08080;
    --ssp-red-soft: rgba(224, 128, 128, 0.14);
    --ssp-border: rgba(255, 255, 255, 0.08);
    --ssp-text-muted: #8888a8;
}

html.DarkMode .salary-slip-panel .ssp-compare-label {
    color: var(--ssp-purple) !important;
    background: var(--ssp-purple-soft) !important;
    border-color: rgba(154, 164, 255, 0.22) !important;
}

html.DarkMode .salary-slip-panel .ssp-print-title {
    color: var(--ssp-purple-dark) !important;
}

html.DarkMode .salary-slip-panel .ssp-print-meta-item {
    color: var(--ss-page-text-secondary, #b0b0cc) !important;
}

html.DarkMode .salary-slip-panel .ssp-print-meta-item i {
    color: var(--ssp-purple) !important;
}

html.DarkMode .salary-slip-panel .ssp-employee-card {
    background: var(--ss-page-surface-muted, #32335c) !important;
    border-color: var(--ssp-border) !important;
    box-shadow: var(--ss-page-shadow, 0 1px 3px rgba(0, 0, 0, 0.18)) !important;
}

html.DarkMode .salary-slip-panel .ssp-employee-avatar {
    background: linear-gradient(135deg, #282850 0%, #383964 100%) !important;
    box-shadow: 0 3px 10px rgba(154, 164, 255, 0.18) !important;
}

html.DarkMode .salary-slip-panel .ssp-employee-top {
    border-bottom-color: var(--ssp-border) !important;
}

html.DarkMode .salary-slip-panel .ssp-employee-name {
    color: var(--ssp-purple-dark) !important;
}

html.DarkMode .salary-slip-panel .ssp-attendance-item {
    color: var(--ssp-purple-dark) !important;
    background: var(--ssp-purple-soft) !important;
    border-color: rgba(154, 164, 255, 0.18) !important;
}

html.DarkMode .salary-slip-panel .ssp-info-tile {
    background: var(--ss-page-surface-input, #3a3b66) !important;
    border-color: var(--ssp-border) !important;
}

html.DarkMode .salary-slip-panel .ssp-info-tile:hover {
    border-color: rgba(154, 164, 255, 0.28) !important;
    box-shadow: none !important;
}

html.DarkMode .salary-slip-panel .ssp-info-icon {
    background: var(--ssp-purple-soft) !important;
    color: var(--ssp-purple) !important;
}

html.DarkMode .salary-slip-panel .ssp-info-label {
    color: var(--ssp-text-muted) !important;
}

html.DarkMode .salary-slip-panel .ssp-info-value {
    color: var(--ss-page-text, #d8d8f0) !important;
}

html.DarkMode .salary-slip-panel .ssp-table-wrap {
    border-color: var(--ssp-border) !important;
    box-shadow: none !important;
}

html.DarkMode .salary-slip-panel .ssp-col-benefits {
    background: rgba(107, 201, 168, 0.1) !important;
    color: #b8e0c8 !important;
    border-inline-end-color: rgba(107, 201, 168, 0.2) !important;
}

html.DarkMode .salary-slip-panel .ssp-col-deductions {
    background: rgba(224, 128, 128, 0.1) !important;
    color: #e8b0b0 !important;
}

html.DarkMode .salary-slip-panel .ssp-table-row td {
    border-color: var(--ssp-border) !important;
}

html.DarkMode .salary-slip-panel .ssp-table-row--alt td {
    background: rgba(154, 164, 255, 0.04) !important;
}

html.DarkMode .salary-slip-panel .ssp-table-row:hover td {
    background: rgba(154, 164, 255, 0.08) !important;
}

html.DarkMode .salary-slip-panel .ssp-item-name {
    color: var(--ss-page-text, #d8d8f0) !important;
}

html.DarkMode .salary-slip-panel .ssp-item-meta {
    color: var(--ssp-text-muted) !important;
}

html.DarkMode .salary-slip-panel .ssp-cell-amount--benefit {
    color: #b8e0c8 !important;
    background: rgba(107, 201, 168, 0.08) !important;
}

html.DarkMode .salary-slip-panel .ssp-cell-amount--deduction {
    color: #e8b0b0 !important;
    background: rgba(224, 128, 128, 0.08) !important;
}

html.DarkMode .salary-slip-panel .ssp-cell-empty {
    background: var(--ss-page-surface, #2a2a4a) !important;
}

html.DarkMode .salary-slip-panel .ssp-table-total-row td {
    border-top-color: rgba(154, 164, 255, 0.2) !important;
    background: var(--ssp-purple-soft) !important;
}

html.DarkMode .salary-slip-panel .ssp-total-label {
    color: var(--ssp-purple-dark) !important;
}

html.DarkMode .salary-slip-panel .ssp-summary-card--benefit {
    background: rgba(107, 201, 168, 0.1) !important;
    border-color: rgba(107, 201, 168, 0.24) !important;
    color: #b8e0c8 !important;
}

html.DarkMode .salary-slip-panel .ssp-summary-card--deduction {
    background: rgba(224, 128, 128, 0.1) !important;
    border-color: rgba(224, 128, 128, 0.24) !important;
    color: #e8b0b0 !important;
}

html.DarkMode .salary-slip-panel .ssp-net-pay {
    background: linear-gradient(135deg, #3a7a52 0%, #2d5a3d 100%) !important;
    box-shadow: 0 4px 16px rgba(58, 122, 82, 0.25) !important;
}

/******** Login page — dark mode **********/

html.DarkMode .login-page {
    --login-surface: #2a2a4a;
    --login-surface-muted: #32335c;
    --login-border: rgba(255, 255, 255, 0.1);
    --login-text: #d8d8f0;
    --login-text-muted: #8888a8;
    --login-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

html.DarkMode .login-page__gradient {
    background:
        radial-gradient(ellipse 80% 60% at 15% 20%, rgba(108, 95, 252, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 85% 80%, rgba(41, 179, 156, 0.08) 0%, transparent 50%),
        linear-gradient(145deg, #1a1a3c 0%, #222244 38%, #1a1a3c 100%);
}

html.DarkMode .login-page__orb--1 {
    background: rgba(108, 95, 252, 0.22);
}

html.DarkMode .login-page__orb--2 {
    background: rgba(108, 95, 252, 0.12);
}

html.DarkMode .login-page__orb--3 {
    background: rgba(41, 179, 156, 0.1);
}

html.DarkMode .login-page__shell {
    border-color: rgba(255, 255, 255, 0.08);
    background: var(--login-surface);
}

html.DarkMode .login-page__hero {
    background: linear-gradient(145deg, #282850 0%, #32335c 45%, #383964 100%);
}

html.DarkMode .login-page__logo-wrap {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

html.DarkMode .login-page__form-area {
    background: var(--login-surface);
}

html.DarkMode .login-page__form-icon {
    background: linear-gradient(135deg, #383964 0%, #282850 100%);
    box-shadow: 0 6px 18px rgba(154, 164, 255, 0.2);
}

html.DarkMode .login-page__title,
html.DarkMode .loginform h1 {
    color: var(--login-text);
}

html.DarkMode .login-lang-picker > p {
    color: var(--login-text-muted);
}

html.DarkMode .login-lang-picker .selectlang {
    background: var(--login-surface-muted);
    border-color: var(--login-border);
}

html.DarkMode .login-lang-picker .selectlang img:hover {
    filter: drop-shadow(0 3px 8px rgba(154, 164, 255, 0.35));
}

html.DarkMode .login-field__label,
html.DarkMode .loginform .form-label {
    color: #b0b0cc;
}

html.DarkMode .login-field__icon {
    color: #9aa4ff;
}

html.DarkMode .login-field__toggle,
html.DarkMode .password-field__toggle {
    color: #9aa4ff;
}

html.DarkMode .login-field__control,
html.DarkMode .loginform .form-control {
    background: #3a3b66 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--login-text) !important;
}

html.DarkMode .login-field__control:focus,
html.DarkMode .loginform .form-control:focus {
    border-color: #9aa4ff !important;
    background: #3a3b66 !important;
    box-shadow: 0 0 0 3px rgba(154, 164, 255, 0.16) !important;
}

html.DarkMode .login-remember {
    color: var(--login-text-muted);
}

html.DarkMode .login-remember .form-check-input {
    background-color: #3a3b66;
    border-color: rgba(255, 255, 255, 0.2);
}

html.DarkMode .login-remember .form-check-input:checked {
    background-color: var(--purple);
    border-color: var(--purple);
}

html.DarkMode .login-page__forgot.loginlink,
html.DarkMode .loginlink {
    color: #9aa4ff;
}

html.DarkMode .login-page__forgot.loginlink:hover,
html.DarkMode .loginlink:hover {
    color: #b8b8dc;
}

html.DarkMode .login-page__validation,
html.DarkMode .loginform .bg-lightred,
html.DarkMode .loginform .validation-summary-errors {
    background: rgba(224, 128, 128, 0.14) !important;
    border: 1px solid rgba(224, 128, 128, 0.28);
    color: #e8b0b0;
}

html.DarkMode .login-page__api-error {
    background: rgba(224, 128, 128, 0.12);
    border-color: rgba(224, 128, 128, 0.28);
    color: #e8b0b0;
}

html.DarkMode .login-page__submit {
    background: linear-gradient(135deg, #6c5ffc 0%, #4a3fd9 100%);
    box-shadow: 0 6px 20px rgba(108, 95, 252, 0.28);
}

html.DarkMode .login-page__submit:hover:not(:disabled) {
    box-shadow: 0 10px 28px rgba(108, 95, 252, 0.35);
    color: #fff !important;
}

html.DarkMode .loginform .btn-purple {
    background: linear-gradient(135deg, #6c5ffc 0%, #4a3fd9 100%);
    box-shadow: 0 6px 20px rgba(108, 95, 252, 0.28);
}

html.DarkMode .loginform .btn-purple:hover:not(:disabled) {
    box-shadow: 0 10px 28px rgba(108, 95, 252, 0.35);
    color: #fff !important;
}

html.DarkMode .loginform {
    background: transparent;
}

html.DarkMode .loginform .text-red {
    color: #e08080 !important;
}

html.DarkMode .loginform .invalid,
html.DarkMode .loginform .form-control.invalid {
    background: rgba(224, 128, 128, 0.1) !important;
    border-color: rgba(224, 128, 128, 0.45) !important;
}

html.DarkMode .loginform .validation-message {
    color: #e08080;
}

html.DarkMode .loginform input:-webkit-autofill,
html.DarkMode .loginform input:-webkit-autofill:hover,
html.DarkMode .loginform input:-webkit-autofill:focus,
html.DarkMode .loginform input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #3a3b66 inset !important;
    box-shadow: 0 0 0 1000px #3a3b66 inset !important;
    -webkit-text-fill-color: #d8d8f0 !important;
    caret-color: #d8d8f0;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html.DarkMode .loginform input:autofill,
html.DarkMode .loginform input:autofill:hover,
html.DarkMode .loginform input:autofill:focus {
    box-shadow: 0 0 0 1000px #3a3b66 inset;
    -webkit-text-fill-color: #d8d8f0;
    color: #d8d8f0;
}

/******** Annual Wage — dark mode **********/

/* --- Index page --- */
html.DarkMode .annual-wage-page {
    --aw-primary: #8b7cff;
    --aw-primary-dark: #6c5ffc;
    --aw-primary-deep: #1a1a3c;
    --aw-primary-soft: rgba(108, 95, 252, 0.18);
    --aw-surface: #2a2a4a;
    --aw-surface-muted: #383964;
    --aw-surface-elevated: #2f3058;
    --aw-border: rgba(255, 255, 255, 0.12);
    --aw-border-strong: rgba(255, 255, 255, 0.18);
    --aw-text: #eaeaff;
    --aw-text-secondary: rgba(234, 234, 255, 0.75);
    --aw-text-muted: rgba(234, 234, 255, 0.55);
    --aw-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.18);
}

html.DarkMode .annual-wage-page .aw-hero {
    background: linear-gradient(135deg, #1a1a3c 0%, #24318a 48%, #6c5ffc 100%) !important;
}

html.DarkMode .annual-wage-page .aw-nav__link.is-active {
    background: #eaeaff;
    color: #1a1a3c;
    border-color: #eaeaff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

html.DarkMode .cvr-annual-section-body .titleHeadBarBlue {
    color: #c4b5fd;
}

html.DarkMode .cvr-annual-section-body .cvr-row-action-btn--delete,
html.DarkMode .form-cvr-job-embedded .cvr-row-action-btn--delete,
html.DarkMode .form-cvr-job-group-embedded .cvr-row-action-btn--delete,
html.DarkMode .form-cvr-job-category-embedded .cvr-row-action-btn--delete {
    background: rgba(220, 38, 38, 0.18);
    border-color: rgba(248, 113, 113, 0.35);
    color: #fca5a5;
}

html.DarkMode .cvr-annual-section-body .cvr-row-action-btn--delete:hover,
html.DarkMode .form-cvr-job-embedded .cvr-row-action-btn--delete:hover,
html.DarkMode .form-cvr-job-group-embedded .cvr-row-action-btn--delete:hover,
html.DarkMode .form-cvr-job-category-embedded .cvr-row-action-btn--delete:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

html.DarkMode .cvr-annual-section-body .alert-danger,
html.DarkMode .form-cvr-job-embedded .alert-danger,
html.DarkMode .form-cvr-job-group-embedded .alert-danger,
html.DarkMode .form-cvr-job-category-embedded .alert-danger {
    background: rgba(220, 38, 38, 0.18);
    border-color: rgba(248, 113, 113, 0.35);
    color: #fca5a5;
}

html.DarkMode .annual-wage-page .cvr-annual-section-tabs .nav-link.active {
    background: var(--aw-primary);
    border-color: var(--aw-primary-dark);
    color: #fff;
    box-shadow: 0 2px 12px rgba(108, 95, 252, 0.55);
}

html.DarkMode .annual-wage-page .cvr-annual-section-tabs .nav-link.active:hover {
    background: var(--aw-primary-dark);
    border-color: var(--aw-primary-dark);
    color: #fff;
}

html.DarkMode .cvr-annual-section-tabs .nav-link.active {
    box-shadow: 0 2px 8px rgba(108, 95, 252, 0.45);
}

html.DarkMode .cvr-annual-section-body .filterbox .form-control:focus,
html.DarkMode .form-cvr-job-embedded .filterbox .form-control:focus,
html.DarkMode .form-cvr-job-group-embedded .filterbox .form-control:focus,
html.DarkMode .form-cvr-job-category-embedded .filterbox .form-control:focus {
    box-shadow: 0 0 0 3px rgba(108, 95, 252, 0.25);
}

/* --- CVR create/update modals — token overrides --- */
html.DarkMode .form-990-cu {
    --wage-cu-accent: #8b7cff;
    --wage-cu-accent-soft: rgba(108, 95, 252, 0.18);
    --wage-cu-border: rgba(255, 255, 255, 0.12);
    --wage-cu-muted: rgba(234, 234, 255, 0.55);
    --wage-cu-text: #eaeaff;
    --wage-cu-surface: #2a2a4a;
}

html.DarkMode .form-990-approvals-cu {
    --approvals-cu-accent: #8b7cff;
    --approvals-cu-accent-soft: rgba(108, 95, 252, 0.18);
    --approvals-cu-border: rgba(255, 255, 255, 0.12);
    --approvals-cu-muted: rgba(234, 234, 255, 0.55);
    --approvals-cu-text: #eaeaff;
    --approvals-cu-surface: #2a2a4a;
}

html.DarkMode .job-cu {
    --job-cu-accent: #8b7cff;
    --job-cu-accent-soft: rgba(108, 95, 252, 0.18);
    --job-cu-border: rgba(255, 255, 255, 0.12);
    --job-cu-muted: rgba(234, 234, 255, 0.55);
    --job-cu-text: #eaeaff;
    --job-cu-surface: #2a2a4a;
}

html.DarkMode .job-group-cu {
    --job-group-cu-accent: #8b7cff;
    --job-group-cu-accent-soft: rgba(108, 95, 252, 0.18);
    --job-group-cu-border: rgba(255, 255, 255, 0.12);
    --job-group-cu-muted: rgba(234, 234, 255, 0.55);
    --job-group-cu-text: #eaeaff;
    --job-group-cu-surface: #2a2a4a;
}

html.DarkMode .job-category-cu {
    --job-category-cu-accent: #8b7cff;
    --job-category-cu-accent-soft: rgba(108, 95, 252, 0.18);
    --job-category-cu-border: rgba(255, 255, 255, 0.12);
    --job-category-cu-muted: rgba(234, 234, 255, 0.55);
    --job-category-cu-text: #eaeaff;
    --job-category-cu-surface: #2a2a4a;
}

html.DarkMode .job-salary-rank-cu {
    --jsr-cu-accent: #8b7cff;
    --jsr-cu-accent-soft: rgba(108, 95, 252, 0.18);
    --jsr-cu-border: rgba(255, 255, 255, 0.12);
    --jsr-cu-muted: rgba(234, 234, 255, 0.55);
    --jsr-cu-text: #eaeaff;
    --jsr-cu-surface: #2a2a4a;
}

html.DarkMode .ceiling-attraction-cu {
    --cra-cu-accent: #8b7cff;
    --cra-cu-accent-soft: rgba(108, 95, 252, 0.18);
    --cra-cu-border: rgba(255, 255, 255, 0.12);
    --cra-cu-muted: rgba(234, 234, 255, 0.55);
    --cra-cu-text: #eaeaff;
    --cra-cu-surface: #2a2a4a;
}

html.DarkMode .right-guardianship-cu {
    --rg-cu-accent: #8b7cff;
    --rg-cu-accent-soft: rgba(108, 95, 252, 0.18);
    --rg-cu-border: rgba(255, 255, 255, 0.12);
    --rg-cu-muted: rgba(234, 234, 255, 0.55);
    --rg-cu-text: #eaeaff;
    --rg-cu-surface: #2a2a4a;
}

html.DarkMode .salary-history-cu {
    --sh-cu-accent: #8b7cff;
    --sh-cu-accent-soft: rgba(108, 95, 252, 0.18);
    --sh-cu-border: rgba(255, 255, 255, 0.12);
    --sh-cu-muted: rgba(234, 234, 255, 0.55);
    --sh-cu-text: #eaeaff;
    --sh-cu-surface: #2a2a4a;
}

html.DarkMode .labor-council-cu {
    --labor-cu-accent: #8b7cff;
    --labor-cu-accent-soft: rgba(108, 95, 252, 0.18);
    --labor-cu-border: rgba(255, 255, 255, 0.12);
    --labor-cu-muted: rgba(234, 234, 255, 0.55);
    --labor-cu-text: #eaeaff;
    --labor-cu-surface: #2a2a4a;
}

html.DarkMode .final-product-cu {
    --fp-cu-accent: #8b7cff;
    --fp-cu-accent-soft: rgba(108, 95, 252, 0.18);
    --fp-cu-border: rgba(255, 255, 255, 0.12);
    --fp-cu-muted: rgba(234, 234, 255, 0.55);
    --fp-cu-text: #eaeaff;
    --fp-cu-surface: #2a2a4a;
}

html.DarkMode .hard-harmful-max-cu {
    --hhmax-cu-accent: #8b7cff;
    --hhmax-cu-accent-soft: rgba(108, 95, 252, 0.18);
    --hhmax-cu-border: rgba(255, 255, 255, 0.12);
    --hhmax-cu-muted: rgba(234, 234, 255, 0.55);
    --hhmax-cu-text: #eaeaff;
    --hhmax-cu-surface: #2a2a4a;
}

html.DarkMode .hard-harmful-job-cu {
    --hhj-cu-accent: #8b7cff;
    --hhj-cu-accent-soft: rgba(108, 95, 252, 0.18);
    --hhj-cu-border: rgba(255, 255, 255, 0.12);
    --hhj-cu-muted: rgba(234, 234, 255, 0.55);
    --hhj-cu-text: #eaeaff;
    --hhj-cu-surface: #2a2a4a;
}

html.DarkMode .pwe-cu {
    --pwe-cu-accent: #8b7cff;
    --pwe-cu-accent-soft: rgba(108, 95, 252, 0.18);
    --pwe-cu-border: rgba(255, 255, 255, 0.12);
    --pwe-cu-muted: rgba(234, 234, 255, 0.55);
    --pwe-cu-text: #eaeaff;
    --pwe-cu-surface: #2a2a4a;
}

html.DarkMode .post-durability-cu {
    --pd-cu-accent: #8b7cff;
    --pd-cu-accent-soft: rgba(108, 95, 252, 0.18);
    --pd-cu-border: rgba(255, 255, 255, 0.12);
    --pd-cu-muted: rgba(234, 234, 255, 0.55);
    --pd-cu-text: #eaeaff;
    --pd-cu-surface: #2a2a4a;
}

/* --- CVR create/update modals — shared surfaces --- */
html.DarkMode .form-990-cu-intro,
html.DarkMode .form-990-approvals-cu-intro,
html.DarkMode .job-cu-intro,
html.DarkMode .job-group-cu-intro,
html.DarkMode .job-category-cu-intro,
html.DarkMode .job-salary-rank-cu-intro,
html.DarkMode .ceiling-attraction-cu-intro,
html.DarkMode .right-guardianship-cu-intro,
html.DarkMode .salary-history-cu-intro,
html.DarkMode .labor-council-cu-intro,
html.DarkMode .final-product-cu-intro,
html.DarkMode .hard-harmful-max-cu-intro,
html.DarkMode .hard-harmful-job-cu-intro,
html.DarkMode .pwe-cu-intro,
html.DarkMode .post-durability-cu-intro {
    background: #2f3058;
    border-color: rgba(255, 255, 255, 0.12);
    color: #eaeaff;
}

html.DarkMode .form-990-cu-section,
html.DarkMode .form-990-approvals-cu-section,
html.DarkMode .job-cu-section,
html.DarkMode .job-group-cu-section,
html.DarkMode .job-category-cu-section,
html.DarkMode .job-salary-rank-cu-section,
html.DarkMode .ceiling-attraction-cu-section,
html.DarkMode .right-guardianship-cu-section,
html.DarkMode .salary-history-cu-section,
html.DarkMode .labor-council-cu-section,
html.DarkMode .final-product-cu-section,
html.DarkMode .hard-harmful-max-cu-section,
html.DarkMode .hard-harmful-job-cu-section,
html.DarkMode .pwe-cu-section,
html.DarkMode .post-durability-cu-section {
    background: #2f3058;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

html.DarkMode .form-990-cu-section-head,
html.DarkMode .form-990-approvals-cu-section-head,
html.DarkMode .job-cu-section-head,
html.DarkMode .job-group-cu-section-head,
html.DarkMode .job-category-cu-section-head,
html.DarkMode .job-salary-rank-cu-section-head,
html.DarkMode .ceiling-attraction-cu-section-head,
html.DarkMode .right-guardianship-cu-section-head,
html.DarkMode .salary-history-cu-section-head,
html.DarkMode .labor-council-cu-section-head,
html.DarkMode .final-product-cu-section-head,
html.DarkMode .hard-harmful-max-cu-section-head,
html.DarkMode .hard-harmful-job-cu-section-head,
html.DarkMode .pwe-cu-section-head,
html.DarkMode .post-durability-cu-section-head {
    border-bottom-color: rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, #2f3058 0%, #2a2a4a 100%);
}

html.DarkMode .form-990-cu-date-meta,
html.DarkMode .form-990-approvals-cu-date-meta,
html.DarkMode .job-salary-rank-cu-date-meta,
html.DarkMode .ceiling-attraction-cu-date-meta,
html.DarkMode .right-guardianship-cu-date-meta,
html.DarkMode .salary-history-cu-date-meta,
html.DarkMode .labor-council-cu-date-meta,
html.DarkMode .final-product-cu-date-meta,
html.DarkMode .hard-harmful-max-cu-date-meta,
html.DarkMode .hard-harmful-job-cu-date-meta,
html.DarkMode .post-durability-cu-date-meta {
    background: #383964;
    border-color: rgba(255, 255, 255, 0.12);
}

html.DarkMode .form-990-cu-actions,
html.DarkMode .form-990-approvals-cu-actions,
html.DarkMode .job-cu-actions,
html.DarkMode .job-group-cu-actions,
html.DarkMode .job-category-cu-actions,
html.DarkMode .job-salary-rank-cu-actions,
html.DarkMode .ceiling-attraction-cu-actions,
html.DarkMode .right-guardianship-cu-actions,
html.DarkMode .salary-history-cu-actions,
html.DarkMode .labor-council-cu-actions,
html.DarkMode .final-product-cu-actions,
html.DarkMode .hard-harmful-max-cu-actions,
html.DarkMode .hard-harmful-job-cu-actions,
html.DarkMode .pwe-cu-actions,
html.DarkMode .post-durability-cu-actions {
    background: linear-gradient(180deg, rgba(42, 42, 74, 0.92) 0%, #2a2a4a 35%);
    border-top-color: rgba(255, 255, 255, 0.12);
}

html.DarkMode .form-990-cu-section-body .form-control,
html.DarkMode .form-990-cu-section-body .form-control-sm,
html.DarkMode .form-990-approvals-cu-section-body .form-control,
html.DarkMode .form-990-approvals-cu-section-body .form-control-sm,
html.DarkMode .job-cu-section-body .form-control,
html.DarkMode .job-cu-section-body .form-control-sm,
html.DarkMode .job-group-cu-section-body .form-control,
html.DarkMode .job-group-cu-section-body .form-control-sm,
html.DarkMode .job-category-cu-section-body .form-control,
html.DarkMode .job-category-cu-section-body .form-control-sm,
html.DarkMode .job-salary-rank-cu-section-body .form-control,
html.DarkMode .job-salary-rank-cu-section-body .form-control-sm,
html.DarkMode .ceiling-attraction-cu-section-body .form-control,
html.DarkMode .ceiling-attraction-cu-section-body .form-control-sm,
html.DarkMode .right-guardianship-cu-section-body .form-control,
html.DarkMode .right-guardianship-cu-section-body .form-control-sm,
html.DarkMode .salary-history-cu-section-body .form-control,
html.DarkMode .salary-history-cu-section-body .form-control-sm,
html.DarkMode .labor-council-cu-section-body .form-control,
html.DarkMode .labor-council-cu-section-body .form-control-sm,
html.DarkMode .final-product-cu-section-body .form-control,
html.DarkMode .final-product-cu-section-body .form-control-sm,
html.DarkMode .hard-harmful-max-cu-section-body .form-control,
html.DarkMode .hard-harmful-max-cu-section-body .form-control-sm,
html.DarkMode .hard-harmful-job-cu-section-body .form-control,
html.DarkMode .hard-harmful-job-cu-section-body .form-control-sm,
html.DarkMode .pwe-cu-section-body .form-control,
html.DarkMode .pwe-cu-section-body .form-control-sm,
html.DarkMode .post-durability-cu-section-body .form-control,
html.DarkMode .post-durability-cu-section-body .form-control-sm {
    background-color: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #eaeaff !important;
}

html.DarkMode .form-990-cu-section-body .form-control:focus,
html.DarkMode .form-990-cu-section-body .form-control-sm:focus,
html.DarkMode .form-990-approvals-cu-section-body .form-control:focus,
html.DarkMode .form-990-approvals-cu-section-body .form-control-sm:focus,
html.DarkMode .job-cu-section-body .form-control:focus,
html.DarkMode .job-cu-section-body .form-control-sm:focus,
html.DarkMode .job-group-cu-section-body .form-control:focus,
html.DarkMode .job-group-cu-section-body .form-control-sm:focus,
html.DarkMode .job-category-cu-section-body .form-control:focus,
html.DarkMode .job-category-cu-section-body .form-control-sm:focus,
html.DarkMode .job-salary-rank-cu-section-body .form-control:focus,
html.DarkMode .job-salary-rank-cu-section-body .form-control-sm:focus,
html.DarkMode .ceiling-attraction-cu-section-body .form-control:focus,
html.DarkMode .ceiling-attraction-cu-section-body .form-control-sm:focus,
html.DarkMode .right-guardianship-cu-section-body .form-control:focus,
html.DarkMode .right-guardianship-cu-section-body .form-control-sm:focus,
html.DarkMode .salary-history-cu-section-body .form-control:focus,
html.DarkMode .salary-history-cu-section-body .form-control-sm:focus,
html.DarkMode .labor-council-cu-section-body .form-control:focus,
html.DarkMode .labor-council-cu-section-body .form-control-sm:focus,
html.DarkMode .final-product-cu-section-body .form-control:focus,
html.DarkMode .final-product-cu-section-body .form-control-sm:focus,
html.DarkMode .hard-harmful-max-cu-section-body .form-control:focus,
html.DarkMode .hard-harmful-max-cu-section-body .form-control-sm:focus,
html.DarkMode .hard-harmful-job-cu-section-body .form-control:focus,
html.DarkMode .hard-harmful-job-cu-section-body .form-control-sm:focus,
html.DarkMode .pwe-cu-section-body .form-control:focus,
html.DarkMode .pwe-cu-section-body .form-control-sm:focus,
html.DarkMode .post-durability-cu-section-body .form-control:focus,
html.DarkMode .post-durability-cu-section-body .form-control-sm:focus {
    border-color: #8b7cff !important;
    box-shadow: 0 0 0 3px rgba(108, 95, 252, 0.25) !important;
}

html.DarkMode .job-cu .devdrop:not(.devdrop--disabled) .dropdown-toggle.form-select,
html.DarkMode .right-guardianship-cu .devdrop:not(.devdrop--disabled) .dropdown-toggle.form-select,
html.DarkMode .ceiling-attraction-cu .devdrop:not(.devdrop--disabled) .dropdown-toggle.form-select,
html.DarkMode .salary-history-cu .devdrop:not(.devdrop--disabled) .dropdown-toggle.form-select,
html.DarkMode .final-product-cu .devdrop:not(.devdrop--disabled) .dropdown-toggle.form-select,
html.DarkMode .hard-harmful-job-cu .devdrop:not(.devdrop--disabled) .dropdown-toggle.form-select {
    background-color: #383964 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #eaeaff !important;
}

html.DarkMode .form-990-cu-section-icon--percent {
    background: rgba(5, 150, 105, 0.2);
    color: #34d399;
}

html.DarkMode .form-990-approvals-cu-section-icon--salary {
    background: rgba(5, 150, 105, 0.2);
    color: #34d399;
}

html.DarkMode .form-990-approvals-cu-section-icon--housing {
    background: rgba(8, 145, 178, 0.2);
    color: #22d3ee;
}

html.DarkMode .form-990-approvals-cu-section-icon--benefits {
    background: rgba(234, 88, 12, 0.2);
    color: #fdba74;
}

html.DarkMode .form-990-approvals-cu-section-icon--coeff,
html.DarkMode .labor-council-cu-section-icon--coeff {
    background: rgba(124, 58, 237, 0.2);
    color: #c4b5fd;
}

html.DarkMode .job-salary-rank-cu-section-icon--group {
    background: rgba(124, 58, 237, 0.2);
    color: #c4b5fd;
}

html.DarkMode .job-salary-rank-cu-section-icon--wage {
    background: rgba(5, 150, 105, 0.2);
    color: #34d399;
}

html.DarkMode .right-guardianship-cu-section-icon--position,
html.DarkMode .final-product-cu-section-icon--org {
    background: rgba(124, 58, 237, 0.2);
    color: #c4b5fd;
}

html.DarkMode .final-product-cu-section-icon--score,
html.DarkMode .hard-harmful-max-cu-section-icon--score,
html.DarkMode .hard-harmful-job-cu-section-icon--score {
    background: rgba(234, 88, 12, 0.2);
    color: #fdba74;
}

html.DarkMode .right-guardianship-cu-section-icon--detail,
html.DarkMode .ceiling-attraction-cu-section-icon--detail,
html.DarkMode .salary-history-cu-section-icon--detail,
html.DarkMode .post-durability-cu-section-icon--coeff {
    background: rgba(8, 145, 178, 0.2);
    color: #22d3ee;
}

html.DarkMode .hard-harmful-job-cu-section-icon--job {
    background: rgba(124, 58, 237, 0.2);
    color: #c4b5fd;
}

html.DarkMode .hhj-score-badge {
    background: rgba(234, 88, 12, 0.18);
    border-color: rgba(251, 146, 60, 0.35);
    color: #fdba74;
}

html.DarkMode .hhj-score-badge--zero {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(234, 234, 255, 0.55);
}

html.DarkMode .pwe-cu-section-icon--bracket {
    background: rgba(8, 145, 178, 0.2);
    color: #22d3ee;
}

html.DarkMode .pwe-cu-section-icon--score {
    background: rgba(202, 138, 4, 0.2);
    color: #fde047;
}

html.DarkMode .pwe-score-badge {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(129, 140, 248, 0.35);
    color: #a5b4fc;
}

html.DarkMode .pwe-score-badge--zero {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(234, 234, 255, 0.55);
}

html.DarkMode .form-990-cu-actions .btn-outline-secondary,
html.DarkMode .form-990-approvals-cu-actions .btn-outline-secondary,
html.DarkMode .job-cu-actions .btn-outline-secondary,
html.DarkMode .job-group-cu-actions .btn-outline-secondary,
html.DarkMode .job-category-cu-actions .btn-outline-secondary,
html.DarkMode .job-salary-rank-cu-actions .btn-outline-secondary,
html.DarkMode .ceiling-attraction-cu-actions .btn-outline-secondary,
html.DarkMode .right-guardianship-cu-actions .btn-outline-secondary,
html.DarkMode .salary-history-cu-actions .btn-outline-secondary,
html.DarkMode .labor-council-cu-actions .btn-outline-secondary,
html.DarkMode .final-product-cu-actions .btn-outline-secondary,
html.DarkMode .hard-harmful-max-cu-actions .btn-outline-secondary,
html.DarkMode .hard-harmful-job-cu-actions .btn-outline-secondary,
html.DarkMode .pwe-cu-actions .btn-outline-secondary,
html.DarkMode .post-durability-cu-actions .btn-outline-secondary {
    color: rgba(234, 234, 255, 0.75);
    border-color: rgba(255, 255, 255, 0.18);
}


.menuCollapsed .home-mobile-nav{
    display:none !important;
}