#shadow.no-scroll {
  overflow: hidden;
}

#searchForm {
  position: sticky;
  top: 100px;
  align-self: flex-start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.filterLabelsContainer{
  display: none;
}
#orederForm {
  margin: unset;
}

#searchForm #clearSearch {
  display: none;
}

#orederForm #clearSearch {
  padding: 12px 16px;
  border-radius: 40px;
  border: 1px solid #969696;
  color: var(--NEUTRAL-GREY-5, #707070);
  text-align: center;
  font-family: "OpenSans Regular";
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin: unset;
  width: auto;
  background-color: transparent;

}

#orederForm .searchLabels {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 16px 0 0 0;
}

#orederForm .labelSpan,
#filterDiv .filterLabelsContainer .labelSpan {
  border-radius: 40px;
  background: var(--NEUTRAL-WHITE, #FFF);
  max-width: 350px;
  padding: 12px 35px 12px 12px;
  display: flex;
  align-items: center;
  margin: unset;
  position: relative;
}

#orederForm .labelSpan .textLabel,
#filterDiv .filterLabelsContainer .labelSpan .textLabel {
  color: var(--NEUTRAL-GREY-5, #707070);
  text-align: center;
  /* GENERAL/BODY/BOLD */
  font-family: "OpenSans Regular";
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#orederForm .removeLabel,
#filterDiv .filterLabelsContainer .removeLabel {
  position: absolute;
  width: 20px;
  height: 20px;
  right: 11px;
  top: 11px;
  color: black;
  padding: unset;
}

#orederForm #formPosition select {
  border-radius: 6px;
  border: 1px solid #969696;
}

.right_container_filters {
  float: right;
  display: flex;
  margin-top: 16px;
}

.right_container_filters .vm-order-list,
.right_container_filters .limitBoxContainer {
  position: relative;
  width: max-content;
}

.right_container_filters .vm-order-list #selectOrder,
.right_container_filters #productsCount {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: transparent;
  padding: 10px 14px;
  padding-right: 36px;
  border: 1px solid #969696;
  border-radius: 6px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1 0 0;
  color: #707070;
  font-family: "OpenSans Regular";
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  cursor: pointer;
  box-shadow: none;
  margin-top: unset;
}

.right_container_filters .vm-order-list::after,
.right_container_filters .limitBoxContainer::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 45%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url('/templates/visiotech/html/com_virtuemart/assets/images/expand_more.svg');
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}


.right_container_filters>button {
  float: unset;
}

#filterDiv .filter .param_title {
  color: #707070;
  font-family: "OpenSans Regular";
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  padding: .5em 25px .5em 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none !important;
}
.param_title + .filtertooltip {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  position: absolute;
  right: 0;
  top: -67%;
  transform: translateY(-50%);
  background: var(--neutral-grey6, #4D4D4D);
  padding: 16px 12px;
  border-radius: 4px;
  z-index: 10;
  color: var(--neutral-white, #FFF);
  font-family: "OpenSans Regular";
  font-size: 10px;
  font-style: normal;
  line-height: 14px;
  pointer-events: none;

  
  white-space: normal;     
  max-width: 250px;       
  word-break: break-word; 
}

#filterDiv .filter .filter_txtCheck_container {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

#filterDiv .button_collapse:before,
.button_collapse:after {
  background-color: #707070;
}

#filterDiv .filter_fields input[type="checkbox"] {
  min-width: 18px;
  height: 18px;
  border: 2px solid #6f6f6f;
  border-radius: 3px;
  margin-right: unset;
  position: relative;
  top: 5px;
  cursor: pointer;
  accent-color: #4a4a4a;

}


#filterDiv .filter_fields input[type="checkbox"]:checked {
  background-color: #4a4a4a;
  border-color: #4a4a4a;
}

#searchForm #filterDiv label {
  color: #707070;
  font-family: "OpenSans Regular";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  margin: unset;
}

#vm_right_view {
  padding-right: unset;
}

#filterDiv .button_collapse {
  position: absolute;
  top: 10px;
  right: 0px;
  width: 10px;
  height: 10px;
}

#vm_right_view .productsWrapper {
  display: flex;
  flex-wrap: wrap;
  padding: 0em 0 14px 7px;
}

#vm_right_view .productsWrapper>div {
  padding: 0em 7px 14px 7px;
}

#vm_right_view #skeletonWrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  padding: 0em 0 14px 7px;
}

