/**
 * Innotel Typography System
 * Based on Visual Identity Guidelines
 * 
 * Fonts:
 * - ZT Talk: Titles (regular, medium, semibold, bold)
 * - Inter: Body text & Support text (VA -25 for body, VA 174 for support)
 */

:root {
  /* Innotel Colors */
  --innotel-blue: #0072b7;
  --innotel-blue-secondary: #008fbc;
  --innotel-blue-dark: #005a91;
  --innotel-blue-light: #4DBFED;
  --innotel-white: #ffffff;
  --innotel-green: #eded94;
  --innotel-green-dark: #d4d468;
  --innotel-yellow: #E8D44D;
  --innotel-ice: #efefe4;
  
  /* Override Metronic/Bootstrap primary (purple #5867dd) with Innotel blue - system wide */
  --primary: var(--innotel-blue);
  
  /* Typography */
  --font-title: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* Base body typography - Inter Medium (VA -25) */
body {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em;
}

/* Headings - Inter Bold */
h1, h2, h3, h4, h5, h6,
.m-subheader__title,
.m-portlet__head-title,
.m-widget1__title,
.m-widget2__title,
.m-widget3__title,
.m-widget4__title,
.m-widget5__title,
.m-widget6__title,
.m-widget7__title,
.m-widget8__title,
.m-widget9__title,
.m-widget__title,
.m-section__heading,
.m-alert__title,
.modal-title {
  font-family: var(--font-title) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* Body text - Inter Medium (VA -25) */
p, span, div, td, li,
.m-portlet__body,
.m-widget__text,
.m-widget2__desc,
.m-widget3__desc,
.m-section__content,
.m-alert__text {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em;
}

/* Form inputs - Inter Medium (VA -25) */
.form-control,
.m-input,
input,
textarea,
select {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em;
}

/* Labels - Inter Semibold */
label,
.form-label {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

/* Sidebar Navigation - Inter Medium (smooth look) */
.m-nav__link-text,
.m-menu__link-text,
.m-aside-menu .m-menu__nav {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em;
}

/* Breadcrumbs, checkboxes - Inter Medium */
.m-subheader__breadcrumbs,
.breadcrumb-item,
.m-checkbox,
.m-radio {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em;
}

/* Badges - Inter Semibold */
.badge,
.m-badge {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em;
}

/* Buttons - Inter Semibold */
.btn {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em;
}

/* Override Metronic default fonts */
.m-brand__tools,
.m-header-menu .m-menu__nav,
.m-topbar,
.m-footer {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
}

/* Tables - Inter Medium for cell content */
.table,
.table td,
.dataTables_wrapper {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em;
}

/* Table headers - Inter Bold */
.table th,
.table thead th,
thead th {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em;
}

/* Cards and Portlets titles */
.m-portlet__head-text {
  font-family: var(--font-title) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* Per-page overrides: make specific titles use Inter (e.g. Check-ins/Check-outs) */
.innotel-title-inter {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
}

/* Widget titles and stats - Inter Semibold */
.m-widget24__title,
.m-widget1__number,
.m-widget24__stats,
.m-widget4__title,
.m-widget5__title,
.m-widget__info .m-widget__data {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em;
}

/* Widget descriptions - Inter Medium */
.m-widget24__desc,
.m-widget1__desc,
.m-widget4__text,
.m-widget5__info {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em;
}

/* UI helper / empty-state text (match sidebar “SaaS” feel) */
.innotel-ui-muted {
  font-family: var(--font-body) !important;
  font-size: 13px;
  font-weight: 500 !important;
  line-height: 20px;
  color: #8B90A0;
  letter-spacing: -0.01em;
  user-select: none;
}

/* On colored banners (e.g. alert header) */
.innotel-ui-muted.innotel-ui-muted--on-banner {
  color: rgba(255, 255, 255, 0.92);
}

/* Empty state wrapper alignment/spacing */
.innotel-empty-state {
  padding: 24px 0 !important;
  text-align: center;
}

.innotel-empty-state__text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Support text / Small caps - Inter Regular VA 174 (wider letter-spacing) */
.text-uppercase,
.m-badge--wide,
.btn-sm,
small.text-muted {
  letter-spacing: 0.05em;
}

/* Form elements */
.form-control:focus {
  border-color: var(--innotel-blue);
  box-shadow: 0 0 0 0.2rem rgba(0, 114, 183, 0.25);
}

/* Override btn-focus purple with Innotel blue */
.btn-focus {
  background-color: var(--innotel-blue) !important;
  border-color: var(--innotel-blue) !important;
}

.btn-focus:hover,
.btn-focus:focus,
.btn-focus.focus {
  background-color: var(--innotel-blue-dark) !important;
  border-color: var(--innotel-blue-dark) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 114, 183, 0.25) !important;
}

.btn-focus:not(:disabled):not(.disabled):active,
.btn-focus:not(:disabled):not(.disabled).active {
  background-color: var(--innotel-blue-dark) !important;
  border-color: var(--innotel-blue-dark) !important;
}

/* Override btn-primary (Bootstrap/Metronic purple) with Innotel blue */
.btn-primary {
  background-color: var(--innotel-blue) !important;
  border-color: var(--innotel-blue) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
  background-color: var(--innotel-blue-dark) !important;
  border-color: var(--innotel-blue-dark) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 114, 183, 0.25) !important;
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--innotel-blue-dark) !important;
  border-color: var(--innotel-blue-dark) !important;
}

/* Override btn-brand (purple) and btn-accent (teal) with Innotel blue */
.btn-brand {
  background-color: var(--innotel-blue) !important;
  border-color: var(--innotel-blue) !important;
}
.btn-brand:hover,
.btn-brand:focus,
.btn-brand.focus {
  background-color: var(--innotel-blue-dark) !important;
  border-color: var(--innotel-blue-dark) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 114, 183, 0.25) !important;
}
.btn-brand:not(:disabled):not(.disabled):active,
.btn-brand:not(:disabled):not(.disabled).active,
.show > .btn-brand.dropdown-toggle {
  background-color: var(--innotel-blue-dark) !important;
  border-color: var(--innotel-blue-dark) !important;
}

