@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  color: #555;
  background-color: #f1f2f4;

}

.container{
  margin: 0 auto;
  min-width: 978px;
  max-width: 1680px;
  padding: 8px;
  overflow: hidden;
}


.productContent{
  display: flex;
  gap: 8px;
}


.product-filter{
  height: 100%;
  flex: 0 0 280px;
  background-color: #fff;
  max-width: 280px;
  padding: 0px 10px 0px 0px;
}


.filter-section{
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.container-title{
  font-size: 18px;
  text-transform: capitalize;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;

}

.title{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title a{
  text-decoration: none;
  cursor: pointer;
  color: #2874f0;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
}



.section-title{
  font-size: 14px;
  text-transform: capitalize;
  font-weight: 500;
}

.hyper-link-product{
  display: flex;
  color: #878787;
  align-items: center;
}

.hyper-link-product a{
  text-decoration: none;
  color: #878787;
  font-size: 14px;
} 

.product-name{
  margin-left: 14px;
}

.product-name span{
  font-weight: 500;
}

.filter-input-range{
  margin: 5px 0;
  background-color: #f1f2f4;
  padding: 15px;
  padding-bottom: 0;
}
.price-dropdownBox{
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
}

.price-dropdwn{
  width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 1px;
    appearance: none; /*default dropdown icon remove*/
    background: #fff url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCAwbDUgNSA1LTUiIGZpbGw9IiMyMTIxMjEiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==) no-repeat 90% 50%;
    height: 24px;
    font-size: 14px;
    color: #212121;
    line-height: 1;
    padding: 0 5px;
    outline: none;

}

.seprateprice-option{
  color: #878787;
}


.accordion-header{
  cursor: pointer;
}


.accordian-content {
  display: none;
}
.brand-select input{
  margin-right: 10px;
  border: 1.4px solid #878787;
  border-radius: 1.5px;
  margin-top: 15px;

}

.brand-select label{
  cursor: pointer;
}
.flipkart-assured{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.question{
  border-radius: 50%;
  background-color: #fff;
  color: #878787;
  font-weight: 500;
  width: 16px;
  height: 16px;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  display: inline-block;
  border: 1px solid #e0e0e0;
  box-shadow: 0 0 1px 0 rgba(0,0,0,.2);
  vertical-align: middle;
  margin: 0 2px 0 8px;
  cursor: pointer;
}

.flipkart-assured input{
  vertical-align: middle;

}

.flipkart-assured label{
cursor: pointer;
}


.assured-img{
  width: 77px;
  height: 21px;
  vertical-align: middle;

}

.dropdown-container{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.star-icon{
  font-size: 10px;
}


/* right side product view section */

.product-view{
  width: 100vw;
  height: 100%;
  background-color: #fff;
  padding: 8px;

}


.view-description{
  background: #fff;
  padding: 12px 16px 0;
  border-bottom: 1px solid #f0f0f0;
  height: 100%;
  min-height: 72px;
}

.pagination{
  display: flex;
}

.pagination-menu{
  display: flex;
}

.pagination-menu a{
  text-decoration: none;
  color: #878787;
  font-size: 12px;
  text-overflow: ellipsis;
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;

}

.right-forward-icon{
  font-size: 12px;
  color: #878787;

}


.prodcut-list a{
  text-decoration: none;
  color: #2874f0;
  font-size: 12px;
}

.prodcut-list span{
  color: #2874f0;
  font-size: 12px;
}

.heading{
  font-weight: 500;
  font-size: 16px;
  margin-top: 8px;
  display: inline-block;
}

.showingResult{
  color: #878787;
  font-size: 12px;
}
.sortby{
  font-size: 16px;
  font-weight: 600;
}

.product-sort{
  display: flex;
  align-items: center;
  margin: 10px 0;
}

.product-sort .sort{
  padding: 8px 0 4px;
  margin: 0 10px;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
}

.sort-active{
  color: #2874f0;
  border-bottom: 2px solid #2874f0;
}

.product-card-view{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  padding: 24px 0 30px 24px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  
}

.product-card-view:hover .product-title{
  color: #2874f0;
}

.product-img img{
  width: 158px;
  height: 200px;
  margin: 15px 0;
}

.review{
  line-height: normal;
    display: inline-block;
    color: #fff;
    padding: 2px 4px 2px 6px;
    border-radius: 3px;
    font-weight: 500;
    font-size: 12px;
    vertical-align: middle;
    background-color: #388e3c;
}

.customer-rating{
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
}

.review-count span{
  color: #878787;
  font-size: 14px;
  font-weight: 500;
}

.features-list{
  color: #212121;
  font-size: 14px;
  margin-top: 5px;
  line-height: 22px;
  display: table;
}

.features-list::before{
  content: "•";
  color: #c2c2c2;
  padding-right: 8px;
  display: table-cell;
}

.product-title{
  font-size: 16.5px;
  font-weight: 600;
}

.product-price{
  margin-left: 70px;
  display: flex;
}

.product-price .price{
  font-size: 25px;
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
}

.prePrice{
  color: #878787;
}

.prePrice span{
  color: green;
  font-size: 12px;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  
}


.paginationContainer{
  width: 60%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 100px;
}

.page-count p{
  font-size: 14px;
  color: #212121;
}

.pagination-link-container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.pagination-link-container a{
  text-transform: uppercase;
  text-decoration: none;
  font-size: 14px;
  color: #2874f0;
  font-weight: 600;
  text-align: center;
  margin-right: 10px;
}


.page-link-active{
  display: inline-block;
  padding: 0 8px;
  cursor: pointer;
  line-height: 32px;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  
  background: #2874f0;
  color: #fff !important;
}

.askUser-help{ 
  margin-top: 15px;

}

.help-confirmBtn{
  border-radius: 2px;
  border: 1px solid #d7d7d7;
  padding: 6px 28px;
  margin-right: 8px;
  font-weight: 500;
  cursor: pointer;
}

.form-desc{
  border-top: 1px solid #f0f0f0;
  margin-top: 25px;
  padding-top: 20px;
}

.form-inputMsg .form-textarea{
  margin-top: 8px;
  width: 100%;
  padding: 8px;
  max-height: 178px;
  font-size: 14px;
  border: none;
  border: 1px solid #c2c2c2;
  outline: none;
  border-radius: 5px;
}

.form-submitBtn{
  padding: 16px 64px;
  margin-top: 12px;
  box-shadow: none;
  text-transform: capitalize;
  background-color: #2874f0;
  color: #fff;
  outline: none;
  border: none;
  border-radius: 4px;
}



.peoblem-list-select{
  margin: 12px 0;
  font-size: 14px;
  width: 320px;
  font-weight: 600;
  color: #000;
  border: none;
  outline: none;
  border-bottom: 2px solid #e0e0e0;
}

.peoblem-list-select:hover{
  border-bottom: 2px solid #2874f0;

}

.confrimation-form,.not-Confirmform{
  display: none;
}

.form-active{
  display: block;
}