/*
 * Skin: XGPS
 * --------------
 * V.1 JM
 */

:root {
    --mainColor: #087F5B;
    --mainColorLight: rgba(255,255,255,.1);
    --mainColorDark: #28A745;
    --mainColorFont: #FFFFFF;
    --colorDetails: #000000;
}

/***********
*** LOGIN
***********/

.skin-xgps.login-page {
    background: linear-gradient( 155deg, var(--mainColor) 50%, rgb(0, 0, 0) 50%) !important;
}

.skin-xgps .text-success {
    color: var(--mainColor) !important;
}

.skin-xgps.login-page a.text-success:focus,
.skin-xgps.login-page a.text-success:hover {
    color: var(--mainColorDark) !important;
}

.skin-xgps.login-page .btn-success {
    color: var(--mainColorFont);
    background-color: var(--mainColor);
    border-color: var(--mainColor);
    box-shadow: none;
}

.skin-xgps.login-page .btn-success:hover {
    color: var(--mainColorFont);
    background-color: var(--mainColorDark);
    border-color: var(--mainColorDark);
}

.skin-xgps #load_re {
    border-top-color: var(--mainColor) !important;
}

.skin-xgps .dropdown-footer,
.skin-xgps .dropdown-header {
    background: var(--colorDetails) !important;
    color: var(--mainColorFont) !important;
}

.skin-xgps .show a.dropdown-footer {
    color: var(--mainColorFont) !important;
    background-color: var(--colorDetails) !important;
}

.skin-xgps .show .new::after {
    content: "";
    height: 79px;
    background-color: var(--mainColor) !important;
    opacity: 0.65;
    display: block;
    position: relative;
    z-index: -1;
    margin-top: calc(-61px + -.5rem) !important;
    margin-left: -1rem !important;
    margin-right: -1rem !important;
}

.skin-xgps .table-striped tbody tr.new td::after {
    content: "";
    height: 46px;
    width: 100%;
    background-color: var(--mainColor) !important;
    opacity: 0.45;
    display: block;
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
}

.skin-xgps .mapFoo button.btn-dark {
    color: var(--mainColorFont) !important;
    background-color: var(--colorDetails) !important;
    border-color: var(--colorDetails) !important;
    box-shadow: none;
}

.skin-xgps .control-sidebar .input-group button.btn-dark {
    color: var(--mainColorFont) !important;
    background-color: var(--mainColor) !important;
    border-color: var(--mainColor) !important;
    box-shadow: none;
}

.skin-xgps .mapFoo a.nav-link:hover,
.skin-xgps .mapFoo button.nav-link:hover {
    color: var(--mainColorFont) !important;
    background-color: var(--colorDetails) !important;
    border-color: var(--colorDetails) !important;
    box-shadow: none;
}



/***********
*** BODY
***********/

.skin-xgps nav.navbar-green {
    background-color: var(--mainColor) !important;
}

.skin-xgps .main-header {
    /* border-bottom: 2px solid var(--colorDetails) !important; */
    background-color: var(--mainColor) !important;
}

.skin-xgps .main-footer {
    background: var(--mainColor) !important;
    border-top: 2px solid var(--colorDetails) !important;
    color: var(--mainColorFont) !important;
}

.skin-xgps .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.skin-xgps .sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active,
.skin-xgps .nav-pills .nav-link.active,
.skin-xgps .nav-pills .show > .nav-link {
    background-color: var(--mainColor) !important;
    color: var(--mainColorFont);
}

/*  Skin new  */

.skin-xgps .card-success.card-outline,
.skin-xgps .br-success-outline {
    border-top: 3px solid var(--mainColor);
}

