/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/theme/variables.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@font-face {
  font-family: Poppins;
  src: url('Poppins-Regular.ttf');
}
@font-face {
  font-family: Dancing;
  src: url('DancingScript.ttf');
}
/** Ionic CSS Variables **/
:root {
  /** primary **/
  --ion-color-primary: #3880ff;
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3171e0;
  --ion-color-primary-tint: #4c8dff;
  /** secondary **/
  --ion-color-secondary: #3dc2ff;
  --ion-color-secondary-rgb: 61, 194, 255;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #36abe0;
  --ion-color-secondary-tint: #50c8ff;
  /** tertiary **/
  --ion-color-tertiary: #5260ff;
  --ion-color-tertiary-rgb: 82, 96, 255;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #4854e0;
  --ion-color-tertiary-tint: #6370ff;
  /** success **/
  --ion-color-success: #2dd36f;
  --ion-color-success-rgb: 45, 211, 111;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #28ba62;
  --ion-color-success-tint: #42d77d;
  /** warning **/
  --ion-color-warning: #ffc409;
  --ion-color-warning-rgb: 255, 196, 9;
  --ion-color-warning-contrast: #000000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #e0ac08;
  --ion-color-warning-tint: #ffca22;
  /** danger **/
  --ion-color-danger: #eb445a;
  --ion-color-danger-rgb: 235, 68, 90;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #cf3c4f;
  --ion-color-danger-tint: #ed576b;
  /** dark **/
  --ion-color-dark: #222428;
  --ion-color-dark-rgb: 34, 36, 40;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #1e2023;
  --ion-color-dark-tint: #383a3e;
  /** medium **/
  --ion-color-medium: #92949c;
  --ion-color-medium-rgb: 146, 148, 156;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #808289;
  --ion-color-medium-tint: #9d9fa6;
  /** light **/
  --ion-color-light: #f4f5f8;
  --ion-color-light-rgb: 244, 245, 248;
  --ion-color-light-contrast: #000000;
  --ion-color-light-contrast-rgb: 0, 0, 0;
  --ion-color-light-shade: #d7d8da;
  --ion-color-light-tint: #f5f6f9;
  /* Landing Page */
  --landing-bg: #ffffff;
  --landing-grad-dark: rgba(29, 29, 29, 0.15);
  --landing-grad-light: #ffffff;
  --landing-text: #0058ff;
  /** UniTaskr **/
  --btn-highlight-blue: #1e36f8;
  --unitaskr-color-blue: #0058ff;
  --btn-instagram-login: #d35664;
  --btn-facebook-login: #415ab0;
  --btn-green: #16bf37;
  --accent-green-text: #119300;
  --btn-google-login: #656565;
  --bg-light-blue: #edeff7;
  --bg-light-turquoise: #d2ecf7;
  --accent-light-blue: #e8edff;
  --accent-light-grey-chat: #ebebeb;
  --bg-super-light-grey: #f4f4f4;
  --bg-very-light-grey: #c3c3c3;
  --bg-light-grey: #959595;
  --bg-not-too-dark-grey: #696969;
  --bg-medium-grey: #535353;
  --bg-medium-dark-grey: #585858;
  --text-almost-black: #393939;
  --bg-pale-pink: #dec9c9;
  --bg-purple-accent: #5858e9;
  --bg-serious-purple-accent: #5416a7;
  --shout-steps-purple-dark: #390771;
  --shout-steps-purple-light: #d8c1ee;
  --bg-lavendar: #ceceff;
  --bg-purple-shout: #aaa5e0;
  --message-hightlight-blue: #b5d5ff;
  --bg-blue-accent: #64b7ff;
  --bright-blue-accent: #00a7f2;
  --bg-turquoise: #a8e4ff;
  --bg-dark-blue-accent: #004d90;
}
@media (prefers-color-scheme: dark) {
  /*
   * Dark Colors
   * -------------------------------------------
   */
  body {
    --ion-color-primary: #428cff;
    --ion-color-primary-rgb: 66, 140, 255;
    --ion-color-primary-contrast: #ffffff;
    --ion-color-primary-contrast-rgb: 255, 255, 255;
    --ion-color-primary-shade: #3a7be0;
    --ion-color-primary-tint: #5598ff;
    --ion-color-secondary: #50c8ff;
    --ion-color-secondary-rgb: 80, 200, 255;
    --ion-color-secondary-contrast: #ffffff;
    --ion-color-secondary-contrast-rgb: 255, 255, 255;
    --ion-color-secondary-shade: #46b0e0;
    --ion-color-secondary-tint: #62ceff;
    --ion-color-tertiary: #6a64ff;
    --ion-color-tertiary-rgb: 106, 100, 255;
    --ion-color-tertiary-contrast: #ffffff;
    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
    --ion-color-tertiary-shade: #5d58e0;
    --ion-color-tertiary-tint: #7974ff;
    --ion-color-success: #2fdf75;
    --ion-color-success-rgb: 47, 223, 117;
    --ion-color-success-contrast: #000000;
    --ion-color-success-contrast-rgb: 0, 0, 0;
    --ion-color-success-shade: #29c467;
    --ion-color-success-tint: #44e283;
    --ion-color-warning: #ffd534;
    --ion-color-warning-rgb: 255, 213, 52;
    --ion-color-warning-contrast: #000000;
    --ion-color-warning-contrast-rgb: 0, 0, 0;
    --ion-color-warning-shade: #e0bb2e;
    --ion-color-warning-tint: #ffd948;
    --ion-color-danger: #ff4961;
    --ion-color-danger-rgb: 255, 73, 97;
    --ion-color-danger-contrast: #ffffff;
    --ion-color-danger-contrast-rgb: 255, 255, 255;
    --ion-color-danger-shade: #e04055;
    --ion-color-danger-tint: #ff5b71;
    --ion-color-dark: #f4f5f8;
    --ion-color-dark-rgb: 244, 245, 248;
    --ion-color-dark-contrast: #000000;
    --ion-color-dark-contrast-rgb: 0, 0, 0;
    --ion-color-dark-shade: #d7d8da;
    --ion-color-dark-tint: #f5f6f9;
    --ion-color-medium: #989aa2;
    --ion-color-medium-rgb: 152, 154, 162;
    --ion-color-medium-contrast: #000000;
    --ion-color-medium-contrast-rgb: 0, 0, 0;
    --ion-color-medium-shade: #86888f;
    --ion-color-medium-tint: #a2a4ab;
    --ion-color-light: #222428;
    --ion-color-light-rgb: 34, 36, 40;
    --ion-color-light-contrast: #ffffff;
    --ion-color-light-contrast-rgb: 255, 255, 255;
    --ion-color-light-shade: #1e2023;
    --ion-color-light-tint: #383a3e;
    /** UniTaskr Darks.. */
    --bg-light-blue: #4d4d4d;
    /* Landing Page */
    --landing-bg: #464646;
    --landing-grad-dark: #000000;
    --landing-grad-light: #1d1d1d;
    --landing-text: #ffffff;
  }
  /*
   * iOS Dark Theme
   * -------------------------------------------
   */
  .ios body {
    --ion-background-color: #000000;
    --ion-background-color-rgb: 0, 0, 0;
    --ion-text-color: #ffffff;
    --ion-text-color-rgb: 255, 255, 255;
    --ion-color-step-50: #0d0d0d;
    --ion-color-step-100: #1a1a1a;
    --ion-color-step-150: #262626;
    --ion-color-step-200: #333333;
    --ion-color-step-250: #404040;
    --ion-color-step-300: #4d4d4d;
    --ion-color-step-350: #595959;
    --ion-color-step-400: #666666;
    --ion-color-step-450: #737373;
    --ion-color-step-500: #808080;
    --ion-color-step-550: #8c8c8c;
    --ion-color-step-600: #999999;
    --ion-color-step-650: #a6a6a6;
    --ion-color-step-700: #b3b3b3;
    --ion-color-step-750: #bfbfbf;
    --ion-color-step-800: #cccccc;
    --ion-color-step-850: #d9d9d9;
    --ion-color-step-900: #e6e6e6;
    --ion-color-step-950: #f2f2f2;
    --ion-item-background: #000000;
    --ion-card-background: #1c1c1d;
  }
  .ios ion-modal {
    --ion-background-color: var(--ion-color-step-100);
    --ion-toolbar-background: var(--ion-color-step-150);
    --ion-toolbar-border-color: var(--ion-color-step-250);
  }
  /*
   * Material Design Dark Theme
   * -------------------------------------------
   */
  .md body {
    --ion-background-color: #121212;
    --ion-background-color-rgb: 18, 18, 18;
    --ion-text-color: #ffffff;
    --ion-text-color-rgb: 255, 255, 255;
    --ion-border-color: #222222;
    --ion-color-step-50: #1e1e1e;
    --ion-color-step-100: #2a2a2a;
    --ion-color-step-150: #363636;
    --ion-color-step-200: #414141;
    --ion-color-step-250: #4d4d4d;
    --ion-color-step-300: #595959;
    --ion-color-step-350: #656565;
    --ion-color-step-400: #717171;
    --ion-color-step-450: #7d7d7d;
    --ion-color-step-500: #898989;
    --ion-color-step-550: #949494;
    --ion-color-step-600: #a0a0a0;
    --ion-color-step-650: #acacac;
    --ion-color-step-700: #b8b8b8;
    --ion-color-step-750: #c4c4c4;
    --ion-color-step-800: #d0d0d0;
    --ion-color-step-850: #dbdbdb;
    --ion-color-step-900: #e7e7e7;
    --ion-color-step-950: #f3f3f3;
    --ion-item-background: #1e1e1e;
    --ion-toolbar-background: #1f1f1f;
    --ion-tab-bar-background: #1f1f1f;
    --ion-card-background: #1e1e1e;
  }
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/global.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */
/* Core CSS required for Ionic components to work properly */
html.ios {
  --ion-default-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
}
html.md {
  --ion-default-font: "Roboto", "Helvetica Neue", sans-serif;
}
html {
  --ion-font-family: var(--ion-default-font);
}
body {
  background: var(--ion-background-color);
}
body.backdrop-no-scroll {
  overflow: hidden;
}
/**
 * Card style modal needs additional padding on the
 * top of the header. We accomplish this by targeting
 * the first toolbar in the header.
 * Footer also needs this. We do not adjust the bottom
 * padding though because of the safe area.
 */
html.ios ion-modal.modal-card ion-header ion-toolbar:first-of-type,
html.ios ion-modal.modal-sheet ion-header ion-toolbar:first-of-type,
html.ios ion-modal ion-footer ion-toolbar:first-of-type {
  padding-top: 6px;
}
/**
* Card style modal needs additional padding on the
* bottom of the header. We accomplish this by targeting
* the last toolbar in the header.
*/
html.ios ion-modal.modal-card ion-header ion-toolbar:last-of-type,
html.ios ion-modal.modal-sheet ion-header ion-toolbar:last-of-type {
  padding-bottom: 6px;
}
/**
* Add padding on the left and right
* of toolbars while accounting for
* safe area values when in landscape.
*/
html.ios ion-modal ion-toolbar {
  padding-right: calc(var(--ion-safe-area-right) + 8px);
  padding-left: calc(var(--ion-safe-area-left) + 8px);
}
/**
 * Card style modal on iPadOS
 * should only have backdrop on first instance.
 */
@media screen and (min-width: 768px) {
  html.ios ion-modal.modal-card:first-of-type {
    --backdrop-opacity: 0.18;
  }
}
/**
 * Subsequent modals should not have a backdrop/box shadow
 * as it will cause the screen to appear to get progressively
 * darker. With Ionic 6, declarative modals made it
 * possible to have multiple non-presented modals in the DOM,
 * so we could no longer rely on ion-modal:first-of-type.
 * Here we disable the opacity/box-shadow for every modal
 * that comes after the first presented modal.
 *
 * Note: ion-modal:not(.overlay-hidden):first-of-type
 * does not match the first modal to not have
 * the .overlay-hidden class, it will match the
 * first modal in general only if it does not
 * have the .overlay-hidden class.
 * The :nth-child() pseudo-class has support
 * for selectors which would help us here. At the
 * time of writing it does not have great cross browser
 * support.
 *
 * Note 2: This should only apply to non-card and
 * non-sheet modals. Card and sheet modals have their
 * own criteria for displaying backdrops/box shadows.
 */
ion-modal.modal-default:not(.overlay-hidden) ~ ion-modal.modal-default {
  --backdrop-opacity: 0;
  --box-shadow: none;
}
/**
 * This works around a bug in WebKit where the
 * content will overflow outside of the bottom border
 * radius when re-painting. As long as a single
 * border radius value is set on .ion-page, this
 * issue does not happen. We set the top left radius
 * here because the top left corner will always have a
 * radius no matter the platform.
 * This behavior only applies to card modals.
 */
html.ios ion-modal.modal-card .ion-page {
  border-top-left-radius: var(--border-radius);
}
.ion-color-primary {
  --ion-color-base: var(--ion-color-primary, #3880ff) !important;
  --ion-color-base-rgb: var(--ion-color-primary-rgb, 56, 128, 255) !important;
  --ion-color-contrast: var(--ion-color-primary-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-primary-shade, #3171e0) !important;
  --ion-color-tint: var(--ion-color-primary-tint, #4c8dff) !important;
}
.ion-color-secondary {
  --ion-color-base: var(--ion-color-secondary, #3dc2ff) !important;
  --ion-color-base-rgb: var(--ion-color-secondary-rgb, 61, 194, 255) !important;
  --ion-color-contrast: var(--ion-color-secondary-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-secondary-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-secondary-shade, #36abe0) !important;
  --ion-color-tint: var(--ion-color-secondary-tint, #50c8ff) !important;
}
.ion-color-tertiary {
  --ion-color-base: var(--ion-color-tertiary, #5260ff) !important;
  --ion-color-base-rgb: var(--ion-color-tertiary-rgb, 82, 96, 255) !important;
  --ion-color-contrast: var(--ion-color-tertiary-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-tertiary-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-tertiary-shade, #4854e0) !important;
  --ion-color-tint: var(--ion-color-tertiary-tint, #6370ff) !important;
}
.ion-color-success {
  --ion-color-base: var(--ion-color-success, #2dd36f) !important;
  --ion-color-base-rgb: var(--ion-color-success-rgb, 45, 211, 111) !important;
  --ion-color-contrast: var(--ion-color-success-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-success-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-success-shade, #28ba62) !important;
  --ion-color-tint: var(--ion-color-success-tint, #42d77d) !important;
}
.ion-color-warning {
  --ion-color-base: var(--ion-color-warning, #ffc409) !important;
  --ion-color-base-rgb: var(--ion-color-warning-rgb, 255, 196, 9) !important;
  --ion-color-contrast: var(--ion-color-warning-contrast, #000) !important;
  --ion-color-contrast-rgb: var(--ion-color-warning-contrast-rgb, 0, 0, 0) !important;
  --ion-color-shade: var(--ion-color-warning-shade, #e0ac08) !important;
  --ion-color-tint: var(--ion-color-warning-tint, #ffca22) !important;
}
.ion-color-danger {
  --ion-color-base: var(--ion-color-danger, #eb445a) !important;
  --ion-color-base-rgb: var(--ion-color-danger-rgb, 235, 68, 90) !important;
  --ion-color-contrast: var(--ion-color-danger-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-danger-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-danger-shade, #cf3c4f) !important;
  --ion-color-tint: var(--ion-color-danger-tint, #ed576b) !important;
}
.ion-color-light {
  --ion-color-base: var(--ion-color-light, #f4f5f8) !important;
  --ion-color-base-rgb: var(--ion-color-light-rgb, 244, 245, 248) !important;
  --ion-color-contrast: var(--ion-color-light-contrast, #000) !important;
  --ion-color-contrast-rgb: var(--ion-color-light-contrast-rgb, 0, 0, 0) !important;
  --ion-color-shade: var(--ion-color-light-shade, #d7d8da) !important;
  --ion-color-tint: var(--ion-color-light-tint, #f5f6f9) !important;
}
.ion-color-medium {
  --ion-color-base: var(--ion-color-medium, #92949c) !important;
  --ion-color-base-rgb: var(--ion-color-medium-rgb, 146, 148, 156) !important;
  --ion-color-contrast: var(--ion-color-medium-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-medium-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-medium-shade, #808289) !important;
  --ion-color-tint: var(--ion-color-medium-tint, #9d9fa6) !important;
}
.ion-color-dark {
  --ion-color-base: var(--ion-color-dark, #222428) !important;
  --ion-color-base-rgb: var(--ion-color-dark-rgb, 34, 36, 40) !important;
  --ion-color-contrast: var(--ion-color-dark-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-dark-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-dark-shade, #1e2023) !important;
  --ion-color-tint: var(--ion-color-dark-tint, #383a3e) !important;
}
.ion-page {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  position: absolute;
  flex-direction: column;
  justify-content: space-between;
  contain: layout size style;
  overflow: hidden;
  z-index: 0;
}
.split-pane-visible > .ion-page.split-pane-main {
  position: relative;
}
ion-route,
ion-route-redirect,
ion-router,
ion-select-option,
ion-nav-controller,
ion-menu-controller,
ion-action-sheet-controller,
ion-alert-controller,
ion-loading-controller,
ion-modal-controller,
ion-picker-controller,
ion-popover-controller,
ion-toast-controller,
.ion-page-hidden,
[hidden] {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}
.ion-page-invisible {
  opacity: 0;
}
.can-go-back > ion-header ion-back-button {
  display: block;
}
html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {
  --ion-statusbar-padding: 20px;
}
@supports (padding-top: 20px) {
  html {
    --ion-safe-area-top: var(--ion-statusbar-padding);
  }
}
@supports (padding-top: constant(safe-area-inset-top)) {
  html {
    --ion-safe-area-top: constant(safe-area-inset-top);
    --ion-safe-area-bottom: constant(safe-area-inset-bottom);
    --ion-safe-area-left: constant(safe-area-inset-left);
    --ion-safe-area-right: constant(safe-area-inset-right);
  }
}
@supports (padding-top: env(safe-area-inset-top)) {
  html {
    --ion-safe-area-top: env(safe-area-inset-top);
    --ion-safe-area-bottom: env(safe-area-inset-bottom);
    --ion-safe-area-left: env(safe-area-inset-left);
    --ion-safe-area-right: env(safe-area-inset-right);
  }
}
ion-card.ion-color .ion-inherit-color,
ion-card-header.ion-color .ion-inherit-color {
  color: inherit;
}
.menu-content {
  transform: translate3d(0,  0,  0);
}
.menu-content-open {
  cursor: pointer;
  touch-action: manipulation;
  pointer-events: none;
}
.ios .menu-content-reveal {
  box-shadow: -8px 0 42px rgba(0, 0, 0, 0.08);
}
[dir=rtl].ios .menu-content-reveal {
  box-shadow: 8px 0 42px rgba(0, 0, 0, 0.08);
}
.md .menu-content-reveal {
  box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
}
.md .menu-content-push {
  box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
}
ion-accordion-group.accordion-group-expand-inset > ion-accordion:first-of-type {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
ion-accordion-group.accordion-group-expand-inset > ion-accordion:last-of-type {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
ion-accordion-group > ion-accordion:last-of-type ion-item[slot=header] {
  --border-width: 0px;
}
ion-accordion.accordion-animated > [slot=header] .ion-accordion-toggle-icon {
  transition: 300ms transform cubic-bezier(0.25, 0.8, 0.5, 1);
}
@media (prefers-reduced-motion: reduce) {
  ion-accordion .ion-accordion-toggle-icon {
    /* stylelint-disable declaration-no-important */
    transition: none !important;
  }
}
/**
 * The > [slot="header"] selector ensures that we do
 * not modify toggle icons for any nested accordions. The state
 * of one accordion should not affect any accordions inside
 * of a nested accordion group.
 */
ion-accordion.accordion-expanding > [slot=header] .ion-accordion-toggle-icon,
ion-accordion.accordion-expanded > [slot=header] .ion-accordion-toggle-icon {
  transform: rotate(180deg);
}
ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-previous ion-item[slot=header] {
  --border-width: 0px;
  --inner-border-width: 0px;
}
ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanding:first-of-type,
ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanded:first-of-type {
  margin-top: 0;
}
ion-input input::-webkit-date-and-time-value {
  text-align: start;
}
/* Basic CSS for apps built with Ionic */
audio,
canvas,
progress,
video {
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
b,
strong {
  font-weight: bold;
}
img {
  max-width: 100%;
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  height: 1px;
  border-width: 0;
  box-sizing: content-box;
}
pre {
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
label,
input,
select,
textarea {
  font-family: inherit;
  line-height: normal;
}
textarea {
  overflow: auto;
  height: auto;
  font: inherit;
  color: inherit;
}
textarea::placeholder {
  padding-left: 2px;
}
form,
input,
optgroup,
select {
  margin: 0;
  font: inherit;
  color: inherit;
}
html input[type=button],
input[type=reset],
input[type=submit] {
  cursor: pointer;
  -webkit-appearance: button;
}
a,
a div,
a span,
a ion-icon,
a ion-label,
button,
button div,
button span,
button ion-icon,
button ion-label,
.ion-tappable,
[tappable],
[tappable] div,
[tappable] span,
[tappable] ion-icon,
[tappable] ion-label,
input,
textarea {
  touch-action: manipulation;
}
a ion-label,
button ion-label {
  pointer-events: none;
}
button {
  border: 0;
  border-radius: 0;
  font-family: inherit;
  font-style: inherit;
  font-feature-settings: inherit;
  font-variant: inherit;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
  -webkit-appearance: button;
}
[tappable] {
  cursor: pointer;
}
a[disabled],
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
input[type=checkbox],
input[type=radio] {
  padding: 0;
  box-sizing: border-box;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
html {
  width: 100%;
  height: 100%;
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}
html:not(.hydrated) body {
  display: none;
}
html.ion-ce body {
  display: block;
}
html.plt-pwa {
  height: 100vh;
}
body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  position: fixed;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  /**
   * Because body has position: fixed,
   * it should be promoted to its own
   * layer.
   *
   * WebKit does not always promote
   * the body to its own layer on page
   * load in Ionic apps. Once scrolling on
   * ion-content starts, WebKit will promote
   * body. Unfortunately, this causes a re-paint
   * which results in scrolling being halted
   * until the next user gesture.
   *
   * This impacts the Custom Elements build.
   * The lazy loaded build causes the browser to
   * re-paint during hydration which causes WebKit
   * to promote body to its own layer.
   * In the CE Build, this hydration does not
   * happen, so the additional re-paint does not occur.
   */
  transform: translateZ(0);
  text-rendering: optimizeLegibility;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-drag: none;
  -ms-content-zooming: none;
  word-wrap: break-word;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: none;
          text-size-adjust: none;
}
html {
  font-family: var(--ion-font-family);
}
a {
  background-color: transparent;
  color: var(--ion-color-primary, #3880ff);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 16px;
  margin-bottom: 10px;
  font-weight: 500;
  line-height: 1.2;
}
h1 {
  margin-top: 20px;
  font-size: 26px;
}
h2 {
  margin-top: 18px;
  font-size: 24px;
}
h3 {
  font-size: 22px;
}
h4 {
  font-size: 20px;
}
h5 {
  font-size: 18px;
}
h6 {
  font-size: 16px;
}
small {
  font-size: 75%;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
.ion-hide {
  display: none !important;
}
.ion-hide-up {
  display: none !important;
}
.ion-hide-down {
  display: none !important;
}
@media (min-width: 576px) {
  .ion-hide-sm-up {
    display: none !important;
  }
}
@media (max-width: 575.98px) {
  .ion-hide-sm-down {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .ion-hide-md-up {
    display: none !important;
  }
}
@media (max-width: 767.98px) {
  .ion-hide-md-down {
    display: none !important;
  }
}
@media (min-width: 992px) {
  .ion-hide-lg-up {
    display: none !important;
  }
}
@media (max-width: 991.98px) {
  .ion-hide-lg-down {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .ion-hide-xl-up {
    display: none !important;
  }
}
@media (max-width: 1199.98px) {
  .ion-hide-xl-down {
    display: none !important;
  }
}
/* Optional CSS utils that can be commented out */
.ion-no-padding {
  --padding-start: 0;
  --padding-end: 0;
  --padding-top: 0;
  --padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.ion-padding {
  --padding-start: var(--ion-padding, 16px);
  --padding-end: var(--ion-padding, 16px);
  --padding-top: var(--ion-padding, 16px);
  --padding-bottom: var(--ion-padding, 16px);
  padding-left: var(--ion-padding, 16px);
  padding-right: var(--ion-padding, 16px);
  padding-top: var(--ion-padding, 16px);
  padding-bottom: var(--ion-padding, 16px);
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  .ion-padding {
    padding-left: unset;
    padding-right: unset;
    padding-inline-start: var(--ion-padding, 16px);
    padding-inline-end: var(--ion-padding, 16px);
  }
}
.ion-padding-top {
  --padding-top: var(--ion-padding, 16px);
  padding-top: var(--ion-padding, 16px);
}
.ion-padding-start {
  --padding-start: var(--ion-padding, 16px);
  padding-left: var(--ion-padding, 16px);
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  .ion-padding-start {
    padding-left: unset;
    padding-inline-start: var(--ion-padding, 16px);
  }
}
.ion-padding-end {
  --padding-end: var(--ion-padding, 16px);
  padding-right: var(--ion-padding, 16px);
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  .ion-padding-end {
    padding-right: unset;
    padding-inline-end: var(--ion-padding, 16px);
  }
}
.ion-padding-bottom {
  --padding-bottom: var(--ion-padding, 16px);
  padding-bottom: var(--ion-padding, 16px);
}
.ion-padding-vertical {
  --padding-top: var(--ion-padding, 16px);
  --padding-bottom: var(--ion-padding, 16px);
  padding-top: var(--ion-padding, 16px);
  padding-bottom: var(--ion-padding, 16px);
}
.ion-padding-horizontal {
  --padding-start: var(--ion-padding, 16px);
  --padding-end: var(--ion-padding, 16px);
  padding-left: var(--ion-padding, 16px);
  padding-right: var(--ion-padding, 16px);
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  .ion-padding-horizontal {
    padding-left: unset;
    padding-right: unset;
    padding-inline-start: var(--ion-padding, 16px);
    padding-inline-end: var(--ion-padding, 16px);
  }
}
.ion-no-margin {
  --margin-start: 0;
  --margin-end: 0;
  --margin-top: 0;
  --margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.ion-margin {
  --margin-start: var(--ion-margin, 16px);
  --margin-end: var(--ion-margin, 16px);
  --margin-top: var(--ion-margin, 16px);
  --margin-bottom: var(--ion-margin, 16px);
  margin-left: var(--ion-margin, 16px);
  margin-right: var(--ion-margin, 16px);
  margin-top: var(--ion-margin, 16px);
  margin-bottom: var(--ion-margin, 16px);
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  .ion-margin {
    margin-left: unset;
    margin-right: unset;
    margin-inline-start: var(--ion-margin, 16px);
    margin-inline-end: var(--ion-margin, 16px);
  }
}
.ion-margin-top {
  --margin-top: var(--ion-margin, 16px);
  margin-top: var(--ion-margin, 16px);
}
.ion-margin-start {
  --margin-start: var(--ion-margin, 16px);
  margin-left: var(--ion-margin, 16px);
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  .ion-margin-start {
    margin-left: unset;
    margin-inline-start: var(--ion-margin, 16px);
  }
}
.ion-margin-end {
  --margin-end: var(--ion-margin, 16px);
  margin-right: var(--ion-margin, 16px);
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  .ion-margin-end {
    margin-right: unset;
    margin-inline-end: var(--ion-margin, 16px);
  }
}
.ion-margin-bottom {
  --margin-bottom: var(--ion-margin, 16px);
  margin-bottom: var(--ion-margin, 16px);
}
.ion-margin-vertical {
  --margin-top: var(--ion-margin, 16px);
  --margin-bottom: var(--ion-margin, 16px);
  margin-top: var(--ion-margin, 16px);
  margin-bottom: var(--ion-margin, 16px);
}
.ion-margin-horizontal {
  --margin-start: var(--ion-margin, 16px);
  --margin-end: var(--ion-margin, 16px);
  margin-left: var(--ion-margin, 16px);
  margin-right: var(--ion-margin, 16px);
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  .ion-margin-horizontal {
    margin-left: unset;
    margin-right: unset;
    margin-inline-start: var(--ion-margin, 16px);
    margin-inline-end: var(--ion-margin, 16px);
  }
}
.ion-float-left {
  float: left !important;
}
.ion-float-right {
  float: right !important;
}
.ion-float-start {
  float: left !important;
}
[dir=rtl] .ion-float-start, :host-context([dir=rtl]) .ion-float-start {
  float: right !important;
}
.ion-float-end {
  float: right !important;
}
[dir=rtl] .ion-float-end, :host-context([dir=rtl]) .ion-float-end {
  float: left !important;
}
@media (min-width: 576px) {
  .ion-float-sm-left {
    float: left !important;
  }

  .ion-float-sm-right {
    float: right !important;
  }

  .ion-float-sm-start {
    float: left !important;
  }
  [dir=rtl] .ion-float-sm-start, :host-context([dir=rtl]) .ion-float-sm-start {
    float: right !important;
  }

  .ion-float-sm-end {
    float: right !important;
  }
  [dir=rtl] .ion-float-sm-end, :host-context([dir=rtl]) .ion-float-sm-end {
    float: left !important;
  }
}
@media (min-width: 768px) {
  .ion-float-md-left {
    float: left !important;
  }

  .ion-float-md-right {
    float: right !important;
  }

  .ion-float-md-start {
    float: left !important;
  }
  [dir=rtl] .ion-float-md-start, :host-context([dir=rtl]) .ion-float-md-start {
    float: right !important;
  }

  .ion-float-md-end {
    float: right !important;
  }
  [dir=rtl] .ion-float-md-end, :host-context([dir=rtl]) .ion-float-md-end {
    float: left !important;
  }
}
@media (min-width: 992px) {
  .ion-float-lg-left {
    float: left !important;
  }

  .ion-float-lg-right {
    float: right !important;
  }

  .ion-float-lg-start {
    float: left !important;
  }
  [dir=rtl] .ion-float-lg-start, :host-context([dir=rtl]) .ion-float-lg-start {
    float: right !important;
  }

  .ion-float-lg-end {
    float: right !important;
  }
  [dir=rtl] .ion-float-lg-end, :host-context([dir=rtl]) .ion-float-lg-end {
    float: left !important;
  }
}
@media (min-width: 1200px) {
  .ion-float-xl-left {
    float: left !important;
  }

  .ion-float-xl-right {
    float: right !important;
  }

  .ion-float-xl-start {
    float: left !important;
  }
  [dir=rtl] .ion-float-xl-start, :host-context([dir=rtl]) .ion-float-xl-start {
    float: right !important;
  }

  .ion-float-xl-end {
    float: right !important;
  }
  [dir=rtl] .ion-float-xl-end, :host-context([dir=rtl]) .ion-float-xl-end {
    float: left !important;
  }
}
.ion-text-center {
  text-align: center !important;
}
.ion-text-justify {
  text-align: justify !important;
}
.ion-text-start {
  text-align: start !important;
}
.ion-text-end {
  text-align: end !important;
}
.ion-text-left {
  text-align: left !important;
}
.ion-text-right {
  text-align: right !important;
}
.ion-text-nowrap {
  white-space: nowrap !important;
}
.ion-text-wrap {
  white-space: normal !important;
}
@media (min-width: 576px) {
  .ion-text-sm-center {
    text-align: center !important;
  }

  .ion-text-sm-justify {
    text-align: justify !important;
  }

  .ion-text-sm-start {
    text-align: start !important;
  }

  .ion-text-sm-end {
    text-align: end !important;
  }

  .ion-text-sm-left {
    text-align: left !important;
  }

  .ion-text-sm-right {
    text-align: right !important;
  }

  .ion-text-sm-nowrap {
    white-space: nowrap !important;
  }

  .ion-text-sm-wrap {
    white-space: normal !important;
  }
}
@media (min-width: 768px) {
  .ion-text-md-center {
    text-align: center !important;
  }

  .ion-text-md-justify {
    text-align: justify !important;
  }

  .ion-text-md-start {
    text-align: start !important;
  }

  .ion-text-md-end {
    text-align: end !important;
  }

  .ion-text-md-left {
    text-align: left !important;
  }

  .ion-text-md-right {
    text-align: right !important;
  }

  .ion-text-md-nowrap {
    white-space: nowrap !important;
  }

  .ion-text-md-wrap {
    white-space: normal !important;
  }
}
@media (min-width: 992px) {
  .ion-text-lg-center {
    text-align: center !important;
  }

  .ion-text-lg-justify {
    text-align: justify !important;
  }

  .ion-text-lg-start {
    text-align: start !important;
  }

  .ion-text-lg-end {
    text-align: end !important;
  }

  .ion-text-lg-left {
    text-align: left !important;
  }

  .ion-text-lg-right {
    text-align: right !important;
  }

  .ion-text-lg-nowrap {
    white-space: nowrap !important;
  }

  .ion-text-lg-wrap {
    white-space: normal !important;
  }
}
@media (min-width: 1200px) {
  .ion-text-xl-center {
    text-align: center !important;
  }

  .ion-text-xl-justify {
    text-align: justify !important;
  }

  .ion-text-xl-start {
    text-align: start !important;
  }

  .ion-text-xl-end {
    text-align: end !important;
  }

  .ion-text-xl-left {
    text-align: left !important;
  }

  .ion-text-xl-right {
    text-align: right !important;
  }

  .ion-text-xl-nowrap {
    white-space: nowrap !important;
  }

  .ion-text-xl-wrap {
    white-space: normal !important;
  }
}
.ion-text-uppercase {
  /* stylelint-disable-next-line declaration-no-important */
  text-transform: uppercase !important;
}
.ion-text-lowercase {
  /* stylelint-disable-next-line declaration-no-important */
  text-transform: lowercase !important;
}
.ion-text-capitalize {
  /* stylelint-disable-next-line declaration-no-important */
  text-transform: capitalize !important;
}
@media (min-width: 576px) {
  .ion-text-sm-uppercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: uppercase !important;
  }

  .ion-text-sm-lowercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: lowercase !important;
  }

  .ion-text-sm-capitalize {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: capitalize !important;
  }
}
@media (min-width: 768px) {
  .ion-text-md-uppercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: uppercase !important;
  }

  .ion-text-md-lowercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: lowercase !important;
  }

  .ion-text-md-capitalize {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: capitalize !important;
  }
}
@media (min-width: 992px) {
  .ion-text-lg-uppercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: uppercase !important;
  }

  .ion-text-lg-lowercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: lowercase !important;
  }

  .ion-text-lg-capitalize {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: capitalize !important;
  }
}
@media (min-width: 1200px) {
  .ion-text-xl-uppercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: uppercase !important;
  }

  .ion-text-xl-lowercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: lowercase !important;
  }

  .ion-text-xl-capitalize {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: capitalize !important;
  }
}
.ion-align-self-start {
  align-self: flex-start !important;
}
.ion-align-self-end {
  align-self: flex-end !important;
}
.ion-align-self-center {
  align-self: center !important;
}
.ion-align-self-stretch {
  align-self: stretch !important;
}
.ion-align-self-baseline {
  align-self: baseline !important;
}
.ion-align-self-auto {
  align-self: auto !important;
}
.ion-wrap {
  flex-wrap: wrap !important;
}
.ion-nowrap {
  flex-wrap: nowrap !important;
}
.ion-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}
.ion-justify-content-start {
  justify-content: flex-start !important;
}
.ion-justify-content-center {
  justify-content: center !important;
}
.ion-justify-content-end {
  justify-content: flex-end !important;
}
.ion-justify-content-around {
  justify-content: space-around !important;
}
.ion-justify-content-between {
  justify-content: space-between !important;
}
.ion-justify-content-evenly {
  justify-content: space-evenly !important;
}
.ion-align-items-start {
  align-items: flex-start !important;
}
.ion-align-items-center {
  align-items: center !important;
}
.ion-align-items-end {
  align-items: flex-end !important;
}
.ion-align-items-stretch {
  align-items: stretch !important;
}
.ion-align-items-baseline {
  align-items: baseline !important;
}
/*
 ! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com
 */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
*/
html {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
  -webkit-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}
[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}
input::placeholder,textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}
::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}
::-webkit-date-and-time-value {
  min-height: 1.5em;
}
::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
  padding-top: 0;
  padding-bottom: 0;
}
select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}
[multiple] {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          print-color-adjust: unset;
}
[type='checkbox'],[type='radio'] {
  -webkit-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}
[type='checkbox'] {
  border-radius: 0px;
}
[type='radio'] {
  border-radius: 100%;
}
[type='checkbox']:focus,[type='radio']:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
[type='checkbox']:checked,[type='radio']:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
[type='radio']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
  border-color: transparent;
  background-color: currentColor;
}
[type='checkbox']:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}
[type='file'] {
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}
[type='file']:focus {
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}
::-webkit-backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}
.visible {
  visibility: visible !important;
}
.static {
  position: static !important;
}
.fixed {
  position: fixed !important;
}
.absolute {
  position: absolute !important;
}
.relative {
  position: relative !important;
}
.sticky {
  position: sticky !important;
}
.inset-0 {
  top: 0px !important;
  right: 0px !important;
  bottom: 0px !important;
  left: 0px !important;
}
.m-8 {
  margin: 2rem !important;
}
.mx-4 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}
.mt-1 {
  margin-top: 0.25rem !important;
}
.mt-6 {
  margin-top: 1.5rem !important;
}
.ml-3 {
  margin-left: 0.75rem !important;
}
.mt-2 {
  margin-top: 0.5rem !important;
}
.mt-8 {
  margin-top: 2rem !important;
}
.-mb-6 {
  margin-bottom: -1.5rem !important;
}
.block {
  display: block !important;
}
.flex {
  display: flex !important;
}
.inline-flex {
  display: inline-flex !important;
}
.grid {
  display: grid !important;
}
.list-item {
  display: list-item !important;
}
.hidden {
  display: none !important;
}
.h-12 {
  height: 3rem !important;
}
.h-full {
  height: 100% !important;
}
.h-1 {
  height: 0.25rem !important;
}
.h-2 {
  height: 0.5rem !important;
}
.w-full {
  width: 100% !important;
}
.w-12 {
  width: 3rem !important;
}
.w-64 {
  width: 16rem !important;
}
.min-w-0 {
  min-width: 0px !important;
}
.max-w-lg {
  max-width: 32rem !important;
}
.flex-1 {
  flex: 1 1 0% !important;
}
.flex-grow {
  flex-grow: 1 !important;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
.cursor-pointer {
  cursor: pointer !important;
}
.resize {
  resize: both !important;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
.flex-col {
  flex-direction: column !important;
}
.items-center {
  align-items: center !important;
}
.justify-end {
  justify-content: flex-end !important;
}
.justify-center {
  justify-content: center !important;
}
.justify-between {
  justify-content: space-between !important;
}
.gap-y-6 {
  row-gap: 1.5rem !important;
}
.gap-x-4 {
  column-gap: 1rem !important;
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0 !important;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))) !important;
  margin-bottom: calc(2rem * var(--tw-space-y-reverse)) !important;
}
.space-x-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0 !important;
  margin-right: calc(2rem * var(--tw-space-x-reverse)) !important;
  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse))) !important;
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0 !important;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))) !important;
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)) !important;
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0 !important;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))) !important;
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse)) !important;
}
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1 !important;
  border-color: rgb(229 231 235 / var(--tw-divide-opacity)) !important;
}
.overflow-hidden {
  overflow: hidden !important;
}
.overflow-x-auto {
  overflow-x: auto !important;
}
.rounded-md {
  border-radius: 0.375rem !important;
}
.rounded-none {
  border-radius: 0px !important;
}
.rounded-full {
  border-radius: 9999px !important;
}
.rounded-l-md {
  border-top-left-radius: 0.375rem !important;
  border-bottom-left-radius: 0.375rem !important;
}
.rounded-r-md {
  border-top-right-radius: 0.375rem !important;
  border-bottom-right-radius: 0.375rem !important;
}
.border {
  border-width: 1px !important;
}
.border-2 {
  border-width: 2px !important;
}
.border-r-0 {
  border-right-width: 0px !important;
}
.border-dashed {
  border-style: dashed !important;
}
.border-gray-300 {
  --tw-border-opacity: 1 !important;
  border-color: rgb(209 213 219 / var(--tw-border-opacity)) !important;
}
.border-transparent {
  border-color: transparent !important;
}
.bg-gray-50 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity)) !important;
}
.bg-indigo-600 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity)) !important;
}
.bg-gray-100 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity)) !important;
}
.bg-white {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
}
.p-4 {
  padding: 1rem !important;
}
.px-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}
.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.py-4 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.px-6 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
.pt-8 {
  padding-top: 2rem !important;
}
.pb-6 {
  padding-bottom: 1.5rem !important;
}
.pt-5 {
  padding-top: 1.25rem !important;
}
.text-center {
  text-align: center !important;
}
.text-lg {
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
}
.text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}
.font-medium {
  font-weight: 500 !important;
}
.font-semibold {
  font-weight: 600 !important;
}
.capitalize {
  text-transform: capitalize !important;
}
.leading-6 {
  line-height: 1.5rem !important;
}
.text-gray-900 {
  --tw-text-opacity: 1 !important;
  color: rgb(17 24 39 / var(--tw-text-opacity)) !important;
}
.text-gray-500 {
  --tw-text-opacity: 1 !important;
  color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
}
.text-gray-700 {
  --tw-text-opacity: 1 !important;
  color: rgb(55 65 81 / var(--tw-text-opacity)) !important;
}
.text-white {
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}
.text-gray-300 {
  --tw-text-opacity: 1 !important;
  color: rgb(209 213 219 / var(--tw-text-opacity)) !important;
}
.text-red-500 {
  --tw-text-opacity: 1 !important;
  color: rgb(239 68 68 / var(--tw-text-opacity)) !important;
}
.text-gray-400 {
  --tw-text-opacity: 1 !important;
  color: rgb(156 163 175 / var(--tw-text-opacity)) !important;
}
.text-gray-600 {
  --tw-text-opacity: 1 !important;
  color: rgb(75 85 99 / var(--tw-text-opacity)) !important;
}
.text-indigo-600 {
  --tw-text-opacity: 1 !important;
  color: rgb(79 70 229 / var(--tw-text-opacity)) !important;
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.outline {
  outline-style: solid !important;
}
.invert {
  --tw-invert: invert(100%) !important;
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}
/* Import custom fonts */
@font-face {
  font-family: "Poppins-Thin";
  src: url('Poppins-Thin.ttf');
}
@font-face {
  font-family: "Poppins-Regular";
  src: url('Poppins-Regular.ttf');
}
@font-face {
  font-family: "Poppins-Regular";
  src: url('Poppins-Regular.ttf');
}
@font-face {
  font-family: "Poppins-Bold";
  src: url('Poppins-Bold.ttf');
}
.str-chat {
  box-sizing: border-box;
}
.str-chat * {
  font-family: var(--str-chat__font-family);
  box-sizing: border-box;
}
.str-chat .ngxp__container {
  z-index: 1;
  margin: -8px !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
}
.str-chat .ngxp__container .ngxp__arrow {
  display: none !important;
}
stream-icon,
stream-icon-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
}
:root {
  /* The theme version being used, 1 or 2. Used internally by SDKs */
  --str-chat__theme-version: 2;
}
.str-chat {
  /* Used for elements where sizing is necessary (such as icons, avatar), you can use this variable to scale those elements */
  --str-chat__spacing-px: 1px;
  /* Used for margins and paddings */
  --str-chat__spacing-0_5: 0.125rem;
  /* Used for margins and paddings */
  --str-chat__spacing-1: 0.25rem;
  /* Used for margins and paddings */
  --str-chat__spacing-1_5: 0.375rem;
  /* Used for margins and paddings */
  --str-chat__spacing-2: 0.5rem;
  /* Used for margins and paddings */
  --str-chat__spacing-2_5: 0.625rem;
  /* Used for margins and paddings */
  --str-chat__spacing-3: 0.75rem;
  /* Used for margins and paddings */
  --str-chat__spacing-3_5: 0.875rem;
  /* Used for margins and paddings */
  --str-chat__spacing-4: 1rem;
  /* Used for margins and paddings */
  --str-chat__spacing-5: 1.25rem;
  /* Used for margins and paddings */
  --str-chat__spacing-6: 1.5rem;
  /* Used for margins and paddings */
  --str-chat__spacing-7: 1.75rem;
  /* Used for margins and paddings */
  --str-chat__spacing-8: 2rem;
  /* Used for margins and paddings */
  --str-chat__spacing-9: 2.25rem;
  /* Used for margins and paddings */
  --str-chat__spacing-10: 2.5rem;
  /* Used for margins and paddings */
  --str-chat__spacing-11: 2.75rem;
  /* Used for margins and paddings */
  --str-chat__spacing-12: 3rem;
  /* Used for margins and paddings */
  --str-chat__spacing-14: 3.5rem;
  /* Used for margins and paddings */
  --str-chat__spacing-16: 4rem;
}
.str-chat__avatar .str-chat__avatar-fallback {
  text-align: center;
  height: inherit;
  width: inherit;
}
.str-chat__loading-channels-avatar {
  flex-shrink: 0;
  width: calc(var(--str-chat__spacing-px) * 49);
  height: calc(var(--str-chat__spacing-px) * 49);
}
.str-chat {
  /* The margin applied to every attachment in the attachment list */
  --str-chat__attachment-margin: var(--str-chat__spacing-0_5);
  /* The height of GIFs */
  --str-chat__gif-height: calc(var(--str-chat__spacing-px) * 200);
}
.str-chat__attachment-list {
  /* The maximum allowed width and height of attachments, in case of gallery images this is the maximum size of the whole gallery (not just for a single image inside the gallery). There are some constraints for the acceptable values you can provide for this variable, [Angular documentation](https://getstream.io/chat/docs/sdk/angular/components/AttachmentListComponent/#maximum-size), [React documentation](https://getstream.io/chat/docs/sdk/react/message-components/attachment/#image-and-video-sizing). */
  --str-chat__attachment-max-width: calc(
    var(--str-chat__message-max-width) - calc(2 * var(--str-chat__attachment-margin))
  );
  /* The maximum height of videos, the default value is the mase as `--str-chat__attachment-max-width`. The rendered video can be smaller based on the aspect ratio */
  --str-chat__video-height: var(--str-chat__attachment-max-width);
  /* The height of scraped images, the default value is optimized for 1.91:1 aspect ratio */
  --str-chat__scraped-image-height: calc(var(--str-chat__attachment-max-width) * calc(1 / 1.91));
  /* The height of scraped videos, the default value is optimized for 16:9 aspect ratio */
  --str-chat__scraped-video-height: calc(var(--str-chat__attachment-max-width) * calc(9 / 16));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}
