body{
  background-color: #add8e6;
  width: auto;


}

#explicacion{
    text-align:center;
}



.container-Boton {
    display: flex;
    justify-content: center; /* Esto alinea el contenido horizontalmente en el centro */
    align-items: center; /* Esto alinea el contenido verticalmente en el centro */
    margin-bottom:0.5em;
}

.BTNactualizar{
    border-radius:3em;
    background-color:#e1b4cb;
    font-size: 19px;
  font-weight: bolder;
    
}

.BTNactualizar:Hover{
  color: blue;
  cursor: pointer;
  box-shadow: 0 0 20px red;

}
#BTNvolveracero{
    margin-bottom:1.24em;
}

.BTNmejora{
    border-radius:3em;
    margin-top:0.5em;
    background-color:#90ee90;
    font-size: 19px;
  font-weight: bolder;
    
}

.BTNmejora:Hover{
  color: red;
  cursor: pointer;
  box-shadow: 0 0 20px red;

}


  
#tox{
  color: #330066;
  font-size: 24px;
  font-weight: bolder;
  text-decoration: underline;
}

#tox1{
  color: #564979;
  font-size: 22px;
  font-weight: bolder;
  text-decoration: underline;
}

#tox2{
  color: #564979;
  font-size: 22px;
  font-weight: bolder;
  text-decoration: underline;
}
#exportToExcelButton{
  margin-left: 37.9%;
  background-color: #F1CB4B;
  color: green;
  font-size: 18px;
  font-weight: bolder;
  border-radius: 2em;
  margin-bottom: 4em;
  margin-top: 2em;
}
#exportToExcelButton:Hover{
  color: blue;
  cursor: pointer;
  box-shadow: 0 0 20px red;

}
.Container-Boton{
  background-color:#BFE177;
  border-radius: 57px;
  width: 700px;
  height: auto;
  padding-bottom: 29px;
  margin-left: 24%;
  display: grid;
  place-items: center;
  box-shadow: 0 0 20px #0F80F9;

}
.modificar{
  text-align: center;
}
#es{
  color: #564979;
  font-size: 24px;
  font-weight: bolder;
  text-decoration: underline;
}
#co{
  color: #564979;
  font-size: 24px;
  font-weight: bolder;
  text-decoration: underline;
}
#du{
  color: #564979;
  font-size: 24px;
  font-weight: bolder;
  text-decoration: underline;
}

#es2{
  color: #564979;
  font-size: 24px;
  font-weight: bolder;
  text-decoration: underline;
}
#co2{
  color: #564979;
  font-size: 24px;
  font-weight: bolder;
  text-decoration: underline;
}
#du2{
  color: #564979;
  font-size: 24px;
  font-weight: bolder;
  text-decoration: underline;
}

#corriente{

}



/* #corriente{
  margin-left: 14.5em;

}
#duracion{
  margin-left: 14.5em;
}
#comienzo{
  margin-left: 14.5em;
} */

#ingresa{
  margin-top: 0.5em;
  font-size: 24px;
  margin-left: 1em;
}
#logo{

  width:100%;
  height: auto;
  margin-top: 0.5em;
  cursor: pointer;
}






#ingresa2{
  margin-top:0.5em;
  font-size: 24px;
  margin-left: 1em;
}
.primer{
  border-style: solid;
  margin-top: 1em;
  padding: 1em;
  margin-bottom: 1em;
  width: 90%;
  border-radius: 1em;
  text-align: center;
  background-color: #60db75;
  
}

.toxinas{
  border-style: solid;
  width: 90%;
  padding: 1em;
  padding-top:0em;
  border-radius: 1em;
  text-align: center;
  background-color: #75f0ba;
  margin-top:1em;
}


.segundo{
  border-style: solid;
  width: 90%;
  padding: 1em;
  border-radius: 1em;
  text-align: center;
  background-color: #8BD4AD;
}
#logo{

  width:100%;
  height: auto;
  margin-top: 0.5em;
  cursor: pointer;
}

.primer{
  text-align: center;
}

h3{
  color: #2A068C;
  text-decoration: underline;
  font-size: 22px;
}

p{
  font-weight: bolder !important;
  font-size: 18px;
}
h4{
  font-weight: bolder;
  font-size: 21px;
  color:#2A068C;
}

#botonEstimular{
  margin-top: 10px;
  display: grid;
  place-items: center;
  width: 237px;
  height: 54px;
  border-radius: 5em;
  font-family: Arial, sans-serif;
  font-size: 24px;
  weight:bolder;
  background-color: #390FAD;
  color: white;
  font-weight: bolder;
  margin-top: 50px;
  margin-left: 0em;
}
#botonEstimular:hover {

  color: red;
  cursor: pointer;
  box-shadow: 0 0 20px red;
}

