.accordion-item {
    background-color: #fff;
    overflow: hidden;
}

.accordion-header {
    background-color: #f7f7f7;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 5px 10px;
    margin-left: 3px;
    margin-right: 3px;
    border-radius: 5px;
    width: 100%;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}

.accordion-header:hover {
    background-color: #e2e2e2;
}

.accordion-collapse {
    display: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, display 0s 0.3s;
}

.accordion-collapse.show {
    display: block;
    max-height: 1000px; /* You can adjust this value based on your content height */
    transition: max-height 0.3s ease;
}

.accordion-body {
    padding: 1rem;
    background-color: #fafafa;
    border-top: 1px solid #e5e5e5;
}
/* Basic Dropzone container styling */
.dropzone {
    border: 2px dashed #ddd;
    border-radius: 4px;
    padding: 20px;
    background-color: #f9f9f9;
    text-align: center;
    position: relative;
}

/* Hover effect */
.dropzone:hover {
    border-color: #333;
}

/* Dropzone text styling */
.dropzone .dz-message {
    font-size: 16px;
    color: #333;
    font-weight: bold;
}

/* Dropzone previews container styling */
.dropzone .dz-preview {
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #fff;
}

/* Dropzone preview image styling */
.dropzone .dz-preview .dz-image img {
    border-radius: 4px;
}

/* Dropzone preview remove button styling */
.dropzone .dz-preview .dz-remove {
    color: #ff0000;
    font-size: 14px;
    cursor: pointer;
}

/* Dropzone preview progress bar styling */
.dropzone .dz-preview .dz-progress {
    background-color: #eee;
    height: 5px;
    border-radius: 3px;
}

/* Dropzone progress bar fill styling */
.dropzone .dz-preview .dz-progress .dz-upload {
    background-color: #007bff;
    height: 100%;
    border-radius: 3px;
}

.activity-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

.line {
    flex-grow: 1;
    border-top: 1px dashed #c6bcbc;
    margin: 0 10px;
}

.activity-button {
    background-color: #d6e7f5;
    border: none;
    border-radius: 20px;
    padding: 8px 15px;
    color: #1d516c;
    font-size: 16px;
    cursor: pointer;
    white-space: nowrap;
}

.activity-button:hover {
    background-color: #c5dbe9;
}
.border-blueGray-10{
    border-top: 0.2px solid #000;
}
.bg-green-500 {
    background:#80d7bd61 !important;
}

.bg-yellow-500 {
    background: #f9f41640;
}

.bg-rose-500 {
    background: #f43f5e42;
}
.bg-blueGray-50 {
    background-color: #fff;
}
h2.bg-rose-500{
    color: #000;
}
.sidebar-nav {
    display: inline-flex;
    align-items: center;
    width: 100%;
    margin-bottom: 5px;
    background: #c6eae2;
    padding: 10px;
    border-radius: 6px;
    /*border: 1px solid #c6eae2;*/
}
.sidebar-nav-active {
    display: inline-flex;
    align-items: center;
    width: 100%;
    margin-bottom: 5px;
    background: #b8f9f1;
    padding: 5px;
    border-radius: 6px;
    /*border: 1px solid #c6eae2;*/
    color: #000;
}
.subnav{
    background: #fff;
    border-radius: 6px;
}
.subnav .sidebar-nav {
    border-left: 2px solid #f5e66863;
    margin-bottom: 1px;
    background: #fffa0f1a;
    padding: 3px !important;
    border-radius: 0px;
    padding-left: 5px!important;
    font-size: 0.7rem;
}
.subnav{
    margin-bottom: 2px;
    /*margin-left: 0px;*/
    /*padding-left: 1rem;*/
}
.subnav .sidebar-nav-active>i{
    color: #50d1b4!important;
    font-size: 10px;
}
.subnav .sidebar-nav>i{
    /*color: #50d1b4!important;*/
    font-size: 0.8rem;
}
.subnav .sidebar-nav-active{
    border-left: 2px solid #50d1b4;
    color: #000 !important;
    margin-bottom: 0px;
    background: rgba(185, 227, 218, 0.28) !important;
    padding: 3px !important;
    border-radius: 0px;
    padding-left: 5px !important;
    font-size: 0.7rem;
}
.bg-pink-600{
    background: #c6eae2;
}

.sidebar-nav-active>i{
    font-size: 1.3rem;
    color: #000;
}
.sidebar-nav>i{
    font-size: 1.3rem;
    color: #000;
}
.sidebar-nav:hover{
    color: #000;
}
.sidebar-nav>i:hover{
    color: #000;
}
.sidebar-nav-active:hover{
    color: #000;
}
/*.sidebar-nav{*/
/*    color: #fff;*/
/*}*/
/*.list-none li{*/
/*    border-bottom: 1px solid #fff;*/
/*}*/
nav.px-6{
    background: aliceblue;
    padding: 8px!important;
}
.items-center .sidebar-nav{
    padding: 5px;
}
@media only screen and (min-width: 768px) {
    .md\:px-10 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}
