@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:5px; height:5px;}
::-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; padding-left:1.5em; position:relative;}
.alert.alert-danger {color:#eb1111;}

.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-oos {line-height:70px; font-size:2.6rem; font-family: 'Futura', "Microsoft JhengHei", Verdana, "Heiti TC", sans-serif; font-weight:bold; color:#fff; text-shadow:3px 3px 10px rgba(0,0,0,0.3);}
.login .login-box #logo {font-family:'Futura', "Microsoft JhengHei", Verdana, "Heiti TC", sans-serif; font-size:1.4rem; text-shadow:3px 3px 10px rgba(0,0,0,0.3); opacity:.6;}
.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-form {box-sizing:border-box; width:410px; background:#fff; border-radius:5px; box-shadow:3px 3px 10px rgba(0,0,0,0.3); padding:20px 30px; margin-top:40px;}
.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 .alert-area {clear:both; font-size:0.8em; display:block; width:100%; padding-top:15px;}
.login .alert-area.warning {color:#f75e6d;}
.login .alert-area.done {color:#009900;}
.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;}}