.calendar-parent {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1px;

    background: #555;
    border: 1px solid #555;
}

/* Grid setup */
.calendar-header,
.calendar-body {
    display: grid;
    grid-template-columns: 120px repeat(7, 1fr);
    grid-auto-rows: 1fr;
    width: 100%;
    gap: 1px;
}

/* Body of the calendar */
.calendar-body {
    height: 100%;
    min-height: 0;
}

/* Common layout of all grid elements */
.calendar-header-value,
.calendar-entry {
    padding: 5px;
    text-align: center;
}

/* Header elements within grid */
.calendar-header-value {
    display: flex;
    justify-content: center;
    align-items: center;

    background: #000;
    color: white;
    font-weight: bold;
}

/* First header, which shows the current month */
.calendar-header-value.first {
    display: flex;
    /*justify-content: space-between;*/
    justify-content: center;
    align-items: center;
    
    font-size: larger;
    
    -webkit-user-select: none; /* Safari */
    user-select: none;
}

/* Links in first header to change month */
.calendar-header-value > a {
    margin: 0px 5px;
    text-decoration: none;
    color: #7a7ac7;
}

/* Month day entry */
.calendar-entry {
    display: inline-flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* Day entry for previous or next month */
.calendar-entry.other-month {
    background: #222 !important;
    color: #bbb;
}
.calendar-entry.other-month .day-event-entry {
    background: #444;
    border-color: #333;
}

/* Two different backgrounds for odd and even rows*/
.calendar-entry.even-row {
    background: #ccc;
}
.calendar-entry.odd-row {
    background: #aaa;
}
/* Yet again different backgrounds for weekend days */
.calendar-entry.weekend {
    background: #777;
}

/* Header of month day entry */
.day-header {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-weight: bold;
    padding-bottom: 4px;
}

/* Modification of day-header that highlights today */
.day-header.today > span {
    padding: 0px 5px;
    border-radius: 3px;
    background: black;
    color: white;
}

/* Scrollbox containing the day events element */
.day-events-scrollbox {
    flex: 1;
    overflow: hidden;
    position: relative;
    border-radius: 3px;
}

/* Element containing all event elements for a day */
.day-events {
    display: flex;
    height: 100%;

    flex-direction: column;
    overflow: scroll;
    scroll-behavior: smooth;

    gap: 2px;

    scrollbar-width: none;
}

/* Hide day-events scrollbars */
.day-events::-webkit-scrollbar {
    display: none;
}


/* Shadow for the scrollbox */
.day-events-shadow {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

    pointer-events: none;
}

/* Top, bottom and top-bottom shadows for day-events-scrollbox */
.box-shadow-bottom {
    box-shadow: inset 0px -11px 8px -10px #000;
}
.box-shadow-top {
    box-shadow: inset 0px 11px 8px -10px #000;
}
.box-shadow-topbottom {
    box-shadow:
        inset 0px -11px 8px -10px #000,
        inset 0px 11px 8px -10px #000;
}

/* Event entry for a day */
.day-event-entry {
    background: yellow;
    border: 1px solid darkorange;
    border-radius: 3px;
    padding: 2px 4px;
    margin: 0px 2px;

    display: inline-flex;
}

/* Event timespan */
.day-event-entry > .time {
    font-weight: bold;
    margin-right: 3px;
    white-space: nowrap;
}

/* Event Description */
.day-event-entry > .description {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}