/*container for text panel, schedule and checkboxes*/
.schedule-container{
    display: flex;
    width: 810px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    flex-flow: column nowrap;
    margin-bottom: 5px;
    background-color: var(--supplement-background);
    color: var(--alternative-text);
    border-radius: 20px;
}



.loading-data{
    display: flex;
    flex-flow: row wrap;
    gap: 5px;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.loading-schedule-data{
    display: flex;
    flex-flow: row wrap;
    gap: 5px;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.panel-item{
    display: flex;
    align-items: center;
}
  
.scroll{
    overflow: auto hidden;
}

/*text panel ul above the schedule*/
.schedule-panel{
    display: flex;
    justify-content: center;
    flex-flow: row nowrap;
    gap: 2vw;
    margin-bottom: 10px;
}

@media screen and (max-width: 700px) {
    .schedule-panel{
        display: flex;
        flex-flow: column nowrap;
        gap: 5px;
        align-items: center;        
    }
    
}

/*generic schedule row*/
.generic-row{
    display: grid;
    grid-template-columns: repeat(11, 70px);
    grid-template-rows: repeat(7, auto);
    gap: 1px 4px;
}

/*first schedule row*/
.first-row{
    display: grid;
    background-color: var(--surface-0);
    border-radius: 10px;
    margin-bottom: 6px;
    gap: 0px 4px;
}

/*schedule grid item containing subjects*/
.subject-item{
    display: grid;
    border-radius: 10px;
    /* border: 2px solid var(--surface-0); */
    width: 70px;
    min-height: 70px;
    align-self: flex-start;
    background-color: transparent;
    justify-items: center;
    align-items: center;
    text-align: center;
    user-select: none;
}

.subject-class {
  font-size: 8pt;
}

.hour-item{
    display: grid;
    gap: 0px;
    width:  70px;
    height: 40px;
    justify-items: center;
    align-items: center;
    text-align: center;
}

.hour-item-subject {
  font-size: 11pt;

}

.hour-item-length {
  font-size: 8pt;
}

/*first boxes in generic rows containing days*/
.first-box-days{
    display: grid;
    justify-items: center;
    align-items: center;
    border-radius: 10px;
    background-color: var(--surface-0);
}

/*don't display the first box in the first row*/

.first-box-empty {
    visibility: hidden;
}

.schedule {
}