.pagination{--mdb-pagination-padding-x: 0.75rem;--mdb-pagination-padding-y: 0.375rem;--mdb-pagination-font-size:0.9rem;--mdb-pagination-color: var(--mdb-body-color);--mdb-pagination-bg: var(--mdb-body-bg);--mdb-pagination-border-width: var(--mdb-border-width);--mdb-pagination-border-color: var(--mdb-border-color);--mdb-pagination-border-radius: 0.25rem;--mdb-pagination-hover-color: var(--mdb-body-color);--mdb-pagination-hover-bg: var(--mdb-highlight-bg-color);--mdb-pagination-hover-border-color: var(--mdb-border-color);--mdb-pagination-focus-color: var(--mdb-link-hover-color);--mdb-pagination-focus-bg: var(--mdb-highlight-bg-color);--mdb-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(59, 113, 202, 0.25);--mdb-pagination-active-color: var(--mdb-primary-text-emphasis);--mdb-pagination-active-bg: var(--mdb-primary-bg-subtle);--mdb-pagination-active-border-color: #3b71ca;--mdb-pagination-disabled-color: rgba(var(--mdb-body-color-rgb), 0.55);--mdb-pagination-disabled-bg: transparent;--mdb-pagination-disabled-border-color: var(--mdb-border-color);display:flex;padding-left:0;list-style:none}.page-link{position:relative;display:block;padding:var(--mdb-pagination-padding-y) var(--mdb-pagination-padding-x);font-size:var(--mdb-pagination-font-size);color:var(--mdb-pagination-color);background-color:var(--mdb-pagination-bg);border:var(--mdb-pagination-border-width) solid var(--mdb-pagination-border-color);transition:all .3s linear}@media(prefers-reduced-motion: reduce){.page-link{transition:none}}.page-link:hover{z-index:2;color:var(--mdb-pagination-hover-color);background-color:var(--mdb-pagination-hover-bg);border-color:var(--mdb-pagination-hover-border-color)}.page-link:focus{z-index:3;color:var(--mdb-pagination-focus-color);background-color:var(--mdb-pagination-focus-bg);outline:0;box-shadow:var(--mdb-pagination-focus-box-shadow)}.page-link.active,.active>.page-link{z-index:3;color:var(--mdb-pagination-active-color);background-color:var(--mdb-pagination-active-bg);border-color:var(--mdb-pagination-active-border-color)}.page-link.disabled,.disabled>.page-link{color:var(--mdb-pagination-disabled-color);pointer-events:none;background-color:var(--mdb-pagination-disabled-bg);border-color:var(--mdb-pagination-disabled-border-color)}.page-item:not(:first-child) .page-link{margin-left:calc(var(--mdb-border-width)*-1)}.page-item:first-child .page-link{border-top-left-radius:var(--mdb-pagination-border-radius);border-bottom-left-radius:var(--mdb-pagination-border-radius)}.page-item:last-child .page-link{border-top-right-radius:var(--mdb-pagination-border-radius);border-bottom-right-radius:var(--mdb-pagination-border-radius)}.pagination-lg{--mdb-pagination-padding-x: 1.5rem;--mdb-pagination-padding-y: 0.75rem;--mdb-pagination-font-size:1.25rem;--mdb-pagination-border-radius: var(--mdb-border-radius-lg)}.pagination-sm{--mdb-pagination-padding-x: 0.5rem;--mdb-pagination-padding-y: 0.25rem;--mdb-pagination-font-size:0.875rem;--mdb-pagination-border-radius: var(--mdb-border-radius-sm)}
  .pagination{--mdb-pagination-border-radius: 0.25rem;--mdb-pagination-active-transition: all 0.2s linear;--mdb-pagination-active-font-weight: 500;--mdb-pagination-circle-border-radius: 50%;--mdb-pagination-circle-padding-x: 0.841rem;--mdb-pagination-circle-padding-l-lg: 1.399414rem;--mdb-pagination-circle-padding-r-lg: 1.399415rem;--mdb-pagination-circle-padding-l-sm: 0.696rem;--mdb-pagination-circle-padding-r-sm: 0.688rem}.page-link{background-color:rgba(0,0,0,0);border:0;outline:0;border-radius:var(--mdb-pagination-border-radius)}.page-link:focus{box-shadow:none}.page-link.active,.active>.page-link{border:0;transition:var(--mdb-pagination-active-transition);font-weight:var(--mdb-pagination-active-font-weight)}.page-item:not(:first-child) .page-link{margin-left:0}.page-item:first-child .page-link{border-top-left-radius:var(--mdb-pagination-border-radius);border-bottom-left-radius:var(--mdb-pagination-border-radius)}.page-item:last-child .page-link{border-top-right-radius:var(--mdb-pagination-border-radius);border-bottom-right-radius:var(--mdb-pagination-border-radius)}.pagination-circle .page-item:first-child .page-link{border-radius:var(--mdb-pagination-circle-border-radius)}.pagination-circle .page-item:last-child .page-link{border-radius:var(--mdb-pagination-circle-border-radius)}.pagination-circle .page-link{border-radius:var(--mdb-pagination-circle-border-radius);padding-left:var(--mdb-pagination-circle-padding-x);padding-right:var(--mdb-pagination-circle-padding-x)}.pagination-circle.pagination-lg .page-link{padding-left:var(--mdb-pagination-circle-padding-l-lg);padding-right:var(--mdb-pagination-circle-padding-r-lg)}.pagination-circle.pagination-sm .page-link{padding-left:var(--mdb-pagination-circle-padding-l-sm);padding-right:var(--mdb-pagination-circle-padding-r-sm)}


  .navigation-box {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 2px 2px #d2d2d2;
    margin-right: 20px;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 4px;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;

  }

  

  
  .popular-box {
    background-color: #effee6;

  }
  


  .food-card {
    padding: 5px;
    background-color: #ffffff;
    border-radius: 2px;
  }

  .food-card table {
    width: 100%; padding: 0px; margin: 0px;border-spacing:0px;
  }
  .food-card_tdright {
    width: 180px; border-left: 1px solid #bbb; 
  }
  .food-card_tdright_top {
    vertical-align: top;
  }
  .food-card_tdright_bottom {
    vertical-align: bottom;
    padding-right: 10px;
  }
  .food-card .title-left {
    padding: 0px;
    margin: 0px;
    margin-bottom: 10px;
    width: auto;
    font-weight: bold;
  }
  .title-left .title {
    font-size: 1.2rem;
  }
  .food-card .price {
    margin-right: 10px;
    margin-left: auto;
    text-align: right;
    width: 40%;
  }
  .food-card .price .number {
    color: #D17A22; /*  #6ea04a;*/
    font-weight: bold;
    font-size: 1.5rem;
    display:inline-block;
  }
  .food-card .price .unit {
    color: black;
    font-size:0.8rem;
  }
  .food-image_container {
    max-width: 40%;
    min-height: 150px;
    float: left;
    margin-right: 10px;
    margin-bottom: 5px;
  }
  .food-image {
    width: 100%;
    max-height: 150px;
  }

  .info {
    font-size: 0.9rem;
    margin: 0px;
    padding-bottom: 4px;
    padding-top: 4px;
  }

  .angebot_btn {
    background-color: #D17A22;
    color: white;
    padding: 10px;
    text-align: center;
    margin-right: 8px;
    margin-left: auto;
    margin-top: 00px;
    float: right;
    text-decoration: none;
  }
  
  .shop-image {
    width: auto;
    max-width:70%;
    max-height:50px;
    margin-right: 10px;
    margin-left: auto;
    margin-top: 5px;
    margin-bottom: 0px;
    padding: 0px;
      border: 0px;
      display: block;
  }
  .shop-image_container {
    width: 70%;
    margin-right: 10px;
    margin-left: auto;
    margin-bottom: 0px;
    padding: 0px;
  }

  .sorting {
    padding-top: 5px;
    margin-right: 25px;
    margin-left: auto;
    width:max-content;
    color: black;
    font-size:0.8rem;
  }

  .sorting::before {
    content: '\25BC';  /* Unicode für den nach unten zeigenden Pfeil */
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    }

    .more::after {
    content: '\25B6\FE0E';  /* Unicode für den nach rechts zeigenden Pfeil */
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    }

    .more, .more-open {
        font-size: 0.8rem;
        height: 16px;
    }
    
    .more-open::after {
    content: '\25BC\FE0E';  /* Unicode für den nach rechts zeigenden Pfeil */
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    }

    .more-table {
        font-size: 0.8rem;
        width: 100%;
        margin: 0px;
        padding: 0px;
        border: 0px;
      border-spacing: 0px 0px;
      border-collapse: collapse;
    }
    .more-table th {
        font-size: 0.8rem;
        text-align: left;
        vertical-align: bottom;
        border-bottom: 0px solid #f0f0f0;
        padding-bottom: 10px;
    }
    .more-table tr {
        font-size: 0.8rem;
    }
    .more-table td {
        font-size: 0.8rem;
        border-top: 1px solid #f0f0f0;
        height: 30px;
    }
    .more-table tbody tr:nth-child(1) td {
        border: 0px;
    }
    .highlight td {
        font-size: 0.8rem;
        background-color: #daf9c4;
    }
    .more-table .preis {
      text-align: right;
      white-space: nowrap;
      padding-right: 10px;
      color: #04780e;
    }
    .more-table .numeric_right {
      text-align: right;
      white-space: nowrap;
      padding-right: 10px;
    }
    .more-shopimage {
      width: auto;
      max-width: 100%;
      padding-right:5px;
      max-height: 35px;
      padding-top: 3px;
    }
    .more-table .anbieterlink {
      white-space: nowrap;
    }


  .filter-field {
    border: 0px rgb(191, 191, 191);
    border-style: solid;
    border-radius: 7px;
    padding-top: 4px;
    padding-bottom: 0px;
    padding-left: 5px;
    padding-right: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 2px;
    margin-right: 15px;
    font-size: 0.9rem;
  }
  
  
  .filter-field_container {
    width: 98%;
    padding-bottom: 2px;
    padding-left: 6px;
    padding-right: 10px;
    

  }
  .filter-delete {
    font-size: 1.4rem; line-height: 0.5rem; vertical-align: middle;
  }

  .filter-delete a{
    color: black;
    text-decoration: none;
  }


  .filter-field-active {
    background-color: #b3dbfe; 
    border: 1px #197bd0;
    border-style: solid;
    border-radius: 7px;
    padding: 5px;
    margin-top: 4px;
    margin-right: 4px;
    margin-bottom: 0px;
    float: left;
    font-size: 0.9rem;
  }

  .filter-active_container {
    width: 98%;
    padding-top: 4px;
    padding-bottom: 2px;
    padding-left: 6px;
    padding-right: 0px;
  }

  .filter-field .price {
    color: #535353;
    font-size:0.8rem;
    font-weight:lighter;
  }

    
    .star-rating {
        unicode-bidi: bidi-override;
        color: #c5c5c5;
        font-size: 0.95rem;
        line-height: 0.9rem;
        width: 100px; /* 5 Sterne, je 25px breit */
        position: relative;
        margin-right: 0px;
        margin-left: auto;
        margin-top: 0px;
        margin-bottom: 3px;
        padding-top:0px;
        float: right;
    }
    .star-rating .count {
        font-size: 0.7rem;
    }
    .star-rating:before {
        content: "\2605\2605\2605\2605\2605";
     
    }
    .star-rating .stars-filled {
        position: absolute;
        top: 0;
        left: 0;
        white-space: nowrap;
        overflow: hidden;
        width: 0;
        float: right;
    }
    .star-rating .stars-filled:before {
        content: "\2605\2605\2605\2605\2605";
        color: #535353; /* Farbe der gefüllten Sterne */
        display: block;
    }
  /* Style for the filter button */




  



  .filterliste_container {
    clear: both;
  }

  #id_food_category div, #id_seniority div, #id_protein_title div, #id_brand_id div {

  }

  #id_max_package_size, #id_max_units {
    font-size:0.9rem;
  }

  .filter-line  {
    margin-top: 6px; 
    margin-bottom: 20px;
  }

  .counter_container {
    width: 100%; padding: 0x; margin:0px; padding-top: 0px; 
    font-size: 1rem
  }

  .content-header h2 {
    font-size: 1.5em;
    margin: 0px;
    margin-top: 15px;
    margin-bottom: 10px;
  }

  .filterlink {
    color: #000000;
    text-decoration: none;
  }

  .filterlink:hover {
    font-weight: bold;
  }

  .filterlink span {
    padding-inline-start: 0px;
  }

  .filter-field input {
     height:1rem; width: 1rem; margin-left: 0px; padding-left: 0px; vertical-align: bottom; margin-right: 7px;
     margin-top: 2px; margin-bottom: 2px;
    cursor: pointer; 
  }
  .filter-field label:hover {
    font-weight: bold;
    cursor: pointer; 
  }
  .filter-label {
  margin-top: 10px; padding-bottom: 0px;margin-bottom: 0px; margin-left: 5px;
}

  #contentarea {
    margin-left: 280px;
  }

  .alternative_overlaytag {
    position: relative; top: +25px;background-color:#95db9c;width:max-content; padding: 2px;
    text-decoration: none;
    color: black;
  }
  .alternative_productimage {
    padding: 5px; max-width:100%;
    max-width: 160px;
  }
  .alternative_title {
    text-decoration: none;
    color: black;
    font-size:0.8rem;
  }
  .progress {
  position: fixed;
  top: 47px;
  z-index: 999;
  height: 4px;
  width: 100%;
  border-radius: 2px;
  background-clip: padding-box;
  overflow: hidden;
}
.progress .indeterminate:before {
  content: "";
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395)
    infinite;
  animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.progress .indeterminate:after {
  content: "";
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
    infinite;
  animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
    infinite;
  -webkit-animation-delay: 1.15s;
  animation-delay: 1.15s;

}
.progress {
  display: none;
}
.htmx-request .progress {
  display: inline;
}
.htmx-request.progress {
  display: inline;
}

                        

@-webkit-keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
}
@keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
}
@-webkit-keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  100% {
    left: 107%;
    right: -8%;
  }
}
@keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  100% {
    left: 107%;
    right: -8%;
  }
}