/* Suggest */
.suggestions {
   background: #fff;
   border: 1px solid #ddd;
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   transform: translateY(100%);
   z-index: 10000;
}

.suggestion-item {
   font-family: sans-serif;
   padding: 8px;
   padding-left: 1rem;
}

.suggestion-item:hover,
.suggestion-item:focus,
.suggestion-item:active {
   cursor: pointer;
   background-color: #EEE;
   text-decoration: none;
}

.suggestion-item.highlight {
   text-decoration: underline; 
  }

ws-searchbox .suggestions {
   display: none; 
}

ws-searchbox input[type="search"]:focus + .suggestions,
ws-searchbox input[type="search"]:active + .suggestions {
   display: block;
}

.ws-search-sort {
   text-align: right;
}

@media screen and (max-width: 767px) {
   .ws-search-sort {
      margin-top: 15px;
      text-align: left;
   }
}

.ws-search-sort select{
   font-family: "Arial";
   font-size: 14px;
   line-height: 1.5;
   min-width: 180px;
   margin-bottom: 0;
   -webkit-appearance: button !important;
   -moz-appearance: button!important;
   background-image: initial;
   background-position: initial;
   background-repeat: initial;
   color: #495057;
   padding: .375rem .75rem;
   border: 1px solid #ddd;
   box-shadow: 0 0 0 rgba(0, 0, 0, 0) inset !important;
   background-color: #fff;
   background-clip: padding-box;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Suchergebnisse */
.result-grid {
   display: flex;
   flex-wrap: wrap;
   margin-right: -0.5rem;
   margin-left: -0.5rem;
}

.result-grid > div {
   position: relative;
   width: 100%;
   padding-right: .5rem;
   padding-left: .5rem;
   padding-bottom: .5rem;
   padding-top: .5rem;
   flex: 0 0 100%;
   max-width: 100%;
}

@media (min-width:576px) {
   .result-grid > div {
      flex: 0 0 50%;
      max-width: 50%;
   }
}

@media (min-width:768px) {
   .result-grid > div {
      flex: 0 0 33.3333333333%;
      max-width: 33.3333333333%;
   }
}

@media (min-width:992px) {
   .result-grid > div {
      flex: 0 0 25%;
      max-width: 25%;
   }
}

/* Filterboxen */
#ws-filter-chip-box .chip{
   float: left;
   display: inline-block;
}

#ws-filter-chip-box .chip button::after{
   content: " x";
   font-weight: bold;
   color: #5D5B5B;
}

.checkbox-wrapper label{
   padding-left: 5px;
   margin-bottom: 0px;
   font-weight: normal;
   width: 100%;
}

.dropdown .open span.fa-chevron-down{
   rotate: 180;
}

.checkbox-wrapper div{
   white-space:nowrap;
}

#filter-wsSearch-box .btn-filter{
   border-radius: 0 !important;
   border-color:  #E9ECF0
}

#filter-wsSearch-box .dropdown-menu {
   max-height: 300px;
   overflow-y: auto;
   overflow-x: hidden;
   margin-top: 0 !important;
   top: 0px;
   left: 0px;
   border-radius: 0 !important;
}

@media (min-width:1200) {
#filter-wsSearch-box .dropdown-menu {
   max-height: 300px;
   max-width: 230px;
   overflow-y: auto;
   overflow-x: hidden;
   width: 230px !important;
}
}

/* Produktbox Dummy */

.loader-box {
   width: 100%;
   height: 439px;
   background-color: #f5f5f5;
   border-radius: 16px;
   overflow: hidden;
   padding: 16px;
   margin-bottom: 10px;
   box-sizing: border-box;
   font-family: sans-serif;
   display: flex;
   flex-direction: column;
   gap: 1rem;
   animation: pulse 1.5s infinite;
   }

   .skeleton {
   background: linear-gradient(90deg, #f5f5f5 25%, #f5f5f5 50%, #f5f5f5 75%);
   background-size: 200% 100%;
   animation: shimmer 1.6s infinite;
   border-radius: 4px;
   overflow: hidden;
   }

   .skeleton.image {
   width: 100%;
   height: auto;
   }

   .skeleton.title {
   width: 100%;
   height: 24px;
   }

   .skeleton.text {
   width: 100%;
   height: 12px;
   }

   .skeleton.text_small {
   width: 100%;
   height: 9px;
   }

   @keyframes shimmer {
   0% {
      background-position: -200% 0;
   }
   100% {
      background-position: 200% 0;
   }
   }

   @keyframes pulse {
   0%, 100% {
      opacity: 1;
   }
   50% {
      opacity: 0.6;
   }
   }


/* Akkordeon Ein/Ausblenden Filter Button */   

#accordion-filter .fa-plus,
#accordion-filter .fa-minus{
   background-color:#59784A;
}

