$white: #FFF;
$theme-color: #839192;
$theme-color-focus: #717d7e;
$theme-color-dark: #4d5656;

.sidebar-scroll,
#timeline .post-content .post-date span {
    background: $theme-color;
}

.sidebar-menu {
    li {
        a {
            color: rgba(255, 255, 255, .8);

            &:active,
            &:hover,
            &:focus {
                color: $white !important;
                background-color: rgba(255, 255, 255, .1);
            }
        }

        ul {
            li {
                a {
                    color: rgba(255, 255, 255, .8);

                    &:hover {
                        color: $white;
                        background-color: rgba(255, 255, 255, .1);
                    }
                }
            }
        }
    }

    li.active {
        >a {
            color: $white !important;
            background-color: rgba(255, 255, 255, .2);
        }
    }
}

.sidebar-toggled {
    .sidebar-menu {
        li {
            &:hover {
                background-color: $theme-color;
            }
        }
    }
}

.nav-tabs {
    li {
        a {

            &:hover,
            &:focus,
            &:active {
                color: $theme-color !important;
            }
        }

        .active,
        &.active {
            color: $theme-color !important;
        }

        &:not(.title-tab) a::after {
            background-color: $theme-color;
        }
    }
}

.list-group-item.active {
    background: $theme-color;
    border-color: $theme-color;

    &:focus,
    &:hover {
        background: $theme-color;
        border-color: $theme-color;
    }
}

.btn-primary {
    background-color: $theme-color;
    border-color: $theme-color;

    &:hover,
    &:active,
    &:focus {
        background-color: $theme-color-focus !important;
        border-color: $theme-color-focus !important;
        color: $white;
    }
}

.bg-success {
    background-color: $theme-color-focus !important;
}

a {
    color: $theme-color-focus;

    &:hover,
    &:focus,
    &:active {
        color: $theme-color-dark;
    }
}

.circle-done {
    color: $theme-color;
}

.app-alert {
    &.alert-success {
        background-color: $theme-color-focus;
        color: #fff;
    }
}

.bg-dark-success {
    background: $theme-color-dark;
}

.dataTable tbody tr.active {

    td,
    &:hover td {
        background: $theme-color !important;
    }
}

td {
    &.dropdown-option button {
        &:hover {
            background: $theme-color;
            border-color: $theme-color;
        }
    }
}

.select2-results .select2-highlighted {
    background-color: $theme-color;
}

.datepicker table tr td {
    &.active.active {
        background: $theme-color;
        border-color: $theme-color;

        &:hover {
            background: $theme-color;
            border-color: $theme-color;
        }
    }

    span.active {

        &.active,
        &:hover.active {
            background: $theme-color;
            border-color: $theme-color;
        }

        &.disabled {

            &.active,
            &:hover.active {
                background: $theme-color;
                border-color: $theme-color;
            }
        }

        &.active:hover {
            background: $theme-color;
            border-color: $theme-color;
        }
    }
}

.atwho-view .cur,
.note-hint-group .active,
.note-hint-item:hover {
    background-color: $theme-color !important;
}

.sidebar-scroll {
    &::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.1);
    }

    &::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    &::-webkit-scrollbar-thumb:active {
        background: rgba(255, 255, 255, 0.2);
    }
}

@media (min-width: 991px) {
    .sidebar {
        background: $theme-color;
    }
}

.bg-primary {
    background-color: $theme-color !important;
}

.sidebar-brand {
    background-color: $theme-color;
}

@media (max-width: 500px) {
    .sidebar {
        &.sidebar-off {
            background-color: $theme-color;
        }

        .sidebar-scroll {
            border-top-color: #0000000f !important;
        }

        #personal-language-icon,
        .sidebar-toggle-btn {
            color: rgba(255, 255, 255, 0.8) !important;
        }
    }
}

.form-check-input {
    &:checked {
        background-color: $theme-color !important;
        border-color: $theme-color !important;
    }
}