@font-face {
    font-family: Pacific;
    src: url(utilities/Pacifico.ttf);
}

/* removing default browser behaviour/////////////////////////////// */
/* to remove default behaviour */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Remove the blue focus outline on click */
:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Remove visited purple color */
a:visited {
    color: inherit;
}

/* Prevent link from turning blue by default */
a {
    color: inherit;
    text-decoration: none;
}

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


/* FOR VENDOR LOGIN PAGE  */
body{
    margin: 0px;
    overflow-y: scroll;
}
#vendor_login_page{
    width: 100%;
    margin: 0px;
    background: #360033;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #0b8793, #360033);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #0b8793, #360033); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    overflow: scroll;
}
#login_alert{
    width: 55%;
    background-color: hsl(0, 0%, 0%,20%);
    color: red;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 5px;
    overflow: hidden;
    font-size: 1rem;
    animation: alert_animation 0.2s ease-in-out;
    min-width: 800px;
    max-width: 900px;
    min-height: 30px;
    max-height: 35px;
    margin-top: auto;
    margin-bottom: 0%;
}
#vendor_ctn{
    background-color: hsl(0, 0%, 100%,1%);
    min-width: 800px;
    max-width: 900px;
    min-height: 500px;
    max-height: 600px;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    border-radius: 10px;
     box-shadow: 5px 5px 20px hsla(0, 0%, 0%, 5%),
               -5px 5px 20px rgba(0, 0, 0, 5%),
                -5px 5px 20px rgba(0, 0, 0, 5%),
                5px 5px 20px rgba(0, 0, 0, 5%);
    margin-top: auto;
    margin-bottom: auto;
    border: 1px solid hsl(0, 0%, 100%,10%);
}
footer{
    width: 100%;
    height: fit-content;
    background-color: hsl(0, 0%, 0%,20%);
    margin-top: auto;
    margin-bottom: 0vh;
    box-sizing: border-box;
    padding: 10px;
    color: hsl(0, 0%, 100%,80%);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1rem;
    gap: 1.5%;
    display: none;
    
}





#vendor_ctn form{
     width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.7rem;
    animation: vendor_login_form_animation 0.7s ease-in-out ;
}

#vendor_ctn form h1{
    font-size: 2.8rem;
     font-family: Pacific;
    font-weight: bolder;
   overflow: hidden;
   box-sizing: border-box;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
     color: hsl(0, 0%, 100%,75%);
     margin: 0%;
}
#vendor_ctn form h2{
    color: hsl(0, 0%, 100%,60%);
    font-size: 1.3rem;
    font-family: Arial, Helvetica, sans-serif;
    text-shadow: 5px 3px 5px hsl(0, 0%, 0%,5%),
                    -5px 3px 5px hsl(0, 0%, 0%,5%),
                    -5px 3px 5px hsl(0, 0%, 0%,5%),
                    5px 3px 5px hsl(0, 0%, 0%,5%);
    text-decoration: underline 0.3rem hsl(0, 0%, 100%,70%);
    margin: 0%;
}
#vendor_ctn form p{
    text-align: center;
    font-size: 1rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    color: hsl(0, 0%, 100%,70%);
    line-height: 2rem;
    text-shadow: 5px 3px 5px hsl(0, 0%, 0%,5%),
                    -5px 3px 5px hsl(0, 0%, 0%,5%),
                    -5px 3px 5px hsl(0, 0%, 0%,5%),
                    5px 3px 5px hsl(0, 0%, 0%,5%);
    margin: 0%;
}
/* for the input ctn */
#vendor_ctn form .input_ctn{
    width: 85%;
    height: 8.5%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-shadow: 5px 3px 5px hsl(0, 0%, 0%,2%),
                    -5px 3px 5px hsl(0, 0%, 0%,2%),
                    -5px 3px 5px hsl(0, 0%, 0%,2%),
                    5px 3px 5px hsl(0, 0%, 0%,2%);
    background-color: hsl(0, 0%, 100%,10%);
    overflow: hidden;
}
.svg-ctn{
    width: 15%;
    height: 100%;
    box-sizing: border-box;
    padding: 5px;
    background: transparent;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
   
}
#vendor_ctn form svg{
    color: white;
    width: 100%;
    height: 100%;
    opacity: 60%;
    margin-top: auto;
    margin-bottom: auto;
}

/* FOR THE INPUT */
#vendor_ctn form input[type="text"],[type="password"]{
    width: 85%;
    height: 97%;
    border: none;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    font-size: 1.3rem;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: start;
    color: white;
}  

#vendor_ctn form .input_ctn input:focus{
      border: none;
    outline: none;
    font-weight: bolder;
    background: transparent;
}

#vendor_ctn form .input_ctn input::placeholder{
     font-size: 1rem;
     color: white;
     font-weight: lighter;
}

/* FOR THE SUBMIT BTN  */
#vendor_ctn form input[type="submit"]{
     background: #360033;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #0b8793, #360033);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #0b8793, #360033); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    width: 85%;
    height: 8%;
    font-size: 1rem;
    border: none;
    color: white;
    box-sizing: border-box;
    padding: 5px;
     box-shadow: 5px 3px 5px hsl(0, 0%, 0%,5%),
                    -5px 3px 5px hsl(0, 0%, 0%,5%),
                    -5px 3px 5px hsl(0, 0%, 0%,5%),
                    5px 3px 5px hsl(0, 0%, 0%,5%);
    
}
#vendor_ctn form input[type="submit"]:hover{
     opacity: 70%;
}
#vendor_ctn form input[type="submit"]:active{
    border: none;
}



/* FOR THE GREETING  */

#vendor_ctn #greeting{
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgb(13, 13, 112), rgb(62, 8, 62));
    background: url(utilities/vendor_pic.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    border-top-left-radius: 30%;
    border-bottom-left-radius: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: reg_greeting_animation 1s ease-in-out;
    overflow: hidden;
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
}
#header{
    width: 100%;
    height: 100%;
    text-align: center;
    margin: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: hsl(0, 0%, 0%,75%);
    gap: 3%;
  
    

}
#header p{
    width: 100%;
    height: fit-content;
    text-align: center;
    margin: 0%;
    color: hsl(0, 0%, 100%,80%);
   
}
#header #p1{
    margin-bottom: 0px;
    font-size: 1.35rem;
    margin: 0px;
    font-weight: bold;
    color: hsl(0, 0%, 100%,55%);
}
#header #p2{
    margin: 0px;
    font-size: 1rem;
    text-decoration: underline 0.3rem hsl(0, 0%, 100%,50%);
}



