/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 07/11/2016, 08:56:28
    Author     : rafa22
*/
/*
Variable color define el color principal
*/
@colorPrimario: #FFFFFF ;
/*s
Variable color define el color secundario
*/
@colorSecundario: #FFFFFF;

/*Variable para el color de la fuente, en los botones*/

@colorFuentePrimario: #FFFFFF;

@endColor:#FFFFFF;

@gradientHeader: false;
@screenHeight: `window.screen.availHeight`;


body, html {
    height: 100%;
    width: 100%;
}
.gm-style-iw div{
    overflow: hidden;
}
#lista {
    list-style-type: none;
    padding: 0px !important;

}
#lista li {
    list-style-type: none;
}
input[type=file].hiddenTxt {
    color: transparent;
}
input[readonly]
{
    background-color:white !important;
}
textarea[readonly]
{
    background-color:white !important;
}
.lblMapa{
    color: @colorFuentePrimario; 
    /*border: 1px solid #33ff33;*/
    background-color: @colorPrimario;
    font-size: 14px;
}
.lblGeneral{
    color: #000000; 
    /*border: 1px solid #33ff33;*/
    font-size: 14px;
}
hr {
    margin-top: 4px;
    margin-bottom:  4px;
}
h4 {
    margin-top: 1px;
    margin-bottom:  1px;

}
label{
    /*margin-top: 2px;*/
    margin-bottom:  1px;
}
.btn-mapa{
    width: 80%;
}
.col-centered{
    float: none;
    margin: 0 auto;
}
.center {
    text-align: center;
}
.left {
    text-align: left;
}
.accordion-radio {
    width: 250px !important;
}
/*accorddion css- modificaciones de jquery ui*/
.ui-accordion-content{
    padding-left: 5px !important;
    padding-right: 80px !important;
}
.ui-state-default{
    background-color: #ffffff !important;
    border: solid 1px @colorPrimario !important;
    color: @colorPrimario !important;

}
.ui-state-active{
    background-color: @colorPrimario !important;
    border-color: @colorPrimario !important;
    color: @colorFuentePrimario !important;
}
/*ajax load*/
.working{position: relative;}
.working:after{
    /*.working{*/
    content: "";
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: .8;
    background: rgba(247, 247, 247, 1) url('data:image/svg+xml;utf8, <svg style="margin-top: 20px;" width="120" height="200" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="@{colorPrimario}"><circle cx="15" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s"  values="15;9;15" calcMode="linear"  repeatCount="indefinite" /> <animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite" /></circle><circle cx="60" cy="15" r="9" fill-opacity="0.3"><animate attributeName="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcMode="linear" repeatCount="indefinite" /><animate attributeName="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcMode="linear" repeatCount="indefinite" /></circle><circle cx="105" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite" /><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite" /></circle></svg>') no-repeat top center;
    z-index: 999;
}

@-moz-document url-prefix() {
    .working:after{
        content: "";
        position: absolute;
        display: block;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        opacity: .8;
        background: rgba(247, 247, 247, 1) url('../images/load.svg') no-repeat top center;
        z-index: 999;
    }
}
.asterisco{
    color: #ff0000;
}
#infoMain .form-group{
    margin-bottom: 0px;
    margin-top: 8px;
}
#infoMain label, .labelCiudad, #divFormCallCenter label{
    color: @colorPrimario;
    font-size: 12px !important;
}
.labelAppReclamosLG{
    color: @colorPrimario;
    font-size: 13px !important;
    padding-right: 2px !important;
}
#infoMain button , .boton{
    background-color:@colorSecundario !important;
    border-color:@colorSecundario !important;
    width: 40% !important;
}
.boton-100{
    background-color:@colorSecundario !important;
    border-color:@colorSecundario !important;
    width: 100% !important;
}
.boton-0{
    background-color:@colorSecundario !important;
    border-color:@colorSecundario !important;
    color: @colorFuentePrimario !important;
}
#infoMain button:hover  , .boton:hover , .boton-0:hover{
    background-color:lighten(@colorSecundario, 10%)!important;
    border-color:lighten(@colorSecundario, 10%) !important;
    color: @colorFuentePrimario !important;
}
#infoMain button:focus  , .boton:focus {
    color: @colorFuentePrimario !important;
    border-color:@colorSecundario !important;
}
#accordion-resizer {
    padding: 5px;
    width: 100%;
    height: 260px;
    border-color: @colorPrimario !important;
}
/*cambios en bootstrap*/
.img-thumbnail{
    border-color: @colorPrimario !important;
}
.form-control, .borde {
    border-color: @colorPrimario !important;
}
textarea:focus, select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
    border-color: lighten(@colorPrimario, 10%) !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px lighten(@colorPrimario, 10%) !important;
    outline: 0 none !important;
}
form.cmxform label.error, label.error {
    color: red !important;
    font-style: italic !important;
}
#btnEnviarDenuncia{
    background-color: @colorSecundario !important;
}
.icon-enviar {
    background-image: url("img/enviar_32.png");
    background-repeat: no-repeat;
    background-position: center;
    background-position-x: center center;
    width:150px;
    height:40px;
    border: 0;
    color: @colorFuentePrimario;
}
/*stylo de los input radio*/
/*input[type=radio] {
  display: none !important;
}
.radioHidden {
  display: none !important;
}
input[type=radio] + label:before {
  content: '';
  display: inline-block;
  border: 2px solid #0F81D5;
  height: 12px;
  width: 12px;
  border-radius: 50%;
}
label:hover:before {
  box-shadow: inset 0 0 5px orange;
}
input[type=radio]:checked + label:before {
  border-width: 5px;
  height: 6px;
  width: 6px;
}*/

