/* General styles */

body,html {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

h1 {
    font-family: sans-serif;
    font-style: italic;
    margin-top: 0;
}

h2 {
    margin-top: 0;
    margin-bottom: 0;
    font-family: sans-serif;
    font-style: italic;
}

h3 {
    margin-top: 0;
    margin-bottom: 0;
    font-family: sans-serif;
    font-style: italic;
}

button {
    padding-top: 0.1em;
    padding-bottom: 0.2em;
}

/* --- Top level --- */

.viewport {
    height: 100vh;
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    grid-template-rows: min-content min-content min-content 1fr min-content;
}

/* --- Row 1 --- */

#topbox {
    grid-row: 1;
    grid-column: 1 / 4;
    display: flex;
    justify-content: flex-start;
}

.header {
    flex: 1;
}

.intro {
    flex: 4;
}

/* --- Row 2 --- */

.toolbar {
    grid-row: 2;
    grid-column: 1 / 4;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    background-color: lightgrey;
    display: grid;
    grid-template-columns: 2fr min-content;
}

.leftbuttons {
    float: left
    align-items: center;
}

.rightbuttons {
    float: right;
    display: flex;
    white-space: nowrap;
    align-items: center;
}

.spacer {
    display: inline-block;
    width: 20px;
}

.icon {
    height: 1.2em;
    position: relative;
    bottom: -0.2em;
}

.clickable {
    font-family: sans-serif;
    text-decoration: underline;
    color: blue;
    padding-left: 1em;
    padding-right: 1em;
    cursor: default;
}

/* --- Row 3 --- */

.headingsbar {
    font: 14px/21px sans-serif;
    background-color: #EEEEEE;
}

/* Source editor heading bar */

#sourceheadings {
    grid-row: 3;
    grid-column: 1;
    display: grid;
    grid-template-columns: 2fr min-content;
}

#sourcetitle {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    align-items: center;
}

#editbuttons {
    grid-row: 1;
    grid-column: 2;
    display: flex;
}

.smallicon {
    height: 1em;
    position: relative;
    bottom: -0.2em;
}

/* Output heading bar */

#outheadings {
    grid-row: 3;
    grid-column: 2;
    display: grid;
}

#outtitle {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    align-items: center;
}

/* Computer state heading bar */

#stateheadings {
    grid-row: 3;
    grid-column: 3;
    display: grid;
}

#statetitle {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    align-items: center;
}

/* --- Row 4 ---  */

/* Source panel */

#scrollcontainer {
    grid-row: 4;
    grid-column: 1;
    display: grid;
    grid-template-columns: minmax(4ch, max-content) auto;
    grid-template-rows: 1;
    border: 2px solid grey;
    overflow: auto;
}

#linenumbers {
    grid-row: 1;
    grid-column: 1;
    border: 0px;
    line-height: 1.5em;
    font: 15px/21px monospace;
    padding-left: 2px;
    padding-right: 5px;
    background-color: lightgrey;
    overflow: hidden;
}

.breakpoint{
    background-color: red;
}

#container {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    border: 0px
}

#backdrop {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    border: 0px;
    border-radius: 0;
    line-height: 1.5em;
    font: 15px/21px monospace;
    background-color: white;
    overflow: hidden;
}

#websource {
    position: absolute;
    height: 100%;
    width: 100%;
    border: 0px;
    left: 0px;
    top: 0px;
    margin: 0;
    padding: 0;
    white-space: pre;
    border-radius: 0;
    line-height: 1.5em;
    font: 15px/21px monospace;
    background-color: transparent;
    overflow: auto;
    resize: none;
    tab-size: 12;
}

#websource:focus {
    outline: none;
}

.noHighLight {
    padding: 0;
    margin: 0;
    font: 15px/21px monospace;
    background-color: transparent;
    white-space: pre;
}

.activeLine {
    padding: 0;
    margin: 0;
    font: 15px/21px monospace;
    background-color: lightblue;
    white-space: pre;
}

.errorLine {
    padding: 0;
    margin: 0;
    font: 15px/21px monospace;
    background-color: pink;
    white-space: pre;
}

.find {
    padding: 0;
    margin: 0;
    font: 15px/21px monospace;
    background-color: lightgreen;
    white-space: pre;
}

.replace {
    padding: 0;
    margin: 0;
    font: 15px/21px monospace;
    background-color: #F0F040
    white-space: pre;
}

/* Output panel */

#weboutput {
    grid-column: 2;
    grid-row: 4;
    border: 2px solid grey;
    line-height: 1.5em;
    font: 15px/21px monospace;
    background-color: lightyellow;
    overflow: auto;
    resize: none;
}

.linenumber {
    color: blue;
    text-decoration: underline;
}

/* Computer state panel */

#computerstate {
    grid-column: 3;
    grid-row: 4;
    border: 2px solid grey;
    line-height: 1.5em;
    font: 12px/18px sans-serif;
    background-color: #EEEEEE;
    overflow: auto;
    resize: none;
}

#statetable {
    padding: 10px;
    margin: 5px;
    margin-left: auto;
    margin-right: auto;
}

.stateheading {
    text-align: center;
    font-weight: bold;
    font-size: 120%
}

.statelabel {
    padding: 3px;
    margin: 1;
    text-align: right;
}

#accvalue {
    border: 1px solid grey;
    background-color: lightgreen;
    width: 8em;
    text-align: right;
    font: monospace;
}

#pcvalue {
    border: 1px solid grey;
    background-color: lightblue;
    width: 8em;
    text-align: right;
    font: monospace;
}

.varvalue {
    border: 1px solid grey;
    background-color: lightyellow;
    width: 8em;
    text-align: right;
    font: monospace;
}

/* --- Row --- 5 */

#footer {
    grid-row: 5;
    grid-column: 1 / 4;
    text-align: center;
    vertical-align: middle;
    font-size: 70%;
    margin-top: 8px;
    margin-bottom: 8px;
}

/* --- Control bars --- */

.controlbar {
    display: none;
    transition: all .3s ease-out;
    bottom: -80px;
    position: fixed;
    z-index: 1;
    left: 0;
    width: calc(100% - 20px);
    background-color: lightgrey;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
    padding-right: 10px;
    border-top: 1px solid grey;
}

.controlbar-close {
    color: #444;
    float: right;
    font-size: 16px;
    font-weight: bold;
    line-height: 35px;
    cursor: default;
}

.controlbar-label {
    padding-top: 40px;
    margin-bottom: 16px;
    font: 14px/21px sans-serif;
    line-height: 35px;
}

/* --- Messages --- */

.message {
    display: none;
    position: fixed;
    z-index: 1;
    left: 50%;
    top: 50%;
    padding: 10px;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
    transform: translate(-50%, -50%);
    border-radius: 5px;
}

.message.info {
    color: #0088ee;
}

.message.warning {
    color: #ff2222;
}

/* --- Modal pop-ups --- */

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    height: 80% auto;
}

/* The Close Button */
.modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Styles used in the modal pop-ups */

.modal-tables {
    font-family: sans-serif;
}

.exampleprog {
    font-family: sans-serif;
    color: blue;
    padding: 5px;
    cursor: default;
}

.helptable {
    text-align: left;
    border-spacing: 20px;
}

.helptable tr td:nth-child(-n+2) {
    white-space: nowrap;
}

.icontable {
    text-align: left;
    border-spacing: 20px;
}