/* DEFAULTS
----------------------------------------------------------*/
html,body
{
    height:100%;
    width:100%;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}
body   
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
/* color: #696969; */
overflow:hidden;
}

a:link, a:visited
{
color: white;
}

a:hover
{
color: #1d60ff;
text-decoration: none;
}

a:active
{
color: #034af3;
}

p
{
margin-bottom: 10px;
line-height: 1.6em;
}


/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}

h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}

h2
{
font-size: 1.5em;
font-weight: 600;
}

h3
{
font-size: 1.2em;
}

h4
{
font-size: 1.1em;
}

h5, h6
{
font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page
{
position:absolute;
top:0px;
bottom:0px;
width: 100%;
background-color: #fff;
border-bottom:1px solid #496077;
}

.header
{
position: absolute;
height:70px;
width:100%;
top:0px;
left:0px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(#4E95EC));
background: -webkit-linear-gradient(top, #4E95EC, #173860);
background: -moz-linear-gradient(top, #4E95EC, #173860);
background: -o-linear-background(top, #4E95EC, #173860);
background: -ms-linear-background(top, #4E95EC, #173860);
background: linear-background(top, #4E95EC, #173860);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4E95EC', endColorstr='#173860', gradientType='0');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4E95EC', endColorstr='#173860', gradientType='0')";

background-image: -ms-linear-gradient(bottom, #173860 0%, #4E95EC 100%);
background-image: -moz-linear-gradient(bottom, #173860 0%, #4E95EC 100%);
background-image: -o-linear-gradient(bottom, #173860 0%, #4E95EC 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #173860), color-stop(1, #4E95EC));
background-image: -webkit-linear-gradient(bottom, #173860 0%, #4E95EC 100%);
background-image: linear-gradient(to top, #173860 0%, #4E95EC 100%);
}

.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}

.main
{
position:absolute;
width:100%;
top:70px;
bottom:0px;
/*background-image:url(../Imagenes/Logos/fondo_plomo-1920x1200.jpg);
background-repeat: no-repeat;*/
background-color:#F2F2F2;
}

.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}

.footer
{
position:absolute;
color: #4e5766;
bottom:0px;
width:100%;
height:20px;
text-align: center;
line-height: normal;
}


/* FORM ELEMENTS   
----------------------------------------------------------*/


fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}

fieldset p 
{
margin: 2px 12px 10px 10px;
}

fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}

fieldset label.inline 
{
display: inline;
}

legend 
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}

input.textEntry 
{
width: 320px;
border: 1px solid #ccc;
}

input.passwordEntry 
{
width: 320px;
border: 1px solid #ccc;
}

div.accountInfo
{
width: 42%;
}

/* MISC  
----------------------------------------------------------*/

.clear
{
clear: both;
}

.logo
{
display: block;
float: left;
}

.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
position:absolute;
top: 32px;
z-index: 1000;
right: 74px;
}

.loginDisplay a:link
{
color: white;
}

.loginDisplay a:visited
{
color: white;
}

.loginDisplay a:hover
{
color: white;
}

.failureNotification
{
font-size: 1.2em;
color: Red;
}

.bold
{
font-weight: bold;
}

.submitButton
{
text-align: right;
padding-right: 10px;
}
.csssmpPrincipal
{
position: absolute;
right:15px;
top:5px;
}
.cssmnuPrincipal
{
position: absolute;
left:15px;
top:5px;
}
.csslblTitulos
{
font-size: 20px;
color: #008080;
font-weight: bold;
}
.cssdivMenuContenedor
{
background:white;
height:30px;
position: absolute;
left:0px;
right:0px;
bottom:0px;
border: 1px solid  #004AF5;
}

.cssdivIzquierda
{
position:absolute;
margin: 0;/*2px 2px 2px 2px;*/
padding: 0;/*2px 2px 2px 2px;*/
left:-240px;
top:0px;
bottom:0px;
width:240px;
background-color:white;
/*border: 2px solid  #EBEFF9; */
}

.cssdivIzquierdaFrecuencia
{
position:absolute;
margin: 0;/*2px 2px 2px 2px;*/
padding: 0;/*2px 2px 2px 2px;*/
left:0px;
top:0px;
bottom:0px;
width:240px;
background-color:white;
/*border: 2px solid  #EBEFF9; */
}

.cssdivDerecha
{
position: absolute;
padding: 0;/*2px 2px 2px 2px;*/
left: 0px;
top: 0px;
right:0px;
bottom:0px;
/*border: 1px solid  #004AF5; */
text-align:center;
/*margin-top:-1px;
margin-left: 2px;
margin-right: 2px;
margin-bottom: 2px;*/
}

.cssdivDerechaReproductor
{
position: absolute;
/*margin: 2px 2px 2px 2px;
padding: 2px 2px 2px 2px;*/
left: 226px;
top: 0px;
right:0px;
bottom:0px;
/*border: 1px solid  #004AF5; */
text-align:center;
}

.cssdivDerechaAlertas
{
position: absolute;
/*margin: 2px 2px 2px 2px;
padding: 2px 2px 2px 2px;*/
left: 240px;
top: 0px;
right:0px;
bottom:0px;
/*border: 1px solid  #004AF5; */
text-align:center;
}

.cssdivBarraLateralIzquierda
{
position:absolute;
/*margin: 2px 2px 2px 2px;*/
left:0px;
top:0px;
width:30px;
bottom:0px;
border: 1px solid  #004AF5;

}
.cssdivContenidoLateralIzquierda
{
position:absolute;
margin: 0/*2px 2px 2px 2px*/;
padding: 0/*2px 2px 2px 2px*/;
left:0px;
top:0px;
right:0px;
bottom:0px;
text-align:center;
}

/* 
Section:        TOGGLER 
Description:    Boton que permitirá mostrar / ocultar el panel 
*/  
#toggler{  
width: 15px;  
height: 100%;  
background: #EBEFF9 url("../Imagenes/Mapa/toggler_off_bg.gif") no-repeat left center;  
float: left; 
/*margin-left:2px;
margin-top:0px; 
border-radius: 4px 4px 4px 4px;*/
}  
#toggler:hover{  
background: #c2cff1 url("../Imagenes/Mapa/toggler_off_bg.gif") no-repeat -25px center;  
cursor: pointer;  
}  
#toggler.off{  
background: #EBEFF9 url("../Imagenes/Mapa/toggler_bg.gif") no-repeat left center;  
margin-left: 0;  
}  
#toggler.off:hover{  
background: #c2cff1 url("../Imagenes/Mapa/toggler_bg.gif") no-repeat -25px center;  
margin-left: 0;  
}  

/**/
.gmap-control-container {
margin:5px -6px 0 0;
}
.gmap-control {
cursor: pointer;
background-color: -moz-linear-gradient(center top , #FEFEFE, #F3F3F3);
background-color: #FEFEFE;
border: 1px solid #A9BBDF;
padding: 1px 6px; color:Black;
}
.gmap-control:hover {
border: 1px solid #678AC7;
}
.gmap-control-active {
background-color: -moz-linear-gradient(center top , #6D8ACC, #7B98D9);
background-color: #6D8ACC;
color: #fff;
font-weight: bold;
border: 1px solid #678AC7;
}
/* Marker Info Window */
h1.marker-heading{color: #D7D7D7;margin: 0px;padding: 0px;font: 18px "Trebuchet MS", Arial;border-bottom: 1px dotted #D8D8D8;}
div.marker-info-win {margin-right: -20px;}
div.marker-info-win p{padding: 0px;margin: 10px 0px 10px 0;}
div.marker-inner-win{padding: 5px;}
div.save-marker, div.remove-marker{
border: none;
background: rgba(0, 0, 0, 0);
padding: 0px;
margin-right: 10px;
cursor: pointer;
color: #00F;
}
div.remove-marker:hover{
text-decoration: underline;
}
.info-content{
font-weight:bold;
color: #000;
cursor:text;
}
.info-content:hover{
/*	color: #00F;*/
}
/**/

/*Controles*/
#DivControles{background-color:White;overflow:auto;width:1px;height:0px;color:#2189FF;padding:10px;margin-right:6px;}
.Toggle{width:200px !important;height:auto !important;max-height:300px !important;overflow:auto;}
#SpTituloControl{font-size:16px;}


#TogControlEspecial{position:absolute;top:0px;right:110px;background-color:#A3CEFF;padding:2px 6px;
    cursor: pointer; color:Black;
    background-color: -moz-linear-gradient(center top , #FEFEFE, #F3F3F3);
    background-color: #FEFEFE;
    border: 1px solid #A9BBDF;background-repeat:no-repeat;}

#TogControlRegIncidente{position:absolute;top:0px;right:110px;background-color:#A3CEFF;padding:2px 6px;
    cursor: pointer; color:Black;
    background-color: -moz-linear-gradient(center top , #FEFEFE, #F3F3F3);
    background-color: #FEFEFE;
    border: 1px solid #A9BBDF;background-repeat:no-repeat;}

#TogControlRegIncident{position:absolute;top:0px;right:110px;background-color:#A3CEFF;padding:2px 6px;
    cursor: pointer; color:Black;
    background-color: -moz-linear-gradient(center top , #FEFEFE, #F3F3F3);
    background-color: #FEFEFE;
    border: 1px solid #A9BBDF;background-repeat:no-repeat;}


#TogControl, #TogUnidades, #TogVelocidad, #SpaReporte{position:absolute;top:0px;right:6px;background-color:#A3CEFF;padding:2px 6px;
    cursor: pointer; color:Black;
    background-color: -moz-linear-gradient(center top , #FEFEFE, #F3F3F3);
    background-color: #FEFEFE;
    border: 1px solid #A9BBDF;background-repeat:no-repeat;}
#TogAlertas{position:absolute;top:0px;right:27px;background-color:#A3CEFF;padding:2px 6px;
    cursor: pointer; color:Black;
    background-color: -moz-linear-gradient(center top , #FEFEFE, #F3F3F3);
    background-color: #FEFEFE;
    border: 1px solid #A9BBDF;}
#TogLogeados{position:absolute;top:0px;right:47px;background-color:#A3CEFF;padding:2px 6px;
    cursor: pointer; color:Black;
    background-color: -moz-linear-gradient(center top , #FEFEFE, #F3F3F3);
    background-color: #FEFEFE;
    border: 1px solid #A9BBDF;}
#TogLeyenda{position:absolute;top:0px;right:107px;background-color:#A3CEFF;padding:2px 6px;
    cursor: pointer; color:Black;
    background-color: -moz-linear-gradient(center top , #FEFEFE, #F3F3F3);
    background-color: #FEFEFE;
    border: 1px solid #A9BBDF;}
#TogProgramacionesCU{position:absolute;top:0px;right:67px;background-color:#A3CEFF;padding:2px 6px;
    cursor: pointer; color:Black;
    background-color: -moz-linear-gradient(center top , #FEFEFE, #F3F3F3);
    background-color: #FEFEFE;
    border: 1px solid #A9BBDF;}
#TogRecorrido{position:absolute;top:0px;right:80px;background-color:#A3CEFF;padding:2px 6px;
    cursor: pointer; color:Black;
    background-color: -moz-linear-gradient(center top , #FEFEFE, #F3F3F3);
    background-color: #FEFEFE;
    border: 1px solid #A9BBDF;}

#TogDistribucion{position:absolute;top:0px;right:100px;background-color:#A3CEFF;padding:2px 6px;
    cursor: pointer; color:Black;
    background-color: -moz-linear-gradient(center top , #FEFEFE, #F3F3F3);
    background-color: #FEFEFE;
    border: 1px solid #A9BBDF;}


#TogControlBusesServicio{
    position:absolute;top:0px;right: 89px;background-color:#A3CEFF;padding:2px 6px;
    cursor: pointer; color:Black;
    background-color: -moz-linear-gradient(center top , #FEFEFE, #F3F3F3);
    background-color: #FEFEFE;
    border: 1px solid #A9BBDF;

}


#TogControlRadioBus {
    position:absolute;top:0px;right: 127px;background-color:#A3CEFF;padding:2px 6px;
    cursor: pointer; color:Black;
    background-color: -moz-linear-gradient(center top , #FEFEFE, #F3F3F3);
    background-color: #FEFEFE;
    border: 1px solid #A9BBDF;
}

    
#TogControlesReprod{position:absolute;top:0px;right: 55px;background-color:#A3CEFF;padding:2px 6px;
    cursor: pointer; color:Black;
    background-color: -moz-linear-gradient(center top , #FEFEFE, #F3F3F3);
    background-color: #FEFEFE;
    border: 1px solid #A9BBDF;}


#TogLeyenda{position:absolute;top:0px;right:67px;background-color:#A3CEFF;padding:2px 6px;
    cursor: pointer; color:Black;
    background-color: -moz-linear-gradient(center top , #FEFEFE, #F3F3F3);
    background-color: #FEFEFE;
    border: 1px solid #A9BBDF;}
    
#TbControl1 td{padding:2px 0px 2px 0px}
#CbControl1{width:100%;color:#2189FF;font-weight:bold;}
#TbControl1{width:100%;text-align:left;}
#TbControl1 tr{cursor:pointer;}
#TbControl1 tr:hover{background-color:#2189FF;color:White;}

#DivControles1{background-color:White;overflow:auto;width:1px;height:0px;color:#2189FF;padding:10px;margin-right:6px;}
.Toggle1{width:200px !important;height:auto !important;max-height:300px !important;overflow:auto;}
#SpTituloControl1{font-size:16px;}
#TogControl1, #TogUnidades1, #TogVelocidad1, #SpaReporte1{z-index:99;position:absolute;top:0px;right:6px;background-color:#A3CEFF;padding:2px 6px;
    cursor: pointer; color:Black;
    background-color: -moz-linear-gradient(center top , #FEFEFE, #F3F3F3);
    background-color: #FEFEFE;
    border: 1px solid #A9BBDF;
    padding: 1px 6px; /*background-image:url('../Imagenes/Mapa/PtoControl/CercoGeodesicoAzul18x18.gif');*/background-repeat:no-repeat;}
#TogUnidades{right:21px;}
#TogVelocidad{right:33px;}


#DivVelocidad{display:none;}
#DivReporte{display:none;}
.TogControlActivo{
background-color: #6D8ACC !important;
color: #fff !important;
font-weight: bold;
border: 1px solid #678AC7 !important;}
.TogAlertaActivo, .TogLeyendaActivo, .TogComunicacionesActivo,.TogDeslogueoActivo , .TogRecorridoActivo .TogLeyendaActivo{
background-color: #6D8ACC !important;
color: #fff !important;
font-weight: bold;
border: 1px solid #678AC7 !important;}
.TrGeocercaActiva{
background-color: #6D8ACC !important;
color: #fff !important;}
#TbControl td{padding:2px 0px 2px 0px}
/*#TogControl[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
top:10px;
left: 0;
white-space: nowrap;
z-index: 20px;
background-color:White;
}*/
#CbControl{width:100%;color:#2189FF;font-weight:bold;}
#TbControl{width:100%;text-align:left;}
#TbControl tr{cursor:pointer;}
#TbControl tr:hover{background-color:#2189FF;color:White;}

#tbGeoEspecial{width:100%;text-align:left;}
#tbGeoEspecial tr{cursor:pointer;}
#tbGeoEspecial tr:hover{background-color:#2189FF;color:White;}
/**/
.IconoMensaje{position:absolute;top:10px;right:200px;z-index:10}

.FondoPeligro
{
background-color:red !important;
}

.FondoDefault
{
background-color: #FEFEFE !important;
}

.DivControlesToggle {
width:200px !important;height:auto !important;max-height:300px !important;overflow:auto;
}
@media (max-width: 600px) 
{
.DivControlesToggle {
width:200px !important;height:auto !important;max-height:300px !important;overflow:auto;position: absolute;margin-top: 1.5em !important;
}    
}

@media only screen and (max-device-width: 480px) {      
.DivControlesToggle {
width:200px !important;height:auto !important;max-height:300px !important;overflow:auto;position: absolute;margin-top: 1.5em !important;
}    
}