/* === GENERAL === */

body {
    background-color: #F3F3F4;
    color: #747F8D;
}

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

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

nav {
    background-color: #FFF;
    color: #4F5660;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .1),
        0 1.5px 0 rgba(0, 0, 0, .025),
        0 2px 0 rgba(0, 0, 0, .025);
}

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

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

/* === HEADER === */

.tooltip .tooltiptext {
    background-color: #858585;
    color: #000;
}

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

#log-type {
    color: #000;
}

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

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

#user-list {
    color: #2F3136;
}

#user-list span:not(.bot-tag) {
    color: #000;
}

.material-icons {
    color: #757D8C;
}

.material-icons:hover {
    color: #2F3136;
}

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

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

@keyframes copied {
    0% {
        background-color: #858585
    }
    50% {
        background-color: #3a0
    }
    100% {
        background-color: #858585
    }
}

@keyframes copiedMention {
    0% {
        background-color: #7289DA;
        color: #FFF;
    }
    50% {
        background-color: #3A0;
        color: #FFF;
    }
    100% {
        background-color: #7289DA;
        color: #FFF;
    }
}

/* === MESSAGES === */

#message-container {
    background-color: #FFF;
}

/* === LOG CREATION FORM === */

input#url, select#type, select#guild, select#expires {
    color: initial !important;
}