/* Login */
/* .logo_wrap{
	filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, 1));
	-webkit-filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, 1));
} */
.logo_wrap img{
	max-height: 80px;
	max-width: 100%;
}
.top_img{
	background: url(../img/banner.jpg);
	background-size: cover;
	background-position: bottom;
	box-shadow: 0px 0px 3px #333;
}

.login_content_container{
	background-color: #7BADE9;
	background-image: url(../img/bg1.jpg);
	background-repeat: repeat-x;
	/*background-size: contain;*/
	min-height: calc(100vh - 196px);
	background-position: bottom;
	padding: 1rem 0;
}
.ssoLogin > b {
	display: block;
	font-size: 1.1rem;
	color: #5e69f7;
}
.ssoLogin > b + b{
	margin-bottom: 90px;
}
.login_content{
	padding: 2em;
	max-width: 600px;
	margin: auto;
	border-radius: 10px;
	background-color: rgba(255,255,255,0.7);
 box-shadow: 0px 0px 5px #333;
}
.login_content input.form-control{
	border-top: none!important;
	border-left: none!important;
	border-right: none!important;
	border-radius: 0!important;
	background-color: transparent;
}
.login_content input.form-control:focus{
	box-shadow: 0 4px 2px -2px rgba(0,123,255,.25);
} 
.bulletin{
	position: absolute;
	bottom: 0;
	width: 100%;
}
.bulletin_container{
	height: 250px;
	border: 1px solid rgba(0,0,0,.125);
}
.bulletin_container > iframe{
	height: 100%;
	width: 100%;
}
.space_container{
	position: relative;
	height: 250px;
	border: 1px solid rgba(0,0,0,.125);
	overflow-y: auto;
}
.space_container > .table {
	margin-bottom: 0;
	text-align: center;
}
.space_container > .table > thead{
	background-color: #dddddd;
}
.site_title{
	width: 100;
	/* top: 50px; */
	bottom: initial;
	/*
	background-color: rgba(255,255,255,0.9);
	background-image: url(../img/bg1.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
	*/
}
.userid svg,.password svg{
	top: 10px;
	background-color: transparent;
}
.userid input,.password input{
	padding-left: 2em;
}
button.login_tutorial i,button.login_tutorial i.redirect{
	margin: 0 5px 0 0;
	width: 25px;
	height: 25px;
	background-position-y: 100%;
	background-repeat: no-repeat;
	background-size: cover;
}
button.login_tutorial{
	font-weight: 600;
	color: #78C9D8;
	background-color: transparent;
	border: none;
	padding-left: 1px;
}
button.password_show{
	font-size: 0.95em;
	background-color: transparent;
	border: none;
	position: absolute;
	top: 6px;
	right: 0;
}
img.captcha{
	border: none;
	position: absolute;
	top: 6px;
	right: 50px;
}
svg.captcha_refresh {
	cursor: pointer;
	position: absolute;
	top: 11px;
	right: 27px;
	color: blue;
}
span.captcha_refresh_cd {
	cursor: pointer;
	position: absolute;
	top: 7px;
	right: -5px;
	color: blue;
}
.footer_container{
	display: flex;
	justify-content: space-around;
	background-color: #232d3c;
	padding: 1rem;
}
.footer_container ul{
	list-style: none;
	margin: 0;
	padding: 0 0.5rem;
}
.footer_container ul > li > a{
	color: #ffffff;
}
.footer_container ul > li > a:hover{
	color: #d5d5d5;
	text-decoration: none;
}
.footer_container svg{
	margin-right: 10px;
}
.announcement_container{
	z-index: 800;
	padding: 10px 20px;
	background: rgba(0,0,0,0.7);
	transition: .3s, transform .3s;
	width: 90%;
	min-height: 160px;
	border-radius: 5px;
	color: #ffc107;
}
.announcement_container.ishidden{
	position: fixed;
	left: 0;
	top: 20%;
	border-radius: 0 5px 5px 0;
	min-height: 80px;
	height: 80px;
	width: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.announcement_top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 1.6rem;
	font-weight: 600;
}
.announcement_top > svg {
	transition: .2s;
	cursor: pointer;
}
.announcement_top > svg:hover {
	font-size: 1.9rem;
	color: #ffcf3f;
}
.announcement_bottom {
	border-top: 1px solid #ffc107;
	padding-top: 10px;
	margin-top: 10px;
	display: flex;
	flex-direction: column;
}
.announcement_bottom > ul {
	list-style: none;
	margin: 0 5px;
	padding: 0;
	word-break: break-word;
}
.announcement_bottom > ul > li{
	margin-bottom: 5px;
}
.announcement_container.ishidden .announcement_top{
	justify-content: flex-end;
}
.announcement_container.ishidden .announcement_title{
	display: none;
}
.announcement_container.ishidden .announcement_bottom{
	display: none;
}

