body {
  display: flex;
  justify-content: center;
  align-items: center;
  /*height: 100vh;*/
  background-color: #f8f9fa;
  padding-top: 100px !important;
  min-width: 404px !important;
}
.login-container {
  /*width: 100%;*/
  min-width: 404px !important;
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-left: 20px !important; 
  margin-right: 50px;
}
.main-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}
.main-menu a {
  text-decoration: none;
  color: #000;
  font-weight: bold;
}
.login-container-form {
  width: 404px;
  margin: 50px auto;
}


/* The message box is shown when the user clicks on the password field */
#message {
  display:none;
  background: #f1f1f1;
  color: #000;
  position: relative;
  padding: 1px;
  margin-top: 5px;
}

#message2 {
  display:none;
  background: #f1f1f1;
  color: #000;
  position: relative;
  padding: 1px;
  margin-top: 5px;
}

#message p {
  padding: 2px 5px;
  font-size: 12px;
}

#message2 p {
  padding: 2px 5px;
  font-size: 12px;
}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
  color: green;
}

.valid:before {
  position: relative;
  left: -5px;
  content: "✔";
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
  color: red;
}

.invalid:before {
  position: relative;
  left: -5px;
  content: "✖";
}

.login-form {
  width: 340px;
  margin: 50px auto;
}
.login-form form {    
  margin-bottom: 5px;
  background: #f7f7f7;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  padding: 30px;
}