.btn-accent {
  background-color: var(--innotel-blue) !important;
  border-color: var(--innotel-blue) !important;
}
.btn-accent:hover,
.btn-accent:focus,
.btn-accent.focus {
  background-color: var(--innotel-blue-dark) !important;
  border-color: var(--innotel-blue-dark) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 114, 183, 0.25) !important;
}
.btn-accent:not(:disabled):not(.disabled):active,
.btn-accent:not(:disabled):not(.disabled).active,
.show > .btn-accent.dropdown-toggle {
  background-color: var(--innotel-blue-dark) !important;
  border-color: var(--innotel-blue-dark) !important;
}

/* Override btn-warning (orange) with Innotel Verde accent */
.btn-warning {
  background-color: var(--innotel-green) !important;
  border-color: var(--innotel-green-dark) !important;
  color: #2d2d2d !important;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus {
  background-color: var(--innotel-green-dark) !important;
  border-color: #c2cb4a !important;
  color: #2d2d2d !important;
  box-shadow: 0 0 0 0.2rem rgba(237, 237, 148, 0.35) !important;
}
.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
  background-color: var(--innotel-green-dark) !important;
  border-color: #c2cb4a !important;
  color: #2d2d2d !important;
}

/* Sidebar active state - Innotel blue instead of Metronic purple */
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-text,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-icon,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-bullet.m-menu__link-bullet--dot > span,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-bullet.m-menu__link-bullet--line > span,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--line > span,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__ver-arrow,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__ver-arrow {
  color: var(--innotel-blue) !important;
}
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-bullet.m-menu__link-bullet--dot > span,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-bullet.m-menu__link-bullet--line > span,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--line > span {
  background-color: var(--innotel-blue) !important;
}

