.schedule-container {
    /* margin-inline: 0.5em; */
    padding-bottom: 1em;
    min-width: min-content;

}

@media(min-width: 120em) {
    .schedule-container {
        margin-inline: 2em;
        height: 80vh;
    }
}

.schedule-grid {
    display: grid;
    height: 100%;
    grid-template-rows: 50px repeat(14, 1fr);
    grid-template-columns: auto repeat(var(--schedule-columns),minmax(200px,1fr));
    padding: 0.5em;
    gap: 0.5em;
    /* min-width: 50em; */
}

@media(min-width: 120em) {
    .schedule-grid {
        padding-inline: 0;
        grid-template-rows: auto repeat(var(--schedule-rows), 1fr);
        grid-template-columns: 50px repeat(14, 1fr);
    }
}

.schedule-grid > div {
    text-align: center;
    background: var(--subject-color);
    color: #000;
    padding: 0.5em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

/* .schedule-grid > div.subject{
    writing-mode: vertical-rl;
    transform: rotate(-180deg);
    vertical-align: bottom;
}

@media(min-width: 120em){
    .schedule-grid > div.subject {
        writing-mode: unset;
        transform: none;
    }
} */

.week {
    font-size: 1.2em;
    background: gray;
    color: white;
}

.week > .weekDate {
    font-size: small;
    font-weight: normal;
    display: grid;
}

.schedule-grid > div.week.highlight {
    animation: subject--highlight 1s ease-in-out 0s infinite normal forwards;
}

@keyframes subject--highlight {
    0% {
        background: gray;
    }

    50% {
        background: white;
        color: black;
    }
    100% {
        background: gray;
    }
}

.schedule-grid > div.subject {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: small;
    flex-direction: column;
    font-weight: bold;
    overflow: hidden;
}
@media(min-width: 120em) {
    .schedule-grid > div.subject {
        font-size: medium;
        overflow: unset;
        /* flex-direction: column; */
    }
}
.schedule-grid > div.subject small {
    font-weight: normal
}
.schedule-grid > div.subject.haveInner {
    display: block;
    background: rgba(0, 0, 0, 0);
    padding: 0;
}

.schedule-grid > div.subject.haveInner div.inner {
    display: grid;
    grid-template-rows: min-content min-content;
    width: 100%;
    height: 100%;
    gap: 0.5em
}

.schedule-grid > div.subject.haveInner div.inner > div,
.schedule-grid > div.subject * {
    overflow: hidden;
}

/* @media(min-width: 120em){
    .schedule-grid > div.subject.haveInner div.inner > div, .schedule-grid > div.subject *{
        word-wrap: unset;
        text-overflow: hidden;
        overflow: hidden;
        writing-mode: unset;
        transform: none;
    }
} */

.schedule-grid > div.subject.spanWeeks.haveInner div.inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    width: 100%;
    height: 100%;
    gap: 0.5em
}

@media(min-width: 120em) {
    .schedule-grid > div.subject.spanWeeks.haveInner div.inner {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }
}

