:root {
    --main-color: #0060cc;
    --outline-color: orange;
    --secondary-color: #0060cc;
    /*kolory przycisków*/
    --btn-success: rgb(21, 120, 70);
    --btn-successhover: #00701a;
    --btn-primary: rgb(0,96,204);
    --btn-primaryhover: rgb(0, 86, 179);
    --btn-secondary: #757575;
    --btn-secondaryhover: #494949;
}

.green {
    color: var(--green);
}

.red {
    color: var(--red);
}

.red {
    color: var(--blue);
}


/* kolory */
a {
    color: var(--main-color);
}

    a:hover {
        color: var(--main-color);
    }

th a:hover, .dxbs-th a:hover {
    text-decoration: none;
    color: var(--main-color);
}

a.nav-link, th a, .page-item a, .dxbs-th a, .dxbs-th a:hover, th .btn-link, .dxbs-th .btn-link, th .btn-link:hover {
    color: var(--main-color);
}

.btn-link {
    color: var(--main-color);
}

td .btn-link {
    color: var(--main-color);
}

.page-item.active .page-link {
    color: white;
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.page-item a:hover {
    background-color: rgba(0,0,0,.12);
    color: var(--main-color);
}

.accordion button:hover {
    background-color: rgba(0,0,0,.12);
    color: var(--main-color);
}

.accordion button {
    color: rgba(0,0,0,0.6);
}

.bg-primary {
    background-color: var(--main-color) !important;
}

.btn-success {
    color: rgb(255, 255, 255);
    background-color: var(--btn-success) !important;
    border-color: var(--btn-success) !important;
}

    .btn-success:hover {
        background-color: var(--btn-successhover) !important;
        border-color: var(--btn-successhover) !important;
    }

.btn-primary {
    color: rgb(255, 255, 255);
    background-color: var(--btn-primary) !important;
    border-color: var(--btn-primary) !important;
}

    .btn-primary:hover {
        background-color: var(--btn-primaryhover) !important;
        border-color: var(--btn-primaryhover) !important;
    }

.btn-secondary {
    color: rgb(255, 255, 255) !important;
    background-color: var(--btn-secondary) !important;
    border-color: var(--btn-secondary) !important;
}

    .btn-secondary:hover {
        background-color: var(--btn-secondaryhover) !important;
        border-color: var(--btn-secondaryhover) !important;
    }


#navbar .navbar-toggler {
    background-color: var(--main-color) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #ffffff;
    background-color: var(--secondary-color);
}

@media (min-width: 576px) { /* s, md, lg*/
    #sidebar #navTreeView li:not(.active) > a:hover {
        background: var(--secondary-color) !important;
        color: white;
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    /* s, md */
    body:not(.show-nav) #sidebar #navTreeView .nav-link.active,
    body:not(.show-nav) #sidebar #navTreeView .nav-item.active-parent > a {
        background: var(--secondary-color) !important;
        color: white;
    }
}


@media (min-width: 992px) {
    /* lg, xl */
    body.collapse-nav #sidebar #navTreeView .nav-link.active,
    body.collapse-nav #sidebar #navTreeView .nav-item.active-parent > a {
        background: var(--secondary-color) !important;
        color: white;
    }
}

.dxbs-header-panel .card-body:hover {
    background: var(--secondary-color) !important;
    color: white
}

.dxbs-header-panel .card-body > a:hover {
    background: var(--secondary-color) !important;
    color: white
}


#sidebar #navTreeView li:not(.active) > a:active {
    background: var(--secondary-color) !important;
    color: white;
}

input:focus, textarea:focus, select:focus, button:focus {
    outline: 3px solid transparent !important;
    border-color: var(--outline-color) !important;
    /*outline: currentcolor none 0px;*/
    box-shadow: var(--outline-color) 0px 0px 0px 0.2rem !important;
}

a:focus 
/*a:active*/
{
    outline: 3px solid transparent;
    border-color: var(--outline-color) !important;
    /*outline: currentcolor none 0px;*/
    box-shadow: var(--outline-color) 0px 0px 0px 0.2rem !important;
    border-radius: 0.25rem;
}