@media only screen and (max-width: 1280px) 
{
  html, body 
  {    
    margin: 0;
   /* height: 100%; */
  }

  .visible-desktop
  {
    display: none;
  }

  .visible-phone
  {
    display: block;
  }

  .sep{
    width:2vh;
  }

  .header-panel  
  {
    width: 100%;
  }

  .header-table
  {
    height: 50px;
    width: 100%;
    margin: 0 0;
    margin-top: 0;
    background-color: #f7A800;
  }  

  .header-logo
  {
    height: 4vh;
    padding-left:0; 
    text-align:left
  }     

  .footer-panel
  {    
    background-color: #C4C4C4;
    height: 5vh;
    width: 100%;
    font-family: Roboto;
    color: white;
    position: fixed;
    bottom: 0;
    padding-top: 1vh;
  }

  .footer-table
  {    
    width:100%;
    height: vh;
    margin: 0 auto;
  }

  .footer-logo
  {    
    height:3vh;
    float: left;
    /*margin-left: 4vh;*/
  }

  .footer-img
  {
    width:4vh;
  }
  .footer-margin-right
  {
    width:4vh;
  }

  .inputtext{
    border: 0;
    width:100%;
    border-bottom: 1px solid #808080;
    color:#808080;
  }

   .title
  { 
    position: relative;
    font-family: Montserrat;
    font-weight: 600;
    text-align: center;
    font-size:150%;
    height: 5vh;
  }

  .title:after 
  {
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -20px;
    bottom: 0;
    width: 4vh;
    border-bottom: 1.5px solid rgb(246, 168, 1);
  }
  .label{
    /*border-bottom: 1px solid #808080;*/
    color:#808080;
    width:100%;
  }

  .inputselect{
    border: 0;
    width:100%;
    border-bottom: 1px solid #808080;
    color:#808080;
    padding-bottom: 0.6vh;
    background: #ffffff;
  }
  input[type='radio']:after {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    top: -3px;
    left: -1px;
    position: relative;
    background-color: #d1d3d1;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid white;
  }

  input[type='radio']:checked:after {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    top: -3px;
    left: -1px;
    position: relative;
    background-color: #ffa500;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid white;
  }
}

/******************************************/
/******** ESTILOS DESKTOP                 */
/******************************************/
@media only screen and (min-width: 1281px) {
  html, body 
  {
    margin: 0;
    padding:0;
    /*height: 100%;*/
  }

  .visible-desktop
  {
    display: block;
    width:100%
  }
  
  .visible-phone
  {
    display: none;
  }

  .header-panel  
  {
    width: 100%;
  }
  .header-table
  {
    height: 50px;
    width:100%;
    margin: 0 auto;
    margin-top: 25px;
  }  

  .header-logo
  {
    height: 35.7px;
    padding-left:0; 
    text-align:left
  }     

  .footer-panel
  {    
    background-color: rgb(102, 102, 102); 
    height: 50px;
    width:100%;
    font-family: Roboto;
    color: white;
    position: fixed;
    bottom: 0;
  }

  .footer-table
  {    
    height: 50px;
    margin: 0 auto;
    width:100%;
  }
  
  .td-footer-logo{
    width:30vh; 
    text-align:right;
  }

  .footer-logo
  {  
    margin:0;
    height:3vh;
    float: left;
  }
  
  .td-footer-link{
    width:22vh; 
    text-align:right;
  }
  
  .footer-link
  {
    color: white;
  }
  
  .footer-link:hover
  {
    color: white;
    text-decoration: none;
  }
  
  .footer-img
  {
    height:3vh
  }
  
  .td-footer-name{
    width:35vh; 
    text-align:right;
  }
  
  .footer-name
  {
    font-weight: bold;
    margin:0
    text-align:right;
    font-size:1.6vh;
    color:white;
  }

  .sep{
    width:8vh;
  }

  .main-container-100 
  {
    width: 100%;
    position: relative;
    margin: 0 auto 0;   
    width:100%;
    padding-top:2vh;    
  }
    
  .main-container 
  {
    margin: 0 auto;
    width:100%;
  }

  .col25{
    width:25%;
    padding-top:0;
    vertical-align: top;
  }

  .col33{
    width:33%;
    padding-top:0;
    vertical-align: top;
  }

  .col50{
    width:50%;
    padding-top:0;
    vertical-align: top;
  }

  .col75{
    width:75%;
    padding-top:0;
    vertical-align: top;
  }

  .col100{
    width:100%;
    padding-top:0;
    vertical-align: top;
  }

  .inputtext{
    border: 0;
    width:90%;
    border-bottom: 1px solid #808080;
    color:#808080;
  }

  .title
  { 
    position: relative;
    font-family: Montserrat;
    font-weight: 600;
    text-align: center;
    font-size:150%;
    height: 5vh;
  }

  .title:after 
  {
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -20px;
    bottom: 0;
    width: 4vh;
    border-bottom: 1.5px solid rgb(246, 168, 1);
  }

  .label{
    /*border-bottom: 1px solid #808080;*/
    color:#808080;
    width:90%;
  }

  .inputselect{
    border: 0;
    width:90%;
    border-bottom: 1px solid #808080;
    color:#808080;
    padding-bottom: 0.6vh;
    background: #ffffff;
  }

  input[type='radio']:after {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    top: -3px;
    left: -1px;
    position: relative;
    background-color: #d1d3d1;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid white;
  }

input[type='radio']:checked:after {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    top: -3px;
    left: -1px;
    position: relative;
    background-color: #ffa500;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid white;
  }
}


  .font-montserrat{
    font-family: Montserrat;
  }

  .font-roboto{
    font-family: Roboto;
  }

  .font-rajdhani{
    font-family: Rajdhani;
  }

  .font-10{
    font-size:62.5% !important;
  }

  .font-11{
    font-size:70% !important;
  }

  .font-12{
    font-size:75% !important;
  }

  .font-14{
    font-size:87.5% !important;
  }
  
  .font-16{
    font-size:100% !important;
  }
  
  .font-18{
    font-size:112.5% !important;
  }

  .font-24{
    font-size:150% !important;
  }

  .font-32{
    font-size:200% !important;
  }

  .font-40{
    font-size:250% !important;
  }

  /*.font-bold{
    font-weight:bold; 
  }*/

  .font-bold{
    font-weight:700;  
    letter-spacing: 1px;
  }

  .table_100{
    width: 100%;
  }

  

  .paddingsep{
    padding-top:2vh;
    padding-bottom:2vh;
  }

  .titlesection{
      position: relative;
  }

  .titlesection:after 
  {
    content: "";
    position: absolute;
    left: 0%;
    margin-left: 0px;
    bottom: 0;
    width: 4%;
    border-bottom: 1.5px solid rgb(246, 168, 1);
  }
   

