/*
Template Name: Admin Pro Admin
Author: Wrappixel
Email: niravjoshi87@gmail.com
File: scss
*/

@import '../variable';
$themecolor: #20aee3;
$themecolor-dark: #028ee1;
$topbar: #2e333f;
$sidebar:#2e333f;
$sidebar-text: #767e91;
$sidebar-icons: #9199ae; 
$sidebar-dark: #fff;
$sidebar-alt:#fff;
$themecolor-alt: #26c6da;
$topbar-alt: #272c33;

/*******************
/*Top bar
*******************/

.topbar {
    background: $topbar;
    .top-navbar .navbar-header .navbar-brand .dark-logo {
        display: none;
    }
    .top-navbar .navbar-header .navbar-brand .light-logo {
        display: inline-block;
        color: rgba(255, 255, 255, 0.5);
    }
    .navbar-nav .nav-item> {
        a.nav-link {
            color: rgba(255, 255, 255, 0.5);
            &:hover,
            &:focus {
                color: $white!important;
            }
        }
    }
    .top-navbar .navbar-nav>.nav-item>span {
        color: $white;
    }
}

.logo-center .topbar {
    .navbar-header {
        background: transparent;
        box-shadow: none;
    }
    .top-navbar .navbar-header .navbar-brand .dark-logo {
        display: none;
    }
    .top-navbar .navbar-header .navbar-brand .light-logo {
        display: inline-block;
        color: rgba(255, 255, 255, 0.8);
    }
}


/*******************
/*General Elements
*******************/

a {
    color: $themecolor;
}

a.link {
    &:hover,
    &:focus {
        color: $themecolor!important;
    }
}

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

.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
    background-color: $themecolor;
    border-color: $themecolor;
}

.right-sidebar {
    .rpanel-title {
        background: $themecolor;
    }
}

.stylish-table {
    tbody tr {
        &:hover,
        &.active {
            border-left: 4px solid $themecolor;
        }
    }
}

.text-themecolor {
    color: $themecolor!important;
}

.profile-tab,
.customtab {
    li {
        a.nav-link {
            &.active {
                border-bottom: 2px solid $themecolor;
                color: $themecolor;
            }
            &:hover {
                color: $themecolor;
            }
        }
    }
}


/*******************
/*Buttons
*******************/

.btn-themecolor,
.btn-themecolor.disabled {
    background: $themecolor;
    color: $white;
    border: 1px solid $themecolor;
    &:hover {
        background: $themecolor;
        opacity: 0.7;
        border: 1px solid $themecolor;
    }
    &.active,
    &:focus {
        background: $themecolor-dark;
    }
}


/*******************
/*sidebar navigation
*******************/

.card-no-border .left-sidebar,
.card-no-border .sidebar-nav {
    background: $sidebar;
}

.mini-sidebar .sidebar-nav {
    background: transparent;
    > ul > li > a i{
        color:$sidebar-icons; 
    }
}

@media (min-width: 768px) {
    .mini-sidebar .sidebar-nav #sidebarnav>li>ul {
        background: $sidebar-dark;
    }
    .mini-sidebar .sidebar-nav #sidebarnav>li:hover>a {
        background: $sidebar-alt;
    }
    .sidebar-nav #sidebarnav>li>ul {
        background: $dark;
    }
}

.sidebar-nav {
    background: $sidebar;
}

.user-profile .profile-text a {
    color: $sidebar-text!important;
}

.card-no-border .sidebar-footer {
    background: $sidebar-dark;
}

.label-themecolor {
    background: $themecolor;
}

.sidebar-nav>ul>li.active>a {
    color: $white;
    border-color: $white;
    i {
        color: $white;
    }
}

.sidebar-nav ul li a {
    color:$sidebar-text;
    &.active,
    &:hover {
        color: $themecolor;
        i {
            color: $themecolor;
        }
    }
}

.sidebar-nav ul li.nav-small-cap {
    color: $sidebar-text;
}