.md\:block.text-left.md\:pb-2.text-blueGray-700.mr-0.inline-block.whitespace-nowrap.text-sm.uppercase.font-bold.p-4.px-0{
    /*color: #ffffff;*/
    padding: 10px;
}
.w-12.h-12.text-sm.text-pink-400.md\:text-white.inline-flex.items-center.justify-center.rounded-full.font-bold.uppercase{
    color: #000!important;
}
.text-white.text-sm.uppercase.hidden.lg\:inline-block.font-semibold{
    color: #000;
}
/* For WebKit-based browsers (e.g., Chrome, Safari) */
::-webkit-scrollbar {
    width: 6px; /* Scrollbar width */
}

::-webkit-scrollbar-track {
    background-color: #fff; /* Background color of the scrollbar track */
}

::-webkit-scrollbar-thumb {
    background-color: #c6eae2; /* Scrollbar thumb color */
    border-radius: 10px; /* Rounded corners on the thumb */
}
/* For WebKit-based browsers (e.g., Chrome, Safari) */
::-webkit-scrollbar {
    height: 6px; /* Height of the horizontal scrollbar */
}

::-webkit-scrollbar-track {
    background-color: #fff; /* Background color of the scrollbar track */
}

::-webkit-scrollbar-thumb {
    background-color: #c6eae2; /* Color of the scrollbar thumb */
    border-radius: 10px; /* Rounded corners on the thumb */
}

/* Optional: Styling for Firefox */
* {
    scrollbar-width: thin; /* Thin scrollbar for Firefox */
    scrollbar-color: #c6eae2 #fff; /* Scrollbar thumb and track color */
}
.has-sub {
    position: relative;
    padding-right: 20px; /* Space for the arrow */
    cursor: pointer;
}

.has-sub::after {
    content: "\1F893"; /* Unicode for downward arrow */
    position: absolute;
    right: 10px;
    top: 65%;
    transform: translateY(-50%);
    font-size: 20px; /* Adjust size as needed */
    transition: transform 0.3s ease;
}
.has-sub.sidebar-nav-active::after {
    transform: translateY(-130%) rotate(180deg); /* Rotate arrow when open */
}

/* Optional: Hide dropdown by default */
.has-sub .dropdown {
    display: none;
}

