:root {
    --prompt: 'Outfit', 'Prompt', sans-serif;
    --primary-color: var(--tonebg, #02a3ed);
    --bg-dark-panel: rgba(12, 12, 30, 0.75);

    --light: #FFF;
    --green: #06D79C;
    --yellow: #FFB22B;
    --grey: #F6F6F6;
    --blue: #5d87ff;
    --light-blue: #eef3ff;
    --red: #DB504A;
    --orange: #FF6600;
    --dark-grey: #5a6578;
    --green: #21dd21;
    --darkback: #FFF;
    --yellow: #FFB22B;
    --box1: #3c8cf3;
    --box2: #06d79c;
    --box3: #745af2;
    --box4: #ef5350;
    --dark: #000;
    --dark-green: #1B4332;
    --light-green: #2D6A4F;
    --bg-light: #FFF;
    --icon-grey: #475569;
    --light-text: #1c1c1c;
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #475569;
    --text-on-tint: #014663;
    --text-link: #015a82;

    --tonebg: #02a3ed;
    --tone-dark: #016b99;
    --tone-light: #33b8f2;
    --tone-litle: #d8f0fc;
    --tone-active: #8fd6f7;
    --tone-hover: #05a4ed;

    --gray-hover: #f7fafc;
    --secondary: #f2f6fa;
    --head-table: #f0f0f0eb;
    --readonly: #cfd8e3;

    --tone-darkblue: #02a3ed;
    --tone-red: #f0524f;
    --tone-darkgreen: #06d69b;
    --tone-orange: #ed6002;
    --tone-yellow: #ffb12b;
    --tone-violet: #735af2;
    --tone-lightpink: #ff6ba3;
    --tone-lightgray: #bfbfbf;

    --line-border-fill: #3498db;
    --line-border-empty: #e0e0e0;

    --shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

    --filter-intensity: 1;
    --blur-amount: 0px;
    --brightness: 1;
    --contrast: 1;
    --hue: 0deg;
    --saturate: 1;
}

body {
    font-family: var(--prompt);
    background: var(--tone-litle);
}

body.blue {
    --tonebg: #02a3ed;
    --tone-dark: #016b99;
    --tone-light: #33b8f2;
    --tone-litle: #d8f0fc;
    --tone-active: #8fd6f7;
    --tone-hover: #05a4ed;
    --text-on-tint: #014663;
    --text-link: #015a82;
}

body.orange {
    --tonebg: #ed6002;
    --tone-dark: #992310;
    --tone-light: #fc8517;
    --tone-litle: #fcf0e3;
    --tone-active: #f27f5a;
    --tone-hover: #e35902;
    --text-on-tint: #7a2e0a;
    --text-link: #c44a00;
}

body.darkgreen {
    --tonebg: #06d69b;
    --tone-dark: #058a63;
    --tone-light: #1df2b4;
    --tone-litle: #e3fcf7;
    --tone-active: #4de2b5;
    --tone-hover: #05c48e;
    --text-on-tint: #04694d;
    --text-link: #058a63;
}

body.yellow {
    --tonebg: #ffb12b;
    --tone-dark: #cc7a00;
    --tone-light: #ffd98a;
    --tone-litle: #fff5df;
    --tone-active: #ffc45a;
    --tone-hover: #e89a00;
    --text-on-tint: #8a5a00;
    --text-link: #b37700;
}

body.red {
    --tonebg: #f0524f;
    --tone-dark: #b33835;
    --tone-light: #f47371;
    --tone-litle: #fef0f0;
    --tone-active: #f36764;
    --tone-hover: #e84542;
    --text-on-tint: #8f2b28;
    --text-link: #c73d39;
}

body.violet {
    --tonebg: #735af2;
    --tone-dark: #4936b3;
    --tone-light: #9281f5;
    --tone-litle: #f2f0fe;
    --tone-active: #8c75f4;
    --tone-hover: #6a51e8;
    --text-on-tint: #3d2a8f;
    --text-link: #5b41c9;
}

body.lightpink {
    --tonebg: #ff6ba3;
    --tone-dark: #ea0058;
    --tone-light: #fcaac9;
    --tone-litle: #ffffff;
    --tone-active: #ff89b6;
    --tone-hover: #ff4289;
    --text-on-tint: #b8004a;
    --text-link: #d40058;
}

body.lightgray {
    --tonebg: #bfbfbf;
    --tone-dark: #7a7a7a;
    --tone-light: #e0e0e0;
    --tone-litle: #f6f6f6;
    --tone-active: #d1d1d1;
    --tone-hover: #9e9e9e;
    --text-on-tint: #4a4a4a;
    --text-link: #5c5c5c;
}

body.custom {
    --tonebg: #02a3ed;
    --tone-dark: #016b99;
    --tone-light: #33b8f2;
    --tone-litle: #d8f0fc;
    --tone-active: #8fd6f7;
    --tone-hover: #05a4ed;
}

body.dark {
    --light-text: #fcfcfc;
    --light: #FBFBFB;
    --grey: #060714;
    --dark-green: #0C0C1E;
    --tonebg: #0C0C1E;
    --tone-litle: #060714;
    --icon-grey: #cbd5e1;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-on-tint: #e2e8f0;
    --text-link: #7dd3fc;
    --dark-grey: #94a3b8;

    --head-table: #060714;
    --secondary: #060714;
    --dark: #FBFBFB;
    --blue: #763ebd;
    --darkback: #010007;
    --box1: #3c8cf3;
    --box2: #06d79c;
    --box3: #745af2;
    --box4: #ef5350;
    --bg-light: #0C0C1E;

    --gray-hover: #2f2f2f52;

    --shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
}

#loginPage_Main .logo-mb {
    text-align: center;
    display: none;
}

#loginPage_Main .logo-mb img {
    width: 120px;
}

#loginPage_Main {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

#loginPage_Main .text-bottom a.text-dark {
    color: var(--text-primary, #0f172a) !important;
    font-weight: 500;
}

#loginPage_Main .text-bottom a.text-dark:hover {
    color: var(--text-link, var(--tone-dark)) !important;
}

.wrap-register .form-control::placeholder,
.follow-box .form-control::placeholder,
.reset-password-box .form-control::placeholder {
    color: var(--text-muted, #475569);
    opacity: 1;
}

.block-register .text-bottom a {
    color: var(--text-link, #015a82);
    font-weight: 500;
}

.bg-main-login {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: auto;
    z-index: -1;
}

.bg-main-login svg {
    width: 100%;
    height: auto;
    display: block;
}

.login-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.bg-top-color {
    fill: var(--tone-hover);
}

.bg-sub-color {
    fill: var(--tone-active);
}

.dark .bg-top-color {
    fill: var(--darkback);
}

.dark .bg-sub-color {
    fill: var(--bg-light);
}

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

.dark .bg-body,
.dark .wrap-content .block-content .content {
    background: var(--bg-light) !important;
    color: var(--light-text) !important;
}

.dark .wrap-register .form-control {
    color: var(--light-text) !important;
    border-color: var(--light-text) !important;
}

.dark .wrap-content .block-content .content::before {
    background: var(--bg-light) !important;
}

.dark .wrap-content .block-content .content .box {
    color: var(--light-text);
}

.wrap-content {
    padding: 5% 7%;
    max-width: 1600px;
    margin: 0 auto;
}

.wrap-content .title {
    font-size: 60px;
    text-align: right;
    color: var(--tone-dark);
    line-height: 1;
    font-weight: 700;
    -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.85);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9),
        0 2px 10px rgba(0, 0, 0, 0.28);
}

.text-shadow {
    text-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

.wrap-content .sub-title {
    color: var(--text-on-tint, var(--tone-dark));
    font-size: 32px;
    text-align: right;
    line-height: 1.15;
    margin: 10px 0px;
    font-weight: 500;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85),
        0 2px 8px rgba(0, 0, 0, 0.22);
}

.wrap-content .block-content .logo {
    background-color: var(--tone-litle);
    border: 7px solid var(--tone-dark);
    border-radius: 100%;
    padding: 25px 20px;
    z-index: 99;
    transform: scale(1.05);
    height: 560px;
}

.wrap-content .block-content img {
    width: 100%;
}

.wrap-content .block-content .content {
    position: relative;
    background: #fff;
    border: 7px solid var(--tone-dark);
    border-left: none;
    border-radius: 0 30px 30px 0;
}

.wrap-content .setup-content {
    background: white;
    border: 7px solid var(--tone-dark);
    border-radius: 30px;
    padding: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .logo {
        position: absolute;
        overflow: hidden;
        top: -110px;
        left: -90px;
        border: 7px solid var(--tone-dark);
        border-radius: 100%;
        padding: 0;
        width: 250px;
        height: 250px;
        z-index: 99;
        background-color: var(--tone-litle);
    }
}

.setup-content-wrapper {
    color: var(--light-text);
    background: var(--bg-light);
    border: 5px solid var(--tone-dark);
    border-radius: 30px;
    padding: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40%;
    margin-top: 50px;
    padding-top: 86px;

    .logo-setting {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: -90px;
        border-radius: 100%;
        padding: 0;
        width: 180px;
        height: 180px;
        z-index: 99;
        background-color: white;
        overflow: hidden;
        border: 5px solid var(--tone-dark);

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

.wrap-content .block-content .content::before {
    content: "";
    width: 17vw;
    height: calc(100% + 14px);
    display: block;
    background: white;
    border: 7px solid var(--tone-dark);
    padding: 0;
    position: absolute;
    left: -17vw;
    border-right: 0;
    top: -7px;
    width: 100%;
}

.wrap-content .block-content .content .box {
    position: absolute;
    z-index: 9;
    overflow-y: auto;
    height: 98%;
    width: 98%;
    top: 0;
}

.wrap-content .block-content .content .box .block-register {
    padding-top: 24px;
    margin: 0;
}

.block-register .register_form {
    padding-right: 0px;
}

.block-register .register_form .wrap-register {
    border-right: 1.95px dashed #40916C;
    padding: 20px;
}

.container .row.mt-1 .wrap-register {
    border-right: 1.2px dashed #40916C;
    padding-right: 20px;
}

.offcanvas .form-group {
    position: relative;
}

.w-40 {
    width: 40%;
}

.setup-content-wrapper .field-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: var(--icon-grey);
}

.setup-content-wrapper .form-group,
.reset-password-box .form-group,
.modal-body .form-group,
.follow-box .form-group,
.block-register-form .form-group,
.wrap-register .form-group {
    position: relative;
    margin-bottom: 1rem;
}

.offcanvas .form-control,
.modal-body .form-control {
    border: none;
    /* height: 40px; */
    border: 1px solid rgba(15, 23, 42, 0.28);
    color: var(--text-primary, var(--light-text));
    border-radius: 30px;
    padding-left: 20px;
    padding-right: 20px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.reset-password-box .form-control,
.follow-box .form-control,
.wrap-register .form-control {
    background: transparent;
    border: none;
    height: 40px;
    border: 1px solid rgba(15, 23, 42, 0.28);
    color: var(--text-primary, var(--light-text));
    border-radius: 30px;
    padding-left: 20px;
    padding-right: 20px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.modal-body .form-group input:focus {
    outline: none;
    box-shadow: none;
}

.reset-password-box .form-group input:focus,
.setup-content-wrapper .form-group input:focus,
.follow-box .form-group input:focus,
.wrap-register .form-group input:focus {
    background: transparent !important;
    box-shadow: none;
}

.offcanvas .field-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: var(--icon-grey);
}

.inputGroup .field-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: var(--icon-grey);
}

.modal-body .field-icon {
    position: absolute;
    top: 72%;
    left: 18px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: var(--icon-grey);
}

.modal-icon .field-icon {
    position: absolute;
    top: 52%;
    left: 92%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: var(--icon-grey);
}

.follow-box .field-icon {
    position: absolute;
    top: 48%;
    left: 18px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: var(--icon-grey);
}

.reset-password-box .field-icon {
    position: absolute;
    top: 50%;
    right: 24px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: var(--icon-grey);
}

.wrap-register .field-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: var(--icon-grey);
}

.block-register-form .field-icon {
    position: absolute;
    top: 52%;
    right: 9px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.wrap-register .tool-box {
    font-size: 14px;
}

.block-register .detail {
    padding-left: 25px;
    padding-right: 20px;
}

.block-register .detail .detail-title {
    font-size: 19px;
    font-weight: 600;
    color: var(--text-primary, var(--light-text));
}

.block-register .detail ul {
    list-style: none;
    padding: 0;
    padding-left: 7px;
    margin-top: 8px;
}

.block-register .detail ul li {
    margin-bottom: 7px;
}

.block-register .detail ul li span {
    font-size: 15px;
    color: var(--text-secondary, #334155);
}

.block-register .detail ul li i {
    color: #74C69D;
    margin-right: 10px;
}

.block-register .block-check {
    padding-left: 15px;
    margin-top: 11.5px;
}

.block-register .block-check .forgotPassword {
    text-align: right;
}

.block-register .block-check a {
    color: var(--text-link, #015a82);
    text-decoration: none;
    font-weight: 500;
}

.block-register .detail .btn-register {
    width: 70%;
    margin: 0 auto;
    display: block;
    background: #0FA958;
    border: none;
    border-radius: 10px;
}

.btn-success.btn-green {
    background: #0FA958;
}

.block-register .detail .block-qr {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.block-register .detail .block-qr img {
    width: 120px;
}

.block-register .detail .block-qr span {
    font-size: 13px;
}

.block-register .text-bottom {
    font-size: 19px;
    text-align: center;
    justify-content: end;
    margin-top: 20px;
    letter-spacing: 1px;
    padding-bottom: 0px;
    transition: all 0.3s;
}

.text-bottom a:hover {
    transform: scale(1.02);
}

.block-register-form {
    margin-top: -40px;
    padding: 15px;
    height: 100%;
    overflow-x: hidden;
}

.color-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    gap: 20px;
}

.color-btn {
    width: 50px;
    height: 50px;
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s;
    outline: none;
    box-shadow: var(--shadow);
}

.mode-btn {
    font-size: 18px;
    width: 50px;
    height: 50px;
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s;
    outline: none;
    box-shadow: var(--shadow);
}

.mode-btn.light {
    color: var(--light);
    background-color: var(--tone-yellow);
}

.mode-btn.dark {
    color: var(--light);
    background-color: var(--black);
}

.mode-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.mode-btn.active {
    border: 3px solid var(--tone-darkgreen);
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.color-btn.tone-darkblue {
    background-color: var(--tone-darkblue);
}

.color-btn.tone-red {
    background-color: var(--tone-red);
}

.color-btn.tone-darkgreen {
    background-color: var(--tone-darkgreen);
}

.color-btn.tone-lightgreen {
    background-color: var(--tone-lightgreen);
}

.color-btn.tone-orange {
    background-color: var(--tone-orange);
}

.color-btn.tone-yellow {
    background-color: var(--tone-yellow);
}

.color-btn.tone-violet {
    background-color: var(--tone-violet);
}

.color-btn.tone-lightpink {
    background-color: var(--tone-lightpink);
}

.color-btn.tone-lightgray {
    background-color: var(--tone-lightgray);
}

.color-btn.tone-custom {
    background: linear-gradient(45deg, #f06, #9f6, #0cf, #f06);
    background-size: 200% 200%;
    animation: rainbow 5s ease infinite;
    position: relative;
    border: 3px solid white;
}

@keyframes rainbow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.color-btn.tone-custom input[type="color"] {
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0;
    opacity: 0;
}

.color-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.title-block {
    font-size: 19px;
    font-weight: 600;
    color: var(--text-primary, var(--light-text));
}

.block-register-form form {
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 10px;
    z-index: 99;
    position: relative;
    min-height: 80%;
}

.block-register-form form .required {
    color: #FF0000;
}

.block-register-form .form-registor {
    border: none;
    height: 38px;
    border: 1px solid #00000045;
    border-radius: 30px !important;
    padding-left: 20px;
    padding-right: 20px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    border-radius: 20px;
}

.block-register-form form .btn {
    width: 120px;
}

.col-form-label {
    font-size: 14px;
    color: var(--text-primary, var(--light-text));
    font-weight: 500;
}

.form-check-label {
    color: var(--text-secondary, #334155);
}

input[type="password"] {
    font-size: 20px;
}

input[type="password"]::placeholder {
    font-size: 16px;
}

.loaders {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(28, 28, 28, 0.5);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9998;
    opacity: 1;
    flex-direction: column;
    color: #FFF;
}

.loader {
    border: 12px solid #16d1fd;
    border-top: 12px solid #2252d4;
    border-radius: 50%;
    width: 330px;
    height: 330px;
    animation: spin 2s linear infinite;
}

.loader::after {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    box-shadow: inset 0px 0px 20px #2252d4;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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

.container__logo {
    position: relative;
    width: 500px;
    height: 500px;
}

.container__logo .rotate-clockwise {
    position: absolute;
    top: 0;
    left: 0;
}

.rotate-counterclockwise {
    animation: rotateCCW 5s linear infinite;
}

.rotate-clockwise {
    animation: rotateCW 5s linear infinite;
}

@keyframes rotateCCW {
    0% {
        transform: rotate(0deg);
    }

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

@keyframes rotateCW {
    0% {
        transform: rotate(0deg);
    }

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

.form-card {
    width: 280px;
    border-radius: 1.2rem;
    background-color: #fff;
    padding: 1.3rem;
    color: #212121;
    text-align: center;
    position: relative;
}

.form-card-title {
    font-size: 1.3rem;
    margin-bottom: 0.6rem;
    margin-top: 0.2rem;
}

.form-card-prompt {
    margin-bottom: 2rem;
    font-size: 14px;
}

.form-card-input {
    all: unset;
}

.form-card-input-wrapper {
    position: relative;
    width: 100%;
    height: 3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1rem;
}

.form-card-input {
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 2rem;
    text-align: start;
    -webkit-transform: translateX(36px);
    -ms-transform: translateX(36px);
    transform: translateX(36px);
    position: absolute;
    z-index: 3;
    background-color: transparent;
}

.form-card-input-bg {
    content: '';
    width: 240px;
    height: 60px;
    margin: auto;
    inset: 0;
    bottom: 10px;
    position: absolute;
    z-index: 1;
    border-radius: 12px;
    background-color: rgba(206, 206, 206, 0.664);
}

.call-again {
    color: #5e5e5e;
    font-size: 14px;
}

.h-90 {
    height: 90%;
}

.call-again:hover {
    cursor: pointer;
}

.underlined {
    text-decoration: underline;
}

.underlined.disabled {
    pointer-events: none;
    opacity: 0.5;
    text-decoration: none;
}

.password-strength {
    width: 100%;
    margin-top: -15px;
}

.strength-bar {
    display: flex;
    height: 5px;
    margin-top: 5px;
}

.strength-segment {
    flex: 1;
    margin-right: 2px;
    background-color: #e0e0e0;
    position: relative;
}

.strength-segment:last-child {
    margin-right: 0;
}

.strength-segment::after {
    content: attr(data-strength);
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    white-space: nowrap;
}

.strength-segment.active {
    transition: background-color 0.3s ease;
}

.badge-success {
    background-color: var(--box2);
    font-weight: 400;
    color: var(--light);
}

.badge-warning {
    background-color: var(--yellow);
    font-weight: 400;
    color: var(--light);
}

.toast-container {
    left: 20px;
    bottom: 20px;
    z-index: 9999;
}

.toast-onload.hide {
    opacity: 0;
}

.toast-onload.show {
    opacity: 1;
}

.toast-onload h5 {
    font-size: 0.875rem;
}

.toast-onload h6 {
    font-size: 0.75rem;
    font-weight: 400;
}

.bg-green {
    background-color: #06d79c !important;
}

.bg-red {
    background-color: #ef5350 !important;
}

.bg-violet {
    background-color: #745af2 !important;
}

.bg-yellow {
    background-color: #FFB22B !important;
}

.bg-blue {
    background-color: #3c8cf3 !important;
}

.bg-light-blue {
    background-color: #f0f9ff !important;
    color: #0ea3e8 !important;
}

.bg-light-orange {
    background-color: #fff7ed !important;
    color: #fa913c !important;
}

.bg-light-green {
    background-color: #dbfff7bd !important;
    color: #14b8a5 !important;
}

.bg-light-yellow {
    background-color: #fffdf5 !important;
    color: #fabd23 !important;
}

a {
    text-decoration: none;
    cursor: pointer;
}

#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100%;
    background: var(--tonebg);
    background: linear-gradient(180deg, var(--tonebg) 30%, var(--tone-dark) 100%);
    z-index: 500;
    font-family: var(--prompt);
    transition: .3s ease;
    overflow-x: hidden;
    scrollbar-width: none;
}

.image-sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 240px;
    height: 50%;
    transition: 0.3s ease;
    overflow-x: hidden;
    scrollbar-width: none;
    z-index: -1;
    background-image: url('../assets/images/bg-befor.png');
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    opacity: 0.1;
    pointer-events: none;
}

.image-sidebar.hide,
#sidebar.hide {
    width: 80px;
}

#sidebar.hide~#content {
    width: calc(100% - 80px);
    left: 80px;
}

#sidebar .brand {
    font-size: 16px;
    font-weight: 700;
    height: 48px;
    display: flex;
    align-items: center;
    color: var(--light);
    position: sticky;
    top: 0;
    left: 0;
    background: var(--tonebg);
    z-index: 500;
    padding-bottom: 10px;
    box-sizing: content-box;
    opacity: 1;
    margin-bottom: 5px;
    text-wrap: nowrap;
}

#sidebar .brand #logoSystem {
    margin-top: 15px;
    margin-left: 15px;
    width: 54px;
}

#sidebar .brand .text-name {
    margin-left: 12px;
    margin-top: 8px;
}

#sidebar .brand .text-smail {
    z-index: 1010;
    font-size: 10px;
    position: absolute;
    color: var(--light);
    left: 68px;
    top: 40px;
    font-weight: 400;
    margin-left: 16px;
    transition: all 0.3s;
}

#sidebar.hide .brand span {
    opacity: 0;
}

#sidebar .side-menu {
    width: 100%;
    margin-left: 10px;
    overflow-y: hidden;
    overflow-x: hidden;
    padding-top: 10px;
    padding-bottom: 15px;
}

#sidebar .side-menu .headerli {
    height: 32px;
    background: transparent;
    margin-left: -25px;
    padding: 4px;
    width: 100%;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--light);
    text-transform: uppercase;
}