#vendor_ctn #greeting #contact_icons_ctn{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    height: 18%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    background-color: hsl(0, 0%, 100%,15%);
    border-radius: 15px;
}
#vendor_ctn #greeting a{
    width: 20%;
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background-color: hsl(0, 0%, 0%,60%);
    box-sizing: border-box;
    padding: 10px;
    box-shadow: 5px 3px 5px hsl(0, 0%, 0%,5%),
                    -5px 3px 5px hsl(0, 0%, 0%,5%),
                    -5px 3px 5px hsl(0, 0%, 0%,5%),
                    5px 3px 5px hsl(0, 0%, 0%,5%);
}

#vendor_ctn #greeting a:hover{
   opacity: 80%;
}

#vendor_ctn #greeting a:active{
   border:  2px solid hsl(0, 0%, 100%,90%);
}

#vendor_ctn #greeting svg{
   color: white;
   height: 100%;
   width: 100%;
}

















/* for alert display nav for incorrect password  */
@keyframes alert_animation {
    from{
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        opacity: 0.5;
    }
    to{
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 1px;
        padding-bottom: 1px;
        opacity: 1;
    }
}


@keyframes vendor_login_form_animation {
    from{
        transform: translateX(-500px);
        scale: 0.5;
    }
    to{
        transform: translateX(0);
        scale: 1.1;
    }
}


@keyframes reg_greeting_animation {
    from{
        transform: translateX(500px);
        scale: 0.5;
    }
    to{
        transform: translateX(0);
        scale: 1;
    }
}










/* VENDOR DASHBOARD PAGe */
#vendor_db{
   margin: 0px; 
}
/* the header page */
#vendor_db #header_db{
    width: 500px;
    height: 70px;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    position: fixed;
    z-index: 100;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background:hsl(0, 0%, 0%,40%);
    backdrop-filter: blur(20px);
    border-bottom:  3px solid hsl(0, 0%, 100%,10%);
    border-left: 3px solid hsl(0, 0%, 100%,10%);
    border-right: 3px solid hsl(0, 0%, 100%,10%);
}
#header_db #fs{
    font-size: 1.5vw;
     font-family: Pacific;
    font-weight: bolder;
    width: 20%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    background-color: hsl(0, 0%, 0%,70%);
    backdrop-filter: blur(100px);
    border-radius: 40px;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                5px 3px 5px hsl(0, 0%, 0%,20%);
}

#header_db #currentpagedsp{
    width: 50%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    border-radius: 40px;
    color: white;
     background-color: hsl(0, 0%, 0%,70%);
    backdrop-filter: blur(100px);
    border-radius: 40px;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                5px 3px 5px hsl(0, 0%, 0%,20%);
    font-family: Pacific;
    font-weight: bolder;
    

}

#header_db #greeting{
    width: 20%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5vw;
    box-sizing: border-box;
    padding: 1rem;
    /* back up font */
    font-family: Pacific;
    font-weight: bolder;
     background-color: hsl(0, 0%, 0%,70%);
    border-radius: 40px;
    backdrop-filter: blur(100px);
    box-shadow:  5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                5px 3px 5px hsl(0, 0%, 0%,20%);
    font-weight: bolder;
}
#header_db #greeting svg{
    height: 100%;
    width: 50%;
    box-sizing: border-box;
    padding: 0.3rem;
    display: none;
}

/* header ends  //////////////////////*/




#vendor_db #container{
    width: 100%;
    height: 100vh;
    position: fixed;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    
}

#vendor_db #nav{
    width: 250px;
    height: 35px;
    padding-left: 2.5px;
    padding-right: 2.5px;
    padding-top: 7px;
    padding-bottom: 7px;
    position: fixed;
     bottom: 0.1%;   
    left: 50%; 
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    overflow: hidden;
    box-shadow:  5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                5px 3px 5px hsl(0, 0%, 0%,20%);
   border-radius: 10px;
    backdrop-filter: blur(100px);
    background-color: hsl(0, 0%, 0%,60%);
}


#vendor_db .nav{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 20%;
    height: 100%;
    color: white;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1vw;
    align-items: center;
    justify-content: center;
    padding: 0px;
    overflow: hidden;
    animation: animate_nav_on_load 0.5s ease-in-out;
    background: transparent;
   
}


#vendor_db .nav:nth-child(2){
    position: relative;
}
#order_count{
    position: absolute;
    width: 50%;
    height: 70%;
    background-color: red;
    color: white;
    left: 50%;
    top: 0%;
    box-sizing: border-box;
    padding: 5px;
    border-radius: 5px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;

}


#nav svg{
    height: 100%;
    width: 90%;
    background-color: transparent;
}
.nav:nth-child(1) svg{
    fill :currentColor;
    stroke :none;
}




#nav svg:hover{
    scale: 1.1;
}













/* AFTER LOGIN  */

.pages{
    width: 100%;
    height: 100vh;
    animation: fadeSlideIn 0.5s ease-in-out forwards;
    padding-bottom: 100px;
    animation: fadeSlideIn 0.5s ease-in-out forwards;

}




/* for the  dash_board page  /////*/

#dash_board_page{
    margin: 0px;
    background: #360033;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #0b8793, #360033);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #0b8793, #360033);
    font-family: Arial, Helvetica, sans-serif;
    height: 100vh;
    overflow: hidden;
   
}

#dash_board_page form{
    background-color:hsl(0, 0%, 100%,5%);

    width: 750px;
    width: 60%;
    min-width: 640px;
    max-width: 800PX;
    height: 22%;
    max-height: 130px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    margin-top: 80px;
    color: hsl(0, 0%, 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
box-shadow:  5px 3px 5px hsl(0, 0%, 0%,3%),
                -5px 3px 5px hsl(0, 0%, 0%,3%),
                -5px 3px 5px hsl(0, 0%, 0%,3%),
                5px 3px 5px hsl(0, 0%, 0%,3%);
    
}

#dash_board_page h2{
    font-family: Pacific;
    font-size: 2.1rem;
    font-weight: bolder;
    color: hsl(0, 0%, 100%,70%);
    margin: 0px;
    width: 100%;
    height: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow:  5px 3px 5px hsl(0, 0%, 0%,3%),
                -5px 3px 5px hsl(0, 0%, 0%,3%),
                -5px 3px 5px hsl(0, 0%, 0%,3%),
                5px 3px 5px hsl(0, 0%, 0%,3%);
}

#dash_board_page form >div{
    width: 100%;
    height: 50%;
    text-align: center;
    border-radius: 2.5px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: #360033;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #0b8793, #360033);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #0b8793, #360033);
    font-family: Arial, Helvetica, sans-serif;
}

#dash_board_page form >div span{
    color: hsl(0, 0%, 100%,80%);
    font-size: 1.1rem;
    margin-right: 5%;
    width: 35%;
    background-color: hsl(0, 0%, 100%,10%);
    height: 50%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    box-shadow:  5px 3px 5px hsl(0, 0%, 0%,3%),
                -5px 3px 5px hsl(0, 0%, 0%,3%),
                -5px 3px 5px hsl(0, 0%, 0%,3%),
                5px 3px 5px hsl(0, 0%, 0%,3%);
    font-weight: bolder;
}
.dashboard-form-svg{
    width: 15%;
    height: 100%;
    box-sizing: border-box;
    padding:0.5rem;
    

}
.dashboard-form-svg svg{
    width: 100%;
    height: 100%;
}


