*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}




body{font-size:62.5%;width:100%;height:100%; font-family:Raleway;background:url(../../assets/images/city-wallpaper-18.jpg) no-repeat fixed;background-size:cover;background-position:50%;-webkit-font-smoothing:antialiased;font-smoothing:antialiased}
body .menu{position:absolute;width:100%;background:inherit}
body .menu .mainmenu{background:url(../../assets/images/city-wallpaper-18.jpg) no-repeat fixed;background-size:cover;background-position:50%}
body .menu .mainmenu:before{position:absolute;content:"";display:block;width:100%;height:100%;background:inherit;-webkit-filter:blur(3px);filter:blur(3px)}
body .menu .mainmenu:after{clear:both;content:"";display:block}
body .menu .mainmenu .menuitem{float:left;width:10%;padding-top:10px;padding-bottom:10px;text-align:center;cursor:pointer;color:#fff;font-size:1.5rem}
body #findpass{top:50%;left:5%;padding:10px 20px;width:auto;background:#fff;color:#000000b3;position:fixed;background:#ffffff80;border:none;font-size:1.2rem;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;cursor:pointer;-moz-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}
body #findpass:focus{outline:none}
body .article{width:960px;font-size:1.4rem;margin:20px auto;color:#fff;opacity:0;visibility:hidden;-moz-transition:opacity 400ms linear;-o-transition:opacity 400ms linear;-webkit-transition:opacity 400ms linear;transition:opacity 400ms linear;-moz-transition-delay:800ms;-o-transition-delay:800ms;-webkit-transition-delay:800ms;transition-delay:800ms;top:0;position:relative}
body .article.active{opacity:1;visibility:visible}
body .article h1{font-size:3rem;text-align:center;margin-bottom:20px}


.form {  margin: 0 auto;  position: fixed;  top: 35%;  left: 50%;  -moz-transform: translate3d(-50%, 0, 0);  -ms-transform: translate3d(-50%, 0, 0);  -webkit-transform: translate3d(-50%, 0, 0);  transform: translate3d(-50%, 0, 0);  width: 376px;  padding: 20px;  overflow: hidden;  background-color: black;  border: 1px solid rgba(255, 255, 255, 0.5);  background: inherit;  -moz-border-radius: 12px;  -webkit-border-radius: 12px;  border-radius: 12px;}
.form{margin:0 auto;position:fixed;top:35%;left:50%;-moz-transform:translate3d(-50%,0,0);-ms-transform:translate3d(-50%,0,0);-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);width:350px;padding:20px;overflow:hidden;background-color:#000;border:1px solid #ffffff80;background:inherit;-moz-border-radius:12px;-webkit-border-radius:12px;border-radius:12px}
.form .forceColor{width:100%;height:100%;position:absolute;left:0;top:0;background-color:#0006}
.form:before{content:"";width:110%;height:110%;position:absolute;background:inherit;left:-5%;right:0;bottom:0;top:-5%;-webkit-filter:blur(3px);filter:blur(3px)}
.form.goAway{opacity:0;-moz-transform:scale(0.6) translate3d(-50%,0,0);-ms-transform:scale(0.6) translate3d(-50%,0,0);-webkit-transform:scale(0.6) translate3d(-50%,0,0);transform:scale(0.6) translate3d(-50%,0,0);-moz-transition:-moz-transform 200ms ease-in-out,opacity 100ms linear;-o-transition:-o-transform 200ms ease-in-out,opacity 100ms linear;-webkit-transition:-webkit-transform 200ms ease-in-out,opacity 100ms linear;transition:transform 200ms ease-in-out,opacity 100ms linear;-moz-transition-delay:600ms;-o-transition-delay:600ms;-webkit-transition-delay:600ms;transition-delay:600ms}
.form .topbar .spanColor{position:absolute;width:0;right:20px;height:43px;opacity:.2;background-color:#fff;-moz-transition:width 150ms ease-in-out,background-color 150ms ease-in-out 250ms,border 150ms ease-in-out 250ms;-o-transition:width 150ms ease-in-out,background-color 150ms ease-in-out 250ms,border 150ms ease-in-out 250ms;-webkit-transition:width 150ms ease-in-out,background-color 150ms ease-in-out,border 150ms ease-in-out;-webkit-transition-delay:0s,250ms,250ms;transition:width 150ms ease-in-out,background-color 150ms ease-in-out 250ms,border 150ms ease-in-out 250ms;border-radius:0 6px 6px 0}
.form .topbar .input{display:block;width:100%;position:relative;font-size:1rem;background:transparent;border-top:1px solid #fff6;border-left:1px solid #fff6;border-bottom:1px solid #fff6;border-right:1px solid #fff6;margin-bottom:5px;color:#fff6;padding:10px 20px;border-radius:6px}
.form .topbar .input::-webkit-input-placeholder{color:#fff;font-size:1.2rem;font-family:Raleway;line-height:1.3rem;font-weight:200}
.form .topbar .input:focus{outline:none;color:#fff;border:1px solid #fff}
.form .topbar .input.disabled:hover{border:1px solid #fff6}
.form .topbar .input:hover{border:1px solid #fff}
.form .submit{text-align:center; padding:10px 20px;width:100%;font-size:1.2rem;font-family:Raleway;font-weight:200;display:block;color:#fff;position:relative;border:1px solid #fff6;background:#ffffff80;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;cursor:pointer}
.form .submit:focus{outline:none}
.form .submit:hover{color:#fff;border:1px solid #fff}
.form .submit.recover{background:#FF2B4B;color:#fff!important;border:1px solid #fff!important;transition:all 400ms linear}

.topbar.error .spanColor{width:calc(100% - 39px);border-top-left-radius:6px;border:1px solid #fff6;border-bottom-left-radius:6px;background-color:#FF2B4B}
.topbar.error + .submit{color:#fff}
.topbar.error .input{color:#fff6;border:1px solid #fff6}
.topbar.error .input::-webkit-input-placeholder{color:#fff}
.topbar.success .spanColor{width:calc(100% - 39px);border-top-left-radius:6px;border:1px solid #26C97D;border-bottom-left-radius:6px;background-color:#26C97D}
.topbar.success + .submit{color:#fff;border:1px solid #fff}
.topbar.success .input{color:#fff;border:1px solid #26C97D}
.topbar.success .input::-webkit-input-placeholder{color:#fff}

select {    outline: 10px red;  border: 0;  box-shadow: none;   flex: 1;  padding: 0 1em;    background: transparent;  cursor: pointer;  margin-bottom: 8px;}
select::-ms-expand {  display: none; }
.select { border: 1px solid #f7f5f5;   color: #fff; position: relative;  display: flex;  width: 100%;  height: 3em; font-size: .9rem; border-radius: .25em;  overflow: hidden;}
.select::after {  content: '\25BC';  position: absolute;  top: 0;  right: 0;  padding: 1em;  background-color: #34495e;  transition: .25s all ease;  pointer-events: none;}
.select:hover::after {  color: #f39c12;}

.disabled {                    opacity: 0.5;                }
.otp-container{background-color:#fff;box-shadow:0 0 8px 0 #02025044;max-width:600px;width:40em;background-color:#fff;padding:3em 2em;position:absolute;transform:translate(-50%,-50%);;border-radius:.8em;box-shadow:0 45px 60px #1e16014d}

@media only screen and (min-width: 993px) {
  .otp-container{top:50%;left:50%}
  }

@media only screen and (max-width: 993px) {
  .otp-container{ max-width:100%;width:70%;background-color:#fff;padding:3em 2em;position:absolute;transform:translate(-50%,-50%);top:50%;left:50%  }

  }

  .select option {
    font-size: 18px;
    background-color: #ffffff;
    font-family: 'Icons', 'Roboto', sans-serif;color:#000;
  }
  
  .select option:before {
    content: ">";
    font-size: 20px;
    display: none;
    padding-right: 10px;
    padding-left: 5px;
    color: #fff;
  }
  
  .select option:hover:before {
    display: inline;
  }

.otp-container .title{max-width:400px;margin:auto;text-align:center;font-family:"Poppins",sans-serif}
.otp-container .title h3{font-weight:700}
.otp-container .title p{font-size:12px;margin-top: 3px;color:#118a44}
.otp-container .title p.msg{color:initial;text-align:center;font-weight:700}
.otp-container .otp-input-fields{width:100%;display:flex; margin:auto;width:auto; justify-content:center;gap:10px;padding:20px 40px}
.otp-container .otp-input-fields .input2{width:24px;font-size:32px;padding:10px;text-align:center;border-radius:5px;margin:2px;border:2px solid #55525c;background:#21232d;font-weight:700;outline:none;transition:all .1s}
.otp-container .otp-input-fields .input3{height:3em;width:3em;border:2px solid #dad9df;outline:none;text-align:center;font-size:1.5em;border-radius:.3em;background-color:#fff;outline:none;-moz-appearance:textfield}
.otp-container .otp-input-fields input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.otp-container .otp-input-fields .input {height: 2em;background-color: transparent;outline: none;  font-size: 18px;  border: none;  border-bottom: 1px solid #ccc;  padding: 0px;}
.otp-container .otp-input-fields input:focus { border-bottom: 2px solid #a527ff;  }
.otp-container #submit{background-color:#044ecf;border:none;outline:none;font-size:1.2em;padding:.8em 2em;color:#fff;border-radius:.1em;margin:1em auto 0;cursor:pointer}
.otp-container .show{display:block}
.otp-container .hide{display:none}
.otp-container  .input:disabled{color:#89888b}
.otp-container  .input:focus{border-bottom:3px solid #ffb800}

#result {display: none;}
#result.show{ display: block; z-index: 9999;    width: 100%;    height: 100%;    background: #528f7a54;    overflow: hidden;    position: absolute;}

.button {  padding: 9px 30px;  box-shadow: 0px 0px 12px -2px rgba(0,0,0,0.5);  line-height: 1.25;  background: #FC6E51;  text-decoration: none;  color: white;  font-size: 16px;  text-transform: uppercase;  position: relative;   }



   .container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #fff;
    font-size: 14px;
    padding-top: 5px;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}   
/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 5px;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 3px;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #159919;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}