@font-face {
  font-family: RingsideExtraWide-Book;
  src: url("/march-madness-live/public/assets/fonts/RingsideExtraWide-Book.otf");
}
@font-face {
  font-family: RingsideRegular-Book;
  src: url("/march-madness-live/public/assets/fonts/RingsideRegular-Book.otf");
}
@font-face {
  font-family: RingsideExtraWide-Black;
  src: url("/march-madness-live/public/assets/fonts/RingsideExtraWide-Black.otf");
}
@font-face {
  font-family: RingsideCompressed-Bold;
  src: url("/march-madness-live/public/assets/fonts/RingsideCompressed-Bold.otf");
}
.message-item-container {
  border-bottom: 1px solid #f0f0f0;
  margin: 0;
  background: #fff;
  padding: 0 10px;
}
livelike-chat livelike-message-item:last-child .message-item-container {
  border-bottom: none;
}
.avatar {
  margin: 0 0 0 1rem;
  padding: 1rem 0;
}
.avatar svg {
  height: 2.5rem;
  width: 2.5rem;
}
.message-wrapper {
  background: #fff!important;
  padding: 1rem;
  position: relative;
  flex-grow: 1;
  max-width: 100%;
}
.message-wrapper .mini-reactions {
  right: 15px;
}
.sender-name {
  font-size: 12px;
  font-family: 'RingsideExtraWide-Book';
  color: #17171d;
}
.sender-message {
  font-size: 14px;
  color: #181818;
  font-family: 'RingsideRegular-Book';
  padding: 0.25rem 0rem 0.75rem 0;
  color: #17171d;
}
.message-timestamp {
  font-family: 'RingsideRegular-Book';
  font-size: 10px;
  color: #a5a5a5;
  position: absolute;
  text-transform: capitalize;
  top: 0;
  right: 0;
}
.tab-container button.reaction-button {
  padding: 0.125rem;
  transform: translate(0px, 0px);
  right: 0;
  bottom: 1rem;
  height: 14px;
  background: #c1c2ca;
  display: flex;
  align-items: center;
  border-radius: 7px;
  width: 14px;
}
.tab-container button.reaction-button:focus {
  outline: none;
}
.tab-container button.reaction-button > svg {
  fill: #fff;
  height: 8px;
  width: 8px;
}
.mini-reactions {
  top: auto;
  right: 2.375rem;
  bottom: 1rem;
  height: 12px;
}
.mini-reaction-image {
  margin: 0 0 0 2px;
  height: 12px;
  width: 12px;
}
.mini-reaction-count {
  margin-left: 2px;
  font-family: 'RingsideExtraWide-Black';
  font-size: 10px;
  color: #17171d;
}
.tab-container .reaction-item-container {
  right: 1rem;
  bottom: 8px;
  box-shadow: 1px 1px 12px 0px rgba(0, 0, 0, 0.12);
  border-radius: 12px;
}
.tab-container .reaction-item-wrap {
  background: #fdfdfd;
  padding: 0.25rem 0.5rem;
  height: 36px;
}
.tab-container .reaction-item {
  background: transparent;
  margin: 0;
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 8px;
}
.tab-container button.reaction-item.selected,
.tab-container button.reaction-item:hover,
.tab-container button.reaction-item:focus {
  background: #dfdfe7;
}
.reaction-image {
  width: 24px;
  height: 24px;
}
.reaction-count {
  z-index: 1;
  font-size: 10px;
  color: #17171d;
  font-family: 'RingsideExtraWide-Black';
}
.custom-widget {
  margin-bottom: 1rem;
}
custom-slider .custom-widget,
custom-alert .custom-widget,
custom-cheer-meter .custom-widget {
  background: url('/march-madness-live/public/assets/images/livelike/mml_widgetBG.png') repeat #fff;
}
livelike-widget-body {
  padding: 16px 16px 32px 16px;
}
livelike-widget-header,
livelike-widget-body {
  background: #fff;
  display: block;
  border-radius: 0;
}
.bg-tran {
  background: transparent;
}
.custom-widget livelike-timer.custom-timer {
  background: #fac83c;
  top: 0;
  height: 5px;
}
.custom-widget livelike-title.custom-title {
  color: #17171d;
  font-size: 15px;
  font-family: 'RingsideExtraWide-Black';
  padding: 32px 16px 0 16px;
  display: block;
  width: calc(100% - 32px);
}
.custom-widget livelike-select {
  background: #fff;
}
.custom-widget livelike-option {
  color: #17171d;
  padding: 16px 0px;
  margin-bottom: 8px;
  height: auto;
  box-shadow: 0 0 0 1px #c1c2ca;
  overflow: hidden;
  border: none;
}
.custom-widget livelike-option:last-child {
  margin-bottom: 0px;
}
.custom-widget livelike-option[selected] {
  box-shadow: 0 0 0 2px #0079c2;
}
.custom-widget .image-description-wrapper {
  padding: 8px 0;
}
.custom-widget livelike-description {
  font-size: 13px;
  font-family: 'RingsideRegular-Book';
  text-align: left;
  padding: 0 8px 0 16px;
}
.custom-widget livelike-percentage {
  font-size: 16px;
  font-family: 'RingsideCompressed-Bold';
  padding: 0 16px 0 0;
}
.custom-widget livelike-percentage[style*='hidden'] {
  display: none;
}
.custom-widget livelike-progress {
  height: 4px !important;
  bottom: 5px;
  top: auto !important;
  background: #c1c2ca;
  border-color: #c1c2ca;
  border-radius: 0;
}
.custom-widget livelike-progress[style*='hidden'] {
  display: none;
}
.custom-widget livelike-option[selected] livelike-progress {
  background: #0079c2;
  border-color: #0079c2;
}
.custom-widget livelike-select.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 8px;
  grid-row-gap: 8px;
}
.custom-widget livelike-select.image-grid livelike-option {
  margin-bottom: 0;
  min-height: 60px;
  padding: 0;
}
.custom-widget
  livelike-select.image-grid
  livelike-description,