@-moz-document url-prefix() {
    #accordion-resizer {
        height: 280px !important;
    }
}
/*.imgHeader{
    width: 100%;
    height: 100%;
    min-height: 50px;
    max-height: 100%;
    background: url('../images/logo.PNG') no-repeat center center;
    background-size:100% 100%;
}*/
#headerPrincipal {
    width: 100%;
    height: 100px;
    background-color: @colorPrimario;
}
/*Retina display*/ 
@media screen and (min-width: 1024px){
    .alto-img-buttons{
        height: 26px;
    }
    .margen-img-buttons{
        margin-top: 50px !important;
    }
}
/*Desktop*/ 
@media screen and (min-width: 980px) and (max-width: 1024px){
    .alto-img-buttons{
        height: 20px;
    }
    .margen-img-buttons{
        margin-top: 70px !important;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1240px){
    .alto-img-buttons{
        height: 22px;
    }
    .margen-img-buttons{
        margin-top: 60px !important;
    }
}
/*Tablet*/ 
@media screen and (min-width: 760px) and (max-width: 980px){
    .alto-img-buttons{
        height: 15px;
    }
    .margen-img-buttons{
        margin-top: 70px!important;
    }
}
/*Mobile HD*/ 
@media screen and (min-width: 350px) and (max-width: 760px){
    .alto-img-buttons{
        height: 22px;
    }
    .margen-img-buttons{
        margin-top: 0px!important;
    }
}
/*Mobile LD*/ 
@media screen and (max-width: 350px){
    .alto-img-buttons{
        height: 20px;
    }
    .margen-img-buttons{
        margin-top: 0px!important;
    }
} 

.ui-accordion-header, .ui-accordion-header-active {
    font-size:  14px !important;
    font-weight: bold !important;
}
.panel-success>.panel-heading {
    color: @colorFuentePrimario !important;
    background-color: @colorPrimario  !important;
    border-color: @colorPrimario !important;
}
.panel-success {
    border-color: @colorPrimario !important;
}
.panel-heading-pagina{
    padding: 4px 15px !important;
    background-color: #FFFFFF !important;
}
.panel-default>.panel-heading {
    padding: 4px 15px !important;
    background-color: #FFFFFF !important;
    color: @colorPrimario !important;
    border-color: @colorPrimario !important;
}
.panel-default>.panel-heading+.panel-collapse>.panel-body {
    border-top-color: @colorPrimario !important;
}
.panel-pagina{
}
.panel-body {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
.panel {
    margin-bottom: 5px !important;
    margin-top: 5px !important;
}
#tituloFormulario {
    font-weight: bold;
    color: @colorPrimario !important;
}
.colorPagina{
    color: @colorPrimario !important;
    font-weight: bold;
}
.fondoPagina{
    background-color:  @colorPrimario !important;
}
.colorFuente{
    color: @colorPrimario !important;
}
.colorSecundario{
    color: @colorSecundario !important;
}
.colorPrimario{
    color: @colorPrimario !important;
}
.bordePagina{
    border-color: @colorPrimario !important;
}
.tituloPagina h3 , .tituloPagina h4{
    margin-bottom: 0px;
    margin-top: 4px !important;
}
.tituloPagina{
    color: @colorPrimario !important;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
    border-bottom: solid 1px @colorPrimario;
}
.titulo{
    color: @colorPrimario !important;
}
.botonera{
    margin-top: 10px;
    margin-bottom: 10px;  
}
.imgDenuncia{
    cursor: pointer; 
}
#formListarDenuncias label, #formListarDenuncias select {
    padding-right: 1px !important;
    padding-left: 4px !important;
}
.div-med {
    padding-right: 4px !important;
    padding-left: 10px !important;
    width: 19.5% !important;
}
.div-med-4 {
    padding-right: 4px !important;
    padding-left: 10px !important;
    width: 38% !important;
}
.labelMed{
    width: auto !important;
}


