.btn-toggle-eye {
    cursor: pointer;
}

/*toggle*/
.toggle-dark .btn.active {
    display: none;
}

.toggle-dark .btn span:nth-of-type(1) {
    display: none;
}

.toggle-dark .btn span:last-child {
    display: block;
}

.toggle-dark .btn.active span:nth-of-type(1) {
    display: block;
}

.toggle-dark .btn.active span:last-child {
    display: none;
}

.toggle-dark .btn-check:focus-visible + .btn {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/*end toggle*/

/*btn*/
.btn-circle {
    border-radius: 100%;
    height: 2.5rem;
    width: 2.5rem;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-line, .btn-microsoft, .btn-facebook, .btn-google, .btn-thaid {
    color: #5e5e5e;
    background-color: #ffffff;
}
[data-theme="dark"] .btn-line,[data-theme="dark"] .btn-microsoft,[data-theme="dark"] .btn-facebook,[data-theme="dark"] .btn-google,[data-theme="dark"] .btn-thaid {
    background-color: #262a2e !important;
    color: #eee;
}

.btn-line {
    border-color: #06C755;
}
.btn-line:hover {
    color: #ffffff;
    background-color: #06c755b3 !important;
    border-color: #06C755;
}
.bi-line::before {
    display: inline-block;
    vertical-align: -.3em;
    content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAADJ0lEQVQ4y4VUXWxMQRQeZbf1JOGBEJGIB548exCR8KBLq3qvJjahSKkg4okgSCVII5o0kUXwIGn6hCjSNFoa2703+qPSqv436HZV/7tl2/25c5wzM/e62yiTnMzcud/55ptzzhzmNXWGttxjaAGcw2izaDGPocdoXsic/4bej3OJ19A8xCXJTL0DNwDXwjxqnWnuhyyzAJYqy8LvTNd/YYZur6vRMogwoDZImYVgjkQcnTkL7eUs6EuzRaE8juSI0TlhyQdtziM5zjB1TbDJFBGwht2wvqUYcjtvwMn++1Dcfxd2fS6B1U1HgAWzIcPYR4q5UpsSNzO1EFPKwCFr2AMbWk5Axcg7iKZiMH+MJKahPPISVjQeBBbKtUm5EjXEZIA1sMm2tl+AsUTUIYhbSWFJnoIEzvbojIXFwUhKQiylVBJSoCk2q5oOQyQ+IRwsbsH/hhnttpNoOQrxI0YZxLjwi18rBLBmshWG4uMwk5qF6okWeDJmwnTyF9RPfYLn441wM/wUmmf6BDa/qxR9fRZVAJaSVCgJffzFeJMAFfaWC4fv8Uko6L4lrnYI9473BTAx12BT62moUtjS8DMSYxHHPMJsXoWn0yjquwOVo0Fo/TkAGio40HMbdnZchY0fTon1tvZL8Haq/e+E7iuf+/JYgB79qMNyuQ5lQ1XwYPg13BuugYHZYbj8rVJk2N9TBnVTbQKbgzgssfQri6QYeXxlYyGE42MCyDlfMBmUcRqkcrGR7yTFIXSXzZa286LW3M4pzDgdQHNclU5vLAJrm4uAHkGmKhuH0FXYQKTrmo/htWth1EWcQGJLqQ5Fu2BN01EkywF5VXfZKEKvfJsCIJ5e0CeId3RcgTcqATTKI69E0yCMTITznv8Utk1ok5IDgSk+rH47PES1YaxLyjQdtAT3lTLbzyYcZKKfyRZkuYll+5ItbPPHs7DsvV+Q0UF2iGyc19SSyreWieYoP+aoa9hXoLio2FgYKwvVUq2l7Qsz9CQmQxIamp8IPao5pjdOV7MllQv9d+ECSMgoKWhaBjVHtBAFloxK4J8mcYN0TVTpR0J8JDr7DVN58nRxP8AQAAAAAElFTkSuQmCC');
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
}

.btn-microsoft {
    border-color: #0dcaf0;
}
.btn-microsoft:hover {
    color: #ffffff;
    background-color: #0dcaf0cc !important;
    border-color: #0dcaf0;
}
.bi-microsoft::before {
    display: inline-block;
    vertical-align: -.3em;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='24' viewBox='0 0 21 21'%3E%3Ctitle%3EMS-SymbolLockup%3C/title%3E%3Crect x='1' y='1' width='9' height='9' fill='%23f25022'/%3E%3Crect x='1' y='11' width='9' height='9' fill='%2300a4ef'/%3E%3Crect x='11' y='1' width='9' height='9' fill='%237fba00'/%3E%3Crect x='11' y='11' width='9' height='9' fill='%23ffb900'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
}

.btn-facebook {
    border-color: #1877f2;
}
.btn-facebook:hover {
    color: #ffffff;
    background-color: #1876f2c5 !important;
    border-color: #1877f2;
}
.bi-facebook::before {
    display: inline-block;
    content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFxEAABcRAcom8z8AAAJ7SURBVDhPlZNLSJRRFMfPueO80LEMkkklWvaQUoiIWhdBUBYVuGvRskUrewhBRWDqrl2gRUHLyk0QBkGzyCAwIxRJTKYpmbDJRh2b+b57T+fcuTozjYb9YOab+7/3O3Me949QDhG2dOeaPC/fjirYQWAOA0ETAWpUMI0GRgzgUETpd8mezT/dW5aKQI2Xl04i6W6O2IaIQSdXQEQ5QEwoA7dn++oTTi4Findlz/CxQT5Ux8vKTKsgTpayBgNnv/fGhkVBKafxSu6EIv8RB4nZc2XUhRH2NSvYGVegFMLMDwOvP/mQ93mTYIrL7kj3xsax5dpSs+frp4iwn7cqMqmPIPSeCsPR3UGIukIn0wY6B3Mw+4tsndyz+yGv7qKSxrLSxmeqyjmyK8CfmtUg2d8EmSWuyhTXXAG/YzqXaxe2K5nOeo3dsy0A4RqpHqBvOA+ttxbh9L0cpBdYcHCAaLCgzis74nUI1xSfBQ3w4asBj59rwTGOKbknbr2K1Gg/Kz8ETqJ8+Rc7sLErm+FhNDjB8upSrZ3SWrz9rOHcQA4KMjUH93yOS4Rpt94QqXlTEaSImgjEDl3dy/kecIpF0h9LGTuteL0CzWU9G/Pg+UcNLyZ8SGZKzRY4mQG+6Thkr30ZD0Y86H+Zh9GUBpm05q8no77VElOVHZeytG8eKzGgeEckt/cfkOarc3drbeqLEheLAcU7bnfDkKFJAv1w/EZrwY5GXCwGFO9IrvbUPyFNxowHCC+k7zTMiLI6Y3GxGFC8Y8gsO7kK6Qm39yYoOv6tf9MbJ5cCCeJiMaAOYTsQ9kSD9J7/eZ6tORcJmQSP87oxdHBLJNmzkkkRgD/JMBzIDnmpJAAAAABJRU5ErkJggg==");
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
}

.btn-google {
    border-color: #dc3545;
}
.btn-google:hover {
    color: #ffffff;
    background-color: #dc3546c4 !important;
    border-color: #dc3545;
    
}
.bi-google::before {
    display: inline-block;
    vertical-align: -.2em;
    content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAAKWSURBVDhPlZRdSFNhGMef95zt+L1NCssldDOUhniGTRJcFl3ZB0REXRkEBRlF3nQRkk7BKKigq+40sKsSCkJtF4Vk0yBI3FKCGF6EWX6UpZtubnufnvPudWzNQf3gcM7zP8/73/999nIY5GHa6dRsOzS3wrmDmswJhX1Xkb23+6eWZEsWOUYrh3TbRgI7GLCL9LZcyikQkwjgI8ObuyYCU1IVZBnNN7sagPPnZLJHSnnAODm2VY0H+6UAirzDQpNLZ5y/yjFBiCLgqqwElGqJIvhlKRBGvMVRwBk+oYAWoRK0eFRBPPjWXl1q9wetHE17Sb6HCHOc45Eqf/BzqjODSF/JlcXTNfjNo4tr3qP30a+m02bypbGxSD5mIWYUHVY/QFKtX39ZCdGgNRQuW6+t9oViouMfYcsjYCkF0wo5igSbsyXXy67+vi/eSjzetWuUsEKWORSHw7dZdERzMuAzUjMiHtaOJd7IUtDUtTbDGDhlmYMKuG/bOfwvmGRmJQybcxSbSw0m4jvd8jED7kdE39ZFQiClp0DOltPDjoGp/k7ECUOxytDGT14bavflHbbHu/qAhtCeqnDB32PZLbY2nbT1X1g9AMMxO82IOYrKlYfg9W67bU9nZD+dpUuypPPGXhh3kcgx0lJQvKwGqKoxagNqHmUq66oxF70bPDuYrBs4VQEs3lq4cLlbW2suS/VgQuVQN9Zr+SSMDFwDx3Ua1BiZpU+3ACGGDKLUaJUKaL+OQuGPVjJSOsd7LL2GljYycD0+0cARn5FaJaV8oCmi351su3WDLOi/+svIQH900oZqooN66TPCsj8jYsc4Tme3++O5oddSE+QYbeF8ekZj0YhbpeHTejMtXmQcJwPnh7/KlgwA/gCet/k+dLSsxwAAAABJRU5ErkJggg==');
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
}

.btn-thaid {
    border-color: #01034e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
}
.btn-thaid:hover {
    color: #ffffff;
    background-color: #030650 !important;
    border-color: #01034e;
}
.thaid-login-logo {
    width: 2.25rem;
    height: 2.25rem;
    object-fit: cover;
    border-radius: 0.3rem;
    flex: none;
}
.bi-thaid::before {
    display: inline-block;
    width: 2.25rem;
    height: 2.25rem;
    vertical-align: -0.55em;
    content: "";
    background: url("../../../../resources/img/thaid-logo.png") center / cover no-repeat;
    border-radius: 0.3rem;
}
/*end btn*/

body {
    background: #f7f7f7;
}

[data-theme="dark"] {
    background-color: #262a2e !important;
    color: #eee;
}

.wrap-login {
    width: 370px;
    max-width: calc(100vw - 1rem);
    background: #e8e8e8;
}

#mfa-action-row .btn {
    min-height: 2.75rem;
    white-space: normal;
    line-height: 1.25;
}

#mfa-action-row .col-6 {
    display: flex;
}

