.vertical-center {
display: flex;
justify-content: center;
align-items: center;
}
.calendar-row {
display: flex;
width: 100%;
}
.calendar {
    position: relative;
    display: block;
    background: #FFFFFF;
    max-width: 900px;
    border: solid 1px #CCCCCC;
    margin: 0px auto;
    text-align: center;
    border-radius: 0.25rem;
}
.calendar .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,1);
}
.calendar header {
justify-content: center;
align-items: center;
color: #FFFFFF;
cursor: default;
display: block;
font-weight: bold;
text-transform: uppercase;
-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
}
.calendar header .month-display {
align-items: center;
height: 40px;
}
.calendar header .month-label {
flex: 1;
}
.calendar header .arrow {
text-align: center;
flex-basis: 15%;
font-weight: bold;
cursor: pointer;
transition: background 0.2s;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.calendar header .arrow:hover {
background: rgba(0,0,0,0.25);
}
.calendar .week {
border-top: solid 1px #CCCCCC;
}
.calendar .week:first-child {
border-top: none;
}
.calendar .day-names {
color: #2875C7;
font-weight: bold;
cursor: default;
font-size: 1.2rem;
}
.calendar .day-names .day {
cursor: default;
}
.calendar .day-names .day:after {
padding-bottom: 50%;
}
.calendar .day-names .day:hover {
background: inherit;
}
.calendar .day {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
width: 25%;
border-left: solid 1px #CCCCCC;
cursor: pointer;
transition: all 0.2s;
color: #000;
position: relative;
}
.calendar .day.future-date {
    background: #efefef;
}
.calendar .day:after {
content: "";
display: block;
padding-bottom: 100%;
}
.calendar .day:hover {
background: #EFEFEF;
}
.calendar .day:first-child {
border-left: none;
}
.calendar .day.today {
background: rgba(97, 165, 175, 0.233);
}
.calendar .day.different-month {
color: #C0C0C0;
}
.calendar .day.selected {
background: rgb(84, 155, 164);
color: #FFFFFF;
}

.calendar .data-count {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
}