/*
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 ;
/*
Variable color define el color secundario
*/
@colorSecundario: #FFFFFF;
/*Variable para el color de la fuente, en los botones*/
@colorFuentePrimario: #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; 
    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;
}
.accordion-radio {
    width: 250px !important;
}
.accordion-cat{
    margin-top: 6px;
}
/*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-color: @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('../images/load.svg') no-repeat center center;*/
    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{
	max-height: 500px !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	padding-right: 20px;
}
#infoMain .form-group{
    margin-bottom: 0px;
    margin-top: 8px;
}
#infoMain label, .labelCiudad{
    color: @colorPrimario;
    font-size: 12px !important;
}
.labelCiudadLG{
    color: @colorPrimario;
    font-size: 13px !important;
    padding-right: 2px !important;
}
#infoMain button , .boton{
    background-color:@colorSecundario !important;
    border-color:@colorSecundario !important;
    width: 40% !important;
}
#infoMainButton 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;
}
#infoMainButton button:hover  , .boton:hover , .boton-0:hover{
    background-color:lighten(@colorSecundario, 10%) !important;
    border-color:lighten(@colorSecundario, 10%) !important;
    color: @colorFuentePrimario !important;
}
#infoMainButton button:focus  , .boton:focus {
    color: @colorFuentePrimario !important;
    border-color:@colorSecundario !important;
}
#accordion-resizer {
    padding: 5px;
    width: 100%;
    height: 290px;
    border-color: @colorPrimario !important;
}
h2 {
    font-family: 'lucida grande', helvetica, verdana, arial, sans-serif !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, .errorForm {
    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;
}
@-moz-document url-prefix() {
    #accordion-resizer {
        height: 280px !important;
    }
}
#headerPrincipal {
    width: 100%;
    /*height: 100%;*/
    background-color: @colorPrimario;
}
#contenido {
    width:100%; 
    height: 100%; /* Fallback in case the browser does not support calc() */
    height: -webkit-calc(100% -100px); /* Chrome 19 and above */
    height: -moz-calc(100% -100px); /* Firefox 4 and above */
    height:  ~"calc(100% - 100px)";
    padding: 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;
}
#tituloFormulario {
    font-weight: bold;
    /*color: @colorPrimario !important;*/
}
.colorPagina{
    color: @colorPrimario !important;
    font-weight: bold;
}
.colorFuentePagina{
    color: @colorPrimario !important;
    font-size: 15px;
}
.colorFuente{
    color: @colorPrimario !important;
}
.colorFuenteSec{
    color: @colorSecundario !important;
}
.fondoClaroPagina{
    background-color: #F6E8FD !important;
    border-color: @colorPrimario !important;
}
.titulo{
    color: @colorPrimario !important;
    font-weight: bold;
}
.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;
}
#formListarDenuncias {
    border: 1px solid @colorPrimario !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;
    font-size: 14px;
}
table {
    margin-top: 10px;
}
/*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;
}
.sin-margen{
    margin: 0px !important;
}
.sin-padding-r{
    padding-right: 0px !important;
}
.sin-padding-l{
    padding-left: 0px !important;
}
/*modificacion del menu*/
.navbar-default {
    margin-top: 20px !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 {
    border-radius: 8px;
    background: @colorPrimario;
    padding: 5px; 
    width: 180px;
    /*height: 150px;*/ 
}
.menu-no-active a div {
    border-radius: 8px;
    background: @colorPrimario;
    padding: 5px; 
    width: auto !important;
    height: 30px; 
    text-align: center;
}
.menu-active a div {
    border-radius: 8px;
    background: @colorSecundario;
    padding: 5px; 
    width: auto !important;
    height: 30px; 
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}
.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;
}
/*Retina display*/ 
@media screen and (min-width: 1024px){
	#map{
		height: 92% !important;
	}
	#contenido {
		height: -webkit-calc(100% -88px); /* Chrome 19 and above */
		height: -moz-calc(100% -88px); /* Firefox 4 and above */
		height:  ~"calc(100% - 88px)";
	}
    .navbar-default {
        margin-top: 20px !important;
        background-color: transparent !important;
        border-color: transparent !important;
    }
}
/*Desktop*/ 
@media screen and (min-width: 980px) and (max-width: 1024px){
	#map{
		height: 92% !important;
	}
	#contenido {
		height: -webkit-calc(100% -88px); /* Chrome 19 and above */
		height: -moz-calc(100% -88px); /* Firefox 4 and above */
		height:  ~"calc(100% - 88px)";
	}

    .navbar-default {
        margin-top: 0px !important;
        background-color: @colorPrimario !important;
        border-color: @colorPrimario !important;
    }
}
/*Tablet*/ 
@media screen and (min-width: 760px) and (max-width: 980px){
	#map{
		height: 100% !important;
	}
	#contenido {
		height: -webkit-calc(100% -60px); /* Chrome 19 and above */
		height: -moz-calc(100% -60px); /* Firefox 4 and above */
		height:  ~"calc(100% - 60px)";
	}

    .navbar-default {
        margin-top: 0px !important;
        background-color: @colorPrimario !important;
        border-color: @colorPrimario !important;
    }
}
/*Mobile HD*/ 
@media screen and (min-width: 350px) and (max-width: 760px){
	#map{
		height: 100% !important;
	}
	#contenido {
		height: -webkit-calc(100% -60px); /* Chrome 19 and above */
		height: -moz-calc(100% -60px); /* Firefox 4 and above */
		height:  ~"calc(100% - 60px)";
	}
    .navbar-default {
        margin-top: 0px !important;
        background-color: @colorPrimario !important;
        border-color: @colorPrimario !important;
    }
}
@media (max-width: 575px) {
	.col-md-6.text-center {
		float: left;
	}
	.btn.btn-danger.ng-binding,
	#btnEnviarDenuncia,
	#infoMain button, #infoMainButton button, .boton {
		width: 100% !important;
	}
	#infoMainButton{
		margin-bottom: 10px !important;
		margin-top: 10px !important;
	}
}
/*Mobile LD*/ 
@media screen and (max-width: 350px){
	#map{
		height: 100% !important;
	}
	#contenido {
		height: -webkit-calc(100% -60px); /* Chrome 19 and above */
		height: -moz-calc(100% -60px); /* Firefox 4 and above */
		height:  ~"calc(100% - 60px)";
	}

    .navbar-default {
        margin-top: 0px !important;
        background-color: @colorPrimario !important;
        border-color: @colorPrimario !important;
    }
} 
/*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;
}
/*cambio del color por defecto del boton*/
.bg-primary, .btn-danger {
    color: @colorFuentePrimario !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;
} */
/*fuente boton 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;
}

/*css para el estilo del radio button sacado de la plantilla ace*/
input[type=checkbox].ace,input[type=radio].ace {
    opacity: 0;
    position: absolute;
    z-index: 1;
    width: 18px;
    height: 18px;
    cursor: pointer
}