/*quitamos/ocultamos los botones hoy y cerrar del calendar*/
.uib-datepicker-popup .uib-datepicker-current ,.uib-datepicker-popup .uib-clear {
    display: none !important;
}

.detalleDenuncia{
    padding: 2%;
}
.botonView{    
    background-color: @colorSecundario !important;
    border-color: @colorSecundario !important;
}

.carousel-inner > .item > img {
    margin: 0 auto;
}
.close{
    color: @colorFuentePrimario !important; 
    opacity: 1 !important;
}
#detalleDenuncia .form-group, .detalleDenuncia .form-group {
    margin-bottom: 10px !important;
}
table thead {
    color: @colorPrimario;
    /*background-color: #F6E8FD;*/
    font-size: 15px;
}
table {
    margin-top: 0px;
}

/*login css*/
.form-signin
{
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}
.form-signin .form-signin-heading, .form-signin .checkbox
{
    margin-bottom: 10px;
}
.form-signin .checkbox
{
    font-weight: normal;
}
.form-signin .form-control
{
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.form-signin .form-control:focus
{
    z-index: 2;
}
.form-signin input[type="text"]
{
    margin-bottom: -1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.form-signin input[type="password"]
{
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.account-wall
{
    margin-top: 20px;
    padding: 40px 0px 20px 0px;
    background-color: #f7f7f7;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.login-title
{
    color: #555;
    font-size: 18px;
    font-weight: 400;
    display: block;
}
.profile-img
{
    width: 96px;
    height: 96px;
    margin: 0 auto 10px;
    display: block;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.need-help
{
    margin-top: 10px;
}
.new-account
{
    display: block;
    margin-top: 10px;
}

table tr:hover{
    background-color: #ffffcc !important; 
}
.fondo-tr-ln{
    background-color: #FFD9D9 !important; 
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 5px !important;
}
.boton-tabla{
    padding: 3px 6px !important;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    background-color: @colorSecundario !important ;
    border-color: @colorSecundario  !important ;
}

/*modificacion del menu*/
.navbar-default {
    margin-top: 5px !important;
    /*    background-color: @colorPrimario !important;
        border-color: @colorPrimario !important;*/
    background-color: transparent !important;
    border-color: transparent !important;
}
.navbar-default .navbar-nav>li>a {
    color: @colorFuentePrimario !important;
}
/*.navbar-right {
    background-color: @colorSecundario  !important;
    border-color: @colorSecundario  !important;
}*/
.navbar {
    margin-bottom: 0px !important;
}
.corners-no-active {
    border-radius: 8px;
    background: @colorPrimario;
    padding: 5px; 
    width: 180px;
    /*height: 150px; */
}
.active {
    font-weight: bold !important;
    color: @colorFuentePrimario; 
}
.navbar-default .navbar-toggle {
    border-color: @colorFuentePrimario !important;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: @colorFuentePrimario !important;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: @colorSecundario !important;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
    background-color: lighten(@colorPrimario, 20%) !important;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    background-color: lighten(@colorPrimario, 15%) !important;
}
.dropdown-menu {
    background-color: lighten(@colorPrimario, 12%) !important;
    color: @colorFuentePrimario !important; 
}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
    color: @colorFuentePrimario !important; 
    text-decoration: none;
    background-color: lighten(@colorPrimario, 30%)  !important;
}
.dropdown-menu>li>a {
    color: @colorFuentePrimario !important; 
}

/*Retina display*/ 
@media screen and (min-width: 1024px){
    .admin {
        color: @colorFuentePrimario !important;
    }
}
/*Desktop*/ 
@media screen and (min-width: 980px) and (max-width: 1024px){
    .admin {
        color: @colorFuentePrimario !important;
    }
}
/*Tablet*/ 
@media screen and (min-width: 760px) and (max-width: 980px){
    .admin {
        color: @colorFuentePrimario !important;
    }
}
/*Mobile HD*/ 
@media screen and (min-width: 350px) and (max-width: 760px){
    .admin {
        color: @colorPrimario  !important;
    }
}
/*Mobile LD*/ 
@media screen and (max-width: 350px){
    .admin {
        color: @colorPrimario !important;
    }
} 
/*col resizable*/
.grip {
    width: 20px;
    height: 30px;
    margin-top: -3px;
    background-image: url(../images/resize.png);
    margin-left: -5px;
    position: relative;
    z-index: 88;
    cursor: e-resize;
}

.boton-pagina{
    border-color: @colorPrimario !important;
}
/*boton del multiselect*/
.dropdown-toggle-ms:hover{
    background-color: @colorFuentePrimario !important;
}
.dropdown-toggle-ms:focus{
    background-color: @colorFuentePrimario !important;
}

/*style del drow*/
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

.disabledTagA {
    cursor: not-allowed;
}   

btnDisable.disabled, .btnDisable[disabled], fieldset[disabled] .btn {

    background-color: @colorSecundario !important;
    border-color: @colorSecundario !important;
    color: @colorFuentePrimario !important;
    opacity: .99;
}

/*cambiamos el color a los select, para que sea acorde al color primario de la pagina*/
/*select{
    background: yellow !important;
    color:#FFF;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}*/
option:not(:checked) { 
    background-color: @colorPrimario !important; 
    color: @colorFuentePrimario !important; 
    font-size: 16px !important;
}
select option:hover, 
select option:focus, 
select option:active, 
select option:checked
{
    font-size: 16px !important;
    background: linear-gradient(lighten(@colorPrimario, 30%), lighten(@colorPrimario, 30%));
    background-color:lighten(@colorPrimario, 30%) !important; /* for IE */
}

/*con esto estamos  modificando el color por defecto de bootstrap*/

.btn-success {
    background-color: @colorSecundario !important;
    border-color: @colorSecundario !important;
}

.mano {
    cursor: pointer;
}

/*para el buscador de ciudades*/ 
.controls {
    margin-top: 10px;
    border: 1px solid transparent;
    border-radius: 2px 0 0 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 32px;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#pac-input {
    background-color: #fff;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    margin-left: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 300px;
}

#pac-input:focus {
    border-color: #4d90fe;
}

.pac-container {
    font-family: Roboto;
}

#type-selector {
    color: #fff;
    background-color: #4d90fe;
    padding: 5px 11px 0px 11px;
}

#type-selector label {
    font-family: Roboto;
    font-size: 13px;
    font-weight: 300;
}
#target {
    width: 345px;
}
.pac-container {
    background-color: #FFF;
    z-index: 99999;
    position: fixed;
    display: inline-block;
    float: left;
}
/*clase para el modal mas grande*/
.modal-xlg{
    width: 90% !important;
}

