:root {
  --smile-shell-blue-rgb: 14, 142, 191;
  --smile-shell-deep-blue-rgb: 0, 119, 176;
}

.app-header,
.smile-auth-footer {
  -webkit-backdrop-filter: saturate(155%) blur(19px) !important;
  backdrop-filter: saturate(155%) blur(19px) !important;
  background-color: rgba(var(--smile-shell-blue-rgb), .90) !important;
  background-image:
    radial-gradient(circle at 22% -30%, rgba(255,255,255,.34) 0%, rgba(255,255,255,.13) 28%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.075) 48%, rgba(255,255,255,.015) 100%) !important;
}

.app-header,
.smile-auth-footer {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(255,255,255,.13),
    0 -2px 12px rgba(190,241,255,.12),
    0 -10px 30px rgba(0,75,110,.15) !important;
}

.smile-auth-footer::before {
  display: none !important;
  content: none !important;
}

.smile-auth-footer__item {
  position: relative;
  z-index: 0;
  border-radius: 0 !important;
  overflow: visible;
}

.smile-auth-footer__item.is-active {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.smile-auth-footer__item.is-active::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: -14px;
  bottom: calc(-1 * env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(180,235,251,.24) 0%, rgba(135,217,242,.30) 48%, rgba(104,202,234,.24) 100%);
  box-shadow: none;
  pointer-events: none;
}

.smile-auth-footer__quick-circle {
  box-sizing: border-box;
  flex: 0 0 76px;
  width: 76px !important;
  height: 76px !important;
  border: 2px solid rgba(255,255,255,.90) !important;
  -webkit-backdrop-filter: saturate(165%) blur(16px);
  backdrop-filter: saturate(165%) blur(16px);
  background-color: rgba(var(--smile-shell-deep-blue-rgb), .82) !important;
  background-image:
    radial-gradient(circle at 29% 18%, rgba(255,255,255,.27) 0%, rgba(255,255,255,.08) 34%, rgba(255,255,255,0) 61%),
    linear-gradient(180deg, rgba(60,191,231,.31) 0%, rgba(0,119,176,.20) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -1px 0 rgba(181,237,255,.16),
    0 0 17px rgba(174,234,255,.28),
    0 8px 22px rgba(0,66,103,.25) !important;
  outline: 0 !important;
}

.app-header > .s2812-header-trigger {
  display: none !important;
}

.smile-auth-footer__quick-logo {
  position: relative;
  top: 4px;
  display: block;
  width: 48px !important;
  height: 48px !important;
  overflow: visible;
}

.smile-auth-footer__quick-label {
  display: block !important;
  margin-top: 3px !important;
  color: #fff !important;
  font: 900 .62rem/1.3 Vazirmatn,Tahoma,Arial,sans-serif !important;
  text-shadow: 0 1px 3px rgba(0,61,103,.28);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .app-header,
  .smile-auth-footer {
    background-color: rgba(var(--smile-shell-blue-rgb), .74) !important;
  }

  .smile-auth-footer__quick-circle {
    background-color: rgba(var(--smile-shell-deep-blue-rgb), .78) !important;
  }
}

@media (min-width: 621px) {
  .smile-auth-footer__item.is-active::before {
    top: -7px;
    bottom: -7px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .app-header,
  .smile-auth-footer {
    background-color: rgb(var(--smile-shell-blue-rgb)) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .smile-auth-footer__quick-circle {
    background-color: rgb(var(--smile-shell-deep-blue-rgb)) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}