@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
/*
* {
    margin: 0;
    padding: 0;
    font-family: 'Fira Sans', sans-serif;
} */
body{
    margin: 0px;
    font-family: 'Fira Sans', sans-serif;
    
    
}



#navBar1{
    width: 100%;
    height: 70px;
    background-color: rgb(0,70,190);
    display: grid;
    grid-template-columns: 7% 9.5% 42% 30.5% 11%;
    box-sizing: border-box;
    border-bottom: .5px solid rgb(102, 135, 241);
}

#img{
   max-width: 100%;
    height: auto;
}
#bestBLogo{
    box-sizing: border-box;
    width: 65%;
    height: 57%;
    margin: 20px 0 0 34%;
}

#menuDiv{
    width: 68%;
    display: grid;
    grid-template-columns: 40% 60% ;
    margin: 12% 0 0 30%;


}
.material-icons-outlined
.material-icons-outlined{
    cursor: pointer;
}
#menuText{
    box-sizing: border-box;
    font-size: 1.3vw;
    color: white;
    font-weight: 600;
    padding: 13% 0 0 0;
}





#searchDiv{
    background-color: white;
    width: 93%;
    height: 60%;
    border-radius: 5px;
    margin: 2.5% 0 0 6% ;
    display: grid;
    grid-template-columns: 94% 6%;
}
#inp{
    width: 93%;
    height: 50%;
    font-size: 1.1vw;
    font-weight: 200;
    margin: 10px 0 0 1.5% ;
    outline: none;
    color: rgb(85, 85, 90);
    border: none;
    
}



#aiea{
    display: grid;
    grid-template-columns: 88% 12%;
    /* border: 1px solid red; */

}

#aieaText{
    box-sizing: border-box;
    font-size: 1.3vw;
    color: white;
    font-weight: 600;
    padding: 45% 0 0 0;
}

#cart{
    
    display: grid;
    
    grid-template-columns: 36% 50%;
}

#cartText{
    box-sizing: border-box;
    font-size: 1.3vw;
    color: white;
    font-weight: 600;
    padding: 30% 0 0 0;
}

#cartText:hover , #first>div:hover{
    text-decoration: underline;

}

#navBar2{
    width: 100%;
    height: 40px;
    background-color:rgb(0,70,190) ;
    display: grid;
    grid-template-columns: 56% 44%;
}

#navBar2>div>div:hover,#second>div>div:hover{
    cursor: pointer;
}

#first{
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto;
}

#first>div{
    font-size: 13px;
    line-height: 1.2;
    font-family: 'Fira Sans', sans-serif;
    color: white;
    text-align: right;
    box-sizing: border-box;
    padding: 15px 0 0 0;
    
}

#holiday::after{
    content: "⌵";
    margin: -10px 0 0 2px;
    
}
#more::after{
    
    content: "⌵";
    margin: 0 0 0 3px;
    
}

#secondC{
    display: grid;
    width: 70%;
    height: 100%;
    margin: 0 0 0 20%;
    grid-template-columns: auto auto auto auto;
}

#secondC>div{
    font-size: .9vw;
    color: white;
    /* text-align: right; */
    box-sizing: border-box;
    padding: 15px 0 0 0;
    font-weight: 600;
}

#acc{
    display:grid;
    grid-template-columns: 20% auto;
    grid-gap: 0px;
}
#accText{
    margin: 0 0 0 -10px;
}


#menuDiv:hover{
    cursor: pointer;
}

/* /////menuBox */


#menuBox{
    display: none;
    width: 350px;
    position: absolute;
    height: 650px;
    background-color: white;
    /* border: 1px solid black; */
    margin: 0 0 0 1.5%;
    /* overflow: scroll; */
    animation: .5s ease-in op ;

}

#menuBox>div:nth-child(1)>div>div{
    width: 90%;
    font-size: 1vw;
    color: #0046c4;
    /* margin: 5% 0 0 5%; */
    border-bottom: 1px solid #e0e6ef;
    padding-bottom: 4%;
    font-weight: 600;
    
}

