@use "sass:color" {}@font-face {
  font-family: DINish;
  font-weight: normal;
  font-style: normal;
  src: url(fonts/DINish-Regular.ttf) format(truetype); }

@font-face {
  font-family: DINish;
  font-weight: bold;
  font-style: normal;
  src: url(fonts/DINish-Bold.ttf) format(truetype); }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #1a1c29;
  font-family: DINish;
  font-size: 16px; }

#ROOT {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: #fff; }

#header {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-x: auto; }
  @media (min-width: 760px) {
    #header {
      align-self: center;
      width: 600px; } }
#header-main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #b8cdf5;
  color: #000; }
  @media (min-width: 760px) {
    #header-main {
      border-bottom-left-radius: 26px;
      border-bottom-right-radius: 26px;
      z-index: 2; } }
#logo {
  display: block;
  align-self: stretch;
  width: 70px;
  height: 45px;
  margin: 15px;
  background: url(img/logo.svg) center no-repeat;
  background-size: contain; }
  #logo:last-child {
    background-image: url(img/logo_logic.svg);
    width: 100%;
    height: 56px; }

#page-title {
  align-self: center;
  font-size: 26px;
  font-weight: bold;
  padding: 0 26px; }

#header-menu, #header-config-option {
  align-self: flex-end;
  display: flex;
  flex-direction: row;
  border-bottom-left-radius: 26px;
  border-bottom-right-radius: 26px;
  background-color: #2D344F;
  color: #a8afc4;
  font-size: 18px; }
  @media (max-width: 760px) {
    #header-menu, #header-config-option {
      border-bottom-right-radius: 0 !important; } }
#header-config-option {
  align-items: center;
  padding: 10px 28px; }
  @media (min-width: 760px) {
    #header-config-option {
      padding-right: 22px; } }
  #header-config-option > input {
    margin-right: 12px; }
    #header-config-option > input::before {
      background-color: #a8afc4; }
  #header-config-option:has(> input[checked]) {
    background-color: #434C6F;
    color: #fff; }
  #header-config-option > input[checked]::before {
    background-color: #fff; }

#header-menu {
  font-weight: bold;
  text-transform: uppercase;
  overflow: hidden; }
  #header-menu > div {
    padding: 10px 22px; }
    #header-menu > div:first-child {
      padding-left: 28px; }
    @media (min-width: 760px) {
      #header-menu > div:last-child {
        padding-right: 28px; } }
    #header-menu > div.selected {
      background-color: #434C6F;
      color: #fff; }
    #header-menu > div:not(.selected) {
      cursor: pointer; }

@media (min-width: 760px) {
  #header-config-option, #header-menu {
    margin-top: -26px; }
  #header-config-option, #header-menu > div {
    padding-top: 36px; } }

#content {
  flex: 1;
  align-self: center;
  max-width: 100%;
  box-sizing: border-box;
  padding: 50px 30px;
  overflow-x: auto; }

#github {
  width: 48px;
  height: 48px;
  margin: 14px;
  content: "";
  display: block;
  background-color: #434C6F;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: url("img/github.svg");
  -webkit-mask-image: url("img/github.svg"); }
  @media (min-width: 760px) {
    #github {
      position: absolute;
      top: 0;
      right: 0; } }
  @media (max-width: 760px) {
    #github {
      align-self: flex-start; } }