@media (max-width: 1000px){
  #exportToExcelButton{
    font-size: 37px;

  }
  #mensajeProcesando{
      font-size: 99px;


  }
  #mensajeProcesando2{
      font-size: 37px;


  }
  #botonEstimular{
    margin-top: 10px;
    display: grid;
    place-items: center;
    width: 7em;
    height: 2em;
    border-radius: 5em;
    font-family: Arial, sans-serif;
    font-size: 49px;
    weight:bolder;
    background-color: #390FAD;
    color: white;
    font-weight: bolder;
    margin-top: 50px;
    margin-left: 0em;
  }
  #botonEstimular:hover {
    /* Estilos al pasar el cursor sobre el botón */
    color: red;
    cursor: pointer;
    box-shadow: 0 0 20px red;
  }
}



@media (max-width: 1000px){
  .inp{
      font-size: 39px;


  }
  .sigue{
    margin-top: 40px;
    font-size: 59px;
    margin-left: 1em;
  }

}


@media (max-width: 1000px){
  #voltage{

    width: 12em;

    font-size: 59px;



  }

}

@media (max-width: 1000px){
  #clampCount{

  width: 12em;

  font-size: 59px;



  }
}

@media (max-width: 1000px){
  #interval{

    width: 12em;

    font-size: 59px;



  }
}

/* #startButtonSodium{
margin-top: 10px;
display: grid;
place-items: center;
width: 220px;
height: 40px;
border-radius: 20px;
font-family: Arial, sans-serif;
font-size: 22px;
weight:bolder;
background-color: #390FAD;
color: white;
font-weight: bolder;


} */



#startButtonSodium:hover {
  /* Estilos al pasar el cursor sobre el botón */
  color: red;
  cursor: pointer;
  box-shadow: 0 0 20px red;

}



#volt{
  font-size: 24px;
  weight: bold;
 margin-top: -5px;
 margin-bottom: 14px;
}

h1 {
margin-top: 10;
display: grid;
place-items: center;
width: auto;
font-size: 39px;

}

@media (max-width: 1000px){
  #titulo{


    width: 129.4%;
    font-size: 89.9px;
    text-align: center;




  }
}




  #btnResetZoom{
      margin-left:24px;
  }

  @media (max-width: 1000px){
    #btnResetZoomTotal{




    }
  }

  #btnResetZoomPotassium{
    float: right;
    margin-right: 31px;
  }
  @media (max-width: 1000px){
    #btnResetZoomPotassium{
    margin-top:7.1em;





    }
  }
  #btnResetZoomFuga{
    margin-left:24px;
  }

  #btnResetZoomTotal{
    float: right;
    margin-right: 31px;
  }


  #potassiumRange{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #008000 ;
    border-radius: 5px;
    height: 8px;
  }
  /* Estilos para el control deslizante de rango en navegadores basados en WebKit (Google Chrome, Safari) */
  #potassiumRange[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Quitar apariencia nativa del control */
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color: #008000 ; /* Color rojo */

  }
  /* Estilos para el control deslizante de rango en navegadores basados en Gecko (Firefox) */
  #potassiumRange[type="range"]::-moz-range-thumb {
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color:#008000 ; /* Color rojo */

  }

  /* Estilos para el control deslizante de rango en navegadores basados en Edge y navegadores que soportan el pseudo-elemento -ms-thumb */
  #potassiumRange[type="range"]::-ms-thumb {
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color:#008000 ; /* Color rojo */
  }

  /* Estilos adicionales para el control deslizante de rango en navegadores que soportan el pseudo-elemento thumb */
  #potassiumRange[type="range"]::thumb {
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color:#008000 ; /* Color rojo */
  }


  /* Estilo para las leyendas del gráfico Charts */
  .canvasSodium-render-monitor .canvasSodium-tooltip-key {
    cursor: pointer;
  }







  @media handheld, only screen and (max-width: 1000px) {
  #sodiumRange{
  display:none;
  }
  }
  @media handheld, only screen and (max-width: 1000px) {
  #potassiumRange{
  display:none;
  }
  }
  @media handheld, only screen and (max-width: 1000px) {
  #fugaRange{
  display:none;
  }
  }
  @media handheld, only screen and (max-width: 1000px) {
  #totalRange{
  display:none;
  }
  }
  @media handheld, only screen and (max-width: 1000px) {
  .agrandar{
  display:none;
  }
  }



  @media handheld, only screen and (max-width: 1000px) {
  .rangoEtiqueta{
  display:none;
  }
  }


  @media only screen and (max-width: 1500px) {
    #sodiumRange{
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-color: #0000ff;
      border-radius: 5px;
      height: 8px;
    }
  }



  /* Estilos para el control deslizante de rango en navegadores basados en WebKit (Google Chrome, Safari) */
  #sodiumRange[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Quitar apariencia nativa del control */
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color: #0000ff; /* Color rojo */

  }
  /* Estilos para el control deslizante de rango en navegadores basados en Gecko (Firefox) */
  #sodiumRange[type="range"]::-moz-range-thumb {
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color:#0000ff; /* Color rojo */

  }

  /* Estilos para el control deslizante de rango en navegadores basados en Edge y navegadores que soportan el pseudo-elemento -ms-thumb */
  #sodiumRange[type="range"]::-ms-thumb {
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color:#0000ff; /* Color rojo */
  }

  /* Estilos adicionales para el control deslizante de rango en navegadores que soportan el pseudo-elemento thumb */
  #sodiumRange[type="range"]::thumb {
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color:#0000ff; /* Color rojo */
  }






  #totalRange{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #800080;
    border-radius: 5px;
    height: 8px;
  }
  /* Estilos para el control deslizante de rango en navegadores basados en WebKit (Google Chrome, Safari) */
  #totalRange[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Quitar apariencia nativa del control */
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color: #800080; /* Color rojo */

  }
  /* Estilos para el control deslizante de rango en navegadores basados en Gecko (Firefox) */
  #totalRange[type="range"]::-moz-range-thumb {
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color:#800080; /* Color rojo */

  }

  /* Estilos para el control deslizante de rango en navegadores basados en Edge y navegadores que soportan el pseudo-elemento -ms-thumb */
  #totalRange[type="range"]::-ms-thumb {
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color:#800080; /* Color rojo */
  }

  /* Estilos adicionales para el control deslizante de rango en navegadores que soportan el pseudo-elemento thumb */
  #totalRange[type="range"]::thumb {
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color:#800080; /* Color rojo */
  }








  #fugaRange{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #B30B39;
    border-radius: 5px;
    height: 8px;
  }
  /* Estilos para el control deslizante de rango en navegadores basados en WebKit (Google Chrome, Safari) */
  #fugaRange[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Quitar apariencia nativa del control */
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color: #B30B39; /* Color rojo */

  }
  /* Estilos para el control deslizante de rango en navegadores basados en Gecko (Firefox) */
  #fugaRange[type="range"]::-moz-range-thumb {
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color:#B30B39; /* Color rojo */

  }

  /* Estilos para el control deslizante de rango en navegadores basados en Edge y navegadores que soportan el pseudo-elemento -ms-thumb */
  #fugaRange[type="range"]::-ms-thumb {
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color:#B30B39; /* Color rojo */
  }

  /* Estilos adicionales para el control deslizante de rango en navegadores que soportan el pseudo-elemento thumb */
  #fugaRange[type="range"]::thumb {
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color:#B30B39; /* Color rojo */
  }