#skeletonWrapper .product-skeleton {
  padding: 24px 16px;
  background: #fff;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
  width: calc(33.333% - 13px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#skeletonWrapper .skeleton-line {
  height: 16px;
  border-radius: 4px;
  background-color: #F3F3F3;
  margin-bottom: 10px;
}

#skeletonWrapper .skeleton-line_title {
  height: 24px;
  border-radius: 4px;
  background-color: #F3F3F3;
  margin-bottom: 16px;
  width: 65%;
  align-self: start;
}

#skeletonWrapper .skeleton-line.short {
  width: 40px;
}

#skeletonWrapper .skeleton-line.medium {
  width: 80px;
}

#skeletonWrapper .skeleton-line.full {
  width: 100%;
  margin-top: 14px;
}

#skeletonWrapper .skeleton-subinfo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 16px;
  width: 100%;
}

#skeletonWrapper .skeleton-avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: #F3F3F3;
  margin: 0 0 16px 0;
}

#skeletonWrapper .skeleton-description {
  width: 100%;
  margin-bottom: 16px;
}

#skeletonWrapper .skeleton-description .skeleton-line:nth-of-type(1) {
  width: 31%;
}

#skeletonWrapper .skeleton-description .skeleton-line:nth-of-type(3) {
  width: 80%;
}

#skeletonWrapper .skeleton-description .skeleton-line:nth-of-type(4) {
  width: 60%;
}

#skeletonWrapper .skeleton-rectangle {
  width: 65%;
  height: 60px;
  border-radius: 6px;
  background-color: #F3F3F3;
}

/* Animación shimmer */
#skeletonWrapper .skeleton-shimmer {
  background: linear-gradient(90deg, #F3F3F3 25%, #ededed 50%, #F3F3F3 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

#formPosition .btn_openFilters {
  background-color: transparent;
  padding: 10px 14px;
  border: 1px solid #969696;
  border-radius: 6px;
  height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1 0 0;
  color: #707070;
  font-family: "OpenSans Regular";
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  cursor: pointer;
  box-shadow: none;
  margin-top: unset;
}
#formPosition .btn_openFilters:focus {
  outline: none;
}

#formPosition .btn_openFilters .openFiltersText {
  display: none;
}

#formPosition .btn_openFilters .openFiltersCount {
  display: none;
}

 #filterNav{
    display: block;
    height: 90%;
    position: relative;
    overflow: hidden;
  }
