/* Minification failed. Returning unminified contents.
(38,47): run-time error CSS1046: Expect comma, found '104'
(38,55): run-time error CSS1046: Expect comma, found '/'
(96,19): run-time error CSS1039: Token not allowed after unary operator: '-login-loading-angle'
(157,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
 */
html,
body.login-page {
    min-height: 100%;
}

body.login-page {
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: hidden;
    background: #00a3f5;
    color: #24343d;
}

.login-page .login-background,
.login-page .login-backdrop {
    position: fixed;
    inset: 0;
}

.login-page .login-background {
    z-index: 0;
    overflow: hidden;
    background-color: #00a3f5;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.login-page .login-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
}

.login-page .login-backdrop {
    z-index: 1;
    background: linear-gradient(135deg, rgb(0 104 157 / 26%), rgba(0, 163, 245, .36));
}

.login-page .login-shell {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 24px 0;
}

.login-page .login-container {
    width: 100%;
}

.login-page .login-column {
    float: none;
    width: 100%;
    max-width: 440px;
    margin-right: auto;
    margin-left: auto;
}

.login-page .login-card {
    margin-top: 0;
    margin-bottom: 0;
    overflow: visible;
    border: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 20px 55px rgba(2, 21, 28, .35);
}

.login-page .login-card-content {
    position: relative;
    border-radius: 16px;
}

/* Reemplaza el overlay global del sitio por un progreso contenido en la tarjeta. */
.login-page .loading_progress {
    display: none !important;
}