.contenedor{
  width: auto;
  height: 807px;
  margin-top: 34px;
  margin-bottom: 20px;
  display: block;
  position: absolute;
  margin-right: 1em;
  background-color: #E2950E;
  box-shadow: 0 0 20px red;
  border-radius: 10px;



}


/* @media (min-width: 1000px){
  .contenedor{
  position: relative;
  margin-left: 549px;
  margin-top: -14px;


  }
} */



.margen{
  height: 500px;
  width: 100%;
}

.input-container{
  margin-top: 10;
  display: grid;
  place-items: center;
  width: auto;
  width: auto;

}

.boton{
  display: grid;
  place-items: center;

}
.linea-inferior{
  font-size: 15px;
  display: grid;
  place-items: center;
  margin-top: -10px;
}

#startButtonSodium{
margin-top: 10px;
display: grid;
place-items: center;
width: 220px;
height: 40px;
border-radius: 20px;
font-family: Arial, sans-serif;
font-size: 22px;
weight:bolder;
background-color: #390FAD;
color: white;
font-weight: bolder;


}

@media (max-width: 1000px){
  #startButtonSodium{

  width: 12em;
  height: 2em;
  border-radius: 5.4em;
  margin-top: 2em;
  font-size: 49px;



  }
}




#startButtonSodium:hover {
  /* Estilos al pasar el cursor sobre el botón */
  color: red;
  cursor: pointer;
  box-shadow: 0 0 20px red;

}

#volt{
  font-size: 24px;
  weight: bold;
 margin-top: -5px;
 margin-bottom: 14px;
}

h1 {
margin-top: 10;
display: grid;
place-items: center;
width: auto;
font-size: 39px;

}



#canvasSodium {
display: inline-block;
position: relative;
width: 590px;
height: 300px;
float:right;
margin-right: 720px;
margin-top: 50px;
background-color: #bdecb6;
margin-bottom: 0px;
}

@media (max-width: 1000px){
  #canvasSodium{

  margin-left: 1.55em;



  }
}



#canvasPotassium {

  display: inline-block;
  position: relative;
  width: 590px;
  height: 300px;
  margin-right: 29px;
  margin-top: -300px;
  float:right;
  background-color:#bdecb6;
  margin-bottom: 0px;
  }

  @media (max-width: 1000px){
    #canvasPotassium{

    margin-right: 4.55em;



    }
  }