.radio{
  border: 0px;
  width:5vh;
}

.button{
  width: 100%; 
  text-decoration: none;
  padding: 5px;
  font-weight: 600;
  font-family: Rajdhani;
  color: #000000;
  background-color: #ffffff;
  border-radius: 0px;
  border: 1px solid  rgb(246, 168, 1);
  font-size:112.5
}

.button:hover{
  background-color: rgb(246, 168, 1);
}

.dropdown-menu{
  background-color: rgb(246, 168, 1);
  width: 15vh;
  padding-left: 2vh
}


.header-btn_language
  {
    background-color:white; 
    border-color: white; 
    color : black;
    font-size: 105%;
    font-family: Rajdhani;
    font-weight: 400;
    margin-right:0
  }

  .header-btn_language:hover
  {
    color : black;
    text-decoration: none;
  }

  .header-item_language
  {
    background-color: rgb(246, 168, 1); 
    border-color: white; 
    color : white;
    font-size: 95%;
    font-family: Rajdhani;
    font-weight: 700;
  }

  .header-item_language:hover
  {
    color : black;
    text-decoration: none;
  }  
  
  .header-dropdown
  {
    border:0px;
    min-width: 0px;
    border-radius: 0;
  }

  .hr_menu{
    margin: 0;
    color: blue;
    border-bottom: 1px solid white;
    width: 90%;
}

a:visited {
    color: #000000;
}
a:link {
    text-decoration: none;
    color: #000000;
}

/* The Modal (background) */
.loading {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100010; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  /*background-color: rgba(255,184,67,0.4);*/ /* Black w/ opacity */
  background-color: rgba(255,255,255,0.8);
}

.cointanermenu {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100010; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  /*background-color: rgba(255,184,67,0.4);*/ /* Black w/ opacity */
  background-color: rgba(0,0,0,0.8);
}

.containermap{
   display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100001; /* Sit on top */
  left: 0;
  top: 5%;
  width: 100%; /* Full width */
  height: 90%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  /*background-color: rgba(255,184,67,0.4);*/ /* Black w/ opacity */
}

.olAlphaImg{
  width: 25px !important;
  height: : 25px !important;
}


.divuser{
  background-color: white; 
  margin-top:5%;
  margin-left: 5%;
  margin-right: 5%;
  height: 50%; 
  border: 1px solid #c8c8c8; 
  border-radius: 25px;text-align: center;
  -webkit-box-shadow: 0px 0px 14px -4px rgba(0,0,0,0.79);
  -moz-box-shadow: 0px 0px 14px -4px rgba(0,0,0,0.79);
  box-shadow: 0px 0px 14px -4px rgba(0,0,0,0.79);
  height: 90%;
  text-align: left;

}

