body {
  background-color: #f5f5f5;
}

.login-panel { background: url('../assets/login-bg.jpg') top right no-repeat; min-height: 100vh; padding: 80px 40px; position: relative; }
  .login-panel .container { max-width: 100%; }
  .login-panel .contained-text { max-width: 400px; }
  .login-panel img { margin-bottom: 45px; }
  .login-panel h1 { color: #333366; font-size: 32px; line-height: 38px; }
  .login-panel .buttons { margin-top: 25px; }
    .login-panel .buttons .btn { font-size: 18px; font-weight: 500; }

.form-control {
  color: black;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #a1a1a1;
  border-radius: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

.form-control:focus {
  background-color: transparent;
  border-bottom: 1px solid #a1a1a1;
  outline: none;
  box-shadow: none;
}

.form-control.is-invalid:focus {
  box-shadow: none;
}

.form-floating > .form-control::placeholder {
  color: transparent;
}

.form-floating label {
  color: #666;
  font-weight: 400;
  font-size: 18px;
}

.form-floating > .form-control:focus ~ label {
  color: #666;
}

.form-floating > label::after {
  background-color: transparent !important;
}



@media screen and (max-width: 1780px) {

  .login-panel { background-size: 1780px; }

}

@media screen and (max-width: 1700px) {

  .login-panel { background-size: 1700px; }

}

@media screen and (max-width: 1620px) {

  .login-panel { background-size: 1620px; }

}

@media screen and (max-width: 1560px) {

  .login-panel { background-size: 1560px; }

}

@media screen and (max-width: 1500px) {

  .login-panel { background-size: 1460px; }

}

@media screen and (max-width: 1440px) {

  .login-panel { background-size: 1400px; background-position: left; }

}