#calendar-widget {
    margin-right: 5%;
    margin-left: 5%;
    padding-bottom: 10px;
    width: 90%;
    justify-self: center;
    justify-content: center;
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: repeat(7, 1fr);
}

.calendar-month-header {
    text-align: center;
    font-size: 21px;
    padding: 15px 0 15px 0;
    grid-column-start: 1;
    grid-column-end: 8;
    width: 100%;
    display: flex;
    justify-self: center;
    justify-content: center;
}

.calendar-lightgreen{
    background-color: lightseagreen;
    color: white !important;
}

.calendar-widget-lightgreen {
    background: #d9f8ff;
}

.calendar-widget-orange {
    background: #ffd597;
}

.calendar-orange{
    background-color: rgb(233, 77, 38);
    color: white !important;
}

.calendar-widget-violet {
    background: #d5d8ff;
}

.calendar-violet{
    background-color: rgb(23, 26, 197);
    color: white !important;
}

#month-left-button {
    width: 25px;
    cursor: pointer;
    padding: 5px;
    border-radius: 25%;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.calendar-month-title {
    margin-left: 15px;
    margin-right: 15px;
    width: 70%;
}

#month-right-button {
    width: 25px;
    cursor: pointer;
    padding: 5px;
    border-radius: 25%;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

#month-left-button:hover, #month-right-button:hover {
    color: black;
    background: white;
    transition: all 0.2s ease-in-out;
}

.calendar-day {
    padding-bottom: 15px;
    padding-top: 15px;
    text-align: center;
    height: fit-content;
}

.calendar-weekday-name {
    text-align: center;
    margin: 15px 0 15px 0;
    font-size: 18px;
    font-weight: bold;
}

.calendar-weekday-name-responsive {
    text-align: center;
    margin: 15px 0 15px 0;
    font-size: 18px;
    font-weight: bold;
}

.sunday, .sunday-header {
    color: red;
    font-weight: bold;
}

.today {
    font-weight: bold;
}