/* canvas scanner */
#reader{ margin: auto; width: calc(100% - 20px); max-width: 400px;}
.scanLoader{width:100%;text-align:center;padding-top:20px;position:absolute}
#btn-scan-qr {cursor: pointer;}
#qr-result { font-size: 1.2em; margin: 20px auto; padding: 20px; max-width: 700px; background-color: white;}
#qr-result form input{width:80%;margin:10px;height:40px;border-radius:2px;}
#qr-result form button{width:80%;margin:10px;height:40px;border-radius:5px; border:none;background-color:green;color:#fff}


/* registration login */
.registration, .login{margin-top: 3px; position:relative;font-size:19px;font-weight:bold;}
.registration h2, .login h2{font-size:18px;margin:20px 0;display:inline-block;text-align:left;width:100%}
.registration button.btn-01{margin-top:10px;margin-bottom:25px;text-transform: uppercase}
#loginBtn{background:transparent;border:none;margin-top:15px;color:#6283db;margin-bottom:20px;}
#loginBtn span{font-weight:bold;text-decoration:underline;}
.login button.btn-02{margin-top:25px;}
.login .separator{width:100%;display:inline-block;text-align:center;margin:20px 0}
.login .separator .line{width:30%;display:inline-block;border-bottom:1px solid #c3c3c3;height:1px;vertical-align:middle}
.login .separator .text{padding: 0 5%; color:#000;display:inline-block;vertical-align:middle}
body.LO.PAGE-customer .privacyPolicyBox .defaultCheck label {display: flex; align-items: center}

h6.not-registered_yet {font-size: 14px; font-weight: bold; color: #505050; margin: 0 0 20px}

.more-info {background: #e4e4e4;padding: 25px 0;margin: 55px 0 0;display: none}
.more-info h6{margin: 0 0 20px; font-size: 14px; color: #505050}
.more-info span{font-size: 10px; vertical-align: top}
.more-info .button-discover{}
.more-info .button-discover a{padding: 10px 0; background: #909090; width: 92%;margin: 0 4%;color: white;font-size: 14px;font-weight: normal; text-decoration: none; border-radius: 3px; border: 1px solid #757575;display: flex;justify-content: center;}
body.LO .more-info {display: block}

#recoverBtnBox{text-align:right}
#recoverBtn{font-size:10px;cursor:pointer;text-decoration:underline}
/*  recover */

#recoverForm button{max-width:150px;margin-top:0;float:right}


.content{margin-top: 3px; background: #f5f8ff;}
.homeBox{display:inline-block}

.homeBox .links {margin-top:20px;padding-bottom:40px}
.homeBox .links .linkBox {width:100%;height:120px;border-radius:30px;border:none;background-color:#fff;color:#6283db;display:inline-block;text-align:left;margin:20px 0 10px;box-sizing: border-box;}
.homeBox .links .linkBox .title {text-decoration:none;font-size:16px;display:inline-block;padding: 25px 10px 5px 15px;font-weight:900;width:50%;}
.homeBox .links .linkBox .title2{text-decoration:none;font-size:10px;width:70%;display:inline-block;padding: 10px 10px 5px 15px; cursor: pointer}

.goToRegistration{background:url('/global/img/btn5.png') no-repeat right top #fff; background-size:contain;}
.goToScan{background:url('/global/img/btn7.png') no-repeat right top #fff; background-size:contain;}
.goToManual{background:url('/global/img/btn6.png') no-repeat right top #fff; background-size:contain;}
.links .separator{height:1px;display:inline-block;border-top:1px solid #c6cfe7;margin:10px auto;min-width: 40%; max-width: 40%;}
.userBox{width:100%;text-align:center;margin:30px 0 0;display: flex;align-items: center;justify-content: center}
.userBox .badge{display:inline-block;width:36px;height:45px;background:url('/global/img/badge.png') no-repeat center center;background-size:cover;vertical-align:top}
.userBox .user{display:inline-block;font-size:20px;font-weight:bold;vertical-align:top;margin-left:5px;max-width:calc(100% - 56px);text-align:left;}
.presenceBox{margin:30px 0 0;width:100%;display:inline-block;background: rgb(80,192,93);background: rgb(80,192,93);background: linear-gradient(45deg, rgba(80,192,93,1) 0%, rgba(80,192,93,1) 50%, rgba(49,165,63,1) 51%, rgba(49,165,63,1) 100%);}
.presenceBox .presence{border:1px solid #9bacd9;border-radius:4px;width: auto;margin: 30px}
.presenceBox .presenceHead{background:#bed4f7;color:#365097;padding:10px;font-size:16px;}
.presenceBox .presenceHead .parent_name{font-weight:bold; text-transform: uppercase;font-size: 22px}
.presenceBox .presenceHead .qrcode_name{font-weight:bold; font-size: 13px;text-transform: capitalize;}
.presenceBox .presenceHead .host_qrcodeBox{font-size:11px;margin-top:3px;}
.presenceBox .presenceBody{color:#6283db;padding:20px 40px 30px;font-size:16px;background: #fff;box-sizing: border-box}
.presenceBox .presenceBody #presenceExpire {margin: 20px 0 0}
.presenceBox .presenceBody .attributes{margin: 20px 0 0;}
.presenceBox .presenceBody .attribute{margin: 0;display: flex;justify-content: center}
.presenceBox .presenceBody .attribute.added-users{display: block}
.presenceBox .presenceBody .attribute.added-users .info{margin: 10px 0 0; display: flex;flex-wrap: wrap;justify-content: center;}
.presenceBox .presenceBody .attribute.added-users .label{display: inline-block;}
.presenceBox .presenceBody .attribute.added-users .value{display: inline-block;}
.presenceBox .presenceBody .attribute.added-users .user{border: 1px solid #6283db; background: white; padding: 3px 7px;display: inline;margin: 5px 10px 5px 0}
.presenceBox .presenceBody .attribute .label{margin: 0 2px 0 0}
.presenceBox .presenceBody .attribute .value{font-weight: bold}
.presenceBox .presenceBody .attribute .info{margin: 10px 0 0}
.qrManualBox label{margin-top:30px;font-size:15px;}
.qrManualBox .submit{margin-top:10px;}
.qrResult{background:#fff;color:#6283db;padding:10px;font-size:16px;display:inline-block;width:70%;max-width:400px;margin-top:20px;}
.qrResult .host_name{font-weight:bold;margin-bottom:5px;}
.qrcodeScanBox{display:inline-block;padding-top:20px}
.qrcodeScanBox .browserNotSupport{display:inline-block;padding-bottom:20px}
.qrcodeScanBox .browserNotSupport .text1{display:inline-block;font-size:18px;padding-bottom:20px}
.qrcodeScanBox .browserNotSupport .text2 button{font-weight: bold;cursor:pointer;display:inline-block;text-decoration:underline;font-size:16px;padding-bottom:20px;background:transparent;border:none;color:#6283db;}

.qrcodeScanBox .scanProblem{display:inline-block;padding-bottom:20px;}
.qrcodeScanBox .scanProblem .text1{display:inline-block;font-size:16px;padding-bottom:5px}
.qrcodeScanBox .scanProblem .text2 button{display:inline-block;text-decoration:underline;font-size:16px;padding-bottom:20px;background:transparent;border:none;color:#6283db;}

.qrcodeScanBox .qrscan{display:inline-block;position:relative;padding-bottom:20px;width:100%;min-height:300px;}
.qrcodeScanBox .qrscan .title{display:inline-block;font-size:18px;padding-bottom:10px;font-weight:bold;width:100%}

.phoneConfirmBox .phoneConfirmInner{text-align:left;margin-top:20px;width:100%;padding:10px;display:inline-block;min-height:200px;box-sizing: border-box}
.phoneConfirmBox .phoneConfirmInner h2{font-size:16px;width:100%;font-weight: bold;}
.phoneConfirmBox .phoneConfirmInner .resendOkBox{font-size:13px;vertical-align:middle;line-height:30px;width:100%;color:#39ad27;margin-bottom:20px;}
.phoneConfirmBox .phoneConfirmInner .resendOkBox .checkOkIcon{margin-right:5px;width:30px;height:30px;display:inline-block;background:url('/global/img/checkOk.png') no-repeat left top;background-size: cover;}
.phoneConfirmBox .phoneConfirmInner .resendOkBox span{vertical-align:middle;}
.phoneConfirmBox .phoneConfirmInner .changePhoneCode{font-weight: bold;width:100%;color:#365097;cursor:pointer;font-size:13px;margin-bottom:30px;text-decoration: underline}
.phoneConfirmBox .phoneConfirmInner .buttonBox{width:100%;margin-bottom:20px;}
.phoneConfirmBox .phoneConfirmInner .buttonBox button{width:45%;display:inline-block;margin:0;height:30px;line-height:30px;font-size:15px;}
.phoneConfirmBox .phoneConfirmInner .buttonBox button.resendPhoneCode{background:#fff;color:#365097; padding: 10px; height: auto;line-height: normal;font-weight: bold}
.phoneConfirmBox .phoneConfirmInner .serverError{ margin-bottom: 10px; margin-top: -9px;background:red;color:#fff;padding:5px;width:calc(100% - 5px)}

#customer_country_phone_prefix, #recover_country_phone_prefix,#new_country_phone_prefix{width:25%;margin-right:2%;}
#customer_phone_number, #recover_phone_number, #new_phone_number{width:72%;width:calc(73% - 8px)}

.qrcodeParentName {font-size: 18px; margin: 0 0 10px}
#insertPresenceForm button.btn-01 {margin: 20px 0 0}
.attributesInput>div{display:inline-block;float:left;margin:0 15px 0 0}
.attributesInput input[type=radio]{display:inline-block;float:left;width:auto;height:12px;margin:0 5px 15px 0}
.attributesInput button{float:left;margin:5px 0 10px;background: white; border: 1px solid #6283db; color: #6283db; font-weight: bold;padding: 5px 10px;}
.qrcodeParentName {padding: 15px 0 0; font-size: 18px}
.qrcodeName { font-size: 14px; width: 90%;margin: 30px auto;border: 2px solid #eeeeee;border-radius: 3px;padding: 10px 0;font-weight: bold;}
.attribute label{text-transform: capitalize}
.attributesInput .users{width:100%;}
.attributesInput .users .user{width:100%;display:flex; justify-content: space-between;margin:10px 0 0}
.attributesInput .users .user div{width:48%}


.PAGE-host-index label{font-weight:700;font-size:14px}
.PAGE-customer label,.PAGE-myInsert label, .PAGE-customer-checkin label{font-weight:700;font-size:14px;position: relative;display: inline-block}
.presenceBox .presenceBody .attribute.added-users .user {border: none}
.userBox .user{display:inline-block;font-size:17px;font-weight:bold;vertical-align:top;margin-left:10px;max-width:calc(100% - 56px);text-align:left;}
#phoneConfirmForm {padding: 0 10px}
.phoneConfirmBox .phoneConfirmInner .buttonBox{width:100%;margin:20px 0;display: flex;justify-content: space-between}
.phoneConfirmBox .phoneConfirmInner .buttonBox button{width:48%;font-size:14px;text-transform: uppercase;height: auto;line-height: normal;padding: 10px;}
#qrcodeInfoBox h5 {font-size: 14px;font-weight: normal;margin: 0 0 30px}
#qrcodeInfoBox {text-align: left}
#insertPresenceForm button.btn-01 {margin: 20px 0 40px}
.attributesInput>div {font-size: 14px}
.attributesInput input[type=radio] {height: 16px}
.presenceBox .presenceHead .parent_name {font-size: 16px; font-weight: 900}
.userBox .badge {width: 25px; height: 32px}
.registration h2, .login h2 {color: black; font-size: 16px}
#recoverByEmailForm label, #recoverByPhoneForm label{color: black; font-size: 14px;font-weight: normal; margin: 0 0 30px}
#recoverForm button {width: 100%; max-width: 100%; margin: 20px 0 0}
#recoverByPhoneForm button {margin: 20px 0 40px}
.PAGE-customer-index .content {min-height: 75vh; display: table; width: 100%}
.PAGE-customer-index .privacyPolicyBox .defaultCheck{margin: 10px 0}
.PAGE-customer-index .privacyPolicyBox .defaultCheck input{width: 5%; margin: 0 5px 0 0; float: left}
.PAGE-customer-index .privacyPolicyBox .defaultCheck span{color: #85868c; font-size: 14px; font-weight: normal; width: 90%; float: left;}
.PAGE-customer-index .privacyPolicyBox .defaultCheck span a{color: #6283db; font-weight: bold;}
.PAGE-customer-index .privacyPolicyBox .customCheck{margin: 10px 0}
.PAGE-customer-index .privacyPolicyBox .customCheck input{width: 5%; margin: 0 5px 0 0; float: left}
.PAGE-customer-index .privacyPolicyBox .customCheck span{color: #85868c; font-size: 14px; font-weight: normal; width: 90%; float: left}
.PAGE-customer-index .privacyPolicyBox .customCheck span a{color: #6283db; font-weight: bold;}

.PAGE-customer-info-terms .terms {margin: 0 auto; width: 90%;}
.PAGE-customer-info-terms .terms h1{text-align: left; margin: 2px; padding: 30px 0 0; font-size: 18px; font-weight: bold}
.PAGE-customer-info-terms .terms h3{text-align: left; font-weight: 700; color: black}
.PAGE-customer-info-terms .terms h4{text-align: left; font-size: 14px; color: black}
.PAGE-customer-info-terms .terms h5{text-align: left; font-style: italic; font-size: 13px; font-weight: normal}
.PAGE-customer-info-terms .terms p{text-align: left; font-size: 14px}
.PAGE-customer-info-terms .terms h4 {margin: 30px 0 -5px}

.PAGE-customer-info-privacy .privacy {margin: 0 auto; width: 90%;}
.PAGE-customer-info-privacy .privacy h1{text-align: left; margin: 2px; padding: 30px 0 0; font-size: 18px; font-weight: bold}
.PAGE-customer-info-privacy .privacy h3{text-align: left; font-weight: 700; font-size: 14px; color: black}
.PAGE-customer-info-privacy .privacy h4{text-align: left; font-size: 14px; color: black}
.PAGE-customer-info-privacy .privacy h5{text-align: left; font-style: italic; font-size: 13px; font-weight: normal}
.PAGE-customer-info-privacy .privacy p{text-align: left; line-height: 1.4; font-size: 14px}
.PAGE-customer-info-privacy  .privacy h3 {margin: 30px 0 -5px}

.PAGE-customer h1,.PAGE-myInsert h1{text-align:left;margin:0 0 30px 4%}
.PAGE-adminQrCode .btn-01,.PAGE-adminQrCode .btn-02{padding:10px 15px; margin: 0 0 20px}
.qrcodeScanBox .browserNotSupport .text2 h3 {font-size: 16px;font-weight: normal; margin: 10px 0 5px}
.sendInfo {margin: 40px 0 0;font-size: 14px;}
#qrcodeInfoBox h3 {font-size: 16px;font-weight: bold;margin: 30px 0;}

.PAGE-customer-checkin #attributesList .attributesInput {width: 100%; display: table}
.PAGE-customer-checkin #attributesList select {margin: 0 0 12px}
.PAGE-customer-checkin label {width: auto; float: left}
.PAGE-customer-checkin label .info {display: block;width: 16px;height: 16px;position: absolute;top: 0; right: -25px;background-image: url("/global/img/info.png"); background-size: contain}

#infoPopWrapper {width: 100%; height: 100%;position: fixed;top: 0;bottom: 0;left: 0;right: 0; background: rgba(0,0,0,0.65)}
#infoPopWrapper .infoPopInner{position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);padding: 30px; box-sizing: border-box; width: 80%; background: white}
#infoPopWrapper .infoPopInner .infoPopTxt{font-size: 15px; line-height: 1.3; text-align: center; margin: 0 0 30px;}
#infoPopWrapper .infoPopInner .infoPopTxt span{font-weight: bold;}
#infoPopWrapper .infoPopInner .infoPopBtn{text-transform: uppercase}
#qrManual{text-transform: uppercase}


#contactForm h2 {margin: 2px 0 0; padding: 20px 0 0; text-align: left; font-size: 17px}
#contactForm .subtitle {text-align: left; font-size: 16px}
#contactForm textarea {width: 100%; min-height: 120px;box-sizing: border-box;border-color: #bed4f7;margin: 0 0 -3px}
#contactForm .infoPrivacy {text-align: left; font-size: 14px}
#contactForm .infoPrivacy a{font-weight: bold}
#contactForm #contact-privacy {margin: 30px 0 4px; display: flex; align-items: center}
#contactForm #contact-privacy input{height: auto; margin: 0 5px 0 0;width: auto;display: inline-block}
#contactForm #contact-privacy label{width: 90%; display: inline-block; font-weight: normal;margin: 0}
#contactForm #contact-privacy label a{font-weight: bold}
#contactForm button{margin: 30px 0 0}


@media screen and (min-width: 800px) {
    .PAGE-customer-info-terms .terms {margin: 0 auto; width: 80%;max-width: 1180px}
    .PAGE-customer-info-terms .terms h1{text-align: left; margin: 2px; font-size: 32px; padding: 50px 0 0; font-weight: bold}
    .PAGE-customer-info-privacy .privacy {margin: 0 auto; width: 80%;max-width: 1180px}
    .PAGE-customer-info-privacy .privacy h1{text-align: left; margin: 2px; font-size: 32px; padding: 50px 0 0}
    .PAGE-customer-index .privacyPolicyBox .customCheck input{width: 20px; margin: 0 10px 0 0; float: left}
    .PAGE-customer-index .privacyPolicyBox .customCheck span{float: left; line-height: 35px}
    .PAGE-customer-index .privacyPolicyBox .defaultCheck input{width: 20px; margin: 0 10px 0 0; float: left}
    .PAGE-customer-index .privacyPolicyBox .defaultCheck span{float: left; line-height: 35px}
    .more-info {max-width: 850px; margin: 55px auto 0}
}