/* Global Responsive Typography */
/* Base font size scales with viewport */
html {
    font-size: clamp(14px, 2.5vw, 16px);
}

body {
    font-size: clamp(0.875rem, 2vw, 1.25rem);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    padding-top: 56px; /* Account for fixed navbar */
    min-height: 100vh;
    position: relative;
}

/* Responsive Heading Sizes */
h1, .h1 {
    font-size: clamp(1.75rem, 5vw, 2.5rem) !important;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h2, .h2 {
    font-size: clamp(1.5rem, 4.4vw, 2rem) !important;
    line-height: 1.3;
}

h3, .h3 {
    font-size: clamp(1.25rem, 3.5vw, 1.75rem) !important;
    line-height: 1.4;
    margin-bottom: 0.75rem;
}

h4, .h4 {
    font-size: clamp(1.125rem, 3vw, 1.5rem) !important;
    line-height: 1.4;
    margin-bottom: 0.625rem;
}

h5, .h5 {
    font-size: clamp(1rem, 2.5vw, 1.25rem) !important;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

h6, .h6 {
    font-size: clamp(0.875rem, 2.2vw, 1rem) !important;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

/* Responsive paragraph and general text */
p, .text-body {
    font-size: clamp(0.875rem, 2vw, 1rem);
    line-height: 1.6;
}

/* Responsive text for labels, small text, and captions */
label, .form-label {
    font-size: clamp(0.8125rem, 1.8vw, 0.9375rem);
}

small, .small, .text-small {
    font-size: clamp(0.75rem, 1.6vw, 0.875rem);
}


.btn-light{
    background-color: #f17b20 !important;
}

/* Tablet font size adjustments (col-sm to col-md) */
@media (min-width: 577px) and (max-width: 991px) {
    p, .text-body {
        font-size: clamp(0.9375rem, 2.2vw, 1.0625rem);
    }
    
    label, .form-label {
        font-size: clamp(0.875rem, 2vw, 1rem);
    }
    
    small, .small, .text-small {
        font-size: clamp(0.8125rem, 1.8vw, 0.9375rem);
    }
}

/* Mobile font size adjustments (below col-sm) */
@media (max-width: 576px) {
    p, .text-body {
        font-size: clamp(1rem, 3vw, 1.1875rem);
    }
    
    label, .form-label {
        font-size: clamp(0.9375rem, 2.5vw, 1.0625rem);
    }
    
    small, .small, .text-small {
        font-size: clamp(0.875rem, 2.2vw, 1rem);
    }
}

/* Improved text-muted with larger, more readable sizes */
.text-muted {
    font-size: clamp(0.875rem, 2vw, 1.0625rem) !important;
    line-height: 1.5;
}

/* Responsive span text */
span {
    font-size: clamp(0.875rem, 2vw, 1rem);
    line-height: 1.4;
}

/* Ensure spans within specific contexts maintain readability */
.card span,
.table span,
.modal span {
    font-size: clamp(0.875rem, 2vw, 1rem);
}

/* Tablet adjustments (col-sm to col-md) */
@media (min-width: 577px) and (max-width: 991px) {
    .text-muted {
        font-size: clamp(0.9375rem, 2.2vw, 1.0625rem) !important;
    }
    
    span {
        font-size: clamp(0.9375rem, 2.2vw, 1.0625rem);
    }
    
    .card span,
    .table span,
    .modal span {
        font-size: clamp(0.9375rem, 2.2vw, 1.0625rem);
    }
}

/* Mobile adjustments (below col-sm) */
@media (max-width: 576px) {
    .text-muted {
        font-size: clamp(1rem, 3vw, 1.25rem) !important;
    }
    
    span {
        font-size: clamp(1rem, 3vw, 1.1875rem);
    }
    
    .card span,
    .table span,
    .modal span {
        font-size: clamp(1rem, 3vw, 1.1875rem);
    }
}

/* Responsive text for buttons */
.btn {
    font-size: clamp(0.8125rem, 1.8vw, 1rem) !important;
}

.btn-lg {
    font-size: clamp(0.9375rem, 2.1vw, 1.125rem) !important;
}

.btn-sm {
    font-size: clamp(0.75rem, 1.6vw, 0.875rem) !important;
}

/* Tablet button adjustments (col-sm to col-md) */
@media (min-width: 577px) and (max-width: 991px) {
    .btn {
        font-size: clamp(0.875rem, 2vw, 1.0625rem) !important;
    }
    
    .btn-lg {
        font-size: clamp(1rem, 2.3vw, 1.1875rem) !important;
    }
    
    .btn-sm {
        font-size: clamp(0.8125rem, 1.8vw, 0.9375rem) !important;
    }
}

/* Mobile button adjustments (below col-sm) */
@media (max-width: 576px) {
    .btn {
        font-size: clamp(0.9375rem, 2.5vw, 1.125rem) !important;
    }
    
    .btn-lg {
        font-size: clamp(1.0625rem, 2.8vw, 1.25rem) !important;
    }
    
    .btn-sm {
        font-size: clamp(0.875rem, 2.2vw, 1rem) !important;
    }
}




th, .table th {
    font-size: clamp(0.875rem, 1.9vw, 1rem);
    font-weight: 600;
}


.simple-table th {
    font-size: clamp(0.875rem, 1.9vw, 1rem);
}


.simple-table-info {
    font-size: clamp(0.75rem, 1.6vw, 0.875rem);
}

.simple-table-search {
    font-size: clamp(0.875rem, 2vw, 1rem);
}

/* Responsive text for navigation */
.navbar-nav .nav-link {
    font-size: clamp(0.875rem, 2vw, 1rem);
}

.dropdown-menu {
    font-size: clamp(0.8125rem, 1.8vw, 0.9375rem);
}

/* Responsive text for cards */
.card-title {
    font-size: clamp(1.125rem, 2.5vw, 1.25rem);
}

.card-text {
    font-size: clamp(0.875rem, 2vw, 1rem);
}

.card-header {
    font-size: clamp(0.9375rem, 2.1vw, 1.0625rem);
}

/* Responsive text for modals */
.modal-title {
    font-size: clamp(1.125rem, 2.5vw, 1.25rem);
}

.modal-body {
    font-size: clamp(0.875rem, 2vw, 1rem);
}

/* Responsive text for alerts */
.alert {
    font-size: clamp(0.875rem, 2.2vw, 1.25rem);
}

/* Responsive text for badges */
.badge {
    font-size: clamp(0.6875rem, 1.4vw, 0.75rem);
}

/* Responsive text for tabs */
.nav-tabs .nav-link {
    font-size: clamp(0.875rem, 2vw, 1rem);
}

/* Input and textarea responsive text */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="search"],
textarea,
select {
    font-size: clamp(0.875rem, 2vw, 1rem);
}

/* Placeholder text */
::placeholder {
    font-size: clamp(0.8125rem, 1.8vw, 0.9375rem);
}

/* Tooltip and popover text */
.tooltip {
    font-size: clamp(0.75rem, 1.6vw, 0.875rem);
}

.popover {
    font-size: clamp(0.8125rem, 1.8vw, 0.9375rem);
}

/* Breadcrumb text */
.breadcrumb {
    font-size: clamp(0.8125rem, 1.8vw, 0.9375rem);
}

/* Pagination text */
.pagination {
    font-size: clamp(0.875rem, 2vw, 1rem);
}

/* List group text */
.list-group-item {
    font-size: clamp(1rem, 2vw, 1.25rem);
}

/* Mobile-specific adjustments */
@media (max-width: 576px) {
    /* Slightly larger minimum sizes on very small screens for readability */
    body {
        font-size: clamp(0.9375rem, 2.2vw, 1rem);
    }
    
    p, .text-body {
        font-size: clamp(0.9375rem, 2.2vw, 1rem);
    }
    
    .btn {
        font-size: clamp(0.875rem, 2vw, 1rem) !important;
    }
    
    /* Ensure table text is readable on mobile */
    table, .table, .simple-table {
        font-size: clamp(0.875rem, 2vw, 1rem);
    }
}

/* Tablet adjustments */
@media (min-width: 577px) and (max-width: 991px) {
    html {
        font-size: clamp(15px, 2.2vw, 16px);
    }
}

/* Large screen adjustments */
@media (min-width: 1400px) {
    /* Cap the maximum sizes for very large screens */
    html {
        font-size: 16px;
    }
    
    h1, .h1 {
        font-size: 2.5rem !important;
    }
    
    h2, .h2 {
        font-size: 2rem !important;
    }
    
    h3, .h3 {
        font-size: 1.75rem !important;
    }
    
    h4, .h4 {
        font-size: 1.5rem !important;
    }
    
    h5, .h5 {
        font-size: 1.25rem !important;
    }
    
    h6, .h6 {
        font-size: 1rem !important;
    }
}

.is-invalid {
    border-color: #dc3545 !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

/* Hide tuition panel buttons by default until academic year is selected */
#tuitionPanelButtons .card {
    display: none;
}

a:hover {
    color: #f37d21 !important;
    outline: none;
    text-decoration: none;
}

.nav-item>a:hover {
    color: #f37d21 !important;
    outline: none;
}


.nav-tabs>li>a.active:hover {
    color: white !important;
}


.has-children.position-relative .dropdown {
    right: 0;
    left: auto;
    min-width: 200px;
    /* Adjust width as needed */
}

/* Ensure dropdown stays within viewport */
@media screen and (max-width: 991px) {
    .has-children.position-relative .dropdown {
        position: relative;
        width: 100%;
    }
}

/*makes containers input adjust to the div*/
.responsive-container>div {
    overflow: auto;
    padding: 0 3px;
}

/* Sticky Tabbed Pane Styles */
.tabbed-pane-container {
    position: relative;
}

.sticky-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 1020 !important;
    background-color: white !important;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 2px;
}

.sticky-tabs.border-0.shadow.rounded-3 {
    margin-bottom: 0 !important;
    border-radius: 0.375rem 0.375rem 0 0 !important;
}

/* General Tabbed Panel Scrollbar Styles */
.scrollable-tab-content {
    /* Set a reasonable max height for tab content */
    max-height: calc(100vh - 200px); /* Account for header, tabs, etc. */
    overflow-y: auto; /* Enable vertical scrolling when needed */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    position: relative;
    padding-bottom: 20px; /* Add some padding at bottom */
}

/* Custom scrollbar styling for tab content */
.scrollable-tab-content::-webkit-scrollbar {
    width: 12px;
    display: block;
}

.scrollable-tab-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 6px;
    margin: 10px 0; /* Add margin to top and bottom */
}

.scrollable-tab-content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 6px;
    border: 2px solid #f1f1f1;
}

.scrollable-tab-content::-webkit-scrollbar-thumb:hover {
    background: #555;
    border-color: #ddd;
}

