.view-color-green {
    background-color: rgba(77, 250, 144, 0.3);
}
.view-color-yellow {
    background-color: rgba(77, 250, 144, 0.3);
}
.view-color-red {
	background-color: rgba(255,255,255,0.3);
} 

      .ol-popup {
        display: none;
        position: absolute;
        /*background-color: white;*/
        -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        padding: 15px;
        border-radius: 4px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -50px;
        min-width:220px;
		
		/*AGREGADO ALEX*/
		background-color: #DCDCDC;
		color: #000;
		opacity: 0.9;
		-khtml-opacity: 1;
		-moz-opacity:1;
		filter: alpha(opacity=0);
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
		/*AGREGADO ALEX*/
      }
      .ol-popup:after, .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
      }
      .ol-popup:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
      }
      .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
      }
      .ol-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 2px;
        right: 15px;
      }
      .ol-popup-closer:after {
        content: "✖";
		color: #000;
      }
	  
.view-item-disabled {
    opacity: 0.5;
}


/*BODY BACKGROUND IMAGEN = bg.jpg*/
.x-body {
    background: url("bg_map.jpg") !important;
    background-image: url("bg_map.jpg") !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: center !important;
    background-size: 100% !important; 
}
@media screen and (max-width: 800px) {
  .x-body {
    background: #fff !important;
    background-image: none !important;
  }
}

/*HEADERS TOOLBARS*/
.toolbar-header-style {
    /*background-color: #5fa2dd !important;*/
	background-color: #FFFFFF !important;
	border: none !important;
}

/*BARRA DE EVENTOS - BLANCO*/
.toolbar-events-header-red {
	background-color: #FFFFFF !important;
	border: none !important;
}

/*OCULTAR PANEL DE EVENTOS COMPLETAMENTE*/
.eventsView {
	display: none !important;
	visibility: hidden !important;
}

body.x-border-layout-ct, div.x-border-layout-ct {
    background-color: #000 !important;
}

.x-fieldset {
    overflow: visible !important; /* workaround for Safari issue */
}


#update {
    position: absolute;
    width: 100%;
    top: 20px;
    font-weight: bold;
    text-align: center;
}

#attribution {
    position: absolute;
    bottom: 10px;
    right: 15px;
    font-size: x-small;
}

#spinner:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    margin-left: -24px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    border-top-color: #0070d4;
    border-right-color: rgba(0, 112, 212, 0.3);
    animation: spinner .9s ease-in-out infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}


/*AGREGADO ALEX----------------------------------*/
.toolbar-text-color {
  color: #000 !important;
}

/*COLOR PARA LOS LABELS DE LOS FORMULARIOS*/
.x-form-item-label-inner { 
    /*color: #b6fd31 !important;*/  /*ESTE TIENE QUE CAMBIAR*/
	color: #000 !important;
    font-weight: bold !important;
}
/*BACKGROUND FORMULARIOS*/ 
.x-fieldset {
    background-color: #FFF !important; 
    color: #000 !important; /*ESTE TIENE QUE CAMBIAR*/
}

/*TODOS LOS BOTONES DE TOOLBARS - SOLO ICONOS*/
.x-btn {
    border: none !important;
    padding: 8px !important;
    text-align: center !important;
    position: relative !important;
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    color: #FFF !important;
    outline: none !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    margin: 2px 4px !important;
    transition: none !important;
    box-shadow: none !important;
}