.expr {
  display: inline-flex;
  flex-direction: row;
  align-items: center; }
  .expr .op {
    font-size: text-small;
    color: #a8afc4; }
  .expr .op.big {
    margin: 0 4px; }

.info-box, #qmc-results, .group {
  display: flex;
  flex-direction: column;
  border-radius: 26px;
  background-color: #2D344F;
  overflow: hidden; }
  .info-box > .title, #qmc-results > .title, .group > .title {
    align-self: flex-start;
    padding: 10px 18px;
    border-bottom-right-radius: 26px;
    font-weight: bold;
    background-color: #b8cdf5;
    color: #000; }
  .info-box > .content, #qmc-results > .content, .group > .content {
    align-self: stretch;
    padding: 28px;
    padding-top: 0;
    margin-top: 20px;
    overflow-x: auto;
    overflow-y: hidden; }
  .info-box.single-line, .single-line#qmc-results, .single-line.group {
    flex-direction: row; }
    .info-box.single-line > .title, .single-line#qmc-results > .title, .single-line.group > .title {
      align-self: stretch;
      border-radius: 0; }
    .info-box.single-line > .content, .single-line#qmc-results > .content, .single-line.group > .content {
      align-self: center;
      padding: 0 20px;
      margin: 0; }

.error-box {
  align-self: stretch;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  padding: 6px 14px;
  font-size: 12px;
  background-color: #59303A;
  overflow: hidden; }

.nowrap {
  white-space: nowrap; }

.group {
  background: none;
  border: 2px #2D344F solid; }
  .group > .title {
    background-color: #2D344F;
    color: #fff; }

#input-minmaxterm > .inputs > .dontcare, #input-minmaxterm > .inputs > .mterms > div, input[type="text"], button, .button, input[type="submit"] {
  padding: 7px 14px;
  border-radius: 20px;
  border: none;
  color: #fff; }

button, .button, input[type="submit"] {
  box-sizing: content-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: bold;
  text-transform: uppercase; }
  button[disabled], [disabled].button, input[disabled][type="submit"] {
    color: #a8afc4;
    background-color: #2D344F; }
  button:not([disabled]), .button:not([disabled]), input[type="submit"]:not([disabled]) {
    color: #000;
    background-color: #b8cdf5;
    cursor: pointer; }
  button.action:not([disabled]), .action.button:not([disabled]), input.action[type="submit"]:not([disabled]) {
    color: #000;
    background-color: #ffec9a !important; }
    button.action:not([disabled]):hover, .action.button:not([disabled]):hover, input.action[type="submit"]:not([disabled]):hover {
      background-color: #fff4c3 !important; }

button.icon, .icon.button, input.icon[type="submit"] {
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center; }
  button.icon::before, .icon.button::before, input.icon[type="submit"]::before {
    content: "";
    display: block;
    background-color: #000;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    width: 18px;
    height: 18px; }
  button.icon[disabled]::before, .icon[disabled].button::before, input.icon[disabled][type="submit"]::before {
    background-color: #a8afc4; }
  button.icon.delete, .icon.delete.button, input.icon.delete[type="submit"] {
    position: relative;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-bottom: -8px;
    margin-right: -1px;
    margin-left: -15px;
    float: right;
    outline: 2px #1a1c29 solid;
    z-index: 2; }
    button.icon.delete::before, .icon.delete.button::before, input.icon.delete[type="submit"]::before {
      width: 8px;
      height: 8px;
      mask-image: url("img/close.svg");
      -webkit-mask-image: url("img/close.svg"); }
  button.icon.add::before, .icon.add.button::before, input.icon.add[type="submit"]::before {
    mask-image: url("img/add.svg");
    -webkit-mask-image: url("img/add.svg"); }

input[type="text"] {
  outline: none;
  font-family: DINish;
  font-size: 14px;
  background-color: #2D344F; }

input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer; }

input[type=checkbox], input[type=checkbox]::before {
  width: 20px;
  height: 20px; }

input[type=checkbox]::before {
  content: "";
  display: block;
  background-color: #fff;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: url("img/unchecked.svg");
  -webkit-mask-image: url("img/unchecked.svg"); }

input[type=checkbox]:not(:checked):hover::before {
  mask-image: url("img/unchecked_hover.svg");
  -webkit-mask-image: url("img/unchecked_hover.svg"); }

input[type=checkbox]:checked::before {
  mask-image: url("img/checked.svg");
  -webkit-mask-image: url("img/checked.svg"); }

table {
  border-spacing: 0; }
  table td, table th {
    font-size: 14px; }

.hidden {
  display: none !important; }

::placeholder {
  color: #a8afc4; }

::selection {
  background-color: #ffec9a;
  color: #000; }

#menu {
  display: flex; }
  #menu > .title, #menu > :last-child > a {
    font-size: 26px;
    font-weight: bold;
    padding: 10px 20px; }
    #menu > .title:not(:first-child), #menu > :last-child > a:not(:first-child) {
      margin-top: 3px; }
  #menu > :last-child {
    display: flex;
    flex-direction: column;
    align-items: stretch; }
    #menu > :last-child > a {
      color: #a8afc4;
      background-color: #2D344F;
      text-decoration: none; }
      #menu > :last-child > a:first-child {
        border-top-right-radius: 20px; }
      #menu > :last-child > a:last-child {
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px; }
      #menu > :last-child > a:hover {
        cursor: pointer;
        color: #fff;
        background-color: #434C6F; }
  #menu > .title {
    color: #000;
    background-color: #b8cdf5; }
  @media (min-width: 760px) {
    #menu {
      flex-direction: row;
      align-items: flex-start; }
      #menu > .title {
        margin-left: -12px;
        margin-right: 3px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px; } }
  @media (max-width: 760px) {
    #menu {
      flex-direction: column;
      align-items: stretch; }
      #menu > .title {
        align-self: flex-start;
        margin-bottom: 3px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px; } }