/* Firefox scrollbar styling */
.scrollable-tab-content {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

/* Tab pane specific styles */
.tab-pane {
    padding: 15px 0; /* Add padding to tab content */
}

/* Ensure tab content is properly contained */
.tabbed-pane-container .tab-content {
    border: 1px solid #dee2e6;
    border-top: none;
    background: #fff;
    border-radius: 0 0 0.375rem 0.375rem;
    padding: 0 15px;
}



/* Ensure tabs remain accessible on small screens */
@media (max-width: 576px) {
    .sticky-tabs .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    
    .scrollable-tab-content {
        max-height: calc(100vh - 150px); /* Slightly less space needed on mobile */
    }
}

/* Medium screens */
@media (min-width: 577px) and (max-width: 991px) {
    .scrollable-tab-content {
        max-height: calc(100vh - 180px);
    }
}

/* Large screens */
@media (min-width: 992px) {
    .scrollable-tab-content {
        max-height: calc(100vh - 200px);
    }
}

.responsive-container div>input {
    margin: 0 -3px;
    width: 90%;
}

.capitalize {
    text-transform: uppercase !important;
}

/*makes column widths automatic for tables*/
table.table-fit {
    width: auto !important;
    table-layout: auto !important;
}

table.table-fit thead th,
table.table-fit tfoot th {
    width: auto !important;
}

table.table-fit tbody td,
table.table-fit tfoot td {
    width: auto !important;
}

.navbar-collapse.collapsing .navbar-nav {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: -45% !important;
    transition: all 0.2s ease !important;
}

.navbar-collapse.show .navbar-nav {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    flex-direction: column !important;
    height: auto !important;
    width: 45% !important;
    transition: left 0.35s ease !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Disable interaction with tabs when mobile navbar is open */
@media (max-width: 991px) {
    /* Create overlay to block all interactions when menu is open */
    body.menu-open::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 998;
        pointer-events: auto;
    }
    
    /* Disable ALL tab interactions when mobile menu is open */
    body.menu-open .sticky-tabs,
    body.menu-open .nav-tabs,
    body.menu-open ul.nav-tabs,
    body.menu-open .nav.nav-tabs,
    body.menu-open #printTabbedPanel,
    #mobile-menu.active ~ * .sticky-tabs,
    #mobile-menu.active ~ * .nav-tabs {
        pointer-events: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
    }

    body.menu-open .sticky-tabs *,
    body.menu-open .nav-tabs *,
    #mobile-menu.active ~ * .sticky-tabs *,
    #mobile-menu.active ~ * .nav-tabs * {
        pointer-events: none !important;
        cursor: default !important;
    }

    body.menu-open .sticky-tabs .nav-link,
    body.menu-open .nav-tabs .nav-link,
    body.menu-open .nav-tabs a,
    #mobile-menu.active ~ * .sticky-tabs .nav-link,
    #mobile-menu.active ~ * .nav-tabs .nav-link {
        opacity: 0.5 !important;
        cursor: default !important;
        pointer-events: none !important;
    }
    
    /* Ensure the mobile menu stays above everything */
    #mobile-menu,
    #mobile-menu-overlay {
        z-index: 9999 !important;
    }
    
    /* Simplified offcanvas menu styles */
    body.offcanvas-menu {
        overflow-x: hidden;
        position: relative;
    }
}


.dropdown-menu li {
    position: relative;
}

.dropdown-menu .dropdown-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -7px;
}

.dropdown-menu .dropdown-submenu-left {
    right: 100%;
    left: auto;
}

.dropdown-menu>li:hover>.dropdown-submenu {
    display: block;
}

#sticky-wrapper {
    height: 50px !important;
}

.limiter {
    height: inherit;
}

#indexLogo {
    width: 212pt;
}

.site-navigation {
    background-color: white;
}

.nav-item {
    text-align: center !important;
}

.navbar {
    padding: .0rem 1rem !important;
}

.page-category {
    color: white !important;
}

/* mobile navbar sidebar under lg breakpoint */
@media (max-width: 991px) {


    #indexLogo {
        width: 106pt;
    }

    .toggle-button {
        position: fixed;
        top: 0;
        right: 0;
        width: 100px;
        height: 60px;
        z-index: 1001;
        padding: 0;
        margin: 0;
        border: none;
        background: transparent;
        cursor: pointer;
    }

    .toggle-button .site-menu-toggle {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgb(222, 133, 57);
    }

    .toggle-button .icon-menu {
        color: white;
        font-size: 1.5rem;
        margin: 0;
        padding: 0;
        display: block;
        width: 100%;
        text-align: center;
    }

    .site-menu-toggle.js-menu-toggle {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

    .wrapper {
        /*padding-top:50pt !important;*/
        /*padding-top:6vh;*/
    }

  
    /*#generalBodyDiv {*/
    /*    padding-top: 3vh;*/
    /*}*/
    .page-category {
        padding-top: 0vh !important;
        color: white !important;

    }

    .login-logo {
     
        height: 70pt!important
    }

    .form-control {
        font-size: 3.0vw !important;
    }

    button {
        font-size: 3.0vw !important;
    }

    .nav-item a {
        font-size: 20px !important;
    }



    
    #mainNavBar {
        height: 7.5vh;
    }

    .report_card_review_student_table {
        height: 300px;
    }

    .adjustableFont1 {
        font-size: 5vw !important;
        font-weight: bolder !important;

        text-align: center !important;

    }

    .adjustableFont2 {
        font-size: 4.4vw !important;
        text-align: center !important;
    }

    .adjustableFont3 {
        font-size: 3.3vw !important;
        text-align: center !important;
    }

    .adjustableFont4 {
        font-size: 2.8vw !important;
        text-align: center;
    }

    .adjustableFont5 {
        font-size: 2.4vw !important;
        text-align: center !important;
    }

    .table-header table {
        font-size: 4.5vw !important;
    }

    .pre-scrollable>table>tbody>tr>td {
        font-size: 4.5vw !important;
    }

    .pre-scrollable table input {
        font-size: 4.5vw !important;
    }

    .customHeader1 {
        font-size: 5.4vw;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .customHeader2 {
        font-size: 5vw;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .customHeader3 {
        font-size: 4.4vw;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    #gradesDiv .nav>li>a {
        font-size: 16px;
        padding: 6px 6px !important;
    }

    #reportCardReviewTabs {
        height: 20px;
    }

    #reportCardReviewTabs li a {
        font-size: 4.3vw;
        height: 20px;
    }

    .navbar-brand img {
        width: 10vw !important;
    }

    .logo {
        display: none !important;
    }

    #reportCardsReviewCoursesDiv {
        height: 320px !important;
    }

    #reportCardsStudentsDiv {
        height: 350px !important;
    }

    .header-table td {
        font-size: 3.5vw !important;
    }

    .header-table th {
        font-size: 4.5vw !important;
    }



    .smallScreenRemove {
        display: none !important;
    }

    .staffSideBar {
        display: none !important;
    }

    div {
        box-sizing: border-box;
    }

    .top_site_main .page-title {
        font-size: 5vw !important;
        font-weight: 700 !important;
        color: #ffffff;

        padding-top: 15px !important; /* Fixed pixel padding */
        margin-bottom: 0 !important; /* Remove margin for proper height calculation */
    }

    .top_site_main {
        height: 60px !important; /* Fixed pixel height for mobile */
    }


    .dropdown-toggle {
        color: #666666;
    }


    .nav-tabs>li>a {
        line-height: 1;
        font-size: 3vw !important;
    }


    .ls-row-border {
        padding: 0px !important;
        border: none;
    }

}


.clicked {
    background-color: #999
}

/* Fix for Safari/iOS table row selection */
.book-row.bg-success,
tr.bg-success,
.bg-success {
    background-color: #28a745 !important;
    -webkit-tap-highlight-color: transparent;
}

div {
    box-sizing: border-box;
}

#reportCardReviewTabs li.active a {
    background-color: transparent;
    color: #337ab7;
}


.customHeader1 {
    font-size: 36px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.customHeader2 {
    font-size: 32px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.customHeader3 {
    font-size: 28px;
    padding-top: 20px;
    padding-bottom: 20px;
}


nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    color: white !important;
    cursor: default;
    background-color: #014178;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
    outline: none;
}


.navBackgroundLayer a {
    color: rgb(188, 188, 188);
}

.headerNavbar li a {
    font-family: Roboto Slab;
    color: #777;
    font-size: 16px;
}


/* Start by setting display:none to make this hidden.   Then we position it in relation to the viewport window   with position:fixed. Width, height, top and left speak   for themselves. Background we set to 80% white with   our animation centered, and no-repeating */
/* changes  color for placeholder for multiple browsers*/
::-webkit-input-placeholder {
    color: #70ACE9;
}

::-moz-placeholder {
    color: #c0392b;
}

/* Firefox 19+ */
:-moz-placeholder {
    color: #c0392b;
}

/* Firefox 18- */
:-ms-input-placeholder {
    color: #c0392b;
}

/* wraps placeholders better if they don't fit */
input[placeholder] {
    text-overflow: ellipsis;
}

input::-moz-placeholder {
    text-overflow: ellipsis;
}

input:-moz-placeholder {
    text-overflow: ellipsis;
}

input:-ms-input-placeholder {
    text-overflow: ellipsis;
}


html,
body {

    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

footer {
    background: #e0f2f7;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 200px;
}

#payment-errors p {
    color: white;
    background-color: #666666;
}

.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
    background-color: #dae3ff;
}

/* Uniform table cell padding for consistent spacing across all screen sizes */
.table-sm td, .table-sm th {
    padding: 0.5rem !important;
}

/* Ensure small tags within tables display as block for consistent rendering */
table small, .table small {
    display: block;
}

/* Add consistent margin between content in table cells */
table td > div:not(:last-child), .table td > div:not(:last-child) {
    margin-bottom: 0.25rem;
}

.nav active {
    background-color: skyblue;
}

.nav-link:hover {
    color: #f37d21 !important;
}

.nav-link.active {
    background-color: #f37d21 !important;
    color: #fff !important;
}

.nav-link {
    /*color: #535252e6 !important;*/
    color: black !important;
    border-radius: 4pt !important;
    border-color: black !important;
    font-size: 15pt;
    padding: .4rem 0.9rem !important;
    font-size: 20px !important;
    text-align: center !important;
}


td {
    color: #333333;
    font-size: 21px;
    font-weight: 700;
    font-style: normal;
    text-transform: none;
    line-height: 1.6em;
}

.header-table th {
    /*word-break:break-all;    */
    text-align: center;
    color: #333333;
    font-size: 20px;
    font-weight: bolder;
    font-style: normal;
    text-transform: none;
    line-height: 1.4em;
    border: 1px solid #CCC;
}

.header-table td {
    /*word-break:break-all;    */
    text-align: center;
    color: #333333;
    font-size: 20px;
    font-weight: bolder;
    font-style: normal;
    text-transform: none;
    line-height: 1.4em;
    border: 1px solid #CCC;
}

.sq-input>input {
    -webkit-user-select: auto !important;
}