.schedule-grid > div.subject.haveInner div.inner > div {
    padding: 0.5em;
    background: var(--subject-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative
}
.schedule-grid > div.subject.danger {
    background: red !important;
    color: #ff0
}
.schedule-grid > div.subject.warning {
    background: #ff0 !important;
    color: red
}
.schedule-grid > div.subject.mute {
    background: gray;
    color: #d3d3d3
}

.schedule-grid .no-bg {
    background: rgba(0, 0, 0, 0) !important;
}
.schedule-grid [grid-row="0"] {
    grid-column: 1
}
@media(min-width: 120em) {
    .schedule-grid [grid-row="0"] {
        grid-row-start: 1 !important;
        grid-row-end: 2 !important
    }
}
.schedule-grid [grid-row="1"] {
    grid-column: 2
}
@media(min-width: 120em) {
    .schedule-grid [grid-row="1"] {
        grid-row-start: 2 !important;
        grid-row-end: 3 !important
    }
}
.schedule-grid [grid-row="2"] {
    grid-column: 3
}
@media(min-width: 120em) {
    .schedule-grid [grid-row="2"] {
        grid-row-start: 3 !important;
        grid-row-end: 4 !important
    }
}
.schedule-grid [grid-row="3"] {
    grid-column: 4
}
@media(min-width: 120em) {
    .schedule-grid [grid-row="3"] {
        grid-row-start: 4 !important;
        grid-row-end: 5 !important
    }
}
.schedule-grid [grid-row="4"] {
    grid-column: 5
}
@media(min-width: 120em) {
    .schedule-grid [grid-row="4"] {
        grid-row-start: 5 !important;
        grid-row-end: 6 !important
    }
}
.schedule-grid [grid-row="5"] {
    grid-column: 6
}
@media(min-width: 120em) {
    .schedule-grid [grid-row="5"] {
        grid-row-start: 6 !important;
        grid-row-end: 7 !important
    }
}
.schedule-grid [grid-col-start="0"] {
    grid-row-start: 1
}
.schedule-grid [grid-col-end="0"] {
    grid-row-end: 2
}
@media(min-width: 120em) {
    .schedule-grid [grid-col-start="0"] {
        grid-column-start: 1 !important
    }
    .schedule-grid [grid-col-end="0"] {
        grid-column-end: 2 !important
    }
}
.schedule-grid [grid-col-start="1"] {
    grid-row-start: 2
}
.schedule-grid [grid-col-end="1"] {
    grid-row-end: 3
}
@media(min-width: 120em) {
    .schedule-grid [grid-col-start="1"] {
        grid-column-start: 2 !important
    }
    .schedule-grid [grid-col-end="1"] {
        grid-column-end: 3 !important
    }
}
.schedule-grid [grid-col-start="2"] {
    grid-row-start: 3
}
.schedule-grid [grid-col-end="2"] {
    grid-row-end: 4
}
@media(min-width: 120em) {
    .schedule-grid [grid-col-start="2"] {
        grid-column-start: 3 !important
    }
    .schedule-grid [grid-col-end="2"] {
        grid-column-end: 4 !important
    }
}
.schedule-grid [grid-col-start="3"] {
    grid-row-start: 4
}
.schedule-grid [grid-col-end="3"] {
    grid-row-end: 5
}
@media(min-width: 120em) {
    .schedule-grid [grid-col-start="3"] {
        grid-column-start: 4 !important
    }
    .schedule-grid [grid-col-end="3"] {
        grid-column-end: 5 !important
    }
}
.schedule-grid [grid-col-start="4"] {
    grid-row-start: 5
}
.schedule-grid [grid-col-end="4"] {
    grid-row-end: 6
}
@media(min-width: 120em) {
    .schedule-grid [grid-col-start="4"] {
        grid-column-start: 5 !important
    }
    .schedule-grid [grid-col-end="4"] {
        grid-column-end: 6 !important
    }
}
.schedule-grid [grid-col-start="5"] {
    grid-row-start: 6
}
.schedule-grid [grid-col-end="5"] {
    grid-row-end: 7
}
@media(min-width: 120em) {
    .schedule-grid [grid-col-start="5"] {
        grid-column-start: 6 !important
    }
    .schedule-grid [grid-col-end="5"] {
        grid-column-end: 7 !important
    }
}
.schedule-grid [grid-col-start="6"] {
    grid-row-start: 7
}
.schedule-grid [grid-col-end="6"] {
    grid-row-end: 8
}
@media(min-width: 120em) {
    .schedule-grid [grid-col-start="6"] {
        grid-column-start: 7 !important
    }
    .schedule-grid [grid-col-end="6"] {
        grid-column-end: 8 !important
    }
}
.schedule-grid [grid-col-start="7"] {
    grid-row-start: 8
}
.schedule-grid [grid-col-end="7"] {
    grid-row-end: 9
}
@media(min-width: 120em) {
    .schedule-grid [grid-col-start="7"] {
        grid-column-start: 8 !important
    }
    .schedule-grid [grid-col-end="7"] {
        grid-column-end: 9 !important
    }
}
.schedule-grid [grid-col-start="8"] {
    grid-row-start: 9
}
.schedule-grid [grid-col-end="8"] {
    grid-row-end: 10
}
@media(min-width: 120em) {
    .schedule-grid [grid-col-start="8"] {
        grid-column-start: 9 !important
    }
    .schedule-grid [grid-col-end="8"] {
        grid-column-end: 10 !important
    }
}
.schedule-grid [grid-col-start="9"] {
    grid-row-start: 10
}
.schedule-grid [grid-col-end="9"] {
    grid-row-end: 11
}
@media(min-width: 120em) {
    .schedule-grid [grid-col-start="9"] {
        grid-column-start: 10 !important
    }
    .schedule-grid [grid-col-end="9"] {
        grid-column-end: 11 !important
    }
}
.schedule-grid [grid-col-start="10"] {
    grid-row-start: 11
}
.schedule-grid [grid-col-end="10"] {
    grid-row-end: 12
}
@media(min-width: 120em) {
    .schedule-grid [grid-col-start="10"] {
        grid-column-start: 11 !important
    }
    .schedule-grid [grid-col-end="10"] {
        grid-column-end: 12 !important
    }
}
.schedule-grid [grid-col-start="11"] {
    grid-row-start: 12
}
.schedule-grid [grid-col-end="11"] {
    grid-row-end: 13
}
@media(min-width: 120em) {
    .schedule-grid [grid-col-start="11"] {
        grid-column-start: 12 !important
    }
    .schedule-grid [grid-col-end="11"] {
        grid-column-end: 13 !important
    }
}
.schedule-grid [grid-col-start="12"] {
    grid-row-start: 13
}
.schedule-grid [grid-col-end="12"] {
    grid-row-end: 14
}
@media(min-width: 120em) {
    .schedule-grid [grid-col-start="12"] {
        grid-column-start: 13 !important
    }
    .schedule-grid [grid-col-end="12"] {
        grid-column-end: 14 !important
    }
}
.schedule-grid [grid-col-start="13"] {
    grid-row-start: 14
}
.schedule-grid [grid-col-end="13"] {
    grid-row-end: 15
}
@media(min-width: 120em) {
    .schedule-grid [grid-col-start="13"] {
        grid-column-start: 14 !important
    }
    .schedule-grid [grid-col-end="13"] {
        grid-column-end: 15 !important
    }
}
.schedule-grid [grid-col-start="14"] {
    grid-row-start: 15
}
.schedule-grid [grid-col-end="14"] {
    grid-row-end: 16
}
@media(min-width: 120em) {
    .schedule-grid [grid-col-start="14"] {
        grid-column-start: 15 !important
    }
    .schedule-grid [grid-col-end="14"] {
        grid-column-end: 16 !important
    }
}
.schedule-grid [grid-col-start="15"] {
    grid-row-start: 16
}
.schedule-grid [grid-col-end="15"] {
    grid-row-end: 17
}
@media(min-width: 120em) {
    .schedule-grid [grid-col-start="15"] {
        grid-column-start: 16 !important
    }
    .schedule-grid [grid-col-end="15"] {
        grid-column-end: 17 !important
    }
}
.schedule-grid [grid-col-start="16"] {
    grid-row-start: 17
}
.schedule-grid [grid-col-end="16"] {
    grid-row-end: 18
}
@media(min-width: 120em) {
    .schedule-grid [grid-col-start="16"] {
        grid-column-start: 17 !important
    }
    .schedule-grid [grid-col-end="16"] {
        grid-column-end: 18 !important
    }
}
.schedule-grid .week-highlight {
    z-index: -99;
    background: #fff;
    grid-row-start: 1;
    grid-row-end: -1;
    /* grid-row: 1 /var(--schedule-rows); */
}