:root{

    --navbarWidth: 1000px;

    --slightColor: rgb(223, 223, 223);



    --notifi_nof: linear-gradient(144deg, #AF40FF, #5B42F3 50%, #00DDEB);

    --notifi_error: linear-gradient(to right, #870000 0%, #190A05  51%, #870000  100%);

    --notifi_warn: linear-gradient(to right, #FFB75E 0%, #ED8F03  51%, #FFB75E  100%);

}

html, body{

    padding: 0;

    margin: 0;

    overflow-x: hidden;

}



.navbarCon{

    display: flex;

    justify-content: center;

    border: 1px solid var(--slightColor);

    position: sticky;

    top: 0;

}

.navbar{

    display: flex;

    justify-content: space-between;

    width: var(--navbarWidth);

    height: 90px;

    align-items: center;

    user-select: none;

    font-family: 'Roboto', sans-serif;

    z-index: 99;

}

.navbar .left{

    display: flex;

    justify-content: left;

}

#nav_search{

    display: flex;

    align-items: center;

}

#nav_search input{

    height: 45px;

    width: 350px;

    outline: none;

    border: 1px solid green;

    border-right-style: none;

    border-radius:  10px 0 0 10px;

    display: flex;

    align-items: center;

    padding: 0 10px;

    margin: 0;

    box-sizing: border-box;

    font-size: 15px;

}

#nav_search button{

    height: 45px;

    box-sizing: border-box;

    outline: none;

    border: 1px solid green;

    background-color: green;

    border-radius: 0 10px 10px 0;

    color: white;

    cursor: pointer;

    width: 45px;

    display: flex;

    justify-content: center;

    align-items: center;

    



}



#logo{

    object-fit: contain;

    height: 80px;

    width: 150px;

    margin-right: 10px;

    cursor: pointer;;

}

#logoHref{

    text-decoration: none;

    margin: 0;

    padding: 0;

}



.navbar .right{

    display: flex;

    justify-content: right;

    align-items: center;

    flex-direction: row-reverse;

}

.nav_rightButtons{

    height: 45px;

    min-width: 45px;

    object-fit: contain;

    padding: 10px;

    box-sizing: border-box;

    border-radius: 15px;

    border: 1px solid var(--slightColor);

    display: flex !important;

    align-items: center;

    justify-content: center;

    cursor: pointer;

}

.nav_rightButtons:not(#nav_cart){

    margin-right: 10px;

}

#nav_cart{

    background-color: green;

    border-color: green;

    color: white;

}

.nav_rightButtons .noA{

    display: flex;

    align-items: center;

    justify-content: center;

}

.nav_IconMargin {

    margin-right: 5px;

}

.categoriesCon{

    font-family: 'Roboto', sans-serif;

    display: flex;

    justify-content: center;

    border-bottom: 1px solid var(--slightColor);

    user-select: none;

}

.categories{

    display: flex;

    height: 50px;

    width: var(--navbarWidth);

    align-items: center;

}

.nav_categori{

    display: flex;

    align-items: center;

    justify-content: center;

    height: 50px;

    overflow-y: hidden;

    box-sizing: border-box;

    transition: border-bottom 100ms;

    cursor: pointer;

    text-decoration: none;

    color: black

}

.nav_categori .headSpan{

    text-align: center;

    box-sizing: border-box;

    padding: 0 15px;

    min-width: 100px;

    display: flex;

}

.nav_categori .headSpan:not(.nav_categori:last-child .headSpan){

    border-right: 1px solid var(--slightColor);

}

.nav_categori .headSpan span{

    display: flex;

    align-items: center;

}
.nav_categori .headSpan span img{
    max-height: 1.5em;
    max-width: 1.5em;
}

.nav_categori:hover{

    border-bottom: 3px blue solid;

}

a.noA{

    text-decoration: none;

    color: inherit;

}







.notification{

    display: flex;

    padding: 5px;

    padding-right: 10px ;

    border-radius: 0 10px 10px 0;

    align-items: center;

    color: white;

    font-family: 'Roboto', sans-serif;

    max-width: 30vw;

    background-image: var(--notifi_nof);

    position: fixed;

    left: 0;

    bottom: 5vh;

    z-index: 98;

    transform: translateX(-100%);

    user-select: none;

}

@keyframes openNotifi {

    0%{

        transform: translateX(-100%);

    }

    70%{

        transform: translateX(10%);

    }

    100%{

        transform: translateX(0);

    }

}

