.event-calendar-container {
position: relative;
}
.month:not(:first-of-type) {
display: none;
}
.previous-month {
position: absolute;
top: 0.1em;
left: 0;
}
.next-month {
position: absolute;
top: 0.1em;
right: 0;
}
.previous-month.bottom,
.next-month.bottom {
top: auto;
bottom: 0.1em;
}
.month-navigation img {
display: block;
width: 1.8em;
height: 1.8em;
color: black;
}
.previous-month.disabled,
.next-month.disabled {
opacity: 0.2;
}
.month-name {
display: block;
padding: 0 2em;
}
.calendar-month {
width: 100%;
border-spacing: 8px;
border-collapse: separate;
}
.calendar-month th {
display: none;
text-align: left;
}
.calendar-month td {
display: block;
box-sizing: border-box;
font-size: 90%;
padding: 0.2em 0.4em;
margin-bottom: 5px;
background: #cce3f1;
border-radius: 5px;
}
.calendar-month td.spacer-cell {
background: none;
display: none;
}
.calendar-month td.past {
display: none;
}
.calendar-month td.today {
background: #b3d9ef;
}
.calendar-month .day-number {
font-size: 120%;
font-weight: bold;
display: inline-block;
position: relative;
top: -0.1em;
left: -0.35em;
padding: 0.2em 0.4em;
border-top-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.calendar-event-entry {
display: block;
border: none;
margin: 0 0 0.8em;
line-height: 1.2;
text-decoration: none;
}
.calendar-event-time {
font-weight: 400;
text-decoration: none;
}
.calendar-event-title {
display: block;
text-decoration: underline;
} @media screen and ( min-width: 768px ) {
.calendar-month th,
.calendar-month td {
display: table-cell;
width: 14.285%; vertical-align: top;
font-size: 70%;
}
.calendar-month td.spacer-cell {
display: table-cell;
}
}