@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
.calendar {width: 258px; height: auto; display: table; border: 1px solid #d1d1d1; background-color: #f4f3f1; margin: auto;}
.calendar .box {width: 100%; height: 39px; background-color: #f4f3f1; position: relative; text-align: center;}
.calendar .box .calendar-title {font-family: 'Nunito'; font-weight: 700; font-size: 14px; color: #565656; display: inline-block; line-height: 39px;}
.calendar .box .calendar-prev {position: absolute; left: 10px; line-height: 39px;}
.calendar .box .calendar-prev .fa-caret-left {color: #053769;}
.calendar .box .calendar-next {position: absolute; right: 10px; line-height: 39px;}
.calendar .box .calendar-next .fa-caret-right {color: #053769;}
.calendar .box-content .clearfix {clear: both;}
.calendar .box-content .label {margin: 0; padding: 0;}
.calendar .box-content .label .start {list-style: none; float: left; width: 36.5px; height: 23px; background-color: #f4f3f1; border-bottom: 1px solid #e0e0e0;}
.calendar .box-content .label .title {font-family: 'Nunito'; font-weight: 700; font-size: 12px; color: #121212; text-align: center; display: block; line-height: 23px;}
.calendar .box-content .dates {margin: 0; padding: 0;}
.calendar .box-content .dates li {list-style: none; float: left; width: 36.5px; position: relative; height: 46px; font-family: 'Nunito'; font-size: 12px; font-weight: 700; color: #565656; padding-left: 6px; padding-top: 11px; background-color: #fbfbfb; border-right: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; transition: .4s;}
.calendar .box-content .dates li:nth-child(7) {border-right: 0;}
.calendar .box-content .dates li:nth-child(14) {border-right: 0;}
.calendar .box-content .dates li:nth-child(21) {border-right: 0;}
.calendar .box-content .dates li:nth-child(28) {border-right: 0;}
.calendar .box-content .dates li:nth-child(35) {border-right: 0;}
.calendar .box-content .dates li:nth-child(42) {border-right: 0; border-bottom: 0;}
.calendar .box-content .dates li:nth-child(41) {border-bottom: 0;}
.calendar .box-content .dates li:nth-child(40) {border-bottom: 0;}
.calendar .box-content .dates li:nth-child(39) {border-bottom: 0;}
.calendar .box-content .dates li:nth-child(38) {border-bottom: 0;}
.calendar .box-content .dates li:nth-child(37) {border-bottom: 0;}
.calendar .box-content .dates li:nth-child(36) {border-bottom: 0;}
.calendar .box-content .dates li:nth-child(6),
.calendar .box-content .dates li:nth-child(7n),
.calendar .box-content .dates li:nth-child(13),
.calendar .box-content .dates li:nth-child(20),
.calendar .box-content .dates li:nth-child(27),
.calendar .box-content .dates li:nth-child(34),
.calendar .box-content .dates li:nth-child(41) {background-color: #f4f3f1;}
.calendar .box-content .dates .mask {background: #fbfbfb !important; font-size: 0;}
.calendar .box-content .dates .tooltip {position: absolute; bottom: 40px; background: #fff; border: 1px solid #565656; z-index: 1; width: 300px; visibility: hidden;}
.calendar .box-content .dates .tooltip a {text-decoration: none;}
.calendar .box-content .dates .tooltip-text {font-family: 'Nunito', sans-serif; font-size: 12px; color: #565656; display: block; cursor: pointer; border-bottom: 1px solid #565656; padding: 5px 5px;}
.calendar .box-content .dates .tooltip-text:hover {background-color: #f4f3f1;}
.calendar .box-content .dates .tooltip-text:last-child {border-bottom: 0;}
.calendar .box-content .dates li:hover .tooltip {visibility: visible;}
.calendar .box-content .dates .mask:hover {background-color: none;}
.calendar .box-content .dates .event-circle {position: absolute; width: 5px; height: 5px; background: red; left: 3px; top: 40%; border-radius: 30px;}
.calendar .box-content .dates a:hover .tooltip {background: #e0e0e0;}