.calendar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #1C1E29;
    border-color: #1C1E29;
    width: 100%;
}

.page-body-content .section-content .calendar-panel--monthly {
    display: none;
}

@media (max-width: 1184px) {
    .page-body-content .section-content .calendar-panel--quarterly {
        display: none;
    }

    .page-body-content .section-content .calendar-panel--monthly {
        display: flex;
    }

    .page-body-content .section-content .calendar-panel--monthly > div {
        width: 100%;
    }

    .page-body-content .section-content .calendar-panel--monthly .calendar-navigator {
        justify-content: center;
    }

    .page-body-content .section-content .calendar-panel--monthly .calendar-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

}

.calendar > div {
    width: 100%;
}

.page-body-content:nth-child(2n) .calendar {
    color: #fff;
    border-color: #fff;
}

.calendar-navigator {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    width: 100%;
}

.quarter-navigator {
    justify-content: end;
    margin: 10px 0;
}

.calendar-navigator .prev,
.calendar-navigator .next {
    height: 40px;
    border: 0;
    cursor: pointer;
}

.calendar-navigator .prev {
    width: 25px;
    background: url("/images/navigation/prev-142a448dad76937e0a6aacb9d57d9493.svg") center center no-repeat;
}

.page-body-content:nth-child(2n) .calendar-navigator .prev {
    background: url("/images/navigation/prev-white-a63b3b00a6699b9892ccf83273675f75.svg") center center no-repeat;
}

.calendar-navigator .next {
    width: 45px;
    background: url("/images/navigation/next-7e2e5ef3cf418ff2672ab66130b67756.svg") center center no-repeat;
}

.page-body-content:nth-child(2n) .calendar-navigator .next {
    background: url("/images/navigation/next-white-67d80c76763a9bd3dd1ec82f2db3bd43.svg") center center no-repeat;
}

.month-title {
    font-size: 20px;
    font-family: 'Roboto', uppercase, sans-serif
}

.quarter-title {
    font-size: 24px;
}

.calendar-navigator .quarter-title,
.calendar-navigator .month-title {
    margin: 0 10px;
}

.quarter-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    gap: 60px;
}

.calendar-content {
    margin: 20px 0;
}

.calendar-content-week-days,
.calendar-content-day-numbers,
.calendar-content-day-numbers-row {
    display: flex;
    gap: 20px;
    width: max-content;
}

.quarter-content .calendar-content-week-days,
.quarter-content .calendar-content-day-numbers,
.quarter-content .calendar-content-day-numbers-row {
    gap: 10px;
}

.calendar-content-week-days {
    flex-direction: row;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    padding-bottom: 2px;
}

.calendar-content-day-numbers-row {
    flex-direction: row;
}

.calendar-content-day-numbers {
    flex-direction: column;
    margin-bottom: 10px;
}

.calendar-content-week-days span,
.calendar-content-day-numbers span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.calendar-content-day-number--current-day {
    border: 1px solid;
}

.calendar-content-day-number--marker-day {
    background: rgba(125, 125, 125, 0.50);
}

.calendar-content-day-number--marker-day a {
    text-decoration: none;
}