html,

body{
  background-color: #537f97;
  font-family: 'Roboto Flex', sans-serif;
  font-weight: 300;
}

.form-signin {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
  width: 350px;
  height: 550px;
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  padding: 42px 30px;
}

form h2{
  font-size: 24px;
  font-weight: 500;
  line-height: 42px;
  text-align: center; 
  color: rgb(16, 16, 16);
  padding-bottom: 15px;
}

.form label{
  display: block;
  color: rgb(16, 16, 16);
}

.form input{
  display: block;
  font-weight: 300;
  margin-top: 10px;
  border-radius: 3px;
  background-color: whitesmoke;
  color: black;
  width: 100%;
  margin-bottom: 20px;
  height: 50px;
  padding: 0 10px;
  border: 1px solid rgb(134, 134, 134);
}

input:focus {
  outline: 1px solid #0d8fd5;
}

::placeholder{
  color: #3c3c3c;
}

::-webkit-input-placeholder{
  opacity: 0.6;
}

::-moz-placeholder{
  opacity: 0.6;
}

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

button {
  text-align: center;
  margin-top: 5px;
  width: 100%;
  left: 50%;
  transition-duration: 0.4s;
  border-radius: 3px;
  border: 1px solid transparent;
  background-color: whitesmoke;
  padding: 5px 0;
}

button:hover{
  border: 1px solid rgba(19,19,19,0.418);
}

.bot-info {  
  margin-top: 20px;
  display: flex;  
  justify-content: center;  
  align-items: center;  
}  


.alert {
  font-size: small;
  position: absolute;
  text-align: center;
  background-color: whitesmoke;
  border: none;
  left: 70%;
  top: 20%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.alert button{
  text-align: center;
  left: 87.5%;
  height: 9.5px;
  border: none;
}

#user-error {
  font-size: 12px;
  text-align: center;
  color: red;
  display: block;
  margin-top: 0.75rem;
}