#accordion-filter .btn-filter-show,
#accordion-filter .btn-filter-hide{
   color: #000000;
}

#accordion-filter .btn-filter-show:hover,
#accordion-filter .btn-filter-hide:hover{
   text-decoration: none;
}

#accordion-filter .btn-filter-show{
   display: none;
}

#accordion-filter .btn-filter-show.collapsed{
   display: inline-block;
   color: #000000;
}

#accordion-filter .btn-filter-hide{
   display: inline-block;
}

#accordion-filter .btn-filter-hide.collapsed{
   display: none;
}

/* Mobiler Button fuer Filter */   
.wsSearchFilterBtnMob{
   position: fixed;
   bottom: 0px;
   height: 50px;
   z-index: 100;
   background: #ffffff;
   width: 100%;
   border-top: 1px solid #59784A;
   text-align: center;
   padding: 10px;
}

.wsSearchFilterBtnMobTxt{
   color: #59784A;
   font-size: 20px;
}

/* Modal in Vollscreen */   

.modal-fullscreen-custom {
    width: 100vw !important;
    height: 100vh;
    margin: 0 !important;
    padding: 0;
    max-width: 100%;
}

.modal-fullscreen-custom .modal-content {
    height: 100vh;
    border-radius: 0;
    background-color: #fff;
    overflow-y: auto;
}

.modal-fullscreen-custom .modal-body {
    background-color: #fff;
}



/*-------------- WS-SEARCH --------------------*/

.ws-search-headline {
   text-transform: uppercase;
   font-weight: 600;
   font-size: 1rem;
   line-height: 1.2;
   color: #212529;
}

span.wsSearchCount {
   color: #fd9301;
}

.ws-search-toolbar-top {
   background-color: #eee;
   display: flex;
   justify-content: center;
}

.matched-suggestion {
   color: #ff6000;
   font-weight: 700;
}

.suggestion-show-all-item {
   background: #fff;
   cursor: pointer;
   font-family: sans-serif;
   font-weight: 700;
   text-decoration: underline;
   padding: 8px;
   padding-left: 1rem;
   margin-bottom: 8px;
   margin-top: 8px;
}

.suggestion-show-all-item:hover,
.suggestion-show-all-item:focus,
.suggestion-show-all-item:active {
   cursor: pointer;
   background-color: #EEE;
}

.pagination-btn,
.pagination-btn.standard {
   border: 0;
   color: #212529;
   cursor: pointer;
   font-family: 'Open Sans';
   font-size: 1rem;
   line-height: 1.5;
   height: initial;
   margin-left: 0;
   padding: .0625rem .625rem .0625rem;
   background: transparent;
   font-weight: 400;
   transition: background-color 300ms ease-out;
}

.pagination-btn.next,
.pagination-btn.prev {
   background: transparent;
   border: none !important;
   color: #fd9301;
   font-family: 'Open Sans';
   font-weight: 400;
   cursor: pointer;
   line-height: 1.2;
   padding: .0625rem .625rem .0625rem;
}


.pagination-btn.next.disabled,
.pagination-btn.prev.disabled,
.pagination-btn.next.disabled .catPagingLink span,
.pagination-btn.prev.disabled .catPagingLink span{
   color: #212529;
   cursor:default;
   font-weight: 400;
}

.cat-paging-button {
   pointer-events: none;
}

@media (min-width: 576px) {
   .cat-paging-button {
      padding: 0;
   }
}

.pagination-btn.next {
   font-weight: 600;
}

.pagination-btn.prev .catPagingLink span,
.pagination-btn.next .catPagingLink span {
   font-weight: 600;
}

.catPagingLink i.fa-lg {
   vertical-align: -7%;
}

.pagination-btn.current,
.pagination-btn:active,
.pagination-btn:hover,
.pagination-btn:focus,
.pagination-btn:focus-visible {
   background: transparent;
   border: none !important;
   font-size: 1rem;
   outline: 0;
}

.pagination-btn.standard:hover {
   border: 0;
}

.search-results-container {
   margin: 0 auto;
   max-width: 100%;
   width: 100%;
}

.result-grid > div {
   border-top: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
   margin-left: -1px;
   margin-bottom: -1px;
}

@media (min-width: 576px) {
   .result-grid > div {
      border-right: 1px solid #ddd;
      border-left: 1px solid #ddd;
      margin-left: -1px;
      padding: 1rem !important;
   }
}

.result-grid > div .productLabelSale {
   line-height: 22px;
}

.result-grid > div .productLabelSale {
   right: .5rem;
}


.result-grid > div .badge-secondary {
   font-size: 80%;
   line-height: 1.5;
}