:root {
    --black: #000000;
    --lighter85: color-mix(in srgb, var(--black) 85%, white);
    --lighter40: color-mix(in srgb, var(--black) 40%, white);
}

.card-title,
.card-subtitle,
.card-date,
.card-duration,
.card-time,
.card-level,
.card-teacher {
    display: block;
    padding-bottom: 2px;
    padding-left: 14px;
    padding-right: 6px;
    text-align: left;
}

.card-title {
    /* border: 1px solid orange; */
    font-size: 17px;
    text-transform: uppercase;
}

.card-subtitle {
    /* border: 1px solid yellowgreen; */
    color: var(--lighter85);
    font-size: 15px;

    /* text-decoration: dashed;
    text-decoration-line: underline;
    text-underline-offset: 4px; */
}

.card-date {
    /* border: 1px solid red; */
    color: var(--lighter85);
    font-size: 15px;
}

.card-duration {
    /* border: 1px solid green; */
    color: var(--lighter85);
    font-size: 15px;
}

.card-time {
    /* border: 1px solid gray; */
    float: left;
    font-size: 16px;
    font-weight: bold;
}

.card-level {
    /* border: 1px solid blue; */
    font-size: 26px;
    margin-bottom: -100%;
    margin-left: 50%;
    margin-top: -10px;
    padding-left: 0px !important;
}

.card-teacher {
    /* border: 1px solid cyan; */
    clear: both;
    color: var(--lighter85);
    font-size: 15px;
    font-style: italic;
    position: relative;
    top: -2px;
}

.cell:hover>span {
    color: white;
    cursor: pointer;
}

.cell-hidden,
.cell-hidden>span {
    background-color: #F8F8F8;
    color: var(--lighter40);
}

.cell-hidden:hover>span {
    color: var(--lighter40);
    cursor: default;
}