label input[type=checkbox].ace,label input[type=radio].ace {
    z-index: -100!important;
    width: 1px!important;
    height: 1px!important;
    clip: rect(1px,1px,1px,1px);
    position: absolute
}

input[type=checkbox].ace:checked,input[type=checkbox].ace:focus,input[type=radio].ace:checked,input[type=radio].ace:focus {
    outline: 0!important
}

input[type=checkbox].ace+.lbl,input[type=radio].ace+.lbl {
    position: relative;
    display: inline-block;
    margin: 0;
    line-height: 20px;
    min-height: 18px;
    min-width: 18px;
    font-weight: 400;
    cursor: pointer;
    font-size: 13px;
}

input[type=checkbox].ace+.lbl::before,input[type=radio].ace+.lbl::before {
    cursor: pointer;
    font-family: fontAwesome;
    font-weight: 400;
    font-size: 12px;
    color: #FFF;
    content: "\a0";
    background-color: #FAFAFA;
    border: 1px solid #C8C8C8;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    border-radius: 0;
    display: inline-block;
    text-align: center;
    height: 16px;
    line-height: 14px;
    min-width: 16px;
    margin-right: 1px;
    position: relative;
    top: -1px;
}

input[type=checkbox].ace:checked+.lbl::before, input[type=radio].ace:checked+.lbl::before {
    display: inline-block;
    content: '\f00c';
    color: @colorPrimario;
    background-color: #F5F8FC;
    border-color: #ADB8C0;
    box-shadow: 0 1px 2px rgba(0,0,0,.05),inset 0 -15px 10px -12px rgba(0,0,0,.05),inset 15px 10px -12px rgba(255,255,255,.1);
}

