/* 	 Background Body */

body {
    background: $grey2-color;
    &[data-background-color="bg1"] {
        background: $grey2-color;
    }
    &[data-background-color="bg2"] {
        background: $white-color;
    }
    &[data-background-color="bg3"] {
        background: $grey-color;
    }
    &[data-background-color="dark"] {
        background: $black-color;
        .main-header {
            box-shadow: 0px 0px 5px #121727;
        }
        .main-panel {
            color: rgba(169, 175, 187, 0.82) !important;
            label {
                color: #fff !important;
            }
        }
        .card,
        .row-card-no-pd,
        .list-group-item,
        .timeline>li>.timeline-panel {
            background: #202940;
        }
        .card-pricing2 {
            background: #202940 !important;
        }
        .row-card-no-pd {
            [class*=col] .card:before {
                background: rgba(181, 181, 181, 0.1) !important;
            }
        }
        .card .card-header,
        .card .card-footer,
        .card .card-action,
        .card-profile .user-stats [class^="col"],
        .timeline>li>.timeline-panel,
        .table td,
        .table th,
        .breadcrumbs,
        .separator-dashed,
        .separator-solid,
        .separator-dot,
        .list-group .list-group-item,
        .conversations .messages-form,
        .mail-wrapper .mail-content .inbox-body .email-list .email-list-item,
        .page-with-aside .page-aside,
        .mail-wrapper .mail-content .email-head,
        .mail-wrapper .mail-content .email-sender,
        .main-panel .page-divider {
            border-color: hsla(0, 0%, 71%, .1) !important;
        }
        .timeline>li>.timeline-panel {
            &:before {
                border-left-color: hsla(0, 0%, 71%, .1);
                border-right-color: hsla(0, 0%, 71%, .1);
            }
            &:after {
                border-left-color: #202940;
                border-right-color: #202940;
            }
        }
        .page-title,
        .breadcrumbs li a {
            color: rgba(169, 175, 187, 0.82);
        }
        .page-category {
            color: #828282;
        }
        .card-title,
        .card-title a,
        .card-title a:hover,
        .card-title a:focus {
            color: #fff;
        }
        .card-category {
            color: #8b92a9;
        }
        .card-black,
        .card-primary,
        .card-secondary,
        .card-info,
        .card-success,
        .card-warning,
        .card-danger {
            color: #fff;
            .card-title,
            .card-category {
                color: #fff;
            }
        }
        .nav-pills .nav-link:not(.active) {
            background: #fff;
        }
        .card-pricing .specification-list li {
            border-color: #373d4c;
        }
        .input-group-text {
            border-color: #2f374b !important;
            background-color: #1f283e;
            color: #fff;
        }
        .input-solid {
            background: #363b4c !important;
            border-color: #363b4c !important;
        }
        .list-group-messages .list-group-item-title a,
        .list-group .list-group-item-text {
            color: inherit;
        }
        .footer {
            border-top: 1px solid #293247;
            background: #1f283e;
        }
        .form-control,
        .form-group-default,
        .select2-container--bootstrap .select2-selection {
            background-color: #1a2035;
            color: #fff;
            border-color: #2f374b;
        }
        .bootstrap-tagsinput {
            background: transparent;
        }
        .selectgroup-button {
            border: 1px solid #2f374b;
        }
        .conversations {
            .message-header {
                background: #1a2035;
                box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07);
            }
            .conversations-content {
                color: #575962;
                border-color: #2e364a;
            }
        }
        .mail-wrapper .mail-content .inbox-body .email-list .email-list-item.unread {
            background: $black2-color !important;
        }
        .mail-wrapper .mail-content .inbox-body .email-list .email-list-item:hover {
            background: #171e2f !important;
        }
        .page-with-aside .page-aside .aside-nav .nav>li:hover,
        .page-with-aside .page-aside .aside-nav .nav>li:focus,
        .page-with-aside .page-aside .aside-nav .nav>li.active {
            background: rgba(0, 0, 0, 0.03);
        }
        .page-with-aside .page-aside .aside-nav .nav>li.active>a {
            color: #b9babf !important;
        }
        .board {
            color: #575962;
        }
    }
}


/*   Background   */

.bg-transparent {
    background: transparent !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bg-grey1 {
    background: $grey2-color !important;
}

.bg-grey2 {
    background: $grey-color !important;
}

@mixin linear-gradient($direction, $color-stops...) {
    background: nth(nth($color-stops, 2), 1) !important;
    background: -webkit-linear-gradient(legacy-direction($direction), $color-stops) !important;
    background: linear-gradient($direction, $color-stops) !important;
}

.bg-black-gradient {
    @include linear-gradient(-45deg, #0A0B11, $black2-color);
}

.bg-primary-gradient {
    @include linear-gradient(-45deg, $black-color, $black2-color);
}

.bg-secondary-gradient {
    @include linear-gradient(-45deg, $black2-color, $black-color);
}

.bg-info-gradient {
    @include linear-gradient(-45deg, #0A5A97, $info-color);
}

.bg-success-gradient {
    @include linear-gradient(-45deg, #179D08, $success-color);
}

.bg-warning-gradient {
    @include linear-gradient(-45deg, #E1810B, $warning-color);
}

.bg-danger-gradient {
    @include linear-gradient(-45deg, #E80A15, $danger-color);
}