.mfa-login-heading {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
}

#mfa-action-row .login-cta-sub {
    font-size: 0.8125rem;
    font-weight: 400;
    opacity: 0.9;
}

.mfa-login-hint {
    font-size: 0.875rem;
    line-height: 1.35;
    color: #6c757d;
}

[data-theme="dark"] .mfa-login-hint {
    color: #adb5bd;
}

.multi-login-header {
    position: relative;
    padding-top: .5rem;
}

.multi-login-header .multi-login-control-slot {
    position: absolute;
    top: .5rem;
}

.multi-login-header .multi-login-control-slot:first-child {
    left: .5rem;
}

.multi-login-header .multi-login-control-slot-end {
    right: .5rem;
}

[data-theme="dark"] .wrap-login {
    background: #222;
    box-shadow: 0 1rem 3rem rgb(8 8 8) !important
}

[data-theme="dark"] .or-seperator i, [data-theme="dark"] .or-seperator i, [data-theme="dark"] .or-seperator .badge.bg-light, [data-theme="dark"] .nav-tabs .nav-item.show .nav-link, [data-theme="dark"] .nav-tabs .nav-link.active, [data-theme="dark"] .tab-content.bg-light {
    background-color: #30353a !important;
}

[data-theme="dark"] .or-seperator i, [data-theme="dark"] .or-seperator .badge.bg-light {
    color: #FFFFFF !important;
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    color: #FFFFFF ;
    border-color: #30353a;
    background-color: #30353a;
}
[data-theme="dark"] .nav-tabs .nav-link:focus,[data-theme="dark"] .nav-tabs .nav-link:hover {
    color: #495057;
    background-color: #fff;
    border-color: #30353a;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #495057 !important;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
}
[data-theme="dark"] .nav-tabs .nav-item.show .nav-link, [data-theme="dark"] .nav-tabs .nav-link.active {
    color: #FFFFFF !important;
    border-color: #30353a;
}

