*{
margin: 0;
padding: 0;
}


body{
    background-color: rgb(1, 1, 9);
    color: beige;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;


}


.crud{
    width: 80%;
    margin: auto;
    

}

.head{
    text-align: center;
    text-transform:uppercase;
    margin: 10px 0px;
}
input{
width: 100%;
margin: 4px 0px;
padding: 10px;
background-color: rgb(65, 65, 65);
border: 0px;
border-radius: 2px;
color: aliceblue;
transition: 0.5s;
}
input:focus{
transform: scale(1.009);
border: 0px;
background-color: black;
color: aliceblue;
}

.totalprice input{

width: 20%;

}

#total {
    background-color: rgb(136, 11, 28);
    width: 20%;
}
#total::before{
    content: 'taltal:' ;
}

button{
    background-color: rgb(58, 3, 110);
    width: 100%;
    padding: 0;
    border: 0;
    margin: 10px 0;
    height: 30px;
    border-radius: 8px;
    color: aliceblue;
    transition: 0.3s;
}

button:hover{
    letter-spacing: 1px;
    background-color: rgb(11, 73, 127);
    cursor: pointer;
    text-shadow: 1px rgb(0, 0, 0);
    transform: scale(1.01);
 }

 .searchbtn {
display: flex;
justify-content: space-between;

 }
 .searchbtn button{
    width: 45%;
    border-radius: 17px;
 }

 table{ 
    width: 100%; 
    text-align: center;
}
table button{
    border-radius: 5px;
}

td{
  
    border-top: 0.01px solid rgba(134, 133, 133, 0.247);

}

 
th, td {
    padding: 10px; 
    border-top: 1px solid rgba(134, 133, 133, 0.247);
}


.outputs{
overflow-x: auto;



}
output{
    height: 30rem; 

}

/* تخصيص شريط التمرير */
.outputs::-webkit-scrollbar {
    width: 8px; /* عرض الشريط العمودي */
    height: 8px; /* ارتفاع الشريط الأفقي */
    background-color: #3d3939;
}

/* تخصيص لون المسار الخلفي لشريط التمرير */
.outputs::-webkit-scrollbar-track {
   color:  #e90000; /* لون المسار */
    border-radius: 50px; /* حواف دائرية للمسار */

}

/* تخصيص لون ومظهر مقبض شريط التمرير */
.outputs::-webkit-scrollbar-thumb {
    background-color: #3c0c7c; /* لون المقبض */
    border-radius: 3px; /* حواف دائرية للمقبض */
    border: 2px solid #4835afe5; /* لون الإطار الخارجي حول المقبض */
}

/* تخصيص لون المقبض عند التمرير عليه */
.outputs::-webkit-scrollbar-thumb:hover {
    background-color: #083485; /* لون المقبض عند التمرير */
}