/* Start General Style */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
/* End General Style */

/* Start Body Style */
body{
width: 100%;
min-height: 100vh;
background-color: rgb(35, 35, 35);
}
/* End Body Style */

/* Start Title Style */
.title{
text-align: center;
}
.title {
color: wheat;
margin-bottom: 25px;
}
/* End Title Style */

/* Start Container Style */
.container{
display: flex;
justify-content: center;
padding: 0px 45px;
}
.container .inputs{
padding: 0px 0px;
}
.container .inputs input{
padding: 9px 10px;
border: none;
outline: none;
margin-bottom: 10px;
border-radius: 8px;
background: rgb(0, 0, 0);
font-weight: bold;
color: wheat;
font-size: 16px;
transition: .5s;
}
.container .inputs input:hover{
transform: scale(1.04);
}
 button{
padding: 9px;
border: none;
outline: none;
margin-bottom: 10px;
border-radius: 8px;
background-color: rgb(78, 15, 136);
font-weight: bold;
color: wheat;
cursor: pointer;
transition: .5s;
}
.container .inputs button:hover{
background-color: rgb(37, 8, 65);
}
.container .inputs #title , #total , #create , #search , #delAll{
width: 100%;
}
.container .inputs #price , #fees , #ads , #discount , #quantity , #category {
width: 49%;
}
#searchByTitle , #searchByCategory{
width: 47.9%;
margin: 0px 2px;
margin-bottom: 15px;
}
#total{
background-color: darkblue;
padding: 8px;
border: none;
outline: none;
color: #fff;
font-weight: bold;
border-radius: 8px;
margin-bottom: 15px;
}
table{
width: 100%;
text-align: center;
color: #fff;
margin: 10px 0px;
font-weight: bold;
}
table th , td{
padding: 1.5px;
}
#delPro , #delAll{
background-color: darkred;
}
#delAll{
display: none;
}
.TitleMsg , .CategoryMsg , .PriceMsg{ 
color: red;
font-size: 13px;
margin-bottom: 5px;
display: none;
}
/* End Container Style */

/* Start attribution */
.attribution{
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%,-50%);
color: #fff;
}
.attribution a{
color:mediumaquamarine;
text-decoration: none;
}
/* End attribution */