#laboratory-main-screen {
  background: white;
  color: var(--rulv-black);
  padding: 50px;
  border: 1px solid var(--rulv-gray);
  border-radius: 5px;
  box-shadow: var(--rulv-gray) 0 0 30px 1px;
}

.laboratory-main-screen__box {
  max-width: 100%;
  padding: 0 5%;
}

.form-record {
  margin: 5px;
}

.select-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}

.form-2-columns {
  grid-column-start: 1;
  grid-column-end: 3;
}

@media only screen and (max-width: 601px) {

  #laboratory-main-screen {
    font-size: 12px;
  }

  .laboratory-main-screen__box {
    padding: 0;
  }
}

/*Mobile L*/
@media (min-width:376px) and (max-width:425px){
  .calculation-info {
    width: initial !important;
  }
  #lab-options {
    flex-direction: column;
  }
  #lab-disk-selector,
  #change-state-button {
    margin: .5rem 0;
  }
  #laboratory-main-screen {
    padding: 10px;
  }
  .total-volume-indicator {
    padding-left: 5px;
    font-size: 10px;
    margin-left:5px;
  }

  .water-volume-indicator,
  .herbicide-volume-indicator{
    font-size: 10px;
    padding-right: 10px;
    margin-right: 10px;
  }

  .input-legend {
  }

  .select-container input {
    font-size: 16px !important;
  }

  .select-container select {
    font-size: 16px !important;
  }

  .laboratory-main-screen__box {
    padding: 0;
  }
}

/*Mobile M*/
@media (min-width: 321px) and (max-width: 375px) {
  .calculation-info {
    width: initial !important;
  }
  #lab-options {
    flex-direction: column;
  }
  #lab-disk-selector,
  #change-state-button {
    margin: .5rem 0;
  }
  #laboratory-main-screen {
    padding: 10px;
  }
  .total-volume-indicator {
    padding-left: 5px;
    font-size: 10px;
    margin-left:5px;
  }

  .water-volume-indicator,
  .herbicide-volume-indicator{
    font-size: 10px;
    padding-right: 10px;
    margin-right: 10px;
  }

  .input-legend{
    font-size: 11px;
  }

  .select-container input {
    font-size: 16px !important;
  }


  .select-container select {
    font-size: 16px !important;
  }
}

/*Mobile S*/
@media (max-width: 320px) {
  .calculation-info {
    width: initial !important;
  }
  #lab-options {
    flex-direction: column;
  }
  #lab-disk-selector,
  #change-state-button {
    margin: .5rem 0;
  }
  #laboratory-main-screen {
    padding: 10px;
  }
  .total-volume-indicator {
    padding-left: 5px;
    font-size: 10px;
    margin-left:5px;
  }

  .water-volume-indicator,
  .herbicide-volume-indicator{
    font-size: 10px;
    padding-right: 10px;
    margin-right: 10px;
  }

  .input-legend {
    font-size: 10px;
  }

  .select-container input {
    font-size: 16px !important;
  }

  .select-container select {
    font-size: 16px !important;
  }

  .laboratory-main-screen__box {
    padding: 0;
  }
}

/*Tablet*/
@media (min-width: 426px) and (max-width: 768px) {
  #lab-options {
    flex-direction: column;
  }
  #lab-disk-selector,
  #change-state-button {
    margin: .5rem 0;
  }
  #laboratory-main-screen {
    padding: 10px;
  }
  .total-volume-indicator {
    padding-left: 5px;
    font-size: 10px;
    margin-left:5px;
  }

  .water-volume-indicator,
  .herbicide-volume-indicator{
    font-size: 10px;
    padding-right: 10px;
    margin-right: 10px;
  }

  .input-legend {
    font-size: 11px;
  }

  .laboratory-main-screen__box {
    padding: 0;
  }
}
/*Laptop*/
@media (min-width: 769px) and (max-width: 1024px) {

  .input-legend {
    width: 45% !important;
    font-size: 11px;
  }
  .select-container input {
    font-size: 16px !important;
  }
  .select-container select {
    font-size: 16px !important;
  }

  .laboratory-main-screen__box {
    padding: 0;
  }
}

