@CHARSET "utf-8";

/*---------------------------------------------- enter_couser.jsp*/
.page.enterCouser span.resultMessage{width:180px; display:inline-block;}
.page.enterCouser .mobile-version span.resultMessage{width:180px; display:inline;}
.page.enterCouser span.resultMessage.errorMessage{color:red;}
.page.enterCouser .pop-overlay{display:none; position: fixed; z-index: 100; top: 0px; left: 0px; height: 100%; width: 100%; background-color: #000; opacity: 0.5;}
.page.enterCouser .pop-res-check{
	background: white;
	width: 680px;
	position: fixed;
	z-index: 102;
	color: #000;
	display: none;
	border: medium none;
	text-align: left;
	top: calc(50% - 350px);
	left: calc(50% - 340px);
}
.page.enterCouser .pop-res-check .pop-main-content{
	background-color: #ebebeb;
	padding: 10px;
}
.page.enterCouser .pop-res-check .pop-main-content .res-info{
	display: flex;
	background-color: #fff;
	padding: 5px;
	margin: 15px 0;
}
.page.enterCouser .pop-res-check .pop-main-content .res-info .title-bar{
	display: block;
	width: 25%;
	margin-right: 10px;
}
.page.enterCouser .pop-res-check .pop-main-content .res-info .title-bar .title{
	border-bottom: none;
	border-right: 1px solid #ddd;
	padding: 0;
	height: 30px;
	line-height: 30px;
}
.page.enterCouser .pop-res-check .pop-main-content .res-info .data-bar{
	display: block;
	width: 60%;
}
.page.enterCouser .pop-res-check .pop-main-content .res-info .data-bar .data{
	height: 30px;
	line-height: 30px;
}
.page.enterCouser .pop-res-check .pop-main-content .res-info .data-bar .selectedTime{
	display: flex;
	width: 100%;
}
.page.enterCouser .pop-res-check .pop-main-content .res-info .btn{
	display: flex;
	justify-content: center;
}
.page.enterCouser .pop-res-check .pop-main-content .res-info .btn a{
	width: 250px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	letter-spacing: 2px;
	color: #000;
	display: block;
	margin:0 10px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background: #ffe6ad;
	background: -moz-linear-gradient(top, #ffe6ad 0%, #ffbb18 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffe6ad), color-stop(100%,#ffbb18));
	background: -webkit-linear-gradient(top, #ffe6ad 0%,#ffbb18 100%);
	background: -o-linear-gradient(top, #ffe6ad 0%,#ffbb18 100%);
	background: -ms-linear-gradient(top, #ffe6ad 0%,#ffbb18 100%);
	background: linear-gradient(to bottom, #ffe6ad 0%,#ffbb18 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe6ad', endColorstr='#ffbb18',GradientType=0 );
}
.page.enterCouser .mobile-version .mobileNextPage{background:#757575;}
.page.enterCouser .mobile-version .mobileNextPage.goMobileConfirm{background:#ff9000;}
.page.enterCouser .maskedCouserId{position:absolute; background:white; z-index:0; width:150px; height:22px; display:inline-block; overflow:hidden;}
.page.enterCouser .mobile-version .maskedCouserId{width:129px; height:22px; margin-top:0px;}
.page.enterCouser .user-info .maskWrap{display:inline-block;}


/*---------------------------------------------- home_web.jsp*/
.page.home .beforeIE9{display:none;}

/*---------------------------------------------- login.jsp*/
.page.login {position:fixed; overflow-y: scroll; top:0px; left:0px; width:100vw; height:100vh; z-index:1000;}
.page.login.prompted {display:block; opacity:1;}
.page.login .background {width:100%; height:100%; position:absolute; top:0px; left:0px; opacity:0.5; background-color:black; z-index:-1;}
.page.login .dialog {
	position: absolute;
	top: calc(50% - 150px);
	left: calc(50% - 301px);
	background-color: #ebebeb;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
}
.page.login .dialog h2.title{
	width:100%;
}
.page.login .dialog .pop-main-content{
	width: 300PX;
}
.page.login .dialog .cancelBtn {position:absolute; top:0px; left:100%; width:30px; height:30px; color:white; background-color:black; border-radius:15px; opacity:0.2; text-align:center; line-height:30px; display:inline-block; margin-left:-40px; margin-top:2px;}
.page.login .dialog:hover .cancelBtn {opacity:0.7}
.page.login .box {background-color:white;}
.page.login .webErrorMsg {color:red; margin-bottom:10px;}
.page.login .mobileErrorMsg {color:red;}
.page.login .ie-loginInfo{display:none;}
.page.login .webLoginUserId{color:white;}
.page.login .mobileLoginUserId{color:white;}
.page.login .noMask{color:black;}

::-moz-placeholder{color:gray;}
.page.login .pop.web-version .login-data .maskedWebLoginUserId{
	position: absolute;
	width: 190px;
	height: 21px;
	cursor: text;
	z-index: 2;
	overflow: hidden;
	background-color: #e8f0fe;
	border-radius: 6px;
}
.page.login .pop.web-version .login-data .webUserIdOverlay{
	position: absolute;
	width: 200px;
	height: 19px;
	/* background-color: white; */
	color: darkgrey;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	box-shadow: inset 55px 0px 0px #fff;
	border-radius: 6px;         /* Likely future */   
}
.page.login .box.mobile-version .maskedMobileLoginUserId{
	position:absolute;
	width:auto;
	height:25px;
	cursor:text;
	border:1px solid #C6C6C6;
	background-color: white;
	z-index:2;
	overflow: hidden;
}
.page.login .box.mobile-version .mobileUserIdOverlay{/*position:absolute; width:240px; height:19px; background-color: white;*/}
.page.login .dialog .passwordHint{
	width: 51%;
	padding: 15px;
	display: block;
	width: calc(100% - 350px);
	padding: 15px;
}
/*---------------------------------------------- login.jsp CAPTCHA css adjust*/
.page.login .captcha{
	background: white none repeat scroll 0% 0%;
	margin-bottom: 10px;
	border-radius: 5px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.page.login .captcha img{
	width: 40%;
	margin-right: 10px;
	max-width: 90px;
}
.page.login .captchaInput{
	padding:10px;
	width:80px;
	height:19px;
	border-radius: 5px;
	vertical-align: top;
	margin-bottom: 10px;
}
/*.page #randImage{height:30px; width:60px}*/
.page.login .reloadCaptcha{border-radius: 11px;position: relative; top: 5px; left: 10px; display: inline-block; width:22px; height:22px; background:url(../../images/ok.png);}
.page.login .playCaptcha{border-radius: 11px;position: relative; top: 5px; left: 10px; display: inline-block; width:22px; height:22px; background:url(../../images/speaker.png);}
.page.login .mobileCaptcha input[type="text"].mobileCaptchaInput{width:30%;}
.page.login .top{vertical-align:top;}

/*---------------------------------------------- mobile_confirm.jsp*/
.page.mobileConfirm .row.couser{display:none;}

/*---------------------------------------------- mobile_select_resv_period.jsp*/
.page.mobileSelectResvPeriod .table-res-mobile-step3 .empty{width:20px;}
.page.mobileSelectResvPeriod select {width:90%; height:28px; margin-left:6%}
.page.mobileSelectResvPeriod .startTimeText,.mobileSelectResvPeriod .endTimeText,.mobileSelectResvPeriod .periodText{margin:5px; text-align:center;}
.page.mobileSelectResvPeriod .buttonSet{text-align:center; width:100%;}
.page.mobileSelectResvPeriod #step3-mobile .mobile-version a.btn-style-2{float:none;}
.page.mobileSelectResvPeriod .flexibleTime, .mobileSelectResvPeriod .general{display:none;}
.page.mobileSelectResvPeriod .maxUseTime{color:red;}

/*---------------------------------------------- mobile_select_resv_seat.jsp*/
.page.mobileSelectResvSeat .empty{width:28px;}
.page.mobileSelectResvSeat #step4-mobile .mobile-version a.btn-style-2 {float:none;}
.page.mobileSelectResvSeat .buttonSet{text-align:center; width:100%; margin-bottom:10px;}
.page.mobileSelectResvSeat .seat-status{width:80%; text-align: center; margin-bottom:5px; margin-left:10%;}
.page.mobileSelectResvSeat .seat-chose{width:80%; text-align:left; margin-bottom:5px; margin-left:15%;}
.page.mobileSelectResvSeat .seat-left{position: absolute; left: 5%; top: 40%; width: 0; height: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-right:30px solid #A2A2A2; }
.page.mobileSelectResvSeat .seat-right{position: absolute; left: 87%; top: 40%; width: 0; height: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 30px solid #A2A2A2;}

/*---------------------------------------------- policy.jsp*/
.page.policy a.menu-btn {margin:0px;}
.page.policy .briefIntroduction, .page.policy .imageRotator {display:none}
@media screen and (min-width: 990px) {
	.page.policy .briefIntroduction {display:inline-block; line-height:22px; margin-left:30px; width:40%;}
	.page.policy .imageRotator {display:inline-block; width: 50%; height: 320px; position: relative; text-align: left; vertical-align:middle;}
}

/*---------------------------------------------- reservation_record.jsp*/
@media screen and (min-width: 990px) {
	.page.reservationRecord .table-record-reservation .status {float:none;}
	.page.reservationRecord .rowTemplate {display:none;}
}
.page.reservationRecord .pop-overlay{display:none; position: fixed; z-index: 100; top: 0px; left: 0px; height: 100%; width: 100%; background-color: #000; opacity: 0.5;}
.page.reservationRecord .pop-res-check{
	background: white;
	width: 680px;
	position: fixed;
	z-index: 102;
	color: #000;
	display: none;
	border: medium none;
	text-align: left;
	top: calc(0% + 50px);
	left: calc(50% - 340px);
}

@media screen and (min-width: 990px) {
	.page.reservationRecord .table-record-use .status {width:10%; float:none;}
}
/*---------------------------------------------- reserve_success.jsp*/
.page.reserveSuccess .res-cousers{display:none;}

/*---------------------------------------------- select_resv_area.jsp*/
.page.selectResvArea select[size] option:checked {
	background-color: #F90;/*for IE*/ 
	box-shadow: 0 0 10px 100px #F90 inset;
}

/*---------------------------------------------- select_resv_date.jsp*/
.page.selectResvDate .num_yes:hover, .num_right_yes:hover, .num_yes:hover *, .num_right_yes:hover *{color:#F60;}
/*.page.selectResvDate .num_yes:hover, .num_right_yes:hover{color:#F60;}*/
.page.selectResvDate div.num_ok, .page.selectResvDate div.num_right_ok{color:white;}

/*---------------------------------------------- select_resv_seat.jsp*/
.page.selectResvSeat .pop-overlay{display:none; position: fixed; z-index: 100; top: 0px; left: 0px; height: 100%; width: 100%; background-color: #000; opacity: 0.5;}
.page.selectResvSeat .pop-res-check{
	background: white;
	width: 680px;
	position: fixed;
	z-index: 102;
	color: #000;
	display: none;
	border: medium none;
	text-align: left;
	top: calc(50% - 350px);
	left: calc(50% - 340px);
}
.page.selectResvSeat .inquireSeatNum > div{display:inline-block;}
.page.selectResvSeat .maxUseTime{color:red;}

/*---------------------------------------------- usage_record.jsp*/
.page.usageRecord .rowTemplate {display:none;}
@media screen and (min-width: 990px) {
	.page.usageRecord .table-record-use .status {width:10%; float:none;}
}
/*-------- popup menu  --------*/
.page.usageRecord .pop-overlay{display:none; position: fixed; z-index: 100; top: 0px; left: 0px; height: 100%; width: 100%; background-color: #000; opacity: 0.5;}
.page.usageRecord .pop-res-check{
	background: white;
	width: 680px;
	position: fixed;
	z-index: 102;
	color: #000;
	display: none;
	border: medium none;
	text-align: left;
	top: calc(50% - 350px);
	left: calc(50% - 340px);
}

/*---------------------------------------------- violation_record.jsp*/
.page.violationRecord .rowTemplate {display:none;}


@media screen and (max-width: 990px) {
	#pop-login{
		display: none;
	}
	.page.login .mobile-version{
		background-color:rgba(0,0,0,0.5);
		padding: 0;
    margin: 0;
		width: 100%;
		height: 100vh;
	}
	.page.login .mobile-version .main-content{
		margin: auto;
		background-color: #fff;
	}
	.page.login .mobile-version .main-content .table-login{
		width: 300px;
    margin: 15px;
	}
}

@media screen and (max-width: 376px) {
	.page.login .mobile-version .main-content .table-login{
		width: 100%;
    	margin: 15px;
	}
}