* {
    padding: 0;
    margin: 0;
}

body { 
    background-color: #444;
    color: #fff;
    font-size: 16px;
}

h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

#header {
    height: 50px;
    display: flex;
    flex-direction: row;
}

#title {
    flex: 1;
}

#title h1 {
    padding: 5px 10px;
    font-size: 30px;
    font-weight: bold;
}

#toolbar {
    margin-left: auto;
    padding: 8px 10px;
}

#variantList {
    height: 32px;
    font-size: 20px;
    font-weight: bold;
    padding: 0 8px;
}

#generate {
    height: 32px;
    font-size: 20px;
    font-weight: bold;
    padding: 0 8px;
    margin-right: 32px;
}

#designer {
    height: calc(100vh - 50px);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#displayPane {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#display {
    background-color: #777;
    border: 10px solid #999;
    box-sizing: border-box;
    flex-grow: 1;
}

#display svg {
}

#runtimepane {
}

#editor {
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #444;
    color: #fff;
}

#ledpane {
    display: none;
    padding: 0 5px 10px 5px;
}

#ledpane-scroll {
    height: 100%;
    overflow-y: scroll;
}

#runtime-state {
    display: none;
}

#runtimepane table,
#ledpane table {
  border-collapse: collapse;
  background-color: #444;
  border: 2px solid #fff;
  color: #fff;
}

#runtimepane table {
    width: 100%;
}

#runtimepane table th,
#runtimepane table td,
#ledpane table td {
  padding: 2px 4px;
  text-align: left;
  border: 1px solid #fff;
  min-width: 20px;
  text-align: center;
}

#runtimepane tr:hover > td,
#runtimepane tr:hover > th,
#ledpane tr:hover > td,
#ledpane tr.highlight > td {
    background-color: #d9f8ff;
    color: #2c2c2c;
}

#ledpane tr > td:first-child,
#ledpane tr:hover > td:first-child,
#ledpane tr.highlight > td:first-child {
    background-color: #333;
    border: 2px solid #fff;
}

#scriptpane {
    padding: 0 5px 10px 5px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#scriptpaneupper {
    flex-grow: 1;
}

#script-editor {
    width: 100%;
    height: 100%;
    background-color: #777;
    color: #fff;
    border: 10px solid #999;
    font-size: 16px;
    font-weight: bold;
    padding: 5px;
}

#scriptpanelower {
}

#infopane,
#runtimepane {
    padding: 10px;
}

#infopane {
    padding: 10px 0;
}

#led-info {
    color: #fff;
    font-size: 16px;
    padding: 5px;
    height: 71px;
    overflow-y: scroll;
}

#runtime-controls {
    margin-bottom: 5px;
}

#runtime-controls select,
#runtime-controls button {
    font-size: 18px;
    font-weight: bold;
    padding: 4px 8px;
}

#runtime-controls select {
    width: 100%;
    margin-bottom: 10px;
}

.led-icon
{
    width: 20px;
    height: 20px;
    margin-left: 2px;
    border: 3px solid #555;
    border-radius: 50%;
    background-color: #333;
}

.led-red    { border-color: #d50000; }
.led-green  { border-color: #3caa23; }
.led-yellow { border-color: #fe8901; }
.led-white  { border-color: #ffffff; }
.led-blue   { border-color: #5555ff; }
.led-red.on    { background-color: #d50000; }
.led-green.on  { background-color: #3caa23; }
.led-yellow.on { background-color: #fe8901; }
.led-white.on  { background-color: #ffffff; }
.led-blue.on   { background-color: #5555ff; }

@media (min-width: 1500px) {
    #ledpane { display: block; }
    #runtime-state { display: block; }
    #led-info { height: 204px; }
}