@import url('https://fonts.googleapis.com/css?family=Montserrat:700,400');


.a9 {
  width               : 100%;
  min-width           : 375px;
  height              : 100vh;
  min-height          : 667px;
  position            : relative;
  overflow            : hidden;
  margin              : 0px;
  background-color    : rgba(255, 255, 255, 1.0);
}
a {
  text-decoration     : none;
}
div {
  -webkit-text-size-adjust: none;
}
div {
  -webkit-text-size-adjust: none;
}
.a9 .bg {
  background-color    : rgba(255, 255, 255, 1.0);
  top                 : 0px;
  height              : 667px;
  width               : 375px;
  position            : absolute;
  margin              : 0;
  left                : 0px;
  -ms-transform       : rotate(0deg); /* IE 9 */
  -webkit-transform   : rotate(0deg); /* Chrome, Safari, Opera */
  transform           : rotate(0deg);
}
.a9 .iconsarrowleft {
  background-color    : rgba(255,255,255,0.0);
  top                 : 39px;
  height              : 16px;
  width               : 18px;
  position            : absolute;
  margin              : 0;
  left                : 5.87%;
  -ms-transform       : rotate(0deg); /* IE 9 */
  -webkit-transform   : rotate(0deg); /* Chrome, Safari, Opera */
  transform           : rotate(0deg);
}
.a9 .iconsarrowleft .iconsarrowleft1 {
  background-color    : rgba(255,255,255,0.0);
  top                 : 0px;
  height              : 16px;
  width               : 18px;
  position            : relative;
  margin              : 0;
  left                : 5.87%;
  -ms-transform       : rotate(0deg); /* IE 9 */
  -webkit-transform   : rotate(0deg); /* Chrome, Safari, Opera */
  transform           : rotate(0deg);
}
.a9 .back {
  background-color    : rgba(255,255,255,0.0);
  top                 : 38px;
  height              : auto;
  width               : auto;
  position            : absolute;
  margin              : 0;
  left                : 10.93%;
  -ms-transform       : rotate(0deg); /* IE 9 */
  -webkit-transform   : rotate(0deg); /* Chrome, Safari, Opera */
  transform           : rotate(0deg);
  font-family         : "Montserrat", Helvetica, Arial, serif;
  font-weight         : 700;
  font-style          : normal;
  font-size           : 14.0px;
  color               : rgba(0, 0, 0, 1.0);
  text-align          : center;
  letter-spacing      : 0.11px;
  line-height         : 17.0px;
}
.a9 .stats {
  background-color    : rgba(255,255,255,0.0);
  bottom              : 0%;
  height              : 115px;
  width               : 100%;
  position            : absolute;
  margin              : 0;
  left                : 0%;
  -ms-transform       : rotate(0deg); /* IE 9 */
  -webkit-transform   : rotate(0deg); /* Chrome, Safari, Opera */
  transform           : rotate(0deg);
}
.a9 .mask {
  background-color    : rgba(255,255,255,0.0);
  bottom              : 0%;
  height              : 105px;
  width               : 100%;
  position            : absolute;
  margin              : 0;
  left                : 0%;
  -ms-transform       : rotate(0deg); /* IE 9 */
  -webkit-transform   : rotate(0deg); /* Chrome, Safari, Opera */
  transform           : rotate(0deg);
}
.a9 .logo {
  background-color    : rgba(255,255,255,0.0);
  width               : 196px;
  height              : 100%;
  pointer-events      : auto;
  position            : relative;
  -ms-transform       : rotate(0deg); /* IE 9 */
  -webkit-transform   : rotate(0deg); /* Chrome, Safari, Opera */
  transform           : rotate(0deg);
}
.a9 .logo-layout-container {
  pointer-events      : none;
  flex-direction      : column;
  top                 : 102px;
  align-items         : center;
  height              : 40px;
  width               : 100%;
  position            : absolute;
  margin              : 0;
  display             : flex;
  left                : 0;
}
.a9 .logo .mocha {
  background-color    : rgba(255,255,255,0.0);
  top                 : 0px;
  height              : auto;
  width               : auto;
  position            : absolute;
  margin              : 0;
  left                : 0px;
  -ms-transform       : rotate(0deg); /* IE 9 */
  -webkit-transform   : rotate(0deg); /* Chrome, Safari, Opera */
  transform           : rotate(0deg);
  font-family         : "San Francisco", Helvetica, Arial, serif;
  font-size           : 40.0px;
  color               : rgba(38, 38, 40, 1.0);
  text-align          : left;
}
.a9 .logo .uikit {
  background-color    : rgba(255,255,255,0.0);
  top                 : 8px;
  height              : auto;
  width               : auto;
  position            : absolute;
  margin              : 0;
  left                : 150px;
  -ms-transform       : rotate(0deg); /* IE 9 */
  -webkit-transform   : rotate(0deg); /* Chrome, Safari, Opera */
  transform           : rotate(0deg);
  font-family         : "San Francisco", Helvetica, Arial, serif;
  font-size           : 20.0px;
  color               : rgba(240, 85, 34, 1.0);
  text-align          : left;
  line-height         : 24.0px;
}
.a9 .logo .line {
  background-color    : rgba(255,255,255,0.0);
  top                 : 3px;
  height              : 36px;
  width               : 3px;
  position            : absolute;
  margin              : 0;
  left                : 140px;
  -ms-transform       : rotate(0deg); /* IE 9 */
  -webkit-transform   : rotate(0deg); /* Chrome, Safari, Opera */
  transform           : rotate(0deg);
}
.a9 .contents {
  background-color    : rgba(255,255,255,0.0);
  top                 : 192px;
  height              : 482px;
  width               : 80.80%;
  position            : absolute;
  margin              : 0;
  left                : 9.60%;
  -ms-transform       : rotate(0deg); /* IE 9 */
  -webkit-transform   : rotate(0deg); /* Chrome, Safari, Opera */
  transform           : rotate(0deg);
}
.a9 .contents .rectanglecopy {
  background-color    : rgba(255,255,255,0.0);
  top                 : 0px;
  height              : 48px;
  width               : calc(99.67% - 2px);
  position            : absolute;
  margin              : 0;
  left                : 0%;
  border-radius       : 25px;
  border-style        : solid;
  border-width        : 1px;
  border-color        : rgba(239, 239, 239, 1.0);
  -ms-transform       : rotate(0deg); /* IE 9 */
  -webkit-transform   : rotate(0deg); /* Chrome, Safari, Opera */
  transform           : rotate(0deg);
}
.a9 .contents .rectanglecopy2 {
  background-color    : rgba(255,255,255,0.0);
  top                 : 64px;
  height              : 48px;
  width               : calc(99.34% - 2px);
  position            : absolute;
  margin              : 0;
  left                : 0.33%;
  border-radius       : 25px;
  border-style        : solid;
  border-width        : 1px;
  border-color        : rgba(239, 239, 239, 1.0);
  -ms-transform       : rotate(0deg); /* IE 9 */
  -webkit-transform   : rotate(0deg); /* Chrome, Safari, Opera */
  transform           : rotate(0deg);
}
.a9 .contents .donthaveanaccoun {
  background-color    : rgba(255,255,255,0.0);
  top                 : 437px;
  height              : auto;
  width               : 240px;
  position            : absolute;
  margin              : 0;
  left                : 39px;
  -ms-transform       : rotate(0deg); /* IE 9 */
  -webkit-transform   : rotate(0deg); /* Chrome, Safari, Opera */
  transform           : rotate(0deg);
  font-family         : "Montserrat", Helvetica, Arial, serif;
  font-weight         : 400;
  font-style          : normal;
  font-size           : 15.0px;
  color               : rgba(255, 255, 255, 1.0);
  text-align          : center;
  line-height         : 18.0px;
}
.a9 .contents .donthaveanaccoun .span1 {
  
}
.a9 .contents .donthaveanaccoun .span2 {
  color               : rgba(38, 38, 40, 1.0);
}
.a9 .contents .username {
  background-color    : rgba(255,255,255,0.0);
  top                 : 14px;
  height              : auto;
  width               : 240px;
  position            : absolute;
  margin              : 0;
  left                : 31px;
  -ms-transform       : rotate(0deg); /* IE 9 */
  -webkit-transform   : rotate(0deg); /* Chrome, Safari, Opera */
  transform           : rotate(0deg);
  font-family         : "AppleSystemUIFont", Helvetica, Arial, serif;
  font-size           : 15.0px;
  color               : rgba(194, 195, 201, 1.0);
  text-align          : center;
  line-height         : 17.0px;
}
.a9 .contents .password {
  background-color    : rgba(255,255,255,0.0);
  top                 : 79px;
  height              : auto;
  width               : 240px;
  position            : absolute;
  margin              : 0;
  left                : 31px;
  -ms-transform       : rotate(0deg); /* IE 9 */
  -webkit-transform   : rotate(0deg); /* Chrome, Safari, Opera */
  transform           : rotate(0deg);
  font-family         : "AppleSystemUIFont", Helvetica, Arial, serif;
  font-size           : 15.0px;
  color               : rgba(194, 195, 201, 1.0);
  text-align          : center;
  line-height         : 17.0px;
}
.a9 .contents .buttons {
  background-color    : rgba(255,255,255,0.0);
  top                 : 185px;
  height              : 50px;
  width               : 100%;
  position            : absolute;
  margin              : 0;
  left                : 0%;
  -ms-transform       : rotate(0deg); /* IE 9 */
  -webkit-transform   : rotate(0deg); /* Chrome, Safari, Opera */
  transform           : rotate(0deg);
}
.a9 .contents .buttons .rectangle {
  background-color    : rgba(15, 172, 243, 1.0);
  top                 : 0px;
  height              : 50px;
  width               : 100%;
  position            : absolute;
  margin              : 0;
  left                : 0%;
  border-radius       : 25px;
  -ms-transform       : rotate(0deg); /* IE 9 */
  -webkit-transform   : rotate(0deg); /* Chrome, Safari, Opera */
  transform           : rotate(0deg);
}
.a9 .contents .buttons .cancel {
  background-color    : rgba(255,255,255,0.0);
  top                 : 15px;
  height              : auto;
  width               : 18.38%;
  position            : absolute;
  margin              : 0;
  left                : 40.89%;
  -ms-transform       : rotate(0deg); /* IE 9 */
  -webkit-transform   : rotate(0deg); /* Chrome, Safari, Opera */
  transform           : rotate(0deg);
  font-family         : "Montserrat", Helvetica, Arial, serif;
  font-weight         : 700;
  font-style          : normal;
  font-size           : 14.0px;
  color               : rgba(255, 255, 255, 1.0);
  text-align          : center;
  letter-spacing      : 0.11px;
  line-height         : 20.0px;
}
.a9 .fogotpassword {
  background-color    : rgba(255,255,255,0.0);
  top                 : 450px;
  height              : auto;
  width               : calc(88.80% - 214px);
  position            : absolute;
  margin              : 0;
  left                : 11.20%;
  -ms-transform       : rotate(0deg); /* IE 9 */
  -webkit-transform   : rotate(0deg); /* Chrome, Safari, Opera */
  transform           : rotate(0deg);
  font-family         : "Montserrat", Helvetica, Arial, serif;
  font-weight         : 400;
  font-style          : normal;
  font-size           : 14.0px;
  color               : rgba(167, 162, 206, 1.0);
  text-align          : center;
  letter-spacing      : 0.11px;
  line-height         : 17.0px;
}
/* .anima-animate-appear prefix for appear animations */
.anima-animate-appear {
  opacity             : 0;
  display             : block;
  -webkit-animation   : anima-reveal 0.3s ease-in-out 1 normal forwards;
  -moz-animation      : anima-reveal 0.3s ease-in 1 normal forwards;
  -o-animation        : anima-reveal 0.3s ease-in-out 1 normal forwards;
  animation           : anima-reveal 0.3s ease-in-out 1 normal forwards;
}
.anima-animate-disappear {
  opacity             : 1;
  display             : block;
  -webkit-animation   : anima-reveal 0.3s ease-in-out 1 reverse forwards;
  -moz-animation      : anima-reveal 0.3s ease-in 1 normal forwards;
  -o-animation        : anima-reveal 0.3s ease-in-out 1 reverse forwards;
  animation           : anima-reveal 0.3s ease-in-out 1 reverse forwards;
}
.anima-animate-nodelay {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay  : 0;
  animation-delay     : 0;
}
@-webkit-keyframes anima-reveal {
  0%
   
  {
      opacity: 0;
    }
  
    
  100%
   
  {
      opacity: 1;
    }
}
@-moz-keyframes anima-reveal {
  0%
   
  {
      opacity: 0;
    }
  
    
  100%
   
  {
      opacity: 1;
    }
}
@-o-keyframes anima-reveal {
  0%
   
  {
      opacity: 0;
    }
  
    
  100%
   
  {
      opacity: 1;
    }
}
@keyframes anima-reveal {
  0%
   
  {
      opacity: 0;
    }
  
    
  100%
   
  {
      opacity: 1;
    }
}