.class-session-details-navigation {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
    color: #333;
    background-color: rgba(65,105,225, 1);
    border-radius: 3px;
}

/* Content container for the navigation items */
.details-navigation-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    justify-content: space-between;
}

/* Main heading */
.class-session-details-navigation h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
}

/* Course title section */
.class-session-details-navigation h4 {
    margin-top: 5px;
    margin-bottom: 5px;
    color: white;
    font-size: 1.8rem;
    margin-left: 10px;
    font-weight: 600;
}

    .class-session-details-navigation h4 a {
        text-decoration: none;
        color: white;
        padding: 4px 8px;
        border-radius: 2px;
        transition: all 0.2s ease-in-out;
    }

        .class-session-details-navigation h4 a:hover {
/*            background: rgba(255,255,255,0.2);*/
/*            border-bottom-color: white;*/
        }

.fa-solid.fa-angle-left,
.fa-solid.fa-angle-right {
    color: var(--bs-primary);
    opacity: 0.6;
    font-size: 2.5rem;
}

.fa-solid.fa-angle-left:hover,
.fa-solid.fa-angle-right:hover {
    color: darkslategray;
    opacity: 0.6;

}

/* Navigation container */
.class-session-details-navigation h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    background: #fff;
/*    box-shadow: 0 2px 6px rgba(0,0,0,0.05);*/
    font-size: 1rem;
    flex: 0 0 auto;
}

    /* Navigation groups */
    .class-session-details-navigation h3 > span {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* Date display in center */
    .class-session-details-navigation h3 .date-display {
        color: #333;
        font-weight: 700;
        font-size: 2rem;
        text-align: center;
        margin: 0 4px;
        color: var(--bs-primary);
    }

    @media (max-width: 768px) {
        .class-session-details-navigation h3 .date-display {
            font-size: 1.5rem;
        }
    })

    /* Navigation links */
        .class-session-details-navigation h3 a {
        text-decoration: none;
        color: var(--bs-primary);
        font-size: 1rem;
        font-weight: 600;
        padding: 2px;
        border-radius: 4px;
        transition: background 0.2s ease, color 0.2s ease;
    }

/*    .class-session-details-navigation h3 a:hover {
        background: var(--bs-primary);
        color: #fff;
        padding: 2px;
        border-radius: 2px;
        transition: background 0.2s ease, color 0.2s ease;
    }*/

    /* Arrow icons */
    .class-session-details-navigation h3 i {
        font-size: 1.5rem;
        color: #aaa;
        padding: 0 8px;
    }

