@font-face {
    font-family: veno;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Veno-Regular.woff2') format('woff2'),
        /* FF39+,Chrome36+, Opera24+*/
        url('../fonts/Veno-Regular.woff') format('woff'),
        /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
        url('../fonts/Veno-Regular.ttf') format('truetype');
}

@font-face {
    font-family: veno-bold;
    font-style: bold;
    font-weight: bold;
    src: url('../fonts/Veno-Bold.woff2') format('woff2'),
        /* FF39+,Chrome36+, Opera24+*/
        url('../fonts/Veno-Bold.woff') format('woff'),
        /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
        url('../fonts/Veno-Bold.ttf') format('truetype');
}


body {
    font-family: "veno";
    font-size: 16px;
}
#retail{
    color: #475569;
}
#Whole{
    color: #0f172a;
}
.Upicon{
    color:#e11d48!important;
}
.Downicon{
    color:#059669!important;
}
.Seeicon{
    color:#1e40af!important;
}
#HearbalInput,
#OilInput,
#cerealsInput,
#medicinalInput,
#herbal-essences-Input,
#ardehInput,
#coffeeInput,
#nutsInput,
#allproductInput {
    font-family: "veno";
    background-position: 10px 10px;
    background-repeat: no-repeat;
    width: 100%;
    font-size: 18px;
    padding: 12px 20px 12px 40px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
}

#HearbalTable,
#OilTable,
#cerealsTable,
#medicinalTable,
#herbal-essences-Table,
#ardehTable,
#coffeeTable,
#nutsTable,
#allproductTable {
    font-family: "veno-bold";
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #ddd;
    font-size: 18px;
    cursor: pointer;
    text-align: center;
}

#HearbalTable th,
#OilTable th,
#cerealsTable th,
#medicinalTable th,
#herbal-essences-Table th,
#ardehTable th,
#coffeeTable th,
#nutsTable th,
#allproductTable th{
    background-color: #f7f8fa;
    color: #1e293b;
    text-align: center;
    border: #f7f8fa;
}

#HearbalTable th,
#HearbalTable td,
#OilTable th,
#OilTable td,
#cerealsTable th,
#cerealsTable td,
#medicinalTable th,
#medicinalTable td,
#herbal-essences-Table th,
#herbal-essences-Table td,
#ardehTable th,
#ardehTable td,
#coffeeTable th,
#coffeeTable td,
#nutsTable th,
#nutsTable td,
#allproductTable th,
#allproductTable td {
    font-family: "veno";
    text-align: right;
    padding: 14px;
    font-size: 22px;
    text-align: center;
}

#OilTable tr,
#HearbalTable tr,
#cerealsTable tr,
#medicinalTable tr,
#herbal-essences-Table tr,
#ardehTable tr,
#coffeeTable tr,
#nutsTable tr,
#allproductTable tr{
    font-family: "veno-bold";
    border-bottom: 1px solid #ddd;
}

#HearbalTable tr.header,
#OilTable tr.header,
#cerealsTable tr.header,
#medicinalTable tr.header,
#herbal-essences-Table tr.header,
#ardehTable tr.header,
#coffeeTable tr.header,
#nutsTable tr.header,
#allproductTable tr.header {
    font-family: "veno-bold";
    background-color: #3730a3;
    color: #fff;
    text-align: center;
}

#HearbalTable tr:hover,
#OilTable tr:hover,
#cerealsTable tr:hover,
#medicinalTable tr:hover,
#herbal-essences-Table tr:hover,
#ardehTable tr:hover,
#coffeeTable tr:hover,
#nutsTable tr:hover,
#allproductTable tr:hover{
    background-color: #eef2ff;
}
#nutsTable th{
    color:#1e293b;
}
#allproductTable th{
    color:#1e293b;
}
.filterDiv {
    line-height: 100px;
    text-align: center;
    margin: 2px;
    display: none;
}

.show {
    display: block;
}

.container {
    margin-top: 20px;
    overflow: hidden;
}

/* Style the buttons */
.btn {
    font-family: "veno";
    border: none;
    outline: none;
    padding: 12px 16px;
    background-color: #f1f1f1;
    cursor: pointer;
    font-size: 22px;
    border-radius: 5px;
    margin-bottom: 10px;
    margin-left: 5px;
}
.btn {
    background-color: #fff5e4;
}
.btn:hover {
    background-color: #ddd;
}
.btn.oils {
    background-color: #fff5e4;
    color: #292d32;
}
.btn.herbal {
    background-color: #f4eeff;
    color: #292d32;
}
.btn.coffee {
    background-color: #cbf1f5;
    color: #292d32;
}
.btn.medicinal {
    background-color: #eaffd0;
    color: #292d32;
}
.btn.essences {
    background-color: #f9f7f7;
    color: #292d32;
}
.btn.ardeh {
    background-color: #f2f6f9;
    color: #292d32;
}
.btn.cereals {
    background-color: #cadefc;
    color: #292d32;
}
.btn.nuts {
    background-color: #ffe3e1;
    color: #292d32;
}
.btn.allproduct{
    background-color: #1A1A23;
    color: #ffffff;
}
.btn.active {
    background-color: #8a94a0;
    color: #ffffff;
}
.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #f1f5f9;
    color: #1e293b;
    text-align: center;
  }