.box {
  box-sizing:content-box;
}

.boxes{
  max-width: 1177px;
}

.box.plotSedimentation {
    max-width: 703px;
}

.summary .titleConfig{
  color: #FFFFFF;
}

.summary hr{
  border-top: 3px solid #FFFFFF;
  margin-bottom: 25px;
}

.divDetalles{
  padding: 0 3rem;
}

/* - - - - Resumen - - - - */

.box.summary {
  background-color: #1E1E1E;
  color: white;
  max-width: inherit;
  min-width: 400px;

  padding: 40px 4rem!important;
}

.parent {
  display: grid;
  grid-template-columns: 1fr 0.5fr 0.5fr 1fr 1fr 1fr;
  /* grid-template-rows: 0.75fr 0.75fr 1fr 1fr 1.5fr; */
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  }

.parent h3{
  font-size: 16px;
  font-weight: 600;
  /* margin-bottom: 8px; */
  margin: 0 0 8px 8px;
}
.parent h4{
  font-size: 19px;
  font-weight: 300;
}

.experimentName h3,
.experimentOperator h4 {
  font-size: 25px!important;
  margin: 0;
  contain: content;
  text-overflow: ellipsis;
}
.experimentName h3{
  margin-left: 8px;
}

.sensorsSensibility h3{
  font-size: 18px;
  margin-bottom: 6px;
}

.experimentName { 
  margin: 20px 0 30px 0;
  grid-area: 1 / 1 / 1 / 3; 
}
.experimentOperator {
  margin: 20px 0 30px 0;
  grid-area: 1 / 3 / 1 / 5; 
}
.sedimentationInitialVelocity {
  margin: 0 0 30px 0; 
  grid-area: 2 / 1 / 2 / 5; 
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.sedimentationInitialVelocity h3,
.sedimentationInitialVelocity h4 {
  font-size: 18px!important;
  margin: 0;
}
.sedimentationInitialVelocity h3{
  margin-left: 8px;
}

.initialHeightValue {
  margin: 0 0 20px 0;
  grid-area: 3 / 1 / 3 / 2;
  display: flex;
  flex-direction: column;
}
.duration {
  margin: 0 0 20px 0;
  grid-area: 3 / 2 / 3 / 4; 
  display: flex;
  flex-direction: column;
  }
.concentration {
  margin: 0 0 20px 0;
  grid-area: 3 / 4 / 3 / 5; 
  display: flex;
  flex-direction: column;
  }

.density {
  margin: 0 0 20px 0;
  grid-area: 4 / 1 / 4 / 2; 
  display: flex;
  flex-direction: column;
  }
.dose {
  margin: 0 0 20px 0;
  grid-area: 4 / 2 / 4 / 4; 
  display: flex;
  flex-direction: column;
  }
.flocculant {
  margin: 0 0 20px 0;
  grid-area: 4 / 4 / 4 / 5; 
  display: flex;
  flex-direction: column;
}

.material {
  margin: 0 0 20px 0;
  grid-area: 5 / 1 / 5 / 2; 
  display: flex;
  flex-direction: column;
}
.ph {
  margin: 0 0 20px 0;
  grid-area: 5 / 2 / 5 / 4; 
  display: flex;
  flex-direction: column;
  } 

.sensorsSensibility {
  grid-area: 6 / 1 / 6 / 5; 
  display: flex;
  flex-direction: column;
  }
.threshold {
  margin: 0 0 30px 0;
  grid-area: 7 / 1 / 7 / 2; 
  display: flex;
  flex-direction: column;
  }
.initialTime {
  margin: 0 0 30px 0;
  grid-area: 7 / 2 / 7 / 4; 
  display: flex;
  flex-direction: column;
  }
.initialThreshold {
  margin: 0 0 30px 0;
  grid-area: 7 / 4 / 7 / 5; 
  display: flex;
  flex-direction: column;
  }

.commentsExperiment {
  margin: 0 0 30px 0;
  grid-area: 3 / 5 / 8 / 7; 
  display: flex;
  flex-direction: column;
  }
.saveChanges{
  margin: 0 0 30px 0;
  grid-area: 7 / 6 / 7 / 7; 
  display: flex;
  flex-direction: column;
}

  h4 {
    margin: 0;
  }

  h3 {
    margin: 0;
  }

.commentsExperiment h4 {
  /* word-wrap: break-word; */
  /* overflow-x: scroll; */
  /* overflow: hidden; */
  contain: content;
  text-overflow: ellipsis;
}

.commentsExperiment textarea {
  resize: none;;
}

  #stopExperiment{
    display: none;
  }

  #startMedition{
    display: none;
  }

  .modifyThreshold{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: auto;
  }

  @media only screen and (max-width: 1360px) {
    .boxes {
      width: min-content!important;
    }

    .experimentName h3,
    .experimentName h4 {
      font-size: 21px!important;
      margin: 0!important;
    }

    .parent {
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr;
      grid-template-rows: 0.65fr 0.75fr 0.75fr 0.5fr;
      grid-column-gap: 0px;
      grid-row-gap: 0px;
      }
    .experimentName { 
      grid-area: 1 / 1 / 2 / 4;
      display: flex;
      flex-direction: row;
      gap: 10px;
    }
    .initialHeightValue {
      grid-area: 2 / 1 / 3 / 2;
      display: flex;
      flex-direction: column;
    
    }
    .duration {
      grid-area: 2 / 2 / 3 / 3; 
      display: flex;
      flex-direction: column;
      }
    .density {
      grid-area: 2 / 3 / 3 / 4; 
      display: flex;
      flex-direction: column;
      }
    .dose {
      grid-area: 3 / 1 / 4 / 2;
      display: flex;
      flex-direction: column;
      }
    .flocculant {
      grid-area: 3 / 2 / 4 / 3;
      display: flex;
      flex-direction: column;
      }
    .material {
      grid-area: 3 / 3 / 4 / 4;
      display: flex;
      flex-direction: column;
      }
    .sensorsSensibility {
      grid-area: 4 / 1 / 5 / 2; 
      display: flex;
      flex-direction: column;
      }
    .commentsExperiment {
      grid-area: 4 / 2 / 5 / 4; 
      display: flex;
      flex-direction: column;
      }


  }
