:root {
  --cs-primary: #2f86a6;
  --cs-primary-hover: #256b86;
  --cs-success: #1f9a7a;
  --cs-text: #323a46;
  --cs-border: #d8e2ea;
  --cs-focus: rgba(47, 134, 166, 0.18);
}

body.my-login-page {
  color: var(--cs-text);
}

.my-login-page .card-wrapper {
  max-width: 94%;
}

.my-login-page .card {
  border: 1px solid var(--cs-border);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(50, 58, 70, 0.1);
}

.my-login-page .card.fat {
  padding: 8px;
}

.my-login-page .form-control {
  border: 1px solid var(--cs-border);
  border-radius: 6px;
  min-height: 44px;
}

.my-login-page .form-control:focus {
  border-color: var(--cs-primary);
  box-shadow: 0 0 0 0.18rem var(--cs-focus);
}

.my-login-page .btn {
  border-radius: 6px;
  font-weight: 500;
  min-height: 44px;
}

.my-login-page .btn-primary {
  background-color: var(--cs-primary);
  border-color: var(--cs-primary);
}

.my-login-page .btn-primary:hover,
.my-login-page .btn-primary:active,
.my-login-page .btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--cs-primary-hover);
  border-color: var(--cs-primary-hover);
}

.my-login-page .btn-success {
  background-color: var(--cs-success);
  border-color: var(--cs-success);
}

@media (max-width: 425px) {
  body.my-login-page {
    background-position: 20% 0;
  }

  .my-login-page .brand {
    margin: 16px auto;
  }

  .my-login-page .card-wrapper {
    width: 94%;
  }

  .my-login-page .card.fat {
    padding: 0;
  }

  .my-login-page .card.fat .card-body {
    padding: 20px 18px;
  }

  .my-login-page .footer {
    margin: 24px 0;
  }
}