#dash_board_page form >div select{
background-color: hsl(0, 0%, 100%,10%);
height: 50%;
border: none;
color: white;
width: 15%;
text-align: center;
border-radius: 2.5px;
box-shadow:  5px 3px 5px hsl(0, 0%, 0%,3%),
                -5px 3px 5px hsl(0, 0%, 0%,3%),
                -5px 3px 5px hsl(0, 0%, 0%,3%),
                5px 3px 5px hsl(0, 0%, 0%,3%);
font-size: 1rem;
font-weight: bolder;
}

#dash_board_page form >div select >option{
    background-color: rgba(0, 0, 0, 0.484);
}

#dash_board_page form >div select >option:focus{
    border: none;
}

#stats_container{
    min-width: 950px;
     max-width: 1400px;
     width: 90%;
    height: 80%;
    overflow-y: scroll;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    gap: 7%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-bottom: 150px;
  
    
}

#stats_container > div{
    width:250px;
    max-width: 250px;
    min-width: 250px;
    height: 300px;
    height: 300px;
    max-height: 350px;

    margin: 1%;
    overflow: hidden;
    background: transparent;
    border-radius: 0%;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                5px 3px 5px hsl(0, 0%, 0%,5%);
}

#stats_container > div >p{
    width: 100%;
    height: 20%;
    margin: 0px;
    color: hsl(0, 0%, 100%,80%);
    display: flex;
    justify-content: center;
    align-items: center;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
}
.stats-title__svg-ctn{
    width: 25%;
    height: 100%;
    background-color: hsl(0, 0%, 100%,5%);
    border-bottom-right-radius: 20%;
    padding: 0.8rem;
    box-sizing: border-box;
}
.stats-title__svg-ctn svg{
    width: 100%;
    height: 100%;
}

.stats-title__writing{
    width: 75%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: hsl(0, 0%, 100%,80%);
}


#stats_container > div >div{
    width: 100%;
    height: 80%;
    margin: 0px;
    font-size: 1.7rem;
    font-weight: bolder;
    color: white;

    
}



/* FOR THE TOTAL AMOUNT DISPLAY DASHBOARD */


#total_amount_stats div {
   background-color: hsl(120, 21%, 32%,70%) ;

}



#total_amount_stats div p{
    width: 100%;
    height: 100%;
    margin: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

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



/* FOR THE TOTAL SALES DASHBOARD */
#total_sales_stats div {
  
   background: hsl(240, 45%, 22%,70%); /* soft teal */


}

#total_sales_stats div  p{
    width: 100%;
    height: 100%;
    margin: 0px;
    display: flex;
    justify-content: center;
    align-items: center;

}
/* ///////////////////////////////// */

.stats-title{
    background-color: hsl(0, 0%, 0%,25%);
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                5px 3px 5px hsl(0, 0%, 0%,5%);
 color: black;
}

/* FOR STORE RANKING */
#ranking_sales div{
    background-color: hsl(0, 3%, 23%,70%);
}

#ranking_sales div p{
    width: 100%;
    height: 100%;
     margin: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: hsl(0, 0%, 100%,70%);
    font-size: 1.7rem;
    word-break: break-all;
    font-weight: bolder;
}






@keyframes fadeSlideIn {
  from {
    opacity: 0;
    scale: 0.5;
    transform: translateX(90px);
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
  }
  to {
    opacity: 1;
    transform: translateX(0);
    scale: 1;
  }
}


























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













/* FOR THE order page //// */

#order_page{
 margin: 0px;
    font-family: Arial, Helvetica, sans-serif;
    background: #360033;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #0b8793, #360033);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #0b8793, #360033); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    text-align: center;
    height: 100vh;
    overflow: hidden;
}
#delivery_alert{
    width: 50%;
    height: 50vh;
    position: absolute;
    top: 50%;    
    left: 50%; 
    transform: translate(-50%, -50%);
    background-color: black;
}


.order-page__header{
    width: 70%;
    min-width: 750px;
    max-width: 1000px;
    height: 130px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    margin-top: 80px;
    margin-bottom: 0px;
    border-radius: 5px;
    box-sizing: border-box;
    background-color:hsl(0, 0%, 100%,5%);
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,3%),
                -5px 3px 5px hsl(0, 0%, 0%,3%),
                -5px 3px 5px hsl(0, 0%, 0%,3%),
                5px 3px 5px hsl(0, 0%, 0%,3%);
    
    
}


.order-page__header > h2{
    font-size: 2.1rem;
    font-family: Pacific;
    font-weight: bolder;
    color: white;
   margin-bottom: 4px;
   margin-top: 5px; 
   width: 100%;
   height: 50%;
   text-align: center;
 overflow: hidden;
 
 

 
}

.order-page__header> form{
    width: 100%;
    height: 50%;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5%;
     background: #360033;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #0b8793, #360033);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #0b8793, #360033);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.pending_delivered__form-svg-ctn{
    width: 5%;
    height: 60%;
    box-sizing: border-box;
    padding: 0.2rem;    
}
.pending_delivered__form-svg-ctn svg{
    width: 100%;
    height: 100%;
}
.order-page__header >form > label{
    color: white;
    font-weight: bolder;
    width: 15%;
    height: 65%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                5px 3px 5px hsl(0, 0%, 0%,5%);
    background-color: hsl(0, 0%, 0%,5%);
    border-radius: 0.5%;
    overflow: hidden;
}

.order-page__header >form > a{
    text-decoration: none;
    color: white;
    font-size: 1.5rem;
   
}

.order-page__header #pending_a_tag{
    border-bottom: 5px solid white;
    width: 10%;
}
.order-page__header >form >a:hover{
    scale: 1.2;
    cursor: pointer;
}
.order-page__header >form >select{
    width: 15%;
    height: 60%;
    background-color: hsl(0, 0%, 100%,10%);
    text-align: center;
    color: white;
    border-radius: 5px;
    font-weight: bolder;
    font-size: 1rem;
    border: none;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                5px 3px 5px hsl(0, 0%, 0%,5%);
   

}
.order-page__header >form >select:focus{
    border: none;
}


.order-page__header select option{
    background-color: hsl(0, 0%, 0%,70%);
    color: white;
    font-size: 1.1vw;
    
}

/* the header part that shows the column for the orders  */

