.mod-calendar .calendar {
    padding: 1px;
    border: 1px solid #95B3A9;
    user-select: none;
}

.mod-calendar .heading {
    background-color: #4D8832;
    color: white;
    font-weight: bold;
    border-bottom: 1px solid #95B3A9;
}

.mod-calendar .heading.nav {
    display: grid;
    grid-template-columns: 3ch 3ch 1fr 3ch 3ch;
    text-align: center;
}

.mod-calendar .heading.nav .nav-button,
.mod-calendar .heading.nav .range {
    cursor: pointer;
}

.calendar-grid {
    background-color: white;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    font-size: smaller;
    text-align: center;
}

.calendar-grid.month{
    background-color: white;
}

.calendar-grid.weekdays :nth-child(7) {
    color: orangered;
}

.calendar-grid .has-event {
    background-color: #dcd9c8;
    border: 1px solid #888;
}

.calendar-grid .today {
    border: 1px solid red;
}

.calendar-grid .calendar-day:not(.out-of-range) {
    cursor: pointer;
}

.calendar-grid .calendar-day:not(.out-of-range):hover {
    background-color: #eee;
}

.calendar-grid .out-of-range {
    color: gray;
    background-color: lightgray;
}

.mod-calendar .event-item {
    background-color: white;
    border-color: #ccc;
    border-style: solid;
    border-width: 0px 0px 1px 8px;
    padding: 0px 0px 2px 6px;
}

.mod-calendar .event-item .icon {
    padding-right: 4px;
}