* {
  box-sizing: border-box;
}

.sizing-box {
  height: 22px;
  width: 45px;
}

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

.signal-bars .bar {
  width: 6px;
  margin-left: 1px;
  min-height: 20%;
  display: inline-block;
  border-radius: 2px;
  vertical-align: bottom;
}

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

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

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

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

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

.good .bar {
  background-color: rgb(100, 182, 125);
  border: thin solid rgb(47, 109, 65);
}

.bad .bar {
  background-color: #e74c3c;
  border: thin solid #a82315;
}

.ok .bar {
  background-color: #f1c40f;
  border: thin solid #d0a90c;
}

.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: #cac7c7;
  border: thin solid #9b9999;
}