.skin-xgps .nav-tabs .nav-link:not(.active),
.skin-xgps .nav-pills .nav-link:not(.active):hover {
    color: var(--mainColor) !important;
}
/*
[class*=sidebar-dark-] .nav-sidebar > .nav-item.menu-open > .nav-link,
[class*=sidebar-dark-] .nav-sidebar > .nav-item:hover > .nav-link,
[class*=sidebar-dark-] .nav-sidebar > .nav-item > .nav-link:focus {
    background-color: var(--mainColorLight) !important;
}
*/
.skin-xgps ul.dropdown-menu-right li.user-body:hover {
    background: var(--mainColor) !important;
    color: var(--mainColorFont) !important;
}

.skin-xgps .widget-user-header {
    background-color: var(--mainColorDark) !important;
}

.skin-xgps .head-footer {
    background: var(--mainColor) !important;    
}

.skin-xgps thead {
    background-color: var(--mainColor) !important;
    color: var(--mainColorFont) !important;
}

.skin-xgps [class*=sidebar-dark-] .nav-treeview > .nav-item > .nav-link:focus,
.skin-xgps [class*=sidebar-dark-] .nav-treeview > .nav-item > .nav-link:hover {
    background-color: var(--mainColorLight) !important;
    color: var(--mainColorFont) !important;
}

.skin-xgps .row .xtitle {
    background-color: var(--colorDetails) !important;
    color: var(--mainColorFont) !important;
}

.skin-xgps .box,
.skin-xgps .box .server:after,
.skin-xgps .box .server:before,
.skin-xgps .box .server,
.skin-xgps .box .box__ghost .box__ghost-container .box__ghost-eyes .box__eye-left,
.skin-xgps .box .box__ghost .box__ghost-container .box__ghost-eyes .box__eye-right {
    background: var(--mainColor) !important;
}

.skin-xgps .box .box__description .box__button {
    color: var(--mainColor) !important;
}

.skin-xgps .box .box__ghost .box__ghost-container .box__ghost-bottom div:nth-child(2n) {
    border-top: 15px solid var(--mainColor) !important;
}

.skin-xgps .menu-circle-icon:hover a.nav-link i,
.skin-xgps .menu-circle-icon.show a.nav-link i {
    color: var(--mainColor) !important;
}

.skin-xgps .menu-circle-icon.show a.dropdown-item i,
.skin-xgps .menu-circle-icon.show a.dropdown-item b {
    color: var(--mainColor);
}

.skin-xgps .dx-datagrid-headers .dx-datagrid-table .dx-row > td {
    border-bottom: 1px solid #ddd;
    background-color: var(--mainColor) !important;
    color: var(--mainColorFont) !important;
    font-weight: bold;
}

.skin-xgps .dx-pager .dx-page-sizes .dx-selection,
.skin-xgps .dx-pager .dx-pages .dx-selection {
    cursor: inherit;
    text-shadow: none;
    color: var(--mainColorFont) !important;
    border-color: transparent;
    background-color: var(--mainColor) !important;
}


/********************************/
/* DATATABLE HOME - LTC-DEVICES */
/********************************/

.skin-xgps .ltc-devices .page-item.active .page-link {
    background-color: var(--mainColor) !important;
    border-color: var(--mainColor) !important;
    color: #ffffff !important;
}

.skin-xgps .ltc-devices .page-link {
    color: var(--mainColor) !important;
}



/********************************/
/* HOME - WIDGETS */
/********************************/

.skin-xgps .small-box .icon {
    color: var(--mainColor) !important;
    opacity: 0.15;
}

.skin-xgps .small-box > .small-box-footer:before {
    background-color: var(--mainColor) !important;
    opacity: 0.1;
}
/*
.ddni .info-box .info-box-icon,
.ddni .info-box .info-box-number {
    color: var(--mainColor) !important;
}
*/
.skin-xgps .igeneral rect.highcharts-point {
    fill: var(--mainColor) !important;
}

.skin-xgps .breadcrumb a {
    color: var(--mainColor) !important;
}

.skin-xgps .card-footer.lasted-foo:after {
    background-color: var(--mainColor) !important;
    opacity: 0.1;
    left: 0;
    bottom: 0;
    height: 47px;
    position: absolute;
}

