:root {
  --fracto-ink: #083838;
  --fracto-teal: #008090;
  --fracto-green: #00b080;
  --fracto-mint: #68e070;
  --primary: var(--fracto-teal);
}

.page-card-head img.app-logo {
  width: auto;
  max-width: 150px;
  max-height: 40px;
}

.for-login .page-card,
.for-forgot .page-card,
.for-signup .page-card,
.for-email-login .page-card,
.for-login-with-email-link .page-card {
  border-color: rgba(0, 128, 144, 0.14);
}

.for-login .btn-login,
.for-email-login .btn-login,
.for-login-with-email-link .btn-login,
.for-forgot .btn-primary,
.for-signup .btn-primary {
  background: var(--fracto-ink) !important;
  border-color: var(--fracto-ink) !important;
  color: #fff !important;
}

.for-login .btn-login:hover,
.for-email-login .btn-login:hover,
.for-login-with-email-link .btn-login:hover,
.for-forgot .btn-primary:hover,
.for-signup .btn-primary:hover {
  background: var(--fracto-teal) !important;
  border-color: var(--fracto-teal) !important;
}

.form-control:focus {
  border-color: var(--fracto-teal) !important;
  box-shadow: 0 0 0 2px rgba(0, 128, 144, 0.12) !important;
}

.splash img {
  width: 150px !important;
  max-width: 150px !important;
}

.sidebar-header .header-logo img,
.app-switcher-dropdown .app-logo {
  object-fit: contain;
}

.about-dialog .fracto-about-wordmark {
  display: block;
  width: 150px;
  height: auto;
  margin: 0 auto 16px;
}