#sidebar .side-menu li {
    height: 50px;
    background: transparent;
    margin-left: -25px;
    padding: 4px;
    width: 100%;
    cursor: pointer;
}

#sidebar .side-menu li a {
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    align-items: center;
    border-radius: 18px 0 18px 0;
    font-size: 14px;
    color: var(--light);
    white-space: nowrap;
    overflow-x: hidden;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .2);

    &::-webkit-scrollbar {
        width: 0px;
    }
}

#sidebar .side-menu.top li.active {
    position: relative;
}

/* #sidebar .side-menu li.active::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    top: -46px;
    right: -16px;
    box-shadow: 20px 29px 0 var(--tone-litle);
    z-index: -1;
    transition: all 0.3s;
}

#sidebar .side-menu li.active::after {
    content: '';
    position: absolute;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    bottom: -50px;
    right: -16px;
    box-shadow: 22px -22px 0 var(--tone-litle);
    z-index: -1;
    transition: all 0.3s;
} */

/* #sidebar .side-menu li.active::before,
#sidebar .side-menu li.active::after {
    animation: popOnce .5s ease-out forwards;
}

@keyframes popOnce {
    0% {
        transform: scale(0.7);
        opacity: 0;
    }

    60% {
        transform: scale(1.2);
        opacity: 1;
    }

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

#sidebar .side-menu.top li a span {
    font-size: 14px;
}

#sidebar.hide .side-menu li a {
    width: calc(48px - (4px * 2));
    transition: width .3s ease;
}

#sidebar .side-menu li a i {
    min-width: calc(60px - ((4px + 6px) * 2));
    display: flex;
    justify-content: center;
    font-size: 16px;
}

#sidebar .side-menu.top li a:hover {
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .2);
    color: var(--light);
    background-color: var(--tone-hover);
}

#sidebar.hide .side-menu.top li a:hover {
    border-radius: 12px;
}

#sidebar .side-menu.top li.active a {
    text-shadow: 0 2px 6px var(--tone-dark);
    box-shadow: inset 0px 2px 6px rgba(0, 0, 0, .2);
    color: var(--light);
    border: 1px solid rgba(255, 255, 255, 0.056);
    background: var(--tone-hover);
}

.dark #sidebar .side-menu.top li.active a {
    box-shadow: inset 0px 2px 6px rgba(255, 255, 255, .2);
}

#sidebar.hide .side-menu.top li.active a {
    background: var(--tone-hover);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    border: 2px solid var(--light);

    span {
        text-shadow: 0 0px 0px transparent;
    }
}

/* #sidebar.hide .side-menu li.active::before {
    top: -44px;
}

#sidebar.hide .side-menu li.active::after {
    bottom: -52px;
} */

.headsubmane {
    display: flex;
    align-items: center;
}

.headsubmane .chevron {
    margin-left: -20px;
}

#sidebar .side-menu.top .submenu {
    margin-left: 0px;
}

#sidebar .side-menu.top .submenu.none {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.3s ease;
}

#sidebar .side-menu.top .submenu.show {
    max-height: 500px;
    opacity: 1;
    transition: max-height 0.5s ease, opacity 0.3s ease;
}

#sidebar .side-menu.top .submenu li a i {
    font-size: 8px;
}

#sidebar .side-menu.top .submenu li a:hover {
    /* color: var(--tone-dark); */
    background-color: transparent;
}

#sidebar .fa-chevron-right {
    transition: transform 0.3s ease;
    color: var(--light);
}

#sidebar .fa-chevron-right.show {
    transform: rotate(0deg);
    color: var(--light);
}

#sidebar .fa-chevron-right.click {
    transform: rotate(90deg);
    color: var(--light);
}

#content {
    position: relative;
    width: calc(100% - 240px);
    left: 240px;
    transition: .3s ease;
}

#content nav {
    height: 56px;
    background: var(--tonebg);
    padding: 0 14px 0 10px;
    display: flex;
    align-items: center;
    grid-gap: 24px;
    font-family: var(--prompt);
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
    box-shadow: var(--shadow);
}

#content nav::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: -40px;
    left: 0;
    border-radius: 50%;
    box-shadow: -20px -20px 0 var(--tonebg);
}

#content nav::after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    background-image: url('https://raw.githubusercontent.com/JacketJK/image/main/uploads/navbar-thai-bg-4.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    opacity: 0.2;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

#content nav a {
    color: var(--light);
}

#content nav .bx.bx-menu {
    cursor: pointer;
    color: var(--light);
}

#content nav .nav-link {
    font-size: 16px;
    transition: .3s ease;
}

#content nav .nav-link:hover {
    color: var(--light);
    opacity: 0.92;
}

#content nav form {
    max-width: 400px;
    width: 100%;
    margin-right: auto;
}

#content nav form .form-input {
    display: flex;
    align-items: center;
    height: 36px;
}

#content nav form .form-input input {
    flex-grow: 1;
    padding: 0 16px;
    height: 100%;
    border: none;
    background: var(--grey);
    border-radius: 36px 0 0 36px;
    outline: none;
    width: 100%;
    color: var(--dark);
}

#content nav form .form-input button {
    width: 36px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--blue);
    color: var(--light);
    font-size: 18px;
    border: none;
    outline: none;
    border-radius: 0 36px 36px 0;
    cursor: pointer;
}

#content nav .notification {
    font-size: 20px;
    position: relative;
    transition: 0.3s ease;
}

#content nav .notification:hover {
    transform: scale(1.02);
}

nav a.profile {
    padding: 2px 10px 2px 2px;
    border-radius: 50px;
    background: #ffffff1f;
}

.dark nav a.profile {
    background: var(--tone-hover);
}

.user-profile {
    object-fit: cover;
    object-position: top;
    width: 100%;
    height: 100%;
}

.dropdown-menu {
    z-index: 9999 !important;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-radius: 20px !important;
}

.dark #offcanvasSystem,
.dark .dropdown-menu {
    background-color: rgba(30, 30, 30, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#offcanvasSystem {
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(25px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(190%) !important;
    border-radius: 30px 0 0 30px !important;

    .fa-xmark,
    h5 {
        color: var(--dark) !important;

        i {
            color: var(--dark) !important;
            opacity: 0.5;
            font-size: 16px !important;
        }
    }
}

.dropdown-menu h6 {
    color: var(--dark);
}

.dropdown-menu a {
    color: var(--dark);
    font-size: 16px;
    padding: 5px 15px;
}

.dropdown-menu span {
    font-weight: 300;
    font-size: 14px;
}

.dropdown-menu a .fw-semibold {
    font-weight: 300;
    font-size: 14px;
}

.dropdown-menu a span {
    font-weight: 300;
    font-size: 12px;
}

.dark .dropdown-content .dropdown-item {
    color: var(--dark);
}

.authentication-login {
    background-color: var(--grey) !important;
    color: var(--dark) !important;
}

.dark .text-body-secondary {
    color: var(--light) !important;
}

.dropdown-content .dropdown-item:hover,
.dropdown-content .dropdown-item:hover span,
.dropdown-content .dropdown-item:hover h6,
.dropdown-content .dropdown-item:hover text-body-secondary {
    color: var(--tonebg) !important;
}

.dark .dropdown-content .dropdown-item:hover,
.dark .dropdown-content .dropdown-item:hover span,
.dark .dropdown-content .dropdown-item:hover h6,
.dark .dropdown-content .dropdown-item:hover text-body-secondary {
    color: var(--tone-hover) !important;
}

.dropdown-content .dropdown-item:hover .bg-secondary {
    background-color: var(--tonebg) !important;
}

.dropdown-content .dropdown-item:hover i {
    color: var(--light) !important;
}

.dropdown-content {
    overflow-y: auto;
    max-height: 400px;
}

.dropdown-content .message-body .w-75 h6 {
    font-size: 14px;
    font-weight: 300;
}

.dropdown-content .message-body .w-75 span {
    font-size: 12px;
}

.dropdown-content .message-body .dropdown-item .bg-opacity-25 {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-content .ms-3 span {
    font-size: 12px;
}

.dropdown-content .profile-user {
    width: 80px;
    height: 80px;
}

.dropdown-item:hover {
    background-color: var(--tone-litle);
}

.limited-text {
    width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#content nav .notification i {
    font-size: 20px;
}

#content nav .notification .num {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--light);
    background: var(--red);
    color: var(--light);
    font-weight: 500;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#content nav #onsideManu {
    color: var(--light);
}

#content main {
    width: 100%;
    min-height: 80vh;
    padding: 20px 24px;
    font-family: var(--prompt);
    max-height: calc(100vh - 56px);
    overflow-y: auto;
}

#content main .head-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-gap: 16px;
    flex-wrap: wrap;
}

#content main .head-title .left h2 {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--tone-dark);
}

#content main .head-title .left .breadcrumb {
    display: flex;
    align-items: center;
    grid-gap: 16px;
    font-size: 14px;
}

#content main .head-title .left .breadcrumb li {
    color: var(--dark);
}

#content main .head-title .left .breadcrumb li a {
    color: var(--dark-grey);
    pointer-events: none;
}

#content main .head-title .left .breadcrumb li a.active {
    color: var(--dark);
    font-weight: 500;
    pointer-events: unset;
}

#content main .head-title .btn-download {
    height: 36px;
    padding: 0 16px;
    border-radius: 36px;
    background: var(--blue);
    color: var(--light);
    display: flex;
    justify-content: center;
    align-items: center;
    grid-gap: 10px;
    font-weight: 500;
}

#content main .box-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 20px;
    /* margin-left: -30px; */
    align-items: start;
}

#content main .box-info li {
    padding: 12px;
    margin-top: 10px;
    margin-bottom: 10px;
    background: var(--light);
    border-radius: 35px;
    /* border: 5px outset #FFF; */
    display: flex;
    align-items: center;
    grid-gap: 24px;
    box-shadow: var(--shadow);
    transition: all 0.3s;
    overflow: hidden;
}

#content main .box-info li:hover {
    transform: scale(1.05);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

#content main .box-info li i {
    width: 78px;
    height: 78px;
    flex-shrink: 0;
    min-width: 78px;
    min-height: 78px;
    border-radius: 50%;
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#content main .box-info .shadow-icon {
    position: relative;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;

    i {
        position: absolute;
        background: transparent !important;
        font-size: 110px !important;
        opacity: 0.1;
        top: 50%;
        right: 0;
        transform: translate(-10%, -50%);
        pointer-events: none;
    }
}

/* #content main .box-info li:nth-child(1),
#content main .box-info li:nth-child(1) i {
    background: rgb(61, 139, 242);
    background: linear-gradient(130deg, rgba(61, 139, 242, 1) 0%, rgba(4, 75, 108, 1) 100%);
}

#content main .box-info li:nth-child(2),
#content main .box-info li:nth-child(2) i {
    background: rgb(6, 214, 155);
    background: linear-gradient(130deg, rgba(6, 214, 155, 1) 0%, rgba(4, 99, 32, 1) 100%);
}

#content main .box-info li:nth-child(3),
#content main .box-info li:nth-child(3) i {
    background: rgb(115, 90, 242);
    background: linear-gradient(130deg, rgba(115, 90, 242, 1) 0%, rgba(44, 4, 99, 1) 100%);
}

#content main .box-info li:nth-child(4),
#content main .box-info li:nth-child(4) i {
    background: rgb(240, 82, 79);
    background: linear-gradient(130deg, rgba(240, 82, 79, 1) 0%, rgba(99, 4, 27, 1) 100%);
} */

#content main .box-info li:nth-child(1) i,
#content main .box-info li:nth-child(2) i,
#content main .box-info li:nth-child(3) i,
#content main .box-info li:nth-child(4) i {
    color: var(--dark);
}

.dark #content main .box-info li,
.dark #content main .box-info li i {
    background: #0c0c1e;
}

#content main .box-info li .text h3 {
    font-size: 30px;
    font-weight: 500;
    color: var(--dark);

}

#content main .box-info li .text p {
    color: var(--dark);

    text-wrap: nowrap;
}

#content main .box-info li .text span {
    color: var(--dark);
    margin-bottom: 5px;
}

#content main .data-contianer {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 14px;
    margin-top: 4px;
    width: 100%;
    color: var(--dark);
    align-items: flex-start;
}

.sticky-container {
    position: fixed;
    bottom: 0;
    left: 240px;
    right: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    z-index: 1000;
}

.sticky-container.hide {
    left: 80px;
}

/* Tab-specific sticky save bar — sticks to the bottom of the tab's own scroll area */
.tab-sticky-container {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 16px -12px -12px -12px;
    padding: 0;
    box-sizing: border-box;
    z-index: 100;
}

.bg-sticky {
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 0 0 0 15px 0;
    padding: 10px 32px !important;
}

.dark .bg-sticky {
    background: rgba(0, 0, 0, 0.22);
}

#content main .data-contianer>div {
    border: none;
    border-radius: 20px;
    background: var(--bg-light);
    padding: 24px;
    overflow-x: auto;
}

#content main .data-content {
    border-radius: 20px;
    background: var(--bg-light);
    overflow-x: auto;
    border: none;
    box-shadow: var(--shadow);

}

#content main .data-contianer .head {
    display: flex;
    align-items: center;
    grid-gap: 16px;
    margin-bottom: 24px;
}

/* #content main .data-contianer .head::before {
        content: "";
        display: block;
        height: 100%;
        width: 100%;
        background-image: url('https://raw.githubusercontent.com/JacketJK/image/main/uploads/thai-bg.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
        opacity: 0.1;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 0;
    } */

#content main .data-contianer .head h5 {
    margin-right: auto;
    font-weight: 400;
    color: var(--tone-hover);
}

#content main .data-contianer .content-container {
    padding: 18px;
    background: var(--bg-light);
}

#content main .data-contianer .head i {
    cursor: pointer;
}

#content main .data-contianer .datacontent {
    flex-grow: 1;
    flex-basis: 500px;
    box-shadow: var(--shadow);
}

#content main .data-contianer .databox {
    flex-grow: 1;
    flex-basis: 300px;
    box-shadow: var(--shadow);
}

#content main .data-contianer .dataresponse {
    flex-grow: 1;
    flex-basis: 800px;
    box-shadow: var(--shadow);
}

.theme-switch {
    --toggle-size: 15px;
    --container-width: 5.625em;
    --container-height: 2.5em;
    --container-radius: 6.25em;
    --container-light-bg: #3D7EAE;
    --container-night-bg: #1D1F2C;
    --circle-container-diameter: 3.375em;
    --sun-moon-diameter: 2.125em;
    --sun-bg: #ECCA2F;
    --moon-bg: #C4C9D1;
    --spot-color: #959DB1;
    --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
    --stars-color: #fff;
    --clouds-color: #F3FDFF;
    --back-clouds-color: #AACADF;
    --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
    --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
}

.theme-switch,
.theme-switch *,
.theme-switch *::before,
.theme-switch *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: var(--toggle-size);
}

.theme-switch__container {
    width: var(--container-width);
    height: var(--container-height);
    background-color: var(--container-light-bg);
    border-radius: var(--container-radius);
    overflow: hidden;
    cursor: pointer;
    -webkit-box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
    box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    position: relative;
}

.theme-switch__container::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    -webkit-box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
    box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
    border-radius: var(--container-radius)
}

.theme-switch__checkbox {
    display: none;
}

.theme-switch__circle-container {
    width: var(--circle-container-diameter);
    height: var(--circle-container-diameter);
    background-color: rgba(255, 255, 255, 0.1);
    position: absolute;
    left: var(--circle-container-offset);
    top: var(--circle-container-offset);
    border-radius: var(--container-radius);
    -webkit-box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: var(--circle-transition);
    -o-transition: var(--circle-transition);
    transition: var(--circle-transition);
    pointer-events: none;
}

.theme-switch__sun-moon-container {
    pointer-events: auto;
    position: relative;
    z-index: 2;
    width: var(--sun-moon-diameter);
    height: var(--sun-moon-diameter);
    margin: auto;
    border-radius: var(--container-radius);
    background-color: var(--sun-bg);
    -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
    box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
    -webkit-filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
    filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
    overflow: hidden;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
}

.theme-switch__moon {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    width: 100%;
    height: 100%;
    background-color: var(--moon-bg);
    border-radius: inherit;
    -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
    box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    position: relative;
}

.theme-switch__spot {
    position: absolute;
    top: 0.75em;
    left: 0.312em;
    width: 0.75em;
    height: 0.75em;
    border-radius: var(--container-radius);
    background-color: var(--spot-color);
    -webkit-box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
    box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
}

.theme-switch__spot:nth-of-type(2) {
    width: 0.375em;
    height: 0.375em;
    top: 0.937em;
    left: 1.375em;
}

.theme-switch__spot:nth-last-of-type(3) {
    width: 0.25em;
    height: 0.25em;
    top: 0.312em;
    left: 0.812em;
}

.theme-switch__clouds {
    width: 1.25em;
    height: 1.25em;
    background-color: var(--clouds-color);
    border-radius: var(--container-radius);
    position: absolute;
    bottom: -0.625em;
    left: 0.312em;
    -webkit-box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
    box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
    -webkit-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
    -o-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
    transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
}

.theme-switch__stars-container {
    position: absolute;
    color: var(--stars-color);
    top: -100%;
    left: 0.312em;
    width: 2.75em;
    height: auto;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
}

.theme-switch__checkbox:checked+.theme-switch__container {
    background-color: var(--container-night-bg);
}

.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__circle-container {
    left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}

.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__circle-container:hover {
    left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em)
}

.theme-switch__circle-container:hover {
    left: calc(var(--circle-container-offset) + 0.187em);
}

.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__moon {
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0);
}

.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__clouds {
    bottom: -4.062em;
}

.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__stars-container {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.dragdrop .data-content {
    cursor: grab;
}

.dragdrop .data-content:active {
    cursor: grabbing;
}

.modal-content {
    background-color: rgba(255, 255, 255, 1);
    backdrop-filter: blur(4px) saturate(100%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    border-radius: 28px !important;
    color: var(--dark);
}

.modal-header,
.modal-body,
.modal-footer {
    background-color: transparent !important;
    border: none !important;
}

.modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.modal-footer .btn {
    /* iOS Blue */
    font-weight: 400;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s;
}

.modal-footer .btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.modal-footer .btn:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.modal-footer .btn strong {
    font-weight: 600;
}

.dark .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark .modal-footer .btn {
    color: #0A84FF !important;
    /* iOS Bright Blue for Dark Mode */
}

.dark .modal-footer .btn:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark .modal-content {
    background-color: rgba(28, 28, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--light);
}

.modal-backdrop.show {
    opacity: 0.3;
    /* Subtle iOS style backdrop */
}

.modal-footer .border-end {
    border-right: var(--bs-border-width) var(--bs-border-style) var(--grey) !important;
}

.custom-tooltip {
    --bs-tooltip-bg: var(--tone-dark);
    --bs-tooltip-color: var(--bs-white);
    font-family: var(--prompt) !important;
}

.badge-secondary {
    background-color: var(--secondary);
    font-size: 10px !important;
    color: var(--dark);
    font-weight: 300;
}

.badge-holiday {
    background-color: var(--box4);
    font-size: 10px !important;
    color: #FFF;
    font-weight: 300;
}

.btn-holiday {
    border: none;
    background-color: transparent;
    color: #65758c;
    font-weight: 400;
    font-size: 15px;
    outline: none;
}

.btn-holiday:hover {
    background-color: #f6f7f7 !important;
}

.time-text {
    color: var(--tone-hover);
    font-size: 48px;
}

.date-text {
    color: var(--dark);
    font-size: 18px;
}

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

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

.font-size-10 {
    font-size: 10px !important;
}

.text-check-in {
    color: var(--tone-hover);
}

.text-check-out {
    color: var(--orange);
}

.button-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 20px;
    padding: 10px 0;
}

.button-container-grid {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 15px;
}

.btn-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.btn-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: none;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 8px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--tonebg);
    font-size: 28px;
}

.btn-circle.disabled {
    cursor: not-allowed;
    color: var(--dark-grey);
}

.btn-check-in {
    width: 115px;
    height: 115px;
    border-radius: 50%;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 8px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgb(67, 216, 250);
    background: linear-gradient(0deg, rgba(67, 216, 250, 1) 0%, rgba(2, 144, 209, 1) 100%);
    color: #FFF;
    font-size: 50px;
}

.btn-check-out {
    width: 115px;
    height: 115px;
    border-radius: 50%;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 8px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgb(255, 165, 0);
    background: linear-gradient(0deg, rgba(255, 165, 0, 1) 0%, rgba(255, 120, 0, 1) 100%);
    color: #FFF;
    font-size: 50px;
}

.btn-check-success {
    width: 115px;
    height: 115px;
    border-radius: 50%;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 8px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgb(3, 168, 108);
    background: linear-gradient(0deg, rgba(53, 232, 122, 1) 0%, rgba(3, 168, 108, 1) 100%);
    color: #FFF;
    font-size: 50px;
}

.btn-label {
    font-size: 14px;
    color: #666;
    text-align: center;
    font-weight: 400;
}

.btn-label.disabled {
    color: var(--dark-grey);
}

.label-check-in {
    color: #00a0e9;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
}

.label-check-out {
    color: #ffa500;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
}

.label-check-success {
    color: #1fcc72;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
}

.date-picker {
    position: relative;
    border: 1px solid #eee;
    border-radius: 15px;
    padding: 12px 20px;
    background: var(--bg-light);
    margin-bottom: 15px;
    font-size: 14px;
    color: var(--dark);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.inputGroup .month-btn,
.inputGroup .arrow-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #666;
    padding: 8px;
}

.inputGroup .month-btn.prev,
.inputGroup .arrow-btn.prev {
    left: 2%;
}

.inputGroup .month-btn.next,
.inputGroup .arrow-btn.next {
    right: 2%;
}

.inputGroup .dashboradEmp-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #666;
    padding: 8px;
}

.inputGroup .dashboradEmp-btn.prev {
    left: 2%;
}

.inputGroup .dashboradEmp-btn.next {
    right: 2%;
}

.data-content .title-header {
    font-size: 20px;
    color: var(--dark);
}

