streamlabs chat widget css edits

HTML------------------------------------

<!-- item will be append to this layout -->
<div id="log" class="sl__chat__layout">
</div>

<!-- chat item -->
<script type="text/template" id="chatlist_item">
  <div data-from="{from}" data-id="{messageId}" style="color: {color}">
		<span class="meta">
    <span class="badges"></span><!--
    --><span class="name">{from}</span></span></span>
  	<span class="message">{message}</span>
  </div>
</script>

CSS-------------------------------------

@import url(https://fonts.googleapis.com/css?family=Noto+Sans:700|Noto+Sans+JP:300);

* {
margin: 0;
padding: 0;
border: 0;
}

html, body {
    height: 100%;
}

body {
    text-shadow: 0 0 4px #000, 0 0 5px #000;
    background: {background_color};
    font-family: 'Noto Sans', 'Noto Sans JP';
    font-weight: 700;
    font-size: {font_size};
}

#log>div {
    animation: fadeIn .3s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards;
    -webkit-animation: fadeIn .3s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards;
}

#log {
  	width: 100%;
    position: absolute;
    bottom: 5;
    left: 0;
}

#log>div {
    display: block;
  	line-height: 22px;
  	padding-top: 5px;
  	padding-bottom: 5px;
  	padding-left: 5px;
  	padding-right: 5px;
  	overflow: hidden;
	text-overflow: ellipsis;
}

#log>div.deleted {
    visibility: hidden;
}

#log .emote {
		background-image: none !important;
}

#log .emote img {
  	margin-top: -5px;
  	margin-bottom: -5px;
  	vertical-align: middle;
}

.meta {
	white-space: nowrap;
}

.badge {
  	margin-right: 3px;
		vertical-align: -4px;
}

.name {
}

.message {
  word-wrap: break-word;
  color: {text_color};
}