.sq-input {
    border: 1px solid #cccccc;
    margin-bottom: 10px;
    padding: 1px;
    -webkit-user-select: auto !important;
}

.sq-input--focus {
    outline-width: 5px;
    outline-color: #70ACE9;
    outline-offset: -1px;
    -webkit-user-select: auto !important;
    outline-style: auto;
}

.sq-input--error {
    outline-width: 10px;
    outline-color: #f80704;
    outline-offset: 0px;
    outline-style: auto;
}

/* Improved Select Styling with Responsive Font Sizes */
select {
    text-align: center;
    color: #212529 !important;  /* Changed from orange to dark text for better readability */
    font-weight: 500 !important;  /* Make selected text slightly bold */
    height: clamp(40px, 4.5vh, 45px) !important;
    padding: clamp(8px, 1vh, 10px) clamp(12px, 1.5vw, 14px) !important;
    padding-right: clamp(35px, 4vw, 40px) !important;  /* Responsive space for dropdown arrow */
    font-size: clamp(0.9375rem, 2.2vw, 1.125rem) !important;  /* Larger, more responsive font */
    line-height: 1.5 !important;
    overflow-y: auto !important;
    scroll-behavior: smooth !important;
    border: 2px solid #f17b20 !important;  /* Orange border to indicate selection */
    border-radius: 0.25rem !important;
    background-color: #fff8f3 !important;  /* Light orange tint background */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f17b20' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right clamp(0.75rem, 1.5vw, 1rem) center !important;
    background-size: clamp(16px, 2vw, 20px) clamp(12px, 1.5vw, 15px) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    transition: all 0.2s ease-in-out !important;
}

select:hover {
    border-color: #ff8c42 !important;
    background-color: #fff3e8 !important;
}

select:focus {
    border-color: #f17b20 !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.2rem rgba(241, 123, 32, 0.25) !important;
    background-color: white !important;
}

select option {
    color: #333333 !important;
    padding: 8px 12px;
    font-size: 0.95rem;
    line-height: 1.4;
    white-space: normal;
    background-color: #f8f9fa !important;
}

select option:checked {
    background-color: #f17b20;
    background-image: none;
    color: white;
    font-weight: 600;
}

select option:hover {
    background-color: #fff3e8;
    color: #f17b20;
    cursor: pointer;
}

/* Disabled option styling */
select option:disabled {
    color: #6c757d;
    background-color: #e9ecef;
    cursor: not-allowed;
}

/* Custom scrollbar for select */
select::-webkit-scrollbar {
    width: 12px !important;
}

select::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 4px !important;
}

select::-webkit-scrollbar-thumb {
    background: #888 !important;
    border-radius: 4px !important;
}

select::-webkit-scrollbar-thumb:hover {
    background: #555 !important;
}

/* Firefox scrollbar */
select {
    scrollbar-width: thin !important;
    scrollbar-color: #888 #f1f1f1 !important;
}

/* Multiple select */
select[multiple] {
    height: auto !important;
    min-height: clamp(100px, 15vh, 150px) !important;
    max-height: clamp(200px, 30vh, 300px) !important;
    background-image: none !important;
}

/* Size attribute select */
select[size] {
    height: auto !important;
    max-height: clamp(200px, 30vh, 300px) !important;
    background-image: none !important;
}

select[size="1"] {
    height: clamp(38px, 4vh, 42px) !important;
}

/* Tablet responsiveness (col-sm to col-md) */
@media (min-width: 577px) and (max-width: 991px) {
    select {
        font-size: clamp(1rem, 2.5vw, 1.1875rem) !important;
        height: clamp(41px, 5vh, 46px) !important;
        padding: clamp(8px, 1.1vh, 10px) clamp(12px, 1.8vw, 15px) !important;
        padding-right: clamp(36px, 4.2vw, 42px) !important;
        background-size: clamp(17px, 2.3vw, 20px) clamp(13px, 1.8vw, 16px) !important;
    }
    
    select option {
        font-size: clamp(1rem, 2.5vw, 1.1875rem) !important;
        padding: clamp(9px, 1.3vh, 11px) clamp(13px, 2vw, 17px) !important;
    }
}

/* Mobile responsiveness (below col-sm) */
@media (max-width: 576px) {
    select {
        font-size: clamp(1.0625rem, 3.5vw, 1.3125rem) !important;  /* Larger font on small mobile */
        height: clamp(44px, 6vh, 50px) !important;
        padding: clamp(10px, 1.5vh, 12px) clamp(14px, 2.5vw, 18px) !important;
        padding-right: clamp(40px, 5vw, 48px) !important;
        background-size: clamp(20px, 3vw, 24px) clamp(15px, 2.5vw, 18px) !important;
    }
    
    select option {
        font-size: clamp(1.0625rem, 3.5vw, 1.3125rem) !important;
        padding: clamp(11px, 1.8vh, 13px) clamp(15px, 2.8vw, 20px) !important;
    }
}

/* Exclude select boxes from colored header white text inheritance */
.bg-info select,
.bg-success select,
.bg-primary select,
.bg-danger select,
.bg-warning select,
.text-white select,
.card-header select {
    color: #212529 !important;
    background-color: white !important;
}

.bg-info select option,
.bg-success select option,
.bg-primary select option,
.bg-danger select option,
.bg-warning select option,
.text-white select option,
.card-header select option {
    color: #333333 !important;
    background-color: #f8f9fa !important;
}

.bg-info select option:checked,
.bg-success select option:checked,
.text-white select option:checked,
.card-header select option:checked {
    background-color: #f17b20 !important;
    color: white !important;
}

#map {
    height: 400px;
}

.navBarLogo {
    height: 20%;
    width: 20%;
    margin-left: -10px;
}

ul#nav li.active a {
    color: #f4ba51;
}

.table-scroll tbody {
    position: absolute;
    overflow-y: scroll;
    height: 400px;
}

.table-scroll tr {
    width: 100%;
    table-layout: fixed;
    display: inline-table;
}

.table-scroll thead>tr>th {
    border: none;
}

.report-card-table-scroll tbody {
    position: absolute;
    overflow-y: scroll;
    height: 250px;
}

.report-card-table-scroll tr {
    width: 100%;
    table-layout: fixed;
    display: inline-table;
}

.shopping-table-scroll tbody {
    position: absolute;
    overflow-y: scroll;
    height: 300px;
}

.shopping-table-scroll tr {
    width: 100%;
    table-layout: fixed;
    display: inline-table;
}

.shopping-table-scroll thead>tr>th {
    border: none;
}

.report-card-table-scroll thead>tr>th {
    border: none;
}

.well {
    /*class that must be included in column div containing a table-scroll table*/
    background: none;
    height: 320px;
}

#cover {
    background: url("/media/ripple.gif") no-repeat scroll center center #FFF;
    position: absolute;
    height: 100%;
    width: 100%;
    display: block;
    left: 200pt;
    top: 200pt;
}

.mask {
    display: none;
    /*This hides the mask*/
}

/*.mask{ background: #000; z-index: 9; opacity: 0.5; position:fixed; top: 0; left: 0; width: 100%; height:100%;}*/
/* Loading modal specific styles - renamed to avoid conflict with Bootstrap modals */
.loading-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, .8) url('../media/btn-ajax-loader.gif') 50% 50% no-repeat;
}

/* When the body has the loading class, we turn   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;
}

/* Anytime the body has the loading class, our loading-modal element will be visible */
body.loading .loading-modal {
    display: block;
}

/* Remove modal backdrop entirely for all modals - Global setting */
.modal-backdrop {
    display: none !important;
}

/* Ensure modals still have proper z-index without backdrop */
.modal {
    z-index: 1050 !important;
}

/* Ensure form controls in modals work properly */
.modal .form-control {
    position: relative;
    z-index: 1;
}

.footerNavbar {
    font-weight: 700;
    font-style: normal;
    text-transform: none;
    font-family: Roboto Slab;
}

.footerNavbar>li>a {
    color: #333333;
    font-size: 14pt;
    line-height: 1.6em;
}


.align-middle {
    text-align: center;
}

.parentCustomForm {
    width: 100%;
    border: .5em solid #ccc;
    border-radius: .5em;
    padding-top: 1em;
    padding-bottom: 1em;
}

.parentGradesParemeterForm {
    width: 100%;
    border: .5em solid #ccc;
    border-radius: .5em;
    padding-top: 1em;
    padding-bottom: 1em;
}

.parentGradesForm {
    width: 100%;
    border: .5em solid #ccc;
    border-radius: .5em;
    padding-top: 1em;
    padding-bottom: 1em;
}

.toolbar {
    background-color: #000000;
    font-family: Roboto;
    font-size: 14px;
    font-weight: normal;
    color: #ffffff;
    line-height: 30px;
    font-weight: 200;
}

td {
    border: 1px #DDD solid;
    padding: 5px;
    cursor: pointer;
}

li:hover {
    cursor: pointer;
}

input:hover {
    cursor: pointer;
}

.hidden {
    display: none;
}

.highlighted-tr {
    background-color: #999fff;
}

.selected {
    background-color: brown;
    color: #FFF;
}

.special-header {
    font-size: 34px;
    text-align: center;
    font-weight: 600;
    color: #000000;
}

.float-right {
    float: right;
}

.a_right {
    float: right;
}

#bg {
    background: url('../_aca_upload/background_img.jpg') no-repeat center center;
    height: 500px;
    background-size: 100% auto;
}

.square-logo {
    padding-top: 10pt;
    padding-bottom: 20pt;
    background: url('../media/square_logo.png') no-repeat center center;
    height: 100pt;
    background-size: 100% auto;
}

.top_site_main {
    color: rgb(255, 255, 255);
    height: 80px; /* Fixed pixel height instead of 10vh */
    /*background-color: rgb(188, 188, 188);*/
    /*background-color: rgb(19, 20, 71);*/
    background-color: #f37d21;
    ;

    /*background-image:url('/_aca_upload/sunset_background.jpg');               background-repeat: no-repeat;               background-size: 100% auto;*/
}

.top_site_main .logo {
    display: block;
    max-width: 80%;
    height: 100%;
    padding-left: 14pt;
    padding-top: 20px; /* Fixed pixel padding instead of vh */
    width: auto;
}

.top_site_main .page-category {
    font-size: 22pt;
    font-weight: 700;
    padding-left: 30pt;
    padding-top: 25px; /* Fixed pixel padding instead of vh */
    color: white;
}

.top_site_main .page-title {
    text-align: center;
    padding-top: 25px; /* Fixed pixel padding instead of vh */
    font-size: 2.0vw;
    font-weight: 600;
    color: white;
}



.main-padding {
    padding-top: 100px;
}


body {
    font-family: Roboto Slab;
    font-size: 18px;
    font-weight: normal;
    line-height: 1.6em;
    color: #666666;
}

h1 {
    font-size: 36px;
    font-weight: 700;
    font-style: normal;
    text-transform: none;
    line-height: 1.5;
}

