* {
  font-family: "Rubik", sans-serif !important;
}

@media only screen and (min-width: 800px) {
  .form-container {
    width: 50rem;
    height: 29rem;
  }

  .form-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

@media only screen and (max-width: 800px) {
  .form-content {
    padding-top: 20%;
  }
}

/*

@media only screen and (max-width: 650px) {
  html {
    font-size: 10px;
  }
}

@media only screen and (max-width: 450px) {
  html {
    font-size: 7px;
  }
} */

.bg-kibo {
  background-color: #22b0ca;
}

.form-container h2 {
  font-size: 1.5rem;
}

.btn-login {
  background-color: #22b0ca !important;
  margin-top: 1rem;
  padding: 0.8rem;
}

.main-area {
  background-image: url("images/background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
}

.form-container {
  background-color: #36393f;
  padding: 2.5rem;
  color: white !important;
}

.label-custom strong {
  color: red !important;
  padding-left: 0.2rem;
}

.label-custom {
  font-size: 0.8rem;
  padding-bottom: 0.5rem;
  color: #919398;
}

.form-main {
  padding-top: 0.5rem;
}

.form-main input:focus {
  background-color: #202225 !important;
  color: white !important;
}

.form-main input {
  color: white !important;
  margin-bottom: 1rem;
  background-color: #202225;
  border-color: #202225;
  transition: background-color 0.6s ease-in-out;
}