/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  /*float: none;*/
  display: inline-block;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%;
  background-color: #fefefe;
}
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: rgb(50, 50, 50);
  margin:0px;
  padding: 0px;
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 300; }
h1 { font-size: 4.5rem; line-height: 1.2;  letter-spacing: -.1rem; margin-bottom: 2rem; }
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; margin-bottom: 1.8rem; margin-top: 1.8rem;}
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; margin-bottom: 1.5rem; margin-top: 1.5rem;}
h4 { font-size: 2.6rem; line-height: 1.35; letter-spacing: -.08rem; margin-bottom: 1.2rem; margin-top: 1.2rem;}
h5 { font-size: 2.2rem; line-height: 1.5;  letter-spacing: -.05rem; margin-bottom: 0.6rem; margin-top: 0.6rem;}
h6 { font-size: 2.0rem; line-height: 1.6;  letter-spacing: 0; margin-bottom: 0.75rem; margin-top: 0.75rem;}

p {
  margin-top: 0; }


/* Blockquotes
–––––––––––––––––––––––––––––––––––––––––––––––––– */
blockquote {
  border-left: 4px lightgrey solid;
  padding-left: 1rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-left: 0rem;
}


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: rgb(0, 0, 69); 
  /*text-decoration: underline;*/
  cursor: pointer;}
a:hover {
  color: #ffffff; 
  background-color:rgb(0, 0, 69);  
}


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;
  border-color: #888;
  outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB; }


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; 
  font-family: inherit;
  font-size: inherit; /*https://stackoverflow.com/questions/6080413/why-doesnt-input-inherit-the-font-from-body*/}
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: 0px; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: 0.5rem;
  font-weight: normal; }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