.status-card {
    background: white;
    border-radius: 20px;
    padding: 12px;
    margin-bottom: 12px;
    display: flex;
    border: 1px solid #FFF;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    cursor: pointer;

    .bg-secondary {
        background-color: #93a2b8 !important;
    }

    .bg-info {
        background-color: #0ea3e8 !important;
    }

    .bg-danger {
        background-color: #f56262 !important;
    }

    .bg-primary {
        background-color: #3b82f5 !important;
    }

    .bg-warning {
        background-color: #fabd23 !important;
    }

    .bg-orange {
        background-color: #fa913c !important;
    }

    .bg-green {
        background-color: #06d79c !important;
    }
}

body.dark {
    .bg-work-checkin {
        background-color: var(--grey);
        color: var(--dark);
    }

    .bg-work-in {
        background-color: var(--grey);
        color: #06d79c;
    }

    .bg-work-out {
        background-color: var(--grey);
        color: #f56262;
    }

    .bg-work-back {
        background-color: var(--grey);
        color: #3b82f5;
    }

    .bg-work-late {
        background-color: var(--grey);
        color: #fabd23;
    }

    .bg-work-leave {
        background-color: var(--grey);
        color: #fa913c;
    }

    .bg-in-green {
        background-color: var(--grey);
        color: #83cc16;
    }

    .bg-work-ot {
        background-color: var(--grey);
        color: #0ea3e8;
    }
}

.btn-box.btg-mint {
    color: #14b8a5;
    background: #cafaf0;
}

.btn-box.btg-blue {
    color: #3b82f5;
    background: #f0f6ff;
}

.btn-box.btg-violet {
    color: #895bf5;
    background: #eeebff;
}

.btn-box.btg-red {
    color: #f04343;
    background: #ffe3e3;
}

.btn-box.btg-yellow {
    color: #f59f0a;
    background: #fff4c7;
}

.btn-box.btg-info {
    color: #0ea3e8;
    background: #e0f3ff;
}

.btn-box.btg-green {
    color: #83cc16;
    background: #ecfccc;
}

.btn-box.btg-orange {
    color: #fa7516;
    background: #ffedd6;
}

.next-day {
    padding: 12px;
    background: var(--gray-hover);
    border-radius: 15px;
    margin-top: 8px;
    color: #64748B;
    font-weight: 400;
}

.status-icon {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    padding: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 16px !important;
    color: #FFF !important;
}

.bg-work-ot {
    background-color: #f0f9ff;
    color: #0ea3e8;
}

.bg-work-ot:hover {
    border: 1px solid #0ea3e8;
}

.bg-work-checkin {
    background-color: #f7fafc;
    color: #93a2b8;
}

.bg-work-checkin:hover {
    border: 1px solid #93a2b8;
}

.bg-work-in {
    background-color: #e9fdf7;
    color: #06d79c;
}

.bg-work-in:hover {
    border: 1px solid #06d79c;
}

.bg-work-out {
    background-color: #fff2f2;
    color: #f56262;
}

.bg-work-out:hover {
    border: 1px solid #f56262;
}

.bg-work-back {
    background-color: #f0f6ff;
    color: #3b82f5;
}

.bg-work-back:hover {
    border: 1px solid #3b82f5;
}

.bg-work-late {
    background-color: #fffbeb;
    color: #fabd23;
}

.bg-work-late:hover {
    border: 1px solid #fabd23;
}

.bg-work-leave {
    background-color: #fff7ed;
    color: #fa913c;
}

.bg-work-leave:hover {
    border: 1px solid #fa913c;
}

.bg-in-green {
    background-color: #f8ffe8;
    color: #83cc16;
}

.progress-orange {
    background-color: #fa913c !important;
}

.text-orange {
    color: #fa913c;
}

.text-office {
    color: #7366ff;
}

.text-wfh {
    color: #2cd4bd;
}

body.dark .btn-tone {
    background-color: var(--tone-hover);
    color: var(--dark);
    border: 2px solid;
}

.status-left {
    display: flex;
    align-items: center;

    .tx-title {
        font-size: 16px !important;
        margin-left: 10px !important;
    }
}

.title-text {
    font-size: 20px;
    font-weight: 500;
    color: #333;
    margin-bottom: 20px;
}

.status-number {
    font-size: 20px;
    font-weight: 600;
}

.count-leave {
    font-size: 24px;
    font-weight: 600;
}

.btn-group .btn-box {
    width: 60px;
    height: 60px;
    padding: 18px;
    border-radius: 20px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    display: flex;
    border: 0;
    font-size: 32px;
    box-shadow: ver(--shadow);
}

.box-label {
    font-size: 14px;
    font-weight: 500;
}

.offcanvas-body .text-muted.font-size-12 {
    background-color: #f7fafc;

}

.modal.show,
.offcanvas-backdrop.show {
    backdrop-filter: blur(4px);
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 1;
}

.modal {
    z-index: 2010 !important;
}

.modal-backdrop {
    z-index: 2009 !important;
}

.offcanvas {
    border: none;
    box-shadow: var(--shadow);
    z-index: 2000 !important;
}

.offcanvas-body h5 {
    /* color: var(--text-primary, var(--light-text)); */
    font-weight: 600;
}

.offcanvas-body h5 i {
    color: var(--tone-dark);
}

.offcanvas-backdrop {
    z-index: 1999 !important;
}

.offcanvas-topper {
    z-index: 2050 !important;
}

.offcanvas-topper .offcanvas-backdrop {
    z-index: 2049 !important;
}

.modal-topper {
    z-index: 2060 !important;
}

.modal-topper .modal-backdrop {
    z-index: 2059 !important;
}

/* .modal-content ,  */
/* .dropdown-menu ,
    .offcanvas {
        backdrop-filter: blur(5px);
        background-color: rgba(255, 255, 255, 0.8);
    } */

.holiday-box {
    width: 50px;
    height: 50px;
    background-color: #e1e8f0;
}

.danger-box {
    width: 50px;
    height: 50px;
    background-color: #fff2f2;
    color: #f56262;
}

.warning-box {
    width: 50px;
    height: 50px;
    background-color: #fffbeb;
    color: #fabd23;
}

.light-warning-box {
    width: 50px;
    height: 50px;
    background-color: #fff7ed;
    color: #fa913c;
}

.today-box {
    width: 50px;
    height: 50px;
    background-color: var(--tonebg);
    color: #FFF;
}

.today-box-status {
    height: 50px;
    background-color: var(--tone-litle);
    color: var(--tonebg);
}

.working-box-status {
    height: 50px;
    background-color: var(--tone-litle);
    color: var(--tonebg);
}

.working-box {
    width: 50px;
    height: 50px;
    background-color: var(--tone-litle);
    color: var(--dark);
}

.bg-warning-subtle,
.bg-danger-subtle {
    height: 50px !important;
}

.ago-box {
    width: 50px;
    height: 50px;
    background-color: #ffe3e3;
}

.ago-box span {
    color: var(--tone-red);
}

.excellent-box {
    height: 50px;
    background-color: #eeebff;
    color: #895bf5;
}

.premium-box {
    height: 50px;
    color: #DAA520;
    background-color: #FFFACD;
}

.success-box {
    width: 50px;
    height: 50px;
    background-color: #cafaf0;
}

.success-box span {
    color: var(--tone-lightgreen);
}

.progress-bar-striped.progress-bar-animated.bg-progress {
    background-color: var(--tone-hover) !important;
}

.nav-tabs-wrapper {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #dee2e6;
}

.nav-tabs-container {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
    padding: 0 40px;
}

.nav-tabs-container::-webkit-scrollbar {
    display: none;
}

.nav-tabs {
    flex-wrap: nowrap !important;
    white-space: nowrap;
    border-bottom: none;
}

.nav-tabs .nav-item {
    display: inline-block;
    float: none;
}

.nav-tabs .profile-tap {
    border: none;
    color: #6c757d;
    padding: 12px 30px;
    margin-right: 5px;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    position: relative;
    transition: color 0.3s ease, border-bottom 0.3s ease;
    border-bottom: 2px solid transparent;
}

.nav-tabs .profile-tap.active {
    color: var(--tone-hover);
    background: transparent;
    border-bottom: 4px solid var(--tone-hover);
    font-weight: 500;
    border-radius: 8px;
    transition: color 0.3s ease, border-bottom 0.3s ease;
}

.nav-tabs .profile-tap:hover {
    border: none;
    border-bottom: 2px solid #e9ecef;
}

.nav-tabs .profile-tap.active:hover {
    border-bottom: 4px solid var(--tone-hover);
}

.scroll-button {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    border: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: var(--bg-light);
}

.scroll-button.left {
    left: 0;
}

.scroll-button.right {
    right: 0;
}

.scroll-button:disabled {
    opacity: 0;
    cursor: default;
}

.line-loader {
    width: 100%;
    height: 7px;
    background-color: var(--tone-light);
    position: absolute;
    top: -10px;
    border-radius: 30px;
}

.line-loader:before {
    content: "";
    position: absolute;
    background: var(--tone-hover);
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    height: 7px;
    border-radius: 30px;
    animation: moving 1s ease-in-out infinite;
}

@keyframes moving {
    30% {
        width: 100%;
    }

    100% {
        width: 0;
        right: 0;
        left: unset;
    }
}

.inputGroup {
    position: relative;
    border: 1px solid rgb(225, 232, 240);
    border-radius: 15px;
    padding: 0 7px;
}

.inputGroup .inputForm {
    font-size: 16px;
    font-weight: 400;
    padding: 8px;
    outline: none;
    border: 0;
    background-color: transparent;
    color: var(--dark);
    width: 100%;
}

.inputGroup label {
    font-size: 14px;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.7em;
    margin-left: 0.5em;
    pointer-events: none;
    transition: all 0.2s ease;
    color: rgb(100, 100, 100);
}

.inputGroup select~label,
.inputGroup .inputAddress~label,
.inputGroup .inputForm:focus~label,
.inputGroup .inputForm:valid~label,
.inputGroup .inputForm[disabled]:focus~label,
.inputGroup .inputForm[disabled]:valid~label,
.inputGroup .inputForm[disabled]~label,
.inputGroup .inputForm[readonly]:focus~label,
.inputGroup .inputForm[readonly]:valid~label,
.inputGroup .inputForm[readonly]~label {
    transform: translateY(-50%) scale(0.8);
    margin: 0;
    margin-inline-start: 0.5em;
    padding: 0 5px;
    background-color: var(--bg-light);
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.inputGroup .inputForm[disabled]~label,
.inputGroup .inputForm[readonly]~label {
    color: var(--readonly);
}

.inputGroup .inputForm[disabled],
.inputGroup .inputForm[readonly] {
    color: var(--readonly);
}

.inputGroup .inputForm.flatpickr[disabled],
.inputGroup .inputForm.flatpickr[readonly] {
    color: var(--dark);
}

.inputGroup .inputForm.flatpickr[disabled]~label,
.inputGroup .inputForm.flatpickr[readonly]~label {
    color: rgb(100, 100, 100);
}

.inputGroup .inputForm:focus~label {
    color: var(--tone-hover);
}

.inputGroup .inputForm:focus {
    border-color: rgb(150, 150, 200);
}

.inputGroup:has(.inputForm:hover) {
    border: 1px solid var(--tone-hover);
}

.inputGroup:has(.inputForm:focus) {
    border: 2px solid var(--tone-hover) !important;
}

select option {
    color: var(--dark);
    background-color: var(--bg-light);
    font-size: 14px !important;
    border-radius: 20px !important;
    box-shadow: var(--shadow) !important;
    border: none !important;
    outline: none !important;
}

select::-webkit-listbox {
    border: none !important;
}

option:focus {
    background-color: var(--gray-hover);
    color: var(--dark);
}

option:checked {
    background-color: var(--tone-litle);
    color: var(--dark);
}

.btn-outline-check {
    border: 1px solid rgb(225, 232, 240);
    border-radius: 10px;
    color: rgb(100, 100, 100);
    font-weight: 400;
    font-size: 14px;
    min-width: 60px;
}

.btn-outline-check:hover {
    border: 1px solid rgb(225, 232, 240) !important;
    background-color: var(--secondary) !important;
    color: rgb(100, 100, 100) !important;
}

.btn-check:checked+.btn-outline-check {
    border: 1px solid var(--tone-hover) !important;
    background-color: var(--tone-litle) !important;
    color: var(--tone-hover) !important;
    font-weight: 500;
}

.btn-cancel {
    font-size: 14px;
    color: var(--dark);
    border: 1px solid rgb(225, 232, 240);
    cursor: pointer;
}

.btn-delete {
    font-size: 14px;
    color: var(--box4);
    border: 2px solid var(--box4);
    ;
    cursor: pointer;
}

.btn-delete:hover {
    background-color: var(--box4);
    color: #FFF;
    opacity: 0.8;
}

.btn-tone {
    font-size: 14px;
    color: var(--light);
    background-color: var(--tonebg);
    border: 0;
    cursor: pointer;
}

.btn-tone:disabled {
    color: rgba(0, 0, 0, 0.26);
    background-color: rgba(0, 0, 0, 0.12);
    cursor: not-allowed;
}

.btn-tone:hover {
    opacity: 0.8;
    background-color: var(--tonebg);
    color: var(--light);
}

.btn-cancel:hover {
    opacity: 0.8;
    background-color: var(--secondary);
    color: var(--dark);
}

.btn-tone:active {
    transform: scale(0.98);
    background-color: var(--tonebg);
    color: var(--light);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
}

.btn-cancel:active {
    transform: scale(0.98);
    background-color: var(--gray-hover);
    color: var(--dark);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
}

.btn-hibe {
    color: var(--tone-hover);
    width: 45px;
    height: 45px;
    font-size: 18px;
}

.table-sm tr th {
    font-size: 0.82rem;
    font-weight: 600;
    vertical-align: middle;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table-sm tr td {
    text-align: center;
    font-size: 0.84rem;
    padding: 12px 8px;
    align-items: center;
    vertical-align: middle;
    color: var(--text-primary, var(--dark));
}

.table-nowrap th,
.table-nowrap td {
    white-space: nowrap;
}

.fixed-table-pagination {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%);
    backdrop-filter: blur(6px);
    padding-top: 12px;
}

.dark .fixed-table-pagination {
    background: linear-gradient(180deg, rgba(6, 7, 20, 0) 0%, rgba(6, 7, 20, 0.9) 20%);
}

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

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

.icon-circle.holiday {
    border-radius: 10px;
    width: 27px;
    height: 27px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff3cd;
    border: 1px solid #ffc106;
}

.icon-group {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.icon-group .icon-circle {
    transition: transform 0.2s ease;
}

.icon-group:has(.icon-circle:nth-child(3)) .icon-circle {
    transform: scale(0.9);
}

.icon-group:has(.icon-circle:nth-child(3)) {
    gap: 0px;
}

.icon-circle.yellow {
    background-color: #fffbeb;
    color: #fabd23;
}

.icon-circle.green {
    background-color: var(--box2);
    color: #FFF;
}

.icon-circle.success {
    background-color: var(--tone-litle);
    color: var(--tonebg);
}

.icon-circle.primary {
    background-color: var(--box3);
    color: #fff;
}

.icon-circle.danger {
    background-color: #f44336;
    color: #fff;
}

.icon-circle.warning {
    background-color: #FF9800;
    color: #fff;
}

.icon-circle.info {
    background-color: #2196F3;
    color: #fff;
}

.icon-circle.secondary {
    background-color: #dde1e7;
    color: #8c99ab;
}

.bar {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    width: 82%;
    height: 22px;
    background-color: #f5f7fa;
    border-radius: 20px;
    color: #8c99ab;
    font-size: 10px;
}

.bootstrap-table .fixed-table-body #table_Report tbody th.weekday.holiday,
.bootstrap-table .fixed-table-body #table_Report tbody td.weekday.holiday,
.bootstrap-table .fixed-table-body #table_Report tbody th.weekday,
.bootstrap-table .fixed-table-body #table_Report tbody td.weekday {
    background-color: #FFF !important;
    color: #8c99ab;
}

.bootstrap-table .fixed-table-body table tbody th.weekday,
.bootstrap-table .fixed-table-body table tbody td.weekday {
    background-color: var(--tonebg) !important;
    color: #FFF;
}

.bootstrap-table .fixed-table-body table tbody th.weekday.holiday,
.bootstrap-table .fixed-table-body table tbody td.weekday.holiday {
    background-color: #f1f5f9 !important;
    color: #93a2b8;
    position: relative;
    overflow: hidden;
}

.bootstrap-table .fixed-table-body table tbody th.weekend-day,
.bootstrap-table .fixed-table-body table tbody td.weekend-day {
    background-color: #f1f5f9 !important;
    color: #93a2b8;
    position: relative;
    overflow: hidden;
}

.bootstrap-table .fixed-table-body table tbody td.weekend-day::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 38px solid #e2e8f0;
    border-left: 38px solid transparent;
    z-index: 1;
}

.bootstrap-table .fixed-table-body table tbody td.weekday.holiday::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 38px solid #e2e8f0;
    border-left: 38px solid transparent;
    z-index: 1;
}

.bootstrap-table .fixed-table-body table tbody td.weekend-day::before {
    content: "OFF";
    position: absolute;
    top: 5px;
    right: 2px;
    font-size: 8px;
    color: #8c99ab;
    z-index: 2;
    pointer-events: none;
}

.bootstrap-table .fixed-table-body table tbody td.weekday.holiday::before {
    content: "H";
    position: absolute;
    top: 5px;
    right: 7px;
    font-size: 8px;
    color: #8c99ab;
    z-index: 2;
    pointer-events: none;
}

/* =============================================
   UNIFIED PREMIUM TABLE DESIGN SYSTEM
   ============================================= */
.table-custom {
    font-size: 0.85rem !important;
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
    margin-top: -5px;
}

/* --- Header --- */
.table-custom thead th {
    background: transparent !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.06) !important;
    border-top: none !important;
    color: var(--text-muted, #64748b) !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 14px 16px !important;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 4;
}

.dark .table-custom thead th {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Bootstrap-table th-inner height normalization */
.table-custom thead th .th-inner {
    padding: 0 !important;
    line-height: 1.5;
}

/* --- Rows (Floating Glass Cards) --- */
.table-custom tbody tr {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.015);
}

.dark .table-custom tbody tr {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* --- Cells --- */
.table-custom tbody td {
    vertical-align: middle;
    background: transparent !important;
    color: var(--text-primary, var(--dark)) !important;
    padding: 14px 16px !important;
    border: none !important;
    font-size: 0.85rem !important;
}

.dark .table-custom tbody td {
    color: var(--light-text) !important;
}

/* Rounded corners on first/last cells */
.table-custom tbody tr td:first-child {
    border-top-left-radius: 16px !important;
    border-bottom-left-radius: 16px !important;
}

.table-custom tbody tr td:last-child {
    border-top-right-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
}

/* Remove last-row bottom border artifact */
.table-custom tbody tr:last-child td {
    border-color: transparent !important;
}

/* --- Row Hover --- */
.table-custom tbody tr:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.88) 100%) !important;
    transform: translateY(-3px) scale(1.003);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(2, 163, 237, 0.18) !important;
    cursor: pointer;
}

.dark .table-custom tbody tr:hover {
    background: linear-gradient(135deg, rgba(30, 30, 55, 0.7) 0%, rgba(20, 20, 42, 0.8) 100%) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2) !important;
}

.table-custom tbody tr:hover td {
    color: var(--text-primary, var(--dark)) !important;
}

.dark .table-custom tbody tr:hover td {
    color: var(--light-text) !important;
}

/* --- Premium Badges --- */
.table-custom .badge {
    padding: 5px 12px !important;
    border-radius: 30px !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.015);
    transition: all 0.25s ease;
}

.table-custom .badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.table-custom .badge.text-bg-success,
.table-custom .badge.bg-success {
    background-color: rgba(9, 169, 88, 0.1) !important;
    color: #0fa958 !important;
    border-color: rgba(9, 169, 88, 0.2) !important;
}

.table-custom .badge.text-bg-success::before,
.table-custom .badge.bg-success::before {
    background: #0fa958;
}

.table-custom .badge.text-bg-danger,
.table-custom .badge.bg-danger {
    background-color: rgba(239, 83, 80, 0.1) !important;
    color: #ef5350 !important;
    border-color: rgba(239, 83, 80, 0.2) !important;
}

.table-custom .badge.text-bg-danger::before,
.table-custom .badge.bg-danger::before {
    background: #ef5350;
}

.table-custom .badge.text-bg-warning,
.table-custom .badge.bg-warning {
    background-color: rgba(255, 178, 43, 0.1) !important;
    color: #e67e22 !important;
    border-color: rgba(255, 178, 43, 0.2) !important;
}

.table-custom .badge.text-bg-warning::before,
.table-custom .badge.bg-warning::before {
    background: #e67e22;
}