#canvasFuga {

  display: inline-block;
  position: relative;
  width: 590px;
  height: 300px;
  margin-right: 724px;
  margin-top: 34px;
  float:right;
  background-color:#bdecb6;
}




  #canvasTotal {

    display: inline-block;
    position: relative;
    width: 590px;
    height: 300px;
    margin-right: 27px;
    margin-top: -300px;
    float:right;
    background-color:#bdecb6;
    margin-bottom: 0px;
    }

    @media (max-width: 1000px){
      #canvasTotal{

      margin-right: 4.55em;



      }
    }
    #canvasCombined {

      display: inline-block;
      position: relative;
      margin-left: 3.25em;
      /* margin-right: 27px; */
      /* margin-top: -300px; */
      /* float:right; */
      background-color:#bdecb6;

      }


  #btnResetZoom{
      margin-left:24px;
  }



  #btnResetZoomPotassium{
    float: right;
    margin-right: 31px;
  }
  #btnResetZoomTotal{
    margin-left:24px;
  }

  #btnResetZoomCombined{
    float: right;
    margin-right: 19px;
    background-color: gold;
  }


  #potassiumRange{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #008000 ;
    border-radius: 5px;
    height: 8px;
  }
  /* Estilos para el control deslizante de rango en navegadores basados en WebKit (Google Chrome, Safari) */
  #potassiumRange[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Quitar apariencia nativa del control */
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color: #008000 ; /* Color rojo */

  }
  /* Estilos para el control deslizante de rango en navegadores basados en Gecko (Firefox) */
  #potassiumRange[type="range"]::-moz-range-thumb {
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color:#008000 ; /* Color rojo */

  }

  /* Estilos para el control deslizante de rango en navegadores basados en Edge y navegadores que soportan el pseudo-elemento -ms-thumb */
  #potassiumRange[type="range"]::-ms-thumb {
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color:#008000 ; /* Color rojo */
  }

  /* Estilos adicionales para el control deslizante de rango en navegadores que soportan el pseudo-elemento thumb */
  #potassiumRange[type="range"]::thumb {
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color:#008000 ; /* Color rojo */
  }


  /* Estilo para las leyendas del gráfico Charts */
  .canvasSodium-render-monitor .canvasSodium-tooltip-key {
    cursor: pointer;
  }










  #sodiumRange{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #0000ff;
    border-radius: 5px;
    height: 8px;
  }
  /* Estilos para el control deslizante de rango en navegadores basados en WebKit (Google Chrome, Safari) */
  #sodiumRange[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Quitar apariencia nativa del control */
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color: #0000ff; /* Color rojo */

  }
  /* Estilos para el control deslizante de rango en navegadores basados en Gecko (Firefox) */
  #sodiumRange[type="range"]::-moz-range-thumb {
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color:#0000ff; /* Color rojo */

  }

  /* Estilos para el control deslizante de rango en navegadores basados en Edge y navegadores que soportan el pseudo-elemento -ms-thumb */
  #sodiumRange[type="range"]::-ms-thumb {
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color:#0000ff; /* Color rojo */
  }

  /* Estilos adicionales para el control deslizante de rango en navegadores que soportan el pseudo-elemento thumb */
  #sodiumRange[type="range"]::thumb {
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color:#0000ff; /* Color rojo */
  }






  #totalRange{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #800080;
    border-radius: 5px;
    height: 8px;
  }
  /* Estilos para el control deslizante de rango en navegadores basados en WebKit (Google Chrome, Safari) */
  #totalRange[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Quitar apariencia nativa del control */
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color: #800080; /* Color rojo */

  }
  /* Estilos para el control deslizante de rango en navegadores basados en Gecko (Firefox) */
  #totalRange[type="range"]::-moz-range-thumb {
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color:#800080; /* Color rojo */

  }

  /* Estilos para el control deslizante de rango en navegadores basados en Edge y navegadores que soportan el pseudo-elemento -ms-thumb */
  #totalRange[type="range"]::-ms-thumb {
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color:#800080; /* Color rojo */
  }

  /* Estilos adicionales para el control deslizante de rango en navegadores que soportan el pseudo-elemento thumb */
  #totalRange[type="range"]::thumb {
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color:#800080; /* Color rojo */
  }








  #combinedRange{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: orange;
    border-radius: 5px;
    height: 8px;
  }
  /* Estilos para el control deslizante de rango en navegadores basados en WebKit (Google Chrome, Safari) */
  #combinedRange[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Quitar apariencia nativa del control */
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color: orange; /* Color rojo */

  }
  /* Estilos para el control deslizante de rango en navegadores basados en Gecko (Firefox) */
  #combinedRange[type="range"]::-moz-range-thumb {
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color:orange; /* Color rojo */

  }

  /* Estilos para el control deslizante de rango en navegadores basados en Edge y navegadores que soportan el pseudo-elemento -ms-thumb */
  #combinedRange[type="range"]::-ms-thumb {
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color:orange; /* Color rojo */
  }

  /* Estilos adicionales para el control deslizante de rango en navegadores que soportan el pseudo-elemento thumb */
  #combinedRange[type="range"]::thumb {
    width: 16px; /* Ancho de la bolita */
    height: 16px; /* Altura de la bolita */
    border-radius: 50%; /* Forma redondeada de la bolita */
    background-color:orange; /* Color rojo */
  }