@media (min-width: 1025px) and (max-width: 1440px) {
  .select-container input {
  }

  .select-container select {
  }

  .tank-container {
    width: 200px !important;
  }

  .laboratory-main-screen__box {
    padding: 0;
  }
}

/*No range-slider display for Mobiles and Tablets*/
@media (max-width: 1023px) {

  #step-range-slider {
    display: none;
  }

}

@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  /* Retina-specific stuff here */
  .tank-container {
    width: 200px !important;
  }
}


/*Just not to repeat it so many times*/
@media (min-width: 320px) and (max-width: 1024px) {
  #time,
  #traveled-distance,
  #treated-distance {
    height: 13% !important;
  }

  .tank-container {
    width: 90px !important;
  }
}


.input-legend {
  background: var(--rulv-dark-gray);
  display: inline-block;
  color: white;
  padding: 5px;
  font-weight: bold;
  width: 66%;
  max-width: 250px;
  vertical-align: top;
}

.slider-handle {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translate(-50%, calc(-50% + 2.5px));
  background: var(--rulv-blue);
  box-shadow: rgba(24, 56, 96, 0.5) 0 0 0 5px;
  cursor: ew-resize;
  transition: box-shadow .2s, width .4s, height .4s;
}

.slider-handle:hover,
.slider-handle:active,
.slider-handle.mobile-touch {
  width: 20px;
  height: 20px;
  box-shadow: none;
  position: relative;
}

.slider-handle:after {
  position: absolute;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  content: "";
}

.ingredient-indicator {
  position: absolute;
  bottom: 0;
  height:150px;
  width: 100%;
  background: var(--rulv-gray);
  border-radius: 10px;
  box-shadow: var(--rulv-gray) 0 0 7px 1px;
}

.tank-container {
  width: 300px;
  height: 150px;
}

#bar-indicator--top, #bar-indicator--bottom {
  width: 100%;
  transition: height .4s;
}

#bar-indicator--top {
  background: var(--rulv-yellow);
  border-radius: 5px 5px 5px 5px;
}

#bar-indicator--bottom {
  background: var(--rulv-blue);
  border-radius: 10px 10px 0px 0px;
}

#ingredient-indicator--all {
  border-radius: 10px 10px 10px 10px;
  transform: rotate(180deg);
}
.herbicide-volume-indicator,
.water-volume-indicator {
  transition: inherit;
  background: inherit;
}

.total-volume-indicator {
  transition: inherit;
  background: white;
  border-top: 1px solid var(--rulv-gray);
  border-bottom: 1px solid var(--rulv-gray);
}

.total-volume-indicator span:nth-of-type(1),
.total-volume-indicator span:nth-of-type(2) {
  color: var(--rulv-dark-gray);
  font-weight: bold;
}

.herbicide-volume-indicator span:nth-of-type(2),
.herbicide-volume-indicator span:nth-of-type(1) {
  color: var(--rulv-blue);
}

.water-volume-indicator span:nth-of-type(1),
.water-volume-indicator span:nth-of-type(2){
  color: var(--rulv-white);
}


#tank-indicator {
  position: absolute;
  bottom: 0;
  width: 100%;
  transition: min-height .4s;

}

#step-range-slider {
  width: 90%;
  height: 3px;
  margin: 15px 0;
  background: var(--rulv-dark-gray); /*Delete(?)*/
}

#step-range-slider--selected {
  height: 3px;
  background: var(--rulv-blue);
  float: left;
  transition: width .4s;
}

#step-range-slider--overflow {
  width: 0;
  height: 0;
  overflow: visible;
  float: left;
  position: relative;
  z-index: 1;
}

.form-slider {
  display: inline-block;
  width: 40%;
  max-width: 150px;
  padding-left: 30px;
}

.form-slider select {
  border: hidden !important;
  box-shadow: none !important;
  color: var(--rulv-blue);
  width: 70%;
}

.word-indicator--top {
  width: 200px;
  float: left;
  color: white;
}

