/*body {
    -webkit-user-select: none;*/ /* Safari */
    /*-ms-user-select: none;*/ /* IE 10+ / Edge */
    /*user-select: none;*/ /* Standard syntax */

    /*overflow-x: hidden;
    overflow-y: hidden;
}*/

.main-layout {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Adjust based on your layout's needs */
    padding-bottom: 30px; /* Matches the footer height to prevent content from being hidden */
    overflow: hidden; /* Prevents any overflow from the wrapper itself */
}

.content-wrapper {
    display: flex;
    flex: 1; /* Allows content area to grow and fill available space */
    overflow: hidden; /* Prevents any overflow from the wrapper itself */
    height: 100vh; /* Full viewport height */
}


    .content-wrapper .sidebar {
        min-width: 300px; /* Fixed width */
        overflow-y: auto; /* Adds a vertical scrollbar if content overflows */
        height: calc(100vh - 50px); /* Adjusts the height as needed, here subtracting 50px possibly for a header/footer */
        box-sizing: border-box; /* Ensures the width includes padding and border */
        background-color: #f8f9fa;
        border-right: 1px solid #e9ecef;
        transition: width 0.5s ease-in-out; /* Smooth transition for width change */
    }

        .content-wrapper .sidebar.has-footer {
            height: calc(100vh);
        }

        .content-wrapper .sidebar.short {
            width: 100px; /* Adjusted width when .short is applied */
            min-width: 100px;
        }

        .content-wrapper .sidebar .sidebar-body {
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .content-wrapper .sidebar .header .icon-img {
            height: 50px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .content-wrapper .sidebar.short .icon-img {
            display: none;
        }

        .content-wrapper .sidebar .header .text {
            display: none; /* Hide all text by default */
            font-weight: 800;
            color: #9A616D;

            font-size: 24px;
            transition: font-size 0.3s ease;
        }

            .content-wrapper .sidebar .header .text.long {
                display: block; /* Show by default unless overridden */
            }

        .content-wrapper .sidebar.short .header .text.long {
            display: none; /* Hide when .short is applied to the parent */
        }

        .content-wrapper .sidebar.short 
            .header .text.short {
            display: block; /* Show when .short is applied to the parent */
            font-size: 20px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .content-wrapper
        .sidebar.short .nev-group-parent span:not(.btn-icon),
        .content-wrapper
        .sidebar.short .nev-group-child span:not(.btn-icon) {
            display: none;
        }

        /*.content-wrapper .content .header,*/
        .content-wrapper .sidebar .header {
            display: flex;
            align-items: center;
            padding-top: 10px;
            padding-bottom: 10px;
            justify-content:center;
        }

    .content-wrapper .content {
        flex-grow: 1; /* Takes up remaining space */
        display: flex;
        flex-direction: column;
        /*overflow-x: auto;
        overflow-y: auto;*/ /* Enable vertical scrolling within the content area */
        padding: 0; /* Resets padding, specify if needed */
    }

        .content-wrapper .content .header {
            border-bottom: 1px solid #e0e0e0;
        }

        .content-wrapper .content .header, .content-wrapper .content .footer {
            flex-shrink: 0;
        }

        .content-wrapper .content .body {
            display: flex;
            flex-grow: 1;
            flex-direction: column; /* or 'row', depending on your layout */
            /* overflow-x: auto;
            overflow-y: auto;*/
            overflow-y: auto;
            background-color: #FAFAFA;
        }

.footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #B0B7D6;
    background-color: #E8F7F4;
    height: 50px;
}

    .footer .footer-left, .footer .footer-right {
        flex-grow: 0;
        flex-shrink: 0;
    }

    .footer .footer-left {
        padding-left: 10px !important;
    }

    .footer .footer-right {
        padding-right: 10px;
    }

    .footer .footer-center {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

.qickbar {
    position: fixed;
    top: 0px;
    right: 0;
    width: 300px; /* Initial width */
    height: calc(100% - 0px);
    border-left: 1px solid #B0B7D6;
    background-color: #FAFAFA;
    z-index: 100;
    padding: 10px;
    visibility: visible;
    transition: width 0.3s ease-in-out; /* Include width in the transition */
}

    .qickbar:not(.open) {
        visibility: hidden;
        width: 0; /* Transition to a width of 0 */
        padding: 0; /* Reduce padding to match the reduced width */
    }

.btn-slide {
    margin-left: auto;
    margin-right: 10px;
    display: none;
}

@media (max-width: 768px) { /* Adjust breakpoint as needed */
    .sidebar {
        position: fixed;
        height: 100vh;
        width: 85% !important;
        /*transform: translateX(-100%);*/ /* Start off-screen */
        z-index: 1000; /* Ensure it overlays content */
        transition: transform 0.5s ease-in-out; /* Smooth transition for sliding in and out */
        background-color: #e9ecef;
        border-right: 1px solid #dee2e6;
    }

        .sidebar.visible {
            transform: translateX(0);
        }

        .sidebar.short {
            width: 100%; /* Adjusted width when .short is applied */
            display: none;
        }

    .btn-slide {
        display: block;
    }
}

/* For Webkit browsers */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent; /* Make the scrollbar background transparent */
}

::-webkit-scrollbar-thumb {
    background-color: rgba(108, 99, 255, 0.6); /* Glassy violet color */
    border-radius: 4px;
    transition: background-color 0.3s;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(108, 99, 255, 0.8); /* Slightly darker on hover */
    }

::-webkit-scrollbar-track {
    background-color: transparent; /* Make the scrollbar track transparent */
}

/* For Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(108, 99, 255, 0.6) transparent;
}

/* Hide scrollbar when not hovering */
.body.list-group {
    overflow-y: hidden; /* Initially hide the scrollbar */
    padding-right: 15px; /* Add padding to allow space for scrollbar */
    transition: overflow 0.3s; /* Smooth transition for scrollbar visibility */
}

    .body.list-group:hover,
    .body.list-group:focus,
    .body.list-group:focus-within {
        overflow-y: auto; /* Show the scrollbar on hover, focus, or when any child element is focused */
    }

.table thead tr:nth-child(odd) a {
    color: white !important;
    text-decoration: none;
}

.bg-breadcrumb {
    color: #2A283F;
    background-color: #e1dcff;
    border-color: #e1dcff;
    padding: 0.5rem 0.5rem;
    border-radius: 7px;
}

.tmu-header {
    background-color: #ff6600; /* Use a similar orange color as in the TMU logo */
    color: white;
}

.badge-warning {
    width: 100px;
    background-color: #ffc107;
    color: black;
}

.badge-secondary {
    width: 100px;
    background-color: #6c757d;
    color: white;
}

.badge-info {
    width: 100px;
    background-color: #0dcaf0;
    color: white;
}

.custom-green {
    width: 100px;
    background-color: #28a745;
    color: white;
}

.custom-red {
    width: 100px;
    background-color: #e94e1b;
    color: white;
    border-color: #e94e1b;
}

.custom-red:hover {
    background-color: #d14618;
    border-color: #d14618;
    color: white;
}

.info-card {
    background-color: #f5f3ff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.tab-content {
    padding: 20px;
    background: #fff;
    /* border: 1px solid #dee2e6; */
    /* border-top: none;   */
    border-radius: 0 0 8px 8px;
}

.nav-tabs {
    border-bottom: none;
}

    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        border: none;
    }

    .nav-tabs .nav-link.active {
        color: #ff6600;
        font-weight: bold;
        border-bottom: 3px solid #ff6600;
    }

    .nav-tabs .nav-link {
        color: #66B94F;
        background-color: #fff;
    }

.section-title {
    color: #ff6600;
    border-bottom: 2px solid #e6e5f7;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.label-text {
    color: #6c757d;
    font-weight: 600;
    font-size: 0.9rem;
}

.value-text {
    color: #212529;
    font-size: 1rem;
}
