table.calendar {
    width: 100%;
}

table.calendar td {
    border: 1px solid #999;
    padding: 1px 5px;
}

table.calendar tbody td {
    color: gray;
}

/* Container */
table.calendar td > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 120px;
    height: 120px;
}

table.calendar thead {
    background-color: var(--blue);
    color: white;
    text-weight: bold;
}

table.calendar td span.day {
    font-size: 11px;
}

table.calendar td div.occurrences {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 100%;
    flex-grow: 2;
    overflow-x: hidden;
}

table.calendar td div.occurrence {
    padding: 1px 2px;
    margin-bottom: 2px;
    border-top: 1px solid var(--orange);
    border-bottom: 1px solid var(--orange);
    font-size: 0.8em;
    white-space: nowrap;
}

table.calendar td.current-month {
    color: black;
}

table.calendar td.today {
    background-color: #edb;
}

table.calendar td.past {
    color: gray;
    background-color: #ddd;
}

table.calendar .event-today {
    border-left: 1px solid var(--orange);
    border-right: 1px solid var(--orange);
}

table.calendar .event-begin-today {
    border-left: 1px solid var(--orange);
}

table.calendar .event-end-today {
    border-right: 1px solid var(--orange);
}

table.calendar .other-month {
    opacity: 0.3;
}