/* plc style css*/
    .lamp {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: gray;
      margin: 10px;
      display: inline-block;
    }

    .lamp.on {
      background-color: red;
    }

    .button {
      padding: 10px 20px;
      margin: 5px;
      font-size: 16px;
    }

.bar-container {
  display: flex;
  width: 60px;
  height: 200px;
  background-color: #0003bb;
  border: 1px solid #999;
}
.bar-fill {
  height: 100%;
  width: 100%;
  background-color: rgb(204, 205, 208);
  transition: width 0.2s;
}
textarea {
    font-family: monospace;
    color: #ffffff;
    background-color: #000000;
    border: 1px solid #ccc;
    padding: 8px;
}
/*.CodeMirror.cm-s-neo {
  background-color: #000 !important;
  color: #ccc !important;
}

.cm-s-neo .CodeMirror-gutters {
  background-color: #000 !important;
  border-right: 1px solid #333;
}

.cm-s-neo .CodeMirror-linenumber {
  color: #555;
}*/
.conveyor {
  width: 300px;
  height: 40px;
  border: 3px solid #444;
  overflow: hidden;
  position: relative;
  background-color: #111;
  margin-top: 20px;
}

.belt {
  width: 200%;
  height: 100%;
  background: repeating-linear-gradient(
    -90deg,
    #888,
    #888 20px,
    #444 20px,
    #444 40px
  );
  position: absolute;
  top: 0;
  left: 0;
  animation: moveBelt 1s linear infinite;
  animation-direction: reverse;
  animation-play-state: paused;
}

@keyframes moveBelt {
  0% { left: 0; }
  100% { left: -50%; }
}


.lcd-display {
  font-family: 'LCD', monospace;
  color: rgb(11, 11, 11);
  background: #ffffff;
  padding: 10px 20px;
}