/* Mobile responsiveness */
@media (max-width: 768px) {
    .class-session-details-navigation {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .details-navigation-content {
        flex-direction: column;
        width: 100%;
/*        gap: 15px;*/
    }

    .class-session-details-navigation h2 {
        font-size: 1.5rem;
    }

    .class-session-details-navigation h4 {
        font-size: 1.7rem;
        padding-top: 10px;
        padding-bottom: 10px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 2px;
    }

    .class-session-details-navigation h3 {
        width: 100%;
        padding: 15px 20px;
    }


        .class-session-details-navigation h3 i {
            font-size: 1.2rem;
        }
}

/*Lesson Plan or Comment containers*/

.details-page-comment-flex-parent {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
}



.details-page-comment-flex-child {
    flex-basis: calc(50% - 0.5rem); /* 2 per row, accounting for gap */
    flex-grow: 0;
    flex-shrink: 1;
    min-width: 300px; /* Will force wrapping when screen gets too small */
    display: flex;
    flex-direction: column;
}

.details-page-comment {
    display: block;
    
    margin: 0;
    color: var(--bs-primary);
    background-color: white;
    border: 3px solid gray;
    padding: 0.7rem;
    border-radius: 3px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    font-size: 1.3rem;
    min-height: 3rem;
    height: 14rem;
    overflow-y: auto;
    box-sizing: border-box; /* Include padding and border in width calculation */
    resize: vertical; /* Allow vertical resizing */
}

/* Style the dt elements */
.details-page-comment-flex-child dt {
    margin: 0 0 0.5rem 0;
    font-weight: bold;
    color: var(--bs-primary);
}

/* Style the dd elements */
.details-page-comment-flex-child dd {
    margin: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Remove hr styling conflicts */
.details-page-comment-flex-parent hr {
    display: none; /* Hide hr elements inside flex container as they break layout */
}

/* Mobile responsiveness - stack on smaller screens */
@media (max-width: 768px) {
    .details-page-comment-flex-parent {
        flex-direction: column;
    }

    .details-page-comment {
        height: 12rem; /* Slightly smaller on mobile */
    }
}

/*Quiz table*/

.no-quizzes-indication {
    color: var(--bs-primary);
    font-size: 1.2rem;
    font-weight: 600;
    border-bottom: none;

}


/* Main quiz table */
.quiz-table {
    margin-top: 16px;
    background-color: white;
    width: 100%;
    table-layout: fixed;
    overflow: hidden;
}

/* Table header */
.quiz-table-thead {
    position: relative;
    color: var(--bs-primary);
    background: white;
    font-weight: 800;
    border-radius: 6px;
    width: 100%;
}

.quiz-table-thead::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px; /* adjust spacing under text */
    width: 100%;
    height: 4px; /* thickness of underline */
    background-color: var(--bs-primary); /* underline color */
    border-radius: 2px; /* optional rounded edges */
    opacity: 0.2;
}

    

.quiz-table-thead th {
    padding: 10px 12px;
    font-weight: 600;
    font-size: 1.5rem;
    text-align: left;
}

    .quiz-table-thead th:nth-child(1) { /* Quiz Name */
        width: 15%;
        min-width: 10%;

    }

    .quiz-table-thead th:nth-child(2) { /* Class Average */
        width: 20%;
        min-width: 10%;
    }

    .quiz-table-thead th:nth-child(3) { /* Student Grades */
        width: 65%;
    }

        

/* Table body */
.quiz-table-body {
    background-color: white;
}

/* Table rows */
/*.quiz-table-tr:hover {
    background-color: #FFF7D1;
}*/

/* Table cells */
.quiz-table-td {
    padding: 10px 12px;
    vertical-align: top;
    color: #3F57D1;
    font-weight: 600;
    font-size: 1.2rem;
    

}



/* Quiz name links */
.quiz-name {
    color: #4963D7;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.6rem;
}

    .quiz-name:hover {
        color: #3B51B5;
        text-decoration: underline;
    }

/* Class average specific styling */
.quiz-table-avg {
    /*    text-align: center;*/
    padding: 20px;
}

.quiz-avg-content {
    font-size: 1.6rem;
}

/* Mobile labels */
.mobile-label {
    display: none; /* Hidden by default on large screens */
}

/* Student grades container */
.quiz-table-student-grade {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

}

/* Individual student grade pairs */
.student-grade-pair {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 8px;
    margin: 0px 6px;
    margin-top: 5px;
    background-color: #F9FAFB;
    border-radius: 4px;
    border-left: 4px solid #4963D7;
    border-right: 4px solid #4963D7;
    border: 1px solid gray;
    font-size: 1.2rem;
    white-space: nowrap;
}

    .student-grade-pair a {
        color: darkslategray;
        text-decoration: none;
        font-weight: 500;
    }

        .student-grade-pair a:hover {
            color: #3B51B5;
            text-decoration: underline;
        }

    .student-grade-pair span {
        color: #3F57D1;
    }

/* Empty state styling */
.quiz-table-tr td[colspan] {
    text-align: center;
    color: #9CA3AF;
    padding: 16px;
    font-style: italic;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .quiz-table {
        border: 0;
    }

    .quiz-table-thead {
        display: none; /* Hide headers on mobile */
    }

    .quiz-table-tr {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 16px;
        border: 1px solid #E5E7EB;
        border-radius: 4px;
        background-color: white;
    }

    .quiz-table-td:nth-child(1),
    .quiz-table-td:nth-child(2) {
        width: 50%;
        padding: 12px;
        border-bottom: 1px solid #E5E7EB;
        background-color: #F9FAFB;
        box-sizing: border-box;
    }

    .quiz-table-td:nth-child(3) {
        width: 100%;
        padding: 12px;
    }

    .mobile-label {
        display: block;
        font-weight: 700;
        color: #4963D7;
        font-size: 1.4rem;
        margin-bottom: 6px;
        line-height: 1.2;
        text-align: left;
    }

    .quiz-avg-content {
        display: inline-block;
        width: 100%;
        text-align: left;
        
    }

    .student-grade-pair {
        font-size: 1.2rem;
        padding: 7px 6px;
        margin-top: 5px;
    }

    .quiz-table-avg,
    .quiz-name {
        font-size: 1.6rem;

    }
}

/*@media (max-width: 480px) {
    .quiz-table-td:nth-child(1),
    .quiz-table-td:nth-child(2) {
        width: 100%;
    }

    .student-grade-pair {
        font-size: 0.85rem;
    }
}*/

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*Homework*/

.none-message {
    color: var(--bs-primary);
    opacity: 0.6;
    font-weight: 400;
    font-size: 1.4rem;
    margin-left: 10px;
}

.hw-flex-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    width: 100%;
    margin: 0; /* remove outside spacing */
    margin-top: 30px;
    margin-bottom: 40px;
    padding-left: 0; /* remove the indent */
    gap: 30px;
}

