/*Class session index first row of divs*/
.class-session-index-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);
    margin-bottom: 1rem;
    border-radius: 3px;
    padding: 5px;
    padding-left: 0px;
    padding-right: 10px;
    /*    padding-top: 12px;*/
}


    /* H2 heading */
    .class-session-index-navigation h2 {
        font-size: 1.8rem;
        font-weight: 600;
        margin: 0;
        color: white;
    }


        /* Date link */
        .class-session-index-navigation h3 {
            margin: 0;
        }

        .class-session-index-navigation h3 a {
            text-decoration: none;
            color: white;
            font-weight: 700;
            padding: 8px 16px;
            border-radius: 6px;
            transition: all 0.2s ease-in-out;
        }

        .class-session-index-navigation h3 a:hover {
            background: rgba(255,255,255,0.2);
            border-color: rgba(255,255,255,0.5);
        }
        }

    /* Navigation container */
    .class-session-index-navigation h4 {
        display: flex;
        align-items: center;
        justify-content: center;
/*        border: 1px solid #ddd;
        border-radius: 3px;*/
/*        background: #fff;*/
/*        box-shadow: 0 2px 6px rgba(0,0,0,0.05);*/
        font-size: 1rem;
        flex: 0 0 auto;
    }

        /* Each span acts like a flex group */
        .class-session-index-navigation h4 > span {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* Anchor links */
        .class-session-index-navigation h4 a {
            text-decoration: none;
            color: var(--bs-primary);
            font-size: 1rem;
            /*            font-weight: 700;*/
            padding: 6px 8px;
            margin: 0px 0px;
            margin-top: 8px;
            border-radius: 20px;
            transition: color 0.2s ease;
        }

            .class-session-index-navigation h4 a:hover {    
/*                color: var(--bs-primary);*/
                
            }
            .class-session-index-navigation h4 a .fa-large {
                color: darkslategray !important;
                font-size: 3rem;
            }

/*            .class-session-index-navigation h4 a .fa-solid {
                color: darkslategray !important;
            }*/

/*            .class-session-index-navigation h4 a .fa-solid:hover {
                color: var(--bs-primary) !important;
                transition: color 0.3s ease;
            }*/

.fa-icon-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.25em; /* space between number and icon */
    font-weight: 500; /* If using fa-solid */
    /*    border: 2px solid #333;*/
    color: var(--bs-primary) !important;
    margin-inline: 5px;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* y-offset, blur, color */
    /* Optional: add rounded corners for a soft feel */
    background-color: white; /* helps shadow show up against light backgrounds */
}

    .fa-icon-wrapper:hover {
        color: white !important;
        background-color: var(--bs-primary);
        border: 2px solid white;
        transition: color 0.3s ease;
    }

        .fa-icon-wrapper:hover i.bi {
            color: white !important;
        }

    .fa-icon-wrapper .fa-solid:hover {
        color: var(--bs-primary) !important;
        transition: color 0.3s ease;
    }

@media (max-width: 768px) {
    .fa-icon-wrapper {
        margin-inline: 3px;
    }
}

.icon-text {
    font-size: 1em !important;
    display: inline-flex;
    align-items: center;
    padding: 0px 0px;
}

        /* Separator slash */
        .class-session-index-navigation h4 span > span {
            color: #999;
        }

        /* Font Awesome icon in the middle */
        .class-session-index-navigation h4 i {
            font-size: 1.2rem;
            color: #aaa;
            padding: 0 6px;
            font-style: normal;
        }

    /* Mobile responsiveness */
    @media (max-width: 768px) {
        .class-session-index-navigation {
            flex-direction: column;
            text-align: center;
            padding: 0px;
            padding-left: 0px;
            padding-right: 0px;
        }

            .class-session-index-navigation h4 {
                width: 100%;
                padding: 0px 0px;
                padding-bottom: 7px;
         
            }

                .class-session-index-navigation h4 i {
                    font-size: 1rem;
                    padding: 0 2px;
                }

                .class-session-index-navigation h4 a {
                    margin-top: 6px;
                }




        .class-session-index-navigation h3 {
            margin: 10px 10px;
            padding-bottom: 0px;
        }

            .class-session-index-navigation h3 a {
                font-size: 1.5rem;
                margin-bottom: 0px;
              
            }
    }

   

    i.bi {
        font-size: 2rem;
        color: var(--bs-primary) !important;
    }

    

        i.bi span {
            position: relative;
            top: -1px;
            padding-left: 6px;
        }

