html {
    scroll-behavior: smooth;
}

body {
   font-family: "Segoe UI","Helvetica Neue", Arial, sans-serif;
   
}
.img-container{
    background-image: url(../images/signupimg.jpg);
    height: 90vh;
   /* box-shadow: 6px 6px 6px 0 rgba(0, 0, 0, 0.16);*/
  background-color: rgba(44, 53, 58, 0.34);
    color: #fff;
     text-shadow: 1px 3px 6px rgba(0, 0, 0, 0.37);
     background-repeat: no-repeat;
    width: 490px;
}
.img-container h2{
  color: #fff!important;
}
.content{
    width: 70%;s
    height: auto;
    margin: 0px 88px;
    padding: 145px 0;
    position: relative;
}
.left-top{
    position: absolute;
    top: 30px;
    left: 50px;

}
.right-top{
    position: absolute;
    top: 20px;
    right: 25px;
}
.bottom{
        left: 120px;
    position: absolute;
    bottom: 25px;
}
.form-container{
    color: #707070;
}
.signup-form{
    width: 90%;
    height: auto;
    margin: 50px 0px 0px 37px;;
    padding: 10px;
    position: relative;
}

.signup-form form{/*

    line-height: 35px;*/
}
/*.signup-form input[type=text]:focus, select:focus {
    outline: none;
}*/
.signup-form .form-control{
  background-color: #fff!important;
    color: #707070;
    border: none;
    border-bottom:  1px solid #707070;
    width: 100%;
    border-radius: 0px
}
.form-container .btn{
color: #ffffff;
  border-radius: 55px;/*
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.44);*/
  border: solid 1px #ffffff;
  background-color: #208fce;
  padding: 7px 25px;
}
.form-container .btn:hover{
color: #ffffff;
  border-radius: 55px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.44);
  border: solid 1px #ffffff;
  background-color: #208fce;
  padding: 7px 25px;
}
.form-group {
  position: relative;
}


.login .img-container{
    background-image: url(../images/login.jpg);
}
.login-form{
    width: 90%;
    height: auto;
    margin: 90px auto;
    padding: 10px;
    position: relative;
}
.login-form .form-control{
  background-color: #fff;
    color: #707070!important;
    border: none!important;
    border-bottom:  1px solid #707070!important;
    width: 100%!important;
    border-radius: 0px!important;
}

.start-form{
    width: 60%;
    height: auto;
    margin: 155px auto;
    padding: 10px;
    position: relative;
}
.start-form .form-control{
    color: #707070;
    border: none;
    border-bottom:  1px solid #707070;
    width: 100%;
    border-radius: 0px
}
.form-control-placeholder {/*
  font-style: italic;*/
  text-shadow: none!important;
  position: absolute;
  top: 0;
  padding: 7px 0 0 13px;
  transition: all 200ms;/*
  opacity: 0.5;*/
}

.form-control:focus + .form-control-placeholder,
.form-control:valid + .form-control-placeholder {
  font-size: 80%!important;
  transform: translate3d(0, -65%, 0)!important;
  opacity: 1!important;
  outline: none!important;
  border-radius: 0px!important;
  color: #707070!important;
  
}
.choices__inner:focus + label,
.choices .form-control:valid + .form-control-placeholder {
  font-size: 80%!important;
  transform: translate3d(0, -65%, 0)!important;
  opacity: 1!important;
  outline: none!important;
  border-radius: 0px!important;
  color: #707070!important;
  
}
.form-control:focus{
    border-bottom:  2px solid #208fce;
    box-shadow: 0px 6px 3px -3px rgba(0, 0, 0, 0.16)!important;
}
.choices__inner {
    background-color: #fff!important;
    color: #707070!important;
    border: none!important;
    border-bottom: 1px solid #707070!important;
    width: 100%!important;
    border-radius: 0px!important;
  }
    .choices {
    /* position: relative; */
 margin-bottom: 0px!important;
    /* font-size: 16px; */
}
.choices__input {
  background-color: #fff!important;
}

#meter_wrapper
{
  margin-left: 5%;
  margin-top: 0px;
  width: 200px;
  height: 12px;
  border-radius: 3px;
}
#meter
{
  width:0px;
  height:12px;border-radius:20px;
}
#pass_type
{
  font-size: 15px;
  margin-top: -6px;
  margin-left: 2%;
  text-align: center;
  color: grey;
}