.chat {
    margin:0px;
    font-family: var(--font-base);
    color: #efeff1;
    background-color: #212529;
    overflow:hidden;
    width:100%;
    border:  1px solid rgba(255, 255, 255, 0.15);
}
.messages-container {
    height:638px;
    position:relative;
}
.message-list {
    height:575px;
    width:100%;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
}
.message-list::-webkit-scrollbar,.emote-picker::-webkit-scrollbar {
    width: 5px;
}
.message-list::-webkit-scrollbar-track,.emote-picker::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(175,175,175,0.1); 
}
.message-list::-webkit-scrollbar-thumb,.emote-picker::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 5px rgba(175,175,175,0.2); 
}
.message-text:hover {
    background-color:#ffffff20;
}
.message-text {
    padding: 0px 2px 0px 10px!important;
    vertical-align: middle;
    margin-bottom:0px;
}
.emote-picker-container {
    padding:0px 8px 0px 8px;
}
.emote-picker::-webkit-scrollbar,.emote-picker::-webkit-scrollbar-track,.emote-picker::-webkit-scrollbar-thumb {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.emote-picker {
    background-color: rgba(0,0,0,0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    top: 169px;
    height: 400px;
    z-index: 9;
    padding:5px;
    position: relative;
    display:none;
    border-radius: 8px!important;
    overflow-y: auto;
    flex-wrap: wrap !important;
}
.emote-container {
    position: relative !important;
    width:280px;
    margin:auto;
}
.emote-button {
    height: 40px;
    cursor:pointer;
    padding:5px;
    padding:auto;
}
.emote-button:hover {
    background-color: grey;
}
.emote-section-heading {
    padding-top:0px;
    margin-top:10px;
}

.message-form {
    padding: 10px 3px 10px 10px!important;
}
.muted-prompt {
    display: block;
    color:#c2c2c2;
    font-style: italic;
    font-size:12px;
    line-height:11px;
}
.message-input-container {
    display: flex;
}
.message-input-item {
    flex-direction: column;
}
.comment-name {
    background-color:#222222;
    resize: none;
    width: 100%;
    height: 40px;
    font-size: 14px;
    padding: 10px 16px 10px 16px;
    /*padding-bottom:13px!important;*/
    border: 0px;
    border: 1px solid #222222;
    overflow-x: hidden;
    overflow-y: auto;
    line-height:19px;
    border-radius: 8px;
    outline: none;
}
.comment-name:focus {
    border: 1px solid #333333;
}
.comment-name::-webkit-scrollbar {
    width: 0px;
}
.chat-button {
    height: 40px;
    border-radius: 8px!important;
    background-color:#ffffff00!important;
    padding: 10px 4px 10px 4px!important;
    margin-left:3px;
    font-size: 1rem;
    display: inline-block;
    padding: 6px 12px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: 0;
    box-sizing: border-box;
    cursor: pointer;
    color: #ffffff;
}
.chat-button > img {
    filter: invert(90%);
}
.twitch {
    color:#9147ff;
}
.discord {
    color:#5865F2;
}
.internal {
    color:rgb(149, 0, 230);
}
.admin {
    color:red;
}
.message {
    font-size: 14px;
}
.bmr {
    display: inline-block;
}
.rain {
    background: transparent url(/assets/rain.gif);
}
.sparkles {
    background: transparent url(/assets/sparkles.gif);
}
.csc {
    background: transparent url(/assets/csc.gif);
}
.starfall {
    background: transparent url(/assets/starfall.gif);
}
.rainbow {
    animation: rainbow 2.5s linear;
    animation-iteration-count: infinite;
}
@keyframes rainbow {
    100%,0% { color: rgb(255,0,0); }
    8% { color: rgb(255,127,0); }
    16% { color: rgb(255,255,0); }
    25% { color: rgb(127,255,0); }
    33% { color: rgb(0,255,0); }
    41% { color: rgb(0,255,127); }
    50% { color: rgb(0,255,255); }
    58% { color: rgb(0,127,255); }
    66% { color: rgb(0,0,255); }
    75% { color: rgb(127,0,255); }
    83% { color: rgb(255,0,255); }
    91% { color: rgb(255,0,127); }
}

.neon-1 {
    text-shadow: 0 0 0.4vw #F40A35;
    font-weight:100;
}
.neon-1 {
    animation: neon 8s ease infinite;
    -moz-animation: neon 8s ease infinite;
    -webkit-animation: neon 8s ease infinite;
}
@keyframes neon {
    0%,100% { text-shadow: 0 0 0.2vw #FA1C16, 0 0 0.4vw #FA1C16, 0 0 0.6vw #FA1C16, 0 0 0.8vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914; color: #FED128; }
    50% { text-shadow: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B, 0 0 .2vw #800E0B, .5vw .5vw .1vw #40340A; color: #806914; }
}