/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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?ngGlobalStyle ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/** Ionic CSS Variables **/
:root {
  --ion-color-primary: #009B77;
  --ion-color-primary-rgb: 0, 155, 119;
  --ion-color-primary-contrast: #FFFFFF;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #017977;
  --ion-color-primary-tint: #EAF7F4;
  --ion-color-primary-hover: #14A382;
  --ion-color-secondary: #0A1738;
  --ion-color-secondary-rgb: 10, 23, 56;
  --ion-color-secondary-contrast: #FFFFFF;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #091431;
  --ion-color-secondary-tint: #232E4C;
  --ion-color-tertiary: #F1873A;
  --ion-color-tertiary-rgb: 241, 135, 58;
  --ion-color-tertiary-contrast: #0A1738;
  --ion-color-tertiary-contrast-rgb: 10, 23, 56;
  --ion-color-tertiary-shade: #D47733;
  --ion-color-tertiary-tint: #F2934E;
  --ion-color-success: #017977;
  --ion-color-success-rgb: 1, 121, 119;
  --ion-color-success-contrast: #FFFFFF;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #016A69;
  --ion-color-success-tint: #1A8685;
  --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;
  --ion-color-danger: #EF7F72;
  --ion-color-danger-rgb: 239, 127, 114;
  --ion-color-danger-contrast: #000000;
  --ion-color-danger-contrast-rgb: 0, 0, 0;
  --ion-color-danger-shade: #D27064;
  --ion-color-danger-tint: #F18C80;
  --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;
  --ion-color-medium: #C1C3C8;
  --ion-color-medium-rgb: 193, 195, 200;
  --ion-color-medium-contrast: #0A1738;
  --ion-color-medium-contrast-rgb: 10, 23, 56;
  --ion-color-medium-shade: #AAACB0;
  --ion-color-medium-tint: #C7C9CE;
  --ion-color-light: #EEEEEE;
  --ion-color-light-rgb: 238, 238, 238;
  --ion-color-light-contrast: #0A1738;
  --ion-color-light-contrast-rgb: 10, 23, 56;
  --ion-color-light-shade: #D1D1D1;
  --ion-color-light-tint: #F0F0F0;
  --ion-font-family: "Nunito", sans-serif;
  --ion-text-color: var(--ion-color-secondary);
  --ion-padding: 24px;
  --ion-body-background: #FFFFFF;
  --ion-text-muted-color: #7F8187;
  --ion-tabs-height: 80px;
  --ion-box-shadow: 0 2px 4px 0 rgba(var(--ion-color-secondary-rgb), .08);
  --ion-box-shadow-large: 0 2px 8px 0 rgba(var(--ion-color-secondary-rgb), .08);
  --ion-box-shadow-inset: inset 0 2px 4px 0 rgba(var(--ion-color-secondary-rgb), .08);
  --ion-font-weight-normal: 400;
  --ion-font-weight-semibold: 600;
  --ion-font-weight-bold: 700;
  --ion-font-size-1: 0.75rem;
  --ion-font-size-2: 0.875rem;
  --ion-font-size-3: 1rem;
  --ion-font-size-4: 1.25rem;
  --ion-font-size-5: 1.5rem;
  --ion-font-size-6: 2rem;
  --ion-animation-duration-multiplier: 1;
  --custom-scrollbar-width: 8px;
  --custom-scrollbar-height: 8px;
  --custom-scrollbar-margin: 8px;
  --custom-scrollbar-border-radius: 4px;
  --custom-scrollbar-track-background: var(--ion-color-light);
  --custom-scrollbar-thumb-background: var(--ion-color-primary);
  --custom-scrollbar-thumb-hover-background: var(--ion-color-primary-hover);
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --ion-animation-duration-multiplier: 0;
  }
}
@media (prefers-contrast: less) {
  :root {
    --ion-color-primary: #61A89A;
    --ion-color-primary-rgb: 97, 168, 154;
  }
}
@media (prefers-contrast: more) {
  :root {
    --ion-color-primary: #005D48;
    --ion-color-primary-rgb: 93, 72, 100;
    --ion-text-color: #000000;
  }
}
@media (prefers-contrast: custom) {
  :root {
    --ion-color-primary: #222222;
    --ion-color-primary-rgb: 34, 34, 24;
    --ion-color-primary-shade: #000000;
    --ion-color-primary-tint: #CCCCCC;
    --ion-text-color: #000000;
    --ion-text-muted-color: #888888;
  }
}
@media (forced-colors: active) {
  :root {
    --ion-color-primary: #222222;
    --ion-color-primary-rgb: 34, 34, 24;
    --ion-color-primary-shade: #000000;
    --ion-color-primary-tint: #CCCCCC;
  }
  :root * {
    forced-color-adjust: none;
  }
}
/*!**********************************************************************************************************************************************************************************************************************************!*\
  !*** 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/@ionic/angular/css/core.css ***!
  \**********************************************************************************************************************************************************************************************************************************/
:root{--ion-color-primary: #0054e9;--ion-color-primary-rgb: 0, 84, 233;--ion-color-primary-contrast: #fff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #004acd;--ion-color-primary-tint: #1a65eb;--ion-color-secondary: #0163aa;--ion-color-secondary-rgb: 1, 99, 170;--ion-color-secondary-contrast: #fff;--ion-color-secondary-contrast-rgb: 255, 255, 255;--ion-color-secondary-shade: #015796;--ion-color-secondary-tint: #1a73b3;--ion-color-tertiary: #6030ff;--ion-color-tertiary-rgb: 96, 48, 255;--ion-color-tertiary-contrast: #fff;--ion-color-tertiary-contrast-rgb: 255, 255, 255;--ion-color-tertiary-shade: #542ae0;--ion-color-tertiary-tint: #7045ff;--ion-color-success: #2dd55b;--ion-color-success-rgb: 45, 213, 91;--ion-color-success-contrast: #000;--ion-color-success-contrast-rgb: 0, 0, 0;--ion-color-success-shade: #28bb50;--ion-color-success-tint: #42d96b;--ion-color-warning: #ffc409;--ion-color-warning-rgb: 255, 196, 9;--ion-color-warning-contrast: #000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0ac08;--ion-color-warning-tint: #ffca22;--ion-color-danger: #c5000f;--ion-color-danger-rgb: 197, 0, 15;--ion-color-danger-contrast: #fff;--ion-color-danger-contrast-rgb: 255, 255, 255;--ion-color-danger-shade: #ad000d;--ion-color-danger-tint: #cb1a27;--ion-color-light: #f4f5f8;--ion-color-light-rgb: 244, 245, 248;--ion-color-light-contrast: #000;--ion-color-light-contrast-rgb: 0, 0, 0;--ion-color-light-shade: #d7d8da;--ion-color-light-tint: #f5f6f9;--ion-color-medium: #636469;--ion-color-medium-rgb: 99, 100, 105;--ion-color-medium-contrast: #fff;--ion-color-medium-contrast-rgb: 255, 255, 255;--ion-color-medium-shade: #57585c;--ion-color-medium-tint: #737478;--ion-color-dark: #222428;--ion-color-dark-rgb: 34, 36, 40;--ion-color-dark-contrast: #fff;--ion-color-dark-contrast-rgb: 255, 255, 255;--ion-color-dark-shade: #1e2023;--ion-color-dark-tint: #383a3e}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-dynamic-font: -apple-system-body;--ion-font-family: var(--ion-default-font)}body{background:var(--ion-background-color);color:var(--ion-text-color)}body.backdrop-no-scroll{overflow:hidden}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}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}html.ios ion-modal ion-toolbar{padding-right:calc(var(--ion-safe-area-right) + 8px);padding-left:calc(var(--ion-safe-area-left) + 8px)}@media screen and (min-width: 768px){html.ios ion-modal.modal-card:first-of-type{--backdrop-opacity: 0.18}}ion-modal.modal-default.show-modal~ion-modal.modal-default{--backdrop-opacity: 0;--box-shadow: none}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, #0054e9) !important;--ion-color-base-rgb: var(--ion-color-primary-rgb, 0, 84, 233) !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, #004acd) !important;--ion-color-tint: var(--ion-color-primary-tint, #1a65eb) !important}.ion-color-secondary{--ion-color-base: var(--ion-color-secondary, #0163aa) !important;--ion-color-base-rgb: var(--ion-color-secondary-rgb, 1, 99, 170) !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, #015796) !important;--ion-color-tint: var(--ion-color-secondary-tint, #1a73b3) !important}.ion-color-tertiary{--ion-color-base: var(--ion-color-tertiary, #6030ff) !important;--ion-color-base-rgb: var(--ion-color-tertiary-rgb, 96, 48, 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, #542ae0) !important;--ion-color-tint: var(--ion-color-tertiary-tint, #7045ff) !important}.ion-color-success{--ion-color-base: var(--ion-color-success, #2dd55b) !important;--ion-color-base-rgb: var(--ion-color-success-rgb, 45, 213, 91) !important;--ion-color-contrast: var(--ion-color-success-contrast, #000) !important;--ion-color-contrast-rgb: var(--ion-color-success-contrast-rgb, 0, 0, 0) !important;--ion-color-shade: var(--ion-color-success-shade, #28bb50) !important;--ion-color-tint: var(--ion-color-success-tint, #42d96b) !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, #c5000f) !important;--ion-color-base-rgb: var(--ion-color-danger-rgb, 197, 0, 15) !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, #ad000d) !important;--ion-color-tint: var(--ion-color-danger-tint, #cb1a27) !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, #636469) !important;--ion-color-base-rgb: var(--ion-color-medium-rgb, 99, 100, 105) !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, #57585c) !important;--ion-color-tint: var(--ion-color-medium-tint, #737478) !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;z-index:0}ion-modal>.ion-page{position:relative;contain:layout style;height:100%}.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{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: 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;overflow-y:hidden}.menu-content-open ion-content{--overflow: hidden}.menu-content-open .ion-content-scroll-host{overflow:hidden}.ios .menu-content-reveal{box-shadow:-8px 0 42px rgba(0,0,0,.08)}[dir=rtl].ios .menu-content-reveal{box-shadow:8px 0 42px rgba(0,0,0,.08)}.md .menu-content-reveal{box-shadow:4px 0px 16px rgba(0,0,0,.18)}.md .menu-content-push{box-shadow:4px 0px 16px rgba(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{transition:none !important}}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}.ion-datetime-button-overlay{--width: fit-content;--height: fit-content}.ion-datetime-button-overlay ion-datetime.datetime-grid{width:320px;min-height:320px}[ion-last-focus],header[tabindex="-1"]:focus,[role=banner][tabindex="-1"]:focus,main[tabindex="-1"]:focus,[role=main][tabindex="-1"]:focus,h1[tabindex="-1"]:focus,[role=heading][aria-level="1"][tabindex="-1"]:focus{outline:none}.popover-viewport:has(>ion-content){overflow:hidden}@supports not selector(:has(> ion-content)){.popover-viewport{overflow:hidden}}/*# sourceMappingURL=core.css.map */

/*!***************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/@ionic/angular/css/normalize.css ***!
  \***************************************************************************************************************************************************************************************************************************************/
audio,canvas,progress,video{vertical-align:baseline}audio:not([controls]){display:none;height:0}b,strong{font-weight:bold}img{max-width:100%}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{padding:0;border:0;border-radius:0;font-family:inherit;font-style: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=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}/*# sourceMappingURL=normalize.css.map */

/*!***************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/@ionic/angular/css/structure.css ***!
  \***************************************************************************************************************************************************************************************************************************************/
*{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%;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}/*# sourceMappingURL=structure.css.map */

/*!****************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/@ionic/angular/css/typography.css ***!
  \****************************************************************************************************************************************************************************************************************************************/
html{font-family:var(--ion-font-family)}@supports(-webkit-touch-callout: none){html{font:var(--ion-dynamic-font, 16px var(--ion-font-family))}}a{background-color:transparent;color:var(--ion-color-primary, #0054e9)}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:1.625rem}h2{margin-top:18px;font-size:1.5rem}h3{font-size:1.375rem}h4{font-size:1.25rem}h5{font-size:1.125rem}h6{font-size:1rem}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}/*# sourceMappingURL=typography.css.map */

/*!*************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/@ionic/angular/css/display.css ***!
  \*************************************************************************************************************************************************************************************************************************************/
.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}}/*# sourceMappingURL=display.css.map */

/*!*************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/@ionic/angular/css/padding.css ***!
  \*************************************************************************************************************************************************************************************************************************************/
.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-inline-start:var(--ion-padding, 16px);padding-inline-end:var(--ion-padding, 16px);padding-top:var(--ion-padding, 16px);padding-bottom: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-inline-start:var(--ion-padding, 16px)}.ion-padding-end{--padding-end: var(--ion-padding, 16px);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-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-inline-start:var(--ion-margin, 16px);margin-inline-end:var(--ion-margin, 16px);margin-top:var(--ion-margin, 16px);margin-bottom: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-inline-start:var(--ion-margin, 16px)}.ion-margin-end{--margin-end: var(--ion-margin, 16px);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-inline-start:var(--ion-margin, 16px);margin-inline-end:var(--ion-margin, 16px)}/*# sourceMappingURL=padding.css.map */

/*!********************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/@ionic/angular/css/float-elements.css ***!
  \********************************************************************************************************************************************************************************************************************************************/
.ion-float-left{float:left !important}.ion-float-right{float:right !important}.ion-float-start{float:left !important}:host-context([dir=rtl]) .ion-float-start{float:right !important}[dir=rtl] .ion-float-start{float:right !important}@supports selector(:dir(rtl)){.ion-float-start:dir(rtl){float:right !important}}.ion-float-end{float:right !important}:host-context([dir=rtl]) .ion-float-end{float:left !important}[dir=rtl] .ion-float-end{float:left !important}@supports selector(:dir(rtl)){.ion-float-end:dir(rtl){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}:host-context([dir=rtl]) .ion-float-sm-start{float:right !important}[dir=rtl] .ion-float-sm-start{float:right !important}@supports selector(:dir(rtl)){.ion-float-sm-start:dir(rtl){float:right !important}}.ion-float-sm-end{float:right !important}:host-context([dir=rtl]) .ion-float-sm-end{float:left !important}[dir=rtl] .ion-float-sm-end{float:left !important}@supports selector(:dir(rtl)){.ion-float-sm-end:dir(rtl){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}:host-context([dir=rtl]) .ion-float-md-start{float:right !important}[dir=rtl] .ion-float-md-start{float:right !important}@supports selector(:dir(rtl)){.ion-float-md-start:dir(rtl){float:right !important}}.ion-float-md-end{float:right !important}:host-context([dir=rtl]) .ion-float-md-end{float:left !important}[dir=rtl] .ion-float-md-end{float:left !important}@supports selector(:dir(rtl)){.ion-float-md-end:dir(rtl){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}:host-context([dir=rtl]) .ion-float-lg-start{float:right !important}[dir=rtl] .ion-float-lg-start{float:right !important}@supports selector(:dir(rtl)){.ion-float-lg-start:dir(rtl){float:right !important}}.ion-float-lg-end{float:right !important}:host-context([dir=rtl]) .ion-float-lg-end{float:left !important}[dir=rtl] .ion-float-lg-end{float:left !important}@supports selector(:dir(rtl)){.ion-float-lg-end:dir(rtl){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}:host-context([dir=rtl]) .ion-float-xl-start{float:right !important}[dir=rtl] .ion-float-xl-start{float:right !important}@supports selector(:dir(rtl)){.ion-float-xl-start:dir(rtl){float:right !important}}.ion-float-xl-end{float:right !important}:host-context([dir=rtl]) .ion-float-xl-end{float:left !important}[dir=rtl] .ion-float-xl-end{float:left !important}@supports selector(:dir(rtl)){.ion-float-xl-end:dir(rtl){float:left !important}}}/*# sourceMappingURL=float-elements.css.map */

/*!********************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/@ionic/angular/css/text-alignment.css ***!
  \********************************************************************************************************************************************************************************************************************************************/
.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}}/*# sourceMappingURL=text-alignment.css.map */

/*!*************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/@ionic/angular/css/text-transformation.css ***!
  \*************************************************************************************************************************************************************************************************************************************************/
.ion-text-uppercase{text-transform:uppercase !important}.ion-text-lowercase{text-transform:lowercase !important}.ion-text-capitalize{text-transform:capitalize !important}@media(min-width: 576px){.ion-text-sm-uppercase{text-transform:uppercase !important}.ion-text-sm-lowercase{text-transform:lowercase !important}.ion-text-sm-capitalize{text-transform:capitalize !important}}@media(min-width: 768px){.ion-text-md-uppercase{text-transform:uppercase !important}.ion-text-md-lowercase{text-transform:lowercase !important}.ion-text-md-capitalize{text-transform:capitalize !important}}@media(min-width: 992px){.ion-text-lg-uppercase{text-transform:uppercase !important}.ion-text-lg-lowercase{text-transform:lowercase !important}.ion-text-lg-capitalize{text-transform:capitalize !important}}@media(min-width: 1200px){.ion-text-xl-uppercase{text-transform:uppercase !important}.ion-text-xl-lowercase{text-transform:lowercase !important}.ion-text-xl-capitalize{text-transform:capitalize !important}}/*# sourceMappingURL=text-transformation.css.map */

/*!****************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/@ionic/angular/css/flex-utils.css ***!
  \****************************************************************************************************************************************************************************************************************************************/
.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}/*# sourceMappingURL=flex-utils.css.map */

/*!*******************************************************************************************************************************************************************************************************************************!*\
  !*** 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/swiper/swiper-bundle.css ***!
  \*******************************************************************************************************************************************************************************************************************************/
/**
 * Swiper 8.4.7
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2023 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: January 30, 2023
 */

@font-face {
  font-family: 'swiper-icons';
  src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color: #007aff;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-pointer-events {
  touch-action: pan-y;
}
.swiper-pointer-events.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d,
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper,
.swiper-3d .swiper-slide,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
/* CSS Mode */
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}
.swiper-vertical.swiper-css-mode > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}
.swiper-centered > .swiper-wrapper::before {
  content: '';
  flex-shrink: 0;
  order: 9999;
}
.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}
.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}
.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}
.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}
.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
  height: 1px;
  width: var(--swiper-virtual-size);
}
.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
  width: 1px;
  height: var(--swiper-virtual-size);
}
:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-prev.swiper-button-hidden,
.swiper-button-next.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}
.swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next {
  display: none !important;
}
.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: 10px;
  right: auto;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: 'prev';
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: 10px;
  left: auto;
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: 'next';
}
.swiper-button-lock {
  display: none;
}
:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}
.swiper-pagination-disabled > .swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 10px;
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: 50%;
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-bullet:only-child {
  display: none !important;
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 200ms transform, 200ms top;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms left;
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms right;
}
/* Progress */
.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}
.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}
.swiper-vertical > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}
.swiper-pagination-lock {
  display: none;
}
/* Scrollbar */
.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}
.swiper-scrollbar-disabled > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
  display: none !important;
}
.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}
.swiper-vertical > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-vertical {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%;
}
.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0;
}
.swiper-scrollbar-cursor-drag {
  cursor: move;
}
.swiper-scrollbar-lock {
  display: none;
}
.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.swiper-slide-zoomed {
  cursor: move;
}
/* Preloader */
:root {
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  */
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* a11y */
.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}
.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}
.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}
.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}
.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}
.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}
.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-cube {
  overflow: visible;
}
.swiper-cube .swiper-slide {
  pointer-events: none;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}
