:root{
    --primary-blue: #3f63ad;
    --primary-bg: #f2f3f5;
    --primary-green: #09ab09;
  }
  .read-more-details{
    background: linear-gradient(to top,#fff 0%, #fff 65%, #ffffff2d 83%, #ffffff00 100%);
    }
    
    .read-more-details.transparent{
        background: transparent !important;
    }

    #overlay{

        z-index: 10;
        position: fixed;
        height: 100vh;
        width: 100vw;
        background: #00000031;
      }

    
.price-checkbox-container input[type="radio"] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    appearance: none;
    /* For iOS < 15 to remove gradient background */
    background-color: #fff;
    /* Not removed via appearance */
    margin: 0;
    display: grid;
    place-content: center;
    margin: 0;
    width: 1.1em;
    height: 1.1em;
    border: 0.05em solid rgb(182, 182, 182);
    border-radius: 50%;
    font: inherit;
    color: currentColor;
    transform: translateY(-0.075em);
    cursor: pointer;
  }
  
  .price-checkbox-container input[type="radio"]::before {
    content: "";
    width: 0.4em;
    height: 0.4em;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em white;
  }
  
  .price-checkbox-container input[type="radio"]:checked::before {
    transform: scale(1);
  }
  .price-checkbox-container input[type="radio"]:checked {
    background-color: #4257f3;
  }
  
  .price-checkbox-container  label{
  cursor: pointer;
  }
#listAside{}  

@media (max-width: 1024px) {
    #listAside{
        position: fixed;
        top: 0;
        right: -120%;
        z-index: 999 !important;
        height: 100vh;
        transition: .3s ease;
    }
    #listAside > div{
        overflow: auto;
        height: 100%;
    }
    #listAside.active{
        right: 0;
        height: 100vh !important;
    }
    .des-title{
        font-size: 20px !important;
    }

}


  @media (min-width: 1024px) {
    .content-fixed {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
      padding-left: 285px;
      max-width: 1110px;
      z-index: -20;
      transition: transform 150ms ease;
    }
    #product-content > div {
    
        border-left: 1px solid #e5e7eb !important;
    }
  }

  .pagination-container {
    display: flex;
    gap: 0.5rem;
    padding: 0;
  }
  
  .pagination-container > li {
    background-color: #f3f4f6; /* Tailwind's bg-bgGray */
    padding: 2px 0.75rem; /* py-[2px] px-3 */
    color: #525252; /* text-neutral-600 */
    cursor: pointer;
    border-radius: 0.125rem; /* rounded-sm */
    border: 2px solid transparent;
    transition: background-color 0.2s ease;
  }
  
  .pagination-container > li:hover {
    background-color: #e5e7eb; /* hover:bg-neutral-200 */
  }
  
  .pagination-container > li:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Tailwind's shadow */
    border-color: #e5e7eb; /* border-neutral-200 */
  }
  
  .list-pagination-active {
    background-color: #6d7df3 !important;
    color: white !important;
  }
  

  .spinner-border {
    --bs-spinner-border-width: .5rem !important;

}

.opacity-product{
  opacity:50;
}