#order_ctn{
    width: 70%;
    min-width: 750px;
    max-width: 1000px;
    height:  100vh;
    overflow-y: scroll;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    padding-bottom: 400px;
    box-sizing: border-box;
    border-radius: 10px;
    
  
   
    

}
.each-order{
    width: 100%;
    height: 65px;
    background-color: hsl(0, 0%, 0%,15%);
    margin: 1.5%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    color: hsl(0, 0%, 100%,80%);
    display: flex;
    flex-direction: row;
    font-size: 1rem;
    overflow: hidden;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    box-sizing: border-box;
    
}
.each-order:hover{
    scale: 0.99;
}
.each-order__number{
    height: 80%;
    width: 6%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    box-sizing: border-box;
    padding-left: 5px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    background-color: hsl(0, 0%, 100%,5%);
    box-shadow:  5px 3px 5px hsl(0, 0%, 0%,5%),
    -5px 3px 5px hsl(0, 0%, 0%,1%),
    -5px 3px 5px hsl(0, 0%, 0%,1%),
    5px 3px 5px hsl(0, 0%, 0%,1%);
    border-top-left-radius: 0%;
    border-bottom-left-radius: 20%;
     border-top-right-radius: 20%;
    border-bottom-right-radius: 0%;
    overflow: hidden;
  
   
   
}
.each-order__email{
    width: 26%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
     overflow: hidden;

}
.each-order__hostel{
    width: 26%;
    height: 100%;
     display: flex;
    align-items: center;
    justify-content: center;
     overflow: hidden;
}

.each-order__amount{
    width: 26%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
     overflow: hidden;
}
.each-order__action-trigger{
    width: 15%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;

}

/* for view order svg for each order_______________________________________________ */
.each-order-action-trigger-view__order-ctn{
    width: 40%;
    height: 75%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0.7rem;
     background-color: hsl(0, 0%, 100%,10%);
     border-radius: 5px;
      box-shadow:  5px 3px 5px hsl(0, 0%, 0%,2.5%),
                -5px 3px 5px hsl(0, 0%, 0%,2.5%),
                -5px 3px 5px hsl(0, 0%, 0%,2.5%),
                5px 3px 5px hsl(0, 0%, 0%,2.5%);
    
}
.each-order-action-trigger-view__order-ctn svg{
    width: 100%;
    height: 100%;
}

.each-order-action-trigger-view__order-ctn svg:hover{
    opacity: 70%;
}
.each-order-action-trigger-view__order-ctn svg:active{
    opacity: 40%;
}

/* ______________________________________________________________________________ */




/* for call action______________________________________________________________ */
.each-order-action-trigger-call__ctn{
    width: 40%;
    height: 75%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0.7rem;
     background-color: hsl(0, 0%, 100%,10%);
     border-radius: 5px;
      box-shadow:  5px 3px 5px hsl(0, 0%, 0%,2.5%),
                -5px 3px 5px hsl(0, 0%, 0%,2.5%),
                -5px 3px 5px hsl(0, 0%, 0%,2.5%),
                5px 3px 5px hsl(0, 0%, 0%,2.5%);
}
.each-order-action-trigger-call__ctn svg{
   background:transparent;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    color: white;
}

.each-order-action-trigger-call__ctn svg:hover{
   opacity: 70%;
}


.each-order-action-trigger-call__ctn svg:active{
   opacity: 40%;
}













#no_order{
    width: 90%;
    height: 50vh;
    color: white;
    opacity: 50%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: hsl(0, 0%, 0%,60%);
    margin: 10%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    opacity: 50%;
}

@keyframes no_order_animate {
    from{
        height: 10vh;
    }
    to{
        
    }
}






/* ///////////////////////////////////////////// */
/* for vendors to view orders to view orders */
#view_order_page{
background: #360033;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #0b8793, #360033);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #0b8793, #360033);
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;


}
.view-order-page__ctn{
    margin-top: 100px;
    min-width: 900px;
    max-width: 1000px;
    width: 75%;
    height: 500px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;  
    font-family: Arial, Helvetica, sans-serif;
     background-color: hsl(0, 0%, 100%,2.5%);
     box-sizing: border-box;
     border:  3px solid hsl(0, 0%, 100%,10%);
     border-radius: 5px;
    
     
   
}
.view-order-page-ctn__partition-food{
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
.view-order-page-ctn-partition-food__header{
    width: 100%;
    height: 11%;
    margin: 0%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    font-size: 1.9rem;
    border-radius: 5px;
    overflow: hidden;
    
}



.partition-food-header__ptag{
    width: 96%;
    height: 90%;
    text-align: center;
    background-color: hsl(0, 0%, 0%,50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                5px 3px 5px hsl(0, 0%, 0%,5%);
    font-weight: lighter;
}
.partition-food__order-display{
    width: 96%;
    height: 70%;
    background-color: hsl(0, 0%, 0%,30%);
    margin: 0%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    color: white;
    display: flex;
    justify-content: center;
    text-align: center;
    box-shadow:  5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                5px 3px 5px hsl(0, 0%, 0%,5%);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    box-sizing: border-box;
    padding: 15px;
    overflow-y: scroll;
    line-height: 1.7;
    word-break: break-word;



}
.Mark_as_delivered_btn{
    width: 96%;
    height:10%;
    border-radius: 5px;
    box-sizing: border-box;
    border: none;
    padding: 0px;
    overflow: hidden;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                5px 3px 5px hsl(0, 0%, 0%,5%);

    background-color: hsl(0, 0%, 0%,80%);
    border-radius: 5px;

}
.Mark_as_delivered_btn:hover{
    opacity: 70%;
}
.Mark_as_delivered_btn:active{
    background: none;
}
.Mark_as_delivered_btn p{
    width: 100%;
    height: 100%;
    margin: 0px;
    background-color: hsl(0, 0%, 0%,5%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
}


#back_to_order_page_btn{
      bottom: 0.1%;   
    left: 50%; 
    transform: translate(-50%, -50%);
    background-color: hsl(0, 0%, 0%,50%);
     position: fixed;
    box-sizing: border-box;
    width: 50px;
    height: 40px;
    color: white;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,10%),
    -5px 3px 5px hsl(0, 0%, 0%,10%),
    -5px 3px 5px hsl(0, 0%, 0%,10%),
    5px 3px 5px hsl(0, 0%, 0%,10%);
    animation: 1s scale_back_btn ease-in-out;
    padding: 0.1rem;
    backdrop-filter: blur(100px);
}












.view-order-page-ctn__partition-food-info{
     width: 50%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
  
    
    
}

/* everything about food info preference-------------------------------------------- */
.partition-food-info__preference{
    width: 95%;
    height: 30%;
    background-color: hsl(0, 0%, 0%,30%);
    border-radius: 5px;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,10%),
                -5px 3px 5px hsl(0, 0%, 0%,10%),
                -5px 3px 5px hsl(0, 0%, 0%,10%),
                5px 3px 5px hsl(0, 0%, 0%,10%);
    display: flex;
    flex-direction: row;
    overflow: hidden;
    box-sizing: border-box;
    
}

