#calender_section{ width:875px; margin:0px auto;font-family: 'Montserrat', sans-serif;}

.dropdown{color: #444444;font-size:20px;}
.none{ display:none;}

#calender_section h2{ background-color:#666; color:#fff; font-size:20px; text-align:center; line-height:40px;}



#calender_section h2 a{ color:#fff; float:none;}
#calender_section_top{ width:100%; float:left; margin-top:10px;}
#calender_section_top ul{padding:0; list-style-type:none;}
#calender_section_top ul li{ float:left; display:block; width:125px; border-right:1px solid #fff;  text-align:center; font-size:24px; color: #fff; min-height:0; background:#666; box-shadow:none; margin:0; padding:0;}
#calender_section_top ul li:last-child {border-right:1px solid #666; } 

#calender_section_bot{ width:100%; margin-top:0px; float:left; border:1px solid #666;}
#calender_section_bot ul{ margin:0; padding:0; list-style-type:none;}
#calender_section_bot ul li{ float:left; width:124px; height:99px; text-align:center; border-bottom:1px solid #ccc; border-right:1px solid #ccc; min-height:0; background:none; box-shadow:none; margin:0; padding:0; position:relative;}

#calender_section_bot ul li span{float:left; text-align:center;}

#calender_section h3{width:450px; margin:0px auto ;font-size:20px; text-align:center; line-height:20px;}

.current_date{font-weight:bold; text-decoration:underline;}
.nodate {background-color:transparent !important;}

.booked_am {background: linear-gradient(315deg, #666 48%, #ccc 49%, #ccc 51%,  #eee 52%) !important;}
.booked_pm {background: linear-gradient(135deg, #666 48%, #ccc 49%, #ccc 51%,  #eee 52%) !important;}
.booked_dy {background-color:#eee !important; color:#999 !important;}
.booked_cn {background: linear-gradient(135deg, #eee 48%, #ccc 49%, #ccc 51%, #eee 52%) !important; color:#999 !important;}
.booked_key {background-color:#eee !important; width: 250px; height:80px !important;color:#999 !important;}

.available {background-color:#666 !important;color: #fff !important;}
.available_key {background-color:#666 !important;color: #fff !important;width: 250px; height:80px !important;}


/*
.strike {text-decoration: line-through;text-decoration-thickness: 2px;text-decoration-line: line-through; }
.normal {text-decoration: none; }
*/

.date_cell {display: flex;justify-content: center;align-items: center; font-size:32px; margin: 0; padding:0; border-radius:100%;transform : scale(0.7);background-color:#eee; }



a:hover {color: #181919;text-decoration: underline;}

@media only screen and (min-width:480px) and (max-width:767px) {
#calender_section{ width:450px;}
#calender_section_top ul li{ width:64px;font-size:14px;}
#calender_section_bot ul li{ width:64px;}
#calender_section_bot ul li{ height:52px;}
#calender_section_top ul li:last-child {width:66px;} 
.date_cell {font-size: 20px;}
#calender_section h3{width:440px;}
.booked_key {background-color:#eee !important; width: 200px; height:80px !important;}
.available_key {background-color:#666 !important;color: #fff !important;width: 200px; height:80px !important;}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
#calender_section h2{ font-size:13px;}
#calender_section{ width:317px;}
#calender_section_top ul li{ width:45px; font-size:12px;}
#calender_section_bot ul li{ width:45px;}
#calender_section_bot ul li{ height:45px;}
#calender_section_top ul li:last-child {width:47px;} 
.date_cell {font-size: 18px;}
#calender_section h3{width:300px;}
.booked_key {background-color:#eee !important; width: 140px; height:80px !important;}
.available_key {background-color:#666 !important;color: #fff !important;width: 140px; height:80px !important;}
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
#calender_section{ width:702px;}
#calender_section_top ul li{ width:100px;}
#calender_section_bot ul li{ width:100px;}
#calender_section_bot ul li{ height:80px;}
#calender_section_top ul li:last-child {width:102px;} 
}