body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#navbarContainer {
  width: 100%;
  overflow: hidden;
}

#top {
  background-color: #f8f9ff;
}

#middle {
  /* background-color: #ff0099; */
  background-color: #f8f9ff;
  background-image: url('../images/login_background.svg');
  background-repeat: no-repeat;
  background-position: 50% 30%;
  flex-grow: 1;
  width: 100%;
  /* height: 300px; */
  display: flex;
  justify-content: center;
  align-items: center;
}

#bottom {
  background-color: #4650bc;
  padding: 33px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

#bottom .contact {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 50px;
}

#bottom .contact .text {
  display: inline-block;
  font: normal normal normal 16px Open Sans;
  color: white;
  margin-left: 10px;
}

#loginCard {
  background: #f8f9ff 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 36px #4650bc33;
  border-radius: 16px;
  width: 350px;
  /* height: 320px; */
  margin-top: -3%;
  padding: 40px 20px;
}

#loginCard .title {
  font: normal normal bold 18px Open Sans;
  letter-spacing: 0px;
  color: #0f1665;
  text-align: center;
}

#loginCard .description {
  text-align: center;
  font: normal normal normal 14px Open Sans;
  letter-spacing: 0px;
  color: #8287b1;
  margin-top: 7px;
}

#loginCard input {
  padding: 10px 20px;
  border-radius: 20px;
  border: none;
  display: block;
  margin: 10px 0;
  width: 100%;
}

#loginCard input::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #6975fc;
  opacity: 1; /* Firefox */
}

#loginCard input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #6975fc;
}

#loginCard input::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #6975fc;
}

#loginCard input:focus,
#btnSignin:focus {
  outline: none;
}

#btnSignin {
  background-color: #4650bc;
  padding: 12px 30px;
  font: normal normal bold 16px Open Sans;
  letter-spacing: 0px;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  margin-top: 20px;
  margin: 0 auto;
}

#formSignin {
  text-align: center;
  margin: 33px 0 0 0;
}

.link {
  font: normal normal normal 12px Open Sans;
  letter-spacing: 0px;
  color: #6975fc;
}

.noUnderline {
  text-decoration: none;
}

.font-14 {
  font: normal normal normal 14px Open Sans !important;
}

#forgotPasswordContainer {
  text-align: left;
  padding-left: 20px;
  margin-bottom: 20px;
}

#registerContainer {
  font: normal normal normal 14px Open Sans;
  letter-spacing: 0px;
  color: #0f1665;
  margin-top: 20px;
}