/*===============================RESET PREVIOUS CLASS START===================*/
/*=========OI-BREADCRUMB==========*/

.oi-breadcrumb {font-size: 16px;color: #8F99A3;line-height: 24px;font-weight: normal;margin-bottom:12px;float:none;}
.oi-breadcrumb a {color: #8F99A3;}
.oi-breadcrumb span {font-weight: bold;color: #FF4BB3;font-size: 16px;line-height: 21px;}

/*=========AD============*/
.oi-adblock{
background: none;
}

.oi-adimg{
padding-bottom: 0;
}

/*===========QUIZ HEADING=========*/
.oi-quiz-heading{
font-size: 24px;
font-weight: 400;
line-height: 23.59px;
color: #FAE63C!important;
}

.dots{
text-align: left!important;
}

.dot.active{
background: #C2C2C2!important;
}

/*=============TRENDING WRAPPER==========*/
.oi-trending-wrapper{
margin-bottom: 36px !important;
}
/*====================================END=================================================*/

/*======================COMMODITY THEME COLOR================*/
.theme-light{
--bg-share-icon: #08F4FB;
--border-dropdown: #E6EBEA;
--bg-dropdown: #FFF;
--dropdown-shadow: #00000026;
--dropdown-active-border: #013332;
--list-border: #0A0E121A;
--bg-list-hover: #E6EBEA;
--bg-color-arrow: #013332;
--bg-table-heading: #F2F5F5;
--buy-bg-color: #013332;
--buy-color: #08F4FB;
--faq-answer: #141A20;
/*===============COMMON COLOR=========*/
--title-color: #013332;
--title-font-color:#013332;
--bg-color-secondary: #F2F5F5;
--font-color-heading: #0A0E12;
--font-color-tertiary: #28313A;
--font-color-fourth: #141A20;
/*===========ICONS===========*/
--share: url(../images/lightmode/share.svg);
--dropdown-icon: url(../images/lightmode/filter-down.svg);
--header-line: url(../images/lightmode/Line.svg);
--right-arrow: url(../images/lightmode/arrow-right.svg);
--list-arrow-icon: url(../images/lightmode/list-right-arrow.svg);
}

.theme-dark{
--bg-share-icon: #06ADB2;
--border-dropdown:  #28313A;
--bg-dropdown: #28313A;
--dropdown-shadow: #00000026;
--dropdown-active-border: #8F99A3;
--list-border: #28313A;
--bg-list-hover: #1A2127;
--bg-color-arrow: #06ADB2;
--bg-table-heading: #1A2127;
--buy-bg-color: #06ADB2;
--buy-color: #FFFFFF;
--faq-answer: #EDEDED;
/*===============COMMON COLOR=========*/
--title-color: #ffffff;
--title-font-color:#FFFFFF;
--bg-color-secondary: #141A20;
--font-color-heading: #ffffff;
--font-color-tertiary: #EDEDED;
--font-color-fourth: #fff;
/*===========ICONS===========*/
--share: url(../images/darkmode/share-white.svg);
--dropdown-icon: url(../images/darkmode/filter-down-white.svg);
--header-line: url(../images/darkmode/line-purple.svg);
--right-arrow: url(../images/darkmode/arrow-right-white.svg);
--list-arrow-icon: url(../images/lightmode/list-right-arrow.svg);
}


/*============================COMMON STYLE STARTS HERE==========================*/

/*===========INFO===============*/
.info{
margin-bottom: 32px;
}

.info-heading{
display: flex;
justify-content: space-between;
}

.info .oi-main-heading{
margin-bottom: 10px;
color: var(--title-color)!important
}

/*=====PRESENTED IN COMMODITY PRODUCT PAGE=====*/
.share-icon{
width: 32px;
height: 32px;
background: var(--bg-share-icon);
border-radius: 100%;
position: relative;
}

.share-icon .icon{
background-image: var(--share);
background-repeat: no-repeat; 
background-size: contain; 
background-position: center;
width: 16px; 
height: 18px;
position: absolute;
top: 6px;
left: 6px;
}

.info p{
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0.01em;
text-align: left;
color: var(--font-color-tertiary);
}

.info p .read{
font-size: 15px;
font-weight: 700;
line-height: 22.5px;
letter-spacing: 0.01em;
text-align: left;
text-decoration: underline;
cursor: pointer;
color: var(--font-color-fourth);
}

.hide{
display: none;
}

/*===================FILTER CONTAINER==============*/
.filter-container{
margin-bottom: 14px;
}

.filter-left{
display: flex;
justify-content: end;
}

.filter-inbetween{
display: flex;
justify-content: space-between;
}

/*==================DROPDOWN CONTAINER==============*/
.dropdown-container{
position: relative;
margin-bottom: 18px;
}

.dropdown-border{
border: 1px solid var(--border-dropdown);
padding: 10px 14px;
border-radius: 10px;
}

/*===========DROPDOWN===========*/
.filter-left .dropdown{
width: 360px; /*FOR COMMODITY LIST PAGE*/
}

.dropdown{
width: 280px; /*FOR BOTH PRICE LIST AND PRODUCT PAGE*/
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}

.dropdown-input{
color: var(--title-font-color);
font-size: 14px;
font-weight: 400;
line-height: 16.1px;
text-align: left;
}

.dropdown-arrow{
background-image: var(--dropdown-icon);
background-repeat: no-repeat; 
background-size: contain; 
background-position: center;
width: 13px; 
height: 8px; 
}

.dropdown-popup-container{
width: 100%;
position: absolute;
right: 0;
top: 45px;
z-index: 10000;
}

.dropdown-popup{
width: auto;
height: 170px;
padding: 10px 14px;
background: var(--bg-dropdown);
box-shadow: 0px 0px 24px 0px var(--dropdown-shadow);
border-radius: 5px;
overflow-y: scroll;
}

.dropdown-popup .list{
padding: 12px 0px;
cursor: pointer;
}

.dropdown-popup .list p a{
font-size: 14px;
font-weight: 400;
line-height: 16.1px;
text-align: left;
color: var(--font-color-fourth);
}

.show-options{
display: none;
}

.dropdown-arrow-rotate{
transform: rotate(180deg);
}

.active-dropdown-border{
border: 1px solid var(--dropdown-active-border);
}

/*===============DISCLAIMER===========*/
.disclaimer{
margin-bottom: 32px;
}

.disclaimer p{
font-size: 14px;
font-weight: 400;
line-height: 22px;
text-align: left;
color: var(--font-color-tertiary);
}

.disclaimer p span{
font-weight: 700;
color: var(--font-color-fourth);
}

/*==================PRICE LIST============*/
.price-list{
width: 300px;
border: 1px solid var(--list-border);
border-radius: 10px;
margin-bottom: 36px;
}

.price-list .header{
background: var(--bg-color-secondary);
padding: 10px;
border-radius: 10px 10px 0 0;
position: relative;
z-index: 1;
}

.price-list .header .line{
background-image: var(--header-line);
background-repeat: no-repeat; 
background-size: contain; 
background-position: left;
width: 98px;
height: 17px;
position: absolute;
z-index: -1;
bottom: 10px;
}

.price-list .header p{
font-size: 15px;
font-weight: 700;
line-height: 17.25px;
text-align: left;
color: var(--font-color-heading);
}

.price-list .price-list-container{
padding: 5px 0px;
}

.price-list .price-list-container .list{
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
}

.price-list .price-list-container .list p{
font-size: 14px;
font-weight: 400;
line-height: 18.48px;
text-align: left;
color: var(--font-color-tertiary);
}

.price-list .price-list-container .list .right-arrow{
background-image: var(--right-arrow);
background-repeat: no-repeat; 
background-size: contain; 
background-position: center;
width: 6px; 
height: 11px;
}

/*================RIGHT AD=============*/
.fix-right-ad{
position: fixed;
top: 0;
right: 5px;
}

.fix-right-ad .box{
width: 160px;
height: 600px;
}



/*====================================PAGE WISE STYLE STARTS HERE==========================*/



/*===============================COMMODITY LIST PAGE====================================*/
/*=================LIST CONTAINER============*/
.list-container{
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 40px;
}

.list-item{
width: 282px;
height: 93px;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid var(--list-border);
border-radius: 10px;
padding: 0px 15px;
}

.list-item:hover{
background: var(--bg-list-hover);
border: none;
}

.list-item .list-image{
width: 88px;
height: 66px;
}

.list-item p{
width: 136px;
font-size: 15px;
font-weight: 700;
line-height: 21px;
text-align: left;
color: var(--font-color-fourth);
}

.list-arrow{
width: 24px;
height: 24px;
border-radius: 100%;
background: var(--bg-color-arrow);
position: relative;
}

.list-arrow .arrow-icon{
background-image: var(--list-arrow-icon);
background-repeat: no-repeat; 
background-size: contain; 
background-position: center;
width: 13px; 
height: 13px;
position: absolute;
top: 5px;
left: 6px;
}

.load-more__btn{
display: flex;
justify-content: center;
}


/*=============TABLE STYLE IN BOTH COMMODITY PRICE LIST AND PRODUCT PAGE===========*/
/*===============TABLE SECTION============*/
.table-section{
margin-bottom: 32px;
}

.table-heading{
margin-bottom: 20px;
}

.table-heading p{
font-size: 22px;
font-weight: 700;
line-height: 28px;
text-align: left;
color: var(--font-color-heading)
}

/*====================TABLE CONTAINER==============*/
.table-container {
width: 100%;
border-collapse: separate; 
border-spacing: 0;
border-radius: 10px;
overflow: hidden; 
border: 1px solid var(--list-border);
}

.table-container th {
background: var(--bg-table-heading);
font-size: 16px;
font-weight: 700;
line-height: 20px;
letter-spacing: 0.01em;
text-align: left;
color: var(--font-color-fourth);
padding: 10px 20px;
border-bottom: 0.8px solid var(--list-border)
}

.table-container tr td{
font-size: 15px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.01em;
text-align: left;
color: var(--font-color-tertiary);
padding: 10px 20px;
border-bottom: 0.8px solid var(--list-border);
}

.table-container tr:last-child td{
border-bottom: none;
}

.table-container tr td:first-child{
font-size: 16px;
font-weight: 700;
line-height: 20px;
letter-spacing: 0.01em;
text-align: left;
color: var(--font-color-tertiary);
}


/*===============================COMMODITY PRODUCT PAGE=================================*/
/*==============VEG LIST CONTAINER=============*/
.veg-list-container{
display: flex;
justify-content: space-between;
margin-top: 40px;
margin-bottom: 40px;
}

/*============IMAGE CONTAINER==========*/
.image-container{
width: 300px;
height: 213px;
border-radius: 10px;
border: 0.8px solid var(--list-border);
display: flex;
align-items: center;
justify-content: center;
}

/*=================DETAILS CONTAINER===========*/
.details-container .heading{
font-size: 20px;
font-weight: 700;
line-height: 23px;
text-align: left;
color: var(--font-color-fourth);
margin-bottom: 15px;
}

.details-container .para{
font-size: 13px;
font-weight: 400;
line-height: 14.95px;
text-align: left;
color: var(--font-color-tertiary);
padding-bottom: 10px;
}

/*===============BUY BUTTON=========*/
.buy-btn{
width: 290px;
background: var(--buy-bg-color);
border-radius: 10px;
text-align: center;
padding: 10px;
margin-top: 32px;
}

.buy-btn button{
background: none;
border: none;
font-size: 14px;
font-weight: 700;
line-height: 23px;
color: var(--buy-color);
}

/*===============FAQS CONTAINER=============*/

.faq-container{
margin-bottom: 32px;
}

.faq-container .oi-main-heading{
font-size: 22px;
font-weight: 400;
text-align: left;
color: var(--font-color-heading);
margin-bottom: 0;
}

.faq-container .question{
padding: 15px 0;
border-bottom: 1px solid var(--list-border)
}

.faq-container .question:last-child{
border-bottom: none;
}

.faq-container .question p:first-child{
font-size: 17px;
font-weight: 700;
line-height: 22.44px;
text-align: left;
color: var(--font-color-fourth);
padding-bottom: 10px;
}

.faq-container .question p:last-child{
font-size: 16px;
font-weight: 400;
line-height: 24px;
text-align: left;
color: var(--faq-answer);
}