/**
 * Skin BraxDriver — cores da logo
 * Navy: #002038 | Azul: #0060C8 | Branco: #fff
 */

:root {
  --brax-navy: #002038;
  --brax-navy-rgb: 0, 32, 56;
  --brax-blue: #0060C8;
  --brax-blue-rgb: 0, 96, 200;
  --brax-blue-shade: #004A9E;
  --brax-blue-tint: #2E7AD4;
  --brax-white: #ffffff;

  --f7-theme-color: var(--brax-blue);
  --f7-theme-color-rgb: var(--brax-blue-rgb);
  --f7-theme-color-shade: var(--brax-blue-shade);
  --f7-theme-color-tint: var(--brax-blue-tint);
}

:root.theme-dark {
  --f7-theme-color: var(--brax-blue-tint);
  --f7-theme-color-rgb: 46, 122, 212;
  --f7-theme-color-shade: var(--brax-blue);
  --f7-theme-color-tint: #5B96DE;
}

.navbar.tema-primario {
  background: var(--brax-navy);
  margin-bottom: 0;
}

.navbar.tema-secundario {
  background: var(--brax-blue);
  margin-bottom: 0;
}

.block.topo-painel {
  margin: 0;
  padding-top: 40px;
  padding-bottom: 10px;
  background: var(--brax-navy);
  height: 120px;
}

.title {
  text-align: center !important;
  width: 100% !important;
}

:root,
:root.theme-dark,
:root .theme-dark {
  --f7-bars-bg-color: var(--brax-navy);
  --f7-bars-bg-color-rgb: var(--brax-navy-rgb);
  --f7-bars-translucent-opacity: 0.94;
  --f7-bars-text-color: #fff;
  --f7-bars-link-color: #fff;
  --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
  --f7-bars-border-color: transparent;
  --f7-tabbar-link-active-color: #fff;
  --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
  --f7-sheet-border-color: transparent;
  --f7-tabbar-link-active-border-color: #fff;
}

.appbar,
.navbar,
.toolbar,
.subnavbar,
.calendar-header,
.calendar-footer {
  --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  --f7-link-highlight-color: var(--f7-link-highlight-white);
  --f7-button-text-color: #fff;
  --f7-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
}

.navbar-large-transparent,
.navbar-large.navbar-transparent {
  --f7-navbar-large-title-text-color: #000;
  --r: 0;
  --g: 96;
  --b: 200;
  --progress: var(--f7-navbar-large-collapse-progress);
  --f7-bars-link-color: rgb(
    calc(var(--r) + (255 - var(--r)) * var(--progress)),
    calc(var(--g) + (255 - var(--g)) * var(--progress)),
    calc(var(--b) + (255 - var(--b)) * var(--progress))
  );
}

.theme-dark .navbar-large-transparent,
.theme-dark .navbar-large.navbar-transparent {
  --f7-navbar-large-title-text-color: #fff;
}

.tabbar .tab-link-active,
.tabbar-labels .tab-link-active {
  border-top: 2px solid var(--brax-blue) !important;
  font-size: 32px;
}

#link1,
#link2,
#link4,
#link5 {
  border-top: 1px solid var(--brax-blue);
  color: var(--brax-blue);
}

#link1.tab-link-active,
#link2.tab-link-active,
#link4.tab-link-active,
#link5.tab-link-active {
  border-top: 2px solid var(--brax-blue) !important;
}

.special-card {
  background: var(--brax-navy);
  color: white;
}

.button.button-fill,
.button.color-blue,
.fab-buttons a,
.fab > a {
  --f7-button-bg-color: var(--brax-blue);
  --f7-button-pressed-bg-color: var(--brax-blue-shade);
}

.button.button-fill.color-navy,
.bg-brax-navy {
  background: var(--brax-navy) !important;
}

.text-brax-blue {
  color: var(--brax-blue) !important;
}

.text-brax-navy {
  color: var(--brax-navy) !important;
}