html,
body {
  height: 100%;
  font-family: 'Poppins', sans-serif;
}

.form-signin {
  max-width: 500px;
  padding: 1rem;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #333366;
  --bs-btn-border-color: #333366;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #66ccff;
  --bs-btn-hover-border-color: #66ccff;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #66ccff;
  --bs-btn-active-border-color: #66ccff;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #333366;
  --bs-btn-disabled-border-color: #333366;
}

html { background: #172734 url('../img/comms-hub-login-bg-1.jpg') top center no-repeat; background-size: cover; }
body { background: none; }

.login-background { padding: 35px; }

.login-panel { background: #ffffff; padding: 45px 45px 45px 45px; position: relative; border-radius: 20px; max-width: 480px; }
  .login-panel img { margin-bottom: 30px; }
  .login-panel h4 { color: #333366; font-size: 30px; line-height: 36px; font-weight: 600; margin-bottom: 12px; }
  .login-panel p { color: #666666; font-size: 18px; line-height: 26px; margin-bottom: 25px; }
  .login-panel p.bottom { margin: 0px; }
  .login-panel p:last-child { margin-bottom: 0px; }

  .login-panel .form-group { margin-bottom: 15px; }
  .login-panel .form-control { color: #333333; border-bottom: 1px solid #ccc; padding-left: 0px; padding-right: 0px; border-top: 0px; border-left: 0px; border-right: 0px; border-radius: 0px; box-shadow: none!important; }
  .login-panel .form-control.is-invalid { border-color: #dc3545; }
  .login-panel .form-control:focus + label { left: -2px; transform: scale(.85) translateY(-.9rem) translateX(.15rem); }
  .login-panel .form-control:not(:placeholder-shown) + label { left: -2px; transform: scale(.85) translateY(-.9rem) translateX(.15rem); }
  .login-panel .form-control + label { left: -2px; color: #666666; font-size: 18px; padding-left: 0px; padding-right: 0px; }
  .login-panel .checkbox { position: relative; margin-top: 25px; margin-bottom: 0px; }
  .login-panel .checkbox input[type="checkbox"] { height: 32px; width: 100%; position: absolute; margin-top: 0px; margin-left: -20px; }
  .login-panel .checkbox label { color: #666666; font-size: 18px; line-height: 28px; padding-left: 19px; }
  .login-panel .checkbox label::before { width: 30px; height: 30px; border: 1px solid #cccccc; }
  .login-panel .checkbox label::after { color: #3399cc; width: 30px; height: 30px; font-size: 20px; padding-left: 5px; padding-top: 1px; }
  .login-panel .alert-danger { color: #be0012; }

  .login-panel .btn { font-size: 18px; font-weight: 600; color: #fff; border-radius: 30px; box-shadow: none; padding: 8px 26px; margin: 15px 0px 0px 0px; width: 100%; }
  .login-panel .btn-primary { margin-top: 30px; }
  .login-panel .btn-outline-primary { color: #333366; border-color: #333366; }
  .login-panel .btn-outline-primary:hover { color: #ffffff; background: #333366; border-color: #333366; }
  .login-panel .bottom { margin-top: 30px; }
    .login-panel .bottom p:last-child { margin-bottom: 0px; }