.has-sub.open .dropdown {
    display: block; /* Show dropdown when parent is open */
}
/*.table.table-index td {*/
/*    text-wrap: nowrap;*/
/*}*/
.table.table-index.border.w-full.mt-4 td{
    text-wrap: unset!important;
}
.table.table-index th {
    --tw-border-opacity: 1;
    border: 1px solid #fff;
    padding: .75rem 1.5rem;
    background: black;
    color: aliceblue;
}
.table.table-index tr:nth-child(odd) {
    background-color: #f2f2f2; /* Light gray for odd rows */
}
.table.table-index tr:nth-child(even) {
    background-color: #ffffff; /* White for even rows */
}
.table.table-index td {
    border: 1px solid #0000003b;
    border-style: solid !important;
}
.table.table-index.teacher-course td {
    white-space: nowrap;
}
.text-green-600{
    color: #17de81;
}
.text-yellow-500{
    color: #ffdf1b;
}
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
    background: transparent;
}
/*@media only screen and (min-width: 768px) {*/
/*    .card .lesson-body {*/
/*        padding-left: 0rem!important;*/
/*        padding-right: 0rem!important;*/
/*    }*/
/*}*/
.tooltip .tooltiptext {
    visibility: hidden;
    width: 160px; /* Adjust width as needed */
    background-color: #333; /* Dark background similar to Bootstrap */
    color: #fff; /* White text */
    text-align: center;
    border-radius: 4px; /* Rounded corners */
    padding: 8px; /* Padding for content */
    position: absolute;
    z-index: 1000; /* Ensure it's on top */
    bottom: -190%; /* Position above the element */
    left: 50%;
    margin-left: -80px; /* Center the tooltip */
    opacity: 0;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; /* Smooth fade-in and fade-out */
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: -20%; /* Arrow pointing downwards */
    left: 50%;
    margin-left: -5px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent transparent #333; /* Match tooltip background */
}
.bg-cadetblue.bg-green-500 {
    background-color: cadetblue!important;
    color: #fff;
    padding: 8px;
}
.form-check{
    padding: 8px;
    border: 1px solid #7fd1d3;
}
.table td.break {
    /*text-align: center;*/
    /*vertical-align: middle;*/
    writing-mode: vertical-lr;
    display: inline-block;
    /*transform: rotate(90deg);*/
    /*transform-origin: left bottom;*/
    /*white-space: nowrap;*/
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
.lesson-table td{
    padding: 0px!important;
}
.lesson-table tr{
    background: #fff!important;
}

header.breadcrumb {
    background-color: #000;
    color: #fff;
    font-size: 1.4rem;
    /*letter-spacing: .05em;*/
    text-transform: uppercase;
}

.breadcrumb nav {
    display: table;
    overflow: hidden;
    width: 100%;
}

.breadcrumb ol {
    display: table-row;
    list-style: none;
    text-align: center;
}

.breadcrumb li {
    line-height: 16px;
    display: table-cell;
    vertical-align: middle;
    width: 25%;
}

.breadcrumb a,
.breadcrumb b {
    display: block;
    padding: 8px 0;
    position: relative;
    white-space: nowrap;
}

.breadcrumb a::after {
    background-color: #000;
    border-radius: 0 0 0 48px;
    box-shadow: 3px -3px 0 3px #def;
    content: "";
    height: 55px;
    position: absolute;
    right: -24px;
    top: 0;
    transform: scale(.707) rotate(45deg);
    width: 55px;
    z-index: 1;
}

.breadcrumb a,
.breadcrumb a:link,
.breadcrumb a:visited,
.breadcrumb a:hover,
.breadcrumb a:active,
.breadcrumb a:focus {
    color: #fff;
    text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:hover::after {
    background-color: #3c3c3c;
}
.arrow-bounce {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
}
.breadcrumb b {
    background-color: #777;
    font: inherit;
}
.week_day {
    writing-mode: vertical-lr;
    position: absolute;
    top: 47px;
    left: 20px;
    font-size: 16px;
}
.read-more-content {
    max-height: 100px; /* Adjust the initial height as needed */
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.read-more-toggle {
    color: blue;
    cursor: pointer;
}
@media only screen and (min-width: 768px) {
    .md-w-1-2 {
        width: 50%;
    }
}
@media only screen and (max-width: 768px) {
    .lesson-table {
        width: 600px;
    }
    .mt-top{
        margin-top: 15px;
    }
    .md-w-1-2 {
        width: 50%;
    }
    .breadcrumb a, .breadcrumb a:link, .breadcrumb a:visited, .breadcrumb a:hover, .breadcrumb a:active, .breadcrumb a:focus {
        color: #fff;
        text-decoration: none;
        font-size: 12px;
        padding: 0px 16px 0px 32px;
    }
    .breadcrumb a .text-sm{
        font-size: 9px;
    }
    .breadcrumb .text-sm{
        font-size: 9px;
    }
    .breadcrumb a::after {
        background-color: #000;
        border-radius: 0 0 0 48px;
        box-shadow: 3px -3px 0 3px #def;
        content: "";
        height: 50px;
        position: absolute;
        right: -24px;
        top: -7px;
        transform: scale(.707) rotate(45deg);
        width: 56px;
        z-index: 1;
    }
    .breadcrumb b {
        background-color: #777;
        font: inherit;
        font-size: 12px;
        padding: 10px 30px;
    }
    .lesson-content{
        display: block;
    }
    .lesson-content .sidebar{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .lesson-content .sidebar label{
        padding: 0px;
        margin: 5px 5px 5px 5px;
        height: 65px;
        box-shadow: unset;
    }
    .lesson-content .mt-6{
        margin-top: 3px;
    }
    .lesson-content .sidebar label .bg-green-500{
        height: 65px;
    }
    .form-flex{
        display: block;
    }
    .form-flex .pt-3{
        padding-top: 0px;
    }
    .relative.px-4.md\:px-10.mx-auto.w-full.min-h-full.-m-48{
        padding: 0px;

    }
    .relative.px-4.md\:px-10.mx-auto.w-full.min-h-full.-m-48 .row{
        padding: 0px;
    }
    .form-check svg{
        height: 20px;
        width: 20px;
    }
    .form-check span{
        font-size: 12px;
    }
}
.profile-pic{
    height: 135px;
}
.subitem{
    background: transparent;
}
.subitem .sidebar-nav{
    padding: 2px !important;
    font-size: 10px;
    background: #ffbcc724;
    border-left: 2px solid #f43f5e63;
    margin-bottom: 0px;
}
.subitem .sidebar-nav i{
    font-size: 10px;
}
.subnav .items-center.secitem{
    background: #fff34042;
}

.subnav .items-center.secitem .sidebar-nav{
    background: #fff34000;
}
.subnav .subitem .sidebar-nav-active {
    border-left: 2px solid #50d1b4;
    color: #50d1b4 !important;
    margin-bottom: 0px;
    background: #e0fff847 !important;
    padding: 0px !important;
    border-radius: 0px !important;
    padding-left: 5px !important;
    font-size: 10px;
}