@charset "UTF-8";
* {
    margin: 0;
    padding: 0
}

#calendar {background-color: #FFFFFF; border-radius: 30px; min-height: calc(100% - 7rem - 7.8rem); height: 100%;}

.calender_content {/*padding: 0 4rem;*/}
.custom_calendar_table td {
    text-align: center;
}

.custom_calendar_table thead.cal_date th {
    font-size: 1.5rem;
}

.custom_calendar_table thead.cal_date th button {
    font-size: 1.5rem;
    background: none;
    border: none;
}

.custom_calendar_table thead.cal_week th {
    /*background-color: #288CFF;*/
    color: #909090;
    font-size: 2.4rem;
    text-align: center;
    padding: 1.3rem 0;
    font-weight: 600;
}

.custom_calendar_table tbody td {
    cursor: pointer;
    font-size: 2.4rem;
    font-weight: 500;
    padding: 1rem;
    position: relative;
    width: 8.3rem; 
    height: 5rem; 
    vertical-align: top; 
    text-align: center;
    position: relative;
}  
.custom_calendar_table tbody td.none {opacity: 0.5;}

.custom_calendar_table tbody td span {position: relative; z-index: 2; width: 30px; height: 30px; text-align: center; border-radius: 100%; position: relative;}
.custom_calendar_table tbody td.today span:before {content: ''; display: block; position: absolute; width: 4.6rem; height: 4.6rem; background-color: #EDEDED; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; border-radius: 50%;}
.custom_calendar_table tbody td.hasEvent span:after {content: ''; display: block; position: absolute; width: 10px; height: 10px; background: #F15D4E; top: -10px; right: -10px; z-index: -1; border-radius: 50%;}
  
h4.month {font-weight: 600; text-align: center; display: inline-block; margin: 0 10px; padding: 4px 15px; font-size: 2.4rem;}

.custom_calendar_table tbody td:nth-child(1) {
    color: #F05672;
}

.custom_calendar_table tbody td:nth-child(7) {
    color: #004EA2;
}

.custom_calendar_table tbody td.select_day span:before {
    content: ''; display: block; position: absolute; width: 4.6rem; height: 4.6rem; background-color: rgba(237, 237, 237,0.5); top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; border-radius: 50%;
}

.custom_calendar_table tbody td p.closed {position: absolute; top: 50px; left: 50%; transform: translateX(-50%); width: 100%; color: #FF0000; font-weight: 300;}
.custom_calendar_table tbody td p.open {position: absolute; top: 50px; left: 50%; transform: translateX(-50%); width: 100%; color: #00980F; font-weight: 300;}

.calnderArrow {border: 0px; background-color: transparent;}
.calnderArrow:focus {border: 0px;}

#eventListHtml {height: 45.3rem; overflow-y: scroll; min-height: 100%;}
#eventListHtml::-webkit-scrollbar {width: 8px;} 
#eventListHtml::-webkit-scrollbar-thumb {background-color: #B5B5B6; border-radius: 10px; background-clip: padding-box; border: 0px solid transparent;}
#eventListHtml::-webkit-scrollbar-track {background-color: #FFFFFF; border: 0px solid #B5B5B6; border-left: 0;}  
.eventListItem li {background: #FAFAFA; padding: 21px 10px; border-bottom: 1px solid #E6E6E6;}
.eventListItem li > div {position: relative; padding-left: 17px; position: relative; display: flex; align-items: center;}
.eventListItem li > div:after {position: absolute; content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background: #F39800; top: 44%; left: 0;}
.eventListItem li span {font-size: 14px; font-weight: 500; color: #FFFFFF; padding: 2px 7px; background: #F39800; border-radius: 10px; flex:none;}
.eventListItem li h5 {font-size: 1.6rem; color: #000000; flex: none; font-weight: 600;}
.eventListItem li p {font-size: 1.6rem; color: #1D2088; font-weight: 600;}