.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-cube.swiper-rtl .swiper-slide {
  transform-origin: 100% 0;
}
.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-prev,
.swiper-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}
.swiper-cube .swiper-slide-shadow-top,
.swiper-cube .swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-right {
  z-index: 0;
  backface-visibility: hidden;
}
.swiper-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}
.swiper-cube .swiper-cube-shadow:before {
  content: '';
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  filter: blur(50px);
}
.swiper-flip {
  overflow: visible;
}
.swiper-flip .swiper-slide {
  pointer-events: none;
  backface-visibility: hidden;
  z-index: 1;
}
.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-flip .swiper-slide-shadow-top,
.swiper-flip .swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-right {
  z-index: 0;
  backface-visibility: hidden;
}
.swiper-creative .swiper-slide {
  backface-visibility: hidden;
  overflow: hidden;
  transition-property: transform, opacity, height;
}
.swiper-cards {
  overflow: visible;
}
.swiper-cards .swiper-slide {
  transform-origin: center bottom;
  backface-visibility: hidden;
  overflow: hidden;
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* Core CSS required for Ionic components to work properly */
/* Basic CSS for apps built with Ionic */
/* Optional CSS utils that can be commented out */
/* Swiper */
/* Stream chat */
.str-chat {
  box-sizing: border-box;
  font-family: var(--str-chat__font-family);
}

.str-chat * {
  box-sizing: border-box;
}

.str-chat .ngxp__container,
.str-chat .float-ui-container {
  z-index: 1;
  padding: 0 !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

.str-chat .ngxp__container .ngxp__arrow,
.str-chat .float-ui-container .ngxp__arrow {
  display: none;
}

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

/* declare asset path, useful if you want to create your own style bundle */
.str-chat {
  --str-chat__image-fallback-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9ImN1cnJlbnRDb2xvciIgY2xhc3M9InN0ci1jaGF0X19pbWFnZS1mYWxsYmFja19faWNvbiIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNMTYgMnYxNEgyVjJoMTRabTAtMkgyQy45IDAgMCAuOSAwIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlYyYzAtMS4xLS45LTItMi0yWm0tNC44NiA4Ljg2LTMgMy44N0w2IDEwLjE0IDMgMTRoMTJsLTMuODYtNS4xNFoiLz48L3N2Zz4=");
}

@font-face {
  font-family: "stream-chat-icons";
  src: url('stream-chat-icons.eot');
  src: url('stream-chat-icons.eot#iefix') format("embedded-opentype"), url('stream-chat-icons.woff') format("woff2"), url('stream-chat-icons.woff') format("woff"), url('stream-chat-icons.ttf') format("truetype"), url('stream-chat-icons.svg#stream-chat-icons') format("svg");
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @font-face {
    font-family: "stream-chat-icons";
    src: url('stream-chat-icons.svg#stream-chat-icons') format("svg");
  }
}
.str-chat {
  /* The size of the avatar, only available in Angular v5+ */
  --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 32);
}

.str-chat .stream-chat__avatar--autocomplete-item {
  --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 30);
}

.str-chat .stream-chat__avatar--channel-header {
  --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 40);
}

.str-chat .stream-chat__avatar--channel-preview {
  --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 49);
}

.str-chat .stream-chat__avatar--quoted-message-sender {
  --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 20);
}

.str-chat .stream-chat__avatar--reaction {
  --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 30);
}

.str-chat__avatar {
  position: relative;
}

.str-chat__avatar .str-chat__avatar-fallback {
  text-align: center;
  height: inherit;
  width: inherit;
}

.str-chat__avatar .str-chat__avatar--online-indicator {
  position: absolute;
  width: calc(var(--str-chat__spacing-px) * 12);
  height: calc(var(--str-chat__spacing-px) * 12);
  inset-inline-end: 3%;
  inset-block-start: 2%;
}

.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-angular__avatar {
  height: var(--str-chat__avatar-size);
  line-height: var(--str-chat__avatar-size);
  width: var(--str-chat__avatar-size);
}

.str-chat-angular__avatar.stream-chat__avatar--one-letter {
  font-size: calc(var(--str-chat__avatar-size) * 0.5);
}

.str-chat-angular__avatar.stream-chat__avatar--multiple-letters {
  font-size: calc(var(--str-chat__avatar-size) * 0.3);
}

.str-chat-angular__avatar .str-chat__avatar-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.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);
  /* The width of the amplitude bar of the voice recording wave data */
  --str-chat__voice-recording-amplitude-bar-width: 2px;
  /* The gap between amplitudes of the wave data of a voice recording */
  --str-chat__voice-recording-amplitude-bar-gap-width: var(--str-chat__spacing-px);
}

.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;
  /* Angular has different UI here, the download icon is too small to use on mobile */
}

.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;
  position: relative;
}

