.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: rgb(0, 170, 179) !important;
}
.x-panel-header-default {
    background-color: rgb(0, 170, 179) !important;
}
.x-window-default{
    border-color: rgb(160, 160, 160) !important;
    background-color: rgb(160, 160, 160) !important;
}
.x-panel-header-default .x-tool-tool-el {
    background-color: rgb(0, 170, 179) !important;
}
.x-btn-over.x-btn-default-small, .x-btn-default-small, .x-window-header-default-top, .x-window-header-default .x-tool-img {
    border-color: rgb(0, 170, 179) !important;
    background-color: rgb(0, 170, 179) !important;
}

.x-splitter.x-border-item.x-box-item.x-splitter-default.x-splitter-vertical.x-unselectable{
    background-color: rgb(187,187,187) !important;
}
.x-splitter.x-border-item.x-box-item.x-splitter-default.x-splitter-collapsed.x-splitter-horizontal.x-unselectable{
    background-color: rgb(187,187,187) !important;
}

.ol-control button{
    display: block;
    margin: 1px;
    padding: 0;
    color: #fff;
    font-size: 1.14em;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    height: 1.375em;
    width: 1.375em;
    line-height: .4em;
    background-color: rgb(0, 170, 179, 0.8) !important;
    border: none;
    border-radius: 2px;
}

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

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

#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: 60px;
    height: 60px;
    margin-top: -30px;
    margin-left: -30px;
    border-radius: 50%;
    border-top: 6px solid rgb(250, 250, 250);
    border-right: 6px solid transparent;
    animation: spinner .6s linear infinite;
}

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