@charset "utf-8";
/*20240312*/

@font-face {
font-family: 'Bellota Text';
src: url(/css/MX2/font/BellotaText.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*{font-family: "Bellota Text","微軟正黑體";box-sizing: border-box;}

:not(input[type="text"]){user-select: none;}

::placeholder{color:rgb(255 255 255 / 50%);}
:focus{outline:none;}

html,
body{height:100%;margin:0;padding:0;}

body{opacity: 0;animation: fadeIn .3s both;}

footer{padding-bottom:calc(env(safe-area-inset-bottom) - 20px);}

.login{max-width: 100%;min-height: 620px;}

#logo{position: relative;padding: 10px;}

.loginBox h1{font-size: 40px;}

.loginBox h1,
.loginBox h3{font-weight: 300;color:#fff;padding: 0 20px;}

.loginBox h1{margin: 10px 0 10px 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.loginBox h3{letter-spacing: 1px;margin: 10px 0 10px 0;}

/*
#qrcode.showbox > div{min-width:inherit;padding: 10px;}
#qrcode.showbox img{width:140px;height:140px;display:block;}
#qrcode.showbox > div{min-width:inherit;padding: 10px;}
#qrcode.showbox img{width:140px;height:140px;display:block;}
*/

#qrcodeImg{position:absolute;width: 0;height:100%;top:0;margin: 0;padding: 0;background-color: var(--color);transition: .3s;background-repeat: no-repeat;background-position: center;}
#qrcodeImg.show{width:300px;}
#qrcodeImg.loading{background-image: url(/css/MX2/images/loading.svg);background-size: 100px;}

@media (max-width:767px){
 span#qrcode{top:25px}
}
span#qrcode{display:block;position: absolute;right: 8px;top: 8px;cursor: pointer;padding:10px;background: rgba(255,255,255,.5);border-radius: 5px;width: 100px;}
span#qrcode:before{content:"";width: 60px;height: 60px;display:block;background: url(/css/MX2/images/qrcode.svg)center/115% no-repeat #fff;border: 3px solid #333;margin: 0 auto;animation: rubberBand 2s 2s infinite;border-radius: 5px;}
span#qrcode:after{content:attr(title);font-size: 12px;font-family:arial;font-weight:bold;margin: 5px auto 0;display: block;text-align: center;}

span#qrcode.change:before{background: url(/css/MX2/images/list.svg)center/90% no-repeat #fff;}


@keyframes fadein {
    from {opacity: 0;}
    100% {opacity: 1;}
}


@keyframes rubberBand {
    0% {transform: scaleX(1)}
    5% {transform: scale3d(1.25,.75,1)}
    10% {transform: scale3d(.75,1.25,1)}
    15% {transform: scale3d(1.15,.85,1)}
    20% {transform: scale3d(.95,1.05,1)}
    25% {transform: scale3d(1.05,.95,1)}
    30% {transform: scaleX(1)}
    100%{transform: scaleX(1)}
}

[data-type="front"][data-locale="TW"] .loginBox h3:before{content:"系統前台"}
[data-type="front"][data-locale="CN"] .loginBox h3:before{content:"系统前台"}
[data-type="front"][data-locale="US"] .loginBox h3:before{content:"front desk"}
[data-type="front"][data-locale="VN"] .loginBox h3:before{content:"Hệ thống quầy lễ tân"}

[data-type="back"][data-locale="TW"] .loginBox h3:before{content:"系統後台"}
[data-type="back"][data-locale="CN"] .loginBox h3:before{content:"系统后台"}
[data-type="back"][data-locale="US"] .loginBox h3:before{content:"back desk"}
[data-type="back"][data-locale="VN"] .loginBox h3:before{content:"Hệ thống phụ trợ"}

[data-type="tool"][data-locale="TW"] .loginBox h3:before{content:"登入平台"}
[data-type="tool"][data-locale="CN"] .loginBox h3:before{content:"登入平台"}
[data-type="tool"][data-locale="US"] .loginBox h3:before{content:"login"}
[data-type="tool"][data-locale="VN"] .loginBox h3:before{content:"Đăng nhập"}

.loginBox{display: flex;justify-content: center;align-items: center;width: 100%;}
.loginBox{height: calc(100% - 90px - env(safe-area-inset-bottom));}
[data-agent="iphone"] .loginBox{height: calc(100% - 80px - env(safe-area-inset-bottom));}

.loginBox > div{padding: 12px;background:#fff;border-radius:8px;box-shadow: 5px 5px 10px rgb(0 0 0 / 40%);max-width: calc(100% - 40px);width: 1000px;}
.loginBox > div > div{display: flex;width: 100%;flex-wrap: wrap;}
.loginBox form{position: relative;width: 300px;background:var(--color);}

.loginBox form > div{margin: 15px 0 0 0;padding: 8px 20px;background: rgb(255,255,255,.2);}

.loginBox form > div:before{content:"";display:inline-block;width: 28px;height: 28px;margin-right:5px;vertical-align: middle;}
.loginBox form > .id:before{background:url(/css/MX2/images/id.svg)center/100% auto;}
.loginBox form > .pw:before{background:url(/css/MX2/images/password.svg)center/100% auto;}
.loginBox form > .company:before{background:url(/css/MX2/images/db.svg)center/100% auto;}
.loginBox form > .cpnyid:before{background:url(/css/MX2/images/company.svg)center/100% auto;}
.loginBox form > .locale:before{background:url(/css/MX2/images/locale.svg)center/100% auto;}


.loginBox form > span{display:block;background: rgb(0,0,0,.2);position: absolute;width: 100%;bottom: 0;margin: 15px 0 0 0;padding: 10px;}

.loginBox form input,
.loginBox form select{display:inline-block;width: calc(100% - 40px);height: 28px;background: none;border: none;color: #fff;font-size: 20px;padding: 0 10px;border-radius: 5px;vertical-align: middle;}



.loginBox form select option{background:#888;}

[data-agent="iphone"] select,
[data-agent="mac"] select{-webkit-appearance:none;}

.loginBox button{font-size: 20px;background:none;border:none;color:#fff;cursor: pointer;opacity: .8;}
.loginBox button:hover{opacity:1;}

.loginBox #forget:after,
.loginBox #submit:after{content:"";display:inline-block;width: 25px;height: 25px;vertical-align: bottom;}

.loginBox #forget:before{background:url(/css/MX2/images/forget.svg)center/100% auto;margin-right:5px;}
.loginBox #submit:after{background:url(/css/MX2/images/submit.svg)center/100% auto;margin-left:5px;}

.loginBox #photo{height: 450px;position: relative;width: calc(100% - 300px);}
.loginBox #photo:before{content:"";display:block;position:absolute;width: 100%;bottom: 0;max-width: 100%;}

.loginBox #submit{float:right}

footer{text-align:center;font-size: 14px;font-weight:bold;letter-spacing: 1px;color: #666;}

.login #logo:before{content:"";display:block;width: 240px;height: 40px;/* position:absolute; */background: url(/css/MX2/images/logo.png) center/100% auto no-repeat;top: 0;}

[data-type="smaker"].login #logo:before{background: url(/css/MX2/images/slogo.png) center/100% auto no-repeat;}

.index [href*="login.css"] ~ #logo{width:286px;height:50px;position:absolute;background: url(/css/MX2/images/logo.png) center/90% auto no-repeat;margin: 0 auto;position: relative;}
.index [href*="login.css"] ~ #logo:before{content:none;}
.index [href*="login.css"] ~ section > div{padding: 0;border-radius:8px;box-shadow: none;max-width: inherit;width: auto;}
.index [href*="login.css"] ~ section{display: block;margin-top:10px}
.index [href*="login.css"] ~ section input{width:100%;margin:5px 0;height: 40px!important;font-size:16px}
.index [href*="login.css"] ~ section button{margin:5px auto 0;display: block;font-size:16px;width:100%;height: 40px!important;padding:0;float: inherit!important;}
.index [href*="login.css"] ~ section form > span{display:block;position: relative;margin: 0;padding: 0;background: none;}

.index [href*="login.css"] ~ section #photo,
.index [href*="login.css"] ~ section button + span,
.index [href*="login.css"] ~ section h1,
.index [href*="login.css"] ~ section h3,
.index [href*="login.css"] ~ footer{display:none;}

.index [href*="login.css"] ~ .showbox .close{box-shadow:none;}

.index [href*="login.css"] ~ section form > div:before{content:none;}
.index [href*="login.css"] ~ section form > div{margin: 0;padding: 0;}
.index [href*="login.css"] ~ section #submit{color:#333;background: #eee;border: 1px solid #ccc;border-radius: 5px;}
.index [href*="login.css"] ~ section #submit:after{content:none;}

@media (max-width:900px){
    .login{min-height: 660px;}    
    .login .loginBox > div{width: 368px;}
    .login .loginBox #photo{width: 100%;height: 207px;margin-top: -20px;}
    .login .loginBox #photo:before{width:100%;height: 100%!important;}
    .login .loginBox form{width:100%;}
    .login .loginBox h1{font-size: 34px;}
    .login .loginBox h3{font-size: 16px;text-align: right;}
    .login .loginBox form > span{position:relative;text-align: right;}
    .login .loginBox #submit{float:inherit;}


    section form > div:before{/* height: 24px; *//* width: 24px; */}
    section form > div{padding: 5px 20px;}
    footer{font-size:12px;line-height: 30px;}
}

.none{display:none!important;}

/*showbox*/
.showbox{position: fixed;display: flex!important;justify-content: center;align-items: center;left: 0;top: 0;width: 100%!important;height: 100%!important;background-color: rgba(0,0,0,.5);z-index: 10000;animation: fadeIn .5s both;}
.showbox > div{margin: 0;position: relative;background: #fff;padding: 20px 20px;box-shadow: 0 0 10px #333;border-radius: 10px;z-index: 9997;animation: popZoomIn .3s;min-width: 300px;max-width: calc(100vw - 80px);max-height: calc(100vh - 80px);}
.showbox .content{max-height: calc(100vh - 80px);overflow: auto;}
.showbox .content::-webkit-scrollbar{width:0;}

.showbox > div .close{cursor: pointer;display: block;position: absolute;top: -10px;right: -10px;border-radius: 50%;background: #ddd;border: 3px solid #fff;box-shadow: 0 0 10px rgb(0 0 0 / 76%);}
.showbox > div .close:before{content: "";display: block;width: 24px;height: 24px;opacity: .4;z-index: 9997;background: url(/css/MX2/images/del.svg) center / 90% no-repeat;filter: invert(1);}
.showbox > div .close:hover:before{opacity: .5;cursor:pointer;}
.showbox > div > span + div{max-height: 500px;overflow: auto;}
.showbox > span{width: 100%;height: 100%;display: block;position: fixed;top: 0;left: 0;}

.showbox .center + h2{text-align:center;margin: 0 0 10px;}


@media (max-width:600px){
 .showbox > div{padding: 10px 10px;width: calc(100% - 50px);}
}


/*sa-icon*/
.sa-icon {width: 80px;height: 80px;border: 4px solid gray;border-radius: 50%;margin: 20px auto;padding: 0;position: relative;box-sizing: content-box;}

/*error*/
.sa-icon.error{border-color: #F27474;animation: animateIcon 0.5s;}
.sa-icon.error > span{position: relative;display: block;animation: animateXMark 0.5s;}

.sa-icon.error > span:before,
.sa-icon.error > span:after{content:"";display:block;position: absolute;height: 5px;width: 47px;background: #F27474;top: 37px;border-radius: 2px;}

.sa-icon.error > span:before{transform: rotate(45deg);left: 17px;}
.sa-icon.error > span:after{transform: rotate(-45deg);right: 17px;}

/*success*/
.sa-icon.success{border-color: #A5DC86;animation: animateIcon 0.5s;}
.sa-icon.success > span{position: relative;display: block;animation: animateXMark 0.5s;}

.sa-icon.success > span:before,
.sa-icon.success > span:after {content: "";display:block;border-radius: 2px;position: absolute;background:#A5DC86;height: 5px;}

.sa-icon.success > span:before{width: 25px;left: 14px;top: 46px;transform: rotate(45deg);}
.sa-icon.success > span:after{width: 47px;right: 8px;top: 38px;transform: rotate(-45deg);}

.success ~ h2{letter-spacing: 2px;}

/*warning*/
.sa-icon.warning{border-color: #F8BB86;animation: animateIcon 0.5s;}

.sa-icon.warning > span:before,
.sa-icon.warning > span:after {content: "";display:block;border-radius: 2px;position: absolute;background:#F8BB86;height: 5px;}

.sa-icon.warning > span:before,
.sa-icon.warning > span:after{content:"";position: absolute;background-color: #F8BB86;display:block;}

.sa-icon.warning > span:before{width: 5px;height: 47px;left: 50%;top: 10px;border-radius: 2px;margin-left: -2px;}
.sa-icon.warning > span:after{width: 7px;height: 7px;border-radius: 50%;margin-left: -3px;left: 50%;bottom: 10px;}

@keyframes fadeIn {from {opacity: 0;}100% {opacity: 1;}}

@keyframes animateIcon {
    0% {transform: rotateX(100deg);opacity: 0;}
    100% { transform: rotateX(0deg);opacity: 1;}
}

@keyframes animateXMark {
    0% {transform: scale(0.4);margin-top: 26px;opacity: 0; }
    50% {transform: scale(0.4);margin-top: 26px;opacity: 0; }
    80% {transform: scale(1.15);margin-top: -6px; }
    100% {transform: scale(1);margin-top: 0;opacity: 1; }
}