.lcm3-container {
    position: absolute;
    left: 0;
    top: 51px;
    width: 100vw;
    height: calc(100vh - 51px);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    color: rgba(255, 255, 255, 0.8);
    background-color: rgb(20, 20, 20);
    overflow: hidden;
}

.lcm3-container :is(.left-panel, .middle-panel),
.lcm3-container .right-panel {
    min-width: 300px;
    width: calc(20% + 250px);
    margin: 0 10px;
    height: calc(100% - 104px);
    /* margin: 30px; */
}

.lcm3-container :is(.left-panel, .middle-panel) {
    display: flex;
    flex-direction: column;
}

.lcm3-container :is(.left-panel, .middle-panel) .tab-container {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    flex-grow: 0;
}

.lcm3-container :is(.left-panel, .middle-panel) .tab-container .tab {
    padding: 5px 10px;
    margin-right: 8px;
    color: rgba(255, 255, 255, 0.7);
    background: rgb(0, 0, 0);
    border: 1px solid rgb(50, 50, 50);
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    font-size: 14px;
    box-sizing: border-box;
    width: 100px;
    text-align: center;
    flex-grow: 1;
}

.lcm3-container :is(.left-panel, .middle-panel) .tab-container .tab:active {
    border: 1px solid white;
    border-bottom: none;
    color: white;
}

.lcm3-container :is(.left-panel, .middle-panel) .tab-container .open.tab {
    border: 1px solid rgb(50, 50, 50);
    /* color: var(--theme-color); */
    /* font-variation-settings: "wght"800; */
    border-bottom: none;
    z-index: 5;
    transform: translateY(1px);
    color: white;
}

.lcm3-container :is(.left-panel, .middle-panel) .tab-container .tab:last-child {
    margin-right: 0;
}

.lcm3-container :is(.left-panel, .middle-panel) .view {
    flex-grow: 1;
    height: 100px;
    /* margin-top: 8px; */
    /* margin-bottom: 8px; */
    color: rgba(255, 255, 255, 0.8);
    background: rgb(0, 0, 0);
    border: 1px solid rgb(50, 50, 50);
    border-radius: 0 0 5px 5px;
    font-size: 14px;
    box-sizing: border-box;
    /* overflow: hidden; */
    z-index: 0;
    position: relative;
}

.lcm3-container :is(.left-panel, .middle-panel) .view .shadow {
    position: absolute;
    width: calc(100% - 10px);
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 24%, rgba(0,0,0,0.6730360934182591) 62%, rgba(0,0,0,0.47558386411889597) 75%, rgba(0,0,0,0.24840764331210186) 88%, rgba(0,0,0,0) 100%);
    height: 60px;
    left:0px;
    top:0px;
    z-index: 10;
}

.lcm3-container :is(.left-panel, .middle-panel) .view > .source {
    /* overflow: hidden; */
    height: 100%;

    box-sizing: border-box;

    position: relative;
    z-index: 11;
}

.lcm3-container .left-panel .view > .source .monaco-editor {
    width: 100%;
    height: 100%;
}

.lcm3-container .left-panel .view > .source .monaco-hover {
    z-index: 12;
}

div.hover-row.status-bar {
    display: none !important;
}

.lcm3-container :is(.left-panel, .middle-panel) .view .source .prism-live {
    width: 100%;
    height: 100%;
    resize: none;
    flex-grow: 1;
    --selection-background: rgba(255, 163, 51, 0.5);
    --selection-color: hsla(0, 0%, 100%, .8);
}

.lcm3-container :is(.left-panel, .middle-panel) .view .source textarea::-webkit-scrollbar,
.lcm3-container :is(.left-panel, .middle-panel) .view .binary::-webkit-scrollbar,
    .lcm3-container :is(.left-panel, .middle-panel) .view .pipeline::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    box-sizing: border-box;
}
 
.lcm3-container :is(.left-panel, .middle-panel) .view .source textarea::-webkit-scrollbar-track {

}
 
.lcm3-container :is(.left-panel, .middle-panel) .view .source textarea::-webkit-scrollbar-thumb,
.lcm3-container :is(.left-panel, .middle-panel) .view .binary::-webkit-scrollbar-thumb,
    .lcm3-container :is(.left-panel, .middle-panel) .view .pipeline::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
}

