@import url('https://fonts.googleapis.com/css?family={fontFamily}:400,500,700,900');

* {
    box-sizing: border-box;
}

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

body {
    padding: 10px;
    font-family: {fontFamily}, sans-serif;
    font-weight: 700;
    font-size: {font_size};
    line-height: 1.5em;
    color: {text_color};
    text-align: {textAlign};
}

:root {
  --fromWeight: 700;
  --messageWeight: 400;

  --borderSize: 0px;
  --borderRadius: 14px;

  --bgColor: {bgColor};
  --bgOpacity: calc({bgOpacity} * .01);
}

.colon {
  display: none;
}

#log {
  display: table;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px;
  width: 100%;
  table-layout: fixed;
}

.innerChat {
  margin: 0px;
  display: {displayType};
  padding: 20px 40px 20px 20px;
  overflow: hidden;
  word-break: break-all;
  position: relative;
}


#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;
}

.scaleHolder {
  position: relative;
  display: inline-block;
  z-index: 99;
}

#log .meta {
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  z-index: 99;
  font-weight: var(--fromWeight);
  color: {nameColor};

}
.scaleHolder {
  opacity: 0;
  animation: showMeta .6s ease 0.4s forwards;
}

@keyframes showMeta {
  from {
    opacity: 0;
  }
  to {
   opacity: 1;
  }
}

#log .message {
  word-wrap: break-word;
  position: relative;
  z-index: 99;
  font-weight: var(--messageWeight);
}

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

.name {
  margin-left: 0.2em;
}

.chatMsg {
  position: relative;
}

.chatBg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background: var(--bgColor);
  opacity: var(--bgOpacity);
  z-index: 1;
  animation: showBg .6s ease 0.2s forwards;
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}

@keyframes showBg {
  from {
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  to {
   clip-path: polygon(0% 0%, 100% 0%,100% 100%, 0% 100%);
  }
}

.chatBorder {
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 999;
  background: linear-gradient(90deg, {colorOne} 0%, {colorTwo} 100%);
   -webkit-mask-image: linear-gradient(to right, black 0%, black 20%, black 80%, transparent 100%);
  animation: showBorder .4s ease 0.1s forwards;
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}

@keyframes showBorder {
  from {
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  to {
   clip-path: polygon(0% 0%, 100% 0%,100% 100%, 0% 100%);
  }
}

.inner {
  display: inline-block;
}

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