/* 預約況狀 */
.time span{
	letter-spacing: 5px;
}
.ticketWrap > div {
	margin: 5px 0;
}
.ticket{
	padding: 0.4rem 0;
	border-radius: 5px;
	border: 1px solid #c2c1c1;
	height: 100%;
	box-shadow: 0 2px 5px #aaa;
}
.ticket_l, .ticket_r{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.ticket span{
	text-align: center;
	display: block;
	margin: 0.5rem 0;
}
.ticket span.status{
	margin: 0.5rem auto;
	width: 120px;
	border-radius: 5px;
}
.ticket span.status_btn{
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	margin: 0 auto 0.5rem auto;
	width: 120px;
	border-radius: 5px;
	padding: 3px;

}
.ticket span.status_btn_change{
	color: #ffffff;
	background: #6c757d;
}
.ticket span.status_btn_del{
	color: #ffffff;
	background: #A20000;
}
.ticket span.status_btn_del > i.record{
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 2px;
	background-position-y: 0%;
	background-repeat: no-repeat;
	background-size: cover;
}
/* 
	'-2': '退回預約',
	'-1': '尚未審核',
	'0': '預約成功',
	'1': '尚未簽到',
	'2': '預約簽到',
	'3': '預約未到',
	'4': '提早離開',
	'5': '多日未到',
	'6': '違規停權',
	'7': '證件失效',
	'8': '提早結束' --- 清大似乎沒有
*/
.t_status_-2{
	background: #f2f2f2;
}
.t_status_-2 span.status{
	color: #CC3300;
}
.t_status_-1{
	background: #F0DAB6;
}
.t_status_-1 span.status{
	color: #A20000;
}
.t_status_0{
	background: #E5F3F7;
}
.t_status_0 span.status{
	color: #00A29A;
}
.t_status_1{
	background: #F0DAB6;
}
.t_status_1 span.status{
	color: #A20000;
}
.t_status_2{
	background: #E5F3F7;
}
.t_status_2 span.status{
	color: #00A29A;
}
.t_status_3{
	background: #f7e5e8;
}
.t_status_3 span.status{
	color: #A20000;
}
.t_status_4{
	background: #efefef;
}
.t_status_4 span.status{
	color: #232d3c;
}
.t_status_5{
	background: #f7e5e8;
}
.t_status_5 span.status{
	color: #A20000;
}
.t_status_6{
	background: #f7e5e8;
}
.t_status_6 span.status{
	color: #A20000;
}
.t_status_7{
	background: #efefef;
}
.t_status_7 span.status{
	color: #232d3c;
}
.t_status_8{
	background: #efefef;
}
.t_status_8 span.status{
	color: #232d3c;
}

.ticket_line{
	border-right: dotted #fff 2px;
	position: relative;
}
.ticket_line:before{
	background: #ffffff;
	border-radius: 100px;
	width: 20px;
	height: 20px;
	content: '';
	position: absolute;
	margin: -10px;
	border-bottom: 1px solid #c2c1c1;
}
.ticket_line:after{
	background: #ffffff;
	border-radius: 100px;
	width: 20px;
	height: 20px;
	content: '';
	position: absolute;
	margin: -10px;
	top:100%;
	border-top: 1px solid #c2c1c1;
}
.demeritWrap{
	padding: 0.5rem;
}
.demeritWrap .list-group-flush{
	border-radius: 0;
  box-shadow: 0 2px 5px #aaa;
}
.demeritWrap .list-group-flush > .list-group-item:first-child{
	background-color: #cccccc;
	border-bottom: none;
	color: #000000;
}

/* 新增預約 */
.room_btn{
	color: #ffffff;
	border: 0;
	border-radius: 5px;
	outline: none!important;
	position: relative;
	box-shadow: 0 2px 5px #aaa;
	padding-left: 15%;
	font-weight: 600;
	font-size: 18px;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	height: 75px;
}
.room_btn::after{
	transition: left 0.2s;
	content: '';
	position: absolute;
	width: 20%;
	height: 100%;
	left: 0;
	top: 0;
	border-radius: .25rem 0 0 .25rem;
	background-position: bottom right;
	background-repeat: no-repeat;
}
.room_btn::before{
	transition: left 0.2s;
	content: '';
	background-repeat: no-repeat;
	background-size: 60px;
	background-position: center;
	position: absolute;
	width: 20%;
	height: 100%;
	left: 0;
	top: 0;
	border-radius: .25rem 0 0 .25rem;
	z-index: 10;
}
.room_btn:hover::before,.room_btn:hover::after,.room_btn.active::before,.room_btn.active::after{
	left: 20px;
}
.room_btn:hover{
	color: #ddd;
}
/* 
	1 研究小間
	2 讀者討論室
	3 多媒體聆賞席
	4 小團體視聽室
	5 數位影音工作區
	6 興閱坊討論室
	7 多媒體創作坊
	8 自習室
	9 興閱坊愛學區
	12 當日借用研究小間
	19 數位自造工坊
*/
.room_spacetype_1{
	background-image: url(../img/icon/bg_space_1.png);
}
.room_spacetype_1::before{
	background-image: url(../img/icon/space_1.png);
}
.room_spacetype_1::after{
	background-image: url(../img/icon/bg_same.png);
}
.card_spacetype_1{
	background-color: rgba(207,79,65,0.1);
}
.room_spacetype_2{
	background-image: url(../img/icon/bg_space_2.png);
}
.room_spacetype_2::before{
	background-image: url(../img/icon/space_2.png);
}
.room_spacetype_2::after{
	background-image: url(../img/icon/bg_same_2.png);
}
.card_spacetype_2{
	background-color: rgba(212,160,210,0.1);
}
.room_spacetype_3{
	background-image: url(../img/icon/bg_space_3.png);
}
.room_spacetype_3::before{
	background-image: url(../img/icon/space_3.png);
}
.room_spacetype_3::after{
	background-image: url(../img/icon/bg_same.png);
}
.card_spacetype_3{
	background-color: rgba(99,167,179,0.1);
}
.room_spacetype_4{
	background-image: url(../img/icon/bg_space_4.png);
}
.room_spacetype_4::before{
	background-image: url(../img/icon/space_4.png);
}
.room_spacetype_4::after{
	background-image: url(../img/icon/bg_same_4.png);
}
.card_spacetype_4{
	background-color: rgba(140,217,217,0.1);
}
.room_spacetype_5{
	background-image: url(../img/icon/bg_space_5.png);
}
.room_spacetype_5::before{
	background-image: url(../img/icon/space_5.png);
}
.room_spacetype_5::after{
	background-image: url(../img/icon/bg_same_5.png);
}
.card_spacetype_5{
	background-color: rgba(153,198,228,0.1);
}
.room_spacetype_6{
	background-image: url(../img/icon/bg_space_6.png);
}
.room_spacetype_6::before{
	background-image: url(../img/icon/space_6.png);
}
.room_spacetype_6::after{
	background-image: url(../img/icon/bg_same_6.png);
}
.card_spacetype_6{
	background-color: rgba(176,169,243,0.1);
}
.room_spacetype_7{
	background-image: url(../img/icon/bg_space_7.png);
}
.room_spacetype_7::before{
	background-image: url(../img/icon/space_7.png);
}
.room_spacetype_7::after{
	background-image: url(../img/icon/bg_same.png);
}
.card_spacetype_7{
	background-color: rgba(207,79,65,0.1);
}
.room_spacetype_8{
	background-image: url(../img/icon/bg_space_8.png);
}
.room_spacetype_8::before{
	background-image: url(../img/icon/space_8.png);
}
.room_spacetype_8::after{
	background-image: url(../img/icon/bg_same_8.png);
}
.card_spacetype_8{
	background-color: rgba(153,209,153,0.1);
}
.room_spacetype_9{
	background-image: url(../img/icon/bg_space_9.png);
}
.room_spacetype_9::before{
	background-image: url(../img/icon/space_9.png);
}
.room_spacetype_9::after{
	background-image: url(../img/icon/bg_same.png);
}
.card_spacetype_9{
	background-color: rgba(187,209,101,0.1);
}
.room_spacetype_12{
	background-image: url(../img/icon/bg_space_12.png);
}
.room_spacetype_12::before{
	background-image: url(../img/icon/space_12.png);
}
.room_spacetype_12::after{
	background-image: url(../img/icon/bg_same.png);
}
.card_spacetype_12{
	background-color: rgba(207,79,65,0.1);
}

.room_spacetype_15{
	background-image: url(../img/icon/bg_space_15.png);
}
.room_spacetype_15::before{
	background-image: url(../img/icon/space_15.png);
}
.room_spacetype_15::after{
	background-image: url(../img/icon/bg_same_15.png);
}
.card_spacetype_15{
	background-color: rgba(225,100,100,0.1);
}

.room_spacetype_19{
	background-image: url(../img/icon/bg_space_19.png);
}
.room_spacetype_19::before{
	background-image: url(../img/icon/space_19.png);
}
.room_spacetype_19::after{
	background-image: url(../img/icon/bg_same.png);
}
.card_spacetype_19{
	background-color: rgba(207,79,65,0.1);
}
.room_spacetype_23{
	background-image: url(../img/icon/bg_space_23.png);
}
.room_spacetype_23::before{
	background-image: url(../img/icon/space_23.png);
}
.room_spacetype_23::after{
	background-image: url(../img/icon/bg_same_23.png);
}
.card_spacetype_23{
	background-color: rgba(84,197,237,0.1);
}
.room_spacetype_24{
	background-image: url(../img/icon/bg_space_24.png);
}
.room_spacetype_24::before{
	background-image: url(../img/icon/space_24.png);
}
.room_spacetype_24::after{
	background-image: url(../img/icon/bg_same_24.png);
}
.card_spacetype_24{
	background-color: rgba(255,100,100,0.1);
}
.room_spacetype_25{
	background-image: url(../img/icon/bg_space_25.png);
}
.room_spacetype_25::before{
	background-image: url(../img/icon/space_25.png);
}
.room_spacetype_25::after{
	background-image: url(../img/icon/bg_same_25.png);
}
.card_spacetype_25{
	background-color: rgba(212,160,210,0.1);
}
.room_spacetype_26{
	background-image: url(../img/icon/bg_space_26.png);
}
.room_spacetype_26::before{
	background-image: url(../img/icon/space_26.png);
}
.room_spacetype_26::after{
	background-image: url(../img/icon/bg_same_26.png);
}
.card_spacetype_26{
	background-color: rgba(153,198,228,0.1);
}
.room_spacetype_27{
	background-image: url(../img/icon/bg_space_27.png);
}
.room_spacetype_27::before{
	background-image: url(../img/icon/space_27.png);
}
.room_spacetype_27::after{
	background-image: url(../img/icon/bg_same_27.png);
}
.card_spacetype_27{
	background-color: rgba(176,169,243,0.1);
}
.room_spacetype_28{
	background-image: url(../img/icon/bg_space_28.png);
}
.room_spacetype_28::before{
	background-image: url(../img/icon/space_28.png);
}
.room_spacetype_28::after{
	background-image: url(../img/icon/bg_same_28.png);
}
.card_spacetype_28{
	background-color: rgba(225,100,100,0.1);
}
.close,.close:hover {
	color: #fff;
	opacity: 1;
}

#policyModal table thead {
	background-color: #dddddd;
}
#policyModal table td.asTH{
	background-color: #dddddd;
	border-bottom: 2px solid #dee2e6;
	font-weight: bold;
}

