@charset "utf-8";
.calendar-box { display:block; width:100%; height: auto;}

.calendar-box .btn { display:block; width:auto; height:auto;  font-size:1.25rem; line-height:2rem; position:relative; overflow:hidden; border:1px solid rgba(0,0,0,0.1); padding:0.5rem 1rem; text-align:center; text-decoration:none;
/*圓角*/
border-radius:0.5rem;
/*基礎動畫設定*/
-webkit-transition:all .5s, -webkit-transform .5s; transition:all .5s, transform .5s;
/*flex*/
-webkit-flex-display:flex; display: flex;
-webkit-align-items: center; align-items: center;
-webkit-justify-content:center;justify-content:center;
flex-wrap:wrap;}
.calendar-box .btn:link,
.calendar-box .btn:visited,
.calendar-box .btn:hover,
.calendar-box .btn:active { color:black;}
.calendar-box .btn:focus{ color:blue; border:2px dashed blue;}
.calendar-box .btn.aspNetDisabled { display:none;}

.calendar-box .calendar-toolbar{  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; width:100%; height: auto; margin-bottom:10px; position:relative;flex-direction:row-reverse;}

.calendar-box .calendar-toolbar > .btn.btn-previous { position:absolute; left:0;}
.calendar-box .calendar-toolbar > .btn.btn-next { position:absolute; right:0;}
.calendar-box .calendar-toolbar > .calendar-title { display:inline-flex; flex-wrap:wrap; justify-content:center; align-items: center;}
.calendar-box .calendar-toolbar > .calendar-title > span { display:inline-block; width:auto; height:auto; overflow:hidden; float:left; margin:0 2.5px; font-size:1.5rem; line-height:3rem;}
.calendar-box .calendar-toolbar > .calendar-title select { display:inline-block; width:auto; height:auto; overflow:hidden; float:left; margin:0 2.5px; font-size:1.5rem; line-height:3rem; border:1px solid rgba(0,0,0,0.1); padding:0.5rem;
/*圓角*/
border-radius:0.5rem;}

.calendar-box .calendar-grid{  display:flex; flex-wrap:wrap; justify-content:center; border-top:1px solid #c8c8c8; border-left:1px solid #c8c8c8; align-items:center; width:100%; height: auto; margin-bottom:0; position:relative;}
.calendar-box .calendar-grid > * { display: block; width:100%;}
.calendar-box .calendar-grid .row { width:100%; height:auto; overflow:hidden;
/*flex*/
-webkit-flex-display:flex; display: flex;
-webkit-justify-content:space-between; justify-content:space-between;}
.calendar-box .calendar-grid .row:last-child { margin-bottom:0;}
.calendar-box .calendar-grid .row .item{ width:calc( ( 100% / 7 ) ); height:auto; overflow:hidden; position:relative; padding-top:30px; border-right:1px solid #c8c8c8; border-bottom:1px solid #c8c8c8;
background:white; font-size:0.8em; min-height:calc(  40px * 2 );
/*flex*/
display: flex;
flex-wrap:wrap;
justify-content:flex-end;
align-items:flex-end;}
.calendar-box .calendar-grid .row .item.empty{ background-color:#eee;}
.calendar-box .calendar-grid .row .item .day { position:absolute; left:0; top:0; padding:0 5px; line-height:1; line-height:1.875rem; width:30px; height:30px; display:inline-block; overflow:hidden; text-align:center;}
.calendar-box .calendar-grid .row .item .event{ display:block; width:calc( 100% - 10px ); margin:5px; height:1.875rem; line-height:1.875rem; background:#1f4c88; color:white; text-align:center; font-size:1.25em;transition:all .5s;
/*圓角*/
border-radius:0.75rem;}
.calendar-box .calendar-grid .row .item .cross-day{ position:absolute;}
.calendar-box .calendar-grid .row .item .holiday{ background-color:#e65f76; color:white;}
.calendar-box .calendar-grid .row .item a.event:link, 
.calendar-box .calendar-grid .row .item a.event:visited { text-decoration:none;}
.calendar-box .calendar-grid .row .item a.event:active,
.calendar-box .calendar-grid .row .item a.event:hover { text-decoration:none;transform: translate(0px, -5px);}
.calendar-box .calendar-grid .row .item a.event:focus{ color:blue; background:yellow; border:2px dashed blue;}

.calendar-box .calendar-grid .header .item{ background:#c8c8c8; color:white; padding-top:0; min-height:0; line-height:3.5rem; background:#1f4c88;
-webkit-align-items: center; align-items: center; font-size:1em;
-webkit-justify-content:center; justify-content:center;
}

@media only screen and (min-width:0px) and (max-width:768px) {
	.calendar-box .calendar-grid { border:1px solid #c8c8c8; height:600px; overflow-y:auto;}
	.calendar-box .calendar-grid .row.header { display:none;}
	.calendar-box .calendar-grid .row { display:block; margin-bottom:0;}
	.calendar-box .calendar-grid .row .item { width:100%; border:0; border-bottom:1px dashed #c8c8c8; padding:0; min-height:40px; float:left; padding-left:70px; display:block;}
	.calendar-box .calendar-grid .row .item:last-child { border-bottom:0;}
	.calendar-box .calendar-grid .row .item .day {right:auto; bottom:auto; left:0; padding:0; width:30px; height:100%; float:left; text-align:center; float:left;
	display: flex; flex-wrap:wrap; align-items:center; justify-content:center;}
	.calendar-box .calendar-grid .row .item .event { float:left; text-align:left; width:auto; padding:0 5px; margin:5px;}
	.calendar-box .calendar-grid .row .item.empty { display:none; background:#eee;}
	.calendar-box .calendar-grid .row .item:before { float:left; width:40px; position:absolute; top:0; height:100%; left:30px; line-height:1;
	display: flex; flex-wrap:wrap; align-items:center; justify-content:center;}
	.calendar-box .calendar-grid .row .item:nth-child(1):before { content:'日';}
	.calendar-box .calendar-grid .row .item:nth-child(2):before { content:'一';}
	.calendar-box .calendar-grid .row .item:nth-child(3):before { content:'二';}
	.calendar-box .calendar-grid .row .item:nth-child(4):before { content:'三';}
	.calendar-box .calendar-grid .row .item:nth-child(5):before { content:'四';}
	.calendar-box .calendar-grid .row .item:nth-child(6):before { content:'五';}
	.calendar-box .calendar-grid .row .item:nth-child(7):before { content:'六';}
	.calendar-box .calendar-grid .row .item.weekend,
.calendar-box .calendar-grid .row .item.holiday{ background:#eee; color:#8c7873;}
}

@media only screen and (min-width:0px) and (max-width:580px) {
	.calendar-box .calendar-toolbar { justify-content:space-between;flex-direction:row;}
	.calendar-box .calendar-toolbar > .calendar-title { order:1; margin-bottom:10px;}
	.calendar-box .calendar-toolbar > .btn.btn-previous { position:static; left:auto; order:3; width:calc( 50% - 5px );}
	.calendar-box .calendar-toolbar > .btn.btn-next { position:static; right:auto; order:4; width:calc( 50% - 5px );}
	.calendar-box .calendar-toolbar > .btn.btn-today { order:2; margin-bottom:10px; margin-left:calc( 100% - 270px );}
}