body{
  background-color:lightblue;

}
#logo{

  width:100%;
  height: auto;
  margin-top: 0.5em;
}
.Contenedor-Preliminar{
  width: 52%;
  margin-left: 20.59%;
  margin-bottom: 2em;
  height: auto;
  border-style:  solid;
  border-radius: 2em;
  padding: 1em;
  background-color: #EDF4C2;
  text-align: center;
  font-size: 18px;
  font-weight: bolder;
  font-family: Arial, sans-serif;
}
      #container{
        width:700px;
        height: 96.4em;
        border-style:  solid;
        background-color: lightgreen;
        padding: 9px;
        margin-left: 21.2%;

      }

       .input{
         margin-top:2px;
       }
       #intracelular{
         background-color: #8B70F1;
         padding:12px;
       }
       #extracelular{
         background-color:orange;
         padding:12px;
       }

     .contenedorConcentra{
       padding:62.7px;
       border-style:  solid;
       width: 300px;
     }
     #temperaturaCelsius{
       font-weight: bolder;
       font-size: 16px;
       margin-top: 1em;
     }
     #tituloTemperatura{
       font-weight: bolder;
       font-size: 18px;

     }
     /* #temperatura{
       margin-top: 1.5em;
     } */
     #contenedorTemperatura{
       background-color: #F1709F;
       width: 199px;
       padding:62.7px;
       border-style:  solid;

     }


     #container-resultados{
       margin-top:29px;
       width:500px;
       height: auto;
       background-color:#70F1A7;
         padding: 25px;
        border-style:  solid;
       margin-left: 29%;
     }
     .label{
       padding:27px;
     }
     #nernst{
       background-color: gold;
       border-style:  solid;
       padding:7px;
     }
     #Goldman-Hodgkin-Katz{
       background-color: #70BEF1;
       border-style:  solid;
       padding:7px;
     }
     #Fuerzas-Impulsoras{
       background-color: violet;
       width: 327px;
       height: auto;
       margin-left: 367px;
       margin-top: 9px;
       border-style:  solid;

     }
     #contenedorCanvasInfluencia{
       position: relative;
       background-color:#F4E982;
       width: 335.4px;
       margin-left: 51.9%;
       margin-top:5px;
       display: grid;
       place-items:center;
       height: 320px;
     }
     /* Estilos para el canvas */
    #canvasInfluencia {
      position: relative;

      z-index: 1; /* Ajustar el z-index según lo necesites */

    }

     #boton{
       background-color:lightblue;
       border-radius: 25px;
       width:250px;
       height:49px;
       margin-top: 49px;
       margin-left: 0%;
       font-size: 18px;
       font-weight: bolder;
     }
     .contenedor-Calcular{
         margin-left: 57%;
         width:5em;
         height:49px;
         margin-bottom: 2em;
     }
     #contenedorCanvasPotencial{
       position:relative;
       margin-left:362.4px;
       margin-top: -189.5%;
       background-color: #F4E982;
       padding:0px;

     }
     .nes{
       margin-top: 0px;
       padding:0;
     }
     .nep{
       margin-top: -29px;
       padding:0;
     }
     .nec{
       margin-top: -29px;
       margin-bottom: -10px;
       padding:0;
     }
     .tSodio{
       font-size: 24px;

       font-weight: bolder;
       color: #0524B0;

     }
     .tPotasio{
       font-size: 24px;

       font-weight: bolder;
       color: green;
     }
     .tCloruro{
       font-size: 24px;

       font-weight: bolder;
       color: #CB0F06;

     }


     .tIntraelular{
       font-size: 24px;
       font-weight: bolder;
       text-decoration: underline;
       color:white;

     }
     .tExtraelular{
       font-size: 24px;
       font-weight: bolder;
       text-decoration: underline;
       color:#070B42

     }
     .fuerza-impulsora{
       font-weight: bolder;
       text-decoration: underline;

     }
     #fuerza-impulsora-sodio{
       color: #0524B0;
     }
     #fuerza-impulsora-potasio{
       color:green;
     }
     #fuerza-impulsora-cloruro{
       color:#CB0F06;
     }
     #fuerza-impulsora-s{
       color: #0524B0;
     }
     #fuerza-impulsora-p{
       color:green;
     }
     #fuerza-impulsora-c{
       color:#CB0F06;
     }
     #img-GHKatz{
       width: 305px;
     }

     .highlight {
       border: 2px solid yellow;
       padding: 10px

     }
     #containerConductancias{
       background-color: gold;
       width: 41.79%;
       padding: 1em;
       margin-bottom: 0px;
        border-style:  solid;
     }

     .inputG{

       margin-left: 2em;
       margin-top: -2em;


     }
     .input-range-conductancia{
       margin-bottom: 2em;
       margin-top: 2em;

       margin-left: 4em;
     }
     #tituloConductancias{
       margin-left: 2em;
     }
     #restituir{
       margin-top: 4em;
       margin-left: 20.7em;
       font-size: 21.5px;
       font-weight: bolder;
       color:blue;
     }
     #botonRC{
       background-color:#FBC342;
       border-radius: 25em;
       width:12em;
       height:3em;
       margin-top: -20em;
       margin-left: 27.14em;
       font-weight: bolder;


     }
     #botonRG{
       background-color:#FBC342;
       border-radius: 25em;
       width:12em;
       height:3em;
       margin-top: -20em;
       font-weight: bolder;
     }
     #botonRTemp{
       background-color:#FBC342;
       border-radius: 25em;
       width:12em;
       height:3em;
       margin-top: 1em;
       margin-left: 27.14em;
       font-weight: bolder;
     }
     #botonRT{
       background-color:#FBC342;
       border-radius: 25em;
       width:12em;
       height:3em;
       margin-top: -20em;
       font-weight: bolder;
     }

     h1{
       display:grid;
       place-items:center;
       color:green;
       font-size: 39px;
       text-align: center;
       margin-left: -3.2%;

     }
     h3{

       padding:0px;
     }


     @media screen and (max-width: 1000px) {
       #logo{

         width:145%;
         height: auto;
         margin-top: 0.5em;
       }
       .Contenedor-Preliminar{
         width: 90%;
         margin-left: 16%;
         font-size: 24.5px;
       }

       #container{
         width:90%;
         height: 197em;;
         border-style:  solid;
         background-color: lightgreen;
         padding: 9px;
         margin-left: 18%;

       }

        .input{
          margin-top:2px;
          width: 70%;
          font-size: 39px;
        }
        #intracelular{
          background-color: #8B70F1;
          padding:12px;
        }
        #extracelular{
          background-color:orange;
          padding:12px;
        }

       .contenedorConcentra{
        padding:62.7px;
        border-style:  solid;
        width: 300px;
       }
       #temperaturaCelsius{
        font-weight: bolder;
        font-size: 39px;
        margin-top: 1em;
       }
       #tituloTemperatura{
        font-weight: bolder;
        font-size: 39px;

       }
       /* #temperatura{
        margin-top: 1.5em;
       } */
       #contenedorTemperatura{
        background-color: #F1709F;
        width: 199px;
        padding:62.7px;
        border-style:  solid;

       }


       #container-resultados{
        margin-top:29px;
        width:500px;
        height: auto;
        background-color:#70F1A7;
          padding: 25px;
         border-style:  solid;
        margin-left: 29%;
       }
       .label{
        padding:27px;


       }
       #nernst{
        background-color: gold;
        border-style:  solid;

        padding:7px;

       }
       #Goldman-Hodgkin-Katz{
        background-color: #70BEF1;
        border-style:  solid;
        padding:7px;
       }
       #Fuerzas-Impulsoras{
        background-color: violet;
        width:37%;
        height: auto;
        margin-left: 24.9em;
        margin-top: 9px;
        border-style:  solid;
        padding: 2em;

       }
       #contenedorCanvasInfluencia{
        position: relative;
        background-color:#F4E982;
        width: 535.4px;
        margin-left: 39%;
        margin-top:5px;
        display: grid;
        place-items:center;
        height: 379px;


       }
       /* Estilos para el canvas */
       #canvasInfluencia {
       position: relative;
       margin-top: 5em;
       z-index: 1; /* Ajustar el z-index según lo necesites */

       }


       #boton{
        background-color:lightblue;
        border-radius: 4em;
        width:9em;
        height:2em;
        margin-top: 49px;
        margin-left: 56.2%;
        font-size: 39px;
        font-weight: bolder;
       }
       .contenedor-Calcular{
           margin-left: 44%;
           width:5em;
           height:49px;
           margin-bottom: 2em;
       }
       #contenedorCanvasPotencial{
        position:relative;
        margin-left:21.4em;
        width: 522px;
        height: 527px;
        margin-top: -334.9%;
        background-color: #F4E982;
        padding:0px;
       }
       .nes{
        margin-top: 0px;
        padding:0;
        font-size: 39px;
        font-weight: bolder;
        text-align: center;
       }
       .nep{
        margin-top: -29px;
        padding:0;
        font-size: 39px;
        font-weight: bolder;
        text-align: center;
       }
       .nec{
        margin-top: -29px;
        margin-bottom: -10px;
        padding:0;
        font-size: 39px;
        font-weight: bolder;
        text-align: center;
       }
       .tSodio{
        font-size: 49px;
        font-weight: bolder;
        color: #0524B0;
       }
       .tPotasio{
        font-size: 49px;
        font-weight: bolder;
        color: green;
       }
       .tCloruro{
        font-size: 49px;
        font-weight: bolder;
        color: #CB0F06;
       }
       .tIntraelular{
        font-size: 49px;
        font-weight: bolder;
        text-decoration: underline;
        color:white;

       }
       .tExtraelular{
        font-size: 49px;
        font-weight: bolder;
        text-decoration: underline;
        color:#070B42

       }
       .fuerza-impulsora{
         font-size: 39px;
        font-weight: bolder;
        text-decoration: underline;

       }
       #FINa{
         font-size: 39px;
         font-weight: bolder;


       }
       #FIK{
         font-size: 39px;
         font-weight: bolder;
       }
       #FICl{
         font-size: 39px;
         font-weight: bolder;
       }

       #fuerza-impulsora-sodio{
        color: #0524B0;
       }
       #fuerza-impulsora-potasio{
        color:green;
       }
       #fuerza-impulsora-cloruro{
        color:#CB0F06;
       }
       #fuerza-impulsora-s{
        color: #0524B0;
       }
       #fuerza-impulsora-p{
        color:green;
       }
       #fuerza-impulsora-c{
        color:#CB0F06;
       }
       #img-GHKatz{
        width: 305px;
       }

       .highlight {
        border: 2px solid yellow;
        padding: 10px

       }
       #containerConductancias{
        background-color: gold;
        width: 32.2%;
        padding: 1.4em;
        margin-bottom: 0px;
         border-style:  solid;
       }

       .inputG{
        margin-bottom: 1em;
        margin-top: 1em;
        margin-left: 1em;
        width: 70%;
        font-size: 39px;
        height: 2em;
       }
       .input-range-conductancia{

        margin-top: -5em;
        margin-left: 2.5em;

        /* margin-bottom: 5em; */
        width: 15em;
        height: 4.4em;


       }
       #tituloConductancias{
        margin-left: 0em;
        font-size: 47.5px;
       }
       #restituir{
        margin-left: 0em;
        margin-top: 2em;
        font-size: 49px;
        font-weight: bolder;
        text-align: center;
        color:blue;
       }
       .contenedor-Botones{
          margin-left: 20.24em;
       }
       #botonRC{
         box-sizing: border-box;
        background-color:#FBC342;
        border-radius: 25em;
        width:9em;
        height:2em;
        /* margin-top: -22em; */
        margin-left: 3em;
        font-size: 37px;
        font-weight: bolder;
        margin-top:0em;
        padding: 0em;


       }
       #botonRG{
         box-sizing: border-box;
        background-color:#FBC342;
        border-radius: 25em;
        width:9em;
        height:2em;
        margin-top: 1em;
        margin-left: 3em;
          font-size: 37px;
        font-weight: bolder;
        padding: 0em;
       }
       #botonRTemp{
         box-sizing: border-box;
        background-color:#FBC342;
        border-radius: 25em;
        width:9em;
        height:2em;
        margin-top: 1em;
         margin-left: 3em;
          font-size: 37px;
        font-weight: bolder;
        padding: 0em;
       }
       #botonRT{
         box-sizing: border-box;
        background-color:#FBC342;
        border-radius: 25em;
        margin-left: 14.7em;
        width:9em;
        height:2em;
        margin-top: 0em;
        font-size: 37px;
        margin-left: 3em;
        font-weight: bolder;
        margin-top: 1em;
        padding: 0em;

       }
       h1{
         display:grid;
         place-items:center;
         color:green;
         font-size: 59px;
         text-align: center;
         margin-left: 5em;
       }
       h3{
         font-size: 39px;
         padding:0px;
       }
     }