.lcm3-container :is(.left-panel, .middle-panel) .view .source textarea::-webkit-scrollbar-corner,
.lcm3-container :is(.left-panel, .middle-panel) .view .pipeline::-webkit-scrollbar-corner,
    .lcm3-container :is(.left-panel, .middle-panel) .view .binary::-webkit-scrollbar-corner {
    background-color: transparent;
} 

.lcm3-container :is(.left-panel, .middle-panel) .view .source .error-message {
    position: absolute;
    background-color: #c25e11;
    color: white;
    padding: 20px;

    left: 0;
    bottom: 0;

    width: 100%;
    box-sizing: border-box;

    z-index: 10;
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary {
    height: 100%;
    padding: 20px;
    overflow: auto;
    box-sizing: border-box;
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary table {
    border-collapse: collapse;
    width: 100%;
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary .instruction {
    font-family: "FiraCode";
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    position: relative;
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary table tr:first {
    /* position: sticky;
    top: 10px; */
    z-index: 11;
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary table th {
    padding-bottom: 8px;
    color: white;
    font-weight: 800;
    border-bottom: 1px solid rgb(50, 50, 50);
    font-size: 12px;
    position: sticky;
    top: 0px;
    z-index: 11;
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary table th:first-child {
    text-align: right;
    padding-right: 10px;
    border-right: 1px solid rgb(50, 50, 50);
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary table th:nth-child(2) {
    min-width: 30px;
    border-right: 1px solid rgb(50, 50, 50);
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary table th:last-child {
    text-align: left;
    padding-left: 10px;
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary table td {
    padding-top: 3px;
    vertical-align: bottom;
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary table td:first-child {
    border-right: 1px solid rgb(50, 50, 50);
    /* background-color: black; */
}

/* .lcm3-container :is(.left-panel, .middle-panel) .view .binary table td:has(.inst-label):first-child {
    position: sticky;
    top: 30px;
} */


.lcm3-container :is(.left-panel, .middle-panel) .view .binary table td:nth-child(2) {
    border-left: 1px solid rgb(50, 50, 50);
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary table td:last-child {
    border-left: 1px solid rgb(50, 50, 50);
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary .inst-label {
    color: var(--theme-color);
    text-align: left;
    border-top: 1px solid var(--theme-color);
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary .spacer {
    height: 7px;
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary .fetch.instruction {
    background-color: rgba(255, 255, 255, 0.1);
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary .fetch.instruction::after {
    content: "(PC) F";
    position: absolute;
    right: 8px;
    bottom: 1px;
    padding-top: 3px;
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary .decode.instruction {
    background-color: rgba(255, 255, 255, 0.15);
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary .decode.instruction::after {
    content: "D";
    position: absolute;
    right: 8px;
    bottom: 1px;
    padding-top: 3px;
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary .execute.instruction {
    background-color: rgba(255, 255, 255, 0.3);
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary .execute.instruction::after {
    content: "E";
    position: absolute;
    right: 8px;
    bottom: 1px;
    padding-top: 3px;
    color: var(--theme-color);
    font-weight: 600;
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary .instruction {
    vertical-align: top;
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary .instruction .source {
    text-align: right;
    color: white;
    padding-right: 10px;
    vertical-align: top;
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary .instruction .offset {
    padding-left: 10px;
    text-align: left;
    color: white;
    padding-right: 60px;
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary .instruction .bin {
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary :not(.inverted).instruction .bin span:nth-child(odd) {
    color: var(--theme-color-2);
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary :not(.inverted).instruction .bin span:nth-child(even) {
    color: var(--theme-color);
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary .inverted.instruction .bin span:nth-child(odd) {
    color: var(--theme-color);
}

.lcm3-container :is(.left-panel, .middle-panel) .view .binary .inverted.instruction .bin span:nth-child(even) {
    color: var(--theme-color-2);
}





.lcm3-container :is(.left-panel, .middle-panel) .view .pipeline {
    padding: 20px;
    overflow: auto;
    height: 100%;
    box-sizing: border-box;
    font-size: 12px;
}

.lcm3-container :is(.left-panel, .middle-panel) .view .pipeline table {
    width: 100%;
    border-collapse: collapse;
}

.lcm3-container :is(.left-panel, .middle-panel) .view .pipeline table th {
    padding-bottom: 8px;
    color: white;
    font-weight: 800;
    border-bottom: 1px solid rgb(50, 50, 50);
    font-size: 12px;
    position: sticky;
    top: 0px;
    z-index: 11;
}


.lcm3-container :is(.left-panel, .middle-panel) .view .pipeline table tr:nth-child(2) td {
    /* padding-top: 8px; */
    
}

.lcm3-container :is(.left-panel, .middle-panel) .view .pipeline table th:first-child,
.lcm3-container :is(.left-panel, .middle-panel) .view .pipeline table td:first-child {
    border-right: 1px solid rgb(50, 50, 50);
    color: white;
}

.lcm3-container :is(.left-panel, .middle-panel) .view .pipeline table td {
    font-family: "FiraCode";
    text-align: center;
    position: relative;
    height: 24px;
    border-bottom: 1px solid rgb(50, 50, 50);
    /* width: 33%; */
}

.lcm3-container :is(.left-panel, .middle-panel) .view .pipeline table tr:nth-child(3n) td:nth-child(4) {
    color: var(--theme-color-2);
}

.lcm3-container :is(.left-panel, .middle-panel) .view .pipeline table tr:nth-child(3n + 1) td:nth-child(2) {
    color: var(--theme-color-2);
}

.lcm3-container :is(.left-panel, .middle-panel) .view .pipeline table tr:nth-child(3n + 2) td:nth-child(3) {
    color: var(--theme-color-2);
}

.lcm3-container :is(.left-panel, .middle-panel) .view .pipeline table tr:nth-child(3n) td:nth-child(3) {
    color: var(--theme-color);
}

.lcm3-container :is(.left-panel, .middle-panel) .view .pipeline table tr:nth-child(3n + 1) td:nth-child(4) {
    color: var(--theme-color);
}

.lcm3-container :is(.left-panel, .middle-panel) .view .pipeline table tr:nth-child(3n + 2) td:nth-child(2) {
    color: var(--theme-color);
}

/* .lcm3-container :is(.left-panel, .middle-panel) .view .pipeline table tr:nth-child(3n + 2) td:nth-child(3) {
    color: var(--theme-color-2);
} */

/* .lcm3-container :is(.left-panel, .middle-panel) .view .pipeline table tr:nth-child(3n + 1) td:nth-child(2) {
    color: var(--theme-color-2);
}

.lcm3-container :is(.left-panel, .middle-panel) .view .pipeline table tr:nth-child(3n + 2) td:nth-child(3) {
    color: var(--theme-color-2);
} 

.lcm3-container :is(.left-panel, .middle-panel) .view .pipeline table tr:nth-child(3n) td:nth-child(4) {
    color: var(--theme-color-2);
} */

.lcm3-container :is(.left-panel, .middle-panel) .view .pipeline table tr:not(.branch):not(:last-child) td:nth-child(2):not(:empty)::after, 
.lcm3-container :is(.left-panel, .middle-panel) .view .pipeline table tr:not(.branch):not(:last-child) td:nth-child(3):not(:empty)::after {
    content: "---->";
    display: block;
    position: absolute;
    right: calc(-30px + 10%);
    top: calc(50% + 6px);
    transform: rotate(17deg);
    font-weight: 600;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 1);
    filter: brightness(0.5);
}




.lcm3-container .actions {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.lcm3-container .actions .button {
    padding: 5px 10px;
    margin-right: 8px;
    color: rgba(255, 255, 255, 0.8);
    background: rgb(0, 0, 0);
    border: 1px solid rgb(50, 50, 50);
    border-radius: 5px;
    font-size: 14px;
    box-sizing: border-box;
    width: 130px;
    text-align: center;
    flex-grow: 1;
}

.lcm3-container .actions .button:active {
    border: 1px solid rgb(200, 200, 200);
    color: white;
}

.lcm3-container .actions .button:last-child {
    margin-right: 0;
}

.lcm3-container .actions .button .icon {
    display: inline-block;
    margin-left: 4px;
    opacity: 1;
}

.lcm3-container .actions .assemble.button .icon {
    width: 30px;
    height: 10px;
    background: url("binary.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    /* transform: translateY(2px); */
}

.lcm3-container .actions .reset.button .icon {
    width: 12px;
    height: 13px;
    background: url("reset.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;    
    transform: translateY(2px);
}

.lcm3-container .actions .step.button .icon {
    width: 13px;
    height: 13px;
    background: url("step.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateY(2px);
}

.lcm3-container .middle-panel:has(.tab-container:empty) {
    display: none;
}

.lcm3-container .right-panel {
    display: flex;
    flex-direction: column;
}

.lcm3-container .right-panel .section-name {
    color: white
}

.lcm3-container .right-panel .register-and-flags.section {
    margin-bottom: 20px;
    display: flex;
    height: 110px;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    margin-right: -8px;
}

.lcm3-container .right-panel .register-and-flags.section .register::before {
    content: attr(data-register-name);
    position: absolute;
    left: 5px;
    font-family: "Rubik";
    font-variation-settings: "wght" 600;
    /* font-weight: 800; */
    color: var(--theme-color-2);
    text-shadow: 0 1px 2px black;
}

.lcm3-container .right-panel .register-and-flags.section .register[data-register-name="PC"]::before {
    color: var(--theme-color);
}

.lcm3-container .right-panel .register-and-flags.section .register[data-register-name="LR"]::before {
    color: var(--theme-color);
}

.lcm3-container .right-panel .register-and-flags.section .register[data-register-name="SP"]::before {
    color: var(--theme-color-2);
}

.lcm3-container .right-panel .register-and-flags.section .register {
    padding: 5px 5px;
    margin-right: 8px;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.8);
    background: rgb(0, 0, 0);
    border: 1px solid rgb(50, 50, 50);
    border-radius: 5px;
    font-size: 12px;
    line-height: 1.4;
    font-family: "FiraCode";
    text-align: right;
    position: relative;
    flex-grow: 1;
    max-height: 16px;
    outline: none !important;
}

.lcm3-container .right-panel .register-and-flags.section .register[data-register-name="PC"] {
    border: 1px solid var(--theme-color);
}

.lcm3-container .right-panel .register-and-flags.section .register[data-register-name="LR"] {
    border: 1px dashed var(--theme-color);
}

.lcm3-container .right-panel .register-and-flags.section .register[data-register-name="SP"] {
    border: 1px solid var(--theme-color-2);
}

.lcm3-container .right-panel .register-and-flags.section .register:focus {
    outline: none !important;
    animation: blinking-dark 800ms infinite;
    border: 1px solid white;
}

@keyframes blinking-dark {
    0%		{ background-color: rgb(0, 0, 0); }
    50%		{ background-color: rgb(80, 80, 80); }
    100%	{ background-color: rgb(0, 0, 0); }
}

.lcm3-container .right-panel .register-and-flags.section .register.animation-start {
    background-color: rgba(255, 255, 255, 0.3);
    transition: none;
    color: rgba(255, 255, 255, 1);
}

.lcm3-container .right-panel .register-and-flags.section .register.animation-end {
    background-color: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 0.8);
    transition: background-color 400ms, color 400ms;
}

.lcm3-container .right-panel .register-and-flags.section .flags {
    display: flex;
    justify-content: space-around;
    flex-grow: 1;
    max-height: 16px;
    align-items: stretch;
    margin-right: 4px;
}

.lcm3-container .right-panel .register-and-flags.section .flag {
    display: inline-block;
    width: 1px;
    padding: 5px 5px;
    margin-right: 4px;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.8);
    background: rgb(0, 0, 0);
    border: 1px solid rgb(50, 50, 50);
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
    flex-grow: 1;
    min-height: 16px;
}

.lcm3-container .right-panel .register-and-flags.section .flag.on {
    color: black;
    background: var(--theme-color);
    border: 1px solid rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 8px var(--theme-color);
}

.lcm3-container .right-panel .memory.section {
    border: 1px solid blue;
    flex-grow: 1;
    height: 100px;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.8);
    background: rgb(0, 0, 0);
    border: 1px solid rgb(50, 50, 50);
    border-radius: 5px;
    font-size: 14px;
    box-sizing: border-box;
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    padding: 8px 12px;
    position: relative;
    overflow: hidden;
}

.mem-label {
    display: inline-block;
    transform: translateY(7px);
}

.lcm3-container .right-panel .memory.section table {
    font-family: "FiraCode";
    border: none;
    font-size: 12px;
    flex-grow: 1;
    width: 10px;
    border-collapse: collapse;
}

.lcm3-container .right-panel .memory.section table.animation-start {
    opacity: 0;
    transition: opacity 0;
}

.lcm3-container .right-panel .memory.section table.animation-end {
    opacity: 1;
    transition: opacity 400ms;
}

.lcm3-container .right-panel .memory.section table th {
    color: var(--theme-color);
    font-weight: 600;
    text-align: right;
}

.lcm3-container .right-panel .memory.section table td:first-child,
.lcm3-container .right-panel .memory.section table th:first-child {
    color: var(--theme-color);
    font-weight: 600;
    text-align: right;
    padding-right: 5px;
    width: 10%;
}

.lcm3-container .right-panel .memory.section table td {
    padding: 0 2px;
    text-align: center;
    caret-color: transparent;
    box-sizing: border-box;
}

.lcm3-container .right-panel .memory.section table td[data-value="00"]:not(:focus) {
    color: rgba(255, 255, 255, 0.4);
}

.lcm3-container .right-panel .memory.section td.animation-end {
    background-color: rgba(255, 255, 255, 0);
    transition: background-color 400ms, color 400ms;
}

/* .lcm3-container .right-panel .memory.section td.stack-pointer {
    background-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 1);
} */

/* .lcm3-container .right-panel .memory.section td.program-counter {
    background-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 1);
} */

/* .lcm3-container .right-panel .memory.section td.program-counter:nth-child(2n) {
    border: 1px solid var(--theme-color);
    border-right: none;
}

.lcm3-container .right-panel .memory.section td.program-counter:nth-child(2n + 1) {
    border: 1px solid var(--theme-color);
    border-left: none;
} */

.lcm3-container .right-panel .memory.section td.animation-start {
    background-color: rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 1);
    transition: none;
}

.lcm3-container .right-panel .memory.section table td:focus {
    outline: none !important;
    animation: blinking 800ms infinite;
}

@keyframes blinking {
    0%		{ background-color: rgb(50, 50, 50); }
    50%		{ background-color: rgb(128, 128, 128); }
    100%	{ background-color: rgb(50, 50, 50); }
}

.lcm3-container .right-panel .memory.section table td:not([contenteditable]),
.lcm3-container .right-panel .memory.section table th {
    cursor: default;
}

.lcm3-container .right-panel .memory.section div.program-counter {
    position: absolute;
    top: -30px;
    left: -30px;
    border: 1px solid var(--theme-color);
    backdrop-filter: contrast(0.7) brightness(1.8);
    border-radius: 5px;
}

.lcm3-container .right-panel .memory.section div.link-register {
    position: absolute;
    top: -30px;
    left: -30px;
    border: 1px dashed var(--theme-color);
    backdrop-filter: contrast(0.7) brightness(1.8);
    border-radius: 5px;
}

.lcm3-container .right-panel .memory.section div.stack-pointer {
    position: absolute;
    top: -30px;
    left: -30px;
    border: 1px solid var(--theme-color-2);
    backdrop-filter: contrast(0.7) brightness(1.8);
    border-radius: 5px;
}

.lcm3-container .right-panel .actions {
    display: inline-flex;
    float: right;
}

.lcm3-container .right-panel .actions .button {
    width: unset;
}

.lcm3-container .info-text {
    /* position: absolute; */
    /* bottom: 10px; */
    /* left: 10px; */
    float: right;
    font-family: "Rubik";
    color: rgb(140, 140, 140);
    font-size: 12px;
    border-radius: 3px;
    border: 1px solid rgb(50, 50, 50);
    padding: 1px 3px;
}