.str-chat__attachment-list .str-chat__message-attachment--card .str-chat__message-attachment-card--header {
  position: relative;
}
.str-chat__attachment-list .str-chat__message-attachment--card .str-chat__message-attachment-card--source-link {
  padding-bottom: var(--str-chat__spacing-2);
}
.str-chat__attachment-list .str-chat__message-attachment--card .str-chat__message-attachment-card--text {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
}
.str-chat__attachment-list .str-chat__message-attachment--image,
.str-chat__attachment-list .str-chat__message-attachment--video,
.str-chat__attachment-list .str-chat__message-attachment-card--header {
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.str-chat__attachment-list .str-chat__message-attachment-card--header {
  height: var(--str-chat__scraped-image-height);
}
.str-chat__attachment-list .str-chat__message-attachment-card--header img {
  object-fit: cover;
  max-height: 100%;
  max-width: 100%;
  width: 100%;
  height: 100%;
  cursor: default;
}
.str-chat__attachment-list .str-chat__message-attachment-card-react--header img {
  cursor: zoom-in;
}
.str-chat__attachment-list .str-chat__message-attachment-card--giphy .str-chat__message-attachment-card--header {
  height: var(--str-chat__gif-height);
}
.str-chat__attachment-list .str-chat__message-attachment-card--giphy .str-chat__message-attachment-card--header img {
  object-fit: contain;
  max-height: 100%;
  max-width: 100%;
  cursor: default;
}
.str-chat__attachment-list .str-chat__message-attachment-card--giphy .str-chat__message-attachment-card-react--header img {
  cursor: zoom-in;
}
.str-chat__attachment-list .str-chat__message-attachment--image:not(.str-chat__message-attachment--card) img {
  height: min(var(--str-chat__attachment-max-width), min(var(--str-chat__attachment-max-width, 1000000) / var(--original-width, 1000000), 1px) * var(--original-height, 1000000));
  max-width: var(--str-chat__attachment-max-width);
  max-height: var(--str-chat__attachment-max-width);
  object-fit: cover;
  width: 100%;
  cursor: zoom-in;
}
.str-chat__attachment-list .str-chat__message-attachment--video:not(.str-chat__message-attachment--card),
.str-chat__attachment-list .str-chat__message-attachment-card--video .str-chat__message-attachment-card--header {
  max-width: var(--str-chat__attachment-max-width);
  display: flex;
}
.str-chat__attachment-list .str-chat__message-attachment--video:not(.str-chat__message-attachment--card) .str-chat__player-wrapper,
.str-chat__attachment-list .str-chat__message-attachment-card--video .str-chat__message-attachment-card--header .str-chat__player-wrapper {
  height: 100%;
  width: 100%;
  min-width: 0;
  max-width: var(--str-chat__attachment-max-width);
  display: flex;
  flex-direction: column;
}
.str-chat__attachment-list .str-chat__message-attachment--video:not(.str-chat__message-attachment--card) .str-chat__player-wrapper .react-player,
.str-chat__attachment-list .str-chat__message-attachment--video:not(.str-chat__message-attachment--card) .str-chat__player-wrapper .str-chat__video-angular,
.str-chat__attachment-list .str-chat__message-attachment-card--video .str-chat__message-attachment-card--header .str-chat__player-wrapper .react-player,
.str-chat__attachment-list .str-chat__message-attachment-card--video .str-chat__message-attachment-card--header .str-chat__player-wrapper .str-chat__video-angular {
  height: 100%;
  width: 100%;
  max-width: var(--str-chat__attachment-max-width);
  max-height: 100%;
  min-height: 0;
}
.str-chat__attachment-list .str-chat__message-attachment--video:not(.str-chat__message-attachment--card):not(.str-chat__message-attachment-dynamic-size) {
  height: var(--str-chat__video-height);
}
.str-chat__attachment-list .str-chat__message-attachment--video.str-chat__message-attachment-dynamic-size:not(.str-chat__message-attachment--card) {
  max-height: var(--str-chat__video-height);
}
.str-chat__attachment-list .str-chat__message-attachment--video.str-chat__message-attachment-dynamic-size:not(.str-chat__message-attachment--card) .str-chat__player-wrapper {
  height: min(var(--str-chat__video-height), min(var(--str-chat__attachment-max-width, 1000000) / var(--original-width, 1000000), 1px) * var(--original-height, 1000000));
  max-height: var(--str-chat__video-height);
}
.str-chat__attachment-list .str-chat__message-attachment--video.str-chat__message-attachment-dynamic-size:not(.str-chat__message-attachment--card) .str-chat__video-angular {
  max-height: var(--str-chat__video-height);
}
.str-chat__attachment-list .str-chat__message-attachment-card--video .str-chat__message-attachment-card--header {
  height: var(--str-chat__scraped-video-height);
}
.str-chat__attachment-list .str-chat__message-attachment--video:not(.str-chat__message-attachment--card),
.str-chat__attachment-list .str-chat__message-attachment--image:not(.str-chat__message-attachment--card) {
  margin: var(--str-chat__attachment-margin);
}
.str-chat__attachment-list .str-chat__message-attachment--gallery {
  margin: var(--str-chat__attachment-margin);
}
.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__gallery {
  display: grid;
  grid-template-columns: 50% 50%;
  overflow: hidden;
  width: -moz-fit-content;
  width: fit-content;
  gap: var(--str-chat__spacing-0_5);
  max-width: var(--str-chat__attachment-max-width);
  height: var(--str-chat__attachment-max-width);
}
.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__gallery.str-chat__gallery-two-rows {
  grid-template-rows: 50% 50%;
}
.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__gallery .str-chat__gallery-image {
  padding: 0;
  margin: 0;
}
.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__gallery .str-chat__gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  max-width: var(--str-chat__attachment-max-width);
}
.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__gallery .str-chat__gallery-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: top left;
  background-repeat: no-repeat;
  margin: 0;
  cursor: zoom-in;
  max-width: var(--str-chat__attachment-max-width);
}
.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__gallery .str-chat__gallery-placeholder p {
  position: relative;
  z-index: 1;
}
.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__gallery .str-chat__gallery-placeholder::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.str-chat__attachment-list .str-chat__gallery .str-chat__message-attachment--svg-image,
.str-chat__attachment-list .str-chat__message-attachment--image.str-chat__message-attachment--svg-image {
  padding: var(--str-chat__spacing-6);
}
.str-chat__attachment-list .str-chat__gallery .str-chat__message-attachment--svg-image img,
.str-chat__attachment-list .str-chat__message-attachment--image.str-chat__message-attachment--svg-image img {
  object-fit: contain;
  max-width: calc(var(--str-chat__attachment-max-width) - var(--str-chat__spacing-6));
  max-height: calc(var(--str-chat__attachment-max-width) - var(--str-chat__spacing-6));
}
.str-chat__attachment-list .str-chat__message-attachment-file--item,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--str-chat__spacing-2);
  column-gap: var(--str-chat__spacing-4);
  margin: var(--str-chat__attachment-margin);
}
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  row-gap: var(--str-chat__spacing-0_5);
  min-width: 0;
}
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text .str-chat__message-attachment-file--item-first-row,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text .str-chat__message-attachment-audio-widget--text-first-row,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-file--item-first-row,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-audio-widget--text-first-row,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text .str-chat__message-attachment-file--item-first-row,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text .str-chat__message-attachment-audio-widget--text-first-row,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-file--item-first-row,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-audio-widget--text-first-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--str-chat__spacing-2);
}
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-file--item-name,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-audio-widget--title,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-file--item-name,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-audio-widget--title,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-file--item-name,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-audio-widget--title,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-file--item-name,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-audio-widget--title,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-file--item-name,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-audio-widget--title,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-file--item-name,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-audio-widget--title,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-file--item-name,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-audio-widget--title,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-file--item-name,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-audio-widget--title {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
  min-width: 0;
}
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-download-icon svg,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-download-icon svg,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-download-icon svg,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-download-icon svg,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-download-icon svg,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-download-icon svg,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-download-icon svg,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-download-icon svg {
  width: calc(var(--str-chat__spacing-px) * 24);
  height: calc(var(--str-chat__spacing-px) * 16);
}
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__file-icon {
  width: calc(var(--str-chat__spacing-px) * 34);
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--play-controls {
  display: flex;
  align-items: center;
  justify-content: center;
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--progress-track {
  max-width: calc(var(--str-chat__spacing-px) * 120);
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text-second-row {
  display: flex;
  align-items: center;
  width: 100%;
  grid-column-gap: var(--str-chat__spacing-5);
  padding-top: var(--str-chat__spacing-2_5);
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text-second-row .str-chat__message-attachment-file--item-size {
  line-height: calc(var(--str-chat__spacing-px) * 14);
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget--progress-track {
  position: relative;
  height: calc(var(--str-chat__spacing-px) * 5);
  flex: 1;
  cursor: pointer;
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget--progress-track .str-chat__message-attachment-audio-widget--progress-indicator {
  position: absolute;
  inset-inline-start: 0;
  height: inherit;
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget--play-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--str-chat__spacing-px) * 36);
  width: calc(var(--str-chat__spacing-px) * 36);
  cursor: pointer;
  z-index: 1;
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget--play-button svg {
  width: var(--str-chat__spacing-3);
}
.str-chat__attachment-list .str-chat__message-attachment-card {
  min-width: 0;
  max-width: var(--str-chat__attachment-max-width);
  margin: var(--str-chat__attachment-margin);
}
.str-chat__attachment-list .str-chat__message-attachment-card .str-chat__message-attachment-card--content {
  padding: var(--str-chat__spacing-2_5);
}
.str-chat__attachment-list .str-chat__message-attachment-card .str-chat__message-attachment-card--content .str-chat__message-attachment-card--title {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
}
.str-chat__attachment-list .str-chat__message-attachment-card--audio .str-chat__message-attachment-card--content {
  padding: 0;
}
.str-chat__attachment-list .str-chat__message-attachment-card--audio .str-chat__message-attachment-card--content .str-chat__message-attachment-card-audio-widget {
  display: flex;
  flex-direction: column;
  row-gap: var(--str-chat__spacing-2_5);
  width: 100%;
  padding: var(--str-chat__spacing-2);
}
.str-chat__attachment-list .str-chat__message-attachment-card--audio .str-chat__message-attachment-card--content .str-chat__message-attachment-card-audio-widget .str-chat__message-attachment-card-audio-widget--first-row {
  display: flex;
  align-items: center;
  column-gap: var(--str-chat__spacing-3_5);
}
.str-chat__attachment-list .str-chat__message-attachment-actions .str-chat__message-attachment-actions-form {
  display: flex;
  justify-content: stretch;
}
.str-chat__attachment-list .str-chat__message-attachment-actions .str-chat__message-attachment-actions-form .str-chat__message-attachment-actions-button {
  cursor: pointer;
  width: 100%;
  padding: var(--str-chat__spacing-3) var(--str-chat__spacing-4);
  white-space: nowrap;
}
.str-chat__attachment-list .str-chat__message-attachment-with-actions.str-chat__message-attachment--giphy .str-chat__message-attachment-card .str-chat__message-attachment-card--content {
  display: none;
}
.str-chat__quoted-message-preview {
  /* stylelint-disable-next-line length-zero-no-unit */
  --str-chat__attachment-margin: 0px;
}
.str-chat__quoted-message-preview * {
  cursor: pointer !important;
}
.str-chat__quoted-message-preview .str-chat__message-attachment-card .str-chat__message-attachment-card--source-link,
.str-chat__quoted-message-preview .str-chat__message-attachment-card .str-chat__message-attachment-card--content {
  display: none;
}
.str-chat__quoted-message-preview .str-chat__message-attachment-file--item-download {
  display: none;
}
.str-chat__message .str-chat__quoted-message-preview .str-chat__message-attachment-file--item {
  padding: 0;
}
.str-chat__attachment-list-angular-host {
  min-width: 0;
}
.str-chat__attachment-preview-list {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--str-chat__spacing-1_5);
  width: 100%;
}
.str-chat__attachment-preview-list .str-chat__attachment-list-scroll-container {
  overflow-y: hidden;
  overflow-x: auto;
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: var(--str-chat__spacing-2);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-image {
  position: relative;
  height: calc(var(--str-chat__spacing-px) * 72);
  width: calc(var(--str-chat__spacing-px) * 72);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-image .str-chat__attachment-preview-image-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-image .str-chat__attachment-preview-thumbnail {
  object-fit: cover;
  height: calc(var(--str-chat__spacing-px) * 72);
  width: calc(var(--str-chat__spacing-px) * 72);
  word-break: break-all;
  overflow: hidden;
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-file {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: calc(var(--str-chat__spacing-px) * 72);
  width: calc(var(--str-chat__spacing-px) * 200);
  position: relative;
  padding: 0 var(--str-chat__spacing-4);
  column-gap: var(--str-chat__spacing-2);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-icon svg {
  height: calc(var(--str-chat__spacing-px) * 37);
  width: unset;
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-end {
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-end .str-chat__attachment-preview-file-name {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
  max-width: 100%;
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-end .str-chat__attachment-preview-file-download {
  line-height: calc(var(--str-chat__spacing-px) * 13);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-end .str-chat__attachment-preview-file-download svg {
  width: calc(var(--str-chat__spacing-px) * 16);
  height: calc(var(--str-chat__spacing-px) * 16);
}
.str-chat__attachment-preview-list button.str-chat__attachment-preview-delete {
  padding: unset;
  background: unset;
  border: unset;
  border-radius: var(--str-chat__border-radius-circle);
  display: flex;
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-delete {
  position: absolute;
  top: calc(var(--str-chat__spacing-px) * 2);
  inset-inline-end: calc(var(--str-chat__spacing-px) * 2);
  cursor: pointer;
  z-index: 1;
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-delete svg {
  width: calc(var(--str-chat__spacing-px) * 24);
  height: calc(var(--str-chat__spacing-px) * 24);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-error {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: unset;
  background: unset;
  border: unset;
  border-radius: unset;
  cursor: pointer;
}
.str-chat__attachment-preview-list-angular-host {
  width: 100%;
  max-width: 100%;
}
.mention-menu {
  padding: var(--str-chat__spacing-2) 0 !important;
  margin: 0 !important;
  min-width: 50%;
}
.mention-menu .mention-item {
  padding: 0 !important;
}
.str-chat__suggestion-list-container {
  position: absolute;
  bottom: var(--str-chat__spacing-7);
  width: 100%;
  padding: var(--str-chat__spacing-2) 0;
}
.str-chat__suggestion-list-container .str-chat__suggestion-list {
  max-height: calc(var(--str-chat__spacing-px) * 320);
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: unset;
  margin: unset;
}
.str-chat__slash-command {
  padding: var(--str-chat__spacing-2_5);
}
.str-chat__slash-command .str-chat__slash-command-header .str-chat__slash-command-args {
  margin-inline-start: var(--str-chat__spacing-2);
}
.str-chat__user-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--str-chat__spacing-2_5);
  column-gap: var(--str-chat__spacing-2);
}
.str-chat__user-item .str-chat__user-item--name {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
  width: 100%;
}
.str-chat__emoji-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--str-chat__spacing-2_5);
  column-gap: var(--str-chat__spacing-2);
}
.str-chat__emoji-item .str-chat__emoji-item--name {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
  width: 100%;
}
.str-chat__channel {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.str-chat__channel .str-chat__container {
  height: 100%;
  display: flex;
}
.str-chat__channel .str-chat__container .str-chat__main-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}
.str-chat__empty-channel {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--str-chat__spacing-4);
  position: relative;
}
.str-chat__empty-channel svg {
  width: calc(var(--str-chat__spacing-px) * 136);
  height: calc(var(--str-chat__spacing-px) * 136);
}
.str-chat__empty-channel .str-chat__empty-channel-notifications {
  position: absolute;
  inset-block-end: var(--str-chat__spacing-2);
}
.str-chat__loading-channel {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.str-chat__loading-channel .str-chat__loading-channel-header {
  display: flex;
  padding: var(--str-chat__spacing-2);
  column-gap: var(--str-chat__spacing-4);
  align-items: center;
}
.str-chat__loading-channel .str-chat__loading-channel-header .str-chat__loading-channel-header-avatar {
  flex-shrink: 0;
  width: calc(var(--str-chat__spacing-px) * 40);
  height: calc(var(--str-chat__spacing-px) * 40);
  border-radius: var(--str-chat__avatar-border-radius);
}
.str-chat__loading-channel .str-chat__loading-channel-header .str-chat__loading-channel-header-end {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  overflow-x: hidden;
  flex: 1;
  row-gap: var(--str-chat__spacing-1_5);
}
.str-chat__loading-channel .str-chat__loading-channel-header .str-chat__loading-channel-header-end .str-chat__loading-channel-header-name {
  border-radius: var(--str-chat__border-radius-xs);
  height: calc(var(--str-chat__spacing-px) * 16);
  width: calc(var(--str-chat__spacing-px) * 170);
}
.str-chat__loading-channel .str-chat__loading-channel-header .str-chat__loading-channel-header-end .str-chat__loading-channel-header-info {
  border-radius: var(--str-chat__border-radius-xs);
  height: calc(var(--str-chat__spacing-px) * 16);
  width: calc(var(--str-chat__spacing-px) * 66);
}
.str-chat__loading-channel .str-chat__loading-channel-message-list {
  padding: 0 var(--str-chat__spacing-2);
  height: 100%;
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__li {
  margin-inline: calc(-1 * var(--str-chat__spacing-2));
  padding-inline: var(--str-chat__spacing-2);
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__parent-message-li {
  margin-inline: calc(-1 * var(--str-chat__spacing-2));
}
@media only screen and (min-device-width: 768px) {
  .str-chat__loading-channel .str-chat__loading-channel-message-list {
    padding: 0 min(var(--str-chat__spacing-10), 4%);
  }
  .str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__li {
    margin-inline: calc(-1 * min(var(--str-chat__spacing-10), 4%));
    padding-inline: min(var(--str-chat__spacing-10), 4%);
  }
  .str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__parent-message-li {
    margin-inline: calc(-1 * min(var(--str-chat__spacing-10), 4%) - 2px);
  }
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message {
  display: flex;
  width: 100%;
  column-gap: var(--str-chat__spacing-2);
  padding: var(--str-chat__spacing-4) 0;
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message .str-chat__loading-channel-message-avatar {
  flex-shrink: 0;
  width: calc(var(--str-chat__spacing-px) * 49);
  height: calc(var(--str-chat__spacing-px) * 49);
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message .str-chat__loading-channel-message-end {
  display: flex;
  flex-direction: column;
  width: 100%;
  row-gap: var(--str-chat__spacing-2);
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message .str-chat__loading-channel-message-end .str-chat__loading-channel-message-last-row {
  display: flex;
  width: 100%;
  column-gap: var(--str-chat__spacing-2);
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message .str-chat__loading-channel-message-sender {
  height: calc(var(--str-chat__spacing-px) * 16);
  width: calc(var(--str-chat__spacing-px) * 66);
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message .str-chat__loading-channel-message-text {
  height: calc(var(--str-chat__spacing-px) * 16);
  width: 100%;
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message .str-chat__loading-channel-message-date {
  height: calc(var(--str-chat__spacing-px) * 16);
  width: calc(var(--str-chat__spacing-px) * 50);
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message:nth-of-type(2) {
  flex-direction: row-reverse;
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message:nth-of-type(2) .str-chat__loading-channel-message-sender {
  align-self: end;
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message:nth-of-type(2) .str-chat__loading-channel-message-last-row {
  flex-direction: row-reverse;
}
.str-chat__loading-channel .str-chat__loading-channel-message-input-row {
  display: flex;
  column-gap: var(--str-chat__spacing-2);
  padding: var(--str-chat__spacing-2);
}
.str-chat__loading-channel .str-chat__loading-channel-message-input-row .str-chat__loading-channel-message-input {
  width: 100%;
  height: calc(var(--str-chat__spacing-px) * 36);
}
.str-chat__loading-channel .str-chat__loading-channel-message-input-row .str-chat__loading-channel-message-send {
  height: calc(var(--str-chat__spacing-px) * 36);
  width: calc(var(--str-chat__spacing-px) * 36);
}
.str-chat__channel-header {
  display: flex;
  padding: var(--str-chat__spacing-2);
  column-gap: var(--str-chat__spacing-4);
  align-items: center;
}
.str-chat__channel-header .str-chat__header-hamburger {
  display: none;
}
.str-chat__channel-header .str-chat__channel-header-end {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  overflow-x: hidden;
  flex: 1;
  row-gap: var(--str-chat__spacing-1_5);
}
.str-chat__channel-header .str-chat__channel-header-end p {
  margin: 0;
}
.str-chat__channel-header .str-chat__channel-header-end .str-chat__channel-header-title,
.str-chat__channel-header .str-chat__channel-header-end .str-chat__channel-header-info {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
}
.str-chat__channel-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.str-chat__channel-list .str-chat__channel-list-messenger {
  height: 100%;
}
.str-chat__channel-list .str-chat__channel-list-messenger .str-chat__channel-list-messenger__main {
  height: 100%;
}
.str-chat__channel-list .str-chat__channel-list-messenger .str-chat__channel-list-messenger__main .str-chat__channel-list-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--str-chat__spacing-4);
}
.str-chat__channel-list .str-chat__channel-list-messenger .str-chat__channel-list-messenger__main .str-chat__channel-list-empty svg {
  width: calc(var(--str-chat__spacing-px) * 136);
  height: calc(var(--str-chat__spacing-px) * 136);
}
.str-chat__channel-list .str-chat__channel-list-messenger .str-chat__channel-list-messenger__main .str-chat__channel-list-empty-v1 {
  display: none;
}
.str-chat__channel-list .str-chat__load-more-button {
  display: flex;
  justify-content: center;
  margin: var(--str-chat__spacing-2) 0;
}
.str-chat__channel-list .str-chat__load-more-button .str-chat__load-more-button__button {
  display: flex;
  align-items: center;
  justify-content: center;
}
.str-chat__channel-list .str-chat__down-main {
  display: none;
}
.str-chat__channel-list-react {
  overflow: hidden;
}
.str-chat__channel-list-react .str-chat__channel-list-messenger-react {
  overflow: hidden;
  padding-bottom: var(--str-chat__spacing-2_5);
}
.str-chat__channel-list-react .str-chat__channel-list-messenger-react .str-chat__channel-list-messenger-react__main {
  overflow-y: auto;
}
.str-chat__channel-preview {
  display: flex;
  column-gap: var(--str-chat__spacing-2);
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2);
  margin: 0;
  text-align: start;
  cursor: pointer;
}
.str-chat__channel-preview .str-chat__channel-preview-end {
  display: flex;
  flex-direction: column;
  row-gap: var(--str-chat__spacing-0_5);
  width: 100%;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  min-width: 0;
}
.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-end-first-row {
  display: flex;
  column-gap: var(--str-chat__spacing-1);
  align-items: center;
}
.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-end-first-row .str-chat__channel-preview-unread-badge {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 var(--str-chat__spacing-2);
}
.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-end-first-row .str-chat__channel-preview-messenger--name {
  width: 100%;
}
.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-messenger--name,
.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-messenger--last-message {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
  min-width: 0;
}
.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-messenger--name p,
.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-messenger--last-message p {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
  margin: 0;
}
.str-chat__channel-preview-loading {
  display: flex;
  column-gap: var(--str-chat__spacing-2);
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2);
  margin: 0;
  text-align: start;
}
.str-chat__channel-preview-loading .str-chat__channel-preview-end-loading {
  display: flex;
  flex-direction: column;
  row-gap: var(--str-chat__spacing-0_5);
  width: 100%;
}
.str-chat__channel-preview-loading .str-chat__loading-channels-username {
  height: calc(var(--str-chat__spacing-px) * 16);
  width: calc(var(--str-chat__spacing-px) * 66);
}
.str-chat__channel-preview-loading .str-chat__loading-channels-status {
  height: calc(var(--str-chat__spacing-px) * 16);
  width: 100%;
}
.str-chat__channel-search {
  position: relative;
}
.str-chat__channel-search .str-chat__channel-search-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--str-chat__spacing-2_5);
}
.str-chat__channel-search .str-chat__channel-search-bar .str-chat__channel-search-bar-button {
  outline: none;
  background: none;
  border: none;
  width: calc(var(--str-chat__spacing-px) * 40);
  height: calc(var(--str-chat__spacing-px) * 40);
  padding: var(--str-chat__spacing-2_5);
  cursor: pointer;
}
.str-chat__channel-search .str-chat__channel-search-bar .str-chat__channel-search-input--wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  padding: var(--str-chat__spacing-2_5);
  min-width: 0;
}
.str-chat__channel-search .str-chat__channel-search-bar .str-chat__channel-search-input--wrapper .str-chat__channel-search-input--icon,
.str-chat__channel-search .str-chat__channel-search-bar .str-chat__channel-search-input--wrapper .str-chat__channel-search-input--clear-button {
  display: inline-flex;
  padding: 0 var(--str-chat__spacing-2_5);
}
.str-chat__channel-search .str-chat__channel-search-bar .str-chat__channel-search-input--wrapper .str-chat__channel-search-input--clear-button {
  outline: none;
  background: none;
  border: none;
  cursor: pointer;
}
.str-chat__channel-search .str-chat__channel-search-bar .str-chat__channel-search-input--wrapper .str-chat__channel-search-input--clear-button:disabled {
  cursor: default;
}
.str-chat__channel-search .str-chat__channel-search-bar .str-chat__channel-search-input--wrapper input {
  flex: 1;
  min-width: 0;
}
.str-chat__channel-search .str-chat__channel-search-container-searching {
  width: 100%;
  padding: var(--str-chat__spacing-5) var(--str-chat__spacing-4);
}
.str-chat__channel-search .str-chat__channel-search-results-header {
  width: 100%;
  padding: var(--str-chat__spacing-5) var(--str-chat__spacing-4);
}
.str-chat__channel-search .str-chat__channel-search-result-list.popup {
  position: absolute;
  left: 0;
  right: 0;
}
.str-chat__channel-search .str-chat__channel-search-result-list .str-chat__channel-search-container-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: var(--str-chat__spacing-5) var(--str-chat__spacing-4);
}
.str-chat__channel-search .str-chat__channel-search-result-list .str-chat__channel-search-container-empty svg {
  height: calc(var(--str-chat__spacing-px) * 90 + var(--str-chat__spacing-20));
  width: calc(var(--str-chat__spacing-px) * 90);
  padding: var(--str-chat__spacing-10) 0;
}
.str-chat__channel-search .str-chat__channel-search-result-list .str-chat__channel-search-result {
  outline: none;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  width: 100%;
  column-gap: var(--str-chat__spacing-2);
  padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2);
}
.str-chat__cta-button {
  padding: var(--str-chat__spacing-3_5) var(--str-chat__spacing-6);
  cursor: pointer;
}
.str-chat__circle-fab {
  width: calc(var(--str-chat__spacing-px) * 42);
  height: calc(var(--str-chat__spacing-px) * 42);
  padding: 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.str-chat__circle-fab .str-chat__circle-fab-icon {
  display: inline-block;
  height: calc(var(--str-chat__spacing-px) * 24);
}
.str-chat__edit-message-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  row-gap: var(--str-chat__spacing-5);
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
}
.str-chat__edit-message-form .str-chat__edit-message-form-options {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.str-chat__edit-message-form .str-chat__edit-message-form-options button {
  cursor: pointer;
  margin: 0;
}
.str-chat__message .str-chat__message-input-angular-host {
  max-height: 100%;
  min-height: 0;
  display: flex;
  min-width: 0;
  max-width: 100%;
}
.str-chat__message .str-chat__message-edit-in-progress .str-chat__modal--open .str-chat__modal__inner {
  height: 40%;
  max-height: 80%;
  min-width: 90%;
  max-width: 90%;
  width: 90%;
  flex-basis: min-content;
}
@media only screen and (min-device-width: 768px) {
  .str-chat__message .str-chat__message-edit-in-progress .str-chat__modal--open .str-chat__modal__inner {
    min-width: 40%;
    max-width: 60%;
    width: min-content;
  }
}
.str-chat__image-carousel {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
}
.str-chat__image-carousel .str-chat__image-carousel-stepper {
  padding: var(--str-chat__spacing-2_5);
  border: none;
  cursor: pointer;
  background: transparent;
}
.str-chat__image-carousel .str-chat__image-carousel-image {
  object-fit: cover;
  min-height: 0;
  max-height: 100%;
  min-width: 0;
  max-width: 100%;
}
.str-chat__message .str-chat__attachment-list .str-chat__modal--open .str-chat__modal__inner {
  height: 80%;
  width: 80%;
}
[dir=rtl] .str-chat__image-carousel-stepper svg {
  transform: scale(-1, 1);
}
.str-chat__loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rotate 1s linear infinite;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.str-chat {
  /* The width/height of the message options buttons */
  --str-chat__message-options-button-size: calc(var(--str-chat__spacing-px) * 26);
  /* The maximum allowed width of the message component */
  --str-chat__message-max-width: calc(var(--str-chat__spacing-px) * 480);
  /* The maximum allowed width of the message component, if it has attachments */
  --str-chat__message-with-attachment-max-width: calc(var(--str-chat__spacing-px) * 300);
  /* The maximum allowed width of quoted messages inside the message component */
  --str-chat__quoted-message-max-width: calc(var(--str-chat__spacing-px) * 180);
  /* The maximum allowed width of quoted messages inside the message input component */
  --str-chat__quoted-message-inside-message-input-max-width: calc(
    var(--str-chat__spacing-px) * 200
  );
  /* The maximum allowed height of quoted messages inside the message input component */
  --str-chat__quoted-message-inside-message-input-max-height: calc(
    var(--str-chat__quoted-message-inside-message-input-max-width) +
      calc(var(--str-chat__spacing-px) * 50)
  );
}
.str-chat__message .str-chat__message-bubble {
  max-width: var(--str-chat__message-max-width);
}
.str-chat__message.str-chat__message--has-attachment {
  --str-chat__message-max-width: var(--str-chat__message-with-attachment-max-width);
}
.str-chat__message.str-chat__message--has-attachment .str-chat__message-bubble {
  max-width: var(--str-chat__message-max-width);
}
.str-chat__quoted-message-preview {
  --str-chat__message-max-width: var(--str-chat__quoted-message-max-width);
}
.str-chat__quoted-message-preview .str-chat__quoted-message-bubble {
  pointer-events: none;
  max-width: var(--str-chat__message-max-width);
}
.str-chat__message,
.str-chat__quoted-message-preview {
  display: grid;
  word-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
  overflow-wrap: break-word;
}
.str-chat__message.str-chat__message--other, .str-chat__message.str-chat__quoted-message-preview,
.str-chat__quoted-message-preview.str-chat__message--other,
.str-chat__quoted-message-preview.str-chat__quoted-message-preview {
  grid-template-areas: "avatar message" ". replies" ". translation-notice" ". metadata";
  column-gap: var(--str-chat__spacing-2);
  grid-template-columns: auto 1fr;
  justify-items: start;
}
.str-chat__message.str-chat__message--me,
.str-chat__quoted-message-preview.str-chat__message--me {
  grid-template-areas: "message" "replies" "translation-notice" "metadata";
  justify-items: end;
}
.str-chat__message.str-chat__message--me > .str-chat__message-sender-avatar,
.str-chat__quoted-message-preview.str-chat__message--me > .str-chat__message-sender-avatar {
  display: none;
}
.str-chat__message.str-chat__message--deleted,
.str-chat__quoted-message-preview.str-chat__message--deleted {
  grid-template-areas: "message";
}
.str-chat__message.str-chat__message--system,
.str-chat__quoted-message-preview.str-chat__message--system {
  grid-template-areas: "message";
  grid-template-columns: auto;
}
.str-chat__message .str-chat__message-sender-avatar,
.str-chat__quoted-message-preview .str-chat__message-sender-avatar {
  grid-area: avatar;
  align-self: end;
}
.str-chat__message .str-chat__message-inner,
.str-chat__quoted-message-preview .str-chat__message-inner {
  grid-area: message;
  display: grid;
  grid-template-areas: "reactions reactions" "message-bubble options";
  grid-template-columns: auto 1fr;
  column-gap: var(--str-chat__spacing-2);
  position: relative;
}
.str-chat__message .str-chat__message-inner .str-chat__message-options,
.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-options {
  grid-area: options;
  align-items: start;
  justify-content: flex-end;
  flex-direction: row-reverse;
  width: calc(3 * var(--str-chat__message-options-button-size));
}
.str-chat__message .str-chat__message-inner .str-chat__message-options .str-chat__message-actions-box-button,
.str-chat__message .str-chat__message-inner .str-chat__message-options .str-chat__message-reply-in-thread-button,
.str-chat__message .str-chat__message-inner .str-chat__message-options .str-chat__message-reactions-button,
.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-options .str-chat__message-actions-box-button,
.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-options .str-chat__message-reply-in-thread-button,
.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-options .str-chat__message-reactions-button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: var(--str-chat__message-options-button-size);
  height: var(--str-chat__message-options-button-size);
}
.str-chat__message .str-chat__message-inner .str-chat__message-options .str-chat__message-actions-box-button,
.str-chat__message .str-chat__message-inner .str-chat__message-options .str-chat__message-actions-container,
.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-options .str-chat__message-actions-box-button,
.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-options .str-chat__message-actions-container {
  position: relative;
}
.str-chat__message .str-chat__message-inner .str-chat__message-reactions-host,
.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-reactions-host {
  grid-area: reactions;
}
.str-chat__message .str-chat__message-inner .str-chat__message-bubble,
.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-bubble {
  grid-area: message-bubble;
  position: relative;
  min-width: 0;
}
.str-chat__message .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text,
.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text {
  padding: var(--str-chat__spacing-2) var(--str-chat__spacing-4);
}
.str-chat__message .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text p,
.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text p {
  margin: 0;
  white-space: pre-line;
}
.str-chat__message.str-chat__message--me .str-chat__message-inner,
.str-chat__quoted-message-preview.str-chat__message--me .str-chat__message-inner {
  grid-template-areas: "reactions reactions" "options message-bubble";
  grid-template-columns: 1fr auto;
}
.str-chat__message.str-chat__message--me .str-chat__message-inner .str-chat__message-options,
.str-chat__quoted-message-preview.str-chat__message--me .str-chat__message-inner .str-chat__message-options {
  flex-direction: row;
}
.str-chat__message .str-chat__translation-notice,
.str-chat__quoted-message-preview .str-chat__translation-notice {
  grid-area: translation-notice;
}
.str-chat__message .str-chat__translation-notice button,
.str-chat__quoted-message-preview .str-chat__translation-notice button {
  cursor: pointer;
  padding: var(--str-chat__spacing-1) 0;
  margin: 0;
}
.str-chat__message .str-chat__message-metadata,
.str-chat__quoted-message-preview .str-chat__message-metadata {
  grid-area: metadata;
  display: flex;
  align-items: center;
  column-gap: var(--str-chat__spacing-1);
  margin-block-start: var(--str-chat__spacing-0_5);
}
.str-chat__message .str-chat__message-status,
.str-chat__quoted-message-preview .str-chat__message-status {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: var(--str-chat__spacing-0_5);
  position: relative;
}
.str-chat__message .str-chat__message-status svg,
.str-chat__quoted-message-preview .str-chat__message-status svg {
  width: calc(var(--str-chat__spacing-px) * 15);
  height: calc(var(--str-chat__spacing-px) * 15);
}
.str-chat__message .str-chat__message-replies-count-button-wrapper,
.str-chat__quoted-message-preview .str-chat__message-replies-count-button-wrapper {
  grid-area: replies;
}
.str-chat__message .str-chat__message-replies-count-button-wrapper button,
.str-chat__quoted-message-preview .str-chat__message-replies-count-button-wrapper button {
  cursor: pointer;
  padding: 0;
}
.str-chat__message .str-chat__message--deleted-inner,
.str-chat__quoted-message-preview .str-chat__message--deleted-inner {
  padding: var(--str-chat__spacing-2) var(--str-chat__spacing-4);
}
.str-chat__message .str-chat__message--deleted-inner p,
.str-chat__quoted-message-preview .str-chat__message--deleted-inner p {
  margin: 0;
}
.str-chat__message .str-chat__quoted-message-bubble,
.str-chat__quoted-message-preview .str-chat__quoted-message-bubble {
  padding: var(--str-chat__spacing-2) var(--str-chat__spacing-4);
  display: flex;
  column-gap: var(--str-chat__spacing-1);
  min-width: 0;
  width: 100%;
}
.str-chat__message .str-chat__quoted-message-bubble p,
.str-chat__quoted-message-preview .str-chat__quoted-message-bubble p {
  margin: 0;
}
.str-chat__message .str-chat__emoji-display-fix,
.str-chat__quoted-message-preview .str-chat__emoji-display-fix {
  display: inline-block;
  width: 1.25em;
}
.str-chat__message .str-chat__message-error-icon,
.str-chat__quoted-message-preview .str-chat__message-error-icon {
  display: none;
}
.str-chat__message .str-chat__simple-message--error-failed,
.str-chat__quoted-message-preview .str-chat__simple-message--error-failed {
  cursor: pointer;
}
.str-chat__message.str-chat__message--error .str-chat__message-error-icon, .str-chat__message.str-chat__message--failed .str-chat__message-error-icon,
.str-chat__quoted-message-preview.str-chat__message--error .str-chat__message-error-icon,
.str-chat__quoted-message-preview.str-chat__message--failed .str-chat__message-error-icon {
  display: block;
  position: absolute;
  bottom: 0;
  inset-inline-end: calc(-1 * (calc(var(--str-chat__spacing-px) * 18) / 2));
}
.str-chat__message.str-chat__message--error .str-chat__message-error-icon svg, .str-chat__message.str-chat__message--failed .str-chat__message-error-icon svg,
.str-chat__quoted-message-preview.str-chat__message--error .str-chat__message-error-icon svg,
.str-chat__quoted-message-preview.str-chat__message--failed .str-chat__message-error-icon svg {
  width: calc(var(--str-chat__spacing-px) * 18);
  height: calc(var(--str-chat__spacing-px) * 18);
}
.str-chat__li:hover .str-chat__message-options {
  display: flex;
}
.str-chat__message-inner .str-chat__message-options {
  display: none;
}
.str-chat__message-inner .str-chat__message-edit-in-progress.str-chat__message-options {
  display: flex;
}
.str-chat__message--other .str-chat__message-inner {
  margin-inline-end: calc(var(--str-chat__message-options-button-size) * 3);
}
.str-chat__li:hover .str-chat__message--other .str-chat__message-inner {
  margin-inline-end: 0;
}
.str-chat__message--me .str-chat__message-inner {
  margin-inline-start: calc(var(--str-chat__message-options-button-size) * 3);
}
.str-chat__li:hover .str-chat__message--me .str-chat__message-inner {
  margin-inline-start: 0;
}
.str-chat__li--middle .str-chat__message,
.str-chat__li--top .str-chat__message {
  margin-block-end: var(--str-chat__spacing-0_5);
}
.str-chat__li--middle .str-chat__message .str-chat__message-metadata,
.str-chat__li--top .str-chat__message .str-chat__message-metadata {
  display: none;
}
.str-chat__li--middle .str-chat__message > .str-chat__message-sender-avatar,
.str-chat__li--top .str-chat__message > .str-chat__message-sender-avatar {
  visibility: hidden;
}
.str-chat__li--bottom .str-chat__message,
.str-chat__li--single .str-chat__message {
  margin-block-end: var(--str-chat__spacing-2);
}
.str-chat__date-separator {
  display: flex;
  padding: var(--str-chat__spacing-8);
  align-items: center;
}
.str-chat__date-separator-line {
  flex: 1;
  height: var(--str-chat__spacing-px);
}
.str-chat__date-separator > *:not(:last-child) {
  margin-right: var(--str-chat__spacing-4);
}
.str-chat__message .str-chat__quoted-message-preview {
  margin-block-end: var(--str-chat__spacing-2);
}
.str-chat__message--system {
  width: 100%;
  text-align: center;
}
.str-chat__message--system p {
  margin: 0;
}
.str-chat__quoted-message-preview .str-chat__quoted-message-bubble {
  flex-direction: column;
  align-items: stretch;
  row-gap: var(--str-chat__spacing-1);
  flex-basis: min-content;
}
.str-chat__message-input .str-chat__quoted-message-preview {
  --str-chat__message-max-width: var(--str-chat__quoted-message-inside-message-input-max-width);
}
.str-chat__message-input .str-chat__quoted-message-preview .str-chat__quoted-message-bubble {
  max-height: var(--str-chat__quoted-message-inside-message-input-max-height);
}
.str-chat__message-input .str-chat__quoted-message-preview .str-chat__quoted-message-bubble .str-chat__quoted-message-text {
  max-height: 100%;
  min-height: 0;
}
.str-chat__message-input .str-chat__quoted-message-preview .str-chat__quoted-message-bubble .str-chat__quoted-message-text p {
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.str-chat__message-actions-box {
  overflow: hidden;
}
.str-chat__message-actions-box .str-chat__message-actions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-width: 10rem;
}
.str-chat__message-actions-box .str-chat__message-actions-list .str-chat__message-actions-list-item-button {
  padding: var(--str-chat__spacing-2) var(--str-chat__spacing-4);
  margin: 0;
  cursor: pointer;
  width: 100%;
  text-align: start;
}
.str-chat__message-actions-box:not(.str-chat__message-actions-box-angular) {
  display: none;
  position: absolute;
  z-index: 1;
}
.str-chat__message-actions-box:not(.str-chat__message-actions-box-angular).str-chat__message-actions-box--open {
  display: block;
}
.str-chat__message-actions-box:not(.str-chat__message-actions-box-angular).str-chat__message-actions-box--mine {
  inset-block-end: 100%;
  inset-inline-start: 100%;
}
.str-chat__message-actions-box:not(.str-chat__message-actions-box-angular):not(.str-chat__message-actions-box--mine) {
  inset-block-end: 100%;
  inset-inline-end: 100%;
}
.str-chat__message-edit-in-progress .ngxp__container {
  transform: initial !important;
  will-change: initial !important;
  z-index: initial;
}
.str-chat__message-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--str-chat__spacing-1) var(--str-chat__spacing-2);
  position: relative;
}
.str-chat__message-input .str-chat__quoted-message-preview-header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.str-chat__message-input .str-chat__quoted-message-preview-header .str-chat__quoted-message-reply-to-message {
  width: 100%;
  text-align: center;
}
.str-chat__message-input .str-chat__quoted-message-preview-header .str-chat__quoted-message-remove {
  width: calc(var(--str-chat__spacing-px) * 40);
  height: calc(var(--str-chat__spacing-px) * 40);
  cursor: pointer;
}
.str-chat__message-input .str-chat__dropzone-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 5;
}
.str-chat__message-input .str-chat__dropzone-container p {
  margin: unset;
}
.str-chat__message-input .str-chat__message-input-inner {
  flex-grow: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.str-chat__message-input .str-chat__message-input-inner .str-chat__file-input-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--str-chat__spacing-px) * 45);
  height: calc(var(--str-chat__spacing-px) * 45);
  cursor: pointer;
}
.str-chat__message-input .str-chat__message-input-inner .str-chat__file-input-container .str-chat__file-input {
  display: none;
}
.str-chat__message-input .str-chat__message-input-inner .str-chat__file-input-container .str-chat__file-input-label {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  max-height: 100%;
}
.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container .str-chat__message-textarea-with-emoji-picker {
  width: 100%;
  min-height: 0;
  max-height: 100%;
  display: flex;
  padding: var(--str-chat__spacing-2) var(--str-chat__spacing-4);
  column-gap: var(--str-chat__spacing-2);
}
.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container .str-chat__message-textarea-with-emoji-picker .str-chat__message-textarea {
  width: 100%;
  display: flex;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
}
.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container .str-chat__message-textarea-with-emoji-picker .str-chat__message-textarea-emoji-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--str-chat__spacing-px) * 27);
  height: calc(var(--str-chat__spacing-px) * 27);
  font-size: calc(var(--str-chat__spacing-px) * 27);
  align-self: end;
}
.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container .str-chat__message-textarea-with-emoji-picker .str-chat__message-textarea-emoji-picker .str-chat__message-textarea-emoji-picker-container {
  z-index: 5;
}
.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container .str-chat__message-textarea-with-emoji-picker .str-chat__message-textarea-emoji-picker .str-chat__message-textarea-emoji-picker-container .str-chat__emoji-picker-container {
  display: flex;
}
.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container .str-chat__message-textarea-with-emoji-picker .str-chat__message-textarea-emoji-picker .str-chat__emoji-picker-button {
  padding: unset;
  background: unset;
  border: unset;
  border-radius: var(--str-chat__border-radius-circle);
  display: flex;
  cursor: pointer;
}
.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container .str-chat__message-textarea-with-emoji-picker .str-chat__message-textarea-emoji-picker .str-chat__emoji-picker-button svg {
  width: calc(var(--str-chat__spacing-px) * 24);
  height: calc(var(--str-chat__spacing-px) * 24);
}
.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container .str-chat__message-textarea-with-emoji-picker .str-chat__message-textarea-emoji-picker .str-chat__emoji-picker-button svg path {
  fill: var(--str-chat__message-input-tools-color);
}
.str-chat__message-input .str-chat__message-textarea-angular-host {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.str-chat__message-input .str-chat__message-textarea-react-host {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.str-chat__message-input .str-chat__send-button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  width: calc(var(--str-chat__spacing-px) * 45);
  height: calc(var(--str-chat__spacing-px) * 45);
  min-width: calc(var(--str-chat__spacing-px) * 45);
}
.str-chat__message-input .str-chat__send-button svg {
  width: calc(var(--str-chat__spacing-px) * 32);
  height: calc(var(--str-chat__spacing-px) * 32);
}
.str-chat__message-input .str-chat__message-input-cooldown {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: var(--str-chat__spacing-2);
  margin-block: calc(var(--str-chat__spacing-2) / 2);
  min-width: calc(calc(var(--str-chat__spacing-px) * 45) - var(--str-chat__spacing-2));
  min-height: calc(calc(var(--str-chat__spacing-px) * 45) - var(--str-chat__spacing-2));
}
.str-chat__message-input .str-chat__message-input-not-allowed {
  align-self: center;
  padding: var(--str-chat__spacing-3);
}
.str-chat__message-input .str-chat__quoted-message-preview {
  padding: var(--str-chat__spacing-2);
}
.str-chat__message-input-angular-host {
  max-height: 50%;
}
.str-chat-angular__message-input {
  height: 100%;
  max-height: 100%;
}
.str-chat-angular__message-input-inner {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  flex-grow: initial;
}
[dir=rtl] .str-chat__send-button svg {
  transform: scale(-1, 1);
}
.str-chat__main-panel-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  align-items: center;
}
.str-chat__list {
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  max-height: 100%;
}
.str-chat__list .str-chat__message-list-scroll {
  padding: 0 var(--str-chat__spacing-2);
}
.str-chat__list .str-chat__message-list-scroll .str-chat__li {
  margin-inline: calc(-1 * var(--str-chat__spacing-2));
  padding-inline: var(--str-chat__spacing-2);
}
.str-chat__list .str-chat__message-list-scroll .str-chat__parent-message-li {
  margin-inline: calc(-1 * var(--str-chat__spacing-2));
}
@media only screen and (min-device-width: 768px) {
  .str-chat__list .str-chat__message-list-scroll {
    padding: 0 min(var(--str-chat__spacing-10), 4%);
  }
  .str-chat__list .str-chat__message-list-scroll .str-chat__li {
    margin-inline: calc(-1 * min(var(--str-chat__spacing-10), 4%));
    padding-inline: min(var(--str-chat__spacing-10), 4%);
  }
  .str-chat__list .str-chat__message-list-scroll .str-chat__parent-message-li {
    margin-inline: calc(-1 * min(var(--str-chat__spacing-10), 4%) - 2px);
  }
}
.str-chat__list .str-chat__message-list-scroll .str-chat__ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.str-chat__list .str-chat__parent-message-li {
  padding-block-end: var(--str-chat__spacing-4);
  margin-block-end: var(--str-chat__spacing-4);
}
.str-chat__list .str-chat__parent-message-li .str-chat__thread-start {
  text-align: start;
  padding-top: var(--str-chat__spacing-3);
}
.str-chat__jump-to-latest-message {
  position: absolute;
  inset-block-end: var(--str-chat__spacing-4);
  inset-inline-end: var(--str-chat__spacing-2);
  z-index: 2;
}
.str-chat__jump-to-latest-message .str-chat__jump-to-latest-unread-count {
  position: absolute;
  padding: var(--str-chat__spacing-0_5) var(--str-chat__spacing-2);
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
}
.str-chat__thread .str-chat__main-panel-inner {
  height: auto;
}
.str-chat__virtual-list {
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  flex: 1;
  -webkit-overflow-scrolling: touch; /* enable smooth scrolling on ios */
  margin: 0;
  width: 100%;
  height: 100%;
}
.str-chat__virtual-list .str-chat__message-list-scroll > div {
  padding: 0 var(--str-chat__spacing-2);
}
.str-chat__virtual-list .str-chat__message-list-scroll > div .str-chat__li {
  margin-inline: calc(-1 * var(--str-chat__spacing-2));
  padding-inline: var(--str-chat__spacing-2);
}
.str-chat__virtual-list .str-chat__message-list-scroll > div .str-chat__parent-message-li {
  margin-inline: calc(-1 * var(--str-chat__spacing-2));
}
@media only screen and (min-device-width: 768px) {
  .str-chat__virtual-list .str-chat__message-list-scroll > div {
    padding: 0 min(var(--str-chat__spacing-10), 4%);
  }
  .str-chat__virtual-list .str-chat__message-list-scroll > div .str-chat__li {
    margin-inline: calc(-1 * min(var(--str-chat__spacing-10), 4%));
    padding-inline: min(var(--str-chat__spacing-10), 4%);
  }
  .str-chat__virtual-list .str-chat__message-list-scroll > div .str-chat__parent-message-li {
    margin-inline: calc(-1 * min(var(--str-chat__spacing-10), 4%) - 2px);
  }
}
.str-chat__virtual-list .str-chat__parent-message-li {
  padding-block-end: var(--str-chat__spacing-4);
}
.str-chat__virtual-list .str-chat__parent-message-li .str-chat__thread-start {
  text-align: start;
  padding-top: var(--str-chat__spacing-3);
}
.str-chat__virtual-list__loading {
  display: flex;
  padding-top: var(--str-chat__spacing-2);
  justify-content: center;
  width: 100%;
  position: absolute;
}
.str-chat__virtual-list p {
  margin: 0 !important;
}
.str-chat__virtual-list p a {
  white-space: pre-line;
  overflow: hidden;
  word-wrap: break-word;
}
.str-chat__virtual-list .str-chat__message {
  margin-block-end: 0 !important;
}
.str-chat__virtual-list .str-chat__virtual-list-message-wrapper {
  padding-block-end: var(--str-chat__spacing-0_5);
}
.str-chat__thread--virtualized .str-chat__main-panel-inner {
  height: 100%;
}
.str-chat__thread--virtualized .str-chat__main-panel-inner .str-chat__virtual-list-message-wrapper:first-of-type {
  padding-block-start: var(--str-chat__spacing-4);
}
.str-chat__message-reactions-container {
  display: flex;
}
.str-chat__message-reactions-container .str-chat__message-reactions {
  list-style: none;
  display: flex;
  margin-block-start: var(--str-chat__spacing-0_5);
  margin-block-end: var(--str-chat__spacing-0_5);
  column-gap: var(--str-chat__spacing-0_5);
  width: -moz-fit-content;
  width: fit-content;
  padding: 0;
  position: relative;
}
.str-chat__message-reactions-container .str-chat__message-reactions .str-chat__message-reaction {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--str-chat__spacing-1_5);
  position: relative;
}
.str-chat__message-reactions-container .str-chat__message-reactions .str-chat__message-reaction button {
  outline: none;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.str-chat__message-reactions-container .str-chat__message-reactions .str-chat__message-reaction .str-chat__message-reaction-emoji {
  height: calc(var(--str-chat__spacing-px) * 13);
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.str-chat__message-reactions-container .str-chat__message-reactions .str-chat__reaction-list--counter,
.str-chat__message-reactions-container .str-chat__message-reactions .str-chat__simple-reactions-list-item--last-number {
  display: none;
}
.str-chat__message--me .str-chat__message-reactions-container {
  justify-content: flex-end;
}
.str-chat__message--other .str-chat__message-reactions-container {
  justify-content: flex-start;
}
.str-chat__message-reaction-selector {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  inset-block-end: 100%;
}
.str-chat__message-reaction-selector .str-chat__message-reactions-options {
  list-style: none;
  display: flex;
  margin-block-end: var(--str-chat__spacing-0_5);
  width: -moz-fit-content;
  width: fit-content;
  column-gap: var(--str-chat__spacing-1);
  padding: var(--str-chat__spacing-2);
}
.str-chat__message-reaction-selector .str-chat__message-reactions-options .str-chat__message-reactions-option {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: calc(var(--str-chat__spacing-px) * 40);
  height: calc(var(--str-chat__spacing-px) * 40);
}
.str-chat__message-reaction-selector .str-chat__message-reactions-options .str-chat__message-reactions-option .str-chat__message-reaction-emoji {
  height: calc(var(--str-chat__spacing-px) * 20);
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.str-chat__message-reaction-selector .str-chat__message-reactions-options .str-chat__message-reactions-last-user {
  display: none;
}
.str-chat__message-reaction-selector .str-chat__message-reactions-options .str-chat__message-reactions-list-item__count {
  display: none;
}
.str-chat__message--me .str-chat__message-reaction-selector {
  inset-inline-end: 0;
}
.str-chat__message--other .str-chat__message-reaction-selector {
  inset-inline-start: 0;
}
.str-chat__modal--open {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}
.str-chat__modal--open button.str-chat__modal__close-button {
  padding: unset;
  background: unset;
  border: unset;
  border-radius: var(--str-chat__border-radius-circle);
  margin: var(--str-chat__spacing-2);
  cursor: pointer;
}
.str-chat__modal--open .str-chat__modal__close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--str-chat__spacing-2);
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  cursor: pointer;
}
.str-chat__modal--open .str-chat__modal__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--str-chat__spacing-8) var(--str-chat__spacing-4);
  width: 40%;
  min-width: 0;
  min-height: 0;
}
.str-chat__modal--close {
  display: none;
}
.str-chat__message-notification {
  display: block;
  position: absolute;
  align-self: center;
  padding: var(--str-chat__spacing-1) var(--str-chat__spacing-2);
  bottom: calc(var(--str-chat__spacing-px) * 10);
  z-index: 101;
}
.str-chat__list-notifications {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  row-gap: var(--str-chat__spacing-1);
  margin: var(--str-chat__spacing-1_5);
  width: auto;
}
.str-chat__notification {
  padding: var(--str-chat__spacing-3_5) var(--str-chat__spacing-4);
}
.str-chat__thread-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.str-chat__thread-container .str-chat__thread-header {
  display: flex;
  padding: var(--str-chat__spacing-2);
  column-gap: var(--str-chat__spacing-4);
  align-items: center;
}
.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-details {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  overflow-x: hidden;
  flex: 1;
  row-gap: var(--str-chat__spacing-1_5);
}
.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-details .str-chat__thread-header-name,
.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-details .str-chat__thread-header-reply-count,
.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-details .str-chat__thread-header-channel-name,
.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-details .str-chat__thread-header-subtitle,
.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-details .str-chat__thread-header-title {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
}
.str-chat__thread-container .str-chat__thread-header .str-chat__close-thread-button {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  width: calc(var(--str-chat__spacing-px) * 40);
  height: calc(var(--str-chat__spacing-px) * 40);
  cursor: pointer;
  line-height: calc(var(--str-chat__spacing-px) * 21);
  font-size: calc(var(--str-chat__spacing-px) * 21);
}
.str-chat__thread-container .str-chat__thread-header .str-chat__close-thread-button svg {
  height: calc(var(--str-chat__spacing-px) * 21);
  width: calc(var(--str-chat__spacing-px) * 21);
}
.str-chat__thread-container .str-chat__thread-list {
  height: auto;
}
.str-chat__parent-message-li {
  padding: var(--str-chat__spacing-2);
}
.str-chat__tooltip {
  display: flex;
  padding: var(--str-chat__spacing-2);
  z-index: 1;
  max-width: calc(var(--str-chat__spacing-px) * 150);
  width: max-content;
}
.str-chat__typing-indicator-react-host {
  position: static !important;
}
.str-chat__typing-indicator {
  padding: var(--str-chat__spacing-1_5);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  column-gap: var(--str-chat__spacing-1);
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
}
.str-chat__typing-indicator .str-chat__typing-indicator__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: var(--str-chat__spacing-0_5);
}
.str-chat__typing-indicator .str-chat__typing-indicator__dots .str-chat__typing-indicator__dot {
  width: calc(var(--str-chat__spacing-px) * 4);
  height: calc(var(--str-chat__spacing-px) * 4);
}
.str-chat {
  --str-chat__blue950: #001333;
  --str-chat__blue900: #00163d;
  --str-chat__blue800: #002666;
  --str-chat__blue700: #003999;
  --str-chat__blue600: #004ccc;
  --str-chat__blue500: #005fff;
  --str-chat__blue400: #337eff;
  --str-chat__blue300: #669fff;
  --str-chat__blue200: #ccdfff;
  --str-chat__blue100: #e0f0ff;
  --str-chat__blue50: #ebf5ff;
  --str-chat__grey950: #080707;
  --str-chat__grey900: #17191c;
  --str-chat__grey800: #1c1e22;
  --str-chat__grey700: #272a30;
  --str-chat__grey600: #4c525c;
  --str-chat__grey500: #72767e;
  --str-chat__grey400: #b4b7bb;
  --str-chat__grey300: #dbdde1;
  --str-chat__grey200: #e9eaed;
  --str-chat__grey100: #f4f4f5;
  --str-chat__grey50: #ffffff;
  --str-chat__red900: #330003;
  --str-chat__red800: #660006;
  --str-chat__red700: #990008;
  --str-chat__red600: #cc000b;
  --str-chat__red500: #ff000e;
  --str-chat__red400: #ff3742;
  --str-chat__red300: #ff666e;
  --str-chat__red200: #ff999f;
  --str-chat__red100: #ffe5e7;
  --str-chat__green900: #062d16;
  --str-chat__green800: #0d592c;
  --str-chat__green700: #138643;
  --str-chat__green600: #19b359;
  --str-chat__green500: #20e070;
  --str-chat__green400: #4ce68c;
  --str-chat__green300: #79eca9;
  --str-chat__green200: #a6f2c6;
  --str-chat__green100: #e9f1ff;
  --str-chat__yellow900: #332500;
  --str-chat__yellow800: #664900;
  --str-chat__yellow700: #996e00;
  --str-chat__yellow600: #cc9200;
  --str-chat__yellow500: #ffb700;
  --str-chat__yellow400: #ffd466;
  --str-chat__yellow300: #ffe299;
  --str-chat__yellow200: #fff1cc;
  --str-chat__yellow100: #fff8e5;
  /* Border radius used for slightly rounded elements */
  --str-chat__border-radius-xs: 8px;
  /* Border radius used for slightly rounded elements */
  --str-chat__border-radius-sm: 14px;
  /* Border radius used for rounded elements */
  --str-chat__border-radius-md: 18px;
  /* Border radius used for rounded elements */
  --str-chat__border-radius-lg: 20px;
  /* Border radius used for circular elements */
  --str-chat__border-radius-circle: 999px;
  /* The font used in the chat, by default, we use [preinstalled OS fonts](https://systemfontstack.com/) */
  --str-chat__font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, Helvetica Neue, sans-serif;
  /* The font used for caption texts */
  --str-chat__caption-text: 0.75rem/1rem var(--str-chat__font-family);
  /* The font used for caption texts with emphasize */
  --str-chat__caption-medium-text: 500 0.75rem/1rem var(--str-chat__font-family);
  /* The font used for body texts */
  --str-chat__body-text: 0.875rem/1rem var(--str-chat__font-family);
  /* The font used for body texts with emphasize */
  --str-chat__body-medium-text: 500 0.875rem/1rem var(--str-chat__font-family);
  /* The font used for body texts */
  --str-chat__body2-text: 0.9375rem/1rem var(--str-chat__font-family);
  /* The font used for body texts with emphasize */
  --str-chat__body2-medium-text: 500 0.9375rem/1rem var(--str-chat__font-family);
  /* The font used for subtitle texts */
  --str-chat__subtitle-text: 1rem/1.25rem var(--str-chat__font-family);
  /* The font used for subtitle texts with emphasize */
  --str-chat__subtitle-medium-text: 500 1rem/1.25rem var(--str-chat__font-family);
  /* The font used for subtitle texts */
  --str-chat__subtitle2-text: 1.25rem/1.5rem var(--str-chat__font-family);
  /* The font used for subtitle texts with emphasize */
  --str-chat__subtitle2-medium-text: 500 1.25rem/1.5rem var(--str-chat__font-family);
  /* The font used for headline texts */
  --str-chat__headline-text: 1.5rem/1.5rem var(--str-chat__font-family);
  /* The font used for headline texts */
  --str-chat__headline2-text: 1.8rem/1.8rem var(--str-chat__font-family);
}
.str-chat,
.str-chat__theme-light {
  /* Used for emphasis, brands can inject their main color using this variable */
  --str-chat__primary-color: var(--str-chat__blue500);
  /* Used for emphasised overlays - color of --str-chat__primary-color with alpha channel */
  --str-chat__primary-overlay-color: rgba(0, 95, 255, 0.6);
  /* Used for emphasis, brands can inject their main color using this variable, it has less emphasis than primary color */
  --str-chat__primary-color-low-emphasis: var(--str-chat__blue300);
  /* Used to indicate that a UI element with primary color is in an active state */
  --str-chat__active-primary-color: var(--str-chat__blue600);
  /* If the primary color is used as a background, text/icons are displayed in this color */
  --str-chat__on-primary-color: var(--str-chat__grey50);
  /* Used as a background color for the main chat UI components */
  --str-chat__background-color: var(--str-chat__grey50);
  /* Used as a background color for the main chat UI components */
  --str-chat__secondary-background-color: var(--str-chat__grey50);
  /* Used as a background color to give emphasis, but less vibrant than the primary color */
  --str-chat__primary-surface-color: var(--str-chat__blue100);
  /* Used as a background color to give emphasis, but less vibrant than the primary surface color */
  --str-chat__primary-surface-color-low-emphasis: var(--str-chat__blue50);
  /* A neutral color used to give emphasis to different surfaces */
  --str-chat__surface-color: var(--str-chat__grey300);
  /* A neutral color used to give emphasis to different surfaces */
  --str-chat__secondary-surface-color: var(--str-chat__grey200);
  /* A neutral color used to give emphasis to different surfaces */
  --str-chat__tertiary-surface-color: var(--str-chat__grey100);
  /* The main color used for texts/icons */
  --str-chat__text-color: var(--str-chat__grey950);
  /* Used for texts/icons that need less emphasis */
  --str-chat__text-low-emphasis-color: var(--str-chat__grey500);
  /* Used for displaying disabled UI elements (typically buttons) */
  --str-chat__disabled-color: var(--str-chat__grey400);
  /* Used for text/icon colors if disabled color is used as a background color */
  --str-chat__on-disabled-color: var(--str-chat__grey50);
  /* Used for error messages, and destructive actions */
  --str-chat__danger-color: var(--str-chat__red400);
  /* The background color used to highlight a message when jumping to a message. Only available in React SDK. */
  --str-chat__message-highlight-color: var(--str-chat__yellow100);
  /* Used for displaying the unread badge */
  --str-chat__unread-badge-color: var(--str-chat__red400);
  /* Used for text/icon colors if unread badge color is used as a background color */
  --str-chat__on-unread-badge-color: var(--str-chat__grey50);
  /* The background color used for overlays */
  --str-chat__overlay-color: rgba(252, 252, 252, 0.9);
  /* The background color used for subtle overlays */
  --str-chat__secondary-overlay-color: rgba(0, 0, 0, 0.2);
  /* The text/icon color used on subtle overlays */
  --str-chat__secondary-overlay-text-color: var(--str-chat__grey50);
  /* The background color used for opaque surfaces */
  --str-chat__opaque-surface-background-color: rgba(0, 0, 0, 0.8);
  /* The text color used on opaque surfaces */
  --str-chat__opaque-surface-text-color: var(--str-chat__grey50);
  /* If a component has a box shadow applied to it, this will be the color used for the shadow */
  --str-chat__box-shadow-color: rgba(0, 0, 0, 0.18);
}
.str-chat__theme-dark {
  --str-chat__primary-color: var(--str-chat__blue400);
  --str-chat__primary-overlay-color: rgba(51, 126, 255, 0.6);
  --str-chat__primary-color-low-emphasis: var(--str-chat__blue700);
  --str-chat__active-primary-color: var(--str-chat__blue600);
  --str-chat__on-primary-color: var(--str-chat__grey50);
  --str-chat__background-color: var(--str-chat__grey950);
  --str-chat__secondary-background-color: var(--str-chat__grey900);
  --str-chat__primary-surface-color: var(--str-chat__blue900);
  --str-chat__primary-surface-color-low-emphasis: var(--str-chat__blue950);
  --str-chat__surface-color: var(--str-chat__grey700);
  --str-chat__secondary-surface-color: var(--str-chat__grey800);
  --str-chat__tertiary-surface-color: var(--str-chat__grey900);
  --str-chat__text-color: var(--str-chat__grey50);
  --str-chat__text-low-emphasis-color: var(--str-chat__grey500);
  --str-chat__disabled-color: var(--str-chat__grey600);
  --str-chat__on-disabled-color: var(--str-chat__grey50);
  --str-chat__danger-color: var(--str-chat__red600);
  --str-chat__message-highlight-color: var(--str-chat__yellow900);
  --str-chat__unread-badge-color: var(--str-chat__red400);
  --str-chat__on-unread-badge-color: var(--str-chat__grey50);
  --str-chat__overlay-color: rgba(0, 0, 0, 0.7);
  --str-chat__secondary-overlay-color: rgba(0, 0, 0, 0.4);
  --str-chat__secondary-overlay-text-color: var(--str-chat__grey50);
  --str-chat__opaque-surface-background-color: rgba(250, 250, 250, 0.85);
  --str-chat__opaque-surface-text-color: var(--str-chat__grey900);
  --str-chat__box-shadow-color: rgba(0, 0, 0, 0.8);
}
.emoji-mart,
.emoji-mart * {
  box-sizing: border-box;
  line-height: 1.15;
}
.emoji-mart {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 16px;
  display: inline-block;
  color: #222427;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  background: #fff;
}
.emoji-mart .emoji-mart-emoji {
  padding: 6px;
}
.emoji-mart-bar {
  border: 0 solid #d9d9d9;
}
.emoji-mart-bar:first-child {
  border-bottom-width: 1px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.emoji-mart-bar:last-child {
  border-top-width: 1px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.emoji-mart-anchors {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 6px;
  line-height: 0;
}
.emoji-mart-anchor {
  position: relative;
  display: block;
  flex: 1 1 auto;
  color: #858585;
  text-align: center;
  padding: 12px 4px;
  overflow: hidden;
  transition: color 0.1s ease-out;
  margin: 0;
  box-shadow: none;
  background: none;
  border: none;
}
.emoji-mart-anchor:focus {
  outline: 0;
}
.emoji-mart-anchor:hover,
.emoji-mart-anchor:focus,
.emoji-mart-anchor-selected {
  color: #464646;
}
.emoji-mart-anchor-selected .emoji-mart-anchor-bar {
  bottom: 0;
}
.emoji-mart-anchor-bar {
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #464646;
}
.emoji-mart-anchors i {
  display: inline-block;
  width: 100%;
  max-width: 22px;
}
.emoji-mart-anchors svg,
.emoji-mart-anchors img {
  fill: currentColor;
  height: 18px;
  width: 18px;
}
.emoji-mart-scroll {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 270px;
  padding: 0 6px 6px;
  will-change: transform; /* avoids "repaints on scroll" in mobile Chrome */
}
.emoji-mart-search {
  margin-top: 6px;
  padding: 0 6px;
  position: relative;
}
.emoji-mart-search input {
  font-size: 16px;
  display: block;
  width: 100%;
  padding: 5px 25px 6px 10px;
  border-radius: 5px;
  border: 1px solid #d9d9d9;
  outline: 0;
}
.emoji-mart-search input,
.emoji-mart-search input::-webkit-search-decoration,
.emoji-mart-search input::-webkit-search-cancel-button,
.emoji-mart-search input::-webkit-search-results-button,
.emoji-mart-search input::-webkit-search-results-decoration {
  /* remove webkit/blink styles for <input type="search">
   * via https://stackoverflow.com/a/9422689 */
  -webkit-appearance: none;
}
.emoji-mart-search-icon {
  position: absolute;
  top: 7px;
  right: 11px;
  z-index: 2;
  padding: 2px 5px 1px;
  border: none;
  background: none;
}
.emoji-mart-category .emoji-mart-emoji span {
  z-index: 1;
  position: relative;
  text-align: center;
  cursor: default;
}
.emoji-mart-category .emoji-mart-emoji:hover::before {
  z-index: 0;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
  border-radius: 100%;
}
.emoji-mart-category-label {
  z-index: 2;
  position: relative;
  position: sticky;
  top: 0;
}
.emoji-mart-category-label span {
  display: block;
  width: 100%;
  font-weight: 500;
  padding: 5px 6px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.95);
}
.emoji-mart-category-list {
  margin: 0;
  padding: 0;
}
.emoji-mart-category-list li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}
.emoji-mart-emoji {
  position: relative;
  display: inline-block;
  font-size: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}
.emoji-mart-emoji-native {
  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji";
}
.emoji-mart-no-results {
  font-size: 14px;
  text-align: center;
  padding-top: 70px;
  color: #858585;
}
.emoji-mart-no-results-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
.emoji-mart-no-results .emoji-mart-category-label {
  display: none;
}
.emoji-mart-no-results .emoji-mart-no-results-label {
  margin-top: 0.2em;
}
.emoji-mart-no-results .emoji-mart-emoji:hover::before {
  content: none;
}
.emoji-mart-preview {
  position: relative;
  height: 70px;
}
.emoji-mart-preview-emoji,
.emoji-mart-preview-data,
.emoji-mart-preview-skins {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.emoji-mart-preview-emoji {
  left: 12px;
}
.emoji-mart-preview-data {
  left: 68px;
  right: 12px;
  word-break: break-all;
}
.emoji-mart-preview-skins {
  right: 30px;
  text-align: right;
}
.emoji-mart-preview-skins.custom {
  right: 10px;
  text-align: right;
}
.emoji-mart-preview-name {
  font-size: 14px;
}
.emoji-mart-preview-shortname {
  font-size: 12px;
  color: #888;
}
.emoji-mart-preview-shortname + .emoji-mart-preview-shortname,
.emoji-mart-preview-shortname + .emoji-mart-preview-emoticon,
.emoji-mart-preview-emoticon + .emoji-mart-preview-emoticon {
  margin-left: 0.5em;
}
.emoji-mart-preview-emoticon {
  font-size: 11px;
  color: #bbb;
}
.emoji-mart-title span {
  display: inline-block;
  vertical-align: middle;
}
.emoji-mart-title .emoji-mart-emoji {
  padding: 0;
}
.emoji-mart-title-label {
  color: #999a9c;
  font-size: 26px;
  font-weight: 300;
}
.emoji-mart-skin-swatches {
  font-size: 0;
  padding: 2px 0;
  border: 1px solid #d9d9d9;
  border-radius: 12px;
  background-color: #fff;
}
.emoji-mart-skin-swatches.custom {
  font-size: 0;
  border: none;
  background-color: #fff;
}
.emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch {
  width: 16px;
  padding: 0 2px;
}
.emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch.selected::after {
  opacity: 0.75;
}
.emoji-mart-skin-swatch {
  display: inline-block;
  width: 0;
  vertical-align: middle;
  transition-property: width, padding;
  transition-duration: 0.125s;
  transition-timing-function: ease-out;
}
.emoji-mart-skin-swatch:nth-child(1) {
  transition-delay: 0s;
}
.emoji-mart-skin-swatch:nth-child(2) {
  transition-delay: 0.03s;
}
.emoji-mart-skin-swatch:nth-child(3) {
  transition-delay: 0.06s;
}
.emoji-mart-skin-swatch:nth-child(4) {
  transition-delay: 0.09s;
}
.emoji-mart-skin-swatch:nth-child(5) {
  transition-delay: 0.12s;
}
.emoji-mart-skin-swatch:nth-child(6) {
  transition-delay: 0.15s;
}
.emoji-mart-skin-swatch.selected {
  position: relative;
  width: 16px;
  padding: 0 2px;
}
.emoji-mart-skin-swatch.selected::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  background-color: #fff;
  border-radius: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
.emoji-mart-skin-swatch.custom {
  display: inline-block;
  width: 0;
  height: 38px;
  overflow: hidden;
  vertical-align: middle;
  transition-property: width, height;
  transition-duration: 0.125s;
  transition-timing-function: ease-out;
  cursor: default;
}
.emoji-mart-skin-swatch.custom.selected {
  position: relative;
  width: 36px;
  height: 38px;
  padding: 0 2px 0 0;
}
.emoji-mart-skin-swatch.custom.selected::after {
  content: "";
  width: 0;
  height: 0;
}
.emoji-mart-skin-swatches.custom .emoji-mart-skin-swatch.custom:hover {
  background-color: #f4f4f4;
  border-radius: 10%;
}
.emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom {
  width: 36px;
  height: 38px;
  padding: 0 2px 0 0;
}
.emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom.selected::after {
  opacity: 0.75;
}
.emoji-mart-skin-text.opened {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  color: #888;
  font-size: 11px;
  padding: 5px 2px;
  width: 95px;
  height: 40px;
  border-radius: 10%;
  background-color: #fff;
}
.emoji-mart-skin {
  display: inline-block;
  width: 100%;
  padding-top: 100%;
  max-width: 12px;
  border-radius: 100%;
}
.emoji-mart-skin-tone-1 {
  background-color: #ffc93a;
}
.emoji-mart-skin-tone-2 {
  background-color: #fadcbc;
}
.emoji-mart-skin-tone-3 {
  background-color: #e0bb95;
}
.emoji-mart-skin-tone-4 {
  background-color: #bf8f68;
}
.emoji-mart-skin-tone-5 {
  background-color: #9b643d;
}
.emoji-mart-skin-tone-6 {
  background-color: #594539;
}
/* For screenreaders only, via https://stackoverflow.com/a/19758620 */
.emoji-mart-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
/*
 * Dark mode styles
 */
.emoji-mart-dark {
  color: #fff;
  border-color: #555453;
  background-color: #222;
}
.emoji-mart-dark .emoji-mart-bar {
  border-color: #555453;
}
.emoji-mart-dark .emoji-mart-search input {
  color: #fff;
  border-color: #555453;
  background-color: #2f2f2f;
}
.emoji-mart-dark .emoji-mart-search-icon svg {
  fill: #fff;
}
.emoji-mart-dark .emoji-mart-category .emoji-mart-emoji:hover::before {
  background-color: #444;
}
.emoji-mart-dark .emoji-mart-category-label span {
  background-color: #222;
  color: #fff;
}
.emoji-mart-dark .emoji-mart-skin-swatches {
  border-color: #555453;
  background-color: #222;
}
.emoji-mart-dark .emoji-mart-anchor:hover,
.emoji-mart-dark .emoji-mart-anchor:focus,
.emoji-mart-dark .emoji-mart-anchor-selected {
  color: #bfbfbf;
}
.image-gallery-icon {
  color: #fff;
  transition: all 0.3s ease-out;
  -webkit-appearance: none;
          appearance: none;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  outline: none;
  position: absolute;
  z-index: 4;
  filter: drop-shadow(0 2px 2px #1a1a1a);
}
@media (hover: hover) and (pointer: fine) {
  .image-gallery-icon:hover {
    color: #337ab7;
  }
  .image-gallery-icon:hover .image-gallery-svg {
    transform: scale(1.1);
  }
}
.image-gallery-icon:focus {
  outline: 2px solid #337ab7;
}
.image-gallery-using-mouse .image-gallery-icon:focus {
  outline: none;
}
.image-gallery-fullscreen-button {
  bottom: 0;
  padding: 20px;
}
.image-gallery-fullscreen-button .image-gallery-svg {
  height: 28px;
  width: 28px;
}
@media (max-width: 768px) {
  .image-gallery-fullscreen-button {
    padding: 15px;
  }
  .image-gallery-fullscreen-button .image-gallery-svg {
    height: 24px;
    width: 24px;
  }
}
@media (max-width: 480px) {
  .image-gallery-fullscreen-button {
    padding: 10px;
  }
  .image-gallery-fullscreen-button .image-gallery-svg {
    height: 16px;
    width: 16px;
  }
}
.image-gallery-fullscreen-button {
  right: 0;
}
.image-gallery-left-nav,
.image-gallery-right-nav {
  padding: 50px 10px;
  top: 50%;
  transform: translateY(-50%);
}
.image-gallery-left-nav .image-gallery-svg,
.image-gallery-right-nav .image-gallery-svg {
  height: 120px;
  width: 60px;
}
@media (max-width: 768px) {
  .image-gallery-left-nav .image-gallery-svg,
.image-gallery-right-nav .image-gallery-svg {
    height: 72px;
    width: 36px;
  }
}
@media (max-width: 480px) {
  .image-gallery-left-nav .image-gallery-svg,
.image-gallery-right-nav .image-gallery-svg {
    height: 48px;
    width: 24px;
  }
}
.image-gallery-left-nav[disabled],
.image-gallery-right-nav[disabled] {
  cursor: disabled;
  opacity: 0.6;
  pointer-events: none;
}
.image-gallery-left-nav {
  left: 0;
}
.image-gallery-right-nav {
  right: 0;
}
.image-gallery {
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  position: relative;
}
.image-gallery.fullscreen-modal {
  background: #000;
  bottom: 0;
  height: 100%;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 5;
}
.image-gallery.fullscreen-modal .image-gallery-content {
  top: 50%;
  transform: translateY(-50%);
}
.image-gallery-content {
  position: relative;
  line-height: 0;
  top: 0;
}
.image-gallery-content.fullscreen {
  background: #000;
}
.image-gallery-content.fullscreen .image-gallery-slide .image-gallery-image {
  max-width: 100%;
}
.image-gallery-content .image-gallery-slide .image-gallery-image {
  max-height: calc(100vh - 80px);
  max-width: unset;
  object-fit: contain;
}
.image-gallery-content.left .image-gallery-slide .image-gallery-image, .image-gallery-content.right .image-gallery-slide .image-gallery-image {
  max-height: 100vh;
}
.image-gallery-slide-wrapper {
  position: relative;
}
.image-gallery-slide-wrapper.left, .image-gallery-slide-wrapper.right {
  display: inline-block;
  width: calc(100% - 110px);
}
@media (max-width: 768px) {
  .image-gallery-slide-wrapper.left, .image-gallery-slide-wrapper.right {
    width: calc(100% - 87px);
  }
}
.image-gallery-slide-wrapper.image-gallery-rtl {
  direction: rtl;
}
.image-gallery-slides {
  line-height: 0;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  text-align: center;
}
.image-gallery-slide {
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.image-gallery-slide.center {
  position: relative;
}
.image-gallery-slide .image-gallery-image {
  width: 100%;
  object-fit: contain;
}
.image-gallery-index {
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  line-height: 1;
  padding: 10px 20px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 4;
}
@media (max-width: 768px) {
  .image-gallery-index {
    font-size: 0.8em;
    padding: 5px 10px;
  }
}
.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__cta-button-border-radius: var(--str-chat__border-radius-xs);
  /* The text/icon color of the component */
  --str-chat__cta-button-color: var(--str-chat__on-primary-color);
  /* The background color of the component */
  --str-chat__cta-button-background-color: var(--str-chat__primary-color);
  /* Top border of the component */
  --str-chat__cta-button-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__cta-button-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__cta-button-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__cta-button-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__cta-button-box-shadow: none;
  /* The background color of the component in pressed state */
  --str-chat__cta-button-pressed-background-color: var(--str-chat__active-primary-color);
  /* The background color of the component in disabled state */
  --str-chat__cta-button-disabled-background-color: var(--str-chat__disabled-color);
  /* The text/icon color of the component in disabled state */
  --str-chat__cta-button-disabled-color: var(--str-chat__on-disabled-color);
}
.str-chat__cta-button {
  background: var(--str-chat__cta-button-background-color);
  color: var(--str-chat__cta-button-color);
  box-shadow: var(--str-chat__cta-button-box-shadow);
  border-radius: var(--str-chat__cta-button-border-radius);
  border-block-start: var(--str-chat__cta-button-border-block-start);
  border-block-end: var(--str-chat__cta-button-border-block-end);
  border-inline-start: var(--str-chat__cta-button-border-inline-start);
  border-inline-end: var(--str-chat__cta-button-border-inline-end);
  font: var(--str-chat__subtitle-text);
}
.str-chat__cta-button:active {
  background-color: var(--str-chat__cta-button-pressed-background-color);
}
.str-chat__cta-button:disabled {
  background-color: var(--str-chat__cta-button-disabled-background-color);
  color: var(--str-chat__cta-button-disabled-color);
}
.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__circle-fab-border-radius: var(--str-chat__border-radius-circle);
  /* The text/icon color of the component */
  --str-chat__circle-fab-color: var(--str-chat__primary-color);
  /* The background color of the component */
  --str-chat__circle-fab-background-color: var(--str-chat__secondary-background-color);
  /* The background color of the component in pressed state */
  --str-chat__circle-fab-pressed-background-color: var(--str-chat__surface-color);
  /* Box shadow applied to the component */
  --str-chat__circle-fab-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  /* Top border of the component */
  --str-chat__circle-fab-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__circle-fab-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__circle-fab-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__circle-fab-border-inline-end: none;
}
.str-chat__circle-fab {
  background: var(--str-chat__circle-fab-background-color);
  color: var(--str-chat__circle-fab-color);
  box-shadow: var(--str-chat__circle-fab-box-shadow);
  border-radius: var(--str-chat__circle-fab-border-radius);
  border-block-start: var(--str-chat__circle-fab-border-block-start);
  border-block-end: var(--str-chat__circle-fab-border-block-end);
  border-inline-start: var(--str-chat__circle-fab-border-inline-start);
  border-inline-end: var(--str-chat__circle-fab-border-inline-end);
}
.str-chat__circle-fab svg path {
  fill: var(--str-chat__circle-fab-color);
}
.str-chat__circle-fab:active {
  background-color: var(--str-chat__circle-fab-pressed-background-color);
}
.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__avatar-border-radius: var(--str-chat__border-radius-circle);
  /* The text/icon color of the component */
  --str-chat__avatar-color: var(--str-chat__on-primary-color);
  /* The background color of the component */
  --str-chat__avatar-background-color: var(--str-chat__primary-color);
  /* Top border of the component */
  --str-chat__avatar-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__avatar-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__avatar-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__avatar-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__avatar-box-shadow: none;
}
.str-chat__avatar .str-chat__avatar-image {
  background: var(--str-chat__avatar-background-color);
  color: var(--str-chat__avatar-color);
  box-shadow: var(--str-chat__avatar-box-shadow);
  border-radius: var(--str-chat__avatar-border-radius);
  border-block-start: var(--str-chat__avatar-border-block-start);
  border-block-end: var(--str-chat__avatar-border-block-end);
  border-inline-start: var(--str-chat__avatar-border-inline-start);
  border-inline-end: var(--str-chat__avatar-border-inline-end);
}
.str-chat__avatar .str-chat__avatar-fallback {
  background: var(--str-chat__avatar-background-color);
  color: var(--str-chat__avatar-color);
  box-shadow: var(--str-chat__avatar-box-shadow);
  border-radius: var(--str-chat__avatar-border-radius);
  border-block-start: var(--str-chat__avatar-border-block-start);
  border-block-end: var(--str-chat__avatar-border-block-end);
  border-inline-start: var(--str-chat__avatar-border-inline-start);
  border-inline-end: var(--str-chat__avatar-border-inline-end);
  text-transform: uppercase;
}
.str-chat__loading-channels-avatar {
  border-radius: var(--str-chat__avatar-border-radius);
}
.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__attachment-list-border-radius: 0;
  /* The text/icon color of the component */
  --str-chat__attachment-list-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__attachment-list-background-color: transparent;
  /* Top border of the component */
  --str-chat__attachment-list-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__attachment-list-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__attachment-list-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__attachment-list-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__attachment-list-box-shadow: none;
  /* The border radius used for the borders of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
  --str-chat__image-attachment-border-radius: calc(
    var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
  );
  /* The text/icon color of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
  --str-chat__image-attachment-color: var(--str-chat__text-color);
  /* The background color of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
  --str-chat__image-attachment-background-color: var(--str-chat__text-low-emphasis-color);
  /* Top border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
  --str-chat__image-attachment-border-block-start: none;
  /* Bottom border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
  --str-chat__image-attachment-border-block-end: none;
  /* Left (right in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
  --str-chat__image-attachment-border-inline-start: none;
  /* Right (left in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
  --str-chat__image-attachment-border-inline-end: none;
  /* Box shadow applied to image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
  --str-chat__image-attachment-box-shadow: none;
  /* The border radius used for the borders of image gallery attachments */
  --str-chat__image-gallery-attachment-border-radius: calc(
    var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
  );
  /* The text/icon color of image gallery attachments */
  --str-chat__image-gallery-attachment-color: var(--str-chat__text-color);
  /* The background color of image gallery attachments */
  --str-chat__image-gallery-attachment-background-color: transparent;
  /* Top border of image gallery attachments */
  --str-chat__image-gallery-attachment-border-block-start: none;
  /* Bottom border of image gallery attachments */
  --str-chat__image-gallery-attachment-border-block-end: none;
  /* Left (right in RTL layout) border of image gallery attachments */
  --str-chat__image-gallery-attachment-border-inline-start: none;
  /* Right (left in RTL layout) border of image gallery attachments */
  --str-chat__image-gallery-attachment-border-inline-end: none;
  /* Box shadow applied to image gallery attachments */
  --str-chat__image-gallery-attachment-box-shadow: none;
  /* Overlay color applied to image gallery attachments */
  --str-chat__image-gallery-attachment-overlay: var(--str-chat__secondary-overlay-color);
  /* Text colors used on overlay applied to image gallery attachments */
  --str-chat__image-gallery-attachment-overlay-text-color: var(
    --str-chat__secondary-overlay-text-color
  );
  /* The border radius used for the borders of card attachments */
  --str-chat__card-attachment-border-radius: 0;
  /* The text/icon color of card attachments */
  --str-chat__card-attachment-color: var(--str-chat__text-color);
  /* The text color of links inside card attachments */
  --str-chat__card-attachment-link-color: var(--str-chat__primary-color);
  /* The background color of card attachments */
  --str-chat__card-attachment-background-color: transparent;
  /* Top border of card attachments */
  --str-chat__card-attachment-border-block-start: none;
  /* Bottom border of card attachments */
  --str-chat__card-attachment-border-block-end: none;
  /* Left (right in RTL layout) border of card attachments */
  --str-chat__card-attachment-border-inline-start: none;
  /* Right (left in RTL layout) border of card attachments */
  --str-chat__card-attachment-border-inline-end: none;
  /* Box shadow applied to card attachments */
  --str-chat__card-attachment-box-shadow: none;
  /* The border radius used for the borders of file attachments */
  --str-chat__file-attachment-border-radius: calc(
    var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
  );
  /* The text/icon color of file attachments */
  --str-chat__file-attachment-color: var(--str-chat__text-color);
  /* The text/icon color of file attachments for low emphasis texts (for example file size) */
  --str-chat__file-attachment-secondary-color: var(--str-chat__text-low-emphasis-color);
  /* The background color of file attachments */
  --str-chat__file-attachment-background-color: var(--str-chat__secondary-background-color);
  /* Top border of file attachments */
  --str-chat__file-attachment-border-block-start: none;
  /* Bottom border of file attachments */
  --str-chat__file-attachment-border-block-end: none;
  /* Left (right in RTL layout) border of file attachments */
  --str-chat__file-attachment-border-inline-start: none;
  /* Right (left in RTL layout) border of file attachments */
  --str-chat__file-attachment-border-inline-end: none;
  /* Box shadow applied to file attachments */
  --str-chat__file-attachment-box-shadow: none;
  /* Border radius applied audio widget */
  --str-chat__audio-attachment-widget-border-radius: calc(
    var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
  );
  /* Text color used in audio widget */
  --str-chat__audio-attachment-widget-color: var(--str-chat__text-color);
  /* Border radius applied audio widget */
  --str-chat__audio-attachment-widget-secondary-color: var(--str-chat__text-low-emphasis-color);
  /* The text/icon color for low emphasis texts (for example file size) in audio widget */
  --str-chat__audio-attachment-widget-background-color: var(--str-chat__secondary-background-color);
  /* Top border of audio widget */
  --str-chat__audio-attachment-widget-border-block-start: none;
  /* Bottom border of audio widget */
  --str-chat__audio-attachment-widget-border-block-end: none;
  /* Left (right in RTL layout) border of audio widget */
  --str-chat__audio-attachment-widget-border-inline-start: none;
  /* Right (left in RTL layout) border of audio widget */
  --str-chat__audio-attachment-widget-border-inline-end: none;
  /* Box shadow applied to audio widget */
  --str-chat__audio-attachment-widget-box-shadow: none;
  /* Border radius applied to the play / pause button of audio widget */
  --str-chat__audio-attachment-controls-button-border-radius: var(--str-chat__border-radius-circle);
  /* Text color applied to audio widget's play / pause button */
  --str-chat__audio-attachment-controls-button-color: var(--str-chat__text-color);
  /* Background color applied to audio widget's play / pause button */
  --str-chat__audio-attachment-controls-button-background-color: var(
    --str-chat__secondary-background-color
  );
  /* Background color applied to audio widget's play / pause button when in pressed (active) state */
  --str-chat__audio-attachment-controls-button-pressed-background-color: var(
    --str-chat__surface-color
  );
  /* Top border of audio widget's play / pause button */
  --str-chat__audio-attachment-controls-button-border-block-start: none;
  /* Bottom border of audio widget's play / pause button */
  --str-chat__audio-attachment-controls-button-border-block-end: none;
  /* Left (right in RTL layout) border of audio widget's play / pause button */
  --str-chat__audio-attachment-controls-button-border-inline-start: none;
  /* Right (left in RTL layout) border of audio widget's play / pause button */
  --str-chat__audio-attachment-controls-button-border-inline-end: none;
  /* Box shadow applied to audio widget's play / pause button */
  --str-chat__audio-attachment-controls-button-box-shadow: var(--str-chat__circle-fab-box-shadow);
  /* The border radius used for attachment actions */
  --str-chat__attachment-actions-border-radius: 0;
  /* The text/icon color of attachment actions */
  --str-chat__attachment-actions-color: var(--str-chat__text-color);
  /* The background color of attachment actions */
  --str-chat__attachment-actions-background-color: transparent;
  /* Top border of attachment actions */
  --str-chat__attachment-actions-border-block-start: none;
  /* Bottom border of attachment actions */
  --str-chat__attachment-actions-border-block-end: none;
  /* Left (right in RTL layout) border of attachment actions */
  --str-chat__attachment-actions-border-inline-start: none;
  /* Right (left in RTL layout) border of attachment actions */
  --str-chat__attachment-actions-border-inline-end: none;
  /* Box shadow applied to attachment actions */
  --str-chat__attachment-actions-box-shadow: none;
  /* The border radius used for an attachment action */
  --str-chat__attachment-action-border-radius: 0;
  /* The text/icon color of an attachment action */
  --str-chat__attachment-action-color: var(--str-chat__text-low-emphasis-color);
  /* The background color of an attachment action */
  --str-chat__attachment-action-background-color: var(--str-chat__secondary-background-color);
  /* Top border of an attachment action */
  --str-chat__attachment-action-border-block-start: var(--str-chat__surface-color) 1px solid;
  /* Bottom border of an attachment action */
  --str-chat__attachment-action-border-block-end: var(--str-chat__surface-color) 1px solid;
  /* Left (right in RTL layout) border of an attachment action */
  --str-chat__attachment-action-border-inline-start: var(--str-chat__surface-color) 1px solid;
  /* Right (left in RTL layout) border of an attachment action */
  --str-chat__attachment-action-border-inline-end: var(--str-chat__surface-color) 1px solid;
  /* Box shadow applied to an attachment action */
  --str-chat__attachment-action-box-shadow: none;
  /* The text/icon color of an attachment action while in pressed state */
  --str-chat__attachment-action-active-color: var(--str-chat__primary-color);
}
.str-chat__attachment-list {
  background: var(--str-chat__attachment-list-background-color);
  color: var(--str-chat__attachment-list-color);
  box-shadow: var(--str-chat__attachment-list-box-shadow);
  border-radius: var(--str-chat__attachment-list-border-radius);
  border-block-start: var(--str-chat__attachment-list-border-block-start);
  border-block-end: var(--str-chat__attachment-list-border-block-end);
  border-inline-start: var(--str-chat__attachment-list-border-inline-start);
  border-inline-end: var(--str-chat__attachment-list-border-inline-end);
}
.str-chat__attachment-list .str-chat__message-attachment--image,
.str-chat__attachment-list .str-chat__message-attachment-card--header,
.str-chat__attachment-list .str-chat__message-attachment--video {
  background: var(--str-chat__image-attachment-background-color);
  color: var(--str-chat__image-attachment-color);
  box-shadow: var(--str-chat__image-attachment-box-shadow);
  border-radius: var(--str-chat__image-attachment-border-radius);
  border-block-start: var(--str-chat__image-attachment-border-block-start);
  border-block-end: var(--str-chat__image-attachment-border-block-end);
  border-inline-start: var(--str-chat__image-attachment-border-inline-start);
  border-inline-end: var(--str-chat__image-attachment-border-inline-end);
}
.str-chat__attachment-list .str-chat__gallery {
  background: var(--str-chat__image-gallery-attachment-background-color);
  color: var(--str-chat__image-gallery-attachment-color);
  box-shadow: var(--str-chat__image-gallery-attachment-box-shadow);
  border-radius: var(--str-chat__image-gallery-attachment-border-radius);
  border-block-start: var(--str-chat__image-gallery-attachment-border-block-start);
  border-block-end: var(--str-chat__image-gallery-attachment-border-block-end);
  border-inline-start: var(--str-chat__image-gallery-attachment-border-inline-start);
  border-inline-end: var(--str-chat__image-gallery-attachment-border-inline-end);
}
.str-chat__attachment-list .str-chat__gallery .str-chat__gallery-image {
  background-color: transparent;
  border: 0;
}
.str-chat__attachment-list .str-chat__gallery .str-chat__gallery-placeholder {
  color: var(--str-chat__image-gallery-attachment-overlay-text-color);
  display: flex;
  border: none;
  font: var(--str-chat__headline2-text);
}
.str-chat__attachment-list .str-chat__gallery .str-chat__gallery-placeholder::after {
  background-color: var(--str-chat__image-gallery-attachment-overlay);
}
.str-chat__attachment-list .str-chat__message-attachment--svg-image {
  background-image: repeating-conic-gradient(#d4d5d7 0% 25%, #f4f4f4 0% 50%);
  background-size: 24px 24px;
}
.str-chat__attachment-list .str-chat__message-attachment-file--item {
  background: var(--str-chat__file-attachment-background-color);
  color: var(--str-chat__file-attachment-color);
  box-shadow: var(--str-chat__file-attachment-box-shadow);
  border-radius: var(--str-chat__file-attachment-border-radius);
  border-block-start: var(--str-chat__file-attachment-border-block-start);
  border-block-end: var(--str-chat__file-attachment-border-block-end);
  border-inline-start: var(--str-chat__file-attachment-border-inline-start);
  border-inline-end: var(--str-chat__file-attachment-border-inline-end);
}
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-name,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--title,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-name,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--title {
  font: var(--str-chat__subtitle-medium-text);
}
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-size,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-size {
  color: var(--str-chat__file-attachment-secondary-color);
  font: var(--str-chat__body-text);
}
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-download-icon svg path,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-download-icon svg path {
  fill: var(--str-chat__file-attachment-color);
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget {
  background: var(--str-chat__audio-attachment-widget-background-color);
  color: var(--str-chat__audio-attachment-widget-color);
  box-shadow: var(--str-chat__audio-attachment-widget-box-shadow);
  border-radius: var(--str-chat__audio-attachment-widget-border-radius);
  border-block-start: var(--str-chat__audio-attachment-widget-border-block-start);
  border-block-end: var(--str-chat__audio-attachment-widget-border-block-end);
  border-inline-start: var(--str-chat__audio-attachment-widget-border-inline-start);
  border-inline-end: var(--str-chat__audio-attachment-widget-border-inline-end);
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget--progress-track {
  background-color: var(--str-chat__disabled-color);
  border-radius: calc(var(--str-chat__spacing-px) * 5);
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget--progress-track .str-chat__message-attachment-audio-widget--progress-indicator {
  background-color: var(--str-chat__primary-color);
  border-radius: inherit;
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget--play-button {
  background: var(--str-chat__audio-attachment-controls-button-background-color);
  color: var(--str-chat__audio-attachment-controls-button-color);
  box-shadow: var(--str-chat__audio-attachment-controls-button-box-shadow);
  border-radius: var(--str-chat__audio-attachment-controls-button-border-radius);
  border-block-start: var(--str-chat__audio-attachment-controls-button-border-block-start);
  border-block-end: var(--str-chat__audio-attachment-controls-button-border-block-end);
  border-inline-start: var(--str-chat__audio-attachment-controls-button-border-inline-start);
  border-inline-end: var(--str-chat__audio-attachment-controls-button-border-inline-end);
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget--play-button svg path {
  fill: var(--str-chat__audio-attachment-controls-button-color);
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget--play-button:active {
  background-color: var(--str-chat__audio-attachment-controls-button-pressed-background-color);
}
.str-chat__attachment-list .str-chat__message-attachment--card {
  background: var(--str-chat__card-attachment-background-color);
  color: var(--str-chat__card-attachment-color);
  box-shadow: var(--str-chat__card-attachment-box-shadow);
  border-radius: var(--str-chat__card-attachment-border-radius);
  border-block-start: var(--str-chat__card-attachment-border-block-start);
  border-block-end: var(--str-chat__card-attachment-border-block-end);
  border-inline-start: var(--str-chat__card-attachment-border-inline-start);
  border-inline-end: var(--str-chat__card-attachment-border-inline-end);
  font: var(--str-chat__body-text);
}
.str-chat__attachment-list .str-chat__message-attachment--card .str-chat__message-attachment-card--source-link {
  font: var(--str-chat__body-medium-text);
}
.str-chat__attachment-list .str-chat__message-attachment--card .str-chat__message-attachment-card--title {
  font: var(--str-chat__body-medium-text);
}
.str-chat__attachment-list .str-chat__message-attachment-card--audio img {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.str-chat__attachment-list .str-chat__message-attachment-card--audio .str-chat__message-attachment-card--header .str-chat__message-attachment-card--source-link {
  background-color: var(--str-chat__audio-attachment-widget-background-color);
}
.str-chat__attachment-list .str-chat__message-attachment-card--audio .str-chat__message-attachment-card-audio-widget {
  background-color: var(--str-chat__audio-attachment-widget-background-color);
  border-radius: 0 0 calc(var(--str-chat__spacing-px) * 14) calc(var(--str-chat__spacing-px) * 14);
}
.str-chat__attachment-list .str-chat__message-attachment-card--audio .str-chat__message-attachment-card-audio-widget .str-chat__message-attachment-audio-widget--title {
  color: var(--str-chat__text-color);
  font: var(--str-chat__body-medium-text);
}
.str-chat__attachment-list .str-chat__message-attachment-actions {
  background: var(--str-chat__attachment-actions-background-color);
  color: var(--str-chat__attachment-actions-color);
  box-shadow: var(--str-chat__attachment-actions-box-shadow);
  border-radius: var(--str-chat__attachment-actions-border-radius);
  border-block-start: var(--str-chat__attachment-actions-border-block-start);
  border-block-end: var(--str-chat__attachment-actions-border-block-end);
  border-inline-start: var(--str-chat__attachment-actions-border-inline-start);
  border-inline-end: var(--str-chat__attachment-actions-border-inline-end);
}
.str-chat__attachment-list .str-chat__message-attachment-actions .str-chat__message-attachment-actions-button {
  background: var(--str-chat__attachment-action-background-color);
  color: var(--str-chat__attachment-action-color);
  box-shadow: var(--str-chat__attachment-action-box-shadow);
  border-radius: var(--str-chat__attachment-action-border-radius);
  border-block-start: var(--str-chat__attachment-action-border-block-start);
  border-block-end: var(--str-chat__attachment-action-border-block-end);
  border-inline-start: var(--str-chat__attachment-action-border-inline-start);
  border-inline-end: var(--str-chat__attachment-action-border-inline-end);
  font: var(--str-chat__subtitle-medium-text);
  border-collapse: collapse;
}
.str-chat__attachment-list .str-chat__message-attachment-actions .str-chat__message-attachment-actions-button:active {
  color: var(--str-chat__attachment-action-active-color);
}
.str-chat__attachment-list .str-chat__message-attachment-actions .str-chat__message-attachment-actions-button:not(:last-of-type) {
  border-inline-end: none;
}
.str-chat__attachment-list .str-chat__message-attachment-with-actions.str-chat__message-attachment--giphy .str-chat__message-attachment-card--header {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.str-chat__message-attachment-card.str-chat__message-attachment-card--audio .str-chat__message-attachment-card--header {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__attachment-preview-list-border-radius: var(--str-chat__border-radius-sm);
  /* The text/icon color of the component */
  --str-chat__attachment-preview-list-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__attachment-preview-list-background-color: transparent;
  /* Top border of the component */
  --str-chat__attachment-preview-list-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__attachment-preview-list-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__attachment-preview-list-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__attachment-preview-list-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__attachment-preview-list-box-shadow: none;
  /* Background color of the preview delete icon */
  --str-chat__attachment-preview-close-icon-background: var(--str-chat__secondary-overlay-color);
  /* Foreground color of the preview delete icon */
  --str-chat__attachment-preview-close-icon-color: var(--str-chat__secondary-overlay-text-color);
  /* Color of the upload retry icon */
  --str-chat__attachment-preview-retry-icon-color: var(--str-chat__primary-color);
  /* Color of the preview download icon */
  --str-chat__attachment-preview-download-icon-color: var(--str-chat__text-low-emphasis-color);
  /* Overlay color applied to attachment previews during upload and if an error occured during upload */
  --str-chat__attachment-preview-overlay-color: var(--str-chat__overlay-color);
  /* The border radius used for the borders of the image preview */
  --str-chat__attachment-preview-image-border-radius: var(--str-chat__border-radius-sm);
  /* The text/icon color of the image preview */
  --str-chat__attachment-preview-image-color: var(--str-chat__text-color);
  /* The background color of the image preview */
  --str-chat__attachment-preview-image-background-color: transparent;
  /* Top border of the image preview */
  --str-chat__attachment-preview-image-border-block-start: none;
  /* Bottom border of the image preview */
  --str-chat__attachment-preview-image-border-block-end: none;
  /* Left (right in RTL layout) border of the image preview */
  --str-chat__attachment-preview-image-border-inline-start: none;
  /* Right (left in RTL layout) border of the image preview */
  --str-chat__attachment-preview-image-border-inline-end: none;
  /* Box shadow applied to the image preview */
  --str-chat__attachment-preview-image-box-shadow: none;
  /* The border radius used for the borders of the file preview */
  --str-chat__attachment-preview-file-border-radius: var(--str-chat__border-radius-md);
  /* The text/icon color of the file preview */
  --str-chat__attachment-preview-file-color: var(--str-chat__text-color);
  /* The background color of the file preview */
  --str-chat__attachment-preview-file-background-color: transparent;
  /* Top border of the file preview */
  --str-chat__attachment-preview-file-border-block-start: 1px solid var(--str-chat__surface-color);
  /* Bottom border of the file preview */
  --str-chat__attachment-preview-file-border-block-end: 1px solid var(--str-chat__surface-color);
  /* Left (right in RTL layout) border of the file preview */
  --str-chat__attachment-preview-file-border-inline-start: 1px solid var(--str-chat__surface-color);
  /* Right (left in RTL layout) border of the file preview */
  --str-chat__attachment-preview-file-border-inline-end: 1px solid var(--str-chat__surface-color);
  /* Box shadow applied to the file preview */
  --str-chat__attachment-preview-file-box-shadow: none;
}
.str-chat__attachment-preview-list {
  background: var(--str-chat__attachment-preview-list-background-color);
  color: var(--str-chat__attachment-preview-list-color);
  box-shadow: var(--str-chat__attachment-preview-list-box-shadow);
  border-radius: var(--str-chat__attachment-preview-list-border-radius);
  border-block-start: var(--str-chat__attachment-preview-list-border-block-start);
  border-block-end: var(--str-chat__attachment-preview-list-border-block-end);
  border-inline-start: var(--str-chat__attachment-preview-list-border-inline-start);
  border-inline-end: var(--str-chat__attachment-preview-list-border-inline-end);
}
.str-chat__attachment-preview-list .str-chat__attachment-list-scroll-container {
  border-radius: inherit;
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-image {
  background: var(--str-chat__attachment-preview-image-background-color);
  color: var(--str-chat__attachment-preview-image-color);
  box-shadow: var(--str-chat__attachment-preview-image-box-shadow);
  border-radius: var(--str-chat__attachment-preview-image-border-radius);
  border-block-start: var(--str-chat__attachment-preview-image-border-block-start);
  border-block-end: var(--str-chat__attachment-preview-image-border-block-end);
  border-inline-start: var(--str-chat__attachment-preview-image-border-inline-start);
  border-inline-end: var(--str-chat__attachment-preview-image-border-inline-end);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-image .str-chat__attachment-preview-thumbnail,
.str-chat__attachment-preview-list .str-chat__attachment-preview-image .str-chat__attachment-preview-image-loading {
  border-radius: var(--str-chat__attachment-preview-image-border-radius);
  background-color: var(--str-chat__attachment-preview-overlay-color);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-file {
  background: var(--str-chat__attachment-preview-file-background-color);
  color: var(--str-chat__attachment-preview-file-color);
  box-shadow: var(--str-chat__attachment-preview-file-box-shadow);
  border-radius: var(--str-chat__attachment-preview-file-border-radius);
  border-block-start: var(--str-chat__attachment-preview-file-border-block-start);
  border-block-end: var(--str-chat__attachment-preview-file-border-block-end);
  border-inline-start: var(--str-chat__attachment-preview-file-border-inline-start);
  border-inline-end: var(--str-chat__attachment-preview-file-border-inline-end);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-name {
  font: var(--str-chat__subtitle-medium-text);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-download svg path {
  fill: var(--str-chat__attachment-preview-download-icon-color);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-delete svg {
  background-color: var(--str-chat__attachment-preview-close-icon-background);
  border-radius: 999px;
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-delete svg path {
  fill: var(--str-chat__attachment-preview-close-icon-color);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-error {
  background-color: var(--str-chat__attachment-preview-overlay-color);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-error svg path {
  fill: var(--str-chat__attachment-preview-retry-icon-color);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-error.str-chat__attachment-preview-error-image {
  border-radius: var(--str-chat__attachment-preview-image-border-radius);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-error.str-chat__attachment-preview-error-file {
  border-radius: var(--str-chat__attachment-preview-file-border-radius);
}
.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__autocomplete-menu-border-radius: var(--str-chat__border-radius-xs);
  /* The text/icon color of the component */
  --str-chat__autocomplete-menu-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__autocomplete-menu-background-color: var(--str-chat__secondary-background-color);
  /* Top border of the component */
  --str-chat__autocomplete-menu-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__autocomplete-menu-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__autocomplete-menu-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__autocomplete-menu-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__autocomplete-menu-box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
  /* The background color of a selected autocomplete item */
  --str-chat__autocomplete-active-background-color: var(--str-chat__surface-color);
  /* The border radius used for the borders of the component (ReactSDK) */
  --str-chat__suggestion-list-container-border-radius: var(--str-chat__border-radius-xs);
  /* The text/icon color of the component (ReactSDK) */
  --str-chat__suggestion-list-container-color: var(--str-chat__text-color);
  /* The background color of the component (ReactSDK) */
  --str-chat__suggestion-list-container-background-color: var(
    --str-chat__secondary-background-color
  );
  /* Top border of the component (ReactSDK) */
  --str-chat__suggestion-list-container-border-block-start: none;
  /* Bottom border of the component (ReactSDK) */
  --str-chat__suggestion-list-container-border-block-end: none;
  /* Left (right in RTL layout) border of the component (ReactSDK) */
  --str-chat__suggestion-list-container-border-inline-start: none;
  /* Right (left in RTL layout) border of the component (ReactSDK) */
  --str-chat__suggestion-list-container-border-inline-end: none;
  /* Box shadow applied to the component (ReactSDK) */
  --str-chat__suggestion-list-container-box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
  /* The background color of a selected autocomplete item (ReactSDK) */
  --str-chat__suggestion-list-item--selected-background-color: var(--str-chat__surface-color);
  /* The border radius used for the borders of the slash command item in the autocomplete list */
  --str-chat__slash-command-border-radius: 0;
  /* The text/icon color of the slash command item in the autocomplete list */
  --str-chat__slash-command-color: var(--str-chat__text-color);
  /* The background color of the slash command item in the autocomplete list */
  --str-chat__slash-command-background-color: transparent;
  /* Top border of the slash command item in the autocomplete list */
  --str-chat__slash-command-border-block-start: none;
  /* Bottom border of the slash command item in the autocomplete list */
  --str-chat__slash-command-border-block-end: none;
  /* Left (right in RTL layout) border of the slash command item in the autocomplete list */
  --str-chat__slash-command-border-inline-start: none;
  /* Right (left in RTL layout) border of the slash command item in the autocomplete list */
  --str-chat__slash-command-border-inline-end: none;
  /* Box shadow of the slash command item in the autocomplete list */
  --str-chat__slash-command-box-shadow: none;
  /* Text color of the arguments of a slash command item in the autocomplete list */
  --str-chat__slash-command-args-color: var(--str-chat__text-low-emphasis-color);
  /* The border radius used for the borders of the user mention item in the autocomplete list */
  --str-chat__mention-list-user-item-border-radius: 0;
  /* The text/icon color of the user mention item in the autocomplete list */
  --str-chat__mention-list-user-item-color: var(--str-chat__text-color);
  /* The background color of the user mention item in the autocomplete list */
  --str-chat__mention-list-user-item-background-color: transparent;
  /* Top border of the user mention item in the autocomplete list */
  --str-chat__mention-list-user-item-border-block-start: none;
  /* Bottom border of the user mention item in the autocomplete list */
  --str-chat__mention-list-user-item-border-block-end: none;
  /* Left (right in RTL layout) border of the user mention item in the autocomplete list */
  --str-chat__mention-list-user-item-border-inline-start: none;
  /* Right (left in RTL layout) border of the user mention item in the autocomplete list */
  --str-chat__mention-list-user-item-border-inline-end: none;
  /* Box shadow of the user mention item in the autocomplete list */
  --str-chat__mention-list-user-item-box-shadow: none;
  /* The text color of the at sign inside a user mention itome in the autocomplete list */
  --str-chat__mention-list-user-item-at-sign-color: var(--str-chat__primary-color);
  /* The font used in the emoji suggestion item in the autocomplete list */
  --str-chat__mention-list-emoji-item-font-family: var(--str-chat__font-family);
  /* The border radius used for the borders of the emoji suggestion item in the autocomplete list */
  --str-chat__mention-list-emoji-item-border-radius: 0;
  /* The text/icon color of the emoji suggestion item in the autocomplete list */
  --str-chat__mention-list-emoji-item-color: var(--str-chat__text-color);
  /* The background color of the emoji suggestion item in the autocomplete list */
  --str-chat__mention-list-emoji-item-background-color: transparent;
  /* Top border of the emoji suggestion item in the autocomplete list */
  --str-chat__mention-list-emoji-item-border-block-start: none;
  /* Bottom border of the emoji suggestion item in the autocomplete list */
  --str-chat__mention-list-emoji-item-border-block-end: none;
  /* Left (right in RTL layout) border of the emoji suggestion item in the autocomplete list */
  --str-chat__mention-list-emoji-item-border-inline-start: none;
  /* Right (left in RTL layout) border of the emoji suggestion item in the autocomplete list */
  --str-chat__mention-list-emoji-item-border-inline-end: none;
  /* Box shadow of the emoji suggestion item in the autocomplete list */
  --str-chat__mention-list-emoji-item-box-shadow: none;
}
.mention-menu {
  background: var(--str-chat__autocomplete-menu-background-color) !important;
  color: var(--str-chat__autocomplete-menu-color) !important;
  box-shadow: var(--str-chat__autocomplete-menu-box-shadow) !important;
  border-radius: var(--str-chat__autocomplete-menu-border-radius) !important;
  border-block-start: var(--str-chat__autocomplete-menu-border-block-start) !important;
  border-block-end: var(--str-chat__autocomplete-menu-border-block-end) !important;
  border-inline-start: var(--str-chat__autocomplete-menu-border-inline-start) !important;
  border-inline-end: var(--str-chat__autocomplete-menu-border-inline-end) !important;
}
.mention-menu .active.mention-active > a {
  background-color: var(--str-chat__autocomplete-active-background-color) !important;
}
.mention-menu .mention-item {
  color: var(--str-chat__autocomplete-menu-color) !important;
  background-color: transparent !important;
}
.str-chat__slash-command {
  background: var(--str-chat__slash-command-background-color);
  color: var(--str-chat__slash-command-color);
  box-shadow: var(--str-chat__slash-command-box-shadow);
  border-radius: var(--str-chat__slash-command-border-radius);
  border-block-start: var(--str-chat__slash-command-border-block-start);
  border-block-end: var(--str-chat__slash-command-border-block-end);
  border-inline-start: var(--str-chat__slash-command-border-inline-start);
  border-inline-end: var(--str-chat__slash-command-border-inline-end);
}
.str-chat__slash-command .str-chat__slash-command-header .str-chat__slash-command-name {
  text-transform: capitalize;
  font: var(--str-chat__subtitle2-text);
}
.str-chat__slash-command .str-chat__slash-command-header .str-chat__slash-command-args {
  color: var(--str-chat__slash-command-args-color);
  font: var(--str-chat__subtitle-text);
}
.str-chat__user-item {
  background: var(--str-chat__mention-list-user-item-background-color);
  color: var(--str-chat__mention-list-user-item-color);
  box-shadow: var(--str-chat__mention-list-user-item-box-shadow);
  border-radius: var(--str-chat__mention-list-user-item-border-radius);
  border-block-start: var(--str-chat__mention-list-user-item-border-block-start);
  border-block-end: var(--str-chat__mention-list-user-item-border-block-end);
  border-inline-start: var(--str-chat__mention-list-user-item-border-inline-start);
  border-inline-end: var(--str-chat__mention-list-user-item-border-inline-end);
}
.str-chat__user-item .str-chat__user-item--name {
  font: var(--str-chat__subtitle-text);
}
.str-chat__user-item .str-chat__user-item-at {
  font: var(--str-chat__subtitle2-text);
  color: var(--str-chat__mention-list-user-item-at-sign-color);
}
.str-chat__emoji-item {
  background: var(--str-chat__mention-list-emoji-item-background-color);
  color: var(--str-chat__mention-list-emoji-item-color);
  box-shadow: var(--str-chat__mention-list-emoji-item-box-shadow);
  border-radius: var(--str-chat__mention-list-emoji-item-border-radius);
  border-block-start: var(--str-chat__mention-list-emoji-item-border-block-start);
  border-block-end: var(--str-chat__mention-list-emoji-item-border-block-end);
  border-inline-start: var(--str-chat__mention-list-emoji-item-border-inline-start);
  border-inline-end: var(--str-chat__mention-list-emoji-item-border-inline-end);
}
.str-chat__emoji-item .str-chat__emoji-item--name {
  font: var(--str-chat__subtitle-text);
}
.str-chat__suggestion-list-container {
  background: var(--str-chat__suggestion-list-container-background-color);
  color: var(--str-chat__suggestion-list-container-color);
  box-shadow: var(--str-chat__suggestion-list-container-box-shadow);
  border-radius: var(--str-chat__suggestion-list-container-border-radius);
  border-block-start: var(--str-chat__suggestion-list-container-border-block-start);
  border-block-end: var(--str-chat__suggestion-list-container-border-block-end);
  border-inline-start: var(--str-chat__suggestion-list-container-border-inline-start);
  border-inline-end: var(--str-chat__suggestion-list-container-border-inline-end);
}
.str-chat__suggestion-list-container .str-chat__suggestion-list .str-chat__suggestion-list-item > a {
  text-decoration: none;
}
.str-chat__suggestion-list-container .str-chat__suggestion-list .str-chat__suggestion-item--selected {
  background-color: var(--str-chat__suggestion-list-item--selected-background-color);
}
.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__channel-border-radius: 0;
  /* The text/icon color of the component */
  --str-chat__channel-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__channel-background-color: var(--str-chat__background-color);
  /* Box shadow applied to the component */
  --str-chat__channel-box-shadow: none;
  /* Top border of the component */
  --str-chat__channel-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__channel-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__channel-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__channel-border-inline-end: none;
  /* The icon color used when no channel is selected */
  --str-chat__channel-empty-indicator-color: var(--str-chat__disabled-color);
  /* The text color used when no channel is selected */
  --str-chat__channel-empty-color: var(--str-chat__text-low-emphasis-color);
  /* The color of the loading indicator */
  --str-chat__channel-loading-state-color: var(--str-chat__disabled-color);
}
.str-chat__channel {
  background: var(--str-chat__channel-background-color);
  color: var(--str-chat__channel-color);
  box-shadow: var(--str-chat__channel-box-shadow);
  border-radius: var(--str-chat__channel-border-radius);
  border-block-start: var(--str-chat__channel-border-block-start);
  border-block-end: var(--str-chat__channel-border-block-end);
  border-inline-start: var(--str-chat__channel-border-inline-start);
  border-inline-end: var(--str-chat__channel-border-inline-end);
}
.str-chat__empty-channel {
  background: var(--str-chat__channel-background-color);
  color: var(--str-chat__channel-color);
  box-shadow: var(--str-chat__channel-box-shadow);
  border-radius: var(--str-chat__channel-border-radius);
  border-block-start: var(--str-chat__channel-border-block-start);
  border-block-end: var(--str-chat__channel-border-block-end);
  border-inline-start: var(--str-chat__channel-border-inline-start);
  border-inline-end: var(--str-chat__channel-border-inline-end);
  font: var(--str-chat__headline-text);
  text-align: center;
}
.str-chat__empty-channel svg path {
  fill: var(--str-chat__channel-empty-indicator-color);
}
.str-chat__empty-channel .str-chat__empty-channel-text {
  color: var(--str-chat__channel-empty-color);
}
.str-chat__loading-channel {
  animation: pulsate 1s linear 0s infinite alternate;
}
.str-chat__loading-channel:nth-of-type(2) {
  animation: pulsate 1s linear 0.3334s infinite alternate;
}
.str-chat__loading-channel:last-of-type {
  animation: pulsate 1s linear 0.6667s infinite alternate;
}
@keyframes pulsate {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
.str-chat__loading-channel .str-chat__loading-channel-header {
  background-color: var(--str-chat__channel-header-background-color);
}
.str-chat__loading-channel .str-chat__loading-channel-header .str-chat__loading-channel-header-avatar {
  background-image: linear-gradient(-90deg, var(--str-chat__channel-loading-state-color) 0%, var(--str-chat__channel-loading-state-color) 100%);
  border-radius: var(--str-chat__avatar-border-radius);
}
.str-chat__loading-channel .str-chat__loading-channel-header .str-chat__loading-channel-header-name,
.str-chat__loading-channel .str-chat__loading-channel-header .str-chat__loading-channel-header-info {
  background-image: linear-gradient(-90deg, var(--str-chat__channel-loading-state-color) 0%, var(--str-chat__channel-loading-state-color) 100%);
  border-radius: var(--str-chat__border-radius-xs);
}
.str-chat__loading-channel .str-chat__loading-channel-message-list {
  background-color: var(--str-chat__message-list-background-color);
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message-avatar {
  background-image: linear-gradient(-90deg, var(--str-chat__channel-loading-state-color) 0%, var(--str-chat__channel-loading-state-color) 100%);
  border-radius: var(--str-chat__avatar-border-radius);
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message-sender,
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message-text,
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message-date {
  background-image: linear-gradient(-90deg, var(--str-chat__channel-loading-state-color) 0%, var(--str-chat__channel-loading-state-color) 100%);
  border-radius: var(--str-chat__message-bubble-border-radius);
}
.str-chat__loading-channel .str-chat__loading-channel-message-input-row .str-chat__loading-channel-message-input,
.str-chat__loading-channel .str-chat__loading-channel-message-input-row .str-chat__loading-channel-message-send {
  background-image: linear-gradient(-90deg, var(--str-chat__channel-loading-state-color) 0%, var(--str-chat__channel-loading-state-color) 100%);
}
.str-chat__loading-channel .str-chat__loading-channel-message-input-row .str-chat__loading-channel-message-input {
  border-radius: var(--str-chat__message-textarea-border-radius);
}
.str-chat__loading-channel .str-chat__loading-channel-message-input-row .str-chat__loading-channel-message-send {
  border-radius: var(--str-chat__message-send-border-radius);
}
.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__channel-header-border-radius: 0;
  /* The text/icon color of the component */
  --str-chat__channel-header-color: 0;
  /* The background color of the component */
  --str-chat__channel-header-background-color: var(--str-chat__secondary-background-color);
  /* Top border of the component */
  --str-chat__channel-header-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__channel-header-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__channel-header-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__channel-header-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__channel-header-box-shadow: none;
  /* The text/icon color used to display member information about the channel */
  --str-chat__channel-header-info-color: var(--str-chat__text-low-emphasis-color);
}
.str-chat__channel-header {
  background: var(--str-chat__channel-header-background-color);
  color: var(--str-chat__channel-header-color);
  box-shadow: var(--str-chat__channel-header-box-shadow);
  border-radius: var(--str-chat__channel-header-border-radius);
  border-block-start: var(--str-chat__channel-header-border-block-start);
  border-block-end: var(--str-chat__channel-header-border-block-end);
  border-inline-start: var(--str-chat__channel-header-border-inline-start);
  border-inline-end: var(--str-chat__channel-header-border-inline-end);
}
.str-chat__channel-header .str-chat__channel-header-title {
  font: var(--str-chat__subtitle-medium-text);
}
.str-chat__channel-header .str-chat__channel-header-info {
  font: var(--str-chat__body-text);
  color: var(--str-chat__channel-header-info-color);
}
.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__channel-list-border-radius: 0;
  /* The text/icon color of the component */
  --str-chat__channel-list-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__channel-list-background-color: var(--str-chat__secondary-background-color);
  /* Box shadow applied to the component */
  --str-chat__channel-list-box-shadow: none;
  /* Top border of the component */
  --str-chat__channel-list-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__channel-list-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__channel-list-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__channel-list-border-inline-end: 1px solid var(--str-chat__surface-color);
  /* The border radius used for the borders of the load more button */
  --str-chat__channel-list-load-more-border-radius: var(--str-chat__cta-button-border-radius);
  /* The text/icon color of the load more button */
  --str-chat__channel-list-load-more-color: var(--str-chat__cta-button-color);
  /* The background color of the load more button */
  --str-chat__channel-list-load-more-background-color: var(--str-chat__cta-button-background-color);
  /* Box shadow applied to the load more button */
  --str-chat__channel-list-load-more-box-shadow: var(--str-chat__cta-button-box-shadow);
  /* Top border of the load more button */
  --str-chat__channel-list-load-more-border-block-start: var(
    --str-chat__cta-button-border-block-start
  );
  /* Bottom border of the load more button */
  --str-chat__channel-list-load-more-border-block-end: var(--str-chat__cta-button-border-block-end);
  /* Left (right in RTL layout) border of the load more button */
  --str-chat__channel-list-load-more-border-inline-start: var(
    --str-chat__cta-button-border-inline-start
  );
  /* Right (left in RTL layout) border of the load more button */
  --str-chat__channel-list-load-more-border-inline-end: var(
    --str-chat__cta-button-border-inline-end
  );
  /* The background color of the load more button in pressed state */
  --str-chat__channel-list-load-more-pressed-background-color: var(
    --str-chat__cta-button-pressed-background-color
  );
  /* The background color of the load more button in disabled state */
  --str-chat__channel-list-load-more-disabled-background-color: var(
    --str-chat__cta-button-disabled-background-color
  );
  /* The text/icon color of the load more button in disabled state */
  --str-chat__channel-list-load-more-disabled-color: var(--str-chat__cta-button-disabled-color);
  /* The icon color for the empty list state */
  --str-chat__channel-list-empty-indicator-color: var(--str-chat__disabled-color);
}
.str-chat__channel-list {
  background: var(--str-chat__channel-list-background-color);
  color: var(--str-chat__channel-list-color);
  box-shadow: var(--str-chat__channel-list-box-shadow);
  border-radius: var(--str-chat__channel-list-border-radius);
  border-block-start: var(--str-chat__channel-list-border-block-start);
  border-block-end: var(--str-chat__channel-list-border-block-end);
  border-inline-start: var(--str-chat__channel-list-border-inline-start);
  border-inline-end: var(--str-chat__channel-list-border-inline-end);
}
.str-chat__channel-list .str-chat__load-more-button__button {
  background: var(--str-chat__channel-list-load-more-background-color);
  color: var(--str-chat__channel-list-load-more-color);
  box-shadow: var(--str-chat__channel-list-load-more-box-shadow);
  border-radius: var(--str-chat__channel-list-load-more-border-radius);
  border-block-start: var(--str-chat__channel-list-load-more-border-block-start);
  border-block-end: var(--str-chat__channel-list-load-more-border-block-end);
  border-inline-start: var(--str-chat__channel-list-load-more-border-inline-start);
  border-inline-end: var(--str-chat__channel-list-load-more-border-inline-end);
  width: 80%;
}
.str-chat__channel-list .str-chat__load-more-button__button:active {
  background-color: var(--str-chat__channel-list-load-more-pressed-background-color);
}
.str-chat__channel-list .str-chat__load-more-button__button:disabled {
  background-color: var(--str-chat__channel-list-load-more-disabled-background-color);
  color: var(--str-chat__channel-list-load-more-disabled-color);
}
.str-chat__channel-list .str-chat__channel-list-empty {
  font: var(--str-chat__headline-text);
  text-align: center;
}
.str-chat__channel-list .str-chat__channel-list-empty svg path {
  fill: var(--str-chat__channel-list-empty-indicator-color);
}
.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__channel-preview-border-radius: 0;
  /* The text/icon color of the component */
  --str-chat__channel-preview-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__channel-preview-background-color: transparent;
  /* Top border of the component */
  --str-chat__channel-preview-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__channel-preview-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__channel-preview-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__channel-preview-border-inline-end: none;
  /* Background color used for selected channel preview components */
  --str-chat__channel-preview-active-background-color: var(--str-chat__surface-color);
  /* Background color used for the hover state */
  --str-chat__channel-preview-hover-background-color: var(--str-chat__secondary-surface-color);
  /* Text color of the latest message when preview is not hovered or selected */
  --str-chat__channel-preview-latest-message-secondary-color: var(
    --str-chat__text-low-emphasis-color
  );
  /* The color of the loading indicator while initializing the channel list */
  --str-chat__channel-preview-loading-state-color: var(--str-chat__disabled-color);
  /* The background color of the unread badge */
  --str-chat__channel-preview-unread-badge-background-color: var(--str-chat__unread-badge-color);
  /* The color of the unread badge */
  --str-chat__channel-preview-unread-badge-color: var(--str-chat__on-unread-badge-color);
  /* The border radius used for the borders of the unread badge */
  --str-chat__channel-preview-unread-badge-border-radius: var(--str-chat__border-radius-circle);
  /* Top border of the unread badge */
  --str-chat__channel-preview-unread-badge-border-block-start: none;
  /* Bottom border of the unread badge */
  --str-chat__channel-preview-unread-badge-border-block-end: none;
  /* Left (right in RTL layout) border of the unread badge */
  --str-chat__channel-preview-unread-badge-border-inline-start: none;
  /* Right (left in RTL layout) border of the unread badge */
  --str-chat__channel-preview-unread-badge-border-inline-end: none;
}
.str-chat__channel-preview {
  background: var(--str-chat__channel-preview-background-color);
  color: var(--str-chat__channel-preview-color);
  box-shadow: var(--str-chat__channel-preview-box-shadow);
  border-radius: var(--str-chat__channel-preview-border-radius);
  border-block-start: var(--str-chat__channel-preview-border-block-start);
  border-block-end: var(--str-chat__channel-preview-border-block-end);
  border-inline-start: var(--str-chat__channel-preview-border-inline-start);
  border-inline-end: var(--str-chat__channel-preview-border-inline-end);
}
.str-chat__channel-preview--active, .str-chat__channel-preview-messenger--active {
  background-color: var(--str-chat__channel-preview-active-background-color);
}
.str-chat__channel-preview:hover {
  background-color: var(--str-chat__channel-preview-hover-background-color);
}
.str-chat__channel-preview .str-chat__channel-preview-end-first-row {
  font: var(--str-chat__subtitle-medium-text);
}
.str-chat__channel-preview .str-chat__channel-preview-end-first-row .str-chat__channel-preview-unread-badge {
  background: var(--str-chat__channel-preview-unread-badge-background-color);
  color: var(--str-chat__channel-preview-unread-badge-color);
  box-shadow: var(--str-chat__channel-preview-unread-badge-box-shadow);
  border-radius: var(--str-chat__channel-preview-unread-badge-border-radius);
  border-block-start: var(--str-chat__channel-preview-unread-badge-border-block-start);
  border-block-end: var(--str-chat__channel-preview-unread-badge-border-block-end);
  border-inline-start: var(--str-chat__channel-preview-unread-badge-border-inline-start);
  border-inline-end: var(--str-chat__channel-preview-unread-badge-border-inline-end);
  font-size: 80%;
}
.str-chat__channel-preview .str-chat__channel-preview-end-first-row .str-chat__channel-preview-messenger--last-message {
  font: var(--str-chat__body-text);
  color: var(--str-chat__channel-preview-latest-message-secondary-color);
}
.str-chat__channel-preview .str-chat__channel-preview-end-first-row--active .str-chat__channel-preview-messenger--last-message, .str-chat__channel-preview .str-chat__channel-preview-end-first-row:hover .str-chat__channel-preview-messenger--last-message {
  color: var(--str-chat__channel-preview-color);
}
.str-chat__channel-preview-loading {
  animation: pulsate 1s linear 0s infinite alternate;
}
.str-chat__channel-preview-loading:nth-of-type(2) {
  animation: pulsate 1s linear 0.3334s infinite alternate;
}
.str-chat__channel-preview-loading:last-of-type {
  animation: pulsate 1s linear 0.6667s infinite alternate;
}
@keyframes pulsate {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
.str-chat__channel-preview-loading .str-chat__loading-channels-avatar,
.str-chat__channel-preview-loading .str-chat__loading-channels-username,
.str-chat__channel-preview-loading .str-chat__loading-channels-status {
  background-image: linear-gradient(-90deg, var(--str-chat__channel-preview-loading-state-color) 0%, var(--str-chat__channel-preview-loading-state-color) 100%);
}
.str-chat__channel-preview-loading .str-chat__loading-channels-username,
.str-chat__channel-preview-loading .str-chat__loading-channels-status {
  border-radius: var(--str-chat__border-radius-xs);
}
/* Only available in React SDK. */
.str-chat {
  /* The text/icon color of the component */
  --str-chat__channel-search-input-color: var(--str-chat__text-color);
  /* The text/icon color of the component */
  --str-chat__channel-search-input-placeholder-color: var(--str-chat__text-low-emphasis-color);
  /* The text/icon color of the component */
  --str-chat__channel-search-input-icon-color: var(--str-chat__text-low-emphasis-color);
  /* Top border of the component */
  --str-chat__channel-search-input-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__channel-search-input-border-block-end: none;
  /* Left (right in RTL layout) borhe component */
  --str-chat__channel-search-input-border-inline-start: none;
  /* Right (left in RTL layout) borhe component */
  --str-chat__channel-search-input-border-inline-end: none;
  /* The border radius used for the borders of the component */
  --str-chat__channel-search-input-wrapper-border-radius: var(--str-chat__border-radius-lg);
  /* The background color of the component */
  --str-chat__channel-search-input-wrapper-background-color: transparent;
  /* Top border of the component */
  --str-chat__channel-search-input-wrapper-border-block-start: var(--str-chat__surface-color) 1px
    solid;
  /* Bottom border of the component */
  --str-chat__channel-search-input-wrapper-border-block-end: var(--str-chat__surface-color) 1px
    solid;
  /* Left (right in RTL layout) border of the component */
  --str-chat__channel-search-input-wrapper-border-inline-start: var(--str-chat__surface-color) 1px
    solid;
  /* Right (left in RTL layout) border of the component */
  --str-chat__channel-search-input-wrapper-border-inline-end: var(--str-chat__surface-color) 1px
    solid;
  /* The border radius used for the borders of the component */
  --str-chat__channel-search-input-wrapper-active-border-radius: var(--str-chat__border-radius-lg);
  /* The background color of the component */
  --str-chat__channel-search-input-wrapper-active-background-color: transparent;
  /* Top border of the component */
  --str-chat__channel-search-input-wrapper-active-border-block-start: var(--str-chat__primary-color)
    1px solid;
  /* Bottom border of the component */
  --str-chat__channel-search-input-wrapper-active-border-block-end: var(--str-chat__primary-color)
    1px solid;
  /* Left (right in RTL layout) border of the component */
  --str-chat__channel-search-input-wrapper-active-border-inline-start: var(
      --str-chat__primary-color
    )
    1px solid;
  /* Right (left in RTL layout) border of the component */
  --str-chat__channel-search-input-wrapper-active-border-inline-end: var(--str-chat__primary-color)
    1px solid;
  /* The background applied to channel search result */
  --str-chat__channel-search-result-background-color: transparent;
  /* Top border of the component */
  --str-chat__channel-search-result-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__channel-search-result-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__channel-search-result-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__channel-search-result-border-inline-end: none;
  /* Background color used for the search result hover / focused state */
  --str-chat__channel-search-result-hover-background-color: var(
    --str-chat__secondary-surface-color
  );
  --str-chat__channel-search-result-list-color: var(--str-chat__text-color);
  --str-chat__channel-search-result-list-background-color: var(--str-chat__secondary-background-color);
  /* Top border of the component  */
  --str-chat__channel-search-result-list-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__channel-search-result-list-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__channel-search-result-list-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__channel-search-result-list-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__channel-search-result-list-popup-box-shadow: 0 4px 4px var(--str-chat__box-shadow-color);
  /* The font color used in the search results header  */
  --str-chat__channel-search-results-header-color: var(--str-chat__text-low-emphasis-color);
  /* The background color used in the search results header  */
  --str-chat__channel-search-results-header-background-color: var(--str-chat__background-color);
  /* Top border of the component  */
  --str-chat__channel-search-results-header-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__channel-search-results-header-border-block-end: var(--str-chat__surface-color) 1px
    solid;
  /* Left (right in RTL layout) border of the component */
  --str-chat__channel-search-results-header-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__channel-search-results-header-border-inline-end: none;
  /* The font color used in the search results loading indicator  */
  --str-chat__channel-search-results-loading-indicator-color: var(--str-chat__text-low-emphasis-color);
  /* The background color used in the search results loading indicator  */
  --str-chat__channel-search-results-loading-indicator-background-color: var(--str-chat__background-color);
  /* Top border of the component  */
  --str-chat__channel-search-results-loading-indicator-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__channel-search-results-loading-indicator-border-block-end: var(--str-chat__surface-color) 1px
    solid;
  /* Left (right in RTL layout) border of the component */
  --str-chat__channel-search-results-loading-indicator-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__channel-search-results-loading-indicator-border-inline-end: none;
  /* The font color used in the empty search results indicator  */
  --str-chat__channel-search-results-empty-color: var(--str-chat__text-low-emphasis-color);
  /* The icon color used in the empty search results indicator  */
  --str-chat__channel-search-results-empty-icon-color: var(--str-chat__disabled-color);
  /* The background color used in the empty search results indicator  */
  --str-chat__channel-search-results-empty-background-color: var(--str-chat__background-color);
  /* Top border of the component  */
  --str-chat__channel-search-results-empty-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__channel-search-results-empty-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__channel-search-results-empty-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__channel-search-results-empty-border-inline-end: none;
}
.str-chat__channel-search-input--wrapper {
  background: var(--str-chat__channel-search-input-wrapper-background-color);
  color: var(--str-chat__channel-search-input-wrapper-color);
  box-shadow: var(--str-chat__channel-search-input-wrapper-box-shadow);
  border-radius: var(--str-chat__channel-search-input-wrapper-border-radius);
  border-block-start: var(--str-chat__channel-search-input-wrapper-border-block-start);
  border-block-end: var(--str-chat__channel-search-input-wrapper-border-block-end);
  border-inline-start: var(--str-chat__channel-search-input-wrapper-border-inline-start);
  border-inline-end: var(--str-chat__channel-search-input-wrapper-border-inline-end);
}
.str-chat__channel-search-input--wrapper input {
  background: var(--str-chat__channel-search-input-background-color);
  color: var(--str-chat__channel-search-input-color);
  box-shadow: var(--str-chat__channel-search-input-box-shadow);
  border-radius: var(--str-chat__channel-search-input-border-radius);
  border-block-start: var(--str-chat__channel-search-input-border-block-start);
  border-block-end: var(--str-chat__channel-search-input-border-block-end);
  border-inline-start: var(--str-chat__channel-search-input-border-inline-start);
  border-inline-end: var(--str-chat__channel-search-input-border-inline-end);
  outline: none;
  font: var(--str-chat__subtitle-text);
}
.str-chat__channel-search-input--wrapper .str-chat__channel-search-input--clear-button svg path {
  fill: transparent;
}
.str-chat__channel-search-input--wrapper-active {
  background: var(--str-chat__channel-search-input-wrapper-active-background-color);
  color: var(--str-chat__channel-search-input-wrapper-active-color);
  box-shadow: var(--str-chat__channel-search-input-wrapper-active-box-shadow);
  border-radius: var(--str-chat__channel-search-input-wrapper-active-border-radius);
  border-block-start: var(--str-chat__channel-search-input-wrapper-active-border-block-start);
  border-block-end: var(--str-chat__channel-search-input-wrapper-active-border-block-end);
  border-inline-start: var(--str-chat__channel-search-input-wrapper-active-border-inline-start);
  border-inline-end: var(--str-chat__channel-search-input-wrapper-active-border-inline-end);
}
.str-chat__channel-search-input--wrapper-active .str-chat__channel-search-input--icon svg path {
  fill: var(--str-chat__primary-color);
}
.str-chat__channel-search-input--wrapper-active .str-chat__channel-search-input--clear-button svg path {
  fill: var(--str-chat__text-low-emphasis-color);
}
.str-chat__channel-search-results-header {
  background: var(--str-chat__channel-search-results-header-background-color);
  color: var(--str-chat__channel-search-results-header-color);
  box-shadow: var(--str-chat__channel-search-results-header-box-shadow);
  border-radius: var(--str-chat__channel-search-results-header-border-radius);
  border-block-start: var(--str-chat__channel-search-results-header-border-block-start);
  border-block-end: var(--str-chat__channel-search-results-header-border-block-end);
  border-inline-start: var(--str-chat__channel-search-results-header-border-inline-start);
  border-inline-end: var(--str-chat__channel-search-results-header-border-inline-end);
  font: var(--str-chat__subtitle-text);
}
.str-chat__channel-search-result-list {
  background: var(--str-chat__channel-search-result-list-background-color);
  color: var(--str-chat__channel-search-result-list-color);
  box-shadow: var(--str-chat__channel-search-result-list-box-shadow);
  border-radius: var(--str-chat__channel-search-result-list-border-radius);
  border-block-start: var(--str-chat__channel-search-result-list-border-block-start);
  border-block-end: var(--str-chat__channel-search-result-list-border-block-end);
  border-inline-start: var(--str-chat__channel-search-result-list-border-inline-start);
  border-inline-end: var(--str-chat__channel-search-result-list-border-inline-end);
}
.str-chat__channel-search-result-list.popup {
  box-shadow: var(--str-chat__channel-search-result-list-popup-box-shadow);
}
.str-chat__channel-search-result-list .str-chat__channel-search-container-searching {
  background: var(--str-chat__channel-search-results-loading-indicator-background-color);
  color: var(--str-chat__channel-search-results-loading-indicator-color);
  box-shadow: var(--str-chat__channel-search-results-loading-indicator-box-shadow);
  border-radius: var(--str-chat__channel-search-results-loading-indicator-border-radius);
  border-block-start: var(--str-chat__channel-search-results-loading-indicator-border-block-start);
  border-block-end: var(--str-chat__channel-search-results-loading-indicator-border-block-end);
  border-inline-start: var(--str-chat__channel-search-results-loading-indicator-border-inline-start);
  border-inline-end: var(--str-chat__channel-search-results-loading-indicator-border-inline-end);
}
.str-chat__channel-search-result-list .str-chat__channel-search-container-empty {
  background: var(--str-chat__channel-search-results-empty-background-color);
  color: var(--str-chat__channel-search-results-empty-color);
  box-shadow: var(--str-chat__channel-search-results-empty-box-shadow);
  border-radius: var(--str-chat__channel-search-results-empty-border-radius);
  border-block-start: var(--str-chat__channel-search-results-empty-border-block-start);
  border-block-end: var(--str-chat__channel-search-results-empty-border-block-end);
  border-inline-start: var(--str-chat__channel-search-results-empty-border-inline-start);
  border-inline-end: var(--str-chat__channel-search-results-empty-border-inline-end);
  font: var(--str-chat__subtitle2-medium-text);
}
.str-chat__channel-search-result-list .str-chat__channel-search-container-empty svg path {
  fill: var(--str-chat__channel-search-results-empty-icon-color);
}
.str-chat__channel-search-result-list .str-chat__channel-search-result {
  background: var(--str-chat__channel-search-result-background-color);
  color: var(--str-chat__channel-search-result-color);
  box-shadow: var(--str-chat__channel-search-result-box-shadow);
  border-radius: var(--str-chat__channel-search-result-border-radius);
  border-block-start: var(--str-chat__channel-search-result-border-block-start);
  border-block-end: var(--str-chat__channel-search-result-border-block-end);
  border-inline-start: var(--str-chat__channel-search-result-border-inline-start);
  border-inline-end: var(--str-chat__channel-search-result-border-inline-end);
}
.str-chat__channel-search-result-list .str-chat__channel-search-result .str-chat__channel-search-result--display-name {
  font: var(--str-chat__subtitle-medium-text);
}
.str-chat__channel-search-result-list .str-chat__channel-preview-messenger--active {
  background-color: var(--str-chat__channel-preview-active-background-color);
}
.str-chat__channel-search-result-list .str-chat__channel-search-result:hover,
.str-chat__channel-search-result-list .str-chat__channel-search-result--focused {
  background-color: var(--str-chat__channel-search-result-hover-background-color);
}
.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__edit-message-modal-button-border-radius: none;
  /* The text color used for the send button */
  --str-chat__edit-message-modal-send-button-color: var(--str-chat__primary-color);
  /* The text color used for the cancel button */
  --str-chat__edit-message-modal-cancel-button-color: var(--str-chat__text-low-emphasis-color);
  /* The background color of the component */
  --str-chat__edit-message-modal-button-background-color: transparent;
  /* Top border of the component */
  --str-chat__edit-message-modal-button-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__edit-message-modal-button-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__edit-message-modal-button-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__edit-message-modal-button-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__edit-message-modal-button-box-shadow: none;
}
.str-chat__edit-message-form .str-chat__edit-message-form-options .str-chat__edit-message-cancel,
.str-chat__edit-message-form .str-chat__edit-message-form-options .str-chat__edit-message-send {
  background: var(--str-chat__edit-message-modal-button-background-color);
  color: var(--str-chat__edit-message-modal-button-color);
  box-shadow: var(--str-chat__edit-message-modal-button-box-shadow);
  border-radius: var(--str-chat__edit-message-modal-button-border-radius);
  border-block-start: var(--str-chat__edit-message-modal-button-border-block-start);
  border-block-end: var(--str-chat__edit-message-modal-button-border-block-end);
  border-inline-start: var(--str-chat__edit-message-modal-button-border-inline-start);
  border-inline-end: var(--str-chat__edit-message-modal-button-border-inline-end);
  font: var(--str-chat__body-medium-text);
}
.str-chat__edit-message-form .str-chat__edit-message-form-options .str-chat__edit-message-cancel {
  text-transform: capitalize;
  color: var(--str-chat__edit-message-modal-cancel-button-color);
}
.str-chat__edit-message-form .str-chat__edit-message-form-options .str-chat__edit-message-send {
  text-transform: uppercase;
  color: var(--str-chat__edit-message-modal-send-button-color);
}
/* Only available in Angular SDK. */
.str-chat {
  /* The color of the stepper icon. */
  --str-chat__image-carousel-stepper-color: var(--str-chat__text-color);
}
.str-chat__image-carousel .str-chat__image-carousel-stepper svg path {
  fill: var(--str-chat__image-carousel-stepper-color);
}
.str-chat__loading-indicator svg linearGradient stop:last-child {
  stop-color: var(--str-chat__loading-indicator-color, var(--str-chat__primary-color, #006cff));
}
.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__message-border-radius: none;
  /* The text/icon color of the component */
  --str-chat__message-color: var(--str-chat__text-color);
  /* The text/icon color used for displaying error messages */
  --str-chat__message-error-message-color: var(--str-chat__danger-color);
  /* The text/icon color used for displaying items with less emphasis */
  --str-chat__message-secondary-color: var(--str-chat__text-low-emphasis-color);
  /* The text color used for displaying links */
  --str-chat__message-link-color: var(--str-chat__primary-color);
  /* The text color used for displaying mentions */
  --str-chat__message-mention-color: var(--str-chat__primary-color);
  /* The text/icon color used for displaying message status */
  --str-chat__message-status-color: var(--str-chat__primary-color);
  /* The text color used for displaying the number of thread replies of a message */
  --str-chat__message-replies-count-color: var(--str-chat__primary-color);
  /* The background color of the component */
  --str-chat__message-background-color: transparent;
  /* The background color of a jumped-to message */
  --str-chat__message-highlighted-background-color: var(--str-chat__message-highlight-color);
  /* Top border of the component */
  --str-chat__message-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__message-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__message-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__message-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__message-box-shadow: none;
  /* The background of the message component in active state */
  --str-chat__message-active-bacground-color: transparent;
  /* The icon color used for displaying message options */
  --str-chat__message-options-color: var(--str-chat__text-low-emphasis-color);
  /* The icon color used for displaying message options if a message option is clicked */
  --str-chat__message-options-hover-background-color: var(--str-chat__tertiary-surface-color);
  /* The border radius used for displaying message options */
  --str-chat__message-options-border-radius: var(--str-chat__border-radius-circle);
  /* The background color used if a message option is hovered */
  --str-chat__message-options-active-color: var(--str-chat__primary-color);
  /* The border radius used for the borders of the message bubble */
  --str-chat__message-bubble-border-radius: var(--str-chat__border-radius-md);
  /* The text/icon of the message bubble */
  --str-chat__message-bubble-color: var(--str-chat__text-color);
  /* The background of the message bubble */
  --str-chat__message-bubble-background-color: var(--str-chat__secondary-surface-color);
  /* The text/icon of the message bubble, if the message was sent by the user */
  --str-chat__own-message-bubble-color: var(--str-chat__message-bubble-color);
  /* The background of the message bubble, if the message was sent by the user */
  --str-chat__own-message-bubble-background-color: var(--str-chat__primary-surface-color);
  /* The background of the message bubble, if it's a quoted message */
  --str-chat__quoted-message-bubble-background-color: var(--str-chat__secondary-background-color);
  /* Top border of the message bubble */
  --str-chat__message-bubble-border-block-start: none;
  /* Bottom border of the message bubble */
  --str-chat__message-bubble-border-block-end: none;
  /* Left (right in RTL layout) border of the message bubble */
  --str-chat__message-bubble-border-inline-start: none;
  /* Right (left in RTL layout) border of the message bubble */
  --str-chat__message-bubble-border-inline-end: none;
  /* Box shadow applied to the message bubble */
  --str-chat__message-bubble-box-shadow: none;
  /* The border radius used for the borders of a deleted message */
  --str-chat__deleted-message-border-radius: var(--str-chat__border-radius-md);
  /* The text/icon of a deleted message */
  --str-chat__deleted-message-color: var(--str-chat__text-low-emphasis-color);
  /* The background of a deleted message */
  --str-chat__deleted-message-background-color: var(--str-chat__secondary-surface-color);
  /* Top border of a deleted message */
  --str-chat__deleted-message-border-block-start: none;
  /* Bottom border of a deleted message */
  --str-chat__deleted-message-border-block-end: none;
  /* Left (right in RTL layout) border of a deleted message */
  --str-chat__deleted-message-border-inline-start: none;
  /* Right (left in RTL layout) border of a deleted message */
  --str-chat__deleted-message-border-inline-end: none;
  /* Box shadow applied to a deleted message */
  --str-chat__deleted-message-box-shadow: none;
  /* The border radius used for the borders of a system message */
  --str-chat__system-message-border-radius: 0;
  /* The text/icon of a system message */
  --str-chat__system-message-color: var(--str-chat__text-low-emphasis-color);
  /* The background of a system message */
  --str-chat__system-message-background-color: transparent;
  /* Top border of a system message */
  --str-chat__system-message-border-block-start: none;
  /* Bottom border of a system message */
  --str-chat__system-message-border-block-end: none;
  /* Left (right in RTL layout) border of a system message */
  --str-chat__system-message-border-inline-start: none;
  /* Right (left in RTL layout) border of a system message */
  --str-chat__system-message-border-inline-end: none;
  /* Box shadow applied to a system message */
  --str-chat__system-message-box-shadow: none;
  /* Text color in a date separator*/
  --str-chat__date-separator-color: var(--str-chat__text-low-emphasis-color);
  /* The line color applied to date separator */
  --str-chat__date-separator-line-color: var(--str-chat__disabled-color);
  /* The border radius used for the borders of a date separator */
  --str-chat__date-separator-border-radius: 0;
  /* The background color of a date separator */
  --str-chat__date-separator-background-color: transparent;
  /* Top border of a date separator */
  --str-chat__date-separator-border-block-start: none;
  /* Bottom border of a date separator */
  --str-chat__date-separator-border-block-end: none;
  /* Left (right in RTL layout) border of a date separator */
  --str-chat__date-separator-border-inline-start: none;
  /* Right (left in RTL layout) border of a date separator */
  --str-chat__date-separator-border-inline-end: none;
  /* Box shadow applied to a date separator */
  --str-chat__date-separator-box-shadow: none;
  /* The text color of the translation notice that is displayed if a message is translated with auto-translation */
  --str-chat__translation-notice-color: var(--str-chat__text-low-emphasis-color);
  /* The hover color of the translation notice that is displayed if a message is translated with auto-translation */
  --str-chat__translation-notice-active-background-color: var(--str-chat__tertiary-surface-color);
}
.str-chat__message--system {
  background: var(--str-chat__system-message-background-color);
  color: var(--str-chat__system-message-color);
  box-shadow: var(--str-chat__system-message-box-shadow);
  border-radius: var(--str-chat__system-message-border-radius);
  border-block-start: var(--str-chat__system-message-border-block-start);
  border-block-end: var(--str-chat__system-message-border-block-end);
  border-inline-start: var(--str-chat__system-message-border-inline-start);
  border-inline-end: var(--str-chat__system-message-border-inline-end);
  font: var(--str-chat__caption-text);
}
.str-chat__date-separator {
  background: var(--str-chat__date-separator-background-color);
  color: var(--str-chat__date-separator-color);
  box-shadow: var(--str-chat__date-separator-box-shadow);
  border-radius: var(--str-chat__date-separator-border-radius);
  border-block-start: var(--str-chat__date-separator-border-block-start);
  border-block-end: var(--str-chat__date-separator-border-block-end);
  border-inline-start: var(--str-chat__date-separator-border-inline-start);
  border-inline-end: var(--str-chat__date-separator-border-inline-end);
  font: var(--str-chat__body-text);
}
.str-chat__date-separator-line {
  background-color: var(--str-chat__date-separator-line-color);
  border: none;
}
.str-chat__message {
  background: var(--str-chat__message-background-color);
  color: var(--str-chat__message-color);
  box-shadow: var(--str-chat__message-box-shadow);
  border-radius: var(--str-chat__message-border-radius);
  border-block-start: var(--str-chat__message-border-block-start);
  border-block-end: var(--str-chat__message-border-block-end);
  border-inline-start: var(--str-chat__message-border-inline-start);
  border-inline-end: var(--str-chat__message-border-inline-end);
}
.str-chat__message a {
  text-decoration: none;
  color: var(--str-chat__message-link-color);
}
.str-chat__message .str-chat__message-mention {
  color: var(--str-chat__message-mention-color);
  font: var(--str-chat__body2-medium-text);
}
.str-chat__message .str-chat__message-bubble {
  background: var(--str-chat__message-bubble-background-color);
  color: var(--str-chat__message-bubble-color);
  box-shadow: var(--str-chat__message-bubble-box-shadow);
  border-radius: var(--str-chat__message-bubble-border-radius);
  border-block-start: var(--str-chat__message-bubble-border-block-start);
  border-block-end: var(--str-chat__message-bubble-border-block-end);
  border-inline-start: var(--str-chat__message-bubble-border-inline-start);
  border-inline-end: var(--str-chat__message-bubble-border-inline-end);
  font: var(--str-chat__body2-text);
}
.str-chat__message .str-chat__message--deleted-inner {
  background: var(--str-chat__deleted-message-background-color);
  color: var(--str-chat__deleted-message-color);
  box-shadow: var(--str-chat__deleted-message-box-shadow);
  border-radius: var(--str-chat__deleted-message-border-radius);
  border-block-start: var(--str-chat__deleted-message-border-block-start);
  border-block-end: var(--str-chat__deleted-message-border-block-end);
  border-inline-start: var(--str-chat__deleted-message-border-inline-start);
  border-inline-end: var(--str-chat__deleted-message-border-inline-end);
  font: var(--str-chat__body2-text);
}
.str-chat__message.str-chat__message--me .str-chat__message-bubble {
  color: var(--str-chat__own-message-bubble-color);
  background-color: var(--str-chat__own-message-bubble-background-color);
}
.str-chat__message .str-chat__message-options .str-chat__message-actions-box-button,
.str-chat__message .str-chat__message-options .str-chat__message-reply-in-thread-button,
.str-chat__message .str-chat__message-options .str-chat__message-reactions-button {
  outline: none;
  background: none;
  border: none;
  border-radius: var(--str-chat__message-options-border-radius);
}
.str-chat__message .str-chat__message-options .str-chat__message-actions-box-button .str-chat__message-action-icon path,
.str-chat__message .str-chat__message-options .str-chat__message-reply-in-thread-button .str-chat__message-action-icon path,
.str-chat__message .str-chat__message-options .str-chat__message-reactions-button .str-chat__message-action-icon path {
  fill: var(--str-chat__message-options-color);
}
.str-chat__message .str-chat__message-options .str-chat__message-actions-box-button:hover,
.str-chat__message .str-chat__message-options .str-chat__message-reply-in-thread-button:hover,
.str-chat__message .str-chat__message-options .str-chat__message-reactions-button:hover {
  background-color: var(--str-chat__message-options-hover-background-color);
}
.str-chat__message .str-chat__message-options .str-chat__message-actions-box-button:active .str-chat__message-action-icon path,
.str-chat__message .str-chat__message-options .str-chat__message-reply-in-thread-button:active .str-chat__message-action-icon path,
.str-chat__message .str-chat__message-options .str-chat__message-reactions-button:active .str-chat__message-action-icon path {
  fill: var(--str-chat__message-options-active-color);
}
.str-chat__message .str-chat__translation-notice button {
  font: var(--str-chat__body2-text);
  color: var(--str-chat__translation-notice-color);
  border: none;
  background: none;
}
.str-chat__message .str-chat__translation-notice button:active, .str-chat__message .str-chat__translation-notice button:hover {
  background: var(--str-chat__translation-notice-active-background-color);
}
.str-chat__message .str-chat__message-metadata {
  color: var(--str-chat__message-secondary-color);
  font: var(--str-chat__caption-text);
}
.str-chat__message .str-chat__message-metadata .str-chat__message-sender-name {
  font: var(--str-chat__caption-medium-text);
}
.str-chat__message .str-chat__message-status {
  color: var(--str-chat__message-status-color);
  font: var(--str-chat__body-text);
}
.str-chat__message .str-chat__message-status svg path {
  fill: var(--str-chat__message-status-color);
}
.str-chat__message .str-chat__message-replies-count-button-wrapper button {
  border: none;
  background-color: transparent;
  font: var(--str-chat__body-medium-text);
  color: var(--str-chat__message-replies-count-color);
}
.str-chat__message .str-chat__message--error-message {
  color: var(--str-chat__message-error-message-color);
  font: var(--str-chat__caption-text);
}
.str-chat__message .str-chat__message-error-icon {
  /* stylelint-disable-next-line selector-max-id */
}
.str-chat__message .str-chat__message-error-icon svg #background {
  fill: var(--str-chat__message-error-message-color);
}
.str-chat__message--highlighted {
  transition: background-color 0.1s ease-out;
  background-color: var(--str-chat__message-highlighted-background-color);
}
.str-chat__li:hover {
  background-color: var(--str-chat__message-active-bacground-color);
}
.str-chat__li--top .str-chat__message--other .str-chat__message-bubble,
.str-chat__li--single .str-chat__message--other .str-chat__message-bubble {
  border-end-start-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
}
.str-chat__li--top .str-chat__message--me .str-chat__message-bubble,
.str-chat__li--single .str-chat__message--me .str-chat__message-bubble {
  border-end-end-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
}
.str-chat__li--middle .str-chat__message--other .str-chat__message-bubble,
.str-chat__li--bottom .str-chat__message--other .str-chat__message-bubble {
  border-start-start-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
  border-end-start-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
}
.str-chat__li--middle .str-chat__message--me .str-chat__message-bubble,
.str-chat__li--bottom .str-chat__message--me .str-chat__message-bubble {
  border-start-end-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
  border-end-end-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
}
.str-chat__message-with-thread-link.str-chat__message--other .str-chat__message-bubble {
  border-end-start-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
}
.str-chat__message-with-thread-link.str-chat__message--me .str-chat__message-bubble {
  border-end-end-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
}
.str-chat__quoted-message-preview {
  background: var(--str-chat__message-background-color);
  color: var(--str-chat__message-color);
  box-shadow: var(--str-chat__message-box-shadow);
  border-radius: var(--str-chat__message-border-radius);
  border-block-start: var(--str-chat__message-border-block-start);
  border-block-end: var(--str-chat__message-border-block-end);
  border-inline-start: var(--str-chat__message-border-inline-start);
  border-inline-end: var(--str-chat__message-border-inline-end);
}
.str-chat__quoted-message-preview .str-chat__quoted-message-bubble {
  background: var(--str-chat__message-bubble-background-color);
  color: var(--str-chat__message-bubble-color);
  box-shadow: var(--str-chat__message-bubble-box-shadow);
  border-radius: var(--str-chat__message-bubble-border-radius);
  border-block-start: var(--str-chat__message-bubble-border-block-start);
  border-block-end: var(--str-chat__message-bubble-border-block-end);
  border-inline-start: var(--str-chat__message-bubble-border-inline-start);
  border-inline-end: var(--str-chat__message-bubble-border-inline-end);
  background-color: var(--str-chat__quoted-message-bubble-background-color);
  border-end-start-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
}
.str-chat__message-input .str-chat__quoted-message-preview .str-chat__quoted-message-bubble {
  background-color: var(--str-chat__message-bubble-background-color);
}
.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__message-actions-box-border-radius: var(--str-chat__border-radius-sm);
  /* The text/icon color of the component */
  --str-chat__message-actions-box-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__message-actions-box-background-color: var(--str-chat__secondary-background-color);
  /* Top border of the component */
  --str-chat__message-actions-box-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__message-actions-box-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__message-actions-box-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__message-actions-box-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__message-actions-box-box-shadow: 0 0 8px var(--str-chat__box-shadow-color);
  /* The border radius used for the borders of an item in the message actions box */
  --str-chat__message-actions-box-item-border-radius: 0;
  /* The text/icon color of an item in the message actions box */
  --str-chat__message-actions-box-item-color: var(--str-chat__text-color);
  /* The background color of an item in the message actions box */
  --str-chat__message-actions-box-item-background-color: transparent;
  /* The background color of an item in the message actions box when hovered */
  --str-chat__message-actions-box-item-hover-background-color: var(
    --str-chat__secondary-surface-color
  );
  /* Top border of an item in the message actions box */
  --str-chat__message-actions-box-item-border-block-start: none;
  /* Bottom border of an item in the message actions box */
  --str-chat__message-actions-box-item-border-block-end: none;
  /* Left (right in RTL layout) border of an item in the message actions box */
  --str-chat__message-actions-box-item-border-inline-start: none;
  /* Right (left in RTL layout) border of an item in the message actions box */
  --str-chat__message-actions-box-item-border-inline-end: none;
  /* Box shadow applied to an item in the message actions box */
  --str-chat__message-actions-box-item-box-shadow: none;
}
.str-chat__message-actions-box {
  background: var(--str-chat__message-actions-box-background-color);
  color: var(--str-chat__message-actions-box-color);
  box-shadow: var(--str-chat__message-actions-box-box-shadow);
  border-radius: var(--str-chat__message-actions-box-border-radius);
  border-block-start: var(--str-chat__message-actions-box-border-block-start);
  border-block-end: var(--str-chat__message-actions-box-border-block-end);
  border-inline-start: var(--str-chat__message-actions-box-border-inline-start);
  border-inline-end: var(--str-chat__message-actions-box-border-inline-end);
}
.str-chat__message-actions-box .str-chat__message-actions-list-item-button {
  background: var(--str-chat__message-actions-box-item-background-color);
  color: var(--str-chat__message-actions-box-item-color);
  box-shadow: var(--str-chat__message-actions-box-item-box-shadow);
  border-radius: var(--str-chat__message-actions-box-item-border-radius);
  border-block-start: var(--str-chat__message-actions-box-item-border-block-start);
  border-block-end: var(--str-chat__message-actions-box-item-border-block-end);
  border-inline-start: var(--str-chat__message-actions-box-item-border-inline-start);
  border-inline-end: var(--str-chat__message-actions-box-item-border-inline-end);
  font: var(--str-chat__subtitle-text);
}
.str-chat__message-actions-box .str-chat__message-actions-list-item-button:hover {
  background-color: var(--str-chat__message-actions-box-item-hover-background-color);
}
.str-chat {
  /* The border radius of the component */
  --str-chat__message-input-border-radius: 0;
  /* The text/icon color of the component */
  --str-chat__message-input-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__message-input-background-color: var(--str-chat__secondary-background-color);
  /* Top border of the component */
  --str-chat__message-input-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__message-input-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__message-input-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__message-input-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__message-input-box-shadow: none;
  /* The text/icon color of the dropzone container */
  --str-chat__dropzone-container-color: var(--str-chat__on-primary-color);
  /* The background color of the dropzone container */
  --str-chat__dropzone-container-background-color: var(--str-chat__primary-overlay-color);
  /* The backdrop filter applied to the dropzone container */
  --str-chat__dropzone-container-backdrop-filter: blur(3px);
  /* The border radius used for the borders of the textarea */
  --str-chat__message-textarea-border-radius: var(--str-chat__border-radius-md);
  /* The text/icon color of the textarea */
  --str-chat__message-textarea-color: var(--str-chat__text-color);
  /* The background color of the textarea */
  --str-chat__message-textarea-background-color: transparent;
  /* Top border of the textarea */
  --str-chat__message-textarea-border-block-start: 1px solid var(--str-chat__surface-color);
  /* Bottom border of the textarea */
  --str-chat__message-textarea-border-block-end: 1px solid var(--str-chat__surface-color);
  /* Left (right in RTL layout) border of the textarea */
  --str-chat__message-textarea-border-inline-start: 1px solid var(--str-chat__surface-color);
  /* Right (left in RTL layout) border of the textarea */
  --str-chat__message-textarea-border-inline-end: 1px solid var(--str-chat__surface-color);
  /* Box shadow applied to the textarea */
  --str-chat__message-textarea-box-shadow: none;
  /* The border radius used for the borders of the send button */
  --str-chat__message-send-border-radius: var(--str-chat__border-radius-circle);
  /* The text/icon color of the send button */
  --str-chat__message-send-color: var(--str-chat__primary-color);
  /* The background color of the send button */
  --str-chat__message-send-background-color: transparent;
  /* Top border of the send button */
  --str-chat__message-send-border-block-start: 0;
  /* Bottom border of the send button */
  --str-chat__message-send-border-block-end: 0;
  /* Left (right in RTL layout) border of the send button */
  --str-chat__message-send-border-inline-start: 0;
  /* Right (left in RTL layout) border of the send button */
  --str-chat__message-send-border-inline-end: 0;
  /* Box shadow applied to the send button */
  --str-chat__message-send-box-shadow: none;
  /* The color of the send button in disabled state */
  --str-chat__message-send-disabled-color: var(--str-chat__disabled-color);
  /* The background color of the send button in disabled state */
  --str-chat__message-send-disabled-background-color: transparent;
  /* The border radius used for the borders of the tool buttons of the message input (such as attachment upload button) */
  --str-chat__message-input-tools-border-radius: var(--str-chat__border-radius-circle);
  /* The text/icon color of the tool buttons of the message input (such as attachment upload button) */
  --str-chat__message-input-tools-color: var(--str-chat__text-low-emphasis-color);
  /* The background color of the tool buttons of the message input (such as attachment upload button) */
  --str-chat__message-input-tools-background-color: transparent;
  /* Top border of the tool buttons of the message input (such as attachment upload button) */
  --str-chat__message-input-tools-border-block-start: 0;
  /* Bottom border of the tool buttons of the message input (such as attachment upload button) */
  --str-chat__message-input-tools-border-block-end: 0;
  /* Left (right in RTL layout) border of the tool buttons of the message input (such as attachment upload button) */
  --str-chat__message-input-tools-border-inline-start: 0;
  /* Right (left in RTL layout) border of the tool buttons of the message input (such as attachment upload button) */
  --str-chat__message-input-tools-border-inline-end: 0;
  /* Box shadow applied to the tool buttons of the message input (such as attachment upload button) */
  --str-chat__message-input-tools-box-shadow: none;
  /* Thex text color of the message that is displayed when the use can't send messages */
  --str-chat__message-input-not-allowed-color: var(--str-chat__disabled-color);
  /* The border radius used for the borders of the cooldown timer */
  --str-chat__cooldown-border-radius: var(--str-chat__border-radius-circle);
  /* The text/icon color of the cooldown timer */
  --str-chat__cooldown-color: var(--str-chat__on-disabled-color);
  /* The background color of the cooldown timer */
  --str-chat__cooldown-background-color: var(--str-chat__disabled-color);
  /* Top border of the cooldown timer */
  --str-chat__cooldown-border-block-start: 0;
  /* Bottom border of the cooldown timer */
  --str-chat__cooldown-border-block-end: 0;
  /* Left (right in RTL layout) border of the cooldown timer */
  --str-chat__cooldown-border-inline-start: 0;
  /* Right (left in RTL layout) border of the cooldown timer */
  --str-chat__cooldown-border-inline-end: 0;
  /* Box shadow applied to the cooldown timer */
  --str-chat__cooldown-box-shadow: none;
}
.str-chat__message-input {
  background: var(--str-chat__message-input-background-color);
  color: var(--str-chat__message-input-color);
  box-shadow: var(--str-chat__message-input-box-shadow);
  border-radius: var(--str-chat__message-input-border-radius);
  border-block-start: var(--str-chat__message-input-border-block-start);
  border-block-end: var(--str-chat__message-input-border-block-end);
  border-inline-start: var(--str-chat__message-input-border-inline-start);
  border-inline-end: var(--str-chat__message-input-border-inline-end);
}
.str-chat__message-input .str-chat__dropzone-container {
  background-color: var(--str-chat__dropzone-container-background-color);
  color: var(--str-chat__dropzone-container-color);
  -webkit-backdrop-filter: var(--str-chat__dropzone-container-backdrop-filter);
          backdrop-filter: var(--str-chat__dropzone-container-backdrop-filter);
  font: var(--str-chat__subtitle-text);
}
.str-chat__message-input .str-chat__file-input-container {
  background: var(--str-chat__message-input-tools-background-color);
  color: var(--str-chat__message-input-tools-color);
  box-shadow: var(--str-chat__message-input-tools-box-shadow);
  border-radius: var(--str-chat__message-input-tools-border-radius);
  border-block-start: var(--str-chat__message-input-tools-border-block-start);
  border-block-end: var(--str-chat__message-input-tools-border-block-end);
  border-inline-start: var(--str-chat__message-input-tools-border-inline-start);
  border-inline-end: var(--str-chat__message-input-tools-border-inline-end);
}
.str-chat__message-input .str-chat__file-input-container svg path {
  fill: var(--str-chat__message-input-tools-color);
}
.str-chat__message-input .str-chat__attachment-preview-image-error svg path {
  fill: var(--str-chat__primary-color);
}
.str-chat__message-input .str-chat__message-textarea-container {
  background: var(--str-chat__message-textarea-background-color);
  color: var(--str-chat__message-textarea-color);
  box-shadow: var(--str-chat__message-textarea-box-shadow);
  border-radius: var(--str-chat__message-textarea-border-radius);
  border-block-start: var(--str-chat__message-textarea-border-block-start);
  border-block-end: var(--str-chat__message-textarea-border-block-end);
  border-inline-start: var(--str-chat__message-textarea-border-inline-start);
  border-inline-end: var(--str-chat__message-textarea-border-inline-end);
}
.str-chat__message-input .str-chat__message-textarea-container .str-chat__message-textarea {
  resize: none;
  border: none;
  color: var(--str-chat__message-textarea-color);
  background-color: transparent;
  box-shadow: none;
  outline: none;
  font: var(--str-chat__subtitle-text);
}
.str-chat__message-input .str-chat__send-button {
  background: var(--str-chat__message-send-background-color);
  color: var(--str-chat__message-send-color);
  box-shadow: var(--str-chat__message-send-box-shadow);
  border-radius: var(--str-chat__message-send-border-radius);
  border-block-start: var(--str-chat__message-send-border-block-start);
  border-block-end: var(--str-chat__message-send-border-block-end);
  border-inline-start: var(--str-chat__message-send-border-inline-start);
  border-inline-end: var(--str-chat__message-send-border-inline-end);
}
.str-chat__message-input .str-chat__send-button svg path {
  fill: var(--str-chat__message-send-color);
}
.str-chat__message-input .str-chat__send-button:disabled {
  background-color: var(--str-chat__message-send-disabled-background-color);
}
.str-chat__message-input .str-chat__send-button:disabled svg path {
  fill: var(--str-chat__message-send-disabled-color);
}
.str-chat__message-input .str-chat__message-input-cooldown {
  background: var(--str-chat__cooldown-background-color);
  color: var(--str-chat__cooldown-color);
  box-shadow: var(--str-chat__cooldown-box-shadow);
  border-radius: var(--str-chat__cooldown-border-radius);
  border-block-start: var(--str-chat__cooldown-border-block-start);
  border-block-end: var(--str-chat__cooldown-border-block-end);
  border-inline-start: var(--str-chat__cooldown-border-inline-start);
  border-inline-end: var(--str-chat__cooldown-border-inline-end);
  font: var(--str-chat__subtitle-medium-text);
}
.str-chat__message-input .str-chat__message-input-not-allowed {
  color: var(--str-chat__message-input-not-allowed-color);
  font: var(--str-chat__subtitle-text);
}
.str-chat__message-input .str-chat__quoted-message-preview-header .str-chat__quoted-message-reply-to-message {
  font: var(--str-chat__subtitle-medium-text);
}
.str-chat__message-input .str-chat__quoted-message-preview-header .str-chat__quoted-message-remove {
  background-color: transparent;
  border: none;
}
.str-chat__message-input .str-chat__quoted-message-preview-header .str-chat__quoted-message-remove svg path {
  fill: var(--str-chat__message-input-tools-color);
}
.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__message-list-border-radius: 0;
  /* The text/icon color of the component */
  --str-chat__message-list-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__message-list-background-color: var(--str-chat__background-color);
  /* Box shadow applied to the component */
  --str-chat__message-list-box-shadow: none;
  /* Top border of the component */
  --str-chat__message-list-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__message-list-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__message-list-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__message-list-border-inline-end: none;
  /* The border radius used for the borders of the jump to latest message button */
  --str-chat__jump-to-latest-message-border-radius: var(--str-chat__circle-fab-border-radius);
  /* The text/icon color of the jump to latest message button */
  --str-chat__jump-to-latest-message-color: var(--str-chat__circle-fab-color);
  /* The background color of the jump to latest message button */
  --str-chat__jump-to-latest-message-background-color: var(--str-chat__circle-fab-background-color);
  /* The background color of the jump to latest message button in pressed state */
  --str-chat__jump-to-latest-message-pressed-background-color: var(
    --str-chat__circle-fab-pressed-background-color
  );
  /* Box shadow applied to the jump to latest message button */
  --str-chat__jump-to-latest-message-box-shadow: var(--str-chat__circle-fab-box-shadow);
  /* Top border of the jump to latest message button */
  --str-chat__jump-to-latest-message-border-block-start: var(
    --str-chat__circle-fab-border-block-start
  );
  /* Bottom border of the jump to latest message button */
  --str-chat__jump-to-latest-message-border-block-end: var(--str-chat__circle-fab-border-block-end);
  /* Left (right in RTL layout) border of the jump to latest message button */
  --str-chat__jump-to-latest-message-border-inline-start: var(
    --str-chat__circle-fab-border-inline-start
  );
  /* Right (left in RTL layout) border of the jump to latest message button */
  --str-chat__jump-to-latest-message-border-inline-end: var(
    --str-chat__circle-fab-border-inline-end
  );
  /* The background color of the unread messages count on the jump to latest message button */
  --str-chat__jump-to-latest-message-unread-count-background-color: var(
    --str-chat__jump-to-latest-message-color
  );
  /* The text/icon color of the unread messages count on the jump to latest message button */
  --str-chat__jump-to-latest-message-unread-count-color: var(
    --str-chat__jump-to-latest-message-background-color
  );
  /* The color used for displaying thread replies and thread separator at the start of a thread */
  --str-chat__thread-head-start-color: var(--str-chat__text-low-emphasis-color);
  /* The color used for the separator below the first message in a thread */
  --str-chat__thread-head-start-border-block-end-color: var(--str-chat__surface-color);
}
.str-chat__list {
  background: var(--str-chat__message-list-background-color);
  color: var(--str-chat__message-list-color);
  box-shadow: var(--str-chat__message-list-box-shadow);
  border-radius: var(--str-chat__message-list-border-radius);
  border-block-start: var(--str-chat__message-list-border-block-start);
  border-block-end: var(--str-chat__message-list-border-block-end);
  border-inline-start: var(--str-chat__message-list-border-inline-start);
  border-inline-end: var(--str-chat__message-list-border-inline-end);
}
.str-chat__list .str-chat__parent-message-li {
  border-block-end: 1px solid var(--str-chat__thread-head-start-border-block-end-color);
}
.str-chat__list .str-chat__parent-message-li .str-chat__thread-start {
  color: var(--str-chat__thread-head-start-color);
  font: var(--str-chat__subtitle-text);
}
.str-chat__jump-to-latest-message .str-chat__circle-fab {
  background: var(--str-chat__jump-to-latest-message-background-color);
  color: var(--str-chat__jump-to-latest-message-color);
  box-shadow: var(--str-chat__jump-to-latest-message-box-shadow);
  border-radius: var(--str-chat__jump-to-latest-message-border-radius);
  border-block-start: var(--str-chat__jump-to-latest-message-border-block-start);
  border-block-end: var(--str-chat__jump-to-latest-message-border-block-end);
  border-inline-start: var(--str-chat__jump-to-latest-message-border-inline-start);
  border-inline-end: var(--str-chat__jump-to-latest-message-border-inline-end);
}
.str-chat__jump-to-latest-message .str-chat__circle-fab svg path {
  fill: var(--str-chat__jump-to-latest-message-color);
}
.str-chat__jump-to-latest-message .str-chat__circle-fab:active {
  background-color: var(--str-chat__jump-to-latest-message-pressed-background-color);
}
.str-chat__jump-to-latest-message .str-chat__circle-fab .str-chat__jump-to-latest-unread-count {
  background-color: var(--str-chat__jump-to-latest-message-unread-count-background-color);
  color: var(--str-chat__jump-to-latest-message-unread-count-color);
  border-radius: var(--str-chat__jump-to-latest-message-border-radius);
  font: var(--str-chat__caption-text);
}
/* Only available in React SDK. */
.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__virtual-list-border-radius: 0;
  /* The text/icon color of the component */
  --str-chat__virtual-list-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__virtual-list-background-color: var(--str-chat__background-color);
  /* Box shadow applied to the component */
  --str-chat__virtual-list-box-shadow: none;
  /* Top border of the component */
  --str-chat__virtual-list-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__virtual-list-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__virtual-list-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__virtual-list-border-inline-end: none;
}
.str-chat__virtual-list {
  background: var(--str-chat__virtual-list-background-color);
  color: var(--str-chat__virtual-list-color);
  box-shadow: var(--str-chat__virtual-list-box-shadow);
  border-radius: var(--str-chat__virtual-list-border-radius);
  border-block-start: var(--str-chat__virtual-list-border-block-start);
  border-block-end: var(--str-chat__virtual-list-border-block-end);
  border-inline-start: var(--str-chat__virtual-list-border-inline-start);
  border-inline-end: var(--str-chat__virtual-list-border-inline-end);
}
.str-chat__virtual-list .str-chat__parent-message-li {
  border-block-end: 1px solid var(--str-chat__thread-head-start-border-block-end-color);
}
.str-chat__virtual-list .str-chat__parent-message-li .str-chat__thread-start {
  color: var(--str-chat__thread-head-start-color);
  font: var(--str-chat__subtitle-text);
}
.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__message-reactions-border-radius: none;
  /* The text/icon color of the component */
  --str-chat__message-reactions-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__message-reactions-background-color: transparent;
  /* Top border of the component */
  --str-chat__message-reactions-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__message-reactions-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__message-reactions-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__message-reactions-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__message-reactions-box-shadow: none;
  /* The border radius used for the borders of a message reaction */
  --str-chat__message-reaction-border-radius: var(--str-chat__border-radius-xs);
  /* The text/icon color of a message reaction */
  --str-chat__message-reaction-color: var(--str-chat__text-color);
  /* The background color of a message reaction */
  --str-chat__message-reaction-background-color: var(--str-chat__tertiary-surface-color);
  /* Top border of a message reaction */
  --str-chat__message-reaction-border-block-start: none;
  /* Bottom border of a message reaction */
  --str-chat__message-reaction-border-block-end: none;
  /* Left (right in RTL layout) border of a message reaction */
  --str-chat__message-reaction-border-inline-start: none;
  /* Right (left in RTL layout) border of a message reaction */
  --str-chat__message-reaction-border-inline-end: none;
  /* Box shadow applied to a message reaction */
  --str-chat__message-reaction-box-shadow: none;
  /* The text/icon color of a message reaction, if the user reacted with that reaction */
  --str-chat__own-message-reaction-color: var(--str-chat__text-color);
  /* The background color of a message reaction, if the user reacted with that reaction */
  --str-chat__own-message-reaction-background-color: var(
    --str-chat__primary-surface-color-low-emphasis
  );
}
.str-chat__message-reactions-container .str-chat__message-reactions {
  background: var(--str-chat__message-reactions-background-color);
  color: var(--str-chat__message-reactions-color);
  box-shadow: var(--str-chat__message-reactions-box-shadow);
  border-radius: var(--str-chat__message-reactions-border-radius);
  border-block-start: var(--str-chat__message-reactions-border-block-start);
  border-block-end: var(--str-chat__message-reactions-border-block-end);
  border-inline-start: var(--str-chat__message-reactions-border-inline-start);
  border-inline-end: var(--str-chat__message-reactions-border-inline-end);
}
.str-chat__message-reactions-container .str-chat__message-reactions .str-chat__message-reaction {
  background: var(--str-chat__message-reaction-background-color);
  color: var(--str-chat__message-reaction-color);
  box-shadow: var(--str-chat__message-reaction-box-shadow);
  border-radius: var(--str-chat__message-reaction-border-radius);
  border-block-start: var(--str-chat__message-reaction-border-block-start);
  border-block-end: var(--str-chat__message-reaction-border-block-end);
  border-inline-start: var(--str-chat__message-reaction-border-inline-start);
  border-inline-end: var(--str-chat__message-reaction-border-inline-end);
  font: var(--str-chat__caption-text);
}
.str-chat__message-reactions-container .str-chat__message-reactions .str-chat__message-reaction.str-chat__message-reaction-own {
  color: var(--str-chat__own-message-reaction-color);
  background-color: var(--str-chat__own-message-reaction-background-color);
}
.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__message-reactions-options-border-radius: var(--str-chat__border-radius-circle);
  /* The text/icon color of the component */
  --str-chat__message-reactions-options-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__message-reactions-options-background-color: var(
    --str-chat__secondary-background-color
  );
  /* Top border of the component */
  --str-chat__message-reactions-options-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__message-reactions-options-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__message-reactions-options-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__message-reactions-options-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__message-reactions-options-box-shadow: 0 0 8px var(--str-chat__box-shadow-color);
  /* The border radius used for the borders of the component */
  --str-chat__message-reactions-option-border-radius: var(--str-chat__border-radius-md);
  /* The text/icon color of the component */
  --str-chat__message-reactions-option-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__message-reactions-option-background-color: var(
    --str-chat__secondary-background-color
  );
  /* The background color of the component when hovered */
  --str-chat__message-reactions-option-hover-background-color: var(
    --str-chat__primary-surface-color
  );
  /* The background color of the component when selected */
  --str-chat__message-reactions-option-selected-background-color: var(
    --str-chat__primary-color-low-emphasis
  );
  /* Top border of the component */
  --str-chat__message-reactions-option-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__message-reactions-option-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__message-reactions-option-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__message-reactions-option-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__message-reactions-option-box-shadow: none;
}
.str-chat__reaction-selector .str-chat__message-reactions-options {
  background: var(--str-chat__message-reactions-options-background-color);
  color: var(--str-chat__message-reactions-options-color);
  box-shadow: var(--str-chat__message-reactions-options-box-shadow);
  border-radius: var(--str-chat__message-reactions-options-border-radius);
  border-block-start: var(--str-chat__message-reactions-options-border-block-start);
  border-block-end: var(--str-chat__message-reactions-options-border-block-end);
  border-inline-start: var(--str-chat__message-reactions-options-border-inline-start);
  border-inline-end: var(--str-chat__message-reactions-options-border-inline-end);
}
.str-chat__reaction-selector .str-chat__message-reactions-options .str-chat__message-reactions-option {
  background: var(--str-chat__message-reactions-option-background-color);
  color: var(--str-chat__message-reactions-option-color);
  box-shadow: var(--str-chat__message-reactions-option-box-shadow);
  border-radius: var(--str-chat__message-reactions-option-border-radius);
  border-block-start: var(--str-chat__message-reactions-option-border-block-start);
  border-block-end: var(--str-chat__message-reactions-option-border-block-end);
  border-inline-start: var(--str-chat__message-reactions-option-border-inline-start);
  border-inline-end: var(--str-chat__message-reactions-option-border-inline-end);
}
.str-chat__reaction-selector .str-chat__message-reactions-options .str-chat__message-reactions-option:hover {
  background-color: var(--str-chat__message-reactions-option-hover-background-color);
}
.str-chat__reaction-selector .str-chat__message-reactions-options .str-chat__message-reactions-option.str-chat__message-reactions-option-selected {
  background-color: var(--str-chat__message-reactions-option-selected-background-color);
}
.str-chat {
  /* The border radius used for the borders of the content area of the component of the content area of the component */
  --str-chat__modal-border-radius: var(--str-chat__border-radius-sm);
  /* The text/icon color of the content area of the component */
  --str-chat__modal-color: var(--str-chat__text-color);
  /* The background color of the content area of the component */
  --str-chat__modal-background-color: var(--str-chat__secondary-background-color);
  /* The overlay color of the component */
  --str-chat__modal-overlay-color: var(--str-chat__secondary-overlay-color);
  /* The backdrop filter applied to the component */
  --str-chat__modal-overlay-backdrop-filter: blur(3px);
  /* Top border of the content area of the component */
  --str-chat__modal-border-block-start: none;
  /* Bottom border of the content area of the component */
  --str-chat__modal-border-block-end: none;
  /* Left (right in RTL layout) border of the content area of the component */
  --str-chat__modal-border-inline-start: none;
  /* Right (left in RTL layout) border of the content area of the component */
  --str-chat__modal-border-inline-end: none;
  /* Box shadow applied to the content area of the component */
  --str-chat__modal-box-shadow: none;
  /* The background color of the close button */
  --str-chat__modal-close-icon-background: var(--str-chat__text-low-emphasis-color);
  /* The icon color of the close button */
  --str-chat__modal-close-icon-color: var(--str-chat__on-disabled-color);
}
.str-chat__modal {
  background-color: var(--str-chat__modal-overlay-color);
  -webkit-backdrop-filter: var(--str-chat__modal-overlay-backdrop-filter);
          backdrop-filter: var(--str-chat__modal-overlay-backdrop-filter);
}
.str-chat__modal .str-chat__modal__inner {
  background: var(--str-chat__modal-background-color);
  color: var(--str-chat__modal-color);
  box-shadow: var(--str-chat__modal-box-shadow);
  border-radius: var(--str-chat__modal-border-radius);
  border-block-start: var(--str-chat__modal-border-block-start);
  border-block-end: var(--str-chat__modal-border-block-end);
  border-inline-start: var(--str-chat__modal-border-inline-start);
  border-inline-end: var(--str-chat__modal-border-inline-end);
}
.str-chat__modal .str-chat__modal__close-button {
  outline: none;
  background: none;
  border: none;
}
.str-chat__modal .str-chat__modal__close-button svg path {
  fill: var(--str-chat__modal-close-icon-color);
}
.str-chat__modal .str-chat__modal__close-button svg rect,
.str-chat__modal .str-chat__modal__close-button svg circle {
  fill: var(--str-chat__modal-close-icon-background);
}
.str-chat__message-attachment--card .str-chat__modal--open .str-chat__modal__inner.str-chat-react__modal__inner,
.str-chat__message-attachment--image .str-chat__modal--open .str-chat__modal__inner.str-chat-react__modal__inner,
.str-chat__message-attachment--gallery .str-chat__modal--open .str-chat__modal__inner.str-chat-react__modal__inner {
  background-color: transparent;
  width: unset;
  height: unset;
  padding: 0;
}
.str-chat__message-attachment--card .str-chat__modal--open .str-chat__modal__inner.str-chat-react__modal__inner img,
.str-chat__message-attachment--image .str-chat__modal--open .str-chat__modal__inner.str-chat-react__modal__inner img,
.str-chat__message-attachment--gallery .str-chat__modal--open .str-chat__modal__inner.str-chat-react__modal__inner img {
  max-width: unset;
  max-height: calc(100vh - 80px);
  cursor: default;
}
/* Only available in React SDK. */
.str-chat {
  /* The background color of the component */
  --str-chat__message-notification-background-color: var(--str-chat__primary-color);
  /* Top border of the component */
  --str-chat__message-notification-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__message-notification-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__message-notification-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__message-notification-border-inline-end: none;
  /* The border radius used for the borders of the component */
  --str-chat__message-notification-border-radius: 50px;
  /* Box shadow applied to the component */
  --str-chat__message-notification-box-shadow: none;
  /* The text/icon color of the component */
  --str-chat__message-notification-color: var(--str-chat__on-primary-color);
}
.str-chat__message-notification {
  background: var(--str-chat__message-notification-background-color);
  color: var(--str-chat__message-notification-color);
  box-shadow: var(--str-chat__message-notification-box-shadow);
  border-radius: var(--str-chat__message-notification-border-radius);
  border-block-start: var(--str-chat__message-notification-border-block-start);
  border-block-end: var(--str-chat__message-notification-border-block-end);
  border-inline-start: var(--str-chat__message-notification-border-inline-start);
  border-inline-end: var(--str-chat__message-notification-border-inline-end);
  font: var(--str-chat__caption-text);
  cursor: pointer;
}
.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__notification-list-border-radius: none;
  /* The text/icon color of the component */
  --str-chat__notification-list-color: var(--str-chat__notification-list-text-color);
  /* The background color of the component */
  --str-chat__notification-list-background-color: transparent;
  /* Top border of the component */
  --str-chat__notification-list-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__notification-list-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__notification-list-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__notification-list-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__notification-list-box-shadow: none;
}
.str-chat__list-notifications {
  background: var(--str-chat__notification-list-background-color);
  color: var(--str-chat__notification-list-color);
  box-shadow: var(--str-chat__notification-list-box-shadow);
  border-radius: var(--str-chat__notification-list-border-radius);
  border-block-start: var(--str-chat__notification-list-border-block-start);
  border-block-end: var(--str-chat__notification-list-border-block-end);
  border-inline-start: var(--str-chat__notification-list-border-inline-start);
  border-inline-end: var(--str-chat__notification-list-border-inline-end);
}
.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__notification-border-radius: var(--str-chat__border-radius-sm);
  /* The text/icon color of the component */
  --str-chat__notification-color: var(--str-chat__opaque-surface-text-color);
  /* The background color of the component */
  --str-chat__notification-background-color: var(--str-chat__opaque-surface-background-color);
  /* Top border of the component */
  --str-chat__notification-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__notification-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__notification-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__notification-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__notification-box-shadow: 0 0 8px var(--str-chat__box-shadow-color);
}
.str-chat__notification {
  background: var(--str-chat__notification-background-color);
  color: var(--str-chat__notification-color);
  box-shadow: var(--str-chat__notification-box-shadow);
  border-radius: var(--str-chat__notification-border-radius);
  border-block-start: var(--str-chat__notification-border-block-start);
  border-block-end: var(--str-chat__notification-border-block-end);
  border-inline-start: var(--str-chat__notification-border-inline-start);
  border-inline-end: var(--str-chat__notification-border-inline-end);
  font: var(--str-chat__subtitle-text);
}
.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__thread-border-radius: 0;
  /* The text/icon color of the component */
  --str-chat__thread-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__thread-background-color: var(--str-chat__secondary-background-color);
  /* Top border of the component */
  --str-chat__thread-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__thread-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__thread-border-inline-start: 1px solid var(--str-chat__surface-color);
  /* Right (left in RTL layout) border of the component */
  --str-chat__thread-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__thread-box-shadow: none;
  /* The border radius used for the borders of the thread header */
  --str-chat__thread-header-border-radius: 0;
  /* The text/icon color of the thread header */
  --str-chat__thread-header-color: var(--str-chat__text-color);
  /* The background color of the thread header */
  --str-chat__thread-header-background-color: var(--str-chat__secondary-background-color);
  /* Top border of the thread header */
  --str-chat__thread-header-border-block-start: none;
  /* Bottom border of the thread header */
  --str-chat__thread-header-border-block-end: none;
  /* Left (right in RTL layout) border of the thread header */
  --str-chat__thread-header-border-inline-start: none;
  /* Right (left in RTL layout) border of the thread header */
  --str-chat__thread-header-border-inline-end: none;
  /* Box shadow applied to the thread header */
  --str-chat__thread-header-box-shadow: none;
  /* The text/icon color used to display less emphasized text in the channel header */
  --str-chat__thread-header-info-color: var(--str-chat__text-low-emphasis-color);
}
.str-chat__thread-container {
  background: var(--str-chat__thread-background-color);
  color: var(--str-chat__thread-color);
  box-shadow: var(--str-chat__thread-box-shadow);
  border-radius: var(--str-chat__thread-border-radius);
  border-block-start: var(--str-chat__thread-border-block-start);
  border-block-end: var(--str-chat__thread-border-block-end);
  border-inline-start: var(--str-chat__thread-border-inline-start);
  border-inline-end: var(--str-chat__thread-border-inline-end);
}
.str-chat__thread-container .str-chat__thread-header {
  background: var(--str-chat__thread-header-background-color);
  color: var(--str-chat__thread-header-color);
  box-shadow: var(--str-chat__thread-header-box-shadow);
  border-radius: var(--str-chat__thread-header-border-radius);
  border-block-start: var(--str-chat__thread-header-border-block-start);
  border-block-end: var(--str-chat__thread-header-border-block-end);
  border-inline-start: var(--str-chat__thread-header-border-inline-start);
  border-inline-end: var(--str-chat__thread-header-border-inline-end);
}
.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-name,
.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-title {
  font: var(--str-chat__subtitle-medium-text);
}
.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-channel-name,
.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-subtitle {
  font: var(--str-chat__body-text);
  color: var(--str-chat__thread-header-info-color);
}
.str-chat__thread-container .str-chat__thread-header .str-chat__close-thread-button {
  background-color: transparent;
  border: none;
}
.str-chat__thread-container .str-chat__thread-header .str-chat__close-thread-button svg path {
  fill: var(--str-chat__thread-color);
}
.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__tooltip-border-radius: var(--str-chat__border-radius-xs);
  /* The text/icon color of the component */
  --str-chat__tooltip-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__tooltip-background-color: var(--str-chat__secondary-background-color);
  /* Top border of the component */
  --str-chat__tooltip-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__tooltip-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__tooltip-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__tooltip-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__tooltip-box-shadow: 0 0 20px var(--str-chat__box-shadow-color);
}
.str-chat__tooltip {
  background: var(--str-chat__tooltip-background-color);
  color: var(--str-chat__tooltip-color);
  box-shadow: var(--str-chat__tooltip-box-shadow);
  border-radius: var(--str-chat__tooltip-border-radius);
  border-block-start: var(--str-chat__tooltip-border-block-start);
  border-block-end: var(--str-chat__tooltip-border-block-end);
  border-inline-start: var(--str-chat__tooltip-border-inline-start);
  border-inline-end: var(--str-chat__tooltip-border-inline-end);
  font: var(--str-chat__caption-text);
}
.str-chat__tooltip::after {
  background-color: var(--str-chat__tooltip-background-color);
}
.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__typing-indicator-border-radius: none;
  /* The text/icon color of the component */
  --str-chat__typing-indicator-color: var(--str-chat__text-low-emphasis-color);
  /* The background color of the component */
  --str-chat__typing-indicator-background-color: var(--str-chat__overlay-color);
  /* Top border of the component */
  --str-chat__typing-indicator-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__typing-indicator-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__typing-indicator-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__typing-indicator-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__typing-indicator-box-shadow: none;
  /* Background color of the animated dots in the typing indicator */
  --str-chat__typing-indicator-dot-background-color: var(--str-chat__text-color);
}
.str-chat__typing-indicator {
  background: var(--str-chat__typing-indicator-background-color);
  color: var(--str-chat__typing-indicator-color);
  box-shadow: var(--str-chat__typing-indicator-box-shadow);
  border-radius: var(--str-chat__typing-indicator-border-radius);
  border-block-start: var(--str-chat__typing-indicator-border-block-start);
  border-block-end: var(--str-chat__typing-indicator-border-block-end);
  border-inline-start: var(--str-chat__typing-indicator-border-inline-start);
  border-inline-end: var(--str-chat__typing-indicator-border-inline-end);
}
.str-chat__typing-indicator .str-chat__typing-indicator__dots .str-chat__typing-indicator__dot {
  border-radius: 999px;
  animation: dotFlashing 1s infinite alternate;
  background-color: var(--str-chat__typing-indicator-dot-background-color);
}
.str-chat__typing-indicator .str-chat__typing-indicator__dots .str-chat__typing-indicator__dot:nth-child(1) {
  animation-delay: 0s;
}
.str-chat__typing-indicator .str-chat__typing-indicator__dots .str-chat__typing-indicator__dot:nth-child(2) {
  animation-delay: 0.5s;
}
.str-chat__typing-indicator .str-chat__typing-indicator__dots .str-chat__typing-indicator__dot:nth-child(3) {
  animation-delay: 1s;
}
@keyframes dotFlashing {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.2;
  }
}
.blue-grad-page-bg {
  --background: url('three_beans.svg') 50% 50%;
}
ion-footer {
  padding-bottom: var(--ion-safe-area-bottom);
}
html, body {
  height: 100%;
}
body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}
.focus-within\:outline-none:focus-within {
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}
.focus-within\:ring-2:focus-within {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}
.focus-within\:ring-indigo-500:focus-within {
  --tw-ring-opacity: 1 !important;
  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity)) !important;
}
.focus-within\:ring-offset-2:focus-within {
  --tw-ring-offset-width: 2px !important;
}
.hover\:bg-indigo-700:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(67 56 202 / var(--tw-bg-opacity)) !important;
}
.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity)) !important;
}
.hover\:text-indigo-500:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(99 102 241 / var(--tw-text-opacity)) !important;
}
.focus\:border-indigo-500:focus {
  --tw-border-opacity: 1 !important;
  border-color: rgb(99 102 241 / var(--tw-border-opacity)) !important;
}
.focus\:outline-none:focus {
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}
.focus\:ring-indigo-500:focus {
  --tw-ring-opacity: 1 !important;
  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity)) !important;
}
.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px !important;
}
@media (min-width: 640px) {
  .sm\:col-span-4 {
    grid-column: span 4 / span 4 !important;
  }
  .sm\:col-span-6 {
    grid-column: span 6 / span 6 !important;
  }
  .sm\:col-span-3 {
    grid-column: span 3 / span 3 !important;
  }
  .sm\:col-span-2 {
    grid-column: span 2 / span 2 !important;
  }
  .sm\:mx-6 {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
  }
  .sm\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  .sm\:rounded-md {
    border-radius: 0.375rem !important;
  }
  .sm\:text-sm {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
  }
}
@media (min-width: 1024px) {
  .lg\:mx-0 {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .lg\:grid {
    display: grid !important;
  }
  .lg\:w-auto {
    width: auto !important;
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .lg\:gap-x-8 {
    column-gap: 2rem !important;
  }
  .lg\:space-x-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0 !important;
    margin-right: calc(0px * var(--tw-space-x-reverse)) !important;
    margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse))) !important;
  }
}

/*# sourceMappingURL=styles.css.map*/