:root {
  --openym-primary: #0877d1;
  --openym-primary-dark: #05529a;
  --openym-accent: #00cfff;
  --openym-navy: #101c2c;
  --openym-surface: #18283a;
  --openym-light-bg: #f4f8fc;
  --openym-text: #1d2939;
  --openym-muted: #667085;
  --openym-border: #d8e3ef;
  --openym-navbar-bg: #ffffff;
  --openym-menu-bg: #ffffff;
  --openym-navbar-text: #344054;
  --openym-card-shadow: 0 2px 8px rgba(16, 24, 40, 0.06);
  --bs-primary: var(--openym-primary);
  --bs-primary-rgb: 8, 119, 209;
  --bs-info: var(--openym-accent);
  --bs-info-rgb: 0, 207, 255;
  --bs-link-color: var(--openym-primary);
  --bs-link-hover-color: var(--openym-primary-dark);
  --bs-body-color: var(--openym-text);
  --bs-body-bg: var(--openym-light-bg);
  --bs-body-bg-rgb: 244, 248, 252;
  --bs-border-color: var(--openym-border);
}

.light-style {
  --bs-primary: var(--openym-primary);
  --bs-primary-rgb: 8, 119, 209;
  --bs-info: var(--openym-accent);
  --bs-info-rgb: 0, 207, 255;
  --bs-heading-color: var(--openym-navy);
  --bs-card-bg: #ffffff;
  --bs-navbar-bg: #ffffff;
  --bs-menu-bg: #ffffff;
}

.dark-style {
  --bs-primary: var(--openym-primary);
  --bs-primary-rgb: 8, 119, 209;
  --bs-info: var(--openym-accent);
  --bs-info-rgb: 0, 207, 255;
  --bs-body-color: #d8e8f5;
  --bs-body-bg: var(--openym-navy);
  --bs-card-bg: var(--openym-surface);
  --bs-navbar-bg: #0d1929;
  --bs-menu-bg: #132238;
}

body,
.light-style body,
.light-style .layout-wrapper,
.light-style .layout-page,
.light-style .content-wrapper {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

.dark-style body,
.dark-style .layout-wrapper,
.dark-style .layout-page,
.dark-style .content-wrapper {
  background-color: var(--openym-navy) !important;
  color: #d8e8f5 !important;
}

.card,
.dropdown-menu,
.modal-content,
.popover,
.table {
  background-color: var(--bs-card-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
  box-shadow: var(--openym-card-shadow) !important;
}

.card-title,
.card-header,
.dropdown-header,
.text-body,
.text-heading {
  color: var(--openym-text) !important;
}

.text-muted,
.text-body-secondary {
  color: var(--openym-muted) !important;
}

.bg-primary,
.btn-primary,
.badge.bg-primary {
  background-color: var(--openym-primary) !important;
  border-color: var(--openym-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--openym-primary-dark) !important;
  border-color: var(--openym-primary-dark) !important;
}

.text-primary,
.link-primary {
  color: var(--openym-primary) !important;
}

.bg-info,
.btn-info {
  background-color: var(--openym-accent) !important;
  border-color: var(--openym-accent) !important;
}

.bg-label-primary,
.btn-label-primary {
  background-color: rgba(8, 119, 209, 0.18) !important;
  color: var(--openym-primary) !important;
}

.layout-navbar,
.layout-horizontal .layout-navbar {
  background: var(--bs-navbar-bg) !important;
  border-bottom: 1px solid var(--openym-border) !important;
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.06) !important;
}

.layout-menu-horizontal,
.bg-menu-theme,
.bg-menu-theme.menu-horizontal,
.bg-menu-theme.menu-horizontal .menu-inner > .menu-item > .menu-sub {
  background-color: var(--bs-menu-bg) !important;
  border-color: var(--openym-border) !important;
}

.bg-navbar-theme,
.bg-menu-theme .menu-link,
.bg-menu-theme .menu-text {
  color: var(--openym-navbar-text) !important;
}

.bg-menu-theme.menu-horizontal .menu-inner > .menu-item.active > .menu-link.menu-toggle {
  background: linear-gradient(72.47deg, var(--openym-primary) 22.16%, rgba(0, 207, 255, 0.82) 100%) !important;
  color: #ffffff !important;
}

.bg-menu-theme.menu-horizontal .menu-item.active > .menu-link:not(.menu-toggle) {
  background: rgba(8, 119, 209, 0.2) !important;
  color: var(--openym-primary) !important;
}

.swiper-card-advance-bg,
.swiper-card-advance-bg .card-title,
.swiper-card-advance-bg .card-header,
.swiper-card-advance-bg .text-muted,
.swiper-card-advance-bg small {
  color: #ffffff !important;
}

.swiper-container.swiper-card-advance-bg {
  background: linear-gradient(110deg, #0877d1 0%, #00a9e8 55%, #00cfff 100%) !important;
}

.swiper-container .swiper-wrapper .swiper-slide .website-analytics-text-bg {
  background-color: rgba(5, 82, 154, 0.58) !important;
}

.openym-brand-logo {
  display: block;
  width: auto;
  max-width: 11rem;
  height: 2.25rem;
  object-fit: contain;
}