/* === GENERAL === */

body {
    background-color: #2F3135;
    color: rgba(255, 255, 255, 0.7);
}

#header-data b {
    color: #FFFFFF;
}

/* === NAV BAR === */

nav {
    background-color: #36393F;
    color: #FFF;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .2),
        0 1.5px 0 rgba(0, 0, 0, .05),
        0 2px 0 rgba(0, 0, 0, .05);
}

nav span>a,
nav span>div {
    color: #FFF;
}

@media screen and (max-width: 700px) {
    nav .tooltip .tooltiptext.tool-text {
        background-color: #282B30;
        border-top: 1px solid rgba(245, 245, 245, 0.08);
    }
}

/* === HEADER === */

.tooltip .tooltiptext {
    background-color: #555;
    color: #FFF;
}

.material-icons.md-inactive, .material-icons.md-inactive:hover {
    color: rgba(255, 255, 255, 0.3);
}

#log-type {
    color: #FFF;
}

#log-created-at span {
    color: #FFF;
}

#message-count span {
    color: #FFF;
}

#user-list {
    color: rgba(255, 255, 255, 0.6);
}

#user-list span {
    color: #FFF;
}

.material-icons {
    color: #C2C2C4;
}

.material-icons:hover {
    color: white;
}

.copied {
    animation: copied .5s ease-out;
}

.copied.mention {
    animation: copiedMention .5s ease-out;
}

@keyframes copied {
    0% {
        background-color: #555
    }
    50% {
        background-color: #3A0
    }
    100% {
        background-color: #555
    }
}

@keyframes copiedMention {
    0% {
        background-color: rgba(114, 137, 218, .7);
        color: #FFF;
    }
    50% {
        background-color: #3A0;
        color: #FFF;
    }
    100% {
        background-color: rgba(114, 137, 218, .7);
        color: #FFF;
    }
}

/* === MESSAGES === */

#message-container {
    background: #36393F;
}