.bar.bar-energy {
    border-color: #111;
    background-color: #0071BA;
    background-image: linear-gradient(0deg, #111, #111 50%, transparent 50%);
    color: #fff;
}

.bar.bar-energy .title {
    color: #fff;
}

.bar.bar-energy.bar-footer {
    background-image: linear-gradient(180deg, #111, #111 50%, transparent 50%);
}

.bar-energy .button {
    border-color: #111;
    background-color: #0071BA;
    color: #fff;
}

.bar-energy .button:hover {
    color: #fff;
    text-decoration: none;
}

.bar-energy .button.active, .bar-energy .button.activated {
    border-color: #000;
    background-color: #262626;
}

.bar-energy .button.button-clear {
    border-color: transparent;
    background: none;
    box-shadow: none;
    color: #fff;
    font-size: 17px;
}

.bar-energy .button.button-icon {
    border-color: transparent;
    background: none;
}
.button-bar.bar-energy > .button {
    border-color: #111; 
}

.bar.bar-city {
    border-color: #111;
    background-color: #C5C4C6;
    background-image: linear-gradient(0deg, #111, #111 50%, transparent 50%);
    color: #444;
}

.bar.bar-city .title {
    color: #444;
}

.bar.bar-city.bar-footer {
    background-image: linear-gradient(180deg, #111, #111 50%, transparent 50%);
}

.bar-city .button {
    border-color: #111;
    background-color: #C5C4C6;
    color: #444;
}

.bar-city .button:hover {
    color: #444;
    text-decoration: none;
}

.bar-city .button.active, .bar-city .button.activated {
    border-color: #000;
    background-color: #262626;
}

.bar-city .button.button-clear {
    border-color: transparent;
    background: none;
    box-shadow: none;
    font-size: 17px;
}

.bar-city .button.button-icon {
    border-color: transparent;
    background: none;
}
.button-bar.bar-city > .button {
    border-color: #444; 
}