/* VARIABLES */
:root {
    --darkGray: #1d2a35;
    --darkBlack: #142028;
    --darkFore: #bbbbbb;
    --darkFore2: #eee;

    --darkScrollTrack: #272d31;
    --darkScroll: #18232d;

    --darkInput: #474f55;
}

/* BODY */
body{
    background-color: var(--darkGray);
}

.bg-lite {
    background: var(--darkGray);
}

/* TEXT */
*{
    color: var(--darkFore);
}

.text-secondary,
.text-dark,
.text-muted
{
    color: var(--darkFore) !important;
}

.text-white
{
    color: var(--darkFore2) !important;
}

.nice-alert *{
    color: var(--darkFore2) !important;
}

.alert-danger, .alert-danger *{
    color: #721c24 !important;
}

/* CARD */
.card, .bg-white{
    background-color: var(--darkBlack) !important;
    border-color: var(--darkBlack) !important;
}

/* BG */
.bg-primary * {
    color: var(--darkFore2) !important;
}

/* ASIDE */
aside {
    background-color: var(--darkBlack) !important;
}

aside:not(#aside1) .nav-link {
    border-left: 2px solid var(--darkBlack);
}

aside .navbar-nav .nav-link {
    color: var(--darkFore);
}

#aside1 .navbar-nav .nav-link * {
    color: #fff;
}

aside .router-link-exact-active,
aside .router-link-exact-active i,
.my-bottom-nav .router-link-exact-active i,
.my-bottom-nav .router-link-exact-active {
    color: #884fcf !important;
}

@media screen and (max-width: 768px)
{
    .my-top-nav {
        background: var(--darkBlack);
        border-bottom: var(--darkGray);
    }
}

.my-bottom-nav .navbar-nav .nav-link {
    color: var(--darkFore);
}

/* SCROLLBAR */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--darkScrollTrack);
}

::-webkit-scrollbar-thumb {
    background: var(--darkScroll);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--darkScroll);
}

/* INPUT */
input, .btn-default, .btn-light, .input-group-text {
    background: var(--darkInput) !important;
    border-color: var(--darkInput) !important;
    color: var(--darkFore) !important;
}

/* MODAL */
.modal-content{
    background-color: var(--darkGray);
}

.close{
    color: var(--darkFore) !important;
}

.border {
    border: 1px solid var(--darkGray)!important;
}

.btn-outline-secondary {
    color: var(--darkFore);
    border-color: var(--darkFore);
}

.ss-box .ss-btn, .bc-link{
    color: var(--darkFore) !important;
    border-color: var(--darkFore) !important;
    background-color: var(--darkBlack) !important;
}

.ss-box .ss-btn:hover, .bc-link:hover{
    color: var(--darkBlack) !important;
    background-color: var(--darkFore) !important;
}

.ss-box .ss-btn:hover i{
    color: var(--darkBlack) !important;
}

.img-dark
{
    mix-blend-mode: multiply;
}

.card-service-caption{
    background: var(--darkBlack) !important;
}

/* TICKET */
.ticket-container {
    background: var(--darkGray);
}

.ticket .top,
.ticket .bottom,
.ticket .left,
.ticket .right
{
    background: var(--darkGray);
}

.ticket {
    background: var(--darkBlack);
}

.ticket-split2 {
    border-right: 4px dashed var(--darkGray);
}

/* CHAT */
.message-bubble .message {
    background-color: var(--darkGray);
}

.my-message-bubble .message {
    background-color: #884fcf;
}

hr {
    border-color: #2e3841;
}