h2 {
    color: #333333;
    font-size: 28px;
    font-weight: 700;
    font-style: normal;
    text-transform: none;
    line-height: 1.3;
}

h3 {
    color: #333333;
    font-size: 24px;
    font-weight: 700;
    font-style: normal;
    text-transform: none;
    line-height: 1.1;
}

h4 {
    color: #333333;
    font-size: 21px;
    font-weight: 700;
    font-style: normal;
    text-transform: none;
    line-height: 1;

}

h5 {
    color: #333333;
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    text-transform: none;
    line-height: 1;
}

h6 {
    color: #333333;
    font-size: 15px;
    font-weight: 700;
    font-style: normal;
    text-transform: none;
    line-height: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Roboto Slab;
    text-align: center;
}

a {
    /*font-size: 18px;*/
    color: #000000;
    font-weight: 600;
    outline: none;
}


/*Vertical Tabs*/
.mdl-tabs__panel {
    display: none;
}

.vertical-mdl-tabs {
    margin-top: 30px;
}

.vertical-mdl-tabs .mdl-tabs__tab-bar {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-bottom: 35px;
    height: inherit;
    border-bottom: none;
    border-right: 1px solid rgba(10, 11, 49, 0.20);
}

.vertical-mdl-tabs .mdl-tabs__tab {
    width: 100%;
    height: 35px;
    line-height: 35px;
    box-sizing: border-box;
    letter-spacing: 2px;
}

.vertical-mdl-tabs .mdl-tabs__tab:hover {
    background: rgba(158, 158, 158, 0.34);
    color: black;
}

.vertical-mdl-tabs.mdl-tabs.is-upgraded a.mdl-tabs__tab.is-active {
    border-right: 3px solid #ED462F;
}

.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
    content: inherit;
    height: 0;
}

.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__panel.is-active,
.mdl-tabs__panel {
    padding: 0 30px;
}

.vertical-mdl-tabs.mdl-tabs .mdl-tabs__tab {
    text-align: left;
}

.text-center {
    text-align: center;
}

.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active {
    color: #E21549;
}


/*breaks the table content if its too long so it doesn't make a huge td*/
table.simple-table thead tr th {
    word-wrap: break-word;
    /*word-break: break-all;*/
}

td {
    white-space: pre-wrap !important;
    word-wrap: break-word;
}


.staffPanelButton {
    cursor: pointer;
}

a.one {
    font-size: 30px;
    color: #000000;
}

a.one:hover {
    color: #00c;
}

.top-links {
    padding-top: 1.6em;
}

.headerNavbar {
    color: #333333;
    font-size: 25px;
    font-weight: 700;
    font-style: normal;
    text-transform: none;
    line-height: 1.6em;
    font-family: Roboto Slab;
}

.spinner {
    width: 100px;
}

.spinner input {
    text-align: right;
}

.input-group-btn-vertical {
    position: relative;
    white-space: nowrap;
    width: 1%;
    vertical-align: middle;
    display: table-cell;
}

.input-group-btn-vertical>.btn {
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
    padding: 8px;
    margin-left: -1px;
    position: relative;
    border-radius: 0;
}

.input-group-btn-vertical>.btn:first-child {
    border-top-right-radius: 4px;
}

.input-group-btn-vertical>.btn:last-child {
    margin-top: -2px;
    border-bottom-right-radius: 4px;
}

.input-group-btn-vertical i {
    position: absolute;
    top: 0;
    left: 4px;
}

.block {
    display: block;
}

.logo {
    display: block;
    max-width: 80%;
    height: 100%;
    padding-left: 14pt;
    padding-top: 2.5vh;
    width: auto;
}


.row-border {
    padding: 5px;
    border: 5px solid;
    border-color: #11733a;
    ;
    border-bottom-style: groove;
}

.ls-row-border {
    padding: 5px;
    border: 5px solid;
    border-color: #807d7d;
    border-bottom-style: groove;
}

.event-border {
    padding: 8px;
    border: 10px solid;
    border-radius: 25px;
    border-color: #6e98fe #5485fe;
}

.table-css {
    font-size: 17px;
}

.pre-scrollable {
    /*margin-top: -20px;*/
}


.top-nav-font:hover {
    color: rgba(0, 0, 0, 1) !important;
    outline: none;
}


#mainNavBar {
    height: 6vh;
}

/* instead of writing importants, just stick it in max width since these classes are not shared between sizes */
/*max-width used to be 767*/


@media (min-width: 992px) {

    .toggle-button {
        display: none !important;
    }

    .top-nav-font {
        font-size: 15pt;
        /*color: rgba(0, 0, 0, .5);*/
        color: black;

    }

    .report_card_review_student_table {
        height: 964px;
    }

    .page-title {
        /*padding-top: 35pt;*/
        font-size: 2.0vw;
        padding-top: 5.5vh;
    }


    .largeScreenRemove {
        display: none !important;
    }

    #mainPanelDiv {
        left: 0 !important
    }

    .navbar.navbar-fixed-top.slide-active {
        position: fixed
    }

    .navbar-header {
        left: 0 !important
    }

    .adjustableFont4 {
        font-size: 19px !important;
        text-align: center !important;
    }

    .adjustableFont5 {
        font-size: 15px !important;
        text-align: center !important;
    }

    .adjustableFont3 {
        font-size: 24px !important;
        text-align: center !important;
    }

    .adjustableFont2 {
        font-size: 26px !important;
        font-weight: bold !important;
        text-align: center !important;
    }

    .adjustableFont1 {
        font-size: 32pt !important;
        font-weight: bolder !important;
        text-align: center !important;

    }

}


.top-bar {
    padding: .5rem 0;
    background: #eee;
}

.top-bar a {
    color: #666666;
}

.site-navbar {
    margin-bottom: 0px;
    z-index: 1999;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 1rem;
    height: 56px;
    background: white;
    /*height: 50pt;*/
}


.site-navbar .toggle-button {
    position: absolute;
    right: 0px;
}

.site-navbar .site-logo {
    position: absolute;
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: 900;
    line-height: 0;
    margin: 0;
    padding: 0;
    z-index: 3;
}



.site-navbar .site-navigation.border-bottom {
    border-bottom: 1px solid white !important;
}

.site-navbar .site-navigation .site-menu {
    margin-bottom: 0;
}

.site-navbar .site-navigation .site-menu .active {
    color: #007bff !important;
}

.site-navbar .site-navigation .site-menu a {
    text-decoration: none !important;
    display: inline-block;
}

.site-navbar .site-navigation .site-menu>li {
    display: inline-block;
}

.site-navbar .site-navigation .site-menu>li>a {
    /*margin-left: 3px;*/
    /*margin-right: 3px;*/
    /*padding: 20px 0px;*/
    color: #000 !important;
    display: inline-block;
    text-decoration: none !important;
}

.site-navbar .site-navigation .site-menu>li>a:hover {
    color: #f37d21 !important;
}

.site-navbar .site-navigation .site-menu .has-children {
    position: relative;
}

.site-navbar .site-navigation .site-menu .has-children>a {
    position: relative;
    padding-right: 20px;
}

