




 *{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
#add_product{
    border-radius: 20px;
    padding: 20px 40px ;
    display: grid;
    justify-content: center;
    grid-template-rows: 50px 50px 50px 50px 50px 50px 50px 40px;
    gap:20px;
    text-align: center;
    background-image: linear-gradient( 92.7deg,  rgba(245,212,212,1) 8.5%, rgba(252,251,224,1) 90.2% );
    
}
#add_product input,select{
    box-shadow: 5px 5px 5px -3px #32aeb1;
}
.main{
    background-color: rgb(248, 248, 248);
    align-items: center;
    display: flex;
    justify-content: space-around;
    margin: auto;
    padding: 50px 2px;
}
#add_product_btn,#update_btn,#remove{
    background-color: #32aeb1;
    color:white;
    border:none;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    padding: 10px 20px;
}
#add_product_btn:active,#update_btn:active,#remove:active{
    transform: translateY(5px);
    border: 1px solid rgb(27, 193, 2);
}



#bin{
    border-radius: 20px;
    padding: 20px 40px;
    display: grid;
    justify-content: center;
    grid-template-rows: 40px 50px 50px 40px 40px 50px 50px 50px 40px;
    gap:20px;
    text-align: center;
    background-image: linear-gradient( 92.7deg,  rgba(245,212,212,1) 8.5%, rgba(252,251,224,1) 90.2% );
    
    
}

#search_option{
    width:150px;
    height: 42px;

    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px 0px 0px 5px;
}
















#od_detail{
    width: 90%;
    height: 400px;
    border: 1px solid grey;
    margin: auto;
    margin-top: 80px
}

#ord{

    width: 80%;
    margin: auto;
    border: 1px solid red;
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}


#ord>div:nth-child(1){
    width: 34%;
    border: 1px solid grey;
}
#ord>div:nth-child(2){
    width: 16%;
    border: 1px solid grey;
}
#ord>div:nth-child(3){
    width: 34%;
    border: 1px solid grey;
}

#ord>div:nth-child(4){
    width: 16%;
    border: 1px solid grey;
}


#ord>div{
    text-align: center;
}