table {
    width: 100%;
}

#content{
    height: 90vh;
    background-color: #ededed;
    margin: 0;
    padding: 0;
    /*margin-left: 1vh;
    margin-right: 1vh;*/
}
.div {
    width: 100%;
    text-align: center;
}

.divSepAlto {
    width: 100%;
    text-align: center;
    height: 1vh;
}

.titleScreen {
    font-family: Montserrat;
    width: 100%;
}

.titleScreen td {
    font-size: 4vh;
}

.titleStation {
    font-family: Roboto;
}

.titleStation td {
    font-size: 2.2vh;
}

.borderOrange {
  border-top: 0.3vh solid #fcb843;
}

.thtable {
    width: 20%;
    text-align: center;
    border-bottom: 0.2vh solid #808080;
    /*font-size: 100%;*/
    font-family: Roboto;
}

.tableinner {
    width: 100%;
    font-family: Roboto;
}

.dateAlarm {
    width: 20%;
    text-align: center;
    vertical-align: middle;
    border-bottom: 0.1vh solid #808080;
    /*font-size: 2vh;*/
    padding: 1vh;
    font-family:Roboto;
}


.tablehistory {
    /* z-index: 1002; */
    width: 98%;
    height: 98%;
    background-color: #ffffff;
    margin: 1%;
    /*border: 1px solid #ffffff;*/
    margin-top: 0px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    -webkit-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.39);
    -moz-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.39);
    box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.39);
    font-family: Roboto-Bold;
}
.row_status {
    /*width: 50%;*/
    width: 50%;
    text-align: center;
    vertical-align: middle;
    border-bottom: 0.1vh solid #808080;
    padding: 1vh;
}

.status_alerta {
    color: white;
    border: 0px solid transparent;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    font-family: Roboto;
    padding-top: 15px;
    /*font-size: 3vh;*/
}

.status_alerta_row {
    width: 100%;
    height: 4vh;
    background-color: red;
    /*padding-top: 10px;*/
    padding-bottom: 10px;
   /*font-size: 2.5vh;*/
}

.map {
    width: 100%;
    height: 37vh;
    border: 3px solid;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
}

.itemTypeAlarm {
    text-align: center;
    border: 0px solid blue;
    font-family: Roboto;
    font-size: 1.7vh;
    padding: 0px;
}

.itemTypeAlarm img {
    height: 3vh;
}

.divlabelmeasure {
    height: 3vh;
    font-family: Montserrat;
}

.labelmeasure {
    font-size: 3vh;
    text-align: center;
}

.valor {
    background-color: #c6c6c6;
    border: 0px solid transparent;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    font-family: Roboto;
    padding-top: 5px;
    font-size: 3vh;
    text-align: center;
    width: 100%;
    height: 4vh;
}

.descriptionmeasure {
    width: 90%;
    height: 5vh;
    padding-top: 5px;
    font-family: Roboto;
    color: #808080;
    font-size: 2.2vh;
    margin-left: 4vh;
}

.img1 {
    height: 2.8vh;
}

.divoutertable {
    position: relative;
    /*height: 65.5vh;*/
    margin-top: 0px;
    padding: 0;
    background-color: transparent;
    height: 65.7vh;
    /* z-index: 1008;*/
    width: 100%;
}

.divinnertable {
    position: relative;
    /*z-index: 1001;*/
    width: 100%;
    height: 65vh;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 0px;
    background-color: transparent;
}

/*.tablehistory {
    z-index: 1002;
    width: 98%;
    height: 98%;
    background-color: #ffffff;
    margin: 1%;
    border: 1px solid #ffffff;
    margin-top: 0px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    -webkit-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.39);
    -moz-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.39);
    box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.39);
    font-family: Roboto;
}*/

.thtable {
    width: 20%;
    text-align: center;
    border-bottom: 0.2vh solid #808080;
    font-size: 3vh;
    font-family: Roboto;
}

.tableinner {
    width: 100%;
    font-family: Roboto;
}


.switch {
    position: relative;
    display: inline-block;
    width: 10vh;
    height: 5vh;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #dc2606;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 4vh;
    width: 4vh;
    left: 1vh;
    bottom: 0.5vh;
    background-color: white;
    background-image: url('../img/x.svg');
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #3ec222;
}

