html,body { 
        height:100% !important;
        width:100% !important;
        padding: 0; margin: 0; font-size:16px; font-family:Helvetica;}


    a{
        color:#000;
    }

    a:hover{
        color:#383434;
        text-decoration: none !important;
    }

    p{
      text-align: justify;
    }

	header{

    position:absolute;
    top:0;
    height:85px;
    width:100%;

    }

    .box-title{
      font-size: 12px;
      

    }



    #logo_client{

        width: 100%;
        display:block;
        max-height: 85px; 
        margin-right: auto;
        margin-left: auto;
        text-align: center;
    }

    #logo_client img{

        width: 180px;
        text-align: center;

    }

    .title_table{
      height:40px;
      background: #eee;
      color:black;
      font-weight: bold;
      border-bottom:1px double #aaa;
      vertical-align: middle;
      padding-top:5px;
      margin:5px 0 10px 0;
    }

    .content-table{
      height:50px;
      border-bottom:1px solid #eee;
      vertical-align: middle;
      margin:5px 0 10px 0;
      padding:5px 0 5px 0;
    }

#middle{

    position:absolute;
    top:85px;
    bottom:25px;
    height:auto;
    overflow: hidden;
    width:100%;
    z-index: 99999;
}

#content_sup{
    position:relative;
    top:10px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    z-index:2;
    height:97%;
    width:85%;
    border:3px solid #D3D3D3;
    border-radius: 50px;
    background-color: #9ab32a;
    /*background: url(../img/fondo_consola.png) no-repeat center center fixed;*/
}

#sup{

   width:100%;
   display:none;
   text-align:right;
   margin-top: 10px;

}



#izq{

    position:relative;
    display:inline-block;
    width:5%;
    text-align: center;
    margin-top:0;
    vertical-align: top;
    height:100%;
    margin:25px 0 25px 0;
}

#der{
    position:relative;
    display:inline-block;
    width:5%;
    text-align: center;
    margin-top:0;
    vertical-align: top;
    height:100%;
    margin:25px 0 25px 0;
}


#content{

    position:relative;
    display:inline-block;
    width:89%;
    text-align: center;
    background:white;
     /*background: url(../img/fondo_consola.png) no-repeat center center fixed;*/
    border-radius:10px;
    height:89%;
    margin:3% 0 3% 0;
    z-index:1;
}

#routepop{
  position:absolute; 
  top:100px;
  width:400px;
  height:auto;
  padding:10px;
  margin-left:auto; 
  margin-right:auto;
  left:0;
  right:0; 
  text-align: center;
  z-index: 99999;
  background-color: white;
  border:2px dotted #99b22e;
  display:none;
  color:grey;
  font-size: 20px;
  opacity: 0.8;
}


footer{

    text-align: center;
    position:absolute;
    bottom:0;
    height:25px;
    width:100%;
    clear:both;
    color:white;
    background:transparent;
    border:none;
   

}

footer a{

  color:#eee;
  }

  footer a:hover{

  color:#aaa;
  }




.btn_mob_footer{

    display:none;

}

/*CODIGO CSS USUARIO NO COMPARTIDO CON LOOK */

.mitad{

  display:inline-block;text-align: center;width:49%;
  vertical-align: top;
}

.mitad span{
  color:white;
}


.mitad_alarmas{

    display:inline-block;text-align: center;width:49%;
  vertical-align: top;
  height:auto;

}





.tab_alarms{

  width: 100%;
  border-bottom:2px dotted black;
  height:50px;
  text-align:left;
  padding:10px;
  font-size:20px;

}

 .user_config{
      width:100%;
      height:100%;
      overflow: auto;
     background:url('../img/fondo_config.png');

    }

    

    