.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-unsupported {
  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-unsupported .str-chat__file-icon {
  width: calc(var(--str-chat__spacing-px) * 30);
}

.str-chat__attachment-list .str-chat__message-attachment-unsupported .str-chat__message-attachment-unsupported__metadata {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.str-chat__attachment-list .str-chat__message-attachment-unsupported .str-chat__message-attachment-unsupported__title {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
  max-width: 100%;
}

.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__voice-recording-widget {
  display: grid;
  grid-template-columns: 36px auto 55px;
  align-items: center;
  justify-content: center;
  gap: calc(var(--str-chat__spacing-px) * 9);
  padding: var(--str-chat__spacing-2);
  margin: var(--str-chat__attachment-margin);
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__metadata {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--str-chat__spacing-2);
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__metadata a {
  cursor: pointer;
  text-decoration: none;
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__metadata .str-chat__message-attachment-voice-recording-widget--first-row {
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--str-chat__spacing-1);
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__metadata .str-chat__message-attachment__voice-recording-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__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__metadata .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__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__metadata .str-chat__message-attachment__voice-recording-widget__audio-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--str-chat__spacing-1_5);
  height: 100%;
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__metadata .str-chat__message-attachment__voice-recording-widget__error-message {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--str-chat__spacing-1);
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__right-section {
  justify-self: center;
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__timer {
  min-width: calc(var(--str-chat__spacing-px) * 45);
  width: calc(var(--str-chat__spacing-px) * 45);
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget stream-voice-recording-wavebar {
  flex: 1;
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__wave-progress-bar__track {
  position: relative;
  flex: 1;
  width: 100%;
  height: calc(var(--str-chat__spacing-px) * 25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--str-chat__voice-recording-amplitude-bar-gap-width);
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__wave-progress-bar__track .str-chat__wave-progress-bar__amplitude-bar {
  width: var(--str-chat__voice-recording-amplitude-bar-width);
  min-width: var(--str-chat__voice-recording-amplitude-bar-width);
  height: calc(var(--str-chat__wave-progress-bar__amplitude-bar-height) + 2px);
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__wave-progress-bar__track .str-chat__wave-progress-bar__progress-indicator {
  position: absolute;
  left: 0;
  height: calc(100% + 2px + 2px);
  width: calc(var(--str-chat__spacing-px) * 6);
}

.str-chat__attachment-list .str-chat__message_attachment__playback-rate-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: var(--str-chat__spacing-1_5) var(--str-chat__spacing-2_5);
}

.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__attachment-list .str-chat-angular__message-attachment-file-single .str-chat__message-attachment-file--item-first-row {
  cursor: pointer;
  text-decoration: none;
}

.str-chat__attachment-list .str-chat__message-attachment-download-icon {
  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 16);
}

.str-chat__attachment-list .str-chat__attachment-type-icon {
  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 37);
}

.str-chat__message-attachment-audio-widget--play-button {
  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 24);
  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;
}

.str-chat__message-attachment-audio-widget--play-button svg {
  width: var(--str-chat__spacing-3);
}

.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__voice-recording-widget {
  display: flex;
  justify-content: space-between;
}

.str-chat__quoted-message-preview .str-chat__message-attachment__voice-recording-widget .str-chat__wave-progress-bar__track {
  display: none;
}

.str-chat__quoted-message-preview .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment-audio-widget--play-button {
  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__audio_recorder__waveform-box,
.str-chat__wave-progress-bar__track {
  position: relative;
  flex: 1;
  width: 120px;
  height: calc(var(--str-chat__spacing-px) * 25);
  display: flex;
  align-items: center;
  gap: var(--str-chat__spacing-px);
}

.str-chat__audio_recorder__waveform-box .str-chat__wave-progress-bar__amplitude-bar,
.str-chat__wave-progress-bar__track .str-chat__wave-progress-bar__amplitude-bar {
  width: 2px;
  min-width: 2px;
  height: calc(var(--str-chat__wave-progress-bar__amplitude-bar-height) + 2px);
}

.str-chat__audio_recorder__waveform-box .str-chat__wave-progress-bar__progress-indicator,
.str-chat__wave-progress-bar__track .str-chat__wave-progress-bar__progress-indicator {
  position: absolute;
  left: 0;
  height: calc(100% + 2px + 2px);
  width: calc(var(--str-chat__spacing-px) * 6);
}

.str-chat__attachment-list-angular-host {
  min-width: 0;
}

.str-chat__attachment-preview-list {
  --str-chat__loading-indicator-size: calc(var(--str-chat__spacing-px) * 18);
  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 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: calc(var(--str-chat__spacing-px) * 72);
  width: calc(var(--str-chat__spacing-px) * 72);
  min-width: calc(var(--str-chat__spacing-px) * 72);
  overflow: hidden;
}

.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-unsupported,
.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording,
.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-unsupported .str-chat__attachment-preview-metadata,
.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-end,
.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-metadata,
.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-end,
.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-metadata,
.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;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-metadata .str-chat__attachment-preview-title,
.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-metadata .str-chat__attachment-preview-file-name,
.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-end .str-chat__attachment-preview-title,
.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-end .str-chat__attachment-preview-file-name,
.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-metadata .str-chat__attachment-preview-title,
.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-metadata .str-chat__attachment-preview-file-name,
.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-end .str-chat__attachment-preview-title,
.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-end .str-chat__attachment-preview-file-name,
.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-metadata .str-chat__attachment-preview-title,
.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-metadata .str-chat__attachment-preview-file-name,
.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-end .str-chat__attachment-preview-title,
.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-unsupported .str-chat__attachment-preview-file-icon,
.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-icon,
.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-icon {
  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 37);
  --str-chat-icon-width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-icon svg,
.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-icon svg,
.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 .str-chat__attachment-preview-file-download {
  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 16);
  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 {
  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 24);
  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 {
  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 24);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: unset;
  background: unset;
  border: unset;
  border-radius: unset;
  inset-inline-start: 0;
  cursor: pointer;
  z-index: 1;
}

.str-chat__attachment-preview-list-angular-host {
  width: 100%;
  max-width: 100%;
}

.str-chat__message-textarea-angular-host {
  position: relative;
}

.str-chat__message-textarea-angular-host mention-list {
  width: 100%;
}

.str-chat__message-textarea-angular-host .mention-menu {
  padding: var(--str-chat__spacing-2) 0 !important;
  margin: 0 !important;
  max-width: 100%;
}

.str-chat__message-textarea-angular-host .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 {
  overflow-y: auto;
  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;
  overflow-y: hidden;
  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__message-textarea-angular-host--autocomplete-hidden mention-list {
  display: none;
}

.str-chat__audio_recorder-container {
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  min-height: 3.25rem;
  padding-inline: 1rem;
}

.str-chat__audio_recorder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.str-chat__audio_recorder button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  padding: 0;
}

.str-chat__audio_recorder .str-chat__audio_recorder__cancel-button svg {
  height: 28px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__toggle-playback-button svg {
  height: 16px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__pause-recording-button svg {
  height: 12px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__resume-recording-button svg {
  height: 24px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__stop-button svg {
  height: 12px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__complete-button svg {
  height: 16px;
}

.str-chat__audio_recorder .str-chat__recording-timer {
  display: flex;
  align-items: center;
  width: 3rem;
}

.str-chat__audio_recorder .str-chat__recording-timer--hours {
  width: 3.75rem;
}

.str-chat__audio_recorder .str-chat__wave-progress-bar__track-container {
  padding-block: 0.5rem;
  overflow-x: auto;
  height: -moz-fit-content;
  height: fit-content;
}

.str-chat__audio_recorder .str-chat__waveform-box-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.str-chat__audio_recorder .str-chat__audio_recorder__waveform-box,
.str-chat__audio_recorder .str-chat__wave-progress-bar__track {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  height: 2rem;
  margin-inline: 1rem;
}

.str-chat__audio_recorder .str-chat__wave-progress-bar__track {
  width: 120px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__waveform-box {
  overflow-x: hidden;
}

.str-chat__base-image .str-chat__message-attachment-file--item-download {
  display: block;
}

.str-chat__message-attachment-card--header .str-chat__message-attachment-file--item-download,
.str-chat__gallery-image .str-chat__message-attachment-file--item-download,
.str-chat__message-attachment--image .str-chat__message-attachment-file--item-download {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
}

.str-chat__attachment-preview-image .str-chat__message-attachment-file--item-download {
  display: none;
}

.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__channel .str-chat__container .str-chat__main-panel--hideOnThread {
  display: none;
}

.str-chat__empty-channel {
  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 136);
  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-header .str-chat__channel-header-end .str-chat__channel-header-title {
  overflow-y: hidden;
}

.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 {
  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 136);
  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: stretch;
}

.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-end-first-row .str-chat__channel-preview-unread-badge {
  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-end-second-row {
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  min-width: 0;
  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-second-row .str-chat__channel-preview-messenger--last-message {
  flex: 1;
}

.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-end-second-row .str-chat__channel-preview-messenger--status {
  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 15);
}

.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-end-second-row .str-chat__channel-preview-messenger--status svg {
  width: calc(var(--str-chat__spacing-px) * 15);
  height: calc(var(--str-chat__spacing-px) * 15);
}

.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;
  overflow-y: hidden;
  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;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.str-chat__channel-search.str-chat__channel-search--with-results.str-chat__channel-search--inline {
  height: 100%;
}

.str-chat__channel-search.str-chat__channel-search--inline {
  min-height: 0;
}

.str-chat__channel-search .str-chat__channel-search-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--str-chat__spacing-2_5);
  height: 65px;
}

.str-chat__channel-search .str-chat__channel-search-bar .str-chat__channel-search-bar-button {
  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 {
  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 {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

.str-chat__channel-search .str-chat__channel-search-result-list.inline {
  flex: 1;
}

.str-chat__channel-search .str-chat__channel-search-result-list.popup {
  position: absolute;
  left: 0;
  right: 0;
  top: 65px;
  height: 400px;
  z-index: 1;
}

.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 {
  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__channel-search .str-chat__channel-search-result-list .str-chat__channel-search-result .channel-search__result-text,
.str-chat__channel-search .str-chat__channel-search-result-list .str-chat__channel-search-result .str-chat__channel-search-result--display-name {
  overflow-y: hidden;
}

.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-angular__edit-message-form .str-chat__message-input-angular-host {
  max-height: 100%;
  min-height: 0;
  display: flex;
  min-width: 0;
  max-width: 100%;
}

.str-chat-angular__edit-message-form .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-angular__edit-message-form .str-chat__modal--open .str-chat__modal__inner {
    min-width: 40%;
    max-width: 60%;
    width: min-content;
  }
}
.str-chat__image-carousel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
  height: 100%;
}

.str-chat__image-carousel .str-chat__image-carousel-stepper {
  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 30);
  padding: var(--str-chat__spacing-2_5);
  border: none;
  cursor: pointer;
  background: transparent;
}

.str-chat__image-carousel .str-chat__image-carousel-image {
  object-fit: contain;
  min-height: 0;
  max-height: 100%;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  width: 100%;
}

.str-chat__message .str-chat__attachment-list .str-chat__modal--open .str-chat__modal__inner {
  height: 80%;
  width: 80%;
}

@media only screen and (max-device-width: 768px) {
  .str-chat__message .str-chat__attachment-list .str-chat__modal--open .str-chat__modal__inner {
    height: 100%;
    width: 100%;
  }
}
[dir=rtl] .str-chat__image-carousel-stepper svg {
  transform: scale(-1, 1);
}

/* Only available in Angular v5+ */
.str-chat {
  /* The height of the icon, only available in Angular v5+ */
  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 24);
  /* The width of the icon, only available in Angular v5+ */
  --str-chat-icon-width: auto;
}

.str-chat__icon {
  display: flex;
  font-family: "stream-chat-icons";
  font-style: normal;
  font-weight: normal;
  font-size: var(--str-chat-icon-height);
  line-height: var(--str-chat-icon-height);
  height: var(--str-chat-icon-height);
  width: var(--str-chat-icon-width);
}

.str-chat__icon::before {
  line-height: var(--str-chat-icon-height);
}

.str-chat__icon--unspecified-filetype {
  content: url("data:image/svg+xml;base64,PHN2ZwogIGRhdGEtdGVzdGlkPSJ1bnNwZWNpZmllZC1maWxldHlwZSIKICB3aWR0aD0iMzQiCiAgaGVpZ2h0PSI0MCIKICB2aWV3Qm94PSIwIDAgMzQgNDAiCiAgZmlsbD0ibm9uZSIKICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCj4KICA8cGF0aAogICAgZD0iTTAgM0MwIDEuMzQzMTUgMS4zNDMxNSAwIDMgMEgyM0wzNCAxMVYzN0MzNCAzOC42NTY5IDMyLjY1NjkgNDAgMzEgNDBIM0MxLjM0MzE1IDQwIDAgMzguNjU2OSAwIDM3VjNaIgogICAgZmlsbD0idXJsKCNwYWludDBfbGluZWFyKSIKICAvPgogIDxwYXRoIGQ9Ik0zNCAxMUwyNiAxMUMyNC4zNDMxIDExIDIzIDkuNjU2ODUgMjMgOFYwTDM0IDExWiIgZmlsbD0iI0RCREJEQiIgLz4KICA8cGF0aAogICAgZmlsbC1ydWxlPSJldmVub2RkIgogICAgY2xpcC1ydWxlPSJldmVub2RkIgogICAgZD0iTTggMTNIMjNWMTVIOFYxM1oiCiAgICBmaWxsPSIjQ0ZDRkNGIgogIC8+CiAgPHBhdGgKICAgIGZpbGwtcnVsZT0iZXZlbm9kZCIKICAgIGNsaXAtcnVsZT0iZXZlbm9kZCIKICAgIGQ9Ik04IDE3SDE4VjE5SDhWMTdaIgogICAgZmlsbD0iI0NGQ0ZDRiIKICAvPgogIDxwYXRoCiAgICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgICBjbGlwLXJ1bGU9ImV2ZW5vZGQiCiAgICBkPSJNOCAyMUgyM1YyM0g4VjIxWiIKICAgIGZpbGw9IiNDRkNGQ0YiCiAgLz4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudAogICAgICBpZD0icGFpbnQwX2xpbmVhciIKICAgICAgeDE9IjAiCiAgICAgIHkxPSIwIgogICAgICB4Mj0iMCIKICAgICAgeTI9IjQwIgogICAgICBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIKICAgID4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0id2hpdGUiIC8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0RCREJEQiIgLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgo8L3N2Zz4=");
}

.str-chat__icon--audio-file {
  content: url("data:image/svg+xml;base64,PHN2ZwogIGNsYXNzPSJyZnUtZmlsZS1hdWRpbyIKICBmaWxsPSJub25lIgogIHZpZXdCb3g9IjAgMCAzNCA0MCIKICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgaGVpZ2h0PSIyMCIKICB3aWR0aD0iMjAiCj4KICA8cGF0aAogICAgY2xpcC1ydWxlPSJldmVub2RkIgogICAgZD0iTTE3LjcxNjggMzMuMTcyQzE4LjIzNDggMzMuMTcyIDE4LjQyMzggMzMuNjU1IDE4LjQyMzggMzQuMThDMTguNDIzOCAzNC42NDIgMTguMjk3OCAzNS4xOTUgMTcuNzE2OCAzNS4xOTVDMTcuMTcwOCAzNS4xOTUgMTYuOTg4OCAzNC42NDIgMTYuOTg4OCAzNC4xNDVDMTYuOTg4OCAzMy42ODMgMTcuMTcwOCAzMy4xNzIgMTcuNzE2OCAzMy4xNzJaTTE5LjU3MTggMzEuMDAySDE4LjM4MThWMzIuNzU4OUgxOC4zNjc4QzE4LjEyMjggMzIuNDMgMTcuNzc5OCAzMi4yNjIgMTcuMzMxOCAzMi4yNjJDMTYuMzAyOCAzMi4yNjIgMTUuNzk4OCAzMy4xNTggMTUuNzk4OCAzNC4xMDNDMTUuNzk4OCAzNS4xMjUgMTYuMjgxOCAzNi4xMDQ5IDE3LjQyMjggMzYuMTA0OUMxNy44NDI4IDM2LjEwNDkgMTguMTkyOCAzNS45MjMgMTguNDIzOCAzNS41OEgxOC40Mzc4VjM2SDE5LjU3MThWMzEuMDAyWk0xMi43MDk1IDM0LjE4NzJDMTIuNzA5NSAzMy43MjUyIDEyLjg3NzUgMzMuMTcyMiAxMy40MzA1IDMzLjE3MjJDMTMuOTgzNSAzMy4xNzIyIDE0LjE1ODUgMzMuNzI1MiAxNC4xNTg1IDM0LjE4NzJDMTQuMTU4NSAzNC42NDkyIDEzLjk4MzUgMzUuMTk1MiAxMy40MzA1IDM1LjE5NTJDMTIuODc3NSAzNS4xOTUyIDEyLjcwOTUgMzQuNjQ5MiAxMi43MDk1IDM0LjE4NzJaTTExLjUxOTUgMzQuMTg3MkMxMS41MTk1IDM1LjI3OTIgMTIuMzAzNSAzNi4xMDUyIDEzLjQzMDUgMzYuMTA1MkMxNC41NTc1IDM2LjEwNTIgMTUuMzQ4NSAzNS4yNzkyIDE1LjM0ODUgMzQuMTg3MkMxNS4zNDg1IDMzLjA5NTIgMTQuNTU3NSAzMi4yNjIyIDEzLjQzMDUgMzIuMjYyMkMxMi4zMDM1IDMyLjI2MjIgMTEuNTE5NSAzMy4wOTUyIDExLjUxOTUgMzQuMTg3MlpNMjEuODM5IDMyLjM2NzFIMjIuNTc0VjMzLjEzNzFIMjEuODM5VjM0Ljc4OTFDMjEuODM5IDM1LjA3NjEgMjIuMDA3IDM1LjEzOTEgMjIuMjY2IDM1LjEzOTFDMjIuMzE0MiAzNS4xMzkxIDIyLjM2NCAzNS4xMzU3IDIyLjQxNDcgMzUuMTMyM0MyMi40NjcyIDM1LjEyODcgMjIuNTIwNiAzNS4xMjUxIDIyLjU3NCAzNS4xMjUxVjM2LjAwMDFDMjIuNDgxIDM2LjAwMzEgMjIuMzg4IDM2LjAwOTkgMjIuMjk1IDM2LjAxNjhDMjIuMTcxIDM2LjAyNTkgMjIuMDQ3IDM2LjAzNTEgMjEuOTIzIDM2LjAzNTFDMjAuOTA4IDM2LjAzNTEgMjAuNjQ5IDM1Ljc0MTEgMjAuNjQ5IDM0Ljc1NDFWMzMuMTM3MUgyMC4wNDdWMzIuMzY3MUgyMC42NDlWMzEuMjY4MUgyMS44MzlWMzIuMzY3MVoiCiAgICBmaWxsPSJ3aGl0ZSIKICAgIGZpbGwtcnVsZT0iZXZlbm9kZCIKICA+PC9wYXRoPgogIDxwYXRoCiAgICBkPSJNMCAyOEgzNFYzN0MzNCAzOC42NTY5IDMyLjY1NjkgNDAgMzEgNDBIM0MxLjM0MzE1IDQwIDAgMzguNjU2OSAwIDM3VjI4WiIKICAgIGZpbGw9IiMyNzI3QjAiCiAgPjwvcGF0aD4KICA8cGF0aCBkPSJNMCAzQzAgMS4zNDMxNSAxLjM0MzE1IDAgMyAwSDIzTDM0IDExVjI4SDBWM1oiIGZpbGw9IiNGNUY1RjUiPjwvcGF0aD4KICA8cGF0aAogICAgZD0iTTM0IDExTDI2IDExQzI0LjM0MzEgMTEgMjMgOS42NTY4NSAyMyA4VjBMMzQgMTFaIgogICAgZmlsbD0iI0RCREJEQiIKICA+PC9wYXRoPgogIDxwYXRoCiAgICBjbGlwLXJ1bGU9ImV2ZW5vZGQiCiAgICBkPSJNOC44NzkxMiAyMS45NDFIMTIuMjk4TDE2Ljk1MjEgMjQuNzQ5M0MxNy4wMzA3IDI0LjgxMzggMTcuMTI5MyAyNC44NDkgMTcuMjMxMSAyNC44NDlDMTcuNDczOCAyNC44NDg4IDE3LjY3MDUgMjQuNjUxOSAxNy42NzAzIDI0LjQwOTJWMTIuNDM5OUMxNy42NzA0IDEyLjMzODEgMTcuNjM1MiAxMi4yMzk2IDE3LjU3MDcgMTIuMTYwOUMxNy40MTY4IDExLjk3MzIgMTcuMTM5OCAxMS45NDU3IDE2Ljk1MjEgMTIuMDk5NkwxMi4yOTggMTQuOTA4SDguODc5MTJDOC4zOTM2IDE0LjkwOCA4IDE1LjMwMTYgOCAxNS43ODcxVjIxLjA2MTlDOCAyMS41NDc0IDguMzkzNiAyMS45NDEgOC44NzkxMiAyMS45NDFaTTEyLjkyNTggMTYuNjY2NEwxNS45MTIyIDE1LjIyMjRWMjEuNjI2OEwxMi45MjU4IDIwLjE4MjlIOS43NTgzVjE2LjY2NjRIMTIuOTI1OFpNMTkuODUxMSAxNi4zNTE3QzE5LjQ3NCAxNi40MDkyIDE5LjIzOTcgMTYuNjYzNyAxOS4zMjgzIDE2LjkxOTFMMTkuMzI2MiAxNi45MkMxOS41Mjk1IDE3LjQ5OTUgMTkuNjMwNSAxOC4wOTggMTkuNjI4NCAxOC42OTUzQzE5LjYzMDUgMTkuMjk3NSAxOS41MjM3IDE5LjkwMTQgMTkuMzE5NiAyMC40OTA5QzE5LjIyOSAyMC43NDYyIDE5LjQ2ODIgMjAuOTk5NiAxOS44NDc0IDIxLjA2QzE5LjkwMDggMjEuMDY4MyAxOS45NTQyIDIxLjA3MiAyMC4wMDc2IDIxLjA3MkMyMC4zMjU5IDIxLjA3MiAyMC42MTU2IDIwLjkyMzQgMjAuNjkyMiAyMC43MDU3QzIwLjkxOTQgMjAuMDQ1MSAyMS4wMzM3IDE5LjM3IDIxLjAzNzQgMTguNjk1M0MyMS4wMzQ5IDE4LjAyNTEgMjAuOTIxMSAxNy4zNTc1IDIwLjY5NTUgMTYuNzAzNUMyMC42MDUzIDE2LjQ0NzcgMjAuMjI5IDE2LjI5MDggMTkuODUxMSAxNi4zNTE3Wk0yMi4xNjA1IDE0LjYwMjhDMjIuNTI1MiAxNC41MTYzIDIyLjkyNTkgMTQuNjQ1NCAyMy4wNTUgMTQuODkzOEMyMy42ODkxIDE2LjExNTcgMjQgMTcuNDA0MiAyNCAxOC42OTIzQzI0LjAwMDQgMTkuOTg5NSAyMy42Nzk2IDIxLjI4MzkgMjMuMDUyMSAyMi41MTUzQzIyLjk1MDMgMjIuNzEyMyAyMi42NzYzIDIyLjgzNDQgMjIuMzgyOCAyMi44MzQ0QzIyLjMwNzEgMjIuODM0NCAyMi4yMzAxIDIyLjgyNjEgMjIuMTU0MyAyMi44MDkyQzIxLjc4NjMgMjIuNzI1MSAyMS41OTE0IDIyLjQ1MzYgMjEuNzE4NSAyMi4yMDc3QzIyLjI5ODggMjEuMDc2MSAyMi41OTIyIDE5Ljg4MzYgMjIuNTkzMSAxOC42OTE5QzIyLjU5MzEgMTcuNTA1NiAyMi4zMDU0IDE2LjMyMjIgMjEuNzI3NiAxNS4yMDI1QzIxLjYwMDEgMTQuOTU2MyAyMS43OTUgMTQuNjg2IDIyLjE2MDUgMTQuNjAyOFoiCiAgICBmaWxsPSIjMjcyN0IwIgogICAgZmlsbC1ydWxlPSJldmVub2RkIgogID48L3BhdGg+Cjwvc3ZnPg==");
}

.str-chat__icon--action::before {
  content: "\e800";
} /* '' */
.str-chat__icon--arrow-down::before {
  content: "\e801";
} /* '' */
.str-chat__icon--arrow-left::before {
  content: "\e802";
} /* '' */
.str-chat__icon--arrow-right::before {
  content: "\e803";
} /* '' */
.str-chat__icon--close::before {
  content: "\e804";
} /* '' */
.str-chat__icon--arrow-up::before {
  content: "\e805";
} /* '' */
.str-chat__icon--chat-bubble::before {
  content: "\e806";
} /* '' */
.str-chat__icon--pause::before {
  content: "\e807";
} /* '' */
.str-chat__icon--download::before {
  content: "\e808";
} /* '' */
.str-chat__icon--delivered::before {
  content: "\e809";
} /* '' */
.str-chat__icon--play::before {
  content: "\e80a";
} /* '' */
.str-chat__icon--reaction::before {
  content: "\e80b";
} /* '' */
.str-chat__icon--error::before {
  content: "\e80c";
} /* '' */
.str-chat__icon--read::before {
  content: "\e80d";
} /* '' */
.str-chat__icon--retry::before {
  content: "\e80e";
} /* '' */
.str-chat__icon--reply-in-thread::before {
  content: "\e80f";
} /* '' */
.str-chat__icon--send::before {
  content: "\e810";
} /* '' */
.str-chat__icon--attach::before {
  content: "\e811";
} /* '' */
.str-chat__link-preview-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin-bottom: 0.75rem;
  padding-inline: 0.75rem;
}

.str-chat__link-preview-card {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 1rem;
}

.str-chat__link-preview-card .str-chat__tooltip {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
  display: block;
  max-width: calc(var(--str-chat__spacing-px) * 250);
  padding-inline: 0.5rem;
}

.str-chat__link-preview-card .str-chat__link-preview-card__icon-container {
  display: flex;
  align-items: center;
}

.str-chat__link-preview-card .str-chat__link-preview-card__content {
  width: 100%;
  min-width: 0;
  flex: 1;
  padding-inline: 0.5rem;
}

.str-chat__link-preview-card .str-chat__link-preview-card__content .str-chat__link-preview-card__content-title,
.str-chat__link-preview-card .str-chat__link-preview-card__content .str-chat__link-preview-card__content-description {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
}

.str-chat__link-preview-card .str-chat__link-preview-card__dismiss-button {
  background: none;
  border: none;
  cursor: pointer;
}

.str-chat {
  /* The size of the loading indicator, only available in Angular v5+ */
  --str-chat__loading-indicator-size: calc(var(--str-chat__spacing-px) * 15);
}

.str-chat__loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rotate 1s linear infinite;
}

.str-chat__loading-indicator svg {
  width: var(--str-chat__loading-indicator-size);
  height: var(--str-chat__loading-indicator-size);
}
@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) * 250);
  /* 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-options {
  --str-chat-icon-height: calc(var(--str-chat__message-options-button-size) * 0.7);
}

.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" ". custom-metadata" ". metadata";
  column-gap: var(--str-chat__spacing-2);
  grid-template-columns: auto 1fr;
  justify-items: flex-start;
}

.str-chat__message.str-chat__message--me,
.str-chat__quoted-message-preview.str-chat__message--me {
  grid-template-areas: "message" "replies" "translation-notice" "custom-metadata" "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: flex-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;
}

.str-chat__message .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text .str-chat__message-text-inner,
.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text .str-chat__message-text-inner {
  overflow-y: hidden;
}

.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 {
  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__custom-message-metadata,
.str-chat__quoted-message-preview .str-chat__custom-message-metadata {
  grid-area: custom-metadata;
  margin-block-start: var(--str-chat__spacing-0_5);
}

.str-chat__message .str-chat__message-metadata,
.str-chat__quoted-message-preview .str-chat__message-metadata {
  grid-area: metadata;
  display: flex;
  flex-wrap: wrap;
  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-metadata .str-chat__message-simple-name,
.str-chat__quoted-message-preview .str-chat__message-metadata .str-chat__message-simple-name {
  overflow-y: hidden;
}

.str-chat__message .str-chat__message-metadata .str-chat__message-simple-timestamp + .str-chat__mesage-simple-edited::before,
.str-chat__quoted-message-preview .str-chat__message-metadata .str-chat__message-simple-timestamp + .str-chat__mesage-simple-edited::before {
  content: "•";
  margin-right: var(--str-chat__spacing-1);
}

.str-chat__message .str-chat__message-metadata .str-chat__message-edited-timestamp,
.str-chat__quoted-message-preview .str-chat__message-metadata .str-chat__message-edited-timestamp {
  --str-chat__message-edited-timestamp-height: 1rem;
  flex-basis: 100%;
}

.str-chat__message.str-chat__message--me .str-chat__message-metadata,
.str-chat__quoted-message-preview.str-chat__message--me .str-chat__message-metadata {
  justify-content: flex-end;
  text-align: right;
}

.str-chat__message .str-chat__message-status,
.str-chat__quoted-message-preview .str-chat__message-status {
  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 15);
  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__ul:not(.str-chat__message-options-in-bubble),
.str-chat__virtual-list:not(.str-chat__message-options-in-bubble) {
  /* This rule won't be applied in browsers that don't support :has() */
  /* Fallback for when :has() is unsupported */
}

.str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:hover:not(:has(.str-chat__reaction-list:hover, .str-chat__modal--open)) .str-chat__message-options,
.str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:focus-within:not(:has(.str-chat__reaction-list:focus-within, .str-chat__modal--open)) .str-chat__message-options,
.str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:hover:not(:has(.str-chat__reaction-list:hover, .str-chat__modal--open)) .str-chat__message-options,
.str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:focus-within:not(:has(.str-chat__reaction-list:focus-within, .str-chat__modal--open)) .str-chat__message-options {
  display: flex;
}

.str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:hover:not(:has(.str-chat__reaction-list:hover, .str-chat__modal--open)) .str-chat__message--other .str-chat__message-inner,
.str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:focus-within:not(:has(.str-chat__reaction-list:focus-within, .str-chat__modal--open)) .str-chat__message--other .str-chat__message-inner,
.str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:hover:not(:has(.str-chat__reaction-list:hover, .str-chat__modal--open)) .str-chat__message--other .str-chat__message-inner,
.str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:focus-within:not(:has(.str-chat__reaction-list:focus-within, .str-chat__modal--open)) .str-chat__message--other .str-chat__message-inner {
  margin-inline-end: 0;
}

.str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:hover:not(:has(.str-chat__reaction-list:hover, .str-chat__modal--open)) .str-chat__message--me .str-chat__message-inner,
.str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:focus-within:not(:has(.str-chat__reaction-list:focus-within, .str-chat__modal--open)) .str-chat__message--me .str-chat__message-inner,
.str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:hover:not(:has(.str-chat__reaction-list:hover, .str-chat__modal--open)) .str-chat__message--me .str-chat__message-inner,
.str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:focus-within:not(:has(.str-chat__reaction-list:focus-within, .str-chat__modal--open)) .str-chat__message--me .str-chat__message-inner {
  margin-inline-start: 0;
}

@supports not selector(:has(a, b)) {
  .str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:hover .str-chat__message-options,
  .str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:focus-within .str-chat__message-options,
  .str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:hover .str-chat__message-options,
  .str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:focus-within .str-chat__message-options {
    display: flex;
  }
  .str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:hover .str-chat__message--other .str-chat__message-inner,
  .str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:focus-within .str-chat__message--other .str-chat__message-inner,
  .str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:hover .str-chat__message--other .str-chat__message-inner,
  .str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:focus-within .str-chat__message--other .str-chat__message-inner {
    margin-inline-end: 0;
  }
  .str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:hover .str-chat__message--me .str-chat__message-inner,
  .str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:focus-within .str-chat__message--me .str-chat__message-inner,
  .str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:hover .str-chat__message--me .str-chat__message-inner,
  .str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:focus-within .str-chat__message--me .str-chat__message-inner {
    margin-inline-start: 0;
  }
}
.str-chat__ul.str-chat__message-options-in-bubble .str-chat__message-inner:hover .str-chat__message-options,
.str-chat__virtual-list.str-chat__message-options-in-bubble .str-chat__message-inner:hover .str-chat__message-options {
  display: flex;
}

.str-chat__ul.str-chat__message-options-in-bubble .str-chat__message--other .str-chat__message-inner:hover,
.str-chat__virtual-list.str-chat__message-options-in-bubble .str-chat__message--other .str-chat__message-inner:hover {
  margin-inline-end: 0;
}

.str-chat__ul.str-chat__message-options-in-bubble .str-chat__message--me .str-chat__message-inner:hover,
.str-chat__virtual-list.str-chat__message-options-in-bubble .str-chat__message--me .str-chat__message-inner:hover {
  margin-inline-start: 0;
}

.str-chat__message-inner .str-chat__message-options {
  display: none;
}

.str-chat__message-inner .str-chat__message-actions-open.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__message--me .str-chat__message-inner {
  margin-inline-start: calc(var(--str-chat__message-options-button-size) * 3);
}

.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__unread-messages-separator-wrapper {
  padding-block: 0.5rem;
}

.str-chat__unread-messages-separator-wrapper .str-chat__unread-messages-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.5rem;
}

.str-chat__unread-messages-notification {
  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 16);
  position: absolute;
  top: 0.75rem;
  z-index: 2;
  display: flex;
  align-items: center;
  overflow: clip;
}

.str-chat__unread-messages-notification button {
  padding-block: 0.5rem;
  height: 100%;
  width: 100%;
  white-space: nowrap;
}

.str-chat__unread-messages-notification button:first-of-type {
  padding-inline: 0.75rem 0.375rem;
}

.str-chat__unread-messages-notification button:last-of-type {
  padding-inline: 0.375rem 0.75rem;
}

.str-chat__unread-messages-notification button:last-of-type svg {
  width: 0.875rem;
}

.str-chat-angular__message-bubble {
  /* transform: translate3d(0, 0, 0) fixes scrolling issues on iOS, see: https://stackoverflow.com/questions/50105780/elements-disappear-when-scrolling-in-safari-webkit-transform-fix-only-works-t/50144295#50144295 */
  transform: translate3d(0, 0, 0);
}

.str-chat-angular__message-bubble.str-chat-angular__message-bubble--attachment-modal-open {
  /* transform: none is required when image carousel is open in order for the modal to be correctly positioned, see how the transform property changes the behavior of fixed positioned elements https://developer.mozilla.org/en-US/docs/Web/CSS/position  */
  transform: none;
}

.str-chat__message-edited-timestamp {
  overflow: hidden;
  transition: height 0.1s;
}

.str-chat__message-edited-timestamp--open {
  height: var(--str-chat__message-edited-timestamp-height, 1rem);
}

.str-chat__message-edited-timestamp--collapsed {
  height: 0;
}

.str-chat__message-text--pointer-cursor {
  cursor: pointer;
}

.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;
  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-bounce-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--str-chat__spacing-9);
}