@keyframes closeNotifi {

    0%{

        transform: translateX(0);

    }

    100%{

        transform: translateX(-100%);

    }

}

#notifiInp:checked + input + .notification{

    animation: openNotifi 300ms forwards;

}

#notifiCloseInp:checked + .notification{

    animation: closeNotifi 300ms forwards;

}

.notification span{

    display: flex;

    align-items: center;

    margin-right: 10px;

    cursor: pointer;

}

.cts{

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 20px 0;

    font-family: 'Abel', sans-serif;

}

.mediaNavbar{

    position: fixed;

    top: 0;

    z-index: 101;

    right: 0;

    width: 50vw;

    max-width: 50vw;

    overflow-x: auto;

    height: 100vh;

    padding-top: 90px !important;

    overflow-y: auto;

    transform: translateX(50vw);   

    display: none;    

    background: white;

    padding: 0 20px;

    transition: transform 300ms;

}

.mediaNavbar span{

    margin-right: 0 !important;

    margin-left: 0 !important;

}

.mediaNavbar_button{

    display: none;

    padding-right: 20px;

    user-select: none;

    z-index: 102;

}

.mediaNavbar_button span{

    font-size: 50px;

}

.mediaNavbar span:not(:first-child){

    margin-top: 10px;

}

@media only screen and (max-width: 800px){
    :root{
        --navbarWidth: 100vw !important;
        --cardWidth: 150px !important;
        --fontWidth: 12px !important;
    }
    .navbar .right{

        display: none;

    }

    .mediaNavbar_button{

        display: flex !important;

    }
    .categoriesCon{
        overflow-x: auto;
        justify-content: unset !important;
    }
    .nav_categori{
        white-space: nowrap;
        overflow-y: unset !important;
    }
    
    
.dropdown-menu.navDropMenu[data-bs-popper]{

    width: auto !important;

    position: relative;
    margin-bottom: 15px;

}

    

}

@media only screen and (max-width: 650px){

    #nav_search input{

        width: calc(50vw - 85px);

    }

}

.dropdown-menu.navDropMenu[data-bs-popper]{

    left: auto;

    right: 0;

}





#loadingCon{



    display: flex;



    width: 100%;



    height: 100%;



    position: fixed;



    top: 0;



    left: 0;



    z-index: 999;



    justify-content: center;



    align-items: center;



    background-color: white;



    transition: opacity 300ms;



}







.lds-roller,



.lds-roller div,



.lds-roller div:after {



  box-sizing: border-box;



}



.lds-roller {



  display: inline-block;



  position: relative;



  width: 80px;



  height: 80px;



}



.lds-roller div {



  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;



  transform-origin: 40px 40px;



}



.lds-roller div:after {



  content: " ";



  display: block;



  position: absolute;



  width: 7.2px;



  height: 7.2px;



  border-radius: 50%;



  background: currentColor;



  margin: -3.6px 0 0 -3.6px;



}



.lds-roller div:nth-child(1) {



  animation-delay: -0.036s;



}



.lds-roller div:nth-child(1):after {



  top: 62.62742px;



  left: 62.62742px;



}



.lds-roller div:nth-child(2) {



  animation-delay: -0.072s;



}



.lds-roller div:nth-child(2):after {



  top: 67.71281px;



  left: 56px;



}



.lds-roller div:nth-child(3) {



  animation-delay: -0.108s;



}



.lds-roller div:nth-child(3):after {



  top: 70.90963px;



  left: 48.28221px;



}



.lds-roller div:nth-child(4) {



  animation-delay: -0.144s;



}



.lds-roller div:nth-child(4):after {



  top: 72px;



  left: 40px;



}



.lds-roller div:nth-child(5) {



  animation-delay: -0.18s;



}



.lds-roller div:nth-child(5):after {



  top: 70.90963px;



  left: 31.71779px;



}



.lds-roller div:nth-child(6) {



  animation-delay: -0.216s;



}



.lds-roller div:nth-child(6):after {



  top: 67.71281px;



  left: 24px;



}



.lds-roller div:nth-child(7) {



  animation-delay: -0.252s;



}



.lds-roller div:nth-child(7):after {



  top: 62.62742px;



  left: 17.37258px;



}



.lds-roller div:nth-child(8) {



  animation-delay: -0.288s;



}



.lds-roller div:nth-child(8):after {



  top: 56px;



  left: 12.28719px;



}



@keyframes lds-roller {



  0% {



    transform: rotate(0deg);



  }



  100% {



    transform: rotate(360deg);



  }



}