.site-navbar .site-navigation .site-menu .has-children>a:before {
    content: "\e313";
    font-family: 'icomoon';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown {
    visibility: hidden;
    opacity: 0;
    top: 100%;
    position: absolute;
    text-align: left;
    border-top: 2px solid #007bff;
    -webkit-box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
    padding: 0px 0;
    margin-top: 20px;
    margin-left: 0px;
    background: #fff;
    -webkit-transition: 0.2s 0s;
    -o-transition: 0.2s 0s;
    transition: 0.2s 0s;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown.arrow-top {
    position: absolute;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown.arrow-top:before {
    display: none;
    bottom: 100%;
    left: 20%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown.arrow-top:before {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #fff;
    border-width: 10px;
    margin-left: -10px;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown a {
    text-transform: none;
    letter-spacing: normal;
    -webkit-transition: 0s all;
    -o-transition: 0s all;
    transition: 0s all;
    color: #000 !important;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown a.active {
    color: #f37d21 !important;
    background: #f8f9fa;
}

/* Consistent header styling for all tuition portal tabs */
.alert-info {
    border-left: 4px solid #17a2b8;
}

.alert-info h5 {
    color: #0c5460;
}

.alert-info p {
    color: #0c5460;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown>li {
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 200px;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown>li>a {
    padding: 9px 20px;
    display: block;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown>li>a:hover {
    background: #f8f9fa;
    color: #ced4da;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown>li.has-children>a:before {
    content: "\e315";
    right: 20px;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown>li.has-children>.dropdown,
.site-navbar .site-navigation .site-menu .has-children .dropdown>li.has-children>ul {
    left: 100%;
    top: 0;
}

.site-navbar .site-navigation .site-menu .has-children .dropdown>li.has-children:hover>a,
.site-navbar .site-navigation .site-menu .has-children .dropdown>li.has-children:active>a,
.site-navbar .site-navigation .site-menu .has-children .dropdown>li.has-children:focus>a {
    background: #f8f9fa;
    color: #f37d21;
}

.site-navbar .site-navigation .site-menu .has-children:hover>a,
.site-navbar .site-navigation .site-menu .has-children:focus>a,
.site-navbar .site-navigation .site-menu .has-children:active>a {
    color: #f37d21;
}

.site-navbar .site-navigation .site-menu .has-children:hover,
.site-navbar .site-navigation .site-menu .has-children:focus,
.site-navbar .site-navigation .site-menu .has-children:active {
    cursor: pointer;
}

.site-navbar .site-navigation .site-menu .has-children:hover>.dropdown,
.site-navbar .site-navigation .site-menu .has-children:focus>.dropdown,
.site-navbar .site-navigation .site-menu .has-children:active>.dropdown {
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
    margin-top: 0px;
    visibility: visible;
    opacity: 1;
}

/* Mobile menu - slides in from right */
.site-mobile-menu {
    width: 300px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2000;
    background: #fff;
  
    transform: translateX(100%);
    box-shadow: -10px 0 20px -10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
}

/* Show mobile menu when active */
.offcanvas-menu .site-mobile-menu {
    transform: translateX(0);
}

/* Add dark overlay when menu is open */
body.offcanvas-menu::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1999;
}

/* Remove mobile menu overlay - using only the sidebar */

/* Force mobile menu content to be visible */
.site-mobile-menu-body * {
    visibility: visible !important;
    opacity: 1 !important;
}

.site-mobile-menu-body .nav-link {
    display: block !important;
    padding: 10px 20px !important;
    color: #212529 !important;
    text-decoration: none !important;
}

.site-mobile-menu-body .nav-link:hover {
    color: #f37d21 !important;
    background-color: #f8f9fa !important;
}

/* Submenu styles in mobile */
.site-mobile-menu .has-children > ul,
.site-mobile-menu .has-children .collapse {
    padding-left: 20px !important;
    margin-top: 5px !important;
}

/* Fix toggle button click area */
.toggle-button {
    cursor: pointer !important;
    pointer-events: all !important;
}

.toggle-button * {
    pointer-events: none !important;
}

.js-menu-toggle {
    pointer-events: all !important;
    cursor: pointer !important;
}

.js-menu-toggle span {
    pointer-events: none !important;
}

/* Media query for mobile and tablets (col-md and below) */
@media (max-width: 991px) {
    /* Mobile menu is always ready, no need to show/hide based on screen size */
    
    /* Hide desktop menu items on mobile/tablet */
    .site-menu.main-menu.d-lg-block {
        display: none !important;
    }
    
    /* Show toggle button on mobile/tablet */
    .toggle-button {
        display: inline-block !important;
    }
    
    /* Ensure mobile menu items are visible */
    .site-mobile-menu .nav-item {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .site-mobile-menu .dropdown {
        display: block !important;
    }
}

/* Media query for large screens (col-lg and above) */
@media (min-width: 992px) {
    /* Hide mobile toggle button on larger screens */
    .toggle-button {
        display: none !important;
    }
    
    /* Show desktop menu */
    .site-menu.main-menu {
        display: flex !important;
    }
    
    /* Hide mobile menu on desktop - transform it off screen */
    .site-mobile-menu {
        transform: translateX(110%) !important;
    }
    
    /* Remove overlay on desktop */
    body.offcanvas-menu::before {
        display: none !important;
    }
}

.site-mobile-menu .site-mobile-menu-header {
    width: 100%;
    float: left;
    padding: 15px 20px;
    border-bottom: none !important; /* Remove dividing line */
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close {
    float: right;
    margin-top: 0;
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span {
    font-size: 36px; /* Moderate size */
    font-weight: bold; /* Semi-bold instead of bold */
    display: inline-block;
    width: 38px;
    height: 38px;
    text-align: center;
    line-height: 34px;
    cursor: pointer;
    color: #555; /* Slightly lighter color */
    border-radius: 4px;
    transition: all 0.3s ease;
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span:hover {
    color: #f37d21;
    background-color: #f8f9fa;
    transform: scale(1.05); /* Subtle scale on hover */
}


.site-mobile-menu .site-mobile-menu-body {
    overflow-y: auto; /* Change to auto - only show scrollbar when needed */
    overflow-x: hidden; /* Hide horizontal scrollbar */
    -webkit-overflow-scrolling: touch;
    position: relative;
    padding: 0px 10px 20px 10px; /* Add top padding since no border */
    height: calc(100vh - 70px); /* Adjust height for new header size */
    padding-bottom: 150px;
    border-top: none !important; /* Ensure no border */
}

/* Hide scrollbar for webkit browsers */
.site-mobile-menu .site-mobile-menu-body::-webkit-scrollbar {
    width: 0;
    display: none;
}

/* Hide scrollbar for Firefox */
.site-mobile-menu .site-mobile-menu-body {
    scrollbar-width: none;
}

.site-mobile-menu .site-nav-wrap {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.site-mobile-menu .site-nav-wrap a {
    padding: 10px 20px;
    display: block !important;
    position: relative;
    color: #212529;
    visibility: visible !important;
    opacity: 1 !important;
    text-align: right; /* Right-align all menu text */
    padding-right: 20px; /* Default padding */
}

/* Items with children need extra space for arrow */
.site-mobile-menu .site-nav-wrap .has-children > a {
    padding-right: 56px; /* Space for arrow */
}

/* Items without children align flush right */
.site-mobile-menu .site-nav-wrap li:not(.has-children) > a {
    padding-right: 20px; /* Flush to the right edge like arrows */
}

.site-mobile-menu .site-nav-wrap a:hover {
    color: #f37d21;
}

.site-mobile-menu .site-nav-wrap li {
    position: relative;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.site-mobile-menu .site-nav-wrap li .nav-link.active {
    color: #f37d21;
}

.site-mobile-menu .site-nav-wrap .arrow-collapse {
    position: absolute;
    right: 20px; /* Same as padding-right for flush alignment */
    top: 10px;
    z-index: 20;
    width: 36px;
    height: 36px;
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
}

.site-mobile-menu .site-nav-wrap .arrow-collapse:hover {
    background: #f8f9fa;
}

.site-mobile-menu .site-nav-wrap .arrow-collapse:before {
    font-size: 12px;
    z-index: 20;
    font-family: "icomoon";
    content: "\f078";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(-180deg);
    -ms-transform: translate(-50%, -50%) rotate(-180deg);
    transform: translate(-50%, -50%) rotate(-180deg);
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease;
}

.site-mobile-menu .site-nav-wrap .arrow-collapse.collapsed:before {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.site-mobile-menu .site-nav-wrap>li {
    display: block;
    position: relative;
    float: left;
    width: 100%;
}

.site-mobile-menu .site-nav-wrap>li>a {
    padding-left: 20px;
    font-size: 20px;
}

.site-mobile-menu .site-nav-wrap>li>ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.site-mobile-menu .site-nav-wrap>li>ul>li {
    display: block;
}

.site-mobile-menu .site-nav-wrap>li>ul>li>a {
    padding-left: 40px;
    font-size: 16px;
}

.site-mobile-menu .site-nav-wrap>li>ul>li>ul {
    padding: 0;
    margin: 0;
}

.site-mobile-menu .site-nav-wrap>li>ul>li>ul>li {
    display: block;
}

.site-mobile-menu .site-nav-wrap>li>ul>li>ul>li>a {
    font-size: 16px;
    padding-left: 60px;
}

.site-mobile-menu .site-nav-wrap[data-class="social"] {
    float: left;
    width: 100%;
    margin-top: 30px;
    padding-bottom: 5em;
}

.site-mobile-menu .site-nav-wrap[data-class="social"]>li {
    width: auto;
}

.site-mobile-menu .site-nav-wrap[data-class="social"]>li:first-child a {
    padding-left: 15px !important;
}

.sticky-wrapper {
    position: relative;
    z-index: 100;
    width: 100%;
}

.sticky-wrapper .site-navbar {
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease;
}

.sticky-wrapper .site-navbar {
    background: #fff;
}

.sticky-wrapper .site-navbar .site-logo a {
    color: #fff;
}

.sticky-wrapper .site-navbar ul li a {
    color: rgba(255, 255, 255, 0.7) !important;
}

.sticky-wrapper .site-navbar ul li a.active {
    color: #fff !important;
}

.sticky-wrapper.is-sticky .site-navbar {
    background: #fff;
    -webkit-box-shadow: 4px 0 20px -5px rgba(0, 0, 0, 0.2);
    box-shadow: 4px 0 20px -5px rgba(0, 0, 0, 0.2);
}

.sticky-wrapper.is-sticky .site-navbar .site-logo a {
    color: #007bff;
}

.sticky-wrapper.is-sticky .site-navbar ul li a {
    color: #000 !important;
}

.sticky-wrapper.is-sticky .site-navbar ul li a.active {
    color: #007bff !important;
}

.sticky-wrapper .shrink {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}


select,
select option {
    vertical-align: middle !important;
}

.nav-item a:hover {
    color: #f37d21 !important;
}

/*body {*/
/*    !*font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";*!*/
/*    background-color: #fff;*/
/*    height: 200vh;*/
/*    position: relative; }*/
/*body:before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    background: rgba(0, 0, 0, 0.5);*/
/*    -webkit-transition: .3s all ease;*/
/*    -o-transition: .3s all ease;*/
/*    transition: .3s all ease;*/
/*    opacity: 0;*/
/*    visibility: hidden;*/
/*    z-index: 1; }*/
/*body.offcanvas-menu:before {*/
/*    opacity: 1;*/
/*    z-index: 1002;*/
/*    visibility: visible; }*/

/* Button styles with light orange shadow */
.border-0.shadow.rounded-3 {
    box-shadow: 0 0.5rem 1rem rgba(241, 123, 32, 0.15) !important;
}

.border-0.shadow.rounded-3:hover {
    box-shadow: 0 0.5rem 1rem rgba(241, 123, 32, 0.25) !important;
}

/* Cursor pointer for interactive elements */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="color"],
input[type="file"],
input[type="range"],
input[type="radio"],
input[type="checkbox"],
select,
textarea,
button,
.btn,
[role="button"],
a[href] {
    cursor: pointer;
}

/* Make input buttons bolder */
input[type="button"],
input[type="submit"],
button {
    font-weight: 700 !important;
}

/* Make labels and select inputs bolder */
label,
select,
select option {
    font-weight: 700 !important;
}

input[type="button"]:hover,
input[type="submit"]:hover {
    color: #f17b20;
}

#slidemenu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 300px;
    height: 100vh;
    background: #fff;
    z-index: 1000;
    transition: left 0.3s ease;
    overflow-y: auto;
}

#slidemenu.slide-active {
    left: 0;
}

#page-content {
    position: relative;
    transition: left 0.3s ease;
    z-index: 1;
}

#page-content.slide-active {
    left: 300px;
}

.navbar-header {
    position: relative;
    transition: left 0.3s ease;
}

.navbar-header.slide-active {
    left: 300px;
}

body.slide-active {
    overflow-x: hidden;
    position: relative;
}


/* Mobile Menu Panel */
@media (max-width: 991.98px) {


    .site-navbar {
        /*padding-bottom: 20pt !important;*/
        height: 0vh !important;
        padding: 0vh !important;
    }

    /* Mobile Menu Button Styling */
    .toggle-button {
        position: fixed;
        top: 0;
        right: 0;
        width: 100px;
        height: 60px;
        z-index: 1001;
        padding: 0;
        margin: 0;
        border: none;
        background: transparent;
        cursor: pointer;
    }

    .toggle-button .site-menu-toggle {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgb(222, 133, 57);
    }

    .toggle-button .icon-menu {
        color: white;
        font-size: 1.5rem;
        margin: 0;
        padding: 0;
        display: block;
        width: 100%;
        text-align: center;
    }

    .site-menu-toggle.js-menu-toggle {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

    /* Mobile Menu Panel */
    #mobile-menu {
        position: fixed;
        top: 0;
        right: -300px;
        width: 300px;
        height: 100vh;
        background: #fff;
        z-index: 1000;
        transition: right 0.3s ease;
        overflow-y: auto;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    }

    #mobile-menu.active {
        right: 0;
    }

    #mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        display: none;
        transition: opacity 0.3s ease;
    }

    #mobile-menu-overlay.active {
        display: block;
        opacity: 1;
    }

    .mobile-menu-header {
        padding: 10px 15px;
        text-align: right;
    }

    .mobile-menu-close {
        cursor: pointer;
        font-size: 30px !important;
        color: #333;
        padding: 5px 10px;
        background: transparent;
        border: none;
        z-index: 2;
        transition: color 0.3s ease;
        line-height: 1;
    }

    .mobile-menu-close:hover {
        color: #f37d21;
    }

    .mobile-menu-content {
   
        padding-left:3vh;
        padding-right:3vh;
        padding-bottom: 6vh;
    }

    .mobile-menu-content .nav-item {
        margin-bottom: 10px;
    }

    .mobile-menu-content .nav-link {
        padding: 10px 15px;
        display: block;
        color: #333;
        text-decoration: none;
        font-size: 16px;
        transition: color 0.3s ease;
    }

    .mobile-menu-content .nav-link:hover {
        color: #f37d21;
    }

    .mobile-menu-content .has-children {
        position: relative;
    }

    .mobile-menu-content .has-children>a {
        position: relative;
        padding-right: 20px;
    }

    .mobile-menu-content .has-children>a:before {
        content: "\e313";
        font-family: 'icomoon';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 16px;
    }

    .mobile-menu-content .dropdown {
        display: none;
        padding-left: 15px;
        margin-top: 5px;
    }

    .mobile-menu-content .dropdown a {
        padding: 8px 15px;
        display: block;
        color: #666;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .mobile-menu-content .dropdown a:hover {
        color: #f37d21;
    }

    /* Hide the original navbar on mobile */
    .site-menu.main-menu {
        display: none;
    }

    /* Prevent body scroll when menu is open */
    body.menu-open {
        overflow: hidden;
    }

    /* Remove bullet points from all list items */
    .mobile-menu-content ul,
    .mobile-menu-content li,
    .mobile-menu-content .dropdown,
    .mobile-menu-content .dropdown li {
        list-style: none;
        padding-left: 0;
        margin-left: 0;
    }

    #slidemenu {
        display: block;
    }

    .navbar-header {
        position: relative;
    }

    .sticky-wrapper .shrink {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }


    .site-navbar .site-logo {
        float: left;
        position: relative;
    }

}



/* Highlighting for newly created assignments */
.newly-created-assignment {
    background-color: #d4edda !important;
    border: 2px solid #28a745 !important;
    border-radius: 5px !important;
    animation: pulse-green 2s infinite;
}




@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

/* Active assignment styling */
.active-assignment {
    background-color: #fff3cd !important;
    border: 1px solid #ffc107 !important;
    border-radius: 3px !important;
}

/* Simple loading spinner */
.simple-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #f37d21;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}


.tab-content .tab-pane {
    padding: 0px;
}


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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

/* Responsive Table font sizing */
table.simple-table {
    font-size: 1.4vw !important;
}

table.simple-table thead th,
table.simple-table tbody td {
    font-size: 1.4vw !important;
}

/* Responsive breakpoints for SimpleTable fonts */
@media (max-width: 1200px) {
    table.simple-table,
    table.simple-table thead th,
    table.simple-table tbody td {
        font-size: 1.6vw !important;
    }
}

@media (max-width: 991px) {
    table.simple-table,
    table.simple-table thead th,
    table.simple-table tbody td {
        font-size: 2.1vw !important;
    }
}

@media (max-width: 768px) {
    table.simple-table,
    table.simple-table thead th,
    table.simple-table tbody td {
        font-size: 2.8vw !important;
    }
}

@media (max-width: 576px) {
    table.simple-table,
    table.simple-table thead th,
    table.simple-table tbody td {
        font-size: 3.5vw !important;
    }
}

/* SimpleTable button and input font sizing */
table.simple-table .btn,
table.simple-table input[type="button"],
table.simple-table input[type="text"],
table.simple-table input[type="email"],
table.simple-table select {
    font-size: inherit !important;
}

/* SimpleTable pagination font sizing */
.simple-table-pagination button,
.simple-table-info,
.simple-table-search-container input {
    font-size: 1.1vw !important;
}

@media (max-width: 991px) {
    .simple-table-pagination button,
    .simple-table-info,
    .simple-table-search-container input {
        font-size: 1.8vw !important;
    }
}

@media (max-width: 768px) {
    .simple-table-pagination button,
    .simple-table-info,
    .simple-table-search-container input {
        font-size: 2.5vw !important;
    }
}

/* Generic Simple Table Styles - Replacement for DataTables */


.simple-table-scrollable {
    max-height: 375px;
    overflow-y: auto;
}

.simple-table-scrollable-lg {
    max-height: 600px;
    overflow-y: auto;
}

.simple-table {
    margin-bottom: 0;
    width: 100%;
}

.simple-table .sticky-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #343a40;
}

.simple-table .sticky-header th {
    background-color: #343a40;
    border-color: #454d55;
    color: #fff;
    white-space: nowrap;
}

.simple-table .sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.simple-table .sortable:hover {
    background-color: #495057 !important;
}

.simple-table .sortable.active-sort {
    background-color: #007bff !important;
    color: #fff;
    font-weight: bold;
    box-shadow: inset 0 0 0 2px #ffc107;
}

.simple-table .sortable.active-sort:hover {
    background-color: #0056b3 !important;
}

.simple-table .sort-icon {
    margin-left: 5px;
    font-size: 0.8em;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.simple-table .sortable:hover .sort-icon {
    opacity: 1;
}

.simple-table .sortable.active-sort .sort-icon {
    opacity: 1;
    color: #ffc107;
    transform: scale(1.2);
}

.simple-table .fa-sort-up,
.simple-table .fa-sort-down {
    opacity: 1;
    color: #ffc107;
}

/* Simple Table Search Box */
.simple-table-search-container {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    padding-left: 1.6rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.simple-table-search {
    max-width: 300px;
    border: 2px solid #007bff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
    background-color: rgba(0, 123, 255, 0.05) !important;
}

/* Simple Table Pagination */
.simple-table-pagination {
    padding: 1rem;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.simple-table-info {
    color: #6c757d;
}

/* Edit Class Specific Styles (preserved for backward compatibility) */
.edit-class-books-table-container {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
}

.edit-class-books-table {
    margin-bottom: 0;
}

.edit-class-books-table .edit-class-sticky-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #343a40;
}

.edit-class-books-table .edit-class-sticky-header th {
    background-color: #343a40;
    border-color: #454d55;
    color: #fff;
}

.edit-class-books-table .edit-class-sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.edit-class-books-table .edit-class-sortable:hover {
    background-color: #495057 !important;
}

.edit-class-books-table .edit-class-sortable.edit-class-active-sort {
    background-color: #007bff !important;
    color: #fff;
    font-weight: bold;
    box-shadow: inset 0 0 0 2px #ffc107;
}

.edit-class-books-table .edit-class-sortable.edit-class-active-sort:hover {
    background-color: #0056b3 !important;
}

.edit-class-books-table .edit-class-sort-icon {
    margin-left: 5px;
    font-size: 0.8em;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.edit-class-books-table .edit-class-sortable:hover .edit-class-sort-icon {
    opacity: 1;
}

.edit-class-books-table .edit-class-sortable.edit-class-active-sort .edit-class-sort-icon {
    opacity: 1;
    color: #ffc107;
    transform: scale(1.2);
}

.edit-class-books-table .fa-sort-up,
.edit-class-books-table .fa-sort-down {
    opacity: 1;
    color: #ffc107;
}

/* Responsive Modal Sizing - Apply to all modals on the website */
/* Make modals 70vw width on large screens (greater than col-md breakpoint) */
@media (min-width: 992px) {
    .modal-dialog {
        max-width: 80vw !important;
        max-height: 80vh !important;
        width: 80vw !important;
    }
    
    .modal-content {
        width: 100%;
        max-height: 85vh;
    }
}

/* Make modals 100vw width on medium screens and smaller */
@media (max-width: 991.98px) {
    .modal-dialog {
        max-width: 100vw !important;
        width: 100vw !important;
        margin: 0 !important;
        height: 100vh;
        display: flex;
        align-items: center;
    }
    
    .modal-content {
        width: 100%;
        max-height: 100vh;
        overflow-y: auto;
    }
    
    /* Ensure modal body is scrollable on smaller screens */
    .modal-body {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
}

.modal .close span {
    font-size: 1.75rem;
}

/* Modal Footer Button Positioning - Prevent stacking on smaller screens */
.modal-footer {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
}

.modal-footer .btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Ensure button groups maintain their layout */
.modal-footer > div {
    flex-shrink: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem;
}

/* Responsive adjustments for very small screens */
@media (max-width: 576px) {
    .modal-footer .btn {
        font-size: 0.875rem !important;
        padding: 0.375rem 0.75rem !important;
    }
    
    .modal-footer .btn .fas {
        margin-right: 0.25rem !important;
    }
    
    /* Keep buttons from wrapping even on very small screens */
    .modal-footer {
        padding: 0.75rem !important;
    }
}

.btn {
    padding:.20rem .5rem !important;
}

/* Full height containers for all portal panels */
.zellemanager-main-container,
.portal-main-container,
.staff-portal-container,
.parent-portal-container,
.student-portal-container,
.tuition-portal-container {
    height: calc(100vh - 80px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
}

@media (max-width: 991px) {
    .zellemanager-main-container,
    .portal-main-container,
    .staff-portal-container,
    .parent-portal-container,
    .student-portal-container,
    .tuition-portal-container {
        height: calc(100vh - 60px);
        padding: 15px;
    }
}

/* Fixed header for pages with top_site_main */
.top_site_main {
    position: fixed;
    top: 50px; /* Position below navbar */
    left: 0;
    right: 0;
    z-index: 1030; /* Keep header above scrollable content but below modals (1050) and modal backdrop (1040) */
    width: 100%;
}

/* mainBodyDiv takes full screen height minus navbar */
#mainBodyDiv {
    position: fixed;
    top: 56px; /* Start below navbar */
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: white;
}

/* Adjust navbar and layout on medium screens and below */
@media (max-width: 991px) {
    /* Keep navbar but collapse it by default */
    .site-navbar {
        height: auto;
        min-height: 60px;
        padding: 0.5rem 1rem;
    }
    
    /* Ensure the navbar toggle is visible */
    .site-navbar .toggle-button,
    .site-menu-toggle {
        display: block !important;
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 2000;
    }
    
    /* Hide the navigation menu by default */
    .site-navbar .site-navigation .site-menu {
        display: none;
    }
    
    /* Show menu when toggled */
    .site-navbar .site-navigation .site-menu.show {
        display: block;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background: white;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        z-index: 1998;
    }
    
    /* Move generalBodyDiv down just for toggle button */
    .top_site_main {
        top: 0px; /* Account for collapsed navbar with toggle */
    }
    
    /* Adjust mainBodyDiv for mobile */
    #mainBodyDiv {
        top: 60px; /* Start below mobile navbar */
        bottom: 0;
        position: fixed;
    }
}

/* Universal Top-Right Alert Styling - Ensures alerts always appear above navbar and all other elements */
.top-right-alert {
    position: fixed !important;
    top: 80px !important; /* Moved down to avoid navbar */
    right: 20px !important;
    z-index: 100000 !important; /* Well above any navbar or overlay */
    min-width: 300px !important;
    border-radius: 8px !important;
}

/* Special positioning for StaffPortal alerts that need more top spacing */
.top-right-alert-staff {
    position: fixed !important;
    top: 100px !important; /* Adjusted proportionally */
    right: 20px !important;
    z-index: 100000 !important;
    min-width: 300px !important;
    border-radius: 8px !important;
}




/* Active Portal Highlighting */
.site-menu li.active > a {
    color: #f37d21 !important;
    font-weight: 600;
    border-bottom: 3px solid #f37d21;
    padding-bottom: 2px;
}

.site-menu li.has-children.active > a:first-child {
    color: #f37d21 !important;
    font-weight: 600;
}

/* Navbar Page Info Styles - REMOVED - No longer using page info display */
/* Portal highlighting now handled via active class on nav items */

/* ============================================= */
/* ENHANCED RESPONSIVE TEXT SIZING FOR COL-MD AND BELOW */
/* Apply slightly bigger text for screens ≤991px */
/* ============================================= */
@media (max-width: 991px) {
    /* Base HTML and Body font size increase */
    html {
        font-size: clamp(16px, 3vw, 17px) !important;
    }

    body {
        font-size: clamp(1rem, 2.5vw, 1.375rem) !important;
        line-height: 1.65 !important;
    }

    /* Heading sizes - increased by ~15% */
    h1, .h1 {
        font-size: clamp(2rem, 5.5vw, 2.875rem) !important;
    }

    h2, .h2 {
        font-size: clamp(1.725rem, 4.8vw, 2.3rem) !important;
    }

    h3, .h3 {
        font-size: clamp(1.44rem, 4vw, 2rem) !important;
    }

    h4, .h4 {
        font-size: clamp(1.3rem, 3.5vw, 1.725rem) !important;
    }

    h5, .h5 {
        font-size: clamp(1.15rem, 3vw, 1.44rem) !important;
    }

    h6, .h6 {
        font-size: clamp(1rem, 2.6vw, 1.15rem) !important;
    }

    /* Paragraph and body text - increased by ~15% */
    p, .text-body {
        font-size: clamp(1rem, 2.5vw, 1.15rem) !important;
        line-height: 1.7 !important;
    }

    /* Form labels and inputs - increased by ~15% */
    label, .form-label {
        font-size: clamp(0.935rem, 2.3vw, 1.08rem) !important;
        font-weight: 600 !important;
    }

    .form-control, .form-select, input[type="text"],
    input[type="email"], input[type="password"],
    input[type="number"], input[type="tel"],
    textarea, select {
        font-size: clamp(0.75rem, 2.8vw, 1.3rem) !important;
        padding: 0.4rem 0.6rem !important;
    }

    /* Small text elements - increased by ~15% */
    small, .small, .text-small {
        font-size: clamp(0.86rem, 2.1vw, 1rem) !important;
    }

    /* Span elements - increased by ~15% */
    span {
        font-size: clamp(1rem, 2.5vw, 1.15rem) !important;
    }

    /* Button text - increased by ~15% */
    .btn, button, input[type="button"],
    input[type="submit"], input[type="reset"] {
        font-size: clamp(1rem, 2.6vw, 1.2rem) !important;
        padding: 0.4rem 0.8rem !important;
    }

    .btn-lg {
        font-size: clamp(1.15rem, 3vw, 1.375rem) !important;
        padding: 0.5rem 1rem !important;
    }

    .btn-sm {
        font-size: clamp(0.86rem, 2.2vw, 1rem) !important;
        padding: 0.3rem 0.6rem !important;
    }

    /* Navigation and menu items - increased by ~15% */
    .navbar-nav .nav-link, .nav-link {
        font-size: clamp(1rem, 2.6vw, 1.15rem) !important;
    }

    .dropdown-menu, .dropdown-item {
        font-size: clamp(0.935rem, 2.3vw, 1.08rem) !important;
    }

    /* Card elements - increased by ~15% */
    .card-title {
        font-size: clamp(1.3rem, 3vw, 1.44rem) !important;
    }

    .card-text {
        font-size: clamp(1rem, 2.5vw, 1.15rem) !important;
    }

    .card-header {
        font-size: clamp(1.08rem, 2.6vw, 1.22rem) !important;
    }

    /* Modal elements - increased by ~15% */
    .modal-title {
        font-size: clamp(1.3rem, 3vw, 1.44rem) !important;
    }

    .modal-body {
        font-size: clamp(1rem, 2.5vw, 1.15rem) !important;
    }

    /* Alert messages - increased by ~15% */
    .alert {
        font-size: clamp(1rem, 2.6vw, 1.44rem) !important;
    }

    /* Badge text - increased by ~15% */
    .badge {
        font-size: clamp(0.79rem, 1.8vw, 0.86rem) !important;
    }

    /* List group items - increased by ~15% */
    .list-group-item {
        font-size: clamp(1.15rem, 2.5vw, 1.44rem) !important;
    }

    /* Table text - increased by ~15% */
    table, .table, td, th {
        font-size: clamp(1rem, 2.5vw, 1.15rem) !important;
    }

    .table th {
        font-size: clamp(1rem, 2.4vw, 1.15rem) !important;
        font-weight: 700 !important;
    }

    /* Breadcrumb and pagination - increased by ~15% */
    .breadcrumb, .breadcrumb-item {
        font-size: clamp(0.935rem, 2.3vw, 1.08rem) !important;
    }

    .pagination {
        font-size: clamp(1rem, 2.5vw, 1.15rem) !important;
    }

    /* Tooltip and popover - increased by ~15% */
    .tooltip {
        font-size: clamp(0.86rem, 2vw, 1rem) !important;
    }

    .popover {
        font-size: clamp(0.935rem, 2.3vw, 1.08rem) !important;
    }

    /* Placeholder text - increased by ~15% */
    ::placeholder {
        font-size: clamp(0.935rem, 2.3vw, 1.08rem) !important;
    }

    /* Text muted class - increased by ~15% */
    .text-muted {
        font-size: clamp(1rem, 2.5vw, 1.22rem) !important;
    }

    /* Nav tabs - increased by ~15% */
    .nav-tabs .nav-link {
        font-size: clamp(1rem, 2.5vw, 1.15rem) !important;
    }

    /* Custom font classes adjustment */
    .adjustableFont1 {
        font-size: clamp(2.3rem, 5.8vw, 3rem) !important;
    }

    .adjustableFont2 {
        font-size: clamp(1.8rem, 5.1vw, 2.5rem) !important;
    }

    .adjustableFont3 {
        font-size: clamp(1.5rem, 3.8vw, 2rem) !important;
    }

    .adjustableFont4 {
        font-size: clamp(1.15rem, 3.2vw, 1.6rem) !important;
    }

    .adjustableFont5 {
        font-size: clamp(1rem, 2.8vw, 1.3rem) !important;
    }

    /* Simple table specific adjustments */
    .simple-table, .simple-table td, .simple-table th {
        font-size: clamp(0.85rem, 2.3vw, 1.05rem) !important;
    }

    .simple-table-info {
        font-size: clamp(0.86rem, 2.1vw, 1rem) !important;
    }

    .simple-table-search {
        font-size: clamp(1rem, 2.5vw, 1.15rem) !important;
    }

    /* Mobile menu specific adjustments */
    .site-mobile-menu .nav-link {
        font-size: clamp(1.08rem, 2.8vw, 1.3rem) !important;
    }

    .mobile-menu-content .nav-link {
        font-size: clamp(1.08rem, 2.8vw, 1.3rem) !important;
    }

    /* Select dropdowns - ensure proper sizing */
    select option {
        font-size: clamp(1.08rem, 2.8vw, 1.3rem) !important;
        padding: 0.5rem !important;
    }

    /* Input file buttons */
    input[type="file"] {
        font-size: clamp(1rem, 2.5vw, 1.15rem) !important;
    }

    /* Checkbox and radio button labels */
    .form-check-label, .custom-control-label {
        font-size: clamp(1rem, 2.5vw, 1.15rem) !important;
    }

    /* Pre and code blocks */
    pre, code, kbd, samp {
        font-size: clamp(0.935rem, 2.3vw, 1.08rem) !important;
    }

    /* Definition lists */
    dt {
        font-size: clamp(1rem, 2.5vw, 1.15rem) !important;
        font-weight: 700 !important;
    }

    dd {
        font-size: clamp(1rem, 2.5vw, 1.15rem) !important;
    }

    /* Blockquote text */
    blockquote {
        font-size: clamp(1.08rem, 2.6vw, 1.22rem) !important;
    }

    /* Figure captions */
    figcaption {
        font-size: clamp(0.935rem, 2.3vw, 1.08rem) !important;
    }

    /* Progress bar text */
    .progress-bar {
        font-size: clamp(0.86rem, 2.1vw, 1rem) !important;
    }

    /* Lead text */
    .lead {
        font-size: clamp(1.22rem, 3vw, 1.44rem) !important;
    }

    /* Display classes */
    .display-1 {
        font-size: clamp(3.5rem, 8vw, 5rem) !important;
    }

    .display-2 {
        font-size: clamp(3rem, 7vw, 4.5rem) !important;
    }

    .display-3 {
        font-size: clamp(2.5rem, 6vw, 4rem) !important;
    }

    .display-4 {
        font-size: clamp(2rem, 5vw, 3.5rem) !important;
    }
}

/* Extra small devices (phones, below 576px) - even bigger text */
@media (max-width: 576px) {
    /* Further increase for very small screens */
    html {
        font-size: clamp(17px, 3.5vw, 20px) !important;
    }

    body {
        font-size: clamp(1.08rem, 3vw, 1.5rem) !important;
    }

    p, .text-body {
        font-size: clamp(1.08rem, 3vw, 1.25rem) !important;
    }

    .btn, button {
        font-size: clamp(1.08rem, 3vw, 1.3rem) !important;
        padding: 0.5rem 1rem !important;
    }


    label, .form-label {
        font-size: clamp(1rem, 2.8vw, 1.2rem) !important;
    }

    /* Tables need bigger text on phones */
    table, .table, td, th {
        font-size: clamp(1.08rem, 3vw, 1.3rem) !important;
    }

    /* Navigation items on mobile */
    .nav-link, .navbar-nav .nav-link {
        font-size: clamp(1.15rem, 3.2vw, 1.375rem) !important;
    }
}


/* Improved General Link and Text Readability for Mobile */
/* Tablet and Mobile: Better readability for links and text */
@media (max-width: 991px) {
    /* All links get slightly larger and more readable */
    a:not(.btn):not(.nav-link) {
        font-size: 1.05rem !important;
    }

    /* Email and phone links specifically */
    a.email-link, a.phone-link, a[href^="mailto:"], a[href^="tel:"] {
        font-size: 1.1rem !important;
        font-weight: 500;
    }

    /* Card text content */
    .card-body .course-card-text,
    .card-body p,
    .card-body span:not(.badge) {
        font-size: 1rem !important;
    }

    /* Teacher name and other inline text elements */
    .course-card .teacher-name,
    .card-body .d-inline {
        font-weight: 500;
    }
}

/* Mobile: Even better readability */
@media (max-width: 576px) {
    /* Links on mobile need to be tap-friendly */
    a:not(.btn):not(.nav-link) {
        font-size: 1.1rem !important;
        line-height: 1.6;
    }

    /* Email and phone links on mobile */
    a.email-link, a.phone-link, a[href^="mailto:"], a[href^="tel:"] {
        font-size: 1.2rem !important;
        font-weight: 500;
        display: inline-block;
        padding: 0.125rem 0;
    }

    /* Card content on mobile */
    .card-body .course-card-text,
    .card-body p,
    .card-body span:not(.badge) {
        font-size: 1.05rem !important;
        line-height: 1.5;
    }

    /* Ensure proper spacing in cards */
    .course-card .course-card-text,
    .card .course-card-text {
        margin-bottom: 0.75rem !important;
    }
}

/* ============================================================================
   ASSIGNMENT HIGHLIGHTING FOR GRADE NOTIFICATIONS
   ============================================================================
   Highlights assignment rows when parent navigates from grade notification email */

.assignment-highlighted {
    background-color: #d4edda !important;
    border-left: 4px solid #28a745 !important;
    animation: flash-highlight 0.6s ease-in-out 8;
    transition: all 0.3s ease;
}

@keyframes flash-highlight {
    0%, 100% {
        background-color: #d4edda;
        box-shadow: 0 0 5px rgba(40, 167, 69, 0.3);
    }
    50% {
        background-color: #8fd19e;
        box-shadow: 0 0 25px rgba(40, 167, 69, 0.6);
    }
}

/* Ensure highlighted assignment has enough contrast */
.assignment-highlighted td,
.assignment-highlighted .assignment-name,
.assignment-highlighted .grade-display {
    font-weight: 500;
}

/* Add subtle glow effect during highlight */
.assignment-highlighted {
    position: relative;
    z-index: 10;
}

/* =================================================================
   MODERN TAB NAVIGATION - Generic .md-tabs Class
   Applied to all printTabbedPane() generated tabs
   Updated: 2024-2025 Modern Design Standards
   ================================================================= */

.md-tabs {
    border-bottom: 2px solid #e9ecef;
    background-color: #fff;
    border-radius: 8px 8px 0 0;
    padding: 0.5rem 0.5rem 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.md-tabs .nav-item {
    margin-bottom: -2px;
    margin-right: 0.25rem;
}

.md-tabs .nav-link {
    color: #6c757d !important;
    border: none;
    border-radius: 6px 6px 0 0;
    padding: 0.75rem 1.25rem;
    font-weight: 500;
    font-size: clamp(0.875rem, 2vw, 1rem);
    transition: all 0.3s ease;
    background-color: transparent;
    position: relative;
}

.md-tabs .nav-link:hover {
    color: #007bff !important;
    background-color: #f8f9fa;
    transform: translateY(-2px);
}

.md-tabs .nav-link.active,
.md-tabs .nav-link.active.show {
    color: #007bff !important;
    background-color: #fff !important;
    border-bottom: 3px solid #007bff;
    font-weight: 600;
}

/* Apply modern blue styling to ALL .nav-tabs (tabbed interfaces) */
/* This does NOT affect .navbar-nav (main navigation bar) since that uses different class */
/* Higher specificity to override orange .nav-link styles at lines 1072-1090 */
ul.nav-tabs {
    border-bottom: 2px solid #e9ecef !important;
}
ul.nav-tabs li.nav-item a.nav-link {
    color: #6c757d !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 6px 6px 0 0 !important;
    transition: all 0.3s ease;
    font-size: 1rem !important;
    padding: 0.5rem 1rem !important;
}
ul.nav-tabs li.nav-item a.nav-link:hover {
    color: #007bff !important;
    background-color: #f8f9fa !important;
}
ul.nav-tabs li.nav-item a.nav-link.active,
ul.nav-tabs li.nav-item a.nav-link.active:hover,
ul.nav-tabs li.nav-item a.nav-link.active:focus {
    color: #007bff !important;
    background-color: #fff !important;
    border-bottom: 3px solid #007bff !important;
    font-weight: 600 !important;
}

/* Modern tab content container */
.md-tabs + .tab-content {
    background-color: #fff;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.07);
    padding: 1.5rem;
}

/* Scrollable tab content */
.scrollable-tab-content {
    background-color: #fff;
    border-radius: 0 0 8px 8px;
}

/* Modern header table styling */
.header-table {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.5rem;
    border: none !important;
}

.header-table tbody,
.header-table tr {
    border: none !important;
}

.header-table th,
.header-table td {
    text-align: center;
    color: #495057;
    font-weight: 600;
    padding: 0.75rem;
    border: none !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: clamp(0.875rem, 2vw, 1rem);
}

.header-table h4 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* Modern grades table */
#parentGradesTable {
    border-radius: 6px;
    overflow: hidden;
    border: none;
}

#parentGradesTable tbody {
    border: none;
}

#parentGradesTable tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid #f1f3f5;
}

#parentGradesTable tr:last-child {
    border-bottom: none;
}

#parentGradesTable td {
    padding: 1rem 0.75rem;
    vertical-align: middle;
    font-size: clamp(0.9rem, 2vw, 1rem);
    border: none;
}

#parentGradesTable h5 {
    margin: 0;
    font-size: inherit;
    font-weight: 500;
    color: #495057;
}

/* Modern striped rows */
#parentGradesTable.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8f9fa;
}

#parentGradesTable.table-striped tbody tr:nth-of-type(even) {
    background-color: #ffffff;
}

