/* COLORS */

:root {
  --background-color: #EEE;

  --table-color: white;

  --button-active-color: #3d3d3d;
  --button-active-text-color: white;

  --button-hover-color: black;
  --button-hover-text-color: white;

  --insert-color: #7D95BF;
  --insert-text-color: black;

  --delete-color: #D17D96;
  --delete-text-color: black;

  --sequent-color: #75805D;
  --sequent-text-color: white;
}





/* TOP LEVEL */

html {
  height: 100%;
  overflow-y: hidden;
}

body {
  background: var(--background-color);
  cursor: default;
  overflow-wrap: break-word;
  margin-top: 0px;
  height: 100%;
  overflow-x: visible;
  width: 1086.5px;
  margin-left: auto;
  margin-right: auto;
}

#table-wrapper {
  width: 726.5px;
}

#buttons {
  width: 342px;
  padding: 9px;
}

#help {
  width: 340px;
  padding: 10px;
}

@media only screen and (max-width: 1087px) {
  body {
    display: flex;
    flex-direction: column;
    width: 720px;
  }

  h1 {
    display: none;
  }

  #table-wrapper {
    height: 100%;
    overflow-y: auto;
    margin-top: 10px;
  }

  #buttons-and-help {
    width: 720px;
  }

  #help,
  #buttons {
    float: left;
  }

  button {
    padding: 3px;
    height: 29px;
  }

  .end-of-group {
    margin-bottom: 8px;
  }
}

@media only screen and (min-width: 1087px) {

  body {
    width: 1086.5px;
  }

  h1 {
    margin-top: 40px;
    margin-bottom: 40px;
    text-align: center;
    font-family: 'Playfair Display SC', serif;
    font-weight: 500;
    font-size: 50px;
  }

  #table-wrapper {
    height: calc(100% - 147px);
    overflow-y: auto;
  }

  #buttons-and-help {
    width: 360px;
    float: right;
  }

  #buttons {
    padding-top: 0px !important;
  }

  button {
    padding: 8px;
    height: 39px;
  }

  .end-of-group {
    margin-bottom: 12px;
  }
}






/* TABLE */

.table {
  display: table;
  padding-left: 10px;
}

.tableRow {
  display: table-row;
  background: var(--table-color);
}

.tableCell {
  display: table-cell;
  border: 1px solid var(--background-color);
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  padding: 10px;
  font-size: 18px;
}

.tableRow .tableCell:nth-child(1) {
  min-width: 150px;
  max-width: 150px;
  text-align: right;
}

.tableRow .tableCell:nth-child(2) {
  min-width: 35px;
  max-width: 35px;
  text-align: center;
}

.tableRow .tableCell:nth-child(3) {
  min-width: 327px;
  max-width: 327px;
  text-align: left;
}

.tableRow .tableCell:nth-child(4) {
  min-width: 100px;
  max-width: 100px;
  text-align: left;
}

.tableRowSeperator {
  display: table-row;
  height: 50px;
}

.tableRowRulename {
  display: table-row;
}

.tableCellRulename {
  display: table-cell;
  font-family: 'Lato', sans-serif;
  text-align: left;
  font-weight: bold;
  padding: 10px;
  padding-left: 1px;
  font-size: 18px;
}

.tableRowVdots {
  display: table-row;
}

.tableCellVdots {
  display: table-cell;
  font-family: 'Lato', sans-serif;
  padding-top: 3px;
}

.tableRowVdots .tableCellVdots:nth-child(1) {
  min-width: 150px;
}

.tableRowVdots .tableCellVdots:nth-child(2) {
  min-width: 35px;
  text-align: center;
}

.active {
  background: var(--insert-color);
  color: var(--insert-text-color);
}

.selectable {
  background: var(--button-active-color);
  color: var(--button-active-text-color);
}

.selectable:hover {
  background: var(--insert-color);
  color: var(--insert-text-color);
}




/* SEQUENT */

#sequent {
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  padding: 10px;
  font-size: 18px;
  margin-top: 10px;
  border: 1px solid var(--background-color);
}

#sequent-wrapper {
  margin-left: 10px;
  width: 700px;
  background: var(--sequent-color);
  color: var(--sequent-text-color);
}




/* BUTTONS */

button {
  font-size: 18px;
  border: 1px solid var(--button-active-color);
  background-color: var(--button-active-color);
  color: var(--button-active-text-color);
  width: 64.4px;
  text-align: center;
  border-radius: 7px;
  margin: 2px;
}

button:hover {
  border: 1px solid var(--button-active-color);
  background-color: var(--button-hover-color);
  color: var(--button-hover-text-color);
}

button:disabled,
button[disabled] {
  border: 1px solid var(--button-active-color);
  background-color: var(--button-active-color);
  color: var(--button-active-text-color);
  opacity: 40%;
}

#add>button {
  width: 167px;
}

#delete>button {
  width: 110px;
}

#finish>button {
  width: 167px;
}





/* HELP */

p {
  font-family: Sans-Serif;
  font-size: 18px;
  margin-block-start: .5em;
  margin-block-end: .5em;
}

.deemphasise {
  font-size: 12px;
}






/* SETTINGS MENU */

fieldset {
  width: 230.438px;
  margin-bottom: 10px;
}

#propositionalLetters {
  width: 220px;
}

#author-info {
  font-size: 16px;
  margin-top: 20px;
  margin-left: 5px;
  margin-right: 4px;
}