@media (max-width: 768px) {
    .hw-flex-container {
        flex-direction: column;
        margin-top: 20px;
    }
}


/*
.hw-item-container:has(#partial2) {
    flex: 0 0 auto;
}*/


.hw-item-container {
    position: relative;
    flex: 1 1 auto;
    max-width: 1000px;
    border: 2px solid gray;
    border-radius: 6px;
    padding: 30px;
    padding-left: 40px;
    /*    padding-left: 15px;*/
    color: white;
    background-color: rgba(65,105,225, 0.8);
    padding-bottom: 5rem;
}



@media (max-width: 768px) {
    .hw-item-container {
        padding: 15px;
        
        padding-bottom: 4rem;
        
    }
}


.homework-item-title {
    
    vertical-align: top;
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: wrap;
}

.homework-item-title b {
    padding-bottom: 80px;
}

.homework-item-title span {
    white-space: nowrap;
    
}

.homework-section-title {
    position: relative;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--bs-primary);
    margin-bottom: 15px;
    margin-top: 40px;
    display: block;
}

    .homework-section-title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -5px; /* adjust spacing under text */
        width: 100%;
        height: 4px; /* thickness of underline */
        background-color: var(--bs-primary); /* underline color */
        border-radius: 2px; /* optional rounded edges */
        opacity: 0.2;
    }

ol {
    list-style: decimal;
}

li::marker {
    font-size: 1.5rem;
    color: white;
    font-weight: 700;
}

@media (max-width: 768px) {
    ol {
        list-style: none;
    }
}


.hw-item-container li {
    padding-left: 0px;
}

.hw-item-for-admin {
    display: inline-block;
    text-decoration: none;
    color: white;
    background: var(--bs-primary);
    padding: 10px 20px;
    border-radius: 5px;
    border: 3px solid var(--bs-primary);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 10px 5px;
    transition: all 0.3s ease;
}

    .hw-item-for-admin:hover {
        color: var(--bs-primary);
        background: white;
        border: 3px solid var(--bs-primary);
    }

    .hw-item-for-admin a {
        text-decoration: none;
        color: white;
        transition: all 0.3s ease
    }

    .hw-item-for-admin:hover a {
        text-decoration: none;
        color: var(--bs-primary);
        
    }

    .hw-item-for-admin a:hover {
        color: dimgray;
        text-decoration: underline;
    }

.hw-item-admin-span {
    color: white;
    display: inline-block;
    font-size: 1.1rem;
    padding-left: 0px;
    margin-left: 05px;
    transition: all 0.3s ease
}

.hw-item-for-admin:hover .hw-item-admin-span {
    text-decoration: none;
    color: var(--bs-primary);
}