/* Modern hover effect */
#parentGradesTable.table-hover tbody tr:hover {
    background-color: #e7f1ff !important;
    box-shadow: 0 2px 4px rgba(0,123,255,0.1);
    transform: scale(1.01);
    cursor: default;
}

/* Scrollable container with modern scrollbar */
.pre-scrollable {
    border-radius: 6px;
    background-color: #fff;
}

.pre-scrollable::-webkit-scrollbar {
    width: 8px;
}

.pre-scrollable::-webkit-scrollbar-track {
    background: #f1f3f5;
    border-radius: 4px;
}

.pre-scrollable::-webkit-scrollbar-thumb {
    background: #adb5bd;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.pre-scrollable::-webkit-scrollbar-thumb:hover {
    background: #868e96;
}

/* =================================================================
   RESPONSIVE DESIGN - MOBILE BREAKPOINTS
   ================================================================= */

@media (max-width: 991px) {
    .md-tabs {
        padding: 0.25rem 0.25rem 0;
    }

    .md-tabs .nav-link {
        font-size: clamp(0.75rem, 2.5vw, 0.875rem);
        padding: 0.6rem 1rem;
    }

    .md-tabs + .tab-content {
        padding: 1.25rem;
    }
}

@media (max-width: 576px) {
    .md-tabs {
        border-radius: 6px 6px 0 0;
    }

    .md-tabs .nav-item {
        margin-right: 0.15rem;
    }

    .md-tabs .nav-link {
        font-size: clamp(0.7rem, 3vw, 0.8rem);
        padding: 0.5rem 0.75rem;
    }

    .md-tabs + .tab-content {
        padding: 1rem;
        border-radius: 0 0 6px 6px;
    }

    .header-table th,
    .header-table td {
        font-size: clamp(0.75rem, 3vw, 0.875rem);
        padding: 0.5rem;
        letter-spacing: 0.3px;
    }

    #parentGradesTable td {
        padding: 0.75rem 0.5rem;
        font-size: clamp(0.8rem, 2.5vw, 0.9rem);
    }
}

