.button-group{

  margin:auto;
}

.button-ions {
  background-color: gray; /* Lime green background */
  border: none; /* No border */
    color: white; /* White text */
    padding: 5px; /* Padding around text */
    text-align: center; /* Centered text */
    text-decoration: none; /* No underlining */
    display: inline-block; /* Sit inline with other elements */
    font-size: 12px; /* Text size */
    margin: 4px 2px; /* Margin around button */
    cursor: pointer; /* Cursor changes to hand on hover */
   width: 48%;


}
.button-ions-selected {
  background-color: #32CD32; /* Lime Green, a bit darker */
}



/* General styles */
#equation2, #equation3 {
  color: black;
  margin-top: 2%;
}


.button_cont button {
  display: inline-block;
  min-height: 30px;
  width: 32%;
  background-color: lightgray;
  border: none;
  font-size: 100%;
  cursor: pointer;
}

.equations {
  color: darkgrey;
  text-align: center;
  padding-top: 2%;
  font-size: 100%;
  margin-bottom: 30px;
}

.equations div {
  margin-bottom: 2%;
}

.slider_cont {
  font-size: 100%;
}

/* Image wrapper */
.image-wrapper {
  flex: 1;
  flex-basis: 50%;
  position: relative;
  margin: 20px;
  margin-left: 50px;
}

.image-wrapper img {
  display: block;
  width: 350px;
  height: 450px;
  flex: 1;
  flex-basis: 100%;
  position: relative;
}

/* Voltage x time plot */
#voltagextime {
  margin: 10px;
}

#voltagextime.js-plotly-plot .plotly,
.js-plotly-plot .plotly div {
  left: -20px;
}
#conductancexvoltage{
  padding-top: 50px;
}


/* Cylinder styles */
.ins_cyl,
.out_cyl {
  position: absolute;
  background-color: #3f48cc;
  opacity: 1;
  width: calc(24% - 2px);
  height: 25%;
  transition: height 0.2s ease-in-out;
}

.ins_cyl {
  left: calc(19.8% + 1px);
  bottom: 4%;
  transform: translate(-50%, 0);
}

.out_cyl {
  right: calc(-3.8% + 1px);
  bottom: 4%;
  transform: translate(-50%, 0);
}

/* GBlock styles */
#gblock,
#gblock2 {
  position: absolute;
  left: calc(45% + 1px);
  width: 10%;
  height: 5%;
  transition: height 0.2s ease-in-out;
}

#gblock {
  bottom: 23.8%;
}

#gblock2 {
  bottom: 14.7%;

}

#gblock01,
#gblock02,
#gblock201,
#gblock202 {
  position: absolute;
  background-color: red;
  width: 100%;
  height: 25%;
  transition: height 0.2s ease-in-out;
}

#gblock01,
#gblock201 {
  top: 0;
}
#gblock02,#gblock01 {
    background-color: red;
}

#gblock02,
#gblock202 {
  bottom: 0;
}

/* Button styles */
#reset,
.button_cont button {
  background-color: black;
  color: white;
}

.playstop #play button.selected {
  background-color: gray;
  color: dimgray;
}

.playstop #play {
  background-color: green;
  font-size: 100%;
}

.button_cont {
  width: 100%;
  margin-top: 4%;
}

.playstop button {
  margin-top: 2%;
  display: inline-block;
  min-height: 30px;
  width: 100%;
  border: none;
  color: white;
  cursor: pointer;
}

/* Slider styles */
.slider1,
.slider2,
.slider3,
.slider4,
.slider5,
.slider6 {
  width: 100%;
}

/* slider */
/* Green sliders: slider3 and slider5 */
.slider5::-webkit-slider-runnable-track {
  background: linear-gradient(to right, limegreen 0%, limegreen var(--progress), transparent var(--progress), transparent 100%);
  border-radius: 5px;
  height: 10px;
}


.slider5::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: red;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-top: -3.5px; /* (16 - 5) / 2 */
}


/* Red sliders: slider4 and slider6 */
.slider3::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #FF0000 0%, #FF0000 var(--progress), transparent var(--progress), transparent 100%);
  height: 10px;
  border-radius: 5px;
}
/* Red sliders: slider4 and slider6 */
.slider3::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: green;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-top: -3.5px; /* (16 - 5) / 2 */
}








/* Circle container */
#circle_container {
  position: absolute;
  width: 25%;
  height: 20%;
  bottom: 18%;
  left: 37%;
}

/* Half-circle styles */
#half-circle {
  width: 98%;
  background-color: white;
  height: 40%;
  border: 2px solid black;
  border-radius: 150px 150px 0 0;
  position: relative;
}

/* Green slider styles */
#gsliders {
  width: 100%;
}

/* Lines styles */
#greenline,
#redline,
#blackline {
  position: relative;
  height: 3%;
}

#greenline {
  width: 50%;
  background-color: #3f48cc;
  left: 50%;
  bottom: 3%;
  transform-origin: left center;
}

#redline {
  width: 50%;
  background-color: red;
  transform-origin: right center;
}

#blackline {
  width: 50%;
  height: 1%;
  background-color: black;
  bottom: 0;
  left: 0;
  transform-origin: right center;
}

/* Container sim styles */
div.container_sim {
  height: auto;
  width: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.column-2 {
  flex: 2;
  min-width: 450px;
  margin: 1%;
  padding: 2%;
  flex-basis: 100%;
}

div.container_sim {
  flex-direction: row;
}