#truthtable, #input-truthtable > table {
  border-spacing: 0; }
  #truthtable tr > *, #input-truthtable > table tr > * {
    text-align: center; }
  #truthtable tr:first-child > *, #input-truthtable > table tr:first-child > * {
    border-bottom: 12px transparent solid; }
  #truthtable tr:first-child > td:last-child, #input-truthtable > table tr:first-child > td:last-child {
    position: relative; }
    #truthtable tr:first-child > td:last-child > .icon, #input-truthtable > table tr:first-child > td:last-child > .icon {
      position: absolute;
      height: auto;
      width: 100%;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0; }
  #truthtable tr:first-child > th, #input-truthtable > table tr:first-child > th {
    position: relative;
    width: 32px;
    padding: 0;
    padding-right: 3px; }
  #truthtable tr:not(:first-child) > *, #input-truthtable > table tr:not(:first-child) > * {
    border-bottom: 1px #a8afc4 solid; }
  #truthtable tr:not(:first-child) > td, #input-truthtable > table tr:not(:first-child) > td {
    padding: 8px;
    padding-bottom: 5.2px; }
  #truthtable tr:not(:first-child) > td:last-child, #input-truthtable > table tr:not(:first-child) > td:last-child {
    padding-left: 20px;
    border-left: 1px #a8afc4 solid;
    text-align: right;
    font-weight: bold; }
  #truthtable tr:last-child > *, #input-truthtable > table tr:last-child > * {
    border-bottom: none; }

#truthtable.outdated tr:not(:first-child), #input-truthtable > table.outdated tr:not(:first-child) {
  opacity: 40%; }

.var-input {
  width: 36px;
  border-radius: 0 !important;
  text-align: center;
  padding-left: 8px !important;
  padding-right: 8px !important; }
  .var-input.invalid {
    background-color: #59303A !important; }

#normalforms {
  display: flex;
  flex-direction: column; }
  #normalforms > div {
    display: flex;
    flex-direction: row;
    align-items: flex-start; }
    #normalforms > div:first-child {
      margin-bottom: 16px; }
    #normalforms > div > b {
      margin-right: 12px; }

#karnaugh-options {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px; }

