.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 20px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

body {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}

p {
  margin-top: 2em;
  margin-bottom: 2em;
  text-indent: 1em;
  justify-content: left;
}

#explanation-div {
  /*top: 0;*/
  margin-left: 15%;
  margin-right: 15%;
}

#ising-canvas-div {
  margin-top: 20px;
}

#system-params-wrapper {
  display: grid;
  grid-template-columns: 0.5fr 1fr 1fr;
  grid-template-rows: 1fr;
  column-gap: 30px;
  justify-items: center;
}

#sys-size {
  grid-column: 1;
  grid-row: 1;
}

#temp-slider {
  grid-column: 2;
  grid-row: 1;
}

#field-slider {
  grid-column: 3;
  grid-row: 1;
}

#graph-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  gap: 20px;
  margin-top: 20px;
}

#mag-chart-div {
  grid-column: 1;
  grid-row: 1;
}

#field-chart-div {
  grid-column: 2;
  grid-row: 1;
}

#kappa-chart-div {
  grid-column: 3;
  grid-row: 1;
}

#button-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  gap: 20px;
  margin-top: 20px;
}

#toggle-button {
  grid-column: 1;
  grid-row: 1;
}

#play-pause-button {
  grid-column: 2;
  grid-row: 1;
}

#reset-button {
  grid-column: 3;
  grid-row: 1;
}

#tune-button {
  grid-column: 4;
  grid-row: 1;
}

#tuner-alg-select {
  grid-row: 3;
}

#tuner-params-wrapper {
  display: grid;
  grid-template-columns: 1fr 0.5fr 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  column-gap: 10px;
  margin-top: 0px;
}

.note-list > li {
  color: grey;
  font-size: 10pt;
}

.monospace {
  font-family: monospace;
}