.str-chat__message-bounce-prompt .str-chat__message-bounce-actions {
  display: flex;
  flex-direction: column;
  gap: var(--str-chat__spacing-2);
}

.str-chat__message-bounce-prompt .str-chat__message-bounce-edit,
.str-chat__message-bounce-prompt .str-chat__message-bounce-send,
.str-chat__message-bounce-prompt .str-chat__message-bounce-delete {
  cursor: pointer;
  padding: var(--str-chat__spacing-2);
}

.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: center;
  justify-content: center;
}

.str-chat__message-input .str-chat__message-input-inner .str-chat__file-input-container {
  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 24);
  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 {
  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 32);
  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__start-recording-audio-button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  width: calc(var(--str-chat__spacing-px) * 40);
  height: calc(var(--str-chat__spacing-px) * 40);
  min-width: calc(var(--str-chat__spacing-px) * 40);
}

.str-chat__message-input .str-chat__start-recording-audio-button svg {
  height: calc(var(--str-chat__spacing-px) * 25);
}

.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 .str-chat__recording-permission-denied-notification {
  position: absolute;
  left: 0.5rem;
  max-width: 100%;
  bottom: 100%;
  padding: 1rem;
  margin-inline: 0.5rem;
  z-index: 2;
}

.str-chat__message-input .str-chat__recording-permission-denied-notification .str-chat__recording-permission-denied-notification__dismiss-button-container {
  display: flex;
  justify-content: flex-end;
}

.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,
[dir=rtl] .str-chat__start-recording-audio-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;
  overscroll-behavior: none;
  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__main-panel .str-chat__ul .str-chat__li:first-of-type {
  padding-top: 4.5rem;
}

.str-chat__main-panel .str-chat__ul .str-chat__date-separator + .str-chat__li:first-of-type {
  padding-top: inherit;
}

.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 {
  overscroll-behavior: none;
}

.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 {
  overflow-y: hidden;
  overflow-x: auto;
  scrollbar-width: none;
  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;
  cursor: pointer;
  flex-shrink: 0;
}

.str-chat__message-reactions-container .str-chat__message-reactions .str-chat__message-reaction button {
  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-reactions-details-modal .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-reactions-details-modal .str-chat__modal--open .str-chat__modal__inner {
    min-width: 40%;
    max-width: 60%;
    width: min-content;
  }
}
.str-chat__message-reactions-details {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--str-chat__spacing-4);
  max-height: 100%;
  height: 100%;
  min-height: 0;
}

.str-chat__message-reactions-details .str-chat__message-reactions-details-reaction-types {
  display: flex;
  max-width: 100%;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  gap: var(--str-chat__spacing-4);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.str-chat__message-reactions-details .str-chat__message-reactions-details-reaction-types .str-chat__message-reactions-details-reaction-type {
  display: flex;
  align-items: center;
  padding: var(--str-chat__spacing-1) 0;
  flex-shrink: 0;
  cursor: pointer;
}

.str-chat__message-reactions-details .str-chat__message-reactions-details-reaction-types .str-chat__message-reactions-details-reaction-type .str-chat__message-reaction-emoji--with-fallback {
  width: 18px;
  line-height: 18px;
}

.str-chat__message-reactions-details .str-chat__message-reaction-emoji-big {
  --str-chat__stream-emoji-size: 1em;
  align-self: center;
  font-size: 2rem;
}

.str-chat__message-reactions-details .str-chat__message-reaction-emoji-big.str-chat__message-reaction-emoji--with-fallback {
  line-height: 2rem;
}

.str-chat__message-reactions-details .str-chat__message-reactions-details-reacting-users {
  display: flex;
  flex-direction: column;
  gap: var(--str-chat__spacing-3);
  max-height: 100%;
  overflow-y: auto;
  min-height: 30vh;
}

.str-chat__message-reactions-details .str-chat__message-reactions-details-reacting-users .str-chat__loading-indicator {
  margin: auto;
}

.str-chat__message-reactions-details .str-chat__message-reactions-details-reacting-users .str-chat__message-reactions-details-reacting-user {
  display: flex;
  align-items: center;
  gap: var(--str-chat__spacing-2);
}

.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 {
  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 28);
  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;
}

.str-chat__list-notifications {
  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-react__notification {
  z-index: 101;
}

.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__thread-header-details .str-chat__thread-header-subtitle {
  overflow-y: hidden;
}

.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__main-panel--hideOnThread + .str-chat__thread-container {
  flex: 1;
}

.str-chat__parent-message-li {
  padding: var(--str-chat__spacing-2);
}

.str-chat__tooltip {
  overflow-y: hidden;
  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__virtual-list .str-chat__typing-indicator {
  position: static;
}

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

.str-chat {
  /* 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/1.3 var(--str-chat__font-family);
  /* The font used for caption texts with emphasize */
  --str-chat__caption-medium-text: 500 0.75rem/1.3 var(--str-chat__font-family);
  /* The font used for caption texts with emphasize */
  --str-chat__caption-strong-text: 700 0.75rem/1.3 var(--str-chat__font-family);
  /* The font used for body texts */
  --str-chat__body-text: 0.875rem/1.2 var(--str-chat__font-family);
  /* The font used for body texts with emphasize */
  --str-chat__body-medium-text: 500 0.875rem/1.2 var(--str-chat__font-family);
  /* The font used for body texts */
  --str-chat__body2-text: 0.9375rem/1.2 var(--str-chat__font-family);
  /* The font used for body texts with emphasize */
  --str-chat__body2-medium-text: 500 0.9375rem/1.2 var(--str-chat__font-family);
  /* The font used for subtitle texts */
  --str-chat__subtitle-text: 1rem/1.1.25 var(--str-chat__font-family);
  /* The font used for subtitle texts with emphasize */
  --str-chat__subtitle-medium-text: 500 1rem/1.25 var(--str-chat__font-family);
  /* The font used for subtitle texts */
  --str-chat__subtitle2-text: 1.25rem/1.2 var(--str-chat__font-family);
  /* The font used for subtitle texts with emphasize */
  --str-chat__subtitle2-medium-text: 500 1.25rem/1.2 var(--str-chat__font-family);
  /* The font used for headline texts */
  --str-chat__headline-text: 1.5rem/1.2 var(--str-chat__font-family);
  /* The font used for headline texts */
  --str-chat__headline2-text: 1.8rem/1.2 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);
  /* Used for online indicator and success messages */
  --str-chat__info-color: var(--str-chat__green500);
}

.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);
  --str-chat__info-color: var(--str-chat__green500);
}

.image-gallery-icon {
  color: #fff;
  transition: all 0.3s ease-out;
  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;
  display: flex;
  justify-content: center;
  align-items: center;
}

.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 .image-gallery-slide {
  background-color: var(--str-chat__secondary-surface-color);
}

.image-gallery-content .image-gallery-slide .str-chat__base-image--load-failed {
  height: var(--str-chat__attachment-max-width);
  width: var(--str-chat__attachment-max-width);
  font-size: 0;
}

.image-gallery-content .image-gallery-slide .str-chat__message-attachment-file--item-download {
  position: absolute;
  left: 0.375rem;
  top: 0.375rem;
}

.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, .image-gallery-content.image-gallery-thumbnails-left .image-gallery-slide .image-gallery-image, .image-gallery-content.image-gallery-thumbnails-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, .image-gallery-slide-wrapper.image-gallery-thumbnails-left, .image-gallery-slide-wrapper.image-gallery-thumbnails-right {
  display: inline-block;
  width: calc(100% - 110px);
}

@media (max-width: 768px) {
  .image-gallery-slide-wrapper.left, .image-gallery-slide-wrapper.right, .image-gallery-slide-wrapper.image-gallery-thumbnails-left, .image-gallery-slide-wrapper.image-gallery-thumbnails-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, .image-gallery-slide.image-gallery-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;
  /* The color of the online indicator (only available in Angular SDK) */
  --str-chat__avatar-online-indicator-color: var(--str-chat__info-color);
  /* The border radius of the online indicator (only available in Angular SDK) */
  --str-chat__avatar-online-indicator-border-radius: var(--str-chat__border-radius-circle);
}

.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);
  display: block;
}

.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__avatar .str-chat__avatar--online-indicator {
  background-color: var(--str-chat__avatar-online-indicator-color);
  border-radius: var(--str-chat__avatar-online-indicator-border-radius);
}

.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__secondary-surface-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 audio recording widget */
  --str-chat__voice-recording-attachment-widget-border-radius: calc(
    var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
  );
  /* Text color used in audio recording widget */
  --str-chat__voice-recording-attachment-widget-color: var(--str-chat__text-color);
  /* Border radius applied to audio recording widget */
  --str-chat__voice-recording-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 recording widget */
  --str-chat__voice-recording-attachment-widget-background-color: var(
    --str-chat__secondary-background-color
  );
  /* Top border of audio recording widget */
  --str-chat__voice-recording-attachment-widget-border-block-start: none;
  /* Bottom border of audio recording widget */
  --str-chat__voice-recording-attachment-widget-border-block-end: none;
  /* Left (right in RTL layout) border of audio recording widget */
  --str-chat__voice-recording-attachment-widget-border-inline-start: none;
  /* Right (left in RTL layout) border of audio recording widget */
  --str-chat__voice-recording-attachment-widget-border-inline-end: none;
  /* Box shadow applied to audio recording widget */
  --str-chat__voice-recording-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: var(--str-chat__image-attachment-background-color);
  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-unsupported,
.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-unsupported .str-chat__message-attachment-unsupported__title {
  font: var(--str-chat__subtitle-medium-text);
  word-break: keep-all;
}

.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);
  word-break: keep-all;
}

