/* =================================================================
   Auto-generated branding configuration – do NOT edit manually.
   Generated: 2026-04-15 17:46:00 UTC
   Changes are applied via Administration > White Label Configuration.
   ================================================================= */

:root {
    /* ── Brand Palette (shared Admin + Student) ─────────────── */
    --brand-color-1: #143f72;
    --brand-color-2: #ffb100;
    --brand-color-3: #1cc88a;
    --brand-color-4: #36b9cc;
    --brand-color-5: #f6c23e;
    --brand-color-6: #dd1d21;
    --brand-color-7: #ffffff;
    --brand-color-8: #1a1b1e;
    --brand-color-9: #2d2f33;
    --brand-color-10: #f8f8fc;

    /* ── Legacy aliases (backward-compatible) ───────────────── */
    --flex-blue:   #143f72;
    --flex-yellow: #ffb100;

    /* ──Admin Graph / Chart Palette ─────────────────────────────── */
    --brand-graphPalette: #424769,#7077a1,#f6b17a,#498482,#17a2b8;

    /* ── Scrollbar (shared Admin + Student) ─────────────────── */
    --scrollbar-color: #888888;

    /* ── Admin Login Page ─────────────────────────────────────────── */
    --admin-login-background: #143f72;
    --admin-particles-line-color: #b7ebfb;

    /* ── Admin Footer ─────────────────────────────────────────────── */
    --footer-bg-color: #ffb100;
    --footer-text-color: #ffffff;

    /* ── Student Particles Color ──────────────────────────────── */
    --student-particles-color: #143f72;

    /* ── Admin Image Dimensions ───────────────────────────────────── */
    --card-logo-width:          400px;
    --card-logo-height:         80px;
    --sidebar-logo-width:       100%;
    --sidebar-logo-height:      100%;
    --small-logo-width:         100px;
    --small-logo-height:        70px;
    --login-page-logo-width:    auto;
    --login-page-logo-height:   auto;
    --footer-small-logo-width:  80px;
    --footer-small-logo-height: 24px;

    /* ── Student Image Dimensions ───────────────────────────────────── */
    --login-logo-width:          500px;
    --login-logo-height:         300px;
    --main-logo-width:           200px;
    --main-logo-height:          64px;
}

/* ── Admin Image size overrides ─────────────────────────────────────── */
#admin-login-logo {
    width: var(--card-logo-width, 400px);
    height: var(--card-logo-height, 80px);
    background-image: url("https://portal.flexlearn.com/WhiteLabel/BrandingAsset?fileName=flexhubs-logo-1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#admin-sidebar-logo {
    width: var(--sidebar-logo-width, 100%);
    height: var(--sidebar-logo-height, 100%);
    background-image: url("https://portal.flexlearn.com/WhiteLabel/BrandingAsset?fileName=flexhubs-logo-1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

@media (width <= 767px) {
    #accordionSidebar .sidebar-brand {
        width: var(--small-logo-width, 100px);
        height: var(--small-logo-height, 70px);
    }

    #accordionSidebar #admin-sidebar-logo {
        background-image: url("Images/logo/logo-sm.png");
         width: var(--small-logo-width, 100px);
         height: var(--small-logo-height, 70px);
    }
}

#admin-set-mobile-phone-logo {
    height: var(--card-logo-height, 80px);
    background-image: url("https://portal.flexlearn.com/WhiteLabel/BrandingAsset?fileName=flexhubs-logo-1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#admin-forgot-password-logo,
#admin-set-password-logo {
    height: var(--card-logo-height, 80px);
    background-image: url("https://portal.flexlearn.com/WhiteLabel/BrandingAsset?fileName=flexhubs-logo-1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-filter: drop-shadow(1px 1px 1px rgba(255, 255, 255, 1))
        drop-shadow(-1px -1px 0px rgba(255, 255, 255, 1))
        drop-shadow(0px 0px 0px rgba(255, 255, 255, 1))
        drop-shadow(1px 1px 6px black);
}

/* ── Scrollbar override ───────────────────────────────────────── */
::-webkit-scrollbar {
    width:  8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #bbb;
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color);
    border-radius:    8px;
    border: 0 solid transparent;
}

/* ── Admin Footer ────────────────────────────────────────────────── */
footer.sticky-footer {
    background-image: linear-gradient(90deg, rgba(255,255,255,0.09), var(--footer-bg-color));
    color: var(--footer-text-color);
}

footer.sticky-footer span, footer.sticky-footer a {
    color: var(--footer-text-color);
}

/* admin footer small icon */
#admin-footer-small-icon {
    display: none;
}

/* ── Admin Login Cube Gallery ───────────────────────────────────────── */
.login-cube-one {
    background-image: url("Images/login-cube/login1.png")
}

.login-cube-two {
    background-image: url("Images/login-cube/login2.png")
}

.login-cube-three {
    background-image: url("Images/login-cube/login3.png")
}

.login-cube-four {
    background-image: url("Images/login-cube/login4.png")
}

.login-cube-five {
    background-image: url("Images/login-cube/login5.png")
}

/* =================================================================
   Student project branding overrides
   ================================================================= */

/* Student login page logo */
#student-login-logo {
    width: var(--login-logo-width, 500px);
    height: var(--login-logo-height, 300px);
    background-image: url("https://skillup.flexlearn.com/branding/flexhubs-logo-1.png") !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Student main app logo (navbar) */
#customerImage {
    width: var(--main-logo-width, 200px);
    height: var(--main-logo-height, 64px);
    background-image: url("https://skillup.flexlearn.com/branding/flexhubs-logo-1.png") !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* ── Student Footer ────────────────────────────────────────────────── */
.page-footer .footer-copyright,
.page-footer a,
.page-footer span {
    color: var(--footer-text-color);
}