.karnaugh {
  display: grid;
  position: relative;
  padding-bottom: 42px; }
  @media (min-width: 760px) {
    .karnaugh {
      grid-template-columns: auto auto 1fr;
      grid-template-areas: ". col ." "row map implis" ". expr expr";
      grid-gap: 30px; } }
  @media (max-width: 760px) {
    .karnaugh {
      grid-template-columns: auto auto;
      grid-template-areas: ". col " "row map" ". implis" "expr expr";
      grid-gap: 20px; }
      .karnaugh .vars.row {
        margin-right: -28px; } }
  .karnaugh > * {
    align-self: start;
    justify-self: start; }
  .karnaugh .kmap {
    grid-area: map; }
    .karnaugh .kmap tr > * {
      width: 40px;
      height: 40px;
      min-width: 40px;
      min-height: 40px;
      max-width: 40px;
      max-height: 40px; }
    .karnaugh .kmap td {
      position: relative;
      overflow: hidden; }
    .karnaugh .kmap th {
      font-size: 12px;
      text-align: center;
      color: #a8afc4; }
    .karnaugh .kmap td {
      border-left: #fff 1px solid;
      border-top: #fff 1px solid; }
      .karnaugh .kmap td > div {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        line-height: 40px;
        text-align: center;
        vertical-align: middle;
        font-size: 14px; }
    .karnaugh .kmap td:nth-child(4n+1) {
      border-right: #fff 2px solid; }
    .karnaugh .kmap tr:nth-child(4n+1) td {
      border-bottom: #fff 2px solid; }
    .karnaugh .kmap td:last-child {
      border-right: #fff 1px solid; }
    .karnaugh .kmap tr:last-child td {
      border-bottom: #fff 1px solid; }
  .karnaugh .mark {
    border-width: 2px;
    border-style: solid;
    border-radius: 13.3333333333px;
    margin: -40px; }
  .karnaugh .implis {
    grid-area: implis; }
    @media (min-width: 760px) {
      .karnaugh .implis {
        margin-top: 40px; } }
    @media (max-width: 760px) {
      .karnaugh .implis {
        margin-top: 12px;
        margin-bottom: 22px; } }
    .karnaugh .implis tr > * {
      padding: 0 4px; }
  .karnaugh .vars {
    display: flex;
    flex-direction: row;
    align-items: stretch; }
    .karnaugh .vars.row {
      grid-area: row; }
    .karnaugh .vars.col {
      grid-area: col; }
    .karnaugh .vars .var-input {
      margin-right: 3px;
      width: 22px; }
    .karnaugh .vars .add {
      height: auto;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0; }
      .karnaugh .vars .add.disabled {
        display: none; }
  .karnaugh button, .karnaugh .button, .karnaugh input[type="submit"] {
    float: right; }
  .karnaugh .expr {
    grid-area: expr;
    flex-wrap: wrap;
    position: absolute; }

.karnaugh.outdated > :not(.vars) {
  opacity: 40%; }

#qmc {
  display: flex;
  flex-direction: column;
  align-items: flex-start; }
  #qmc > div {
    margin-bottom: 32px !important; }
  #qmc > div:not(#qmc-results) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: -8px; }
    #qmc > div:not(#qmc-results) > * {
      margin: 8px; }
    #qmc > div:not(#qmc-results) table td, #qmc > div:not(#qmc-results) table th {
      padding: 8px 10px;
      border-top: #a8afc4 1px solid;
      border-left: #a8afc4 1px solid;
      text-align: center; }
    #qmc > div:not(#qmc-results) table tr > :last-child {
      border-right: #a8afc4 1px solid; }
    #qmc > div:not(#qmc-results) table tr:last-child > * {
      border-bottom: #a8afc4 1px solid; }
    #qmc > div:not(#qmc-results) table th.title {
      border: none;
      padding-left: 16px;
      border-top-left-radius: 20px;
      padding-right: 16px;
      border-top-right-radius: 20px;
      background-color: #b8cdf5;
      color: #000;
      font-weight: bold;
      text-transform: uppercase; }
    #qmc > div:not(#qmc-results) table .impli-varname {
      border-top: none;
      border-right: none !important;
      font-size: 12px;
      padding: 4px; }
    #qmc > div:not(#qmc-results) table .impli-cell {
      border-left: none; }
    #qmc > div:not(#qmc-results) .step tr > :last-child {
      border-right: none;
      border-top: none;
      border-bottom: none; }
    #qmc > div:not(#qmc-results) .step .group-start > * {
      border-top: 2px #fff solid; }
    #qmc > div:not(#qmc-results) .impli-table .essential-marker-col {
      border-left: none; }
    #qmc > div:not(#qmc-results) .impli-table .covered-mterm {
      margin: 2px;
      border-radius: 100%; }
      #qmc > div:not(#qmc-results) .impli-table .covered-mterm::after {
        content: "";
        display: block;
        background-color: #fff;
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
        -webkit-mask-position: center;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-image: url("img/close.svg");
        -webkit-mask-image: url("img/close.svg");
        width: 10px;
        height: 10px;
        margin: 4px; }
      #qmc > div:not(#qmc-results) .impli-table .covered-mterm.unique {
        border: 1px #a8afc4 solid; }
    #qmc > div:not(#qmc-results) .used::after {
      content: "";
      display: block;
      background-color: #fff;
      mask-position: center;
      mask-repeat: no-repeat;
      mask-size: contain;
      -webkit-mask-position: center;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-image: url("img/tick.svg");
      -webkit-mask-image: url("img/tick.svg");
      width: 14px;
      height: 14px;
      margin-right: 4px; }

