body {
    font-family: Arial, sans-serif;
    font-weight: bold;
    background: linear-gradient(45deg, #49a09d, #5f2c82);
    height: calc(100% - 10px);
}
html{
    height: 100%
}

.flex {
    display: flex;
}

.flex-fill{
    justify-content: space-around;
}
#wrapper{
    flex-direction: column;
    height: 100%;
    row-gap: 4px
}

#title,#clock {
    color: rgb(240,240,240);
}

.content-background{
    background-color: rgba(255,255,255,.5)
}

/* Roosterwijzigingen */

#content-container{
    flex-grow:1;
    min-height:0;
}

.year-content-container{
    --years-of-education: 6;
    --timeslots: 4;
}

.schedule-flex{
    display: flex;
    flex: 1;
}
.schedule-container{
    flex-direction: column;
    flex-grow: 1;
    row-gap: .5em;
}

.year-row, .schedule-content-container{
    column-gap: 10px;
    row-gap: .1em;

}
.year-row, .schedule-content-container, .year-header, .padding-standard{
    padding: 3px 3px 3px 3px
}

.timeslot-header{
    text-align: center;
}

.year-row.header{
    max-height: 20px;
    flex-shrink: 0;
}

.year-header{
    max-width: 15px
}

.schedule-content-container{
    display: grid;
    grid-auto-flow: row dense;
    width: 100%;
    grid-template-columns: repeat(var(--timeslots, 1), 1fr);
    align-content: start;
}

.schedule-content{
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.year-row::-webkit-scrollbar {
    display: none;
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

.year-row:not(.header){
    min-height:50px;
}
.year-row {
    overflow-y: overlay;
    background-color: rgba(255,255,255,.5);
    flex-basis: auto;
}
.schedule-content{
    margin-right: -50px; /* Maximum width of scrollbar */
    padding-right: 50px; /* Maximum width of scrollbar */
}


.year-content-subcontainer{
    margin-right: -50px;
    display: grid;
    grid-auto-flow: row dense;
    grid-column: 1 / calc(var(--timeslots) + 1);
    grid-template-columns: subgrid;
    grid-template-rows:inherit;

}

.appointment, .timeslot-header{
    padding: 1px 4px 1px 4px;
}
.appointment{
    grid-column-start: var(--start-hour);
    grid-column-end: calc(var(--end-hour) + 1);
    background-color: rgba(255,255,255,.5);
}

div.activity{
    background-color: rgb(0,255,0,0.2);
}
div.appointment.new{

    background-clip: padding-box;
    box-shadow: inset 0 0 10px #ff0000;
}

/**afwezigen**/

.absence:not(:last-child)::after {
    content:" - "
}
.absence:first-child {
    margin-left: 5px;
}

#absences-container > div{
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 3px;
    column-gap: 3px;
}

/** extene activiteiten **/
#outofoffice-inner-container {
    margin-left: 5px;
}
.outofoffice > div{
    display: inline;
    margin-left: 5px;

}
.outofoffice:not(:last-child)::after {
    content: " || "
                             }
.outofoffice > div:not(:last-child)::after {
    content:" /"
}

#outofoffice-container  * {
    display: inline;
}