html,
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#container {
    display: flex;
    width: 100vw;
}

#left-bar {
    width: 10vw;
    background: grey;
    display: flex;
    flex-flow: column;
}

div.section {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

div.section h2 {
    margin: 0;
    font-size: 16px;
    text-align: center;
    padding: 3px;
    border-bottom: 1px solid rgb(71, 71, 71);
    background: rgb(245, 142, 142);
}

div.section.computed h2 {
    background: rgb(175, 245, 142);
}

div.section .toolbar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 3px 10px;
}

div.section .toolbar button {
    border-radius: 4px;
    background: rgb(189, 187, 187);
    padding: 4px 8px;
    border: 0;
    border-bottom: 1px solid black;
    height: 30px;
}
div.section .toolbar button:hover {
    background: rgb(150, 150, 150);
}

div.section .toolbar button.active {
    background: rgb(175, 245, 142);
}

#circuit-info,
#cell-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 22px;
    padding: 4px 8px;
    border-bottom: 1px solid black;
}

#cell-indicator-counter {
    display: inline-block;
    width: 80px;
    text-align: center;
}

#circuit-info {
    background: rgb(196, 196, 196);
}

#filler {
    flex-grow: 1;
}

textarea {
    height: 200px;
}

#main-frame {
    flex-grow: 0;
    width: 90vw;
    height: 100vh;
    border-left: 1px solid black;
    overflow: auto;
    position: relative;
}

object {
    background-size: 100%;
}

#centers {
    position: relative;
    pointer-events: none;
}
.center-indicator {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
}
#main-frame.show-centers .center-indicator {
    background: red;
}
#main-frame.show-positions .center-indicator::before {
    content: attr(data-position);
    background: white;
    width: auto;
    padding: 1px 2px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid black;
    font-size: 11px;
    position: absolute;
    top: -9px;
    left: -10px;
    line-height: 18px;
    z-index: 10;
}

/* #main-frame.show-lanes .center-indicator[data-lane="1"] {
    background: orange;
    border: 2px solid orange;
}
#main-frame.show-lanes .center-indicator[data-lane="2"] {
    background: rgb(212, 59, 212);
    border: 2px solid rgb(212, 59, 212);
}
#main-frame.show-lanes .center-indicator[data-lane="3"] {
    background: yellow;
    border: 2px solid yellow;
} */

.direction-indicator {
    position: absolute;
    width: 20px;
    height: 2px;
    background: blue;
    transform-origin: -2px 1px;
    top: 1px;
    left: 4px;
}

.direction-indicator::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid blue;
    position: absolute;
    right: -3px;
    top: -5px;
}

#main-frame.show-lanes .center-indicator[data-lane="1"] .direction-indicator {
    background: rgb(243, 111, 24);
}
#main-frame.show-lanes .center-indicator[data-lane="2"] .direction-indicator {
    background: rgb(212, 59, 212);
}
#main-frame.show-lanes .center-indicator[data-lane="3"] .direction-indicator {
    background: yellow;
}
#main-frame.show-lanes .center-indicator[data-lane="1"] .direction-indicator::after {
    border-left-color: rgb(243, 111, 24);
}
#main-frame.show-lanes .center-indicator[data-lane="2"] .direction-indicator::after {
    border-left-color: rgb(212, 59, 212);
}
#main-frame.show-lanes .center-indicator[data-lane="3"] .direction-indicator::after {
    border-left-color: yellow;
}

.lane-end-indicator {
    background: white;
    width: 20px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid black;
    font-size: 11px;
    position: absolute;
    top: -9px;
    left: -10px;
    line-height: 18px;
}