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

.view-color-yellow {
    background-color: rgba(250, 190, 77, 0.3);
}

.view-color-red {
    background-color: rgba(255, 84, 104, 0.3);
}

.view-item-disabled {
    opacity: 0.5;
}

.toolbar-header-style {
    background-color: #5fa2dd !important;
}

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

.x-fieldset {
    overflow: visible !important;
    border-radius: 7px !important;
}

#update {
    margin: 20px;
    font-weight: bold;
    text-align: center;
}

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

#spinner:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    margin-left: -30px;
    border-radius: 50%;
    border: 6px solid transparent;
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
    animation: spinner .8s ease infinite;
}

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

/*modificaciones*/
.x-btn-default-small {
    /*Botones de Formularios*/
    background-color: #232323 !important;
    border-color: #000000 !important;
    border-radius: 20px !important;
    border: none !important;
}

/* mod error de invalido */
.x-form-invalid-field-default {
    background-color: #FFCCCC !important;
}

.x-form-invalid-icon-default {
    display: none !important;
}

.x-form-error-wrap-default.x-form-error-wrap-side {
    width: 0 !important;
}
/* mod error de invalido */

.x-btn-default-toolbar-small {
    /*Redondeo botones toolbar*/
    border-radius: 50px !important;
    transition: background-color 0.5s ease;
}

.x-btn.x-btn-pressed.x-btn-default-toolbar-small {
    /*Color de Fondo Botones presionados*/
    background-color: #929292 !important;
}

.x-fieldset-header-tool-default>.x-tool-toggle {
    /*Redondeo botones*/
    font: 10px/1 FontAwesome !important;
    padding: 2px 0 !important;
    border-radius: 100% !important
}

.x-toolbar .x-btn {
    /*Redondeo botones*/
    border-radius: 20px !important;
    border: none !important;
}

.x-panel-header-default-vertical {
    /*Color barra vertical cerrada*/
    background-color: #232323 !important;
}

.x-panel-header-default .x-tool-tool-el {
    /*Color elemento  barra*/
    background-color: #232323 !important;
}

.x-panel-header-default {
    /*Color Borde general*/
    border: 2px solid #232323 !important;
}

.x-panel-header-default {
    /*Color barra horizontal cerrada*/
    background-color: #232323 !important;
}

.x-window-default {
    /*Borde formularios*/
    border-color: #c3c3c3 !important;
    border-radius: 10px !important;
}

.x-btn-icon-el-default-toolbar-small {
    /*Color Icono Botones*/
    color: #232323 !important;
}

.x-window-header-default {
    /*Color de ventanas*/
    border-color: #c3c3c3 !important;
    background-color: #232323 !important;
}

.x-window-header-default .x-tool-img {
    /*Color de Boton cerrar ventana*/
    background-color: #232323 !important;
}

.x-toolbar-default {
    /*Color Barra inferior*/
    background-color: #232323 !important;
}

.x-toolbar-text-default {
    /*Color letra barra inferior*/
    color: #ffffff !important;
    font-weight: bold !important;
}

.x-panel-header-title-default {
    /*Color en barras*/
    color: #ffffff !important;
    font-weight: bold !important;
}

.x-boundlist-item {
    /*Colores de desplegables*/
    color: #232323 !important;
    font-weight: bold !important;
    border-style: groove !important;
    border-color: #c3c3c3 !important;
}

.x-form-text-default {
    /*Colores de desplegables*/
    color: #232323 !important;
}

.layer-switcher .panel {
    /* panel switcher  */
    border: 4px solid #232323 !important;
    background-color: #e4e4e4d9 !important;
}