@media (max-width: 768px) {
    i.bi {
        font-size: 0.5rem;
    }

        i.bi span {
            position: relative;
            top: 0px;
            padding-left: 4px;
        }


}



    /*HOMEWORK DUE SECTION*/

    .due-reminders-container {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }

        .due-reminders-container > * {
            flex: 1;
            min-width: 300px;
        }

    .homework-is-due-reminder {
        padding: 1rem;
        background-color: #D3FFE4;
        color: var(--bs-primary);
        font-weight: 900;
        border-radius: 3px;
        border: 2px solid var(--bs-primary);
    }

        .homework-is-due-reminder li a {
            text-decoration: none;
            font-weight: 500;
            color: var(--bs-primary);
        }

            .homework-is-due-reminder li a:hover {
                background-color: white;
                color: var(--bs-primary);
                border-radius: 4px;
                padding: 3px;
            }

    .recording-is-due-reminder {
        padding: 1rem;
        /*    background-color: var(--bs-primary);*/
        background-color: #FFEE8C;
        color: var(--bs-primary);
        opacity: 0.8;
        font-weight: 900;
        border-radius: 3px;
        border: 2px solid var(--bs-primary);
    }

        .recording-is-due-reminder li a {
            text-decoration: none;
            font-weight: 500;
            color: var(--bs-primary);
        }

            .recording-is-due-reminder li a:hover {
                background-color: white;
                color: var(--bs-primary);
                border-radius: 4px;
                padding: 3px;
            }


    /*First Row of headers in class session table*/

    tr td {
        vertical-align: top;
    }

.aes-class-session-table thead {
    display: table-header-group; /* default, but we need block-like for shadow */
    position: relative; /* give it its own stacking context */
    z-index: 4;
    box-shadow: 0 2px 3px rgba(65,105,225, 0.3) !important;
}

.aes-class-session-table tbody tr.class-session-row {
    height: 8rem;
    background-color: rgba(255, 238, 140, 0.3) !important;
    border-bottom: 15px solid white !important;
}



/*    .aes-class-session-table tbody tr:hover {
        background-color: rgba(65,105,225,0.1) !important;
    }
*/



.aes-class-session-table tr:hover .command-buttons a {
    color: var(--bs-primary);
    background: white;
    border: 2px solid var(--bs-primary);
}

/*.aes-class-session-table tr:hover .course-title {
        color: white;
}
*/


/*    @media (max-height: 768px) {
        .aes-class-session-table    {
            width: 1000px;
        }
    }*/
.aes-class-session-table th a {
    color: var(--bs-primary);
}

.aes-class-session-table th {
    
}

.course-header {
    font-size: 2rem;
}





.aes-class-session-table td.aes-class-session-td:nth-child(2),
.aes-class-session-table td.aes-class-session-td:nth-child(3),
.aes-class-session-table td.aes-class-session-td:nth-child(4),
.aes-class-session-table td.aes-class-session-td:nth-child(5),
.aes-class-session-table td.aes-class-session-td:nth-child(6) {
    color: var(--bs-primary);
    font-weight: 700;
    font-size: 1.3rem;
    /*    padding: 0.3rem;*/
    border-radius: 2px;
    /*    margin-top: 1.7rem;*/
    /*    margin-bottom: 1.7rem;*/
    line-height: 2.5rem;
}

.aes-class-session-table .command-buttons {
    /*    display: flex;
    flex-wrap: wrap;*/
    gap: 0.5rem;

    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two equal columns */
}