@property --login-loading-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.login-page .login-card-content::after {
    position: absolute;
    z-index: 5;
    inset: -3px;
    padding: 3px;
    border-radius: 19px;
    background: conic-gradient(
        from var(--login-loading-angle, 0deg),
        rgba(0, 163, 245, 0) 0deg 255deg,
        rgba(0, 163, 245, .2) 276deg,
        #0087cc 310deg,
        #00a3f5 333deg,
        rgba(0, 163, 245, .45) 351deg,
        rgba(0, 163, 245, 0) 360deg
    );
    content: "";
    opacity: 0;
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

body.login-page.loading .login-card-content {
    pointer-events: none;
    user-select: none;
}

body.login-page.loading .login-card-content,
body.login-page.loading .login-card-content * {
    cursor: wait !important;
}

.login-page .login-card-content.login-controls-loading .login-mode-content {
    opacity: .48;
    filter: grayscale(.35);
    transition: opacity 120ms ease, filter 120ms ease;
}

.login-page .login-card-content.login-controls-loading input,
.login-page .login-card-content.login-controls-loading select {
    border-color: #b8c7ce !important;
    background: #e3eaed !important;
    color: #6c7a80 !important;
    box-shadow: none !important;
}

.login-page .login-card-content.login-controls-loading .input-group-addon,
.login-page .login-card-content.login-controls-loading .login-password-toggle,
.login-page .login-card-content.login-controls-loading .login-submit {
    border-color: #aebec5 !important;
    background: #b9c7cd !important;
    color: #5f7077 !important;
    box-shadow: none !important;
}

.login-page .login-card-content.login-controls-loading .login-submit {
    opacity: 1;
    text-shadow: none;
}

body.login-page.loading .login-card-content::after {
    opacity: 1;
    animation: login-loading-border 1400ms linear infinite;
}

@keyframes login-loading-border {
    to {
        --login-loading-angle: 360deg;
    }
}

.login-page .login-card-test {
    background: rgba(242, 250, 255, .97);
}

.login-page .login-card-test .login-card-content {
    border-radius: 0 0 16px 16px;
}

.login-page .login-card-test .login-card-content::after {
    border-radius: 0 0 19px 19px;
}

.login-page .login-card-heading {
    padding: 27px 30px 18px;
    border: 0;
    background: transparent;
    color: #20343d;
}

.login-page .login-brand {
    width: min(172px, 55vw);
    margin: 0 auto;
}

.login-page .login-brand img {
    display: block;
    width: 100%;
    height: auto;
}

.login-page .login-card-title {
    margin: 0;
    color: inherit;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.35;
}

.login-page .login-logo {
    display: block;
    width: auto !important;
    max-width: 100%;
    max-height: 74px;
    margin: 0 auto;
    object-fit: contain;
}

.login-page .login-environment {
    margin: 18px 0 0;
    padding: 11px 13px 11px 15px;
    border: 1px solid #c7e6f7;
    border-left: 3px solid #00a3f5;
    border-radius: 8px;
    background: #f3faff;
    color: #365562;
    font-size: 13px;
    line-height: 1.45;
}

.login-page .login-environment a {
    color: #007fc0;
    font-weight: 600;
    text-decoration: underline;
}

.login-page .login-environment-banner {
    margin: 0;
    padding: 12px 30px;
    border: 0;
    border-bottom: 1px solid #f0d879;
    border-radius: 16px 16px 0 0;
    background: #ffec8b;
}

.login-page .login-card .panel-body {
    padding: 0 30px 26px;
}

.login-page .login-form .form-group {
    margin-bottom: 14px;
}

.login-page .login-form {
    position: relative;
}

.login-page .login-form-description {
    margin: 8px 0 20px;
    color: #536971;
    font-size: 14px;
    line-height: 1.5;
}

.login-page .login-form-message {
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px solid #c7e6f7;
    border-left: 3px solid #00a3f5;
    border-radius: 6px;
    background: #f3faff;
    color: #365562;
    font-size: 13px;
    line-height: 1.45;
}

.login-page .recovery-password-policy {
    margin: -2px 0 16px;
    padding: 12px 14px;
    border: 1px solid #d7e8ee;
    border-radius: 8px;
    background: #f8fcfd;
    color: #536971;
    font-size: 12px;
}

.login-page .recovery-password-policy strong {
    color: #365562;
    font-size: 13px;
}

.login-page .recovery-password-policy ul {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.login-page .recovery-password-policy li {
    margin: 4px 0;
}

.login-page .recovery-password-policy li::before {
    display: inline-block;
    width: 16px;
    color: #8ca0a8;
    content: '\f10c';
    font-family: FontAwesome;
}

.login-page .recovery-password-policy li.valid {
    color: #287047;
}

.login-page .recovery-password-policy li.valid::before {
    color: #2e9b58;
    content: '\f00c';
}

.login-page .login-mode-pending .login-mode-content {
    visibility: hidden;
}

.login-page .login-form .input-group {
    width: 100%;
}

.login-page .login-form .form-control,
.login-page .login-form .input-group-addon {
    height: 48px;
    border-color: #d7e0e2;
    background: #fff;
    box-shadow: none;
}

.login-page .login-form .form-control {
    padding: 12px 14px;
    color: #20343d;
    font-size: 15px;
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.login-page .login-form .form-control:focus {
    z-index: 2;
    border-color: #00a3f5;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 163, 245, .16);
}

.login-page .login-form .form-control:-webkit-autofill,
.login-page .login-form .form-control:-webkit-autofill:hover,
.login-page .login-form .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: #20343d;
    caret-color: #20343d;
}

.login-page .login-form .input-group-addon {
    min-width: 48px;
    padding: 0 12px;
    color: #678087;
    transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

.login-page .login-form .input-group:focus-within .input-group-addon {
    border-color: #00a3f5;
    color: #007fc0;
}

.login-page .login-form .input-group:focus-within .login-password-toggle {
    border-color: #00a3f5;
    border-left: 1px solid #00a3f5;
}

.login-page .login-form .input-group-btn {
    width: 1%;
    vertical-align: middle;
}

.login-page .login-password-toggle {
    display: block;
    width: 48px;
    min-width: 48px;
    height: 48px;
    padding: 0;
    cursor: pointer;
    border: 1px solid #d7e0e2;
    border-left: 0;
    border-radius: 0 4px 4px 0;
    outline: 0;
}

.login-page .login-password-toggle:hover,
.login-page .login-password-toggle:focus {
    color: #007fc0;
    background: #edf8ff;
}

.login-page .login-password-toggle:focus {
    box-shadow: inset 0 0 0 2px rgba(0, 163, 245, .35);
}

.login-page .login-submit {
    display: block;
    min-height: 48px;
    padding: 13px 18px;
    border: 0;
    border-radius: 6px;
    background: #00a3f5;
    box-shadow: 0 7px 14px rgba(0, 111, 168, .24);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .1px;
    transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.login-page .login-submit:hover,
.login-page .login-submit:focus {
    background: #0087cc;
    box-shadow: 0 9px 18px rgba(0, 111, 168, .3);
    transform: translateY(-1px);
}

.login-page .login-submit:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(0, 163, 245, .3), 0 9px 18px rgba(0, 111, 168, .3);
}

.login-page .login-submit.disabled,
.login-page .login-submit.disabled:hover,
.login-page .login-submit.disabled:focus {
    background: #8ebfda;
    box-shadow: none;
    transform: none;
}

.login-page .login-recovery {
    margin-bottom: 0 !important;
    font-size: 14px;
}

.login-page .login-recovery a {
    color: #0087cc;
    transition: color 180ms ease;
}

.login-page .login-recovery a:hover,
.login-page .login-recovery a:focus {
    color: #006fa8;
}

.login-page .login-form .login-field {
    position: relative;
}

.login-page .login-form .has-error .form-control,
.login-page .login-form .has-error .input-group-addon,
.login-page .login-form .has-error .login-password-toggle {
    border-color: #e8a0a0;
    border-left: 1px solid #e8a0a0;
}

.login-page .login-form .has-error .input-group:focus-within .form-control,
.login-page .login-form .has-error .input-group:focus-within .input-group-addon,
.login-page .login-form .has-error .input-group:focus-within .login-password-toggle {
    border-color: #e8a0a0;
    border-left: 1px solid #e8a0a0;
}

.login-page .login-form .has-error .input-group:focus-within .form-control:focus {
    box-shadow: 0 0 0 3px rgba(232, 160, 160, .18);
}

.login-page .login-form .has-error .input-group:focus-within .login-password-toggle:focus {
    border-color: #e8a0a0;
    border-left: 1px solid #e8a0a0;
    box-shadow: none;
}

.login-page .login-form .help-block.with-errors {
    display: none;
    position: absolute;
    z-index: 10;
    bottom: calc(100% + 6px);
    right: 0;
    max-width: 260px;
    padding: 6px 12px;
    border-radius: 6px;
    background: #2d3748;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 180ms ease, transform 180ms ease;
    pointer-events: none;
}

.login-page .login-form .help-block.with-errors::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 18px;
    border: 5px solid transparent;
    border-top-color: #2d3748;
}

.login-page .login-form .has-error .help-block.with-errors {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.login-page .login-form .has-error .help-block.with-errors li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.login-page .login-error {
    width: 100%;
    max-width: none;
    margin: 0;
}

.login-page .login-error .col-md-6 {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

.login-page .login-error .alert {
    position: relative;
    margin-bottom: 0;
    padding: 13px 42px 13px 30px;
    border: 0;
    border-top: 1px solid #e8baba;
    border-radius: 0;
    background: #fce5e5;
    color: #9d3939;
    box-shadow: none;
    font-size: 13px;
    line-height: 1.45;
}

.login-page #login-error-slot .login-error:last-child .alert {
    border-radius: 0 0 16px 16px;
}

.login-page .login-error .alert .close {
    position: absolute;
    top: 50%;
    right: 13px;
    padding: 0;
    color: #a64a4a;
    line-height: 1;
    opacity: .55;
    text-shadow: none;
    transform: translateY(-50%);
}

.login-page .login-error .alert .close:hover,
.login-page .login-error .alert .close:focus {
    opacity: .9;
}

.login-page .login-form .bootstrap-select > .dropdown-toggle {
    height: 48px;
    border-color: #d7e0e2;
    background: #fff;
    color: #20343d;
}

.login-page .login-form .bootstrap-select.open > .dropdown-toggle,
.login-page .login-form .bootstrap-select > .dropdown-toggle:focus {
    border-color: #00a3f5;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(0, 163, 245, .16);
}

.login-page .login-form .bootstrap-select.open {
    z-index: 4;
}

.login-page .bootbox .modal-dialog {
    margin-top: 8vh;
}

.login-page .bootbox .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 84, 128, .3);
}

.login-page .bootbox .modal-header,
.login-page .bootbox .modal-header.modal-header-info,
.login-page .bootbox .modal-header.modal-header-warning,
.login-page .bootbox .modal-header.modal-header-danger {
    padding: 17px 20px;
    border: 0;
    background: #00a3f5;
    color: #fff;
}

.login-page .bootbox .modal-title {
    font-size: 16px;
    font-weight: 600;
}

.login-page .bootbox .modal-body {
    padding: 22px 20px 16px;
    color: #24343d;
    line-height: 1.5;
}

.login-page .bootbox .modal-body .form-group {
    margin-bottom: 14px;
}

.login-page .bootbox .modal-body .input-group-addon,
.login-page .bootbox .modal-body .form-control {
    height: 42px;
    border-color: #d7e0e2;
    background: #fff;
    box-shadow: none;
}

.login-page .bootbox .modal-body .input-group-addon {
    min-width: 42px;
    color: #007fc0;
}

.login-page .bootbox .modal-body .form-control:focus {
    border-color: #00a3f5;
    box-shadow: 0 0 0 3px rgba(0, 163, 245, .16);
}

.login-page .bootbox .modal-footer {
    padding: 0 20px 20px;
    border: 0;
}

.login-page .bootbox .modal-footer .btn {
    min-width: 92px;
    min-height: 38px;
    border-radius: 5px;
    font-weight: 600;
}

.login-page .bootbox .modal-footer .btn-primary,
.login-page .bootbox .modal-footer .btn-success {
    border-color: #00a3f5;
    background: #00a3f5;
    background-image: none;
}

.login-page .bootbox .modal-footer .btn-primary:hover,
.login-page .bootbox .modal-footer .btn-primary:focus,
.login-page .bootbox .modal-footer .btn-success:hover,
.login-page .bootbox .modal-footer .btn-success:focus {
    border-color: #0087cc;
    background: #0087cc;
    background-image: none;
}

.login-page .bootbox .modal-footer .btn-default {
    border-color: #d7e0e2;
    background: #fff;
    color: #536971;
}

.login-page .login-recovery-card {
    padding: 34px 30px 30px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 20px 55px rgba(0, 84, 128, .3);
    text-align: center;
}

.login-page .login-recovery-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: #e8f7ff;
    color: #00a3f5;
    font-size: 24px;
}

