Chat overlay CSS formatting

Hey there! Having some trouble getting chat overlay just right in OBS Studio. I'm using the chat widget from streamlabs and using custom HTML/CSS. How would I go about addressing these?

I am unable to set the font to 11px.

Can't get the colon (:) showing after a name.

I got a line break in after the name, but the message is showing off to the right on the next line as if indented.

The overflow on names is too short.

For reference images, I have a link here: https://imgur.com/a/glTtkvG

HTML: <!– item will be appened 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}"> <span class="meta" style="color: {color}"> <span class="badges"> </span> <span class="name">{from}</span> </span>

<span class="message"> <br>{message} </span> 

</div> </script>

CSS: @import url(https://fonts.googleapis.com/css?family=Roboto:700);

• { box-sizing: border-box; }

html, body { height: 100%; overflow: hidden; }

body { text-shadow: 0 0 1px #000, 0 0 2px #000; background: {background_color}; font-family: 'Tahoma'; font-weight: 400; font-size: {font_size}; line-height: 1.0em; color: {text_color}; }

log>div {

//animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards; //-webkit-animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards; 

}

.colon { display: none; }

log {

display: table; position: absolute; bottom: 0; left: 0; padding: 0 5px 5px; width: 100%; table-layout: fixed; 

}

log>div {

display: table-row; 

}

log>div.deleted {

visibility: hidden; 

}

log .emote {

background-repeat: no-repeat; background-position: center; background-size: contain; padding: 0.4em 0.2em; position: relative; 

}

log .emote img {

display: inline-block; height: 1em; opacity: 0; 

}

log .message,#log .meta {

text-align: left; vertical-align: top; display: table-cell; padding-bottom: 0.1em; 

}

log .meta {

width: 35%; text-align: left; padding-right: 0.5em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 

}

log .message {

word-wrap: break-word; width: 65%; 

}

.badge { display: inline-block; margin-right: 0.2em; position: relative; height: 1em; vertical-align: middle; top: -0.1em; }

.name { margin-left: 0.2em; }