input:focus + .slider {
    box-shadow: 0 0 1px #3ec222;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(4vh);
    background-image: url('../img/ok.svg');
    background-position: left 0.75vh top 0.75vh;
    background-size: 70% 70%;
    background-repeat: no-repeat;
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.6);
   /* background-color: rgba(255,184,67,0.4);*/ /* Black w/ opacity */
}


/* Modal Content/Box */
.modal-content {
    margin: 35% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    /*background-color: #fcb843;*/
    background-color: #ededed;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    -webkit-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.39);
    -moz-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.39);
}

/*SWIPPER*/
/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

#toggle {
    display: none;
    position: relative;
    background-color: #ccc !important;
    padding-top: 2vh;
    border-top-left-radius: 2vh;
    border-top-right-radius: 2vh;
}

#test {
    background-color: #ccc;
    height: 5vh;
    position: relative;
    text-align: center;
    padding-top: 0.5vh;
    border-top-left-radius: 2vh;
    border-top-right-radius: 2vh;
    width: 100%;
}

.show {
    display: block !important;
    -webkit-animation: slide-up .3s ease-out;
    -moz-animation: slide-up .3s ease-out;
}

.hide {
    display: block !important;
    -webkit-animation: slide-down .3s ease-out;
    -moz-animation: slide-down .3s ease-out;
}

.hideTotal {
    display: none !important;
}

@-webkit-keyframes slide-up {
    /*100% { opacity: 1; -webkit-transform: translateY(0%); }   */
    0% {
        opacity: 1;
        -webkit-transform: translateY(100%);
    }
}

@-moz-keyframes slide-up {
    /*100% { opacity: 1; -moz-transform: translateY(100%); }   */
    0% {
        opacity: 1;
        -moz-transform: translateY(100%);
    }
}

@-webkit-keyframes slide-down {
    /*0% { opacity: 1; -webkit-transform: translateY(-100%); }   */
    100% {
        opacity: 1;
        -webkit-transform: translateY(100%);
    }
}

@-moz-keyframes slide-down {
    /*0% { opacity: 1; -moz-transform: translateY(-100%); }   
        100% { opacity: 0; -moz-transform: translateY(0%); }*/
}

/*Fin Swipper*/

/*menu*/
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 10000000;
  top: 0;
  /*left: 0;*/
  background-color: #f7A800;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  right: -250px;
  width:120px;
}

.sidenav a {
  padding: 8px 8px 8px 8px;
  text-decoration: none;
  font-size: 25px;
  color: #000000;
  display: block;
  transition: 0.3s;
  text-align: center;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: white;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: white;
}

.col50{
  width: 50%
}
.sep{
  width:  0.2vh;
}

.switch_sound {
    position: relative;
    display: inline-block;
    width: 10vh;
    height: 5vh;
}

.switch_sound input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider_sound {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background-color:#dc2606;*/
    background-color: #3ec222;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider_sound:before {
    position: absolute;
    content: "";
    height: 4vh;
    width: 4vh;
    left: 1vh;
    bottom: 0.5vh;
    background-color: white;
   /* background-image: url('../img/x.svg');*/
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider_sound {
    background-color: #3ec222;
}

input:focus + .slider_sound {
    box-shadow: 0 0 1px #3ec222;
}

.slider_sounddis {
    background-color: yellow;
}

input:checked + .slider_sound:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(4vh);
   /* background-image: url('../img/ok.svg');*/
    background-position: left 0.5vh top 0.5vh;
    background-size: 80% 80%;
    background-repeat: no-repeat;
}

/* Rounded sliders */
.slider_sound.round {
    border-radius: 60px;

}

.slider_sound.round:before {
    border-radius: 50%;
}


/*Enable notificacion*/
.switch_notif {
    position: relative;
    display: inline-block;
    width: 14vh;
    height: 7vh;
}

.switch_notif input {
    opacity: 0;
    width: 0;
    height: 0;
}

/*Slider select enable sound*/
.slider_notif {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #dc2606;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider_notif:before {
    position: absolute;
    content: "";
    height: 5vh;
    width: 5vh;
    left: 1vh;
    bottom: 1vh;
    background-color: white;
    background-image: url('../img/x.svg');
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider_notif {
    background-color: #3ec222;
}

input:focus + .slider_notif {
    box-shadow: 0 0 1px #3ec222;
}

input:checked + .slider_notif:before {
    -webkit-transform: translateX(6.5vh);
    -ms-transform: translateX(6.5vh);
    transform: translateX(6.5vh);
    background-image: url('../img/ok.svg');
    background-position: left 0.75vh top 0.75vh;
    background-size: 70% 70%;
    background-repeat: no-repeat;
}

/* Rounded sliders */
.slider_notif.round {
    border-radius: 50px;
}

.slider_notif.round:before {
    border-radius: 50%;
}