/* Submenu and mobile sidebar active state */
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-text,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-icon,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-bullet.m-menu__link-bullet--dot > span,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-bullet.m-menu__link-bullet--line > span,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--line > span {
  color: var(--innotel-blue) !important;
}
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-bullet.m-menu__link-bullet--dot > span,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-bullet.m-menu__link-bullet--line > span,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--line > span {
  background-color: var(--innotel-blue) !important;
}

.m-aside-header-menu-mobile.m-aside-header-menu-mobile--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-text,
.m-aside-header-menu-mobile.m-aside-header-menu-mobile--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text,
.m-aside-header-menu-mobile.m-aside-header-menu-mobile--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-icon,
.m-aside-header-menu-mobile.m-aside-header-menu-mobile--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon {
  color: var(--innotel-blue) !important;
}
.m-aside-header-menu-mobile.m-aside-header-menu-mobile--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-bullet.m-menu__link-bullet--dot > span,
.m-aside-header-menu-mobile.m-aside-header-menu-mobile--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span,
.m-aside-header-menu-mobile.m-aside-header-menu-mobile--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-bullet.m-menu__link-bullet--line > span,
.m-aside-header-menu-mobile.m-aside-header-menu-mobile--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--line > span,
.m-aside-header-menu-mobile.m-aside-header-menu-mobile--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__ver-arrow,
.m-aside-header-menu-mobile.m-aside-header-menu-mobile--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__ver-arrow {
  color: var(--innotel-blue) !important;
}
.m-aside-header-menu-mobile.m-aside-header-menu-mobile--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-bullet.m-menu__link-bullet--dot > span,
.m-aside-header-menu-mobile.m-aside-header-menu-mobile--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span,
.m-aside-header-menu-mobile.m-aside-header-menu-mobile--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__heading .m-menu__link-bullet.m-menu__link-bullet--line > span,
.m-aside-header-menu-mobile.m-aside-header-menu-mobile--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--line > span {
  background-color: var(--innotel-blue) !important;
}

/* Links with focus brand color */
.m-link--focus {
  color: var(--innotel-blue) !important;
}

.m-link--focus:hover {
  color: var(--innotel-blue-dark) !important;
}

/* Checkbox and radio focus color */
.m-checkbox--focus > span:after {
  border-color: var(--innotel-blue) !important;
}

.m-radio--focus > span:after {
  background-color: var(--innotel-blue) !important;
}

/* Loader colors */
.m-loader:before {
  border-color: var(--innotel-blue) !important;
  border-right-color: transparent !important;
}

.m-loader.m-loader--light:before {
  border-color: #fff !important;
  border-right-color: transparent !important;
}

/* Progress bars */
.progress-bar.bg-focus {
  background-color: var(--innotel-blue) !important;
}

/* Tabs and nav */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--innotel-blue);
  border-bottom-color: var(--innotel-blue);
}

