@charset "utf-8";
/*************estilos globales**************/
*{ margin: 0; padding: 0; }

body {    
    margin:0 auto;
    font-family: arial;
    color:black;    
  }

html, body {height: 100%;margin: 0;padding: 0;}
#map {height:94%;}






/***************estilos login***************/     
.loading {
    margin: 10% auto 15px;
    position: relative;
    height: 40px;
    width: 40px;
         }

.login {
    width: 420px;
    margin: 0 auto;
    margin-top: 300px;
   
       }

.login img{
    width: 70%;
    float: left;
    margin-left: 15%;
    margin-bottom: 15px;

         }

.login form {
    width: 70%;
    margin: 0 auto;
            }		
		
.login input {
    background: none repeat scroll 0 0  rgb(0, 0, 0);
    border: 1px solid rgb(66, 159, 107);
    border-radius: 6px 6px 6px 6px;
    
    color: rgb(255, 255, 255);
    font-size: 17px;
    margin-bottom: 10px;
    outline: medium none;
    padding: 10px;    
    width: 100%;
}

button {
    background-color: rgb(66, 159, 107);
    border: none;
    border-radius: 6px 6px 6px 6px;    
    color: #FFFFFF;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    padding: 10px 25px;    
    width: 108%;
    font-size: 17px;
       }

.button2 {
    background-color: white;
    border: 2px solid black;
    border-radius: 1px 1px 1px 1px;    
    color: black;
    cursor: pointer;
    display: inline-block;    
    padding: 0px 0px;    
    width: 14px;    
	height: 14px;
	font-size: 12px;
	margin-bottom:10px;	
       }
.button3 {
    background-color: white;
    border: 1px solid gray;
    border-radius: 6px 6px 6px 6px;    
    color: gray;
    cursor: pointer;
    display: inline-block;    
    padding: 5px 5px;    
    width: 70px;    
	height: 18px;
	font-size: 12px;
	margin-bottom:10px;
	margin-top:10px;
       }



/*************estilos del mapa y el menu****************/
.vehiculo {background-color:rgb(192, 0, 0);
           text-align: left;
           font-size: 20px;                      
	   -moz-box-shadow:0 0 8px 0 black;
    	   -webkit-box-shadow:0 0 8px 0 black;
    	   padding: 10px;
	   box-shadow:0 0 8px 0 black;
    	   position: relative;
	   z-index: 10;			
           }

.vehiculo a:link{text-decoration: none;}
.vehiculo>a{color:rgb(255, 255, 255);
	    padding:10px;
	   }

.oculto1 {
    display: block;
    clear: both;
    float: left;   
    width: 200px;
    max-width: 200px;
    height: 100%;    
    border: thin;    
    background-color: rgb(255,255,255);    
    transition: 0.3s; 
	overflow-y: scroll;
       }

.oculto1 a:link{width: 200px;text-decoration: none; padding-left: 0px}

.mapa {
	transition: margin-left .3s;	
}
input {
    background: none repeat scroll 0 0  rgb(255, 255, 255);
    border: 1px solid rgb(66, 159, 107);
    border-radius: 6px 6px 6px 6px;
    
    color: rgb(0, 0, 0);
    font-size: 17px;
    margin-bottom: 10px;
    outline: medium none;
    padding: 10px;    
    width: 100%;
}



#num>ul>li>a{ color:rgb(0,0,0); }

/***********@media Queries************/
@media (max-width: 720px){
.oculto1 {width:0px;
		 display:none
		}
                        }


@media (max-width: 420px){
          /*login */
.login { 
        width: 100%;
        margin: 0 auto;
      }
                        }
                       

                                            
@media (max-width: 320px){
            /*login*/
.login { 
        width: 100%;
        margin: 0 auto;
       }
button{ width: 111%;} 
                        }

/*********************MENU VEHICULOS******************/
/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: block;   
    background-color: rgb(255,255,255);	
    width: 180px;
}

