/* COLORS  */
body {
  background-color: var(--color-body);
  color: var(--color-body-text);
}

.pc .addressbus {
  background-color: var(--color-addressbus);
  color: var(--color-addressbus-text);
}

.pc .databus {
  background-color: var(--color-databus);
  color: var(--color-databus-text);
}

.pc .ram {
  background-color: var(--color-ram);
  color: var(--color-ram-text);
}

.pc .cu {
  background-color: var(--color-cu);
  color: var(--color-cu-text);
}

.pc .alu {
  background-color: var(--color-alu);
  color: var(--color-alu-text);
}

.pc .section h1.header {
  background-color: var(--color-header);
  color: var(--color-header-text);
}


/* TABLE COLORS */
.pc .ram .scroller table thead.head th {
  background-color: var(--color-table-ram-head);
  color: var(--color-table-ram-head-text);
}

.pc .cu .scroller table thead.head th {
  background-color: var(--color-table-cu-head);
  color: var(--color-table-cu-head-text);
}

.pc .scroller table tr td {
  background-color: var(--color-table-row);
  color: var(--color-table-text);
  border-bottom: 1px solid var(--color-table-border);
}

.pc .scroller table tr:nth-child(even) td{
  background-color: var(--color-table-row-alt);
}

.pc .scroller table tr.empty td {
  color: var(--color-table-text-empty);
}

.pc .ram .scroller table tr.current td {
  background-color: var(--color-table-ram-highlight);
  color: var(--color-table-ram-highlight-text);
}

.pc .cu .scroller table tr.current td {
  background-color: var(--color-table-cu-highlight);
  color: var(--color-table-cu-highlight-text);
}


/* CONTROLS COLORS */
.controls button, .controls .button {
  /* background-color: whitesmoke; */
  color: var(--color-controls-button-text);
  border-color: var(--color-controls-button-border);
}
.controls button:hover, .controls .button:hover{
  color: var(--color-controls-button-text-hover);
}

.pc .controls .checker::before {
  border: 1px solid var(--color-controls-button-border);
}

.pc .controls .checker.checked::before {
  color: var(--color-controls-button-text);
}



/* FORMATTING STUFF */

button {
  margin: 0;
}

.pc {
  height: 400px;
  height: 99vh;

  box-sizing: border-box;

  padding: 1em;

  display: grid;
  grid-template-columns: auto auto auto;
  /* grid-template-columns: max-content auto max-content; */
  gap: 9px;
}

.pc .grid-fullwidth{
  grid-column: 1 / span 3;
}

.pc .section {
  min-height: 25em;
  max-height: calc(80vh - 8em);
  min-width: 20%;

  box-sizing: border-box;
  padding: 2.5em 1em 1em 1em;

  display: flex;
  flex-direction: column;

  position: relative;
  /*top: 0;
  left: 0;*/
}

.pc .section h1.header {
  font-size: 1.2em;
  position: absolute;
  top: 3px;
  left: 4px;
  padding: 3px;
}

.pc .row {
  display: flex;
  justify-content: space-evenly;
}

.pc .scroller {
  overflow-x: auto;
  overflow-y: scroll;

  /*position: relative;*/

  /* max-height: 60%; */
  padding: 0;
  box-sizing: border-box;

  width: 100%;
  margin: 1em 0 0 0;
}

.pc .scroller:last-child {
  margin-bottom: -1em;
}

.pc .scroller table thead.head {
  position: sticky;
  top: -2px;
  left: 0;
  height: 1em;
  padding: 1em;

  transition: 0.2s;
}

.pc .scroller table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.pc .scroller table thead.head.shrunk {
  height: .5em;
  font-size: .8em;
}

.pc .scroller table thead.head th {
  padding: 12px 4px 12px 15px;
  transition: 0.2s;
}

.pc .scroller table thead.head.shrunk th {
  padding-top: .2em;
  padding-bottom: .2em;
}

.pc .scroller table .num {
  text-align: right;
}

.pc .scroller table td:first-child,
.pc .scroller table td:last-child {
  padding: 12px 15px;
}

.pc .scroller table tr.empty td {
  padding: 3px 15px;
}

.pc .scroller table tbody button:last-child {
  text-decoration: none;
  text-transform: none;
  height: max-content;
  line-height: 2em;
  font-weight: normal;
  font-size: inherit;
  padding: 0px 10px;
}

th.address {
  width: 5rem;
  padding-left: 8px;
  text-align: right;
}

.pc input[type=number] {
  margin: 0 .5em 0 0;
  padding: 0 .25em;
  height: 1.5em;
  line-height: 1em;
}

/* CONTROLS */
.pc .controls button,
.pc .controls .button{
  text-transform: none !important;
  font-weight: 600;
  height: 2.5em;
  line-height: 1em;
  margin: 0;
  vertical-align: top;
  padding: 0.25em 2em;
}

.pc .controls > :not(:last-child) {
  margin-right: 0.75em;
}

.pc .controls .checker {
  display: inline-flex;
  align-items: center;
  padding-left: 3em;
}

