.monthPanel, .weekHeader {
    --disk-diameter: 27px;
}

.monthPanel {
    font: var(--font-large-regular);

    grid-template-columns: repeat(7, minmax(10px, 999px));
    grid-gap: 7px;
}

.monthPanel-bg {
    border-bottom: var(--action-separator);
}

.monthPanel-header {
    border-bottom: var(--action-separator);
    padding-top: 15px;
    padding-left: 20px;
    padding-bottom: 7px;
}

.monthPanel-header > :nth-child(2) {
    min-width: 5em;
    text-align: center;
}

.monthPanel-header.monthPanel-today {
    color: var(--light-primary-bg);
}


.monthPanel-cell {
    display: grid;
    grid-template-rows: 40px;
    grid-template-columns: auto;

    min-width: 50px;

    align-items: center;
    justify-items: center;

    cursor: pointer;
}

.monthPanel-cell.monthPanel-today > :first-child, .monthPanel-cell.monthPanel-selected > :first-child {
    position: relative;

    grid-column: 1;
    grid-row: 1;
}

.monthPanel-cell.monthPanel-today > :first-child {
    color: var(--dark-bg-text-color);
}


.monthPanel-cell.monthPanel-selected::before {
    border: 1px solid var(--light-primary-bg);
}

.monthPanel-cell.monthPanel-today::before, .monthPanel-cell.monthPanel-selected::before {
    content: ' ';
    border-radius: 50px;
    background-color: var(--light-primary-bg);
    height: var(--disk-diameter);
    width: var(--disk-diameter);
    grid-column: 1;
    grid-row: 1;
}

.monthPanel-cell.monthPanel-selected:not(.monthPanel-today)::before {
    border: solid 2px var(--light-primary-bg);
    background: none;
    box-sizing: border-box;
}


.monthPanel-cell.monthPanel-hasEvent {
    position: relative;
}

.monthPanel-cell.monthPanel-hasEvent:after {
    content: ' ';
    background-color: #BCBCBC;
    width: 8px;
    height: 8px;
    border-radius: 50px;

    grid-column: 1;
    grid-row: 2;
}

.weekHeader {
    text-align: center;
    font: var(--font-large-regular);
}

.weekHeader-dayLabel {
    font: var(--font-small-light);
    text-transform: uppercase;
}

.weekHeader-date {
    font: var(--font-normal-regular);
    padding-top: 10px;
}

.weekHeader-date:first-letter {
    text-transform: capitalize;
}

.weekHeader > .monthPanel-today {
    color: var(--dark-bg-text-color);
}

.weekHeader > .weekHeader-todayMarker {
    border-radius: 50px;
    background-color: var(--light-primary-bg);
    height: var(--disk-diameter);
    width: var(--disk-diameter);
}

.weekHeader > .weekHeader-selectedMarker {
    border-radius: 50px;
    border: 2px solid var(--light-primary-bg);
    height: var(--disk-diameter);
    width: var(--disk-diameter);

    box-sizing: border-box;
}


.yearPanel .monthPanel-cell {
    display: grid;
    grid-template-rows: 10px 0px;
    grid-template-columns: auto;

    min-width: 10px;

    font: var(--font-smaller-light);
}

.yearPanel .monthPanel-bg {
    border: none;
}

.yearPanel .monthPanel {
    grid-template-columns: repeat(7, auto);
    column-gap: 0;
    row-gap: 7px;
    align-items: flex-start;
    justify-items: stretch;
    padding-bottom: 15px;
}

.yearPanel .monthPanel-cell.monthPanel-today::before, .yearPanel .monthPanel-cell.monthPanel-selected::before {
    height: 14px;
    width: 14px;
}

.yearPanel > * {
    place-self: stretch;

}

.yearPanel > :nth-child(odd) {
    background-color: var(--body-bg);
}

.yearPanel > :nth-child(even) {
    background-color: var(--alternate-bg);
}

.yearPanel > .monthPanel {
    background: none;
    place-self: flex-start stretch;
}

.yearPanel .monthPanel:nth-child(3n-4) {
    padding-left: var(--mobile-h-padding);
    padding-right: 4px;
}

.yearPanel .monthPanel:nth-child(3n+1) {
    padding-right: var(--mobile-h-padding);
    padding-left: 4px;
}

.yearPanel .monthPanel:nth-child(3n) {
    padding-left: 12px;
    padding-right: 12px;
}


.yearPanel .monthPanel .monthPanel-header {
    padding-left: 0;
}