.op-mode-nav-item {
  --op-green: var(--success);
  --op-blue: var(--info);
  --op-red: var(--danger);
  --op-grey: lightgrey;
  --op-transparent: transparent;
}
.op-mode-nav-item.first {
  margin-left: 0px;
}
.op-mode-nav-item .op-button-active {
  background-color: green;
}
.op-mode-nav-item .op-button-inactive {
  background-color: grey;
}
.op-mode-nav-item .op-mode-image {
  height: 1.8rem;
  width: 1.8rem;
  margin-top: -5px;
  margin-left: auto;
  margin-right: auto;
}
.op-mode-nav-item .nav-link {
  display: flex;
  justify-content: center;
  flex-direction: column;
  line-height: 1.5rem;
  min-width: 50px;
}
.op-mode-nav-item .op-mode-icon {
  display: inline-block;
  height: 1rem;
  width: 1.3rem;
  background-size: cover;
  margin-left: auto;
  margin-right: auto;
}
.op-mode-nav-item .op-mode-icon svg {
  vertical-align: unset;
}
.op-mode-nav-item .icon-background {
  fill: blue;
}
.op-mode-nav-item .op-mode-icon-auto {
  background-image: url("/img/operationmodes/play_colorable.svg");
}
.op-mode-nav-item .op-mode-anfahren .op-icon-active-first {
  fill: var(--op-blue);
  stroke: black;
}
.op-mode-nav-item .op-mode-anfahren .op-icon-inactive-first {
  fill: var(--op-grey);
  stroke: black;
}
.op-mode-nav-item .op-mode-auto .op-icon-active-first {
  fill: var(--op-green);
  stroke: black;
}
.op-mode-nav-item .op-mode-auto .op-icon-inactive-first {
  fill: var(--op-grey);
  stroke: black;
}
.op-mode-nav-item .op-mode-grundstellung .op-icon-active-first {
  fill: var(--op-blue);
  stroke: black;
}
.op-mode-nav-item .op-mode-grundstellung .op-icon-inactive-first {
  fill: var(--op-grey);
  stroke: black;
}
.op-mode-nav-item.blinking .op-mode-grundstellung .op-icon-active-first {
  animation: blinkingOpModeGrundstellung 1s infinite;
}
@keyframes blinkingOpModeGrundstellung {
  0% {
    fill: var(--op-grey);
  }
  100% {
    fill: var(--op-blue);
  }
}
.op-mode-nav-item.blinking .op-mode-auto .op-icon-active-first {
  animation: blinkingOpModeAuto 1s infinite;
}
@keyframes blinkingOpModeAuto {
  0% {
    fill: var(--op-grey);
  }
  100% {
    fill: var(--op-green);
  }
}
.op-mode-nav-item .op-mode-halb-auto .op-icon-active-first {
  fill: var(--op-green);
  stroke: black;
}
.op-mode-nav-item .op-mode-halb-auto .op-icon-inactive-first {
  fill: var(--op-grey);
  stroke: black;
}
.op-mode-nav-item .op-mode-hand .op-icon-active-first {
  fill: var(--op-blue);
}
.op-mode-nav-item .op-mode-hand .op-icon-inactive-first {
  fill: var(--op-grey);
}
.op-mode-nav-item .op-mode-leerfahren .op-icon-active-first {
  fill: var(--op-blue);
  stroke: black;
}
.op-mode-nav-item .op-mode-leerfahren .op-icon-inactive-first {
  fill: var(--op-grey);
  stroke: black;
}
.op-mode-nav-item .op-mode-bit10 .op-icon-active-first {
  fill: var(--op-blue);
  stroke: black;
}
.op-mode-nav-item .op-mode-bit10 .op-icon-inactive-first {
  fill: var(--op-grey);
  stroke: black;
}
.op-mode-nav-item .op-mode-bit9 .op-icon-active-first {
  fill: var(--op-blue);
  stroke: black;
}
.op-mode-nav-item .op-mode-bit9 .op-icon-inactive-first {
  fill: var(--op-grey);
  stroke: black;
}
.op-mode-nav-item .op-mode-service .op-icon-active-first {
  fill: var(--op-blue);
}
.op-mode-nav-item .op-mode-service .op-icon-inactive-first {
  fill: var(--op-grey);
}
.op-mode-nav-item .op-mode-sicherheitskreisquit .op-icon-active-first {
  fill: var(--op-blue);
  stroke: black;
}
.op-mode-nav-item .op-mode-sicherheitskreisquit .op-icon-inactive-first {
  fill: var(--op-grey);
  stroke: black;
}
.op-mode-nav-item .op-mode-stop .op-icon-active-first {
  fill: var(--op-red);
  stroke: black;
}
.op-mode-nav-item .op-mode-stop .op-icon-inactive-first {
  fill: var(--op-grey);
  stroke: black;
}