:root {
  --bs-primary-bg-subtle: #00b6be;
  --bs-primary-text-emphasis: #006d84;
  --bs-primary-border-subtle: #00b6be;

  --bs-success-bg-subtle: #a6ce39;
  --bs-success-text-emphasis: #007576;
  --bs-success-border-subtle: #a6ce39;

  --bs-warning-bg-subtle: #f58220;
  --bs-warning-text-emphasis: #952d4f;
  --bs-warning-border-subtle: #f58220;

  --bs-info-bg-subtle: #f05b83;
  --bs-info-text-emphasis: #5f316c;
  --bs-info-border-subtle: #f05b83;
}
.secondary {
  color: #006d84 !important;
}

.primary {
  color: #00b6be !important;
}

.badge i,
.badge i::before {
  background: transparent !important;
  background-color: transparent !important;
}

.screen {
  display: none;
}

.mobile {
  display: block;
}

.nav-link:hover {
  color: #00b6be;
}

.nav-link {
  color: #006d84;
  font-weight: bold;
}


.btn-primary {
  border: none;
  outline: none;
  background: #00b6be;
  color: #ffff;
}

.btn-primary:hover {
  border: 1px solid #00b6be;
  background: #006d84;
  color: #ffff;
  opacity: 0.8;
}

.btn-primary:disabled {
  outline: none;
  background: #4f6b70;
  color: #ffff;
  opacity: 0.5;
}

.btn-outline-primary {
  color: #00b6be;
  border: 1px solid #006d84;
  background: transparent;
}

.btn-outline-primary:hover {
  color: #006d84;
  border: 1px solid #00b6be;
  background: transparent;
  opacity: 0.8;
}

.btn-outline-secondary {
  color: #006d84;
  border: 1px solid #006d84;
  background: transparent;
}

.btn-outline-secondary:hover {
  color: #ffff;
  border: 1px solid #006d84;
  background: #006d84;
  opacity: 0.8;
}

.form-control:focus,
.form-control:active {
  border-color: #006d84;
  box-shadow: 0 0 0 0.2rem #00b6be;
}

.bg-primary-subtle {
  background: #00b6be;
}

.text-primary {
  color: #006d84;
}

.bg-success-subtle {
  background-color: #a6ce39;
}

.text-success {
  color: #007576;
}

.bg-warning-subtle {
  background-color: #f58220;
}

.text-warning {
  color: #952d4f;
}

.bg-info-subtle {
  background-color: #f05b83;
}

.text-info {
  color: #5f316c;
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Für Firefox */
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}



.cat-input-row {
  display: flex;
  align-items: end;
  gap: 10px;
  width: 100%;
}

.cat-input-grow {
  flex: 1 1 auto;
  min-width: 0;
}

.cat-btn-wrap {
  flex: 0 0 auto;
  min-width: 160px;
}

/* Badges */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 12px;
  border-radius: 999px;
  background: #ffffff;
  color: #006d84;
  font-size: 0.8rem;
  line-height: 1;
  border: 1px solid #006d84;
}

.badge-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #0d4fa7;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.badge-remove:hover {
  background: rgba(13, 79, 167, 0.12);
}

.badge-remove:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(13, 79, 167, 0.2);
}

@media (min-width: 768px) {
  .screen {
    display: block;
  }

  .mobile {
    display: none;
  }
}