@font-face {
    font-family: 'MontserratRegular'; /* Use a consistent font family name */
    src: url('/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400; /* Standard numerical weight for 'regular' */
    font-style: normal;
    font-display: swap;
}

.MontserratRegularFont {
    font-family: 'MontserratRegular';
}

@font-face {
    font-family: 'MontserratBold'; /* Use a consistent font family name */
    src: url('/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
    font-weight: 400; /* Standard numerical weight for 'regular' */
    font-style: normal;
    font-display: swap;
}

.MontserratBoldFont {
    font-family: 'MontserratBold';
}

@font-face {
    font-family: 'MontserratLight';
    src: url('/fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
    font-weight: 300; /* Standard numerical weight for 'light' */
    font-style: normal;
    font-display: swap;
}

.MontserratLightFont {
    font-family: 'MontserratLight';
}

@font-face {
    font-family: 'MontserratSemiBold';
    src: url('/fonts/Montserrat/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 300; /* Standard numerical weight for 'light' */
    font-style: normal;
    font-display: swap;
}

.MontserratSemiBoldFont {
    font-family: 'MontserratSemiBold';
}

@font-face {
    font-family: 'MontserratThin';
    src: url('/fonts/Montserrat/Montserrat-Thin.ttf') format('truetype');
    font-weight: 300; /* Standard numerical weight for 'light' */
    font-style: normal;
    font-display: swap;
}

.MontserratThinFont {
    font-family: 'MontserratThin';
    color: white;
}

input {
    font-size: 13px!important;
}

/* Styles for small screens (phones) */
@media (max-width: 767px) {
    /* Example: Stack elements vertically */
    .container {
        flex-direction: column;
    }

    .logo {
/*        float: left;*/
        margin-top: 10px;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
        margin-left: 15px;
    }

    .breadcrumbbar {
        font-size: 15px;
    }

    .breadcrumStylling {
        color: #0d1a28;
        text-decoration: none;
        padding: 5px 10px; /* Give it some padding so the background color has space */
        transition: background-color 0.3s ease;
        border-radius: 15px; /*
        Smooth transition for hover effect */
    }

        .breadcrumStylling:hover {
            background-color: #0d1a28; /* Light gray background on hover */
            color: #0056b3; /* Optional: Change text color on hover */
            text-decoration: none; /* Optional: Add underline on hover */
            border-radius: 15px;
        }

    a {
        color: #00c2ff;
        cursor: pointer;
    }

    .input-group {
        position: relative;
        display: table !important;
        border-collapse: separate;
        display: table-cell;
    }

    .btn-breadcrumb {
        width: 100%;
        color: black;
        display: inline-block;
        padding-top: 18px;
        padding-bottom: 10px;
        padding-left: 10px;
        background-color: #929497;
        color: black;
    }

    .btn-breadcrumbInTheSite {
        width: 95%;
        background-color: #929497;
        color: black;
        margin-left: 9px;
        padding-left: 4%;
        margin-top: -9px;
        margin-bottom: 0.5%;
        padding-bottom: 12px;
        padding-top: 13px;
        border-radius: 10px;
    }

    .swal-title {
        font-family: 'MyCustomFont', Montserrat-Thin !important; /* Replace 'Roboto' with your font name */
    }

    .swal-text {
        font-family: 'MyCustomFont', Montserrat-Thin !important; /* Replace 'Roboto' with your font name */
    }

    .swal2-title {
        font-family: 'MyCustomFont', Montserrat-Thin !important; /* Replace 'Roboto' with your font name */
    }

    .swal2-input-label {
        font-family: 'MyCustomFont', Montserrat-Thin !important; /* Replace 'Roboto' with your font name */
    }

    .swal2-validation-message {
        font-family: 'MyCustomFont', Montserrat-Thin !important; /* Replace 'Roboto' with your font name */
    }

    .table-striped > tbody > tr:nth-of-type(odd) {
        background-color: red;
    }

    .pull-right {
        text-align: right;
    }

    .pull-left {
        text-align: left;
    }

    input[type="checkbox"] {
        height: 15px;
        margin-left: 0px;
    }

    input[type="search"] {
        width:100%!important;
        margin-left:0px!important;
    }

    select {
        margin-bottom: 2% !important;
        margin-top: 2% !important;
        border-radius: 15px !important;
    }


    input[type="text"] {
        height: 35px;
        border-radius: 15px;
        border-style: hidden;
        margin-bottom: 2%;
        margin-top: 2%;
    }

    .labelFontSize {
        font-size: 12px !important;
    }

    .main-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background-color: #0d1a28;
        margin-top: -10px;
        margin-left: -10px;
        margin-right: -10px;
    }

    html, body {
        height: 100%;
        margin: 0;
        overflow-x: hidden;
    }

    body {
        display: grid;
        grid-template-rows: auto 1fr auto;
        margin-bottom: 60px;
        background-color: lightgray;
    }

    .footer {
        /*    position: absolute;*/
        bottom: 0;
        width: 100%;
        /*background-color: #eee;*/ /* Example footer background */
        text-align: center;
        padding: 10px 0;
    }

    html {
        font-size: 14px;
    }

    @media (min-width: 768px) {
        html {
            font-size: 16px;
        }
    }

    .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%;
    }

    body {
        margin-bottom: 60px;
    }

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

    .btn {
        background-color: #929497;
        border-radius: 3px;
        -webkit-box-shadow: none;
        box-shadow: none;
        border: 1px solid transparent;
        cursor: pointer;
        border-radius: 15px;
        padding: 8px;
        font-family: 'MontserratBold';
        font-size: 12px;
        width: 100%;
        text-align: center;
        color: white;
    }

    *:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    .btn:hover,
    .btn:active,
    .btn.hover {
        background-color: #0d1a28;
    }

    .login-container {
        background-color: #fff;
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        width: 70%; /* Adjust width as needed */
        max-width: 100%;
    }

    #body {
        font-family: sans-serif;
        background-image: url('../Images/MobileBackground.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        justify-content: center;
        align-items: center;
        margin: 0;
    }

    #content {
        flex: 1;
        padding-bottom: 8%;
        box-sizing: border-box;
    }

    .form-control {
        width: 100%;
        padding: 5px;
        border-radius: 5px;
        box-sizing: border-box;
        font-size: 13px;
    }

    a {
        color: blue;
        text-decoration: none;
    }

    .textInput {
        border-radius: 20px;
        background-color: #e8f0fe;
        border-style: hidden;
        text-align: center;
    }

    .main-container {
        display: flex;
        min-height: calc(100vh - /* Adjust for header/footer height if applicable */ );
        margin-top: 8px;
        position: relative; /* Needed for positioning the toggle button */
    }

    /* Sidebar Toggle Button */
    .sidebar-toggle {
        position: absolute; /* Position relative to .main-container */
        top: 11px; /* Adjust as needed */
        left: 30px; /* Position it to the left */
        background-color: #0d1a28;
        color: white;
        border: none;
        padding: 10px 15px;
        cursor: pointer;
        z-index: 1000; /* Ensure it's above other content */
        border-radius: 5px;
        font-size: 1.2em; /* Adjust icon size */
        transition: left 0.3s ease; /* Smooth transition for button movement */
    }

    .collapsible-menu-item {
        margin-bottom: 5px; /* Space between menu items */
        position: relative; /* For positioning caret */
    }

    .collapsible-header {
        display: flex; /* Allow text and icon to be on one line */
        justify-content: space-between; /* Push icon to the right */
        align-items: center; /* Vertically align items */
        padding: 10px 15px;
        background-color: #e9ecef; /* Slightly different background for header */
        color: #333;
        cursor: pointer;
        border-radius: 5px;
        font-size: 13px;
        transition: background-color 0.2s ease, color 0.2s ease;
        font-family: 'MontserratBold';
    }

    .select2-container--default .select2-results__option {
        font-size: 13px !important;
    }

    .collapsible-header:hover:not(.disabled) {
        background-color: #dee2e6; /* Hover effect for header */
    }

    .collapsible-header.disabled {
        color: #6c757d;
        cursor: not-allowed;
        background-color: #f2f2f2;
        pointer-events: none; /* Prevent click events */
    }

    .collapsible-content {
        list-style: none;
        padding: 0;
        margin: 0;
        overflow: hidden; /* Hide overflow during height transition */
        transition: height 0.3s ease-out, opacity 0.3s ease-out; /* Smooth transition for height and opacity */
        height: auto; /* Default for when visible */
        opacity: 1; /* Default for when visible */
        padding-top: 5px; /* Little space above sub-items */
        font-size: 13px;
    }

        .collapsible-content.hidden {
            height: 0 !important; /* Force height to 0 when hidden */
            opacity: 0; /* Fade out content */
            padding-top: 0;
        }

        /* Sub-items within collapsible content */
        .collapsible-content li {
            padding-left: 20px; /* Indent sub-items */
        }

        .collapsible-content .side-menu-item {
            /* Inherit existing side-menu-item styles */
            font-size: 0.95em; /* Slightly smaller font for sub-items */
            padding: 8px 15px; /* Adjust padding for sub-items */
        }

    /* Caret Icon Rotation */
    .caret-icon {
        transition: transform 0.3s ease; /* Smooth rotation */
    }

    .collapsible-header.active .caret-icon {
        transform: rotate(180deg); /* Rotate 180 degrees when active (open) */
    }

    /* Ensure the disabled state is visually clear for the whole item */
    .collapsible-menu-item.disabled .collapsible-header {
        background-color: #f2f2f2; /* Greyed out header */
        color: #6c757d;
        cursor: not-allowed;
        pointer-events: none;
    }

        .collapsible-menu-item.disabled .collapsible-header .caret-icon {
            opacity: 0.5; /* Dim caret icon if disabled */
        }

    /* When the entire side menu is collapsed, hide all content */
    .side-menu.collapsed .collapsible-header,
    .side-menu.collapsed .collapsible-content {
        display: none;
    }

    /* Side Menu Styles */
    .side-menu {
        width: 280px;
        background-color: #f8f9fa;
        padding: 20px 15px;
        box-shadow: 2px 0 5px rgba(0,0,0,0.1);
        flex-shrink: 0;
        height: 100vh;
        border-right: 1px solid #e0e0e0;
        position: relative; /* For z-index if needed */
        transition: width 0.3s ease, transform 0.3s ease, padding 0.3s ease; /* Smooth transition */
        overflow-x: hidden; /* Hide content that goes beyond the width */
        transform: translateX(0); /* Default position (visible) */
    }

        .side-menu.collapsed {
            width: 0; /* Collapse to 0 width */
            padding: 0; /* Remove padding when collapsed */
            /* Alternative for hiding completely off-screen: */
            transform: translateX(-100%); /* Move off-screen to the left */
            box-shadow: none; /* No shadow when hidden */
            border-right: none; /* No border when hidden */
        }

    /* Adjust main content margin when sidebar is shown */
    .main-content {
        flex-grow: 1;
        padding: 20px;
        transition: margin-left 0.3s ease; /* Smooth transition for main content shift */
    }

    /* Adjust toggle button position when sidebar is open (optional, depends on desired look) */
    .main-container.sidebar-open .sidebar-toggle {
        left: 260px; /* Move button to the right of the expanded sidebar (250px width + 10px padding) */
    }

    /* Hide content inside the sidebar when collapsed */
    .side-menu.collapsed .side-menu-header,
    .side-menu.collapsed .side-menu-list {
        display: none; /* Hide content instantly when collapsed */
        /* Alternatively, you could transition opacity or height if you prefer */
    }


    /* Existing styles for the sidebar content (header, list, items) still apply when not collapsed */
    .side-menu-header {
        margin-bottom: 20px;
        padding-bottom: 10px;
        padding-top: 8px;
        border-bottom: 1px solid #ccc;
    }

        .side-menu-header h3 {
            font-size: 1.2em;
            color: #333;
            margin: 0;
            font-family: 'MontserratBoldFont', sans-serif;
        }

    .side-menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .side-menu-list li {
            margin-bottom: 5px;
        }

    .side-menu-item {
        display: block;
        padding: 10px 15px;
        text-decoration: none;
        color: #007bff;
        font-size: 1em;
        border-radius: 5px;
        transition: background-color 0.2s ease, color 0.2s ease;
        font-family: 'MontserratRegular';
        font-size: 13px;
    }

        .side-menu-item:hover {
            background-color: #e2e6ea;
            color: #0056b3;
        }

        .side-menu-item.disabled {
            color: #6c757d;
            cursor: not-allowed;
            background-color: #f2f2f2;
            pointer-events: none;
        }

            .side-menu-item.disabled:hover {
                background-color: #f2f2f2;
                color: #6c757d;
            }

    .menu-divider {
        border-top: 1px solid #eee;
        margin: 10px 0;
    }

    /* Ensure font styles are correctly applied if not globally defined */
    .MontserratBoldFont {
        font-family: 'MontserratBoldFont', sans-serif;
    }

    /* Styles for your main dashboard content (module-grid, etc.) */
    .module-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .module-box {
        /*    min-height: 120px;*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #fff;
    }
        /* Ensure the disabled styles for module-box buttons are consistent */
        .module-box[disabled] {
            opacity: 0.6; /* Slightly fade out disabled buttons */
            cursor: not-allowed;
        }

    th {
        background-color: #0d1a28 !important;
        color: white;
        font-size: 9px;
        font-weight: normal !important;
        border: 0px solid #ddd !important;
        font-family: "MontserratSemiBold";
    }

    td {
        font-family: sans-serif;
        font-size: 8px;
    }

    select {
        border-style: none;
    }

    .display-none {
        display: none;
    }

    .display-block {
        display: block;
    }

    .aligntableInsideOfADiv {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .dataTables_info {
        font-size: 13px;
        font-family: 'MontserratSemiBold';
    }

    #UserLoggedInName {
        text-align: left;
        padding-left: 30px;
    }

    #SignoutNavheader {
        text-align: right;
        padding-right: 30px;
    }

    #headerLogo {
        margin-bottom: 5%;
    }

    /*////////////FONT SIZES///////////*/
    .fontSize8 {
        font-size: 8px;
    }

    .fontSize9 {
        font-size: 9px;
    }

    .fontSize10 {
        font-size: 10px;
    }

    .fontSize11 {
        font-size: 11px;
    }

    .fontSize12 {
        font-size: 12px;
    }

    .fontSize13 {
        font-size: 13px;
    }

    .fontSize14 {
        font-size: 14px;
    }

    .fontsize15 {
        font-size: 15px;
    }

    .fontSize16 {
        font-size: 16px;
    }

    .fontSize17 {
        font-size: 17px;
    }

    .fontSize18 {
        font-size: 18px;
    }

    .fontSize20 {
        font-size: 20px;
    }

    .fontSize25 {
        font-size: 25px;
    }

    .fontSize10 {
        font-size: 10px;
    }

    /*/////////////MARGINS////////////*/
    .margin-top10 {
        margin-top: 10px;
    }

    .margin-top15 {
        margin-top: 15px;
    }

    .margin-top20 {
        margin-top: 20px;
    }


    /*////////////PADDING//////////*/
    .padding-top15 {
        padding: 15px;
    }
}