.partition-food-info-preference__svg-ctn{
width: 30%;
height: 100%;
overflow: hidden;
 background: linear-gradient(180deg, #0b8793, #360033);
box-sizing: border-box;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;


}
.partition-food-info-preference__svg-ctn svg{
    width: 100%;
    height: 100%;
    background-color: hsl(0, 0%, 100%,10%);
    padding: 10px;
    box-sizing: border-box;
    

}
.food-preference__writing-ctn{
    width: 70%;
    height: 100%;
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

}
.food-preference-writing-ctn__header{
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    height: 25%;
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    background-color: hsl(0, 0%, 100%,5%);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    font-size: 1.1rem;

}
.food-preference-writing-ctn__body{
    margin: 0%;
    width: 100%;
    height: 75%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
   line-break: auto;
   word-break: break-word;
   box-sizing: border-box;
   padding: 5px;
   font-size: 0.9rem;
   word-break: break-word;
   color: hsl(0, 0%, 100%,80%);
   

    
}


/* ------------------------------------------------------------------------------------------- */










/* for the hostel and amount patition ------------------------------------------- */
.partition-food-info__amount_and_hostel{
    width: 100%;
    height: 30%;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly; 
}
.partition-food-info__amount_or_hostel{
    width: 46%;
    height: 100%;
    border-radius: 5px;
      box-shadow:  5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                5px 3px 5px hsl(0, 0%, 0%,5%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.partition-food-info-amount_or_hostel__svg-ctn{
    width: 100%;
    height: 30%;
    background-color: hsl(0, 0%, 0%,20%);
    box-sizing: border-box;
    padding: 0.4rem;
}
.partition-food-info-amount_or_hostel__svg-ctn svg{
    height: 100%;
    width: 100%;
    color: white;
}
.partition-food-info-amount_or_hostel__body{
    width: 100%;
    height: 70%;
    display: flex;
    align-items:  center;
    justify-content: center;
    font-size: 1.1rem;
    color: white;
    font-weight: lighter;
    box-sizing: border-box;
    padding: 5px;
    background-color: hsl(0, 0%, 100%,5%);
    word-break: break-word;
}

/* ---------------------------------------------------------------- */


/* for the delivery partition -------------------------------------------------------------- */
.partition-food-info__delivery-info{
    width: 95%;
    height: 30%;
    background-color: white;
    border-radius: 5px;
    background-color: hsl(0, 0%, 0%,30%);
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,10%),
                -5px 3px 5px hsl(0, 0%, 0%,10%),
                -5px 3px 5px hsl(0, 0%, 0%,10%),
                5px 3px 5px hsl(0, 0%, 0%,10%);
    display: flex;
    flex-direction: row;
}
.partition-food-info-delivery-info__svg-ctn{
    width: 30%;
    height: 100%;
    background-color: purple;
    color: #64B5F6;
    overflow: hidden;
    background: linear-gradient(180deg, #0b8793, #360033);
    border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
}
.partition-food-info-delivery-info__svg-ctn svg{
    width: 100%;
    height: 100%;
     background-color: hsl(0, 0%, 100%,10%);
    padding: 10px;
    box-sizing: border-box;
    
}
.delivery-info__writing-ctn{
    width: 70%;
    height: 100%;
    margin: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}
.delivery-info-writing-ctn__header{
    width: 70%;
    height: 25%;
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    background-color: hsl(0, 0%, 100%,10%);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    font-size: 1.1rem;
}
.delivery-info-writing-ctn__body{
    margin: 0%;
    width: 100%;
    height: 75%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
   line-break: auto;
   box-sizing: border-box;
   padding: 5px;
   font-size: 1.1vw;
   color: hsl(0, 0%, 100%,80%);
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-evenly;

}
.delivery-info-time{
    width: 50%;
    height:100%;
    margin: 0px;
    border-right: 1px dotted white;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;

}
.delivery-info-time strong{
    width: 100%;
    height: 25%;
    margin-top: 0%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    border-bottom: 5px solid hsl(0, 0%, 0%,10%);
}
.delivery-info-time__body{
    width: 100%;
    height: 75%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    box-sizing: border-box;
    padding: 5px;
}

.delivery-info-status{
    width: 50%;
    height: 100%;
    margin: 0px;
    border-left: 1px  dotted white;
}
.delivery-info-status strong{
   width: 100%;
    height: 25%;
    margin-top: 0%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    border-bottom: 5px solid hsl(0, 0%, 0%,10%); 
}
.delivery-info-status__body{
    width: 100%;
    height: 75%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    box-sizing: border-box;
    padding: 5px;
}
/* ------------------------------------------------------------------------------------------ */










/* for the menu page (of editing menu ) ///////*/

#vendor_menu_page{
    background-color: white;
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
    width: 100%;
    height: 100vh;

}
/* the contaner that holds all the menu */
#menu_ctn{
    width: 100%;
    height: 90%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 10%;
    overflow: scroll;
   padding-top: 100px;
   padding-bottom: 600px;

}
/* the container that holds each menu  */
.each_menu{
    width: 250PX;
    height: 360px;
    margin: 10px;
    overflow: hidden;
    display: flex;
     position: relative;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,10%),
                -5px 3px 5px hsl(0, 0%, 0%,10%),
                -5px 3px 5px hsl(0, 0%, 0%,10%),
                5px 3px 5px hsl(0, 0%, 0%,10%);
    border-radius: 5px;
     
}
/* the container that carries the background image where the other div would be displayed as absolute  */
.each_menu div:nth-child(1){
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* container for both teh svg and the span */
.menu_svg_and_others_ctn{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.menu__food-description{
     width: 100%;
    padding: 0.5rem;
    line-height: 1rem;
    box-sizing: border-box;
    background-color: hsl(0, 0%, 0%,10%);
    backdrop-filter: blur(10px);
    color: hsl(0, 0%, 100%,80%);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
   margin-top: auto;
   margin-bottom: 0%;
}

.each_menu .menu_action_trigger{
    background-color: hsl(0, 0%, 0%,10%);
    backdrop-filter: blur(40px);
    width: 15%;
    height: 13%;
    margin-left: auto;
    margin-right: 1vw;
    margin-top: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.each_menu .menu_action_trigger:hover{
    scale: 0.9;
}

.each_menu .menu_action_trigger:active{
    opacity: 50%;
}


.menu_svg_and_others_ctn svg{
    width: 80%;
    height: 100%;
    color: white;
  
}


.each-menu-info__ctn{
    width: 100%;
    height: 12%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* to make the frozen white effect */
.menu_svg_and_others_ctn p{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: lighter;
    font-size: 1.1rem;
    font-weight: lighter;
    
}


.each-menu__name{
    width: 60%;
    height: 100%;
    margin-left: auto;
    margin-right: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(0, 0%, 100%,80%);
    overflow-x: scroll;
    font-weight: bolder;
    background-color: hsl(0, 0%, 0%,10%);
    backdrop-filter: blur(10px);
}

.each-menu__price{
    width: 40%;
    height: 100%;
    margin-left: auto;
    margin-right: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: bold;
    background-color: hsl(0, 0%, 0%,40%);
    backdrop-filter: blur(15px);
    color: white;
    box-sizing: border-box;
    border-top: 3px solid white;
    border-left: 3px solid white;
    border-top-left-radius: 5px;

}

/* for out of stock menu ..........................................................................................................................*/
.out_of_stock{
     width: 250px;
    height: 360px;
    margin: 10px;
    overflow: hidden;
    display: flex;
     position: relative;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                5px 3px 5px hsl(0, 0%, 0%,20%);
    border-radius: 5px;
}
.out-of-stock-card{
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;

}
.out-of-stock-card__info{
    width: 100%;
    height: 100%;
    margin-top: 0px;
    display: flex;
    align-items: baseline;

}
/* to produce the frozen color effect */
.out-of-stock-card__info p{
    
    width: 100%;
    height: 14%;
    margin-top: auto;
    margin-bottom: 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.out-of-stock-card__name{
    width: 60%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5vw;
    backdrop-filter: blur(40px);
    color: white;
}

.out-of-stock-card__price{
    width: 40%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                5px 3px 5px hsl(0, 0%, 0%,20%);
    font-size: 1.5vw;
    font-weight: bold;
    background-color: hsl(0, 0%, 0%,40%);
    backdrop-filter: blur(20px);
    color: white;

}

/* for stock action */
.stock_action{
    width: 100%;
    height: 100%;
    background-color: hsl(0, 0%, 0%,50%);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.stock_action p{
    height: 50%;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.stock_action p svg{
    color: hsl(0, 0%, 100%,50%);
    width: 100%;
    height: 100%;

}
.stock_action a{
   color: white;
   text-decoration: underline;
   font-size: 1.1rem;
   font-weight: bold;
   font-family: pacific;
   cursor: pointer;
}
.stock_action a:hover{
    cursor: pointer;
}
/* .......................................................................................................................................... */














.menu_action{
    width: 100%;
    height: 100%;
    background-color: hsl(0, 0%, 0%,40%);
    backdrop-filter: blur(15px);
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3%;
    box-sizing: border-box;
    padding: 0.5vw;
    animation: 0.3s menu_action_animate ease-in-out;
    
    
    /* display: none; */
    
}
@keyframes menu_action_animate {
    from{
       margin-top: 100%;
       opacity: 0.5;
       scale: 0.5;
    }
    to{
       margin-top: 0%;
       opacity: 1;
        scale: 1;
    }
}

.menu_action button{
    width: 100%;
    height: 15%;
    background-color: hsl(0, 0%, 100%,20%);
    color: white;
    box-sizing: border-box;
    border: none;
    font-size: 0.85rem;
    display: flex;
    flex-direction: row;
    border-radius: 5px;
}

.menu_action button:hover{
    scale: 0.98;
}

.menu_action button:active{
    background: transparent;
    border: 1.5px solid white;
}




.menu_action__svg-ctn{
    width: 20%;
    height: 100%;
    box-sizing: border-box;
    padding: 0.6rem;
}
.menu_action__svg-ctn svg{
    width: 100%;
    height: 100%;
}

.menu_action button span{
    width: 80%;
    display: flex;
    justify-content: start;
    align-items: center;
}




.menu_action button:nth-child(5){
   background-color: hsl(0, 0%, 0%,70%);
   color: white;
   font-size: 0.9rem;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 2.5px;
   height: 12%;
   box-sizing: border-box;
    box-shadow:  5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                5px 3px 5px hsl(0, 0%, 0%,20%);
}


.menu_action button:nth-child(5):active{
    background-color: transparent;
    border: 1px solid white;
    color: white;
}

#action_feed{
    width:100%;
    height: 100%;
    background-color: hsl(0, 0%, 0%,75%);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center; 
    animation: animate_action_feed 1s ease-in-out;
    z-index: 100;
}
@keyframes animate_action_feed {
     from{
      opacity: 0;
    }
    to{
       opacity: 1;
    }
}

/* fpr the alowance at the menu  */
#allowance_menu{
    width: 100%;
    height: 10%;
}
/* for the pop up that vendors can take menu actions */
#action_feed form{
    width: 700px;
    height: 350px;
    color: hsl(0, 0%, 100%,70%);
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5%;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    background-color: hsl(0, 0%, 0%,40%);
    border-radius: 5px;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,10%),
                -5px 3px 5px hsl(0, 0%, 0%,10%),
                -5px 3px 5px hsl(0, 0%, 0%,10%),
                5px 3px 5px hsl(0, 0%, 0%,10%);
    border:  4px solid hsl(0, 0%, 0%,15%);
    text-align: center;
}

#action_feed form p{
    font-size: 1.3rem;
    color: hsl(0, 0%, 100%,60%);
    margin: 0%;
    font-weight: lighter;
    
}


#action_feed form .yes-or-no__ctn{
    width: 50%;
    height: 15%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: hsl(0, 0%, 100%,5%);
    border-radius: 15px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0.1rem;
    border: 3px solid hsl(0, 0%, 100%,5%);
    
    
}

#action_feed form input[type="submit"]{
    width: 50%;
    height: 90%;
    background-color: hsl(0, 0%, 0%,80%);
    border: none;
    color: hsl(0, 0%, 100%,70%);
    font-weight: lighter;
    font-size: 1rem;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
    scale: 0.97;
    

  
}
#action_feed form button[type="submit"]{
    width: 50%;
    height: 90%;
    background-color: hsl(0, 0%, 0%,80%);
    border: none;
    color: hsl(0, 0%, 100%,70%);
    font-weight: lighter;
    font-size: 1rem;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
    scale: 0.97;
}