ol:has(li.hw-item-for-admin) {
    padding-left: 0rem;
    list-style: decimal !important;
}



.start-of-rec-reminder {
    position: absolute;
    right: -1.5px;
    bottom: -1.5px;
    display: block;
    color: white;
    background-color: red;
    font-weight: 600;
    opacity: 1;
    padding: 5px;
    font-size: 1.3rem;
    border-bottom-right-radius: 6px;
    border-top-left-radius: 6px;
    border: 0 solid red; /* Added to avoid abrupt border appearance */
    border-left: 4px solid white;
    border-top: 4px solid white;
    max-width: 10rem; /* Added for smooth max-width transition */
    max-height: 5rem; /* Added to set initial height */
    transition: background-color 0.6s ease, color 0.6s ease, border 0.2s ease, border-radius 0.6s ease, max-width 0.2s ease-in, max-height 0.3s ease-in 0.1s;
}

    /*.start-of-rec-reminder:active {
        transform: translateY(30px);*/ /* smooth slide down */
    /*}*/
    .start-of-rec-reminder[open] {
        position: absolute;
        max-width: 70%;
        max-height: 103%;
        overflow-y: auto;
        overflow-x: hidden;
        white-space: wrap;
        z-index: 2;
        opacity: 1; /* optional fade */
        background-color: white;
        color: red;
        border: 2px solid red;
        border-radius: 4px;
        font-size: 1.5rem;
    }

    @media (max-width: 768px) {
        .start-of-rec-reminder {
            font-size: 1rem;
            border: 2px solid red;
            padding: 3px;
            bottom: -1.7px;
            border: 0 solid red; /* Added to avoid abrupt border appearance */
            border-left: 4px solid white;
            border-top: 4px solid white;
        }

        .start-of-rec-reminder[open] {
            font-size: 1rem;
            padding: 3px;
            
        }
    }

/*////////////////////////////////////////////////////////*/

/*recording controls*/
.recording-homework-controls-container {
    margin-top: 10px;
    margin-bottom: 20px;
    
}

.recording-status-message {
/*    color: white !important;
    font-size: 1.5rem;
    background: red;
    padding: 10px;
    border-radius: 30x;*/
    /*    position: relative;*/
    color: red !important;
    text-decoration: none;
    border: 3px solid red;
/*    padding: 0.5em;*/
/*    padding-left: 0.9rem;
    padding-right: 0.9rem;*/
    border-radius: 30px;
    /*    top: 10px;*/
    margin: 5px;
    margin-top: 20px;
/*    height: 3rem;*/
    padding: 10px 10px;
    font-weight: 600;
    background: white;
}


/*recording buttons*/
.recording-button {
    /*    position: relative;*/
    color: var(--bs-primary);
    text-decoration: none;
    border: 3px solid var(--bs-primary);
/*    padding: 0.5em;*/
/*    padding-left: 0.9rem;
    padding-right: 0.9rem;*/
    border-radius: 30px;
    /*    top: 10px;*/
    margin: 1px;
    margin-top: 10px;
    height: 3rem;
    font-weight: 600;
}

    .recording-button:hover {
        background-color: var(--bs-primary);
        color: white;
        border: 3px solid var(--bs-primary);
    }

/*homework receive status*/

.hw-status-received-manually {
    display: block;
    margin-left: 10px;
    background: #27b376;
    padding: 4px 15px;
    font-size: 1.2rem;
    border-radius: 30px;
    border: 3px solid white;
    white-space: nowrap;
    color: white;
    margin-top: 20px;
    width: fit-content;
}

@media (max-width: 768px) {
    .hw-status-received-manually {
        font-size: 1rem;
    }
}

.hw-status-received-manually-link {
    
    text-decoration: none !important;
    color: white;
}

.hw-status-received-manually:hover {
    text-decoration: none !important;
    color: #27b376;
    background: white;
    border: 3px solid #27b376;
}

    /* When hovering over the parent button, change the nested link color */
    .hw-status-received-manually:hover .hw-status-received-manually-link {
        color: #27b376 !important;
    }

/*Uploaded Recording Files*/