.layer-switcher button {
    /* boton switcher */
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAJHAAACRwB4k/3RQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAP+SURBVFiFnddriFVVFAfw39ZRE7NsEmd8NUYhvSSJLCslkIpeFBGlPY2kD0Z+CCrKssCCIvqSUpQWQ0F9iCASgzK0lz3U7MFoRillZamZmZoPptx92Hv0eueec64d2Nx791mP/17/tddaN8QYNfOEEI7CFFyJM9GG9vx6c15fYTHeizHub8puFYAQQjtmYwYG4md8g3X5c28GMhyTMCHvLcQTMcYtpQ5ijA0XWvAY9mAXHkVrkXyNXitmYQf+znothfIFRkZgeXb+GpbgWpydIzERD+CSEiDteBUx2xrVFACMlfiM+BKv4CWsxhyJ52dwOzbiroqIXITvsBXj698flgMhhBH4GGPy1kcZUBu6MT+/H4Tjck4sjDFuL6I4hDAWnTgfv+H0GOOfvXIAAZ/mkzdaqzI1ffFhPv2LJSc/BdOk5HwHC9CFzoYUYGqB4834JH/fiHdxIH//Hec1cN5HSuA3cS8+z873ZjsXHwYA/bEBWwpAdGGudAUj3sghvQJnlURhXgbbjZ9q7P2AQTFGLZmJOzOvwwqo3IFTM8hOPI/uGOPWRsIhhIFYiqF4CJsykHswBP/kCN0dcDR+xH6J47Ln8Rjj7AoZIYS+0hX8RaJvE46XKCDdpgkZjAszunOlRCtKwqcwoKoQ5dBPdojviBW4DrfhGnRItEwkhX9lVlwo8ROxJqNsx4Ny2W7C+bFYVHKQnnUA95GKyvysPEUqoxE3SVdzSDOOawB81oTznvVWH5yWORJjXCZl+AZMxzJcVcV53fPXEcieQyqRtzQ4yWAp9Dvy7w5c39OoSiKw+ggi0E3qdL0A1Bi8DLfie4fu8HIF1GB8thmlbrivBMBuUqO4v4LXE6SkqTcwuUB+XA7vUJyM1wsAbGiRGsTICq5elhKy/pkbQujExhjjBz2bMcauGpltIYT1BXY3w3NYURGB90vCGKXKNr1Ev0NjKhaQOD6A4RUG/igBsA/jKg6xpIHepTAAOzGzwsDlUgdsBGBNhW4r/q3T+RV9ewSele5+vwpD0woAvNBEgXq7TufJGOPBdtwmXZ1Z/wPAiU1WyHk1Ort79GoF5mBbmUFcUOd8D0Y3CaCjRu+Og/s1Av2lArMWxxQYOaMOwIxmnGfddmzHosP264TapMllaSMQ0qi1TipeN2q+Q7biC6nmDCsEkIXHZRBrG9GBldKM1+xscFJ23oUxvd4XKLVlOrZJ7blfzbsbcvh7Gauz0SL9edkjzQeDG8qVGOifE3NXvqIz5WIlteqpBXojpUn4W6k1P4w+RX6a+XPahkdwszQ/rso0bMorYDRGSbPFJKnIPI0FMcadpfarANQAGSBNTFdLE/LwvLqxvmZ9LWV6dzN2/wNxtG2GNHd4XwAAAABJRU5ErkJggg==') !important;
    background-color: #ced8e100 !important;
}

.layer-switcher {
    /* boton switcher */
    top: .5em !important;
}

.ol-full-screen {
    /*cambia lugar del boton maximizar */
    left: .5em !important;
    top: 5em !important;
    right: initial !important;
}

.ol-rotate {
    /*cambia lugar del boton rotar */
    top: 8em !important;
    left: .5em !important;
    right: initial !important;
}

.x-form-text-default {
    border-radius: 7px !important;
}

.x-form-trigger-wrap-default.x-form-trigger-wrap-invalid {
    border-radius: 7px !important;
}

.x-form-trigger-wrap-default.x-form-trigger-wrap-default {
    border-radius: 7px !important;
}

.x-form-trigger-invalid {
    border-radius: 7px !important;
}

.x-form-trigger-default {
    border-radius: 7px !important;
}

.x-form-trigger.x-form-trigger-default.x-form-trigger-click {
    border-radius: 7px !important;
}

.x-datepicker-month .x-btn-inner {
    color: #d2d2d2 !important;
    font-weight: bold;
}

/* Animación de destello */
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

html {
    background: url(/images/wallpaper.png) !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-color: #000000 !important;
}
/*modificaciones*/