* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Zilla Slab", serif;
  font-weight: 500;
}

body {
  font-size: 1.1em;
  background: #F5F5F5;
}

.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-select ~ label::after {
  background-color: transparent;
}


.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.login-dark {
  /*height: 1000px;*/
  background-size: cover;
  position: relative;
}

.login-dark form {
  width: 400px;
  background-color: #54585A;
  padding: 20px;
  border-radius: 0;
  /*transform: translate(-50%, -50%);*/
  position: relative;
  /*top: 50%;*/
  /*left: 50%;*/
  color: #0c0c0c;
  box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.3);
}

.login-dark .illustration {
  text-align: center;
  padding: 15px 0 15px;
  font-size: 100px;
  color: #2980ef;
}

.login-dark form .form-control {
  background: none;
  border: none;
  border-bottom: 1px solid #434a52;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  color: inherit;
}

.login-dark form .btn-primary-login {
  background: #5FC5DC;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 11px;
  box-shadow: none;
  margin-top: 14px;
  text-shadow: none;
  outline: none;
  display: block;
  font-weight: 500;
  font-size: 1.2em;
}

.login-dark form .btn-primary-login:hover,
.login-dark form .btn-primary-login:active {
  box-shadow: 0 1px 10px rgb(95, 197, 220, 0.5);
  color: black;
  outline: none;
  transform: translateY(1px);
  background: #5FC5DC;
}


.login-dark form .btn-danger-login {
  background: #DC3545;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 11px;
  box-shadow: none;
  margin-top: 14px;
  text-shadow: none;
  outline: none;
  display: block;
  font-weight: 500;
  font-size: 1.2em;
}

.login-dark form .btn-danger-login:hover,
.login-dark form .btn-danger-login:active {
  box-shadow: 0 1px 10px rgb(95, 197, 220, 0.5);
  color: black;
  outline: none;
  transform: translateY(1px);
  background: #DC3545;
}


#signInForm .forgot {
  display: block;
  text-align: right;
  font-size: 1.0em;
  font-style: italic;
  color: #D3D7DA !important;
  opacity: 0.9;
  text-decoration: none;
}

#signInForm .forgot:hover,
#signInForm .forgot:active {
  opacity: 1;
  color: #FFB81C !important;
  text-decoration: none;
}

.validate-message {
  color: #AF8700;
  font-weight: bold;
}

.login-dark form ::placeholder {
  font-style: italic;
  font-size: 1.0em;
}

.login-dark form .form-check-input:checked {
  background-color: #5FC5DC;
  border-color: #5FC5DC;
}

.login-dark form .form-check-label, label {
  color: #5FC5DC;
  font-size: 1.0em;
}

.login-dark form .input-field {
  border-bottom: 1px solid #5FC5DC !important;
  font-size: 1.05em;
}

.app-version {
  /*display: block;*/
  text-align: center;
  font-size: 0.9em;
  font-style: italic;
  color: #D3D7DA;
  opacity: 0.9;
  text-decoration: none;
  margin-top: 0.9em;
}

.volunteer-button {
  background: #FFB81C;
  text-shadow: none;
  border: none;
  outline: none;
  padding: 9px 27px;
  border-radius: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.volunteer-button:hover,
.volunteer-button:active {
  color: black;
  outline: none;
  transform: translateY(1px);
  text-decoration: none;
  background: #5FC5DC !important;
  box-shadow: none !important;
}

a:visited,
a:link {
  color: black !important;
}

.confirm-green { color: #198754 !important; }
.confirm-green:hover { color: white !important; background-color: #198754; }
.confirm-red { color: #DC3545 !important; }
.confirm-red:hover { color: white !important; background-color: #DC3545; }