#menuBox>div>div{
cursor: pointer;
}

#outerBox1{
    /* background-color: black; */
    height: 50px;
    box-sizing: border-box;
    padding: 5% 0 0 5%; 
}

#menuBox>div:nth-child(1)>div:nth-child(1)>div>span{
    font-size: 1vw;
    margin: 0  0 0 79%;
}

#menuBox>div:nth-child(1)>div:nth-child(2)>div>span{
    font-size: 1vw;
    margin: 0  0 0 45%;
}

#menuBox>div:nth-child(1)>div:nth-child(3)>div>span{
    font-size: 1vw;
    margin: 0  0 0 74%;
    /* text-align: right; */

}

#menuBox>div:nth-child(1)>div:nth-child(4)>div>span{
    font-size: 1vw;
    margin: 0  0 0 69%;
}

#outerBox2{
    /* background-color: black; */
    height: 50px;
    box-sizing: border-box;
    padding: 5% 0 0 5%; 
}

#outerBox3{
    /* background-color: black; */
    height: 50px;
    box-sizing: border-box;
    padding: 5% 0 0 5%; 
}

#outerBox4{
    /* background-color: black; */
    height: 50px;
    box-sizing: border-box;
    padding: 5% 0 0 5%; 
}

#smallB{
    width: 100%;
    height: 15px;
    background-color: rgb(244,246,249);
    border-top: 1px solid rgb(197,203,213);
}

#spD{
    
    margin: 5% 10% 0 5%;
    font-size: 1.1vw;
    font-weight: 600;
    border-bottom:1px solid #e0e6ef ;
    box-sizing: border-box;
    padding-bottom: 5%;
}

.oB{
    height: 50px;
    box-sizing: border-box;
    padding: 5% 0 0 5%; 
}
.oBDT{
    font-size: 1vw;
    font-weight: 500;
}
.oBDT:hover{
    color: rgb(0,30,115);
    cursor: pointer;
    text-decoration: underline;
    
}
#fa12{
    /* text-align: right; */
    font-size: 1vw;
    box-sizing: border-box;
    padding-left: 83%;
}

.oBD{
    display: grid;
    grid-template-columns: 50% 50%;

}
 


.oBD1{
    display: grid;
    grid-template-columns: 80% 20%;

}

#fa123{
    /* text-align: right; */
    font-size: 1vw;
    box-sizing: border-box;
    padding-left: 54%;
}










#menuBox::before{
    
    content: "";
  position: absolute;
  bottom: 99.9%;
  left: 38.5%;
  margin-left: 0px;

  border-width: 15px;
 
  border-left: 15px;
  border-right: 15px; 
  border-style: solid;
  border-color: white transparent transparent transparent;
  transform: rotateZ(180deg);
  
}

#extend{
     display: none;
    width: 350px;
    position: absolute;
    height: 590px;
    background-color: white;
    /* border: 1px solid black; */
    margin: 0 0 0 24.25%;
    /* overflow: scroll; */
    animation: .5s ease-in op ;
}

#extend>div:nth-child(2){
    color: rgb(0,70,190);
    
}

#extend>div:nth-child(2)>div:hover{
    color: rgb(0,30,115);
    cursor: pointer;
    text-decoration: underline;
    
}

#extend>div:nth-child(5){
    color: rgb(0,70,190);
    
}
#extend>div:nth-child(5):hover{
      color: rgb(0,30,115);
    cursor: pointer;
    text-decoration: underline;
    
}

.oB1{
    margin: 5% 5% 0 5% ;
    box-sizing: border-box;
    padding-bottom: 6%;
    border-bottom: 1px solid rgb(224,230,239);
}


/* //////////// */



::-webkit-scrollbar {
  display: none;
}

/* searchRes */

