/*@import url("https://fonts.googleapis.com/css2?family=Public+Sans&display=swap");*/

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  height: 100%;
}

body {
  font-family: 'Roboto', sans-serif;
  /*font-size: 1.2rem;*/
  min-height: 100%;
  background-color: #282c34;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 50px;
}

/* Definicion del GRID ------------------------------------------*/
.grid-container>* {
  box-shadow: -1px 1px 7px 0px rgba(0, 0, 0, 0.75);
  border-radius: 5px;
  padding: 10px;
}

/* Tamaño MOVIL -------------------------------------------------*/
.grid-container {
  display: grid;
  gap: 5px 5px;
  grid-template:
    "header" 80px
    "navbar" 100px
    "main" auto
    "sidebar" 380px
    "footer" 40px;
}

/* Area HEADER -------------------------------------------------*/
.header {
  grid-area: header;

  background-color: rgb(193, 189, 189);
  padding: 20px 20px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
}

/* Area NAVBAR -------------------------------------------------*/
.navbar {
  grid-area: navbar;
  background-color: #194219;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  /*justify-content: space-between;*/
  padding: 5px 5px 0 5px;
  cursor: pointer;
  color: white;
  text-decoration: none;
}

.menu :hover {
  color: rgb(96, 97, 9);
}

.menu li {
  flex-basis: 165px;
  height: 25px;
}


/* Area SIDEBAR -------------------------------------------------*/
.sidebar {
  grid-area: sidebar;
  color: white;
  background-color: rgb(148, 148, 148);
}

.estados {
  width: 400px;
  display: flex;
  flex-direction: row;
  margin: 4px auto 4px;
  padding: 10px;
  border: 1px solid white;
  border-radius: 10px;
  color: white;
  background-color: rgba(0, 0, 0, 0.3);
}

#botestado {
  background-color: transparent;
  border: 0px;
}

#estadoGris {
  height: 68px;
  width: 66px;
  cursor: pointer;
}

#estadoOff {
  height: 68px;
  width: 66px;
  cursor: pointer;
}

#estadoOn {
  height: 68px;
  width: 66px;
  cursor: pointer;
}

#botmodo {
  background-color: transparent;
  border: 0px;
}

#modoMan {
  height: 66px;
  width: 137px;
  cursor: pointer;
}

#modoAuto {
  height: 66px;
  width: 137px;
  cursor: pointer;
}

#modoGris {
  height: 66px;
  width: 137px;
  cursor: pointer;
}

.texto {
  padding: 5px 0 5px 12px;
  font-size: 0.9rem;
}

.carga {
  padding: 2px 0 0 20px;
}

.niveles {
  width: 400px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 4px auto 4px;
  padding: 10px;
  border: 1px solid white;
  border-radius: 10px;
  color: white;
  background-color: rgba(0, 0, 0, 0.3);
}

.cadanivel {
  box-sizing: content-box;
  padding: 1% 1%;
  margin-bottom: 9px;
  border: 1px solid black;
  border-radius: 10px;
  background-color: white;
  box-shadow: 2px 5px 5px 1px rgb(34, 34, 34);
}

.ledzonas {
  width: 400px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 4px auto 4px;
  border: 1px solid white;
  border-radius: 10px;
  color: white;
  background-color: rgba(0, 0, 0, 0.3);
}

.cadaled {
  width: 50px;
  height: 50px;
  position: relative;
}

.cadaled img {
  width:100%;
  height:100%;
}

.cadaled p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cadaled sensor {
  pointer-events: none;
}


/* Area MAIN -------------------------------------------------*/
.main {
  grid-area: main;
  /*color: whitesmoke;*/
  background: linear-gradient(#26202033, rgba(290, 290, 290, 0.1)), url("campo1.jpg") no-repeat center fixed;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: start;
}

.todo {
  display: none;
}

.tablariego {
  width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  margin: 8px;
  border: 1px solid white;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.3);
}

.tablariego legend {
  color: white;
}

.tablaform {
  display: block;
  margin: 8px;
  border: 2px solid #080000;
  border-radius: 10px;
  color: black;
}

.tabla {
  width: 350px;
  background-color: rgba(142, 142, 142, 0.5);
  border-spacing: 3px;
  box-shadow: 2px 5px 5px 1px rgb(34, 34, 34);
}

th {
  width: auto;
  background-color: rgb(217, 57, 57);
  border-radius: 5px;
  text-align: left;
}

.inicial {
  background-color: yellow;
  text-align: center;
  color: blue;
}

.filas {
  background-color: rgb(223, 223, 223);
  text-align: right;
  color: black;
}

.filas:hover {
  background-color: rgb(199, 250, 170);
}

.entrada {
  border: 0px;
  padding: 0px;
  font-family: inherit;
  font-size: inherit;
  text-align: inherit;
  background-color: inherit;
  width: 78px;
}

.entrada:hover {
  background-color: inherit;
}