/* - - - - - - - - - - - - */

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}

.hidden {
  display: none;
}

/* - - - Time - - -*/
.rightContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.right p{
  font-size:20px ;
}
.rightContent h1 {
  font-size: 22px;
  font-weight: 100!important;
  margin: 2px 0 5px 0px;
}
/* - - - - - - - - */
.mainContent {
  height: min-content;
  /* width: min-content; */
  overflow-y: hidden;
}

@media all and (max-width: 1140px) and (min-width: 1138px) {

  .content {
    overflow-x: hidden;
  }

  .boxes {
    flex-wrap: wrap !important;
    min-width: 904px;
    gap: 25px;
  }
  .box.plotSedimentation {
    width: 300px;
    max-width: min-content;
  }

  #plotSedimentation {
    max-width: min-content;
  }

  .modifyHeightContent { 
    max-width: 300px;
  }

  .box.sensor {
    flex-basis: 200px;
    max-width: 250px;
  }

  .modifyHeight {
    width: 110px;
  }

  #titleHeight {
    font-size: 11px;
    font-weight: 100;
  }

  #tubeHeight {
    font-size: 12px;
  }


}

.valSensor{
  text-align: center;
  margin-bottom: 0.5rem;
}

.colTitle{
  justify-self: start;
}

.divSensSection{
  height: 100%;
  justify-content: start;
}

.divSensors{
  margin-top: 2rem;
  
}

/*  */
/* Formulario */
/*  */
.nExp {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 4px;
}

.inputIconHalf{
  width: 45%;
  color: #FFFFFF;
  background-color: transparent;
  border-radius: 25px 0 0 25px;
  border: 2px solid #3A3846;
  border-right: none;
  outline: none;

  height: 100%;
  vertical-align: top;

  padding: 0.5rem 0.5rem 0.5rem 2rem !important;
  /* Otros estilos para el input */
}

.inputNoIconHalf2{
  margin-left: -6px;
  width: 45%;
  color: #FFFFFF;
  background-color: transparent;
  border-radius: 0 25px 25px 0;
  border: 2px solid #3A3846;
  border-left: none;
  outline: none;

  height: 100%;
  text-align: center;
  vertical-align: top;
  font-size: 13px !important;
  appearance: none;
  -webkit-appearance: none;

  padding: 0.5rem 2rem 0.5rem 0 !important;
  /* Otros estilos para el input */
}

.inputIcon {
  width: 90%;
  color: #FFFFFF;
  background-color: transparent;
  border-radius: 25px;
  border: 2px solid #3A3846;
  outline: none;

  background-image: url('/static/img/historic/edit_square.svg');
  background-repeat: no-repeat;
  /* background-position: right center; */
  background-position: 90% 40%;
  background-size: 1.2rem;
  padding: 0.5rem 2.5rem 0.5rem 1rem !important;
  /* Otros estilos para el input */
}

.inputNoIcon {
  width: 90%;
  color: #FFFFFF;
  background-color: transparent;
  border-radius: 25px;
  border: 2px solid #3A3846;
  outline: none;

  background-position: 90% 40%;
  background-size: 1.2rem;
  padding: 0.5rem 2rem 0.5rem 2rem !important;
}

.textareaNoIcon {
  width: 90%;
  color: #FFFFFF;
  background-color: transparent;
  border-radius: 25px;
  border: 2px solid #3A3846;
  outline: none;

  width: 90%;
  margin-left: 10% !important;
  padding: 1rem 2rem !important;
}

.commentsExperiment h3{
  width: 90%;
  margin-left: calc(10% + 8px) !important;
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}

.timer-container {
  background-color: #3F3D56;
  border-radius: 20px;
  color: white;
  display: flex;
  justify-content: space-between;
  padding: 20px;
  width: 300px;
}
.timer-label {
  margin-left: 10px;
  padding-top: 3%;
}
.timer-display {
  margin-right: 10px;
  font-family: 'Digital', sans-serif;
  font-size: 2em;
}