/* Override Metronic m-tabs-line--primary to use Innotel brand blue (#0072b7) */
.m-tabs-line.m-tabs-line--primary.nav.nav-tabs .nav-link:hover,
.m-tabs-line.m-tabs-line--primary a.m-tabs__link:hover,
.m-tabs-line.m-tabs-line--primary.nav.nav-tabs .nav-link.active,
.m-tabs-line.m-tabs-line--primary a.m-tabs__link.active,
.m-tabs-line.m-tabs-line--skin-dark.m-tabs-line--primary.nav.nav-tabs .nav-link:hover,
.m-tabs-line.m-tabs-line--skin-dark.m-tabs-line--primary a.m-tabs__link:hover,
.m-tabs-line.m-tabs-line--skin-dark.m-tabs-line--primary.nav.nav-tabs .nav-link.active,
.m-tabs-line.m-tabs-line--skin-dark.m-tabs-line--primary a.m-tabs__link.active {
  border-bottom-color: var(--innotel-blue) !important;
}
.m-tabs-line.m-tabs-line--primary.nav.nav-tabs .nav-link:hover,
.m-tabs-line.m-tabs-line--primary.nav.nav-tabs .nav-link.active,
.m-tabs-line.m-tabs-line--primary a.m-tabs__link:hover,
.m-tabs-line.m-tabs-line--primary a.m-tabs__link.active,
.m-tabs-line.m-tabs-line--skin-dark.m-tabs-line--primary.nav.nav-tabs .nav-link:hover,
.m-tabs-line.m-tabs-line--skin-dark.m-tabs-line--primary.nav.nav-tabs .nav-link.active,
.m-tabs-line.m-tabs-line--skin-dark.m-tabs-line--primary a.m-tabs__link:hover,
.m-tabs-line.m-tabs-line--skin-dark.m-tabs-line--primary a.m-tabs__link.active {
  color: var(--innotel-blue) !important;
}
.m-tabs-line.m-tabs-line--primary.nav.nav-tabs .nav-link:hover > i,
.m-tabs-line.m-tabs-line--primary.nav.nav-tabs .nav-link.active > i,
.m-tabs-line.m-tabs-line--primary a.m-tabs__link:hover > i,
.m-tabs-line.m-tabs-line--primary a.m-tabs__link.active > i {
  color: var(--innotel-blue-light) !important;
}

/* m-tabs-line--brand and m-tabs-line--accent → Innotel blue */
.m-tabs-line.m-tabs-line--brand.nav.nav-tabs .nav-link:hover,
.m-tabs-line.m-tabs-line--brand.nav.nav-tabs .nav-link.active,
.m-tabs-line.m-tabs-line--brand a.m-tabs__link:hover,
.m-tabs-line.m-tabs-line--brand a.m-tabs__link.active,
.m-tabs-line.m-tabs-line--accent.nav.nav-tabs .nav-link:hover,
.m-tabs-line.m-tabs-line--accent.nav.nav-tabs .nav-link.active,
.m-tabs-line.m-tabs-line--accent a.m-tabs__link:hover,
.m-tabs-line.m-tabs-line--accent a.m-tabs__link.active {
  color: var(--innotel-blue) !important;
  border-bottom-color: var(--innotel-blue) !important;
}

/* nav-pills brand/accent/primary → Innotel blue */
.nav-pills.nav-pills--brand .nav-link.active,
.nav-pills.nav-pills--brand .nav-item.show .nav-link,
.nav-pills.nav-pills--accent .nav-link.active,
.nav-pills.nav-pills--accent .nav-item.show .nav-link,
.nav-pills.nav-pills--primary .nav-link.active,
.nav-pills.nav-pills--primary .nav-item.show .nav-link {
  background-color: var(--innotel-blue) !important;
}

/* Accent colors */
.m--font-focus {
  color: var(--innotel-blue) !important;
}

.m--bg-focus {
  background-color: var(--innotel-blue) !important;
}

/* m--font-brand, m--bg-brand (Metronic purple #716aca) → Innotel blue */
.m--font-brand {
  color: var(--innotel-blue) !important;
}

.m--bg-brand {
  background-color: var(--innotel-blue) !important;
}

.m--bg-fill-brand {
  background-color: var(--innotel-blue) !important;
}

/* m-badge--brand (notification circles, badges) → Innotel blue */
.m-badge.m-badge--brand {
  background-color: var(--innotel-blue) !important;
}

.m-badge.m-badge-bordered--brand {
  border-color: var(--innotel-blue) !important;
}