.calculada {
  color: rgb(212, 212, 8);
}

.enviar {
  font-family: inherit;
  font-size: inherit;
  font-weight: bold;
  padding-inline: 12px;
  padding-block: 2px;
  border-radius: 5px;
  box-shadow: 2px 5px 5px 1px rgb(34, 34, 34);
  cursor: pointer;
  transition: 0.2s all;
  background-color: rgb(212, 212, 8);
}

.enviar:hover {
  background-color: inherit;
}

.enviar:active {
  transform: scale(0.95);
  background-color: rgb(202, 165, 199);
}

.boton {
  font-size: inherit;
  padding-inline: 12px;
  padding-block: 2px;
  border-radius: 5px;
  cursor: not-allowed;
  background-color: rgb(204, 204, 204);
  pointer-events: none;
}

input:out-of-range {
  box-shadow: 0 0 5px 1px red;
}

input:invalid {
  background-color: rgb(112, 223, 238);
}

input:required {
  background-color: rgb(0, 89, 255);
}

.selector {
  margin: 15px;
  display: flex;
  color: white;
  border-radius: 10px;
  border: 2px solid #080000;
  background-color: rgba(142, 142, 142, 0.5);
  box-shadow: 2px 5px 5px 1px rgb(34, 34, 34);
}


.riegoManual {
  display: block;
}

.parsens {
  width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin: 8px;
  border: 1px solid white;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;

}

.senlista {
  margin: 3px;
  display: flex;
  flex-direction: row;
  border-radius: 10px;
  border: 2px solid #080000;
  background-color: rgba(142, 142, 142, 0.5);
  box-shadow: 2px 5px 5px 1px rgb(34, 34, 34);
  font-size: 0.9rem;
}

.senactiv {
  display: flex;
  flex-direction: column;
  margin: 15px 0 10px 10px;
  font-size: 0.8rem;
  color: aqua;
}

.senactiv legend {
  color: black;
  font-weight: bold;
}

.sensincro {
  display: flex;
  flex-direction: column;  
  margin: 15px 5px 0 5px;
  font-size: 0.8rem;
  color: aqua;
}

.sensincro legend {
  margin: 0 -3px;
  color: black;
  font-weight: bold;
}

.sensincro input[type="checkbox"] {
  pointer-events: none;
  font-size: 0.8rem;
}

#tmplect {
  width: 3em;
}

#tmplect:invalid+span::after {
  content: "Cantidad horas invalidas";
  padding-left: 5px;
}

#tmplect:valid+span::after {
  content: " ";
  padding-left: 5px;
}

/*----------------------------------------------------*/

.sd {
  width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 8px;
  border: 1px solid white;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
}

.sdEstado {
  width: 300px;
  flex-direction: column;
  justify-content: left;
  margin: 12px;
  color: black;
  font-weight: bold;
}

.sdCont {
  color: aqua;
  font-weight: normal;
}

.sdFicheros {
  display: block;
  height: 190px;
  margin: 8px;
  border: 2px solid #080000;
  box-shadow: 2px 5px 5px 1px rgb(34, 34, 34);
  border-radius: 10px;
  background-color: rgba(142, 142, 142, 0.5);
  padding-inline-start: 5px;
  padding-inline-end: 8px;
}

.sdficheros legend {
  color: white;
}

#sdList {
  padding-inline-start: 5px;
  padding-inline-end: 8px;
  font-size: 0.8rem;
  font-family: "Courier New";
  overflow-y: scroll;
  height: 150px;
  color: aqua;
}

.sdBotones {
  width: 300px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 10px auto 4px;
  padding: 0 0 0 43px;
}


/* Area FOOTER -------------------------------------------------*/
.footer {
  grid-area: footer;
  background-color: #43566a;

}

.contfooter {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 10px;
  color: white;
}


/* Tamaño TABLET -------------------------------------------------*/
@media (min-width: 630px) {
  .grid-container {
    grid-template:
      "header   header" 80px
      "navbar   navbar" 70px
      "main     sidebar" auto
      "footer   footer" 40px /
      auto 240px;

    .estados {
      width: 226px;
      flex-direction: column;
      align-items: start
    }

    .niveles {
      width: 226px;
      flex-direction: column;
    }

    .ledzonas {
      width: 205px;
    }
  }
}

/* Tamaño PC -------------------------------------------------*/
@media (min-width: 1050px) {
  .grid-container {
    grid-template:
      "header  header header" 80px
      "navbar  main   sidebar" auto
      "footer  footer footer" 40px /
      196px auto 435px;

    .menu {
      flex-direction: column;
      align-items: flex-start;
      line-height: 3em;
      /*padding: 0;*/
    }

    .menu li {
      flex-basis: content;
      height: 25px;
    }

    .estados {
      width: 400px;
      flex-direction: row;
    }

    .niveles {
      width: 400px;
      flex-direction: row;
    }

    .ledzonas {
      width: 400px;
      flex-direction: row;
    }
  }
}