$flag-education: #5A7D96;
$flag-employment: #00BC94;
$flag-hobby: #FFA7A9;
$flag-pole: #5A7D96;
$flag-selected: #FFC200;
$tooltip-color: rgb(250, 251, 253);

.vis-item {
  &.vis-selected.vis-box > .vis-item-content > .flag {
    border-left-color: $flag-selected !important;
  }
  .vis-item-content {
    padding: 7px 0 !important;
    & > .flag {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 10px 0 10px 40px;
      border-color: transparent;
      &.education {
        border-left-color: $flag-education;
      }
      &.employment {
        border-left-color: $flag-employment;
      }
      &.hobby {
        border-left-color: $flag-hobby;
      }
    }
  }
  &.vis-box {
    border-color: $flag-pole;
    border-radius: inherit !important;
    background-color: transparent !important;
  }
  &.vis-dot {
    border-color: transparent !important;
    background-color: transparent !important;
  }
  &.vis-box, &.vis-line {
    border-width: 0 0 0 3px !important;
  }
  &.vis-line {
    border-color: $flag-pole;
  }
}

.vis-current-time {
  background-color: rgba(red, .3) !important;
}

.vis-foreground .vis-group {
  border-bottom: none !important;
}

.vis-panel {
  &.vis-left {
    display: none !important;
  }
  &.vis-center {
    border-bottom-style: dashed !important;
  }
  &.vis-center, &.vis-bottom {
    left: 0 !important;
  }
}

.vis-group > .vis-item.placeholder {
  border-style: none !important;
}

.vis-timeline {
  border: none !important;
  border-style: none !important;
}

.timeline-tooltip {
  max-width: 600px;
}

.bg-education {
  background-color: $flag-education;
}

.bg-employment {
  background-color: $flag-employment;
}

.bg-hobby {
  background-color: $flag-hobby;
}

.bg-tooltips {
  background-color: $tooltip-color !important;
}

.key-square {
  height: 25px;
  width: 40px;
  border-radius: 3px;
}

.vis-tooltip {
  font-size: 1.25rem !important;
  font-weight: bold;
  background: #fff !important;
  padding: 10px !important;
  border: none !important;
  border-radius: 4px;
}