@import url("https://fonts.googleapis.com/css?family=Poppins");
.configuracion {
  font-family: "Poppins", sans-serif;
  background: #0e4ba5;
  background: -webkit-gradient(linear, left top, left bottom, from(#0e4ba5), to(#062047));
  background: linear-gradient(to bottom, #0e4ba5 0%, #062047 100%);
  padding: 4.2em 0;
  padding-bottom: 0;
  min-height: 100vh;
  background-attachment: fixed;
}

@-webkit-keyframes rotar {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotar {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.configuracion .loading {
  position: fixed;
  bottom: 0px;
  right: 0;
  z-index: 2550;
  width: 100%;
  background: rgba(3, 15, 26, 0.856);
  padding: 0.5em;
}

.configuracion .loading span {
  color: white;
  position: relative;
  bottom: 8px;
}

.configuracion .loading .cargando {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid white;
  border-bottom: 2px solid transparent;
  -webkit-animation: rotar 1s linear infinite;
          animation: rotar 1s linear infinite;
  display: inline-block;
  margin-right: 1em;
}

@-webkit-keyframes popup {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes popup {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.configuracion .popup {
  position: fixed;
  color: white;
  left: 1em;
  top: 4em;
  padding: 1em;
  -webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.144);
          box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.144);
  border-radius: 2px;
  z-index: 150;
  -webkit-animation: popup 5s ease-out;
          animation: popup 5s ease-out;
}

@media (max-width: 550px) {
  .configuracion .popup {
    left: 0.4em;
    max-width: 90vw;
    text-align: center;
    padding: 0.5em;
    top: 3.6em;
  }
}

.configuracion .popup .err {
  opacity: 0.8;
}

.configuracion .popup div {
  position: relative;
}

.configuracion .popup div i {
  position: absolute;
  right: -0.5em;
  top: -0.7em;
  cursor: pointer;
  opacity: 0.8;
}

@media (max-width: 550px) {
  .configuracion .popup div i {
    right: -0.2em;
    top: -0.2em;
  }
}

.configuracion .popup div i:hover {
  opacity: 1;
}

.configuracion .popup.OK {
  background: #00ce00;
  background: -webkit-gradient(linear, left top, left bottom, from(#00ce00), to(#00ba00));
  background: linear-gradient(to bottom, #00ce00 0%, #00ba00 100%);
}

.configuracion .popup.ERROR {
  background: red;
  background: #b80000;
  background: -webkit-gradient(linear, left top, left bottom, from(#b80000), to(#a40000));
  background: linear-gradient(to bottom, #b80000 0%, #a40000 100%);
}

.configuracion .container {
  background: #fafafa;
  color: black;
  border-radius: 5px;
  padding-right: 0;
  padding-left: 0;
  overflow: hidden;
  min-height: 81vh;
}

@media (max-width: 500px) {
  .configuracion .container {
    min-height: 35vh;
  }
}

.configuracion .container h1 {
  text-align: center;
  font-weight: lighter;
  font-size: 2.2em;
  padding: 0.2em;
  color: white;
  background: #0090f0;
  background: -webkit-gradient(linear, left top, left bottom, from(#0090f0), to(#0081d7));
  background: linear-gradient(to bottom, #0090f0 0%, #0081d7 100%);
}

@media (max-width: 600px) {
  .configuracion .container h1 {
    font-size: 1.5em;
  }
}

.configuracion .container .formulario {
  background: white;
  margin: 1.5em;
  margin-top: 0;
  overflow: hidden;
  padding-top: 0.5em;
}

@media (max-width: 600px) {
  .configuracion .container .formulario {
    margin: 0.8em;
    margin-top: 0;
  }
}

.configuracion .container .formulario h2 {
  text-align: center;
  font-weight: lighter;
  font-size: 1.8em;
  background: #1d61b9;
  background: -webkit-gradient(linear, left top, left bottom, from(#1363cc), to(#0f4ea0));
  background: linear-gradient(to bottom, #1363cc 0%, #0f4ea0 100%);
  color: white;
  border-radius: 3px;
  cursor: pointer;
  -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.24);
          box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.24);
  padding: 1em;
  width: 100%;
  min-height: 144px;
  line-height: 1.5em;
  margin: 0.5em auto;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.configuracion .container .formulario h2:hover {
  background: #124f9e;
  background: -webkit-gradient(linear, left top, left bottom, from(#0067ee), to(#0055c5));
  background: linear-gradient(to bottom, #0067ee 0%, #0055c5 100%);
}

.configuracion .container .formulario h2.elevada {
  background: #2ec700;
  background: -webkit-gradient(linear, left top, left bottom, from(#2ec700), to(#229301));
  background: linear-gradient(to bottom, #2ec700 0%, #229301 100%);
}

.configuracion .container .formulario h2.elevada:hover {
  background: #27a701;
  background: -webkit-gradient(linear, left top, left bottom, from(#27a701), to(#1e7c01));
  background: linear-gradient(to bottom, #27a701 0%, #1e7c01 100%);
}

@keyframes rotar {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.configuracion .container .formulario h2:before {
  content: "\f013";
  position: absolute;
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  left: 30%;
  top: 30%;
  color: white;
  font-size: 10em;
  padding: 0.3em 0.55em;
  border-radius: 50%;
  opacity: 0.1;
  -webkit-animation: rotar 20s infinite linear;
          animation: rotar 20s infinite linear;
}

@media (max-width: 992px) {
  .configuracion .container .formulario h2:before {
    left: 50%;
  }
}

@media (max-width: 768px) {
  .configuracion .container .formulario h2:before {
    left: 30%;
  }
}

@media (max-width: 450px) {
  .configuracion .container .formulario h2:before {
    left: 20%;
    font-size: 8em;
  }
}

@media (max-width: 600px) {
  .configuracion .container .formulario h2 {
    font-size: 1.5em;
    min-height: 120px;
    margin: 0.25em auto;
  }
}

.configuracion .container .formulario .window {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  z-index: 100;
}

.configuracion .container .formulario .window > i {
  position: fixed;
  top: 2.5em;
  right: 0.5em;
  color: white;
  font-size: 1.5em;
  cursor: pointer;
  background: black;
  padding: 0.35em 0.52em;
  z-index: 240;
  border-radius: 50%;
  opacity: 0.8;
}

.configuracion .container .formulario .window > i:hover {
  opacity: 1;
}

.configuracion .container .formulario .window .overlaywindow {
  background: rgba(0, 0, 0, 0.815);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.configuracion .container .formulario .inputs {
  border-radius: 2px;
  overflow-x: hidden;
  margin-bottom: 1em;
  background: white;
  z-index: 200;
  width: 90%;
  position: fixed;
  max-height: 90vh;
  position: absolute;
  overflow-y: auto;
  top: 53%;
  left: 50%;
  -webkit-transform: translate(-50%, -49%);
          transform: translate(-50%, -49%);
  min-height: 50vh;
  max-width: 1140px;
  -webkit-filter: blur(0px);
  -webkit-font-smoothing: antialiased;
}

.configuracion .container .formulario .inputs .emptySec h3 {
  border-bottom: none;
  margin-top: 1em;
}

@media (max-width: 600px) {
  .configuracion .container .formulario .inputs .emptySec h3 {
    font-size: 1em;
  }
}

.configuracion .container .formulario .inputs button {
  background: #2068b9;
  color: white;
  outline: none;
  border: none;
  display: block;
  width: 100%;
  font-family: "Poppins", sans-serif;
  padding: 0.6em;
  cursor: pointer;
  font-size: 1em;
}

.configuracion .container .formulario .inputs button:hover {
  background: #1c5ca3;
}

.configuracion .container .formulario .inputs p.parrafoerror {
  color: #290000;
  text-align: center;
  margin-bottom: 1em;
  background: #ffc5c5;
  border: 1px solid #ff3131;
  padding: 1em;
}

.configuracion .container .formulario .inputs p.mensaje {
  padding: 0.5em;
  background: #f5f8ff;
  color: #011a6b;
  border: 1px solid rgba(205, 223, 233, 0.671);
  text-align: left;
}

@media (max-width: 600px) {
  .configuracion .container .formulario .inputs p.mensaje {
    text-align: center;
  }
}

.configuracion .container .formulario .inputs .row.editar {
  padding: 1em 2em;
}

@media (max-width: 600px) {
  .configuracion .container .formulario .inputs .row.editar {
    padding: 1em;
  }
}

.configuracion .container .formulario .inputs h3 {
  color: #0c2744;
  font-size: 1.4em;
  margin-bottom: 1em;
  text-align: center;
  padding: 0.5em;
  padding-bottom: 0.3em;
  background: #fdfeff;
  position: relative;
}

.configuracion .container .formulario .inputs h3:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 1px;
  width: 80%;
  background: #0162c9;
}

@media (max-width: 600px) {
  .configuracion .container .formulario .inputs h3 {
    margin-top: 0;
  }
}

.configuracion .container .formulario .inputs .puntos input,
.configuracion .container .formulario .inputs .puntos select {
  max-width: 20em;
  font-size: 0.8em;
}

@media (max-width: 500px) {
  .configuracion .container .formulario .inputs .puntos input,
  .configuracion .container .formulario .inputs .puntos select {
    max-width: 13em;
  }
}

.configuracion .container .formulario .inputs .puntos label {
  margin-top: 1.5em;
  margin-bottom: 0.8em;
  border-bottom: 1px solid #0c274436;
  padding-bottom: 0.5em;
}

.configuracion .container .formulario .inputs label {
  display: block;
  margin-bottom: 0.1em;
  color: #050a0c;
  font-size: 1.05em;
}

.configuracion .container .formulario .inputs label i {
  float: right;
  cursor: pointer;
  padding: 0.4em 0.45em;
  background: #2068b9;
  color: white;
  border-radius: 50%;
  position: relative;
  bottom: 5px;
  border: 2px solid rgba(0, 0, 0, 0.162);
}

.configuracion .container .formulario .inputs label i:hover {
  background: #18508e;
}

.configuracion .container .formulario .inputs label small {
  margin-left: 1em;
  color: #2c2c2c;
}

.configuracion .container .formulario .inputs input,
.configuracion .container .formulario .inputs select {
  font-family: "Poppins", sans-serif;
  font-size: 0.9em;
  padding: 0.35em 0.5em;
  outline: none;
  margin-bottom: 0.6em;
  border: 1px solid #f2f9ff;
  border-bottom-color: rgba(0, 144, 228, 0.685);
  padding-left: 3px;
  background: #f5f8ff27;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.configuracion .container .formulario .inputs input.red,
.configuracion .container .formulario .inputs select.red {
  border: 1px solid #fff2f2;
  border-bottom-color: rgba(228, 0, 0, 0.685);
  padding-left: 3px;
  background: #fff5f527;
}

.configuracion .container .formulario .inputs input.red:focus,
.configuracion .container .formulario .inputs select.red:focus {
  border-bottom-color: #c00202;
}

.configuracion .container .formulario .inputs input.sectorSelector,
.configuracion .container .formulario .inputs select.sectorSelector {
  display: block;
  margin: 1em auto;
  text-align: center;
  font-size: 1.5em;
  background: #05458a;
  background: -webkit-gradient(linear, left top, left bottom, from(#05458a), to(#054080));
  background: linear-gradient(to bottom, #05458a 0%, #054080 100%);
  color: white;
  margin-bottom: 0;
  text-align-last: center;
  width: 70%;
  border-radius: 3px;
  border: 1px solid #002a5a;
  padding: 0.3em 0;
}

.configuracion .container .formulario .inputs input.sectorSelector:hover, .configuracion .container .formulario .inputs input.sectorSelector:focus,
.configuracion .container .formulario .inputs select.sectorSelector:hover,
.configuracion .container .formulario .inputs select.sectorSelector:focus {
  background: #043d7a;
  background: -webkit-gradient(linear, left top, left bottom, from(#043d7a), to(#043870));
  background: linear-gradient(to bottom, #043d7a 0%, #043870 100%);
}

.configuracion .container .formulario .inputs input.sectorSelector option,
.configuracion .container .formulario .inputs select.sectorSelector option {
  background: #05458a;
}

@media (max-width: 600px) {
  .configuracion .container .formulario .inputs input.sectorSelector,
  .configuracion .container .formulario .inputs select.sectorSelector {
    font-size: 1.2em;
  }
}

.configuracion .container .formulario .inputs input:focus,
.configuracion .container .formulario .inputs select:focus {
  border-bottom-color: #026bc0;
}

.configuracion .container .formulario .inputs input:hover,
.configuracion .container .formulario .inputs select:hover {
  background: #f5f9ff9c;
}

.configuracion .container .formulario .inputs .punto {
  margin-right: 1em;
  font-weight: bolder;
  color: #474747;
}

@media (max-width: 600px) {
  .configuracion .container .formulario .inputs .punto {
    margin-right: 0.5em;
  }
}

.configuracion .container .formulario .inputs .caudal {
  margin-top: 0.5em;
}

.configuracion .container .formulario .inputs .caudal .row {
  margin-top: 0.6em;
}

.configuracion .container .formulario .inputs .caudal .row label {
  display: block;
  width: 2em;
  height: 2em;
  background: red;
  border-radius: 50%;
  margin-bottom: 8px;
  border: 2px solid rgba(0, 0, 0, 0.156);
  opacity: 0.84;
  cursor: pointer;
  -webkit-box-shadow: inset 2px -1px 1px 2px rgba(255, 255, 255, 0.25);
          box-shadow: inset 2px -1px 1px 2px rgba(255, 255, 255, 0.25);
}

.configuracion .container .formulario .inputs .caudal .row label.green {
  background: green;
}

.configuracion .container .formulario .inputs .caudal .row label.yellow {
  background: #ff9900;
}

.configuracion .container .formulario .inputs .caudal .row label:hover {
  opacity: 1;
}

.configuracion .container .formulario .inputs .caudal .data input {
  width: 5em;
}

.configuracion .container .formulario .inputs .caudal .data span {
  margin-right: 1em;
}

.configuracion .container .formulario .inputs .entrada div span,
.configuracion .container .formulario .inputs .salida div span,
.configuracion .container .formulario .inputs .medio div span,
.configuracion .container .formulario .inputs .critico div span,
.configuracion .container .formulario .inputs .otros div span,
.configuracion .container .formulario .inputs .bomba div span,
.configuracion .container .formulario .inputs .tanque div span {
  display: inline-block;
  min-width: 2em;
}

.configuracion .container .formulario .inputs .entrada div i,
.configuracion .container .formulario .inputs .salida div i,
.configuracion .container .formulario .inputs .medio div i,
.configuracion .container .formulario .inputs .critico div i,
.configuracion .container .formulario .inputs .otros div i,
.configuracion .container .formulario .inputs .bomba div i,
.configuracion .container .formulario .inputs .tanque div i {
  margin-left: 0.5em;
  font-size: 1.5em;
  padding: 0.5em 0.55em;
  color: #b90707;
  cursor: pointer;
  position: relative;
  top: 4px;
}

.configuracion .container .formulario .inputs .entrada div i:hover,
.configuracion .container .formulario .inputs .salida div i:hover,
.configuracion .container .formulario .inputs .medio div i:hover,
.configuracion .container .formulario .inputs .critico div i:hover,
.configuracion .container .formulario .inputs .otros div i:hover,
.configuracion .container .formulario .inputs .bomba div i:hover,
.configuracion .container .formulario .inputs .tanque div i:hover {
  color: #9b0707;
}

.configuracion .container .formulario .inputs .botonesConf.crear {
  margin-bottom: -1em;
}

.configuracion .container .formulario .inputs .botonesConf.crear .delete {
  background: #d30000;
}

.configuracion .container .formulario .inputs .botonesConf.crear .delete:hover {
  background: #e70000;
}

.configuracion .container .formulario .inputs .botonesConf.crear .restaurar {
  background: #303030;
}

.configuracion .container .formulario .inputs .botonesConf.crear .restaurar:hover {
  background: #1d1d1d;
}

.configuracion .container .formulario .inputs .botonesConf.crear button {
  display: block;
}

@media (max-width: 768px) {
  .configuracion .container .formulario .inputs .botonesConf.crear button {
    margin-bottom: 0.5em;
  }
}

.configuracion .container .formulario .inputs .contenedorMaps {
  padding: 2em;
  position: relative;
  padding-top: 1em;
}

@media (max-width: 600px) {
  .configuracion .container .formulario .inputs .contenedorMaps {
    padding: 1em;
  }
}

.configuracion .container .formulario .inputs .contenedorMaps .googleCuadro h3 {
  border-bottom: none;
  margin-bottom: 0;
}

.configuracion .container .formulario .inputs .contenedorMaps .googleCuadro h3:after {
  display: none;
}

.configuracion .container .formulario .inputs .contenedorMaps .googleCuadro h4 {
  text-align: center;
  padding-bottom: 0.8em;
}

.configuracion .container .formulario .inputs .contenedorMaps .botonera {
  position: absolute;
  bottom: auto;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}

.configuracion .container .formulario .inputs .contenedorMaps .botonera .descarga {
  display: none;
}

.configuracion .container .formulario .inputs .botonesConf {
  margin-top: 3em;
}

.alarmas {
  font-family: "Poppins", sans-serif;
  background: #0e4ba5;
  background: -webkit-gradient(linear, left top, left bottom, from(#0e4ba5), to(#062047));
  background: linear-gradient(to bottom, #0e4ba5 0%, #062047 100%);
  padding: 4.2em 0;
  padding-bottom: 0;
  min-height: 100vh;
  background-attachment: fixed;
}

.alarmas .container {
  background: white;
  color: black;
  border-radius: 5px;
  padding-right: 0;
  padding-left: 0;
  overflow: hidden;
  min-height: 81vh;
}

.alarmas .container h1 {
  text-align: center;
  font-weight: lighter;
  font-size: 2.2em;
  padding: 0.2em;
  color: white;
  background: #0090f0;
  background: -webkit-gradient(linear, left top, left bottom, from(#0090f0), to(#0081d7));
  background: linear-gradient(to bottom, #0090f0 0%, #0081d7 100%);
}

@media (max-width: 600px) {
  .alarmas .container h1 {
    font-size: 1.9em;
  }
}

.alarmas .container .content {
  padding: 1.5em;
  background: white;
}

@media (max-width: 500px) {
  .alarmas .container .content {
    padding: 0 1.5em;
  }
}

.alarmas .container .content .margenNeg {
  margin-top: -5px;
}

@media (max-width: 750px) {
  .alarmas .container .content .margenNeg {
    margin-top: 8px;
  }
}

.alarmas .container .content .porcentaje {
  max-width: 95% !important;
  -webkit-box-flex: 0 !important;
      -ms-flex: 0 0 95% !important;
          flex: 0 0 95% !important;
  margin: 0 auto !important;
}

@media (max-width: 1000px) {
  .alarmas .container .content .porcentaje {
    max-width: 100% !important;
    -webkit-box-flex: 0 !important;
        -ms-flex: 0 0 100% !important;
            flex: 0 0 100% !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 500px) {
  .alarmas .container .content .lista {
    margin: 0 -1em;
  }
}

@media (max-width: 400px) {
  .alarmas .container .content {
    padding: 0 1em;
    margin: 0.6em;
  }
}

.alarmas .container .content label {
  display: block;
  margin-bottom: 0.2em;
  color: #001866;
}

.alarmas .container .content input,
.alarmas .container .content select {
  font-size: 0.85em;
  display: inline-block;
  font-family: "Poppins", sans-serif;
  padding: 0.4em;
  outline: none;
  border: 1px solid black;
  margin-bottom: 0.5em;
  background: white;
  border-radius: 2px;
}

.alarmas .container .content input:focus,
.alarmas .container .content select:focus {
  border: 1px solid #0c2744;
}

.alarmas .container .content .margen {
  margin: 1.5em auto;
}

.alarmas .container .content .config h4 {
  text-align: center;
  font-weight: lighter;
  font-size: 1.3em;
  background: #0084db;
  color: white;
  border-radius: 3px;
  padding: 0.2em;
  border-bottom: 2px solid #104680;
  position: relative;
  cursor: pointer;
}

.alarmas .container .content .config h4:before {
  content: "\f107";
  position: absolute;
  font-weight: 900;
  font-size: 0.9em;
  font-family: "Font Awesome 5 Free";
  right: 1em;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(0deg);
          transform: translateY(-50%) rotate(0deg);
  background: rgba(0, 0, 0, 0.438);
  padding: 0.3em 0.55em;
  border-radius: 50%;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.alarmas .container .content .config h4.visible:before {
  -webkit-transform: translateY(-50%) rotate(180deg);
          transform: translateY(-50%) rotate(180deg);
}

.alarmas .container .content button {
  background: #2068b9;
  color: white;
  outline: none;
  border: none;
  display: block;
  font-family: "Poppins", sans-serif;
  padding: 0.6em 1em;
  margin-top: 1em;
  cursor: pointer;
  font-size: 1em;
  width: 48%;
}

@media (max-width: 600px) {
  .alarmas .container .content button:last-child {
    margin-left: -0.5em;
  }
}

@media (max-width: 600px) {
  .alarmas .container .content button {
    margin-top: 0.5em;
    font-size: 0.75em;
    display: inline-block;
    padding: 0.5em 1em;
  }
}

.alarmas .container .content button:hover {
  background: #1c5ca3;
}

.alarmas .container .content .pError {
  color: red;
  margin: 1em auto;
  text-align: center;
}

.alarmas .container .content table {
  border-spacing: 0;
  text-align: center;
  border: 2px solid #16598f;
  border-radius: 3px;
  overflow: hidden;
  margin: 2em auto;
  margin-bottom: 4em;
  width: 100%;
}

@media (min-width: 700px) {
  .alarmas .container .content table {
    font-size: 110%;
  }
}

.alarmas .container .content table thead {
  background: #006ab1;
  color: white;
}

.alarmas .container .content table thead th {
  padding: 0.5em 1.2em;
  font-weight: lighter;
  border-bottom: 2px solid #16598f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1250px) {
  .alarmas .container .content table thead th {
    font-size: 0.85em;
  }
}

@media (max-width: 450px) {
  .alarmas .container .content table thead th {
    padding: 0.5em 0.4em;
    font-size: 0.92em;
  }
}

.alarmas .container .content table thead th:not(:last-child) {
  position: relative;
}

.alarmas .container .content table thead th:not(:last-child):after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 1px;
  height: 55%;
  background: #2c8fdf;
}

.alarmas .container .content table tbody tr:nth-child(even) {
  background: #f4faff;
}

.alarmas .container .content table tbody tr:nth-child(odd) {
  background: #fff;
}

.alarmas .container .content table tbody tr td {
  border-top: 1px solid #c7dae9;
}

.alarmas .container .content table tbody td {
  padding: 0.5em 1.2em;
  color: #444444;
  font-size: 0.95em;
}

.alarmas .container .content table tbody td:first-child {
  font-weight: bolder;
}

.alarmas .container .content table tbody td i {
  font-size: 1.5em;
  cursor: pointer;
  display: block;
  color: #f30000;
}

.alarmas .container .content table tbody td i:hover {
  color: #dd0000;
}

@media (max-width: 1000px) {
  .alarmas .container .content table tbody td i {
    font-size: 1.3em;
  }
}

@media (max-width: 450px) {
  .alarmas .container .content table tbody td {
    font-size: 100%;
    padding: 0.6em;
  }
}

.alarmas .container .content table tbody td input,
.alarmas .container .content table tbody td select {
  width: 4.5em;
  font-size: 1em;
  display: inline-block;
  font-family: "Poppins", sans-serif;
  padding: 0.2em;
  outline: none;
  border: 1px solid rgba(0, 41, 94, 0.479);
  background: white;
  margin-bottom: 2px;
}

.alarmas .container .content table tbody td input:focus, .alarmas .container .content table tbody td input:hover,
.alarmas .container .content table tbody td select:focus,
.alarmas .container .content table tbody td select:hover {
  border: 1px solid #0d3969;
}

@media (max-width: 550px) {
  .alarmas .container .content table tbody td input,
  .alarmas .container .content table tbody td select {
    font-size: 0.75em;
    width: 4em;
  }
}

@media (max-width: 420px) {
  .alarmas .container .content table tbody td input,
  .alarmas .container .content table tbody td select {
    font-size: 0.8em;
    width: 4em;
  }
}

.alarmas .container .content table tbody td input {
  width: 3.5em;
  max-width: 90%;
}

.alarmas .container .content table tbody td input.presion {
  max-width: 100%;
  width: 3.5em;
}

@media (max-width: 420px) {
  .alarmas .container .content table tbody td input {
    width: 5em;
  }
}

.alarmas .container .content table tbody td:nth-child(2) input[type="text"] {
  width: 3.8em;
}

.alarmas .container .content .row .row .col-12 .d-inline-block {
  width: 48%;
}

@media (max-width: 500px) {
  .alarmas .container .content .row .row .col-12 .d-inline-block {
    width: 100%;
  }
}

.alarmas .container .content .row .row .col-12 .d-inline-block input,
.alarmas .container .content .row .row .col-12 .d-inline-block select {
  width: 100% !important;
  border: 1px solid #8aa6c5;
}

.alarmas .container .content .row .row .col-12 .d-inline-block input:hover, .alarmas .container .content .row .row .col-12 .d-inline-block input:focus,
.alarmas .container .content .row .row .col-12 .d-inline-block select:hover,
.alarmas .container .content .row .row .col-12 .d-inline-block select:focus {
  border: 1px solid #0d3969;
}

@media (max-width: 600px) {
  .alarmas .container .content .row .row .col-12 .d-inline-block:last-child label,
  .alarmas .container .content .row .row .col-12 .d-inline-block:last-child select {
    margin-left: -0.5em;
  }
}

@media (max-width: 500px) {
  .alarmas .container .content .row .row .col-12 .d-inline-block:last-child label,
  .alarmas .container .content .row .row .col-12 .d-inline-block:last-child select {
    margin-left: 0em;
  }
}

@media (max-width: 500px) {
  .alarmas .container .content .row .row .col-12 {
    text-align: center;
  }
}

@media (max-width: 500px) {
  .alarmas .container .content .row .row .col-12 button.d-inline-block {
    margin-left: 0;
    font-size: 0.9em;
  }
  .alarmas .container .content .row .row .col-12 button.d-inline-block.mr-3 {
    margin-right: 0px !important;
  }
}

#graph {
  border-radius: 4px;
  border: 2px solid #16598f;
}

.modal {
  z-index: 3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
}

.modal .overl {
  background: rgba(0, 0, 0, 0.829);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.modal .rowContainer {
  position: absolute;
  z-index: 1000;
  top: 50%;
  left: 50%;
  background: white;
  -webkit-transform: translateX(-50%) translateY(calc(-50% - 0.5px));
          transform: translateX(-50%) translateY(calc(-50% - 0.5px));
  border-radius: 3px;
  overflow: hidden;
}

.modal .rowContainer h4 {
  font-size: 1.4em;
  background: #0084db;
  color: white;
  padding: 0.25em 0.5em;
  font-weight: lighter;
  border: 1px solid #00aeff;
  border-bottom: 2px solid #0c2744;
}

@media (max-width: 550px) {
  .modal .rowContainer h4 {
    font-size: 1.2em;
  }
}

.modal .rowContainer .close {
  position: absolute;
  right: 0.5em;
  top: 0.25em;
  font-size: 1.5em;
  cursor: pointer;
  color: #c3dce7;
  z-index: 10;
}

.modal .rowContainer .close:hover {
  color: white;
}

@media (max-width: 550px) {
  .modal .rowContainer .close {
    font-size: 1.2em;
  }
}

.modal .rowContainer .grupo {
  padding: 0.5em 1.5em;
}

@media (max-width: 550px) {
  .modal .rowContainer .grupo {
    padding: 0.5em 1em;
  }
}

.modal .rowContainer button {
  margin: 1em;
  margin-top: 0.7em;
  margin-left: 1.5em;
}

@media (max-width: 550px) {
  .modal .rowContainer button {
    margin-left: 1em;
  }
}

.datePicker {
  z-index: 1500;
}

.datePicker .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 120vw;
  height: 120vh;
  background: rgba(0, 0, 0, 0.815);
  z-index: 1400;
}

.datePicker .m-input-moment {
  z-index: 1500;
  background: white;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.datePicker .m-input-moment .btn-save {
  margin-top: 25px;
  font-family: "Poppins", sans-serif !important;
}

.datePicker .m-input-moment .options button {
  font-family: "Poppins", sans-serif !important;
}

.grafica {
  background: #0e4ba5;
  background: -webkit-gradient(linear, left top, left bottom, from(#0e4ba5), to(#062047));
  background: linear-gradient(to bottom, #0e4ba5 0%, #062047 100%);
  min-height: 100vh;
  padding: 2em 0;
}

.grafica .container {
  background: #fafafa;
  color: black;
  border-radius: 5px;
  padding-right: 0;
  padding-left: 0;
  overflow: hidden;
  min-height: 90vh;
}

.grafica .container h1 {
  text-align: center;
  border-bottom: 1px solid white;
  color: white;
  background: #0090f0;
  background: -webkit-gradient(linear, left top, left bottom, from(#0090f0), to(#0081d7));
  background: linear-gradient(to bottom, #0090f0 0%, #0081d7 100%);
  padding: 0.2em;
  font-weight: lighter;
  font-size: 2.2em;
}

@media (max-width: 600px) {
  .grafica .container h1 {
    font-size: 1.9em;
  }
}

.grafica .container .graphDiv {
  display: inline-block;
  margin: 1em auto;
}

.reclamo {
  background: #0e4ba5;
  background: -webkit-gradient(linear, left top, left bottom, from(#0e4ba5), to(#062047));
  background: linear-gradient(to bottom, #0e4ba5 0%, #062047 100%);
  min-height: 100vh;
  padding-top: 6em;
  padding-bottom: none;
}

.reclamo .container {
  background: white;
  color: black;
  border-radius: 3px;
  -webkit-box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.2);
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}

.reclamo .container h1 {
  font-weight: lighter;
  text-align: center;
  color: white;
  font-size: 2.2em;
  padding: 0.2em;
  background: #0090f0;
  background: -webkit-gradient(linear, left top, left bottom, from(#0090f0), to(#0081d7));
  background: linear-gradient(to bottom, #0090f0 0%, #0081d7 100%);
}

@media (max-width: 600px) {
  .reclamo .container h1 {
    font-size: 1.9em;
  }
}

.reclamo .container .formulario {
  padding: 1em;
}

.reclamo .container .formulario input,
.reclamo .container .formulario textarea {
  display: block;
  outline: none;
  border: 1px solid black;
  font-family: "Poppins", sans-serif;
  padding: 0.2em;
  font-size: 1em;
  margin-bottom: 0.4em;
}

.reclamo .container .formulario input:focus,
.reclamo .container .formulario textarea:focus {
  border: 1px solid #002e72;
}

.reclamo .container .formulario label {
  margin-bottom: 0.4em;
  display: block;
}

.reclamo .container .formulario textarea {
  resize: none;
  width: 100%;
  height: 10em;
}

.reclamo .container .formulario p {
  color: red;
  margin: 1em auto;
  margin-top: 0.3em;
}

.reclamo .container .formulario button {
  display: block;
  padding: 0.5em 1em;
  outline: none;
  background: none;
  border: none;
  font-family: "Poppins", sans-serif;
  background: #008cff;
  color: white;
  font-size: 1em;
  cursor: pointer;
}

.reclamo .container .formulario button:hover {
  background: #007ee6;
}

.reclamo .container .formulario button:last-child {
  margin-top: 2em;
  background: #002750;
  font-size: 0.8em;
}

.graficar,
.indice {
  background: #0e4ba5;
  background: -webkit-gradient(linear, left top, left bottom, from(#0e4ba5), to(#062047));
  background: linear-gradient(to bottom, #0e4ba5 0%, #062047 100%);
  min-height: 100vh;
  padding-top: 6em;
  padding-bottom: none;
}

.graficar .hr,
.indice .hr {
  margin: 1.5em auto;
  height: 1px;
  background: #bbc8da;
}

@media (max-width: 767px) {
  .graficar .hr,
  .indice .hr {
    margin-bottom: 0;
  }
}

.graficar .container,
.indice .container {
  background: white;
  color: black;
  border-radius: 3px;
  -webkit-box-shadow: 4px 4px 3px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 4px 4px 3px 0px rgba(0, 0, 0, 0.2);
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
  min-height: calc(100vh - 210px);
}

.graficar .container .opciones,
.indice .container .opciones {
  background: white;
  padding: 2em;
  border-radius: 3px;
}

.graficar .container h1,
.indice .container h1 {
  font-weight: lighter;
  text-align: center;
  color: white;
  font-size: 2em;
  padding: 0.2em;
  background: #0090f0;
  background: -webkit-gradient(linear, left top, left bottom, from(#0090f0), to(#0081d7));
  background: linear-gradient(to bottom, #0090f0 0%, #0081d7 100%);
}

@media (max-width: 600px) {
  .graficar .container h1,
  .indice .container h1 {
    font-size: 1.1em;
    padding: 0.6em;
  }
}

.graficar .container .contenedor button,
.indice .container .contenedor button {
  display: block;
  padding: 0.5em 1em;
  outline: none;
  background: none;
  border: none;
  font-family: "Poppins", sans-serif;
  background: #008cff;
  color: white;
  font-size: 1em;
  cursor: pointer;
  margin-top: 2em;
}

.graficar .container .contenedor button.bajar,
.indice .container .contenedor button.bajar {
  display: inline-block;
  margin-right: 1em;
  background: #003079;
}

.graficar .container .contenedor button.bajar:hover,
.indice .container .contenedor button.bajar:hover {
  background: #002660;
}

.graficar .container .contenedor button.bajar.ind,
.indice .container .contenedor button.bajar.ind {
  margin-top: 0;
  padding: 0.4em 0.8em;
  max-width: 48%;
  font-size: 0.85em;
}

@media (max-width: 768px) {
  .graficar .container .contenedor button.bajar.ind,
  .indice .container .contenedor button.bajar.ind {
    margin-top: 1em;
  }
}

.graficar .container .contenedor button.l1,
.indice .container .contenedor button.l1 {
  margin-top: 1em;
}

@media (min-width: 767px) {
  .graficar .container .contenedor button.l1,
  .indice .container .contenedor button.l1 {
    margin-top: -0.2em;
  }
}

.graficar .container .contenedor button:hover,
.indice .container .contenedor button:hover {
  background: #007ee6;
}

.graficar .container .contenedor .opciones table,
.indice .container .contenedor .opciones table {
  text-align: center;
  margin: 0 auto;
}

.graficar .container .contenedor .opciones h4,
.indice .container .contenedor .opciones h4 {
  text-align: center;
  font-weight: lighter;
  margin-bottom: 1em;
  text-transform: capitalize;
  margin-top: -0.5em;
  margin-bottom: 0.3em;
  font-size: 2em;
  color: #003e77;
}

@media (max-width: 600px) {
  .graficar .container .contenedor .opciones h4,
  .indice .container .contenedor .opciones h4 {
    font-size: 1.5em;
    margin-bottom: 0.3em;
  }
}

.graficar .container .contenedor .fechas .fecha,
.graficar .container .contenedor .fechas .hora,
.indice .container .contenedor .fechas .fecha,
.indice .container .contenedor .fechas .hora {
  display: inline-block;
  margin: 1em 0;
}

.graficar .container .contenedor .fechas .fecha select,
.graficar .container .contenedor .fechas .hora select,
.indice .container .contenedor .fechas .fecha select,
.indice .container .contenedor .fechas .hora select {
  display: inline-block;
  margin: 0.2em;
}

.graficar .container .contenedor .fechas .fecha select,
.indice .container .contenedor .fechas .fecha select {
  width: 5em;
}

.graficar .container .contenedor .fechas .fecha input,
.indice .container .contenedor .fechas .fecha input {
  font-family: "Poppins", sans-serif;
  font-size: 1em;
  border: 1px solid #031130;
  color: #001031;
  outline: none;
  background: #fafafa;
  padding: 0.2em;
  margin-right: 1em;
  max-width: 7.5em;
}

.graficar .container .contenedor .fechas .fecha button,
.indice .container .contenedor .fechas .fecha button {
  display: inline-block;
  font-size: 0.9em;
  padding: 0.4em 0.5em;
  margin-top: 0px;
}

.graficar .container .contenedor .fechas .hora select,
.indice .container .contenedor .fechas .hora select {
  width: 3.5em;
}

@media (max-width: 500px) {
  .graficar .container .contenedor,
  .indice .container .contenedor {
    padding: 0;
  }
}

.graficar .container .contenedor h2,
.indice .container .contenedor h2 {
  font-weight: lighter;
  font-size: 1.2em;
  color: #021f5e;
}

.graficar .container .contenedor .row,
.indice .container .contenedor .row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (max-width: 767px) {
  .graficar .container .contenedor .row h2,
  .indice .container .contenedor .row h2 {
    margin-top: 1em;
    margin-bottom: 0.3em;
  }
}

.graficar .container .contenedor select,
.indice .container .contenedor select {
  display: block;
  width: 100%;
  font-family: "Poppins", sans-serif;
  padding: 0.2em;
  font-size: 1em;
  outline: none;
  border: 1px solid black;
  background: white;
}

.graficar .container .contenedor select:focus,
.indice .container .contenedor select:focus {
  border-color: #004896;
}

.user,
.puntoMonitoreo {
  background: #0e4ba5;
  background: -webkit-gradient(linear, left top, left bottom, from(#0e4ba5), to(#062047));
  background: linear-gradient(to bottom, #0e4ba5 0%, #062047 100%);
  min-height: 100vh;
  padding: 2em 0;
  padding-top: 4.5em;
  padding-bottom: 2em;
}

.user h1,
.puntoMonitoreo h1 {
  font-weight: lighter;
  text-align: center;
  color: white;
  font-size: 2em;
  padding: 0.2em;
  background: #0090f0;
  background: -webkit-gradient(linear, left top, left bottom, from(#0090f0), to(#0081d7));
  background: linear-gradient(to bottom, #0090f0 0%, #0081d7 100%);
}

@media (max-width: 600px) {
  .user h1,
  .puntoMonitoreo h1 {
    font-size: 1.2em;
    padding: 0.6em;
  }
}

.user .container,
.puntoMonitoreo .container {
  background: #fafafa;
  color: black;
  border-radius: 5px;
  padding-right: 0;
  padding-left: 0;
  overflow: hidden;
  min-height: 90vh;
}

.user .container .opciones,
.puntoMonitoreo .container .opciones {
  padding: 2em 0;
  padding-top: 0.1em;
  border-radius: 4px;
  background: white;
  overflow: hidden;
  margin: 1.5em;
  -webkit-box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.25);
          box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.25);
}

@media (max-width: 600px) {
  .user .container .opciones,
  .puntoMonitoreo .container .opciones {
    margin: 1em 0.5em;
  }
}

.user .container .opciones h1,
.puntoMonitoreo .container .opciones h1 {
  font-size: 1.5em;
}

.user .container .opciones label,
.puntoMonitoreo .container .opciones label {
  display: block;
  font-size: 1.1em;
}

.user .container .opciones input,
.puntoMonitoreo .container .opciones input {
  margin: 0 auto;
  display: inline-block;
  width: 90%;
  max-width: 15em;
  font-family: "Poppins", sans-serif;
  padding: 0.4em;
  font-size: 0.85em;
  outline: none;
  border: 1px solid black;
  margin-bottom: 1em;
}

.user .container .opciones input:focus,
.puntoMonitoreo .container .opciones input:focus {
  border-color: #004896;
}

.user .container .opciones .row,
.puntoMonitoreo .container .opciones .row {
  margin-top: 2em;
  padding: 0 2em;
}

@media (max-width: 400px) {
  .user .container .opciones .row,
  .puntoMonitoreo .container .opciones .row {
    font-size: 90%;
  }
}

.user .container .opciones .row button,
.puntoMonitoreo .container .opciones .row button {
  display: block;
  padding: 0.5em 1em;
  outline: none;
  background: none;
  border: none;
  font-family: "Poppins", sans-serif;
  background: #008cff;
  color: white;
  font-size: 1em;
  cursor: pointer;
  margin-top: 2em;
}

.user .container .opciones .row button:hover,
.puntoMonitoreo .container .opciones .row button:hover {
  background: #007ee6;
}

.user .container .opciones .row p,
.puntoMonitoreo .container .opciones .row p {
  color: red;
  text-align: center;
  margin-top: 0.5em;
}

.user .container .subDiv,
.puntoMonitoreo .container .subDiv {
  margin: 1em;
  border-radius: 4px;
  overflow: hidden;
  background: white;
  -webkit-box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.25);
          box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.25);
}

@media (max-width: 600px) {
  .user .container .subDiv,
  .puntoMonitoreo .container .subDiv {
    margin: 0.5em;
  }
}

.user .container .subDiv h2,
.puntoMonitoreo .container .subDiv h2 {
  font-weight: lighter;
  text-align: center;
  color: white;
  font-size: 1.5em;
  padding: 0.2em;
  background: #0090f0;
  background: -webkit-gradient(linear, left top, left bottom, from(#0090f0), to(#0081d7));
  background: linear-gradient(to bottom, #0090f0 0%, #0081d7 100%);
  border-bottom: 2px solid #004db3;
  position: relative;
  cursor: pointer;
}

.user .container .subDiv h2:before,
.puntoMonitoreo .container .subDiv h2:before {
  content: "\f107";
  position: absolute;
  font-weight: 900;
  font-size: 0.9em;
  font-family: "Font Awesome 5 Free";
  right: 1em;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.438);
  padding: 0.3em 0.55em;
  border-radius: 50%;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.user .container .subDiv h2.visible:before,
.puntoMonitoreo .container .subDiv h2.visible:before {
  -webkit-transform: translateY(-50%) rotate(180deg);
          transform: translateY(-50%) rotate(180deg);
}

@media (max-width: 600px) {
  .user .container .subDiv h2,
  .puntoMonitoreo .container .subDiv h2 {
    font-size: 1em;
    text-align: left;
    padding: 0.5em 0.5em;
  }
}

.user .container .subDiv .datos,
.puntoMonitoreo .container .subDiv .datos {
  padding: 1.5em 1em;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.user .container .subDiv .datos .paso,
.puntoMonitoreo .container .subDiv .datos .paso {
  border: 2px solid #00426f;
  overflow: hidden;
  border-radius: 4px;
  max-width: 650px;
  margin: 0 auto;
}

.user .container .subDiv .datos .paso .header,
.puntoMonitoreo .container .subDiv .datos .paso .header {
  width: 100%;
  text-align: center;
  background: #004e83;
  background: -webkit-gradient(linear, left top, left bottom, from(#004e83), to(#00426f));
  background: linear-gradient(to bottom, #004e83 0%, #00426f 100%);
  color: white;
  padding: 0.5em;
  position: relative;
}

.user .container .subDiv .datos .paso .header .barraPorcentaje,
.puntoMonitoreo .container .subDiv .datos .paso .header .barraPorcentaje {
  height: 5px;
  position: absolute;
  bottom: -5px;
  left: 0;
  background: #008cff;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
  border-radius: 2px;
}

.user .container .subDiv .datos .paso .contenido,
.puntoMonitoreo .container .subDiv .datos .paso .contenido {
  padding: 1em;
  overflow-y: auto;
  height: 60vh;
  max-height: 550px;
  position: relative;
  overflow-x: hidden;
}

@media (max-width: 400px) {
  .user .container .subDiv .datos .paso .contenido,
  .puntoMonitoreo .container .subDiv .datos .paso .contenido {
    height: calc(80vh - 120px);
  }
}

.user .container .subDiv .datos .paso .contenido .dato.final,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .dato.final {
  margin-bottom: 1em;
  border-bottom: 1px solid #aaaaaa;
}

.user .container .subDiv .datos .paso .contenido .dato.final h4.fijo,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .dato.final h4.fijo {
  margin-bottom: 0em;
}

.user .container .subDiv .datos .paso .contenido .dato.final .info,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .dato.final .info {
  margin-right: 1em;
  padding-bottom: 0.4em;
  text-align: right;
  min-height: 1em;
  text-transform: capitalize;
}

.user .container .subDiv .datos .paso .contenido .dato.final .info small,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .dato.final .info small {
  color: red;
  text-transform: none;
  display: block;
  width: 100%;
  text-align: left;
  font-size: 12px;
}

.user .container .subDiv .datos .paso .contenido .dato.final .grupo,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .dato.final .grupo {
  margin-left: 1em;
}

.user .container .subDiv .datos .paso .contenido .dato.final .grupo span,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .dato.final .grupo span {
  display: inline-block;
  width: 1.2em;
}

.user .container .subDiv .datos .paso .contenido .data,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .data {
  position: relative;
  text-align: center;
  z-index: 0;
}

.user .container .subDiv .datos .paso .contenido .data .grupo,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .data .grupo {
  display: block;
  width: auto;
  text-align: left;
  width: 78%;
  margin: 0 auto;
  margin-right: 1em;
}

.user .container .subDiv .datos .paso .contenido .data .grupo.alinear,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .data .grupo.alinear {
  -webkit-transform: translateX(-25px);
          transform: translateX(-25px);
}

.user .container .subDiv .datos .paso .contenido .data .grupo input[type="radio"],
.puntoMonitoreo .container .subDiv .datos .paso .contenido .data .grupo input[type="radio"] {
  display: none;
}

.user .container .subDiv .datos .paso .contenido .data .grupo input[type="radio"]:checked ~ label:after, .user .container .subDiv .datos .paso .contenido .data .grupo input[type="radio"]:checked ~ label:before,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .data .grupo input[type="radio"]:checked ~ label:after,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .data .grupo input[type="radio"]:checked ~ label:before {
  background: #0084ff !important;
  opacity: 1;
}

.user .container .subDiv .datos .paso .contenido .data .grupo input[type="radio"] ~ label,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .data .grupo input[type="radio"] ~ label {
  position: relative;
  margin-bottom: 0.8em;
  display: inline-block;
  font-size: 1em;
}

.user .container .subDiv .datos .paso .contenido .data .grupo input[type="radio"] ~ label:hover:after, .user .container .subDiv .datos .paso .contenido .data .grupo input[type="radio"] ~ label:hover:before,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .data .grupo input[type="radio"] ~ label:hover:after,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .data .grupo input[type="radio"] ~ label:hover:before {
  background: #145591;
}

.user .container .subDiv .datos .paso .contenido .data .grupo input[type="radio"] ~ label:after,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .data .grupo input[type="radio"] ~ label:after {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  position: absolute;
  content: "";
  background: #4d5f75;
  left: -40px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border: 2px solid rgba(0, 0, 0, 0.329);
  opacity: 0.8;
  -webkit-box-shadow: inset 2px -1px 1px 2px rgba(255, 255, 255, 0.3);
          box-shadow: inset 2px -1px 1px 2px rgba(255, 255, 255, 0.3);
}

@media (min-width: 500px) {
  .user .container .subDiv .datos .paso .contenido .data .grupo,
  .puntoMonitoreo .container .subDiv .datos .paso .contenido .data .grupo {
    width: 80%;
    display: block;
    padding-left: 15%;
  }
}

.user .container .subDiv .datos .paso .contenido .data h4,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .data h4 {
  margin-bottom: 10px;
  font-size: 1em;
  position: absolute;
  bottom: 8px;
  left: 5px;
  opacity: 0.8;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  z-index: -1;
}

.user .container .subDiv .datos .paso .contenido .data h4:hover,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .data h4:hover {
  bottom: 2.4em;
  left: 0px;
}

.user .container .subDiv .datos .paso .contenido .data h4.fijo,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .data h4.fijo {
  position: static;
  font-size: 1.3em;
}

.user .container .subDiv .datos .paso .contenido .data input[type="text"],
.user .container .subDiv .datos .paso .contenido .data input[type="number"],
.puntoMonitoreo .container .subDiv .datos .paso .contenido .data input[type="text"],
.puntoMonitoreo .container .subDiv .datos .paso .contenido .data input[type="number"] {
  margin-top: 1.5em;
  background: none;
  border: none;
  border-bottom: 2px solid #bdcbd6;
}

.user .container .subDiv .datos .paso .contenido .data input[type="text"]:focus ~ h4, .user .container .subDiv .datos .paso .contenido .data input[type="text"]:valid ~ h4, .user .container .subDiv .datos .paso .contenido .data input[type="text"]:hover ~ h4,
.user .container .subDiv .datos .paso .contenido .data input[type="number"]:focus ~ h4,
.user .container .subDiv .datos .paso .contenido .data input[type="number"]:valid ~ h4,
.user .container .subDiv .datos .paso .contenido .data input[type="number"]:hover ~ h4,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .data input[type="text"]:focus ~ h4,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .data input[type="text"]:valid ~ h4,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .data input[type="text"]:hover ~ h4,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .data input[type="number"]:focus ~ h4,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .data input[type="number"]:valid ~ h4,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .data input[type="number"]:hover ~ h4 {
  bottom: 2.4em;
  left: 0px;
}

.user .container .subDiv .datos .paso .contenido .data input[type="text"]:valid ~ .bar,
.user .container .subDiv .datos .paso .contenido .data input[type="number"]:valid ~ .bar,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .data input[type="text"]:valid ~ .bar,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .data input[type="number"]:valid ~ .bar {
  width: 100%;
}

.user .container .subDiv .datos .paso .contenido .data .bar,
.puntoMonitoreo .container .subDiv .datos .paso .contenido .data .bar {
  position: absolute;
  bottom: 13.5px;
  left: 50%;
  height: 2px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: #0058aa;
  -webkit-transition: width 0.5s ease;
  transition: width 0.5s ease;
  width: 0;
}

.user .container .subDiv .datos .paso .botones button,
.puntoMonitoreo .container .subDiv .datos .paso .botones button {
  float: right;
  width: 50%;
  margin-top: 0.7em;
  border-left: 1px solid #0042ac;
  background: #0084ff;
  background: -webkit-gradient(linear, left top, left bottom, from(#0084ff), to(#007ff5));
  background: linear-gradient(to bottom, #0084ff 0%, #007ff5 100%);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.user .container .subDiv .datos .paso .botones button:hover,
.puntoMonitoreo .container .subDiv .datos .paso .botones button:hover {
  background: -webkit-gradient(linear, left top, left bottom, from(#007ff5), to(#0077e6));
  background: linear-gradient(to bottom, #007ff5 0%, #0077e6 100%);
}

.user .container .subDiv .datos .paso .botones button:first-child,
.puntoMonitoreo .container .subDiv .datos .paso .botones button:first-child {
  float: left;
  border-right: 1px solid #021129;
  border-left: none;
}

.user .container .subDiv .datos .paso hr,
.puntoMonitoreo .container .subDiv .datos .paso hr {
  margin: 1em auto !important;
}

.user .container .subDiv .datos button,
.puntoMonitoreo .container .subDiv .datos button {
  display: block;
  padding: 0.5em 1em;
  outline: none;
  background: none;
  border: none;
  font-family: "Poppins", sans-serif;
  background: #008cff;
  color: white;
  font-size: 1em;
  cursor: pointer;
  margin-top: 2em;
}

.user .container .subDiv .datos button:hover,
.puntoMonitoreo .container .subDiv .datos button:hover {
  background: #0070cc;
}

.user .container .subDiv .datos button.bajar,
.puntoMonitoreo .container .subDiv .datos button.bajar {
  display: inline-block;
  margin-right: 1em;
}

.user .container .subDiv .datos button.bajar.ind,
.puntoMonitoreo .container .subDiv .datos button.bajar.ind {
  padding: 0.4em 0.8em;
  margin-top: 0.9em;
}

.user .container .subDiv .datos > .row,
.puntoMonitoreo .container .subDiv .datos > .row {
  padding: 0 0.5em;
}

.user .container .subDiv .datos h4,
.puntoMonitoreo .container .subDiv .datos h4 {
  font-weight: lighter;
  font-size: 1.15em;
  color: #001e72;
  margin-bottom: 1em;
}

.user .container .subDiv .datos select,
.user .container .subDiv .datos input,
.puntoMonitoreo .container .subDiv .datos select,
.puntoMonitoreo .container .subDiv .datos input {
  display: inline-block;
  width: 100%;
  font-family: "Poppins", sans-serif;
  padding: 0.4em;
  font-size: 0.85em;
  outline: none;
  border: 1px solid black;
  margin-bottom: 1em;
  background: white;
}

.user .container .subDiv .datos select:focus,
.user .container .subDiv .datos input:focus,
.puntoMonitoreo .container .subDiv .datos select:focus,
.puntoMonitoreo .container .subDiv .datos input:focus {
  border-color: #004896;
}

.user .container .subDiv .datos .col-md-6.salto,
.puntoMonitoreo .container .subDiv .datos .col-md-6.salto {
  margin-top: 0.5em;
}

.user .container .subDiv .datos .grupo,
.puntoMonitoreo .container .subDiv .datos .grupo {
  width: 100%;
}

.user .container .subDiv .datos .grupo.alinear,
.puntoMonitoreo .container .subDiv .datos .grupo.alinear {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.user .container .subDiv .datos .grupo label,
.puntoMonitoreo .container .subDiv .datos .grupo label {
  font-size: 0.9em;
  margin-left: 1em;
}

.user .container .subDiv .datos .grupo label.caudal,
.puntoMonitoreo .container .subDiv .datos .grupo label.caudal {
  display: inline-block;
  width: 2em;
  height: 2em;
  background: red;
  border-radius: 50%;
  margin-left: 0;
  border: 2px solid rgba(0, 0, 0, 0.156);
  opacity: 0.84;
  cursor: pointer;
  -webkit-box-shadow: inset 2px -1px 1px 2px rgba(255, 255, 255, 0.35);
          box-shadow: inset 2px -1px 1px 2px rgba(255, 255, 255, 0.35);
  position: relative;
  top: 8px;
}

.user .container .subDiv .datos .grupo label.caudal.green,
.puntoMonitoreo .container .subDiv .datos .grupo label.caudal.green {
  background: green;
}

.user .container .subDiv .datos .grupo label.caudal.yellow,
.puntoMonitoreo .container .subDiv .datos .grupo label.caudal.yellow {
  background: #ff9900;
}

.user .container .subDiv .datos .grupo label.caudal:hover,
.puntoMonitoreo .container .subDiv .datos .grupo label.caudal:hover {
  opacity: 1;
}

.user .container .subDiv .datos .grupo input[type="radio"],
.puntoMonitoreo .container .subDiv .datos .grupo input[type="radio"] {
  display: inline-block;
  width: auto;
}

.user .container .subDiv .datos .grupo input[type="number"],
.puntoMonitoreo .container .subDiv .datos .grupo input[type="number"] {
  width: 5em;
  display: inline-block;
  margin: 0.2em 1em;
}

.user .container .subDiv .datos .fechas .fecha,
.user .container .subDiv .datos .fechas .hora,
.puntoMonitoreo .container .subDiv .datos .fechas .fecha,
.puntoMonitoreo .container .subDiv .datos .fechas .hora {
  display: inline-block;
  margin-bottom: 1em;
  margin-right: 0.5em;
}

.user .container .subDiv .datos .fechas .fecha select,
.user .container .subDiv .datos .fechas .hora select,
.puntoMonitoreo .container .subDiv .datos .fechas .fecha select,
.puntoMonitoreo .container .subDiv .datos .fechas .hora select {
  display: inline-block;
  margin: 0.2em;
}

.user .container .subDiv .datos .fechas .fecha input,
.puntoMonitoreo .container .subDiv .datos .fechas .fecha input {
  width: 8em;
}

.user .container .subDiv .datos .fechas .fecha button,
.puntoMonitoreo .container .subDiv .datos .fechas .fecha button {
  display: inline-block;
  margin-top: 10px;
  margin-left: 1em;
}

@media (max-width: 359px) {
  .user .container .subDiv .datos .fechas .fecha button,
  .puntoMonitoreo .container .subDiv .datos .fechas .fecha button {
    margin-left: 0;
    display: block;
    margin-top: 0;
  }
}

.user .container .subDiv .datos .fechas .hora,
.puntoMonitoreo .container .subDiv .datos .fechas .hora {
  width: 5.5em;
}

@media (max-width: 400px) {
  .user .container .subDiv .datos,
  .puntoMonitoreo .container .subDiv .datos {
    padding: 0.8em;
  }
}

.user .container .subDiv .datos table,
.puntoMonitoreo .container .subDiv .datos table {
  margin: 0 auto;
  border-spacing: 0;
  text-align: center;
  -webkit-box-shadow: 2px 2px 3px 0px rgba(1, 12, 29, 0.385);
          box-shadow: 2px 2px 3px 0px rgba(1, 12, 29, 0.385);
  border-radius: 3px;
  overflow: hidden;
}

@media (max-width: 995px) {
  .user .container .subDiv .datos table,
  .puntoMonitoreo .container .subDiv .datos table {
    font-size: 95%;
  }
}

@media (max-width: 770px) {
  .user .container .subDiv .datos table,
  .puntoMonitoreo .container .subDiv .datos table {
    font-size: 85%;
  }
}

.user .container .subDiv .datos table thead,
.puntoMonitoreo .container .subDiv .datos table thead {
  background: #006ab1;
  color: white;
}

.user .container .subDiv .datos table thead th,
.puntoMonitoreo .container .subDiv .datos table thead th {
  padding: 0.5em 1.2em;
  font-weight: lighter;
  border-bottom: 2px solid #16598f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 500px) {
  .user .container .subDiv .datos table thead th,
  .puntoMonitoreo .container .subDiv .datos table thead th {
    padding: 0.5em 0.4em;
    font-size: 0.9em;
  }
}

.user .container .subDiv .datos table thead th:not(:last-child),
.puntoMonitoreo .container .subDiv .datos table thead th:not(:last-child) {
  position: relative;
}

.user .container .subDiv .datos table thead th:not(:last-child):after,
.puntoMonitoreo .container .subDiv .datos table thead th:not(:last-child):after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 1px;
  height: 55%;
  background: #2c8fdf;
}

.user .container .subDiv .datos table tbody tr:nth-child(even),
.puntoMonitoreo .container .subDiv .datos table tbody tr:nth-child(even) {
  background: #d9f1ff;
}

.user .container .subDiv .datos table tbody tr:nth-child(odd),
.puntoMonitoreo .container .subDiv .datos table tbody tr:nth-child(odd) {
  background: #fff;
}

.user .container .subDiv .datos table tbody td,
.puntoMonitoreo .container .subDiv .datos table tbody td {
  padding: 0.6em 1.2em;
  color: #444444;
  font-size: 0.95em;
}

@media (max-width: 450px) {
  .user .container .subDiv .datos table tbody td,
  .puntoMonitoreo .container .subDiv .datos table tbody td {
    font-size: 0.85em;
    padding: 0.5em;
  }
}

.user .container .subDiv .datos table tbody td a,
.user .container .subDiv .datos table tbody td .fa-trash,
.puntoMonitoreo .container .subDiv .datos table tbody td a,
.puntoMonitoreo .container .subDiv .datos table tbody td .fa-trash {
  color: #0f3d63;
  font-size: 1.4em;
  cursor: pointer;
}

.user .container .subDiv .datos table tbody td a:hover,
.user .container .subDiv .datos table tbody td .fa-trash:hover,
.puntoMonitoreo .container .subDiv .datos table tbody td a:hover,
.puntoMonitoreo .container .subDiv .datos table tbody td .fa-trash:hover {
  color: #051421;
}

.empty {
  height: 2px;
  text-align: center;
  font-size: 2em;
  margin-top: 1em;
  color: #0a1827;
}

.empty h2 {
  padding-bottom: 2em;
}

@media (max-width: 600px) {
  .empty h2 {
    font-size: 1.5em;
    padding-bottom: 1.5em;
  }
}

.radio input[type="radio"] {
  display: none;
}

.radio input[type="radio"]:checked ~ label:after {
  background: #0084ff !important;
  opacity: 1;
}

.radio label {
  margin-left: 1.5em;
  position: relative;
}

.radio label:after {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  position: absolute;
  content: "";
  background: #4d5f75;
  left: -25px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border: 2px solid rgba(0, 0, 0, 0.329);
  opacity: 0.8;
  -webkit-box-shadow: inset 2px -1px 1px 2px rgba(255, 255, 255, 0.3);
          box-shadow: inset 2px -1px 1px 2px rgba(255, 255, 255, 0.3);
}

.modaldelete {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100000;
}

.modaldelete .overlay {
  background: rgba(0, 0, 0, 0.815);
  width: 100%;
  height: 100%;
  position: fixed;
}

.modaldelete .contenedor {
  z-index: 100000;
  position: fixed;
  top: 51%;
  left: 51%;
  -webkit-transform: translate(-50%, -49%);
          transform: translate(-50%, -49%);
  background: white;
  padding: 1.1em;
  text-align: center;
  border-radius: 2px;
}

@media (max-width: 600px) {
  .modaldelete .contenedor {
    width: 90%;
    top: 50%;
    left: 50%;
  }
  .modaldelete .contenedor button {
    display: block;
    width: 100%;
  }
}

.modaldelete .contenedor p {
  margin-bottom: 1em;
}

.modaldelete .contenedor button {
  background: #ce0202;
  color: white;
  outline: none;
  border: none;
  font-family: "Poppins", sans-serif;
  padding: 0.5em 1em;
  margin-top: 0.5em;
  cursor: pointer;
}

.modaldelete .contenedor button:hover {
  opacity: 0.8;
}

.modaldelete .contenedor button:first-child {
  background: #0076e4;
  margin-right: 0.5em;
}
/*# sourceMappingURL=config.css.map */