.xl-logo {
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
  color: #f2f7fb;
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 800;
}

.xl-logo-canvas,
.xl-logo-fallback {
  display: block;
}

.xl-logo-fallback {
  height: 36px;
  width: auto;
  max-width: 176px;
}

.xl-logo[data-size="header"] .xl-logo-fallback {
  height: 32px;
  max-width: 168px;
}

.xl-logo[data-size="footer"] .xl-logo-fallback {
  height: 48px;
  max-width: 228px;
}

.xl-logo[data-size="auth"] .xl-logo-fallback {
  height: 64px;
  max-width: 260px;
}

.xl-logo[data-size="preloader"] .xl-logo-fallback {
  height: 64px;
  max-width: 112px;
}

.xl-logo[data-size="tab"] .xl-logo-fallback {
  height: 22px;
  max-width: 40px;
}

.xl-logo .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}