#popup{
      position:absolute;
      z-index:9999;
      min-width:200px;
      max-width:280px;
      width:auto;
      background:#869a1b;
      opacity: 0.8;
      border-radius: 10px;
      min-height:200px;
      height:auto;
      vertical-align: top;
      border:6px double #D3D3D3;
      color: white;
      overflow-y:auto;
      overflow-x: hidden;
      text-align: left;
      padding:10px;
      display:block;
      left:20px;
      top:100px;
    }

    #popupg{
      position:absolute;
      z-index:9999;
      min-width:200px;
      max-width:280px;
      width:auto;
      background:#869a1b;
      opacity: 0.8;
      border-radius: 10px;
      min-height:200px;
      height:auto;

      vertical-align: top;
      border:6px double #D3D3D3;
      color: white;
      overflow-y:auto;
      overflow-x: hidden;
      text-align: left;
      padding:10px;
      display:block;
      left:20px;
      top:100px;
    }

    .tab_config{

      display:inline-block;
      width:20%;
      background:#869a1b;
      opacity: 0.9;
      border-radius: 10px;
      height:500px;
      margin-top:70px;
      vertical-align: top;
      border:6px double #D3D3D3;
      color: white;  /* Color del texto */
      text-align: center;  /* Alineación del texto */
      overflow-y:auto;
      overflow-x: hidden;
    }

/*
 *  STYLE 10
 */

.tab_config::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
  border-radius: 10px;
}

.tab_config::-webkit-scrollbar
{
  width: 10px;
  background-color: #F5F5F5;
}

.tab_config::-webkit-scrollbar-thumb
{
  background-color: #AAA;
  border-radius: 10px;
  background-image: -webkit-linear-gradient(90deg,
                                            rgba(0, 0, 0, .2) 25%,
                        transparent 25%,
                        transparent 50%,
                        rgba(0, 0, 0, .2) 50%,
                        rgba(0, 0, 0, .2) 75%,
                        transparent 75%,
                        transparent)
}



    .row_tab_config_title{

      text-align:center;
      font-size:25px;
      border-bottom:1px solid #D3D3D3;
      padding:10px;
    }

    .row_tab_config_title a{
        text-align:right;
        color:white;
    }



    .row_tab_config{
      text-align:left;
      padding:20px;
      font-size:20px;
      color:white;
      border-bottom:1px dotted #eee;padding:5px;
    }

    .row_tab_config a{
      text-decoration: none;
      color:white;
    }

    .row_tab_config a:hover{
      text-decoration: none;
      color:#D3D3D3;
    }


  .content_config{

      display:inline-block;
      width:75%;
      background:#eee;
      border-radius: 10px;
      border:6px double #D3D3D3;
      min-height:500px;
      margin-top:70px;
      vertical-align: top;
      opacity: 0.9;
      overflow-y: auto;
      overflow-x: hidden;

    }


    .row_content_config_title{

      text-align:center;
      font-size:25px;
      border-bottom:1px solid #D3D3D3;
      padding:15px;
    }

   /* MODIFICACIONES BOOSTRAP */


    .panel-heading{

        background-color: #fff !important;
        border-color:#fff !important;

    }

    .panel-heading-login{
        height:180px;
    }


    .modal-content{

        border:none !important;
        box-shadow: none !important;
     }

    .form-group{
        padding:15px;
        margin-top:50px;
    }

    .control-label{
        text-align: left;

    }


    .container{
      width:100% !important;
      height:100% !important;

      overflow-x: auto !important;
      overflow-y: auto !important;
    }

    .panel-default{
      border-color:transparent !important;
       overflow-x: auto !important;
      overflow-y: auto !important;
      width:100% !important;
      height:100% !important;
    }

    .modal-content{
      width:100% !important;
      height:100% !important;

      overflow-x: auto !important;
      overflow-y: auto !important;

    }


    /*//MODIFICACIONES BOOSTRAP///////////*/

   .groupbutton {

    color: rgba(255,255,255,0.7);
  
    
    /* background: #fff url("img/console_button_icon.png") no-repeat center center;
    background-size: 100%;
    background-repeat: no-repeat;
    -webkit-background-size: 100% 100%; */  

    }

    .groupbutton.active {
        color:#e0792a;
        cursor: not-allowed;
    }   



    .btn-first-left {

      font-size: 45px;
      cursor: pointer;
      position: relative;
      top: 20%;
    }

    .btn-second-left {

      font-size: 45px;
      cursor: pointer;
      position: relative;
      text-align: center;
      top: 40%;
    }

    .btn-third-left {
      font-size: 45px;
      cursor: pointer;
      position: relative;
      text-align: center;
      top: 60%;
    }


    .btn-first-right {
     font-size: 45px;
      cursor: pointer;
      position: relative;
      text-align: center;
      top: 20%;
     }

    .btn-second-right {
      font-size: 45px;
      cursor: pointer;
      position: relative;
      text-align: center;
      top: 40%;
    }

    .btn-third-right {
      font-size: 45px;
      cursor: pointer;
      position: relative;
      text-align: center;
      top: 60%;
    }

  .option[value=""][disabled] {
    display: none;
  }

    .closebtn i:hover, .btn-first-left i:hover, .btn-second-left i:hover, .btn-third-left i:hover, .btn-first-right i:hover, .btn-second-right i:hover, .btn-third-right i:hover{
        color:#000;

    }


    /* MENU EXTRANET */