.word-indicator--bottom {
  float: left;
  color: white;
}

#laboratory-main-screen__container {
  background: #f5f5f5;
  padding-bottom: 20px;
  min-height: 100%;
}

#laboratory-header img {
  margin: 10px;
}

#laboratory-header h1 {
  font-weight: bold;
  font-size: 15px;
  text-align: left;
  line-height:20px;
  font-family: Roboto Condensed;
}

#laboratory-header h3 {
  font-size: 14px;
  font-weight: normal;
  color: rgba(0,0,0,0.75);
  text-align: left;
  line-height: 15px;
  margin-left: 30px;
  font-family: Roboto Condensed;
}

#laboratory-header h2 {
  font-size: 14px;
  font-weight: normal;
  color: rgba(0,0,0,0.75);
  text-align: left;
  line-height: 20px;
  margin-bottom: 20px;
  font-family: Roboto Condensed;
}

#laboratory-header h4 {
  text-align: left;
  font-weight:normal;
  color: rgba(0,0,0,0.75);
  font-size: 14px;
  line-height: 20px;
  margin-top: 20px;
  margin-bottom: 40px;
}

#lines-distance-slider, #track-witdh-slider, #dose-slider, #surface-slider {
  padding-bottom: 40px;
}

/*=================================================
     === LABORATORY'S SWITCH CLASSES ===
  ================================================*/


#change-state-button p {
  color: black !important;
  font-weight: bold;
  text-align: center;
  font-size:16px;
  font-family: Roboto Condensed !important;
  margin: 0 .5rem;
}

#switch-lab {
  position: absolute;
  width: 75px;
  height: 35px;
  text-align: center;
}

#switch-wrapper {
  height: 35px;
  width: 75px;
}

#switch-lab input {
  display:none;
}

#lab-options {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 1rem;
}

#lab-disk-selector {
  height: 100%;
}

#change-state-button {
  display: flex;
  align-items: center;
}

.switch-part {
  box-sizing: border-box;
  float: left;
  margin-left: 5px;
}

#slider-lab {
  box-shadow: rgba(0,0,0,0.8) 0 0 4px;
  text-align: center;
  letter-spacing: normal;
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  background-color: var(--rulv-blue);
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}

#slider-lab:before {
  border-radius: 50%;
  position: absolute;
  content: "";
  height: 28px;
  width: 32px;
  left: 5px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  padding-top: 5px;
  content: "";
}

#switch-lab input:checked + #slider-lab {
  background-color: var(--rulv-yellow);
}

#switch-lab input:focus + #slider-lab {
  box-shadow: 0 0 1px #2196F3;

}

#switch-lab input:checked + #slider-lab:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(32px);
  content: "";
}

.calculation-info {
  width: 50%;
  position relative;
  text-align: center;
  display: block;
  margin: 0 auto;
  border: 2px solid;
  background: var(--rulv-white);
  color: var(--rulv-blue);
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.mix-config-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

#treated-center-distance,
#treated-side-distance,
#time,
#concentration,
#traveled-distance,
#treated-distance {
  background: var(--rulv-blue);
  color: var(--rulv-white);
}

#lab-disk-selector {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  line-height: normal;
  padding: .5rem 1.5rem;
  border: 1px solid #ccc;
  border-radius: 5px 5px 5px 5px;
  font-size: 18px;
  background: url("/assets/small-arrow-black.svg") 96% / 15% no-repeat white;

}

.select-container select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  line-height: normal;
  width: 34%;
  max-width: 100%;
  padding: 3px 5px;
  border: 1px solid #ccc;
  border-radius: 5px 5px 5px 5px;
  font-size: 18px;
  background: url("/assets/small-arrow-black.svg") 96% / 15% no-repeat #eee;
}

.select-container input {
  width: 34%;
  font-size: 20px;
}

.select-container--parameters-s-dom-flex {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
}

.select-container--parameters-s-dom-plus {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
}

.select-container--parameters-double-dome {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
}

/* Removes IE 10 and 11 arrows*/
select::-ms-expand{
  display-none;
}