/* btn-outline-brand — override Metronic purple (#716aca) with Innotel blue in all states */
.btn-outline-brand,
.btn.btn-outline-brand {
  color: var(--innotel-blue) !important;
  border-color: var(--innotel-blue) !important;
}
.btn-outline-brand i,
.btn.btn-outline-brand i {
  color: inherit !important;
}
.btn-outline-brand:hover,
.btn-outline-brand:focus,
.btn-outline-brand.focus,
.btn-outline-brand:active,
.btn-outline-brand.active,
.btn.btn-outline-brand:hover,
.btn.btn-outline-brand:focus,
.btn.btn-outline-brand.focus,
.btn.btn-outline-brand:active,
.btn.btn-outline-brand.active {
  color: #ffffff !important;
  background-color: var(--innotel-blue) !important;
  border-color: var(--innotel-blue) !important;
}
.btn-outline-brand:hover i,
.btn-outline-brand:focus i,
.btn-outline-brand.focus i,
.btn-outline-brand:active i,
.btn-outline-brand.active i,
.btn.btn-outline-brand:hover i,
.btn.btn-outline-brand:focus i,
.btn.btn-outline-brand:active i,
.btn.btn-outline-brand.active i {
  color: inherit !important;
}
.btn-outline-brand:focus,
.btn-outline-brand.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 114, 183, 0.35) !important;
}
.btn-outline-brand:not(:disabled):not(.disabled):active:focus,
.btn-outline-brand:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-brand.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 114, 183, 0.35) !important;
}

/* m-link--brand */
.m-link.m-link--brand {
  color: var(--innotel-blue) !important;
}
.m-link.m-link--brand:hover {
  color: var(--innotel-blue-dark) !important;
}

/* m-spinner--brand, m-loader--brand */
.m-spinner.m-spinner--brand {
  background-color: var(--innotel-blue) !important;
}
.m-loader.m-loader--brand:before {
  border-top-color: var(--innotel-blue) !important;
}

/* Override Metronic portlet header colors (purple) with Innotel blue */
.m-portlet--primary.m-portlet--head-solid-bg .m-portlet__head {
  background-color: var(--innotel-blue) !important;
  border-color: var(--innotel-blue) !important;
}
.m-portlet--brand.m-portlet--head-solid-bg .m-portlet__head {
  background-color: var(--innotel-blue) !important;
  border-color: var(--innotel-blue) !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c4c4c4;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0;
}

/* Daterangepicker: replace Metronic purple with brand blue */
.daterangepicker .daterangepicker_input .input-mini.active,
.daterangepicker .daterangepicker_input .input-mini:focus {
  border-color: #0072b7;
}
.daterangepicker tbody td.today {
  background: #3d9be0;
}
.daterangepicker tbody td.in-range,
.daterangepicker tbody td.active,
.daterangepicker tbody td.in-range:hover,
.daterangepicker tbody td.active:hover {
  background: #0072b7;
  color: #ffffff;
}
.daterangepicker select.monthselect.active,
.daterangepicker select.monthselect:focus,
.daterangepicker select.yearselect.active,
.daterangepicker select.yearselect:focus,
.daterangepicker select.hourselect.active,
.daterangepicker select.hourselect:focus,
.daterangepicker select.minuteselect.active,
.daterangepicker select.minuteselect:focus,
.daterangepicker select.ampmselect.active,
.daterangepicker select.ampmselect:focus {
  border-color: #0072b7;
}
.daterangepicker .ranges li.active {
  background: #0072b7;
  border-color: #0072b7;
  color: #ffffff;
}
.daterangepicker .ranges .range_inputs .btn.btn-sm.btn-success {
  background: #0072b7;
  border-color: #0072b7;
}