.table-custom .badge.text-bg-secondary,
.table-custom .badge.bg-secondary {
    background-color: rgba(148, 163, 184, 0.1) !important;
    color: #64748b !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

.table-custom .badge.text-bg-secondary::before,
.table-custom .badge.bg-secondary::before {
    background: #64748b;
}

.table-custom .badge.text-bg-primary,
.table-custom .badge.bg-primary {
    background-color: rgba(2, 163, 237, 0.1) !important;
    color: var(--tonebg) !important;
    border-color: rgba(2, 163, 237, 0.2) !important;
}

.table-custom .badge.text-bg-primary::before,
.table-custom .badge.bg-primary::before {
    background: var(--tonebg);
}

.table-custom .badge.text-bg-info,
.table-custom .badge.bg-info {
    background-color: rgba(139, 92, 246, 0.1) !important;
    color: #8b5cf6 !important;
    border-color: rgba(139, 92, 246, 0.2) !important;
}

.table-custom .badge.text-bg-info::before,
.table-custom .badge.bg-info::before {
    background: #8b5cf6;
}

/* --- Action Buttons --- */
.table-custom tbody tr .btn {
    border-radius: 12px !important;
    font-weight: 600 !important;
    padding: 5px 12px !important;
    transition: all 0.25s ease !important;
    font-size: 0.78rem !important;
}

.table-custom tbody tr .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.table-custom tbody tr .btn-outline-secondary {
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: var(--text-secondary) !important;
}

.table-custom tbody tr .btn-outline-secondary:hover {
    background: var(--tonebg) !important;
    border-color: var(--tonebg) !important;
    color: #FFF !important;
}

/* --- Table Wrapper Card --- */
.table-responsive {
    position: relative;
    border: none !important;
    border-radius: 20px;
    overflow: hidden;
    overflow-x: auto !important;
    min-height: 200px;
    background: transparent !important;
    padding: 2px 4px;
}

/* --- Bootstrap Table Container --- */
.bootstrap-table .fixed-table-container .table-Working td,
.bootstrap-table .fixed-table-container .table-Working th {
    vertical-align: middle;
    box-sizing: border-box;
    padding: 4.8px 16px;
}

.float-right.pagination {
    margin-right: 20px;
}

.bootstrap-table .fixed-table-container {
    position: relative;
    clear: both;
    margin-bottom: 60px;
}

.bootstrap-table .fixed-table-container .table thead th.day-table .th-inner {
    height: 50px;
    width: 103px;
    vertical-align: middle;
    text-align: center;
}

.fixed-columns,
.fixed-columns-right {
    position: absolute;
    top: 0;
    height: 90% !important;
    background-color: var(--bg-light, #fff);
    box-sizing: border-box;
    border: none;
    z-index: 3;
}

.dark .fixed-columns,
.dark .fixed-columns-right {
    background-color: var(--bg-light) !important;
}

.table-last-border tbody tr:last-child td {
    border-color: #dee2e6 !important;
}

.table-last-border tbody tr:last-child td:nth-child(1) {
    border-left: 1px solid transparent !important;
    border-right: 1px solid transparent !important;
}

/* --- User Info Cell --- */
.table-custom .user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.apexcharts-text.apexcharts-datalabel-value {
    font-weight: 800 !important;
    font-size: 20px !important;
}

.table-custom .user-info img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.25s ease;
}

.table-custom tbody tr:hover .user-info img {
    border-color: var(--tonebg);
    transform: scale(1.08);
}

.table-custom .user-info span {
    font-weight: 500;
    color: var(--text-primary, #333);
    font-size: 0.85rem;
}

.dark .table-custom .user-info span {
    color: var(--light-text) !important;
}

.table-custom .user-info small {
    color: var(--text-muted, #666);
    font-size: 0.78rem;
}

.table-custom tbody td:last-child {
    font-weight: 400;
    color: var(--text-primary, #333);
}

.bootstrap-table .fixed-table-container .table tfoot th,
.bootstrap-table .fixed-table-container .table thead th {
    vertical-align: middle;
    padding: 0;
    margin: 0;
}

.border-transparent-start {
    border-left: 1px solid transparent !important;
    border-right: 1px solid transparent !important;
}

.bg-transparent {
    background: transparent !important;
}

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

.modal-footer.flex-nowrap {
    border-color: var(--grey);
}

.bg-gray-table {
    background-color: #f7fafc !important;
}

.setting-cotainer {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin-bottom: 15px;
    color: #93a2b8;
    cursor: pointer;
    transition: background-color 0.3s;
    font-weight: 400;
    border-radius: 15px;

    i {
        font-size: 2.5rem;
        margin-top: 38px;
    }

    p {
        font-size: 1rem;
        line-height: 1.5;
        margin-top: 26px;
    }
}

.setting-cotainer.active {
    background-color: #f2f6fa;
    border-radius: 15px;
    color: #103763;
    font-weight: 700;
}

.setting-item-container {
    display: flex;
    align-items: center;
    transition: background-color 0.3s;
    cursor: pointer;
    padding: 13px 15px;
    border-radius: 15px;
    margin-bottom: 15px;

    .icon-wrapper {
        width: 45px;
        height: 45px;
        border-radius: 15px;
        border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 15px;
        color: var(--dark);
        font-size: 1.2rem;
    }

    .setting-content {
        flex: 1;
    }

    .setting-title {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--dark);
        margin: 0;
    }

    .setting-description {
        font-size: 0.8rem;
        color: #666;
        margin: 3px 0 0;
    }

    .setting-arrow {
        color: #6c757d;
        font-size: 1rem;
    }
}

.setting-item-container:hover {
    background-color: var(--secondary);
}

.setting-item-container:hover .icon-wrapper {
    background-color: var(--bg-light);
    color: var(--dark);
}

.setting-item {
    display: flex;
    align-items: center;
    padding: 25px 15px;
    transition: background-color 0.3s;
    cursor: pointer;
    border-radius: 15px;
}

.setting-item:hover {
    background-color: var(--secondary);
    border-radius: 15px;
}

.setting-item:hover .icon-wrapper {
    background-color: var(--bg-light);
    color: var(--dark);
}

.icon-wrapper {
    width: 45px;
    height: 45px;
    border-radius: 15px;
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    color: var(--dark);
    font-size: 1.2rem;
}

.setting-content {
    flex: 1;
}

.setting-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark);
    margin: 0;
}

.setting-description {
    font-size: 0.9rem;
    color: #666;
    margin: 4px 0 0;
}

.setting-arrow {
    color: #6c757d;
    font-size: 1.2rem;
}

.file-container {
    display: none;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--secondary);
}

.file-upload {
    text-align: center;
    padding: 30px;
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    color: #9ca3af;
    font-size: 14px;
    cursor: pointer;
    margin-top: 8px;
    background-color: var(--bg-light);
}

.file-container.active {
    display: block;
}

.file-upload i {
    font-size: 40px;
    color: #d4d4d9;
    margin-top: 10px;
    margin-bottom: 10px;
}

.file-upload span {
    color: #3b82f6;
    cursor: pointer;
    text-decoration: underline;
}

.dropdown-icon {
    text-align: center;
    cursor: pointer;
    color: #6b7280;
}

.dropdown-icon i {
    transition: transform 0.3s ease;
}

.dropdown-icon i.active {
    transform: rotate(180deg);
    color: #3b82f6;
}

.file-type-info {
    font-size: 11px;
    font-weight: 300;
    color: #6b7280;
    text-align: left;
    margin-top: 4px;
}

tr .checkbox {
    font-size: 18px;
    color: #cad4e0 !important;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    color: var(--dark);
    background-color: var(--gray-hover);
    border-color: var(--gray-hover);
}

.lock-image {
    opacity: 0.5;
}

.pin-modal .modal-dialog {
    max-width: 400px;
}

.pin-modal .number-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    place-items: center;
    padding: 0 20px;
}

.pin-modal .number-grid button {
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    font-size: 1.5rem;
    border: none;
    background-color: var(--grey);
    color: var(--dark);
}

.pin-modal .number-grid button:hover {
    background-color: var(--tone-hover);
    color: var(--light);
}

.pin-input {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-bottom: 30px;
}

.pin-input span {
    width: 50px;
    height: 50px;
    border: 1px solid #e2e6ea;
    border-radius: 10px;
    text-align: center;
    font-size: 1.5rem;
    line-height: 48px;
    background-color: var(--bg-light);
    color: var(--tone-hover);
}

.dark .text-tone {
    color: var(--text-link, var(--tone-light));
}

.dark .wrap-content .title,
.dark .wrap-content .sub-title {
    color: var(--text-on-tint, var(--light-text));
    -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.35);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

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

/* Standalone Pagination (non-bootstrap-table) */
.page-list .btn-secondary {
    background-color: var(--tonebg);
    border: none !important;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
}

.page-item:last-child .page-link,
.page-item:first-child .page-link {
    border-radius: 10px !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    font-size: 0.9rem;
}

.page-link {
    position: relative;
    border-radius: 10px;
    min-width: 36px;
    margin: 0 3px;
    text-align: center;
    display: block;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary, var(--tonebg));
    text-decoration: none;
    background-color: var(--light, var(--bs-pagination-bg));
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-link:hover {
    background: var(--tonebg) !important;
    color: #FFF !important;
    border-color: var(--tonebg) !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(2, 163, 237, 0.2);
}

.active>.page-link,
.page-link.active {
    z-index: 3;
    color: #FFF;
    background-color: var(--tonebg);
    border-color: var(--tonebg);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(2, 163, 237, 0.25);
    font-weight: 700;
}

.text-gray {
    color: #cbd5e1;
}

.file-preview {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.file-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 98px;
    height: 82px;
    gap: 10px;
    padding: 8px;
    border: 1px solid #e2e6ea;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

.file-icon {
    width: 40px;
    height: 40px;
}

.file-name {
    font-size: 10px;
    color: #64748B;
}

.remove-btn {
    color: #64748B;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 5px;
}

.profile-page {
    min-height: 80vh;
}

.green-point {
    color: var(--tone-darkgreen);
}

.red-point {
    color: var(--tone-red);
}

.wfh-btn {
    display: none;
}

.wfh-label {
    background-color: transparent;
    font-size: 14px;
    font-weight: 400;
    color: var(--tone-hover);
    cursor: pointer;
    border: 1px solid var(--tone-hover);
    border-radius: 12px;
    width: 220px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin: 0 5px; */
}

.wfh-btn:checked+.wfh-label {
    background-color: var(--tone-hover);
    background-image: linear-gradient(147deg, var(--tone-hover) 0%, var(--tone-active) 74%);
    border: none;
    font-weight: 600;
    color: white;
}

.volume-container {
    width: 300px;
    margin: 20px auto;
    position: relative;
}

.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: linear-gradient(to right, #4caf50 0%, #4caf50 var(--slider-progress, 50%), #ddd var(--slider-progress, 50%), #ddd 100%);
    border-radius: 5px;
    outline: none;
    transition: background 0.3s;
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background-color: #4caf50;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease-in-out;
}

.volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.volume-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background-color: #4caf50;
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease-in-out;
}

.volume-slider::-moz-range-thumb:hover {
    transform: scale(1.2);
}

.volume-slider::-moz-range-progress {
    background-color: #4caf50;
    height: 8px;
}

.volume-slider::-moz-range-track {
    background-color: #ddd;
    height: 8px;
}

.volume-slider::-ms-track {
    width: 100%;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

.volume-slider::-ms-fill-lower {
    background-color: #4caf50;
    border-radius: 5px;
}

.volume-slider::-ms-fill-upper {
    background-color: #ddd;
    border-radius: 5px;
}

.volume-slider::-ms-thumb {
    width: 20px;
    height: 20px;
    background-color: #4caf50;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.volume-slider:active::-webkit-slider-thumb {
    transform: scale(1.4);
}

.container-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.container-checkbox {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
}

.checkmark {
    position: relative;
    top: 0;
    left: 0;
    height: 1.3em;
    width: 1.3em;
    border: 2px solid #606062;
    border-radius: 7px;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.30), 0px 1px 1px rgba(0, 5);
}

.checkmarkIndeterminate {
    position: relative;
    top: 0;
    left: 0;
    height: 1.3em;
    width: 1.3em;
    background: #606062;
    border-radius: 7px;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.30), 0px 1px 1px rgba(0, 5);
}