[data-theme="dark"] .nav-tabs {
    border-bottom: 1px solid #30353a;
}

[data-theme="dark"] a {
    color: #75a9ff;
}

[data-theme="dark"] .card-img-top {
    filter: brightness(0) invert(1);
}

[data-theme="dark"] .modal-content{
    background-color: #1F2937;
}
[data-theme="dark"] .modal-content .modal-header{
    background-color: #374151;
}

[data-theme="dark"] .form-control, [data-theme="dark"] .custom-file-label {
    color: #dee2e6;
    background-color: #000;
    background-clip: padding-box;
    border: 1px solid #6c757d;
}

[data-theme="dark"] .card {
    background-color: #212529;
    background-clip: border-box;
    border: 1px solid rgba(255,255,255,.125);
}
[data-theme="dark"] .card-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: #30353a;
    border-bottom: 1px solid rgba(255,255,255,.125);
}
[data-theme="dark"] .card-footer {
    padding: 0.75rem 1.25rem;
    background-color: #30353a;
    border-top: 1px solid rgba(255,255,255,.125);
}

/* Keep the VA-aligned LDAP shell usable on narrow or short viewports. */
.ldap-login-wrap {
    max-width: calc(100vw - 1rem);
}

@media (max-width: 575.98px), (max-height: 640px) {
    .ldap-login-wrap {
        position: static !important;
        transform: none !important;
        margin: 1rem auto;
    }
}
#mfa-registration-status {
    white-space: pre-line;
}

/* Chromium/WebKit: silent autofill sets :-webkit-autofill without input/change.
   animationstart bridges to mfa-prelogin.js; Firefox ignores this pseudo — no-op. */
@keyframes mfa-autofill-on {
    from {
        opacity: 0.99;
    }
    to {
        opacity: 1;
    }
}

#username:-webkit-autofill {
    animation-name: mfa-autofill-on;
    animation-duration: 0.001s;
}