/* Print styles */
@media print {
    .md-tabs {
        box-shadow: none;
        border: 1px solid #dee2e6;
    }

    .md-tabs + .tab-content {
        box-shadow: none;
        border: 1px solid #dee2e6;
    }

    #parentGradesTable.table-hover tbody tr:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ============================================
   UNIFIED ASSIGNMENT MODAL - EXTRA CREDIT STYLES
   ============================================ */

/* Extra credit input styling - Purple theme */
.extra-credit-input {
    border-color: #6f42c1 !important;
    background-color: rgba(111, 66, 193, 0.05) !important;
    box-shadow: 0 0 0 0.1rem rgba(111, 66, 193, 0.25) !important;
}

/* Extra credit percentage text */
.extra-credit-percentage {
    color: #6f42c1 !important;
    font-weight: bold !important;
}

/* Inline delete confirmation styling */
#unifiedDeleteConfirmSection {
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Unified modal card styling */
#unifiedAssignmentModal .card {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#unifiedAssignmentModal .card-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Assignment row flash animation on save */
.assignment-row-clickable.table-success {
    transition: background-color 0.5s ease-out;
}

/* Create Family - Collapsible entry cards */
.createFamily-entry-header .createFamily-collapse-icon {
    transition: transform 0.2s ease;
}

.createFamily-entry-header.collapsed .createFamily-collapse-icon {
    transform: rotate(-90deg);
}

.createFamily-entry-header:hover {
    filter: brightness(0.95);
}

/* Create Family Modal - Accordion Header Colors */
#createFamilyAccordion .card-header {
    transition: all 0.2s ease;
}

