@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&family=Poppins:wght@400;500;600&display=swap');

*{

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: "Poppins", sans-serif;

}

body{

  margin: 0;

  padding: 0;

  background: linear-gradient(120deg, #f7d564, #50c2ec);

  height: 100vh;

  overflow: hidden;

}

.center{

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 400px;

  background: white;

  border-radius: 10px;

  box-shadow: 10px 10px 15px rgba(0,0,0,0.05);

}

.center h1{

  text-align: center;

  padding: 20px 0;

  border-bottom: 1px solid silver;

}

.center form{

  padding: 30px 40px !important;

  box-sizing: border-box;

  

}

form .txt_field{

  position: relative;

  border-bottom: 2px solid #adadad;

  margin: 30px 0;

}

.txt_field input{

  width: 100%;

  padding: 0 5px;

  height: 40px;

  font-size: 16px;

  border: none;

  background: none;

  outline: none;

}

.txt_field label{

  position: absolute;

  top: 50%;

  left: 5px;

  color: #adadad;

  transform: translateY(-50%);

  font-size: 16px;

  pointer-events: none;

  transition: .5s;

}

.txt_field span::before{

  content: '';

  position: absolute;

  top: 40px;

  left: 0;

  width: 0%;

  height: 2px;

  background: #50c2ec;

  transition: .5s;

}

.txt_field input:focus ~ label,

.txt_field input:valid ~ label{

  top: -5px;

  color: #50c2ec;

}

.txt_field input:focus ~ span::before,

.txt_field input:valid ~ span::before{

  width: 100%;

}

.pass{

  margin: -5px 0 20px 5px;

  color: #a6a6a6;

  cursor: pointer;

}

.pass:hover{

  text-decoration: underline;

}

input[type="submit"]{

  width: 100%;

  height: 50px;

  border: 1px solid;

  background: #50c2ec;

  border-radius: 25px;

  font-size: 18px;

  color: #e9f4fb;

  font-weight: 700;

  cursor: pointer;

  outline: none;

}



input[type="submit"]:hover{

  border-color: #50c2ec;

  transition: .5s;

}

.signup_link{

  margin-top: 30px;

  text-align: center;

  font-size: 16px;

  color: #666666;

}

.signup_link a{

  color: #50c2ec;

  text-decoration: none;

}

.signup_link a:hover{

  text-decoration: underline;

}



#logo,li, img {

    transition: all 300ms;

    -webkit-transition: 300ms;

    -moz-transition: 300ms;

    -o-transition: 300ms;}



#logo {

    width: 140px;

    float: left;

    margin: 10px -5px 0 10px;

}



#logo:hover {

    opacity: 0.5;

}



#logo img {

    width: 50px;

}



header {

    width: 100%;

    height: 65px;

    position: fixed;

    top: 0;

    left: 0;

    font-weight: 200;

    background-color: rgba(128, 128, 128, 1);

    box-shadow: 0px 1px 3px rgb(0, 0, 0, 0.1);

    z-index: 1;

    border-bottom: 2px solid;

    border-color: black;

}



header nav {

    float: right;

    margin: 10px 50px 0 0;

    font-family: 'Roboto', sans-serif;

}



ul {

    list-style-type: none;

}



a {

    text-decoration:none;

    color: #494949;

}



header nav ul li {

    float: left;

    margin-right: 25px;

}



header nav ul li:hover {

    padding-top: 5px;

}



.failed {

  padding: 7px;

  border: 2px solid;

  border-color: red;

}



.button-disabled {

  background: #7F7F7F !important;

}