.sizing-box {
    height: 35px;
    width: 40px;
}

.signal-bars {
    display: inline-block;
}

.signal-bars .bar {
    width: 20%;
    /*margin-left: 1%;*/
    min-height: 20%;
    display: inline-block;
}

.signal-bars .bar.first-bar {
    height: 20%;
}

.signal-bars .bar.second-bar {
    height: 40%;
}

.signal-bars .bar.third-bar {
    height: 60%;
}

.signal-bars .bar.fourth-bar {
    height: 80%;
}

.signal-bars .bar.fifth-bar {
    height: 99%;
}

.good .bar {
    background-color: #30b455;
    /*border: thin solid #30b455;*/
}

.bad .bar {
    background-color: #e81309;
    /*border: thin solid #e81309;*/
}

.ok .bar {
    background-color: #EFAF13;
    /*border: thin solid #EFAF13;*/
}

.four-bars .bar.fifth-bar,
.three-bars .bar.fifth-bar,
.three-bars .bar.fourth-bar,
.one-bar .bar:not(.first-bar),
.two-bars .bar:not(.first-bar):not(.second-bar) {
    background-color: #969696;
    /*border: thin solid #f3f3f3;*/
}