.accordion > .card .list-group-flush>.list-group-item {
	background-color: transparent;
}

.zonemap_icon {
	background-image: url(../img/zonemap_icon.png);
	display: inline-block;
	width: 32px;
	height: 32px;
	background-size: contain;
	background-repeat: no-repeat;
}
.deviceArea .card {
  cursor: pointer;
	height: 100%;
	background-color: #e5ffe3;
}
.deviceArea .card.disabled {
  background-color: #dddddd;
  color: #aaaaaa;
  cursor: none;
  pointer-events: none;
}

.deviceArea .card.partial {
  /* 只有部分時間能預約 */
  /*background-color: #fff7cb;*/
}
.deviceArea .card.mybook {
  /* 自己已預約 */
  background-color: #cbe2ff !important;
}

.deviceArea.date .card{
	background-color: #EFF;
	border: 1px solid #36C;
}

.deviceArea.date .card .device_usetype{
  color: #36C;
}

.deviceArea.time .card,.deviceArea.night .card{
	background-color: #e5ffe3;
	border: 1px solid #2c8f03;
}
.deviceArea.time .card .device_usetype,.deviceArea.night .card .device_usetype{
  color: #2c8f03;
}

.deviceArea .card .device_left{
	position: relative;
}

i.deviceinfo-icon {
	display: block;
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: cover;
}

