.calendar {
     width: 100%;
     overflow: hidden;
     border: 2px solid #e5e5e5;
     border-radius: 15px;
     padding-top: 12px;
     padding: 20px 24px 0;
 }

 .calendar .title {
     width: 100%;
     height: 20px;
     line-height: 20px;
     text-align: center;
     font-size: 20px;
     font-weight: bold;
 }

 .calendar .title .prev_month_btn {
     display: block;
     float: left;
     line-height: 40px;
     font-size: 15px;
     margin-left: 10px;
     text-decoration: none;
     cursor: pointer;
 }

 .calendar .title #month {
     color: #585858;
     font-weight: 200;

     color: #777;
     font-size: 17px;
     font-style: normal;
     font-weight: 700;
     line-height: 13px;
 }

 .calendar .title .next_month_btn {
     display: block;
     float: right;
     line-height: 40px;
     font-size: 15px;
     margin-right: 10px;
     text-decoration: none;
     cursor: pointer;
 }

 .calendar .calendars {
     width: 100%;
     margin: 0 auto;
     /*background: #FFCC99;*/
 }

 .calendar .calendars .table {
     border: 0;
     margin: 0;
     width: 100%;
     text-align: center;
 }

 .tbody {
     height: max-content;
 }

 .calendar .calendars .table .tr {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin: 6px 0;
     padding: 2px;
 }

 .calendar .calendars .table .thead {
     color: #888888;
 }

 .calendar .calendars .table .td {
     border: 0;
     text-align: center;
     width: 40px;
     height: 40px;
     width: 30px;
     height: 30px;
     padding: 0;
     font-weight: 700;
     font-size: 17px;
     position: relative;
     cursor: pointer;
     border-radius: 50%;
     color: #333;
     color: #afafaf;
 }

 .calendar .calendars .table .td.today {
     background-color: rgba(0, 0, 0, 0.2);
     color: #000;
     background-color: #ff9601;
     color: #fff;
 }

 .calendar .calendars .table .td.active {
     background-color: #999;
     color: #fff;
     background-color: #ff9601;
     color: #fff;
 }

 .calendar .calendars .table .td .td1 {
     width: 100%;
     height: 40px;
     line-height: 40px;
     height: 30px;
     font-family: din-round, sans-serif;
     font-weight: 700;
     line-height: 30px;
     text-align: center;
 }

 .calendar .calendars .table .td .td2 {
     width: 100%;
     height: 15px;
     line-height: 15px;
     text-align: center;
     font-size: 12px;
     display: none;
 }