.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: linear-gradient(to right, var(--str-chat__primary-color) var(--str-chat__message-attachment-audio-widget-progress), var(--str-chat__disabled-color) var(--str-chat__message-attachment-audio-widget-progress));
  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__voice-recording-widget {
  background: var(--str-chat__voice-recording-attachment-widget-background-color);
  color: var(--str-chat__voice-recording-attachment-widget-color);
  box-shadow: var(--str-chat__voice-recording-attachment-widget-box-shadow);
  border-radius: var(--str-chat__voice-recording-attachment-widget-border-radius);
  border-block-start: var(--str-chat__voice-recording-attachment-widget-border-block-start);
  border-block-end: var(--str-chat__voice-recording-attachment-widget-border-block-end);
  border-inline-start: var(--str-chat__voice-recording-attachment-widget-border-inline-start);
  border-inline-end: var(--str-chat__voice-recording-attachment-widget-border-inline-end);
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget a {
  color: var(--str-chat__voice-recording-attachment-widget-color);
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__title {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
  font: var(--str-chat__subtitle-medium-text);
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__timer {
  font: var(--str-chat__body-text);
  color: var(--str-chat__text-low-emphasis-color);
  white-space: nowrap;
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__wave-progress-bar__amplitude-bar {
  background: var(--str-chat__text-low-emphasis-color);
  border-radius: var(--str-chat__border-radius-circle);
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__wave-progress-bar__amplitude-bar--active {
  background: var(--str-chat__primary-color);
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__wave-progress-bar__progress-indicator {
  background-color: #fff;
  border-radius: var(--str-chat__border-radius-circle);
  border: 1px solid var(--str-chat__secondary-overlay-color);
  cursor: grab;
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__error-message {
  font: var(--str-chat__body-text);
  color: var(--str-chat__text-low-emphasis-color);
}

.str-chat__attachment-list .str-chat__message_attachment__playback-rate-button {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  border-radius: var(--str-chat__border-radius-circle);
  background-color: #fff;
  cursor: pointer;
}

.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-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__message-attachment-audio-widget--play-button svg path {
  fill: var(--str-chat__audio-attachment-controls-button-color);
}

.str-chat__message-attachment-audio-widget--play-button:active {
  background-color: var(--str-chat__audio-attachment-controls-button-pressed-background-color);
}

.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__message-attachment__voice-recording-widget {
  background: var(--str-chat__voice-recording-attachment-widget-background-color);
  color: var(--str-chat__voice-recording-attachment-widget-color);
  box-shadow: var(--str-chat__voice-recording-attachment-widget-box-shadow);
  border-radius: var(--str-chat__voice-recording-attachment-widget-border-radius);
  border-block-start: var(--str-chat__voice-recording-attachment-widget-border-block-start);
  border-block-end: var(--str-chat__voice-recording-attachment-widget-border-block-end);
  border-inline-start: var(--str-chat__voice-recording-attachment-widget-border-inline-start);
  border-inline-end: var(--str-chat__voice-recording-attachment-widget-border-inline-end);
}

.str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__title {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
  word-break: keep-all;
  font: var(--str-chat__subtitle-medium-text);
}

.str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__timer {
  font: var(--str-chat__body-text);
  color: var(--str-chat__text-low-emphasis-color);
  white-space: nowrap;
}

.str-chat__audio_recorder__waveform-box,
.str-chat__wave-progress-bar__track {
  cursor: pointer;
}

.str-chat__audio_recorder__waveform-box .str-chat__wave-progress-bar__amplitude-bar,
.str-chat__wave-progress-bar__track .str-chat__wave-progress-bar__amplitude-bar {
  background: var(--str-chat__text-low-emphasis-color);
  border-radius: var(--str-chat__border-radius-circle);
}

.str-chat__audio_recorder__waveform-box .str-chat__wave-progress-bar__amplitude-bar--active,
.str-chat__wave-progress-bar__track .str-chat__wave-progress-bar__amplitude-bar--active {
  background: var(--str-chat__primary-color);
}

.str-chat__audio_recorder__waveform-box .str-chat__wave-progress-bar__progress-indicator,
.str-chat__wave-progress-bar__track .str-chat__wave-progress-bar__progress-indicator {
  background-color: #fff;
  border-radius: var(--str-chat__border-radius-circle);
  border: 1px solid var(--str-chat__secondary-overlay-color);
  cursor: grab;
}

.str-chat-angular__message-attachment-file-single .str-chat__message-attachment-file--item-first-row {
  color: var(--str-chat__attachment-list-color);
}

.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-unsupported,
.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording,
.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-unsupported .str-chat__attachment-preview-title,
.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-name,
.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-title,
.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-name,
.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-title,
.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-unsupported .str-chat__attachment-preview-file-download,
.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-download,
.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-download {
  --str-chat-icon-color: var(--str-chat__attachment-preview-download-icon-color);
  text-decoration: none;
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-download svg path,
.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-download svg path,
.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-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-voice-recording .str-chat__recording-timer {
  color: var(--str-chat__text-low-emphasis-color);
  font: var(--str-chat__caption-medium-text);
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-delete {
  --str-chat-icon-color: var(--str-chat__attachment-preview-close-icon-color);
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-delete .str-chat__icon {
  background-color: var(--str-chat__attachment-preview-close-icon-background);
  border-radius: 999px;
}

.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 {
  --str-chat-icon-color: var(--str-chat__attachment-preview-retry-icon-color);
  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__audio_recorder-container {
  background-color: var(--str-chat__background-color);
}

.str-chat__audio_recorder button {
  background: none;
  border: none;
  cursor: pointer;
}

.str-chat__audio_recorder button:disabled {
  cursor: default;
}

.str-chat__audio_recorder .str-chat__audio_recorder__cancel-button {
  color: var(--str-chat__text-low-emphasis-color);
}

.str-chat__audio_recorder .str-chat__audio_recorder__toggle-playback-button {
  color: var(--str-chat__text-low-emphasis-color);
}

.str-chat__audio_recorder .str-chat__audio_recorder__pause-recording-button,
.str-chat__audio_recorder .str-chat__audio_recorder__resume-recording-button {
  color: var(--str-chat__danger-color);
}

.str-chat__audio_recorder .str-chat__audio_recorder__pause-recording-button {
  border: 3px solid var(--str-chat__danger-color);
  border-radius: var(--str-chat__border-radius-circle);
}

.str-chat__audio_recorder .str-chat__audio_recorder__stop-button,
.str-chat__audio_recorder .str-chat__audio_recorder__complete-button {
  border-radius: var(--str-chat__border-radius-circle);
  color: var(--str-chat__on-primary-color);
  background-color: var(--str-chat__primary-color);
}

.str-chat__audio_recorder .str-chat__audio_recorder__stop-button .str-chat__loading-indicator svg linearGradient stop:last-child,
.str-chat__audio_recorder .str-chat__audio_recorder__complete-button .str-chat__loading-indicator svg linearGradient stop:last-child {
  stop-color: var(--str-chat__background-color);
}

.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__base-image {
  color: transparent;
}

.str-chat__base-image--load-failed {
  mask-image: var(--str-chat__image-fallback-icon);
  -webkit-mask-image: var(--str-chat__image-fallback-icon);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: 5rem 5rem;
  -webkit-mask-size: 5rem 5rem;
  background-color: var(--str-chat__disabled-color);
}

.str-chat__base-image--load-failed ~ .str-chat__message-attachment-file--item-download .str-chat__message-attachment-download-icon path {
  fill: var(--str-chat__text-color);
}

.str-chat__attachment-preview-image .str-chat__base-image--load-failed {
  mask-size: 1.5rem 1.5rem;
  -webkit-mask-size: 1.5rem 1.5rem;
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-image--error {
  background-color: var(--str-chat__secondary-surface-color);
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-image--error .str-chat__attachment-preview-thumbnail.str-chat__base-image--load-failed {
  background-color: var(--str-chat__disabled-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 {
  --str-chat-icon-color: var(--str-chat__channel-empty-color);
  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 text/icon color for the empty list state */
  --str-chat__channel-list-empty-indicator-color: var(--str-chat__text-low-emphasis-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 {
  --str-chat-icon-color: var(--str-chat__channel-list-empty-indicator-color);
  font: var(--str-chat__headline-text);
  text-align: center;
  color: var(--str-chat__channel-list-empty-indicator-color);
}

.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;
  /* The color of the message status indicator icon (only available in Angular) */
  --str-chat__channel-preview-message-status-color: var(--str-chat__primary-color);
  /* The color of the text that displays the message time (only available in Angular) */
  --str-chat__channel-preview-message-time-color: var(--str-chat__message-secondary-color);
}

.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 .str-chat__channel-preview-messenger--status {
  --str-chat-icon-color: var(--str-chat__channel-preview-message-status-color);
  color: var(--str-chat__channel-preview-message-status-color);
}

.str-chat__channel-preview .str-chat__channel-preview-messenger--status svg path {
  fill: var(--str-chat__channel-preview-message-status-color);
}

.str-chat__channel-preview .str-chat__channel-preview-messenger--time {
  color: var(--str-chat__channel-preview-message-time-color);
  font: var(--str-chat__caption-text);
}

.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 v5+ */
.str-chat {
  /* The color of the icon, only available in Angular v5+ */
  --str-chat-icon-color: var(--str-chat__text-color);
}

.str-chat__icon {
  color: var(--str-chat-icon-color);
}

.str-chat__icon--error {
  --str-chat-icon-color: var(--str-chat__danger-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);
}

@media only screen and (max-device-width: 768px) {
  .str-chat__message .str-chat__attachment-list .str-chat__modal--open .str-chat__modal__inner {
    border-radius: 0;
  }
}
.str-chat__image-carousel .str-chat__image-carousel-stepper {
  --str-chat-icon-color: var(--str-chat__image-carousel-stepper-color);
  cursor: pointer;
}

.str-chat__image-carousel .str-chat__image-carousel-stepper svg path {
  fill: var(--str-chat__image-carousel-stepper-color);
}

.str-chat__link-preview-card .str-chat__link-preview-card__content {
  border-left: 2px solid var(--str-chat__primary-color);
}

.str-chat__link-preview-card .str-chat__link-preview-card__content .str-chat__link-preview-card__content-title {
  font: var(--str-chat__body-medium-text);
}

.str-chat__link-preview-card .str-chat__link-preview-card__content .str-chat__link-preview-card__content-description {
  font: var(--str-chat__caption-text);
}

.str-chat__link-preview-card .str-chat__link-preview-card__dismiss-button svg path {
  fill: var(--str-chat__text-low-emphasis-color);
}

.str-chat {
  /* The color of the loading indicator */
  --str-chat__loading-indicator-color: var(--str-chat__primary-color);
}

.str-chat__loading-indicator svg linearGradient stop:last-child {
  stop-color: var(--str-chat__loading-indicator-color);
}

.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-icon-color: var(--str-chat__message-options-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 {
  background: none;
  border: none;
  border-radius: var(--str-chat__message-options-border-radius);
  color: var(--str-chat__message-options-color);
}

.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,
.str-chat__message .str-chat__custom-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,
.str-chat__message .str-chat__custom-message-metadata .str-chat__message-sender-name {
  font: var(--str-chat__caption-medium-text);
}

.str-chat__message .str-chat__message-status {
  --str-chat-icon-color: var(--str-chat__message-status-color);
  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 {
  --str-chat-icon-color: var(--str-chat__message-error-message-color);
  /* 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);
}

/* This rule won't be applied in browsers that don't support :has() */
.str-chat__li:hover:not(:has(.str-chat__reaction-list:hover, .str-chat__modal--open)) {
  background-color: var(--str-chat__message-active-bacground-color);
}

/* Fallback for when :has() is unsupported */
@supports not selector(:has(a, b)) {
  .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__unread-messages-separator {
  background-color: var(--str-chat__secondary-surface-color);
  color: var(--str-chat__text-low-emphasis-color);
  text-transform: uppercase;
  font: var(--str-chat__caption-strong-text);
}

.str-chat__unread-messages-notification {
  --str-chat-icon-color: var(--str-chat__on-primary-color);
  background-color: var(--str-chat__text-low-emphasis-color);
  border-radius: 1.125rem;
}

.str-chat__unread-messages-notification button {
  cursor: pointer;
  color: var(--str-chat__on-primary-color);
  border: none;
  background-color: transparent;
}

.str-chat__unread-messages-notification button:first-of-type {
  font: var(--str-chat__caption-text);
}

.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 text color used for the edit button */
  --str-chat__message-bounce-edit-button-color: var(--str-chat__primary-color);
  /* The text color used for the send button */
  --str-chat__message-bounce-send-button-color: var(--str-chat__primary-color);
  /* The text color used for the delete button */
  --str-chat__message-bounce-delete-button-color: var(--str-chat__primary-color);
  /* The background color of the button */
  --str-chat__message-bounce-button-background-color: transparent;
  /* Top border of the button */
  --str-chat__message-bounce-button-border-block-start: none;
  /* Bottom border of the button */
  --str-chat__message-bounce-button-border-block-end: none;
  /* Left (right in RTL layout) button of the component */
  --str-chat__message-bounce-button-border-inline-start: none;
  /* Right (left in RTL layout) button of the component */
  --str-chat__message-bounce-button-border-inline-end: none;
  /* Box shadow applied to the button */
  --str-chat__message-bounce-button-box-shadow: none;
}

.str-chat__message-bounce-prompt .str-chat__message-bounce-edit,
.str-chat__message-bounce-prompt .str-chat__message-bounce-send,
.str-chat__message-bounce-prompt .str-chat__message-bounce-delete {
  background: var(--str-chat__message-bounce-button-background-color);
  color: var(--str-chat__message-bounce-button-color);
  box-shadow: var(--str-chat__message-bounce-button-box-shadow);
  border-radius: var(--str-chat__message-bounce-button-border-radius);
  border-block-start: var(--str-chat__message-bounce-button-border-block-start);
  border-block-end: var(--str-chat__message-bounce-button-border-block-end);
  border-inline-start: var(--str-chat__message-bounce-button-border-inline-start);
  border-inline-end: var(--str-chat__message-bounce-button-border-inline-end);
  font: var(--str-chat__body-medium-text);
}

.str-chat__message-bounce-prompt .str-chat__message-bounce-edit {
  color: var(--str-chat__message-bounce-edit-button-color);
}

.str-chat__message-bounce-prompt .str-chat__message-bounce-send {
  color: var(--str-chat__message-bounce-send-button-color);
}

.str-chat__message-bounce-prompt .str-chat__message-bounce-delete {
  color: var(--str-chat__message-bounce-delete-button-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: var(--str-chat__disabled-color);
  /* The border radius used for the borders of the audio recording button */
  --str-chat__start-recording-audio-button-border-radius: var(--str-chat__border-radius-circle);
  /* The text/icon color of the audio recording button */
  --str-chat__start-recording-audio-button-color: var(--str-chat__text-low-emphasis-color);
  /* The background color of the audio recording button */
  --str-chat__start-recording-audio-button-background-color: transparent;
  /* Top border of the audio recording button */
  --str-chat__start-recording-audio-button-border-block-start: 0;
  /* Bottom border of the audio recording button */
  --str-chat__start-recording-audio-button-border-block-end: 0;
  /* Left (right in RTL layout) border of the audio recording button */
  --str-chat__start-recording-audio-button-border-inline-start: 0;
  /* Right (left in RTL layout) border of the audio recording button */
  --str-chat__start-recording-audio-button-border-inline-end: 0;
  /* Box shadow applied to the audio recording button */
  --str-chat__start-recording-audio-button-box-shadow: none;
  /* The color of the audio recording button in disabled state */
  --str-chat__start-recording-audio-button-disabled-color: var(--str-chat__disabled-color);
  /* The background color of the audio recording button in disabled state */
  --str-chat__start-recording-audio-button-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 {
  --str-chat-icon-color: var(--str-chat__message-input-tools-color);
  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 {
  --str-chat-icon-color: var(--str-chat__message-send-color);
  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 {
  --str-chat-icon-color: var(--str-chat__message-send-disabled-color);
  background-color: transparent;
}

.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__start-recording-audio-button {
  background: var(--str-chat__start-recording-audio-button-background-color);
  color: var(--str-chat__start-recording-audio-button-color);
  box-shadow: var(--str-chat__start-recording-audio-button-box-shadow);
  border-radius: var(--str-chat__start-recording-audio-button-border-radius);
  border-block-start: var(--str-chat__start-recording-audio-button-border-block-start);
  border-block-end: var(--str-chat__start-recording-audio-button-border-block-end);
  border-inline-start: var(--str-chat__start-recording-audio-button-border-inline-start);
  border-inline-end: var(--str-chat__start-recording-audio-button-border-inline-end);
}

.str-chat__message-input .str-chat__start-recording-audio-button:disabled {
  background-color: var(--str-chat__message-send-disabled-background-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__message-input .str-chat__recording-permission-denied-notification {
  background-color: var(--str-chat__text-color);
  border-radius: var(--str-chat__border-radius-md);
  color: var(--str-chat__background-color);
}

.str-chat__message-input .str-chat__recording-permission-denied-notification .str-chat__recording-permission-denied-notification__heading,
.str-chat__message-input .str-chat__recording-permission-denied-notification .str-chat__recording-permission-denied-notification__dismiss-button {
  font: var(--str-chat__subtitle2-medium-text);
}

.str-chat__message-input .str-chat__recording-permission-denied-notification .str-chat__recording-permission-denied-notification__message {
  font: var(--str-chat__subtitle-text);
}

.str-chat__message-input .str-chat__recording-permission-denied-notification .str-chat__recording-permission-denied-notification__dismiss-button {
  background: none;
  border: none;
  color: var(--str-chat__background-color);
  cursor: pointer;
  text-transform: uppercase;
}

.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-icon-color: var(--str-chat__jump-to-latest-message-unread-count-background-color);
}

.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__messsage-reactions-details--selected-color: solid var(--str-chat__primary-color);
}

.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__message-reactions-details .str-chat__message-reactions-details-reaction-type {
  border-block-end: solid transparent;
}

.str-chat__message-reactions-details .str-chat__message-reactions-details-reaction-type--selected {
  border-block-end: var(--str-chat__messsage-reactions-details--selected-color);
}

.str-chat__message-reactions-details .str-chat__message-reactions-details-reacting-user {
  font: var(--str-chat__subtitle-text);
}

.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 {
  --str-chat-icon-color: var(--str-chat__modal-close-icon-color);
  background: none;
  border: none;
}

.str-chat__modal .str-chat__modal__close-button .str-chat__icon {
  background-color: var(--str-chat__modal-close-icon-background);
  border-radius: 999px;
}

.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;
  }
}
/* Project specific styles */
/** Ionic CSS Variables **/
:root {
  --ion-color-primary: #009B77;
  --ion-color-primary-rgb: 0, 155, 119;
  --ion-color-primary-contrast: #FFFFFF;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #017977;
  --ion-color-primary-tint: #EAF7F4;
  --ion-color-primary-hover: #14A382;
  --ion-color-secondary: #0A1738;
  --ion-color-secondary-rgb: 10, 23, 56;
  --ion-color-secondary-contrast: #FFFFFF;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #091431;
  --ion-color-secondary-tint: #232E4C;
  --ion-color-tertiary: #F1873A;
  --ion-color-tertiary-rgb: 241, 135, 58;
  --ion-color-tertiary-contrast: #0A1738;
  --ion-color-tertiary-contrast-rgb: 10, 23, 56;
  --ion-color-tertiary-shade: #D47733;
  --ion-color-tertiary-tint: #F2934E;
  --ion-color-success: #017977;
  --ion-color-success-rgb: 1, 121, 119;
  --ion-color-success-contrast: #FFFFFF;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #016A69;
  --ion-color-success-tint: #1A8685;
  --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;
  --ion-color-danger: #EF7F72;
  --ion-color-danger-rgb: 239, 127, 114;
  --ion-color-danger-contrast: #000000;
  --ion-color-danger-contrast-rgb: 0, 0, 0;
  --ion-color-danger-shade: #D27064;
  --ion-color-danger-tint: #F18C80;
  --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;
  --ion-color-medium: #C1C3C8;
  --ion-color-medium-rgb: 193, 195, 200;
  --ion-color-medium-contrast: #0A1738;
  --ion-color-medium-contrast-rgb: 10, 23, 56;
  --ion-color-medium-shade: #AAACB0;
  --ion-color-medium-tint: #C7C9CE;
  --ion-color-light: #EEEEEE;
  --ion-color-light-rgb: 238, 238, 238;
  --ion-color-light-contrast: #0A1738;
  --ion-color-light-contrast-rgb: 10, 23, 56;
  --ion-color-light-shade: #D1D1D1;
  --ion-color-light-tint: #F0F0F0;
  --ion-font-family: "Nunito", sans-serif;
  --ion-text-color: var(--ion-color-secondary);
  --ion-padding: 24px;
  --ion-body-background: #FFFFFF;
  --ion-text-muted-color: #7F8187;
  --ion-tabs-height: 80px;
  --ion-box-shadow: 0 2px 4px 0 rgba(var(--ion-color-secondary-rgb), .08);
  --ion-box-shadow-large: 0 2px 8px 0 rgba(var(--ion-color-secondary-rgb), .08);
  --ion-box-shadow-inset: inset 0 2px 4px 0 rgba(var(--ion-color-secondary-rgb), .08);
  --ion-font-weight-normal: 400;
  --ion-font-weight-semibold: 600;
  --ion-font-weight-bold: 700;
  --ion-font-size-1: 0.75rem;
  --ion-font-size-2: 0.875rem;
  --ion-font-size-3: 1rem;
  --ion-font-size-4: 1.25rem;
  --ion-font-size-5: 1.5rem;
  --ion-font-size-6: 2rem;
  --ion-animation-duration-multiplier: 1;
  --custom-scrollbar-width: 8px;
  --custom-scrollbar-height: 8px;
  --custom-scrollbar-margin: 8px;
  --custom-scrollbar-border-radius: 4px;
  --custom-scrollbar-track-background: var(--ion-color-light);
  --custom-scrollbar-thumb-background: var(--ion-color-primary);
  --custom-scrollbar-thumb-hover-background: var(--ion-color-primary-hover);
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --ion-animation-duration-multiplier: 0;
  }
}
@media (prefers-contrast: less) {
  :root {
    --ion-color-primary: #61A89A;
    --ion-color-primary-rgb: 97, 168, 154;
  }
}
@media (prefers-contrast: more) {
  :root {
    --ion-color-primary: #005D48;
    --ion-color-primary-rgb: 93, 72, 100;
    --ion-text-color: #000000;
  }
}
@media (prefers-contrast: custom) {
  :root {
    --ion-color-primary: #222222;
    --ion-color-primary-rgb: 34, 34, 24;
    --ion-color-primary-shade: #000000;
    --ion-color-primary-tint: #CCCCCC;
    --ion-text-color: #000000;
    --ion-text-muted-color: #888888;
  }
}
@media (forced-colors: active) {
  :root {
    --ion-color-primary: #222222;
    --ion-color-primary-rgb: 34, 34, 24;
    --ion-color-primary-shade: #000000;
    --ion-color-primary-tint: #CCCCCC;
  }
  :root * {
    forced-color-adjust: none;
  }
}

ion-alert .alert-message.sc-ion-alert-md, ion-alert .alert-message.sc-ion-alert-ios {
  font-size: var(--ion-font-size-2);
}
ion-alert .alert-button.sc-ion-alert-md {
  text-transform: none;
}
ion-alert .alert-button.sc-ion-alert-md, ion-alert .alert-button.sc-ion-alert-ios {
  font-size: var(--ion-font-size-3);
}
ion-alert .alert-button-role-destructive.sc-ion-alert-md {
  color: var(--ion-color-danger);
}
ion-alert .alert-input.sc-ion-alert-md, ion-alert .alert-input.sc-ion-alert-ios {
  min-height: 40px;
  margin-bottom: 2px;
  padding: 8px 12px;
  border: 1px solid var(--ion-color-medium);
  border-radius: 5px;
  box-shadow: var(--ion-box-shadow-inset);
}
ion-alert .alert-input.sc-ion-alert-md:focus, ion-alert .alert-input.sc-ion-alert-ios:focus {
  border-bottom: 1px solid var(--ion-color-medium);
  margin-bottom: 2px;
}

ion-avatar, ion-avatar img {
  border-radius: 100% !important;
}
ion-avatar[size=small] {
  width: 32px;
  height: 32px;
}
ion-avatar:not([size]), ion-avatar[size=medium] {
  width: 48px;
  height: 48px;
}
ion-avatar[size=large] {
  width: 64px;
  height: 64px;
}
ion-avatar[size=xlarge] {
  width: 100px;
  height: 100px;
}
ion-avatar.avatar-bordered {
  border: 3px solid var(--ion-body-background);
  background: var(--ion-body-background);
}
ion-avatar.ion-activatable {
  cursor: pointer;
}

ion-back-button {
  --background: var(--ion-color-light);
  --background-hover: var(--ion-color-light-shade);
  --border-radius: 4px;
  --color: var(--ion-color-base) !important;
  --icon-font-size: var(--ion-font-size-3);
  --icon-margin-start: 0;
  --icon-margin-end: 4px;
  --padding-start: 4px;
  --padding-end: 6px;
  --padding-top: 10px;
  --padding-bottom: 10px;
  --margin-top: 8px;
  --margin-bottom: 8px;
  --margin-start: 5px;
  --margin-end: 5px;
  font-size: var(--ion-font-size-3);
  text-transform: none;
  padding-right: 10px;
}
ion-back-button.back-button-has-icon-only {
  --icon-margin-end: 0;
  --padding-start: 5px;
  --padding-end: 5px;
}
ion-back-button:not(.ion-color) {
  --ion-color-base: var(--ion-color-primary);
}
ion-back-button::part(native) {
  box-shadow: var(--ion-box-shadow);
}

ion-badge {
  border-radius: 16px;
}

ion-button {
  --border-radius: 4px;
  --min-height: 40px;
  --padding-start: 24px;
  --padding-end: 24px;
  height: auto;
  min-height: var(--min-height);
  font-size: var(--ion-font-size-3);
  font-weight: var(--ion-font-weight-bold);
  line-height: 1.5;
  text-transform: none;
  letter-spacing: normal;
}
ion-button::part(native) {
  min-height: var(--min-height);
  display: flex;
  align-items: center;
  justify-content: center;
}
ion-button:not([fill=clear]) {
  --box-shadow: var(--ion-box-shadow);
}
ion-button[disabled] {
  --ion-color-base: var(--ion-text-muted-color) !important;
  opacity: 1;
}
ion-button[size=small] {
  --min-height: 32px;
  --padding-start: 12px;
  --padding-end: 12px;
  font-size: var(--ion-font-size-2);
}
ion-button[size=small].button-has-icon-only, .sc-ion-buttons-md-s ion-button[size=small].button-has-icon-only, .sc-ion-buttons-ios-s ion-button[size=small].button-has-icon-only {
  --padding-start: 4px;
  --padding-end: 4px;
  --padding-top: 4px;
  --padding-bottom: 4px;
}
.sc-ion-buttons-md-s ion-button[size=small].button-has-icon-only, .sc-ion-buttons-ios-s ion-button[size=small].button-has-icon-only {
  width: 40px;
  height: 40px;
}
ion-button[size=large] {
  --min-height: 56px;
}
ion-button[size=large]:not([fill=clear]) {
  --box-shadow: var(--ion-box-shadow-large);
}
ion-button[shape=circle] {
  --border-radius: 50%;
  --padding-start: 0;
  --padding-end: 0;
  aspect-ratio: 1/1;
}
ion-button[shape=circle]:not([size]) ion-icon {
  font-size: var(--ion-font-size-5);
}
ion-button.ion-color-light:not([disabled]) {
  --ion-color-contrast: var(--ion-color-primary) !important;
}
ion-button.ion-color-light[disabled] {
  --ion-color-contrast: var(--ion-color-primary-contrast) !important;
}
ion-card.ion-color-primary ion-button.ion-color-light:not(:hover), .chat-share-data ion-button.ion-color-light:not(:hover) {
  --ion-color-base: var(--ion-color-primary-contrast) !important;
}
ion-button.modal-close-button {
  --min-height: 40px;
  --padding-start: 16px;
  --padding-end: 16px;
  margin: 12px;
}
ion-button.unread {
  position: relative;
  font-weight: var(--ion-font-weight-bold);
}
ion-button.unread::after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ion-color-primary);
}
ion-button.unread ion-label {
  font-weight: var(--ion-font-weight-bold);
}

ion-card {
  margin: 0;
  box-shadow: none;
  border: 1px solid var(--ion-color-medium);
  border-radius: 8px;
}
ion-card.ion-color-primary {
  background: var(--ion-color-tint);
}
ion-card .card-content-md p,
ion-card .card-content-ios p {
  margin: 0;
}
ion-card.post-image-card {
  position: relative;
  font-size: 0;
  border-color: var(--ion-color-light);
}
ion-card.post-image-card img {
  width: 100%;
}
ion-card.post-image-card ion-button {
  --padding-start: 6px;
  --padding-end: 6px;
  --box-shadow: var(--ion-box-shadow);
  position: absolute;
  top: 16px;
  right: 16px;
}
ion-card.ion-activatable:focus {
  border: 1px solid var(--ion-color-primary);
}

ion-checkbox {
  --border-radius: 3px;
  --border-color: var(--ion-color-dark);
  --border-width: 2px;
  --size: 20px;
  --checkmark-width: 3px;
}
ion-checkbox ::ng-deep .label-text-wrapper {
  white-space: normal !important;
}
ion-checkbox:focus {
  --border-color: var(--ion-color-primary);
}

ion-content:not(ion-modal ion-content):not(ion-popover ion-content):not(ion-header + ion-content:not(ion-modal ion-content):not(ion-popover ion-content)) {
  --padding-top: var(--ion-safe-area-top);
}
ion-content:not(ion-modal ion-content):not(ion-popover ion-content):not(ion-header + ion-content:not(ion-modal ion-content):not(ion-popover ion-content)) > header:first-child {
  margin-top: calc(var(--ion-safe-area-top) * -1);
  padding-top: calc(var(--ion-safe-area-top) + var(--padding-top));
}
ion-content:not(ion-modal ion-content):not(ion-popover ion-content):has(ion-header) {
  --offset-top: 0px !important;
}

ion-datetime-button {
  display: block;
}
ion-datetime-button::part(native) {
  padding-top: 0;
  padding-bottom: 4px;
  border-radius: 4px;
  padding-inline: 4px 6px;
  font-size: 21px;
  background: transparent;
}
ion-datetime-button ion-icon {
  vertical-align: middle;
  font-size: 25px;
}
ion-datetime-button:active {
  color: var(--ion-color-medium);
}

ion-footer {
  opacity: 1;
  transform: scale(1) translateY(0);
  transform-origin: center bottom;
  transition: opacity calc(0.2s * var(--ion-animation-duration-multiplier)) ease-out, transform calc(0.2s * var(--ion-animation-duration-multiplier)) ease-out;
  will-change: opacity, transform;
}
ion-footer.footer-translucent {
  box-shadow: none;
}
ion-footer.footer-translucent .footer-background {
  display: none;
}
ion-footer.footer-translucent ion-toolbar {
  --opacity: 1;
  --background: transparent;
  --border-width: 0 !important;
}
ion-footer.hidden {
  opacity: 0;
  transform: scale(0) translateY(calc(100% + var(--ion-tabs-height) + 32px));
  pointer-events: none;
}

.md ion-header {
  --opacity-scale: 1 !important;
}
ion-header .header-background {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
ion-header.header-collapse-condense-inactive ion-toolbar {
  --border-width: 0 !important;
}
ion-header[collapse=condense] ion-toolbar {
  --min-height: 0;
  background: var(--ion-color-base);
}
ion-header[collapse=condense] ion-toolbar.ion-color-primary > * {
  color: var(--ion-color-b);
}

ion-input[fill=outline] {
  --background: var(--ion-body-background);
  --border-color: var(--ion-color-medium);
  --placeholder-color: var(--ion-color-medium);
  --placeholder-opacity: 1;
  --padding-top: 4px;
  --padding-bottom: 4px;
  --padding-start: 16px;
  --padding-end: 16px;
  --border-radius: 5px !important;
  min-height: 40px !important;
  border: none;
  border-radius: var(--border-radius);
}
ion-input[fill=outline][labelPlacement=stacked], ion-input[fill=outline][label-placement=stacked] {
  margin-top: max(1.25rem, 26px);
}
ion-input[fill=outline][labelPlacement=stacked] .label-text-wrapper, ion-input[fill=outline][label-placement=stacked] .label-text-wrapper {
  transform: none !important;
  max-width: none !important;
  position: absolute;
  top: calc(-1 * max(1.25rem, 26px));
  left: 0;
  font-size: var(--ion-font-size-2);
  font-weight: var(--ion-font-weight-bold);
}
ion-input[fill=outline][labelPlacement=stacked] .counter, ion-input[fill=outline][label-placement=stacked] .counter {
  position: absolute;
  top: -22px;
  right: 0;
}
ion-input[fill=outline] .input-outline-container {
  display: none !important;
}
ion-input[fill=outline] .input-wrapper {
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--ion-box-shadow-inset);
}
ion-input[fill=outline] .native-input {
  margin: 0 !important;
}
ion-input[fill=outline] .input-bottom {
  --padding-start: 0;
  border: none;
  justify-content: flex-start;
}
ion-input[fill=outline] .input-bottom .error-text {
  font-size: var(--ion-font-size-2);
}
ion-input ion-button[slot=end],
ion-input ion-datetime-button[slot=end] {
  --padding-start: 8px;
  --padding-end: 8px;
  --box-shadow: none;
  margin-inline-end: -12px !important;
  margin-block: -6px;
  pointer-events: auto;
}
ion-input ion-button[slot=end]::before,
ion-input ion-datetime-button[slot=end]::before {
  content: "";
  display: block;
  position: absolute;
  margin-left: -3px;
  width: 1px;
  top: 1px;
  bottom: 1px;
  background: var(--ion-color-medium);
}
ion-input ion-button[slot=end] ion-icon[slot=icon-only],
ion-input ion-datetime-button[slot=end] ion-icon[slot=icon-only] {
  font-size: 25px;
}
html[dir=rtl] ion-input > ion-button[slot=end],
html[dir=rtl] ion-input > ion-datetime-button[slot=end] {
  right: auto;
  left: 2px;
}
ion-input > ion-datetime-button[slot=end] {
  top: 4px;
}

ion-item {
  --border-color: var(--ion-color-light);
  --inner-padding-top: 8px;
  --inner-padding-bottom: 8px;
  --detail-icon-opacity: 1;
  --detail-icon-font-size: var(--ion-font-size-3);
  font-size: var(--ion-font-size-3);
}
ion-item.ion-no-inner-padding {
  --padding-start: 0;
  --padding-end: 0;
}
ion-item:not([lines]) {
  --inner-border-width: 0;
  border: none;
}
ion-item[lines=full] {
  border: 1px solid var(--border-color);
}
ion-item[fill=clear] {
  width: -moz-fit-content;
  width: fit-content;
}
ion-item[fill=clear] ion-checkbox, ion-item[fill=clear] ion-radio {
  margin-top: 0;
  margin-bottom: 0;
}
ion-item:last-of-type:not(.ion-item-checkbox, .ion-item-radio)::part(native) {
  border-bottom-width: 0;
}
ion-item.has-checkbox, ion-item.has-radio {
  border: 2px solid var(--ion-color-light);
  border-radius: 6px;
}
ion-item.has-checkbox:has(.checkbox-checked), ion-item.has-checkbox:has(.radio-checked), ion-item.has-radio:has(.checkbox-checked), ion-item.has-radio:has(.radio-checked) {
  --background: var(--ion-color-primary-tint);
  border-color: var(--ion-color-primary);
}
ion-item:not(.ion-color) {
  --color: var(--ion-text-color);
}
ion-item .sc-ion-label-md-s.ion-text-wrap,
ion-item .sc-ion-label-ios-s.ion-text-wrap {
  font-size: var(--ion-font-size-3);
}
ion-item .sc-ion-label-md-s > p:not(:first-child),
ion-item .sc-ion-label-ios-s > p:not(:first-child) {
  font-size: var(--ion-font-size-2);
}
.item-swiper ion-item {
  max-width: calc(100% - 17px);
}
ion-list.ion-flex-row ion-item:not(:last-of-type) {
  border-right: 1px solid var(--ion-color-medium);
}
ion-item .indicator {
  display: block;
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 4px;
  background: var(--ion-color-tertiary);
  border-radius: 0 4px 4px 0/0 8px 8px 0;
}
ion-item.ion-color .indicator {
  background: var(--ion-color-contrast);
}
ion-item ion-avatar[slot=start] {
  margin: 0;
  margin-inline: 0 16px;
}
ion-item .item-detail-button {
  --padding-start: 4px;
  --padding-end: 4px;
  min-width: 40px;
  box-shadow: var(--ion-box-shadow);
  pointer-events: none;
}
ion-item .item-detail-button ion-icon {
  font-size: var(--ion-font-size-3);
}

ion-list.list-md {
  padding-top: 0;
  padding-bottom: 0;
}
ion-list.ion-flex-row {
  align-items: stretch;
}
ion-list.ion-flex-row > ion-item {
  --min-height: 100%;
}
ion-card:not(.ion-color) ion-list:not(.ion-color):not([lines=none]) {
  border: 1px solid var(--ion-color-medium);
}
ion-card:not(.ion-color) ion-list:not(.ion-color):not([lines=none])[lines=full] ion-item:last-of-type {
  --border-width: 0;
}

ion-modal ion-back-button {
  display: block;
}
ion-modal.modal-sheet.md {
  --border-radius: 8px;
}
ion-modal.modal-sheet ion-toolbar {
  --border-width: 0 !important;
}
ion-modal.modal-sheet ion-title {
  text-align: left;
  padding-inline: 12px;
  font-size: var(--ion-font-size-5);
}

ion-tabs .ion-page > ion-content {
  --padding-bottom: calc(var(--ion-safe-area-bottom) + var(--ion-tabs-height));
}
ion-tabs .ion-page > ion-content.ion-padding, ion-tabs .ion-page > ion-content.ion-padding-vertical, ion-tabs .ion-page > ion-content.ion-padding-bottom {
  --padding-bottom: calc(var(--ion-padding) + var(--ion-safe-area-bottom) + var(--ion-tabs-height));
}
ion-tabs .ion-page > ion-footer {
  margin-bottom: calc(16px + var(--ion-safe-area-bottom) + var(--ion-tabs-height));
}
ion-tabs .ion-page > ion-footer + ion-content {
  --padding-bottom: 0px;
}
ion-tabs .ion-page > ion-footer + ion-content.ion-padding, ion-tabs .ion-page > ion-footer + ion-content.ion-padding-vertical, ion-tabs .ion-page > ion-footer + ion-content.ion-padding-bottom {
  --padding-bottom: var(--ion-padding);
}

html.plt-android.keyboard-visible .ion-page:not(ion-app):not(app-tabs):not(ion-popover .ion-delegate-host):not(.ion-page-hidden) {
  padding-bottom: calc(var(--keyboard-height) + var(--ion-safe-area-top) + var(--ion-safe-area-bottom) + var(--ion-android-safe-area-bottom, 0px) - var(--ion-tabs-height, 0px));
}
html.plt-android.keyboard-visible ion-tabs .ion-page > ion-footer {
  margin-bottom: 0;
}

html.qr-scanner-visible .ion-page:not(ion-app):not(app-tabs):not(.ion-delegate-host):not(.ion-page-hidden) .content-card {
  --background: transparent;
}
html.qr-scanner-visible .ion-page:not(ion-app):not(app-tabs):not(.ion-delegate-host):not(.ion-page-hidden) ion-content {
  --background: transparent;
  --ion-color-base: transparent !important;
}

ion-progress-bar {
  --background: var(--ion-color-medium);
  --progress-size: 5px;
  --track-size: 4px;
  height: var(--progress-size);
  border-radius: calc(var(--progress-size) / 2);
}

ion-refresher.refresher-active {
  z-index: 11;
}

ion-segment {
  --margin-top: 5px;
  --margin-end: 0;
  --margin-bottom: 5px;
  --margin-start: 0;
  border-radius: 24px;
  padding: 2px;
}
ion-segment.ion-color ion-segment-button {
  --indicator-color: var(--ion-color-base);
  --color: var(--ion-color-shade);
  --color-checked: var(--ion-color-contrast);
}
ion-segment-button {
  --border-radius: 20px;
  --indicator-box-shadow: 0 2px 0 0 var(--app-shadow-color);
  min-height: 0;
  line-height: normal;
}
ion-segment-button ion-label {
  font-size: var(--ion-font-size-3);
  font-weight: var(--ion-font-weight-bold);
}

ion-skeleton-text {
  width: auto;
  border-radius: 8px;
}
ion-avatar ion-skeleton-text {
  border-radius: 50%;
}

ion-tab-bar {
  --tab-indicator-width: 24px;
  --background: var(--ion-body-background);
  --border: 1px solid var(--ion-color-light);
  --color: var(--ion-color-secondary);
  height: calc(var(--ion-tabs-height) - 2px);
  padding-bottom: 0;
  border-radius: 16px;
  border: var(--border);
  margin: 16px 16px calc(var(--ion-safe-area-bottom, 0px) + 16px) 16px;
  box-shadow: var(--ion-box-shadow-large);
}
ion-tab-bar.tab-bar-translucent {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
ion-tab-bar ion-tab-button {
  position: relative;
  font-size: var(--ion-font-size-2);
}
ion-tab-bar ion-tab-button ion-label {
  font-weight: var(--ion-font-weight-bold);
  color: var(--ion-color-secondary);
}
ion-tab-bar ion-tab-button ion-icon {
  font-size: var(--ion-font-size-5);
}
ion-tab-bar ion-tab-button::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 4px;
  height: 4px;
  width: var(--tab-indicator-width);
  margin-left: calc(var(--tab-indicator-width) / -2);
  border-radius: 2px;
  background: var(--ion-color-primary);
  transform: scaleX(0);
  opacity: 0;
  transition: transform calc(0.2s * var(--ion-animation-duration-multiplier)) ease-out, opacity calc(0.2s * var(--ion-animation-duration-multiplier)) ease-out;
  will-change: transform, opacity;
}
ion-tab-bar ion-tab-button.tab-selected::after {
  transform: scaleX(1);
  opacity: 1;
}
@media (min-width: 768px) {
  ion-tab-bar {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}

ion-title {
  font-size: var(--ion-font-size-3);
}
@media (max-width: 360px) {
  ion-title {
    font-size: var(--ion-font-size-2);
  }
}

ion-toast {
  --background: var(--ion-color-light);
  --color: var(--ion-text-color);
  --button-color: var(--ion-text-color);
}
ion-toast::part(header) {
  font-weight: var(--ion-font-weight-bold);
}

ion-textarea, ion-textarea.sc-ion-textarea-ios-h:not(.legacy-textarea), ion-textarea.sc-ion-textarea-md-h:not(.legacy-textarea) {
  min-height: 40px;
  --padding-bottom: 0;
}
ion-textarea[fill=outline] {
  --border-radius: 5px;
  --border-width: 0 !important;
  --border-color: var(--ion-color-medium);
  --placeholder-color: var(--ion-color-medium);
  --placeholder-opacity: 1;
}
ion-textarea[fill=outline] .textarea-wrapper {
  --background: var(--ion-body-background);
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--ion-box-shadow-inset);
  padding-inline-start: 0;
  padding-inline-end: 0;
}
ion-textarea[fill=outline] .textarea-wrapper textarea {
  --min-height: 40px !important;
  padding: 8px 16px !important;
}
ion-textarea[fill=outline] .textarea-bottom {
  padding-inline-start: 0;
  padding-inline-end: 0;
}

ion-toolbar {
  background: var(--ion-color-base);
}
ion-toolbar:not(.ion-color) {
  --ion-toolbar-background: var(--ion-body-background);
}
ion-toolbar.button-toolbar {
  --min-height: 0;
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-start: 0;
  --padding-end: 0;
  border: 1px solid var(--ion-color-light);
  border-radius: 4px;
  box-shadow: var(--ion-box-shadow);
}
ion-toolbar.button-toolbar ion-buttons {
  padding: 0;
}
ion-toolbar.button-toolbar > ion-buttons {
  min-height: 0;
}
ion-toolbar.button-toolbar > ion-buttons ion-button {
  --box-shadow: none;
  --padding-start: 4px;
  --padding-end: 4px;
  margin: 0;
  flex-grow: 1;
}
ion-toolbar.button-toolbar > ion-buttons ion-button + ion-button {
  border-left: 1px solid var(--ion-color-light);
}
ion-toolbar.toolbar-statusbar-only {
  display: none;
}
html.plt-hybrid ion-toolbar.toolbar-statusbar-only {
  display: block;
  --min-height: 0;
}

.str-chat {
  --str-chat__primary-color: var(--ion-color-primary);
  --str-chat__primary-overlay-color: rgba(var(--ion-color-primary-rgb), .6);
  --str-chat__active-primary-color: var(--ion-color-primary-shade);
  --str-chat__surface-color: var(--ion-color-medium);
  --str-chat__secondary-surface-color: var(--ion-body-background);
  --str-chat__primary-surface-color: var(--ion-color-primary-tint);
  --str-chat__primary-surface-color-low-emphasis: var(--ion-color-primary);
  --str-chat__own-message-reaction-color: var(--ion-color-primary-contrast);
  --str-chat__channel-preview-color: var(--ion-color-secondary);
  --str-chat__channel-preview-border-block-end: 1px solid var(--ion-color-light);
  --str-chat__font-family: var(--ion-font-family);
  --str-chat__deleted-message-background-color: var(--ion-color-light);
  --str-chat__message-bubble-border-radius: 8px;
  --str-chat__message-bubble-border-block-start: 1px solid var(--ion-color-medium);
  --str-chat__message-bubble-border-block-end: 1px solid var(--ion-color-medium);
  --str-chat__message-bubble-border-inline-start: 1px solid var(--ion-color-medium);
  --str-chat__message-bubble-border-inline-end: 1px solid var(--ion-color-medium);
  --str-chat__message-input-background-color: var(--ion-color-primary-tint);
  --str-chat__message-send-background-color: var(--ion-color-primary);
  --str-chat__message-send-color: var(--ion-color-primary-contrast);
  --str-chat__message-send-disabled-background-color: var(--ion-color-primary);
  --str-chat__message-send-disabled-color: var(--ion-color-medium);
  --str-chat__message-send-border-radius: 5px;
  --border-color: var(--ion-color-medium);
  --str-chat__message-textarea-background-color: var(--ion-body-background);
  --str-chat__message-textarea-border-radius: 5px;
  --str-chat__message-textarea-border-block-start: 1px solid var(--border-color);
  --str-chat__message-textarea-border-block-end: 1px solid var(--border-color);
  --str-chat__message-textarea-border-inline-start: 1px solid var(--border-color);
  --str-chat__message-textarea-border-inline-end: 1px solid var(--border-color);
  --str-chat__message-textarea-box-shadow: var(--ion-box-shadow-inset);
}
.str-chat__message-bubble {
  --str-chat__message-max-width: 400px;
  overflow: hidden;
}
.str-chat__message-bubble img {
  display: block;
}
.str-chat__message-bubble app-post-card {
  display: block;
  margin: 3px;
  border-radius: 8px 8px 0 0;
  padding: 16px;
  background: var(--ion-body-background);
}
@media (max-width: 375px) {
  .str-chat__message-bubble app-post-card {
    zoom: 0.85;
  }
}
.str-chat__message-bubble app-post-card > ion-item {
  padding-top: 0 !important;
}
.str-chat__message-bubble app-post-card .post-content div.ion-margin-bottom {
  margin-bottom: 0 !important;
}
.str-chat__message-bubble app-post-card ::ng-deep .post-image-card {
  max-width: 200px;
}
.str-chat__message-text-inner span {
  white-space: pre-wrap;
}
.str-chat__message-input {
  padding: 16px 16px calc(16px + var(--ion-safe-area-bottom)) 16px;
}
.str-chat__message-textarea {
  padding: 2px !important;
}
.str-chat__message-simple-status, .str-chat__message-simple-timestamp, .str-chat__message-actions-container, .str-chat__message-reactions-host {
  display: none !important;
}
.str-chat__file-input-container {
  order: 1;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0 8px;
  background: var(--ion-color-primary-tint);
  transition: background-color 0.3s ease;
}
.str-chat__file-input-container:active {
  background: rgba(var(--ion-color-primary-rgb), 0.25);
}
.str-chat__file-input-container stream-icon {
  background: url("/assets/images/camera.svg") no-repeat center/contain;
}
.str-chat__file-input-container stream-icon > svg {
  visibility: hidden;
}
.str-chat__send-button {
  order: 2;
  transition: background-color 0.3s ease;
}
.str-chat__send-button:active {
  --str-chat__message-send-background-color: var(--ion-color-primary-shade);
}
.str-chat__send-button stream-icon-placeholder {
  pointer-events: none;
}
.str-chat__send-button stream-icon {
  pointer-events: none;
  position: relative;
  left: -2px;
}
.str-chat__textarea__textarea::placeholder {
  color: var(--ion-color-medium);
}
.str-chat__attachment-preview stream-icon-placeholder {
  pointer-events: none;
}
.str-chat__attachment-preview-image {
  flex-shrink: 0;
}
.str-chat__attachment-preview-file {
  flex-shrink: 0;
}
.str-chat__attachment-preview-file stream-icon-placeholder[icon=unspecified-filetype] {
  display: none;
}
.str-chat__unread-messages-separator-wrapper, .str-chat__unread-messages-separator {
  display: none;
}

.chat-attachment-image {
  cursor: pointer;
}

.chat-attachment-file {
  --border-radius: 8px;
}

.chat-channel-item ion-label p {
  line-height: normal !important;
}

stream-message[data-is-single-emoji=true] .str-chat__message-text-inner p > span {
  font-size: var(--ion-font-size-6) !important;
  line-height: calc(var(--ion-font-size-6) * 1.5) !important;
}

stream-attachment-preview-list {
  width: 100%;
}

swiper {
  --swiper-theme-color: var(--ion-color-base);
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-inactive-color: var(--ion-color-medium);
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bottom: -32px;
}
swiper:not(.ion-color) {
  --swiper-theme-color: var(--ion-color-primary);
}
ion-content.ion-color-primary swiper:not(.ion-color) {
  --swiper-theme-color: var(--ion-color-tertiary);
}
swiper[slidesPerView=auto] .swiper-slide {
  width: auto;
}
swiper.ion-padding {
  padding: var(--padding, 16px);
}
swiper .swiper-horizontal > .swiper-pagination-bullets, swiper .swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom);
}
swiper .swiper-pagination-bullet {
  border-radius: 6px;
  transition: width calc(0.2s * var(--ion-animation-duration-multiplier)) ease;
  will-change: width;
}
swiper .swiper-pagination-bullet-active {
  width: 39px;
}
swiper .swiper-scrollbar.swiper-scrollbar-horizontal {
  left: 50%;
  bottom: 0;
  height: 8px;
  transform: translateX(-50%);
  max-width: 600px;
  background: var(--ion-color-primary-tint);
}
section.ion-color-primary swiper .swiper-scrollbar.swiper-scrollbar-horizontal {
  background: var(--ion-color-primary-contrast);
}
swiper .swiper-scrollbar.swiper-scrollbar-horizontal .swiper-scrollbar-drag {
  background: var(--ion-color-medium);
}
swiper:has(.swiper-scrollbar) {
  padding-bottom: 16px;
}
@media (prefers-reduced-motion: reduce) {
  swiper .swiper-wrapper {
    transition-duration: 0s !important;
  }
}

/**
 * @NOTE: See variables.scss for accessibility related theming
 */
.keyboard-skip {
  position: fixed;
  display: none;
  pointer-events: none;
  z-index: 100;
  margin: calc(var(--ion-safe-area-top) + 8px) 0 0 calc(var(--ion-safe-area-left) + 8px);
  padding: 8px 16px;
  background-color: var(--ion-color-primary-shade);
  color: var(--ion-color-primary-contrast);
  font-size: var(--ion-font-size-3);
  font-weight: var(--ion-font-weight-bold);
  border-radius: 5px;
  -webkit-appearance: none;
}
.plt-desktop .keyboard-skip {
  display: inline-block;
  pointer-events: all;
  transform: translateY(-200%);
  transition: transform calc(0.2s * var(--ion-animation-duration-multiplier));
  will-change: transform;
}
.plt-desktop .keyboard-skip:focus {
  transform: translateY(0);
}

@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/nunito/Nunito-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/nunito/Nunito-RegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/nunito/Nunito-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/nunito/Nunito-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/nunito/Nunito-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/nunito/Nunito-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
}
html {
  font-size: 100%;
}

.ion-text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ion-text-small {
  font-size: var(--ion-font-size-2);
  line-height: 1.43;
}

.ion-font-weight-normal {
  font-weight: var(--ion-font-weight-normal);
}

.ion-font-weight-semibold {
  font-weight: var(--ion-font-weight-semibold);
}

.ion-font-weight-bold {
  font-weight: var(--ion-font-weight-bold);
}

h1, .reset-font h1, ion-card .card-content-md h1,
ion-card .card-content-ios h1, ion-item .sc-ion-label-md-s h1,
ion-item .sc-ion-label-ios-s h1, h2, .reset-font h2, ion-card .card-content-md h2,
ion-card .card-content-ios h2, ion-item .sc-ion-label-md-s h2,
ion-item .sc-ion-label-ios-s h2, h3, .reset-font h3, ion-card .card-content-md h3,
ion-card .card-content-ios h3, ion-item .sc-ion-label-md-s h3,
ion-item .sc-ion-label-ios-s h3, h4, .reset-font h4, ion-card .card-content-md h4,
ion-card .card-content-ios h4, ion-item .sc-ion-label-md-s h4,
ion-item .sc-ion-label-ios-s h4, h5, .reset-font h5, ion-card .card-content-md h5,
ion-card .card-content-ios h5, ion-item .sc-ion-label-md-s h5,
ion-item .sc-ion-label-ios-s h5 {
  font-weight: var(--ion-font-weight-bold);
  color: var(--ion-color-secondary);
  -webkit-user-select: none;
          user-select: none;
}

h1, .reset-font h1, ion-card .card-content-md h1,
ion-card .card-content-ios h1, ion-item .sc-ion-label-md-s h1,
ion-item .sc-ion-label-ios-s h1 {
  font-size: var(--ion-font-size-6);
  line-height: 1.5;
}

h2, .reset-font h2, ion-card .card-content-md h2,
ion-card .card-content-ios h2, ion-item .sc-ion-label-md-s h2,
ion-item .sc-ion-label-ios-s h2 {
  font-size: var(--ion-font-size-5);
  line-height: 1.33;
}

h3, .reset-font h3, ion-card .card-content-md h3,
ion-card .card-content-ios h3, ion-item .sc-ion-label-md-s h3,
ion-item .sc-ion-label-ios-s h3 {
  font-size: var(--ion-font-size-4);
  line-height: 1.6;
}

h4, .reset-font h4, ion-card .card-content-md h4,
ion-card .card-content-ios h4, ion-item .sc-ion-label-md-s h4,
ion-item .sc-ion-label-ios-s h4 {
  font-size: var(--ion-font-size-3);
  line-height: 1.5;
}

h5, .reset-font h5, ion-card .card-content-md h5,
ion-card .card-content-ios h5, ion-item .sc-ion-label-md-s h5,
ion-item .sc-ion-label-ios-s h5 {
  font-size: var(--ion-font-size-2);
  line-height: 1.43;
}

p, .reset-font p, ion-card .card-content-md p,
ion-card .card-content-ios p, ion-item .sc-ion-label-md-s p,
ion-item .sc-ion-label-ios-s p {
  font-size: var(--ion-font-size-3);
  line-height: 2;
  color: var(--ion-text-color);
  -webkit-user-select: none;
          user-select: none;
}

a:not([href]) {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

p.ion-color,
span.ion-color,
a.ion-color {
  color: var(--ion-color-base);
}
p.ion-color:focus-visible,
span.ion-color:focus-visible,
a.ion-color:focus-visible {
  color: var(--ion-color-primary);
}

a.no-underline {
  text-decoration: none;
}
a.no-underline:focus-visible {
  text-decoration: underline;
}

.ion-text-muted {
  color: var(--ion-text-muted-color) !important;
}

.keep-white-space {
  white-space: pre-wrap;
}

.ion-font-size-1 {
  font-size: var(--ion-font-size-1);
}

.ion-font-size-2 {
  font-size: var(--ion-font-size-2);
}

.ion-font-size-3 {
  font-size: var(--ion-font-size-3);
}

.ion-font-size-4 {
  font-size: var(--ion-font-size-4);
}

.ion-font-size-5 {
  font-size: var(--ion-font-size-5);
}

.ion-font-size-6 {
  font-size: var(--ion-font-size-6);
}

.reset-font, ion-card .card-content-md,
ion-card .card-content-ios, ion-item .sc-ion-label-md-s,
ion-item .sc-ion-label-ios-s {
  font-size: var(--ion-font-size-3);
  color: var(--ion-text-color);
}
.ion-padding-top--6 {
  padding-top: -64px !important;
}

.ion-padding-top {
  padding-top: var(--ion-padding) !important;
}

.ion-margin-top--6 {
  margin-top: -64px !important;
}

.ion-margin-top {
  margin-top: var(--ion-padding) !important;
}

.ion-padding-left--6 {
  padding-left: -64px !important;
}

.ion-padding-left {
  padding-left: var(--ion-padding) !important;
}

.ion-margin-left--6 {
  margin-left: -64px !important;
}

.ion-margin-left {
  margin-left: var(--ion-padding) !important;
}

.ion-padding-right--6 {
  padding-right: -64px !important;
}

.ion-padding-right {
  padding-right: var(--ion-padding) !important;
}

.ion-margin-right--6 {
  margin-right: -64px !important;
}

.ion-margin-right {
  margin-right: var(--ion-padding) !important;
}

.ion-padding-bottom--6 {
  padding-bottom: -64px !important;
}

.ion-padding-bottom {
  padding-bottom: var(--ion-padding) !important;
}

.ion-margin-bottom--6 {
  margin-bottom: -64px !important;
}

.ion-margin-bottom {
  margin-bottom: var(--ion-padding) !important;
}

.ion-padding-horizontal--6 {
  padding-left: -64px !important;
  padding-right: -64px !important;
}

.ion-padding-vertical--6 {
  padding-top: -64px !important;
  padding-bottom: -64px !important;
}

.ion-padding--6 {
  padding-top: -64px !important;
  padding-right: -64px !important;
  padding-bottom: -64px !important;
  padding-left: -64px !important;
}

.ion-margin-horizontal--6 {
  margin-left: -64px !important;
  margin-right: -64px !important;
}

.ion-margin-vertical--6 {
  margin-top: -64px !important;
  margin-bottom: -64px !important;
}

.ion-margin--6 {
  margin-top: -64px !important;
  margin-right: -64px !important;
  margin-bottom: -64px !important;
  margin-left: -64px !important;
}

.ion-padding-top--5 {
  padding-top: -48px !important;
}

.ion-padding-top {
  padding-top: var(--ion-padding) !important;
}

.ion-margin-top--5 {
  margin-top: -48px !important;
}

.ion-margin-top {
  margin-top: var(--ion-padding) !important;
}

.ion-padding-left--5 {
  padding-left: -48px !important;
}

.ion-padding-left {
  padding-left: var(--ion-padding) !important;
}

.ion-margin-left--5 {
  margin-left: -48px !important;
}

.ion-margin-left {
  margin-left: var(--ion-padding) !important;
}

.ion-padding-right--5 {
  padding-right: -48px !important;
}

.ion-padding-right {
  padding-right: var(--ion-padding) !important;
}

.ion-margin-right--5 {
  margin-right: -48px !important;
}

.ion-margin-right {
  margin-right: var(--ion-padding) !important;
}

.ion-padding-bottom--5 {
  padding-bottom: -48px !important;
}

.ion-padding-bottom {
  padding-bottom: var(--ion-padding) !important;
}

.ion-margin-bottom--5 {
  margin-bottom: -48px !important;
}

.ion-margin-bottom {
  margin-bottom: var(--ion-padding) !important;
}

.ion-padding-horizontal--5 {
  padding-left: -48px !important;
  padding-right: -48px !important;
}

.ion-padding-vertical--5 {
  padding-top: -48px !important;
  padding-bottom: -48px !important;
}

.ion-padding--5 {
  padding-top: -48px !important;
  padding-right: -48px !important;
  padding-bottom: -48px !important;
  padding-left: -48px !important;
}

.ion-margin-horizontal--5 {
  margin-left: -48px !important;
  margin-right: -48px !important;
}

.ion-margin-vertical--5 {
  margin-top: -48px !important;
  margin-bottom: -48px !important;
}

.ion-margin--5 {
  margin-top: -48px !important;
  margin-right: -48px !important;
  margin-bottom: -48px !important;
  margin-left: -48px !important;
}

.ion-padding-top--4 {
  padding-top: -24px !important;
}

.ion-padding-top {
  padding-top: var(--ion-padding) !important;
}

.ion-margin-top--4 {
  margin-top: -24px !important;
}

.ion-margin-top {
  margin-top: var(--ion-padding) !important;
}

.ion-padding-left--4 {
  padding-left: -24px !important;
}

.ion-padding-left {
  padding-left: var(--ion-padding) !important;
}

.ion-margin-left--4 {
  margin-left: -24px !important;
}

.ion-margin-left {
  margin-left: var(--ion-padding) !important;
}

.ion-padding-right--4 {
  padding-right: -24px !important;
}

.ion-padding-right {
  padding-right: var(--ion-padding) !important;
}

.ion-margin-right--4 {
  margin-right: -24px !important;
}

.ion-margin-right {
  margin-right: var(--ion-padding) !important;
}

.ion-padding-bottom--4 {
  padding-bottom: -24px !important;
}

.ion-padding-bottom {
  padding-bottom: var(--ion-padding) !important;
}

.ion-margin-bottom--4 {
  margin-bottom: -24px !important;
}

.ion-margin-bottom {
  margin-bottom: var(--ion-padding) !important;
}

.ion-padding-horizontal--4 {
  padding-left: -24px !important;
  padding-right: -24px !important;
}

.ion-padding-vertical--4 {
  padding-top: -24px !important;
  padding-bottom: -24px !important;
}

.ion-padding--4 {
  padding-top: -24px !important;
  padding-right: -24px !important;
  padding-bottom: -24px !important;
  padding-left: -24px !important;
}

.ion-margin-horizontal--4 {
  margin-left: -24px !important;
  margin-right: -24px !important;
}

.ion-margin-vertical--4 {
  margin-top: -24px !important;
  margin-bottom: -24px !important;
}

.ion-margin--4 {
  margin-top: -24px !important;
  margin-right: -24px !important;
  margin-bottom: -24px !important;
  margin-left: -24px !important;
}

.ion-padding-top--3 {
  padding-top: -12px !important;
}

.ion-padding-top {
  padding-top: var(--ion-padding) !important;
}

.ion-margin-top--3 {
  margin-top: -12px !important;
}

.ion-margin-top {
  margin-top: var(--ion-padding) !important;
}

.ion-padding-left--3 {
  padding-left: -12px !important;
}

.ion-padding-left {
  padding-left: var(--ion-padding) !important;
}

.ion-margin-left--3 {
  margin-left: -12px !important;
}

.ion-margin-left {
  margin-left: var(--ion-padding) !important;
}

.ion-padding-right--3 {
  padding-right: -12px !important;
}

.ion-padding-right {
  padding-right: var(--ion-padding) !important;
}

.ion-margin-right--3 {
  margin-right: -12px !important;
}

.ion-margin-right {
  margin-right: var(--ion-padding) !important;
}

.ion-padding-bottom--3 {
  padding-bottom: -12px !important;
}

.ion-padding-bottom {
  padding-bottom: var(--ion-padding) !important;
}

.ion-margin-bottom--3 {
  margin-bottom: -12px !important;
}

.ion-margin-bottom {
  margin-bottom: var(--ion-padding) !important;
}

.ion-padding-horizontal--3 {
  padding-left: -12px !important;
  padding-right: -12px !important;
}

.ion-padding-vertical--3 {
  padding-top: -12px !important;
  padding-bottom: -12px !important;
}

.ion-padding--3 {
  padding-top: -12px !important;
  padding-right: -12px !important;
  padding-bottom: -12px !important;
  padding-left: -12px !important;
}

.ion-margin-horizontal--3 {
  margin-left: -12px !important;
  margin-right: -12px !important;
}

.ion-margin-vertical--3 {
  margin-top: -12px !important;
  margin-bottom: -12px !important;
}

.ion-margin--3 {
  margin-top: -12px !important;
  margin-right: -12px !important;
  margin-bottom: -12px !important;
  margin-left: -12px !important;
}

.ion-padding-top--2 {
  padding-top: -8px !important;
}

.ion-padding-top {
  padding-top: var(--ion-padding) !important;
}

.ion-margin-top--2 {
  margin-top: -8px !important;
}

.ion-margin-top {
  margin-top: var(--ion-padding) !important;
}

.ion-padding-left--2 {
  padding-left: -8px !important;
}

.ion-padding-left {
  padding-left: var(--ion-padding) !important;
}

.ion-margin-left--2 {
  margin-left: -8px !important;
}

.ion-margin-left {
  margin-left: var(--ion-padding) !important;
}

.ion-padding-right--2 {
  padding-right: -8px !important;
}

.ion-padding-right {
  padding-right: var(--ion-padding) !important;
}

.ion-margin-right--2 {
  margin-right: -8px !important;
}

.ion-margin-right {
  margin-right: var(--ion-padding) !important;
}

.ion-padding-bottom--2 {
  padding-bottom: -8px !important;
}

.ion-padding-bottom {
  padding-bottom: var(--ion-padding) !important;
}

.ion-margin-bottom--2 {
  margin-bottom: -8px !important;
}

.ion-margin-bottom {
  margin-bottom: var(--ion-padding) !important;
}

.ion-padding-horizontal--2 {
  padding-left: -8px !important;
  padding-right: -8px !important;
}

.ion-padding-vertical--2 {
  padding-top: -8px !important;
  padding-bottom: -8px !important;
}

.ion-padding--2 {
  padding-top: -8px !important;
  padding-right: -8px !important;
  padding-bottom: -8px !important;
  padding-left: -8px !important;
}

.ion-margin-horizontal--2 {
  margin-left: -8px !important;
  margin-right: -8px !important;
}

.ion-margin-vertical--2 {
  margin-top: -8px !important;
  margin-bottom: -8px !important;
}

.ion-margin--2 {
  margin-top: -8px !important;
  margin-right: -8px !important;
  margin-bottom: -8px !important;
  margin-left: -8px !important;
}

.ion-padding-top--1 {
  padding-top: -4px !important;
}

.ion-padding-top {
  padding-top: var(--ion-padding) !important;
}

.ion-margin-top--1 {
  margin-top: -4px !important;
}

.ion-margin-top {
  margin-top: var(--ion-padding) !important;
}

.ion-padding-left--1 {
  padding-left: -4px !important;
}

.ion-padding-left {
  padding-left: var(--ion-padding) !important;
}

.ion-margin-left--1 {
  margin-left: -4px !important;
}

.ion-margin-left {
  margin-left: var(--ion-padding) !important;
}

.ion-padding-right--1 {
  padding-right: -4px !important;
}

.ion-padding-right {
  padding-right: var(--ion-padding) !important;
}

.ion-margin-right--1 {
  margin-right: -4px !important;
}

.ion-margin-right {
  margin-right: var(--ion-padding) !important;
}

.ion-padding-bottom--1 {
  padding-bottom: -4px !important;
}

.ion-padding-bottom {
  padding-bottom: var(--ion-padding) !important;
}

.ion-margin-bottom--1 {
  margin-bottom: -4px !important;
}

.ion-margin-bottom {
  margin-bottom: var(--ion-padding) !important;
}

.ion-padding-horizontal--1 {
  padding-left: -4px !important;
  padding-right: -4px !important;
}

.ion-padding-vertical--1 {
  padding-top: -4px !important;
  padding-bottom: -4px !important;
}

.ion-padding--1 {
  padding-top: -4px !important;
  padding-right: -4px !important;
  padding-bottom: -4px !important;
  padding-left: -4px !important;
}

.ion-margin-horizontal--1 {
  margin-left: -4px !important;
  margin-right: -4px !important;
}

.ion-margin-vertical--1 {
  margin-top: -4px !important;
  margin-bottom: -4px !important;
}

.ion-margin--1 {
  margin-top: -4px !important;
  margin-right: -4px !important;
  margin-bottom: -4px !important;
  margin-left: -4px !important;
}

.ion-padding-top-0 {
  padding-top: 0 !important;
}

.ion-padding-top {
  padding-top: var(--ion-padding) !important;
}

.ion-margin-top-0 {
  margin-top: 0 !important;
}

.ion-margin-top {
  margin-top: var(--ion-padding) !important;
}

.ion-padding-left-0 {
  padding-left: 0 !important;
}

.ion-padding-left {
  padding-left: var(--ion-padding) !important;
}

.ion-margin-left-0 {
  margin-left: 0 !important;
}

.ion-margin-left {
  margin-left: var(--ion-padding) !important;
}

.ion-padding-right-0 {
  padding-right: 0 !important;
}

.ion-padding-right {
  padding-right: var(--ion-padding) !important;
}

.ion-margin-right-0 {
  margin-right: 0 !important;
}

.ion-margin-right {
  margin-right: var(--ion-padding) !important;
}

.ion-padding-bottom-0 {
  padding-bottom: 0 !important;
}

.ion-padding-bottom {
  padding-bottom: var(--ion-padding) !important;
}

.ion-margin-bottom-0 {
  margin-bottom: 0 !important;
}

.ion-margin-bottom {
  margin-bottom: var(--ion-padding) !important;
}

.ion-padding-horizontal-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.ion-padding-vertical-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.ion-padding-0 {
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}

.ion-margin-horizontal-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.ion-margin-vertical-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.ion-margin-0 {
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
}

.ion-padding-top-1 {
  padding-top: 4px !important;
}

.ion-padding-top {
  padding-top: var(--ion-padding) !important;
}

.ion-margin-top-1 {
  margin-top: 4px !important;
}

.ion-margin-top {
  margin-top: var(--ion-padding) !important;
}

.ion-padding-left-1 {
  padding-left: 4px !important;
}

.ion-padding-left {
  padding-left: var(--ion-padding) !important;
}

.ion-margin-left-1 {
  margin-left: 4px !important;
}

.ion-margin-left {
  margin-left: var(--ion-padding) !important;
}

.ion-padding-right-1 {
  padding-right: 4px !important;
}

.ion-padding-right {
  padding-right: var(--ion-padding) !important;
}

.ion-margin-right-1 {
  margin-right: 4px !important;
}

.ion-margin-right {
  margin-right: var(--ion-padding) !important;
}

.ion-padding-bottom-1 {
  padding-bottom: 4px !important;
}

.ion-padding-bottom {
  padding-bottom: var(--ion-padding) !important;
}

.ion-margin-bottom-1 {
  margin-bottom: 4px !important;
}

.ion-margin-bottom {
  margin-bottom: var(--ion-padding) !important;
}

.ion-padding-horizontal-1 {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.ion-padding-vertical-1 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.ion-padding-1 {
  padding-top: 4px !important;
  padding-right: 4px !important;
  padding-bottom: 4px !important;
  padding-left: 4px !important;
}

.ion-margin-horizontal-1 {
  margin-left: 4px !important;
  margin-right: 4px !important;
}

.ion-margin-vertical-1 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.ion-margin-1 {
  margin-top: 4px !important;
  margin-right: 4px !important;
  margin-bottom: 4px !important;
  margin-left: 4px !important;
}

.ion-padding-top-2 {
  padding-top: 8px !important;
}

.ion-padding-top {
  padding-top: var(--ion-padding) !important;
}

.ion-margin-top-2 {
  margin-top: 8px !important;
}

.ion-margin-top {
  margin-top: var(--ion-padding) !important;
}

.ion-padding-left-2 {
  padding-left: 8px !important;
}

.ion-padding-left {
  padding-left: var(--ion-padding) !important;
}

.ion-margin-left-2 {
  margin-left: 8px !important;
}

.ion-margin-left {
  margin-left: var(--ion-padding) !important;
}

.ion-padding-right-2 {
  padding-right: 8px !important;
}

.ion-padding-right {
  padding-right: var(--ion-padding) !important;
}

.ion-margin-right-2 {
  margin-right: 8px !important;
}

.ion-margin-right {
  margin-right: var(--ion-padding) !important;
}

.ion-padding-bottom-2 {
  padding-bottom: 8px !important;
}

.ion-padding-bottom {
  padding-bottom: var(--ion-padding) !important;
}

.ion-margin-bottom-2 {
  margin-bottom: 8px !important;
}

.ion-margin-bottom {
  margin-bottom: var(--ion-padding) !important;
}

.ion-padding-horizontal-2 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.ion-padding-vertical-2 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.ion-padding-2 {
  padding-top: 8px !important;
  padding-right: 8px !important;
  padding-bottom: 8px !important;
  padding-left: 8px !important;
}

.ion-margin-horizontal-2 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.ion-margin-vertical-2 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.ion-margin-2 {
  margin-top: 8px !important;
  margin-right: 8px !important;
  margin-bottom: 8px !important;
  margin-left: 8px !important;
}

.ion-padding-top-3 {
  padding-top: 12px !important;
}

.ion-padding-top {
  padding-top: var(--ion-padding) !important;
}

.ion-margin-top-3 {
  margin-top: 12px !important;
}

.ion-margin-top {
  margin-top: var(--ion-padding) !important;
}

.ion-padding-left-3 {
  padding-left: 12px !important;
}

.ion-padding-left {
  padding-left: var(--ion-padding) !important;
}

.ion-margin-left-3 {
  margin-left: 12px !important;
}

.ion-margin-left {
  margin-left: var(--ion-padding) !important;
}

.ion-padding-right-3 {
  padding-right: 12px !important;
}

.ion-padding-right {
  padding-right: var(--ion-padding) !important;
}

.ion-margin-right-3 {
  margin-right: 12px !important;
}

.ion-margin-right {
  margin-right: var(--ion-padding) !important;
}

.ion-padding-bottom-3 {
  padding-bottom: 12px !important;
}

.ion-padding-bottom {
  padding-bottom: var(--ion-padding) !important;
}

.ion-margin-bottom-3 {
  margin-bottom: 12px !important;
}

.ion-margin-bottom {
  margin-bottom: var(--ion-padding) !important;
}

.ion-padding-horizontal-3 {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.ion-padding-vertical-3 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.ion-padding-3 {
  padding-top: 12px !important;
  padding-right: 12px !important;
  padding-bottom: 12px !important;
  padding-left: 12px !important;
}

.ion-margin-horizontal-3 {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

.ion-margin-vertical-3 {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.ion-margin-3 {
  margin-top: 12px !important;
  margin-right: 12px !important;
  margin-bottom: 12px !important;
  margin-left: 12px !important;
}

.ion-padding-top-4 {
  padding-top: 24px !important;
}

.ion-padding-top {
  padding-top: var(--ion-padding) !important;
}

.ion-margin-top-4 {
  margin-top: 24px !important;
}

.ion-margin-top {
  margin-top: var(--ion-padding) !important;
}

.ion-padding-left-4 {
  padding-left: 24px !important;
}

.ion-padding-left {
  padding-left: var(--ion-padding) !important;
}

.ion-margin-left-4 {
  margin-left: 24px !important;
}

.ion-margin-left {
  margin-left: var(--ion-padding) !important;
}

.ion-padding-right-4 {
  padding-right: 24px !important;
}

.ion-padding-right {
  padding-right: var(--ion-padding) !important;
}

.ion-margin-right-4 {
  margin-right: 24px !important;
}

.ion-margin-right {
  margin-right: var(--ion-padding) !important;
}

.ion-padding-bottom-4 {
  padding-bottom: 24px !important;
}

.ion-padding-bottom {
  padding-bottom: var(--ion-padding) !important;
}

.ion-margin-bottom-4 {
  margin-bottom: 24px !important;
}

.ion-margin-bottom {
  margin-bottom: var(--ion-padding) !important;
}

.ion-padding-horizontal-4 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.ion-padding-vertical-4 {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.ion-padding-4 {
  padding-top: 24px !important;
  padding-right: 24px !important;
  padding-bottom: 24px !important;
  padding-left: 24px !important;
}

.ion-margin-horizontal-4 {
  margin-left: 24px !important;
  margin-right: 24px !important;
}

.ion-margin-vertical-4 {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.ion-margin-4 {
  margin-top: 24px !important;
  margin-right: 24px !important;
  margin-bottom: 24px !important;
  margin-left: 24px !important;
}

.ion-padding-top-5 {
  padding-top: 48px !important;
}

.ion-padding-top {
  padding-top: var(--ion-padding) !important;
}

.ion-margin-top-5 {
  margin-top: 48px !important;
}

.ion-margin-top {
  margin-top: var(--ion-padding) !important;
}

.ion-padding-left-5 {
  padding-left: 48px !important;
}

.ion-padding-left {
  padding-left: var(--ion-padding) !important;
}

.ion-margin-left-5 {
  margin-left: 48px !important;
}

.ion-margin-left {
  margin-left: var(--ion-padding) !important;
}

.ion-padding-right-5 {
  padding-right: 48px !important;
}

.ion-padding-right {
  padding-right: var(--ion-padding) !important;
}

.ion-margin-right-5 {
  margin-right: 48px !important;
}

.ion-margin-right {
  margin-right: var(--ion-padding) !important;
}

.ion-padding-bottom-5 {
  padding-bottom: 48px !important;
}

.ion-padding-bottom {
  padding-bottom: var(--ion-padding) !important;
}

.ion-margin-bottom-5 {
  margin-bottom: 48px !important;
}

.ion-margin-bottom {
  margin-bottom: var(--ion-padding) !important;
}

.ion-padding-horizontal-5 {
  padding-left: 48px !important;
  padding-right: 48px !important;
}

.ion-padding-vertical-5 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.ion-padding-5 {
  padding-top: 48px !important;
  padding-right: 48px !important;
  padding-bottom: 48px !important;
  padding-left: 48px !important;
}

.ion-margin-horizontal-5 {
  margin-left: 48px !important;
  margin-right: 48px !important;
}

.ion-margin-vertical-5 {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}

.ion-margin-5 {
  margin-top: 48px !important;
  margin-right: 48px !important;
  margin-bottom: 48px !important;
  margin-left: 48px !important;
}

.ion-padding-top-6 {
  padding-top: 64px !important;
}

.ion-padding-top {
  padding-top: var(--ion-padding) !important;
}

.ion-margin-top-6 {
  margin-top: 64px !important;
}

.ion-margin-top {
  margin-top: var(--ion-padding) !important;
}

.ion-padding-left-6 {
  padding-left: 64px !important;
}

.ion-padding-left {
  padding-left: var(--ion-padding) !important;
}

.ion-margin-left-6 {
  margin-left: 64px !important;
}

.ion-margin-left {
  margin-left: var(--ion-padding) !important;
}

.ion-padding-right-6 {
  padding-right: 64px !important;
}

.ion-padding-right {
  padding-right: var(--ion-padding) !important;
}

.ion-margin-right-6 {
  margin-right: 64px !important;
}

.ion-margin-right {
  margin-right: var(--ion-padding) !important;
}

.ion-padding-bottom-6 {
  padding-bottom: 64px !important;
}

.ion-padding-bottom {
  padding-bottom: var(--ion-padding) !important;
}

.ion-margin-bottom-6 {
  margin-bottom: 64px !important;
}

.ion-margin-bottom {
  margin-bottom: var(--ion-padding) !important;
}

.ion-padding-horizontal-6 {
  padding-left: 64px !important;
  padding-right: 64px !important;
}

.ion-padding-vertical-6 {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

.ion-padding-6 {
  padding-top: 64px !important;
  padding-right: 64px !important;
  padding-bottom: 64px !important;
  padding-left: 64px !important;
}

.ion-margin-horizontal-6 {
  margin-left: 64px !important;
  margin-right: 64px !important;
}

.ion-margin-vertical-6 {
  margin-top: 64px !important;
  margin-bottom: 64px !important;
}

.ion-margin-6 {
  margin-top: 64px !important;
  margin-right: 64px !important;
  margin-bottom: 64px !important;
  margin-left: 64px !important;
}

.ion-padding-top-auto {
  padding-top: auto !important;
}

.ion-padding-top {
  padding-top: var(--ion-padding) !important;
}

.ion-margin-top-auto {
  margin-top: auto !important;
}

.ion-margin-top {
  margin-top: var(--ion-padding) !important;
}

.ion-padding-left-auto {
  padding-left: auto !important;
}

.ion-padding-left {
  padding-left: var(--ion-padding) !important;
}

.ion-margin-left-auto {
  margin-left: auto !important;
}

.ion-margin-left {
  margin-left: var(--ion-padding) !important;
}

.ion-padding-right-auto {
  padding-right: auto !important;
}

.ion-padding-right {
  padding-right: var(--ion-padding) !important;
}

.ion-margin-right-auto {
  margin-right: auto !important;
}

.ion-margin-right {
  margin-right: var(--ion-padding) !important;
}

.ion-padding-bottom-auto {
  padding-bottom: auto !important;
}

.ion-padding-bottom {
  padding-bottom: var(--ion-padding) !important;
}

.ion-margin-bottom-auto {
  margin-bottom: auto !important;
}

.ion-margin-bottom {
  margin-bottom: var(--ion-padding) !important;
}

.ion-padding-horizontal-auto {
  padding-left: auto !important;
  padding-right: auto !important;
}

.ion-padding-vertical-auto {
  padding-top: auto !important;
  padding-bottom: auto !important;
}

.ion-padding-auto {
  padding-top: auto !important;
  padding-right: auto !important;
  padding-bottom: auto !important;
  padding-left: auto !important;
}

.ion-margin-horizontal-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.ion-margin-vertical-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.ion-margin-auto {
  margin-top: auto !important;
  margin-right: auto !important;
  margin-bottom: auto !important;
  margin-left: auto !important;
}

.w-100 {
  width: 100%;
}

.min-w-100 {
  min-width: 100%;
}

.max-w-100 {
  max-width: 100%;
}

.h-100 {
  height: 100%;
}

.min-h-100 {
  min-height: 100%;
}

.max-h-100 {
  max-height: 100%;
}

.semi-hidden {
  position: fixed;
  pointer-events: none;
  visibility: hidden;
}

[hidden] {
  display: none !important;
}

.plt-desktop .hide-on-desktop {
  display: none !important;
}

.ion-no-margin-inline {
  margin-inline-start: 0;
  margin-inline-end: 0;
}

.ion-no-inner-padding {
  --inner-padding-start: 0;
  --inner-padding-end: 0;
  --inner-padding-top: 0;
  --inner-padding-bottom: 0;
}

.ion-flex {
  display: flex;
  flex-direction: column;
}

.ion-flex-row {
  flex-direction: row;
}

.ion-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ion-flex-grow {
  flex-shrink: 0;
  flex-grow: 1;
}

.ion-flex-shrink {
  flex-shrink: 1;
  flex-grow: 0;
}

.overflow-visible {
  overflow: visible;
}

.user-select-text {
  -webkit-user-select: text;
          user-select: text;
}

.pointer-events-none {
  pointer-events: none;
}

.shadow {
  box-shadow: var(--app-box-shadow);
}

header.ion-color {
  background-color: var(--ion-color-base);
}
header.ion-color > * {
  color: var(--ion-color-contrast);
}

section.ion-color {
  background-color: var(--ion-color-tint);
}

.item-reset, ion-item[fill=clear] {
  --background: transparent;
  --background-hover: transparent;
  --background-activated: transparent;
  --background-focused: transparent;
  --ripple-color: transparent;
  --inner-padding-top: 0;
  --inner-padding-end: 0;
  --inner-padding-bottom: 0;
  --inner-padding-start: 0;
  --padding-start: 0;
  --padding-end: 0;
  --min-height: 0;
}

hr {
  display: block;
  height: 1px;
  margin: 36px 0;
  border: none;
  background: var(--ion-color-base, currentColor);
}

img {
  text-indent: -1000vw;
  overflow: hidden;
}

button, a, ion-button, .ion-activatable, [routerLink] {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

@media (min-width: 768px) {
  .tablet-max-400 {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 768px) {
  .tablet-max-600 {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 768px) {
  .tablet-card {
    display: block;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: var(--ion-box-shadow-large);
    overflow: hidden;
  }
  .tablet-card > ion-card.ion-margin-top:only-child {
    margin-top: 0 !important;
  }
}

@media (min-width: 768px) {
  ion-button[expand=block] {
    max-width: 400px;
  }
  ion-footer ion-button[expand=block] {
    margin-left: auto;
    margin-right: auto;
  }
}

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