:root {
    /*--font-size-variable: 0.7vw * 1rem;*/
    --font-size-variable: 0.8vw;
}

html {
    font-size: max(var(--font-size-variable), 7px) !important;
}

/* For screens that do not fit the 16:9 aspect ratio and are wider than  they are tall JA26012025*/
@media (min-aspect-ratio: 16/9) and (max-height: 100vw) {
    html {
        font-size: clamp(7px, var(--font-size-variable), calc(0.8 * ((100vh * 16 / 9) / 100))) !important;
    }
}

html {
    font-size: 1vw; /* 1rem = 1vw */
}

body {
    font-size: 1rem; /* Default body text */
}

h1 {
    font-size: 3.5rem; /* ~ 56px */
}

h2 {
    font-size: 3rem; /* ~ 48px */
}

h3 {
    font-size: 2.5rem; /* ~ 40px */
}

h4 {
    font-size: 2rem; /* ~ 32px */
}

h5 {
    font-size: 1.5rem; /* ~ 24px */
}

h6 {
    font-size: 1.25rem; /* ~ 20px */
}

p, li, span, label, input, button, select, textarea {
    font-size: 1rem; /* Default text size */
}

small {
    font-size: 0.875rem; /* ~ 14px */
}

pre, code, kbd, samp {
    font-size: 1rem; /* Keep monospaced text readable */
}

blockquote {
    font-size: 1.25rem; /* Slightly larger for emphasis */
}

table {
    font-size: 1rem;
}

caption {
    font-size: 1.125rem; /* Slightly larger for readability */
}

button {
    font-size: 1rem;
    padding: 0.5rem 1rem;
}

input, textarea, select {
    font-size: 1rem;
    padding: 0.1rem;
}

    /* Ensure form elements scale properly */
    input[type="checkbox"],
    input[type="radio"] {
        width: 1.25rem;
        height: 1.25rem;
    }

    input[type="submit"],
    input[type="button"],
    button {
        padding: 0.75rem 1.5rem;
    }

/* Override table scaling */
th, td {
    padding: 0.5rem;
}

legend {
    font-size: 1.25rem;
}

/* Adjust anchor text */
a {
    font-size: 1rem;
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }



.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: baseline; 
}

body { 
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: flex-start;
    align-content: baseline;
    width: 100%;
    height: 100%;
    overflow: auto;
}

/*body {
  margin-bottom: 60px;
}*/

/*.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}*/
/*
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
*/
.w-10 {
    width: 10%;
}

.w-15 {
    width: 15%;
}

.w-20 {
    width: 20%;
}

.w-25 {
    width: 25%;
}

.w-30 {
    width: 30%;
}

.w-33 {
    width: 33%;
}

.w-40 {
    width: 40%;
}

.w-50 {
    width: 50%;
}

.w-60 {
    width: 60%;
}

.w-66 {
    width: 66%;
}

.w-70 {
    width: 70%;
}

.w-75 {
    width: 75%;
}

.w-80 {
    width: 80%;
}

.w-85 {
    width: 85%;
}

.w-90 {
    width: 90%;
}

.w-100 {
    width: 100%;
}

.w-auto {
    width: auto;
}

body.Loginbg {
    background-image: url('/Images/LoginBackground.webp');
    background-size: 100% 100%;
    /*background-position: center;*/
    /*background-size: contain;*/
}

    body.Loginbg::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(55, 55, 55, 0.6); /* Semi-transparent white overlay */
        z-index: 1;
    }

.loginContainer {
    color: white;
    background-color: rgba(0, 0, 0, 0.8); /* Black with 80% transparency */
    border-radius: 15%;
}

.logininputbox {
    margin: 0 1rem 0.5rem 1rem;
    width: 12rem;
}

fc-container {
    display: flex;
    flex-wrap: wrap;
    word-wrap: break-word;
    max-width: 100%;
    height: auto;
    width: auto;
    align-items: baseline;
    align-content: baseline;
    overflow: auto;
}

    fc-container > *:not(script, style) {
        display: flex;
        flex-wrap: wrap;
        word-wrap: break-word;
        max-width: 100%;
        align-items: baseline;
        align-content: baseline;
        /*overflow: auto;*/
    }

    fc-container span {
        flex-wrap: nowrap !important;
        /*display: flex;*/
    }