.menu_ext{


        display:inline-block;
        text-align: center;
        font-size:0.9rem;
        padding:5px;
        border-top:1px solid #337ab7;
        border-bottom:1px solid #eee;
        background-color: #f8f7f7;
        font-weight: bold;

    }

    .menu_ext a:hover{
      color:#aaa;
      text-decoration: none;

    }



    #menu_extranet{

        width:100%;
        display:block;


    }

    #menu_extranet ul{

        width:100%;
        display:block;
        text-align: right;

    }


     #menu_extranet ul li{

        width:10%;
        display:inline-block;
        text-align: center;
        font-size:0.9rem;
        padding:5px;
        border-top:1px solid #337ab7;
        border-bottom:1px solid #eee;
        background-color: #f8f7f7;

    }

    #menu_extranet ul li a{

        font-weight: bold;

    }

     #menu_extranet ul li a{

        box-shadow: none !important;


    }

     #menu_extranet ul li a:hover{
        color: #337ab7;
    }

      #menu_extranet ul li a:active{
        color: #f8f7f7;
    }

    .panel-title{
        font-size: 1.5rem;

    }


  .code {
    font-size: 80%;
  }

   



  /*ALARMS*/
  #alarms{

    position:absolute;
    right:1px;
    margin-top:0px;
    z-index:9999;
    max-height: 530px;
    overflow-y: auto;
    overflow-x: hidden;
  }



    .alarm_move{

    position:relative;
    background:#68107e;
    padding:10px;
    margin:10px;
    width:200px;
    text-align:left;
    color:white;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  .alarm_move span{
    font-weight: bold;

  }

  .alarm_move a{
    color:white;
    text-decoration: none;

  }

.alarm_move a:hover{
    color:#ccc;
    text-decoration: none;

  }

.alarm_move a:hover{
    color:#ccc;
    text-decoration: none;

  }


  .devices_beacon{
      position:relative;
    background:#3399FF;
    padding:10px;
    margin:10px;
    width:300px;
    text-align:left;
    color:white;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  
  .devices_beacon a{
    color:white;
    text-decoration: none;

  }
   
  .alarm_sos{

    position:relative;
    background:#bb1212;
    padding:10px;
    margin:10px;
    width:200px;
    text-align:left;
    color:white;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }


  .alarm_sos span{
    font-weight: bold;

  }

  .alarm_sos a{
    color:white;
    text-decoration: none;

  }

.alarm_sos a:hover{
    color:#ccc;
    text-decoration: none;

  }

.alarm_sos a:hover{
    color:#ccc;
    text-decoration: none;

  }

  .reminder{
    position:relative;
    background:#4cb029;
    padding:10px;
    margin:10px;
    width:200px;
    text-align:left;
    color:white;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  .reminder span{
    font-weight: bold;

  }

  .reminder a{
    color:white;
    text-decoration: none;

  }

 .reminder a:hover{
    color:#ccc;
    text-decoration: none;

  }


  .alarm_low_batery{
    position:relative;
    background:#f3ca0d;
    padding:10px;
    margin:10px;
    width:200px;
    text-align:left;
    color:white;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  .alarm_low_batery span{
    font-weight: bold;

  }

  .alarm_low_batery a{
    color:white;
    text-decoration: none;

  }

 .alarm_low_batery a:hover{
    color:#ccc;
    text-decoration: none;

  }


   .alarm_fall_down{
    position:relative;
    background:orange;
    padding:10px;
    margin:10px;
    width:200px;
    text-align:left;
    color:white;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  .alarm_fall_down span{
    font-weight: bold;

  }

  .alarm_fall_down a{
    color:white;
    text-decoration: none;

  }

  .alarm_fall_down a:hover{
    color:#ccc;
    text-decoration: none;

  }

  .geofences,.over_speed_alarm,.motion_alarm,.movepment_alarm{
    position:relative;
    background:#7f9dc3;
    padding:10px;
    margin:10px;
    width:200px;
    text-align:left;
    color:white;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }

 .over_speed_alarm{
    background:#6cacd2;
  }

  .motion_alarm{
    background:#9c7e97;
  }
  .movepment_alarm{
    background:#68107e;
  }
  .geofences span, .over_speed_alarm span, .motion_alarm span, .movepment_alarm span{
    font-weight: bold;

  }

  .geofences a, .over_speed_alarm a, .motion_alarm a, .movepment_alarm a{
    color:white;
    text-decoration: none;

  }

  .geofences a:hover, .over_speed_alarm a:hover, .motion_alarm a:hover, .movepment_alarm a:hover{
    color:#ccc;
    text-decoration: none;

  }


#device, #command, #params{

  width: 300px;
  margin: 15px 15px 20px 0px;

}

#datatable-search{

  padding:5px 0 5px 0;
  margin:5px 0 5px 0;
  border-bottom: 1px solid #aaa;
}

.button_gm{
width:40px
}


@media all and (max-width: 1400px) {

    header{
    height:45px;
    }

    #middle{
    top:85px;
    }

    .panel-heading-login{
        height:100px;
    }

    #popup{
      top:70px;
      height:350px;
    }

    #popupg{
      top:70px;
      height:350px;
    }

  .tab_config{
    margin-top: 30px;
    width:25%;

  }

  .content_config{
    margin-top: 30px;
    width:74%;
  }
    .mitad small{
      font-size: 14px;

    }

      .row_tab_config_title{
      padding:5px;
      font-size:16px;
    }

      .row_tab_config{
      padding:5px;
      font-size:16px;
    }

    .row_tab_config_title span{
      font-size:25px;
    }
    .row_tab_config span{
      font-size:25px;
    }

    .button_gm{
    width:25px
    }

  }