/*
.leaflet-interactive {
    filter: drop-shadow(1px 1px 0px var(--mainColor)) drop-shadow(-1px 1px 0px var(--mainColor)) drop-shadow(1px -1px 0px var(--mainColor)) drop-shadow(-1px -1px 0px var(--mainColor)) !important;
}
*/


/********************************/
/* CLIENTES - WIDGETS */
/********************************/

/*
.dropdown-menu-header-inner {
    background-color: var(--mainColor) !important;
}
*/

.skin-xgps .cliente-xgps .list-group-item.active {
    background-color: var(--mainColor) !important;
    border-color: var(--mainColor) !important;
}

/********************************/
/* GLOBAL */
/********************************/

.skin-xgps .select2-container--default .select2-results__option--highlighted[aria-selected],
.skin-xgps .select2-container--default .select2-results__option--highlighted[aria-selected]:hover {
    background-color: var(--mainColor) !important;
    color: var(--mainColorFont) !important;
}

.skin-xgps .control-sidebar select option:not(:first-child):checked,
.skin-xgps .control-sidebar select option:hover
/*, .skin-xgps .control-sidebar select:focus > option:checked,
.skin-xgps .control-sidebar select:focus > option:hover */ {
    background-color: var(--mainColor) !important;
    color: var(--mainColorFont) !important;
}

.skin-xgps .page-item.active .page-link {
    color: var(--mainColorFont) !important;
    background-color: var(--mainColor) !important;
    border-color: var(--mainColor) !important;
}


@media (max-width: 991.98px) {
    .skin-xgps .row .xtitle:nth-child(odd) {
        background-color: var(--colorDetails) !important;
        color: var(--mainColorFont) !important;
    }
    .skin-xgps .main-footer {
        /* border-top: 2px solid var(--colorDetails) !important; */
        border-top: 2px solid #054c37 !important;
    }
    .skin-xgps .main-header {
        border-bottom: 2px solid #054c37 !important;
    }
    .text-sm .nav-link {
        padding: 0.3rem 0.8rem;
    }
}

@media (max-width: 767.98px) {
    .skin-xgps .row .xtitle:nth-child(odd) {
        background-color: var(--colorDetails) !important;
        color: var(--mainColorFont) !important;
    }
    .skin-xgps .main-footer {
        /* border-top: 2px solid var(--colorDetails) !important; */
        border-top: 2px solid #054c37 !important;
    }
    .skin-xgps .main-header {
        border-bottom: 2px solid #054c37 !important;
    }
    .text-sm .nav-link {
        padding: 0.3rem 0.8rem;
    }
}

@media (max-width: 575.98px) {
    .skin-xgps .row .xtitle:nth-child(odd) {
        background-color: var(--colorDetails) !important;
        color: var(--mainColorFont) !important;
    }
    .skin-xgps .main-footer {
        /* border-top: 2px solid var(--colorDetails) !important; */
        border-top: 2px solid #054c37 !important;
    }
    .skin-xgps .main-header {
        border-bottom: 2px solid #054c37 !important;
    }
    .text-sm .nav-link {
        padding: 0.3rem 0.8rem;
    }

}


.skin-xgps .main-footer {
    border-top: 2px solid #054c37 !important;
}

.skin-xgps .main-header {
    border-bottom: 2px solid #054c37 !important;
}



/********************************/
/* LOADER - WIZARD */
/********************************/


.wizard .body {
    background: var(--mainColor);
}

.wizard .body::after {
    background: var(--mainColor);
}

.wizard .right-arm {
    background: var(--mainColor);
}

.wizard .left-arm {
    background: var(--mainColor);
}

.wizard .head .hat {
    background: var(--mainColor);
}

.wizard .head .hat::before {
    border-color: transparent transparent var(--mainColor) transparent;
}

.wizard .head .hat::after {
    background: var(--mainColor);
}

.wizard .head .hat .hat-of-the-hat {
    border-color: transparent transparent var(--mainColor) transparent;
}

.wizard .head .hat .hat-of-the-hat::after {
    background: var(--mainColor);
 }