/* Links inside the dropdown button */
.dropdown a {
    color: black;
    padding: 0px;
    text-decoration: none;
    display: block; 
	font-size: 14px;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;     
    margin-left: 10px;    
    background-color: #f9f9f9;    
    border-radius: 10px;
    border: 1px solid grey;
    box-shadow: 6px 6px 12px 0px rgba(0,0,0,0.2);     
    z-index: 10;    
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border-radius: 10px;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Change color of dropdown on hover */
.dropdown a:hover {background-color: #f1f1f1}


.show {display:block;}


/***********************ESTILOS CABECERAS*******************************/
.cabeceraSendaCH {
	   background-color:rgb(192, 22, 103);           
           font-size: 16px;                      
	   -moz-box-shadow:0 0 8px 0 black;
    	   -webkit-box-shadow:0 0 8px 0 black;
    	   padding: 8px;
	   box-shadow:0 0 8px 0 black; 
	   position: relative;   	  
	   z-index: 10;
        }
.cabeceraSendaCH a:link{text-decoration: none;}
.cabeceraSendaCH a{padding:8px; color:rgb(255, 255, 255);}   

.cabeceraSendaPT {
	   background-color:rgb(100, 165, 236);           
           font-size: 16px;                      
	   -moz-box-shadow:0 0 8px 0 black;
    	   -webkit-box-shadow:0 0 8px 0 black;
    	   padding: 8px;
	   box-shadow:0 0 8px 0 black; 
	   position: relative;   	  
	   z-index: 10;
        }
.cabeceraSendaPT a:link{text-decoration: none;}
.cabeceraSendaPT a{padding:8px; color:rgb(255, 255, 255);}  

.cabeceraSendaSalud {
	   background-color: rgb(66, 159, 107);           
           font-size: 16px;                      
	   -moz-box-shadow:0 0 8px 0 black;
    	   -webkit-box-shadow:0 0 8px 0 black;
    	   padding: 8px;
	   box-shadow:0 0 8px 0 black; 
	   position: relative;   	  
	   z-index: 10;
        }
.cabeceraSendaSalud a:link{text-decoration: none;}
.cabeceraSendaSalud a{padding:8px; color:rgb(255, 255, 255);}  

.cabeceraSendaGF {
	   background-color:rgb(192, 0, 0);           
           font-size: 16px;                      
	   -moz-box-shadow:0 0 8px 0 black;
    	   -webkit-box-shadow:0 0 8px 0 black;
    	   padding: 8px;
	   box-shadow:0 0 8px 0 black; 
	   position: relative;   	  
	   z-index: 10;
        }
.cabeceraSendaGF a:link{text-decoration: none;}
.cabeceraSendaGF a{padding:8px; color:rgb(255, 255, 255);}   
 
.tablahistorico thead {
  display: table; /* to take the same width as tr */
  width: calc(100% - 17px); /* - 17px because of the scrollbar width */
}

.tablahistorico tbody {
  display: block; /* to enable vertical scrolling */
  max-height: calc(100vh - 68px); 
  overflow-y: scroll; /* keeps the scrollbar even if it doesn't need it; display purpose */
}

.tablahistorico table {   
    table-layout: fixed ;
	border-collapse: collapse;
    width: 100%;
      }
.tablahistorico th, td, tr {
    text-align: left;    
	border: 0px;
	padding: 2px;  
	margin: 0px;
	overflow: hidden;
	word-wrap: break-word;
	white-space: nowrap;
}
.tablahistorico img {    
    border: 0px;
	padding: 0px;  
	margin: 0px;
	height:32px;
}
.tablahistorico tr:nth-child(even){background-color: #f2f2f2}
.tablahistorico th {
    background-color:white;
    color: grey;    	
   }

/****************************estilos firma***********************************************/
.cuerpofirma  {
  display: block; /* to enable vertical scrolling */
  max-height: calc(100vh + 10px); 
  overflow-y: scroll; /* keeps the scrollbar even if it doesn't need it; display purpose */
}
/****************************************************************************************/

/****************************estilos incidencia***********************************************/
.cuerpoincidencia  {
  display: block; /* to enable vertical scrolling */
  max-height: calc(100vh + 10px); 
  overflow-y: scroll; /* keeps the scrollbar even if it doesn't need it; display purpose */
}
/****************************************************************************************/
     
@media (max-width: 767px) {
  .tablahistorico {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style:-ms-autohiding-scrollbar;   
    -webkit-overflow-scrolling: touch;
  }
  .cuerpofirma  {
	width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style:-ms-autohiding-scrollbar;   
    -webkit-overflow-scrolling: touch;
  }  
}

@media (max-width: 50px) {  
  .cuerpoincidencia  {
	width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style:-ms-autohiding-scrollbar;   
    -webkit-overflow-scrolling: touch;
  }
}
  
.tablaconductor tr td {
    white-space: nowrap;
}

.disable-text{ 
        -webkit-user-select:none; 
        -webkit-touch-callout:none; 
             -moz-user-select:none; 
             -ms-user-select:none; 
             user-select:none;    
  
       } 
.event-tooltip-content {
  padding: 5px;
}

.event-tooltip-content:not(:last-child) {
  border-bottom: 1px solid #ccc;
}