@media all and (max-width: 1200px) {


    header{
    height:45px;
    }

   #logo_client img{

        width: 100px;
        text-align: center;

    }

    #middle{
    top:45px;
    }

    .panel-heading-login{
        height:100px;
    }
 

   #izq{

    position:relative;
    display:inline-block;
    width:5%;
    text-align: center;
    margin-top:0;
    vertical-align: top;
    height:90%;

    }

    #der{
    position:relative;
    display:inline-block;
    width:5%;
    text-align: center;
    margin-top:0;
    vertical-align: top;
    height:90%;
    }


    #content{

    position:relative;
    display:inline-block;
    width:88%;
    text-align: center;
    background:white;
    border-radius:10px;
    height:90%;
    margin-top:20px;
    margin:25px 0 25px 0;

    }

    .title_table{
      height:auto;
      background: #eee;
      color:black;
      font-weight: bold;
      border-bottom:1px double #aaa;
      vertical-align: middle;
      margin:15px 0 10px 0;
    }

    .content-table{
      height:auto;
     
      vertical-align: middle;
      margin:15px 0 10px 0;
    }

        .btn-first-left {
      font-size: 30px;
    }

    .btn-second-left {

      font-size: 30px;
    }

    .btn-third-left {
      font-size: 30px;
    }


    .btn-first-right {
      font-size: 30px;
     }

    .btn-second-right {
      font-size: 30px;
    }

    .btn-third-right {
      font-size: 30px;
    }



    .tab_config{
      
      min-height:200px;
      margin-top:20px;
      width:25%;
    }

    .row_tab_config_title{
      padding:5px;
      font-size:15px;
    }

    .row_tab_config{
      padding:5px;
      font-size:15px;
    }

    .row_tab_config_title span{
      font-size:25px;
    }
    .row_tab_config span{
      font-size:25px;
    }

    .content_config{
      
      min-height:200px;
      margin-top:20px;
      width:74%;
    }

    .mitad small{
      font-size: 12px;

    }


  }

@media all and (max-width: 900px) {

    .btn-first-left {
      font-size: 30px;
    }

    .btn-second-left {

      font-size: 30px;
    }

    .btn-third-left {
      font-size: 30px;
    }


    .btn-first-right {
      font-size: 30px;
     }

    .btn-second-right {
      font-size: 30px;
    }

    .btn-third-right {
      font-size: 30px;
    }

}