/*.recording-upload-container {
    display: flex;
}
.recording-upload {
    background: pink;
}
.recording-upload-file {
    display: 　inline;
    color: red;
    background: white;
    margin: 5px;
    padding: 1px;
    white-space: nowrap;
    width: 100%;*/
    /*    line-height: 1px;*/
/*}

.recording-upload-file a {
    text-decoration: none;
    color: red;
}*/

.recording-upload-container {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap if out of space */
    margin-top: 0px;
    align-items: center; /* Vertically center items */
/*    border: 1px solid white;*/
/*    padding: 10px;*/
    border-radius: 4px;

    
    
}

    .recording-upload-container:empty {
        border: 0px solid white;
    }

.recording-upload {
    display: flex; /* Make it a flex container for its children */
    flex-wrap: wrap; /* Allow wrapping within this div */
    align-items: center; /* Align items vertically */
    background: white; /* Gradient pink for modern feel */
    padding: 0.25rem 0.5rem; /* Padding inside the pink area */
    border-radius: 4px; /* Slight rounding */
    transition: transform 0.2s ease; /* Smooth hover effect */
    margin: 10px;
}



.recording-upload-file {
    display: inline-flex; /* Use inline-flex for better control */
    color: forestgreen; /* Red with Bootstrap-like shade */
    font-weight: 600; 
    
    margin: 0 0.5rem 0 0; /* Margin for spacing, right margin for link gap */
    padding: 0.25rem 0.5rem; /* More padding for readability */
    white-space: nowrap; /* Prevent text wrapping within span */
    border-radius: 4px; /* Rounded corners */
    font-size: 0.9rem; /* Slightly smaller text for balance */
    
    align-items: center; /* Align text vertically */
}

.rejected-recording-upload-file {
    display: inline-flex; /* Use inline-flex for better control */
    color: red; /* Red with Bootstrap-like shade */
    font-weight: 600;
    margin: 0 0.5rem 0 0; /* Margin for spacing, right margin for link gap */
    padding: 0.25rem 0.5rem; /* More padding for readability */
    white-space: nowrap; /* Prevent text wrapping within span */
    border-radius: 4px; /* Rounded corners */
    font-size: 0.9rem; /* Slightly smaller text for balance */

    align-items: center; /* Align text vertically */
}

.recording-upload a {
    text-decoration: none;
    color: green; /* Inherit color from parent (e.g., #dc3545) */
    background: none; /* Remove any default background */
    border: none; /* Remove any default border */
    outline: none; /* Remove focus outline (customize for accessibility if needed) */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}

    .recording-upload a i.fa-solid {
        text-decoration: none;
        color: red !important; /* Match text color */
        opacity: 0.3;
        
        background: #fff !important; /* White background for link */
        
        
        transition: all 0.2s ease; /* Smooth transitions */
    }

        .recording-upload a i.fa-solid:hover {
            color: red;
            opacity: 1;
            font-size: 120%;
            text-decoration: none; /* Remove underline */
        }



.rejected-recording-details-container {
    
    align-items: center; /* Align items vertically */
    background: white; /* Gradient pink for modern feel */
    padding: 0.25rem 0.5rem; /* Padding inside the pink area */
    border-radius: 4px; /* Slight rounding */
    transition: transform 0.2s ease; /* Smooth hover effect */
    margin: 10px;
    color: red !important;
}
.rejected-recording-message {
    white-space: wrap;
    color: red;
    background: white;
}


/*upload homework file button*/

.upload-homework-button {
    text-decoration: none;
    color: white;
    font-size: 1rem;
    font-weight: 500;
    padding: 5px;
    border-radius: 3px;
    border: 2px solid white;
    transition: font-size 0.3s ease, color 0.3s ease, background 0.3s ease;
}

    .upload-homework-button:hover {
        color: var(--bs-primary);
        background: white;
        border: 2px solid white;
        font-size: 1.03rem;
    }

/*/////////////////////////////////////////////////////////////////////////////////////*/
/*Attachments*/

.attachments-title {
    position: relative;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--bs-primary);
    margin-bottom: 15px;
    margin-top: 40px;
}

