:root {
  --primary-color: #1074BB;
  /*  mega-menu bg color, Text color under SVG icons */
  --primary-bright-color: #34ABE0;
  /* Page titles, Download color, Table sorting */
  --primary-dark-color: #085273;
  /* Accordiont title background, */
  --primary-font-color: #529DCE;
  /* Mega menu font color */
  --gray-font-color: #949494;
  /* Table headers, table content */
  --bg-color: #185885;
  /* button background hover, table sorting selected bg */
  --bg-color-dark: #0a3b56;
  /* button background, */
  --svg-default: #34ABE0;
  /* Live Logo, SVG */
  --svg-contrast: #1074BB;
  /* Live Logo Gradient, SVG Gradient */
  --bg-hue-rotation: 0deg;
  --bg-saturation: 1;
  --bg-brightness: 1;
  --primary-chart-color: var(--primary-color);
  --primary-dark-chart-color: var(--primary-dark-color);
  --primary-bright-chart-color: var(--primary-bright-color);
  --chart-export-color: var(--primary-color);
  --brand-btn-primary: var(--primary-dark-color);
  --brand-btn-hover: var(--primary-color);
  --section: #1073B9;
  --section-two: #529DCE;
  --section-active: #205372;
  --section-active-two: #577D95;
  --button: #1073B9;
  --button-two: #529DCE;
  --button-active: #205372;
  --button-active-two: #577D95;
  --danger: #FA141B;
  --warning: #FED759;
  --ok: #2ab72a; }

div.content h2 {
  color: var(--primary-bright-color); }

.button {
  background: var(--bg-color-dark);
  color: white; }
  .button:hover {
    background: var(--bg-color); }

button.primary-button {
  background-color: var(--primary-color);
  cursor: pointer;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 10px; }
  button.primary-button:hover {
    background: var(--bg-color); }

button.cancel-button {
  cursor: pointer;
  background-color: #a54747;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 10px; }
  button.cancel-button:hover {
    background: #7c3039; }

/* LOGO*/
div#logo .logo-fill {
  fill: var(--primary-color); }
div#logo .logo-gradient stop:first-child {
  stop-color: var(--svg-default) !important; }
div#logo .logo-gradient stop:last-child {
  stop-color: var(--primary-color) !important; }

/* END LOGO*/
/* LOGIN PAGE */
.login-container .login-bg h2.sign-in, .login-container .login-bg h3.subtitle {
  color: var(--primary-color); }
.login-container .outside-bg i, .login-container .outside-bg a {
  color: var(--primary-color); }

/* END LOGIN PAGE */
/* BASIC TEMPLATE */
div.content-bg {
  filter: hue-rotate(var(--bg-hue-rotation)) saturate(var(--bg-saturation)) brightness(var(--bg-brightness));
  background-image: url('/static/img/temporary_login_bg.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  position: absolute;
  z-index: -1;
  top: 168px;
  bottom: 0; }

/* END BASIC TEMPLATE */
/* HEADER TEMPLATE */
div.header-bg div#header #portal-title-wrapper div.company-title {
  width: 250px; }
  div.header-bg div#header #portal-title-wrapper div.company-title h1 {
    color: var(--gray-font-color); }

/* END HEADER TEMPLATE */
/* MEGA MENU */
div#mega-menu div.menu-section:hover:not(.logout) h3 {
  color: var(--primary-font-color); }
div#mega-menu div.menu-section:hover:not(.logout) .svg-single-color {
  fill: var(--svg-default); }
div#mega-menu div.menu-section:hover:not(.logout) .svg-gradient stop:first-child {
  stop-color: var(--svg-default) !important; }
div#mega-menu div.menu-section:hover:not(.logout) .svg-gradient stop:last-child {
  stop-color: var(--svg-contrast) !important; }
div#mega-menu div.menu-section.logout .account-btn:hover a {
  color: var(--primary-font-color); }
div#mega-menu div.menu-section h3 {
  color: var(--gray-font-color); }
div#mega-menu div.menu-section .svg-single-color {
  fill: var(--gray-font-color); }
div#mega-menu div.menu-section .svg-gradient stop:first-child {
  stop-color: var(--gray-font-color) !important; }
div#mega-menu div.menu-section .svg-gradient stop:last-child {
  stop-color: var(--gray-font-color) !important; }
div#mega-menu div.menu-section.categories:hover h3.section-title, div#mega-menu div.menu-section.sites:hover h3.section-title, div#mega-menu div.menu-section.reports:hover h3.section-title, div#mega-menu div.menu-section.transactions:hover h3.section-title {
  color: var(--primary-color); }
div#mega-menu div.menu-section .menu-container {
  background: var(--primary-color); }
div#mega-menu div.menu-section .video-container {
  background: var(--primary-color);
  border-right: 1px solid white; }

/* END MEGA MENU */
/* TABLES */
table tbody tr:not(:hover) td span.fas {
  color: var(--primary-bright-color); }
table tbody th a span.fas {
  color: var(--primary-bright-color); }
table tbody.tbody-scroll::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 2px solid var(--primary-color);
  /* should match background, can't be transparent */
  background-color: var(--primary-color);
  height: 15px; }

form {
  background: transparent !important; }

#fields .container h3 {
  color: var(--primary-color); }
#fields .container button {
  color: var(--primary-color); }

/* TABLES */
/* DOWNLOAD BUTTONS */
div.new-download {
  font-size: 15px; }
  div.new-download span {
    color: var(--gray-font-color); }
  div.new-download i, div.new-download a.download-btn, div.new-download button.download-btn {
    color: var(--primary-bright-color); }

div.pagination .step-links a, div.pagination .step-links span.l-separator {
  color: var(--primary-bright-color); }

/* END DOWNLOAD BUTTONS */