.container-checkbox input:checked~.checkmark {
    background-image: linear-gradient(#255CD2, #1D52C1);
    border: none;
}

.container-checkbox input:checked~.checkmarkIndeterminate {
    background-image: linear-gradient(#078e4a, #4fd98b);
}

.container-checkbox input:disabled~.checkmark {
    background-color: var(--bg-light);
    border: 2px solid #ededed;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkmarkIndeterminate:after {
    content: "";
    position: absolute;
    display: none;
}

.container-checkbox input:checked~.checkmark:after {
    display: block;
}

.container-checkbox input:checked~.checkmarkIndeterminate:after {
    display: block;
}

.container-checkbox .checkmark:after {
    left: 0.55em;
    top: 0.28em;
    width: 0.24em;
    height: 0.6em;
    border: solid white;
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);
}

.container-checkbox .checkmarkIndeterminate:after {
    left: 36%;
    top: 0.25em;
    width: 0.2em;
    height: 0.8em;
    border: solid white;
    border-radius: 5px;
    transform: rotate(90deg);
}

.badge.text-bg-tone {
    border-radius: 15px;
    background-color: var(--tone-litle) !important;
    color: var(--tone-hover) !important;
    padding: 8px 16px;
    font-weight: 500 !important;
    font-size: 13px;
}

.badge.text-bg-primary {
    border-radius: 15px;
    background-color: #e0f3ff !important;
    color: #1eaaeb !important;
    padding: 8px 16px;
    font-weight: 500 !important;
    font-size: 13px;
}

.badge.text-bg-success {
    border-radius: 15px;
    background-color: #dcfce7 !important;
    color: #2ec967 !important;
    padding: 8px 16px;
    font-weight: 500 !important;
    font-size: 13px;
}

.badge.text-bg-info {
    border-radius: 15px;
    background-color: #fcdfea !important;
    color: #fe6aa3 !important;
    padding: 8px 16px;
    font-weight: 500 !important;
    font-size: 13px;
}

.badge.text-bg-secondary {
    border-radius: 15px;
    background-color: #dee9f9 !important;
    color: #93a2b8 !important;
    padding: 8px 16px;
    font-weight: 500 !important;
    font-size: 13px;
}

.badge.text-bg-orange {
    border-radius: 15px;
    background-color: #f9e0cc !important;
    color: #fa913c !important;
    padding: 8px 16px;
    font-weight: 500 !important;
    font-size: 13px;
}

.badge.text-bg-danger {
    border-radius: 15px;
    background-color: #ffe3e3 !important;
    color: #f04343 !important;
    padding: 8px 16px;
    font-weight: 500 !important;
    font-size: 13px;
}

.badge.text-bg-warning {
    border-radius: 15px;
    background-color: #fcf0d4 !important;
    color: #fabd23 !important;
    padding: 8px 16px;
    font-weight: 500 !important;
    font-size: 13px;
}

.badge.text-bg-violet {
    border-radius: 15px;
    background-color: #dacdf8 !important;
    color: #640990 !important;
    padding: 8px 16px;
    font-weight: 500 !important;
    font-size: 13px;
}

.bg-gray {
    background-color: var(--gray-hover);
}

.paddingbtn-dropdown {
    padding: 10px 25px;
}

.timeline {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px;

    .timeline-item {
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    .timeline-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-top: 4px;
        position: relative;
    }

    .timeline-dot::before {
        content: '';
        position: absolute;
        top: 174%;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 81px;
    }

    .timeline-dot.Approved::before {
        background-color: var(--tone-hover);
    }

    .timeline-dot.Canceled::before,
    .timeline-dot.Rejected::before,
    .timeline-dot.Editing::before,
    .timeline-dot.Pending::before {
        background-color: #E2E8F0;
    }

    .timeline-dot.Approved {
        background-color: var(--tone-hover);
    }

    .timeline-dot.Canceled,
    .timeline-dot.Rejected,
    .timeline-dot.Editing,
    .timeline-dot.Pending {
        background-color: #E2E8F0;
    }

    .timeline-content {
        flex: 1;
        padding: 12px 16px;
        border-radius: 15px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        min-height: 100px;
    }

    .timeline-content.Approved {
        background-color: var(--tone-litle);
    }

    .timeline-content.Canceled,
    .timeline-content.Rejected,
    .timeline-content.Editing,
    .timeline-content.Pending {
        background-color: var(--gray-hover);
    }

    .content-header {
        display: flex;
        align-items: center;
        gap: 12px;
        height: 100%;
    }

    .content-user {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .user-image {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .content-info {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .status {
        font-size: 12px;
        font-weight: medium;
        display: block;
        color: var(--tone-hover);
    }

    .timestamp {
        font-size: 12px;
        color: #94a3b8;
        display: block;
    }

    .name {
        font-size: 14px;
        font-weight: medium;
        color: #000;
    }

    .reason {
        font-size: 12px;
        color: #64748b;
        margin-top: 4px;
    }
}

.dashborad-employee-box {
    .btn {
        padding: 5px;
        width: 85px;
        border: 2px solid #FFF;
        box-shadow: var(--shadow);

        i {
            font-size: 28px;
            margin-top: 13px;
        }

        span {
            text-wrap: nowrap;
            font-weight: 500;
        }

        .count-dashboard {
            margin-top: 8px;
            margin-bottom: 4px;
            border-radius: 30px;
            padding: 5px 8px;
            text-align: center;
            width: 65px;
            color: var(--bg-light);
        }

        &:nth-of-type(1) {
            i {
                color: var(--tonebg);
            }

            .count-dashboard {
                background-color: var(--tonebg);
            }
        }

        &:nth-of-type(2) {
            i {
                color: #2cd4bd;
            }

            .count-dashboard {
                background-color: #2cd4bd;
            }
        }

        &:nth-of-type(3) {
            i {
                color: #fabd23;
            }

            .count-dashboard {
                background-color: #fabd23;
            }
        }

        &:nth-of-type(4) {
            i {
                color: #fa913c;
            }

            .count-dashboard {
                background-color: #fa913c;
            }
        }

        &:nth-of-type(5) {
            i {
                color: #f56262;
            }

            .count-dashboard {
                background-color: #f56262;
            }
        }

        &:nth-of-type(6) {
            i {
                color: #93a2b8;
            }

            .count-dashboard {
                background-color: #93a2b8;
            }
        }

        &:nth-of-type(7) {
            i {
                color: #3b82f5;
            }

            .count-dashboard {
                background-color: #3b82f5;
            }
        }

        &:nth-of-type(1).active {
            background-color: var(--tonebg);

            i,
            span.font-size-14.mt-3 {
                color: #ffffff;
            }

            .count-dashboard {
                background-color: #ffffff;
                color: var(--tonebg);
            }
        }

        &:nth-of-type(2).active {
            background-color: #2cd4bd;

            i,
            span.font-size-14.mt-3 {
                color: #ffffff;
            }

            .count-dashboard {
                background-color: #ffffff;
                color: #2cd4bd;
            }
        }

        &:nth-of-type(3).active {
            background-color: #fabd23;

            i,
            span.font-size-14.mt-3 {
                color: #ffffff;
            }

            .count-dashboard {
                background-color: #ffffff;
                color: #fabd23;
            }
        }

        &:nth-of-type(4).active {
            background-color: #fa913c;

            i,
            span.font-size-14.mt-3 {
                color: #ffffff;
            }

            .count-dashboard {
                background-color: #ffffff;
                color: #fa913c;
            }
        }

        &:nth-of-type(5).active {
            background-color: #f56262;

            i,
            span.font-size-14.mt-3 {
                color: #ffffff;
            }

            .count-dashboard {
                background-color: #ffffff;
                color: #f56262;
            }
        }

        &:nth-of-type(6).active {
            background-color: #93a2b8;

            i,
            span.font-size-14.mt-3 {
                color: #ffffff;
            }

            .count-dashboard {
                background-color: #ffffff;
                color: #93a2b8;
            }
        }

        &:nth-of-type(7).active {
            background-color: #3b82f5;

            i,
            span.font-size-14.mt-3 {
                color: #ffffff;
            }

            .count-dashboard {
                background-color: #ffffff;
                color: #3b82f5;
            }
        }
    }
}

.chart-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.chart-info {
    margin-left: 20px;
    text-align: left;
    font-size: 14px;
}

.chart-info div {
    display: flex;
    align-items: start;
    margin-bottom: 10px;
}

.chart-info span.circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
}

.chart-info span.label {
    font-size: 14px;
    font-weight: 400;
    color: #333;
}

.chart-info span.value {
    font-weight: bold;
    margin-left: auto;
    color: #333;
}

.text-tone {
    color: var(--text-link, var(--tone-dark));
    font-weight: 500;
}

.text-tone:hover {
    color: var(--tone-dark);
}

.mt--2 {
    margin-top: -5px;
}

.checkbox-apple {
    position: relative;
    width: 50px;
    height: 25px;
    margin: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkbox-apple label {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 25px;
    border-radius: 50px;
    background: linear-gradient(to bottom, #b3b3b3, #e6e6e6);
    cursor: pointer;
    transition: all 0.3s ease;
}

.checkbox-apple label:after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.checkbox-apple input[type="checkbox"]:checked+label {
    background: linear-gradient(to bottom, #4cd964, #5de24e);
}

.checkbox-apple input[type="checkbox"]:checked+label:after {
    transform: translateX(25px);
}

.checkbox-apple label:hover {
    background: linear-gradient(to bottom, #b3b3b3, #e6e6e6);
}

.checkbox-apple label:hover:after {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.yep {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 25px;
}

/* .apexcharts-tooltip-y-group {
        font-family: 'Prompt', sans-serif !important;
    } */

.list-pay {
    border: 1px dashed #c4c5c6;
}

.field-input {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    background-color: var(--bg-light);
    border-radius: 15px;
    padding: .5em .8em;
    color: var(--tone-hover);
    border: 1px solid #e8e8e8;
}

.input-icon {
    height: 1em;
    width: 1em;
    fill: var(--tone-hover);
}

.awesomplete .form-field,
.form-field,
form-control,
form-select {
    background: none;
    border: none;
    outline: none;
    width: 100%;
    color: var(--tone-hover);
    margin-left: 10px;
}

.invalid-tooltip {
    left: 10% !important;
}

.card-menu-user {
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    cursor: pointer;
    transition: transform 0.3s;
    border: 1px solid rgba(255, 255, 255, 1);
}

.card-menu-user:hover {
    transform: scale(1.02);
}

.contant-card-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 36px;
    color: #FFF;

    span {
        margin-top: 5px;
        font-size: 16px;
    }
}

.gradient-tsp {
    background: rgba(255, 255, 255, 0);
    background: linear-gradient(130deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%) !important;
    box-shadow: none !important;
}

.gradient-yellow {
    background: rgb(255, 178, 43);
    background: linear-gradient(130deg, rgba(255, 178, 43, 1) 0%, rgba(140, 97, 12, 1) 100%) !important;
}

.gradient-blue {
    background: rgb(61, 139, 242);
    background: linear-gradient(130deg, rgba(61, 139, 242, 1) 0%, rgba(4, 75, 108, 1) 100%) !important;
}

.gradient-green {
    background: rgb(6, 214, 155);
    background: linear-gradient(130deg, rgba(6, 214, 155, 1) 0%, rgba(4, 99, 32, 1) 100%) !important;
}

.gradient-violet {
    background: rgb(115, 90, 242);
    background: linear-gradient(130deg, rgba(115, 90, 242, 1) 0%, rgba(44, 4, 99, 1) 100%) !important;
}

.gradient-red {
    background: rgb(240, 82, 79);
    background: linear-gradient(130deg, rgba(240, 82, 79, 1) 0%, rgba(99, 4, 27, 1) 100%) !important;
}

.checkbox-wrapper-35 .switch {
    display: none;
}

.checkbox-wrapper-35 .switch+label {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--yellow);
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-family: var(--prompt);
    font-size: 12px;
    line-height: 15px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkbox-wrapper-35 .switch+label::before,
.checkbox-wrapper-35 .switch+label::after {
    content: '';
    display: block;
}

.checkbox-wrapper-35 .switch+label::before {
    background-color: #05012c;
    border-radius: 500px;
    height: 15px;
    margin-right: 8px;
    -webkit-transition: background-color 0.125s ease-out;
    transition: background-color 0.125s ease-out;
    width: 25px;
}

.checkbox-wrapper-35 .switch+label::after {
    background-color: #fff;
    border-radius: 13px;
    box-shadow: 0 3px 1px 0 rgba(37, 34, 71, 0.05), 0 2px 2px 0 rgba(37, 34, 71, 0.1), 0 3px 3px 0 rgba(37, 34, 71, 0.05);
    height: 13px;
    left: 1px;
    position: absolute;
    top: 1px;
    -webkit-transition: -webkit-transform 0.125s ease-out;
    transition: -webkit-transform 0.125s ease-out;
    transition: transform 0.125s ease-out;
    transition: transform 0.125s ease-out, -webkit-transform 0.125s ease-out;
    width: 13px;
}

.checkbox-wrapper-35 .switch+label .switch-x-text {
    display: block;
    margin-right: .3em;
}

.checkbox-wrapper-35 .switch+label .switch-x-toggletext {
    display: block;
    font-weight: bold;
    height: 15px;
    overflow: hidden;
    position: relative;
    width: 25px;
}

.checkbox-wrapper-35 .switch+label .switch-x-unchecked,
.checkbox-wrapper-35 .switch+label .switch-x-checked {
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
    transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
    transition: transform 0.125s ease-out, opacity 0.125s ease-out;
    transition: transform 0.125s ease-out, opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
}

.checkbox-wrapper-35 .switch+label .switch-x-unchecked {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}

.checkbox-wrapper-35 .switch+label .switch-x-checked {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

.checkbox-wrapper-35 .switch+label .switch-x-hiddenlabel {
    position: absolute;
    visibility: hidden;
}

.checkbox-wrapper-35 .switch:checked+label::before {
    background-color: #ffb500;
}

.checkbox-wrapper-35 .switch:checked+label::after {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
}

.checkbox-wrapper-35 .switch:checked+label .switch-x-unchecked {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}

.checkbox-wrapper-35 .switch:checked+label .switch-x-checked {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}

.image-container-alert {
    transition: all 0.3s ease;
}

.image-container-alert:hover {
    transform: rotate(25deg)
}

.image-container-alert:before {
    top: 0;
    left: 0;
    position: absolute;
    content: "";
    box-shadow: 60px 60px 100px 30px #b900ed, 140px 170px 100px 30px #43f7f9;
}

.offcanvas {
    transition: all 0.3s ease-in-out;
}

.position-fixed {
    transition: all 0.3s ease-in-out;
}

.staprecent {
    margin-bottom: 12px;
    border-radius: 20px;
}

.staprecent .text-center span:nth-child(1) {
    font-weight: 500;
}

.staprecent .form-header {
    gap: 5px;
    text-align: center;
    font-size: .9em;
}

.staprecent .form-header .stepIndicator {
    position: relative;
    flex: 1;
    padding-bottom: 30px;
}

.staprecent .form-header .stepIndicator.active {
    font-weight: 500;
    color: var(--tonebg);
}

.staprecent .form-header .stepIndicator.finish {
    font-weight: 500;
    color: var(--tone-dark);
}

.staprecent .form-header .stepIndicator::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 9;
    width: 25px;
    height: 25px;
    background-color: var(--tone-litle);
    border-radius: 50%;
    border: 3px solid var(--tone-litle);
}

.staprecent .form-header .stepIndicator.active::before {
    background-color: var(--tone-litle);
    border: 3px solid var(--tone-light);
}

.staprecent .form-header .stepIndicator.finish::before {
    background-color: var(--tone-active);
    border: 3px solid var(--tone-litle);
}

.staprecent .form-header .stepIndicator::after {
    content: "";
    position: absolute;
    left: 55%;
    bottom: 11px;
    width: 91%;
    height: 3px;
    background-color: #f3f3f3;
}

.staprecent .form-header .stepIndicator.active::after {
    background-color: var(--tone-litle);
}

.staprecent .form-header .stepIndicator.finish::after {
    background-color: var(--tonebg);
}

.staprecent .form-header .stepIndicator:last-child:after {
    display: none;
}

.staprecent .form-header .stepIndicator:hover {
    transform: scale(1.02);
    transition: all 200ms;
}

.h-80 {
    height: 80% !important;
}

.btn-outline-orange {
    border: 1px solid var(--orange);
    color: var(--orange);
    background-color: transparent;
}

.btn-outline-orange:hover {
    color: var(--light);
    background-color: var(--orange);
}

.btn-outline-green {
    border: 1px solid var(--box2);
    color: var(--box2);
    background-color: transparent;
}

.btn-outline-green:hover {
    color: var(--light);
    background-color: var(--box2);
}

.btn-outline-blue {
    border: 1px solid var(--box1);
    color: var(--box1);
    background-color: transparent;
}

.btn-outline-blue:hover {
    color: var(--light);
    background-color: var(--box1);
}

.activity-container {
    display: flex;
    flex-direction: column;
    margin-top: 20px;

    .activity-content {
        background: var(--gray-hover);
        border-radius: 20px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }
}

.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;

    .pagination-button {
        padding: 3px 0px;
        margin-right: 5px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: none;
    }
}

.pagination-button.active {
    background-color: var(--tonebg);
    color: #fff;
}

.flatpickr-calendar.rangeMode,
.flatpickr-days {
    width: auto !important;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--tone-lightgray) !important;
}

.flatpickr-calendar {
    border-radius: 1rem;
    background-color: var(--bg-light) !important;
}

span.flatpickr-weekday,
.flatpickr-current-month {
    color: var(--tone-active) !important;
}

.flatpickr-day {
    color: var(--tone-hover) !important;
}

.flatpickr-day.selected {
    color: #FFF !important;
}

.cur-month,
.flatpickr-weekday {
    font-weight: 500 !important;
}

.flatpickr-weekday:nth-child(1) {
    color: red;
}

.flatpickr-day.prevMonthDay.sunday,
.flatpickr-day.nextMonthDay.sunday {
    color: #e7b8b8 !important;
}

.flatpickr-day.sunday {
    color: red !important;
}

.flatpickr-day.prevMonthDay.saturday,
.flatpickr-day.nextMonthDay.saturday {
    color: #c4cceb !important;
}

.flatpickr-day.saturday {
    color: #6876b0 !important;
}

.flatpickr-weekdaycontainer {
    background: var(--gray-hover);
    padding: 10px 0px;
    border-radius: 10px;
}

.btn-outline-orange {
    border: 1px solid var(--orange);
    color: var(--orange);
    background-color: transparent;
}

.btn-outline-orange:hover {
    color: var(--light);
    background-color: var(--orange);
}

.btn-outline-green {
    border: 1px solid var(--box2);
    color: var(--box2);
    background-color: transparent;
}

.btn-outline-green:hover {
    color: var(--light);
    background-color: var(--box2);
}

.btn-outline-blue {
    border: 1px solid var(--box1);
    color: var(--box1);
    background-color: transparent;
}

.btn-outline-blue:hover {
    color: var(--light);
    background-color: var(--box1);
}

.no-records-found {
    height: 500px;
}

.btn-violet {
    background-color: var(--box3);
    color: var(--light);
    transition: all 0.3s;
}

.btn-blue {
    background-color: var(--blue);
    color: var(--light);
    transition: all 0.3s;
}

.btn-green {
    background-color: var(--box2);
    color: var(--light);
    transition: all 0.3s;
}

.btn-yellow {
    background-color: var(--yellow);
    color: var(--light);
    transition: all 0.3s;
}

.btn-red {
    background-color: var(--box4);
    color: var(--light);
    transition: all 0.3s;
}

.btn-orange {
    background-color: var(--orange);
    color: var(--light);
    transition: all 0.3s;
}

.btn-orange:hover {
    background-color: #ffa76d;
    color: var(--dark);
    transform: scale(1.03);
}

.btn-red:hover {
    background-color: #ff6868;
    color: var(--dark);
    transform: scale(1.03);
}

.btn-violet:hover {
    background-color: #BDB0FB;
    color: var(--dark);
    transform: scale(1.03);
}

.btn-yellow:hover {
    background-color: #ffd860;
    color: var(--dark);
    transform: scale(1.03);
}

.btn-blue:hover {
    background-color: #9daff9;
    color: var(--dark);
    transform: scale(1.03);
}

.btn-green:hover {
    background-color: #87ffab;
    color: var(--dark);
    transform: scale(1.03);
}

.z-index-0 {
    z-index: 0 !important;
}

.z-index-5 {
    z-index: 5 !important;
}

.z-index-100 {
    z-index: 100 !important;
}

div.tree-multiselect {
    border: 0px solid #D8D8D8 !important;
    border-radius: 5px;
    display: table;
    height: inherit;
    width: 100%;
}

div.tree-multiselect div.title {
    background: transparent;
    border-radius: 10px;
    color: var(--dark);
    padding: 5px;
}

div.tree-multiselect .auxiliary {
    font-weight: 400;
}

div.tree-multiselect .auxiliary input.search {
    border: 2px solid #D8D8D8;
    border-radius: 15px;
    display: table-cell;
    margin-bottom: 15px;
    padding: 5px;
    width: 100%;
}

div.tree-multiselect span.remove-selected,
div.tree-multiselect span.description {
    background: transparent;
    color: red;
    font-size: 16px;
    margin-right: 5px;
    padding: 0 3px;
}

div.tree-multiselect>div.selected>div.item {
    background: transparent;
    border-radius: 2px;
    padding: 2px 5px;
    overflow: auto;
}

div.tree-multiselect input[type=checkbox] {
    display: inline;
    margin-right: 6px;
}

[type="checkbox"].section,
[type="checkbox"].option {
    height: 16px;
    width: 16px;
    margin-top: -2px;
    margin-bottom: 0px;
    vertical-align: middle;
    background: white;
    border: 1px solid #b1b8bb;
    top: 0px;
    z-index: 0;
}

.search {
    background-color: var(--darkback);
    color: var(--dark);
    border: 1px solid #e8e8e8;
}

.select-all {
    color: var(--box2);
}

.unselect-all {
    color: var(--box4);
}

.logo-container {
    background-color: #9bbbef;
    border: 7px solid #2563eb;
    border-radius: 50%;
    padding: 1rem;
    width: 270px;
    height: 270px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(1.05);
    position: relative;
    z-index: 10;
    margin: 0 auto;
}

.logo-container img {
    width: 100%;
}

.main-content {
    background-color: white;
    border: 7px solid #2563eb;
    border-radius: 30px;
    margin-top: -150px;
    padding-top: 160px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.text-primary-custom {
    color: #2563eb;
}

.border-primary-custom {
    border-color: #2563eb;
}

.map-container {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.find-location-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
}

.numpad-modal .modal-dialog {
    max-width: 350px;
    width: 96%;
}

.modal-header-custom {
    background-color: #2563eb;
    border-radius: 1.5rem 1.5rem 0 0;
}

.modal-body-custom {
    background-color: #eeedf2;
    border-radius: 0 0 1.5rem 1.5rem;
}

.modal-content {
    border-radius: 1.5rem;
    border: none;
    overflow: hidden;
}

.pin-input-key:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
}

.number-grid-key {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    place-items: center;
    padding: 0 1.25rem;
}

.number-btn-key {
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    font-size: 1.5rem;
    border: 1px solid #3b82f6;
    background-color: #f6f6f6;
    color: #2563eb;
    transition: all 0.2s ease;
}

.number-btn-key:hover {
    background-color: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.action-btn-key {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    height: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    font-size: 32px;
    border: none;
    transition: all 0.2s ease;
}

.confirm-btn-key {
    background-color: #2563eb;
    color: white;
}

.confirm-btn-key:hover {
    background-color: #1d4ed8;
    color: white;
}

.clear-btn-key {
    background-color: transparent;
    color: #2563eb;
}

.clear-btn-key:hover {
    background-color: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
}

.close-btn-key {
    background: none;
    border: none;
    color: white;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    transition: background-color 0.2s ease;
}

.close-btn-key:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.signature-container {
    border: 1px solid #d1d5db;
    border-radius: 1.5rem;
    background-color: #f9fafb;
    overflow: hidden;
}

.btn-custom {
    width: 120px;
    border-radius: 50px;
}

.form-check-input:checked {
    background-color: #2563eb;
    border-color: #2563eb;
}

div.tree-multiselect span.section-name {
    float: right;
    font-style: italic;
    font-size: 14px;
    font-weight: 300;
}

.step-container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .step {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        border: 6px solid #f5f5f5;
        color: #333;
        font-size: 12px;
        text-align: center;
    }

    .step-number {
        font-size: 32px;
        font-weight: bold;
    }

    .step.active {
        border-color: #b9dcf6;
        background-color: #f0f9ff;
    }

    .arrow {
        font-size: 40px;
        color: #666;
    }
}

.question-card {
    border-radius: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 25px;
    width: 100%;
    margin-bottom: 10px;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .status-tag {
        background-color: #ffcc80;
        color: #d35400;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 12px;
    }

    .question-input {
        flex: 1;

    }

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

    .answer-type {
        margin-bottom: 16px;
    }

    .type-buttons {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .type-btn.active {
        background: linear-gradient(180deg, var(--tonebg) 30%, var(--tone-dark) 100%);
        color: white;
        border: none;
    }

    .type-btn {
        margin-right: 5px;
        padding: 5px 10px;
        border-radius: 15px;
        background: #eee;
        cursor: pointer;
        font-size: 14px;
        min-width: 120px;
        border: 1px solid rgb(225, 232, 240);
    }

    .choice {
        display: flex;
        gap: 5px;
        align-items: center;
        margin-top: 5px;
    }

    .choice input[type="text"],
    .choice input[type="number"] {
        padding: 8px;
    }

    .delete-choice {
        background-color: transparent;
        border: none;
        color: red;
        font-size: 18px;
        cursor: pointer;
    }

    .choice-input,
    .desc-input,
    .point-input {
        padding: 8px;
    }

    .choice-input {
        flex: 1;
    }

    .desc-input {
        flex: 1.5;
    }

    .point-input {
        width: 60px;
    }

    .add-choice {
        display: block;
        margin: 10px 0;
        color: #0d6efd;
        text-decoration: none;
    }

    .footer {
        text-align: right;
        margin-top: 20px;
    }
}

.cursor-pointer {
    cursor: pointer;
}

.form-check-input:checked {
    background-color: var(--tone-hover);
    border-color: var(--tone-active);
}

/* สไตล์ของ tooltip */
.tooltip-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* กล่อง tooltip */
.tooltip-dropdown {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    padding: 12px;
    transition: opacity 0.2s;
    z-index: 10;
    min-width: 250px;
}

/* แสดง tooltip เมื่อ hover */
.tooltip-container:hover .tooltip-dropdown {
    visibility: visible;
    opacity: 1;
}

select {
    width: 100%;
    padding: 5px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

.card.bg-secondary {
    background-color: #f8f9fa !important;
}

.bg-purple {
    background: #8b5cf6 !important;
    color: #FFF;
}

.offcanvas-hover-dropper {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.offcanvas-hover-dropper:hover {
    animation: bounceMove 0.5s ease;
}

@keyframes bounceMove {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
    }
}

.calendar-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 100%;
    margin: 0 auto;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background: linear-gradient(135deg, hsl(217, 91%, 70%), hsl(221, 83%, 53%), hsl(228, 39%, 23%));
    border-radius: 18px;
    color: white;
}

.calendar-header h3 {
    margin: 0;
    font-size: 1.5rem;
}

.calendar-nav {
    display: flex;
    gap: 10px;
}

.calendar-nav button {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 8px 20px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.calendar-nav button:hover {
    background: rgba(255, 255, 255, 0.3);
}

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

.calendar-day-header {
    text-align: center;
    font-weight: bold;
    padding: 10px;
    background: #f4f5f5;
    border-radius: 12px;
    color: #272829;
}

.calendar-day {
    aspect-ratio: 1;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 10px;
    /* display: flex; */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    transition: all 0.3s;
    background: white;
    position: relative;
}

.calendar-day:hover {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.calendar-day.other-month {
    opacity: 0.3;
    background: #fafafa;
}

.calendar-day.today {
    border-color: #667eea;
    background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
}

.calendar-day.select {
    border-color: #66e87d;
    background: linear-gradient(135deg, #66e87d15 0%, #4ba07615 100%);
}

.calendar-day.holiday {
    background: #fff3cd;
    border-color: #ffc107;
}

.calendar-day.holiday .day-number {
    color: #856404;
    text-align: right;
}

.holiday-label {
    font-size: 0.7rem;
    color: #856404;
    text-align: center;
    margin-top: 4px;
    font-weight: 500;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60%;
}

.day-number {
    font-weight: normal;
    margin-bottom: 8px;
    font-size: 1.1rem;
    color: #495057;
    text-align: right;
}

.icon-circle:hover {
    transform: scale(1.1);
}

.icons-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    height: 60%;
}

.custom-tooltip .tooltip-inner {
    background-color: #2c3e50;
    font-size: 0.9rem;
    padding: 8px 12px;
}

.attendance-card {
    padding: 8px;
    margin-top: 15px;
}

.attendance-card .section {
    margin-bottom: 15px;
}

.attendance-card h6 {
    margin: 0 0 5px 0;
    font-size: 16px;
    color: #444;
}

.snapshot {
    width: 120px;
    height: auto;
    border-radius: 8px;
    margin-top: 5px;
}

.status-section p {
    margin: 3px 0;
}

.status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    padding: 15px;
    background: #fafafa;
    border-radius: 12px;
    border: 1px solid #eee;
    margin-top: 10px;
}

.status-item {
    display: flex;
    flex-direction: column;
}

.status-item .label {
    font-size: 13px;
    color: #777;
}

.status-item .value {
    font-size: 15px;
    font-weight: 600;
    margin-top: 3px;
}

.status-item .value.yes {
    color: #d9534f;
}

.status-item .value.no {
    color: #5cb85c;
}

.form-add-select .form-check-input {
    margin-top: 0 !important;
    transform: translateY(86%);
}

.neo-toggle-container {
    --toggle-width: 80px;
    --toggle-height: 38px;
    --toggle-bg: #181c20;
    --toggle-off-color: #475057;
    --toggle-on-color: #36f9c7;
    --toggle-transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);

    position: relative;
    display: inline-flex;
    flex-direction: column;
    font-family: "Segoe UI", Tahoma, sans-serif;
    user-select: none;
}

.neo-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.neo-toggle {
    position: relative;
    width: var(--toggle-width);
    height: var(--toggle-height);
    display: block;
    cursor: pointer;
    transform: translateZ(0);
    perspective: 500px;
}


.neo-track {
    position: absolute;
    inset: 0;
    border-radius: calc(var(--toggle-height) / 2);
    overflow: hidden;
    transform-style: preserve-3d;
    transform: translateZ(-1px);
    transition: transform var(--toggle-transition);
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.neo-background-layer {
    position: absolute;
    inset: 0;
    background: var(--toggle-bg);
    background-image: linear-gradient(-45deg,
            rgba(20, 20, 20, 0.8) 0%,
            rgba(30, 30, 30, 0.3) 50%,
            rgba(20, 20, 20, 0.8) 100%);
    opacity: 1;
    transition: all var(--toggle-transition);
}

.neo-grid-layer {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right,
            rgba(71, 80, 87, 0.05) 1px,
            transparent 1px),
        linear-gradient(to bottom, rgba(71, 80, 87, 0.05) 1px, transparent 1px);
    background-size: 5px 5px;
    opacity: 0;
    transition: opacity var(--toggle-transition);
}

.neo-track-highlight {
    position: absolute;
    inset: 1px;
    border-radius: calc(var(--toggle-height) / 2);
    background: linear-gradient(90deg, transparent, rgba(54, 249, 199, 0));
    opacity: 0;
    transition: all var(--toggle-transition);
}

.neo-spectrum-analyzer {
    position: absolute;
    bottom: 6px;
    right: 10px;
    height: 10px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--toggle-transition);
}

.neo-spectrum-bar {
    width: 2px;
    height: 3px;
    background-color: var(--toggle-on-color);
    opacity: 0.8;
}

.neo-thumb {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transform-style: preserve-3d;
    transition: transform var(--toggle-transition);
    z-index: 1;
}

.neo-thumb-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--toggle-off-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: all var(--toggle-transition);
}

.neo-thumb-core {
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
    transition: all var(--toggle-transition);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.neo-thumb-icon {
    position: relative;
    width: 10px;
    height: 10px;
    transition: all var(--toggle-transition);
}

.neo-thumb-wave {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 2px;
    background: var(--toggle-off-color);
    transform: translate(-50%, -50%);
    transition: all var(--toggle-transition);
}

.neo-thumb-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--toggle-off-color);
    transform: scale(0);
    opacity: 0;
    transition: all var(--toggle-transition);
}

.neo-gesture-area {
    position: absolute;
    inset: -10px;
    z-index: 0;
}

.neo-interaction-feedback {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.neo-ripple {
    position: absolute;
    top: 50%;
    left: 30%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle,
            var(--toggle-on-color) 0%,
            transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 0.4s ease-out;
}

.neo-progress-arc {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--toggle-on-color);
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
    opacity: 0;
    transition:
        opacity 0.3s ease,
        transform 0.5s ease;
}

.neo-status {
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

.neo-status-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
}

.neo-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--toggle-off-color);
    transition: all var(--toggle-transition);
}

.neo-status-text {
    font-size: 9px;
    font-weight: 600;
    color: var(--toggle-off-color);
    letter-spacing: 1px;
    transition: all var(--toggle-transition);
}

.neo-value-display {
    position: absolute;
    top: -22px;
    right: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--toggle-off-color);
    opacity: 0;
    transform: translateY(5px);
    transition: all var(--toggle-transition);
}

.neo-value-text {
    transition: all var(--toggle-transition);
}


.neo-toggle-input:checked+.neo-toggle .neo-thumb {
    transform: translateX(calc(var(--toggle-width) - 38px));
}

