pussy-ts/src/style/container-distribution.css

.battery {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    width: 100%;
    /* height: 8px; */
}

.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;
    /* max-width: 1200px; */
    width: 100%;
    margin: 0 auto;
    height: 130px;
}