/** Font Selection */
/* ==========================
            Outfit
   ========================== */
@font-face {
    font-family: 'LexendDeca';
    src: url('../../../Assets/Fonts/LexendDeca/LexendDeca-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LexendDeca';
    src: url('../../../Assets/Fonts/LexendDeca/LexendDeca-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LexendDeca';
    src: url('../../../Assets/Fonts/LexendDeca/LexendDeca-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LexendDeca';
    src: url('../../../Assets/Fonts/LexendDeca/LexendDeca-ExtraBold.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

body[index], 
body[auth],
body[QR],
body[user] {
    font-family: 'LexendDeca', sans-serif;
}

/** Background Setup */
body[auth],
body[QR] {
    min-height: 100vh;
    margin: 0;
    display: flex;
    background: url("../../../Assets/Images/Auth/Auth Background.jpg") center / cover no-repeat;
}

body[user] {
    background: linear-gradient(135deg, rgb(13, 57, 84, 0.5), rgb(23, 155, 70, 0.3)), url("../../../Assets/Images/General/MforceCas Homepage Web.png") center / cover no-repeat;
}

@media (max-width: 768px){
    body[auth],
    body[QR] {
        background: url("../../../Assets/Images/Auth/Auth Background Mobile.jpeg") center / cover no-repeat;
        overflow-y: scroll;
    }
    body[user] {
        background: linear-gradient(135deg, rgb(13, 57, 84, 0.5), rgb(23, 155, 70, 0.3)), url("../../../Assets/Images/General/MforceCas Homepage Mobile.jpg") center / cover no-repeat;
    }
}


/* Make sure SweetAlert2 popup is above preloader */
.swal2-container {
    z-index: 99999999999999999 !important;
}

#preloader2 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: hidden;
    background: #ffffff82;
}

#preloader2:before {
    content: "";
    position: fixed;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    border: 6px solid #1977cc;
    border-top-color: #d1e6f9;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    -webkit-animation: animate-preloader 1s linear infinite;
    animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes animate-preloader {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ========================================
   Mforce.CAS Brand Gradients
   Colors: #0d3954 (Dark Blue) → #179b46 (Green)
=========================================== */

/* Navbar Dark Blue to Green */
.navbar.bg-gradient-mforcecas-navbar {
    background: #0d3954 linear-gradient(135deg, #0d3954, #179b46) repeat-x !important;
    border-bottom: 2px white solid;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}

.navbar.bg-gradient-mforcecas-navbar .navbar-brand {
    color: #fff !important;
}

.navbar.bg-gradient-mforcecas-navbar .nav-link {
    color: rgba(255, 255, 255, .85) !important;
}

.navbar.bg-gradient-mforcecas-navbar .nav-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .1) !important;
}

.navbar.bg-gradient-mforcecas-navbar .nav-link.active {
    background: rgba(255, 255, 255, .15) !important;
    color: #fff !important;
}

/* Primary Gradient - Dark Blue to Green (Default) */
.bg-gradient-mforcecas {
    background: #0d3954 linear-gradient(135deg, #0d3954, #179b46) repeat-x !important;
    color: #fff !important;
}

/* Light Version */
.bg-gradient-mforcecas-light {
    background: #1a4d6e linear-gradient(180deg, #1a4d6e, #2bb85c) repeat-x !important;
    color: #fff !important;
}

/* Dark Version */
.bg-gradient-mforcecas-dark {
    background: #082433 linear-gradient(180deg, #082433, #0f6b30) repeat-x !important;
    color: #fff !important;
}

/* Subtle Version (Lighter) */
.bg-gradient-mforcecas-subtle {
    background: #2d5f7e linear-gradient(180deg, #2d5f7e, #3fc977) repeat-x !important;
    color: #fff !important;
}

/* Inverse Gradient (Green to Dark Blue) */
.bg-gradient-mforcecas-inverse {
    background: #179b46 linear-gradient(180deg, #179b46, #0d3954) repeat-x !important;
    color: #fff !important;
}

/* Horizontal Gradient (Left to Right) */
.bg-gradient-mforcecas-horizontal {
    background: #0d3954 linear-gradient(90deg, #0d3954, #179b46) repeat-x !important;
    color: #fff !important;
}

/* Diagonal Gradient (Top Left to Bottom Right) */
.bg-gradient-mforcecas-diagonal {
    background: #0d3954 linear-gradient(135deg, #0d3954, #179b46) repeat-x !important;
    color: #fff !important;
}

/* Radial Gradient */
.bg-gradient-mforcecas-radial {
    background: #0d3954 radial-gradient(circle at center, #0d3954, #179b46) repeat-x !important;
    color: #fff !important;
}


/* Sidebar Dark Blue to Green */
.bg-gradient-mforcecas-sidebar {
    background: #0d3954 linear-gradient(180deg, #0d3954, #179b46) repeat-x !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 2px 0 5px rgba(0, 0, 0, .1);
}

.bg-gradient-mforcecas-sidebar .nav-link {
    color: rgba(255, 255, 255, .85) !important;
    border-radius: 4px;
}

.bg-gradient-mforcecas-sidebar .nav-link:hover {
    background: rgba(255, 255, 255, .15) !important;
    color: #fff !important;
}

.bg-gradient-mforcecas-sidebar .nav-link.active {
    background: linear-gradient(90deg, rgba(23, 155, 70, 0.3), rgba(13, 57, 84, 0.3)) !important;
    border-left: 4px solid #179b46 !important;
    color: #fff !important;
}

.bg-gradient-mforcecas-sidebar .nav-header {
    color: rgba(255, 255, 255, .6) !important;
    text-transform: uppercase;
    font-size: 0.85rem;
    padding: 10px 15px;
}

.bg-gradient-mforcecas-sidebar .brand-link {
    color: #fff !important;
}


.sidebar-wrapper .nav-divider{
    border: 1px solid white;
}

.app-footer {
    background: linear-gradient(0deg, #00af49, #009e42) repeat-x !important;
    color: #fff !important;
}

.app-footer a{
    text-decoration: none;
    color: #87fc95;
}