#action_feed form input[type="submit"]:hover{
    opacity: 80%;
}
#action_feed form input[type="submit"]:active{
    background-color: white;
    border: none;
    color: black;
}



#action_feed form input[type="reset"]{
     width: 48%;
     height: 100%;
    padding: 0.3rem;
    background-color: transparent;
    border: none;
    color: hsl(0, 0%, 100%,70%);
    font-weight: lighter;
    margin-right: auto;
    font-size: 1rem;
}
#action_feed form input[type="reset"]:hover{
    opacity: 80%;
}

#action_feed form input[type="text"]{
    width: 50%;
    background-color: hsl(0, 0%, 100%,10%);
    border: none;
    height: 10%;
    color: white;
    animation: input_edit_menu 1.5s ease-in-out;

}

#action_feed form textarea{
    width: 50%;
    background-color: hsl(0, 0%, 100%,10%);
    overflow-wrap: break-word;
    word-break: break-word;
    field-sizing: content;
    resize: none;
    min-height: 30%;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
    border: none;
}

@keyframes input_edit_menu {
    from{
        width: 0;
    }
    to{
        width: 1;
    }
}
#action_feed form input[type="text"]:focus{
    scale: 1.1;
}




#action_feed form input[type="number"]{
    width: 50%;
    background-color: hsl(0, 0%, 100%,10%);
    border: none;
    height: 30px;
    color: white;
    animation: input_edit_menu 1.5s ease-in-out;

}

