.loader{display:inline-block;margin-top:100px;width:100%;text-align:center}
.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #6283db;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #6283db transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}











.logo{width:120px;background:url('/global/img/logo300.png') no-repeat left top;background-size:cover;height:28px;display:inline-block;margin-top:10px;cursor:pointer;}
.content {background: #f5f8ff}

/* canvas scanner */
#qr-canvas { margin: auto; width: calc(100% - 20px); max-width: 400px;}
#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, .admin, .PAGE-myQrCode h1, .PAGE-myPresences h1, .PAGE-myInsert h1  {margin: 0; position:relative;font-size:19px;font-weight:bold; text-align: center}
.registration h2, .login h2{font-size: 16px; font-weight: bold; margin:20px 0;display:inline-block;text-align:left;width:100%}
.registration button.btn-01{margin-top:25px;margin-bottom:25px}
#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 button.btn-01{font-size:17px;}
.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}


/* admin */
.admin button.logoutBtn{margin:0px;margin-right:4%;width:auto;position:absolute;top:-50px;font-size:12px;right:2px;color:#6283db;background:transparent;height:auto;padding:0px;display:inline-block;cursor:pointer;}
.admin .headerImg{background:url('/global/img/host_bg.png') no-repeat center top;background-size:cover;max-width:400px;height:150px;width:100%;display:inline-block}
.admin .hostInfoBox{width:100%;display:inline-block;margin-top:20px;}
.admin .host_name{width:100%;display:inline-block;margin-bottom:15px;font-size:20px;font-weight:bold}
.admin .hostCreatedAtBox , .admin .currentPresencesBox{vertical-align:bottom;font-weight:normal;width:100%;display:inline-block;margin-bottom:3px;font-size:13px;}
.admin .currentPresencesBox {font-weight: bold;font-size:15px;}
.admin input{width:80%;margin:10px;height:40px;border-radius:2px;}
.admin button{width:80%;margin:10px;height:40px;border-radius:5px; border:none;background-color:green;color:#fff}
.admin .links, .PAGE-client .links {margin-top:20px;padding-bottom:40px}
.admin .links .linkBox, .PAGE-client .links .linkBox{width:100%;margin:10px 0px;height:120px;border-radius:30px;border:none;background-color:#fff;color:#6283db;display:inline-block;text-align:left;}
.admin .links .linkBox.link-qrcode{background:url('/global/img/bt1.png') no-repeat right top #fff; background-size:contain;}
.admin .links .linkBox.link-insert{background:url('/global/img/bt2.png') no-repeat right top #fff; background-size:contain;}
.admin .links .linkBox.link-qrpage{background:url('/global/img/bt3.png') no-repeat right top #fff; background-size:contain;}
.admin .links .linkBox.link-presences{background:url('/global/img/bt4.png') no-repeat right top #fff; background-size:contain;}
.admin .links .linkBox a.title, .PAGE-client .links .linkBox .title {text-decoration:none;font-size:16px;font-weight:bold;width:55%;display:inline-block;padding: 25px 10px 5px 15px}
.admin .links .linkBox a.title2, .PAGE-client .links .linkBox .title2{text-decoration:none;font-size:10px;width:70%;display:inline-block;padding: 10px 10px 5px 15px; font-weight: normal}
.PAGE-myInsert #customer_country_phone_prefix { width: 25%; margin-right: 3%;}
.PAGE-myInsert #customer_phone_number { width: 70%;}

.PAGE-client .header .back{display:none}
.header{text-align:center;position:relative}
.header .wrapper{position:relative;text-align:center;}
.PAGE-myQrCode .header .back, .PAGE-myQrPage .header .back, .PAGE-myPresences .header .back, .PAGE-myInsert .header .back, .PAGE-client.back .header .back{left:0px;top:17px;color:#6283db;position:absolute;text-decoration:none;font-size:12px;display:block}
.PAGE-myQrCode h1, .PAGE-myQrPage h1{width:100%;padding:20px 0;font-size:16px;font-weight:bold;margin-bottom:0px;}
.PAGE-myQrCode .qrCodeBox, .PAGE-myQrPage .qrCodeBox{width:100%;background:#fff;padding:0}
.PAGE-myQrCode .qrCodeBox .host_name, .PAGE-myQrPage .qrCodeBox .host_name{width:100%;font-size:20px;margin-bottom:8px;margin-top:0px;}
.PAGE-myQrPage .qrCodeBox .host_name {padding: 20px 0 0}
.PAGE-myQrCode #qrCode img, .PAGE-myQrPage #qrCode img{margin: auto;width:200px;height:200px}
.PAGE-myQrCode .qrcode_string, .PAGE-myQrPage .qrcode_string{display:inline-block;width:100%;font-size:15px;}
.PAGE-myQrCode .print, .PAGE-myQrPage .print{margin: 25px 0 40px 0}
.PAGE-myQrCode .qrCodeBox {display: block}
.PAGE-myQrPage .steps{max-width:500px;display:inline-block}
.PAGE-myQrPage .steps .step{width:100%;border-radius:50px;height:50px;overflow:hidden;display:inline-block;position:relative;-webkit-box-shadow: 3px 3px 16px -9px rgba(0,0,0,0.75);-moz-box-shadow: 3px 3px 16px -9px rgba(0,0,0,0.75);box-shadow: 3px 3px 16px -9px rgba(0,0,0,0.75);margin:10px 0;}
.PAGE-myQrPage .steps .step .num{width:50px;height:50px;top:0px;font-weight:bold;left:0px;background:#4ad136;position:absolute;line-height:50px;color:#fff;font-size:30px;text-align:center;border-radius:50px;}
.PAGE-myQrPage .steps .step .text{margin-left:60px;text-align:left;font-size:12px;margin-right:5px;line-height:30px;margin-top:10px}
.PAGE-myQrCode .newAccess{margin:10px 0 50px 0;max-width:300px}

.PAGE-myQrCodes #qrCodesBox {width:100%;font-size:20px;margin-bottom:8px;margin-top:50px;}
.PAGE-myQrCodes #qrCodesBox .qrcode{width:100%;text-align:center;font-size:20px;margin-bottom:25px;margin-top:50px;}
.PAGE-myQrCodes #qrCodesBox .qrcode *{display:inline-block}
.PAGE-myQrCodes #qrCodesBox .qrcode .name{width:100%;margin-bottom:0px;color:#000;font-weight: bolder;font-size:20px;}
.PAGE-myQrCodes #qrCodesBox .qrcode .id{width:100%;margin-bottom:20px;font-size:15px;}
.PAGE-myQrCodes #qrCodesBox .qrcode .logo{display:block;margin:auto;width:200px;height:48px;margin-top:20px;}
.PAGE-myQrCodes .print{margin-top:50px;margin-bottom:50px;}





.PAGE-myPresences h1{padding:20px 0;margin-bottom:0px}
.PAGE-myPresences label{margin-bottom:0px}
.PAGE-myPresences .presencesBox{padding-bottom:20px}
.PAGE-myPresences .filter input{width:100%;margin:10px 0;height:25px;border-radius:2px;text-align:center}
.PAGE-myPresences .drp-buttons button{width:80%;margin:5px;height:30px;border-radius:5px; border:none;background-color:green;color:#fff}
.PAGE-myPresences .drp-buttons button.cancelBtn{display:none}
.PAGE-myPresences .daterangepicker.show-calendar .drp-buttons{text-align:center}

.PAGE-myPresences #result{display:inline-block;width:100%;max-width:100%;overflow:auto;margin-top:30px;margin-bottom:10px;}
.PAGE-myPresences .downloadCSVBox{display:inline-block;width:100%;text-align:right;margin-bottom:6px;}
.PAGE-myPresences #downloadCSV{display:inline-block;background:none;border:none;color:#6183dc;text-decoration:underline;font-weight:bold;font-size: 14px; float: left; margin: 0 0 30px}
.PAGE-myPresences #result table{width:100%;border-color:#c4d8fd;border-collapse:collapse}
.PAGE-myPresences #list .col{ overflow: hidden;border:1px solid #c4d8fd;padding:2px;background:#fff;min-width:62px;max-height:30px;}
.PAGE-myPresences #list .row.head .col{background: #e7f1fd;}

.insertPresenceBox {position:relative;padding-bottom:50px;}
.insertPresenceBox .submit {margin-top:20px;}

/* my insert*/
.PAGE-myInsert h1 {margin-bottom:20px;padding-top:20px}
.PAGE-myInsert #presenceSuccess {padding-top:20px;background:#f5f8ff;padding-bottom:50px;min-height:90vh;width:100%;display:inline-block}
.PAGE-myInsert #presenceSuccess h2{padding-bottom:20px}
.PAGE-myInsert #presenceSuccess h2{padding-bottom:20px}
.PAGE-myInsert #presenceSuccess a{margin-bottom:20px}


.header{width:100%;height:50px;background:#f5f8ff;text-align:left;}
.header a.logo{width:120px;background:url('/global/img/logo300.png') no-repeat left top;background-size:cover;height:28px;display:inline-block;margin-top:10px;cursor:pointer;}


.PAGE-host-index .desktopInfo{display:none}
.PAGE-host-index #country_phone_prefix{width:25%;margin-right:2%;}

.little-wrapper{width:300px;margin:0 auto}
#selecQrcodeBox{width:100%;padding:15px 0; margin: 2px 0 0}
.attributesInput{padding:15px 0 0}
.attributesInput>div{display:inline-block;float:left;margin:0 15px 0 0}
.attributesInput button{float:left;margin:-10px 0 10px}
.attributesInput input[type=radio]{display:inline-block;float:left;width:auto;height:12px;margin: 0 10px 0 0}
.attributesInput .users{width:100%;display:table}
.attributesInput .users .user{width:100%;display:table;margin:10px 0 0}
.attributesInput .users .user div{width:100%}
.steps-wrapper{max-width:850px;width:100%;display:table;margin:0 auto 50px}
.qrCodeBox{display:none}
.qrCodeBox #qrCode{padding:20px 0}

.PAGE-myInsert .inputBox label{width: 92%; margin: 30px auto 0}
.PAGE-myInsert #old_customer_country_phone_prefix {width: 25%;margin-right: 5%}
.PAGE-myInsert #old_customer_phone_number {width: 70%;}
.PAGE-myQrCode #autofillForm button,
.PAGE-myInsert #autofillForm button {margin: 0 0 10px}

.PAGE-adminQrCode .btn-01{height: auto;line-height: normal;padding: 5px 15px;width: auto;}
.PAGE-adminQrCode .btn-02{height: auto;line-height: normal;padding: 5px 15px;width: auto;}
.PAGE-adminQrCode #qrcodeListBox, #qrcodeList, #newQrcodeForm, #attributesTemplate {margin: 0 auto;max-width: 600px;padding: 0 0 20px}
.PAGE-adminQrCode #qrcodeListBox {padding: 20px 0 0; margin: 2px auto 0}
#qrcodeList a {width: 100%;display: table;text-align: left;font-size: 20px;margin: 2px 0;padding: 15px;color: black;text-decoration: none;background: #fff;position: relative;}
#qrcodeList {margin: 20px 0;}
#qrcodeListBox span{font-size:16px;display:table}
#qrcodeListBox span.name{font-weight:700;font-size:18px;margin:0 0 5px}
#qrcodeListBox span.code{color:#878787}
#qrcodeListBox span.icon{position:absolute;right:20px;top:50%;transform:translateY(-50%);width:32px;height:34px;background-image:url(/global/img/print.png)}
#qrcodeListBox h2{font-size:22px;font-weight:400; margin: 2px 0; padding: 20px 0 0;display: none}
#qrcodeListBox button{padding:10px 15px;background:#6283db;border-radius:3px;color:#fff;font-size:19px;text-align:center;border:1px solid #4b6ecd}
#newQrcodeForm{width:300px; margin: 2px auto 0; padding: 30px 0 0 }
#newQrcodeForm .button-wrapper,.valueType-text .button-wrapper{display:flex;justify-content:space-between}
#newQrcodeForm label{font-size:16px;margin:0 0 10px}
#attributesTemplate h3{font-size:16px;margin: 2px 0 0;padding: 15px 0 0;}
#attributesTemplateList{width:300px;margin:0 auto;display:flex;flex-direction:column;align-items:flex-start}
#attributesTemplateList .element{margin:10px 0 0;width:100%}
#attributesTemplateList .element .label{text-transform:capitalize}
#attributesTemplateList .config{margin:30px 0 0}
#attributesTemplateList .config .description{text-align:left;font-weight:700;font-size:15px;text-transform:capitalize}
.valueType-text-input{margin:10px 0 0;text-transform:capitalize}
#attributesTemplateList .config .customLabel{text-align:left;font-size:15px;text-transform:capitalize;margin:10px 0}
#attributesTemplateList .config .type-radio,#attributesTemplateList .config .valueType-numberRange,#attributesTemplateList .config .valueType-text{margin:10px 0 0;text-align:left;font-size:14px}
.valueType-numberRange div {margin: 0 0 5px}
.valueType-boolean-list{margin:15px 0 0}
.valueType-boolean-list label{font-size:14px;text-transform:capitalize}
.type-addUsers{margin:15px 0 0}
.valueType-addUsers-info{font-size:14px;text-transform:capitalize}
.valueType-addUsers-info form{text-align:left;margin:15px 0 0}
.valueType-addUsers-info label{width:50%;float:left;margin:5px 0 15px}
.valueType-addUsers-info label input{width:auto;margin:0 10px 0 0;height:12px}
#newQrcodeAttributesList{margin:20px 0}
#newQrcodeAttributesList .element{width:auto;border:1px solid #555;color:#555;border-radius:5px;padding:4px 7px;margin:5px 0;text-transform:capitalize;display:inline-block}
#newQrcodeAttributesList .element button{border:none;background:0 0}

.little-wrapper{width:300px;margin:0 auto}
#selecQrcodeBox{width:100%;padding:15px 0; margin: 2px 0 0}
.attributesInput{padding:15px 0 0}
.attributesInput>div{display:inline-block;float:left;margin:0 15px 0 0}
.attributesInput button{float:left;margin:-10px 0 10px;border: 1px solid #4b6ecd;padding: 5px 10px;background: white;color: #4b6ecd}
.attributesInput input[type=radio]{display:inline-block;float:left;width:auto;height:12px;margin:0 0 15px}
.attributesInput .users{width:100%;display:table}
.attributesInput .users .user{width:100%;display:table;margin:10px 0 0}
.attributesInput .users .user div{width:100%}
.steps-wrapper{max-width:850px;width:100%;display:table;margin:0 auto 50px}
.qrCodeBox{display:none}
.qrCodeBox #qrCode{padding:20px 0}


.PAGE-host-index label{font-weight:700;font-size:14px}
.PAGE-customer label,.PAGE-myInsert label, .PAGE-customer-checkin label, .PAGE-myPresences{font-weight:700;font-size:14px}
.admin .hostInfoBox{width:100%;display:inline-block;margin-top:40px;}
.admin .host_name{margin: 0;text-transform: uppercase;font-weight: 900}
.admin .currentPresencesBox {font-weight: normal;font-size:12px;}
.admin .currentPresencesBox .current_presences{font-weight: bold;}
.PAGE-myPresences .filter input {margin: 0}
.PAGE-myPresences .filter input {height: auto; padding: 10px 0}
.PAGE-myPresences #searchButton {margin: 30px 0 0; text-transform: uppercase}
#selecQrcodeBox {padding: 5px 0 15px;}
.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-myQrPage #selecQrcodeBox {width: 92%; margin: 2px auto 0; padding: 20px 0 0}
.PAGE-myQrPage #selecQrcodeBox label {font-weight: 700;font-size: 14px;margin: 10px 0}

.PAGE-myPresences .presencesBox .inputBox label {float: left; font-size: 14px; font-weight: bold; margin: 10px 0}
#insertPresenceForm #attributesList .attribute:first-child .attributesInput {padding: 12px 0 0}
#insertPresenceForm #attributesList .attribute:nth-child(2) {margin: 30px 0 0}
#insertPresenceForm #attributesList .attribute:nth-child(2) .attributesInput {padding: 12px 0 0}
.PAGE-host-index #phone_number{width:70%;}


.PAGE-myQrCode .insertPresenceBox .autofill #autofillFor,
.PAGE-myInsert .insertPresenceBox .autofill #autofillForm {padding: 10px 10px 0;box-sizing: border-box; background-color: #fff}
.PAGE-myQrCode .insertPresenceBox .autofill #autofillForm .input-number-wrapper,
.PAGE-myInsert .insertPresenceBox .autofill #autofillForm .input-number-wrapper{display: flex;justify-content: space-between; width: 100%}
.PAGE-myQrCode .insertPresenceBox .autofill #autofillForm label span,
.PAGE-myInsert .insertPresenceBox .autofill #autofillForm label span{font-style: italic}
.PAGE-myQrCode .insertPresenceBox .autofill #autofillForm #old_customer_last_name,
.PAGE-myInsert .insertPresenceBox .autofill #autofillForm #old_customer_last_name{margin: 0 0 20px}
.PAGE-myQrCode .insertPresenceBox .autofill h2,
.PAGE-myInsert .insertPresenceBox .autofill h2 {margin: 0 0 10px}
.PAGE-myInsert .separator {margin: 20px 0;display: flex;align-items: center; justify-content: space-evenly}
.PAGE-myInsert .separator .line {height: 1px; border-top: 1px solid black;width: 70px;margin: 4px 0 0}
.PAGE-myInsert .separator .text {font-size: 16px; font-weight: bold}
.PAGE-myInsert #insertPresenceForm {padding: 10px 10px 0;box-sizing: border-box; background-color: #fff}
.PAGE-myInsert #insertPresenceForm.open {background-color: #f5f8ff}
.PAGE-myInsert #insertPresenceForm .insert-client-qr label {display: none}
.PAGE-myInsert #insertPresenceForm .insert-client-qr #selecQrcodeBox {padding: 0 0 15px}
.PAGE-myInsert #insertPresenceForm.open .insert-client-qr label {display: block}
.PAGE-myInsert #insertPresenceForm.open .insert-client-qr h2 {display: none}
.PAGE-myInsert #insertPresenceForm .insert-client-qr {margin: 0}
.PAGE-myInsert #insertPresenceForm .insert-client-qr h2 {margin: 0 0 10px}
.PAGE-myInsert .btn-back {box-sizing: border-box; margin: 0 0 20px;line-height: 32px}
.PAGE-myInsert .attributesInput .users .user {display: flex}
.PAGE-myInsert .attributesInput .users .user div:nth-child(2) {margin: 0 0 0 5px}
.PAGE-myInsert .attributesInput .users .user div:first-child {margin: 0 5px 0 0}
.PAGE-myInsert #insertPresenceForm #attributesList .attribute:first-child .attributesInput {padding: 0}
.PAGE-myQrCode .prefillResultsBox .prefillTitle,
.PAGE-myInsert .prefillResultsBox .prefillTitle{font-size: 14px}
.PAGE-myQrCode .prefillResultsBox #prefillResults,
.PAGE-myInsert .prefillResultsBox #prefillResults{margin: 10px 0; padding: 0 0 10px}
.PAGE-myQrCode .prefillResultsBox #prefillResults .element,
.PAGE-myInsert .prefillResultsBox #prefillResults .element{cursor: pointer; margin: 10px 0; padding: 8px; border-radius: 5px; background: #ededed; -webkit-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.25);-moz-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.25);box-shadow: 0 3px 5px 0 rgba(0,0,0,0.25);}
.PAGE-myQrCode .prefillResultsBox #prefillResults .element .title,
.PAGE-myInsert .prefillResultsBox #prefillResults .element .title {text-align: left;font-weight: 900; font-size: 14px;text-decoration: underline}
.PAGE-myQrCode .prefillResultsBox #prefillResults .element .extrainfo,
.PAGE-myInsert .prefillResultsBox #prefillResults .element .extrainfo {text-align: left; font-size: 14px; margin: 3px 0 0}

#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}

.PAGE-myQrCode .removeCustomerAcl.loading span{display:none}
.PAGE-myQrCode .removeCustomerAcl.loading span.load{display:block!important}

@media screen and (min-width: 800px) {
  .PAGE-customer h1, .PAGE-myInsert h1 {text-align: center}
  input, select, .btn-01, .btn-02, .btn-03{max-width:300px;}
  #contactForm input, select, .btn-01, #contactForm .btn-02, .btn-03{max-width:100%;}
  #contactForm .btn-02 {margin: 0 0 30px}
  .header{text-align:center}
  .wrapper{max-width:850px;display:inline-block;position:relative}

  .admin button#logoutBtn{top : -52px}
  .admin .headerImg{background:url('/global/img/bg-desk.jpg') no-repeat center top;max-width:100%;height:350px;background-size:contain;}
  .admin .links .linkBox{width:45%;margin:15px 2%;vertical-align:top;}

  .PAGE-myPresences .presencesBox{min-height:80vh;}
  .PAGE-myPresences .filter{text-align:center;}
  .PAGE-myPresences .filter .inputBox{display:inline-block;}
  .PAGE-myPresences .filter .inputBox #datetimesFrom{display:block;}
  .PAGE-myPresences .filter .inputBox #datetimesTo{display:block;}
  .PAGE-myPresences .filter .inputBox:first-child{margin-right:20px;}
  .PAGE-myPresences .filter .submitBox{display:inline-block;margin-top:15px;width:100%;text-align:center}
  .PAGE-myPresences .filter .submitBox button{width:720px;display:inline-block}

  .PAGE-myInsert #insertPresenceForm{width:300px;display:inline-block; margin: 20px 0 0}
  .PAGE-HOST__INDEX #loginForm{width:300px;display:inline-block}
  .PAGE-HOST__INDEX #registrationForm{width:300px;display:inline-block;vertical-align:top}
  .PAGE-HOST__INDEX .desktopInfo{height:338px;width:400px;margin-left:20px;display:inline-block;vertical-align:top;background:url('/global/img/bg-desk.jpg') no-repeat center bottom;background-size:contain;}
  .PAGE-HOST__INDEX .desktopInfo .info{font-size:16px;line-height:25px;font-weight:normal;margin-top:85px;margin-bottom:30px;}
  .PAGE-HOST__INDEX #loginBtn{width:100%;display:inline-block}

  .PAGE-client input,.PAGE-client select,.PAGE-client .btn-01,.PAGE-client .btn-02,.PAGE-client .btn-03{max-width:100%;}
  .PAGE-customer h1, .PAGE-myInsert h1 {text-align: center}

  .PAGE-myQrCode .qrCodeBox, .PAGE-myQrPage .qrCodeBox {max-width: 500px; margin: 0 auto 20px}
  .PAGE-myQrPage #selecQrcodeBox label {text-align: center}
  .PAGE-host-index #registrationForm {max-width: 300px; margin: 0 auto}
  .PAGE-host-index #registrationForm input, .PAGE-host-index #registrationForm select{float: left}
  .PAGE-host-index #phone_number{width:72%;}
  .PAGE-myPresences .presencesBox .wrapper {max-width:100%}

  .PAGE-myInsert #old_customer_country_phone_prefix {width: 20%;float: none}
  .PAGE-myInsert #old_customer_phone_number {float: none}
  .PAGE-myInsert .insertPresenceBox .wrapper {max-width: 300px}
}

@media screen and (max-width: 800px) {
  #qrcodeListBox span {font-size: 16px;text-align: left;width: 100%;display: table;}
  #qrcodeListBox button {margin: 10px 0;}
  #qrcodeList {max-width: 100%;padding: 0;box-sizing: border-box;  }
  #qrcodeList a {box-sizing: border-box;}
  #selecQrcodeBox select{margin:0 auto}
  .admin button.logoutBtn{top:-32px}
  .PAGE-myPresences #selecQrcodeBox select{width:100%;margin:0 auto}
}





.PAGE-host-index #registrationBtn{display:none}
.PAGE-host-index .separator{display:none}