.login-page .login-recovery-card h1 {
    margin: 0 0 10px;
    color: #20343d;
    font-size: 22px;
    font-weight: 600;
}

.login-page .login-recovery-card p {
    margin: 0;
    color: #536971;
    line-height: 1.5;
}

.login-page .login-recovery-actions {
    margin-top: 22px;
}

.login-page .login-recovery-actions .btn {
    min-width: 150px;
    min-height: 42px;
    border: 0;
    border-radius: 5px;
    background: #00a3f5;
    color: #fff;
    font-weight: 600;
}

.login-page .login-recovery-actions .btn:disabled {
    background: #8ebfda;
}

@media (max-width: 767px) {
    .login-page .login-shell {
        align-items: flex-start;
        padding-top: max(20px, env(safe-area-inset-top));
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }

    .login-page .bootbox .modal-dialog {
        margin: 20px 12px;
    }
}

@media (max-width: 479px) {
    .login-page .login-shell {
        padding-right: 8px;
        padding-left: 8px;
    }

    .login-page .login-card-heading {
        padding: 23px 22px 16px;
    }

    .login-page .login-card .panel-body {
        padding: 0 22px 22px;
    }

    .login-page .login-card-title {
        font-size: 19px;
    }

    .login-page .login-form .help-block.with-errors {
        max-width: 200px;
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-page *,
    .login-page *:before,
    .login-page *:after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

    .login-page .login-background video {
        display: none;
    }

}

/* TOTP Break-Glass */
@keyframes flash-totp {
    0%, 100% { background-color: transparent; }
    50% { background-color: #ffcc00; }
}

.totp-required {
    animation: flash-totp 1s infinite;
}

.totp-required > a {
    color: #333 !important;
}

.totp-login-container {
    padding: 15px;
}

.totp-login-container .totp-login-title {
    margin-top: 0;
    margin-bottom: 15px;
    color: #075e68;
    text-align: center;
}

.totp-login-container .totp-login-title .fa {
    color: #d76b35;
}

.login-page .login-card.totp-mode {
    overflow: visible;
    background: #fff8ed;
}

.login-page .login-card.totp-mode .login-card-heading {
    background: #fff8ed;
}

.login-page .login-card.totp-mode .panel-body {
    background: #fff8ed;
    border-radius: 0 0 16px 16px;
}

/* El alert anclado al pie toma el redondeo inferior */
.login-page .login-card.totp-mode.has-bottom-error .panel-body {
    border-radius: 0;
}

.totp-login-container .form-group {
    margin-bottom: 12px;
}

.totp-login-container .totp-code-group {
    width: 230px;
    margin-right: auto;
    margin-left: auto;
}

.totp-login-container .totp-code-group .input-group-addon {
    height: 60px;
}

.totp-login-container #totpCode {
    height: 60px;
    padding-right: 10px;
    padding-left: 10px;
    color: #075e68;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 6px;
    text-align: center;
}

.totp-login-container .totp-backup-toggle {
    width: 230px;
    margin: 0 auto 16px;
}

.totp-login-container .totp-backup-toggle label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    color: #4d6a72;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.totp-login-container .totp-backup-toggle input[type="checkbox"] {
    position: static;
    width: 15px;
    height: 15px;
    margin: 0 8px 0 0;
    accent-color: #0093d8;
}

