:root {
    --timetable-gap: 1rem;
    --timetable-box-background-color: #c1beb5;
    --timetable-box-color: #000;
    --timetable-box-border-radius: .25rem;
    --timetable-box-padding: .5rem;
    --timetable-box-min-width: 100px;
    --timetable-box-title-min-width: 250px;
    --timetable-box-title-background-color: #eee;
    --timetable-box-title-color: #000;
}

.timetable {
    display: grid;
    grid-gap: var(--timetable-gap);
}

.timetable .box {
    background-color: var(--timetable-box-background-color);
    color: var(--timetable-box-color);
    border: 1px solid var(--timetable-box-background-color);
    border-radius: var(--timetable-box-border-radius);
    padding: var(--timetable-box-padding);
    min-width: var(--timetable-box-min-width);
    position: relative;
}

.timetable .line {
    border: 0;
    border-style: solid;
    border-color: var(--timetable-box-title-background-color);
    opacity: .4;
}

.timetable.vertical .line {
    transform: translateX(calc(-1px + (-1 * var(--timetable-gap) / 2)));
    border-left-width: 2px;
}

.timetable.horizontal .line {
    transform: translateY(calc(-1px + (-1 * var(--timetable-gap) / 2)));
    border-top-width: 2px;
}

.timetable .box-title {
    min-width: var(--timetable-box-title-min-width);
    background-color: var(--timetable-box-title-background-color);
    color: var(--timetable-box-title-color);
    border-color: var(--timetable-box-title-background-color);
}

.timetable-dialog {
    min-width: 350px;
    max-width: 768px;
}

@media print {
    .container {
        max-width: 100% !important;
    }
}