:root {
  --grf-primary: #199dc5;
  --grf-primary-dark: #237a94;
  --grf-ink: #333333;
  --grf-text: #666666;
  --grf-soft: #edf8fb;
}

body {
  color: var(--grf-text);
}

body.login-grf {
  background: linear-gradient(135deg, #f8fbfc 0%, #e7f5f8 45%, #d7eef3 100%) !important;
}

.bg-gradient-primary {
  background-color: var(--grf-primary);
  background-image: linear-gradient(180deg, var(--grf-primary) 0%, var(--grf-primary-dark) 100%);
  background-size: cover;
}

.btn-primary {
  color: #fff;
  background-color: var(--grf-primary);
  border-color: var(--grf-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  color: var(--grf-primary-dark);
  background-color: #fff;
  border-color: var(--grf-primary-dark);
}

.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--grf-primary);
  border-color: var(--grf-primary);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--grf-primary-dark);
  border-color: var(--grf-primary-dark);
}

.text-primary {
  color: var(--grf-primary) !important;
}

.border-left-primary {
  border-left-color: var(--grf-primary) !important;
}

.page-item.active .page-link {
  background-color: var(--grf-primary);
  border-color: var(--grf-primary);
}

.sidebar-dark .sidebar-brand,
.sidebar-dark .nav-item .nav-link:hover,
.sidebar-dark .nav-item .nav-link:active,
.sidebar-dark .nav-item .nav-link:focus {
  color: #fff;
}

.sidebar-dark .sidebar-heading {
  color: rgba(255, 255, 255, .72);
}

.bg-login-image {
  background:
    radial-gradient(circle at 50% 45%, rgba(25, 157, 197, .16), rgba(255, 255, 255, 0) 58%),
    linear-gradient(135deg, #f8fbfc 0%, #e6f5f8 100%);
  position: relative;
  min-height: 34rem;
}

.bg-login-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/grf-login-balena.png?v=balena2") center center / 86% auto no-repeat;
}

.gelp-login-brand {
  font-weight: 800;
  letter-spacing: .08rem;
}

.gelp-login-brand-main {
  color: var(--grf-primary);
}

.gelp-login-logo {
  width: 118px;
  max-width: 100%;
  height: auto;
}

.grf-profile-logo {
  width: 3.4rem !important;
  height: 1.75rem !important;
  border-radius: 0 !important;
  object-fit: contain;
  background: #fff;
  padding: .1rem .25rem;
}