.neo-toggle-input:checked+.neo-toggle .neo-thumb-ring {
    background-color: var(--toggle-on-color);
    border-color: rgba(54, 249, 199, 0.3);
    box-shadow: 0 0 15px rgba(54, 249, 199, 0.5);
}

.neo-toggle-input:checked+.neo-toggle .neo-thumb-wave {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #fff;
}

.neo-toggle-input:checked+.neo-toggle .neo-thumb-pulse {
    transform: scale(1.2);
    opacity: 0.3;
    animation: neo-pulse 1.5s infinite;
}

.neo-toggle-input:checked+.neo-toggle .neo-track-highlight {
    background: linear-gradient(90deg, transparent, rgba(54, 249, 199, 0.2));
    opacity: 1;
}

.neo-toggle-input:checked+.neo-toggle .neo-grid-layer {
    opacity: 1;
}

.neo-toggle-input:checked+.neo-toggle .neo-spectrum-analyzer {
    opacity: 1;
}

.neo-toggle-input:checked+.neo-toggle .neo-spectrum-bar:nth-child(1) {
    animation: neo-spectrum 0.9s infinite;
}

.neo-toggle-input:checked+.neo-toggle .neo-spectrum-bar:nth-child(2) {
    animation: neo-spectrum 0.8s 0.1s infinite;
}

.neo-toggle-input:checked+.neo-toggle .neo-spectrum-bar:nth-child(3) {
    animation: neo-spectrum 1.1s 0.2s infinite;
}

.neo-toggle-input:checked+.neo-toggle .neo-spectrum-bar:nth-child(4) {
    animation: neo-spectrum 0.7s 0.1s infinite;
}

.neo-toggle-input:checked+.neo-toggle .neo-spectrum-bar:nth-child(5) {
    animation: neo-spectrum 0.9s 0.15s infinite;
}

.neo-toggle-input:checked+.neo-toggle .neo-status-dot {
    background-color: var(--toggle-on-color);
    box-shadow: 0 0 8px var(--toggle-on-color);
}

.neo-toggle-input:checked+.neo-toggle .neo-status-text {
    color: var(--toggle-on-color);
    content: "ACTIVE";
}

.neo-toggle-input:checked+.neo-toggle+.neo-value-display {
    opacity: 1;
    transform: translateY(0);
}

.neo-toggle-input:checked+.neo-toggle+.neo-value-display .neo-value-text {
    color: var(--toggle-on-color);
}

.neo-toggle:hover .neo-thumb-ring {
    transform: scale(1.05);
}

.neo-toggle-input:not(:checked)+.neo-toggle:hover .neo-thumb-wave::before,
.neo-toggle-input:not(:checked)+.neo-toggle:hover .neo-thumb-wave::after {
    opacity: 1;
}

.neo-toggle.neo-dragging .neo-track {
    transform: translateZ(-1px) scale(1.02);
}

.neo-toggle.neo-dragging .neo-thumb {
    transition: none;
}

@keyframes neo-pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.2;
    }

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

@keyframes neo-spectrum {
    0% {
        height: 3px;
    }

    50% {
        height: 8px;
    }

    100% {
        height: 3px;
    }
}

.neo-toggle.neo-activated .neo-ripple {
    width: 100px;
    height: 100px;
    opacity: 0.5;
    transition: all 0.6s ease-out;
}

.neo-toggle.neo-progress .neo-progress-arc {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1) rotate(270deg);
    transition:
        opacity 0.3s ease,
        transform 1s ease;
}

.neo-toggle-input:checked+.neo-toggle .neo-status-text::before {
    content: "ACTIVE";
}

.neo-toggle-input:not(:checked)+.neo-toggle .neo-status-text::before {
    content: "STANDBY";
}

.neo-toggle-input:disabled+.neo-toggle .neo-status-text::before {
    content: "DISABLED";
}

.slide-toggle {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, margin-top 0.25s ease, opacity 0.25s ease;
    margin-top: -50px;
    z-index: -1;
}

.slide-toggle.active {
    max-height: 1000px;
    /* กำหนดให้สูงพอ */
    opacity: 1;
    margin-top: 0px;
    z-index: 6;
}

.slide-btn-toggle {
    opacity: 0;
    transform: translateX(-20px);
    /* เริ่มซ้าย */
    transition: opacity 0.35s ease, transform 0.25s ease;
}

.slide-btn-toggle.active {
    opacity: 1;
    transform: translateX(0);
    /* กลับตำแหน่งปกติ */
    z-index: 5;
}

.ldmap_placeholder.ldmap_placeholder_fullscreen .ldmap_fullscreen {
    width: 32px;
    height: 32px;
    margin: 57px 0 0 4px !important;
    vertical-align: top;
}

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

.table-bordered-in {
    border-collapse: collapse !important;
}

.table-bordered-in th,
.table-bordered-in td {
    border: 1px solid #ccc !important;
}

.table-bordered-in {
    border: none !important;
}

.table-bordered-in tr:first-child th {
    border-top: none !important;
}

.table-bordered-in tr:last-child td {
    border-bottom: none !important;
}

.table-bordered-in th:first-child,
.table-bordered-in td:first-child {
    border-left: none !important;
}

.table-bordered-in th:last-child,
.table-bordered-in td:last-child {
    border-right: none !important;
}

.btn-secondary-lite {
    background-color: #ffffffe8;
    color: #4d5a6e;
    font-size: 12px;
    padding: 5px;
}

.table-bordered>:not(caption)>* {
    border-width: 0px 0;
}

.bootstrap-table .bs-checkbox label input[type="checkbox"] {
    appearance: none;
    width: 26px;
    height: 26px;
    border: 2px solid #198754;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    position: relative;
}

.bootstrap-table .bs-checkbox label input[type="checkbox"]:checked {
    background: #1cbba9;
}

.bootstrap-table .bs-checkbox label input[type="checkbox"]:checked::after {
    content: "✓";
    color: white;
    font-size: 18px;
    font-weight: bold;
    position: absolute;
    left: 4px;
    top: -1px;
}

.adduser .step {
    display: none;
}

.adduser .step.active {
    display: block;
}

.adduser .is-invalid {
    border-color: red !important;
}

.face-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 90%;
    border: 3px dashed rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    pointer-events: none;
}

.text-red-500 {
    color: var(--box4);
}

.text-green-500 {
    color: var(--box2);
}

.user-preview-card {
    width: 90%;
    margin: auto;
    background: #fff;
    padding: 25px 35px;
    border-radius: 18px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    font-family: "Prompt", sans-serif;
}

.user-preview-card .title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 25px;
}

.preview-content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.profile-section {
    flex-shrink: 0;
}

.profile-image {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #ddd;
}

.detail-section {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 30px;
}

.detail-item {
    font-size: 16px;
}

.detail-item label {
    font-weight: 500;
    color: #333;
}

.detail-item span {
    margin-left: 5px;
    color: #444;
}

.menu-category-title {
    font-size: 1rem;
    font-weight: 600;
    padding: 8px 0;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 10px;
}

.menu-group {
    background: #fafafa;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #ececec;
}

.menu-checkbox+label {
    margin-left: 6px;
    cursor: pointer;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 8px 20px;
}

.font-size-15 {
    font-size: 15px;
}

.step-form {
    .progress-container {
        display: flex;
        justify-content: space-between;
        position: relative;
        margin-bottom: 30px;
        max-width: 100%;
        width: 800px;
    }

    .progress-container::before {
        content: "";
        background-color: var(--line-border-empty);
        position: absolute;
        top: 32%;
        left: 6%;
        transform: translateY(-50%);
        height: 4px;
        width: 90%;
        z-index: 1;
    }

    .progress {
        background-color: var(--tonebg);
        position: absolute;
        top: 32%;
        left: 6%;
        transform: translateY(-50%);
        height: 4px;
        width: 0%;
        z-index: 2;
        transition: 0.4s ease;
    }

    .circle-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        z-index: 3;
    }

    .circle {
        background-color: #fff;
        color: #999;
        border-radius: 50%;
        height: 35px;
        width: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 3px solid var(--line-border-empty);
        transition: 0.4s ease;
    }

    .circle.active {
        border-color: var(--tone-hover);
    }

    .step-label {
        font-size: 12px;
        color: #999;
        white-space: nowrap;
        transition: 0.4s ease;
    }

    .circle.active+.step-label {
        color: var(--tone-hover);
        font-weight: 600;
    }
}

@media screen and (max-width: 600px) {
    .wrap-content .title {
        font-size: 34px;
    }
}

@media screen and (max-width: 768px) {
    #content nav .nav-link {
        display: none;
    }

    #sidebar.hide~#content {
        width: calc(100% - 0px) !important;
        left: 0px !important;
    }

    .image-sidebar.hide,
    #sidebar.hide {
        width: 0px !important;
    }

    #content nav::after {
        background-size: cover !important;
        right: 0;
    }

    .username-box {
        display: none !important;
    }

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

    .step {
        min-width: 80px;
    }

    .step-icon {
        width: 40px;
        height: 40px;
    }

    .step-number {
        font-size: 16px;
    }

    .step-label {
        font-size: 12px;
    }
}

@media screen and (max-width: 991px) {
    #content nav {
        padding-left: 13px;
    }

    .setup-content-wrapper {
        width: 100%;
        margin-top: 80px;

        .logo-setting {
            top: -80px;
            width: 150px;
            height: 150px;
        }
    }

    .w-40.btn-setup {
        width: 100% !important;
    }

    .wrap-content {
        padding-top: 0px;
    }

    .bg-main-login svg {
        width: 365vw;
    }

    #loginPage_Main .logo-mb {
        display: block;
    }

    .wrap-content .title {
        text-align: center;
    }

    .wrap-content .sub-title {
        text-align: center;
    }

    .wrap-content .block-content {
        margin-top: 20px;
    }

    .wrap-content .block-content .logo {
        display: none;
    }

    .wrap-content .block-content .content {
        border-radius: 30px;
        border-left: 7px solid #1B4332;
        border-width: 4px;
        min-height: 100%;
    }

    .wrap-content .block-content .content .box {
        position: relative;
        width: 100%;
        margin: 0;
        height: auto;
    }

    .wrap-content .block-content .content::before {
        display: none;
    }

    .block-register .detail {
        padding: 0 20px;
    }

    .block-register .text-bottom {
        font-size: 15px;
        justify-content: center;
    }

    .block-register-form {
        margin-top: -20px;
    }

    .block-register-form .title-block {
        text-align: center;
    }

    .block-register-form form {
        padding-left: 0px;
        padding-right: 0px;
    }

    .block-register-form form .btn {
        width: 110px;
    }

    .modal-dialog {
        max-width: 100% !important;
    }

    .family-information {
        padding: 0 !important;
    }

    .calendar-grid {
        gap: 5px;
    }

    .calendar-day {
        padding: 5px;
    }

    .day-number {
        font-size: 0.9rem;
    }

    .icon-circle {
        width: 24px;
        height: 24px;
        font-size: 0.8rem;
    }
}

@media screen and (max-width: 1024px) {
    .wrap-content .title {
        font-size: 44px;
    }

    .wrap-content .sub-title {
        font-size: 16px;
    }
}

@media screen and (max-width: 1200px) {
    .wrap-content .sub-title {
        font-size: 18px;
    }

    .block-register .detail {
        width: 100%;
        padding: 0 20px;
    }

    .block-register .register_form .wrap-register {
        border-bottom: 2px dashed #40916C;
        border-right: 0;
        padding: 0;
        padding-bottom: 20px;
    }

    .container .row.mt-1 .wrap-register {
        border-bottom: 1.2px dashed #40916C;
        border-right: 0;
        padding: 0;
        padding-bottom: 20px;
        width: 100%;
    }

    .block-register .register_form {
        width: 100%;
        padding: 25px;
    }
}

@media screen and (max-width: 1366px) {
    .block-register {
        padding-top: 24px;
    }
}

/* --- Project Showcase Styles --- */
.project-showcase-container {
    padding: 20px;
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.search-box {
    position: relative;
    background: var(--bg-light);
    border-radius: 15px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.search-box i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dark-grey);
}

.search-box input {
    padding-left: 45px;
    height: 50px;
    border: none;
    font-size: 15px !important;
    background: transparent !important;
}

.search-box input:focus {
    box-shadow: none;
    background: transparent;
}

.category-tabs {
    display: flex;
    gap: 10px;
    background: var(--bg-light);
    padding: 5px;
    border-radius: 15px;
    box-shadow: var(--shadow);
}

.cat-btn {
    padding: 8px 18px;
    border: none;
    background: transparent;
    border-radius: 12px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--dark-grey);
}