/* #canvasPotassium {
  width: 600px;
  height: 300px;
  object-fit: none;
} */
 #toggleLabelsButton{
   margin-left: 90%;
 }
 #ca{
   color: #564979;
   font-size: 24px;
   font-weight: bolder;
   text-decoration: underline;
 }
 #va{
   color: #564979;
   font-size: 24px;
   font-weight: bolder;
   text-decoration: underline;
 }
 #in{
   color: #564979;
   font-size: 24px;
   font-weight: bolder;
   text-decoration: underline;
 }
 .rangoDer{
   float: right;
   margin-top:-205px;

 }
 @media (max-width: 1000px){
   .rangoDer{
       margin-right: -20em;




   }
 }
 .rangoIzq{
   margin-top: -15px;
 }


 .range{
   cursor:pointer;
 }

.botonZoom{
border-radius: 20px;
margin-bottom: 10px;
margin-top:10px;
font-size: 18px;
font-weight: bolder;
cursor: pointer;
}
.botonZoom:hover {
box-shadow: 0 0 52px orange;

}
#btnResetZoom{
background-color: #0000ff;
color: white;
}
#btnResetZoomPotassium{
background-color: #008000 ;
color: white;
}
#btnResetZoomTotal{
background-color: #800080;
color: white;
}
#btnResetZoomFuga{
background-color: #B30B39;
color: white;
}


#toggleLabelsButton{
position: relative;
border-radius: 20px;
background-color: #add8e6;
font-weight: bolder;
cursor: pointer;

padding-top: 0px;
margin-right: 24px;
width: 190px;
float: right;
height: 22px;

}
#toggleLabelsButton:hover {
background-color: gold;
/* color: white; */
box-shadow: 0 0 52px orange;

}

#hideSodiumButton{
position: relative;
border-radius: 20px;
background-color: #add8e6;
font-weight: bolder;
cursor: pointer;
width: 116px;
height: 22px;
margin-left:2em;
margin-top: -40px;
}

#hideSodiumButton:hover {
background-color: #0000ff;
color: white;
box-shadow: 0 0 92px #0000ff;

}


#hidePotassiumButton{
position: relative;
border-radius: 20px;
background-color: #add8e6;
font-weight: bolder;
cursor: pointer;
width: 116px;
height: 22px;
margin-left: 12px;
}

#hidePotassiumButton:hover {
background-color: #008000 ;
color: white;
box-shadow: 0 0 92px #008000 ;

}

#hideTotalButton{
position: relative;
border-radius: 20px;
background-color: #add8e6;
font-weight: bolder;
cursor: pointer;
width: 116px;
height: 22px;
margin-left: 12px;
}

#hideTotalButton:hover {
background-color: #800080;
color: white;
box-shadow: 0 0 92px #800080;

}

#hideLakeButton{
position: relative;
border-radius: 20px;
background-color: #add8e6;
font-weight: bolder;
cursor: pointer;
width: 116px;
height: 22px;
margin-left: 12px;
}

#hideLakeButton:hover {
background-color: #B30B39;
color: white;
box-shadow: 0 0 92px #800080;

}

#toggleLabelsButtonSodio{
position: relative;
border-radius: 20px;
background-color: #add8e6;
font-weight: bolder;
cursor: pointer;
margin-top: -10px;
margin-left: 424px;

}

#toggleLabelsButtonSodio:hover {
background-color: #0000ff;
color: white;
box-shadow: 0 0 52px #0000ff;

}

#toggleLabelsButtonPotasio{
border-radius: 20px;
background-color: #add8e6;
font-weight: bolder;
cursor: pointer;
float: right;
margin-right: 24px;

}

@media (max-width: 1000px){
  #toggleLabelsButtonPotasio{


      margin-right: 5.9em;


  }
}

#toggleLabelsButtonPotasio:hover {
background-color: #008000 ;
color: white;
box-shadow: 0 0 52px #008000 ;

}

#toggleLabelsButtonTotal{
border-radius: 20px;
background-color: #add8e6;
font-weight: bolder;
cursor: pointer;
float: right;
margin-right: 24px;
/* margin-top: -190px; */


}
@media (max-width: 1000px){
  #toggleLabelsButtonTotal{


      margin-right: 5.9em;


  }
}

#toggleLabelsButtonTotal:hover {
background-color: #800080;
color: white;
box-shadow: 0 0 52px #800080;

}


#toggleLabelsButtonFuga{
position: relative;
border-radius: 20px;
background-color: #add8e6;
font-weight: bolder;
cursor: pointer;
margin-top: -10px;
margin-left: 424px;
margin-bottom: 0px;

}