#qmc-results {
  margin-top: 12px;
  align-self: flex-start;
  border-spacing: 4px; }
  #qmc-results > .content {
    display: flex;
    flex-direction: column; }
    #qmc-results > .content > b {
      margin: 5px 0;
      font-size: 12px; }
  #qmc-results > tbody > tr > td {
    padding: 10px;
    vertical-align: top; }
  #qmc-results > tbody > tr:first-child > td:first-child {
    padding-left: 16px;
    border-top-left-radius: 20px;
    padding-right: 16px;
    border-top-right-radius: 20px;
    background-color: #b8cdf5;
    color: #000; }
  #qmc-results > tbody > tr:not(:first-child) > td:first-child {
    background-color: #2D344F; }
  #qmc-results > tbody .rules {
    border-spacing: 6px;
    margin: -6px; }
    #qmc-results > tbody .rules td {
      color: #a8afc4; }

.conversion {
  align-self: flex-start;
  border-spacing: 4px; }

.conversion > tr > *, .conversion > tbody > tr > * {
  padding: 10px;
  vertical-align: top; }
  .conversion > tr > *:last-child, .conversion > tbody > tr > *:last-child {
    padding-left: 18px; }

.conversion > tr:first-child > th, .conversion > tbody > tr:first-child > th {
  padding-left: 16px;
  border-top-left-radius: 20px;
  padding-right: 16px;
  border-top-right-radius: 20px;
  background-color: #b8cdf5;
  color: #000; }

.conversion > tr:not(:first-child) > td:first-child, .conversion > tbody > tr:not(:first-child) > td:first-child {
  background-color: #2D344F; }

.conversion .rules, .conversion > tbody .rules {
  border-spacing: 6px;
  margin: -6px; }
  .conversion .rules td, .conversion > tbody .rules td {
    color: #a8afc4; }

#cmos-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start; }
  #cmos-container .info-box, #cmos-container .group, #cmos-container #qmc-results {
    margin-bottom: 64px;
    margin-right: 32px; }
  #cmos-container .connection {
    background-color: #fff; }
  #cmos-container .conj > .connection, #cmos-container .transistor-container > .connection {
    width: 1px; }
  #cmos-container .conj {
    display: flex;
    flex-direction: column; }
    #cmos-container .conj > div {
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: stretch; }
  #cmos-container .disj {
    display: flex;
    flex-direction: column;
    align-items: stretch; }
    #cmos-container .disj > .connection {
      height: 1px; }
    #cmos-container .disj > .conjs {
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: stretch;
      margin: -1px 0; }
      #cmos-container .disj > .conjs > * {
        flex: 1; }
  #cmos-container .conj > div:not(:last-child) > .disj {
    margin-bottom: -1px; }
  #cmos-container .transistor-container {
    min-height: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-end; }
    #cmos-container .transistor-container > .connection {
      flex: 1; }
    #cmos-container .transistor-container > .transistor-with-invar {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center; }
      #cmos-container .transistor-container > .transistor-with-invar > .transistor {
        width: 20px;
        height: 20px;
        margin-left: 5px;
        display: flex;
        align-items: stretch;
        justify-content: stretch; }
      #cmos-container .transistor-container > .transistor-with-invar > .transistor::before {
        content: "";
        display: block;
        background-color: #fff;
        mask-position: right;
        mask-repeat: no-repeat;
        mask-size: contain;
        -webkit-mask-position: right;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        flex: 1; }
      #cmos-container .transistor-container > .transistor-with-invar > .transistor.nmos::before {
        mask-image: url("img/cmos/nmos.svg");
        -webkit-mask-image: url("img/cmos/nmos.svg"); }
      #cmos-container .transistor-container > .transistor-with-invar > .transistor.pmos::before {
        mask-image: url("img/cmos/pmos.svg");
        -webkit-mask-image: url("img/cmos/pmos.svg"); }
  #cmos-container .out {
    height: 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-left: 1px #fff solid;
    margin-left: -1px; }
    #cmos-container .out > div {
      height: 1px;
      background-color: #fff; }
  #cmos-container .vcc, #cmos-container .gnd {
    width: calc(30 * 1px);
    height: calc(60 * 1px); }
  #cmos-container .vcc::before, #cmos-container .gnd::before {
    width: 100%;
    height: 100%;
    content: "";
    display: block;
    background-color: #fff;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain; }
  #cmos-container .vcc::before {
    mask-image: url("img/cmos/vcc.svg");
    -webkit-mask-image: url("img/cmos/vcc.svg"); }
  #cmos-container .gnd::before {
    mask-image: url("img/cmos/gnd.svg");
    -webkit-mask-image: url("img/cmos/gnd.svg"); }