.cat-btn.active {
    background: var(--tonebg);
    color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.cat-btn:hover:not(.active) {
    background: var(--tone-litle);
    color: var(--tonebg);
}

.project-card {
    background: var(--bg-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.card-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.project-card:hover .card-image img {
    transform: scale(1.1);
}

.card-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 5px 12px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    color: white;
    z-index: 2;
}

.card-badge.hot {
    background: linear-gradient(45deg, #FF6B6B, #FF8E53);
}

.card-badge.new {
    background: linear-gradient(45deg, #4facfe, #00f2fe);
}

.card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
}

.project-card:hover .card-overlay {
    opacity: 1;
}

.btn-view-demo {
    padding: 10px 20px;
    border-radius: 12px;
    border: none;
    background: white;
    color: #333;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.project-card:hover .btn-view-demo {
    transform: translateY(0);
}

.card-body {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.card-meta .category {
    font-size: 12px;
    color: var(--tonebg);
    font-weight: 600;
    text-transform: uppercase;
}

.card-meta .date {
    font-size: 12px;
    color: var(--dark-grey);
}

.card-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--dark);
}

.card-text {
    font-size: 14px;
    color: var(--dark-grey);
    line-height: 1.5;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 2;
}

.card-footer-custom {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.price {
    font-size: 20px;
    font-weight: 800;
    color: var(--tonebg);
}

.actions {
    display: flex;
    gap: 8px;
}

.btn-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--tone-litle);
    background: transparent;
    color: var(--dark-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.btn-icon:hover {
    background: #FF6B6B;
    color: white;
    border-color: #FF6B6B;
}

.btn-buy {
    padding: 0 15px;
    height: 40px;
    border-radius: 12px;
    border: none;
    background: var(--tonebg);
    color: white;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.dark .project-card {
    background: var(--bg-light);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.dark .card-footer-custom {
    border-top-color: rgba(255, 255, 255, 0.05);
}

.dark .btn-icon {
    border-color: rgba(255, 255, 255, 0.1);
}

/* =============================================
   NEW FEATURES CSS
   ============================================= */

/* --- Dashboard General Card --- */
.dashboard-card {
    background: var(--bg-light);
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--shadow);
    height: 100%;
}

.dashboard-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.dashboard-card__title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0;
    color: var(--light-text);
}

.dashboard-card__subtitle {
    font-size: 12px;
    color: var(--dark-grey);
    margin: 0;
}

.dark .dashboard-card {
    background: var(--bg-light);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- Stats Cards --- */
.stat-card {
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    overflow: hidden;
    color: white;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
}

.stat-card--blue {
    background: linear-gradient(135deg, var(--tonebg), var(--tone-dark));
}

.stat-card--green {
    background: linear-gradient(135deg, #06d79c, #058a63);
}

.stat-card--orange {
    background: linear-gradient(135deg, #ed6002, #b34000);
}

.stat-card--violet {
    background: linear-gradient(135deg, #735af2, #4936b3);
}

.stat-card__icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}

.stat-card__content {
    flex: 1;
    min-width: 0;
}

.stat-card__label {
    display: block;
    font-size: 12px;
    opacity: 0.85;
    margin-bottom: 4px;
}

.stat-card__value {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 4px;
    line-height: 1.1;
}

.stat-card__sub {
    font-size: 12px;
    opacity: 0.8;
}

.stat-card__bg-icon {
    position: absolute;
    right: -12px;
    bottom: -10px;
    font-size: 80px;
    opacity: 0.12;
    pointer-events: none;
    line-height: 1;
}

.badge-online {
    color: #2ecc71;
    font-weight: 700;
}

.badge-date {
    font-size: 13px;
    background: var(--bg-light);
    padding: 6px 14px;
    border-radius: 50px;
    box-shadow: var(--shadow);
    color: var(--light-text);
}

/* --- Chart Legend --- */
.chart-legend {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: var(--light-text);
}

.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}

/* --- Quick Access Grid --- */
.quick-access-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.quick-item {
    background: var(--secondary);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    color: var(--light-text);
    font-size: 12px;
    gap: 8px;
    border: 1.5px solid transparent;
}

.quick-item:hover {
    background: var(--tone-litle);
    border-color: var(--tonebg);
    color: var(--tonebg);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.quick-item i {
    font-size: 22px;
}

.dark .quick-item {
    background: rgba(255, 255, 255, 0.05);
    color: var(--light-text);
}

/* --- Activity Feed --- */
.activity-feed {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

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

.activity-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}

.activity-body {
    flex: 1;
    font-size: 13px;
    color: var(--light-text);
    line-height: 1.5;
}

.activity-time {
    display: block;
    font-size: 11px;
    color: var(--dark-grey);
    margin-top: 2px;
}

.dot-blue {
    background: var(--tonebg);
}

.dot-green {
    background: #06d79c;
}

.dot-orange {
    background: #ed6002;
}

.dot-violet {
    background: #735af2;
}

.dot-red {
    background: #ef5350;
}

.btn-see-all {
    background: none;
    border: 1.5px solid var(--tonebg);
    color: var(--tonebg);
    border-radius: 50px;
    padding: 5px 16px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--prompt);
}

.btn-see-all:hover {
    background: var(--tonebg);
    color: white;
}

/* --- Donut Legend --- */
.donut-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: var(--light-text);
}

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

/* =============================================
   USERS PAGE
   ============================================= */

.search-bar-user {
    position: relative;
    display: flex;
    align-items: center;
}

.search-bar-user i {
    position: absolute;
    left: 14px;
    color: var(--dark-grey);
    font-size: 14px;
}

.search-bar-user input {
    width: 100%;
    height: 44px;
    padding: 0 16px 0 40px;
    border-radius: 50px;
    border: 1.5px solid var(--secondary);
    background: var(--bg-light);
    color: var(--light-text);
    font-family: var(--prompt);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.search-bar-user input:focus {
    border-color: var(--tonebg);
}

.dark .search-bar-user input {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--light-text);
}

.user-filter-select {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border-radius: 50px;
    border: 1.5px solid var(--secondary);
    background: var(--bg-light);
    color: var(--light-text);
    font-family: var(--prompt);
    font-size: 14px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.user-filter-select:focus {
    border-color: var(--tonebg);
}

.dark .user-filter-select {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--light-text);
}

.btn-icon-round {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--secondary);
    background: var(--bg-light);
    color: var(--light-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-icon-round:hover {
    background: var(--tone-litle);
    border-color: var(--tonebg);
    color: var(--tonebg);
}

/* User Mini Stats */
.user-mini-stat {
    background: var(--bg-light);
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow);
    font-size: 13px;
    color: var(--light-text);
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.user-mini-stat i {
    font-size: 22px;
}

.user-mini-stat.active i {
    color: var(--tonebg);
    border-color: var(--tone-litle);
}

.user-mini-stat.online i {
    color: #06d79c;
}

.user-mini-stat.offline i {
    color: #ef5350;
}

.user-mini-num {
    display: block;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}

.user-mini-label {
    font-size: 11px;
    color: var(--dark-grey);
}

.dark .user-mini-stat {
    background: var(--bg-light);
    border-color: rgba(255, 255, 255, 0.05);
}

/* Users Table */
.user-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    color: var(--light-text);
}

.user-table thead th {
    background: var(--secondary);
    padding: 12px 16px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    color: var(--light-text);
}

.user-table thead th:first-child {
    border-radius: 12px 0 0 12px;
}

.user-table thead th:last-child {
    border-radius: 0 12px 12px 0;
}

.user-table tbody tr {
    transition: background 0.15s;
}

.user-table tbody tr:hover {
    background: var(--tone-litle);
}

.user-table tbody td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--secondary);
    vertical-align: middle;
}

.user-table tbody tr:last-child td {
    border-bottom: none;
}

.dark .user-table thead th {
    background: rgba(255, 255, 255, 0.07);
}

.dark .user-table tbody td {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.dark .user-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

.user-avatar-sm {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--secondary);
    flex-shrink: 0;
}

.user-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Role & Status Badges */
.badge-role,
.badge-status {
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.badge-role.admin {
    background: rgba(115, 90, 242, 0.15);
    color: #735af2;
}

.badge-role.moderator {
    background: rgba(235, 171, 0, 0.15);
    color: #cc8800;
}

.badge-role.user {
    background: rgba(0, 163, 237, 0.12);
    color: var(--tonebg);
}

.badge-status.active {
    background: rgba(6, 215, 156, 0.15);
    color: #058a63;
}

.badge-status.inactive {
    background: rgba(239, 83, 80, 0.12);
    color: #c62828;
}

.dark .badge-role.admin {
    color: #a992ff;
}

.dark .badge-role.moderator {
    color: #ffcc55;
}

.dark .badge-role.user {
    color: #60cbf8;
}

.dark .badge-status.active {
    color: #34e0a1;
}

.dark .badge-status.inactive {
    color: #ff8a80;
}

/* Action Buttons */
.action-btns {
    display: flex;
    gap: 8px;
}

.btn-action {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}

.btn-action.edit {
    background: rgba(6, 215, 156, 0.12);
    color: #058a63;
}

.btn-action.edit:hover {
    background: #06d79c;
    color: white;
}

.btn-action.delete {
    background: rgba(239, 83, 80, 0.12);
    color: #c62828;
}

.btn-action.delete:hover {
    background: #ef5350;
    color: white;
}

.table-footer {
    padding: 12px 0 0;
    text-align: right;
}

/* --- Primary & Outline Buttons --- */
.btn-primary-custom {
    height: 44px;
    padding: 0 22px;
    background: var(--tonebg);
    color: white;
    border: none;
    border-radius: 50px;
    font-family: var(--prompt);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.btn-primary-custom:hover {
    background: var(--tone-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.btn-outline-custom {
    height: 44px;
    padding: 0 22px;
    background: transparent;
    color: var(--light-text);
    border: 1.5px solid var(--secondary);
    border-radius: 50px;
    font-family: var(--prompt);
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-outline-custom:hover {
    border-color: var(--tonebg);
    color: var(--tonebg);
    background: var(--tone-litle);
}

/* --- Bootstrap & Premium Button Overrides --- */

/* Modern & Premium Default Button Styles & Micro-animations */
.btn {
    font-family: var(--prompt) !important;
    font-weight: 500 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn:hover {
    transform: translateY(-1.5px);
    box-shadow: var(--shadow) !important;
}

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

/* Primary Button Override & Premium Primary */
.btn-primary,
.btn-premium-primary {
    background-color: var(--tonebg) !important;
    border-color: var(--tonebg) !important;
    color: var(--light) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-premium-primary:hover,
.btn-premium-primary:focus,
.btn-premium-primary:active {
    background-color: var(--tone-hover) !important;
    border-color: var(--tone-hover) !important;
    color: var(--light) !important;
}

.btn-primary:active:focus,
.btn-primary.active,
.btn-primary.show,
.btn-premium-primary:active:focus {
    background-color: var(--tone-dark) !important;
    border-color: var(--tone-dark) !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--tone-lightgray) !important;
    border-color: var(--tone-lightgray) !important;
    opacity: 0.65;
}

/* Secondary Button Override & Premium Secondary */
.btn-secondary,
.btn-premium-secondary {
    background-color: var(--secondary) !important;
    border-color: var(--readonly) !important;
    color: var(--light-text) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-premium-secondary:hover,
.btn-premium-secondary:focus,
.btn-premium-secondary:active {
    background-color: var(--gray-hover) !important;
    border-color: var(--readonly) !important;
    color: var(--light-text) !important;
}

.btn-secondary:active:focus,
.btn-secondary.active,
.btn-secondary.show,
.btn-premium-secondary:active:focus {
    background-color: var(--readonly) !important;
}

/* Success Button Override */
.btn-success {
    background-color: var(--tone-darkgreen) !important;
    border-color: var(--tone-darkgreen) !important;
    color: var(--light) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--green) !important;
    border-color: var(--green) !important;
    color: var(--light) !important;
    opacity: 0.9;
}

/* Danger Button Override */
.btn-danger {
    background-color: var(--tone-red) !important;
    border-color: var(--tone-red) !important;
    color: var(--light) !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: var(--box4) !important;
    border-color: var(--box4) !important;
    color: var(--light) !important;
    opacity: 0.9;
}

/* Warning Button Override */
.btn-warning {
    background-color: var(--tone-yellow) !important;
    border-color: var(--tone-yellow) !important;
    color: var(--dark) !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: var(--yellow) !important;
    border-color: var(--yellow) !important;
    color: var(--dark) !important;
    opacity: 0.9;
}

/* Info Button Override */
.btn-info {
    background-color: var(--tone-darkblue) !important;
    border-color: var(--tone-darkblue) !important;
    color: var(--light) !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: var(--tone-light) !important;
    border-color: var(--tone-light) !important;
    color: var(--light) !important;
}

/* Light Button Override */
.btn-light {
    background-color: var(--grey) !important;
    border-color: var(--readonly) !important;
    color: var(--light-text) !important;
}

.btn-light:hover,
.btn-light:focus {
    background-color: var(--gray-hover) !important;
    color: var(--light-text) !important;
}

/* Dark Button Override */
.btn-dark {
    background-color: var(--dark) !important;
    border-color: var(--dark) !important;
    color: var(--light) !important;
}

.btn-dark:hover,
.btn-dark:focus {
    background-color: var(--dark-grey) !important;
    color: var(--light) !important;
}

/* Outline Buttons Override */
.btn-outline-primary {
    color: var(--tonebg) !important;
    border-color: var(--tonebg) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: var(--light) !important;
    background-color: var(--tonebg) !important;
    border-color: var(--tonebg) !important;
}

.btn-outline-secondary {
    color: var(--light-text) !important;
    border-color: var(--readonly) !important;
    background-color: transparent !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    color: var(--light-text) !important;
    background-color: var(--secondary) !important;
    border-color: var(--readonly) !important;
}

.btn-outline-success {
    color: var(--tone-darkgreen) !important;
    border-color: var(--tone-darkgreen) !important;
    background-color: transparent !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
    color: var(--light) !important;
    background-color: var(--tone-darkgreen) !important;
    border-color: var(--tone-darkgreen) !important;
}

.btn-outline-danger {
    color: var(--tone-red) !important;
    border-color: var(--tone-red) !important;
    background-color: transparent !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
    color: var(--light) !important;
    background-color: var(--tone-red) !important;
    border-color: var(--tone-red) !important;
}

.btn-outline-warning {
    color: var(--tone-yellow) !important;
    border-color: var(--tone-yellow) !important;
    background-color: transparent !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active {
    color: var(--dark) !important;
    background-color: var(--tone-yellow) !important;
    border-color: var(--tone-yellow) !important;
}

.btn-outline-info {
    color: var(--tone-darkblue) !important;
    border-color: var(--tone-darkblue) !important;
    background-color: transparent !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
    color: var(--light) !important;
    background-color: var(--tone-darkblue) !important;
    border-color: var(--tone-darkblue) !important;
}

/* =============================================
   ADD USER FORM
   ============================================= */

.avatar-upload-wrapper {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 50%;
}

.avatar-preview {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 3px solid var(--tonebg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.avatar-upload-btn {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 30px;
    height: 30px;
    background: var(--tonebg);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.avatar-upload-btn:hover {
    transform: scale(1.1);
}

.info-preview-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--light-text);
    padding: 5px 0;
}

.info-preview-row i {
    width: 16px;
    color: var(--tonebg);
}

.form-label-custom {
    font-size: 13px;
    font-weight: 600;
    color: var(--light-text);
    margin-bottom: 6px;
    display: block;
}

.form-label-custom.required::after {
    content: ' *';
    color: #ef5350;
}

.form-input-custom {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1.5px solid var(--secondary);
    background: var(--bg-light);
    color: var(--light-text);
    font-family: var(--prompt);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input-custom:focus {
    border-color: var(--tonebg);
    box-shadow: 0 0 0 3px rgba(2, 163, 237, 0.12);
}

.form-input-custom.is-invalid-field {
    border-color: #ef5350;
}

.dark .form-input-custom {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--light-text);
}

.invalid-msg {
    display: none;
    font-size: 12px;
    color: #ef5350;
    margin-top: 4px;
}

.input-password-wrapper {
    position: relative;
}

.input-password-wrapper .form-input-custom {
    padding-right: 44px;
}

.toggle-pw {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dark-grey);
    cursor: pointer;
    font-size: 14px;
}

.strength-bar {
    height: 5px;
    background: var(--secondary);
    border-radius: 10px;
    overflow: hidden;
}

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

.strength-text {
    font-size: 11px;
    font-weight: 600;
}

/* =============================================
   SETTINGS PAGE
   ============================================= */

.settings-nav-header {
    padding: 16px 20px;
    font-weight: 700;
    font-size: 14px;
    color: var(--light-text);
    border-bottom: 1px solid var(--secondary);
}

.settings-nav {
    list-style: none;
    padding: 8px 0;
    margin: 0;
}

.settings-nav li {
    padding: 12px 20px;
    cursor: pointer;
    font-size: 14px;
    color: var(--light-text);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.settings-nav li:hover {
    background: var(--tone-litle);
    color: var(--tonebg);
}

.settings-nav li.active {
    background: var(--tone-litle);
    color: var(--tonebg);
    border-left-color: var(--tonebg);
    font-weight: 700;
}

.dark .settings-nav li:hover,
.dark .settings-nav li.active {
    background: rgba(255, 255, 255, 0.05);
}

.settings-section {
    display: none;
}

.settings-section.active {
    display: block;
}

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

.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
}

.settings-toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.settings-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #ccc;
    border-radius: 50px;
    transition: 0.3s;
}

.settings-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    bottom: 4px;
    left: 4px;
    transition: 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.settings-toggle input:checked+.settings-toggle-slider {
    background: var(--tonebg);
}

.settings-toggle input:checked+.settings-toggle-slider::before {
    transform: translateX(22px);
}

/* About page */
.about-logo-wrapper {
    width: 100px;
    height: 100px;
    position: relative;
}

.about-badge-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.about-badge {
    padding: 6px 14px;
    background: var(--secondary);
    border-radius: 50px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--light-text);
}

.about-dev-card {
    background: var(--secondary);
    border-radius: 20px;
    padding: 24px;
    max-width: 240px;
}

.about-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--tonebg);
    color: white;
    border-radius: 50%;
    text-decoration: none;
    font-size: 16px;
    transition: transform 0.2s;
}

.about-link:hover {
    transform: scale(1.1);
    color: white;
}

.dark .about-badge,
.dark .about-dev-card {
    background: rgba(255, 255, 255, 0.07);
    color: var(--light-text);
}

/* =============================================
   ACTIVITY TIMELINE
   ============================================= */

.log-summary-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.log-summary-badge {
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.log-summary-badge.login {
    background: rgba(2, 163, 237, 0.12);
    color: var(--tonebg);
}

.log-summary-badge.edit {
    background: rgba(6, 215, 156, 0.12);
    color: #058a63;
}

.log-summary-badge.delete {
    background: rgba(239, 83, 80, 0.12);
    color: #c62828;
}

.log-summary-badge.system {
    background: rgba(237, 96, 2, 0.12);
    color: #b34000;
}

.log-summary-badge.error {
    background: rgba(115, 90, 242, 0.12);
    color: #5541cc;
}

.dashboard-card .activity-timeline {
    padding-top: 8px;
}

.timeline-group {
    margin-bottom: 24px;
}

.timeline-date-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--dark-grey);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
    padding-left: 50px;
}

.timeline-item {
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
}

.timeline-dot-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.timeline-dot {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: white;
    flex-shrink: 0;
}

.timeline-dot.dot-blue {
    background: var(--tonebg);
}

.timeline-dot.dot-green {
    background: #06d79c;
}

.timeline-dot.dot-orange {
    background: #ed6002;
}

.timeline-dot.dot-violet {
    background: #735af2;
}

.timeline-dot.dot-red {
    background: #ef5350;
}

.timeline-line {
    width: 2px;
    flex: 1;
    background: var(--secondary);
    margin: 6px auto 0;
    min-height: 10px;
}

.timeline-content {
    flex: 1;
    background: var(--secondary);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 6px;
}

.timeline-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.timeline-action {
    font-size: 14px;
    font-weight: 600;
    color: var(--light-text);
    margin-bottom: 4px;
}

.timeline-detail {
    font-size: 12px;
    color: var(--dark-grey);
}

.timeline-time {
    margin-left: auto;
    font-size: 12px;
    color: var(--dark-grey);
    white-space: nowrap;
}

.log-type-badge {
    padding: 2px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
}

.log-type-badge.login {
    background: rgba(2, 163, 237, 0.15);
    color: var(--tonebg);
}

.log-type-badge.edit {
    background: rgba(6, 215, 156, 0.15);
    color: #058a63;
}

.log-type-badge.delete {
    background: rgba(239, 83, 80, 0.15);
    color: #c62828;
}

.log-type-badge.system {
    background: rgba(237, 96, 2, 0.15);
    color: #b34000;
}

.log-type-badge.error {
    background: rgba(115, 90, 242, 0.15);
    color: #5541cc;
}

.dark .timeline-content {
    background: rgba(255, 255, 255, 0.05);
}

.dark .timeline-line {
    background: rgba(255, 255, 255, 0.08);
}

/* =============================================
   ICON LIBRARY
   ============================================= */

.icon-filter-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.icon-filter-btn {
    padding: 7px 18px;
    border-radius: 50px;
    border: 1.5px solid var(--secondary);
    background: var(--bg-light);
    color: var(--light-text);
    font-family: var(--prompt);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.icon-filter-btn:hover {
    border-color: var(--tonebg);
    color: var(--tonebg);
}

.icon-filter-btn.active {
    background: var(--tonebg);
    border-color: var(--tonebg);
    color: white;
    font-weight: 700;
}

.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

.icon-card {
    background: var(--secondary);
    border-radius: 16px;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 2px solid transparent;
    text-align: center;
    gap: 6px;
    position: relative;
    overflow: hidden;
}

.icon-card:hover {
    border-color: var(--tonebg);
    background: var(--tone-litle);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.icon-card.copied {
    border-color: #06d79c;
    background: rgba(6, 215, 156, 0.1);
}

.icon-card i {
    color: var(--tonebg);
}

.icon-name {
    font-size: 11px;
    color: var(--light-text);
    word-break: break-word;
    line-height: 1.3;
}

.icon-style-tag {
    font-size: 10px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--dark-grey);
    padding: 2px 8px;
    border-radius: 50px;
}

.copy-tip {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: #06d79c;
    color: white;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    animation: fadeInUp 0.2s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.dark .icon-card {
    background: rgba(255, 255, 255, 0.05);
}

.dark .icon-card:hover {
    background: rgba(var(--tonebg), 0.1);
}

.dark .icon-style-tag {
    background: rgba(255, 255, 255, 0.08);
    color: var(--dark-grey);
}

/* =============================================
   PROFILE PAGE
   ============================================= */

.profile-cover {
    height: 100px;
    border-radius: 16px 16px 0 0;
    margin: -24px -24px 0;
}

.profile-avatar-area {
    display: flex;
    justify-content: center;
    margin-top: -50px;
    position: relative;
    z-index: 2;
}

.profile-avatar-wrapper {
    position: relative;
    width: 90px;
    height: 90px;
}

.profile-avatar-bg {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 4px solid var(--bg-light);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.profile-avatar-edit {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 28px;
    height: 28px;
    background: var(--tonebg);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.profile-avatar-edit:hover {
    transform: scale(1.1);
}

.profile-stats-row {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
}

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

.profile-stat b {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--light-text);
}

.profile-stat small {
    font-size: 11px;
    color: var(--dark-grey);
}

.profile-stat-div {
    width: 1px;
    background: var(--secondary);
}

.profile-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--light-text);
    padding: 6px 0;
}

.profile-info-row i {
    width: 18px;
    text-align: center;
}

.profile-view-field {
    padding: 11px 16px;
    background: var(--secondary);
    border-radius: 12px;
    font-size: 14px;
    color: var(--light-text);
    min-height: 44px;
    display: flex;
    align-items: center;
}

.dark .profile-avatar-bg {
    border-color: var(--bg-light);
}

.dark .profile-view-field {
    background: rgba(255, 255, 255, 0.06);
}

/* =============================================
   CODE BLOCKS (Install Guides)
   ============================================= */

.code-block {
    background: var(--bg-light);
    border: 1.5px solid var(--secondary);
    border-radius: 14px;
    overflow: hidden;
}

.dark .code-block {
    background: #0a0a1a;
    border-color: rgba(255, 255, 255, 0.08);
}

.code-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--secondary);
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--light-text);
}

.dark .code-block__header {
    background: rgba(255, 255, 255, 0.05);
}

.code-block__body {
    margin: 0;
    padding: 16px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--tonebg);
    white-space: pre-wrap;
    word-break: break-word;
    font-family: 'Courier New', monospace;
    overflow-x: auto;
}

.dark .code-block__body {
    color: #79c0ff;
}

.code-copy-btn {
    background: var(--tonebg);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 4px 12px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--prompt);
}

.code-copy-btn:hover {
    background: var(--tone-dark);
    transform: scale(1.03);
}

/* =============================================
   INSTALL STEPS
   ============================================= */

.install-steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.install-step-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: var(--bg-light);
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1.5px solid transparent;
    transition: border-color 0.2s;
}

.install-step-card:hover {
    border-color: var(--tone-litle);
}

.dark .install-step-card {
    background: var(--bg-light);
    border-color: rgba(255, 255, 255, 0.05);
}

.install-step-num {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--tonebg), var(--tone-dark));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.install-step-body {
    flex: 1;
    min-width: 0;
}

.install-step-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--light-text);
}

/* Icon Size Preview - Install Guide */
.icon-size-preview {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    padding: 16px;
    background: var(--secondary);
    border-radius: 12px;
}

.icon-size-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.icon-size-item i {
    color: var(--tonebg);
}

.icon-size-item span {
    font-size: 11px;
    color: var(--dark-grey);
}

/* Animation Preview Cards */
.anim-preview-card {
    background: var(--secondary);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--tonebg);
}

.anim-preview-card code {
    font-size: 11px;
    background: var(--bg-light);
    padding: 3px 8px;
    border-radius: 50px;
    color: var(--light-text);
}

.dark .anim-preview-card {
    background: rgba(255, 255, 255, 0.05);
}

.dark .anim-preview-card code {
    background: rgba(255, 255, 255, 0.08);
}

/* Bootstrap Icons Example Grid */
.bi-example-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
}

.bi-example-item {
    background: var(--secondary);
    border-radius: 12px;
    padding: 16px 8px;
    text-align: center;
    font-size: 12px;
    color: var(--light-text);
}

.bi-example-item code {
    font-size: 10px;
    color: var(--dark-grey);
    word-break: break-word;
}

/* Material Icons Variant Badge */
.mi-variant-badge {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(66, 133, 244, 0.12);
    color: #4285F4;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
}

/* Material Icons Size Preview */
.mi-size-preview {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    padding: 16px;
    background: var(--secondary);
    border-radius: 12px;
}

.mi-size-preview div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.mi-size-preview small {
    font-size: 11px;
    color: var(--dark-grey);
}

/* Master Search Improvements */
#searchDropdown {
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 8px;
    background: var(--bg-light);
    backdrop-filter: blur(10px);
    overflow-x: hidden;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 2px;
}

.search-result-item:hover {
    background: var(--tone-litle);
    transform: translateX(5px);
}

.search-result-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.search-result-icon.page {
    background: rgba(2, 163, 237, 0.1);
    color: var(--tonebg);
}

.search-result-icon.user {
    background: rgba(6, 215, 156, 0.1);
    color: #06d79c;
}

.search-result-icon.project {
    background: rgba(115, 90, 242, 0.1);
    color: #735af2;
}

.search-result-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--light-text);
}

.search-result-sub {
    font-size: 11px;
    color: var(--dark-grey);
}

/* Notification Center Style */
#notificationDiv {
    padding: 0 16px;
    max-height: 400px;
    overflow-y: auto;
}

.notify-header {
    display: flex;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--grey);
}

.notify-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--grey);
    cursor: pointer;
    transition: background 0.2s;
}

.notify-item:hover {
    background: var(--gray-hover);
}

.notify-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.notify-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--light-text);
    margin-bottom: 2px;
}

.notify-desc {
    font-size: 12px;
    color: var(--dark-grey);
    line-height: 1.4;
}

.notify-time {
    font-size: 10px;
    color: var(--dark-grey);
    margin-top: 4px;
}

.notify-footer {
    padding: 12px;
    text-align: center;
    font-size: 12px;
    color: var(--tonebg);
    font-weight: 600;
    cursor: pointer;
    background: var(--gray-hover);
    border-top: 1px solid var(--grey);
}

.dark #searchDropdown {
    background: rgba(30, 30, 45, 0.95);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.dark .search-result-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.dark .notify-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.dark .notify-footer {
    background: rgba(255, 255, 255, 0.02);
}

#calendar-Homepage {
    padding: 1rem;
}

.calendar-btn {
    padding: 5px;
    border-radius: 14px;
    border: none;
    width: 40px;
    height: 40px;
}

/* ===== HEADER ===== */
.cal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.cal-header h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: #1a1a1a;
}

/* ===== GRID ===== */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

/* header day */
.cal-grid .header-day {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #999;
    padding: 6px 2px;
}

/* ===== DAY CARD ===== */
.cal-day {
    position: relative;
    height: 42px;
    border-radius: 10px;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

/* hover */
.cal-day:hover {
    background: #eef4ff;
    transform: translateY(-1px);
}

/* number */
.cal-day-num {
    font-weight: 500;
}

/* dot */
.success-box {
    background: #e8f7ee;
    color: #1f7a4c;
}

/* มาสาย */
.warning-box {
    background: #fff4e5;
    color: #d48806;
}

.bg-warning-subtle-calendar {
    background: #fff4e5;
    color: #d48806;
}

/* ขาด */
.ago-box {
    background: #fdecec;
    color: #c53030;
}

/* วันหยุด */
.holiday-box {
    background: #f1f3f5;
    color: #868e96;
}

/* วันทำงานอนาคต */
.working-box {
    background: #eef2ff;
    color: #4c6ef5;
}

/* ลาหยุด */
.leave-box {
    width: 50px;
    height: 50px;
    background: #fff7ed;
    color: #fa913c;
}

/* วันนี้ */
.today-box {
    background: var(--tonebg);
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(24, 95, 165, 0.25);
}

.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 10px;
}

.legend-item {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--dark-grey);
}

/* --- Pin Menu Features --- */
.pin-btn {
    margin-left: auto !important;
    margin-right: 15px !important;
    opacity: 0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: rgba(255, 255, 255, 0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    z-index: 5;
}

.pin-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    transform: scale(1.15) rotate(-15deg);
}

#sidebar .side-menu li:hover .pin-btn {
    opacity: 1;
}

.pin-btn.pinned {
    opacity: 1;
    color: #fabd23 !important;
    /* Premium gold color */
    transform: rotate(45deg);
}

.pin-btn.pinned:hover {
    color: #ef5350 !important;
    /* Elegant warm red indicating unpin action */
    transform: scale(1.15) rotate(0deg);
}

#sidebar.hide .pin-btn {
    display: none !important;
}

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

    50% {
        transform: scale(1.25);
    }

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

.pin-animate {
    animation: pinBounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideInMenu {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

.pinned-item-animate {
    animation: slideInMenu 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Pinned Header styling */
.pinned-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    opacity: 0.85;
    border-bottom: 1.5px dashed rgba(255, 255, 255, 0.15) !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
    margin-top: 15px !important;
    color: #fabd23 !important;
    /* Match the gold pin theme */
}

.pinned-header i {
    font-size: 11px;
    animation: rotatePinSymbol 4s ease-in-out infinite;
}

@keyframes rotatePinSymbol {

    0%,
    100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(15deg);
    }
}

/* =============================================
   PREMIUM BOOTSTRAP-TABLE GLOBAL OVERRIDES
   ============================================= */

/* --- Table Container (Glass Card) --- */
.bootstrap-table .fixed-table-container {
    border-radius: 20px !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.65) 100%) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px -2px rgba(157, 165, 175, 0.1) !important;
    transition: all 0.3s ease;
}

