.battery {
display: grid;
grid-template-columns: repeat(7,1fr);
width: 100%;
}
.battery a {
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
}
.battery-segment-text{
font-size: 20px;
color: #000;
}
.battery a:nth-child(1) {
background-color: #E57373;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.battery a:nth-child(2) {
background-color: #FFB74D;
}
.battery a:nth-child(3) {
background-color: #FFF176;
}
.battery a:nth-child(4) {
background-color: #81C784;
}
.battery a:nth-child(5) {
background-color: #4FC3F7;
}
.battery a:nth-child(6) {
background-color: #64B5F6;
}
.battery a:nth-child(7) {
background-color: #BA68C8;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.battery a:nth-child(1):hover {
background-color: #F44336;
}
.battery a:nth-child(2):hover {
background-color: #FF9800;
}
.battery a:nth-child(3):hover {
background-color: #FFEB3B;
}
.battery a:nth-child(4):hover {
background-color: #4CAF50;
}
.battery a:nth-child(5):hover {
background-color: #03A9F4;
}
.battery a:nth-child(6):hover {
background-color: #2196F3;
}
.battery a:nth-child(7):hover {
background-color: #9C27B0;
}
.battery a:nth-child(1).active {
background-color: #F44336;
}
.battery a:nth-child(2).active {
background-color: #FF9800;
}
.battery a:nth-child(3).active {
background-color: #FFEB3B;
}
.battery a:nth-child(4).active {
background-color: #4CAF50;
}
.battery a:nth-child(5).active {
background-color: #03A9F4;
}
.battery a:nth-child(6).active {
background-color: #2196F3;
}
.battery a:nth-child(7).active {
background-color: #9C27B0;
}
.container-distribution {
display: grid;
grid-template-columns: 10% 90%;
align-items: center;
padding: 5px 20px;
width: 100%;
margin: 0 auto;
height: 130px;
}