#toggleLabelsButtonFuga:hover {
background-color: #B30B39;
color: white;
box-shadow: 0 0 52px #B30B39;

}




#startButtonSodium{
background-color: #390FAD;
color: white;
}

#startButtonSodium:hover {
box-shadow: 0 0 52px #0000ff;

}
.rangoEtiqueta{
font-weight: bolder;
font-size: 18px;
text-decoration: underline;
}

.highlight {
border: 2px solid yellow;
animation: highlightEffect 1s;
}

@keyframes highlightEffect {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.tituloPotasio{

margin-top: -349px;
float:right;
margin-bottom: -20px;
margin-right: 21%;
font-size: 24px;
color: #008000 ;


font-family: Arial Black;
font-weight: bold;
font-size: 30px;
text-shadow: 0 1px 0 #ddd, 0 2px 0 #ccc, 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 0 #acacac, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.3), 0 3px 5px rgba(0,0,0,0.2), 0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.2), 0 20px 20px rgba(0,0,0,0.15);

}
.tituloTotal{
float: right;
margin-top: -349px;
margin-right: 17.5%;
font-size: 24px;
color: #800080;


font-family: Arial Black;
font-weight: bold;
font-size: 30px;
text-shadow: 0 1px 0 #ddd, 0 2px 0 #ccc, 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 0 #acacac, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.3), 0 3px 5px rgba(0,0,0,0.2), 0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.2), 0 20px 20px rgba(0,0,0,0.15);


}


@media (max-width: 1000px){
  .tituloTotal{


      margin-right: 23.2%;


  }
}
.TituloFuga{
margin-top: 20px;
margin-bottom: -20px;
margin-left: 20%;
font-size: 24px;
color: #B30B39;


font-family: Arial Black;
font-weight: bold;
font-size: 30px;
text-shadow: 0 1px 0 #ddd, 0 2px 0 #ccc, 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 0 #acacac, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.3), 0 3px 5px rgba(0,0,0,0.2), 0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.2), 0 20px 20px rgba(0,0,0,0.15);


}
.tituloSodio{
display: grid;
margin-top: 20px;
margin-bottom: -40px;
margin-left: 21%;
font-size: 24px;
color: rgb(0, 0, 255);

font-family: Arial Black;
font-weight: bold;
font-size: 30px;
text-shadow: 0 1px 0 #ddd, 0 2px 0 #ccc, 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 0 #acacac, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.3), 0 3px 5px rgba(0,0,0,0.2), 0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.2), 0 20px 20px rgba(0,0,0,0.15);

}

.tituloCombinado{
display: grid;

margin-top: 0.4em;
margin-bottom: 0.4em;
margin-left: 42%;
font-size: 24px;
color:#108DB4;
/* color: #9B8B50; */

font-family: Arial Black;
font-weight: bold;
font-size: 30px;
text-shadow: 0 1px 0 #ddd, 0 2px 0 #ccc, 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 0 #acacac, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.3), 0 3px 5px rgba(0,0,0,0.2), 0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.2), 0 20px 20px rgba(0,0,0,0.15);

}

.parametros-conductancia{
position: relative;
margin-left: 24px;
font-weight: bolder;
font-size: 18px;

}
@media (max-width: 1500px){
  .parametros-potencial{
  position: relative;
  margin-left: 549px;
  margin-top: -14px;
  font-weight: bolder;
  font-size: 18px;


  }
}
@media (max-width: 1000px){
  .parametros-potencial{
  position: relative;
  margin-left: 1em;


  }
}

.parametros-probabilidad{
position: relative;
margin-left: 24px;
font-weight: bolder;
font-size: 18px;
}

@media (max-width: 1500px){
  .parametros-tiempo{
  position: relative;
  margin-left: 549px;
  margin-top: -9px;
  font-weight: bolder;
  font-size: 18px;

  }
}

@media (max-width: 1000px){
  .parametros-tiempo{
  position: relative;
  margin-left: 1em;


  }
}


.conductancia{
position: relative;
margin-left: 174px;
margin-top: 70px;
text-decoration: underline;
font-weight: bolder;
font-size: 21px;
color:#2A068C;

}

@media (max-width: 1000px){
  .conductancia{


    margin-left: 14.9em;



  }
}

@media (max-width: 1500px){
  #potencial2{
  position: relative;
  margin-left: 61%;
  margin-top: -148.5px;
  text-decoration: underline;
  font-weight: bolder;
  font-size: 21px;
  color:#2A068C;



  }
}

@media (max-width: 1000px){
  #potencial2{
  position: relative;
  margin-top: 2em;
  margin-left: 9.57em;
  text-decoration: underline;


  }
}
@media (max-width: 1500px){
  .probabilidad{
  position: relative;
  margin-left: 174px;
  text-decoration: underline;
  font-weight: bolder;
  font-size: 21px;
  color:#2A068C;


  }
}