.equalSplit > * {
    flex-grow: 1 !important; /*!important?*/
    flex-shrink: 1 !important; /*!important?*/
    flex-basis: 0 !important; /*!important?*/
}

/* CUSTOM NAVIGATION BAR START*/
/*Functionality Modes*/
.customBurgerMenuButton {
    display: none; /* Hide by default */
    background: none;
    color: white;
    border: none;
    outline: none !important;
    font-size: 1.5rem;
    font-weight: bold;
}

.customNavBarSimplify span {
    display: none;
}

.compactCustomNavbar a {
    display: none;
}

.expandCompactCustomNavbar {
    background-color: #222;
    z-index: 100;
    position: absolute;
    flex-direction: column;
    align-items: baseline !important;
    padding-right: 2rem;
}

    .expandCompactCustomNavbar a {
        height: auto !important;
        width: 100%;
        justify-content: flex-start !important;
    }

    .expandCompactCustomNavbar svg {
        height: 2rem;
    }


/* Styling Defaults */
.customNavBar a {
    color: rgba(255,255,255,.5);
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    border-radius: 0.21rem 0.21rem 0 0;
    padding: 0.6rem;
    height: 100%;
    text-decoration: none;
}

.customNavBar svg {
    font-size: 1.5rem;
    display: flex;
}

.customNavBar a.active,
.customNavBar a.active:hover {
    color: orange !important;
}

.customNavBar a.active {
    /*background-color: red;*/
}

.customNavBar a:hover:not(.active) {
    color: white !important;
}

/* CUSTOM NAVIGATION BAR END */


/*Website Themes */

/*Common Styles*/

h1 {
    font-size: 2.5rem;
    font-weight: bold;
    margin: 1.5rem;
}

p {
    font-size: 1.2rem;
    font-weight: 600;
    opacity: 0.7;
}

.card-container {
    justify-content:center;
    gap: 2.5rem;
    margin-top: 3rem;
}

.card {
    padding: 2.5rem;
    border-radius: 1.2rem;
    /*width: 16rem;*/
    text-align: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.card:hover{
    transform: translateY(-0.5rem;)
}

/*Theme 1*/

.theme-dark {
    background-color: rgba(var(--bs-dark-rgb),var(--bs-bg-opacity)) !important;
    --bs-bg-opacity: 1;
        color: white;
}

    .theme-dark h1 {
        color: #00ff88;

    }

    .theme-dark .card {
        background-color: #1e1e1e;
        border: 0.2rem solid #00ff88;
        box-shadow: 0 0.4rem 1.5rem rgba(0, 255, 136, 0.3);
    }

        .theme-dark .card h2 {
            color: #00ff88;
        }

        .theme-dark .card p {
            color: white;
        }

        /*.theme-dark header #mainnavbar a {
            color: #00ff88 !important;
        }
*/
        .theme-dark #mainNavbar a {
            color: #00ff88;
        }

/* Second Style (Light Blue Theme) */
.theme-light {
    /*background-color: #cce7ff;*/
    /*background: linear-gradient(black, lightblue, black);*/
    background: linear-gradient(rgba(0,0,0,0.85), rgba(173, 216, 230, 0.8), rgba(0,0,0,0.2));
    color: white;
}

.theme-light > * {
    /*background-color: #cce7ff;*/
    /*background: linear-gradient(black, lightblue, black);*/
    /*background: linear-gradient(rgba(0,0,0,0.85), rgba(173, 216, 230, 0.8), rgba(0,0,0,0.2));*/
    color: white;
}

    .theme-light h1 {
        color: white;
    }

    .theme-light p {
        color: white;
    }

   /* .theme-light .card {
        background-color: rgba(0, 0, 0, 0.4);
        border: 0.2rem solid;
        border-image: linear-gradient(45deg, black, red) 1;
        box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.3);
    }
*/

    .theme-light .card {
        background: rgba(255, 255, 255, 0.7); /* More translucent glass effect */
        /*background: rgba(173,216,230,0.3);*/
        backdrop-filter: blur(1rem); /* Glass effect */
        -webkit-backdrop-filter: blur(1rem); /* Safari support */
        /*border: 0.2rem solid;*/
        /*border-image: linear-gradient(45deg, black, red) 1;*/
        box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.3);
        border-radius: 1rem;  /*Smooth edges */
        /*padding: 1rem;*/
        transition: all 0.3s ease-in-out;
    }

        .theme-light .card h2 {
            color: black;
        }

        .theme-light .card p {
            color: black;
        }

    .theme-light #mainNavbar a {
        color: white;
    }


