@charset "utf-8";
html, body {background: #fff; font-size:16px; color:#333; margin:0; padding:0; font-family: "Microsoft JhengHei", Verdana, "Heiti TC", sans-serif; height: 100%; overflow-x:hidden; position:relative;}
body {-ms-overflow-style: scrollbar !important;}/*fix ie scrollbar covering content*/
img {max-width:100%; max-height:100%;}
a, a:hover, a:focus {text-decoration:none;}
*:focus {outline:none !important; box-shadow:none;}
ul {margin:0; padding:0; list-style:none;}
button, select, option, textarea {font-family: "Microsoft JhengHei", Verdana, "Heiti TC", sans-serif;}
/*font*/
@font-face {
	font-family: 'Futura';
	src: url('../fonts/Futura-Light.eot');
	src: url('../fonts/Futura-Light.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Futura-Light.woff2') format('woff2'),
		url('../fonts/Futura-Light.woff') format('woff'),
		url('../fonts/Futura-Light.ttf') format('truetype'),
		url('../fonts/Futura-Light.svg#Futura-Light') format('svg');
	font-weight: 300;
	font-style: normal;
}

/*Scroll bar*/
::-webkit-scrollbar {width:10px; height:10px;}
::-webkit-scrollbar-track {background: #fff; -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);}
::-webkit-scrollbar-thumb {background: #ccc; -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);}
::-webkit-scrollbar-thumb:hover {background: #aaa;}
::-webkit-scrollbar-thumb:active {background: #888;-webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);}

/*buttons*/
.btn {font-size:0.95em; cursor:pointer;}
.btn:focus {box-shadow:none;}
.btn-orange {background:#f29722; border:1px solid #d78310; color:#fff;}
.btn-orange:hover, .btn-orange:focus {background:#d78310; box-shadow:none;}

/*alerts*/
.alert {clear:both; padding:.75rem;}
.alert.alert-success {color:#069710; position:relative;}
.alert.alert-danger, .no-permission {color:#eb1111;}
.alert .icon-alert {width:19px; height:19px; display:inline-block; vertical-align:top; margin-top:3px; margin-right:2px; background:url(../images/icon-alerts.png) left top no-repeat;}
.no-permission {position:absolute; top:50%; transform:translateY(-50%);}

.login #wrapper {position:absolute; top:0; z-index:1; width:100%; height:100%;}
.login #bg {position:fixed; overflow:hidden; width: calc(100% + 14px); height: calc(100% + 14px);}
.login #bg:after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.3);}
.login #bg svg {margin:-7px;}
/*.login #bg img {width:100%; height:100%; filter:blur(5px); margin:-7px; object-fit:cover; object-position:center bottom;}*/
.login .login-box {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.login .login-box #logo {line-height:70px; font-family:'Futura', "Microsoft JhengHei", Verdana, "Heiti TC", sans-serif; font-size:2.1em; text-shadow:3px 3px 10px rgba(0,0,0,0.3);}
.login .login-box #logo .logo-left, #logo .logo-right {display:inline-block; color:#fff; font-weight:bold; vertical-align:middle;}
.login .login-box #logo .logo-left {font-size:1.8em; padding-right:0.3em; border-right:0.04em solid #fff; line-height:1em;}
.login .login-box #logo .logo-right {font-size:0.75em; padding-left:0.4em; line-height:1.2em;}
.login .login-box #logo .logo-left img {margin-top:-20px;}

.login .login-form {box-sizing:border-box; width:410px; min-height:150px; background:#fff; border-radius:5px; box-shadow:3px 3px 10px rgba(0,0,0,0.3); padding:20px 30px; margin-top:40px; position:relative;}
.login .login-form form {width:100%;}
.login .login-form form .col-12 {padding-left:0; padding-right:0;}
.login .login-form form:after {content:'.'; clear:both; display:block; visibility:hidden; height:0;}
.login .text-label {color:#333;}
.login input {display:block; width:100%; height:35px; background:#dde7ea; border:none; border-radius:3px; box-shadow:none; transition: box-shadow linear 0.2s; font-size:1.2em; margin:10px 0 20px 0; color:#333;}
.login input:focus {box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.2);}
.login .forgot-password {color:#6e95c2; display:inline-block; font-size:0.8em;}
.login .forgot-password:hover {color:#3d6796;}
.login .btn {float:right; padding:5px 30px 7px 30px; transition:none; margin-bottom:1rem;}
.login .remarks {display:inline-block; font-size:0.75em; color:#888;}
.login .remarks .text-blue {color:#6d88ad; font-weight:bold;}
.login .powered-by {font-size:0.75em; color:#fff; margin:15px 0; text-align:right; text-shadow:2px 2px 8px rgba(0,0,0,0.3);}
.login .powered-by span {vertical-align:middle;}
.login .powered-by img {vertical-align:middle; width:40px; -webkit-filter: drop-shadow(2px 2px 8px rgba(0,0,0,0.3)); filter: drop-shadow(3px 3px 10px rgba(0,0,0,0.3));}
@media(max-width: 767px) {.login .login-box #logo {font-size:1.6em;} .login .login-box {width:90%;} .login .login-form {width:calc(100% - 60px);}}
@media(max-width: 320px) {.login .login-box #logo {font-size:1.4em;}}