.custom-widget
  livelike-select.image-grid
  livelike-percentage {
  padding: 0 8px;
}
.custom-widget livelike-select.image-grid livelike-image {
  width: auto;
}
.custom-widget
  livelike-option
  div.livelike-voting-image-container {
  flex-grow: 1;
}
.custom-widget
  livelike-select:not(.prediction-widget)
  livelike-option[selected][correct] {
  box-shadow: 0 0 0 2px #00c265;
}
.custom-widget
  livelike-select:not(.prediction-widget)
  livelike-option[correct]
  livelike-progress {
  background: #00c265;
  border-color: #00c265;
}
.custom-widget
  livelike-select:not(.prediction-widget)
  livelike-option[incorrect] {
  box-shadow: 0 0 0 2px #e41e0c;
}
.custom-widget
  livelike-select:not(.prediction-widget)
  livelike-option[incorrect]
  livelike-progress {
  background: #e41e0c;
  border-color: #e41e0c;
}
.custom-widget
  livelike-widget-body
  livelike-footer
  .timestamp {
  font-family: 'RingsideRegular-Book';
  font-size: 10px;
  color: #17171d;
  justify-content: left;
  margin: 16px 0 0 0;
  display: flex;
  letter-spacing: 1px;
  text-transform: uppercase;
}
custom-cheer-meter
  .custom-widget
  livelike-select.image-grid {
  width: 100%;
  background: transparent;
  display: flex;
  justify-content: space-around;
}
custom-cheer-meter
  .custom-widget
  livelike-select.image-grid
  custom-cheer-option {
  display: flex;
  flex-direction: column;
  border: none;
  margin-bottom: 0;
  min-height: 60px;
  color: #17171d;
  padding: 0;
  height: auto;
  width: 100px;
}
custom-cheer-meter
  .custom-widget
  livelike-select.image-grid
  livelike-image {
  width: calc(100% - 22px);
  padding: 8px;
  border: 1px solid #c1c2ca;
  border-radius: 6px;
}
custom-cheer-meter .custom-widget img.divider {
  color: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  z-index: 100;
}
custom-cheer-meter .custom-widget livelike-description {
  text-align: center;
}

#livelike-chat-container .down-icon {
  border-radius: 0;
  right: 0;
}

livelike-chat .mini-reaction-image{
    margin: 13px 0 0 -5px;
}