.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;
}

/*
Alex, Aqui muda a cor toolbar da tela do map
*/

.toolbar-header-style {
    background-color: #16446d !important;
}

.x-panel-header-default {
    background-color: #16446d !important;
    border: 1px solid #16446d !important;
}

.x-panel-header-title-user {
    color: #f0f0f0;
    font-size: 16px;
    font-weight: 400;
    font-family: 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
    line-height: 20px;
    text-align: center;
}

.x-panel-header-default .x-tool-tool-el {
    background-color: #16446d !important;
}

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

.x-btn-default-toolbar-small {
    border-radius: 12px !important;
    background-color: rgba(228, 228, 228, 0.04) !important;
    border-color: rgba(228, 228, 228, 0.04) !important;
    color: #ffffff !important;
    /*Alex, aqui muda todos os botões tolbar rgba(228, 228, 228, 0.0392156862745098)*/
}

.x-btn-default-small {
    border-radius: 12px !important;
}

.x-btn-pressed {
    border-color: #ffffff !important;
}

.x-btn-over {
    border-color: #ffffff !important;
}

.x-btn-glyph {
    color: #ffffff !important;
}

.x-collapse-el {
    color: #ffffff !important;
    background-color: #17446c !important;
}

#login-1009 {
    border-color: rgb(251, 252, 253) !important;
}

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

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

#splogo {
    position: absolute;
    color: #16446d;
    font-size: 30px;
    top: 50%;
    left: 50%;
    margin-top: 13px;
    margin-left: -57px;
    font-weight: bold;
}

#spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    
    margin-top: -30px;
    margin-left: -30px;
}

/* control positioning */

.button-gps-right {
    margin-right: 8px;
    margin-top: 54px;
}

.ignition-right {
    margin-right: 8px;
    margin-top: 84px;
}

.button-gps-right {
    background-image: url(img/service-icon/gps-mobile.svg);
    width: 37px;
    height: 37px;
}

.ignition-right {
    background-image: url(img/service-icon/gps-mobile.svg);
    width: 37px;
    height: 37px;
}

svg path {
    fill: #000;
}

.ol-rotate {
    top: 9px !important;
    right: 58px !important;
}

.layer-control,
.button-gps-right,
.ignition-right {
    position: relative;
    z-index: 800;
    pointer-events: visiblePainted;
    /* IE 9-10 doesn't have auto */
    pointer-events: auto;
}

.layer-top {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
}

.layer-top {
    top: 0px;
}

.layer-right {
    right: 0;
}

.layer-control {
    float: left;
    clear: both;
}

.layer-right .layer-control {
    float: right;
}

.layer-top .layer-control {
    margin-top: 10px;
}

.layer-right .layer-control {
    margin-right: 7px;
}

.layer-control-layers,
.button-gps-right,
.ignition-right {
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, .4);
}

.layer-control-layers-toggle {
    background-image: url(img/service-icon/layers.png);
    width: 36px;
    height: 36px;

}

.layer-bar a,
.layer-control-layers-toggle,
.button-gps-right,
.ignition-right {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: block;
}

.layer-control-layers .layer-control-layers-list {
    display: none;
}

.layer-control-layers label {
    display: block;
}

.layer-control-layers-selector {
    margin-top: 7px;
    position: relative;
    top: 2px;
    margin-bottom: 7px;
    font-weight: bold;
    cursor: pointer;
}

.divTime,
.divEnd,
.divVeloc,
.divIng,
.divBloq,
.divDir,
.divMov,
.divLeftState,
.divTopState {
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, .4);

    position: absolute;
    pointer-events: visiblePainted;
    /* IE 9-10 doesn't have auto */
    pointer-events: auto;
}

.divTime,
.divVeloc {
    border-radius: 0px 0px 8px 8px;
}

.divTime {
    width: 155px;
    margin: 0 auto;
    position: static;
}

.divVeloc {
    width: 105px;
    top: 25px;
    margin: 0 auto;
    position: static;
}

.fa-clock-o,
.fa-tachometer {
    margin-left: 2px;
    margin-right: 4px;
    font-size: x-large !important;
    color: rgba(22, 68, 109, 0.839);
    ;
}

.divIng {
    top: 55px;
    right: 8px;

}

.divBloq {
    top: 97px;
    right: 8px;
}

.divIng,
.divBloq {
    border-radius: 17px;
    width: 36px;
    height: 36px;
}

.fa-lock,
.fa-key {
    margin-top: 14%;
    margin-left: 25%;
    font-size: x-large !important;
    color: rgba(22, 68, 109, 0.839);
    ;
}

.fa-key {
    margin-left: 18%;
}

.divMov {
    top: 140px;
    right: 8px;
    border-radius: 5px;
}

.divDir {
    top: 167px;
    right: 8px;
    width: 50px;
    border-radius: 5px;
}

.fa-compass {
    margin: 2px;
    font-size: x-large !important;
    color: rgba(22, 68, 109, 0.839);
    ;
}

.buttEnd {
    bottom: 7%;
    right: 8px;
    width: 36px;
    height: 36px;
    border-radius: 5px;
    background-color: transparent;
    cursor: pointer;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    position: absolute;
}

.divEnd {
    bottom: 7%;
    right: 8px;
    width: 250px;
}

.fa-map-marker {
    margin-left: 5px;
	margin-right: 4px;
    font-size: x-large !important;
    color: rgba(22, 68, 109, 0.839);
    ;
}

.divLeftState {
    display: none;
    width: 3px;
    height: 100%;
    top: 0%;
    right: 0%;
}

.divTopState {
    display: none;
    width: 100%;
    height: 3px;
    top: 0%;
}

.label-control {
    font-size: 13px;
    font-weight: 400;
    font-family: 'Open Sans', 'Helvetica Neue', 'helvetica', 'arial', 'verdana', 'sans-serif';
    line-height: 16px;
}

.x-btn-wrap-default-toolbar-small.x-btn-arrow-right:after {
    color: #fff !important;
}