#createFamilyAccordion .card-header h6 {
    transition: color 0.2s ease;
}

#familyInfoHeader {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
}
#familyInfoHeader:hover {
    background: #fff !important;
    border: 2px solid #007bff !important;
}
#familyInfoHeader:hover h6,
#familyInfoHeader:hover h6 span,
#familyInfoHeader:hover h6 i {
    color: #007bff !important;
}
#familyInfoHeader:hover .badge-light {
    background-color: #007bff !important;
    color: #fff !important;
}

#parentsHeader {
    background: linear-gradient(135deg, #17a2b8 0%, #117a8b 100%) !important;
}
#parentsHeader:hover {
    background: #fff !important;
    border: 2px solid #17a2b8 !important;
}
#parentsHeader:hover h6,
#parentsHeader:hover h6 span,
#parentsHeader:hover h6 i {
    color: #17a2b8 !important;
}
#parentsHeader:hover .badge-light {
    background-color: #17a2b8 !important;
    color: #fff !important;
}

#studentsHeader {
    background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%) !important;
}
#studentsHeader:hover {
    background: #fff !important;
    border: 2px solid #6f42c1 !important;
}
#studentsHeader:hover h6,
#studentsHeader:hover h6 span,
#studentsHeader:hover h6 i {
    color: #6f42c1 !important;
}
#studentsHeader:hover .badge-light {
    background-color: #6f42c1 !important;
    color: #fff !important;
}

#emergencyContactsHeader {
    background: linear-gradient(135deg, #fd7e14 0%, #e06000 100%) !important;
}
#emergencyContactsHeader:hover {
    background: #fff !important;
    border: 2px solid #fd7e14 !important;
}
#emergencyContactsHeader:hover h6,
#emergencyContactsHeader:hover h6 span,
#emergencyContactsHeader:hover h6 i {
    color: #fd7e14 !important;
}
#emergencyContactsHeader:hover .badge-light {
    background-color: #fd7e14 !important;
    color: #fff !important;
}