.sat {
  padding: 10px 16px;
  background-color: #255540;
  color: #fff;
  float: left;
  align-self: flex-start;
  border-radius: 20px; }

.sat.notin {
  background-color: #59303A; }

#horn-sat-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }
  #horn-sat-container .info-box, #horn-sat-container .group, #horn-sat-container #qmc-results {
    margin-bottom: 32px;
    margin-right: 32px; }
  #horn-sat-container #horn-sat {
    align-self: flex-start;
    display: flex;
    flex-direction: column; }
    #horn-sat-container #horn-sat table {
      border-spacing: 4px;
      margin: -4px;
      margin-bottom: 32px; }
      #horn-sat-container #horn-sat table td {
        padding: 4px 10px; }
      #horn-sat-container #horn-sat table td:not(:last-child)::after {
        content: "0"; }
      #horn-sat-container #horn-sat table td.marked::after {
        content: "1"; }
      #horn-sat-container #horn-sat table td.marked {
        background-color: #b8cdf5;
        color: #000; }
      #horn-sat-container #horn-sat table td:last-child {
        padding-left: 20px; }
        #horn-sat-container #horn-sat table td:last-child .expr .marked {
          background-color: #b8cdf5;
          color: #000; }

#dp-sat-container {
  display: flex;
  flex-direction: column; }
  #dp-sat-container > .group {
    margin-bottom: 46px; }
  #dp-sat-container .dp-sat {
    display: flex;
    flex-direction: column; }
    #dp-sat-container .dp-sat .clause {
      display: inline-flex;
      flex-direction: row;
      align-items: center; }
    #dp-sat-container .dp-sat .clause-set .clause-with-name {
      display: inline-flex;
      flex-direction: column;
      align-items: center; }
      #dp-sat-container .dp-sat .clause-set .clause-with-name > span {
        height: 24px;
        margin-bottom: -24px;
        color: #a8afc4;
        display: inline-flex;
        align-items: flex-end; }
    #dp-sat-container .dp-sat .clause-set.with-names {
      margin-bottom: 24px; }
    #dp-sat-container .dp-sat > .group {
      margin-top: 32px; }
      #dp-sat-container .dp-sat > .group > .content {
        overflow-x: auto; }
    #dp-sat-container .dp-sat .resolutions {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-bottom: 32px; }
      #dp-sat-container .dp-sat .resolutions > .resolution {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        margin: 10px; }
        #dp-sat-container .dp-sat .resolutions > .resolution > :first-child {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          border-bottom: 1px solid #fff;
          padding: 4px; }
          #dp-sat-container .dp-sat .resolutions > .resolution > :first-child > :last-child {
            margin-left: 16px; }
        #dp-sat-container .dp-sat .resolutions > .resolution > :last-child {
          align-self: center;
          padding: 4px; }
        #dp-sat-container .dp-sat .resolutions > .resolution > .result-with-naming {
          color: #a8afc4; }
          #dp-sat-container .dp-sat .resolutions > .resolution > .result-with-naming > :first-child {
            color: #fff; }
          #dp-sat-container .dp-sat .resolutions > .resolution > .result-with-naming > span {
            margin: 0 4px; }
    #dp-sat-container .dp-sat .sat {
      margin-top: 32px; }