table {
  border-collapse: collapse;
}
th:not(.CalendarDay),
td:not(.CalendarDay) {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child:not(.CalendarDay),
td:first-child:not(.CalendarDay) {
  padding-left: 0; }
th:last-child:not(.CalendarDay),
td:last-child:not(.CalendarDay) {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 0rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 0rem; }
pre,
dl,
figure,
table,
form {
  margin-bottom: 0rem; }
p,
ul,
ol {
  margin-bottom: 0.75rem; }

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


.titulo{
  color: #0FA0CE;
  font-family: Arial, Helvetica, sans-serif;
  text-align: left;
}
.menu{
  height: 42px;
  border-bottom: solid 2px rgb(0, 0, 69);
  text-align: center;
  /*background-color: rgba(0, 0, 0, 0.9);*/
  position: sticky;
  top: 0;
  z-index: 1200;
  background-color: #ffffff;
}
.menu div{
  display: inline;  
}
.menu div a{
  font-size: 20px;
  font-family: Verdana, sans-serif;
  list-style-type: none;
  text-decoration: none;
  padding: 15px;
}
.encabezado{
  background-color: rgba(255, 255, 255, 0.9);
  width: 90%;
  margin: 0px auto;
}
.encabezado tr{
  width: 100%;
}
.encabezado td{
  text-align: center;
  border: 1px solid black;
}
.titulo_tomografia{
  font-size: 30px;
}
.titulo_lista{
  background-color: rgba(255, 255, 255, 0.9);
  text-align: center;
}
.lista{
  width: 250px;
  text-align: center;
  margin: 0px auto;
}
.pk_sel{
  /*background-color: rgba(3, 4, 69, 0.9);*/
  padding-top: 15px;
  padding-bottom: 10px;
  border-radius: 10px;
  border: 1px solid #222;
  width: 90%;
  margin: 0px auto;
  margin-top: 5px;
}
.row div{
  text-align: center;
  display: block;
  margin-top: 10px;
}
.row div label{
  text-align: center;
  margin: 0px 5px 0px 5px;
}
.plot, .tabla{
  display: block;
  padding: 2px;
  margin: 0 auto;
}
.tabla{
  width: 90%;
}
.tabla_H{
  width: 500px;
  margin: 0px auto;
}
.graficos{
  padding: 0px;/* 20px 20px*/
}
.graphs-top-panel{
  position: sticky;
  top: 42px;
  z-index: 1100;
  background-color: #fefefe;
  padding-bottom: 10px;
  margin-bottom: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.titulo_grafico{
  width: 100%;
  margin: 0px auto;
  background-color: #222;
  color: #8bcfe3;
  font-weight: bold;
  text-align: center;
}
.inversion{
  width: 90%;
  margin: 0px auto;
  background-color: #eee;  
}
.inversion Img{
  width: 100%;
  height: 300px;
  margin: 0px auto;
}
.escala{
  width: 500px;
  margin: 0px auto;
  padding-top: 50px; 
}
.contentgraph{
  margin: 10px;
  background-color: #eee;
}
.formulario div{
  display:inline-block;
  margin: 5px 10px 5px 10px;
}
.formulario div :first-child{
  display:inline-block;
  padding: 5px;
}
.formulario div input{
  font-size: 20px;
  width: 80px;
}
.piedepagina{
  background-color: #222;
  color: #33C3F0;
  text-align: center;
}
/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}

/* ==========================================================
   MORERT - Compatibilidad visual Dash 4
   Dropdown + Slider
   ========================================================== */


/* ==========================================================
   DROPDOWN
   Dash 4 usa un <button>, por lo que hereda accidentalmente
   las reglas globales de Skeleton para button.
   ========================================================== */

.dash-dropdown {
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 400 !important;

  letter-spacing: normal !important;
  text-transform: none !important;

  line-height: normal !important;
  text-align: center !important;

  white-space: nowrap !important;
}


/* El texto seleccionado ocupa el espacio disponible */
.dash-dropdown-grid-container {
  grid-template-columns: 1fr auto !important;
}


/* Valor actualmente seleccionado */
.dash-dropdown-value {
  width: 100% !important;
  text-align: center !important;

  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 400 !important;

  letter-spacing: normal !important;
  text-transform: none !important;
}


/* Opciones desplegadas */
.dash-dropdown-option {
  text-align: center !important;

  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 400 !important;

  letter-spacing: normal !important;
  text-transform: none !important;
}


/* Campo Search */
.dash-dropdown-search {
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 400 !important;

  letter-spacing: normal !important;
  text-transform: none !important;
}


/* ==========================================================
   SLIDER
   Recupera aproximadamente la apariencia clásica rc-slider
   utilizada por las versiones antiguas de Dash.
   ========================================================== */


/* Línea gris de fondo */
#wall_slider .dash-slider-track {
  background-color: #e9e9e9 !important;
}


/* Tramo seleccionado: celeste */
#wall_slider .dash-slider-range {
  background-color: #abe2fb !important;
  opacity: 1 !important;
}


/* Handle clásico: blanco con borde celeste */
#wall_slider .dash-slider-thumb {
  background-color: #ffffff !important;
  border: 2px solid #96dbfa !important;
  box-shadow: none !important;
}


/* Hover */
#wall_slider .dash-slider-thumb:hover {
  border-color: #57c5f7 !important;
}


/* Focus */
#wall_slider .dash-slider-thumb:focus {
  border-color: #57c5f7 !important;
  outline: 2px solid #96dbfa !important;
  box-shadow: none !important;
}


/* Marcas */
#wall_slider .dash-slider-mark {
  color: #666 !important;
  font-family: inherit !important;
}


/* Marcas posteriores al valor seleccionado */
#wall_slider .dash-slider-mark-outside-selection {
  color: #999 !important;
}


/* Indicadores sobre el track */
#wall_slider .dash-slider-mark:before {
  background-color: #e9e9e9 !important;
}


/* Mantener las etiquetas extremas del slider dentro del marco */
#wall_slider {
  width: calc(100% - 36px) !important;
  margin-left: 18px !important;
  margin-right: 18px !important;
}