.classNotes {
    text-align: left;
    font-size: 15px;
    width: 30%;

    border: 1px solid black;
    text-align: left;
}

.classDesc {
    text-align: left;
    font-size: 18px;
    width: 70%;
    vertical-align: top;

    border: 1px solid black;
    text-align: left;
}

.classDesc p {
    margin: 10px;
}

.classTable {
    width: 100%;
}


.accClassDay {
    width: 10%;
}
.accClassTime {
    width: 15%;
}

.accClassAge {
    width: 25%;
}

.accClassDesc {
    width: auto;
}

.accTable {
    width: 100%;
}

.accTable td {
    /* border: 1px solid black; */
    text-align: center;
}

.accordion {
    background-color: rgb(1, 197, 1);
    /* color: #444; */
    cursor: pointer;
    padding: 0px;
    padding-top: 18px;
    padding-bottom: 18px;
    width: 100%;
    text-align: center;
    outline: none;
    font-size: 15px;
    transition: 0.2s;
    border: 1px solid black;
    margin-bottom: 2px;
}

.accordion:hover {
    background-color: rgb(0, 235, 0);  
    /* color: black; */
}

.classDescLarge {
    background: #a8fdb3;
    width: 100%;
    overflow: hidden;
    max-height: 0px;
    transition: all 0.5s ease-in-out;
    font-size: 18pt;
    overflow: hidden;
    box-sizing: border-box;
}

#state:checked + .classDescLarge {
    max-height: 500px;
}
#state2:checked + .classDescLarge {  
    max-height: 500px;  
}
#state3:checked + .classDescLarge {  
    max-height: 500px;  
}
#state4:checked + .classDescLarge {  
    max-height: 500px;  
}
#state5:checked + .classDescLarge {  
    max-height: 500px;  
}

#stateT1:checked + .classDescLarge {  
    max-height: 500px;  
}
#stateT2:checked + .classDescLarge {  
    max-height: 500px;  
}
#stateT3:checked + .classDescLarge {  
    max-height: 500px;  
}
#stateT4:checked + .classDescLarge {  
    max-height: 500px;  
}

/* div {
    background-color: lightcoral;
} */