.calendar {
     display: inline-grid;
     justify-content: center;
     align-items: center;
     background: #fff;
}
 .calendar .month {
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 14px;
     font-weight: 300;
     font-family: var(--manrope);
     margin-bottom: 30px;
     padding: 0px;
}
 .calendar .month .nav {
     display: flex;
     justify-content: center;
     align-items: center;
     text-decoration: none;
     color: #0a3d62;
     width: 40px;
     height: 40px;
     border-radius: 40px;
     transition-duration: 0.2s;
     position: relative;
}
 .calendar .month .nav:hover {
     background: #eee;
}
 .calendar .days {
     display: grid;
     justify-content: center;
     align-items: center;
     grid-template-columns: repeat(7, 1fr);
     color: #999;
     font-weight: 600;
     margin-bottom: 50px;
}
 .calendar .days span {
     width: 50px;
     justify-self: center;
     align-self: center;
     text-align: center;
     font-size: 12px;
     font-family: var(--manrope);
     text-transform: uppercase;
     color: #4F4F4F;
}
 .calendar .dates {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
}
 .calendar .dates button {
     cursor: pointer;
     outline: 0;
     border: 0;
     background: transparent;
     font-family: var(--manrope);
     font-size: 13px;
     justify-self: center;
     align-self: center;
     width: 30px;
     height: 30px;
     border-radius: 50px;
     margin: 7px;
     transition-duration: 0.2s;
     background: rgba(217, 217, 217, 0.2);
}
 .calendar .dates button.today {
     box-shadow: none;
     background: #4F4F4F;
     color: #FFF;
}
 .calendar .dates button:hover {
     background: #4F4F4F;
     color: #FFF;
}
 .calendar .dates button:focus {
     background: #0a3d62;
     color: #fff;
     font-weight: 600;
}