.totp-login-container .bootstrap-select {
    width: 100% !important;
}

.totp-login-container .bootstrap-select.open {
    z-index: 20;
}

.totp-login-container .bootstrap-select > .dropdown-toggle {
    width: 100%;
    text-align: left;
}

.login-page .login-form .bootstrap-select.support-user-select > .dropdown-toggle {
    height: auto !important;
    min-height: 48px;
    padding-top: 6px;
    padding-bottom: 0px;
    padding-right: 28px;
    white-space: normal;
}

.login-page .login-form .bootstrap-select.support-user-select.btn-group .dropdown-toggle .filter-option {
    display: block;
    float: none !important;
    height: auto !important;
    overflow: visible;
    width: 100%;
    line-height: 1.2;
    white-space: normal;
}

.login-page .login-form .bootstrap-select.support-user-select.btn-group .dropdown-toggle .support-user-label {
    line-height: 1.15;
}

.login-page .login-form .bootstrap-select.support-user-select.btn-group .dropdown-toggle .support-user-option {
    display: block;
    padding: 0;
}

.login-page .login-form .bootstrap-select.support-user-select.btn-group .dropdown-toggle .support-user-subtext {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 4px;
    margin-top: 3px;
    line-height: 1;
}

.login-page .login-form .bootstrap-select.support-user-select.btn-group .dropdown-toggle .support-role-badge {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
}