#gates-cost {
  align-items: flex-start; }
  #gates-cost > .info-box, #gates-cost > .group, #gates-cost > #qmc-results {
    margin-bottom: 32px; }

#input-expression {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start; }
  @media (min-width: 760px) {
    #input-expression {
      max-width: 820px; } }
  #input-expression > form {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border-radius: 20px;
    background-color: #ffec9a;
    border: 2px #ffec9a solid;
    overflow: hidden; }
    #input-expression > form > input[type="text"] {
      flex: 1;
      border-radius: 0; }
      #input-expression > form > input[type="text"].mark-error::selection {
        background-color: #C55560;
        color: #59303A; }
    #input-expression > form > input[type="submit"] {
      border-radius: 0;
      padding-left: 12px; }
  #input-expression > .error-box {
    align-self: flex-start;
    margin-top: 12px; }
  #input-expression > .info-box, #input-expression > .group, #input-expression > #qmc-results {
    margin-top: 36px; }
    #input-expression > .info-box > .content, #input-expression > .group > .content, #input-expression > #qmc-results > .content {
      display: flex;
      flex-direction: column;
      align-items: stretch; }
      #input-expression > .info-box > .content > table tr > *, #input-expression > .group > .content > table tr > *, #input-expression > #qmc-results > .content > table tr > * {
        padding: 4px; }
      #input-expression > .info-box > .content > table tr:not(:last-child) > *, #input-expression > .group > .content > table tr:not(:last-child) > *, #input-expression > #qmc-results > .content > table tr:not(:last-child) > * {
        border-bottom: 1px #a8afc4 solid; }
      #input-expression > .info-box > .content > table th > div, #input-expression > .group > .content > table th > div, #input-expression > #qmc-results > .content > table th > div {
        float: left;
        margin-right: 10px; }

#extra-keyboard {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  margin-top: 16px; }
  #extra-keyboard > button:not(:first-child), #extra-keyboard > .button:not(:first-child), #extra-keyboard > input[type="submit"]:not(:first-child) {
    margin-left: 2px; }
  #extra-keyboard > button:not(:first-child), #extra-keyboard > .button:not(:first-child), #extra-keyboard > input[type="submit"]:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0; }
  #extra-keyboard > button:not(:last-child), #extra-keyboard > .button:not(:last-child), #extra-keyboard > input[type="submit"]:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0; }