/*gradiente del encabezado*/
/* Mixin */
.gradient (@origin: top, @start: #ffffff, @stop: #000000) {
    background-color: @start !important;
    background-image: -webkit-linear-gradient(@origin, @start, @stop) !important;
    background-image: -moz-linear-gradient(@origin, @start, @stop) !important;
    background-image: -o-linear-gradient(@origin, @start, @stop) !important;
    background-image: -ms-linear-gradient(@origin, @start, @stop) !important;
    background-image: linear-gradient(@origin, @start, @stop) !important;
}

/* Implementation del gradiente */
/*#headerPrincipal when (@gradientHeader= true) {
        .gradient(top, @colorPrimario, #FFFFFF) !important;
} */

/*cambio para el toggle*/
.toggle-on, .toggle-group .btn-primary{
    background-color: @colorSecundario !important;
    border-color: @colorSecundario !important; 
}

/*	start styles for the ContextMenu	*/
.context_menu{
    background-color:white;
    border:1px solid gray;
}
.context_menu_item{
    padding:3px 6px;
}
.context_menu_item:hover{
    background-color:#CCCCCC;
}
.context_menu_separator{
    background-color:gray;
    height:1px;
    margin:0;
    padding:0;
}

/*cambio de estilo para la eleccion de  la hora*/

.dtp div.dtp-date, .dtp div.dtp-time {
    background: @colorPrimario !important;
}
.dtp table.dtp-picker-days tr > td > a.selected {
    background:@colorPrimario !important;
}
.dtp > .dtp-content > .dtp-date-view > header.dtp-header {
    background:@colorPrimario !important;
}
.dtp .p10 > a {
    color: @colorSecundario !important;
}

/*linea vertical*/
.verticalLine-verde {
    border-left: thick solid #01DF01 !important;
}
.verticalLine-azul {
    border-left: thick solid #0040FF !important;
}
/*fuente del mapa*/
.fuente-map{
    font-family: Roboto, Arial, sans-serif !important;
    font-size: 12px !important;
    line-height: 38px !important;
    color: rgb(35, 93, 255) !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}
.div-left{
    float: left;
}
/*background color box para imagenes transparentes o blancas*/
#cboxLoadedContent{
    background-color: #cfcfcf !important;
}
.modal-body-scroll{
    height: unit(@screenHeight - ((40*@screenHeight)/100),px ) !important;
    overflow-y: scroll !important;
}
#accordion-resizer-historial {
    padding: 5px;
    width: 100%;
    height: 290px;
    border-color: @colorPrimario !important;
}

.leaflet-div-icon {
    background-color: #fff !important;
    border: 1px solid #ff0033   !important;
    border-radius: 50%;
    margin: -8px 0 0 -8px !important;
    width: 14px !important;
    height: 14px !important;
}