.login-page .login-form .bootstrap-select.support-user-select.btn-group .dropdown-menu > li + li > a {
    border-top: 1px solid rgba(120, 145, 153, .22);
}

.login-page .login-form .bootstrap-select.support-company-select > .dropdown-toggle {
    height: auto !important;
    min-height: 48px;
    padding-top: 6px;
    padding-bottom: 4px;
    padding-right: 28px;
    white-space: normal;
}

.login-page .login-form .bootstrap-select.support-company-select.btn-group .dropdown-toggle .filter-option {
    display: block;
    float: none !important;
    height: auto !important;
    overflow: visible;
    width: 100%;
    line-height: 1.2;
    white-space: normal;
}

.login-page .login-form .bootstrap-select.support-company-select.btn-group .dropdown-menu > li + li > a {
    border-top: 1px solid rgba(120, 145, 153, .22);
}

.login-page .support-user-option {
    display: block;
    padding: 2px 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.login-page .support-user-inactive {
    margin: -3px -8px;
    padding: 5px 8px;
    background: #f2dede;
}

.login-page .support-user-label {
    display: block;
    color: #20343d;
    font-weight: 600;
    line-height: 1.25;
}

.login-page .support-user-subtext {
    display: block;
    margin-top: 3px;
    color: #6c7f86;
    font-size: 11px;
    line-height: 1.35;
}

.login-page .support-role-badge {
    display: inline-block;
    margin: 2px 4px 0 0;
    padding: 2px 6px;
    border-radius: 4px;
    background: #edf3f5;
    color: #516970;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
}

.login-page .support-role-admin {
    background: #0087cc;
    color: #fff;
}

.login-page .support-role-super-admin {
    background: #c79212;
    color: #fff;
}

.login-page .support-company-option {
    display: block;
    padding: 2px 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.login-page .support-company-label {
    display: block;
    color: #20343d;
    font-weight: 600;
    line-height: 1.25;
}

.login-page .support-company-subtext {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.login-page .support-company-active .support-company-subtext {
    color: #278348;
}

.login-page .support-company-suspended-late .support-company-subtext {
    color: #b7791f;
}

.login-page .support-company-suspended-misuse .support-company-subtext {
    color: #c0392b;
}

.login-page .support-company-cancelled .support-company-subtext {
    color: #6c7f86;
}

.login-page .support-company-unknown .support-company-subtext {
    color: #7b5ea7;
}

.totp-login-container .step-section {
    display: none;
}

.totp-login-container .step-section.active {
    display: block;
}

.totp-login-container .totp-divider {
    border-top: 1px solid #ddd;
    margin: 15px 0;
}

.totp-setup-modal .modal-dialog {
    width: 760px;
    max-width: calc(100% - 30px);
}

.totp-setup-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 6px;
    box-shadow: 0 18px 44px rgba(24, 49, 61, .28);
}

.totp-setup-modal .modal-header {
    padding: 18px 24px;
    border-bottom: 1px solid #dce8ed;
    background: #f5fafc;
    color: #1b3e50;
}

.totp-setup-modal .modal-title {
    font-weight: 600;
}

.totp-setup-modal .modal-body {
    padding: 24px;
}

.totp-setup-modal .step-section {
    display: none;
}

.totp-setup-modal .step-section.active {
    display: block;
}

.totp-setup-modal .totp-step-indicator {
    display: flex;
    gap: 28px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dce8ed;
}

.totp-setup-modal .totp-step-indicator .step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #83979f;
    font-size: 13px;
    font-weight: 600;
}

.totp-setup-modal .totp-step-indicator .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid #c3d2d9;
    border-radius: 50%;
    background: #fff;
    color: #6a818b;
}