i.deviceinfo-icon.information-icon {
	background-image: url(../img/information.png);
}
i.deviceinfo-icon.accessibility-icon {
	background-image: url(../img/accessibility.png);
}
i.deviceinfo-icon.mac-icon {
	background-image: url(../img/MAC.png);
	height: 20px;
	width: 40px;
	margin: auto;
}

.deviceArea .card i.accessibility-icon{
	bottom: 0;
}

.deviceArea .card i.information-icon + i.accessibility-icon {
	margin-top: 5px;
}

/* 用戶記錄 */
.record_btn {
	color: #ffffff;
	border: 0;
	border-radius: 5px;
	box-shadow: 0 2px 5px #aaa;
	outline: none!important;
	position: relative;
	font-size: 18px;
	font-weight: 600;
	transition: color .15s ease-in-out,opacity .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.record_btn:hover{
	color: #ffc;
	opacity: 0.9;
}
.record_btn_0 {
	background-color: #a349a4;
}
.record_btn_1 {
	background-color: #2071ac;
}
.record_btn_2 {
	background-color: #5dc2a2;
}
.record_btn_3 {
	background-color: #e15740;
}
.red {
	color: red;
}
.red-box {
	border: 2px solid red;
	margin-top: 0.25rem;
  padding: 0.25rem 0.5rem;
}
.red-box > span {
	display: block;
}
.record_btn_4 {
	background-color: #eeb738;
}
.RecordModal table {
	width: max-content;
	min-width: 100%;
}
.record_table_thead {
	color: #ffffff;
	font-size: 18px;
	font-weight: 600;
}

/* media screen width css */
@media screen and (max-width:1200px){
    
}

@media screen and (max-width:992px){
	.top_img ,.top_img.addHeight{
		/*background: url(../img/bg1.jpg);*/
		background-size: cover;
		background-position: bottom;
		/* background-size: 70%;
		height: 30vh;
		min-height:initial; */
	}
	.login_content_container{
		position: relative;
		top: 0;
	}
	.site_title {
		top: initial;
		bottom: 0;
	}
	.bulletin{
		position: initial;
	}
}

@media screen and (max-width:767px){
	.login_content_container {
		padding: 0;
		min-height: calc(100vh - 240px);
	}
	.demeritWrap > div + div{
		margin-top: 1rem;
	}
}

@media screen and (max-width:576px){
	.top_img, .top_img.addHeight {
		background-size: 100%;
	}
	.login_content_container {
		min-height: calc(100vh - 312px);
	}
	.login_content{
		padding: 1.5em;
		border-radius: 0;
		min-height: 450px;
	}
	.footer_container{
		flex-direction: column;
	}
}