/* Third Style (Light Blue Theme 2) */
.theme-light2 {
    /*background: linear-gradient(black, lightblue, black);*/
    background: linear-gradient(rgba(0,0,0,0.85), rgba(173, 216, 230, 0.8), rgba(0,0,0,0.2));
    color: black;
}

    /*.theme-light2 > * {*/
        /*background-color: #cce7ff;*/
        /*background: linear-gradient(black, lightblue, black);*/
        /*background: linear-gradient(rgba(0,0,0,0.85), rgba(173, 216, 230, 0.8), rgba(0,0,0,0.2));*/
        /*color: black;
    }*/

    .theme-light2 h1 {
        color: white;
    }

    /*.theme-light2 p {
        color: white;
    }*/

    .theme-light2 .card {
        background: rgba(255, 255, 255, 0.7); /* More translucent glass effect */
        /*background: rgba(173,216,230,0.3);*/
        backdrop-filter: blur(1rem); /* Glass effect */
        -webkit-backdrop-filter: blur(1rem); /* Safari support */
        /*border: 0.2rem solid;*/
        /*border-image: linear-gradient(45deg, black, red) 1;*/
        box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.3);
        border-radius: 1rem; /*Smooth edges */
        /*padding: 1rem;*/
        transition: all 0.3s ease-in-out;
        border: 0.2rem solid #00ff88;
    }

        .theme-light2 .card h2 {
            color: black;
        }

        .theme-light2 .card p {
            color: black;
        }

    .theme-light2 #mainNavbar a {
        color: white;
    }

    .theme-light2 .btn {
        color: black !important;
    }
/*------------------------------------------------------------------------------------------*/

.btn {
    background-color: black;
    color: white;
    /*border: none;*/
    padding: 1rem 2rem;
    margin: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s;
}

.theme-dark .btn {
            color: white !important;
        }

.theme-light .btn {
    color: black !important;
}

/*    .btn:hover {
        background-color: #333;
    }*/


/*Global Modal Pop Up Start--------------------------------------------------------*/

/* Modal Overlay (Background) */
.modal-overlay {
    align-content: center;
    justify-content: center;
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Modal Container */
.modal-container {
    flex-direction: column;
    max-width: 95%;
    max-height: 95%;
    /*padding: 2.5rem;*/
    /*padding: 0 0rem 2.5rem 0;*/
    padding: 0rem;
    border-radius: 0.8rem;
}

/* Modal Close Button */
.modal-close {
    cursor: pointer;
    font-size: 20px;
    color: purple;
}

    .modal-close:hover {
        color: red;
    }

/* Modal Body */
.modal-body {
    margin-top: 10px;
    max-height: 70vh;
    overflow-y: auto; /* Scrollable content if needed */
}




/*--------------------------------------------------------------------------------------*/




/*button {
    border: 0.02rem solid darkgray;
    background-color: white;
}
*/


/*button {
    background: linear-gradient(rgb(128,128,128), rgba(0, 0, 0, 0.8), #ff0000);*/ /* Gradient background */
    /*color: white;*/ /* Text color */
    /*padding: 12px 24px;*/ /* Comfortable padding */
    /*border: none;*/ /* No border */
    /*border-radius: 30px;*/ /* Rounded shape */
    /*font-size: 16px;*/ /* Readable font size */
    /*font-weight: bold;*/ /* Emphasize text */
    /*cursor: pointer;*/ /* Pointer cursor on hover */
    /*transition: transform 0.2s ease, box-shadow 0.2s ease;*/ /* Smooth animations */
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/ /* Subtle shadow */
/*}

    button:hover {
        transform: scale(1.05);*/ /* Slightly enlarge on hover */
        /*box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);*/ /* Stronger shadow */
    /*}

    button:active {
        transform: scale(0.95);*/ /* Slightly shrink on click */
        /*background: linear-gradient(135deg, #2ecc71, #3498db);*/ /* Reverse gradient */
    /*}*/