*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*Layout general*/
.contenedor
{
    display: grid;
    max-width: 1250px;
    margin: 0 auto;
}

header
{
  grid-area: header;
  width: 100%;
  margin-bottom: 10px;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none; 
  -moz-user-select: none;
  -ms-user-select: none; 
  user-select: none;
}
.headerIndex
{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
nav
{
    grid-area: navegacion;
}
main
{
  grid-area: main;
  width: 100%;
  
  display: flex;
  flex-direction: column;
}
footer
{
  grid-area: footer;
  width: 100%;
  padding: 20px;
  margin-top: 15px;
  border-top: 1px solid rgba(225, 225, 225, 0.2);
}
/*Predefined classes*/
.hidden
{
    display: none;
}
.flex-column
{
    display: flex;
    flex-direction: column;
}
.flex-row
{
    display: flex;
    flex-direction: row;
    /*flex-wrap: wrap;*/
}
.flex-space-between
{
    justify-content: space-between;
}
.flex-space-around {
  justify-content: space-around;
}
.flex-end
{
    justify-content: flex-end;
}
.flex-start
{
    justify-content: flex-start;
}
.flex-center
{
    justify-content: center;
}
.flex-wrap
{
    flex-wrap: wrap;
}
.flex-align-center {
  align-items: center;
}
.flex-align-start {
  align-items: flex-start;
}
.flex-align-end {
  align-items: flex-end;
}

/*Estilos generales*/
body 
{
  font-family: Lato, Lato Black, Lato Hairline, Lato Light;
  font-size: 12px;
}
.DivLogo
{
    width: 100%;
}
a
{
    cursor: pointer;    
}
a:link 
{
  text-decoration: none; 
}

a:visited 
{
  text-decoration: none;
}

a:hover 
{
  text-decoration: none;
}

a:active 
{
  text-decoration: none; 
}
li
{
    list-style-type: none;
}
input, select
{
    margin: 0 5px;
}
input[type = submit], .button, button
{
    transition: background .5s;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
}
.button, button
{
    margin: 5px 5px;
}
input[type = text],
input[type = date],
input[type = time],
input[type = password],
select
{
    transition: border .5s;
    border-radius: 5px;
    padding-left: 5px;
    width: 120px;
}
.login-wrap input[type = text],
.login-wrap input[type = password]
{
    width: 50%;
    margin: 15px 0;
    font-size: 16px;
    padding: 10px;
}

input[type = text]
{
    width: 100px;
}
input[type = text]:focus,
input[type = password]:focus
{
    border: 1px solid #4D6C7D;
}
main table
{
    border-collapse: collapse;
    width: 100%;
    padding: 5px;
    margin: 10px 0;
}
main th, main td
{
    text-align: center;
    padding: 5px;
}
.wrap-vaciado
{
    width: 30%;
    margin: 0 auto;
    margin-top: 15px;
    padding: 10px;
    border-radius: 3px;
}
.wrap-vaciado div
{
    margin: 5px 5px;
}
.table-container
{
    width: 100%;
    overflow-y: auto;
}
.tabulacion
{
    margin-bottom: 5px;
    margin-top: 20px;
}
.tabulacion a
{
    cursor: pointer;
}
.contenido-acceso
{
    margin: 0;
}
.login-wrap .flex-row
{
    justify-content: flex-end;
    line-height: 65px;
}
.login-wrap .flex-row h2
{
    margin-right: 15px;
}
.login-wrap .flex-row input[type = submit]
{
    width: 25%;
    transition: none;
    font-size: 18px;
    padding: 10px;
    cursor: pointer;
}
.logoSCMI
{
    padding: 15px;
    width: 100%;
    height: 100%;
}
.divThermo
{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.logoThermo
{
    padding-left: 5px;
    padding-bottom: 10px;
}
.tituloinicio
{
    border-bottom: 1px solid rgba(225, 225, 225, 0.2);
    padding-bottom: 15px;
}
.bg-azul-claro
{
    background: rgba(0,89,187, 0.4);
}
.tienda
{
    line-height: 40px;
    justify-content: flex-start;
    padding-left: 15%;
    padding-top: 10px;
    padding-bottom: 10px;
}
.tienda h3
{
    margin-left: 15px;
    font-size: 18px;
}
.tienda:hover
{
    background: #0059bb;
}
.navegacion-div
{
    border-left: 3px solid #333333;
    padding: 2px;
    padding-left: 50px;
    padding-right: 50px;
    line-height: 50px;
}
.titulo-temperatura
{
    font-size: 16px;
    padding: 10px;
    border-bottom: 1px solid white;
}
.rango-temperatura
{
    width: 100%;
    padding-left: 18px;
    padding-right: 15px;
    padding-bottom: 10px;
}
.barra-temperatura
{
    width: 100%;
    padding: 20px;
    padding-bottom: 10px;
    border-top: 1px solid white;
}
.termometro-temperatura
{
    padding: 2px;
    border-left: 1px solid white;
    width: 20%;
    height: 100%;
}
.img-accesorio
{
    margin: 25px;
}
.gota-humedad
{
    width: 40%;
    height: 100%;
}
.valor-temperatura
{
    font-size: 38px;
    padding: 10px;
}
.panel
{
    margin: 15px 15px;
    background: #000;
}
.box
{
    padding: 10px;
    margin: 5px 5px;
    border: 3px solid white;
    text-align: center;
}
.panel-voltaje
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.panel-energia
{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.panel-temperatura
{
    width: 100%;
}
.panel-humedad
{
    width: 50%;
    border-left: 1px solid white;
}
.disabled
{
    background: grey;
    cursor: auto;
}
.disabled:hover
{
    background: grey;
}
.barra
{
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: auto;
}
.roja
{
    background: #DB214C;
}
.naranja
{
    background: #EE9A69;
}
.verde
{
    background: #449284;
}
.selected
{
    border: 5px solid #AECAD9;
}
.paginacion
{
    padding: 3px;
    margin-top: 10px;
}

.paginacion.active
{
    color: white;
}

.horiz-bar
{
    margin: 2px 2px;
    padding: 2px 15px;
    background: black;
    border-radius: 4px;
}

.led-encendido
{
    background: green;
    padding: 15px;
    border-radius: 30px;
}

.led-apagado
{
    background: red;
    padding: 15px;
    border-radius: 30px;
}
.led-nada
{
    padding: 15px;
}

#titulo-acceso
{
    border-bottom: 1px solid rgba(225, 225, 225, 0.2);
    padding-bottom: 10px;
}
#argumento
{
    padding: 5px;
    width: 200px;
    margin-top: 15px;
    margin-bottom: 10px;
}

.tab
{
    margin: 0 10px;
    font-size: 18px;
    margin-bottom: 10px;
    cursor: pointer;
}

.config-tab-area
{
    min-height: 300px;
}

.config-tab-area table
{
    margin: 10px 0;
}

.tab:hover
{
    color: orange;
}

.tab.active
{
    color: orange;
}

/*agrego sofia, revisar*/
.boton {
  color: #fff;
  font-size: 18px; }
  
.boton a:link {
  color: #fff;
  font-size: 18px; }

.botondesabilitado {
  color: #ccc;
  font-size: 16px; 
  pointer-events: none !important;
  cursor: default;
  }
.botondesabilitado a {
  color: #999;
  font-size: 16px; 
  pointer-events: none !important;
  cursor: default;
  }
input[type = date],
input[type = time], 
input[type=text]:disabled {
    background: #92b6dd;
}

input[type = password]:disabled {
    background: #92b6dd;
    color: #F29400;	
}


main2
{
  grid-area: main;
  width: 100%;
  
  display: flex;
  flex-direction: column;
}

main2 table
{
    border-collapse: collapse;
    width: 60%;
    padding: 2px;
}
main2 th, main2 td
{
    text-align: left;
    padding: 2px;
    border: 1px solid ;
}
th{
	  background: #000;
	   border: 1px solid ;
}