@import url('https://fonts.googleapis.com/css?family=Saira+Extra+Condensed');
@import url('https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:100,400');

body{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  font-family: "Saira Extra Condensed","Saira Extra Condensed", "sans-serif";
  background: rgb(255,255,255);
  background: radial-gradient(circle,#fff 20%,#444 100%);
    

}

.login{
  margin: 0 auto;
  width: 100%;
  display: table;
  padding: 200px 0;
}


.loginHeader{
  font-size: 40px;
  text-align: center;
  padding: 25px 0 0 0;
}



.loginHeader>*{
  /* color: #495057;*/
}

.loginMessage{
  font-size: 18px;
  margin: 0;
  padding-bottom: 25px;
}

.loginHeader strong{font-weight: 900;}
.loginHeader span{font-weight: 100;font-size: 30px;}


.loginBody{
  max-width: 400px;
  margin: 0 auto;
}

input[type=text],
input[type=password]
{
  font-size: 20px;
  padding: 0 50px;
  background: none;
  border: 0 none;
  background-color: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 0;
}


input[type=text]:focus,
input[type=text]:hover,
input[type=password]:focus,
input[type=password]:hover{
  background: none;
  outline:none;
  box-shadow:none;
  border-color: #333;

}


input[type=text]:focus + i{color: #28a745;}
input[type=password]:focus + i{color: rgb(200, 60, 60);}


.fa-user:before {content: "\f007";}
.fa-lock:before {content: "\f023";}

.fa {
    display: inline-block;
    font-family: "FontAwesome";
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


.loginBody  .form-group:nth-child(1),
.loginBody  .form-group:nth-child(2){position: relative;}

.loginBody  .form-group:nth-child(1) i,
.loginBody  .form-group:nth-child(2) i{
  position: absolute;
  left: 5%;
  top: 35%;
}


#show-password{
  position: absolute;
  left: 92%;
  top: 35%;
  opacity: 0.5;
}

#show-password:hover,
#show-password:focus{
  opacity: 1;
  cursor: pointer;
}


i {
  content: '\f007';
  font-family: 'font-awesome';
  color: #73838e;
}


.LoginBtn{
  display: flex;
  justify-content: center;
  align-items: center;
}


#submitBtn{
  font-weight: bold;
  font-size: 20px;
  padding: 5px 30px;
  border: 0;
}


.validation_summary ul{
    margin: 0;
    padding: 25px 0;
    list-style: none;
    font-size: 18px;
}




@media screen and(max-width:768px)
{
  #submitBtn{
    width: 100%;
  }
}