/**
 * Twitch chat browsersource CSS for OBS
 * Just set the URL as https://www.twitch.tv/%%TWITCHCHANNEL%%/chat?popout=true
 * And paste this entire file into the CSS box
 *
 * Enjoy!
 * twitch.tv/starvingpoet
 */


/**
 * General Settings
 */
body {
    background-color: rgba(0, 0, 0, 0);
    color: #FFFFFF;
    margin: 0 auto;
    overflow: hidden;
    text-shadow:
        -1px -1px 1px #000000,
        -1px  1px 1px #000000,
         1px -1px 1px #000000,
         1px  1px 1px #000000;
}

.chat-container, .ember-chat-container {
    background: rgba(0,0,0,0);
}

/**
 * Badge Removal
 *
 * To remove additional badge types - moderator, bits, etc - just make a copy of the one of the following badge selectors and replace the word inbetween the quotes with the hover text
 */

/*
img.badge[alt="Broadcaster"] {
    display: none;
}

img.badge[alt="Moderator"] {
    display: none;
}

img.badge[alt="Subscriber"] {
    display: none;
}
*/

img.badge[alt="Twitch Prime"] {
    display: none;
}

img.badge[alt="Turbo"] {
    display: none;
}

img.badge[alt="Verified"] {
    display: none;
}


/**
 * Remove the header section
 */
.ember-chat .chat-room {
    top: 0;
}

.ember-chat .chat-header {
    display: none;
}

.ember-chat .chat-messages .chat-line.admin {
    display: none;
}

/**
 * Remove the footer section
 */

.ember-chat .chat-room {
    bottom: -112px;
}

/**
 * Font Size & Color
 */
.ember-chat .chat-messages .chat-line {
    font-size: 18px;
    line-height: 20px;
}

.chat-container, .ember-chat-container {
    color: #FFFFFF;
}