html {
    visibility: hidden;
}

.btn-w-200 {
    width: 200px;
}

.sel-0 {
    user-select: none;
}

.session-monitor {
    z-index: 999;
    font-size: 0.75rem;
    height: 150px;
    padding: 0.25rem;
    width: max(350px, 50vw);
    width: max(350px, 50dvw);
    position: absolute;
    bottom: 0;
    left: 0;
    /* background-color:#ffc107; */
    border-top-right-radius: 1rem;

    /* Glass look */
    background: rgba(255, 255, 255, 0.12);
    /* or rgba(15, 23, 42, 0.35) for dark */
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.05);

    /* Blur behind */
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    /* Optional text color */
    color: #fff;
}

.code-box {
    width: 45px;
    height: 55px;
    font-size: 28px;
    text-align: center;
}

.code-box-digits {
    text-transform: capitalize;
    width: 2.5rem;
    height: 3.5rem;
    font-size: 1.5rem;
    padding: 0 0.45rem;
    text-align: center;
}

.img-responsive {
    min-width: 0;
    max-width: 100%;
    height: auto;
}

/* Remove Bootstrap valid icon but keep green border */
.no-valid-icon.is-valid,
.no-valid-icon:valid {
    background-image: none !important;
    padding-right: 0.45rem !important;
    /* optional */
}

/* Hide dark-theme assets when the light theme is active */
[data-bs-theme="light"] .show-on-dark {
    display: none !important;
}

/* Hide light-theme assets when the dark theme is active */
[data-bs-theme="dark"] .show-on-light {
    display: none !important;
}

.amm-binder-bg {
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    width: 100dvw;
    color: #fefefe;
    overflow: hidden;
    /* Base color matching the B767 AMM binder */
    background-color: #1e3556;

    /* Adds a subtle radial gradient for depth and a fine technical grid overlay */
    background-image:
        radial-gradient(circle at 50% 30%, rgba(44, 78, 122, 0.4) 0%, rgba(15, 27, 46, 0.8) 100%),
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);

    /* Controls the size of the technical grid */
    background-size: 100% 100%, 20px 20px, 20px 20px;

    /* Ensures smooth blending */
    background-blend-mode: normal, overlay, overlay;
}

.success {
    color: #198754;
    /* Bootstrap Success */
}

.error {
    color: #dc3545;
    /* Bootstrap Danger */
}

.warning {
    color: #ffc107;
    /* Bootstrap Warning */
}