/*HOVER - SOLO EL ICONO CAMBIA*/
.x-btn:hover {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

.x-btn:active {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/*BOTONES DESHABILITADOS - SIN MARCOS*/
.x-btn-disabled,
.x-btn-disabled:hover,
.x-btn-disabled:active,
.x-item-disabled {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/*WRAPPER DEL BOTON DESHABILITADO*/
.x-btn-disabled .x-btn-wrap,
.x-btn-disabled .x-btn-button {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
}

/*ICONO DESHABILITADO - MAS VISIBLE*/
.x-btn-disabled .x-btn-glyph {
    color: #999999 !important;
    opacity: 0.4 !important;
}
/*COLOR DE ICONOS TOOLBAR*/
.x-btn-glyph {
    color: #0070d4 !important;
    transition: all 0.2s ease !important;
}

/*HOVER - SOLO EL ICONO RESALTA*/
.x-btn:hover .x-btn-glyph {
    color: #005bb5 !important;
    transform: scale(1.15) !important;
}

/*NO HOVER EN DESHABILITADOS*/
.x-btn-disabled:hover .x-btn-glyph {
    color: #999999 !important;
    transform: none !important;
}

/*FLECHITAS DE LOS BOTONES DESPLAGABLES*/
.x-btn-wrap-default-toolbar-small.x-btn-arrow-right::after {
    color: #000 !important;
}

/*COLOR DEL TEXTO DE LOS BOTONES DEL TOOLBAR DE REPORTES*/
.x-btn-inner-default-toolbar-small {
    color: #000 !important;
}


/*CONTENEDOR BOTONES DEL FOOTHER DE LOS WINDOWS*/
.x-toolbar-footer {
    border-color: #FFF !important;
    background-color: #FFF !important;
}

/*TODOS LOS BOTONES DE PANELES*/
.x-btn-default-small {
		border-color: #000 !important;
		background: #FFF !important;
		border-radius:0px !important;
		-webkit-border-radius:0px !important;
		/*padding:6px 20px 6px 20px;*/
		border:solid thin #fff !important;
}

/*COLOR TEXTO ALGUNOS BOTONES DE PANELES*/
.x-btn-inner-default-small {
    color: #000 !important;
}

/*ELEMENTO UNA VEZ COLAPSADO*/
.x-panel-header-default-vertical {
		background-color: #FFFFFF !important;
		cursor: pointer; 
}

/*FLECHAS COLAPSAR EN PESTAÑA*/
.x-tool-img {
		background-color: #FFFFFF !important;
		color: #FF0000!important;
}

/*HEADERS TITULOS*/
.x-panel-header-default {
		background-color: #FFFFFF !important;
		border: none !important;
		cursor: pointer; 
}
/*COLOR TEXTO REGILLAS DE LOS FORMULARIOS*/
.x-fieldset-header-text {
    color: #0070d4 !important;    
}

/*SEPARADOR DE REGIONES*/
.x-splitter-default {
    background-color: #FFF !important;
}
.x-splitter-focus::after {
    border: 1px solid #FFF !important;
}

/*BACKGROUND Y COLOR DE LA FLECHITA DE ENMEDIO DE LAS REGIONES*/
.x-collapse-el {
    background-color: #FFF !important;
    color: #FF0000 !important;  
}

/*BORDE INTERIOR DEL WINDOW*/
.x-panel {
    border: 0px solid #000 !important;
}

/*BORDE EXTERIOR DEL WINDOW*/
.x-window {
    border: 2px solid #FFF !important;
}

/*BACKGROUND DEL WINDOW*/
.x-window-body { 
	/*background:#000 !important;*/ /*ESTE TIENE	 CAMBIAR*/
	background:#FFF !important;
} 

/*BACKGROUND Y BORDE DEL HEADER DEL WINDOW*/
.x-window-header { 
	background:#FFFFFF !important; 
	border-color:#FFFFFF !important;
}

/*BACKGROUND CAMPOS*/
.x-form-text{
    background:#FFF !important;
}

/*BACKGROUND FOCUS CAMPOS*/
.x-form-focus{
	background:#FFF !important;

}

/*BACKGROUND COMBOBOX HOVER*/
.x-boundlist-item-over{
	background:#929292 !important;
	background-image: none !important;
}

/*BORDER DE CAMPOS Y COMBOBOX*/
.x-form-trigger-wrap-focus{
    border-color:#929292 !important;
}

/*BACKGROUND DE LOS PANELES*/
.x-panel-body{
	background: #FFF !important;
}

/*HEADERS DE GRIDS (COLUMNAS)*/
.x-column-header {
	background: #FFFFFF !important;
	border-color: #E0E0E0 !important;
}

.x-grid-header-ct {
	background: #FFFFFF !important;
	border-color: #E0E0E0 !important;
}

/*CUANDO ESTA DESABILITADO UN BOTON DEL TOOLBAR*/
.x-item-disabled{
	background: #fff !important;
}

/*COLOR TEXTOS HEADERS PANELES Y HEADERS TABLAS ENCABEZADOS*/
.x-box-item{
    color: #0087ff !important;
}

/*BACKGROUND DE LOS ITEMS DEL MENU*/
.x-menu-item{
    background-image: none !important;
    background-color: #FFF !important;
}

/*BACKGROUND DE LOS ITEMS DEL MENU OVER*/
.x-menu-item-default:hover{
    background-color: #929292 !important;
    background-image: none !important;
}

/*BACKGROUND MODAL*/
.x-mask {
    filter: alpha(opacity=70);
    opacity: .7;
    background: #000 !important;
}


/* OPEN STREET MAP */

/*borde de los botones zoom*/
.ol-zoom {
    background: #fff !important;    
}

/*background botom mas del mapa*/
.ol-zoom-in {
    background: #0070d4 !important;
}

/*background botom menos del mapa*/
.ol-zoom-out {
    background: #0070d4 !important;
}

/*borde del boton inferior del mapa*/
.ol-scale-line {
    background: #929292 !important;
}

/*background del boton inferior del mapa*/
.ol-scale-line-inner {    
    background: #ffff !important;
    color: #0070d4 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
}
.ol-attribution {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   VENTANA DE LOGIN - ESTILO MODERNO (solo afecta login-window)
   ══════════════════════════════════════════════════════════════════════ */

/* Campos de texto en login */
.login-window .x-form-text {
    border-radius: 6px !important;
    border: 1px solid #ddd !important;
    transition: all 0.3s ease !important;
}

.login-window .x-form-text:focus {
    border-color: #0070d4 !important;
    box-shadow: 0 0 0 3px rgba(0, 112, 212, 0.1) !important;
}

/* Botones del login */
.login-window .x-btn {
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.login-window .x-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 112, 212, 0.2) !important;
}