Streamlabs alert box: add speech balloon style triangular bluge

speechBalloon.css

/* set colors */
#message-wrap { border-color: grey; }
#balloon-border, #balloon-border::after { background: grey; }
#balloon-border::before { background: white; }
/* set thickness */
#message-wrap { border-width: 3px; }
#balloon-border, #balloon-border::after { width: 3px; }
#balloon-border::before { height: 3px; top: -3px; }

#message-wrap {
  border-style: solid;
  border-radius: 2em;
  padding: 1em;
}
#balloon-border::after, #balloon-border::before {
  position: relative;
  display: inline-block;
  content: " ";
}
/*
      ::before
       +---+
        \  |
::after  \ | #balloon-border
          \|
*/
#balloon-border {
  height: 1em;
  position: absolute;
  right: 50%;
}
#balloon-border::before {
  width: 1.0em;
  left: -1em;
}
#balloon-border::after {
  height: 1.7em;
  left: -0.55em;
  top: -0.55em;
  transform: rotate(-45deg);
}

speechBalloon.html

<!-- alert image -->
<div id="alert-image-wrap">
  <div id="alert-image">{img}</div>
</div>

<!-- main alert box window -->
<div id="alert-text-wrap">

  <!-- alert text -->
  <div id="alert-text">

  <!-- add `message-wrap` and `balloon-border` to the default structure -->
    
  <div id="message-wrap">
    <!-- alert message -->
    <!-- messageTemplate will be replaced with your message template -->
    <!-- for example : {name} is now following! or {name} donated {amount} -->
    <div id="alert-message">{messageTemplate}</div>
    <div id="alert-user-message">{userMessage}</div>
  </div>
  <div id="balloon-border"></div>

  </div>

</div>