@import url('https://fonts.googleapis.com/css2?family=Redressed&display=swap');

/* calendar */
#calendar { margin: 10px; padding: 10px; width: 280px; display: inline-block; box-shadow: 0 0 10px rgb(0 0 0 / .2); }
#calendar .btns , #calendar .title { text-align: center; }
#calendar .btns a { width: calc(100% - 100px); display: inline-block; text-align: center; line-height: 24px; vertical-align: text-bottom; }
#calendar .btns a.arrow { width: 50px; height: 24px; font-family: 'Redressed', cursive; font-size: 25px; }

/* dates */
#dates li { position: relative; width: calc(100% / 7); display: inline-block; text-align: center; line-height: 35px; color: #868686; }
#dates li a { display: block; text-align: center; line-height: 35px; }
#dates li.today { background: #f3f3f3; }
#dates li.today.chk { background: none; } 
#dates li.chk a { color: #fff; }
#dates li.chk a:before { position: absolute; width: 35px; height: 35px; background: #1b2a86; border-radius: 50%; display: block; top: 0; left: calc((100% - 35px) / 2); z-index: -1; content: ""; }

/* date_box */
.date_box { margin: 0 2%; width: 150px; display: inline-block; }
.date_box p { text-align: center; }
.date_box p#date_txt { margin-top: 10px; }
.date_box p#date_txt:hover font {color: #e3371f;}
.date_box p font {display: block;text-align: center;text-align: center;font-size: 1.125rem;color: #d0d0d0;font-weight: bold;transition: all .35s ease;}
.date_box p font.day { line-height: 120%; font-weight: 600; font-size: 40px; }

/* eventList */
#eventList {overflow-y: scroll;width: calc(96% - 470px);height: 115px;display: inline-block;align-items: center;}
#eventList::-webkit-scrollbar { width: 3px; }
#eventList::-webkit-scrollbar-track { background: none; }
#eventList::-webkit-scrollbar-thumb { background: #235fdf; }

.text-clamp{font-weight: bold;color: #1b1b1b;line-height: 140%;font-size: 1.5em;height: 100px;-webkit-line-clamp: 3;}

@media screen and (min-width:641px) and (max-width:980px){
	.date_box { position: absolute; margin: 30px 2%; width: calc(96% - 320px); }
	#eventList { margin: 50px 2% 20px; width: calc(96% - 320px); }
}
@media screen and (max-width:980px){
	.date_box p:first-child { display: none; }
	.date_box p#date_txt { margin-top: 0; text-align: left; }
	.date_box p font { display: inline-block; vertical-align: inherit; }
	.date_box p font.day { margin: 0 5px; font-size: 20px; }
}
@media screen and (max-width: 640px){
	#calendar_box , .date_box p#date_txt , #eventList p { text-align: center; }
	.date_box { width: 96%; }
	#eventList { overflow: inherit; margin: 10px 2%; width: 96%; height: auto; }
}
@media screen and (max-width: 375px){
	#calendar { margin: 10px 0; width: calc(100% - 40px); }
}