.dark .bootstrap-table .fixed-table-container {
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: linear-gradient(135deg, rgba(12, 12, 30, 0.85) 0%, rgba(6, 7, 20, 0.95) 100%) !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25) !important;
}

/* --- Table Header --- */
.bootstrap-table .fixed-table-container .table thead th {
    background: var(--secondary) !important;
    color: var(--text-muted) !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.05) !important;
    border-top: none !important;
    padding: 14px 12px !important;
    white-space: nowrap;
}

.dark .bootstrap-table .fixed-table-container .table thead th {
    background: rgba(6, 7, 20, 0.7) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.05) !important;
}

/* --- Table Cells --- */
.bootstrap-table .fixed-table-container .table tbody td {
    padding: 13px 12px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.035) !important;
    font-size: 0.85rem !important;
    color: var(--text-primary) !important;
    vertical-align: middle;
    transition: background-color 0.2s ease;
}

.dark .bootstrap-table .fixed-table-container .table tbody td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    color: var(--light-text) !important;
}

/* --- Row Hover --- */
.bootstrap-table .fixed-table-container .table tbody tr {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.bootstrap-table .fixed-table-container .table tbody tr:hover {
    background-color: rgba(2, 163, 237, 0.03) !important;
    transform: translateY(-1px);
}

.dark .bootstrap-table .fixed-table-container .table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* --- Pagination: Premium Pill Style --- */
.bootstrap-table .fixed-table-pagination {
    padding: 16px 20px 10px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.dark .bootstrap-table .fixed-table-pagination {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.bootstrap-table .fixed-table-pagination .pagination .page-item.active .page-link {
    background-color: var(--tonebg) !important;
    border-color: var(--tonebg) !important;
    color: #FFF !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(2, 163, 237, 0.25) !important;
    font-weight: 700;
}

.bootstrap-table .fixed-table-pagination .pagination .page-link {
    border-radius: 10px !important;
    margin: 0 3px !important;
    padding: 6px 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: var(--text-secondary) !important;
    background: var(--light) !important;
    font-size: 0.8rem !important;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    min-width: 36px;
    text-align: center;
}

.dark .bootstrap-table .fixed-table-pagination .pagination .page-link {
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--light-text) !important;
    background: rgba(12, 12, 30, 0.8) !important;
}

.bootstrap-table .fixed-table-pagination .pagination .page-link:hover {
    background: var(--tonebg) !important;
    color: #FFF !important;
    border-color: var(--tonebg) !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(2, 163, 237, 0.2);
}

.bootstrap-table .fixed-table-pagination .pagination .page-item.disabled .page-link {
    opacity: 0.4;
    pointer-events: none;
}

/* Pagination Info Text */
.bootstrap-table .fixed-table-pagination>.pagination-detail .pagination-info {
    line-height: 36px;
    margin-right: 8px;
    margin-left: 16px;
    font-size: 0.8rem;
    color: var(--text-muted) !important;
    font-weight: 500;
}

.dark .bootstrap-table .fixed-table-pagination>.pagination-detail .pagination-info {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Page Size Dropdown */
.bootstrap-table .fixed-table-pagination .page-list .btn-secondary {
    background-color: var(--tonebg) !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 0.8rem !important;
    font-weight: 600;
    padding: 5px 14px !important;
}

.bootstrap-table .fixed-table-pagination .page-list .dropdown-menu {
    border-radius: 14px !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    padding: 6px !important;
    overflow: hidden;
}

.dark .bootstrap-table .fixed-table-pagination .page-list .dropdown-menu {
    background: var(--bg-light) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.bootstrap-table .fixed-table-pagination .page-list .dropdown-item {
    border-radius: 8px !important;
    font-size: 0.82rem !important;
    padding: 6px 14px !important;
    transition: all 0.2s ease;
}

.bootstrap-table .fixed-table-pagination .page-list .dropdown-item:hover {
    background: rgba(2, 163, 237, 0.08) !important;
    color: var(--tonebg) !important;
}

/* --- Search Input --- */
.bootstrap-table .fixed-table-toolbar .search input {
    border-radius: 30px !important;
    border: 1.5px solid rgba(0, 0, 0, 0.07) !important;
    padding: 9px 18px !important;
    font-size: 0.84rem !important;
    background: rgba(255, 255, 255, 0.6) !important;
    color: var(--text-primary) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
}

.bootstrap-table .fixed-table-toolbar .search input::placeholder {
    color: var(--text-muted, #94a3b8) !important;
    font-weight: 500;
}

.bootstrap-table .fixed-table-toolbar .search input:focus {
    border-color: var(--tonebg) !important;
    box-shadow: 0 0 0 4px rgba(2, 163, 237, 0.12) !important;
    background: #FFF !important;
    outline: none;
}

.dark .bootstrap-table .fixed-table-toolbar .search input {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: rgba(6, 7, 20, 0.4) !important;
    color: var(--light-text) !important;
}

.dark .bootstrap-table .fixed-table-toolbar .search input::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

.dark .bootstrap-table .fixed-table-toolbar .search input:focus {
    background: rgba(6, 7, 20, 0.7) !important;
    box-shadow: 0 0 0 4px rgba(2, 163, 237, 0.15) !important;
}

/* --- Toolbar --- */
.bootstrap-table .fixed-table-toolbar {
    padding: 12px 16px !important;
}

/* --- Sort Caret Icons --- */
.bootstrap-table .fixed-table-container .table thead th .sortable {
    cursor: pointer;
    position: relative;
}

.bootstrap-table .fixed-table-container .table thead th .sort-icon {
    font-size: 0.65rem !important;
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.bootstrap-table .fixed-table-container .table thead th:hover .sort-icon {
    opacity: 0.8;
}

/* --- No Records Found --- */
.bootstrap-table .no-records-found td {
    padding: 40px 16px !important;
    font-size: 0.9rem !important;
    color: var(--text-muted) !important;
    font-weight: 500;
}

/* --- Loading Text --- */
.bootstrap-table .fixed-table-loading {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px);
}

.dark .bootstrap-table .fixed-table-loading {
    background: rgba(12, 12, 30, 0.85) !important;
}

/* =============================================
   CUSTOM PREMIUM MODAL STYLES (Swal Replacement)
   ============================================= */
.custom-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-modal-backdrop.show {
    opacity: 1;
}

.custom-modal-card {
    background: #ffffff;
    border-radius: 28px;
    padding: 32px 24px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

.custom-modal-backdrop.show .custom-modal-card {
    transform: scale(1);
    opacity: 1;
}

/* Dark mode overrides */
.dark .custom-modal-card {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Modal Icons and Vibrancy */
.custom-modal-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 8px;
    position: relative;
}

/* Icon variant colors */
.custom-modal-icon.success {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 2.5px solid rgba(16, 185, 129, 0.25);
    animation: icon-scale-up 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.custom-modal-icon.error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 2.5px solid rgba(239, 68, 68, 0.25);
    animation: icon-shake 0.55s ease forwards;
}

.custom-modal-icon.warning {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 2.5px solid rgba(245, 158, 11, 0.25);
    animation: icon-pulse 1.5s infinite;
}

.custom-modal-icon.info {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 2.5px solid rgba(59, 130, 246, 0.25);
    animation: icon-pulse 1.5s infinite;
}

/* Icon Animations */
@keyframes icon-scale-up {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

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

@keyframes icon-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-6px);
    }

    40%,
    80% {
        transform: translateX(6px);
    }
}

@keyframes icon-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.25);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
}

/* Typography styles */
.custom-modal-title {
    font-family: 'Prompt', 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #1e293b;
    margin: 0;
    line-height: 1.35;
}

.dark .custom-modal-title {
    color: #f8fafc;
}

.custom-modal-text {
    font-family: 'Prompt', sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
    word-break: break-word;
}

.dark .custom-modal-text {
    color: #94a3b8;
}

/* Actions and Buttons */
.custom-modal-actions {
    display: flex;
    gap: 12px;
    width: 100%;
    margin-top: 16px;
    justify-content: center;
}

.custom-modal-btn {
    font-family: 'Prompt', sans-serif;
    font-weight: 600;
    font-size: 15px;
    padding: 12px 24px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex: 1;
    max-width: 160px;
    outline: none;
}

.custom-modal-btn.confirm {
    background: var(--tonebg, #02a3ed);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(2, 163, 237, 0.2);
}

.custom-modal-btn.confirm:hover {
    background: var(--tone-hover, #028ac8);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(2, 163, 237, 0.3);
}

.custom-modal-btn.confirm:active {
    transform: translateY(0);
}

.custom-modal-btn.cancel {
    background: #f1f5f9;
    color: #475569;
}

.custom-modal-btn.cancel:hover {
    background: #e2e8f0;
    color: #334155;
    transform: translateY(-2px);
}

.custom-modal-btn.cancel:active {
    transform: translateY(0);
}

/* Dark mode buttons */
.dark .custom-modal-btn.cancel {
    background: #1e293b;
    color: #cbd5e1;
}

.dark .custom-modal-btn.cancel:hover {
    background: #334155;
    color: #f8fafc;
}

/* Auto-dismiss progress bar */
.custom-modal-progress-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.05);
}

.dark .custom-modal-progress-container {
    background: rgba(255, 255, 255, 0.05);
}

.custom-modal-progress-bar {
    height: 100%;
    width: 100%;
    background: var(--tonebg, #02a3ed);
    transform-origin: left;
    transition: transform linear;
}

.custom-modal-progress-bar.success {
    background: #10b981;
}

.custom-modal-progress-bar.error {
    background: #ef4444;
}

.custom-modal-progress-bar.warning {
    background: #f59e0b;
}

.custom-modal-progress-bar.info {
    background: #3b82f6;
}

/* Modal Custom Input Styling */
.custom-modal-input {
    font-family: 'Prompt', sans-serif;
    width: 100%;
    max-width: 320px;
    padding: 12px 20px;
    border-radius: 14px;
    border: 1.5px solid rgba(15, 23, 42, 0.15);
    background: #f8fafc;
    color: #1e293b;
    font-size: 15px;
    outline: none;
    transition: all 0.2s ease;
    margin-top: 8px;
    text-align: center;
}

.custom-modal-input:focus {
    border-color: var(--tonebg, #02a3ed);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(2, 163, 237, 0.15);
}

.dark .custom-modal-input {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
}

.dark .custom-modal-input:focus {
    background: #0f172a;
    border-color: var(--tonebg, #02a3ed);
    box-shadow: 0 0 0 4px rgba(2, 163, 237, 0.25);
}

.custom-modal-btn.deny {
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.custom-modal-btn.deny:hover {
    background: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.3);
}

.custom-modal-btn.deny:active {
    transform: translateY(0);
}

/* =============================================
   Unified Table Polish
   ============================================= */
:root {
    --table-surface: #ffffff;
    --table-surface-soft: #f8fafc;
    --table-head-bg: #f1f5f9;
    --table-border: rgba(15, 23, 42, 0.08);
    --table-border-strong: rgba(15, 23, 42, 0.12);
    --table-row-hover: rgba(2, 163, 237, 0.065);
    --table-row-selected: rgba(2, 163, 237, 0.11);
    --table-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
    --table-radius: 16px;
}

body.dark {
    --table-surface: #0c0c1e;
    --table-surface-soft: #111327;
    --table-head-bg: rgba(255, 255, 255, 0.055);
    --table-border: rgba(255, 255, 255, 0.08);
    --table-border-strong: rgba(255, 255, 255, 0.12);
    --table-row-hover: rgba(125, 211, 252, 0.09);
    --table-row-selected: rgba(125, 211, 252, 0.14);
    --table-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.table-responsive,
.bootstrap-table .fixed-table-container {
    border-radius: var(--table-radius) !important;
    border: 1px solid var(--table-border) !important;
    background: var(--table-surface) !important;
    box-shadow: var(--table-shadow) !important;
}

.table-responsive {
    padding: 0 !important;
    min-height: auto !important;
    overflow: auto !important;
}

.bootstrap-table {
    width: 100%;
}

.bootstrap-table .fixed-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 0 0 12px !important;
}

.bootstrap-table .fixed-table-toolbar .columns,
.bootstrap-table .fixed-table-toolbar .search,
.bootstrap-table .fixed-table-toolbar .bs-bars {
    margin: 0 !important;
}

.bootstrap-table .fixed-table-toolbar .search {
    margin-left: auto !important;
}

.bootstrap-table .fixed-table-toolbar .search input,
.bootstrap-table .fixed-table-toolbar .form-control {
    min-height: 40px;
    border-radius: 12px !important;
    border: 1px solid var(--table-border-strong) !important;
    background: var(--table-surface) !important;
    color: var(--text-primary, #0f172a) !important;
    box-shadow: none !important;
}

.bootstrap-table .fixed-table-toolbar .search input:focus,
.bootstrap-table .fixed-table-toolbar .form-control:focus {
    border-color: var(--tonebg) !important;
    box-shadow: 0 0 0 4px rgba(2, 163, 237, 0.12) !important;
}

.bootstrap-table .fixed-table-container {
    margin-bottom: 0 !important;
    overflow: hidden !important;
}

.bootstrap-table .fixed-table-body {
    background: var(--table-surface) !important;
}

.bootstrap-table .fixed-table-container .table,
.table.table-custom,
.table:not(.items-table) {
    margin-bottom: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    color: var(--text-primary, #0f172a);
}

.bootstrap-table .fixed-table-container .table thead th,
.table.table-custom thead th,
.table:not(.items-table) thead th {
    height: 48px;
    padding: 13px 14px !important;
    background: var(--table-head-bg) !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--table-border-strong) !important;
    color: var(--text-secondary, #334155) !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap;
    vertical-align: middle !important;
}

.bootstrap-table .fixed-table-container .table thead th:first-child,
.table.table-custom thead th:first-child,
.table:not(.items-table) thead th:first-child {
    padding-left: 18px !important;
}

.bootstrap-table .fixed-table-container .table thead th:last-child,
.table.table-custom thead th:last-child,
.table:not(.items-table) thead th:last-child {
    padding-right: 18px !important;
}

.bootstrap-table .fixed-table-container .table thead th .th-inner {
    padding: 0 !important;
    line-height: 1.35 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bootstrap-table .fixed-table-container .table tbody td,
.table.table-custom tbody td,
.table:not(.items-table) tbody td {
    padding: 13px 14px !important;
    background: var(--table-surface) !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--table-border) !important;
    color: var(--text-primary, #0f172a) !important;
    font-size: 0.84rem !important;
    line-height: 1.45;
    vertical-align: middle !important;
}

.bootstrap-table .fixed-table-container .table tbody tr,
.table.table-custom tbody tr,
.table:not(.items-table) tbody tr {
    background: var(--table-surface) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.bootstrap-table .fixed-table-container .table tbody tr:hover,
.table.table-custom tbody tr:hover,
.table:not(.items-table) tbody tr:hover {
    background: var(--table-row-hover) !important;
    transform: none !important;
    box-shadow: inset 3px 0 0 var(--tonebg) !important;
}

.bootstrap-table .fixed-table-container .table tbody tr:hover td,
.table.table-custom tbody tr:hover td,
.table:not(.items-table) tbody tr:hover td {
    background: transparent !important;
}

.bootstrap-table .fixed-table-container .table tbody tr.selected td,
.bootstrap-table .fixed-table-container .table tbody tr.table-active td,
.table.table-custom tbody tr.selected td,
.table.table-custom tbody tr.table-active td,
.table:not(.items-table) tbody tr.selected td,
.table:not(.items-table) tbody tr.table-active td {
    background: var(--table-row-selected) !important;
}

.bootstrap-table .fixed-table-container .table tbody tr:last-child td,
.table.table-custom tbody tr:last-child td,
.table:not(.items-table) tbody tr:last-child td {
    border-bottom: 0 !important;
}

.bootstrap-table .fixed-table-container .table th:first-child,
.bootstrap-table .fixed-table-container .table td:first-child,
.table.table-custom th:first-child,
.table.table-custom td:first-child,
.table:not(.items-table) th:first-child,
.table:not(.items-table) td:first-child {
    padding-left: 18px !important;
}

.bootstrap-table .fixed-table-container .table th:last-child,
.bootstrap-table .fixed-table-container .table td:last-child,
.table.table-custom th:last-child,
.table.table-custom td:last-child,
.table:not(.items-table) th:last-child,
.table:not(.items-table) td:last-child {
    padding-right: 18px !important;
}

.bootstrap-table .fixed-table-container .table tbody td .btn,
.table.table-custom tbody td .btn,
.table:not(.items-table) tbody td .btn {
    min-height: 32px;
    border-radius: 10px !important;
    padding: 5px 10px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
}

.bootstrap-table .fixed-table-container .table .badge,
.table.table-custom .badge,
.table:not(.items-table) .badge {
    min-height: 24px;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.bootstrap-table .fixed-table-container .table .badge::before,
.table.table-custom .badge::before,
.table:not(.items-table) .badge::before {
    display: none !important;
}

.bootstrap-table .fixed-table-container .table .user-info,
.table.table-custom .user-info {
    min-width: 180px;
}

.bootstrap-table .fixed-table-container .table .user-info img,
.table.table-custom .user-info img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid var(--table-border-strong) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.bootstrap-table .fixed-table-container .table td,
.table.table-custom td {
    max-width: 360px;
}

.bootstrap-table .fixed-table-container .table td.text-start,
.table.table-custom td.text-start,
.table:not(.items-table) td.text-start {
    white-space: normal;
}

.bootstrap-table .fixed-table-container .table td:not(.text-start),
.table.table-custom td:not(.text-start),
.table:not(.items-table) td:not(.text-start) {
    white-space: nowrap;
}

.bootstrap-table .fixed-table-container .table td .text-truncate,
.table.table-custom td .text-truncate,
.table:not(.items-table) td .text-truncate {
    max-width: 260px;
}

.bootstrap-table .fixed-table-pagination {
    position: static !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 12px 4px 0 !important;
    border-top: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
}

.bootstrap-table .fixed-table-pagination .pagination-detail,
.bootstrap-table .fixed-table-pagination .pagination {
    margin: 0 !important;
}

.bootstrap-table .fixed-table-pagination>.pagination-detail .pagination-info {
    margin: 0 8px 0 0 !important;
    line-height: 34px !important;
    color: var(--text-muted, #64748b) !important;
}

.bootstrap-table .fixed-table-pagination .page-list .btn-secondary,
.page-list .btn-secondary {
    min-height: 34px;
    border-radius: 10px !important;
    background: var(--table-surface) !important;
    border: 1px solid var(--table-border-strong) !important;
    color: var(--text-secondary, #334155) !important;
    box-shadow: none !important;
}

.bootstrap-table .fixed-table-pagination .pagination .page-link,
.page-link {
    min-width: 34px;
    min-height: 34px;
    border-radius: 10px !important;
    border: 1px solid var(--table-border-strong) !important;
    background: var(--table-surface) !important;
    color: var(--text-secondary, #334155) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: none !important;
}

.bootstrap-table .fixed-table-pagination .pagination .page-link:hover,
.page-link:hover,
.bootstrap-table .fixed-table-pagination .pagination .page-item.active .page-link,
.active>.page-link,
.page-link.active {
    background: var(--tonebg) !important;
    border-color: var(--tonebg) !important;
    color: #ffffff !important;
}

.bootstrap-table .fixed-table-pagination .page-list .dropdown-menu {
    border-radius: 12px !important;
    border: 1px solid var(--table-border) !important;
    background: var(--table-surface) !important;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14) !important;
}

.bootstrap-table .fixed-table-pagination .page-list .dropdown-item {
    border-radius: 8px;
    color: var(--text-secondary, #334155);
}

.bootstrap-table .no-records-found td,
.bootstrap-table .fixed-table-loading {
    color: var(--text-muted, #64748b) !important;
    background: var(--table-surface) !important;
}

.bootstrap-table .no-records-found td {
    padding: 44px 18px !important;
    font-weight: 600;
}

.fixed-columns,
.fixed-columns-right {
    background: var(--table-surface) !important;
    box-shadow: 8px 0 18px rgba(15, 23, 42, 0.06);
}

.fixed-columns-right {
    box-shadow: -8px 0 18px rgba(15, 23, 42, 0.06);
}

.table-bordered-in th,
.table-bordered-in td,
.table-bordered> :not(caption)>*>* {
    border-color: var(--table-border) !important;
}

.bg-gray-table {
    background: var(--table-head-bg) !important;
    color: var(--text-secondary, #334155) !important;
}

.bootstrap-table .bs-checkbox label input[type="checkbox"] {
    width: 19px !important;
    height: 19px !important;
    border-radius: 6px !important;
    border: 1.5px solid var(--table-border-strong) !important;
    background: var(--table-surface) !important;
}

.bootstrap-table .bs-checkbox label input[type="checkbox"]:checked {
    background: var(--tonebg) !important;
    border-color: var(--tonebg) !important;
}

.bootstrap-table .bs-checkbox label input[type="checkbox"]:checked::after {
    font-size: 13px !important;
    left: 4px !important;
    top: -1px !important;
}

@media (max-width: 768px) {
    .bootstrap-table .fixed-table-toolbar {
        align-items: stretch;
    }

    .bootstrap-table .fixed-table-toolbar .search {
        width: 100%;
        margin-left: 0 !important;
    }

    .bootstrap-table .fixed-table-toolbar .search input {
        width: 100% !important;
    }

    .bootstrap-table .fixed-table-container .table thead th,
    .table.table-custom thead th,
    .table:not(.items-table) thead th {
        padding: 12px 12px !important;
    }

    .bootstrap-table .fixed-table-container .table tbody td,
    .table.table-custom tbody td,
    .table:not(.items-table) tbody td {
        padding: 12px !important;
    }

    .bootstrap-table .fixed-table-pagination {
        justify-content: center;
        text-align: center;
    }
}

/* Customizable Shortcuts Modal Styling */
.preset-dot {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.preset-dot:hover {
    transform: scale(1.15);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}

.shortcut-config-card {
    transition: all 0.25s ease;
}

.shortcut-config-card:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    transform: translateY(-2px);
}

.form-control-color {
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 50% !important;
    overflow: hidden;
}

.form-control-color::-webkit-color-swatch-wrapper {
    padding: 0;
}

.form-control-color::-webkit-color-swatch {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
}