/*
Calendar related CSS
*/
.f_cal_selector a{ width:30px; text-decoration: none; height:30px; background-color: #3186c6; margin-left: 10px; border-radius: 100%; position: relative; text-align: center; line-height: 30px; outline: none; box-shadow: none;}
.f_cal_selector a:hover{background-color: #FF9900;}
.f_cal_selector a.next_ac::after{content: "\f345"; font-size:18px; color: #ffffff; text-align: center; font-family: dashicons;}
.f_cal_selector a.prev_ac::after{content: "\f341"; font-size:18px; color: #ffffff; text-align: center; font-family: dashicons;}
.calander_inner{ width: 100%; float: left;}
.calendar-container{ display: flex; justify-content: space-between; align-items: flex-start; margin-top: 30px;}
.calendar-container .main-month-calendar{ width: 100%;}
.calendar-container .sub-month-calendar{ width:28%; margin-top: 25px;}
.calendar-container .month-calendar{ margin-bottom: 25px;}
.month-title{ font-size:30px; font-family: 'metropolissemi_bold'; margin-bottom: 10px; text-align: center; color: #000000; position: relative; z-index: 1;}
.weekdays{ width:100%; display: flex; justify-content:flex-start; align-items: center; background-color:#84c4bc; padding: 0.5rem 0;}
.weekdays div{ width: 14.28%; font-size: 20px; font-weight: bold; color: #000000; padding: 3px; text-align: center;}
.days{ width:100%; display: flex; justify-content:flex-start; align-items: center; flex-wrap: wrap; background-color: #ffffff; border-left: 2px solid #000000; border-top: 2px solid #000000; box-sizing: border-box;}
.days .day{width: 14.28%; font-size: 15px; font-weight:400; color: #000000; padding: 3px; text-align: right; border-right:2px solid #000000; border-bottom: 2px solid #000000; min-height:150px; box-sizing: border-box; position: relative;}
.days .big-day-click:hover{ background-color:rgb(34, 113, 177, 0.2);}
.today{ background-color: #7cbcb4;}
.has_bookings { background-color:var(--bs-pastel-yellow);}

.calendar-container .sub-month-calendar .days .day{min-height:40px; text-align: center; line-height: 40px; padding: 0;}
.calendar-container .sub-month-calendar .month-title{background-color: #a7c2d7; font-size: 16px; font-weight: bold; text-align: center; color: #000000; padding: 5px 0px; margin: 0;}
.calendar-container .sub-month-calendar .weekdays{ background-color: #ffffff; border-left: 1px solid #000000; border-top: 1px solid #000000; box-sizing: border-box;}
.calendar-container .sub-month-calendar .weekdays div{border-right: 1px solid #000000; min-height:40px; line-height: 40px; padding: 0;  box-sizing: border-box;}


.calander_main{ position: relative;}
.calander_main .calander_head{ width: 100%; position: absolute; left: 0; top:7.6rem;}
.calander_main .calander_head .year_arrow{ width: 100%; display: flex; justify-content: space-between; align-items: center;}
.calander_main .calander_head .year_arrow a{ font-size: 30px; color: #000000; position: relative; z-index: 2;}
.calander_main .cal_day_events_outer{ padding: 5px;}
.calander_main .cal_day_events_outer .cal_day_event_rec{ background-color: #ffffff; border-radius:5px; padding: 5px 10px; box-shadow: 0px 3px 3px rgba(0,0,0,0.2);}
.calander_main .cal_day_events_outer a{ font-size: 14px; font-family: 'metropolismedium'; color:#000000; letter-spacing:0px; display: block;}
.calander_main .progress{margin-top: 1rem;}
.calander_main .cal_day_events_more{ position: absolute; right: 10px; bottom: 10px;}
.calander_main .cal_day_events_more a{font-size: 16px; color: #ffffff; text-transform: uppercase; text-decoration:none; letter-spacing: 1px; background-color: #0f78c9; padding: 5px 10px;}
.calander_main .cal_day_events_more a:hover{ background-color: #000000;}
.calander_main .cal_day_events_more a.more_device{ display: none;}

.calander_main .calander_footer{ width: 100%; display: flex; position: relative; left: 0; bottom:0rem;}
.calander_main .calander_footer .year_arrow{ width: 100%; display: flex; justify-content: space-between; align-items: center;}
.calander_main .calander_footer .year_arrow a{ font-size: 30px; color: #000000; position: relative; z-index: 2;}


@media (max-width:1199px) {
.calander_main .cal_day_events_outer a{ font-size: 12px; line-height: 14px;}
.calander_main .cal_day_events_more a.more_device{ display: inline-block; padding:0px; font-weight: bold; width: 25px; height: 25px; text-align: center; line-height: 23px;}
.calander_main .cal_day_events_more a.more_desktop{ display: none;}
}

@media (max-width:992px) {
.calander_main .cal_day_events_outer .cal_day_event_rec{ padding: 3px;}
.calander_main .cal_day_events_outer{padding: 0px 3px;}
}

@media (max-width:767px) {
.calander_main .calander_head{ top: 6.4rem;}
.weekdays div{ font-size: 18px;}
.month-title{ font-size: 25px;}
.days .day{ min-height: 80px;}
.calander_main .cal_day_events_outer .cal_day_event_rec{ display: none;}

}

@media (max-width:479px) {
.calander_main .calander_head{ top: 5.8rem;}
.days .day{ min-height: 60px; font-size: 13px;}
.calander_main .cal_day_events_more{ bottom: 5px;}
.weekdays div{ font-size: 14px;}
.month-title{ font-size: 22px;}
.calander_main .calander_head .year_arrow a{ font-size: 25px;}
}