#action_feed form input[type="number"]:focus{
    scale: 1.1;
}

#action_feed form button{
    width: 25%;
    padding: 5px;
    background-color: transparent;
    border: none;
    border: 1.5px solid white;
    color: white;
    border-radius: 5px;
    font-weight: bolder;
    margin-left: auto;
    margin-right: 1%;
    display: flex;
    gap: 1%;
    align-items: center;
    justify-content: center;
    text-align: center;
}



#action_feed form button[type="submit"]:hover{
    scale: 0.97;
}
#action_feed form button[type="submit"]:active{
    background-color: white;
    border: none;
    color: black;
}











/* the div at the end user use to add a menu  */

#add_menu div{
    width: 100%;
    height: 100%;
    background-color: hsl(0, 0%, 0%,80%);
      display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;

}
#add_menu div p{
    width: 40%;
    height: 40%;
    box-sizing: border-box;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,10%),
                -5px 3px 5px hsl(0, 0%, 0%,10%),
                -5px 3px 5px hsl(0, 0%, 0%,10%),
                5px 3px 5px hsl(0, 0%, 0%,10%);
    border-radius: 10px;
}

#add_menu div p:hover{
    scale: 0.90;
    box-shadow: none;
}

#add_menu div p:active{
    opacity: 70%;
}



#add_menu div p svg{
    color: black;
    width: 100%;
    height: 100%;
   
}


.add_menu_form{
    display: flex;
    align-items: center ;
    justify-content: center ;
    flex-direction: column ;
}
.stock_file_ctn{
    width: 50% ;
    height: 10%;
    display: flex ;
    flex-direction: row;
    align-items: center ;
    justify-content: center;
    animation: input_edit_menu 1.5s ease-in-out ;
    overflow: hidden;
    background: hsl(0, 0%, 100%,5%);
}

.stock_file_ctn input[type="number"]{
    height: 100%;
    width: 50% ;
    margin-top: 0px ;
    margin-bottom: 0px;
    background: transparent;
    border: none;
}


.stock_file_ctn select{
    height: 100%;
    width: 49%;
    background-color: hsl(0, 0%, 100%,5%);
    text-align: center;
    border: none;
    color: white;
}
.stock_file_ctn select option{
    background-color: hsl(0, 0%, 0%,70%);
    color: white;
    text-align: center;
    border: none;
    animation: input_edit_menu 1.5s ease-in-out ;
}

#file_ctn{
    width: 50% ;
    height: 10%;
    display: flex ;
    align-items: center ;
    justify-content: center;
    border-radius: 0px;
    background-color: hsl(0, 0%, 100%,10%);
   
}

#action_feed form input[type="file"]{
    background: transparent;
    width: 100%;
    height: 60%;
    margin-top: auto ;
    margin-bottom: auto ;
}
























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


/* account page in charge of the store account ////////*/

/* using BEM naming to style this page  */
#account_page {
  width: 100%;
  height: 100%;
   background: #360033;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #0b8793, #360033);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #0b8793, #360033);
font-family: Arial, Helvetica, sans-serif;
}



.account-header{
    width: 910px;
    height: 65px;
    background-color: hsl(0, 0%, 0%,40%);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    text-align: center;
    gap: 25%;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                -5px 3px 5px hsl(0, 0%, 0%,5%),
                5px 3px 5px hsl(0, 0%, 0%,5%);
    margin-top: 70px;
    border-radius: 5px;

}
.account-header__title{
    font-size: 1.8rem;
    color: white;
    font-family: Pacific;
    font-weight: bolder;
}
.account-header__logout{
    width: 10%;
    background:hsl(0, 0%, 100%,10%);
    color:  white;
    height: 55%;
    display: flex;
    justify-items: center;
    align-items: center;
    flex-direction: row;
    gap: 1%;
    border: none;
    border-bottom: 3px solid white;
    font-size: 1rem;
}
.account-header__logout:hover{
    opacity: 70%;
}
.account-header__logout:active{
    opacity: 50%;
}


.account-header-svg-ctn{
   height: 100%;
   width: 40%;
   margin-left: auto;
   margin-right: auto;
   padding: 0.1rem;
   

}
.account-header-svg-ctn svg{
    height: 100%;
    width: 100%;
}

.account-options{
    width: 910px;
    height:  100vh;
    overflow-y: scroll;
    overflow-x: hidden;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 100px;
}

.account-options__profile{
    width: 100%;
    height: 250px;
    background-color: hsl(0, 0%, 0%,30%);
    margin: 1%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    
}
.account-options__profile:hover{
    scale: 0.99;
}



.account-options__card{
    width: 25%;
    height: 90%;
    background-color: hsl(0, 0%, 100%,10%);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: baseline;
    position: relative;
    overflow: hidden;
}
.account-profile__actions{
    width: 100%;
    height: 100%;
    position: absolute;
    padding: 0px;
    border-radius: 2.5px;
    background-color: hsl(0, 0%, 0%,70%);
    animation: 0.3s menu_action_animate ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    
}
.profile-actions-svg-ctn{
    width: 20%;
    height: 100%;
    margin-left: 0%;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 10px;
}








.profile-svg-ctn{
    background-color: hsl(0, 0%, 0%,50%);
    width: 18%;
    height: 18%;
    padding: 0.4rem;
    margin-left: auto;
    margin-right: 3%;
   margin-top: 3%;
   margin-bottom: 10%;
   border-radius: 5px;
   box-sizing: border-box;

}

.profile-svg-ctn:hover{
    scale: 0.95;
}
.profile-svg-ctn:active{
    opacity: 70%;
}



.profile-svg-ctn svg{
    color: white;
    width: 100%;
    height: 100%;
}

