@theme-color-background-base: #f8f9fa;
@theme-color-brand: #4285f4;
@theme-color-header-background: #ffffff;
@theme-color-header-text: #5f6368;

//MENU
@theme-color-menu-contrast-text: #727273;
@theme-color-menu-contrast-textSelected: #1a73e8;
@theme-color-menu-contrast-textActive: #3c4043;
@theme-color-menu-contrast-background: transparent;

#root #secondNavBar .navbar {
  border-top: 1px solid rgba(0, 0, 0, 0.08);;
}

#root .borderedControl {
  box-shadow: none;
  background-color: transparent;
  transition: .2s ease all;

  &:hover {
    background-color: rgba(158, 158, 158, 0.2);
    transition: .2s ease all;
  }
}

#root #secondNavBar .navbar > li .item {
  padding: 10px 21px 10px 19px;
  border-radius: 0 50em 50em 0;
  background-color: transparent;
  transition: .2s ease all;

  &:hover {
    background-color: #dadce0;
    transition: .2s ease all;
  }
}

@graph-colors-data-series1: #d4291f;
@graph-colors-data-series2: #1f78b4;
@graph-colors-data-series4: #33a02c;


// can't find the original colors, so I just make them a bit less bright
.system.notification {
  &.notification-success {
    background-color: desaturate(@color-green-piwik, 25%) !important;
  }

  &.notification-warning {
    background-color: desaturate(#f57c00, 25%);
  }

  &.notification-danger,
  &.notification-error {
    background-color: desaturate(#e53935, 25%);
  }

  &.notification-info {
    background-color: desaturate(#00bcd4, 25%);
  }
}

// set back to materialcss default
[type="radio"]:checked + label:after, [type="radio"].with-gap:checked + label:after {
  background-color: #26a69a;
  border-color: #26a69a;
}