@media (max-width: 1000px){
  .probabilidad{
  position: relative;
  margin-left: 14em;
  text-decoration: underline;

  }
}


@media (max-width: 1500px){
  .tiempo{
  position: relative;
  margin-left: 712px;
  margin-top: -129px;
  text-decoration: underline;
  font-weight: bolder;
  font-size: 21px;
  color:#2A068C;


  }
}
@media (max-width: 1000px){
  .tiempo{
  position: relative;
  margin-left: 18.2em;
  text-decoration: underline;

  margin-top: 1em;


  }
}

.titulos{
display: grid;
place-items: center;
width: auto;
}

@media (max-width: 1000px) {
.titulos{
margin-left: -8em;


}
}

.contenedor-img{
display: grid;
place-items: center;
margin-top: 40px;

}
@media (max-width: 1000px){
  .img{
  width: 45em;

  }
}
@media (max-width: 1500px) {
.contenedor-preliminar{

width: 90%;
margin-left: 3.5%;
background-color: #13CCDB;
box-shadow: 0 0 20px #0F80F9;
padding-top: 5px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
border-radius: 29px;
margin-bottom: 70px;
font-family: Arial, sans-serif;
}
.containerCanvas{
  margin-left: 1em;
  
}
}

/* Agregar una regla de medios para pantallas de hasta 600px de ancho (típicamente para celulares) */
@media (max-width: 1000px) {
.contenedor-preliminar {
  width: 110%;
  margin-left: 14%;
  background-color: #13CCDB;
  box-shadow: 0 0 20px #0F80F9;
  padding-top: 5px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  border-radius: 29px;
  margin-bottom: 70px;
}
}

@media (max-width: 900px) {
.contenedor-preliminar {
  width: 114%;
  margin-left: 19.9%;
  background-color: #13CCDB;
  box-shadow: 0 0 20px #0F80F9;
  padding-top: 5px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  border-radius: 29px;
  margin-bottom: 70px;
}
}




.parametros{
position: relative;
border-radius: 40px;
margin-bottom: 50px;
width: 89%;
height: auto;
background-color: #77E1A6;
padding: 20px;
margin-left: 45.7px;
box-shadow: 0 0 20px #0F80F9;
margin-top: 57px;

}



#ecuaciones{
margin-top: 70px;
margin-bottom: 32px;
text-align: center;
}
@media (max-width: 1000px){
  #ecuaciones{
/* width: 179.4%; */
margin-left: 0em;
font-size: 54.9px;

text-align: center;

  }
}

.parrafoEcuaciones{
width: 90%;
margin-left: 74px;
font-weight: bolder;
font-size: 18px;
}
.contenedorItems{
background-color:#BFE177;
border-radius: 57px;
width: 59%;
margin-left: 254px;
padding: 20px;
margin-bottom: 70px;
}

@media (max-width: 1000px){
  .contenedorItems{
       width: 89.7%;
       height: 150%;
       margin-left: 10.7em;


  }
}
@media (max-width: 1000px){
  #ca{
       font-size: 49px;


  }
}

@media (max-width: 1000px){
  #va{
       font-size: 49px;


  }
}

@media (max-width: 1000px){
  #in{
       font-size: 49px;


  }
}


#ecuaciones-explicaion{
position: relative;
margin-top: 40px;
}
.hide{
position: absolute;
background-color: #90EE90;
border-radius: 59px;
width: 574px;
height: 27px;
padding-top: 5px;
margin-left: 22.25%;
margin-top: 0.1em;
border: 2px solid #50569B;

}

.aclara{
display: grid;
place-items: center;
color: #008000 ;
text-decoration: underline;
}
@media (max-width: 1000px){
  .aclara{

      width: 10.2em;
      margin-left: 45.9%;


  }
}
.contendorCombined{
background-color:#05B620 ;
box-shadow: 0 0 20px pink;;
margin-top: 2em;
margin-bottom: 1em;
width: 90%;
height: 4em;
margin-left: 4em;
border-radius: 5em;

}
@media (max-width: 1000px){
  .contendorCombined{

          margin-left: 1.79em;
          margin-top: 7em;


  }
}

.contenedor-combinedRange{
margin-top: 2em;
margin-left: 4.7em;
padding: 1em;
}
@media handheld, only screen and (max-width: 1000px) {
.contenedor-combinedRange{
display:none;
}
}

.contenedor-zoomCombined{
margin-top: -3.9em;
padding: 1em;

}
@media (max-width: 1000px){
  .contenedor-zoomCombined{

       margin-right: 27.24em;


  }
}


.containerCanvasCombined{
background-color: orange;
margin-left: 4em;
width: 90%;
height:85.7%;
}

@media (max-width: 1000px){
  .containerCanvasCombined{

          margin-left: 1.79em;


  }
}

