/* tag styling */
body {
    background-color: #02071c;
    color: #eaf0f6;

    font-family: "Helvetica", "Arial", sans-serif;
}

button {
    font-size: 0.9rem;

    vertical-align: center;
    text-align: center;

    height: 1.5rem;
}

pre {
    background-color: #02071c;
    color: #eaf0f6;

    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 1rem;

    margin: 0rem;
    padding: 0.5rem;

    border: 0rem;
    border-radius: 0.3rem;

    overflow-x: scroll;
}

div.front_panel {
    width: 800px;

    margin: 1rem;
    padding: 0rem;

    border: 0rem;
    border-radius: 1rem;

    height: 538.443670151px;
    
    background-image: url("./assets/front_panel.jpg");
    background-size: cover;
    background-repeat: no-repeat;

    position: relative;

    z-index: 10;
}

div.main {
    width: auto;
    max-width: 1212px;

    margin: 1rem;
    padding: 1rem;

    border: 0.1rem;
    border-color: #3d4b82;
    border-radius: 1rem;

    background-color: #eaf0f6;

    color: #02071c;

    height: fit-content;
    position: relative;
}

h1 {
    margin: 0rem;
}

h2 {
    margin: 0.3rem 0rem 0.3rem 0rem;

    font-weight: normal;
}

img.button {
    width: 28px;
    height: 43px;

    border: 0rem;

    margin: 0rem;
    padding: 0rem;

    opacity: 0.0;

    position: absolute;

    transition: opacity 0.1s;
}

img.led {
    width: 31px;
    height: 31px;

    border: 0rem;

    margin: 0rem;
    padding: 0rem;

    opacity: 0.0;

    position: absolute;
}

img.slider {
    width: 37px;
    height: 36px;

    border: 0rem;

    margin: 0rem;
    padding: 0rem;

    opacity: 1.0;

    position: absolute;

    transform: none;

    transition: translate 0.1s;
}

li {
    line-height: 1.5em;
}

p {
    margin: 1rem 0rem 1rem 0rem;
    line-height: 1.3em;
}

table {
    border: 0rem;

    margin: 0rem;
    padding: 0rem;
}

table.memory {
    border: 0.1rem solid #011627;
    margin: 1rem 0rem 0rem 0rem;
}

td {
    text-align: right;
    vertical-align: middle;

    border: 0px;

    padding: 0.05rem;
    margin: 0rem;

    background-color: #ffea65;

    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 0.74rem;
}

td.circuit_spy {
    text-align: left;
    vertical-align: top;

    border: 0px;

    padding: 0.1rem;

    background-color: #005c84;
}

td.highlight_changed {
    background-color: #1f1ccf;
    color: white;
}

td.mem_pc {
    border: 0.2rem solid rgb(55, 210, 248);
}

td.mem_mar {
    border: 0.2rem solid #eb02fc;
}

th {
    text-align: left;
    vertical-align: middle;

    background-color: #ffea65;

    border: 0px;

    padding: 0.3rem;
    margin: 0rem;

    font-weight: bold;
    font-size: 0.8rem;
}

th.memory {
    border: 0rem;
}

th.mem_pc {
    background-color: rgb(55, 210, 248);
}

th.mem_mar {
    background-color:  #eb02fc;
}


/* general class styling */
.mono {
    font-family: "Lucida Console", "Courier New", monospace;
}

.show_diff {
    color: #f71735;

    font-weight: bold;
}

.circuit_spy_text {
    color: #ffea65;

    font-weight: bold;
    font-size: 0.9rem;   
    font-family: "Helvetica", "Arial", sans-serif;

    margin: 0.3rem;
}

.ram_import_export {
    width: 23rem;

    text-align: center;

    margin: 0.1rem 0.1rem 0.1rem 2.5rem;
}


/* ID styling */
#app_12bit_circuit_spy_regs {
    border-radius: 1rem;
    border: 0.1rem solid #0a4473;

    margin: 1rem;
    padding: 0.4rem;

    background-color: #005c84;
    color: #011627;

    width: 785px;
    height: fit-content;

    position: absolute;
    top: 0rem;
    left: 0.5rem;

    visibility: hidden;

    transition: top 0.3s;

    z-index: 5;

    overflow: hidden;
}

#app_12bit_circuit_spy_memory {
    border-radius: 1rem;
    border: 0.1rem solid #0a4473;

    margin: 1rem;
    padding: 0.4rem;

    background-color: #005c84;
    color: #011627;

    width: fit-content;
    height: fit-content;

    position: absolute;
    top: 0rem;
    left: 23rem;

    visibility: hidden;

    transition: left 0.3s;

    z-index: 4;

    overflow: hidden;
}

[id*="app_12bit_memcell_"] {
    border: 0.1rem solid rgba(0,0,0,0.0);

    text-align: center;
}

#app_12bit_out_display {
    width: 698px;
    height: 125.5px;

    margin: 0rem;
    padding: 3px;

    border: 0rem;
    border-radius: 0rem;

    position: relative;

    font-family: monospace;
    font-size: 15px;
    line-height: 1.15em;

    left: 78px;
    top: 349px;

    color: rgb(31, 0, 0);
    background-color: rgba(0, 0, 0, 0);

    word-break: break-all;
    white-space: pre-line;

    overflow-y: scroll;
    overflow-x: hidden;

    visibility: visible;
}

#app_12bit_ram_import_export {
    width: 100%;
    height: 10rem;

    resize: none;

    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 0.98rem;
    
    margin: 0.4rem 0.1rem 0.1rem 0.1rem;
    padding: 0.2rem;
}