.pc .controls .checker label {
  display: inline;
  /*font-size: 0.8em;*/
  white-space: initial;
  white-space: break-spaces;
  text-transform: none;
  width: 6em;
  width: min-content;
  vertical-align: middle;
  line-height: .9em;

  margin: 0;

  cursor: pointer;
}

.pc .controls input[type=checkbox]{
  display: none;
  margin-left: -1em;
  margin-right: 1em;
  opacity: 0;
  z-index: 0;
}

.pc .controls .checker::before{
  content: "✔";
  display: inline-block;
  width: 2rem;
  height: 2rem;
  color: rgba(0,0,0,0);
  border-radius: 4px;
  vertical-align: middle;
  margin: 0 .5em 0 -1em;

  line-height: 1.8rem;
  font-size: 1.4em;

  box-sizing: border-box;
}

/* END CONTROLS */

/* RAM */

.pc .ram .scroller {
  /* height: 100%; */
  /* padding: 0.2em; */
  box-sizing: border-box;
}

.pc .ram .scroller table {
  width: 100%;
}

.pc .ram input[type=number] {
  background-color: var(--color-table-ram-select);
  color: var(--color-table-ram-select-text);
  border-color: var(--color-table-ram-select-border);
}

.pc .ram input[type=number].instruction {
  width: 5em;
}

.pc .ram input[type=number].address {
  width: 7em;
}

.pc .ram table tr td:nth-child(2){
  text-align: left;
}

.pc .ram .scroller table tbody button:last-child{
  background-color: var(--color-table-ram-select);
  color: var(--color-table-ram-select-text);
  border-color: var(--color-table-ram-select-border);
}


/* CONTROL UNIT */

.pc .cu p {
  margin: 0 0 .2em 0;
}

.pc .cu .scroller table {
  width: 100%;
}

.pc .cu .input-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 .5em 0;
}

.pc .cu .input-row:last-child {
  margin: 0;
}

.pc .cu input {
  color: var(--color-cu-text);
  border-color: var(--color-cu-text);
  background-color: transparent;
}

.pc .cu label {
  display: inline;
}

.pc .cu select{
  margin: 0;
  width: 100%;

  background-color: var(--color-table-cu-select);
  color: var(--color-table-cu-select-text);
  border: 1px solid var(--color-table-cu-select-border);
}

.pc .cu .scroller table tbody button:last-child {
  background-color: var(--color-table-cu-select);
  color: var(--color-table-cu-select-text);
  border: 1px solid var(--color-table-cu-select-border);
}

/* ALU */
.pc .alu input {
  color: var(--color-alu-text);
  border-color: var(--color-alu-text);
  background-color: transparent;
}

/* BUSSES */

.pc .databus,
.pc .addressbus{
  /*position: relative;*/
  text-align: left;

  margin: 0;
  padding: .75em .5em;
}

.pc .databus .label,
.pc .addressbus .label {
  /* position: absolute; */
  /* left: .5em; */
  margin-right: 1em;
}

.pc .addressbus input {
  color: var(--color-addressbus-text);
  border-color: var(--color-addressbus-text);
  background-color: var(--color-addressbus);
}

.pc .databus input {
  color: var(--color-databus-text);
  border-color: var(--color-databus-text);
  background-color: var(--color-databus);
}

.pc .addressbus {
  margin-bottom: 1em;
}

.pc .databus {
  margin-top: 2em;
}

/* ARROWS */
.arrow {
  position: absolute;
  bottom: 0;
  left: 50%;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 3rem;
  height: 5rem;

  /* transform: rotate(90deg) translate(1.5rem, 2.5rem) ; */
  transform: translate(0, 3rem);
  z-index: 100;

  font-size: 0.5em;
  color: var(--color-arrow-text);
  background-color: var(--color-arrow);
}

.arrow.down {
  left: 25%;
}

.arrow.up {
  left: 75%;
  transform: rotate(180deg) translate(0, -4.5rem);
}
.arrow.up > :nth-child(1){
  /* transform: rotate(90deg) translate(0rem, 2rem); */
  transform: rotate(180deg);
}

.arrow.up.arrow2 {
  left: 50%;
}

.arrow.top {
  bottom: auto;
  top: -6rem;
}


.arrow > :nth-child(1) {
  font-size: 1.2em;
  line-height: 1.1em;
  font-weight: 600;
  color: var(--color-arrow-text);
  background-color: var(--color-arrow);
  border-color: var(--color-arrow-text);
  text-transform: none;
  padding: 2px 10px;
  margin: 0;
  /* transform: rotate(-90deg) translate(0rem, -2rem); */

  white-space: normal;
  height: min-content;
}

.arrow > :nth-child(1) *{
  color: var(--color-arrow-text);
  display: block;
  white-space: break-spaces;
}

.arrow > :nth-child(1):hover, .arrow > :nth-child(1) *:hover {
  color: var(--color-arrow-text-hover);
}

.arrow > :nth-child(2) {
  width: 0;
  height: 0;

  border-left:    2.5rem solid transparent;
  border-right:   2.5rem solid transparent;
  border-top:     2rem solid var(--color-arrow);
  border-bottom:  0rem solid transparent;

  position: absolute;
  left: -1rem;
  bottom: -2rem;

}



/* HELPERS  */
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}

.level {
  float: left;
  margin-right: 1.5em;
}