.profile-options__description{
    width: 100%;
    height: auto;
    padding: 5px;
    box-sizing: border-box;
    background: linear-gradient(180deg, hsl(0, 0%, 0%,40%), hsl(0, 0%, 0%,70%));
    margin-top: auto;
    margin-bottom: 0%;
    color: hsl(0, 0%, 100%,90%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.25;

}
.profile-actions-btn__ctn{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2%;
    align-items: center;
    justify-content: center;
}
.profile-actions__btn{
    width: 45%;
    height: 45%;
    border-radius: 5px;
    border: none;
    
}
.profile-actions__btn:hover{
    scale: 0.99;
}
.profile-actions__btn:active{
    opacity: 70%;
}

.profile-actions__btn svg{
    width: 60%;
    height: 60%;
}

#profile-actions__cancel{
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}
#profile-actions__cancel a{
    color: black;
    font-size: 2vw;
    width: 50%;
    height: 50%;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}





























.account-options details{
     height: fit-content;
    opacity: 70%;
    color: white;
    margin-left: auto;
    margin-right: auto; 
    box-sizing: border-box;
    width: 910px;
    padding-bottom: 0.5rem;
}
.account-options details:nth-child(3){
     margin-bottom: 400px;
}



.edit-vendor-summary{
    width: 100%;
    background-color: hsl(0, 0%, 100%,60%);
    height: 45px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1%;
    padding-left: 1%;
    font-size: 1rem;
    color: black;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
   
}

.edit-vendor-summary svg{
    width: 3%;
    height: 60%;
    box-sizing: border-box;
    padding: 0.1rem;
}
.edit-vendor-summary:hover{
    scale: 0.99;
    cursor: pointer;
}
.edit-vendor-summary:active{
    opacity: 50%;
}
.edit-vendor-summary-actions-ctn{
    width: 100%;
    height: 310px;
    background-color:hsl(0, 0%, 0%,30%);
    margin-top: 0%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2.5%;
}

.edit-vendor-summary__span{
    width: 30.5%;
    height: 280px;
    background-color: hsl(0, 0%, 100%,10%);
    display: flex;
    flex-direction: column;
    padding: 5px;
    box-sizing: border-box;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-radius: 5px;
}
.edit-vendor-summary__span:hover{
    background: transparent;
   
}

.edit-vendor-summary-span__svg-ctn{
    width: 100%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edit-vendor-summary-span__svg-ctn svg{
    scale: 1.5;
}

.edit-vendor-summary-span__title{
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 3px dotted white;
    font-size: 1rem;
}

.edit-vendor-summary-span__display{
    width: 100%;
    height: 30%;
     display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 5px;
    box-sizing: border-box;
    font-size: 1rem;
}

.edit-vendor-summary-btn{
    width: 70%;
    height: 15%;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.85rem;
    border: none;
}
.edit-vendor-summary-btn:hover{
    opacity: 70%;
}
.edit-vendor-summary-btn:active{
    background: transparent;
    border: 1px solid white;
    color: white;
}



/* for other(summary)  */


.edit-vendor-summary-link{
    width: 70%;
    height: 15%;
    background-color: white;
    font-size: 0.85rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    text-decoration: none;
}
.edit-vendor-summary-link:hover{
    opacity: 70%;
}
.edit-vendor-summary-link:active{
    background: transparent;
    border: 1px solid white;
    color: white;
}






#pop_out_action{
   width:100%;
    height: 92%;
    background-color: hsl(0, 0%, 0%,75%);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center; 
    animation: animate_action_feed 1s ease-in-out; 
}

#pop_out_action form{
    width: 700px;
    height: 350px;
    color: hsl(0, 0%, 100%,70%);
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5%;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    background-color: hsl(0, 0%, 0%,40%);
    border-radius: 5px;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,10%),
                -5px 3px 5px hsl(0, 0%, 0%,10%),
                -5px 3px 5px hsl(0, 0%, 0%,10%),
                5px 3px 5px hsl(0, 0%, 0%,10%);
    border:  4px solid hsl(0, 0%, 0%,15%);
    text-align: center;
   
}
#pop_out_action form input{
    height: 4vh;
    width: 50%;
    background-color: hsl(0, 0%, 100%,10%);
    border: none;
    color: white;
}
#pop_out_action form input:is([type="text"],[type="email"],[type="password"]){
    width: 50%;
    background-color: hsl(0, 0%, 100%,10%);
    border: none;
    height: 10%;
    color: white;
    animation: input_edit_menu 1.5s ease-in-out;
}

#pop_out_action form input::placeholder{
    font-size: 0.9rem;
}




#pop_out_action form  textarea{
      width: 50%;
    background-color: hsl(0, 0%, 100%,10%);
    overflow-wrap: break-word;
    word-break: break-word;
    field-sizing: content;
    resize: none;
    min-height: 30%;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
    border: none;
}

#pop_out_action form  textarea:focus{
    border: none;
}




.pop-out-form__title {
     font-size: 1.3rem;
    color: hsl(0, 0%, 100%,60%);
    margin: 0%;
    font-weight: lighter;
}
.pop-out-form__button-ctn{
    width: 50%;
    height: 15%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: hsl(0, 0%, 100%,5%);
    border-radius: 15px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0.1rem;
    border: 3px solid hsl(0, 0%, 100%,5%);
    

   }
.pop-out-form__button-ctn button{
   width: 50%;
    height: 90%;
    background-color: hsl(0, 0%, 0%,80%);
    border: none;
    color: hsl(0, 0%, 100%,70%);
    font-weight: lighter;
    font-size: 1rem;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
    scale: 0.97;
}
.pop-out-form__button-ctn button:nth-child(2){
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    scale: 0.97;
   
}

.pop-out-form__button-ctn button:hover{
    opacity: 70%;
}
.pop-out-form__button-ctn button:active{
    opacity: 50%;
}





/* loading  */
#loading_ctn{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: hsl(0, 0%, 0%,70%);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 150;
}
#loading{
    width: 200px;
    height: 150px;
    background-color: hsl(0, 0%, 0%,70%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
     box-shadow:  5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                -5px 3px 5px hsl(0, 0%, 0%,20%),
                5px 3px 5px hsl(0, 0%, 0%,20%);
    box-sizing: border-box;
    border: 3px solid hsl(0, 0%, 100%,10%);
}
.loading__header{
    width: 100%;
    height: 40%;
    font-size: 30px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-bottom: 5px solid hsl(0, 0%, 100%,30%);
    font-family: pacifico;

}
.loader_ctn{
    width: 100%;
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.loader{
    width: 3%;
    height: 20%;
    background-color: white;
    border-radius: 20px;
    animation: loader_even 0.5s ease-in-out infinite alternate;
}
.loader:nth-child(odd){
    height: 40%;
    animation: loader_odd 0.5s ease-in-out infinite alternate;
}
@keyframes loader_even{
    from{
        height: 20%;
        opacity: 1;
    }
    to{
        height: 35%;
        opacity: 0.3;
    }
}
@keyframes loader_odd{
    from{
        height: 35%;
        opacity: 1;
    }
    to{
        height: 20%;
        opacity: 0.3;
    }
}
/* end of loading  */




























































/* to for each of the details tgo syle their units one by one  */






















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


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