#input-truthtable > table .result-select {
  display: flex;
  align-items: stretch;
  height: 100%; }
  #input-truthtable > table .result-select > div {
    position: relative;
    width: 30px;
    height: 30px;
    margin: 4px;
    margin-left: 0; }
    #input-truthtable > table .result-select > div:last-child {
      margin-right: 0; }
    #input-truthtable > table .result-select > div > * {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: 0; }
    #input-truthtable > table .result-select > div > input {
      appearance: none;
      -webkit-appearance: none;
      outline: none;
      z-index: 1;
      cursor: pointer; }
    #input-truthtable > table .result-select > div > div {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #2D344F;
      color: #a8afc4;
      font-size: 14px;
      font-weight: normal; }
    #input-truthtable > table .result-select > div > input:hover + div {
      color: #fff; }
    #input-truthtable > table .result-select > div > input:checked + div {
      background-color: #b8cdf5;
      color: #000;
      font-weight: bold; }

#input-truthtable {
  display: flex;
  flex-direction: row;
  align-items: flex-start; }
  #input-truthtable > table td > .add {
    border-bottom-right-radius: 0; }
    #input-truthtable > table td > .add.add.disabled::before {
      display: none !important; }
  #input-truthtable > table td:last-child {
    border-left: 12px transparent solid !important; }
  #input-truthtable > table tr:not(:first-child) > td:last-child {
    padding: 0;
    border-bottom: none !important; }
  #input-truthtable > table .result-select {
    flex-direction: row; }

#input-minmaxterm {
  width: calc(100vw - 60px);
  display: flex;
  flex-direction: row;
  align-items: flex-start; }
  @media (min-width: 760px) {
    #input-minmaxterm {
      max-width: 690px; } }
  #input-minmaxterm > .inputs {
    flex: 1;
    align-self: stretch;
    display: grid;
    grid-template-columns: auto 1fr; }
    #input-minmaxterm > .inputs > .mterms {
      justify-self: end; }
    #input-minmaxterm > .inputs > .dontcare, #input-minmaxterm > .inputs > .mterms > div {
      text-transform: uppercase; }
    #input-minmaxterm > .inputs .mterms > :not(.selected) {
      background-color: #2D344F;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      margin-top: 6px;
      margin-bottom: 22px;
      cursor: pointer; }
    #input-minmaxterm > .inputs > .dontcare, #input-minmaxterm > .inputs > .mterms > .selected {
      border-top-right-radius: 0  !important;
      border-bottom-right-radius: 0 !important;
      background-color: #b8cdf5 !important;
      color: #000 !important;
      font-weight: bold; }
    #input-minmaxterm > .inputs .mterms > .selected {
      border-bottom-left-radius: 0; }
    #input-minmaxterm > .inputs > input[type="text"] {
      align-self: start;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      margin-left: 3px; }

@media (min-width: 760px) {
  #input-truthtable button.action, #input-truthtable .action.button, #input-truthtable input.action[type="submit"], #input-minmaxterm button.action, #input-minmaxterm .action.button, #input-minmaxterm input.action[type="submit"] {
    margin-left: 40px; } }

@media (max-width: 760px) {
  #input-truthtable, #input-minmaxterm {
    flex-direction: column; }
    #input-truthtable button.action, #input-truthtable .action.button, #input-truthtable input.action[type="submit"], #input-minmaxterm button.action, #input-minmaxterm .action.button, #input-minmaxterm input.action[type="submit"] {
      margin-top: 40px;
      align-self: flex-end; } }

#karnaugh-live {
  display: flex;
  flex-direction: column;
  align-items: center; }
  #karnaugh-live .vars > div {
    position: relative; }
  #karnaugh-live .kmap td {
    cursor: pointer; }
  #karnaugh-live .info-box, #karnaugh-live .group, #karnaugh-live #qmc-results {
    margin-top: 64px; }