*{
  margin:0px;
  padding:0px;
  box-sizing:border-box;}
html,
body{
background-image:linear-gradient(0deg, #ffc000 20%, #fff) !important;
  width:100%; 
  height:100%; 
  background-attachment:fixed;}

input:focus,
button:focus,
input:active,
button:active{
  outline:none;}
a{
  text-decoration:none;}
a:focus,
a:active{
  outline:none;}
h1,
h2,
h3,
h4,
h5,
h6{
  font-weight:bold;
  letter-spacing:1px;}
.container{
  height:100%;
  width:100%;
  position:relative;
  text-align:center;}
.container:before{
  content:"";
  height:100%;
  width:0px;
  display:inline-block;
  vertical-align:middle;}
.formBox{
  width:460px;
  max-width:100%;
  height:552px;
  margin-left:-4px;
  margin-top:50px;
  margin-bottom:40px;
  position:relative;
  vertical-align:middle;
  display:inline-block;}
.formBox .box{
  text-align:left;
  background-color:#fff;
  border-radius:8px;
  padding:30px 0px 40px 0;
  position:absolute;
  width:100%;
  height:100%;
  box-shadow:0px 2px 11px -2px rgba(0, 0, 0, 0.5);
  transition:all 0.2s cubic-bezier(0.35, 0.33, 0.75, 0.9);}
.formBox h2{
  border-left:6px solid #ffc000;color:#ffc000;
  padding:0px 45px; font-size:26px;line-height:45px;height:45px;text-transform:uppercase;margin-bottom:40px;position:relative;text-align:center;letter-spacing:0px;}
.formBox p{
  font-size:18px;
  line-height:27px;
  margin-bottom:40px;
  color:#696969;}
.formBox .form{
  display:block;
  padding:0px 50px;
  position:relative;}
.formBox .f_row{
  position:relative;
  margin-bottom:42px;
  height:32px;}
.formBox .f_row.shake{
  -webkit-animation:shake 0.4s linear;      animation:shake 0.4s linear;}
.formBox .f_row.last{
  margin-bottom:40px;}
.formBox .f_row label{
  color:#939393; font-size:15px;font-weight:normal;position:absolute;left:0;top:7px;
  opacity:1;
  transition:all 0.3s cubic-bezier(1, -0.33, 0, 1.15);
  transform:translate(0px, 0px) scale(1);
  transform-origin:left top;}
.formBox .f_row input{
  background-color:transparent;
  border:none;
  color:#3f3f3f;
  font-size:20px;
  width:100%;
  height:100%;
  position:relative;}
.formBox .f_row u{
  background-color:#e1e1e1;
  width:100%;
  height:2px;
  position:absolute;
  left:0;
  bottom:0;}
.formBox .f_row u:before{
  content:"";
  display:block;
  height:100%;
  width:0;
  background-color:#ffc000;
  transition:all 0.35s cubic-bezier(0.35, 0.33, 0.84, 0.85);}
.formBox .f_row.focus label{
  opacity:1;
  transform:translate(0px, -26px) scale(0.8);}
.formBox .f_row.focus u:before{
  width:100%;}
.formBox .reg_bg{
  border-radius:50%;
  background:linear-gradient(50deg, #ffc000 65%, #fff) !important;
  position:absolute;
  width:900px;
  height:900px;
  right:-115px;
  top:-190px;
  transform-origin:100% 40%;
  transform:scale(0);}
.formBox .regTag{
  line-height:32px;
  box-shadow:0px 2px 5px -1px rgba(0, 0, 0, 0.45);
  border-radius:50%;
  background-color:#ffc000;
  color:#fff;
  font-size:58px;
  text-align:center;
  width:50px;
  height:50px;
  position:absolute;
  right:-25px;
  top:100px;
  z-index:2;}
.formBox .regTag svg{
  fill:#fff;
  width:20px;
  height:20px;  position:absolute;right:15px;top:15px;}
.formBox .registerBox{
  border-radius:8px;
  background-color:#fff;
  right:0;
  overflow:hidden;
  width:100%;
  opacity:0;
  visibility:hidden;
  -webkit-backface-visibility:visible;      backface-visibility:visible;
  z-index:1;}
.formBox .registerBox .f_row label,
.formBox .registerBox .f_row input{
  color:#fff;}
.formBox .registerBox .f_row u{
  background-color:#ffebeb;}
.formBox .registerBox .f_row u:before{
  background-color:#fff;}
.formBox .registerBox .f_row.last{
  margin-bottom:40px;}
.formBox .registerBox h2{
  visibility:hidden;
  opacity:0;
  transition:all 0.3s cubic-bezier(0.48, 0.55, 0.69, 0.9);
  transform:translateX(-20px);}
.formBox .registerBox .form > div{
  visibility:hidden;
  opacity:0;
  transition:all 0.3s cubic-bezier(0.48, 0.55, 0.69, 0.9);
  transform:translateX(20px);}
.formBox .registerBox .form > div:nth-child(1){
  transition-delay:0.15s;}
.formBox .registerBox .form > div:nth-child(2){
  transition-delay:0.2s;}
.formBox .registerBox .form > div:nth-child(3){
  transition-delay:0.25s;}
.formBox .registerBox .btn-large{
  opacity:0;
  transition:all 0.3s cubic-bezier(0.48, 0.55, 0.69, 0.9);
  transform:translateX(20px);
  transition-delay:0.3s;}
.formBox .forgetbox{
  background-color:#56adc7;
  overflow:hidden;
  opacity:0;    padding:60px 0px 40px 0;
  visibility:hidden;
  transform:translate(0px, 9px) scale(1.03);}
.formBox .forgetbox .back{
  position:absolute;
  top:-4px;
  left:26px;
  color:#fff;
  font-size:32px;
  font-weight:bold;
  -webkit-animation:back 0.8s linear;      animation:back 0.8s linear;
  -webkit-animation-iteration-count:infinite;      animation-iteration-count:infinite;}
.formBox .forgetbox .back svg{
  fill:#fff;
  width:20px;
  height:20px;}
.formBox .forgetbox .f_row label,
.formBox .forgetbox .f_row input{
  color:#fff;}
.formBox .forgetbox .f_row u{
  background-color:#7dc6dc;}
.formBox .forgetbox .f_row u:before{
  background-color:#fff;}
.formBox .forgetbox .f_row.last{
  margin-bottom:40px;}
.formBox .forgetbox .btn{
  border-color:#7dc6dc;
  color:#7dc6dc;}
.formBox .forgetbox .btn u{
  background-color:#7dc6dc;}
.formBox .forgetbox h2{
  color:#fff;
  border-left-color:#fff;
  visibility:hidden;
  opacity:0;
  transition:all 0.3s cubic-bezier(0.48, 0.55, 0.69, 0.9);
  transform:translate(-20px, 0px);}
.formBox .forgetbox .form > div{
  visibility:hidden;
  opacity:0;
  transition:all 0.3s cubic-bezier(0.48, 0.55, 0.69, 0.9);
  transform:translate(0px, 20px);
  transition-delay:0.15s;}
.formBox .forgetbox p{
  color:#fff;
  visibility:hidden;
  opacity:0;
  transition:all 0.3s cubic-bezier(0.48, 0.55, 0.69, 0.9);
  transform:translate(0px, 20px);
  transition-delay:0.2s;}
.formBox .forgetbox .btn{
  opacity:0;
  transition:all 0.3s cubic-bezier(0.48, 0.55, 0.69, 0.9);
  transform:translate(0px, 20px);
  transition-delay:0.25s;}
.formBox.level-login .boxShaddow{
  opacity:0.7;
  transform-origin:center top;
  transform:translate(0px, -9px) scale(0.97);}
.formBox.level-reg h2{
  border-left-color:#fff;
  color:#fff;}
.formBox.level-reg .boxShaddow{
  opacity:0.7;
  transform-origin:center top;
  transform:translate(0px, -18px) scale(0.94);}
.formBox.level-reg .loginBox{
  opacity:0.7;
  transform-origin:center top;
  transform:translate(0px, -9px) scale(0.97);}
.formBox.level-reg .registerBox{
  opacity:1;
  visibility:visible;
  box-shadow:0px 2px 10px -1px rgba(0, 0, 0, 0.13);}
.formBox.level-reg .regTag{
  -webkit-animation:regTag 0.3s cubic-bezier(0.48, 0.55, 0.73, 0.78), regTag2 0.3s cubic-bezier(0.48, 0.55, 0.73, 0.78);      animation:regTag 0.3s cubic-bezier(0.48, 0.55, 0.73, 0.78), regTag2 0.3s cubic-bezier(0.48, 0.55, 0.73, 0.78);
  -webkit-animation-fill-mode:forwards;      animation-fill-mode:forwards;   /* right:-18px;top:30px; */
    background:#ff0000;   max-width:50px;max-height:50px; 
    /* box-shadow:0px -1px 5px 0px rgb(72 46 46 / 68%);transform:rotate(135deg);*/
}
 
.formBox.level-reg .reg_bg{
  -webkit-animation:regMask 0.3s cubic-bezier(0.48, 0.55, 0.73, 0.78);      animation:regMask 0.3s cubic-bezier(0.48, 0.55, 0.73, 0.78);
  -webkit-animation-fill-mode:forwards;      animation-fill-mode:forwards;}
.formBox.level-reg .form > div,
.formBox.level-reg .btn-large,
.formBox.level-reg h2{
  visibility:visible;
  opacity:1;
  transform:translateX(0px);}
.formBox.level-reg-revers .regTag{
  -webkit-animation:regTagR 0.3s cubic-bezier(0.48, 0.55, 0.73, 0.78), regTag2R 0.3s cubic-bezier(0.48, 0.55, 0.73, 0.78);      animation:regTagR 0.3s cubic-bezier(0.48, 0.55, 0.73, 0.78), regTag2R 0.3s cubic-bezier(0.48, 0.55, 0.73, 0.78);
  -webkit-animation-fill-mode:forwards;      animation-fill-mode:forwards;}
.formBox.level-reg-revers .reg_bg{
  -webkit-animation:regMaskR 0.3s cubic-bezier(0.48, 0.55, 0.73, 0.78);      animation:regMaskR 0.3s cubic-bezier(0.48, 0.55, 0.73, 0.78);
  -webkit-animation-fill-mode:forwards;      animation-fill-mode:forwards;}
.formBox.level-forget .boxShaddow{
  opacity:0.7;
  transform-origin:center top;
  transform:translate(0px, -18px) scale(0.94);}
.formBox.level-forget .loginBox{
  opacity:0.7;
  transform-origin:center top;
  transform:translate(0px, -9px) scale(0.97);}
.formBox.level-forget .forgetbox{
  transform:translate(0px, 0px) scale(1);
  opacity:1;
  visibility:visible;}
.formBox.level-forget .forgetbox p,
.formBox.level-forget .forgetbox .form > div,
.formBox.level-forget .forgetbox .btn,
.formBox.level-forget .forgetbox h2{
  visibility:visible;
  opacity:1;
  transform:translate(0px, 0px);}
@-webkit-keyframes back{
  0%{
    transform:translateX(0px);}
  70%{
    transform:translateX(-13px);}
  100%{
    transform:translateX(0px);}
}
@keyframes back{
  0%{
    transform:translateX(0px);}
  70%{
    transform:translateX(-13px);}
  100%{
    transform:translateX(0px);}
}
@-webkit-keyframes regMask{
  0%{
    transform:translate(0px, 0px) scale(0);}
  50%{
    transform:translate(100px, 100px) scale(0.5);}
  100%{
    transform:translate(0px, 0px) scale(1);}
}
@keyframes regMask{
  0%{
    transform:translate(0px, 0px) scale(0);}
  50%{
    transform:translate(100px, 100px) scale(0.5);}
  100%{
    transform:translate(0px, 0px) scale(1);}
}
@-webkit-keyframes regMaskR{
  0%{
    transform:translate(0px, 0px) scale(1);}
  50%{
    transform:translate(150px, -150px) scale(0.5);}
  100%{
    transform:translate(0px, 0px) scale(0);}
}
@keyframes regMaskR{
  0%{
    transform:translate(0px, 0px) scale(1);}
  50%{
    transform:translate(150px, -150px) scale(0.5);}
  100%{
    transform:translate(0px, 0px) scale(0);}
}
@-webkit-keyframes regTag{
  0%{
    transform:translate(0px, 0px) rotate(0deg);}
  25%{
    transform:translate(4px, 25px) rotate(11.25deg);}
  50%{
    transform:translate(-88px, 40px) rotate(22.5deg);}
  100%{
    transform:translate(-96px, 8px) rotate(45deg);}
}
@keyframes regTag{
  0%{
    transform:translate(0px, 0px) rotate(0deg);}
  25%{
    transform:translate(4px, 25px) rotate(11.25deg);}
  50%{
    transform:translate(-88px, 40px) rotate(22.5deg);}
  100%{
    transform:translate(0px, -60px) rotate(45deg);}
}
@-webkit-keyframes regTag2{
  0%{
    width:140px;height:140px;line-height:140px;box-shadow:0px 2px 5px -1px rgba(0, 0, 0, 0.45);}
  100%{
    width:70px;height:70px;box-shadow:0px 2px 5px -1px rgba(0, 0, 0, 0);line-height:68px;}
}
@keyframes regTag2{
  0%{
    width:140px;height:140px;line-height:140px;box-shadow:0px 2px 5px -1px rgba(0, 0, 0, 0.45);}
  100%{
    width:70px;height:70px;box-shadow:0px 2px 5px -1px rgba(0, 0, 0, 0);line-height:68px;}
}
@-webkit-keyframes regTagR{
  0%{
    transform:translate(-96px, 8px) rotate(45deg);}
  25%{
    transform:translate(-88px, 40px) rotate(22.5deg);}
  50%{
    transform:translate(4px, 25px) rotate(11.25deg);}
  100%{
    transform:translate(0px, 0px) rotate(0deg);}
}
@keyframes regTagR{
  0%{
    transform:translate(-96px, 8px) rotate(45deg);}
  25%{
    transform:translate(-88px, 40px) rotate(22.5deg);}
  50%{
    transform:translate(4px, 25px) rotate(11.25deg);}
  100%{
    transform:translate(0px, 0px) rotate(0deg);}
}
@-webkit-keyframes regTag2R{
  0%{
    width:70px;height:70px;box-shadow:0px 2px 5px -1px rgba(0, 0, 0, 0);line-height:68px;}
  100%{
    width:140px;height:140px;line-height:140px;box-shadow:0px 2px 5px -1px rgba(0, 0, 0, 0.45);}
}
@keyframes regTag2R{
  0%{ 
    box-shadow:0px 2px 5px -1px rgba(0, 0, 0, 0);line-height:68px;}
  100%{ 
    line-height:140px;box-shadow:0px 2px 5px -1px rgba(0, 0, 0, 0.45);}
}
@-webkit-keyframes shake{
  from,
  to{
    transform:translate3d(0, 0, 0);}
  10%,
  30%,
  50%,
  70%,
  90%{
    transform:translate3d(-10px, 0, 0);}
  20%,
  40%,
  60%,
  80%{
    transform:translate3d(10px, 0, 0);}
}
@keyframes shake{
  from,
  to{
    transform:translate3d(0, 0, 0);}
  10%,
  30%,
  50%,
  70%,
  90%{
    transform:translate3d(-10px, 0, 0);}
  20%,
  40%,
  60%,
  80%{
    transform:translate3d(10px, 0, 0);}
}
.btn{
  transition:all 0.6s ease;
  background-color:#ffc000;
  border:2px solid #ffc000;
  cursor:pointer;
  color:#fff;
  display:block;
  text-align:center;    width:85px;height:38px;line-height:33px;font-size:18px;
  font-weight:bold;
  text-transform:uppercase;
  overflow:hidden;
  position:relative;
  margin-left:auto;
  margin-right:auto;}
.btn span{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;}
.btn u{
  border-radius:50%;
  background-color:#ffc000;
  position:absolute;
  left:-23px;
  top:-103px;
  width:280px;
  height:280px;
  transition:all 0.25s cubic-bezier(0.48, 0.55, 0.69, 1.11);
  transform-origin:center center;
  transform:scale(0);}
.btn svg{
  fill:#fff;
  width:24px;
  height:24px;
  position:absolute;
  left:50%;
  top:50%;
  opacity:0;
  transition:all 0.35s cubic-bezier(0.48, 0.55, 0.69, 1.11);
  transform:translate(-50%, -50%) rotate(-90deg) skew(18deg, 12deg);}
.btn.active,
.btn:hover{background-color:#ffcc2d;
  border-color:#ffc000;
  color:#fff;}
.btn.active u{
  transform:scale(1);}
.btn.active svg{
  opacity:1;
  transform:translate(-50%, -50%) rotate(0deg) skew(0deg, 0deg);}
.btn-large{
  transition:all 0.6s ease;
  background-color:#fff;
  border:3px solid #fff;
  cursor:pointer;
  color:#ffc000;
  display:block;
  text-align:center;  width:150px;height:50px;
  line-height:15px;
  font-size:26px;
  font-weight:bold;
  text-transform:uppercase;
  position:relative;}
.btn-large.active,
.btn-large:hover{
  background-color:#ffc000;
  border-color:#fff;
  color:#fff;}
.f_link{
  text-align:center;
  padding-top:35px;}
.f_link a{
  color:#333;
  font-size:15px;
  transition:all 0.6s ease;}
.f_link a:hover{
  color:#0075aa;}
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{
    background-color:#ffc000;
  border-color:#ffc000;
  color:#fff;}
#bWait{font-size:8.5px; line-height:20px;}
div:where(.swal2-container) .swal2-html-container{    padding:10px 1.6em .3em !important;font-size:1em !important;}
#RequiredFieldValidator1, #RequiredFieldValidator2{font-size:12px;}
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm):focus-visible{
    box-shadow:none !important;}
@media screen and (max-width:500px){
    .formBox{width:96%;}
 .formBox .form{ padding:0px 25px;}
 .formBox h2{ padding:0px 15px;}

  }
.handle-btn-success{color:#fff;padding:5px 14px;background-color:#202020; border:1px solid #202020;transition:all 0.5s;}
.handle-btn-success:hover,.handle-btn-success:focus{color:#fff; background-color:#2e2e2e; border:1px solid #202020;}
div:where(.swal2-container) div:where(.swal2-actions){ margin:10px auto 0 !important;}
div:where(.swal2-container) h2:where(.swal2-title){ padding:1em 1em 0 !important;}
div:where(.swal2-container) div:where(.swal2-popup){ width:29em !important;}
.eye-icon{position:absolute; 
right:10px; 
top:50%; 
transform:translateY(-50%); 
cursor:pointer;
color:#888;
font-size:1.2em;}
.password-container{position:relative; display:inline-block;width:100%;}
.profile-img{width:30px; height:30px;}
.ltr-sp{letter-spacing:0.5px;}