body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #c7f1f1;
}
.addtable {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.chart-container {
    margin-top: 20px;
}
canvas {
    width: 100% !important;
}
button {
    margin-left: 8px;
border: 0px;
border-radius: 3px;
background:none;
font-size: 18px;
padding: 0px;
position: relative;
}
button:hover{
color: #ff5722eb;
} 
ul {
    list-style-type: none;
    padding: 0;
}
li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px 0;
    padding: 5px;
    background: #f1f1f1;
    border-radius: 4px;
}
h2{    
display: flex;
}
.obscure{    
   
display: flex;
   width: 30px;
    align-items: flex-end;
}  
.edittable{
display: none;
    position: fixed;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    top: 0;
left:0;
}
.edittable-content {
    background-color: white;
    padding: 2.5%;
    border-radius: 5px;
    width: 36%;
    position: relative;
    margin: 0 auto;
    top: 25%;
    border: 10px;
max-height:45%;
min-width:400px;
}
p{
margin-top: 0px;
margin-bottom: 0px;
}
.dataList{
height: 110px;
    overflow-y: overlay;
}
.edirtable-button{
height: 15px; 
padding: 0; 
border-radius: 3px;
border:0px;
color: #3F51B5;
}
.edirtable-button:hover{
color: #ff5722eb;
}
.infor{
display: block;
}