/* Override m-btn--air purple drop shadows with Innotel blue */
.btn-outline-primary.m-btn--air,
.btn-primary.m-btn--air,
.m-btn--gradient-from-primary.m-btn--air,
.btn-outline-brand.m-btn--air,
.btn-brand.m-btn--air,
.m-btn--gradient-from-brand.m-btn--air,
.btn-outline-focus.m-btn--air,
.btn-focus.m-btn--air,
.m-btn--gradient-from-focus.m-btn--air {
  -webkit-box-shadow: 0px 5px 10px 2px rgba(0, 114, 183, 0.19) !important;
  box-shadow: 0px 5px 10px 2px rgba(0, 114, 183, 0.19) !important;
}
.btn-outline-primary.m-btn--air.focus, .btn-outline-primary.m-btn--air:focus, .btn-outline-primary.m-btn--air:hover,
.btn-primary.m-btn--air.focus, .btn-primary.m-btn--air:focus, .btn-primary.m-btn--air:hover,
.m-btn--gradient-from-primary.m-btn--air.focus, .m-btn--gradient-from-primary.m-btn--air:focus, .m-btn--gradient-from-primary.m-btn--air:hover,
.btn-outline-brand.m-btn--air.focus, .btn-outline-brand.m-btn--air:focus, .btn-outline-brand.m-btn--air:hover,
.btn-brand.m-btn--air.focus, .btn-brand.m-btn--air:focus, .btn-brand.m-btn--air:hover,
.m-btn--gradient-from-brand.m-btn--air.focus, .m-btn--gradient-from-brand.m-btn--air:focus, .m-btn--gradient-from-brand.m-btn--air:hover,
.btn-outline-focus.m-btn--air.focus, .btn-outline-focus.m-btn--air:focus, .btn-outline-focus.m-btn--air:hover,
.btn-focus.m-btn--air.focus, .btn-focus.m-btn--air:focus, .btn-focus.m-btn--air:hover,
.m-btn--gradient-from-focus.m-btn--air.focus, .m-btn--gradient-from-focus.m-btn--air:focus, .m-btn--gradient-from-focus.m-btn--air:hover {
  -webkit-box-shadow: 0px 5px 10px 2px rgba(0, 114, 183, 0.36) !important;
  box-shadow: 0px 5px 10px 2px rgba(0, 114, 183, 0.36) !important;
}

/* Override m-btn--air secondary/default purple shadow and hover */
.btn.m-btn--air.btn-default,
.btn.m-btn--air.btn-secondary {
  -webkit-box-shadow: 0px 3px 20px 0px rgba(0, 114, 183, 0.12) !important;
  box-shadow: 0px 3px 20px 0px rgba(0, 114, 183, 0.12) !important;
}
.btn.m-btn--air.btn-default.focus, .btn.m-btn--air.btn-default:focus, .btn.m-btn--air.btn-default:hover:not(:disabled):not(.active),
.btn.m-btn--air.btn-secondary.focus, .btn.m-btn--air.btn-secondary:focus, .btn.m-btn--air.btn-secondary:hover:not(:disabled):not(.active) {
  -webkit-box-shadow: 0px 3px 20px 0px rgba(0, 114, 183, 0.22) !important;
  box-shadow: 0px 3px 20px 0px rgba(0, 114, 183, 0.22) !important;
  background: var(--innotel-blue) !important;
  border-color: var(--innotel-blue) !important;
}

/* Override m-btn--hover-brand purple */
.btn.m-btn--hover-brand:hover, .btn.m-btn--hover-brand.active, .btn.m-btn--hover-brand:active, .btn.m-btn--hover-brand:focus,
.show > .btn.m-btn--hover-brand.dropdown-toggle {
  border-color: var(--innotel-blue) !important;
  background-color: var(--innotel-blue) !important;
}

/* Fix bootstrap-select focus border (override Metronic purple) */
.bootstrap-select .btn:focus,
.bootstrap-select .btn.active,
.bootstrap-select.open > .btn {
  outline: none !important;
  border-color: var(--innotel-blue) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 114, 183, 0.25) !important;
}

/* Fix bootstrap-select checkmark (Glyphicon missing, renders as square) */
.bootstrap-select .check-mark {
  display: none !important;
}
.bootstrap-select .dropdown-menu .selected span.text::after {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  color: var(--innotel-blue);
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
.bootstrap-select .dropdown-menu li a {
  position: relative;
}