.totp-setup-modal .totp-step-indicator .step.active,
.totp-setup-modal .totp-step-indicator .step.done {
    color: #007fb4;
}

.totp-setup-modal .totp-step-indicator .step.active .step-number,
.totp-setup-modal .totp-step-indicator .step.done .step-number {
    border-color: #008cc7;
    background: #008cc7;
    color: #fff;
}

.totp-setup-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(230px, .9fr);
    gap: 20px;
}

.totp-qr-panel,
.totp-verify-panel {
    min-height: 320px;
    padding: 22px;
    border: 1px solid #dce8ed;
    border-radius: 6px;
}

.totp-qr-panel {
    background: #f8fbfc;
    text-align: center;
}

.totp-verify-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
}

.totp-setup-modal h5 {
    margin: 6px 0 8px;
    color: #244c5d;
    font-size: 16px;
    font-weight: 600;
}

.totp-setup-modal p {
    color: #617a85;
    font-size: 13px;
    line-height: 1.55;
}

.totp-section-icon {
    color: #008cc7;
    font-size: 20px;
}

.totp-qr-container {
    display: inline-flex;
    margin: 12px auto;
    padding: 10px;
    border: 1px solid #d9e5e9;
    background: #fff;
}

.totp-secret {
    overflow-wrap: anywhere;
    color: #6f838b;
    font-size: 12px;
}

.totp-secret span {
    display: block;
    margin-bottom: 4px;
}

.totp-secret code {
    display: inline-block;
    padding: 5px 7px;
    background: #edf4f6;
    color: #245d74;
    font-size: 11px;
}

.totp-app-note {
    margin: 10px 0 0;
    color: #6f838b;
    font-size: 11px;
    line-height: 1.5;
}

.totp-verify-panel .form-control {
    height: 56px;
    border-color: #bcd0d8;
    border-radius: 5px;
    color: #244c5d;
    font-family: Consolas, monospace;
    font-size: 27px;
    letter-spacing: 7px;
}

.totp-verify-panel .form-control:focus {
    border-color: #008cc7;
    box-shadow: 0 0 0 3px rgba(0, 140, 199, .15);
}

.totp-verify-panel .btn {
    min-height: 44px;
    border-radius: 5px;
    font-weight: 600;
}

.totp-backup-title {
    margin-bottom: 16px !important;
}

.totp-backup-codes {
    margin: 14px 0 18px;
    padding: 18px;
    border: 1px solid #dce8ed;
    border-radius: 6px;
    background: #f8fbfc;
}

.totp-backup-codes ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.totp-backup-codes ul li code {
    display: block;
    padding: 8px 10px;
    border: 1px solid #d4e1e5;
    background: #fff;
    color: #244c5d;
    font-family: Consolas, monospace;
    font-size: 14px;
    text-align: center;
}

@media (max-width: 640px) {
    .totp-setup-modal .modal-dialog {
        width: auto;
    }

    .totp-setup-modal .modal-body {
        padding: 18px;
    }

    .totp-setup-modal .totp-step-indicator {
        gap: 12px;
    }

    .totp-setup-modal .totp-step-indicator .step {
        font-size: 12px;
    }

    .totp-setup-grid,
    .totp-backup-codes ul {
        grid-template-columns: 1fr;
    }

    .totp-qr-panel,
    .totp-verify-panel {
        min-height: 0;
    }
}