:root {
  --mpg-dark-blue: #003a5d;
  --mpg-medium-blue: #5f8db5;
  --mpg-light-blue: #a2c7e2;
  --mpg-dark-gray: #5b6670;
  --mpg-medium-gray: #c1c5c8;
  --mpg-green: #789904;
  --mpg-red: #c54b38;
  --mpg-orange: #d6832b;
  --mpg-yellow: #f4c55c;
}

html,
body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--mpg-dark-gray);
  background: #f7fafc;
}

body {
  background:
    linear-gradient(180deg, rgba(162, 199, 226, 0.18), rgba(247, 250, 252, 0) 260px),
    #f7fafc !important;
}

a {
  color: var(--mpg-dark-blue);
}

a:hover,
a:focus {
  color: var(--mpg-medium-blue);
}

.navbar,
.ant-menu-horizontal,
header[role="banner"] {
  background: var(--mpg-dark-blue) !important;
  border-bottom: 0 !important;
  box-shadow: 0 8px 24px rgba(0, 58, 93, 0.16) !important;
}

.navbar a,
.navbar button,
.navbar .ant-menu-title-content,
.ant-menu-horizontal > .ant-menu-item,
.ant-menu-horizontal > .ant-menu-submenu,
header[role="banner"] a,
header[role="banner"] button {
  color: #ffffff !important;
}

.navbar .ant-menu,
header[role="banner"] .ant-menu {
  background: transparent !important;
}

.navbar-brand img,
img[src*="mpg-logo-header"] {
  max-height: 38px;
  width: auto;
  object-fit: contain;
  background: #ffffff;
  border-radius: 4px;
  padding: 4px 8px;
}

.navbar-brand,
.navbar-brand:hover,
.navbar-brand:focus {
  color: var(--mpg-dark-blue);
  font-weight: 700;
  letter-spacing: 0;
}

.ant-btn-primary,
button.btn-primary,
.btn.btn-primary {
  background: var(--mpg-dark-blue);
  border-color: var(--mpg-dark-blue);
  border-radius: 4px !important;
  box-shadow: 0 4px 12px rgba(0, 58, 93, 0.18);
}

.ant-btn-primary:hover,
.ant-btn-primary:focus,
button.btn-primary:hover,
button.btn-primary:focus,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
  background: var(--mpg-medium-blue);
  border-color: var(--mpg-medium-blue);
}

.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn,
.ant-menu-item-selected,
.ant-menu-item-active,
.ant-dropdown-menu-item-selected {
  color: var(--mpg-dark-blue);
}

.ant-tabs-ink-bar,
.ant-switch-checked,
.ant-checkbox-checked .ant-checkbox-inner {
  background: var(--mpg-dark-blue);
}

.ant-checkbox-checked .ant-checkbox-inner,
.ant-select-focused .ant-select-selector,
.ant-input:focus,
.ant-input-focused {
  border-color: var(--mpg-dark-blue);
}

.dashboard-header,
.dashboard-component-header,
.chart-header,
.slice-header,
h1,
h2,
h3 {
  color: var(--mpg-dark-blue);
  letter-spacing: 0;
}

h1,
.dashboard-header .editable-title input,
.dashboard-header .editable-title span,
.welcome h1,
[data-test="dashboard-title"] {
  font-weight: 700 !important;
}

.welcome,
.dashboard-list,
.chart-list,
.table-list,
.superset-list-view,
.ant-layout-content {
  background: transparent !important;
}

.ant-card,
.panel,
.well,
.dashboard-component-chart-holder,
.grid-content,
.slice_container,
[data-test="slice-container"] {
  background: #ffffff !important;
  border: 1px solid rgba(0, 58, 93, 0.10) !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 22px rgba(0, 58, 93, 0.07) !important;
}

.ant-card-head,
.panel-heading,
.chart-header,
.slice-header {
  border-bottom-color: rgba(0, 58, 93, 0.10) !important;
}

.ant-table,
.ant-table-container,
.ReactVirtualized__Table,
.table {
  border-radius: 6px !important;
  overflow: hidden;
}

.ant-table-thead > tr > th,
.ReactVirtualized__Table__headerRow,
.table thead th {
  background: rgba(162, 199, 226, 0.24) !important;
  color: var(--mpg-dark-blue) !important;
  font-weight: 700 !important;
}

.ant-input,
.ant-select-selector,
.ant-picker,
.ant-dropdown-menu,
.ant-modal-content {
  border-radius: 4px !important;
}

.ant-modal-header {
  border-bottom: 1px solid rgba(0, 58, 93, 0.12) !important;
}

.ant-modal-title {
  color: var(--mpg-dark-blue) !important;
  font-weight: 700 !important;
}

.ant-menu-item-selected::after,
.ant-menu-submenu-selected::after,
.ant-tabs-ink-bar {
  background: var(--mpg-light-blue) !important;
  border-color: var(--mpg-light-blue) !important;
}

.ant-alert-info {
  background: rgba(162, 199, 226, 0.22) !important;
  border-color: rgba(95, 141, 181, 0.35) !important;
}

.ant-alert-success {
  background: rgba(120, 153, 4, 0.10) !important;
  border-color: rgba(120, 153, 4, 0.32) !important;
}

.dashboard-component-tabs .ant-tabs-nav {
  background: #ffffff;
}

.grid-container,
.dashboard-component-chart-holder,
.ant-card,
.panel,
.well {
  border-radius: 4px;
}

.welcome .ant-card,
.dashboard-list,
.chart-list {
  border-color: rgba(0, 58, 93, 0.12);
}

.ant-tag,
.label,
.badge {
  border-radius: 4px;
}

.ant-tag-blue,
.label-info {
  color: var(--mpg-dark-blue);
  background: rgba(162, 199, 226, 0.28);
  border-color: rgba(95, 141, 181, 0.32);
}

.superset-legacy-chart-big-number,
.header-line,
.subheader-line {
  color: var(--mpg-dark-blue);
}

.mpg-client-note {
  background: #ffffff;
  border-left: 5px solid var(--mpg-medium-blue);
  box-shadow: 0 8px 22px rgba(0, 58, 93, 0.07);
}