.notFoundWrapper{
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 3em;
}
.notFoundWrapper > h3{
  margin: 24px 0 16px 0;
  color: #707070;

  text-align: center;
  font-family: "Museosans_700";
  font-size: 24px;
  font-style: normal;
  line-height: normal;
}
.notFoundWrapper > button{
  margin: 40px 0  0;
  border-radius: 6px;
  background: var(--primary-principal, #CA181A);
  border: unset;
  width: 280px;
  height: 48px;
  color: var(--White, #FFF);
  text-align: center;
  font-family: "OpenSans Regular";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px; /* 125% */
  letter-spacing: 0.1px;
}
.notFoundWrapper > button:hover{
  background-color: var(--primary-variant1, #A80717);
}
.notFoundWrapper > button:focus{
  background-color: var(--primary-variant2, #8C0002);
}
.notFoundWrapper > span{
  color: var(--neutral-grey4, #969696);
  text-align: center;
  font-family: "Museosans_500";
  font-size: 20px;
  font-style: normal;
  line-height: 24px; /* 120% */
}
.filterCounts{
    display: flex;
    gap: 10px;
    margin: 10px 10px 10px 17px;
    color: var(--neutral-grey5, #707070);
    /* HOME PAGE/H4/BOLD */
    font-family: "OpenSans Regular";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
}
    .filterNavMobile {
        display: none;
    }
@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

@media (max-width: 1200px) {
  .product-skeleton {
    width: calc(50% - 13px);
  }

  #vm_right_view {
    padding-right: 15px;
  }

  #formPosition {
    margin-left: 15px;
    margin-right: 15px;
  }

  #skeletonWrapper .product-skeleton {
    width: calc(50.333% - 13px);
  }

  #skeletonWrapper .product-skeleton:nth-child(n+7):nth-child(-n+9) {
    display: none;
  }
}

@media (max-width: 768px) {
  #searchForm #clearSearch {
    display: inline-block;
  }
  .filterCounts{
    display: none;
  }
  #filterDiv {
    padding: 0 15px;
  }
  #skeletonWrapper .product-skeleton {
    width: calc(100% - 13px);
  }

  #skeletonWrapper .product-skeleton:nth-child(n+5):nth-child(-n+9) {
    display: none;
  }

  .product-skeleton {
    width: calc(100% - 6px);
  }
  #formPosition .btn_openFilters {
    display: flex;
  }
  #formPosition .btn_openFilters .openFiltersText {
    display: block;
    color: var(--NEUTRAL-GREY-5, #707070);
    font-family: 'openSans Regular';
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }

  #formPosition .btn_openFilters .openFiltersCount {
    display: block;
    color: var(--NEUTRAL-GREY-5, #707070);
    font-family: 'openSans Regular';
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }

  #searchForm {
    top: 0;
    align-self: flex-start;
    max-height: 100vh;
    overflow-y: auto;
    padding: unset;
  }

  .filterNavMobile {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 0 15px;
        height: 12%;
        background: white;
        box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.25);
        flex-wrap: wrap;
  }
  #filterNavundoButton{
    display: block;
    height: 87%;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .filterNavMobile #clearSearch {
    width: 50%;
    display: flex;
    height: 48px;
    padding: 10px var(--Padding-medium, 24px);
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    border: 1px solid var(--PRIMARY-PRINCIPAL, #CA181A);
    color: var(--PRIMARY-PRINCIPAL, #CA181A);
    text-align: center;

    /* GENERAL/BUTTON/Button */
    font-family: "OpenSans Regular";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    background-color: #FFF;
  }
      .filterNavMobile #clearSearch.disabled{
      pointer-events: none;
      opacity: 0.2;
  }
  .filterNavMobile .donebtn.disabled{
      pointer-events: none;
      background: var(--neutral-grey2, #ECEAEA);
      color: var(--neutral-grey3, #BEBEBE);
  }
  .undoLastFilter{
    display: flex;
    height: 48px;
    padding: 16px var(--Padding-medium, 24px);
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    background: var(--primary-principal, #CA181A);
    color: var(--White, #FFF);
    text-align: center;
    font-family: "OpenSans Regular";
    font-weight: 700;
    font-size: 14px;
    font-style: normal;
    width: 100%;
    line-height: normal;
    border: unset;
  }

  .filterNavMobile a {
    width: 50%;
    display: flex;
    height: 48px;
    padding: 16px var(--Padding-medium, 24px);
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    border-radius: 6px;
    background: var(--PRIMARY-PRINCIPAL, #CA181A);
    color: var(--White, #FFF);
    text-align: center;
    /* GENERAL/BUTTON/Button */
    font-family: "OpenSans Regular";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border: unset;
  }
  .filterNavMobile a:hover {
  outline: none;
  color: white;
  text-decoration: none;
  }
  .filterNavMobile a:focus {
  outline: none;
  }
  .filterLabelsContainer{
    display: block;
    margin-top: 5%;
  }
  .filterLabelsContainer .filterLabelsTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .filterLabelsContainer .filterLabelsChips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 16px 0 0 0;
  }

  .filterLabelsContainer .filterLabelsTitle h3 {
    color: var(--NEUTRAL-GREY-6, #4D4D4D);
    /* HOME PAGE/MOBILE/H2/H2- BOLD */
    font-family: "Museosans_700";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px;
    margin: unset;
    /* 130% */
  }
  .filterLabelsContainer .filterLabelsTitle button {
    width: 28px;
    height: 28px;
    background: url('/templates/visiotech/html/com_virtuemart/assets/images/close.svg') no-repeat center center;
    border: none;
  }

}

@media (max-width: 523px) {
  .right_container_filters {
    float: right;
    display: flex;
    margin-top: 16px;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
    padding: 0 7px 7px 14px;
  }
  #filterDiv .filter .param_title {
    white-space: unset; 
    overflow: unset; 
    text-overflow: unset; 

}

  .right_container_filters .vm-order-list {
    width: 100%;
  }

  .right_container_filters .vm-order-list #selectOrder {
    width: 100%;
    margin: unset;
  }

  #formPosition .btn_openFilters {
    max-width: 110px;
    margin: unset;
    padding: 10px 14px;
  }

  .right_container_filters .vm-order-list::after {
    top: 50%;
  }

  .right_container_filters .limitBoxContainer::after {
    top: 45%;
  }
}