body {
        margin: 0;
        padding: 0;
        width: 100%;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(135deg, #4e73df, #1cc88a);
        /* Use dynamic viewport height for mobile browsers */
        min-height: 100dvh; 
        justify-content: center;
        align-items: center;
        overflow-x: hidden;
    }

    form {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* --- 1. Splash Screen --- */
    #splash-screen {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 10000;
        transition: opacity 0.8s ease-out;
    }

    .splash-logo {
        width: 70%; /* Responsive width */
        max-width: 300px;
        animation: pulse-rotate 2s infinite ease-in-out;
    }

    @keyframes pulse-rotate {
        0%, 100% { transform: scale(0.95); opacity: 0.8; }
        50% { transform: scale(1.05); opacity: 1; }
    }

    /* --- 2. Login Card Styles --- */
    .login-card {
        background: white;
        width: 85%;
        max-width: 380px;
        padding: 25px; 
        border-radius: 20px;
        box-shadow: 0 15px 35px rgba(0,0,0,0.3);
        text-align: center;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.6s ease-out;
        margin: 20px 0; /* Ensures space on small screens */
    }

    .login-card.show {
        opacity: 1;
        transform: translateY(0);
    }

    .login-logo { width: 100%; max-width: 180px; margin-bottom: 0px; }

    /* --- 3. Input Styles --- */
    .floating-group { position: relative; margin-bottom: 20px; text-align: left; }
    
    .floating-group input { 
        width: 100%; padding: 15px 12px; border: 1px solid #ddd; border-radius: 10px; 
        outline: none; font-size: 20px; box-sizing: border-box; color: #333;
    }
    
    .floating-group label { 
        position: absolute; left: 12px; top: 15px; color: #888; background: white; 
        padding: 0 5px; font-size: 20px; transition: 0.2s ease all; pointer-events: none;
    }

    .floating-group input:focus + label, 
    .floating-group input:not(:placeholder-shown) + label { 
        top: -10px; font-size: 16px; color: #4e73df; font-weight: bold;
    }

    .login-btn { 
        width: 100%; padding: 15px; background: #4e73df; color: white; border: none; 
        border-radius: 10px; font-size: 18px; font-weight: bold; cursor: pointer;
    }
    .login-logo { width: 280px; margin-bottom: 5px; }
    .login-title { font-size: 22px; font-weight: bold; margin-bottom: 25px; color: #333; }
    .login-error { font-size: 16px; font-weight: bold; margin-bottom: 25px; color: #333; }
    /* --- 4. CSS Text Loader --- */
    #divLoading {
        display:none; 
        position: fixed; 
        top:0; left:0;
        width:100%; height:100%; 
        background: rgba(255,255,255,0.9); 
        z-index: 9999;
        justify-content: center;
        align-items: center;
    }

    .loading-text {
        font-weight: bold;
        font-size: 20px;
        letter-spacing: 3px;
        color: #4e73df;
        animation: pulse 1.5s linear infinite;
    }

    @keyframes pulse {
        0% { opacity: 0.2; }
        50% { opacity: 1; }
        100% { opacity: 0.2; }
    }
    
    .footer-text { 
        font-size: 16px; 
        margin-top: 25px; /* Pushes footer away from the button */
        color: #777; 
        line-height: 1.5;
        border-top: 1px solid #eee; /* Optional: adds a subtle separator */
        padding-top: 15px;
    }

    .footer-text strong {
        color: #333;
    }
    
    
    
    
    
 .header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: gray;
    color: white;
    text-align: center;
    padding: 2px 0;
    z-index: 1000; /* Ensure header stays above other content */
}
        
.content {
    margin-top: 60px; /* Equal to the height of the fixed header */
    padding: 0px;
    height: 200px; /* Just for demonstration; adjust as needed */
    background-color: #fff;
}

.freeze-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: gray;
}
.body-padding {
    margin-top: 10px;
    width:90%;
}

/* Container to handle centering */
.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* The Text Animation */
.loading-text {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 24px;
    letter-spacing: 4px;
    color: #333;
    animation: pulse 1.5s linear infinite;
}

@keyframes pulse {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}



.title
{
    background-color: #4B77DA;
	font-family:Arial, Helvetica, sans-serif;
	font-Size:30px;
	TEXT-DECORATION: none;
	font-weight:normal;
	color:#fff;
}


.bluenormal
{
	font-family: Tahoma;
	font-Size:12pt;
	TEXT-DECORATION: none;
	font-weight:normal;
	color:blue;
}


A.bluenormal
{
	font-family:Arial, Helvetica, sans-serif;
	font-Size:12pt;
	TEXT-DECORATION: none;
	font-weight:normal;
	color:blue;
}

A.bluenormal:hover
{
	font-family:Arial, Helvetica, sans-serif;
	font-Size:12pt;
	TEXT-DECORATION: none;
	font-weight:normal;
	color:coral;
}


.blacknormal
{
	font-family:Arial, Helvetica, sans-serif;
	font-Size:12pt;
	TEXT-DECORATION: none;
	font-weight:normal;
	color:#000;
}


A.blacknormal
{
	font-family:Arial, Helvetica, sans-serif;
	font-Size:12pt;
	TEXT-DECORATION: none;
	font-weight:normal;
	color:#000;
}

A.blacknormal:hover
{
	font-family:Arial, Helvetica, sans-serif;
	font-Size:12pt;
	TEXT-DECORATION: none;
	font-weight:normal;
	color:#000;
}

.blackbold
{
	font-family:Arial, Helvetica, sans-serif;
	font-Size:14pt;
	TEXT-DECORATION: normal;
	font-weight: bold;
	color:#000;
}


A.blackbold
{
	font-family:Arial, Helvetica, sans-serif;
	font-Size:12pt;
	TEXT-DECORATION: none;
	font-weight:normal;
	color:#000;
}

A.blackbold:hover
{
	font-family:Arial, Helvetica, sans-serif;
	font-Size:12pt;
	TEXT-DECORATION: none;
	font-weight:normal;
	color:#000;
}

.redbold
{
	font-family:Arial, Helvetica, sans-serif;
	font-Size:14pt;
	TEXT-DECORATION: normal;
	font-weight: bold;
	color:red;
}


.center
{
    font-family: Arial;
    font-size: 10pt;
    border: 5px solid #67CFF5;
    width: 200px;
    z-index: 1000;
    background-color: White;  
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -55px; /* make this half your image/element height */
    margin-left: -105px; /* make this half your image/element width */
    padding-top: 10px;
    padding-bottom: 10px;
    text-align:center;
}

/* Ensure the arrow container is visible and centered */
.back-btn-container {
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0; /* Stretches container to full header height */
    display: flex;
    align-items: center; /* Vertically centers the arrow */
    z-index: 10;
}

.back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; 
    height: 34px;
    border-radius: 50%;
    transition: background-color 0.2s;
    text-decoration: none;
}

/* The Dark Hover */
.back-btn:hover, .back-btn:active {
    background-color: rgba(0, 0, 0, 0.2);
}

/* THE ARROW FIX: Ensure display and borders are clear */
.chevron-left {
    display: block;
    border-right: 2px solid white; /* Thinner border for slim look */
    border-bottom: 2px solid white;
    width: 8px; /* Slightly smaller for slim header */
    height: 8px;
    transform: rotate(135deg); /* Points left */
    margin-left: 3px; /* Visual centering adjustment */
}