/* Give body a size for fitting top level content easily */

html, body {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  height: 100%;
  margin: 0;
}

/* Site banner */

#site-banner {
  background-color: rgb(111, 175, 177);
  font-size: 0;
  height: 75px;
}

.site-banner-component {
  box-sizing: border-box;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

.site-banner-component > div,
.site-banner-component > p {
  margin: 0;
  display: inline-block;
  line-height: 1.5;
  vertical-align: middle;
}

#site-title {
  line-height: 75px;
  width: 30%;
  text-align: left;
  font-size: 25px;
  padding-left: 30px;
}

#site-name {
  display: inline-block;
  margin: 0 5px 0 0;
}

#ui-version,
#api-version {
  display: inline-block;
  font-size: 12px;
  margin: 0 0 0 5px;
  padding: 0 10px;
  background: rgb(197, 170, 221);
  color: rgb(255, 255, 255);
  border-radius: 10px;
  vertical-align: super;
}

#site-banner-button-div {
  font-size: 12px;
  width: 40%;
  text-align: center;
}

#site-details {
  width: 30%;
  padding-right: 30px;
}

#site-about-us-button-table {
  height: 100%;
  margin-left: auto;
  max-width: 70px;
}

#site-about-us-button {
  font-size: 12px;
}

#site-banner-button-table {
  height: 100%;
  margin: auto;
  max-width: 650px;
}

/* Site top pages */

#site-body {
  height: calc(100% - 75px);
  overflow: auto;
}

#site-content-screens,
#site-content-stocks,
#site-content-chemicals {
  margin: 0 20px 20px 20px;
  width: calc(100% - 40px);
  height: calc(100% - 20px);
  overflow: auto;
}

#site-content-recipes {
  margin: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  overflow: auto;
}

/* Buttons */

button {
  cursor: pointer;
  margin: 3px;
  font-size: 17px;
}

.button-table {
  table-layout: fixed;
  width: 100%;
}

.table-cell-button {
  width: calc(100% - 6px);
  overflow: hidden;
}

.stacked-button {
  width: calc(100% - 6px);
}

.delete-button,
.cancel-button {
  color: rgb(206, 21, 21);
}

.save-button,
.add-button {
  color: rgb(45, 194, 20);
}

/* Subpage navigation */

.subpage-banner {
  height: 40px;
}

.subpage-buttons-table {
  height: 100%;
  margin: auto;
}

.button-table-narrow {
  max-width: 400px;
}

.button-table-wide {
  max-width: 600px;
}

/* Tabulator tables and buttons */

.add-reload-banner,
.add-banner {
  height: 40px;
}

.add-reload-header-buttons-table,
.add-header-buttons-table {
  width: 100%;
  height: 100%;
  margin-right: auto;
  max-width: 350px;
}

.holder-for-tabulator,
.subpage-div {
  height: calc(100% - 40px);
}

.object-for-tabulator {
  box-sizing: border-box;
}

.tabulator-menu {
  text-align: left;
}

.holder-for-subtable {
  box-sizing: border-box;
  padding: 15px;
  margin: auto;
  background: rgb(221, 221, 221);
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
}

.subtable {
  margin-right: auto;
}

.alias-subtable,
.phpoint-subtable {
  width: 600px;
}

/* Popup windows */

.popup-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 30;
}

.popup {
  position: relative;
  width: fit-content;
  padding: 0 10px;
  min-width: 300px;
  margin: 0 auto;
  top: 20%;
  z-index: 40;
  background-color: rgb(197, 170, 221);
  text-align: center;
  border: 1px solid #999;
  box-shadow: 0px 0px 10px 1px black;
}

#login-button-table,
#confirmation-button-table {
  width: 100%;
  max-width: 300px;
  margin: auto;
}

#information-button-table,
#about-us-button-table {
  width: 100%;
  max-width: 150px;
  margin: auto;
}

#login-input-table {
  text-align: left;
  width: 80%;
  margin: auto;
}

.popup-message {
  color: rgb(0, 0, 0);
  white-space: pre-wrap;
}

/* Chemical list popup */

#chemical-details-button-table {
  width: 100%;
  max-width: 300px;
  margin: auto;
}

/* Screens specific */

#screens-and-wells-holder {
  height: 100%;
  width: 100%;
}

#screens-half-div,
#screen-wells-view-div {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
}

#screens-half-div {
  width: 100%;
  height: 100%;
}

#screen-wells-view-div {
  width: calc(50% - 20px);
  margin-left: 20px;
  height: 100%;
}

#screen-wells-view-header {
  height: 130px;
}

#holder-for-screen-view-tabulator {
  height: calc(100% - 130px);
}

#screen-wells-view-title {
  box-sizing: border-box;
  height: 70px;
  margin: 0;
  padding: 20px 0;
}

#screen-wells-view-button-table {
  width: 100%;
  height: 60px;
  margin: auto;
  max-width: 600px;
}

#screen-wells-view-button-table > tbody > tr > td > button {
  height: calc(100% - 8px);
}

.screen-well-header-button-table {
  max-width: 200px;
}

.well-matching-query {
  color: rgb(45, 194, 20);
}

.well-not-matching-query {
  color: rgb(206, 21, 21);
}