.results-wrap.fixed {
  position : fixed
}

.rechner-results {
  line-height : 1.8;
  position    : relative
}

/*.rechner-results h3 {   color : #f18700 }*/

.rechner-results input {
  padding-right : 15px
}

.rechner-results .row {
  align-items : center;
  position    : relative
}

.rechner-results hr {
  border-top : 2px solid var(--hellgrau)
}

.rechner-results .btn {
  color     : white !important;
  padding   : 12px 24px;
  max-width : 100%
}

.rechner-results .result-unit {
  position  : absolute;
  right     : 20px;
  top       : 50%;
  transform : translateY(-50%)
}

.rechner-results .rechner-alert {
  color : var(--rot)
}

.rechner-results .rechner-result-sub {
  font-size : 0.9rem
}

.rechner-results .rechner-result-row {
  margin-bottom : 0.25rem
}

.rechner-results .rechner-result-item {
  border           : none;
  background-color : transparent;
  font-weight      : bold
}

.rechner input[type=number]::-webkit-inner-spin-button, .rechner input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance : none;
  margin             : 0
}

.rechner-table {
  margin : 2.5rem -15px 0
}

.rechner-entry {
  padding       : 2rem 0;
  border-bottom : 2px solid var(--hellgrau)
}

.rechner-entry.is-valid .rechner-sperrgut-name {
  background-color : var(--lichtgrau)
}

/*.rechner-add-entry {   color : #f18700 }*/
/*.rechner-add-entry:hover {  color : #f18700 }*/

.rechner-add-icon {
  margin-top   : -4px;
  margin-right : 5px
}

.rechner-amount {
  border        : none;
  border-bottom : 1px solid var(--dunkelgrau);
  padding       : 0.375rem 0 0.375rem 0.5rem;
  max-width     : 55px;
  text-align    : center;
  float         : left;
  margin-right  : 4px;
  height        : 35px;
  margin-top    : 3px;
  border-radius : 3px
}

.rechner-amount-incr, .rechner-amount-decr {
  display : block;
  float   : left;
  margin  : 6px 2px;
  max-height: 2em;
}

@media (max-width : 575px) {
  .rechner-row-volumen {
    margin-left : -50%
  }

  .rechner-row-volumen label {
    margin-left : 0
  }
}

@media (min-width : 576px) {
  .rechner-row-volumen {
    display     : flex;
    align-items : center
  }

  .rechner-row-volumen label {
    margin        : auto 0 !important;
    padding-right : 15px
  }
}

@media (min-width : 576px) and (max-width : 1199px) {
  .rechner-row-volumen {
    justify-content : space-between
  }
}

@media (max-width : 575px) {
  .rechner-volumen {
    text-align  : center;
    padding-top : 9px
  }
}

.rechner-mengen-column {
  display : flex
}

.rechner .remove-rechner-entry {
  color : black;
  line-height: 110%;
}

.rechner .rechner-add-entry svg,
.rechner .remove-rechner-entry svg {
  max-height: 2em;
}

@media (min-width : 576px) {
  .rechner .remove-rechner-entry {
    display         : flex;
    align-items     : center;
    justify-content : flex-end
  }
}

@media (max-width : 575px) {
  .rechner .remove-rechner-entry {
    padding-top : 5px;
    transform   : scale(0.9);
    position    : absolute;
    bottom      : -20px;
    right       : -10px;
    text-align  : right;
    opacity     : 0.9
  }

  .rechner .remove-rechner-entry svg {
    width : 18px
  }
}

@media (min-width : 576px) and (max-width : 1199px) {
  .rechner .remove-rechner-entry {
    transform : scale(0.9);
    position  : absolute;
    bottom    : -27px;
    right     : -14px
  }

  .rechner .remove-rechner-entry svg {
    width : 18px
  }
}

@media (max-width : 420px) {
  .rechner .suggestions {
    left      : -60%;
    min-width : 80vw !important
  }
}

.rechner svg {
  width : 27px
}

.rechner label, .rechner .rechner-label {
  font-weight : bold;
  margin      : auto
}

@media (max-width : 575px) {
  .rechner label, .rechner .rechner-label {
    margin : 8px auto
  }
}

.rechner-label {
  font-weight : bold
}

/*
.rechner .suggestions-wrapper .suggestions li {
  background-color : #fff
}

.rechner .suggestions-wrapper .suggestions li a {
  padding : 0.5rem 20px
}

.rechner .suggestions-wrapper .suggestions li a:hover, .rechner .suggestions-wrapper .suggestions li a.active {
  background-color : #f4f4f4
}
*/