/* Styles for medium screens (tablets) */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Example: Use a two-column layout */
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .logo {
/*        float: left;*/
        margin-top: 10px;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
        margin-left: 15px;
    }

    .breadcrumbbar {
        font-size: 15px;
    }

    .breadcrumStylling {
        color: #0d1a28;
        text-decoration: none;
        padding: 5px 10px; /* Give it some padding so the background color has space */
        transition: background-color 0.3s ease;
        border-radius: 15px; /*
        Smooth transition for hover effect */
    }

        .breadcrumStylling:hover {
            background-color: #0d1a28; /* Light gray background on hover */
            color: #0056b3; /* Optional: Change text color on hover */
            text-decoration: none; /* Optional: Add underline on hover */
            border-radius: 15px;
        }

    a {
        color: #00c2ff;
        cursor: pointer;
    }

    .input-group {
        position: relative;
        display: table !important;
        border-collapse: separate;
        display: table-cell;
    }

    .btn-breadcrumb {
        width: 100%;
        color: black;
        display: inline-block;
        padding-top: 18px;
        padding-bottom: 10px;
        padding-left: 10px;
        background-color: #929497;
        color: black;
    }

    .btn-breadcrumbInTheSite {
        width: 95%;
        background-color: #929497;
        color: black;
        margin-left: 9px;
        padding-left: 4%;
        margin-top: -9px;
        margin-bottom: 0.5%;
        padding-bottom: 12px;
        padding-top: 13px;
        border-radius: 10px;
    }

    .swal-title {
        font-family: 'MyCustomFont', Montserrat-Thin !important; /* Replace 'Roboto' with your font name */
    }

    .swal-text {
        font-family: 'MyCustomFont', Montserrat-Thin !important; /* Replace 'Roboto' with your font name */
    }

    .swal2-title {
        font-family: 'MyCustomFont', Montserrat-Thin !important; /* Replace 'Roboto' with your font name */
    }

    .swal2-input-label {
        font-family: 'MyCustomFont', Montserrat-Thin !important; /* Replace 'Roboto' with your font name */
    }

    .swal2-validation-message {
        font-family: 'MyCustomFont', Montserrat-Thin !important; /* Replace 'Roboto' with your font name */
    }

    .table-striped > tbody > tr:nth-of-type(odd) {
        background-color: red;
    }

    .pull-right {
        text-align: right;
    }

    .pull-left {
        text-align: left;
    }

    input[type="checkbox"] {
        height: 15px;
        margin-left: 0px;
    }

    input[type="search"] {
        width: 97%!important;
    }

    select {
        margin-bottom: 2% !important;
        margin-top: 2% !important;
        border-radius: 15px !important;
        background-color: white!important;
    }

    input[type="text"] {
        height: 35px;
        border-radius: 15px;
        border-style: hidden;
        margin-bottom: 2%;
        margin-top: 2%;
    }

    .labelFontSize {
        font-size: 12px !important;
    }

    .main-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background-color: #0d1a28;
        margin-top: -10px;
        margin-left: -10px;
        margin-right: -10px;
    }

    html, body {
        height: 100%;
        margin: 0;
        overflow-x: hidden;
    }

    body {
        display: grid;
        grid-template-rows: auto 1fr auto;
        margin-bottom: 60px;
        background-color: lightgray;
    }

    .footer {
        /*    position: absolute;*/
        bottom: 0;
        width: 100%;
        /*background-color: #eee;*/ /* Example footer background */
        text-align: center;
        padding: 10px 0;
    }

    html {
        font-size: 14px;
    }

    @media (min-width: 768px) {
        html {
            font-size: 16px;
        }
    }

    .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%;
    }

    body {
        margin-bottom: 60px;
    }

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

    .btn {
        background-color: #929497;
        border-radius: 3px;
        -webkit-box-shadow: none;
        box-shadow: none;
        border: 1px solid transparent;
        cursor: pointer;
        border-radius: 15px;
        padding: 8px;
        font-size: 12px;
        width: 100%;
        font-family: 'MontserratBold';
        text-align: center;
        color: white;
    }

    *:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    .btn:hover,
    .btn:active,
    .btn.hover {
        background-color: #0d1a28;
    }

    .login-container {
        background-color: #fff;
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        width: 400px;
        max-width: 100%;
    }

    #body {
        font-family: sans-serif;
        background-image: url('../Images/TabletBackground.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        justify-content: center;
        align-items: center;
        margin: 0;
    }

    #content {
        flex: 1;
        padding-bottom: 8%;
        box-sizing: border-box;
    }

    .form-control {
        width: 100%;
        padding: 5px;
        border-radius: 5px;
        box-sizing: border-box;
        font-size: 13px;
    }

    a {
        color: blue;
        text-decoration: none;
    }

    .textInput {
        border-radius: 20px;
        background-color: #e8f0fe;
        border-style: hidden;
        text-align: center;
    }

    .main-container {
        display: flex;
        min-height: calc(100vh - /* Adjust for header/footer height if applicable */ );
        margin-top: 8px;
        position: relative; /* Needed for positioning the toggle button */
    }

    /* Sidebar Toggle Button */
    .sidebar-toggle {
        position: absolute; /* Position relative to .main-container */
        top: 11px; /* Adjust as needed */
        left: 30px; /* Position it to the left */
        background-color: #0d1a28;
        color: white;
        border: none;
        padding: 10px 15px;
        cursor: pointer;
        z-index: 1000; /* Ensure it's above other content */
        border-radius: 5px;
        font-size: 1.2em; /* Adjust icon size */
        transition: left 0.3s ease; /* Smooth transition for button movement */
    }

    .collapsible-menu-item {
        margin-bottom: 5px; /* Space between menu items */
        position: relative; /* For positioning caret */
    }

    .collapsible-header {
        display: flex; /* Allow text and icon to be on one line */
        justify-content: space-between; /* Push icon to the right */
        align-items: center; /* Vertically align items */
        padding: 10px 15px;
        background-color: #e9ecef; /* Slightly different background for header */
        color: #333;
        cursor: pointer;
        border-radius: 5px;
        font-size: 13px;
        transition: background-color 0.2s ease, color 0.2s ease;
        font-family: 'MontserratBold';
    }

    .select2-container--default .select2-results__option {
        font-size: 13px !important;
    }

    .collapsible-header:hover:not(.disabled) {
        background-color: #dee2e6; /* Hover effect for header */
    }

    .collapsible-header.disabled {
        color: #6c757d;
        cursor: not-allowed;
        background-color: #f2f2f2;
        pointer-events: none; /* Prevent click events */
    }

    .collapsible-content {
        list-style: none;
        padding: 0;
        margin: 0;
        overflow: hidden; /* Hide overflow during height transition */
        transition: height 0.3s ease-out, opacity 0.3s ease-out; /* Smooth transition for height and opacity */
        height: auto; /* Default for when visible */
        opacity: 1; /* Default for when visible */
        padding-top: 5px; /* Little space above sub-items */
        font-size: 13px;
    }

        .collapsible-content.hidden {
            height: 0 !important; /* Force height to 0 when hidden */
            opacity: 0; /* Fade out content */
            padding-top: 0;
        }

        /* Sub-items within collapsible content */
        .collapsible-content li {
            padding-left: 20px; /* Indent sub-items */
        }

        .collapsible-content .side-menu-item {
            /* Inherit existing side-menu-item styles */
            font-size: 0.95em; /* Slightly smaller font for sub-items */
            padding: 8px 15px; /* Adjust padding for sub-items */
        }

    /* Caret Icon Rotation */
    .caret-icon {
        transition: transform 0.3s ease; /* Smooth rotation */
    }

    .collapsible-header.active .caret-icon {
        transform: rotate(180deg); /* Rotate 180 degrees when active (open) */
    }

    /* Ensure the disabled state is visually clear for the whole item */
    .collapsible-menu-item.disabled .collapsible-header {
        background-color: #f2f2f2; /* Greyed out header */
        color: #6c757d;
        cursor: not-allowed;
        pointer-events: none;
    }

        .collapsible-menu-item.disabled .collapsible-header .caret-icon {
            opacity: 0.5; /* Dim caret icon if disabled */
        }

    /* When the entire side menu is collapsed, hide all content */
    .side-menu.collapsed .collapsible-header,
    .side-menu.collapsed .collapsible-content {
        display: none;
    }

    /* Side Menu Styles */
    .side-menu {
        width: 280px;
        background-color: #f8f9fa;
        padding: 20px 15px;
        box-shadow: 2px 0 5px rgba(0,0,0,0.1);
        flex-shrink: 0;
        height: 100vh;
        border-right: 1px solid #e0e0e0;
        position: relative; /* For z-index if needed */
        transition: width 0.3s ease, transform 0.3s ease, padding 0.3s ease; /* Smooth transition */
        overflow-x: hidden; /* Hide content that goes beyond the width */
        transform: translateX(0); /* Default position (visible) */
    }

        .side-menu.collapsed {
            width: 0; /* Collapse to 0 width */
            padding: 0; /* Remove padding when collapsed */
            /* Alternative for hiding completely off-screen: */
            transform: translateX(-100%); /* Move off-screen to the left */
            box-shadow: none; /* No shadow when hidden */
            border-right: none; /* No border when hidden */
        }

    /* Adjust main content margin when sidebar is shown */
    .main-content {
        flex-grow: 1;
        padding: 20px;
        transition: margin-left 0.3s ease; /* Smooth transition for main content shift */
    }

    /* Adjust toggle button position when sidebar is open (optional, depends on desired look) */
    .main-container.sidebar-open .sidebar-toggle {
        left: 260px; /* Move button to the right of the expanded sidebar (250px width + 10px padding) */
    }

    /* Hide content inside the sidebar when collapsed */
    .side-menu.collapsed .side-menu-header,
    .side-menu.collapsed .side-menu-list {
        display: none; /* Hide content instantly when collapsed */
        /* Alternatively, you could transition opacity or height if you prefer */
    }


    /* Existing styles for the sidebar content (header, list, items) still apply when not collapsed */
    .side-menu-header {
        margin-bottom: 20px;
        padding-bottom: 10px;
        padding-top: 8px;
        border-bottom: 1px solid #ccc;
    }

        .side-menu-header h3 {
            font-size: 1.2em;
            color: #333;
            margin: 0;
            font-family: 'MontserratBoldFont', sans-serif;
        }

    .side-menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .side-menu-list li {
            margin-bottom: 5px;
        }

    .side-menu-item {
        display: block;
        padding: 10px 15px;
        text-decoration: none;
        color: #007bff;
        font-size: 1em;
        border-radius: 5px;
        transition: background-color 0.2s ease, color 0.2s ease;
        font-family: 'MontserratRegular';
        font-size: 13px;
    }

        .side-menu-item:hover {
            background-color: #e2e6ea;
            color: #0056b3;
        }

        .side-menu-item.disabled {
            color: #6c757d;
            cursor: not-allowed;
            background-color: #f2f2f2;
            pointer-events: none;
        }

            .side-menu-item.disabled:hover {
                background-color: #f2f2f2;
                color: #6c757d;
            }

    .menu-divider {
        border-top: 1px solid #eee;
        margin: 10px 0;
    }

    /* Styles for your main dashboard content (module-grid, etc.) */
    .module-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .module-box {
        /*    min-height: 120px;*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #fff;
    }
        /* Ensure the disabled styles for module-box buttons are consistent */
        .module-box[disabled] {
            opacity: 0.6; /* Slightly fade out disabled buttons */
            cursor: not-allowed;
        }

    th {
        background-color: #0d1a28 !important;
        color: white;
        font-size: 9px;
        font-weight: normal !important;
        border: 0px solid #ddd !important;
        font-family: "MontserratSemiBold";
    }

    td {
        font-family: sans-serif;
        font-size: 8px;
    }

    select {
        border-style: none;
    }

    .display-none {
        display: none;
    }

    .display-block {
        display: block;
    }

    .aligntableInsideOfADiv {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .dataTables_info {
        font-size: 13px;
        font-family: 'MontserratSemiBold';
    }

    #SignoutNavheader {
        text-align: center;
    }

    #UserLoggedInName {
        text-align: center;
    }

    #headerLogo {
        margin-bottom: 5%;
    }

    /*////////////FONT SIZES///////////*/
    .fontSize8 {
        font-size: 8px;
    }

    .fontSize9 {
        font-size: 9px;
    }

    .fontSize10 {
        font-size: 10px;
    }

    .fontSize11 {
        font-size: 11px;
    }

    .fontSize12 {
        font-size: 12px;
    }

    .fontSize13 {
        font-size: 13px;
    }

    .fontSize14 {
        font-size: 14px;
    }

    .fontsize15 {
        font-size: 15px;
    }

    .fontSize16 {
        font-size: 16px;
    }

    .fontSize17 {
        font-size: 17px;
    }

    .fontSize18 {
        font-size: 18px;
    }

    .fontSize20 {
        font-size: 20px;
    }

    .fontSize25 {
        font-size: 25px;
    }

    .fontSize10 {
        font-size: 10px;
    }

    /*/////////////MARGINS////////////*/
    .margin-top10 {
        margin-top: 10px;
    }

    .margin-top15 {
        margin-top: 15px;
    }

    .margin-top20 {
        margin-top: 20px;
    }


    /*////////////PADDING//////////*/
    .padding-top15 {
        padding: 15px;
    }
}