.lcd {
  width: 432px;
  background: #333;
  display: flex;
  padding: 12px;
  color: white;
  box-sizing: border-box;
}

.lcd.reverse {
  flex-direction: row-reverse;
}

.lcd * {
  box-sizing: border-box;
}

.lcd-left-row {
  display: flex;
  align-items: center;
  padding: 0 4px;
  height: 28px;
}

.row-colored {
  background: #223;
}

.lcd-left {
  background: black;
  flex-grow: 1;
}

.line {
  display: flex;
  align-items: center;
}

.jk-icon {
  background: white;
  color: black;
  font-weight: bold;
  font-size: 11px;
  width: 24px;
  height: 24px;
  text-align: center;
  border: #00bae8 solid 3px;
  border-radius: 4px;
  margin-right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jk-icon-small {
  background: white;
  color: black;
  font-weight: bold;
  width: 28px;
  height: 28px;
  border: #00bae8 solid 3px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  text-align: center;
  margin-right: 4px;
  transform: scale(0.8);
}

.jk-text {
  line-height: 8px;
  font-size: 10px;
  transform: scale(0.85);
}
.jk-number {
  line-height: 12px;
  font-size: 12px;
}

.for {
  display: flex;
  align-items: center;
}

.lcd-sep {
  width: 100%;
  height: 3px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0)
  );
  margin: 2px 0;
}

.lcd-right {
  height: calc(28px * 3 + 7px * 2);
  font-size: calc(28px * 3 + 7px * 2);
  line-height: calc(28px * 3 + 7px * 2);
}
.lcd-right:not(.reverse) {
  margin-left: 12px;
}
.lcd-right.reverse {
  margin-right: 12px;
}

.line,
.forward {
  width: 50%;
}

.type {
  width: 33.3333%;
}

.time {
  font-size: 24px;
  line-height: 24px;
  margin-right: 6px;
}

.for-text {
  font-size: 24px;
  line-height: 24px;
}