/*Style for the buttons on the right hand side of the class sessions page*/
    .aes-class-session-table .command-buttons a {
        color: var(--bs-primary);
        text-decoration: none;
        border: 2px solid var(--bs-gray-500);
        /*        padding: 0.3rem;*/

        border-radius: 2px;
        /*        margin-top: 1.7rem;*/
        /*        margin-bottom: 1.7rem;*/
        line-height: 2.5rem;
        font-weight: 500;
        white-space: nowrap;
        word-break: keep-all;
        /*flex: 1 1 calc(50% - 0.5rem);*/  /*2 per row */
        /*min-width: 100px;
        display: inline-flex;*/
        align-items: center;
        justify-content: center;

        padding-left: 5px;
        padding-right: 5px;

        /*        white-space: nowrap;*/
        /*        overflow: hidden;*/

   
    }


        .aes-class-session-table .command-buttons a:hover {
            background-color: var(--bs-primary) !important;
            color: white !important;
            border: 2px solid white !important;
        }


    /*set custom widths form columns*/
    .aes-class-session-table th {
        min-width: 150px; /* or whatever minimum you want */
    }



    /*table header widths*/

    .aes-class-session-table .course-header-width {
        min-width: 150px; /* or whatever minimum you want */
        width: 300px;
    }

    .aes-class-session-table .instructor-header-width {
        min-width: 120px; /* or whatever minimum you want */
        /*        width: 130px;
        max-width: 140px;*/
    }



    .aes-class-session-table .small-header-width {
        min-width: 80px;
        /*        width: 80px;*/
    }

    .aes-class-session-table {
        table-layout: auto; /* Allows max-width to work */
    }

        .aes-class-session-table .comment-width {
            max-width: 250px;
            min-width: 100px;
            width: 300px;
            color: var(--bs-primary);
            font-size: 1.3rem;
            
        }

        .aes-class-session-table .commands-width {
            /*        max-width: 500px;*/
            min-width: 130px;
            width: 150px;
/*            width: 250px;*/
        }

@media (max-width: 768px) {
    .aes-class-session-table .commands-width {
        min-width: 150px;
        width: auto; /* Let the table layout adjust */
    }
}




        /*Style for the course links on the left hand side of the class sessions page*/
        .aes-class-session-table .course-title {
            color: var(--bs-primary);
            font-weight: 900;
            font-size: 1.6rem;
            padding: 0.3rem;
            border-radius: 2px;
            margin-top: 1.7rem;
            margin-bottom: 1.7rem;
            line-height: 2.5rem;
        }



            .aes-class-session-table .course-title:hover {
                color: blueviolet !important;
            }

.aes-class-session-table .course-title-sub-button {
    text-decoration: none;
    font-weight: 500;
    color: dimgray;
    margin-left: 5px;
}

            .aes-class-session-table .course-title-sub-button:hover {
                text-decoration: none;
                font-weight: 600;
                color: blueviolet !important;
            }


        /*.table-responsive thead th {
    color: deeppink;
}*/

        /*.table-responsive thead th a {
    color: red;
    background: purple;
    border-radius: 5px;
    text-decoration: none;
}*/


        /*comment fields*/
.aes-class-session-table td.aes-class-session-td {
    /*            height: 100%;*/
    height: 5rem;
    max-height: 8rem;
    padding-top: 10px;
}

.aes-comment {
    display: block;
    width: 230px;
    min-width: 200px;
    max-width: 250px;
    height: 100%;
    margin: 0;
    color: var(--bs-primary);
    background-color: white;
    border: 3px solid gray;
    padding: 0.4rem;
    border-radius: 3px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    font-size: 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    line-height: 1.4rem;
}

@media (max-width: 768px) {
    .aes-comment {
        width: 14rem;
        
    }
}

    .aes-class-session-table .aes-comment:empty {
        background-color: transparent;
        box-shadow: none;
        border: none;
    }



    /*Checkbox*/
    input[type="checkbox"] {
        width: 15px;
        height: 15px;
        margin: 5px;
        padding-top: 5px;
        opacity: 1;
        transform: scale(1.5);
        accent-color: rgb(94, 23, 235);
    }

    /*Font Awesome*/

    .aes-class-session-table .fa-solid {
        opacity: 0.7;
        font-size: 2rem;
        color: var(--bs-primary) !important;
    }


        .aes-class-session-table .fa-solid:hover {
            opacity: 0.7;
            color: black !important;
            transition: color 0.2s ease;
        }