/* ============================================================
   ACCOUNT LAYOUT – RESPONSIVE STRUCTURE + CENTERING
============================================================ */

/* Base */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

html {
    overflow-y: auto !important;
}

body {
    background-color: #f5f7fb;
    -webkit-font-smoothing: antialiased;
}

.k-button-solid-primary {
    color: #fff !important;
    background-color: var(--light-blue-100) !important;
    /*border-color: var(--dark-blue-80) !important;*/
}

    .k-button-solid-primary:hover {
        color: #fff !important;
        background-color: var(--light-blue-80) !important;
        /*border-color: var(--dark-blue-100) !important;*/
    }

    .k-button-solid-primary:focus {
        /* Using the exact hex-to-rgb conversion (59, 102, 129) of your --dark-blue-80 token */
        box-shadow: 0 0 0 2px rgba(57, 102, 129, 0.3) !important;
    }


/* --- Secondary Buttons --- */
.k-button-solid-secondary {
    color: #fff !important;
    background-color: var(--gray-100) !important;
    border-color: var(--gray-100) !important;
}

    .k-button-solid-secondary:hover {
        color: #fff !important;
        background-color: var(--gray-100) !important;
        border-color: var(--gray-100) !important;
        filter: brightness(90%) !important; /* Gently darkens the gray on hover */
    }

    .k-button-solid-secondary:focus {
        /* Uses RGB equivalent (101, 101, 101) of your --gray-100 token */
        box-shadow: 0 0 0 2px rgba(101, 101, 101, 0.3) !important;
    }


/* --- Cancel Icon Buttons --- */
.popup-cancel-icon-button {
    padding: 6px 15px 6px 10px;
    min-width: 90px;
    color: #fff !important;
    background-color: var(--gray-100) !important;
    border-color: var(--gray-100) !important;
}

    .popup-cancel-icon-button:hover {
        color: #fff !important;
        background-color: var(--gray-100) !important;
        border-color: var(--gray-100) !important;
        filter: brightness(90%) !important; /* Gently darkens the gray on hover */
    }

    .popup-cancel-icon-button:focus {
        /* Uses RGB equivalent (101, 101, 101) of your --gray-100 token */
        box-shadow: 0 0 0 2px rgba(101, 101, 101, 0.3) !important;
    }


.link-primary {
    color: var(--light-blue-100);
}

    .link-primary:hover, .link-primary:focus {
        color: #0a58ca;
    }

/* ============================================================
   MAIN: vertical centering of login panel
============================================================ */

main {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

.demo-section {
    flex: 1 1 auto;
    display: flex;
    align-items: center; /* vertical center */
    justify-content: center; /* horizontal center */
    padding-block: clamp(12px, 4vh, 40px);
}

/* Reasonable max width (was too wide earlier) */
.centered {
    width: 100%;
    max-width: 805px; /* Adjusted from 1200px → cleaner on laptops */
}

/* ============================================================
   CARD + COLUMN LAYOUT
============================================================ */

.card0 {
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    border-radius: 0; /* FLAT DESIGN */
    overflow: hidden;
}

/* Adjusting column ratios */
.col-lg-5 {
    flex: 0 0 40%; /* was 5/12 (~41%) */
    max-width: 40%;
    display: flex;
    flex-direction: column;
}

.col-lg-7 {
    flex: 0 0 60%; /* was 7/12 (~58%) */
    max-width: 60%;
    display: flex;
    flex-direction: column;
}

/* On small screens stack naturally */
@media (max-width: 991px) {
    .col-lg-5, .col-lg-7 {
        max-width: 100%;
        flex: 0 0 100%;
    }
}

.card1,
.card2 {
    padding: clamp(16px, 2vw, 16px);
}

.loginForm {
    min-height: 315px;
}
/* ============================================================
   LOGO
============================================================ */
.logo {
    /*width: clamp(140px, 20vw, 200px);*/
    /*width: clamp(140px, 20vw, 140px);*/
    width: 115px;
    margin: 0px;
    -webkit-font-smoothing: subpixel-antialiased;
}

.logo-container {
    height: 70px;
}
/* ============================================================
   CAROUSEL (moved from login.css)
============================================================ */
.carousel-parent {
    margin-bottom: 0 !important;
}

.loginCarousel {
    margin-top: 8px;
    color: var(--dark-blue-100);
}

.carousel-item img {
    display: block;
    width: clamp(40px, 6vw, 70px);
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

/*.CarHeading {
    font-size: clamp(16px, 1.6vw, 20px);
    font-weight: 600;
    margin-top: 12px;
}*/

.CarHeading {
    font-size: 18pt;
    font-family: segoe ui;
}

/*
.CarText {
    font-size: clamp(13px, 1.3vw, 13px);
}*/

.CarText {
    font-size: 10pt;
    font-family: segoe ui;
}



/* fade transition */
.carousel-item {
    opacity: 0;
    transition: opacity 3s ease-in-out;
}

    .carousel-item.active {
        opacity: 1;
    }

/* ============================================================
   FOOTER + SOCIAL ICONS
============================================================ */

.footer-bg-blue {
    background-color: var(--dark-blue-100);
    color: #fff;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.footerMessage {
    margin: 0;
    font-size: clamp(10px, .9vw, 12px);
}

.Social-Media-Icon-Container {
    margin-left: auto;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: nowrap;
}

.Social-Media-Icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

    .Social-Media-Icon img {
        display: block;
        width: 22px;
        height: 22px;
        object-fit: contain;
    }

@media (max-width: 576px) {
    .footer-bg-blue {
        flex-direction: column;
        align-items: flex-start;
    }

    .Social-Media-Icon-Container {
        margin-left: 0;
        flex-wrap: wrap;
        gap: 8px 10px;
    }

    .Social-Media-Icon img {
        width: 20px;
        height: 20px;
    }
}



/* ============================================================
   FLOATING LABELS + FORMS (layout-dependent ones only)
============================================================ */

.form-floating > .form-control {
    background: #E8F0FE;
    padding: .55rem .75rem;
}

.form-floating > .form-control,
.form-floating > .form-select {
    height: 3rem;
}

.form-floating > label {
    font-size: 14px;
}

.message_right {
    min-height: 48px;
}

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

.icon-button {
    padding-left: 8px !important;
    padding-right: 18px !important;
    border-radius: 6px;
}

/* ============================================================
   LOADING OVERLAY
============================================================ */

/* Full-screen overlay; visible when jQuery sets display:block */
#loadingPanel {
    position: fixed;
    inset: 0; /* top/right/bottom/left: 0 */
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 10000; /* make sure it's above Kendo/Bootstrap layers */
    display: none; /* jQuery .show() => display:block; .hide() => display:none */
}

    /* Absolutely center the inner indicator regardless of outer display mode */
    #loadingPanel .loading-indicator {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* perfect center */
        /* Optional: small fade-in feel when shown */
        opacity: 1;
        transition: opacity .15s ease;
        /* Typography/size are optional */
        font-size: 18px;
        color: #333;
    }

/* (Optional) If you ever need to fade it: add a class before hide()
#loadingPanel.fading-out .loading-indicator {
    opacity: 0;
}
*/