html,
body {
  height: 100%;
}

body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="text"] {
  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;
}

@media (prefers-color-scheme: dark) {
  /*
  From theme_dark.scss
  $primary-dark-mode: #45973a;
  $danger-dark-mode: #b71631;
  $bg-dark-mode: #161618;
  $bg-dark-mode-accent: #21262d;
  $bg-light-dark-mode: #1c1c1f;
  $text-color-dark-mode: #abb2bf;
  $border-color-dark-mode: #47494f;
   */
  body {
    background-color: #161618 !important;
    color: #abb2bf;
  }

  svg.logo .text {
    fill: #abb2bf!important;
  }

  .form-control:not(.is-invalid):not(.btn) {
    border-color: #47494f;
  }

  .form-control:not(.btn) {
    background-color: #161618;
    color: #abb2bf;
  }

  .form-control:not(.btn)::placeholder {
    color: #abb2bf;
  }

  .form-control:not(.btn):focus {
    background-color: #1c1c1f !important;
    color: #8e97a9 !important;
  }

  .btn-primary {
  color: #fff;
    background-color: #17541f;
    border-color: #17541f;
  }

  .btn-primary:hover, .btn-primary:focus {
    background-color: #0f3614;
    border-color: #0c2c10;
  }

  .btn-primary:not(:disabled):not(.disabled):active {
    background-color: #0c2c10;
    border-color: #09220d;
  }
}