#searchRes{
    border-radius: 5px;
     display: none;
    width: 595px;
    position: absolute;
    max-height: 350px;
    background-color: white;
    /* border: 1px solid black; */
    margin: -.7% 0 0 19.2%;
    overflow: scroll;
    animation: .5s ease-in op ;
}

#searchRes>div:hover{
    background-color: rgb(250, 250, 250);
}

#searchRes>div>div:nth-child(2){
    color: rgb(0,70,190);
}

#searchRes>div>div:nth-child(2):hover{
    color: rgb(0,30,115);
    cursor: pointer;
    text-decoration: underline;
}


#holidayPopUp{
   display: none;
    width: 300px;
    position: absolute;
    height: 300px;
    background-color: white;
    /* border: 1px solid black; */
    margin: 0 0 0 2%;
    /* overflow: scroll; */
    animation: .5s ease-in op ;
}

#holidayPopUp::before{
    
    content: "";
  position: absolute;
  bottom: 99.9%;
  left: 24%;
  margin-left: 0px;

  border-width: 10px;
 
  border-left: 10px;
  border-right: 10px; 
  border-style: solid;
  border-color: white transparent transparent transparent;
  transform: rotateZ(180deg);
}


#accountPopUp{
   display: none;
    width: 350px;
    position: absolute;
    border-radius: 5px;
    height: 160px;
    background-color: white;
    /* border: 1px solid black; */
    margin: 0 0 0 62%;
    /* overflow: scroll; */
    animation: .5s ease-in op ;
}


#accText{
    width: 75%;
    margin: 15px auto auto auto;
    font-size: .8vw;
    text-align: center;
    
}

#signIn{
    width: 70%;
    height: 30px;
    margin: 15px auto auto auto;
    background-color: #0046c4;
    color: white;
    border-radius: 5px;
    font-size: .9vw;
    text-align: center;
    box-sizing: border-box;
    padding: 1.9% 0 0 0 ;
    font-weight: 600;
    transition: .2s linear;
}

#signIn:hover{
    background-color: #001e73;
}

#cA{
    width: 70%;
    height: 30px;
    margin: 15px auto auto auto;
    background-color:white ;
    color: #0046c4;
    border-radius: 5px;
    font-size: .9vw;
    text-align: center;
    box-sizing: border-box;
    padding: 1.5% 0 0 0 ;
    font-weight: 600;
    border: 1px solid #0046c4;
    transition: .2s linear;
}

#cA:hover{
    background-color: #001e73;
    color: white;
}

#accountPopUp::before{
    
    content: "";
  position: absolute;
  bottom: 99.9%;
  left: 31.8%;
  margin-left: 0px;

  border-width: 10px;
 
  border-left: 10px;
  border-right: 10px; 
  border-style: solid;
  border-color: white transparent transparent transparent;
  transform: rotateZ(180deg);
}

/* saveItemsDIv */

#savedItemsPopUp{
   display: none;
    width: 600px;
    position: absolute;
    height: 200px;
    border-radius: 5px;
    background-color: white;
    /* border: 1px solid black; */
    margin: 0 0 0 55.2%;
    /* overflow: scroll; */
    animation: .5s ease-in op ;
}
@keyframes op{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}


#savedItemsPopUp::before{
    
    content: "";
  position: absolute;
  bottom: 99.9%;
  left: 96.4%;
  margin-left: 0px;

  border-width: 10px;
 
  border-left: 10px;
  border-right: 10px; 
  border-style: solid;
  border-color: white transparent transparent transparent;
  transform: rotateZ(180deg);
}



#appSI{
    /* overflow: scroll; */
    display: block;
    /* width: 100%; */
    overflow-x: scroll;
    margin: 2%;
    /* height: 175px;       */
    white-space: nowrap;
}
#appSI>div{
    display: inline-block;
    margin-right: 10px;
}

#appSI>div>div>div:nth-child(3){
    color: rgb(0,70,190);
    cursor: pointer;
}

#appSI>div>div>div:nth-child(3):hover{
    text-decoration: underline;
    color: rgb(0,30,115);
    cursor: pointer;
}