/* :root basically means the entire document. By default, it uses serif (e.g. times new roman) font, which looks awful */
:root {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

/* Octothorpes (#) refer to an ID of an element, like <div id="simulation-title"></div>*/
/* vw means "viewport width". It is a percentage of the window width, so 100vw means the width of the entire browser. Margin is essentially what it says it is - it adds a buffer between elements. */
#master-wrapper {
  margin-top: 10px;
  display: grid;
}

/* You can use calc() to calculate variables, so height in this context is the browser width minus 100 pixels */
/* Position: absolute means that you can specify the exact placement in pixels of the element, instead of the browser trying to automatically detect where to put it. So it is 0px to the left and 0px from the top of the browser window.  I wouldn't recommend using position:absolute for most things, but in this context it makes the simulation-wrapper element essentially the same exact size as the browser window. */
#simulation-wrapper {
  display: grid;
  grid-template-rows: min-content max-content;
  justify-items: center;
  align-items: center;
  width: 100vw;
  height: min-content;
}

/* Display: grid is my favorite way of placing elements. As you can tell, I use it a lot. See this website for a brief synopsis: https://grid.malven.co . Gap is the space between grid elements. */
.inputs-wrapper {
  display: grid;
  grid-template-columns: max-content max-content max-content;
  justify-items: center;
  align-items: center;
  gap: 15px 5px;
  margin-top: 10px;
}

.input-row {
  display: grid;
  grid-template-columns: max-content 250px 25px max-content; /* 250 px was formerly 150 px, Dr. F asked me to make it much longer*/
  gap: 10px;
  align-items: end;
  justify-items: center;
  margin-top: 10px;
  transform: translateX(-35px);
}

.select-row {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 10px;
  align-items: center;
}

.select-container>form {
  display: grid;
}

#point-type {
  height: min-content;
  grid-column: 1 / 3;
}

#plot-points-options {
  height: min-content;
  grid-column: 1 / 3;
  width: 300px;
  transform: translateX(-30px);
}

select {
  padding: 2px 5px;
}

#graphics-wrapper {
  position: absolute;
  width: 100vw;
  top: 100px;
  height: max-content;
  display: grid;
  justify-content: center;
}

/* Box shadows can often make elements appear as though they're "floating" above the page, and I really like the aesthetic of it, so I use it a lot alongside a 1 pixel black border */
canvas {
  border: 1px solid black;
  box-shadow: 0px 0px 2px 2px grey;
}

label {
  margin-right: 20px;
}

#modal-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* These were all previously 1fr. I changed them to hopefully get the on the same line as the feed,solvent,raffinate button or the slider once we can make them appear/disappear */
  gap: 5px;
  grid-column: 3;
}

.modal-body .modal-equation {
  width: max-content;
  margin-left: 15px;
  padding: 2px;
}

.modal-text+.modal-text {
  margin-top: 10px;
}

.modal-equation.no-padding {
  padding: 0px;
}

/* Match slider label fonts to axes labels */
.input-label, .value-label {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}