input[type=checkbox].ace+.lbl:hover::before,input[type=checkbox].ace:hover+.lbl::before,input[type=radio].ace+.lbl:hover::before,input[type=radio].ace:hover+.lbl::before {
    border-color: @colorSecundario;
}

input[type=checkbox].ace:focus+.lbl::before,input[type=radio].ace:focus+.lbl::before {
    border-color: @colorSecundario;
}

input[type=checkbox].ace:active+.lbl::before,input[type=checkbox].ace:checked:active+.lbl::before,input[type=radio].ace:active+.lbl::before,input[type=radio].ace:checked:active+.lbl::before {
    box-shadow: 0 1px 2px rgba(0,0,0,.05),inset 0 1px 3px rgba(0,0,0,.1)
}

input[type=checkbox].ace.ace-checkbox-2+.lbl::before,input[type=radio].ace.ace-checkbox-2+.lbl::before {
    box-shadow: none
}

input[type=checkbox].ace.ace-checkbox-2:checked+.lbl::before,input[type=radio].ace.ace-checkbox-2:checked+.lbl::before {
    background-color: @colorSecundario;
    border-color: @colorSecundario;
    color: #FFF
}

input[type=checkbox].ace.disabled+.lbl::before,input[type=checkbox].ace:disabled+.lbl::before,input[type=checkbox].ace[disabled]+.lbl::before,input[type=radio].ace.disabled+.lbl::before,input[type=radio].ace:disabled+.lbl::before,input[type=radio].ace[disabled]+.lbl::before {
    background-color: #DDD!important;
    border-color: #CCC!important;
    box-shadow: none!important;
    color: #BBB
}

.checkbox label input[type=checkbox].ace+.lbl,.radio label input[type=radio].ace+.lbl {
    margin-left: -10px
}

input[type=radio].ace+.lbl::before {
    border-radius: 100%;
    font-size: 10px;
    font-family: FontAwesome;
    text-shadow: 0 0 1px #32A3CE;
    line-height: 15px;
    height: 17px;
    min-width: 17px;
}

input[type=radio].ace:checked+.lbl::before {
    content: "\f111";
}

input[type=checkbox].ace.input-lg+.lbl::before {
    border-radius: 4px;
    font-size: 16px;
    height: 24px;
    line-height: 21px;
    min-width: 24px;
    top: auto
}

input[type=radio].ace.input-lg+.lbl::before {
    font-size: 14px;
    height: 24px;
    line-height: 22px;
    min-width: 24px;
    top: auto
}

#infoMain .radio{
    margin-top: 0px;
    margin-bottom: 2px;
}
.div-left{
    float: left;
}
.left{
    text-align: left;
}
.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;
}
/*clase para el modal mas grande*/
.modal-xlg{
    width: 90% !important;
}
.modal-body-scroll{
    height: unit(@screenHeight - ((40*@screenHeight)/100),px ) !important;
    overflow-y: scroll !important;
}
/*cabiar el color de la paginacion*/
.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 ;
}

#divControlDistritos{
    position: absolute;
    /*float: left;*/
    top: 20px;
    left: 0px;
    padding-right: 10px;
    padding-left: 10px;
    z-index: 9000;
    /*background-color: #69D2E7;*/
    /*cursor:pointer;*/
    height: 100% !important;
    overflow-y: auto;

}
.tooltip-marker{
    background-color: @colorPrimario !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}
.leaflet-tooltip-left.tooltip-marker::before {
    border-left-color: #ffffff !important;
}
.leaflet-tooltip-right.tooltip-marker::before {
    border-right-color: #ffffff !important;
}
#divInfoDenuncia{
    height: 8% !important;
}
.poppup-reclamos{
    width: 1000px !important;
    max-height: 500px;
    overflow-y: scroll;
}


@media (max-width: 768px) {
	#divInfoDenuncia {
		display: table;
	}
	#cssmenu {
		background: @colorPrimario;
	}
	.leaflet-top.leaflet-right {
		display: flex;
	}
	.btnControlMax.leaflet-control,
	.btnControlCenter.leaflet-control {
		margin: 0;
	}
	.max,
	.cent {
		display: none
	}
	#buttonMaximixar,
	#buttonCenter {
		width: auto !important;
	}
}