.comRange{
font-size: 24px;
}


 h2{
   display: grid;
   place-items: center;
   width: auto;
   color: #008000 ;
   margin-bottom: 42px;
 }

 @media (max-width: 1000px){
   #copete{


     width: 129.4%;
     font-size: 49.9px;
     text-align: center;



   }
   #logo{

     width:145%;
     height: auto;
     margin-top: 0.5em;
   }
 }


 @media (max-width: 1000px){
   #tituloParametro{


     width: 179.4%;
     font-size: 44.9px;
     text-align: center;



   }
   /* #es{
     color: #564979;

     font-weight: bolder;
     text-decoration: underline;
   }
   #du{
     color: #564979;

     font-weight: bolder;
     text-decoration: underline;
   }
   #co{
     color: #564979;

     font-weight: bolder;
     text-decoration: underline;
   } */
   #corriente{
     margin-left: 14.5em;

   }
   #duracion{
     margin-left: 14.5em;
   }
   #comienzo{
     margin-left: 14.5em;
   }
 }

@media (max-width: 1000px){
   @media screen and (orientation: landscape) {
       body{
           padding-left: 7em;
       }
       .navbar{

       margin-left: -7em;
       width: 169.1%
       }
      .contenedor{
        margin-left: -3.9em;
      }

 }
}

@media (max-width: 1000px){
  @media screen and (orientation: portrait) {

    .contenedor{
      margin-left: 0em;
    }
    #contendorCombined{
      margin-left: 4em;
    }
    /* .Container-Boton{
      background-color:#BFE177;
      border-radius: 57px;
      width: 700px;
      height: auto;
      padding-bottom: 29px;
      margin-left: 29.2%;
      display: grid;
      place-items: center;
      box-shadow: 0 0 20px #0F80F9;

    } */

  }
}



@media (max-width: 1000px){


  .Container-Boton{
    background-color:#BFE177;
    border-radius: 57px;
    width: 110%;
    height: auto;
    padding-bottom: 29px;
    margin-left: 29.2%;
    display: grid;
    place-items: center;
    box-shadow: 0 0 20px #0F80F9;

  }
  #corriente{
    margin-left: 0.5em;
    width: 50%;
    font-size: 64px
  }
  #duracion{
    margin-left: 0.5em;
    width: 50%;
    font-size: 64px
  }
  #comienzo{
    margin-left: 0.5em;
    width: 50%;
    font-size: 64px
  }

  #corriente2{
    margin-left: 0.5em;
    width: 50%;
    font-size: 64px
  }
  
  #sxtDosisInput{
    margin-left: 0.5em;
    width: 50%;
    font-size: 49px
  }

  #teaDosisInput{
    margin-left: 0.5em;
    width: 50%;
    font-size: 64px
  }
  #duracion2{
    margin-left: 0.5em;
    width: 50%;
    font-size: 64px
  }
  #comienzo2{
    margin-left: 0.5em;
    width: 50%;
    font-size: 64px
  }
  
  #sxtDosisInput{
      font-size: 64px
  }
  #teaDosisInput{
      font-size: 64px
  }

  #ingresa{
    margin-top: 40px;
    font-size: 59px;
    margin-left: 1em;
  }

  #ingresa2{
    margin-top: 40px;
    font-size: 59px;
    margin-left: 1em;
  }
  
  .sigue{
    margin-top: 40px;
    font-size: 59px;
    margin-left: 1em;
  }

  #es{
    color: #564979;
    font-size: 54.5px;
    font-weight: bolder;
    text-decoration: underline;
  }
  #co{
    color: #564979;
    font-size: 54.5px;
    font-weight: bolder;
    text-decoration: underline;
  }
  #du{
    color: #564979;
    font-size: 54.5px;
    font-weight: bolder;
    text-decoration: underline;
  }
  
  #tox{
  color: #564979;
  font-size: 24px;
  font-weight: bolder;
  text-decoration: underline;
}

#tox1{
  color: #564979;
  font-size: 24px;
  font-weight: bolder;
  text-decoration: underline;
}

#tox2{
  color: #564979;
  font-size: 24px;
  font-weight: bolder;
  text-decoration: underline;
}
  #es2{
    color: #564979;
    font-size: 54.5px;
    font-weight: bolder;
    text-decoration: underline;
  }
  #co2{
    color: #564979;
    font-size: 54.5px;
    font-weight: bolder;
    text-decoration: underline;
  }
  #du2{
    color: #564979;
    font-size: 54.5px;
    font-weight: bolder;
    text-decoration: underline;
  }



  .BotonZoom{
    display:none;
  }
  
  
  .BTNactualizar{
    font-size: 37px;
    margin-left:10em;
  }
  
  .BTNmejora{
    font-size: 37px;
    margin-left:10em;
    
  }
  
  #tox{
  font-size: 54.5px;
}

#tox1{
  font-size: 54.5px;
}

#tox2{
  font-size: 54.5px;
}

#explicacion{
     margin-bottom: 1.5em;
   }

  }
}