.attachments-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px; /* adjust spacing under text */
    width: 100%;
    height: 4px; /* thickness of underline */
    background-color: var(--bs-primary); /* underline color */
    border-radius: 2px; /* optional rounded edges */
    opacity: 0.2;
}

.attachment-container-flex-parent {
    display: flex;
    flex-wrap: wrap; /* lets items go to the next row if needed */
    gap: 10px; /* cleaner spacing than margin */
}

.attachment-container {
    flex: 0 0 auto; /* don’t grow, don’t shrink, keep natural size */
    width: auto; /* ignore fixed width */
    border: 2px solid var(--bs-primary);
    background: white;
    padding: 10px;
    border-radius: 4px;
}

.attachment-container {
    background: rgba(220,220,220, 0.2);
}

.attachment-container:hover {
    background: rgba(220,220,220, 0.4);
}

/*hide if there is no attachment*/
.attachment-container:empty {
    display: none;
}

.attachment-container:not(:has(.attachment-link)) {
    display: none;
}

.attachment-link {
    text-decoration: none;
    color: var(--bs-primary);
    
    font-size: 1.3rem;
    font-weight: 700;

}

.recording-file-size {
    color: red;
    padding-left: 5px;
    opacity: 0.4;

}


/*/////////////////////////////////////////////////////////////////////////////*/
/*Attendance*/
.attendance-section-title {
    position: relative;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--bs-primary);
    margin-bottom: 15px;
    margin-top: 20px;
    display: block;
}

    .attendance-section-title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -5px; /* adjust spacing under text */
        width: 100%;
        height: 4px; /* thickness of underline */
        background-color: var(--bs-primary); /* underline color */
        border-radius: 2px; /* optional rounded edges */
        opacity: 0.2;
    }

.attendance-sub-title {
    color: var(--bs-primary);
    font-size: 1.2rem;
    opacity: 0.8;

}


.attendance-students {
    color: var(--bs-primary);
    background: white;
    border: 2px solid var(--bs-primary);
    border-radius: 3px;
    padding: 3px 5px;
    margin-top: 10px;
    display: inline-block;
    transition: all 0.3s ease;
    
}

    .attendance-students:hover {
        background: var(--bs-primary);
        color: white;
    }

.attendance-not-attending-students {
    color: var(--bs-primary);
    background: white;
    border: 2px solid rgba(255, 51, 51, 0.6); /* #ff3333 with 0.6 opacity */
    border-radius: 3px;
    padding: 3px 5px;
    margin-top: 10px;
    display: inline-block;
}

    .attendance-not-attending-students:hover {
        background: rgba(255, 51, 51, 0.8);
        color: white;
    }


/*bottom buttons*/
.bottom-details-buttons-container {
    position: relative;
    display: flex;
    gap: 10px;
    margin-top: 7rem;
    margin-bottom: 40px;
}

    .bottom-details-buttons-container .aes-button::before {
        content: "";
        position: absolute;
        left: 0;
        top: -15px; /* adjust spacing under text */
        width: 100%;
        height: 4px; /* thickness of underline */
        background-color: var(--bs-primary); /* underline color */
        border-radius: 2px; /* optional rounded edges */
        opacity: 0.2;
    }

.bottom-details-buttons-container .aes-button {
    flex: 1 1 auto;
}

/*////////////////////////////////////////*/
/*Recordings*/

.class-recording-title {
    text-decoration: none;
    color: var(--bs-primary);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
    margin-top: 20px;
}

.class-recording-link {
    text-decoration: none;
    color: var(--bs-primary);
    border: 2px solid var(--bs-primary);
    border-radius: 3px;
    padding: 5px;
    margin: 10px;
    background: rgba(220,220,220, 0.1);
    font-size: 1.1rem;
    font-weight: 700;
}

    .class-recording-link:hover {
        text-decoration: none;
        color: var(--bs-primary);
        border: 2px solid var(--bs-primary);
        border-radius: 3px;
        padding: 5px;
        margin: 10px;
        background: rgba(220,220,220, 0.3);
    }