/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/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/styles.scss?ngGlobalStyle ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap);
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/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/styles.scss?ngGlobalStyle (1) ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://uicdn.toast.com/editor/latest/toastui-editor.min.css);
/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/reactflow/dist/style.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;
}
.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.react-flow__pane {
  z-index: 1;
  cursor: grab;
}
.react-flow__pane.selection {
    cursor: pointer;
  }
.react-flow__pane.dragging {
    cursor: grabbing;
  }
.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.react-flow__renderer {
  z-index: 4;
}
.react-flow__selection {
  z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.react-flow .react-flow__edges {
  pointer-events: none;
  overflow: visible;
}
.react-flow__edge-path,
.react-flow__connection-path {
  stroke: #b1b1b7;
  stroke-width: 1;
  fill: none;
}
.react-flow__edge {
  pointer-events: visibleStroke;
  cursor: pointer;
}
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    animation: none;
  }
.react-flow__edge.inactive {
    pointer-events: none;
  }
.react-flow__edge.selected,
  .react-flow__edge:focus,
  .react-flow__edge:focus-visible {
    outline: none;
  }
.react-flow__edge.selected .react-flow__edge-path,
  .react-flow__edge:focus .react-flow__edge-path,
  .react-flow__edge:focus-visible .react-flow__edge-path {
    stroke: #555;
  }
.react-flow__edge-textwrapper {
    pointer-events: all;
  }
.react-flow__edge-textbg {
    fill: white;
  }
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
            user-select: none;
  }
.react-flow__connection {
  pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.react-flow__connectionline {
  z-index: 1001;
}
.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: grab;
}
.react-flow__node.dragging {
    cursor: grabbing;
  }
.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background: #1a192b;
  border: 1px solid white;
  border-radius: 100%;
}
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: -4px;
    transform: translate(-50%, 0);
  }
.react-flow__handle-top {
    left: 50%;
    top: -4px;
    transform: translate(-50%, 0);
  }
.react-flow__handle-left {
    top: 50%;
    left: -4px;
    transform: translate(0, -50%);
  }
.react-flow__handle-right {
    right: -4px;
    top: 50%;
    transform: translate(0, -50%);
  }
.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.react-flow__panel.top {
    top: 0;
  }
.react-flow__panel.bottom {
    bottom: 0;
  }
.react-flow__panel.left {
    left: 0;
  }
.react-flow__panel.right {
    right: 0;
  }
.react-flow__panel.center {
    left: 50%;
    transform: translateX(-50%);
  }
.react-flow__attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.5);
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}
.react-flow__edge.updating .react-flow__edge-path {
      stroke: #777;
    }
.react-flow__edge-text {
    font-size: 10px;
  }
.react-flow__node.selectable:focus,
  .react-flow__node.selectable:focus-visible {
    outline: none;
  }
.react-flow__node-default,
.react-flow__node-input,
.react-flow__node-output,
.react-flow__node-group {
  padding: 10px;
  border-radius: 3px;
  width: 150px;
  font-size: 12px;
  color: #222;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-color: #1a192b;
  background-color: white;
}
.react-flow__node-default.selectable:hover, .react-flow__node-input.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
      box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
    }
.react-flow__node-default.selectable.selected,
    .react-flow__node-default.selectable:focus,
    .react-flow__node-default.selectable:focus-visible,
    .react-flow__node-input.selectable.selected,
    .react-flow__node-input.selectable:focus,
    .react-flow__node-input.selectable:focus-visible,
    .react-flow__node-output.selectable.selected,
    .react-flow__node-output.selectable:focus,
    .react-flow__node-output.selectable:focus-visible,
    .react-flow__node-group.selectable.selected,
    .react-flow__node-group.selectable:focus,
    .react-flow__node-group.selectable:focus-visible {
      box-shadow: 0 0 0 0.5px #1a192b;
    }
.react-flow__node-group {
  background-color: rgba(240, 240, 240, 0.25);
}
.react-flow__nodesselection-rect,
.react-flow__selection {
  background: rgba(0, 89, 220, 0.08);
  border: 1px dotted rgba(0, 89, 220, 0.8);
}
.react-flow__nodesselection-rect:focus,
  .react-flow__nodesselection-rect:focus-visible,
  .react-flow__selection:focus,
  .react-flow__selection:focus-visible {
    outline: none;
  }
.react-flow__controls {
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
}
.react-flow__controls-button {
    border: none;
    background: #fefefe;
    border-bottom: 1px solid #eee;
    box-sizing: content-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
    padding: 5px;
  }
.react-flow__controls-button:hover {
      background: #f4f4f4;
    }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
    }
.react-flow__controls-button:disabled {
      pointer-events: none;
    }
.react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.react-flow__minimap {
  background-color: #fff;
}
.react-flow__minimap svg {
  display: block;
}
.react-flow__resize-control {
  position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
  width: 4px;
  height: 4px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: #3367d9;
  transform: translate(-50%, -50%);
}
.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
  border-color: #3367d9;
  border-width: 0;
  border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/quill/dist/quill.bubble.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
/*!
 * Quill Editor v2.0.3
 * https://quilljs.com
 * Copyright (c) 2017-2024, Slab
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor > *{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li > .ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked] > .ql-ui,.ql-editor li[data-list=unchecked] > .ql-ui{color:#777}.ql-editor li[data-list=bullet] > .ql-ui:before{content:'\2022'}.ql-editor li[data-list=checked] > .ql-ui:before{content:'\2611'}.ql-editor li[data-list=unchecked] > .ql-ui:before{content:'\2610'}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered] > .ql-ui:before{content:counter(list-0, decimal) '. '}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before{content:counter(list-1, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before{content:counter(list-2, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before{content:counter(list-3, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before{content:counter(list-4, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before{content:counter(list-5, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before{content:counter(list-6, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before{content:counter(list-7, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before{content:counter(list-8, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before{content:counter(list-9, decimal) '. '}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl > .ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank::before{color:rgba(0,0,0,0.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-bubble.ql-toolbar:after,.ql-bubble .ql-toolbar:after{clear:both;content:'';display:table}.ql-bubble.ql-toolbar button,.ql-bubble .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-bubble.ql-toolbar button svg,.ql-bubble .ql-toolbar button svg{float:left;height:100%}.ql-bubble.ql-toolbar button:active:hover,.ql-bubble .ql-toolbar button:active:hover{outline:none}.ql-bubble.ql-toolbar input.ql-image[type=file],.ql-bubble .ql-toolbar input.ql-image[type=file]{display:none}.ql-bubble.ql-toolbar button:hover,.ql-bubble .ql-toolbar button:hover,.ql-bubble.ql-toolbar button:focus,.ql-bubble .ql-toolbar button:focus,.ql-bubble.ql-toolbar button.ql-active,.ql-bubble .ql-toolbar button.ql-active,.ql-bubble.ql-toolbar .ql-picker-label:hover,.ql-bubble .ql-toolbar .ql-picker-label:hover,.ql-bubble.ql-toolbar .ql-picker-label.ql-active,.ql-bubble .ql-toolbar .ql-picker-label.ql-active,.ql-bubble.ql-toolbar .ql-picker-item:hover,.ql-bubble .ql-toolbar .ql-picker-item:hover,.ql-bubble.ql-toolbar .ql-picker-item.ql-selected,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected{color:#fff}.ql-bubble.ql-toolbar button:hover .ql-fill,.ql-bubble .ql-toolbar button:hover .ql-fill,.ql-bubble.ql-toolbar button:focus .ql-fill,.ql-bubble .ql-toolbar button:focus .ql-fill,.ql-bubble.ql-toolbar button.ql-active .ql-fill,.ql-bubble .ql-toolbar button.ql-active .ql-fill,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-bubble.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-bubble.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-bubble.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#fff}.ql-bubble.ql-toolbar button:hover .ql-stroke,.ql-bubble .ql-toolbar button:hover .ql-stroke,.ql-bubble.ql-toolbar button:focus .ql-stroke,.ql-bubble .ql-toolbar button:focus .ql-stroke,.ql-bubble.ql-toolbar button.ql-active .ql-stroke,.ql-bubble .ql-toolbar button.ql-active .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-bubble.ql-toolbar button:hover .ql-stroke-miter,.ql-bubble .ql-toolbar button:hover .ql-stroke-miter,.ql-bubble.ql-toolbar button:focus .ql-stroke-miter,.ql-bubble .ql-toolbar button:focus .ql-stroke-miter,.ql-bubble.ql-toolbar button.ql-active .ql-stroke-miter,.ql-bubble .ql-toolbar button.ql-active .ql-stroke-miter,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#fff}@media (pointer:coarse){.ql-bubble.ql-toolbar button:hover:not(.ql-active),.ql-bubble .ql-toolbar button:hover:not(.ql-active){color:#ccc}.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#ccc}.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#ccc}}.ql-bubble{box-sizing:border-box}.ql-bubble *{box-sizing:border-box}.ql-bubble .ql-hidden{display:none}.ql-bubble .ql-out-bottom,.ql-bubble .ql-out-top{visibility:hidden}.ql-bubble .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-bubble .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-bubble .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-bubble .ql-formats{display:inline-block;vertical-align:middle}.ql-bubble .ql-formats:after{clear:both;content:'';display:table}.ql-bubble .ql-stroke{fill:none;stroke:#ccc;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-bubble .ql-stroke-miter{fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:2}.ql-bubble .ql-fill,.ql-bubble .ql-stroke.ql-fill{fill:#ccc}.ql-bubble .ql-empty{fill:none}.ql-bubble .ql-even{fill-rule:evenodd}.ql-bubble .ql-thin,.ql-bubble .ql-stroke.ql-thin{stroke-width:1}.ql-bubble .ql-transparent{opacity:.4}.ql-bubble .ql-direction svg:last-child{display:none}.ql-bubble .ql-direction.ql-active svg:last-child{display:inline}.ql-bubble .ql-direction.ql-active svg:first-child{display:none}.ql-bubble .ql-editor h1{font-size:2em}.ql-bubble .ql-editor h2{font-size:1.5em}.ql-bubble .ql-editor h3{font-size:1.17em}.ql-bubble .ql-editor h4{font-size:1em}.ql-bubble .ql-editor h5{font-size:.83em}.ql-bubble .ql-editor h6{font-size:.67em}.ql-bubble .ql-editor a{text-decoration:underline}.ql-bubble .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-bubble .ql-editor code,.ql-bubble .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-bubble .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-bubble .ql-editor code{font-size:85%;padding:2px 4px}.ql-bubble .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-bubble .ql-editor img{max-width:100%}.ql-bubble .ql-picker{color:#ccc;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-bubble .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-bubble .ql-picker-label::before{display:inline-block;line-height:22px}.ql-bubble .ql-picker-options{background-color:#444;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-bubble .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-bubble .ql-picker.ql-expanded .ql-picker-label{color:#777;z-index:2}.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#777}.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#777}.ql-bubble .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-bubble .ql-color-picker,.ql-bubble .ql-icon-picker{width:28px}.ql-bubble .ql-color-picker .ql-picker-label,.ql-bubble .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-bubble .ql-color-picker .ql-picker-label svg,.ql-bubble .ql-icon-picker .ql-picker-label svg{right:4px}.ql-bubble .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-bubble .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-bubble .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-bubble .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-bubble .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-bubble .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,.ql-bubble .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,.ql-bubble .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,.ql-bubble .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,.ql-bubble .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,.ql-bubble .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before{content:attr(data-label)}.ql-bubble .ql-picker.ql-header{width:98px}.ql-bubble .ql-picker.ql-header .ql-picker-label::before,.ql-bubble .ql-picker.ql-header .ql-picker-item::before{content:'Normal'}.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{content:'Heading 1'}.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{content:'Heading 2'}.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{content:'Heading 3'}.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{content:'Heading 4'}.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{content:'Heading 5'}.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{content:'Heading 6'}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{font-size:2em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{font-size:1.5em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{font-size:1.17em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{font-size:1em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{font-size:.83em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{font-size:.67em}.ql-bubble .ql-picker.ql-font{width:108px}.ql-bubble .ql-picker.ql-font .ql-picker-label::before,.ql-bubble .ql-picker.ql-font .ql-picker-item::before{content:'Sans Serif'}.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{content:'Serif'}.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{content:'Monospace'}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{font-family:Georgia,Times New Roman,serif}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{font-family:Monaco,Courier New,monospace}.ql-bubble .ql-picker.ql-size{width:98px}.ql-bubble .ql-picker.ql-size .ql-picker-label::before,.ql-bubble .ql-picker.ql-size .ql-picker-item::before{content:'Normal'}.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=small]::before,.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]::before{content:'Small'}.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=large]::before,.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]::before{content:'Large'}.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{content:'Huge'}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]::before{font-size:10px}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]::before{font-size:18px}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{font-size:32px}.ql-bubble .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-bubble .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-bubble .ql-toolbar .ql-formats{margin:8px 12px 8px 0}.ql-bubble .ql-toolbar .ql-formats:first-child{margin-left:12px}.ql-bubble .ql-color-picker svg{margin:1px}.ql-bubble .ql-color-picker .ql-picker-item.ql-selected,.ql-bubble .ql-color-picker .ql-picker-item:hover{border-color:#fff}.ql-bubble .ql-tooltip{background-color:#444;border-radius:25px;color:#fff}.ql-bubble .ql-tooltip-arrow{border-left:6px solid transparent;border-right:6px solid transparent;content:" ";display:block;left:50%;margin-left:-6px;position:absolute}.ql-bubble .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow{border-bottom:6px solid #444;top:-6px}.ql-bubble .ql-tooltip.ql-flip .ql-tooltip-arrow{border-top:6px solid #444;bottom:-6px}.ql-bubble .ql-tooltip.ql-editing .ql-tooltip-editor{display:block}.ql-bubble .ql-tooltip.ql-editing .ql-formats{visibility:hidden}.ql-bubble .ql-tooltip-editor{display:none}.ql-bubble .ql-tooltip-editor input[type=text]{background:transparent;border:none;color:#fff;font-size:13px;height:100%;outline:none;padding:10px 20px;position:absolute;width:100%}.ql-bubble .ql-tooltip-editor a{top:10px;position:absolute;right:20px}.ql-bubble .ql-tooltip-editor a:before{color:#ccc;content:"\00D7";font-size:16px;font-weight:bold}.ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close){position:relative;white-space:nowrap}.ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close)::before{background-color:#444;border-radius:15px;top:-5px;font-size:12px;color:#fff;content:attr(href);font-weight:normal;overflow:hidden;padding:5px 15px;text-decoration:none;z-index:1}.ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close)::after{border-top:6px solid #444;border-left:6px solid transparent;border-right:6px solid transparent;top:0;content:" ";height:0;width:0}.ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close)::before,.ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close)::after{left:0;margin-left:50%;position:absolute;transform:translate(-50%,-100%);transition:visibility 0s ease 200ms;visibility:hidden}.ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):hover::before,.ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):hover::after{visibility:visible}

/*# sourceMappingURL=quill.bubble.css.map*/
/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/quill/dist/quill.snow.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
/*!
 * Quill Editor v2.0.3
 * https://quilljs.com
 * Copyright (c) 2017-2024, Slab
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor > *{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li > .ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked] > .ql-ui,.ql-editor li[data-list=unchecked] > .ql-ui{color:#777}.ql-editor li[data-list=bullet] > .ql-ui:before{content:'\2022'}.ql-editor li[data-list=checked] > .ql-ui:before{content:'\2611'}.ql-editor li[data-list=unchecked] > .ql-ui:before{content:'\2610'}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered] > .ql-ui:before{content:counter(list-0, decimal) '. '}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before{content:counter(list-1, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before{content:counter(list-2, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before{content:counter(list-3, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before{content:counter(list-4, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before{content:counter(list-5, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before{content:counter(list-6, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before{content:counter(list-7, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before{content:counter(list-8, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before{content:counter(list-9, decimal) '. '}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl > .ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank::before{color:rgba(0,0,0,0.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:'';display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media (pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow{box-sizing:border-box}.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:'';display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label::before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label::before,.ql-snow .ql-picker.ql-header .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{content:'Heading 1'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{content:'Heading 2'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{content:'Heading 3'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{content:'Heading 4'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{content:'Heading 5'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{content:'Heading 6'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before{content:'Sans Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{content:'Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{content:'Monospace'}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label::before,.ql-snow .ql-picker.ql-size .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{content:'Small'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{content:'Large'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{content:'Huge'}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:'Helvetica Neue','Helvetica','Arial',sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:rgba(0,0,0,0.2) 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border-color:#ccc}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow + .ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip::before{content:"Visit URL:";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action::after{border-right:1px solid #ccc;content:'Edit';margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove::before{content:'Remove';margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action::after{border-right:0;content:'Save';padding-right:0}.ql-snow .ql-tooltip[data-mode=link]::before{content:"Enter link:"}.ql-snow .ql-tooltip[data-mode=formula]::before{content:"Enter formula:"}.ql-snow .ql-tooltip[data-mode=video]::before{content:"Enter video:"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}

/*# sourceMappingURL=quill.snow.css.map*/
/*!****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@tsed/tailwind-formio/styles/alert.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************/
.alert {
  position: relative;
  margin-bottom: 1rem;
  border-radius: 0.125rem;
  border-width: 1px;
  border-style: solid;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;

  > *:first-child {
    margin-top: 0px;
  }

  > *:last-child {
    margin-bottom: 0px;
  }

  &:last-child {
    margin-bottom: 0px;
  }

  ul {
    margin-left: 1.25rem;
  }

  ul {
    padding-top: 0.75rem;
  }

  ul {
    padding-bottom: 0.5rem;
  }

  ul {

    li {
      list-style-type: disc;
    }
  }
}

.alert-heading {
  color: inherit;
}

.alert-link {
  font-weight: 700;
}

.alert-dismissible {
  padding-right: 2.5rem;

  .close {
    position: absolute;
  }

  .close {
    top: 0px;
  }

  .close {
    right: 0px;
  }

  .close {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .close {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .close {
    color: inherit;
  }
}

.alert-primary {
  border-color: hsla(220, 100%, 75%, 1);
  background-color: hsla(220, 100%, 83%, 1);
  color: hsla(220, 100%, 19%, 1);
}

.alert-secondary {
  border-color: hsla(190, 81%, 74%, 1);
  background-color: hsla(190, 81%, 82%, 1);
  color: hsla(190, 81%, 20%, 1);
}

.alert-success {
  --tw-border-opacity: 1;
  border-color: hsl(105 67% 80% / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: hsl(104 67% 89% / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: hsl(113 48% 20% / var(--tw-text-opacity, 1));
}

.alert-danger {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}

.alert-warning {
  border-color: hsla(45, 100%, 93%, 1);
  background-color: hsla(45, 100%, 96%, 1);
  color: hsla(45, 100%, 25%, 1);
}

.alert-info {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}

.alert-light {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.alert-dark {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}


/*!****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@tsed/tailwind-formio/styles/badge.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************/
/* Base class
Requires one of the contextual, color modifier classes for `color` and
`background-color`.
 */

.badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 0.25rem;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  text-align: center;
  font-weight: 700;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  font-size: 75%;

  &:empty {
    display: none
  }

  &.badge-hover {
    cursor: pointer
  }
}

a .badge {
  &:hover, &:focus {
    text-decoration-line: none
  }
}

/* Quick fix for badges in buttons */
.btn .badge {
  position: relative;
  top: -1px
}

/* Pill badges
Make them extra rounded with a modifier to replace v3's badges.
 */
.badge.bg-primary {
  border-color: hsla(220, 42%, 35%, 1);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

a .badge.bg-primary, .badge-hover.bg-primary {
  &:hover:hover, &:focus:hover {
    --tw-border-opacity: 1;
    border-color: rgb(31 41 55 / var(--tw-border-opacity, 1))
  }
  &:hover:hover, &:focus:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1))
  }
  &:hover:hover, &:focus:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
  }
  &:hover:focus, &:focus:focus {
    --tw-border-opacity: 1;
    border-color: rgb(31 41 55 / var(--tw-border-opacity, 1))
  }
  &:hover:focus, &:focus:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1))
  }
  &:hover:focus, &:focus:focus {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1))
  }
}

.badge.bg-secondary {
  border-color: hsla(190, 81%, 42%, 1);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

a .badge.bg-secondary, .badge-hover.bg-secondary {
  &:hover:hover, &:focus:hover {
    border-color: hsla(190, 81%, 28%, 1)
  }
  &:hover:hover, &:focus:hover {
    background-color: hsla(190, 81%, 28%, 1)
  }
  &:hover:hover, &:focus:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
  }
  &:hover:focus, &:focus:focus {
    border-color: hsla(190, 81%, 28%, 1)
  }
  &:hover:focus, &:focus:focus {
    background-color: hsla(190, 81%, 28%, 1)
  }
  &:hover:focus, &:focus:focus {
    color: hsla(190, 81%, 28%, 1)
  }
}

.badge.bg-success {
  --tw-border-opacity: 1;
  border-color: hsl(109 66% 35% / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: hsl(109 66% 35% / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

a .badge.bg-success, .badge-hover.bg-success {
  &:hover:hover, &:focus:hover {
    --tw-border-opacity: 1;
    border-color: hsl(110 53% 23% / var(--tw-border-opacity, 1))
  }
  &:hover:hover, &:focus:hover {
    --tw-bg-opacity: 1;
    background-color: hsl(110 53% 23% / var(--tw-bg-opacity, 1))
  }
  &:hover:hover, &:focus:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
  }
  &:hover:focus, &:focus:focus {
    --tw-border-opacity: 1;
    border-color: hsl(110 53% 23% / var(--tw-border-opacity, 1))
  }
  &:hover:focus, &:focus:focus {
    --tw-bg-opacity: 1;
    background-color: hsl(110 53% 23% / var(--tw-bg-opacity, 1))
  }
  &:hover:focus, &:focus:focus {
    --tw-text-opacity: 1;
    color: hsl(110 53% 23% / var(--tw-text-opacity, 1))
  }
}

.badge.bg-danger {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

a .badge.bg-danger, .badge-hover.bg-danger {
  &:hover:hover, &:focus:hover {
    --tw-border-opacity: 1;
    border-color: rgb(153 27 27 / var(--tw-border-opacity, 1))
  }
  &:hover:hover, &:focus:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1))
  }
  &:hover:hover, &:focus:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
  }
  &:hover:focus, &:focus:focus {
    --tw-border-opacity: 1;
    border-color: rgb(153 27 27 / var(--tw-border-opacity, 1))
  }
  &:hover:focus, &:focus:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1))
  }
  &:hover:focus, &:focus:focus {
    --tw-text-opacity: 1;
    color: rgb(153 27 27 / var(--tw-text-opacity, 1))
  }
}

.badge.bg-warning {
  border-color: hsla(45, 100%, 55%, 1);
  background-color: hsla(45, 100%, 55%, 1);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

a .badge.bg-warning, .badge-hover.bg-warning {
  &:hover:hover, &:focus:hover {
    border-color: hsla(45, 100%, 35%, 1)
  }
  &:hover:hover, &:focus:hover {
    background-color: hsla(45, 100%, 35%, 1)
  }
  &:hover:hover, &:focus:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
  }
  &:hover:focus, &:focus:focus {
    border-color: hsla(45, 100%, 35%, 1)
  }
  &:hover:focus, &:focus:focus {
    background-color: hsla(45, 100%, 35%, 1)
  }
  &:hover:focus, &:focus:focus {
    color: hsla(45, 100%, 35%, 1)
  }
}

.badge.bg-info {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

a .badge.bg-info, .badge-hover.bg-info {
  &:hover:hover, &:focus:hover {
    --tw-border-opacity: 1;
    border-color: rgb(30 64 175 / var(--tw-border-opacity, 1))
  }
  &:hover:hover, &:focus:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1))
  }
  &:hover:hover, &:focus:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
  }
  &:hover:focus, &:focus:focus {
    --tw-border-opacity: 1;
    border-color: rgb(30 64 175 / var(--tw-border-opacity, 1))
  }
  &:hover:focus, &:focus:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1))
  }
  &:hover:focus, &:focus:focus {
    --tw-text-opacity: 1;
    color: rgb(30 64 175 / var(--tw-text-opacity, 1))
  }
}

.badge.bg-light {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1))
}

a .badge.bg-light, .badge-hover.bg-light {
  &:hover:hover, &:focus:hover {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1))
  }
  &:hover:hover, &:focus:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1))
  }
  &:hover:hover, &:focus:hover {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1))
  }
  &:hover:focus, &:focus:focus {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1))
  }
  &:hover:focus, &:focus:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1))
  }
  &:hover:focus, &:focus:focus {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1))
  }
}

.badge.bg-dark {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

a .badge.bg-dark, .badge-hover.bg-dark {
  &:hover:hover, &:focus:hover {
    --tw-border-opacity: 1;
    border-color: rgb(31 41 55 / var(--tw-border-opacity, 1))
  }
  &:hover:hover, &:focus:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1))
  }
  &:hover:hover, &:focus:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
  }
  &:hover:focus, &:focus:focus {
    --tw-border-opacity: 1;
    border-color: rgb(31 41 55 / var(--tw-border-opacity, 1))
  }
  &:hover:focus, &:focus:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1))
  }
  &:hover:focus, &:focus:focus {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1))
  }
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@tsed/tailwind-formio/styles/breadcrumb.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************/
.breadcrumb {
  margin-bottom: 1rem;
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 0.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;

  .badge {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }

  .badge {
    display: inline-flex;
  }

  .badge {
    align-items: center;
  }

  .breadcrumb-item {
    display: flex;
  }

  .breadcrumb-item {
    align-items: center;
  }

  .breadcrumb-item {

    .badge {
      margin: 0px;
    }
  }
}

.breadcrumb-item {
  /* The separator between breadcrumbs (by default, a forward-slash: "/") */
  + .breadcrumb-item {
    padding-left: 0.5rem;
  }
  + .breadcrumb-item {

    &::before {
      display: inline-block;
    }

    &::before {
      padding-right: 0.5rem;
    }

    &::before {
      color: hsla(190, 81%, 42%, 1);
    }

    &::before {
      content: ">";
    }
  }

  &.active {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
  }
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@tsed/tailwind-formio/styles/button.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  background-color: transparent;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-weight: 700;
  color: hsla(220, 42%, 35%, 1);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
  text-decoration: none;
  -webkit-user-select: none;
          user-select: none;

  > span.bx, > span.fa {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  > span.bx:first-child, > span.fa:first-child {
    margin-left: 0px;
  }

  > span.bx:last-child, > span.fa:last-child {
    margin-right: 0px;
  }

  &:focus,
  &.focus {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  &:focus,
  &.focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

  &.disabled,
  &:disabled {
    cursor: default;
  }

  &.disabled,
  &:disabled {
    opacity: 0.5;
  }

  &.disabled,
  &:disabled {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  &:not(:disabled):not(.disabled) {
    cursor: pointer;
  }

  &:not(:disabled):not(.disabled):hover {
    color: hsla(190, 81%, 42%, 1);
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    @include box-shadow($btn-active-box-shadow);

    &:focus {
      @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
    }
  }

  &.btn-sm {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  &.btn-sm {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  &.btn-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  &.btn-xs {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  &.btn-xs {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  &.btn-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }

  &.btn-xs {
    padding-top: 2px;
    padding-bottom: 2px;
  }
}

a.btn.disabled,
fieldset:disabled a.btn {
  pointer-events: none;
}

.btn.btn-primary {
  border-color: hsla(220, 42%, 35%, 1);
  background-color: hsla(220, 42%, 35%, 1);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));

  &:not(:disabled):not(.disabled):hover {
    border-color: hsla(190, 81%, 42%, 1);
  }

  &:not(:disabled):not(.disabled):hover {
    background-color: hsla(190, 81%, 42%, 1);
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    border-color: hsla(190, 81%, 42%, 1);
  }

  &:not(:disabled):not(.disabled):focus {
    background-color: hsla(190, 81%, 42%, 1);
  }
}

.btn.btn-secondary {
  border-color: hsla(190, 81%, 42%, 1);
  background-color: hsla(190, 81%, 42%, 1);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));

  &:not(:disabled):not(.disabled):hover {
    border-color: hsla(190, 81%, 50%, 1);
  }

  &:not(:disabled):not(.disabled):hover {
    background-color: hsla(190, 81%, 50%, 1);
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    border-color: hsla(190, 81%, 50%, 1);
  }

  &:not(:disabled):not(.disabled):focus {
    background-color: hsla(190, 81%, 50%, 1);
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

.btn.btn-success {
  --tw-border-opacity: 1;
  border-color: hsl(109 66% 35% / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: hsl(109 66% 35% / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));

  &:not(:disabled):not(.disabled):hover {
    --tw-border-opacity: 1;
    border-color: hsl(108 62% 44% / var(--tw-border-opacity, 1));
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-bg-opacity: 1;
    background-color: hsl(108 62% 44% / var(--tw-bg-opacity, 1));
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-border-opacity: 1;
    border-color: hsl(108 62% 44% / var(--tw-border-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-bg-opacity: 1;
    background-color: hsl(108 62% 44% / var(--tw-bg-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

.btn.btn-danger {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));

  &:not(:disabled):not(.disabled):hover {
    --tw-border-opacity: 1;
    border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-border-opacity: 1;
    border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

.btn.btn-warning {
  border-color: hsla(45, 100%, 55%, 1);
  background-color: hsla(45, 100%, 55%, 1);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));

  &:not(:disabled):not(.disabled):hover {
    --tw-border-opacity: 1;
    border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-bg-opacity: 1;
    background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-border-opacity: 1;
    border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-bg-opacity: 1;
    background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

.btn.btn-info {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));

  &:not(:disabled):not(.disabled):hover {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

.btn.btn-light {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));

  &:not(:disabled):not(.disabled):hover {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

.btn.btn-dark {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));

  &:not(:disabled):not(.disabled):hover {
    --tw-border-opacity: 1;
    border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-bg-opacity: 1;
    background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-border-opacity: 1;
    border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-bg-opacity: 1;
    background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

.btn.btn-outline-primary {
  border-color: hsla(220, 42%, 35%, 1);
  background-color: transparent;
  color: hsla(220, 42%, 35%, 1);

  &:not(:disabled):not(.disabled):hover {
    border-color: hsla(190, 81%, 42%, 1);
  }

  &:not(:disabled):not(.disabled):hover {
    background-color: hsla(190, 81%, 42%, 1);
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    background-color: hsla(190, 81%, 42%, 1);
  }
}

.btn.btn-outline-secondary {
  border-color: hsla(190, 81%, 42%, 1);
  background-color: transparent;
  color: hsla(190, 81%, 42%, 1);

  &:not(:disabled):not(.disabled):hover {
    border-color: hsla(190, 81%, 42%, 1);
  }

  &:not(:disabled):not(.disabled):hover {
    background-color: hsla(190, 81%, 42%, 1);
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    border-color: hsla(190, 81%, 42%, 1);
  }

  &:not(:disabled):not(.disabled):focus {
    background-color: hsla(190, 81%, 42%, 1);
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

.btn.btn-outline-success {
  --tw-border-opacity: 1;
  border-color: hsl(109 66% 35% / var(--tw-border-opacity, 1));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: hsl(109 66% 35% / var(--tw-text-opacity, 1));

  &:not(:disabled):not(.disabled):hover {
    --tw-border-opacity: 1;
    border-color: hsl(109 66% 35% / var(--tw-border-opacity, 1));
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-bg-opacity: 1;
    background-color: hsl(109 66% 35% / var(--tw-bg-opacity, 1));
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-border-opacity: 1;
    border-color: hsl(109 66% 35% / var(--tw-border-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-bg-opacity: 1;
    background-color: hsl(109 66% 35% / var(--tw-bg-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

.btn.btn-outline-danger {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));

  &:not(:disabled):not(.disabled):hover {
    --tw-border-opacity: 1;
    border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-border-opacity: 1;
    border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

.btn.btn-outline-warning {
  border-color: hsla(45, 100%, 55%, 1);
  background-color: transparent;
  color: hsla(45, 100%, 55%, 1);

  &:not(:disabled):not(.disabled):hover {
    border-color: hsla(45, 100%, 55%, 1);
  }

  &:not(:disabled):not(.disabled):hover {
    background-color: hsla(45, 100%, 55%, 1);
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    border-color: hsla(45, 100%, 55%, 1);
  }

  &:not(:disabled):not(.disabled):focus {
    background-color: hsla(45, 100%, 55%, 1);
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

.btn.btn-outline-info {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));

  &:not(:disabled):not(.disabled):hover {
    --tw-border-opacity: 1;
    border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-border-opacity: 1;
    border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

.btn.btn-outline-light {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));

  &:not(:disabled):not(.disabled):hover {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

.btn.btn-outline-dark {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));

  &:not(:disabled):not(.disabled):hover {
    --tw-border-opacity: 1;
    border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
  }

  &:not(:disabled):not(.disabled):hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-border-opacity: 1;
    border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
  }

  &:not(:disabled):not(.disabled):focus {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

.btn.gu-mirror {
  justify-content: center;
}

.btn-block {
  display: flex;
  width: 100%;
  justify-content: flex-start;

  + .btn-block {
    margin-top: 0.25rem;
  }
}

input[type="submit"],
input[type="reset"],
input[type="button"] {
  &.btn-block {
    width: 100%;
  }
}

.builder-component {
  .component-btn-group {
    .component-settings-button {
      --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
      --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }
    .component-settings-button {
      height: 24px;
      width: 24px;
      display: flex;
      align-items: center;
      align-content: center;
      justify-content: center;
      border-radius: 2px !important;
    }

    .component-settings-button-move,
    .component-settings-button-edit-json,
    .component-settings-button-paste,
    .component-settings-button-copy {
      background: white;
    }
  }
}

.btn-group {
  display: flex;
  justify-content: flex-end;
  vertical-align: middle;

  .btn {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
  }

  .btn {
    display: flex;
  }

  .btn {
    align-items: center;
  }

  .btn {

    &:first-child {
      margin-left: 0px;
    }

    &:last-child {
      margin-right: 0px;
    }
  }
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@tsed/tailwind-formio/styles/card.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
/* Base styles */
.card {
  position: relative;
  display: flex;
  min-width: 0px;
  flex-direction: column;
  overflow-wrap: break-word;
  border-radius: 0.25rem;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  background-clip: border-box;

  > hr {
    margin-right: 0px;
  }

  > hr {
    margin-left: 0px;
  }

  > .list-group:first-child {
    .list-group-item:first-child {
      border-top-left-radius: 0.25rem;
      border-top-right-radius: 0.25rem;
    }
  }

  > .list-group:last-child {
    .list-group-item:last-child {
      border-bottom-right-radius: 0.25rem;
      border-bottom-left-radius: 0.25rem;
    }
  }
}

.card-body {
  /* Enable `flex-grow: 1` for decks and groups so that card blocks take up */
  /* as much space as possible, ensuring footers are aligned to the bottom. */
  flex: 1 1 auto;
  padding: 0.5rem;
}

.card-subtitle {

  margin-top: calc(-1 * 0.5rem / 2);
}

.card-text:last-child {
  margin-bottom: 0px;
}

/*
.card-link {
  @include hover {
    text-decoration: none;
  }

  + .card-link {
    margin-left: $card-spacer-x;
  }
}

!* Optional textual caps *! */

.card-header {
  margin-bottom: 0px;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;

  h5 {
    margin: 0px;
  }

  h5 {
    padding: 0px;
  }

  h5 {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  h5 {
    margin-bottom: 0 !important;
  }

  .btn, .btn:focus, .btn:not(:disabled):not(.disabled):hover {
    margin: 0px;
  }

  .btn, .btn:focus, .btn:not(:disabled):not(.disabled):hover {
    width: 100%;
  }

  .btn, .btn:focus, .btn:not(:disabled):not(.disabled):hover {
    justify-content: flex-start;
  }

  .btn, .btn:focus, .btn:not(:disabled):not(.disabled):hover {
    border-width: 0px;
  }

  .btn, .btn:focus, .btn:not(:disabled):not(.disabled):hover {
    border-color: transparent;
  }

  .btn, .btn:focus, .btn:not(:disabled):not(.disabled):hover {
    background-color: transparent;
  }

  .btn, .btn:focus, .btn:not(:disabled):not(.disabled):hover {
    padding: 0px;
  }

  .btn, .btn:focus, .btn:not(:disabled):not(.disabled):hover {
    font-weight: 400;
  }

  .btn, .btn:focus, .btn:not(:disabled):not(.disabled):hover {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
  }

  .btn, .btn:focus, .btn:not(:disabled):not(.disabled):hover {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  &:first-child {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
  }

  + .list-group {
    .list-group-item:first-child {
      border-width: 0px;
    }
  }
}

.card-footer {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;

  &:last-child {
    border-bottom-right-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
  }
}


/* Header navs */

/*.card-header-tabs {
  margin-right: -$card-spacer-x / 2;
  margin-bottom: -$card-spacer-y;
  margin-left: -$card-spacer-x / 2;
  border-bottom: 0;
}*/
/*
.card-header-pills {
  margin-right: -$card-spacer-x / 2;
  margin-left: -$card-spacer-x / 2;
}

!* Card image *!
.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: $card-img-overlay-padding;
}

.card-img {
  width: 100%; !* Required because we use flexbox and this inherently applies align-self: stretch *!
  @include border-radius($card-inner-border-radius);
}

!* Card image caps *!
.card-img-top {
  width: 100%; !* Required because we use flexbox and this inherently applies align-self: stretch *!
  @include border-top-radius($card-inner-border-radius);
}

.card-img-bottom {
  width: 100%; !* Required because we use flexbox and this inherently applies align-self: stretch *!
  @include border-bottom-radius($card-inner-border-radius);
}


!* Card deck *!

.card-deck {
  display: flex;
  flex-direction: column;

  .card {
    margin-bottom: $card-deck-margin;
  }

  @include media-breakpoint-up(sm) {
    flex-flow: row wrap;
    margin-right: -$card-deck-margin;
    margin-left: -$card-deck-margin;

    .card {
      display: flex;
      !* Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 *!
      flex: 1 0 0%;
      flex-direction: column;
      margin-right: $card-deck-margin;
      margin-bottom: 0; !* Override the default *!
      margin-left: $card-deck-margin;
    }
  }
}


/* Card groups */

[ref=sidebar-groups],
.card-group {
  display: flex;
  flex-direction: column;

  /* The child selector allows nested `.card` within `.card-group` */
  /* to display properly. */

  > .card {
    margin-bottom: 0.75rem;
  }

  > .card {

    .card-header {
      margin-bottom: -1px;
    }
  }

  /*
    @include media-breakpoint-up(sm) {
      flex-flow: row wrap;
      !* The child selector allows nested `.card` within `.card-group` *!
      !* to display properly. *!
      > .card {
        !* Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 *!
        flex: 1 0 0%;
        margin-bottom: 0;

        + .card {
          margin-left: 0;
          border-left: 0;
        }

        !* Handle rounded corners *!
        @if $enable-rounded {
          &:not(:last-child) {
            @include border-right-radius(0);

            .card-img-top,
            .card-header {
              border-top-right-radius: 0;
            }
            .card-img-bottom,
            .card-footer {
              border-bottom-right-radius: 0;
            }
          }

          &:not(:first-child) {
            @include border-left-radius(0);

            .card-img-top,
            .card-header {
              border-top-left-radius: 0;
            }
            .card-img-bottom,
            .card-footer {
              border-bottom-left-radius: 0;
            }
          }
        }
      }
    }*/
}

/*
!* Columns *!

.card-columns {
  .card {
    margin-bottom: $card-columns-margin;
  }

  @include media-breakpoint-up(sm) {
    column-count: $card-columns-count;
    column-gap: $card-columns-gap;
    orphans: 1;
    widows: 1;

    .card {
      display: inline-block; !* Don't let them vertically span multiple columns *!
      width: 100%; !* Don't let their width change *!
    }
  }
}

*/

/* Accordion */

.accordion {
  > .card {
    overflow: hidden;
  }
  > .card {

    &:not(:first-of-type) {
      .card-header:first-child {
        border-radius: 0px;
      }

      &:not(:last-of-type) {
        border-radius: 0px;
      }

      &:not(:last-of-type) {
        border-bottom-width: 0px;
      }
    }

    &:first-of-type {
      border-bottom-right-radius: 0px;
      border-bottom-left-radius: 0px;
    }

    &:first-of-type {
      border-bottom-width: 0px;
    }

    &:last-of-type {
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
    }

    .card-header {
      margin-bottom: -1px;
    }
  }
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@tsed/tailwind-formio/styles/form.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
:root {
  --tw-ring-inset: 'var(--tw-empty,/*!*/ /*!*/)';
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
}

.form-group {
  margin-bottom: 1.25rem;

  &:last-child {
    margin-bottom: 0px;
  }

  &.formio-hidden {
    display: none;
  }
}

.builder-component > .form-group {
  margin-bottom: 1.25rem;
}

.form-control {
  display: block;
  width: 100%;
  appearance: none;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  line-height: 1.5;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

  &.form-control-sm {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  &.form-control-sm {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  &.form-control-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

.form-control:disabled, .form-control[readonly] {
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.formio-modified:not(.has-error) {
  label {
    --tw-text-opacity: 1;
    color: hsl(109 66% 35% / var(--tw-text-opacity, 1));
  }

  .form-control {
    --tw-border-opacity: 1;
    border-color: hsl(109 66% 35% / var(--tw-border-opacity, 1));
  }

  .form-control {

    &:focus {
      --tw-border-opacity: 1;
      border-color: hsl(106 64% 67% / var(--tw-border-opacity, 1));
    }

    &:focus {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }

    &:focus {
      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    }

    &:focus {
      --tw-ring-opacity: 1;
      --tw-ring-color: hsl(105 67% 80% / var(--tw-ring-opacity, 1));
    }

    &:focus {
      --tw-ring-opacity: 0.5;
    }

    &:focus {
      outline-offset: 2px;
      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
      border-color: hsl(109, 66%, 35%);
    }
  }
}
.help-block {
  display: block;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.has-error {
  label, .error {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
  }

  .help-block {
    display: block;
  }

  .help-block {
    padding: 0.75rem;
  }

  .help-block {
    --tw-text-opacity: 1;
    color: rgb(185 28 28 / var(--tw-text-opacity, 1));
  }

  .form-control {
    --tw-border-opacity: 1;
    border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
  }

  .form-control {

    &:focus {
      --tw-border-opacity: 1;
      border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
    }

    &:focus {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }

    &:focus {
      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    }

    &:focus {
      --tw-ring-opacity: 1;
      --tw-ring-color: rgb(254 202 202 / var(--tw-ring-opacity, 1));
    }

    &:focus {
      --tw-ring-opacity: 0.5;
    }

    &:focus {
      outline-offset: 2px;
      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
      border-color: #dc2626;
    }
  }
}

input.form-control::placeholder,
textarea.form-control::placeholder {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
  opacity: 1;
}

.form-control:focus {
  border-color: hsla(220, 100%, 67%, 1);
  outline: 2px solid transparent;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  --tw-ring-color: hsla(220, 100%, 91%, 1);
  --tw-ring-opacity: 0.5;
  outline-offset: 2px;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  border-color: #2563eb;
}

.form-control:disabled, .form-control[readonly] {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
  opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0px;
}

::-webkit-date-and-time-value {
  min-height: 1.5em;
}

select.form-control {
  background-repeat: no-repeat;
  padding-right: 2.5rem;
  print-color-adjust: exact;
  background-size: 1.5em 1.5em;
  background-position: right 0.5rem center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");

  &:focus::-ms-value {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }

  &:focus::-ms-value {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

select.form-control[size],
select.form-control[multiple] {
  height: auto;
  padding-right: 0.75rem;
  background-image: none;
}

textarea.form-control {
  height: auto;
}

.form-control-file,
.form-control-range {
  display: block;
  width: 100%;
}

.form-text {
  margin-top: 0.25rem;
  display: block;

  &.error {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  &.error {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
  }
}

.text-muted {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
  &[ref="tooltip"] {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

.col-form-label {
  margin: 0px;
  display: flex;
  align-items: center;
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
}

.field-required:after {
  z-index: 1;
  margin-left: 0.25rem;
}

.formio-component hr,
hr {
  margin-left: 5rem;
  margin-right: 5rem;
  margin-bottom: 1.25rem;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}


/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@tsed/tailwind-formio/styles/choices.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************/
.choices {
  position: relative;
  margin-bottom: 1rem;
  font-size: inherit;

  &:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

  &.is-focused {
    > .form-control, .choices__inner {
      border-color: hsla(220, 100%, 67%, 1);
    }
    > .form-control, .choices__inner {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    > .form-control, .choices__inner {
      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    }
    > .form-control, .choices__inner {
      --tw-ring-color: hsla(220, 100%, 91%, 1);
    }
    > .form-control, .choices__inner {
      --tw-ring-opacity: 0.5;
    }
    > .form-control, .choices__inner {
      outline-offset: 2px;
      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
      border-color: #2563eb;
    }
  }

  &:last-child {
    margin-bottom: 0px;
  }

  &__inner {
    display: block;
  }

  &__inner {
    width: 100%;
  }

  &__inner {
    appearance: none;
  }

  &__inner {
    border-radius: 0.375rem;
  }

  &__inner {
    border-width: 1px;
  }

  &__inner {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  }

  &__inner {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }

  &__inner {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  &__inner {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  &__inner {
    padding-bottom: 0px;
  }

  &__inner {
    line-height: 1.5;
  }

  &__inner {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  &__inner {
    min-height: 42px;
    font-size: inherit;
    line-height: inherit;
  }

  &__input {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }

  &__list--single {
    display: flex;
  }

  &__list--single .choices__item {
    margin-bottom: 0;
  }

  &__item {
    cursor: default;
  }

  &__item {

    &--selectable {
      cursor: pointer;
    }

    &--disabled {
      cursor: not-allowed;
    }

    &--disabled {
      opacity: 0.5;
    }

    &--disabled {
      -webkit-user-select: none;
      user-select: none;
    }
  }

  &.is-disabled {
    .choices__inner,
    .choices__input {
      cursor: not-allowed;
    }
    .choices__inner,
    .choices__input {
      --tw-bg-opacity: 1;
      background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
    }
    .choices__inner,
    .choices__input {
      opacity: 1;
    }
    .choices__inner,
    .choices__input {
      -webkit-user-select: none;
      user-select: none
    }

    .choices__item {
      cursor: not-allowed;
    }
  }

  [hidden] {
    display: none !important
  }

  &[data-type*=select-one] {
    cursor: pointer;
  }

  &[data-type*=select-one] {
    position: relative;

    .choices__inner {
      padding-bottom: 0.5rem;
    }

    .choices__input {
      margin: 0px;
    }

    .choices__input {
      display: block;
    }

    .choices__input {
      width: 100%;
    }

    .choices__input {
      border-bottom-width: 1px;
    }

    .choices__input {
      border-style: solid;
    }

    .choices__input {
      --tw-border-opacity: 1;
      border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    }

    .choices__input {
      --tw-bg-opacity: 1;
      background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    }

    .choices__input {
      padding: 0.625rem;
    }

    .choices__button {
      position: absolute;
    }

    .choices__button {
      right: 0px;
    }

    .choices__button {
      margin-top: -0.625rem;
    }

    .choices__button {
      margin-right: 1.5rem;
    }

    .choices__button {
      border-radius: 100%;
    }

    .choices__button {
      padding: 0px;
    }

    .choices__button {
      opacity: 0.5;
    }

    .choices__button {
      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
      padding: 0;
      background-size: 8px;
      top: 50%;
      height: 20px;
      width: 20px;

      &:focus, &:hover {
        opacity: 1;
      }

      &:focus {
        box-shadow: 0 0 0 2px #00bcd4
      }
    }

    .choices__item[data-value=''] .choices__button {
      display: none;
    }

    &:after {
      position: absolute;
    }

    &:after {
      top: 0px;
    }

    &:after {
      right: 0.375rem;
    }

    &:after {
      margin: 0px;
    }

    &:after {
      height: 0px;
    }

    &:after {
      height: 100%;
    }

    &:after {
      width: 0px;
    }

    &:after {
      border-width: 0px;
    }

    &:after {
      border-style: solid;
    }

    &:after {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
      background-size: 1.5em 1.5em;
      background-repeat: no-repeat;
      background-position: center;
      content: '';
      width: 1.5em;
    }

    &.is-open:after {
      margin: 0px;
    }

    &[dir=rtl]:after {
      left: 11.5px;
      right: auto
    }

    &[dir=rtl] .choices__button {
      left: 0px;
    }

    &[dir=rtl] .choices__button {
      right: auto;
    }

    &[dir=rtl] .choices__button {
      margin-right: 0px;
    }

    &[dir=rtl] .choices__button {
      margin-left: 25px;
    }
  }

  &[data-type*=select-multiple],
  &[data-type*=text] {
    .choices__inner {
      cursor: text;
    }

    .choices__button {
      position: relative;
    }

    .choices__button {
      display: inline-block;
    }

    .choices__button {
      border-radius: 0px;
    }

    .choices__button {
      border-left-width: 1px;
    }

    .choices__button {
      border-style: solid;
    }

    .choices__button {
      border-color: #344D80;;
    }

    .choices__button {
      opacity: 0.75;
    }

    .choices__button {
      margin: 0 -4px 0 8px;
      padding-left: 16px;
      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
      background-size: 8px;
      width: 8px;
      line-height: 1;

      &:hover, &:focus {
        opacity: 1;
      }
    }
  }
  &[data-type=select-multiple] {
    &:after {
      position: absolute;
    }
    &:after {
      top: 0px;
    }
    &:after {
      right: 0.375rem;
    }
    &:after {
      margin: 0px;
    }
    &:after {
      height: 0px;
    }
    &:after {
      height: 100%;
    }
    &:after {
      width: 0px;
    }
    &:after {
      border-width: 0px;
    }
    &:after {
      border-style: solid;
    }
    &:after {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
      background-size: 1.5em 1.5em;
      background-repeat: no-repeat;
      background-position: center;
      content: '';
      width: 1.5em;
    }

    .form-control {
      padding-bottom: 0px;
    }
  }
}

.choices__list--multiple .choices__item {
  border-radius: 0.125rem;
}

.is-open .choices__inner , .is-flipped.is-open .choices__inner {
  border-radius: 0.375rem;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.choices__list {
  margin: 0px;
  padding-left: 0px;
  list-style: none;

  &--single {
    display: inline-block;
  }

  &--single {
    width: 100%;
  }

  &--single {
    padding: 0px;
  }

  &--single {

    .choices__item {
      width: 100%;
    }
    .choices__item.choices__item--selectable{
      margin-bottom: -0.375rem;
    }
  }

  &--multiple {
    display: inline;
  }

  &--multiple {

    &.choices__item[data-deletable] {
      padding-right: 5px
    }

    .choices__item {
      margin-right: 0.25rem;
    }

    .choices__item {
      margin-bottom: 0.25rem;
    }

    .choices__item {
      display: inline-block;
    }

    .choices__item {
      border-radius: 0.25rem;
    }

    .choices__item {
      border-width: 1px;
    }

    .choices__item {
      border-style: solid;
    }

    .choices__item {
      border-color: #344D80;;
    }

    .choices__item {
      background-color: hsla(220, 100%, 51%, 1);
    }

    .choices__item {
      padding-top: 0.25rem;
      padding-bottom: 0.25rem;
    }

    .choices__item {
      padding-left: 0.625rem;
      padding-right: 0.625rem;
    }

    .choices__item {
      vertical-align: middle;
    }

    .choices__item {
      font-size: 0.75rem;
      line-height: 1rem;
    }

    .choices__item {
      font-weight: 600;
    }

    .choices__item {
      --tw-text-opacity: 1;
      color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    }

    .choices__item {
      word-break: break-all;
      box-sizing: border-box;

      &.is-highlighted {
        border-color: hsla(190, 81%, 42%, 1);
      }

      &.is-highlighted {
        background-color: hsla(190, 81%, 50%, 1);
      }

      &.is-highlighted {
        .choices__button {
          border-color: hsla(190, 81%, 42%, 1);
        }
      }
    }
  }

  &--dropdown {
    visibility: hidden;
  }

  &--dropdown {
    position: absolute;
  }

  &--dropdown {
    top: 100%;
  }

  &--dropdown {
    z-index: 5;
  }

  &--dropdown {
    width: 100%;
  }

  &--dropdown {
    overflow: hidden;
  }

  &--dropdown {
    word-break: break-all;
  }

  &--dropdown {
    border-radius: 0.25rem;
  }

  &--dropdown {
    border-width: 1px;
  }

  &--dropdown {
    border-style: solid;
  }

  &--dropdown {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  }

  &--dropdown {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }

  &--dropdown {
    will-change: visibility;

    &.is-active {
      visibility: visible
    }

    .choices__list {
      position: relative;
    }

    .choices__list {
      overflow: auto;
    }

    .choices__list {
      max-height: 300px;
      -webkit-overflow-scrolling: touch;
      will-change: scroll-position;

      .choices__item--selectable.is-highlighted:after {
        opacity: 0.5;
      }
    }

    .choices__item {
      position: relative;
      padding: 10px;
      font-size: 14px;

      &--selectable.is-highlighted {
        --tw-bg-opacity: 1;
        background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
      }
    }
  }
}

[dir=rtl] .choices__list {
  &--single {
    padding-right: 4px;
    padding-left: 16px
  }

  &--multiple {
    .choices__item {
      margin-right: 0;
      margin-left: 3.75px
    }
  }

  &--dropdown .choices__item {
    text-align: right;
  }
}

.is-disabled .choices__list--multiple .choices__item {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
  opacity: 1;
}

.is-open .choices__list--dropdown {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.is-flipped .choices__list--dropdown {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: -1px;
  border-radius: .25rem .25rem 0 0
}

@media (min-width: 640px) {
  .choices__list--dropdown {
    .choices__item--selectable {
      padding-right: 100px;

      &:after {
        content: attr(data-select-text);
        font-size: 12px;
        opacity: 0;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%)
      }
    }
  }

  [dir=rtl] .choices__list--dropdown {
    .choices__item--selectable {
      text-align: right;
      padding-left: 100px;
      padding-right: 10px;

      &:after {
        right: auto;
        left: 10px
      }
    }
  }
}


.choices__heading {
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  padding: 0.625rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
  font-size: inherit;
}

.choices__button {
  cursor: pointer;
  appearance: none;
  border-width: 0px;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  text-indent: -9999px;

  &:focus, &:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
}

.choices__input {
  display: inline-block;
  max-width: 100%;
  border-radius: 0px;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-bottom: 0.25rem;
  vertical-align: baseline;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

[dir=rtl] .choices__input {
  padding-right: 2px;
  padding-left: 0
}

.choices__placeholder {
  opacity: 0.5;
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@tsed/tailwind-formio/styles/input-group.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************/
.input-group {
  position: relative;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: stretch;
  border-radius: 0.25rem;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  > .choices {
    margin-bottom: 0px
  }
  > .choices {
    flex: 1 1 0%
  }
  > .choices {
    .choices__inner {
      --tw-shadow: 0 0 #0000;
      --tw-shadow-colored: 0 0 #0000;
      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
    }
  }
}

.input-group > .form-control:not([type=hidden]),
.input-group > .form-control-plaintext,
.input-group > .custom-select,
.input-group > .custom-file {
  position: relative;
  margin-bottom: 0px;
  margin-top: 0px;
  flex: 1 1 auto;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  width: 1%;

  + .form-control,
  + .custom-select,
  + .custom-file {
    margin: -1px
  }
}

.input-group > .form-control:focus,
.input-group > .custom-select:focus,
.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label {
  z-index: 3
}

.input-group > .custom-file .custom-file-input:focus {
  z-index: 4
}

.input-group > .form-control,
.input-group > .choices,
.input-group > .custom-select {
  &:not(:last-child) {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px
  }
  &:not(:last-child) {
    .choices__inner {
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px
    }
  }

  &:not(:first-child) {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px
  }

  &:not(:first-child) {
    .choices__inner {
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px
    }
  }
}

.input-group > [type=hidden]:first-child ~ .form-control {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem
}

.input-group > .custom-file {
  display: flex;
  align-items: center
}

.input-group > .custom-file:not(:last-child) .custom-file-label,
.input-group > .custom-file:not(:last-child) .custom-file-label::after {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px
}

.input-group > .custom-file:not(:first-child) .custom-file-label {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px
}

.input-group-prepend,
.input-group-append {
  display: flex;

  .btn {
    position: relative
  }

  .btn {
    z-index: 2
  }

  .btn {

    &:focus {
      z-index: 3
    }
  }

  .btn + .btn,
  .btn + .input-group-text,
  .input-group-text + .input-group-text,
  .input-group-text + .btn {
    margin-left: -1px
  }
}

.input-group-prepend {
  margin-right: -1px
}

.input-group-append {
  margin-left: -1px
}

.input-group-text {
  margin: 0px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 0.375rem;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));

  input[type="radio"],
  input[type="checkbox"] {
    margin-top: 0px
  }
}

/*.input-group-lg > .form-control:not(textarea),
.input-group-lg > .custom-select {
  height: $input-height-lg;
}*/

/*.input-group-lg > .form-control,
.input-group-lg > .custom-select,
.input-group-lg > .input-group-prepend > .input-group-text,
.input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-append > .btn {
  padding: $input-padding-y-lg $input-padding-x-lg;
  @include font-size($input-font-size-lg);
  line-height: $input-line-height-lg;
  @include border-radius($input-border-radius-lg);
}

.input-group-sm > .form-control:not(textarea),
.input-group-sm > .custom-select {
  height: $input-height-sm;
}

.input-group-sm > .form-control,
.input-group-sm > .custom-select,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn {
  padding: $input-padding-y-sm $input-padding-x-sm;
  @include font-size($input-font-size-sm);
  line-height: $input-line-height-sm;
  @include border-radius($input-border-radius-sm);
}

.input-group-lg > .custom-select,
.input-group-sm > .custom-select {
  padding-right: $custom-select-padding-x + $custom-select-indicator-padding;
}*/

.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append:not(:last-child) > .btn,
.input-group > .input-group-append:not(:last-child) > .input-group-text,
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px
}

.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@tsed/tailwind-formio/styles/checkbox.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/

.form-check {
  position: relative;
  display: block;
}

.form-check-label {
  margin-bottom: 0px;
  display: inline-flex;
  align-items: center;
}

.form-check-input {
  display: inline-block;
  flex-shrink: 0;
  appearance: none;
  border-width: 1px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0px;
  vertical-align: middle;
  border-radius: 0.25rem;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  color: #344D80;;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  margin-right: 0.5rem;
  print-color-adjust: exact;
  background-origin: border-box;
  -webkit-user-select: none;
          user-select: none;
  height: 1rem;
  width: 1rem;

  &:focus {
    --tw-ring-offset-width: 2px;
    outline-offset: 2px;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }

  &:focus {
    border-color: hsla(220, 100%, 67%, 1);
  }

  &:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

  &:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }

  &:focus {
    --tw-ring-color: hsla(220, 100%, 91%, 1);
  }

  &:focus {
    --tw-ring-opacity: 0.5;
  }

  &[type='radio'] {
    border-radius: 100%;
  }

  &[type='checkbox']:indeterminate,
  &[type='checkbox']:checked,
  &[type='radio']:checked {
    border-color: transparent;
  }

  &[type='checkbox']:indeterminate,
  &[type='checkbox']:checked,
  &[type='radio']:checked {
    background-color: currentColor;
  }

  &[type='checkbox']:indeterminate,
  &[type='checkbox']:checked,
  &[type='radio']:checked {
    background-position: center;
  }

  &[type='checkbox']:indeterminate,
  &[type='checkbox']:checked,
  &[type='radio']:checked {
    background-repeat: no-repeat;
  }

  &[type='checkbox']:indeterminate,
  &[type='checkbox']:checked,
  &[type='radio']:checked {
    background-size: 100% 100%;
  }

  &[type='checkbox']:indeterminate,
  &[type='checkbox']:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  }

  &[type='radio']:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  }

  &[type='checkbox']:checked:hover,
  &[type='checkbox']:checked:focus,
  &[type='radio']:checked:hover,
  &[type='radio']:checked:focus {
    border-color: transparent;
  }

  &[type='checkbox']:checked:hover,
  &[type='checkbox']:checked:focus,
  &[type='radio']:checked:hover,
  &[type='radio']:checked:focus {
    background-color: currentColor;
  }

  &:disabled ~ span {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
  }
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@tsed/tailwind-formio/styles/tooltip.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************/

.tooltip {
  position: absolute;
  z-index: 50;
  margin: 0px;
  display: block;
  overflow-wrap: break-word;
  font-weight: 400;

  .tooltip-arrow {
    position: absolute;
  }

  .tooltip-arrow {
    display: block;
  }

  .tooltip-arrow {
    height: .4rem;
  }

  .tooltip-arrow {
    width: .8rem;
  }

  .tooltip-arrow {
    border-right-width: 0px;
  }

  .tooltip-arrow {

    &::before {
      position: absolute;
    }

    &::before {
      border-style: solid;
    }

    &::before {
      border-color: transparent;
    }

    &::before {
      content: "";
    }
  }

  &[x-placement^="top"] {
    margin-bottom: 0.25rem;
  }

  &[x-placement^="top"] {
    padding: .4rem 0;

    .tooltip-arrow {
      bottom: 0px;
    }

    .tooltip-arrow {

      &::before {
        top: 0px;
      }

      &::before {
        border-width: .4rem calc(.8rem / 2) 0;
        border-top-color: #000;
      }
    }
  }
  &[x-placement^="right"] {
    margin-left: 0.25rem;
  }
  &[x-placement^="right"] {
    padding: 0 .4rem;

    .tooltip-arrow {
      left: 0px;
    }

    .tooltip-arrow {
      border-right: 0 !important;
      width: .4rem;
      height: .8rem;

      &::before {
        right: 0px;
      }

      &::before {
        border-right-color: #000;
        border-width: calc(.8rem / 2) .4rem calc(.8rem / 2) 0;
      }
    }
    .tooltip-inner {
      margin-left: 0px;
    }
  }
  &[x-placement^="bottom"] {
    margin-top: 0.25rem;
  }
  &[x-placement^="bottom"] {
    padding: .4rem 0;

    .tooltip-arrow {
      top: 0px;
    }

    .tooltip-arrow {

      &::before {
        bottom: 0px;
      }

      &::before {
        border-width: 0 calc(.8rem / 2) .4rem;
        border-bottom-color: #000;
      }
    }
  }
  &[x-placement^="left"] {
    margin-right: 0.25rem;
  }
  &[x-placement^="left"] {
    padding: 0 .4rem;

    .tooltip-arrow {
      right: 0px;
    }

    .tooltip-arrow {
      width: .4rem;
      height: .8rem;

      &::before {
        left: 0px;
      }

      &::before {
        border-width: calc(.8rem / 2) 0 calc(.8rem / 2) .4rem;
        border-left-color: #000;
      }
    }
  }
}

.tooltip-inner {
  max-width: 20rem;
  border-radius: 0.125rem;
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@tsed/tailwind-formio/styles/modal.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************/
.formio-dialog.formio-dialog-theme-default,
.formio-dialog.formio-dialog-theme-default.component-settings{
  .formio-dialog-close.btn{
    background-color: transparent;
  }
  .formio-dialog-close.btn{
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .formio-dialog-close.btn{
    font-size: 0.75rem;
    line-height: 1rem;
  }
  .formio-dialog-close.btn{
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
  }
  .formio-dialog-close.btn:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
  }
  .formio-dialog-close.btn:hover{
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
  .formio-dialog-close.btn:focus{
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
  }
  .formio-dialog-close.btn:focus{
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
  .formio-dialog-close.btn:focus{
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
  .formio-dialog-close.btn {

    &:before{
      padding: 0px;
    }

    &:before{
      font-size: 1.125rem;
    }

    &:before{
      color: currentColor;
    }

    &:before {
      line-height: normal;
    }
  }

  .formio-dialog-content{
    padding: 0px;
  }

  .formio-dialog-content{
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .formio-dialog-content {

    .component-edit-container{
      overflow: visible;
    }
  }

  .formio-dialog-wrapper{
    display: flex;
  }

  .formio-dialog-wrapper{
    height: 100%;
  }

  .formio-dialog-wrapper{
    width: 100%;
  }

  .formio-dialog-wrapper{
    flex-direction: column;
  }

  .formio-dialog-body{
    overflow: auto;
  }

  .formio-dialog-title{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .formio-dialog-title{
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .formio-dialog-title{
    font-size: 1.125rem;
  }
}

.formio-dialog.formio-dialog-theme-default.component-settings {
  .formio-dialog-content{
    width: 100%;
  }
  .formio-dialog-content{
    padding: 0px;
  }
  .formio-dialog-content{
    font-size: 0.75rem;
    line-height: 1rem;
  }
  @media (min-width: 640px){
    .formio-dialog-content{
      width: 90%;
    }
  }
  .formio-dialog-content {

    .component-edit-container{
      overflow: visible;
    }
  }
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@tsed/tailwind-formio/styles/nav.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
.card-tabs {
  .card-header-tabs {
    padding: 0px
  }
  .card-header-tabs {

    .nav {
      position: relative
    }

    .nav {
      margin-bottom: -1px
    }

    .nav {
      display: flex
    }

    .nav {
      flex-wrap: wrap
    }

    .nav {
      align-items: center
    }

    .nav {
      padding-left: 0.25rem;
      padding-right: 0.25rem
    }

    .nav {
      padding-top: 0.25rem
    }

    .nav {

      &-item {
        position: relative
      }

      &-item {
        margin-right: 0.25rem
      }

      &-item {

        &:last-child {
          margin-right: 0px
        }

        &.active {
          .nav-link {
            --tw-border-opacity: 1;
            border-color: rgb(209 213 219 / var(--tw-border-opacity, 1))
          }
          .nav-link {
            --tw-bg-opacity: 1;
            background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
          }
          .nav-link {
            color: hsla(190, 81%, 42%, 1)
          }

          .nav-border {
            border-color: hsla(220, 42%, 35%, 1)
          }
        }
      }

      &-link {
        position: relative
      }

      &-link {
        display: inline-flex
      }

      &-link {
        flex-direction: column
      }

      &-link {
        align-items: stretch
      }

      &-link {
        overflow: hidden
      }

      &-link {
        font-size: 0.75rem;
        line-height: 1rem
      }

      &-link {
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms
      }

      &-link {
        border-color: transparent
      }

      &-link {
        background-color: transparent
      }

      &-link {
        --tw-text-opacity: 1;
        color: rgb(80 71 71 / var(--tw-text-opacity, 1))
      }

      &-link {
        position: relative
      }

      &-link {
        cursor: pointer
      }

      &-link {
        border-radius: 0px
      }

      &-link {
        border-width: 1px
      }

      &-link {
        border-bottom-width: 0px
      }

      &-link {
        border-style: solid
      }

      &-link {
        padding-left: 0.75rem;
        padding-right: 0.75rem
      }

      &-link {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem
      }

      &-border {
        position: absolute
      }

      &-border {
        top: 0px
      }

      &-border {
        right: 0px
      }

      &-border {
        left: 0px
      }

      &-border {
        z-index: 1
      }

      &-border {
        border-top-width: 2px
      }

      &-border {
        border-color: transparent
      }
    }
  }

  .card-body {
    padding: 0.75rem
  }
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@tsed/tailwind-formio/styles/pagination.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************/
.pagination {
  display: inline-flex;
  border-radius: 0.25rem;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.page-link {
  position: relative;
  margin-left: -1px;
  display: block;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  line-height: 1.5;
  color: hsla(220, 42%, 35%, 1);

  &:hover {
    z-index: 2;
  }

  &:hover {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  }

  &:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
  }

  &:hover {
    color: hsla(190, 81%, 42%, 1);
  }

  &:hover {
    text-decoration-line: none;
  }

  &:focus {
    z-index: 2;
  }

  &:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

  &:focus {
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
}

.page-item {
  &:first-child {
    .page-link {
      margin-left: 0px;
    }
    .page-link {
      border-top-left-radius: 0.25rem;
      border-bottom-left-radius: 0.25rem;
    }
  }
  &:last-child {
    .page-link {
      border-top-right-radius: 0.25rem;
      border-bottom-right-radius: 0.25rem;
    }
  }

  &.active .page-link {
    z-index: 1;
  }

  &.active .page-link {
    border-color: hsla(220, 42%, 35%, 1);
  }

  &.active .page-link {
    background-color: hsla(220, 42%, 35%, 1);
  }

  &.active .page-link {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  &.disabled .page-link {
    pointer-events: none;
  }

  &.disabled .page-link {
    cursor: auto;
  }

  &.disabled .page-link {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  }

  &.disabled .page-link {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }

  &.disabled .page-link {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
  }
}

.pagination-group {
  display: flex;
  .form-group {
    margin: 0px;
  }
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@tsed/tailwind-formio/styles/progress.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/
.progress {

    display: flex;

    height: 1rem;

    overflow: hidden;

    border-radius: 0.25rem;

    --tw-bg-opacity: 1;

    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));

    font-size: 0.75rem;

    line-height: 1rem;

    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);

    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);

    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.progress-bar {

    display: flex;

    flex-direction: column;

    justify-content: center;

    white-space: nowrap;

    background-color: hsla(220, 42%, 35%, 1);

    text-align: center;

    --tw-text-opacity: 1;

    color: rgb(255 255 255 / var(--tw-text-opacity, 1));

    transition-property: all;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 500ms;

    transition-timing-function: linear
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@tsed/tailwind-formio/styles/list-group.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************/
/* Base class - Easily usable on <ul>, <ol>, or <div> */

.list-group {
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  padding-left: 0px
}


/* Interactive list items
Use anchor or button elements instead of `li`s or `div`s to create interactive
list items. Includes an extra `.active` modifier class for selected items.
 */

.list-group-item-action {
  width: 100%;
  text-align: inherit; /* For `<button>`s (anchors inherit) */
  &:hover,
  &:focus {
    z-index: 1
  }
  &:hover,
  &:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
  }
  &:hover,
  &:focus {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1))
  }

  &:active {
    z-index: 1
  }

  &:active {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
  }

  &:active {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1))
  }
}


/* Individual list items
Use on `li`s or `div`s within the `.list-group` parent.
*/

.list-group-item {
  position: relative;
  margin-bottom: -1px;
  display: block;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;

  &.list-group-header {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1))
  }

  &:first-child {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem
  }

  &:last-child {
    margin-bottom: 0px
  }

  &:last-child {
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem
  }

  &.disabled,
  &:disabled {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
  }

  &.disabled,
  &:disabled {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1))
  }

  &.active {
    z-index: 2
  }

  &.active {
    border-color: hsla(220, 42%, 35%, 1)
  }

  &.active {
    background-color: hsla(220, 42%, 35%, 1)
  }

  &.active {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
  }
}

/*
// Horizontal
//
// Change the layout of list group items from vertical (default) to horizontal.

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .list-group-horizontal#{$infix} {
      flex-direction: row;

      .list-group-item {
        margin-right: -$list-group-border-width;
        margin-bottom: 0;

        &:first-child {
          @include border-left-radius($list-group-border-radius);
          @include border-top-right-radius(0);
        }

        &:last-child {
          margin-right: 0;
          @include border-right-radius($list-group-border-radius);
          @include border-bottom-left-radius(0);
        }
      }
    }
  }
}
*/

/* Flush list items
Remove borders and border-radius to keep list group items edge-to-edge. Most
useful within other components (e.g., cards).
*/

.list-group-flush {
  .list-group-item {
    border-radius: 0.25rem
  }
  .list-group-item {
    border-left-width: 0px
  }
  .list-group-item {
    border-right-width: 0px
  }
  .list-group-item {

    &:last-child {
      margin-bottom: -1px
    }
  }

  &:first-child {
    .list-group-item:first-child {
      border-top-width: 0px
    }
  }

  &:last-child {
    .list-group-item:last-child {
      margin-bottom: 0px
    }
    .list-group-item:last-child {
      border-bottom-width: 0px
    }
  }
}


/* Contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
/*
@each $color, $value in $theme-colors {
  @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
}
*/

/*!*****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@tsed/tailwind-formio/styles/tables.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************/
/* Basic Bootstrap table */

.table {
  margin-bottom: 1rem;
  width: 100%;
  background-color: transparent;

  th,
  td {
    border-top-width: 1px;
  }

  th,
  td {
    border-style: solid;
  }

  th,
  td {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  }

  th,
  td {
    padding: 0.75rem;
  }

  th,
  td {
    text-align: left;
  }

  th,
  td {
    vertical-align: top;
  }

  th,
  td {

    &.align-middle {
      vertical-align: middle;
    }

    &.align-bottom {
      vertical-align: bottom;
    }
  }

  thead th {
    border-bottom-width: 2px;
  }

  thead th {
    border-style: solid;
  }

  thead th {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  }

  thead th {
    border-style: solid;
  }

  tbody + tbody {
    border-top-width: 2px;
  }

  tbody + tbody {
    border-style: solid;
  }

  tbody + tbody {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  }

  tbody + tbody {
    border-style: solid;
  }
}

.table-cell-header {
  &__label {
    display: flex;
  }
  &__label {
    > span:first-child {
      flex: 1 1 0%;
    }
  }
  &__filter {
    margin-top: 0.25rem;
  }
}

/* Condensed table w/ half padding */
.table-sm {
  th,
  td {
    padding: 0.375rem;
  }
}


/* Border versions - Add or remove borders all around the table and between all the columns. */

.table-bordered {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));

  th,
  td {
    border-width: 1px;
  }

  th,
  td {
    border-style: solid;
  }

  th,
  td {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  }

  thead {
    th,
    td {
      border-width: 1px;
    }
  }
}

.table-borderless {
  th,
  td,
  thead th,
  tbody + tbody {
    border-width: 0px;
  }
}

/* Zebra-striping - Default zebra-stripe styles (alternating gray and transparent backgrounds) */

.table-striped {
  tbody tr:nth-of-type(odd) {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
  }
}

/* Hover effect - Placed here since it has to come after the potential zebra striping */

.table-hover {
  tbody tr:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
  }
  tbody tr:hover {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
  }
}

.table-group {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  .table {
    margin-bottom: 0px;
  }
  .table {
    border-top-width: 0px;
  }
  .table {
    thead th {
      border-top-width: 0px;
    }
  }
  .pagination-group {
    border-top-width: 1px;
  }
  .pagination-group {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  }
  .pagination-group {
    padding: 0.75rem;
  }
}
/*
// Dark styles
//
// Same table markup, but inverted color scheme: dark background and light text.

// stylelint-disable-next-line no-duplicate-selectors
//.table {
//  .thead-dark {
//    th {
//      color: $table-dark-color;
//      background-color: $table-dark-bg;
//      border-color: $table-dark-border-color;
//    }
//  }
//
//  .thead-light {
//    th {
//      color: $table-head-color;
//      background-color: $table-head-bg;
//      border-color: $table-border-color;
//    }
//  }
//}*/
/*
// Responsive tables
//
// Generate series of `.table-responsive-*` classes for configuring the screen
// size of where your table will overflow.

.table-responsive {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    &#{$infix} {
      @include media-breakpoint-down($breakpoint) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;

        // Prevent double border on horizontal scroll due to use of `display: block;`
        > .table-bordered {
          border: 0;
        }
      }
    }
  }
}
*/

/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@tsed/tailwind-formio/styles/form-edit.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
.form-edit {
  margin-bottom: 1.25rem;
  border-bottom-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1))
}@media (min-width: 640px) {.form-edit {
    display: flex
  }
}.form-edit {

  &__settings {
    margin-left: -0.5rem;
    margin-right: -0.5rem
  }

  &__settings {
    display: flex
  }

  &__settings {
    flex: 1 1 0%
  }

  &__settings {
    flex-wrap: wrap
  }

  &__settings {

    > div {
      > .form-group {
        width: 100%
      }
      > .form-group {
        padding-left: 0.5rem;
        padding-right: 0.5rem
      }
      > .form-group {
        padding-bottom: 0px
      }
      @media (min-width: 640px) {> .form-group {
          width: auto
        }
      }
      > .form-group {
        min-width: 25%;

        &:last-child {
          margin-bottom: 1.25rem
        }

        .form-text {
          margin-bottom: -0.25rem
        }

        .form-text {
          height: 0px
        }

        .form-text {
          padding: 0px
        }
      }
    }
  }

  &__actions {
    margin-bottom: 0.5rem
  }

  &__actions {
    display: flex
  }

  &__actions {
    flex-direction: column
  }

  &__actions {
    justify-content: flex-end
  }

  &__actions {
    .btn-save {
      margin-bottom: 1rem
    }
    .btn-save {
      line-height: 1.5
    }

    > div {
      display: flex
    }

    > div {
      flex-direction: column
    }

    > div {
      padding-left: 1.25rem
    }

    > div {

      > * {
        margin-bottom: 0.75rem
      }

      > div {
        margin-left: -0.5rem;
        margin-right: -0.5rem
      }

      > div {
        display: flex
      }

      > div {
        flex-direction: row
      }

      > div {

        > * {
          margin-left: 0.5rem;
          margin-right: 0.5rem
        }
      }
    }
  }
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@tsed/tailwind-formio/styles/grid.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
/*!
 * Bootstrap Grid v4.0.0 (https://getbootstrap.com)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

html {
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/*.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
*/

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

.col-1 {
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-2 {
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-5 {
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.order-first {
  order: -1;
}

.order-last {
  order: 13;
}

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.order-6 {
  order: 6;
}

.order-7 {
  order: 7;
}

.order-8 {
  order: 8;
}

.order-9 {
  order: 9;
}

.order-10 {
  order: 10;
}

.order-11 {
  order: 11;
}

.order-12 {
  order: 12;
}

.offset-1 {
  margin-left: 8.333333%;
}

.offset-2 {
  margin-left: 16.666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.333333%;
}

.offset-5 {
  margin-left: 41.666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.333333%;
}

.offset-8 {
  margin-left: 66.666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.333333%;
}

.offset-11 {
  margin-left: 91.666667%;
}

@media (min-width: 576px) {
  .col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-sm-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-sm-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-sm-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-sm-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-sm-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-sm-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-sm-first {
    order: -1;
  }
  .order-sm-last {
    order: 13;
  }
  .order-sm-0 {
    order: 0;
  }
  .order-sm-1 {
    order: 1;
  }
  .order-sm-2 {
    order: 2;
  }
  .order-sm-3 {
    order: 3;
  }
  .order-sm-4 {
    order: 4;
  }
  .order-sm-5 {
    order: 5;
  }
  .order-sm-6 {
    order: 6;
  }
  .order-sm-7 {
    order: 7;
  }
  .order-sm-8 {
    order: 8;
  }
  .order-sm-9 {
    order: 9;
  }
  .order-sm-10 {
    order: 10;
  }
  .order-sm-11 {
    order: 11;
  }
  .order-sm-12 {
    order: 12;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.333333%;
  }
  .offset-sm-2 {
    margin-left: 16.666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.333333%;
  }
  .offset-sm-5 {
    margin-left: 41.666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.333333%;
  }
  .offset-sm-8 {
    margin-left: 66.666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.333333%;
  }
  .offset-sm-11 {
    margin-left: 91.666667%;
  }
}

@media (min-width: 768px) {
  .col-md {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-md-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-md-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-md-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-md-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-md-first {
    order: -1;
  }
  .order-md-last {
    order: 13;
  }
  .order-md-0 {
    order: 0;
  }
  .order-md-1 {
    order: 1;
  }
  .order-md-2 {
    order: 2;
  }
  .order-md-3 {
    order: 3;
  }
  .order-md-4 {
    order: 4;
  }
  .order-md-5 {
    order: 5;
  }
  .order-md-6 {
    order: 6;
  }
  .order-md-7 {
    order: 7;
  }
  .order-md-8 {
    order: 8;
  }
  .order-md-9 {
    order: 9;
  }
  .order-md-10 {
    order: 10;
  }
  .order-md-11 {
    order: 11;
  }
  .order-md-12 {
    order: 12;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.333333%;
  }
  .offset-md-2 {
    margin-left: 16.666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.333333%;
  }
  .offset-md-5 {
    margin-left: 41.666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.333333%;
  }
  .offset-md-8 {
    margin-left: 66.666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.333333%;
  }
  .offset-md-11 {
    margin-left: 91.666667%;
  }
}

@media (min-width: 992px) {
  .col-lg {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-lg-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-lg-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-lg-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-lg-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-lg-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-lg-first {
    order: -1;
  }
  .order-lg-last {
    order: 13;
  }
  .order-lg-0 {
    order: 0;
  }
  .order-lg-1 {
    order: 1;
  }
  .order-lg-2 {
    order: 2;
  }
  .order-lg-3 {
    order: 3;
  }
  .order-lg-4 {
    order: 4;
  }
  .order-lg-5 {
    order: 5;
  }
  .order-lg-6 {
    order: 6;
  }
  .order-lg-7 {
    order: 7;
  }
  .order-lg-8 {
    order: 8;
  }
  .order-lg-9 {
    order: 9;
  }
  .order-lg-10 {
    order: 10;
  }
  .order-lg-11 {
    order: 11;
  }
  .order-lg-12 {
    order: 12;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.333333%;
  }
  .offset-lg-2 {
    margin-left: 16.666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.333333%;
  }
  .offset-lg-5 {
    margin-left: 41.666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.333333%;
  }
  .offset-lg-8 {
    margin-left: 66.666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.333333%;
  }
  .offset-lg-11 {
    margin-left: 91.666667%;
  }
}

@media (min-width: 1200px) {
  .col-xl {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-xl-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-xl-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-xl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-xl-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-xl-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-xl-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-xl-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-xl-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-xl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-xl-first {
    order: -1;
  }
  .order-xl-last {
    order: 13;
  }
  .order-xl-0 {
    order: 0;
  }
  .order-xl-1 {
    order: 1;
  }
  .order-xl-2 {
    order: 2;
  }
  .order-xl-3 {
    order: 3;
  }
  .order-xl-4 {
    order: 4;
  }
  .order-xl-5 {
    order: 5;
  }
  .order-xl-6 {
    order: 6;
  }
  .order-xl-7 {
    order: 7;
  }
  .order-xl-8 {
    order: 8;
  }
  .order-xl-9 {
    order: 9;
  }
  .order-xl-10 {
    order: 10;
  }
  .order-xl-11 {
    order: 11;
  }
  .order-xl-12 {
    order: 12;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.333333%;
  }
  .offset-xl-2 {
    margin-left: 16.666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.333333%;
  }
  .offset-xl-5 {
    margin-left: 41.666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.333333%;
  }
  .offset-xl-8 {
    margin-left: 66.666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.333333%;
  }
  .offset-xl-11 {
    margin-left: 91.666667%;
  }
}

.d-none {
  display: none !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-table {
    display: table !important;
  }
  .d-sm-table-row {
    display: table-row !important;
  }
  .d-sm-table-cell {
    display: table-cell !important;
  }
  .d-sm-flex {
    display: flex !important;
  }
  .d-sm-inline-flex {
    display: inline-flex !important;
  }
}

@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-table {
    display: table !important;
  }
  .d-md-table-row {
    display: table-row !important;
  }
  .d-md-table-cell {
    display: table-cell !important;
  }
  .d-md-flex {
    display: flex !important;
  }
  .d-md-inline-flex {
    display: inline-flex !important;
  }
}

@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-inline-block {
    display: inline-block !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-table {
    display: table !important;
  }
  .d-lg-table-row {
    display: table-row !important;
  }
  .d-lg-table-cell {
    display: table-cell !important;
  }
  .d-lg-flex {
    display: flex !important;
  }
  .d-lg-inline-flex {
    display: inline-flex !important;
  }
}

@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }
  .d-xl-inline {
    display: inline !important;
  }
  .d-xl-inline-block {
    display: inline-block !important;
  }
  .d-xl-block {
    display: block !important;
  }
  .d-xl-table {
    display: table !important;
  }
  .d-xl-table-row {
    display: table-row !important;
  }
  .d-xl-table-cell {
    display: table-cell !important;
  }
  .d-xl-flex {
    display: flex !important;
  }
  .d-xl-inline-flex {
    display: inline-flex !important;
  }
}

@media print {
  .d-print-none {
    display: none !important;
  }
  .d-print-inline {
    display: inline !important;
  }
  .d-print-inline-block {
    display: inline-block !important;
  }
  .d-print-block {
    display: block !important;
  }
  .d-print-table {
    display: table !important;
  }
  .d-print-table-row {
    display: table-row !important;
  }
  .d-print-table-cell {
    display: table-cell !important;
  }
  .d-print-flex {
    display: flex !important;
  }
  .d-print-inline-flex {
    display: inline-flex !important;
  }
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

@media (min-width: 576px) {
  .flex-sm-row {
    flex-direction: row !important;
  }
  .flex-sm-column {
    flex-direction: column !important;
  }
  .flex-sm-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-sm-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-sm-wrap {
    flex-wrap: wrap !important;
  }
  .flex-sm-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-sm-start {
    justify-content: flex-start !important;
  }
  .justify-content-sm-end {
    justify-content: flex-end !important;
  }
  .justify-content-sm-center {
    justify-content: center !important;
  }
  .justify-content-sm-between {
    justify-content: space-between !important;
  }
  .justify-content-sm-around {
    justify-content: space-around !important;
  }
  .align-items-sm-start {
    align-items: flex-start !important;
  }
  .align-items-sm-end {
    align-items: flex-end !important;
  }
  .align-items-sm-center {
    align-items: center !important;
  }
  .align-items-sm-baseline {
    align-items: baseline !important;
  }
  .align-items-sm-stretch {
    align-items: stretch !important;
  }
  .align-content-sm-start {
    align-content: flex-start !important;
  }
  .align-content-sm-end {
    align-content: flex-end !important;
  }
  .align-content-sm-center {
    align-content: center !important;
  }
  .align-content-sm-between {
    align-content: space-between !important;
  }
  .align-content-sm-around {
    align-content: space-around !important;
  }
  .align-content-sm-stretch {
    align-content: stretch !important;
  }
  .align-self-sm-auto {
    align-self: auto !important;
  }
  .align-self-sm-start {
    align-self: flex-start !important;
  }
  .align-self-sm-end {
    align-self: flex-end !important;
  }
  .align-self-sm-center {
    align-self: center !important;
  }
  .align-self-sm-baseline {
    align-self: baseline !important;
  }
  .align-self-sm-stretch {
    align-self: stretch !important;
  }
}

@media (min-width: 768px) {
  .flex-md-row {
    flex-direction: row !important;
  }
  .flex-md-column {
    flex-direction: column !important;
  }
  .flex-md-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-md-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-md-wrap {
    flex-wrap: wrap !important;
  }
  .flex-md-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-md-start {
    justify-content: flex-start !important;
  }
  .justify-content-md-end {
    justify-content: flex-end !important;
  }
  .justify-content-md-center {
    justify-content: center !important;
  }
  .justify-content-md-between {
    justify-content: space-between !important;
  }
  .justify-content-md-around {
    justify-content: space-around !important;
  }
  .align-items-md-start {
    align-items: flex-start !important;
  }
  .align-items-md-end {
    align-items: flex-end !important;
  }
  .align-items-md-center {
    align-items: center !important;
  }
  .align-items-md-baseline {
    align-items: baseline !important;
  }
  .align-items-md-stretch {
    align-items: stretch !important;
  }
  .align-content-md-start {
    align-content: flex-start !important;
  }
  .align-content-md-end {
    align-content: flex-end !important;
  }
  .align-content-md-center {
    align-content: center !important;
  }
  .align-content-md-between {
    align-content: space-between !important;
  }
  .align-content-md-around {
    align-content: space-around !important;
  }
  .align-content-md-stretch {
    align-content: stretch !important;
  }
  .align-self-md-auto {
    align-self: auto !important;
  }
  .align-self-md-start {
    align-self: flex-start !important;
  }
  .align-self-md-end {
    align-self: flex-end !important;
  }
  .align-self-md-center {
    align-self: center !important;
  }
  .align-self-md-baseline {
    align-self: baseline !important;
  }
  .align-self-md-stretch {
    align-self: stretch !important;
  }
}

@media (min-width: 992px) {
  .flex-lg-row {
    flex-direction: row !important;
  }
  .flex-lg-column {
    flex-direction: column !important;
  }
  .flex-lg-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-lg-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-lg-wrap {
    flex-wrap: wrap !important;
  }
  .flex-lg-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-lg-start {
    justify-content: flex-start !important;
  }
  .justify-content-lg-end {
    justify-content: flex-end !important;
  }
  .justify-content-lg-center {
    justify-content: center !important;
  }
  .justify-content-lg-between {
    justify-content: space-between !important;
  }
  .justify-content-lg-around {
    justify-content: space-around !important;
  }
  .align-items-lg-start {
    align-items: flex-start !important;
  }
  .align-items-lg-end {
    align-items: flex-end !important;
  }
  .align-items-lg-center {
    align-items: center !important;
  }
  .align-items-lg-baseline {
    align-items: baseline !important;
  }
  .align-items-lg-stretch {
    align-items: stretch !important;
  }
  .align-content-lg-start {
    align-content: flex-start !important;
  }
  .align-content-lg-end {
    align-content: flex-end !important;
  }
  .align-content-lg-center {
    align-content: center !important;
  }
  .align-content-lg-between {
    align-content: space-between !important;
  }
  .align-content-lg-around {
    align-content: space-around !important;
  }
  .align-content-lg-stretch {
    align-content: stretch !important;
  }
  .align-self-lg-auto {
    align-self: auto !important;
  }
  .align-self-lg-start {
    align-self: flex-start !important;
  }
  .align-self-lg-end {
    align-self: flex-end !important;
  }
  .align-self-lg-center {
    align-self: center !important;
  }
  .align-self-lg-baseline {
    align-self: baseline !important;
  }
  .align-self-lg-stretch {
    align-self: stretch !important;
  }
}

@media (min-width: 1200px) {
  .flex-xl-row {
    flex-direction: row !important;
  }
  .flex-xl-column {
    flex-direction: column !important;
  }
  .flex-xl-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-xl-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-xl-wrap {
    flex-wrap: wrap !important;
  }
  .flex-xl-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-xl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-xl-start {
    justify-content: flex-start !important;
  }
  .justify-content-xl-end {
    justify-content: flex-end !important;
  }
  .justify-content-xl-center {
    justify-content: center !important;
  }
  .justify-content-xl-between {
    justify-content: space-between !important;
  }
  .justify-content-xl-around {
    justify-content: space-around !important;
  }
  .align-items-xl-start {
    align-items: flex-start !important;
  }
  .align-items-xl-end {
    align-items: flex-end !important;
  }
  .align-items-xl-center {
    align-items: center !important;
  }
  .align-items-xl-baseline {
    align-items: baseline !important;
  }
  .align-items-xl-stretch {
    align-items: stretch !important;
  }
  .align-content-xl-start {
    align-content: flex-start !important;
  }
  .align-content-xl-end {
    align-content: flex-end !important;
  }
  .align-content-xl-center {
    align-content: center !important;
  }
  .align-content-xl-between {
    align-content: space-between !important;
  }
  .align-content-xl-around {
    align-content: space-around !important;
  }
  .align-content-xl-stretch {
    align-content: stretch !important;
  }
  .align-self-xl-auto {
    align-self: auto !important;
  }
  .align-self-xl-start {
    align-self: flex-start !important;
  }
  .align-self-xl-end {
    align-self: flex-end !important;
  }
  .align-self-xl-center {
    align-self: center !important;
  }
  .align-self-xl-baseline {
    align-self: baseline !important;
  }
  .align-self-xl-stretch {
    align-self: stretch !important;
  }
}
/*# sourceMappingURL=bootstrap-grid.css.map */
/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@tsed/tailwind-formio/styles/tabs.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
.tw-tabs {
  &__header {
    overflow: auto
  }
  &__header {

    &-wrapper {
      position: relative
    }

    &-wrapper {
      display: flex
    }

    &-wrapper {
      align-items: center
    }

    &-wrapper {
      padding-left: 0.25rem;
      padding-right: 0.25rem
    }

    &-wrapper {
      padding-top: 0.25rem
    }
    &-border {
      position: absolute
    }
    &-border {
      bottom: 0px
    }
    &-border {
      left: 0px
    }
    &-border {
      right: 0px
    }
    &-border {
      z-index: 1
    }
    &-border {
      border-bottom-width: 1px
    }
    &-border {
      --tw-border-opacity: 1;
      border-color: rgb(209 213 219 / var(--tw-border-opacity, 1))
    }
  }

  &__button {
    position: relative
  }

  &__button {
    display: flex
  }

  &__button {
    align-items: center
  }

  &__button {
    border-width: 1px
  }

  &__button {
    border-bottom-width: 0px
  }

  &__button {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1))
  }

  &__button {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
  }

  &__button {
    padding-left: 1rem;
    padding-right: 1rem
  }

  &__button {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem
  }

  &__button {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1))
  }

  &__button {
    outline: 2px solid transparent;
    outline-offset: 2px
  }

  &__button:hover {
    color: hsla(190, 81%, 42%, 1)
  }

  &__button:focus {
    color: hsla(190, 81%, 42%, 1)
  }

  &__button:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
  }

  &__button {

    &-label {
      white-space: nowrap
    }

    &-label {
      font-size: 0.875rem;
      line-height: 1.25rem
    }
    &-icon {
      margin-right: 0.5rem
    }
    &-icon {
      margin-left: -0.25rem
    }
    &-icon {
      margin-top: -1px
    }

    &-border {
      position: absolute
    }

    &-border {
      top: 0px
    }

    &-border {
      right: 0px
    }

    &-border {
      left: 0px
    }

    &-border {
      z-index: 1
    }

    &-border {
      border-top-width: 2px
    }

    &-border {
      border-color: transparent
    }

    &-border {
      &.-active {
        border-color: hsla(220, 42%, 35%, 1)
      }
    }
    &-wrapper {
      position: relative
    }
    &-wrapper {
      margin-right: 0.25rem
    }
    &-wrapper {

      &:last-child {
        margin-right: 0px
      }

      &.-active {
        z-index: 2
      }
      &.-back {
        margin-left: -0.5rem
      }
      &.-back {
        margin-right: 0px
      }
    }

    &.-active {
      --tw-bg-opacity: 1;
      background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
    }

    &.-active {
      color: hsla(220, 42%, 35%, 1)
    }

    &.-reverse {
      --tw-bg-opacity: 1;
      background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
    }

    &.-reverse {
      &.-active {
        --tw-bg-opacity: 1;
        background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
      }
    }

    &.-back {
      border-color: transparent
    }

    &.-back {
      --tw-bg-opacity: 1;
      background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
    }

    &.-back {
      padding-left: 0.5rem;
      padding-right: 0.5rem
    }

    &.-back {
      color: hsla(190, 81%, 42%, 1)
    }

    &.-back {

      .tabs__button-icon {
        margin: 0px
      }
    }
  }
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@tsed/tailwind-formio/styles/fieldset.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/
.formio-component-fieldset {
  legend {
    margin-bottom: 0.75rem
  }
  legend {
    width: 100%
  }
  legend {
    border-bottom-width: 1px
  }
  legend {
    border-style: solid
  }
  legend {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1))
  }
  legend {
    padding-bottom: 0.25rem
  }
  legend {
    font-size: 1.125rem;
    line-height: 1.75rem
  }
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@tsed/tailwind-formio/styles/index.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************/


/*!***********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/flag-icons/css/flag-icons.min.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************/
.fib,.fi{background-size:contain;background-position:50%;background-repeat:no-repeat}.fi{position:relative;display:inline-block;width:1.333333em;line-height:1em}.fi:before{content:" "}.fi.fis{width:1em}.fi-xx{background-image:url('xx.svg')}.fi-xx.fis{background-image:url('_-flags-1x1-xx.svg')}.fi-ad{background-image:url('ad.svg')}.fi-ad.fis{background-image:url('_-flags-1x1-ad.svg')}.fi-ae{background-image:url('ae.svg')}.fi-ae.fis{background-image:url('_-flags-1x1-ae.svg')}.fi-af{background-image:url('af.svg')}.fi-af.fis{background-image:url('_-flags-1x1-af.svg')}.fi-ag{background-image:url('ag.svg')}.fi-ag.fis{background-image:url('_-flags-1x1-ag.svg')}.fi-ai{background-image:url('ai.svg')}.fi-ai.fis{background-image:url('_-flags-1x1-ai.svg')}.fi-al{background-image:url('al.svg')}.fi-al.fis{background-image:url('_-flags-1x1-al.svg')}.fi-am{background-image:url('am.svg')}.fi-am.fis{background-image:url('_-flags-1x1-am.svg')}.fi-ao{background-image:url('ao.svg')}.fi-ao.fis{background-image:url('_-flags-1x1-ao.svg')}.fi-aq{background-image:url('aq.svg')}.fi-aq.fis{background-image:url('_-flags-1x1-aq.svg')}.fi-ar{background-image:url('ar.svg')}.fi-ar.fis{background-image:url('_-flags-1x1-ar.svg')}.fi-as{background-image:url('as.svg')}.fi-as.fis{background-image:url('_-flags-1x1-as.svg')}.fi-at{background-image:url('at.svg')}.fi-at.fis{background-image:url('_-flags-1x1-at.svg')}.fi-au{background-image:url('au.svg')}.fi-au.fis{background-image:url('_-flags-1x1-au.svg')}.fi-aw{background-image:url('aw.svg')}.fi-aw.fis{background-image:url('_-flags-1x1-aw.svg')}.fi-ax{background-image:url('ax.svg')}.fi-ax.fis{background-image:url('_-flags-1x1-ax.svg')}.fi-az{background-image:url('az.svg')}.fi-az.fis{background-image:url('_-flags-1x1-az.svg')}.fi-ba{background-image:url('ba.svg')}.fi-ba.fis{background-image:url('_-flags-1x1-ba.svg')}.fi-bb{background-image:url('bb.svg')}.fi-bb.fis{background-image:url('_-flags-1x1-bb.svg')}.fi-bd{background-image:url('bd.svg')}.fi-bd.fis{background-image:url('_-flags-1x1-bd.svg')}.fi-be{background-image:url('be.svg')}.fi-be.fis{background-image:url('_-flags-1x1-be.svg')}.fi-bf{background-image:url('bf.svg')}.fi-bf.fis{background-image:url('_-flags-1x1-bf.svg')}.fi-bg{background-image:url('bg.svg')}.fi-bg.fis{background-image:url('_-flags-1x1-bg.svg')}.fi-bh{background-image:url('bh.svg')}.fi-bh.fis{background-image:url('_-flags-1x1-bh.svg')}.fi-bi{background-image:url('bi.svg')}.fi-bi.fis{background-image:url('_-flags-1x1-bi.svg')}.fi-bj{background-image:url('bj.svg')}.fi-bj.fis{background-image:url('_-flags-1x1-bj.svg')}.fi-bl{background-image:url('bl.svg')}.fi-bl.fis{background-image:url('_-flags-1x1-bl.svg')}.fi-bm{background-image:url('bm.svg')}.fi-bm.fis{background-image:url('_-flags-1x1-bm.svg')}.fi-bn{background-image:url('bn.svg')}.fi-bn.fis{background-image:url('_-flags-1x1-bn.svg')}.fi-bo{background-image:url('bo.svg')}.fi-bo.fis{background-image:url('_-flags-1x1-bo.svg')}.fi-bq{background-image:url('bq.svg')}.fi-bq.fis{background-image:url('_-flags-1x1-bq.svg')}.fi-br{background-image:url('br.svg')}.fi-br.fis{background-image:url('_-flags-1x1-br.svg')}.fi-bs{background-image:url('bs.svg')}.fi-bs.fis{background-image:url('_-flags-1x1-bs.svg')}.fi-bt{background-image:url('bt.svg')}.fi-bt.fis{background-image:url('_-flags-1x1-bt.svg')}.fi-bv{background-image:url('bv.svg')}.fi-bv.fis{background-image:url('_-flags-1x1-bv.svg')}.fi-bw{background-image:url('bw.svg')}.fi-bw.fis{background-image:url('_-flags-1x1-bw.svg')}.fi-by{background-image:url('by.svg')}.fi-by.fis{background-image:url('_-flags-1x1-by.svg')}.fi-bz{background-image:url('bz.svg')}.fi-bz.fis{background-image:url('_-flags-1x1-bz.svg')}.fi-ca{background-image:url('ca.svg')}.fi-ca.fis{background-image:url('_-flags-1x1-ca.svg')}.fi-cc{background-image:url('cc.svg')}.fi-cc.fis{background-image:url('_-flags-1x1-cc.svg')}.fi-cd{background-image:url('cd.svg')}.fi-cd.fis{background-image:url('_-flags-1x1-cd.svg')}.fi-cf{background-image:url('cf.svg')}.fi-cf.fis{background-image:url('_-flags-1x1-cf.svg')}.fi-cg{background-image:url('cg.svg')}.fi-cg.fis{background-image:url('_-flags-1x1-cg.svg')}.fi-ch{background-image:url('ch.svg')}.fi-ch.fis{background-image:url('_-flags-1x1-ch.svg')}.fi-ci{background-image:url('ci.svg')}.fi-ci.fis{background-image:url('_-flags-1x1-ci.svg')}.fi-ck{background-image:url('ck.svg')}.fi-ck.fis{background-image:url('_-flags-1x1-ck.svg')}.fi-cl{background-image:url('cl.svg')}.fi-cl.fis{background-image:url('_-flags-1x1-cl.svg')}.fi-cm{background-image:url('cm.svg')}.fi-cm.fis{background-image:url('_-flags-1x1-cm.svg')}.fi-cn{background-image:url('cn.svg')}.fi-cn.fis{background-image:url('_-flags-1x1-cn.svg')}.fi-co{background-image:url('co.svg')}.fi-co.fis{background-image:url('_-flags-1x1-co.svg')}.fi-cr{background-image:url('cr.svg')}.fi-cr.fis{background-image:url('_-flags-1x1-cr.svg')}.fi-cu{background-image:url('cu.svg')}.fi-cu.fis{background-image:url('_-flags-1x1-cu.svg')}.fi-cv{background-image:url('cv.svg')}.fi-cv.fis{background-image:url('_-flags-1x1-cv.svg')}.fi-cw{background-image:url('cw.svg')}.fi-cw.fis{background-image:url('_-flags-1x1-cw.svg')}.fi-cx{background-image:url('cx.svg')}.fi-cx.fis{background-image:url('_-flags-1x1-cx.svg')}.fi-cy{background-image:url('cy.svg')}.fi-cy.fis{background-image:url('_-flags-1x1-cy.svg')}.fi-cz{background-image:url('cz.svg')}.fi-cz.fis{background-image:url('_-flags-1x1-cz.svg')}.fi-de{background-image:url('de.svg')}.fi-de.fis{background-image:url('_-flags-1x1-de.svg')}.fi-dj{background-image:url('dj.svg')}.fi-dj.fis{background-image:url('_-flags-1x1-dj.svg')}.fi-dk{background-image:url('dk.svg')}.fi-dk.fis{background-image:url('_-flags-1x1-dk.svg')}.fi-dm{background-image:url('dm.svg')}.fi-dm.fis{background-image:url('_-flags-1x1-dm.svg')}.fi-do{background-image:url('do.svg')}.fi-do.fis{background-image:url('_-flags-1x1-do.svg')}.fi-dz{background-image:url('dz.svg')}.fi-dz.fis{background-image:url('_-flags-1x1-dz.svg')}.fi-ec{background-image:url('ec.svg')}.fi-ec.fis{background-image:url('_-flags-1x1-ec.svg')}.fi-ee{background-image:url('ee.svg')}.fi-ee.fis{background-image:url('_-flags-1x1-ee.svg')}.fi-eg{background-image:url('eg.svg')}.fi-eg.fis{background-image:url('_-flags-1x1-eg.svg')}.fi-eh{background-image:url('eh.svg')}.fi-eh.fis{background-image:url('_-flags-1x1-eh.svg')}.fi-er{background-image:url('er.svg')}.fi-er.fis{background-image:url('_-flags-1x1-er.svg')}.fi-es{background-image:url('es.svg')}.fi-es.fis{background-image:url('_-flags-1x1-es.svg')}.fi-et{background-image:url('et.svg')}.fi-et.fis{background-image:url('_-flags-1x1-et.svg')}.fi-fi{background-image:url('fi.svg')}.fi-fi.fis{background-image:url('_-flags-1x1-fi.svg')}.fi-fj{background-image:url('fj.svg')}.fi-fj.fis{background-image:url('_-flags-1x1-fj.svg')}.fi-fk{background-image:url('fk.svg')}.fi-fk.fis{background-image:url('_-flags-1x1-fk.svg')}.fi-fm{background-image:url('fm.svg')}.fi-fm.fis{background-image:url('_-flags-1x1-fm.svg')}.fi-fo{background-image:url('fo.svg')}.fi-fo.fis{background-image:url('_-flags-1x1-fo.svg')}.fi-fr{background-image:url('fr.svg')}.fi-fr.fis{background-image:url('_-flags-1x1-fr.svg')}.fi-ga{background-image:url('ga.svg')}.fi-ga.fis{background-image:url('_-flags-1x1-ga.svg')}.fi-gb{background-image:url('gb.svg')}.fi-gb.fis{background-image:url('_-flags-1x1-gb.svg')}.fi-gd{background-image:url('gd.svg')}.fi-gd.fis{background-image:url('_-flags-1x1-gd.svg')}.fi-ge{background-image:url('ge.svg')}.fi-ge.fis{background-image:url('_-flags-1x1-ge.svg')}.fi-gf{background-image:url('gf.svg')}.fi-gf.fis{background-image:url('_-flags-1x1-gf.svg')}.fi-gg{background-image:url('gg.svg')}.fi-gg.fis{background-image:url('_-flags-1x1-gg.svg')}.fi-gh{background-image:url('gh.svg')}.fi-gh.fis{background-image:url('_-flags-1x1-gh.svg')}.fi-gi{background-image:url('gi.svg')}.fi-gi.fis{background-image:url('_-flags-1x1-gi.svg')}.fi-gl{background-image:url('gl.svg')}.fi-gl.fis{background-image:url('_-flags-1x1-gl.svg')}.fi-gm{background-image:url('gm.svg')}.fi-gm.fis{background-image:url('_-flags-1x1-gm.svg')}.fi-gn{background-image:url('gn.svg')}.fi-gn.fis{background-image:url('_-flags-1x1-gn.svg')}.fi-gp{background-image:url('gp.svg')}.fi-gp.fis{background-image:url('_-flags-1x1-gp.svg')}.fi-gq{background-image:url('gq.svg')}.fi-gq.fis{background-image:url('_-flags-1x1-gq.svg')}.fi-gr{background-image:url('gr.svg')}.fi-gr.fis{background-image:url('_-flags-1x1-gr.svg')}.fi-gs{background-image:url('gs.svg')}.fi-gs.fis{background-image:url('_-flags-1x1-gs.svg')}.fi-gt{background-image:url('gt.svg')}.fi-gt.fis{background-image:url('_-flags-1x1-gt.svg')}.fi-gu{background-image:url('gu.svg')}.fi-gu.fis{background-image:url('_-flags-1x1-gu.svg')}.fi-gw{background-image:url('gw.svg')}.fi-gw.fis{background-image:url('_-flags-1x1-gw.svg')}.fi-gy{background-image:url('gy.svg')}.fi-gy.fis{background-image:url('_-flags-1x1-gy.svg')}.fi-hk{background-image:url('hk.svg')}.fi-hk.fis{background-image:url('_-flags-1x1-hk.svg')}.fi-hm{background-image:url('hm.svg')}.fi-hm.fis{background-image:url('_-flags-1x1-hm.svg')}.fi-hn{background-image:url('hn.svg')}.fi-hn.fis{background-image:url('_-flags-1x1-hn.svg')}.fi-hr{background-image:url('hr.svg')}.fi-hr.fis{background-image:url('_-flags-1x1-hr.svg')}.fi-ht{background-image:url('ht.svg')}.fi-ht.fis{background-image:url('_-flags-1x1-ht.svg')}.fi-hu{background-image:url('hu.svg')}.fi-hu.fis{background-image:url('_-flags-1x1-hu.svg')}.fi-id{background-image:url('id.svg')}.fi-id.fis{background-image:url('_-flags-1x1-id.svg')}.fi-ie{background-image:url('ie.svg')}.fi-ie.fis{background-image:url('_-flags-1x1-ie.svg')}.fi-il{background-image:url('il.svg')}.fi-il.fis{background-image:url('_-flags-1x1-il.svg')}.fi-im{background-image:url('im.svg')}.fi-im.fis{background-image:url('_-flags-1x1-im.svg')}.fi-in{background-image:url('in.svg')}.fi-in.fis{background-image:url('_-flags-1x1-in.svg')}.fi-io{background-image:url('io.svg')}.fi-io.fis{background-image:url('_-flags-1x1-io.svg')}.fi-iq{background-image:url('iq.svg')}.fi-iq.fis{background-image:url('_-flags-1x1-iq.svg')}.fi-ir{background-image:url('ir.svg')}.fi-ir.fis{background-image:url('_-flags-1x1-ir.svg')}.fi-is{background-image:url('is.svg')}.fi-is.fis{background-image:url('_-flags-1x1-is.svg')}.fi-it{background-image:url('it.svg')}.fi-it.fis{background-image:url('_-flags-1x1-it.svg')}.fi-je{background-image:url('je.svg')}.fi-je.fis{background-image:url('_-flags-1x1-je.svg')}.fi-jm{background-image:url('jm.svg')}.fi-jm.fis{background-image:url('_-flags-1x1-jm.svg')}.fi-jo{background-image:url('jo.svg')}.fi-jo.fis{background-image:url('_-flags-1x1-jo.svg')}.fi-jp{background-image:url('jp.svg')}.fi-jp.fis{background-image:url('_-flags-1x1-jp.svg')}.fi-ke{background-image:url('ke.svg')}.fi-ke.fis{background-image:url('_-flags-1x1-ke.svg')}.fi-kg{background-image:url('kg.svg')}.fi-kg.fis{background-image:url('_-flags-1x1-kg.svg')}.fi-kh{background-image:url('kh.svg')}.fi-kh.fis{background-image:url('_-flags-1x1-kh.svg')}.fi-ki{background-image:url('ki.svg')}.fi-ki.fis{background-image:url('_-flags-1x1-ki.svg')}.fi-km{background-image:url('km.svg')}.fi-km.fis{background-image:url('_-flags-1x1-km.svg')}.fi-kn{background-image:url('kn.svg')}.fi-kn.fis{background-image:url('_-flags-1x1-kn.svg')}.fi-kp{background-image:url('kp.svg')}.fi-kp.fis{background-image:url('_-flags-1x1-kp.svg')}.fi-kr{background-image:url('kr.svg')}.fi-kr.fis{background-image:url('_-flags-1x1-kr.svg')}.fi-kw{background-image:url('kw.svg')}.fi-kw.fis{background-image:url('_-flags-1x1-kw.svg')}.fi-ky{background-image:url('ky.svg')}.fi-ky.fis{background-image:url('_-flags-1x1-ky.svg')}.fi-kz{background-image:url('kz.svg')}.fi-kz.fis{background-image:url('_-flags-1x1-kz.svg')}.fi-la{background-image:url('la.svg')}.fi-la.fis{background-image:url('_-flags-1x1-la.svg')}.fi-lb{background-image:url('lb.svg')}.fi-lb.fis{background-image:url('_-flags-1x1-lb.svg')}.fi-lc{background-image:url('lc.svg')}.fi-lc.fis{background-image:url('_-flags-1x1-lc.svg')}.fi-li{background-image:url('li.svg')}.fi-li.fis{background-image:url('_-flags-1x1-li.svg')}.fi-lk{background-image:url('lk.svg')}.fi-lk.fis{background-image:url('_-flags-1x1-lk.svg')}.fi-lr{background-image:url('lr.svg')}.fi-lr.fis{background-image:url('_-flags-1x1-lr.svg')}.fi-ls{background-image:url('ls.svg')}.fi-ls.fis{background-image:url('_-flags-1x1-ls.svg')}.fi-lt{background-image:url('lt.svg')}.fi-lt.fis{background-image:url('_-flags-1x1-lt.svg')}.fi-lu{background-image:url('lu.svg')}.fi-lu.fis{background-image:url('_-flags-1x1-lu.svg')}.fi-lv{background-image:url('lv.svg')}.fi-lv.fis{background-image:url('_-flags-1x1-lv.svg')}.fi-ly{background-image:url('ly.svg')}.fi-ly.fis{background-image:url('_-flags-1x1-ly.svg')}.fi-ma{background-image:url('ma.svg')}.fi-ma.fis{background-image:url('_-flags-1x1-ma.svg')}.fi-mc{background-image:url('mc.svg')}.fi-mc.fis{background-image:url('_-flags-1x1-mc.svg')}.fi-md{background-image:url('md.svg')}.fi-md.fis{background-image:url('_-flags-1x1-md.svg')}.fi-me{background-image:url('me.svg')}.fi-me.fis{background-image:url('_-flags-1x1-me.svg')}.fi-mf{background-image:url('mf.svg')}.fi-mf.fis{background-image:url('_-flags-1x1-mf.svg')}.fi-mg{background-image:url('mg.svg')}.fi-mg.fis{background-image:url('_-flags-1x1-mg.svg')}.fi-mh{background-image:url('mh.svg')}.fi-mh.fis{background-image:url('_-flags-1x1-mh.svg')}.fi-mk{background-image:url('mk.svg')}.fi-mk.fis{background-image:url('_-flags-1x1-mk.svg')}.fi-ml{background-image:url('ml.svg')}.fi-ml.fis{background-image:url('_-flags-1x1-ml.svg')}.fi-mm{background-image:url('mm.svg')}.fi-mm.fis{background-image:url('_-flags-1x1-mm.svg')}.fi-mn{background-image:url('mn.svg')}.fi-mn.fis{background-image:url('_-flags-1x1-mn.svg')}.fi-mo{background-image:url('mo.svg')}.fi-mo.fis{background-image:url('_-flags-1x1-mo.svg')}.fi-mp{background-image:url('mp.svg')}.fi-mp.fis{background-image:url('_-flags-1x1-mp.svg')}.fi-mq{background-image:url('mq.svg')}.fi-mq.fis{background-image:url('_-flags-1x1-mq.svg')}.fi-mr{background-image:url('mr.svg')}.fi-mr.fis{background-image:url('_-flags-1x1-mr.svg')}.fi-ms{background-image:url('ms.svg')}.fi-ms.fis{background-image:url('_-flags-1x1-ms.svg')}.fi-mt{background-image:url('mt.svg')}.fi-mt.fis{background-image:url('_-flags-1x1-mt.svg')}.fi-mu{background-image:url('mu.svg')}.fi-mu.fis{background-image:url('_-flags-1x1-mu.svg')}.fi-mv{background-image:url('mv.svg')}.fi-mv.fis{background-image:url('_-flags-1x1-mv.svg')}.fi-mw{background-image:url('mw.svg')}.fi-mw.fis{background-image:url('_-flags-1x1-mw.svg')}.fi-mx{background-image:url('mx.svg')}.fi-mx.fis{background-image:url('_-flags-1x1-mx.svg')}.fi-my{background-image:url('my.svg')}.fi-my.fis{background-image:url('_-flags-1x1-my.svg')}.fi-mz{background-image:url('mz.svg')}.fi-mz.fis{background-image:url('_-flags-1x1-mz.svg')}.fi-na{background-image:url('na.svg')}.fi-na.fis{background-image:url('_-flags-1x1-na.svg')}.fi-nc{background-image:url('nc.svg')}.fi-nc.fis{background-image:url('_-flags-1x1-nc.svg')}.fi-ne{background-image:url('ne.svg')}.fi-ne.fis{background-image:url('_-flags-1x1-ne.svg')}.fi-nf{background-image:url('nf.svg')}.fi-nf.fis{background-image:url('_-flags-1x1-nf.svg')}.fi-ng{background-image:url('ng.svg')}.fi-ng.fis{background-image:url('_-flags-1x1-ng.svg')}.fi-ni{background-image:url('ni.svg')}.fi-ni.fis{background-image:url('_-flags-1x1-ni.svg')}.fi-nl{background-image:url('nl.svg')}.fi-nl.fis{background-image:url('_-flags-1x1-nl.svg')}.fi-no{background-image:url('no.svg')}.fi-no.fis{background-image:url('_-flags-1x1-no.svg')}.fi-np{background-image:url('np.svg')}.fi-np.fis{background-image:url('_-flags-1x1-np.svg')}.fi-nr{background-image:url('nr.svg')}.fi-nr.fis{background-image:url('_-flags-1x1-nr.svg')}.fi-nu{background-image:url('nu.svg')}.fi-nu.fis{background-image:url('_-flags-1x1-nu.svg')}.fi-nz{background-image:url('nz.svg')}.fi-nz.fis{background-image:url('_-flags-1x1-nz.svg')}.fi-om{background-image:url('om.svg')}.fi-om.fis{background-image:url('_-flags-1x1-om.svg')}.fi-pa{background-image:url('pa.svg')}.fi-pa.fis{background-image:url('_-flags-1x1-pa.svg')}.fi-pe{background-image:url('pe.svg')}.fi-pe.fis{background-image:url('_-flags-1x1-pe.svg')}.fi-pf{background-image:url('pf.svg')}.fi-pf.fis{background-image:url('_-flags-1x1-pf.svg')}.fi-pg{background-image:url('pg.svg')}.fi-pg.fis{background-image:url('_-flags-1x1-pg.svg')}.fi-ph{background-image:url('ph.svg')}.fi-ph.fis{background-image:url('_-flags-1x1-ph.svg')}.fi-pk{background-image:url('pk.svg')}.fi-pk.fis{background-image:url('_-flags-1x1-pk.svg')}.fi-pl{background-image:url('pl.svg')}.fi-pl.fis{background-image:url('_-flags-1x1-pl.svg')}.fi-pm{background-image:url('pm.svg')}.fi-pm.fis{background-image:url('_-flags-1x1-pm.svg')}.fi-pn{background-image:url('pn.svg')}.fi-pn.fis{background-image:url('_-flags-1x1-pn.svg')}.fi-pr{background-image:url('pr.svg')}.fi-pr.fis{background-image:url('_-flags-1x1-pr.svg')}.fi-ps{background-image:url('ps.svg')}.fi-ps.fis{background-image:url('_-flags-1x1-ps.svg')}.fi-pt{background-image:url('pt.svg')}.fi-pt.fis{background-image:url('_-flags-1x1-pt.svg')}.fi-pw{background-image:url('pw.svg')}.fi-pw.fis{background-image:url('_-flags-1x1-pw.svg')}.fi-py{background-image:url('py.svg')}.fi-py.fis{background-image:url('_-flags-1x1-py.svg')}.fi-qa{background-image:url('qa.svg')}.fi-qa.fis{background-image:url('_-flags-1x1-qa.svg')}.fi-re{background-image:url('re.svg')}.fi-re.fis{background-image:url('_-flags-1x1-re.svg')}.fi-ro{background-image:url('ro.svg')}.fi-ro.fis{background-image:url('_-flags-1x1-ro.svg')}.fi-rs{background-image:url('rs.svg')}.fi-rs.fis{background-image:url('_-flags-1x1-rs.svg')}.fi-ru{background-image:url('ru.svg')}.fi-ru.fis{background-image:url('_-flags-1x1-ru.svg')}.fi-rw{background-image:url('rw.svg')}.fi-rw.fis{background-image:url('_-flags-1x1-rw.svg')}.fi-sa{background-image:url('sa.svg')}.fi-sa.fis{background-image:url('_-flags-1x1-sa.svg')}.fi-sb{background-image:url('sb.svg')}.fi-sb.fis{background-image:url('_-flags-1x1-sb.svg')}.fi-sc{background-image:url('sc.svg')}.fi-sc.fis{background-image:url('_-flags-1x1-sc.svg')}.fi-sd{background-image:url('sd.svg')}.fi-sd.fis{background-image:url('_-flags-1x1-sd.svg')}.fi-se{background-image:url('se.svg')}.fi-se.fis{background-image:url('_-flags-1x1-se.svg')}.fi-sg{background-image:url('sg.svg')}.fi-sg.fis{background-image:url('_-flags-1x1-sg.svg')}.fi-sh{background-image:url('sh.svg')}.fi-sh.fis{background-image:url('_-flags-1x1-sh.svg')}.fi-si{background-image:url('si.svg')}.fi-si.fis{background-image:url('_-flags-1x1-si.svg')}.fi-sj{background-image:url('sj.svg')}.fi-sj.fis{background-image:url('_-flags-1x1-sj.svg')}.fi-sk{background-image:url('sk.svg')}.fi-sk.fis{background-image:url('_-flags-1x1-sk.svg')}.fi-sl{background-image:url('sl.svg')}.fi-sl.fis{background-image:url('_-flags-1x1-sl.svg')}.fi-sm{background-image:url('sm.svg')}.fi-sm.fis{background-image:url('_-flags-1x1-sm.svg')}.fi-sn{background-image:url('sn.svg')}.fi-sn.fis{background-image:url('_-flags-1x1-sn.svg')}.fi-so{background-image:url('so.svg')}.fi-so.fis{background-image:url('_-flags-1x1-so.svg')}.fi-sr{background-image:url('sr.svg')}.fi-sr.fis{background-image:url('_-flags-1x1-sr.svg')}.fi-ss{background-image:url('ss.svg')}.fi-ss.fis{background-image:url('_-flags-1x1-ss.svg')}.fi-st{background-image:url('st.svg')}.fi-st.fis{background-image:url('_-flags-1x1-st.svg')}.fi-sv{background-image:url('sv.svg')}.fi-sv.fis{background-image:url('_-flags-1x1-sv.svg')}.fi-sx{background-image:url('sx.svg')}.fi-sx.fis{background-image:url('_-flags-1x1-sx.svg')}.fi-sy{background-image:url('sy.svg')}.fi-sy.fis{background-image:url('_-flags-1x1-sy.svg')}.fi-sz{background-image:url('sz.svg')}.fi-sz.fis{background-image:url('_-flags-1x1-sz.svg')}.fi-tc{background-image:url('tc.svg')}.fi-tc.fis{background-image:url('_-flags-1x1-tc.svg')}.fi-td{background-image:url('td.svg')}.fi-td.fis{background-image:url('_-flags-1x1-td.svg')}.fi-tf{background-image:url('tf.svg')}.fi-tf.fis{background-image:url('_-flags-1x1-tf.svg')}.fi-tg{background-image:url('tg.svg')}.fi-tg.fis{background-image:url('_-flags-1x1-tg.svg')}.fi-th{background-image:url('th.svg')}.fi-th.fis{background-image:url('_-flags-1x1-th.svg')}.fi-tj{background-image:url('tj.svg')}.fi-tj.fis{background-image:url('_-flags-1x1-tj.svg')}.fi-tk{background-image:url('tk.svg')}.fi-tk.fis{background-image:url('_-flags-1x1-tk.svg')}.fi-tl{background-image:url('tl.svg')}.fi-tl.fis{background-image:url('_-flags-1x1-tl.svg')}.fi-tm{background-image:url('tm.svg')}.fi-tm.fis{background-image:url('_-flags-1x1-tm.svg')}.fi-tn{background-image:url('tn.svg')}.fi-tn.fis{background-image:url('_-flags-1x1-tn.svg')}.fi-to{background-image:url('to.svg')}.fi-to.fis{background-image:url('_-flags-1x1-to.svg')}.fi-tr{background-image:url('tr.svg')}.fi-tr.fis{background-image:url('_-flags-1x1-tr.svg')}.fi-tt{background-image:url('tt.svg')}.fi-tt.fis{background-image:url('_-flags-1x1-tt.svg')}.fi-tv{background-image:url('tv.svg')}.fi-tv.fis{background-image:url('_-flags-1x1-tv.svg')}.fi-tw{background-image:url('tw.svg')}.fi-tw.fis{background-image:url('_-flags-1x1-tw.svg')}.fi-tz{background-image:url('tz.svg')}.fi-tz.fis{background-image:url('_-flags-1x1-tz.svg')}.fi-ua{background-image:url('ua.svg')}.fi-ua.fis{background-image:url('_-flags-1x1-ua.svg')}.fi-ug{background-image:url('ug.svg')}.fi-ug.fis{background-image:url('_-flags-1x1-ug.svg')}.fi-um{background-image:url('um.svg')}.fi-um.fis{background-image:url('_-flags-1x1-um.svg')}.fi-us{background-image:url('us.svg')}.fi-us.fis{background-image:url('_-flags-1x1-us.svg')}.fi-uy{background-image:url('uy.svg')}.fi-uy.fis{background-image:url('_-flags-1x1-uy.svg')}.fi-uz{background-image:url('uz.svg')}.fi-uz.fis{background-image:url('_-flags-1x1-uz.svg')}.fi-va{background-image:url('va.svg')}.fi-va.fis{background-image:url('_-flags-1x1-va.svg')}.fi-vc{background-image:url('vc.svg')}.fi-vc.fis{background-image:url('_-flags-1x1-vc.svg')}.fi-ve{background-image:url('ve.svg')}.fi-ve.fis{background-image:url('_-flags-1x1-ve.svg')}.fi-vg{background-image:url('vg.svg')}.fi-vg.fis{background-image:url('_-flags-1x1-vg.svg')}.fi-vi{background-image:url('vi.svg')}.fi-vi.fis{background-image:url('_-flags-1x1-vi.svg')}.fi-vn{background-image:url('vn.svg')}.fi-vn.fis{background-image:url('_-flags-1x1-vn.svg')}.fi-vu{background-image:url('vu.svg')}.fi-vu.fis{background-image:url('_-flags-1x1-vu.svg')}.fi-wf{background-image:url('wf.svg')}.fi-wf.fis{background-image:url('_-flags-1x1-wf.svg')}.fi-ws{background-image:url('ws.svg')}.fi-ws.fis{background-image:url('_-flags-1x1-ws.svg')}.fi-ye{background-image:url('ye.svg')}.fi-ye.fis{background-image:url('_-flags-1x1-ye.svg')}.fi-yt{background-image:url('yt.svg')}.fi-yt.fis{background-image:url('_-flags-1x1-yt.svg')}.fi-za{background-image:url('za.svg')}.fi-za.fis{background-image:url('_-flags-1x1-za.svg')}.fi-zm{background-image:url('zm.svg')}.fi-zm.fis{background-image:url('_-flags-1x1-zm.svg')}.fi-zw{background-image:url('zw.svg')}.fi-zw.fis{background-image:url('_-flags-1x1-zw.svg')}.fi-arab{background-image:url('arab.svg')}.fi-arab.fis{background-image:url('_-flags-1x1-arab.svg')}.fi-asean{background-image:url('asean.svg')}.fi-asean.fis{background-image:url('_-flags-1x1-asean.svg')}.fi-cefta{background-image:url('cefta.svg')}.fi-cefta.fis{background-image:url('_-flags-1x1-cefta.svg')}.fi-cp{background-image:url('cp.svg')}.fi-cp.fis{background-image:url('_-flags-1x1-cp.svg')}.fi-dg{background-image:url('dg.svg')}.fi-dg.fis{background-image:url('_-flags-1x1-dg.svg')}.fi-eac{background-image:url('eac.svg')}.fi-eac.fis{background-image:url('_-flags-1x1-eac.svg')}.fi-es-ct{background-image:url('es-ct.svg')}.fi-es-ct.fis{background-image:url('_-flags-1x1-es-ct.svg')}.fi-es-ga{background-image:url('es-ga.svg')}.fi-es-ga.fis{background-image:url('_-flags-1x1-es-ga.svg')}.fi-es-pv{background-image:url('es-pv.svg')}.fi-es-pv.fis{background-image:url('_-flags-1x1-es-pv.svg')}.fi-eu{background-image:url('eu.svg')}.fi-eu.fis{background-image:url('_-flags-1x1-eu.svg')}.fi-gb-eng{background-image:url('gb-eng.svg')}.fi-gb-eng.fis{background-image:url('_-flags-1x1-gb-eng.svg')}.fi-gb-nir{background-image:url('gb-nir.svg')}.fi-gb-nir.fis{background-image:url('_-flags-1x1-gb-nir.svg')}.fi-gb-sct{background-image:url('gb-sct.svg')}.fi-gb-sct.fis{background-image:url('_-flags-1x1-gb-sct.svg')}.fi-gb-wls{background-image:url('gb-wls.svg')}.fi-gb-wls.fis{background-image:url('_-flags-1x1-gb-wls.svg')}.fi-ic{background-image:url('ic.svg')}.fi-ic.fis{background-image:url('_-flags-1x1-ic.svg')}.fi-pc{background-image:url('pc.svg')}.fi-pc.fis{background-image:url('_-flags-1x1-pc.svg')}.fi-sh-ac{background-image:url('sh-ac.svg')}.fi-sh-ac.fis{background-image:url('_-flags-1x1-sh-ac.svg')}.fi-sh-hl{background-image:url('sh-hl.svg')}.fi-sh-hl.fis{background-image:url('_-flags-1x1-sh-hl.svg')}.fi-sh-ta{background-image:url('sh-ta.svg')}.fi-sh-ta.fis{background-image:url('_-flags-1x1-sh-ta.svg')}.fi-un{background-image:url('un.svg')}.fi-un.fis{background-image:url('_-flags-1x1-un.svg')}.fi-xk{background-image:url('xk.svg')}.fi-xk.fis{background-image:url('_-flags-1x1-xk.svg')}

/*!***********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@angular/cdk/overlay-prebuilt.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************/
.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/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/styles.scss?ngGlobalStyle (2) ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* You can add global styles to this file, and also import other style files */
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
/* ! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
  tab-size: 4; /* 3 */
  font-family: Source Sans Pro, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{
  appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}
[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}
input::placeholder,textarea::placeholder{
  color: #6b7280;
  opacity: 1;
}
::-webkit-datetime-edit-fields-wrapper{
  padding: 0;
}
::-webkit-date-and-time-value{
  min-height: 1.5em;
  text-align: inherit;
}
::-webkit-datetime-edit{
  display: inline-flex;
}
::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{
  padding-top: 0;
  padding-bottom: 0;
}
select{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  print-color-adjust: exact;
}
[multiple],[size]:where(select:not([size="1"])){
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  print-color-adjust: unset;
}
[type='checkbox'],[type='radio']{
  appearance: none;
  padding: 0;
  print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}
[type='checkbox']{
  border-radius: 0px;
}
[type='radio']{
  border-radius: 100%;
}
[type='checkbox']:focus,[type='radio']:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
[type='checkbox']:checked,[type='radio']:checked{
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
[type='checkbox']:checked{
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
  [type='checkbox']:checked{
    appearance: auto;
  }
}
[type='radio']:checked{
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
  [type='radio']:checked{
    appearance: auto;
  }
}
[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{
  border-color: transparent;
  background-color: currentColor;
}
[type='checkbox']:indeterminate{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
@media (forced-colors: active) {
  [type='checkbox']:indeterminate{
    appearance: auto;
  }
}
[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{
  border-color: transparent;
  background-color: currentColor;
}
[type='file']{
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}
[type='file']:focus{
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}
.container{
  width: 100%;
}
@media (min-width: 640px){
  .container{
    max-width: 640px;
  }
}
@media (min-width: 768px){
  .container{
    max-width: 768px;
  }
}
@media (min-width: 1024px){
  .container{
    max-width: 1024px;
  }
}
@media (min-width: 1280px){
  .container{
    max-width: 1280px;
  }
}
@media (min-width: 1536px){
  .container{
    max-width: 1536px;
  }
}
.aspect-h-10{
  --tw-aspect-h: 10;
}
.aspect-w-10{
  position: relative;
  padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
  --tw-aspect-w: 10;
}
.aspect-w-10 > *{
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.h-app-content{
  height: calc(100vh - 586px);
}
@media (min-width: 1024px){
  .h-app-content{
    height: calc(100vh - 14rem - 86px);
  }
}
.min-h-app-content{
  min-height: calc(100vh - 586px) !important;
}
@media (min-width: 1024px){
  .min-h-app-content{
    min-height: calc(100vh - 14rem - 86px) !important;
  }
}
.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;
  max-width: 100vw;
}

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

.stream-chat__paginated-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  max-height: 100%;
  min-height: 0;
  gap: var(--str-chat__spacing-2);
}

.stream-chat__paginated-list .str-chat__loading-indicator {
  margin: auto;
}

.stream-chat__paginated-list .str-chat__load-more-button__button {
  margin-inline: auto;
}

stream-paginated-list {
  height: 100%;
  max-height: 100%;
}

stream-user-list {
  height: 100%;
  max-height: 100%;
}

stream-user-list .str-chat__user-list-item {
  display: flex;
  align-items: center;
  gap: var(--str-chat__spacing-2);
}

: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=");
  --str-chat__winning-poll-option-icon: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNS44MzMzIDQuMTY2NjdIMTQuMTY2N1YyLjVINS44MzMzM1Y0LjE2NjY3SDQuMTY2NjdDMy4yNSA0LjE2NjY3IDIuNSA0LjkxNjY3IDIuNSA1LjgzMzMzVjYuNjY2NjdDMi41IDguNzkxNjcgNC4xIDEwLjUyNSA2LjE1ODMzIDEwLjc4MzNDNi42ODMzMyAxMi4wMzMzIDcuODA4MzMgMTIuOTc1IDkuMTY2NjcgMTMuMjVWMTUuODMzM0g1LjgzMzMzVjE3LjVIMTQuMTY2N1YxNS44MzMzSDEwLjgzMzNWMTMuMjVDMTIuMTkxNyAxMi45NzUgMTMuMzE2NyAxMi4wMzMzIDEzLjg0MTcgMTAuNzgzM0MxNS45IDEwLjUyNSAxNy41IDguNzkxNjcgMTcuNSA2LjY2NjY3VjUuODMzMzNDMTcuNSA0LjkxNjY3IDE2Ljc1IDQuMTY2NjcgMTUuODMzMyA0LjE2NjY3Wk00LjE2NjY3IDYuNjY2NjdWNS44MzMzM0g1LjgzMzMzVjkuMDE2NjdDNC44NjY2NyA4LjY2NjY3IDQuMTY2NjcgNy43NSA0LjE2NjY3IDYuNjY2NjdaTTEwIDExLjY2NjdDOC42MjUgMTEuNjY2NyA3LjUgMTAuNTQxNyA3LjUgOS4xNjY2N1Y0LjE2NjY3SDEyLjVWOS4xNjY2N0MxMi41IDEwLjU0MTcgMTEuMzc1IDExLjY2NjcgMTAgMTEuNjY2N1pNMTUuODMzMyA2LjY2NjY3QzE1LjgzMzMgNy43NSAxNS4xMzMzIDguNjY2NjcgMTQuMTY2NyA5LjAxNjY3VjUuODMzMzNIMTUuODMzM1Y2LjY2NjY3WiIgZmlsbD0iIzVFNjc2RSIvPgo8L3N2Zz4K");
  --str-chat__arrow-left-icon: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0Ljc5MTUgNy4wMDUxSDMuNjIxNDhMOC41MDE0OCAyLjEyNTFDOC44OTE0OCAxLjczNTEgOC44OTE0OCAxLjA5NTEgOC41MDE0OCAwLjcwNTA5OEM4LjExMTQ4IDAuMzE1MDk4IDcuNDgxNDggMC4zMTUwOTggNy4wOTE0OCAwLjcwNTA5OEwwLjUwMTQ4NCA3LjI5NTFDMC4xMTE0ODQgNy42ODUxIDAuMTExNDg0IDguMzE1MSAwLjUwMTQ4NCA4LjcwNTFMNy4wOTE0OCAxNS4yOTUxQzcuNDgxNDggMTUuNjg1MSA4LjExMTQ4IDE1LjY4NTEgOC41MDE0OCAxNS4yOTUxQzguODkxNDggMTQuOTA1MSA4Ljg5MTQ4IDE0LjI3NTEgOC41MDE0OCAxMy44ODUxTDMuNjIxNDggOS4wMDUxSDE0Ljc5MTVDMTUuMzQxNSA5LjAwNTEgMTUuNzkxNSA4LjU1NTEgMTUuNzkxNSA4LjAwNTFDMTUuNzkxNSA3LjQ1NTEgMTUuMzQxNSA3LjAwNTEgMTQuNzkxNSA3LjAwNTFaIiBmaWxsPSIjMDgwNzA3Ii8+Cjwvc3ZnPgo=");
  --str-chat__close-icon: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTQgMTQiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjI5OTcgMC43MDk5NzFDMTIuOTA5NyAwLjMxOTk3MSAxMi4yNzk3IDAuMzE5OTcxIDExLjg4OTcgMC43MDk5NzFMNi45OTk3MyA1LjU4OTk3TDIuMTA5NzMgMC42OTk5NzFDMS43MTk3MyAwLjMwOTk3MSAxLjA4OTczIDAuMzA5OTcxIDAuNjk5NzI3IDAuNjk5OTcxQzAuMzA5NzI3IDEuMDg5OTcgMC4zMDk3MjcgMS43MTk5NyAwLjY5OTcyNyAyLjEwOTk3TDUuNTg5NzMgNi45OTk5N0wwLjY5OTcyNyAxMS44OUMwLjMwOTcyNyAxMi4yOCAwLjMwOTcyNyAxMi45MSAwLjY5OTcyNyAxMy4zQzEuMDg5NzMgMTMuNjkgMS43MTk3MyAxMy42OSAyLjEwOTczIDEzLjNMNi45OTk3MyA4LjQwOTk3TDExLjg4OTcgMTMuM0MxMi4yNzk3IDEzLjY5IDEyLjkwOTcgMTMuNjkgMTMuMjk5NyAxMy4zQzEzLjY4OTcgMTIuOTEgMTMuNjg5NyAxMi4yOCAxMy4yOTk3IDExLjg5TDguNDA5NzMgNi45OTk5N0wxMy4yOTk3IDIuMTA5OTdDMTMuNjc5NyAxLjcyOTk3IDEzLjY3OTcgMS4wODk5NyAxMy4yOTk3IDAuNzA5OTcxWiIgZmlsbD0iIzA4MDcwNyIvPgo8L3N2Zz4K");
  --str-chat__add-attachment-icon: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjggMjgiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNS4zMzMyIDcuMzMzMDdMMTIuNjY2NiA3LjMzMzA3TDEyLjY2NjYgMTIuNjY2NEw3LjMzMzI0IDEyLjY2NjRMNy4zMzMyNCAxNS4zMzMxTDEyLjY2NjYgMTUuMzMzMUwxMi42NjY2IDIwLjY2NjRMMTUuMzMzMiAyMC42NjY0TDE1LjMzMzIgMTUuMzMzMUwyMC42NjY2IDE1LjMzMzFMMjAuNjY2NiAxMi42NjY0TDE1LjMzMzIgMTIuNjY2NEwxNS4zMzMyIDcuMzMzMDdaTTEzLjk5OTkgMC42NjY0MDRDNi42Mzk5MSAwLjY2NjQwNCAwLjY2NjU3NiA2LjYzOTc0IDAuNjY2NTc3IDEzLjk5OTdDMC42NjY1NzYgMjEuMzU5NyA2LjYzOTkxIDI3LjMzMzEgMTMuOTk5OSAyNy4zMzMxQzIxLjM1OTkgMjcuMzMzMSAyNy4zMzMyIDIxLjM1OTcgMjcuMzMzMiAxMy45OTk3QzI3LjMzMzIgNi42Mzk3NCAyMS4zNTk5IDAuNjY2NDA0IDEzLjk5OTkgMC42NjY0MDRaTTEzLjk5OTkgMjQuNjY2NEM4LjExOTkxIDI0LjY2NjQgMy4zMzMyNCAxOS44Nzk3IDMuMzMzMjUgMTMuOTk5N0MzLjMzMzI0IDguMTE5NzQgOC4xMTk5MSAzLjMzMzA3IDEzLjk5OTkgMy4zMzMwN0MxOS44Nzk5IDMuMzMzMDcgMjQuNjY2NiA4LjExOTc0IDI0LjY2NjYgMTMuOTk5N0MyNC42NjY2IDE5Ljg3OTcgMTkuODc5OSAyNC42NjY0IDEzLjk5OTkgMjQuNjY2NFoiLz4KPC9zdmc+Cg==");
  --str-chat__folder-icon: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMTYiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xOCAySDEwTDggMEgyQzAuOSAwIDAuMDA5OTk5OTkgMC45IDAuMDA5OTk5OTkgMkwwIDE0QzAgMTUuMSAwLjkgMTYgMiAxNkgxOEMxOS4xIDE2IDIwIDE1LjEgMjAgMTRWNEMyMCAyLjkgMTkuMSAyIDE4IDJaTTE4IDE0SDJWNEgxOFYxNFoiIC8+Cjwvc3ZnPgo=");
  --str-chat__poll-icon: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNiAwSDJDMC45IDAgMCAwLjkgMCAyVjE2QzAgMTcuMSAwLjkgMTggMiAxOEgxNkMxNy4xIDE4IDE4IDE3LjEgMTggMTZWMkMxOCAwLjkgMTcuMSAwIDE2IDBaTTE2IDE2SDJWMkgxNlYxNlpNNCA3SDZWMTRINFY3Wk04IDRIMTBWMTRIOFY0Wk0xMiAxMEgxNFYxNEgxMlYxMFoiLz4KPC9zdmc+");
  --str-chat__handle-icon: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgNiIgZmlsbD0iY3VycmVuQ29sb3IiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTYgMEgwVjJIMTZWMFpNMCA2SDE2VjRIMFY2WiIvPgo8L3N2Zz4K");
  --str-chat__circle-stop-icon: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSI0IDQgMjggMjgiIHdpZHRoPSIzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2LjQ1NTEgMjcuMjQ0MUMyMi42MzA5IDI3LjI0NDEgMjcuNzQ0MSAyMi4xMTk4IDI3Ljc0NDEgMTUuOTU1MUMyNy43NDQxIDkuNzc5MyAyMi42MTk4IDQuNjY2MDIgMTYuNDQ0IDQuNjY2MDJDMTAuMjc5MyA0LjY2NjAyIDUuMTY2MDIgOS43NzkzIDUuMTY2MDIgMTUuOTU1MUM1LjE2NjAyIDIyLjExOTggMTAuMjkwNCAyNy4yNDQxIDE2LjQ1NTEgMjcuMjQ0MVpNMTYuNDU1MSAyNS4zNjI2QzExLjIzMTEgMjUuMzYyNiA3LjA1ODU5IDIxLjE3OSA3LjA1ODU5IDE1Ljk1NTFDNy4wNTg1OSAxMC43MzExIDExLjIyMDEgNi41NDc1MyAxNi40NDQgNi41NDc1M0MyMS42NjggNi41NDc1MyAyNS44NTE2IDEwLjczMTEgMjUuODYyNiAxNS45NTUxQzI1Ljg3MzcgMjEuMTc5IDIxLjY3OSAyNS4zNjI2IDE2LjQ1NTEgMjUuMzYyNlpNMTMuNTIyMSAxOS45ODM3SDE5LjM2NTlDMjAuMDYzMiAxOS45ODM3IDIwLjQ3MjcgMTkuNTc0MiAyMC40NzI3IDE4Ljg5OTFWMTMuMDExMUMyMC40NzI3IDEyLjMyNDkgMjAuMDYzMiAxMS45MjY0IDE5LjM2NTkgMTEuOTI2NEgxMy41MjIxQzEyLjgzNTkgMTEuOTI2NCAxMi40MTU0IDEyLjMyNDkgMTIuNDE1NCAxMy4wMTExVjE4Ljg5OTFDMTIuNDE1NCAxOS41NzQyIDEyLjgzNTkgMTkuOTgzNyAxMy41MjIxIDE5Ljk4MzdaIiBmaWxsPSIjMDA1ZmZmIi8+Cjwvc3ZnPg==");
  --str-chat__magnifier-glass-icon: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjEgMjEiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOSAwQzEzLjk2OCAwIDE4IDQuMDMyIDE4IDlDMTggMTMuOTY4IDEzLjk2OCAxOCA5IDE4QzQuMDMyIDE4IDAgMTMuOTY4IDAgOUMwIDQuMDMyIDQuMDMyIDAgOSAwWk05IDE2QzEyLjg2NyAxNiAxNiAxMi44NjcgMTYgOUMxNiA1LjEzMiAxMi44NjcgMiA5IDJDNS4xMzIgMiAyIDUuMTMyIDIgOUMyIDEyLjg2NyA1LjEzMiAxNiA5IDE2Wk0yMC4zMTQgMTguODk5TDE3LjQ4NSAxNi4wNzFMMTYuMDcxIDE3LjQ4NUwxOC44OTkgMjAuMzE0TDIwLjMxNCAxOC44OTlaIi8+Cjwvc3ZnPgo=");
  --str-chat__clear-icon: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDEwQzAgNC40NzcxNSA0LjQ3NzE1IDAgMTAgMEMxNS41MjI4IDAgMjAgNC40NzcxNSAyMCAxMEMyMCAxNS41MjI4IDE1LjUyMjggMjAgMTAgMjBDNC40NzcxNSAyMCAwIDE1LjUyMjggMCAxMFpNMTAgMkM1LjU4MTcyIDIgMiA1LjU4MTcyIDIgMTBDMiAxNC40MTgzIDUuNTgxNzIgMTggMTAgMThDMTQuNDE4MyAxOCAxOCAxNC40MTgzIDE4IDEwQzE4IDUuNTgxNzIgMTQuNDE4MyAyIDEwIDJaTTEzLjUzNTggNi40NjQ0NkMxMy4xNDUzIDYuMDczOTQgMTIuNTEyMSA2LjA3Mzk0IDEyLjEyMTYgNi40NjQ0NkwxMC4wMDAzIDguNTg1NzhMNy44Nzg5OCA2LjQ2NDQ2QzcuNDg4NDYgNi4wNzM5NCA2Ljg1NTI5IDYuMDczOTQgNi40NjQ3NyA2LjQ2NDQ2QzYuMDc0MjQgNi44NTQ5OSA2LjA3NDI0IDcuNDg4MTUgNi40NjQ3NyA3Ljg3ODY4TDguNTg2MDkgMTBMNi40NjQ3NyAxMi4xMjEzQzYuMDc0MjQgMTIuNTExOCA2LjA3NDI0IDEzLjE0NSA2LjQ2NDc3IDEzLjUzNTVDNi44NTUyOSAxMy45MjYxIDcuNDg4NDYgMTMuOTI2MSA3Ljg3ODk4IDEzLjUzNTVMMTAuMDAwMyAxMS40MTQyTDEyLjEyMTYgMTMuNTM1NUMxMi41MTIxIDEzLjkyNjEgMTMuMTQ1MyAxMy45MjYxIDEzLjUzNTggMTMuNTM1NUMxMy45MjY0IDEzLjE0NSAxMy45MjY0IDEyLjUxMTggMTMuNTM1OCAxMi4xMjEzTDExLjQxNDUgMTBMMTMuNTM1OCA3Ljg3ODY4QzEzLjkyNjQgNy40ODgxNSAxMy45MjY0IDYuODU0OTkgMTMuNTM1OCA2LjQ2NDQ2WiIvPgo8L3N2Zz4K");
}

@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 {
  --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 32);
}

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

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

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

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

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

.str-chat .str-chat__avatar--message-status,
.str-chat .stream-chat__avatar--message-status {
  --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 15);
}

.str-chat .str-chat__avatar--poll-vote-author {
  --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 20);
}

.str-chat__avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--str-chat__avatar-size);
  line-height: var(--str-chat__avatar-size);
  width: var(--str-chat__avatar-size);
  min-width: var(--str-chat__avatar-size);
}

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

.str-chat__avatar.str-chat__avatar--no-letters {
  --str-chat-icon-width: calc(var(--str-chat__avatar-size) * 0.33);
  --str-chat-icon-height: calc(var(--str-chat__avatar-size) * 0.33);
}

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

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

.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__avatar-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  height: var(--str-chat__avatar-size);
  line-height: var(--str-chat__avatar-size);
  width: var(--str-chat__avatar-size);
  min-width: var(--str-chat__avatar-size);
  overflow: hidden;
}

.str-chat__avatar-group.str-chat__avatar-group--three-part .str-chat__avatar:nth-child(1) {
  grid-area: 1/1/3/2;
}

.str-chat__avatar-group.str-chat__avatar-group--three-part .str-chat__avatar:nth-child(2) {
  grid-area: 1/2/2/3;
}

.str-chat__avatar-group.str-chat__avatar-group--three-part .str-chat__avatar:nth-child(3) {
  grid-area: 2/2/3/3;
}

.str-chat__avatar-group .str-chat__avatar {
  height: 100%;
  line-height: 100%;
  width: 100%;
  min-width: 100%;
}

.str-chat__avatar-group .str-chat__avatar .str-chat__avatar-fallback, .str-chat__avatar-group .str-chat__avatar img {
  border-radius: 0;
}

.str-chat__avatar-group .str-chat__avatar.str-chat__avatar--single .str-chat__avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--str-chat__avatar-size) * 0.5);
}

.str-chat__avatar-group .str-chat__avatar .str-chat__avatar-fallback {
  font-size: calc(var(--str-chat__avatar-size) * 0.33);
}

.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: 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-list-angular-host .str-chat__message-attachment-card--video {
  width: 100%;
}

.str-chat__attachment-list-angular-host .str-chat__message-attachment-card--video a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.str-chat__attachment-list-angular-host .str-chat__message-attachment-card--video a .str-chat__message-attachment-card--video-play,
.str-chat__attachment-list-angular-host .str-chat__message-attachment-card--video a stream-icon-placeholder {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateY(-50%);
  width: calc(var(--str-chat__spacing-px) * 36);
  height: calc(var(--str-chat__spacing-px) * 36);
}

.str-chat__attachment-list-angular-host .str-chat__message-attachment-card--video a img {
  cursor: pointer;
}

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

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

.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: calc(100% + var(--str-chat__spacing-2_5));
  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,
stream-voice-recorder-wavebar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.str-chat__audio_recorder button,
stream-voice-recorder-wavebar 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,
stream-voice-recorder-wavebar .str-chat__audio_recorder__cancel-button {
  --str-chat-icon-height: 28px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__cancel-button svg,
stream-voice-recorder-wavebar .str-chat__audio_recorder__cancel-button svg {
  height: 28px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__toggle-playback-button,
stream-voice-recorder-wavebar .str-chat__audio_recorder__toggle-playback-button {
  --str-chat-icon-height: 16px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__toggle-playback-button svg,
stream-voice-recorder-wavebar .str-chat__audio_recorder__toggle-playback-button svg {
  height: 16px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__pause-recording-button,
stream-voice-recorder-wavebar .str-chat__audio_recorder__pause-recording-button {
  --str-chat-icon-height: 12px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__pause-recording-button svg,
stream-voice-recorder-wavebar .str-chat__audio_recorder__pause-recording-button svg {
  height: 12px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__resume-recording-button,
stream-voice-recorder-wavebar .str-chat__audio_recorder__resume-recording-button {
  --str-chat-icon-height: 24px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__resume-recording-button svg,
stream-voice-recorder-wavebar .str-chat__audio_recorder__resume-recording-button svg {
  height: 24px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__stop-button,
stream-voice-recorder-wavebar .str-chat__audio_recorder__stop-button {
  --str-chat-icon-height: 12px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__stop-button svg,
stream-voice-recorder-wavebar .str-chat__audio_recorder__stop-button svg {
  height: 12px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__complete-button,
stream-voice-recorder-wavebar .str-chat__audio_recorder__complete-button {
  --str-chat-icon-height: 16px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__complete-button svg,
stream-voice-recorder-wavebar .str-chat__audio_recorder__complete-button svg {
  height: 16px;
}

.str-chat__audio_recorder .str-chat__recording-timer,
stream-voice-recorder-wavebar .str-chat__recording-timer {
  display: flex;
  align-items: center;
  width: 3rem;
}

.str-chat__audio_recorder .str-chat__recording-timer--hours,
stream-voice-recorder-wavebar .str-chat__recording-timer--hours {
  width: 3.75rem;
}

.str-chat__audio_recorder .str-chat__wave-progress-bar__track-container,
stream-voice-recorder-wavebar .str-chat__wave-progress-bar__track-container {
  padding-block: 0.5rem;
  overflow-x: auto;
  height: fit-content;
}

.str-chat__audio_recorder .str-chat__waveform-box-container,
stream-voice-recorder-wavebar .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,
stream-voice-recorder-wavebar .str-chat__audio_recorder__waveform-box,
stream-voice-recorder-wavebar .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,
stream-voice-recorder-wavebar .str-chat__wave-progress-bar__track {
  width: 120px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__waveform-box,
stream-voice-recorder-wavebar .str-chat__audio_recorder__waveform-box {
  overflow-x: hidden;
}

.str-chat__audio_recorder-container .str-chat__message-attachment__voice-recording-widget {
  display: flex;
  gap: var(--str-chat__spacing-1_5);
}

.str-chat__audio_recorder-container .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment-voice-recording-widget--first-row {
  display: none;
}

.str-chat__audio_recorder-container .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__audio-state {
  display: flex;
  gap: var(--str-chat__spacing-1_5);
}

.str-chat__audio_recorder-container .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__audio-state .str-chat__message-attachment__voice-recording-widget__timer {
  min-width: 3rem;
  align-self: center;
}

.str-chat__audio_recorder-container .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__right-section {
  display: none;
}

.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__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 {
  /* stylelint-disable */
  height: 100%;
  padding: 0 var(--str-chat__spacing-2);
}

.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 .stream-chat__paginated-list {
  gap: 0;
}

.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-angular__channel-list .str-chat__channel-list-messenger__main {
  display: flex;
  flex-direction: column;
}

.str-chat-angular__channel-list .str-chat__channel-list-messenger__main stream-paginated-list {
  min-height: 0;
}

.str-chat__channel-preview-container {
  position: relative;
}

.str-chat__channel-preview-container .str-chat__channel-preview__action-buttons {
  position: absolute;
  right: var(--str-chat__spacing-2);
  bottom: var(--str-chat__spacing-3);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1px;
}

.str-chat__channel-preview-container .str-chat__channel-preview__action-buttons .str-chat__channel-preview__action-button {
  --str-chat-icon-height: 13px;
  cursor: pointer;
  padding-block: 2px;
  padding-inline: 4px;
}

.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;
  max-width: calc(100% - 40px);
}

.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--active.str-chat__channel-search--inline, .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 {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
  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__dialog-overlay {
  inset: 0;
  overflow: hidden;
  position: absolute;
  height: var(--str-chat__dialog-overlay-height);
  width: 100%;
  z-index: 2;
}

.str-chat__dialog {
  width: 100%;
}

.str-chat__dialog .str-chat__dialog__body {
  padding: 2rem 1rem;
  overflow-y: auto;
}

.str-chat__dialog .str-chat__dialog__body .str-chat__dialog__title {
  margin-bottom: 1rem;
}

.str-chat__dialog .str-chat__dialog__controls {
  display: flex;
  justify-content: flex-end;
  gap: 1.25rem;
  padding: 1.25rem;
}

.str-chat__dialog .str-chat__dialog__controls .str-chat__dialog__controls-button {
  background: none;
  border: none;
}

.str-chat__prompt-dialog input[type=text] {
  width: 100%;
  padding: 0.625rem 1rem;
}

.str-chat__dialog-menu {
  overflow: hidden;
}

.str-chat__dialog-menu .str-chat__dialog-menu__button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0.75rem;
}

.str-chat__dialog-menu .str-chat__dialog-menu__button .str-chat__dialog-menu__button-icon {
  height: 1rem;
  width: 1rem;
}

.str-chat__dialog-menu .str-chat__dialog-menu__button .str-chat__dialog-menu__button-text {
  padding-inline: 0.675rem;
}

.str-chat__drag-and-drop-container__item {
  display: flex;
  width: 100%;
  padding-block: 0.25rem;
}

.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__dialog__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.str-chat__dialog__field .str-chat__form-field-error {
  margin-left: 0.5rem;
}

.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: "\e814";
} /* '' */
.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__icon--mic::before {
  content: "\e812";
} /* '' */
.str-chat__icon--bin::before {
  content: "\e813";
} /* '' */
.str-chat__infinite-scroll-paginator {
  overflow-y: auto;
  overflow-x: hidden;
}

.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);
  }
}
stream-loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
}

stream-loading-indicator .str-chat__loading-indicator {
  width: var(--str-chat__loading-indicator-size);
  height: var(--str-chat__loading-indicator-size);
}

.str-chat__loading-indicator-placeholder {
  width: var(--str-chat__loading-indicator-size);
  height: var(--str-chat__loading-indicator-size);
}

.str-chat {
  /* The width/height of the message options button(s), for Angular SDK it's only used on desktop devices starting from version 5 */
  --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)
  );
  /* The maximum number of lines displayed for quoted messages, set to "none" to turn off clamping */
  --str-chat__quoted-message-line-clamp: 5;
}

.str-chat__message {
  --str-chat-message-options-size: calc(3 * var(--str-chat__message-options-button-size));
}

.str-chat__message.str-chat__message-without-touch-support {
  --str-chat-message-options-size: calc(1 * var(--str-chat__message-options-button-size));
}

.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__quoted-message-text-value {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: var(--str-chat__quoted-message-line-clamp);
  line-clamp: var(--str-chat__quoted-message-line-clamp);
  -webkit-box-orient: vertical;
}

.str-chat__message,
.str-chat__quoted-message-preview {
  display: grid;
  word-wrap: break-word;
  word-break: break-word;
  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--blocked,
.str-chat__quoted-message-preview.str-chat__message--blocked {
  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: var(--str-chat-message-options-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 {
  white-space: pre-line;
  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--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 {
  white-space: pre-line;
  margin: 0;
}

.str-chat__message .str-chat__message--blocked-inner,
.str-chat__quoted-message-preview .str-chat__message--blocked-inner {
  padding: var(--str-chat__spacing-2) var(--str-chat__spacing-4);
}

.str-chat__message .str-chat__message--blocked-inner p,
.str-chat__quoted-message-preview .str-chat__message--blocked-inner p {
  white-space: pre-line;
  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 {
  white-space: pre-line;
  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__message-with-touch-support),
.str-chat__virtual-list:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) {
  /* 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__message-with-touch-support) .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__message-with-touch-support) .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__message-with-touch-support) .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__message-with-touch-support) .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__message-with-touch-support) .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__message-with-touch-support) .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__message-with-touch-support) .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__message-with-touch-support) .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__message-with-touch-support) .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__message-with-touch-support) .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__message-with-touch-support) .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__message-with-touch-support) .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__message-with-touch-support) .str-chat__li:hover .str-chat__message-options,
  .str-chat__ul:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) .str-chat__li:focus-within .str-chat__message-options,
  .str-chat__virtual-list:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) .str-chat__li:hover .str-chat__message-options,
  .str-chat__virtual-list:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) .str-chat__li:focus-within .str-chat__message-options {
    display: flex;
  }
  .str-chat__ul:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) .str-chat__li:hover .str-chat__message--other .str-chat__message-inner,
  .str-chat__ul:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) .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__message-with-touch-support) .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__message-with-touch-support) .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__message-with-touch-support) .str-chat__li:hover .str-chat__message--me .str-chat__message-inner,
  .str-chat__ul:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) .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__message-with-touch-support) .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__message-with-touch-support) .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.str-chat__message-options--active {
  display: flex;
}

.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:not(:has(.str-chat__message-options--active)) {
  margin-inline-end: var(--str-chat-message-options-size);
}

.str-chat__message--me .str-chat__message-inner {
  margin-inline-start: var(--str-chat-message-options-size);
}

.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-with-touch-support .str-chat__message-bubble {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.str-chat__message-with-touch-support.str-chat__message-menu-opened .str-chat__attachments-container,
.str-chat__message-with-touch-support.str-chat__message-menu-opened .str-chat__message-text-inner {
  pointer-events: none;
}

.str-chat__message-with-touch-support .str-chat__message-inner {
  margin-inline: 0;
}

.str-chat__message-with-touch-support .str-chat__message-options {
  display: none;
}

.str-chat__message-with-touch-support .stream-chat-angular__image-modal-host {
  -webkit-touch-callout: default;
}

.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-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-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__stop-ai-generation-button {
  width: calc(var(--str-chat__spacing-px) * 30);
  height: calc(var(--str-chat__spacing-px) * 28);
  cursor: pointer;
}

.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 {
  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 25);
  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__attachment-selector-actions-menu button,
.str-chat__attachment-selector button {
  background: none;
  border: none;
}

.str-chat__attachment-selector .str-chat__attachment-selector__menu-button {
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.str-chat__attachment-selector .str-chat__attachment-selector__menu-button .str-chat__attachment-selector__menu-button__icon {
  height: 26px;
  width: 26px;
}

.str-chat__file-input {
  display: none;
}

.str-chat__attachment-selector-actions-menu {
  min-width: 300px;
  padding-block: 0.5rem;
}

.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__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__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: 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 {
  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-angular-v5__reaction-selector {
  margin: var(--str-chat__spacing-2);
  position: static;
  justify-content: flex-start;
}

.str-chat__message-reaction-selector.str-chat-angular-v5__reaction-selector .str-chat__message-reactions-options {
  max-width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0;
}

.str-chat__message-reaction-selector.str-chat-angular-v5__reaction-selector .str-chat__message-reactions-options .str-chat__message-reactions-option {
  flex-shrink: 0;
}

.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: 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-react__message-reaction-selector {
  position: static;
  inset-block-end: unset;
}

.str-chat-react__message-reaction-selector ul {
  margin: 0;
}

.str-chat__message--me .str-chat-react__message-reaction-selector, .str-chat__message--other .str-chat-react__message-reaction-selector {
  inset-inline-start: unset;
}

.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 .str-chat__modal-header {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1.25rem 1rem;
}

.str-chat__modal--open .str-chat__modal-header button.str-chat__modal-header__go-back-button,
.str-chat__modal--open .str-chat__modal-header .str-chat__modal__close-button {
  padding: 1rem;
  background-size: 0.875rem;
  background-repeat: no-repeat;
  background-position: center;
}

.str-chat__modal--open .str-chat__modal-header button.str-chat__modal-header__go-back-button {
  background-image: var(--str-chat__arrow-left-icon);
}

.str-chat__modal--open .str-chat__modal-header .str-chat__modal-header__close-button {
  background-image: var(--str-chat__close-icon);
  background-repeat: no-repeat;
  height: 0.875rem;
  width: 0.875rem;
}

.str-chat__modal--open .str-chat__modal-header .str-chat__modal-header__title {
  flex: 1;
}

.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%;
  max-height: 80%;
  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: 100;
}

.str-chat__list-notifications {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  row-gap: var(--str-chat__spacing-1);
  margin: var(--str-chat__spacing-1_5);
  width: auto;
}

.str-chat__notification {
  padding: var(--str-chat__spacing-3_5) var(--str-chat__spacing-4);
}

.str-chat-react__notification {
  z-index: 101;
}

.str-chat__poll {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0.675rem;
  max-width: 270px;
  font: var(--str-chat__body-text);
}

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

.str-chat__poll .str-chat__checkmark {
  grid-column: 1/2;
  grid-row: 1/2;
  margin-right: 0.125rem;
  height: 1rem;
  width: 1rem;
}

.str-chat__poll .str-chat__checkmark--checked {
  height: calc(1rem + 1px);
  width: calc(1rem + 1px);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Im00IDkuNC00LTRMMS40IDQgNCA2LjYgMTAuNiAwIDEyIDEuNGwtOCA4WiIvPjwvc3ZnPg==");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 10px;
}

.str-chat__poll .str-chat__poll-header .str-chat__poll-title {
  font: var(--str-chat__body-medium-text);
}

.str-chat__poll .str-chat__poll-header .str-chat__poll-subtitle {
  font: var(--str-chat__caption-text);
}

.str-chat__poll .str-chat__poll-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.str-chat__poll .str-chat__poll-actions .str-chat__poll-action {
  padding: 0.675rem;
  font: var(--str-chat__subtitle-text);
  color: var(--str-chat__primary-color);
}

.str-chat__poll-option-list--full .str-chat__amount-bar,
.str-chat__modal__poll-results .str-chat__amount-bar {
  display: none;
}

.str-chat__poll-option {
  cursor: pointer;
}

.str-chat__poll-option.str-chat__poll-option--full-vote-list {
  cursor: default;
  height: 100%;
  padding: 0;
}

.str-chat__poll-option .str-chat__poll-option-data {
  flex: 1;
  display: flex;
  align-items: flex-start;
  font: var(--str-chat__body-text);
  gap: 0.125rem;
}

.str-chat__poll-option .str-chat__poll-option-data p {
  margin: 0;
  flex: 1;
}

.str-chat__poll-option .str-chat__poll-option-data .str-chat__poll-option-voters {
  --str-chat__avatar-size: 1.175rem;
  display: flex;
}

.str-chat__poll-option-list--full .str-chat__poll-option {
  display: flex;
  flex-direction: row;
  padding: 1rem 0.75rem;
}

.str-chat__poll-option-list--full .str-chat__poll-option:nth-of-type(1) {
  padding-top: 1rem;
  border-top-left-radius: var(--str-chat__border-radius-sm);
  border-top-right-radius: var(--str-chat__border-radius-sm);
}

.str-chat__poll-option-list--full .str-chat__poll-option:last-child {
  padding-bottom: 1rem;
  border-bottom-left-radius: var(--str-chat__border-radius-sm);
  border-bottom-right-radius: var(--str-chat__border-radius-sm);
}

.str-chat__poll-option-list:not(.str-chat__poll-option-list--full) {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-block: 1rem 0.5rem;
}

.str-chat__poll-option-list:not(.str-chat__poll-option-list--full) .str-chat__poll-option {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  gap: 0.125rem;
}

.str-chat__poll-option-list:not(.str-chat__poll-option-list--full) .str-chat__poll-option .str-chat__poll-option-data {
  grid-column: 2/3;
  grid-row: 1/2;
}

.str-chat__poll-option-list:not(.str-chat__poll-option-list--full) .str-chat__poll-option .str-chat__poll-option__votes-bar {
  grid-column: 2/3;
  grid-row: 2/3;
  height: 0.25rem;
  width: 100%;
  margin-top: 0.25rem;
}

.str-chat__modal__poll-results .str-chat__poll-option {
  display: flex;
  flex-direction: column;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__close-button {
  display: none;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner {
  padding: 0 0 0.5rem;
  overflow: hidden;
  max-width: 400px;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__tooltip {
  max-width: 300px;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__suggest-poll-option .str-chat__form-field-error {
  height: 1rem;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-answer-list,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-option-list,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-results {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 400px;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-answer-list .str-chat__loading-indicator-placeholder,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-option--full-vote-list .str-chat__loading-indicator-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-option-list__title,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-results__title {
  padding: 1.175rem 1rem;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-answer-list__body,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-results__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: 1rem;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-results__body,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-option-list__body,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-answer-list,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-results__option-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-height: 100%;
  min-height: 0;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-answer-list {
  padding-bottom: 0;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-results__body,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-option-list__body,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-answer-list {
  overflow-y: auto;
  padding: 0 1rem 1.25rem;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-answer-list,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-results__option-list {
  gap: 0.5rem;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-results__body,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-option-list__body {
  gap: 2rem;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-option__show-all-votes-button {
  padding-bottom: 1rem;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-answer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.75rem 1rem;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-answer .str-chat__poll-answer__text {
  margin: 0;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__checkmark {
  margin-right: 1rem;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-option__header {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  width: 100%;
  padding: 0.75rem 1rem;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-option__header .str-chat__poll-option__option-text {
  flex: 1;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-vote {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding-block: 0.375rem;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-vote .str-chat__poll-vote__author {
  display: flex;
  align-items: center;
  gap: calc(var(--str-chat__spacing-px) * 5);
  min-width: 0;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-vote .str-chat__poll-vote__author .str-chat__poll-vote__author__name {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
  max-width: 130px;
  min-width: 0;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-result-option-vote-counter {
  display: flex;
  gap: 0.375rem;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-result-option-vote-counter .str-chat__poll-result-winning-option-icon {
  height: 1.25rem;
  width: 1.25rem;
  background-image: var(--str-chat__winning-poll-option-icon);
}

.str-chat__poll-vote-listing {
  padding: 0 1rem 0.75rem;
}

.str-chat__modal__poll-results--option-detail .str-chat__modal-header__title {
  padding-inline: 1rem;
  flex: 1;
}

.str-chat__modal__poll-results--option-detail .str-chat__modal__poll-results__body {
  padding-inline: 1rem;
}

.str-chat__quoted-poll-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-start;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__modal__close-button {
  display: none;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__modal__inner {
  padding: 0;
  max-height: unset;
  display: block;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog button {
  background: none;
  border: none;
  cursor: pointer;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__modal-header {
  padding-block: 14px;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__modal-header .str-chat__modal-header__close-button {
  background-image: var(--str-chat__close-icon);
  background-repeat: no-repeat;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__dialog__body {
  flex: 1 1;
  padding: 1rem;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__dialog__body form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__input-fieldset {
  margin: 0;
  padding: 0;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__input-fieldset .str-chat__form__input-field {
  width: 100%;
  padding: 1rem;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__input-fieldset .str-chat__form__input-field .str-chat__form__input-field__value {
  width: 100%;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__input-fieldset .str-chat__form__input-field .str-chat__form__input-field__value .str-chat__form__input-field__error {
  width: 100%;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__input-field--with-label .str-chat__form__input-field__value {
  padding: 1rem;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__input-field__value input {
  width: 100%;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__expandable-field {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__expandable-field .str-chat__form__switch-field {
  padding: 0;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__expandable-field .str-chat__form__input-field {
  width: 100%;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__expandable-field .str-chat__form__input-field .str-chat__form__input-field__value {
  padding: 0;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__expandable-field .str-chat__form__input-field .str-chat__form__input-field__value .str-chat__form-field-error {
  height: 1rem;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__input-fieldset__values {
  display: flex;
  flex-direction: column;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__field-label {
  display: block;
  margin-bottom: 0.5rem;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__input-field--draggable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__input-field--draggable .str-chat__drag-handle {
  height: 1rem;
  width: 1rem;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__switch-field {
  width: 100%;
  padding: 1rem;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__switch-field input[type=checkbox] {
  display: none;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__switch-field label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__switch-field .str-chat__form__switch-field__switch {
  display: flex;
  align-items: center;
  width: calc(var(--str-chat__spacing-px) * 52);
  height: calc(var(--str-chat__spacing-px) * 32);
  padding: 0.25rem;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__switch-field .str-chat__form__switch-field__switch .str-chat__form__switch-field__switch-handle {
  height: 1.5rem;
  width: 1.5rem;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__switch-field .str-chat__form__switch-field__switch.str-chat__form__switch-field__switch--on .str-chat__form__switch-field__switch-handle {
  transform: translateX(1.25rem);
}

@media only screen and (max-device-width: 768px) {
  .str-chat__modal--open .str-chat__modal__inner {
    width: 90%;
  }
  .str-chat__create-poll-modal .str-chat__modal__inner,
  .str-chat__poll-answer-list-modal .str-chat__modal__inner,
  .str-chat__poll-results-modal .str-chat__modal__inner {
    height: 90%;
    max-height: unset;
  }
}
.str-chat__search {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.str-chat__search.str-chat__search--active {
  flex: 1;
  max-height: 100%;
}

.str-chat__search .str-chat__search-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--str-chat__spacing-2_5) var(--str-chat__spacing-2);
  gap: 0.25rem;
}

.str-chat__search .str-chat__search-bar .str-chat__search-bar-button {
  background: none;
  border: none;
  padding: var(--str-chat__spacing-1);
  cursor: pointer;
}

.str-chat__search .str-chat__search-bar .str-chat__search-input--wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  padding: var(--str-chat__spacing-1_5) var(--str-chat__spacing-2);
  min-width: 0;
}

.str-chat__search .str-chat__search-bar .str-chat__search-input--wrapper .str-chat__search-input--icon {
  height: 20px;
  width: 20px;
  margin-right: 0.5rem;
}

.str-chat__search .str-chat__search-bar .str-chat__search-input--wrapper .str-chat__search-input--clear-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.str-chat__search .str-chat__search-bar .str-chat__search-input--wrapper .str-chat__search-input--clear-button:disabled {
  cursor: default;
}

.str-chat__search .str-chat__search-bar .str-chat__search-input--wrapper .str-chat__search-input--clear-button .str-chat__search-input--clear-button-icon {
  height: 20px;
  width: 20px;
  mask-size: 20px;
  -webkit-mask-size: 20px;
}

.str-chat__search .str-chat__search-bar .str-chat__search-input--wrapper input {
  flex: 1;
  min-width: 0;
}

.str-chat__search .str-chat__search-results {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.str-chat__search .str-chat__search-results .str-chat__search-results-header {
  width: 100%;
}

.str-chat__search .str-chat__search-results .str-chat__search-results-header button {
  background: none;
  border: none;
  cursor: pointer;
}

.str-chat__search .str-chat__search-results .str-chat__search-results-header .str-chat__search-results-header__filter-source-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2_5);
  width: 100%;
}

.str-chat__search .str-chat__search-results .str-chat__search-results-header .str-chat__search-results-header__filter-source-buttons .str-chat__search-results-header__filter-source-button {
  padding: 0.5rem 0.75rem;
  border-radius: var(--str-chat__border-radius-circle);
  background-color: var(--str-chat__tertiary-surface-color);
}

.str-chat__search .str-chat__search-results .str-chat__search-results-header .str-chat__search-results-header__filter-source-buttons .str-chat__search-results-header__filter-source-button--active {
  background-color: var(--str-chat__surface-color);
  color: var(--str-chat__text-color);
  font-weight: 500;
}

.str-chat__search .str-chat__search-results .str-chat__search-results-presearch,
.str-chat__search .str-chat__search-results .str-chat__search-source-results-empty {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.25rem;
}

.str-chat__search .str-chat__search-results .str-chat__search-source-results {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.str-chat__search .str-chat__search-results .str-chat__search-source-results .str-chat__search-source-result-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.str-chat__search .str-chat__search-results .str-chat__search-source-results .str-chat__search-source-result-list .str-chat__infinite-scroll-paginator__content {
  display: flex;
  flex-direction: column;
}

.str-chat__search .str-chat__search-results .str-chat__search-source-results .str-chat__search-source-result-list .str-chat__search-result {
  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__search .str-chat__search-results .str-chat__search-source-results .str-chat__search-source-result-list .str-chat__search-result .search__result-text,
.str-chat__search .str-chat__search-results .str-chat__search-source-results .str-chat__search-source-result-list .str-chat__search-result .str-chat__search-result--display-name {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
  overflow-y: hidden;
}

.str-chat__search .str-chat__search-results .str-chat__search-source-results .str-chat__search-source-result-list .str-chat__search-source-result-list__footer {
  height: 4rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.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 .str-chat__main-panel-inner {
  height: auto;
}

.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__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__thread-list-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.str-chat__unseen-threads-banner {
  font-size: 16px;
  font-weight: 400;
  margin: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.str-chat__unseen-threads-banner__button {
  --str-chat-icon-width: 16px;
  --str-chat-icon-heigh: 22px;
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.str-chat__thread-list .str-chat__thread-list-item {
  align-items: stretch;
  box-sizing: border-box;
  padding-block: 14px;
  padding-inline: 8px;
  gap: 6px;
  width: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__channel {
  --str-chat-icon-height: 14px;
  --str-chat-icon-width: 14px;
  display: flex;
  gap: 5px;
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__channel .str-chat__icon {
  margin-top: 2px;
  flex-shrink: 0;
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__thread-status-symbol {
  font-size: 14px;
  line-height: 1;
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__channel-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__parent-message {
  display: flex;
  gap: 3px;
  justify-content: space-between;
  align-items: center;
  height: 15px;
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__parent-message-text {
  font-size: 12px;
  font-weight: 400;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__latest-reply {
  --str-chat__avatar-size: 49px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__latest-reply-details {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 4px;
  width: 0;
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__latest-reply-created-by {
  font-weight: 500;
  font-size: 16px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__latest-reply-text-and-timestamp {
  display: flex;
  font-size: 14px;
  font-weight: 400;
  justify-content: space-between;
  align-items: baseline;
  line-height: 16px;
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__latest-reply-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__latest-reply-timestamp {
  white-space: nowrap;
}

.str-chat__thread-list .str-chat__thread-list-loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 14px;
  padding-inline: 8px;
}

.str-chat__thread-list-empty-placeholder {
  --str-chat-icon-height: 95px;
  --str-chat-icon-width: 95px;
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16px;
}

.str-chat__chat-view {
  display: flex;
  width: 100%;
  height: 100%;
}

.str-chat__chat-view__selector {
  display: flex;
  flex-direction: column;
  padding-inline: 8px;
  padding-block: 16px;
  gap: 20px;
}

.str-chat__chat-view__selector-button {
  --str-chat-icon-height: 20px;
  --str-chat-icon-width: 20px;
  --str-chat-unread-count-badge-absolute-offset-vertical: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 10px;
  padding-block: 10px;
  border-radius: 8px;
  gap: 4px;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
}

.str-chat__chat-view__channels {
  display: flex;
  flex-grow: 1;
}

.str-chat__chat-view__threads {
  display: flex;
  flex-grow: 1;
}

.str-chat {
  --str-chat-unread-count-badge-absolute-offset-vertical: 50%;
  --str-chat-unread-count-badge-absolute-offset-horizontal: 50%;
}

.str-chat__unread-count-badge-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.str-chat__unread-count-badge {
  font-size: 12px;
  min-width: 22px;
  min-height: 22px;
  line-height: 8px;
  font-weight: 700;
  padding: 7px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.str-chat__unread-count-badge--top-right {
  position: absolute;
  translate: var(--str-chat-unread-count-badge-absolute-offset-horizontal) calc(var(--str-chat-unread-count-badge-absolute-offset-vertical) * -1);
}

.str-chat__unread-count-badge--bottom-left {
  position: absolute;
  translate: calc(var(--str-chat-unread-count-badge-absolute-offset-horizontal) * -1) var(--str-chat-unread-count-badge-absolute-offset-vertical);
}

.str-chat__unread-count-badge--bottom-right {
  position: absolute;
  translate: var(--str-chat-unread-count-badge-absolute-offset-horizontal) var(--str-chat-unread-count-badge-absolute-offset-vertical);
}

.str-chat__unread-count-badge--top-left {
  position: absolute;
  translate: calc(var(--str-chat-unread-count-badge-absolute-offset-horizontal) * -1) calc(var(--str-chat-unread-count-badge-absolute-offset-vertical) * -1);
}

.str-chat__ai-state-indicator-container {
  padding: 0 8px;
}

.str-chat {
  --str-chat__blue950: #001333;
  --str-chat__blue900: #00163d;
  --str-chat__blue800: #002666;
  --str-chat__blue700: #003999;
  --str-chat__blue600: #004ccc;
  --str-chat__blue500: #005fff;
  --str-chat__blue400: #337eff;
  --str-chat__blue300: #669fff;
  --str-chat__blue200: #ccdfff;
  --str-chat__blue100: #e0f0ff;
  --str-chat__blue50: #ebf5ff;
  --str-chat__grey950: #080707;
  --str-chat__grey900: #17191c;
  --str-chat__grey800: #1c1e22;
  --str-chat__grey700: #272a30;
  --str-chat__grey600: #4c525c;
  --str-chat__grey500: #72767e;
  --str-chat__grey400: #b4b7bb;
  --str-chat__grey300: #dbdde1;
  --str-chat__grey200: #e9eaed;
  --str-chat__grey100: #f4f4f5;
  --str-chat__grey50: #ffffff;
  --str-chat__red900: #330003;
  --str-chat__red800: #660006;
  --str-chat__red700: #990008;
  --str-chat__red600: #cc000b;
  --str-chat__red500: #ff000e;
  --str-chat__red400: #ff3742;
  --str-chat__red300: #ff666e;
  --str-chat__red200: #ff999f;
  --str-chat__red100: #ffe5e7;
  --str-chat__green900: #062d16;
  --str-chat__green800: #0d592c;
  --str-chat__green700: #138643;
  --str-chat__green600: #19b359;
  --str-chat__green500: #20e070;
  --str-chat__green400: #4ce68c;
  --str-chat__green300: #79eca9;
  --str-chat__green200: #a6f2c6;
  --str-chat__green100: #e9f1ff;
  --str-chat__yellow900: #332500;
  --str-chat__yellow800: #664900;
  --str-chat__yellow700: #996e00;
  --str-chat__yellow600: #cc9200;
  --str-chat__yellow500: #ffb700;
  --str-chat__yellow400: #ffd466;
  --str-chat__yellow300: #ffe299;
  --str-chat__yellow200: #fff1cc;
  --str-chat__yellow100: #fff8e5;
  /* Border radius used for slightly rounded elements */
  --str-chat__border-radius-xs: 8px;
  /* Border radius used for slightly rounded elements */
  --str-chat__border-radius-sm: 14px;
  /* Border radius used for rounded elements */
  --str-chat__border-radius-md: 18px;
  /* Border radius used for rounded elements */
  --str-chat__border-radius-lg: 20px;
  /* Border radius used for circular elements */
  --str-chat__border-radius-circle: 999px;
  /* The font used in the chat, by default, we use [preinstalled OS fonts](https://systemfontstack.com/) */
  --str-chat__font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, Helvetica Neue, sans-serif;
  /* The font used for caption texts */
  --str-chat__caption-text: 0.75rem/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.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--no-letters {
  --str-chat-icon-color: var(--str-chat__avatar-color);
  background: var(--str-chat__avatar-background-color);
  color: var(--str-chat__avatar-color);
  box-shadow: var(--str-chat__avatar-box-shadow);
  border-radius: var(--str-chat__avatar-border-radius);
  border-block-start: var(--str-chat__avatar-border-block-start);
  border-block-end: var(--str-chat__avatar-border-block-end);
  border-inline-start: var(--str-chat__avatar-border-inline-start);
  border-inline-end: var(--str-chat__avatar-border-inline-end);
}

.str-chat__avatar .str-chat__avatar-fallback {
  background: var(--str-chat__avatar-background-color);
  color: var(--str-chat__avatar-color);
  box-shadow: var(--str-chat__avatar-box-shadow);
  border-radius: var(--str-chat__avatar-border-radius);
  border-block-start: var(--str-chat__avatar-border-block-start);
  border-block-end: var(--str-chat__avatar-border-block-end);
  border-inline-start: var(--str-chat__avatar-border-inline-start);
  border-inline-end: var(--str-chat__avatar-border-inline-end);
  text-transform: uppercase;
}

.str-chat__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__avatar-group {
  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__attachment-list-angular-host .str-chat__message-attachment-card--video-play {
  --str-chat-icon-color: var(--str-chat__text-color);
  background-color: var(--str-chat__secondary-background-color);
  border-radius: var(--str-chat__border-radius-circle);
}

.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 {
  --str-chat-icon-color: var(--str-chat__text-low-emphasis-color);
  color: var(--str-chat__text-low-emphasis-color);
}

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

.str-chat__audio_recorder .str-chat__message-attachment-audio-widget--play-button {
  --str-chat-icon-color: var(--str-chat__text-low-emphasis-color);
  box-shadow: none;
  border: none;
}

.str-chat__audio_recorder .str-chat__audio_recorder__pause-recording-button,
.str-chat__audio_recorder .str-chat__audio_recorder__resume-recording-button {
  --str-chat-icon-color: var(--str-chat__danger-color);
  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 {
  --str-chat-icon-color: var(--str-chat__on-primary-color);
  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-container .str-chat__channel-preview__action-buttons .str-chat__channel-preview__action-button {
  --str-chat-icon-color: var(--str-chat__text-low-emphasis-color);
  border: none;
  background-color: transparent;
}

.str-chat__channel-preview-container .str-chat__channel-preview__action-buttons .str-chat__channel-preview__action-button--pin.str-chat__channel-preview__action-button--active {
  --str-chat-icon-color: var(--str-chat__unread-badge-color);
}

.str-chat__channel-preview-container .str-chat__channel-preview__action-buttons .str-chat__channel-preview__action-button--archive.str-chat__channel-preview__action-button--active {
  --str-chat-icon-color: var(--str-chat__text-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__dialog-menu-border-radius: var(--str-chat__border-radius-sm);
  /* The text/icon color of the component */
  --str-chat__dialog-menu-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__dialog-menu-background-color: var(--str-chat__secondary-background-color);
  /* Top border of the component */
  --str-chat__dialog-menu-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__dialog-menu-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__dialog-menu-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__dialog-menu-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__dialog-menu-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__dialog-menu-button-border-radius: 0;
  /* The text/icon color of an item in the message actions box */
  --str-chat__dialog-menu-button-color: var(--str-chat__text-color);
  /* The background color of an item in the message actions box */
  --str-chat__dialog-menu-button-background-color: transparent;
  /* The background color of an item in the message actions box when hovered */
  --str-chat__dialog-menu-button-hover-background-color: var(--str-chat__secondary-surface-color);
  /* Top border of an item in the message actions box */
  --str-chat__dialog-menu-button-border-block-start: none;
  /* Bottom border of an item in the message actions box */
  --str-chat__dialog-menu-button-border-block-end: none;
  /* Left (right in RTL layout) border of an item in the message actions box */
  --str-chat__dialog-menu-button-border-inline-start: none;
  /* Right (left in RTL layout) border of an item in the message actions box */
  --str-chat__dialog-menu-button-border-inline-end: none;
  /* Box shadow applied to an item in the message actions box */
  --str-chat__dialog-menu-button-box-shadow: none;
}

.str-chat__dialog .str-chat__dialog__title {
  font: var(--str-chat__subtitle-medium-text);
}

.str-chat__dialog .str-chat__dialog__prompt {
  font: var(--str-chat__subtitle-text);
}

.str-chat__dialog .str-chat__dialog__controls .str-chat__dialog__controls-button {
  cursor: pointer;
  font: var(--str-chat__body-medium-text);
  color: var(--str-chat__primary-color);
}

.str-chat__dialog .str-chat__dialog__controls .str-chat__dialog__controls-button--submit {
  text-transform: uppercase;
}

.str-chat__dialog .str-chat__dialog__controls .str-chat__dialog__controls-button--submit:disabled {
  color: var(--str-chat__disabled-color);
}

.str-chat__prompt-dialog input[type=text] {
  font: var(--str-chat__subtitle-text);
  border-radius: 20px;
  border: 1px solid var(--str-chat__primary-color);
}

.str-chat__dialog-menu {
  background: var(--str-chat__dialog-menu-background-color);
  color: var(--str-chat__dialog-menu-color);
  box-shadow: var(--str-chat__dialog-menu-box-shadow);
  border-radius: var(--str-chat__dialog-menu-border-radius);
  border-block-start: var(--str-chat__dialog-menu-border-block-start);
  border-block-end: var(--str-chat__dialog-menu-border-block-end);
  border-inline-start: var(--str-chat__dialog-menu-border-inline-start);
  border-inline-end: var(--str-chat__dialog-menu-border-inline-end);
}

.str-chat__dialog-menu .str-chat__dialog-menu__button {
  background: var(--str-chat__dialog-menu-button-background-color);
  color: var(--str-chat__dialog-menu-button-color);
  box-shadow: var(--str-chat__dialog-menu-button-box-shadow);
  border-radius: var(--str-chat__dialog-menu-button-border-radius);
  border-block-start: var(--str-chat__dialog-menu-button-border-block-start);
  border-block-end: var(--str-chat__dialog-menu-button-border-block-end);
  border-inline-start: var(--str-chat__dialog-menu-button-border-inline-start);
  border-inline-end: var(--str-chat__dialog-menu-button-border-inline-end);
  cursor: pointer;
  font: var(--str-chat__subtitle-text);
}

.str-chat__dialog-menu .str-chat__dialog-menu__button:hover, .str-chat__dialog-menu .str-chat__dialog-menu__button:focus {
  background-color: var(--str-chat__dialog-menu-button-hover-background-color);
}

.str-chat {
  /* Top border of the component */
  --str-chat__drag-and-drop-container-border-block-start: 2px solid transparent;
  /* Bottom border of the component */
  --str-chat__drag-and-drop-container-border-block-end: 2px solid transparent;
  /* Top border of the component on dragover */
  --str-chat__drag-and-drop-container-on-dragover-border-block-start: 2px solid var(--str-chat__primary-color);
  /* Bottom border of the component on dragover */
  --str-chat__drag-and-drop-container-on-dragover-border-block-end: 2px solid var(--str-chat__primary-color);
  /* Left (right in RTL layout) border of the component on dragover */
  --str-chat__drag-and-drop-container-on-dragover-border-inline-start: none;
  /* Right (left in RTL layout) border of the component on dragover */
  --str-chat__drag-and-drop-container-on-dragover-border-inline-end: none;
}

.str-chat__drag-and-drop-container--dragging {
  cursor: grabbing;
}

.str-chat__drag-and-drop-container__item[draggable=true] {
  cursor: grab;
}

.str-chat__drag-and-drop-container__item[draggable=true]:active {
  background: transparent;
}

.str-chat__drag-and-drop-container__item {
  border-bottom: var(--str-chat__drag-and-drop-container-border-block-start);
  border-top: var(--str-chat__drag-and-drop-container-border-block-start);
}

.str-chat__drag-and-drop-container__item.str-chat__drag-and-drop-container__item--dragged-over-from-top {
  border-bottom: var(--str-chat__drag-and-drop-container-on-dragover-border-block-end);
}

.str-chat__drag-and-drop-container__item.str-chat__drag-and-drop-container__item--dragged-over-from-bottom {
  border-top: var(--str-chat__drag-and-drop-container-on-dragover-border-block-start);
}

.str-chat {
  /* The border radius used for the borders of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
  --str-chat__edit-message-modal-button-border-radius: none;
  /* The text color used for the send button. Note for Angular SDK users: this variable isn't available starting from version 5 */
  --str-chat__edit-message-modal-send-button-color: var(--str-chat__primary-color);
  /* The text color used for the cancel button. Note for Angular SDK users: this variable isn't available starting from version 5 */
  --str-chat__edit-message-modal-cancel-button-color: var(--str-chat__text-low-emphasis-color);
  /* The background color of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
  --str-chat__edit-message-modal-button-background-color: transparent;
  /* Top border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
  --str-chat__edit-message-modal-button-border-block-start: none;
  /* Bottom border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
  --str-chat__edit-message-modal-button-border-block-end: none;
  /* Left (right in RTL layout) border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
  --str-chat__edit-message-modal-button-border-inline-start: none;
  /* Right (left in RTL layout) border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
  --str-chat__edit-message-modal-button-border-inline-end: none;
  /* Box shadow applied to the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
  --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);
}

.str-chat__form-field-error {
  font-size: 0.75rem;
  color: var(--str-chat__danger-color);
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* 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 deleted message */
  --str-chat__blocked-message-border-radius: var(--str-chat__border-radius-md);
  /* The text/icon of a deleted message */
  --str-chat__blocked-message-color: var(--str-chat__text-low-emphasis-color);
  /* The background of a deleted message */
  --str-chat__blocked-message-background-color: var(--str-chat__secondary-surface-color);
  /* Top border of a deleted message */
  --str-chat__blocked-message-border-block-start: none;
  /* Bottom border of a deleted message */
  --str-chat__blocked-message-border-block-end: none;
  /* Left (right in RTL layout) border of a deleted message */
  --str-chat__blocked-message-border-inline-start: none;
  /* Right (left in RTL layout) border of a deleted message */
  --str-chat__blocked-message-border-inline-end: none;
  /* Box shadow applied to a deleted message */
  --str-chat__blocked-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-mention {
  color: var(--str-chat__message-mention-color);
  font: var(--str-chat__body2-medium-text);
}

.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-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--blocked-inner {
  background: var(--str-chat__blocked-message-background-color);
  color: var(--str-chat__blocked-message-color);
  box-shadow: var(--str-chat__blocked-message-box-shadow);
  border-radius: var(--str-chat__blocked-message-border-radius);
  border-block-start: var(--str-chat__blocked-message-border-block-start);
  border-block-end: var(--str-chat__blocked-message-border-block-end);
  border-inline-start: var(--str-chat__blocked-message-border-inline-start);
  border-inline-end: var(--str-chat__blocked-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);
}

@media (hover: none) {
  .str-chat__message-actions-box .str-chat__message-actions-list-item-button:hover {
    background-color: transparent;
  }
}
.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;
  /* Color applied to an icon in a button that opens attachment selector */
  --str-chat__attachment-selector-button-icon-color: var(--str-chat__text-low-emphasis-color);
  /* Color applied to an icon in a button that opens attachment selector when hovered over */
  --str-chat__attachment-selector-button-icon-color-hover: var(--str-chat__primary-color);
  /* Color applied to an attachment selector menu item icon when hovered over */
  --str-chat__attachment-selector-actions-menu-button-icon-color: var(--str-chat__primary-color);
  /* Color applied to an attachment selector menu item icon when hovered over or focused */
  --str-chat__attachment-selector-actions-menu-button-icon-color-active: var(--str-chat__primary-color);
}

.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);
  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__stop-ai-generation-button {
  background-image: var(--str-chat__circle-stop-icon);
  background-color: transparent;
  border-width: 0;
}

.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 {
  --str-chat-icon-color: var(--str-chat__start-recording-audio-button-color);
  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__attachment-selector .str-chat__attachment-selector__menu-button .str-chat__attachment-selector__menu-button__icon {
  background-color: var(--str-chat__attachment-selector-button-icon-color);
  mask: var(--str-chat__add-attachment-icon) no-repeat center/contain;
}

.str-chat__attachment-selector .str-chat__attachment-selector__menu-button:hover .str-chat__attachment-selector__menu-button__icon {
  background-color: var(--str-chat__attachment-selector-button-icon-color-hover);
}

.str-chat__attachment-selector-actions-menu .str-chat__attachment-selector-actions-menu__button {
  color: var(--str-chat__text-low-emphasis-color);
}

.str-chat__attachment-selector-actions-menu .str-chat__attachment-selector-actions-menu__button .str-chat__dialog-menu__button-icon {
  background-color: var(--str-chat__attachment-selector-actions-menu-button-icon-color);
}

.str-chat__attachment-selector-actions-menu .str-chat__attachment-selector-actions-menu__button:hover, .str-chat__attachment-selector-actions-menu .str-chat__attachment-selector-actions-menu__button:focus {
  color: var(--str-chat__text-color);
}

.str-chat__attachment-selector-actions-menu .str-chat__attachment-selector-actions-menu__button:hover .str-chat__dialog-menu__button-icon, .str-chat__attachment-selector-actions-menu .str-chat__attachment-selector-actions-menu__button:focus .str-chat__dialog-menu__button-icon {
  background-color: var(--str-chat__attachment-selector-actions-menu-button-icon-color-active);
}

.str-chat__attachment-selector-actions-menu .str-chat__attachment-selector-actions-menu__upload-file-button .str-chat__dialog-menu__button-icon {
  mask: var(--str-chat__folder-icon) no-repeat center/contain;
}

.str-chat__attachment-selector-actions-menu .str-chat__attachment-selector-actions-menu__create-poll-button .str-chat__dialog-menu__button-icon {
  mask: var(--str-chat__poll-icon) no-repeat center/contain;
}

.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 .str-chat-angular-v5__reaction-selector {
  --str-chat__message-reactions-options-box-shadow: none;
  --str-chat__message-reactions-options-border-radius: 0;
}

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

@media (hover: none) {
  .str-chat__reaction-selector .str-chat__message-reactions-options .str-chat__message-reactions-option:hover {
    background-color: transparent;
  }
}
.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);
  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-header .str-chat__modal-header__title {
  font: var(--str-chat__subtitle2-medium-text);
}

.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__poll .str-chat__poll-header .str-chat__poll-subtitle {
  color: var(--str-chat__text-low-emphasis-color);
}

.str-chat__poll .str-chat__checkmark {
  border-radius: var(--str-chat__border-radius-circle);
  border: 1px solid var(--str-chat__disabled-color);
}

.str-chat__poll .str-chat__checkmark--checked {
  background-color: var(--str-chat__primary-color);
  border: none;
}

.str-chat__poll .str-chat__poll-option-list .str-chat__poll-option.str-chat__poll-option--votable:hover {
  cursor: pointer;
}

.str-chat__poll .str-chat__poll-option-list .str-chat__poll-option .str-chat__poll-option__votes-bar {
  background: linear-gradient(to right, var(--str-chat__primary-color) var(--str-chat__amount-bar-fulfillment), var(--str-chat__surface-color) var(--str-chat__amount-bar-fulfillment));
  border-radius: calc(var(--str-chat__spacing-px) * 4);
}

.str-chat__poll .str-chat__poll-option-list .str-chat__poll-option .str-chat__poll-option__votes-bar--winner {
  background: linear-gradient(to right, var(--str-chat__info-color) var(--str-chat__amount-bar-fulfillment), var(--str-chat__surface-color) var(--str-chat__amount-bar-fulfillment));
}

.str-chat__poll .str-chat__poll-option-list--full,
.str-chat__poll .str-chat__poll-answer,
.str-chat__poll .str-chat__modal__poll-option-list__title,
.str-chat__poll .str-chat__modal__poll-results .str-chat__modal__poll-results__title,
.str-chat__poll .str-chat__modal__poll-results .str-chat__poll-option {
  border-radius: 0.75rem;
}

.str-chat__poll-option-list--full {
  overflow: clip;
}

.str-chat__poll--closed .str-chat__poll-option:hover {
  cursor: unset;
}

.str-chat__poll-actions .str-chat__modal .str-chat__poll-answer__text,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__poll-option-list__title,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__poll-results__title {
  font: var(--str-chat__subtitle-medium-text);
}

.str-chat__poll-actions .str-chat__modal .str-chat__poll-option-list--full,
.str-chat__poll-actions .str-chat__modal .str-chat__poll-answer,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__poll-option-list__title,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__poll-results__title,
.str-chat__poll-actions .str-chat__modal .str-chat__poll-option {
  background-color: var(--str-chat__tertiary-surface-color);
}

.str-chat__poll-actions .str-chat__modal .str-chat__poll-option-list--full .str-chat__poll-option-text {
  font-weight: 500;
}

.str-chat__poll-actions .str-chat__modal .str-chat__poll-option-list--full .str-chat__poll-option--votable:hover {
  background-color: var(--str-chat__secondary-surface-color);
}

.str-chat__poll-actions .str-chat__modal .str-chat__poll-option .str-chat__poll-option__header {
  font: var(--str-chat__subtitle-text);
}

.str-chat__poll-actions .str-chat__modal .str-chat__poll-option .str-chat__poll-option__header .str-chat__poll-option__option-text {
  font: var(--str-chat__subtitle-medium-text);
}

.str-chat__poll-actions .str-chat__modal .str-chat__poll-option .str-chat__poll-option__show-all-votes-button {
  font: var(--str-chat__subtitle-text);
  color: var(--str-chat__primary-color);
}

.str-chat__poll-vote .str-chat__poll-vote__author__name {
  text-transform: capitalize;
}

.str-chat__poll-vote .str-chat__poll-vote__timestamp {
  color: var(--str-chat__text-low-emphasis-color);
}

.str-chat__quoted-poll-preview {
  font: var(--str-chat__body-medium-text);
}

.str-chat__poll-creation-dialog .str-chat__form__input-fieldset {
  border: none;
}

.str-chat__poll-creation-dialog .str-chat__form__expandable-field,
.str-chat__poll-creation-dialog .str-chat__form__input-field:not(.str-chat__form__input-field--with-label),
.str-chat__poll-creation-dialog .str-chat__form__input-field--with-label .str-chat__form__input-field__value {
  background-color: var(--str-chat__tertiary-surface-color);
  border-radius: 0.75rem;
}

.str-chat__poll-creation-dialog .str-chat__form__expandable-field input,
.str-chat__poll-creation-dialog .str-chat__form__input-field:not(.str-chat__form__input-field--with-label) input,
.str-chat__poll-creation-dialog .str-chat__form__input-field--with-label .str-chat__form__input-field__value input {
  border: none;
  background: transparent;
  outline: none;
}

.str-chat__poll-creation-dialog .str-chat__form__expandable-field input, .str-chat__poll-creation-dialog .str-chat__form__expandable-field input::placeholder,
.str-chat__poll-creation-dialog .str-chat__form__input-field:not(.str-chat__form__input-field--with-label) input,
.str-chat__poll-creation-dialog .str-chat__form__input-field:not(.str-chat__form__input-field--with-label) input::placeholder,
.str-chat__poll-creation-dialog .str-chat__form__input-field--with-label .str-chat__form__input-field__value input,
.str-chat__poll-creation-dialog .str-chat__form__input-field--with-label .str-chat__form__input-field__value input::placeholder {
  font: var(--str-chat__subtitle-text);
}

.str-chat__poll-creation-dialog .str-chat__form__input-field--draggable input {
  pointer-events: auto;
}

.str-chat__poll-creation-dialog .str-chat__form__input-field--draggable .str-chat__drag-handle {
  background-color: var(--str-chat__text-low-emphasis-color);
  mask: var(--str-chat__handle-icon) no-repeat center/contain;
}

.str-chat__poll-creation-dialog .str-chat__form__input-field--has-error {
  border: 1px solid var(--str-chat__message-error-message-color);
}

.str-chat__poll-creation-dialog .str-chat__form__expandable-field .str-chat__form__input-field--has-error {
  border: none;
}

.str-chat__poll-creation-dialog .str-chat__form__expandable-field .str-chat__form__input-field--has-error .str-chat__form__input-field__value {
  border: none;
}

.str-chat__poll-creation-dialog .str-chat__form__input-field--with-label.str-chat__form__input-field--has-error {
  border: none;
}

.str-chat__poll-creation-dialog .str-chat__form__input-field--with-label.str-chat__form__input-field--has-error .str-chat__form__input-field__value {
  border: 1px solid var(--str-chat__message-error-message-color);
}

.str-chat__poll-creation-dialog .str-chat__form__switch-field {
  background-color: var(--str-chat__tertiary-surface-color);
  border-radius: 0.75rem;
}

.str-chat__poll-creation-dialog .str-chat__form__switch-field, .str-chat__poll-creation-dialog .str-chat__form__switch-field label {
  cursor: pointer;
}

.str-chat__poll-creation-dialog .str-chat__form__switch-field .str-chat__form__switch-field__switch {
  cursor: pointer;
  background-color: var(--str-chat__text-low-emphasis-color);
  border-radius: 100px;
}

.str-chat__poll-creation-dialog .str-chat__form__switch-field .str-chat__form__switch-field__switch .str-chat__form__switch-field__switch-handle {
  border-radius: var(--str-chat__border-radius-circle);
  background-color: var(--str-chat__disabled-color);
}

.str-chat__poll-creation-dialog .str-chat__form__switch-field .str-chat__form__switch-field__switch.str-chat__form__switch-field__switch--on {
  background-color: var(--str-chat__green600);
}

.str-chat__poll-creation-dialog .str-chat__form__switch-field .str-chat__form__switch-field__switch.str-chat__form__switch-field__switch--on .str-chat__form__switch-field__switch-handle {
  background-color: var(--str-chat__background-color);
  border-radius: var(--str-chat__border-radius-circle);
}

/* Only available in React SDK. */
.str-chat {
  /* The text/icon color of the component */
  --str-chat__search-input-color: var(--str-chat__text-color);
  /* The text/icon color of the component */
  --str-chat__search-input-placeholder-color: var(--str-chat__text-low-emphasis-color);
  /* The text/icon color of the component */
  --str-chat__search-input-icon-color: var(--str-chat__text-low-emphasis-color);
  /* Top border of the component */
  --str-chat__search-input-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__search-input-border-block-end: none;
  /* Left (right in RTL layout) borhe component */
  --str-chat__search-input-border-inline-start: none;
  /* Right (left in RTL layout) borhe component */
  --str-chat__search-input-border-inline-end: none;
  /* The border radius used for the borders of the component */
  --str-chat__search-input-wrapper-border-radius: var(--str-chat__border-radius-circle);
  /* The background color of the component */
  --str-chat__search-input-wrapper-background-color: transparent;
  /* Top border of the component */
  --str-chat__search-input-wrapper-border-block-start: var(--str-chat__surface-color) 1px
  solid;
  /* Bottom border of the component */
  --str-chat__search-input-wrapper-border-block-end: var(--str-chat__surface-color) 1px
  solid;
  /* Left (right in RTL layout) border of the component */
  --str-chat__search-input-wrapper-border-inline-start: var(--str-chat__surface-color) 1px
  solid;
  /* Right (left in RTL layout) border of the component */
  --str-chat__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__search-input-wrapper-active-border-radius: var(--str-chat__border-radius-circle);
  /* The background color of the component */
  --str-chat__search-input-wrapper-active-background-color: transparent;
  /* Top border of the component */
  --str-chat__search-input-wrapper-active-border-block-start: var(--str-chat__primary-color)
  1px solid;
  /* Bottom border of the component */
  --str-chat__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__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__search-input-wrapper-active-border-inline-end: var(--str-chat__primary-color)
  1px solid;
  /* The background applied to channel search result */
  --str-chat__search-result-background-color: transparent;
  /* Top border of the component */
  --str-chat__search-result-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__search-result-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__search-result-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__search-result-border-inline-end: none;
  /* Background color used for the search result hover / focused state */
  --str-chat__search-result-hover-background-color: var(
                  --str-chat__secondary-surface-color
  );
  --str-chat__search-result-list-color: var(--str-chat__text-color);
  --str-chat__search-result-list-background-color: var(--str-chat__secondary-background-color);
  /* Top border of the component  */
  --str-chat__search-result-list-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__search-result-list-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__search-result-list-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__search-result-list-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__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__search-results-header-color: var(--str-chat__text-low-emphasis-color);
  /* The background color used in the search results header  */
  --str-chat__search-results-header-background-color: var(--str-chat__background-color);
  /* Top border of the component  */
  --str-chat__search-results-header-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__search-results-header-border-block-end: var(--str-chat__surface-color) 1px
  solid;
  /* Left (right in RTL layout) border of the component */
  --str-chat__search-results-header-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__search-results-header-border-inline-end: none;
  /* The font color used in the empty search results indicator  */
  --str-chat__search-results-empty-color: var(--str-chat__text-low-emphasis-color);
  /* The icon color used in the empty search results indicator  */
  --str-chat__search-results-empty-icon-color: var(--str-chat__disabled-color);
  /* The background color used in the empty search results indicator  */
  --str-chat__search-results-empty-background-color: var(--str-chat__background-color);
  /* Top border of the component  */
  --str-chat__search-results-empty-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__search-results-empty-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__search-results-empty-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__search-results-empty-border-inline-end: none;
}

.str-chat__search-input--wrapper {
  background: var(--str-chat__search-input-wrapper-background-color);
  color: var(--str-chat__search-input-wrapper-color);
  box-shadow: var(--str-chat__search-input-wrapper-box-shadow);
  border-radius: var(--str-chat__search-input-wrapper-border-radius);
  border-block-start: var(--str-chat__search-input-wrapper-border-block-start);
  border-block-end: var(--str-chat__search-input-wrapper-border-block-end);
  border-inline-start: var(--str-chat__search-input-wrapper-border-inline-start);
  border-inline-end: var(--str-chat__search-input-wrapper-border-inline-end);
}

.str-chat__search-input--wrapper .str-chat__search-input--icon {
  background-image: var(--str-chat__magnifier-glass-icon);
  background-repeat: no-repeat;
}

.str-chat__search-input--wrapper input {
  background: var(--str-chat__search-input-background-color);
  color: var(--str-chat__search-input-color);
  box-shadow: var(--str-chat__search-input-box-shadow);
  border-radius: var(--str-chat__search-input-border-radius);
  border-block-start: var(--str-chat__search-input-border-block-start);
  border-block-end: var(--str-chat__search-input-border-block-end);
  border-inline-start: var(--str-chat__search-input-border-inline-start);
  border-inline-end: var(--str-chat__search-input-border-inline-end);
  outline: none;
  font: var(--str-chat__subtitle-text);
}

.str-chat__search-input--wrapper .str-chat__search-input--clear-button-icon {
  background-color: transparent;
  mask: var(--str-chat__clear-icon) no-repeat center/contain;
}

.str-chat__search-input--wrapper-active {
  background: var(--str-chat__search-input-wrapper-active-background-color);
  color: var(--str-chat__search-input-wrapper-active-color);
  box-shadow: var(--str-chat__search-input-wrapper-active-box-shadow);
  border-radius: var(--str-chat__search-input-wrapper-active-border-radius);
  border-block-start: var(--str-chat__search-input-wrapper-active-border-block-start);
  border-block-end: var(--str-chat__search-input-wrapper-active-border-block-end);
  border-inline-start: var(--str-chat__search-input-wrapper-active-border-inline-start);
  border-inline-end: var(--str-chat__search-input-wrapper-active-border-inline-end);
}

.str-chat__search-input--wrapper-active .str-chat__search-input--clear-button-icon {
  background-color: var(--str-chat__text-low-emphasis-color);
}

.str-chat__search-bar-button--exit-search {
  background: none;
  border: none;
  color: var(--str-chat__primary-color);
  font: var(--str-chat__subtitle-text);
}

.str-chat__search-results-header {
  background: var(--str-chat__search-results-header-background-color);
  color: var(--str-chat__search-results-header-color);
  box-shadow: var(--str-chat__search-results-header-box-shadow);
  border-radius: var(--str-chat__search-results-header-border-radius);
  border-block-start: var(--str-chat__search-results-header-border-block-start);
  border-block-end: var(--str-chat__search-results-header-border-block-end);
  border-inline-start: var(--str-chat__search-results-header-border-inline-start);
  border-inline-end: var(--str-chat__search-results-header-border-inline-end);
  font: var(--str-chat__subtitle-text);
}

.str-chat__search-source-result-list {
  background: var(--str-chat__search-result-list-background-color);
  color: var(--str-chat__search-result-list-color);
  box-shadow: var(--str-chat__search-result-list-box-shadow);
  border-radius: var(--str-chat__search-result-list-border-radius);
  border-block-start: var(--str-chat__search-result-list-border-block-start);
  border-block-end: var(--str-chat__search-result-list-border-block-end);
  border-inline-start: var(--str-chat__search-result-list-border-inline-start);
  border-inline-end: var(--str-chat__search-result-list-border-inline-end);
}

.str-chat__search-source-result-list .str-chat__search-container-empty {
  background: var(--str-chat__search-results-empty-background-color);
  color: var(--str-chat__search-results-empty-color);
  box-shadow: var(--str-chat__search-results-empty-box-shadow);
  border-radius: var(--str-chat__search-results-empty-border-radius);
  border-block-start: var(--str-chat__search-results-empty-border-block-start);
  border-block-end: var(--str-chat__search-results-empty-border-block-end);
  border-inline-start: var(--str-chat__search-results-empty-border-inline-start);
  border-inline-end: var(--str-chat__search-results-empty-border-inline-end);
  font: var(--str-chat__subtitle2-medium-text);
}

.str-chat__search-source-result-list .str-chat__search-container-empty svg path {
  fill: var(--str-chat__search-results-empty-icon-color);
}

.str-chat__search-source-result-list .str-chat__search-result {
  background: var(--str-chat__search-result-background-color);
  color: var(--str-chat__search-result-color);
  box-shadow: var(--str-chat__search-result-box-shadow);
  border-radius: var(--str-chat__search-result-border-radius);
  border-block-start: var(--str-chat__search-result-border-block-start);
  border-block-end: var(--str-chat__search-result-border-block-end);
  border-inline-start: var(--str-chat__search-result-border-inline-start);
  border-inline-end: var(--str-chat__search-result-border-inline-end);
}

.str-chat__search-source-result-list .str-chat__search-result.str-chat__channel-preview-messenger--active {
  background-color: var(--str-chat__channel-preview-active-background-color);
}

.str-chat__search-source-result-list .str-chat__search-result .str-chat__search-result--display-name {
  font: var(--str-chat__subtitle-medium-text);
}

.str-chat__search-source-result-list .str-chat__search-result:hover,
.str-chat__search-source-result-list .str-chat__search-result--focused {
  background-color: var(--str-chat__search-result-hover-background-color);
}

.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;
  }
}
/* Only available in React SDK. */
.str-chat {
  --str-chat-thread-list-border-color: var(--str-chat__surface-color);
  --str-chat-thread-list-container-background-color: var(--str-chat__secondary-background-color);
  --str-chat-unseen-threads-banner-background-color: var(--str-chat__text-color);
  --str-chat-unseen-threads-banner-color: var(--str-chat__opaque-surface-text-color);
  --str-chat-thread-list-item-background-color-default: var(--str-chat__secondary-background-color);
  --str-chat-thread-list-item-background-color-selected: var(--str-chat__surface-color);
  --str-chat-thread-list-item-text-color: var(--str-chat__text-color);
  --str-chat-thread-list-item-text-low-emphasis-color: var(--str-chat__text-low-emphasis-color);
  --str-chat-thread-list-empty-placeholder-background-color: var(
    --str-chat__secondary-background-color
  );
  --str-chat-thread-list-empty-placeholder-color: var(--str-chat__text-low-emphasis-color);
}

.str-chat__thread-list-container {
  background-color: var(--str-chat-thread-list-container-background-color);
}

.str-chat__unseen-threads-banner {
  border-radius: 16px;
  background: var(--str-chat-unseen-threads-banner-background-color);
  color: var(--str-chat-unseen-threads-banner-color);
}

.str-chat__unseen-threads-banner__button {
  --str-chat-icon-color: var(--str-chat-unseen-threads-banner-color);
}

.str-chat__thread-list {
  border-right: 1px solid var(--str-chat-thread-list-border-color);
}

.str-chat__thread-list .str-chat__thread-list-item {
  --str-chat-icon-color: var(--str-chat-thread-list-item-text-color);
  border: none;
  background-color: var(--str-chat-thread-list-item-background-color-default);
  color: var(--str-chat-thread-list-item-text-color);
}

.str-chat__thread-list .str-chat__thread-list-item[aria-selected=true] {
  background-color: var(--str-chat-thread-list-item-background-color-selected);
}

.str-chat__thread-list .str-chat__thread-list-item[aria-selected=true] .str-chat__thread-list-item__parent-message-text,
.str-chat__thread-list .str-chat__thread-list-item[aria-selected=true] .str-chat__thread-list-item__latest-reply-text-and-timestamp {
  color: inherit;
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__parent-message-text {
  color: var(--str-chat-thread-list-item-text-low-emphasis-color);
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__latest-reply {
  --str-chat__avatar-background-color: var(--str-chat__secondary-surface-color);
  --str-chat__avatar-color: var(--str-chat__text-low-emphasis-color);
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__latest-reply-text-and-timestamp {
  color: var(--str-chat-thread-list-item-text-low-emphasis-color);
}

.str-chat__thread-list-empty-placeholder {
  --str-chat-icon-color: var(--str-chat-thread-list-empty-placeholder-color);
  background-color: var(--str-chat-thread-list-empty-placeholder-background-color);
  color: var(--str-chat-thread-list-empty-placeholder-color);
}

/* Only available in React SDK. */
.str-chat {
  --str-chat-selector-background-color: var(--str-chat__secondary-background-color);
  --str-chat-selector-border-color: var(--str-chat__surface-color);
  --str-chat-selector-button-color-default: var(--str-chat__text-low-emphasis-color);
  --str-chat-selector-button-color-selected: var(--str-chat__text-color);
  --str-chat-selector-button-background-color-default: transparent;
  --str-chat-selector-button-background-color-selected: var(--str-chat__surface-color);
}

.str-chat__chat-view__selector {
  border-right: 1px solid var(--str-chat-selector-border-color);
  background-color: var(--str-chat-selector-background-color);
}

.str-chat__chat-view__selector-button {
  --str-chat-icon-color: var(--str-chat-selector-button-color-default);
  border: none;
  background: var(--str-chat-selector-button-background-color-default);
  color: var(--str-chat-selector-button-color-default);
}

.str-chat__chat-view__selector-button[aria-selected=true] {
  --str-chat-icon-color: var(--str-chat-selector-button-color-selected);
  color: var(--str-chat-selector-button-color-selected);
  background: var(--str-chat-selector-button-background-color-selected);
}

/* Only available in React SDK. */
.str-chat {
  --str-chat-unread-count-badge-color: var(--str-chat__on-unread-badge-color);
  --str-chat-unread-count-badge-background-color: var(--str-chat__danger-color);
}

.str-chat__unread-count-badge {
  background-color: var(--str-chat-unread-count-badge-background-color);
  color: var(--str-chat-unread-count-badge-color);
  border-radius: 9999px;
}

.str-chat__ai-state-indicator-container {
  background-color: var(--str-chat__grey300);
}

.str-chat__ai-state-indicator-text {
  color: var(--str-chat__text-color);
}

.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;
  max-width: 100vw;
}

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

.stream-chat__paginated-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  max-height: 100%;
  min-height: 0;
  gap: var(--str-chat__spacing-2);
}

.stream-chat__paginated-list .str-chat__loading-indicator {
  margin: auto;
}

.stream-chat__paginated-list .str-chat__load-more-button__button {
  margin-inline: auto;
}

stream-paginated-list {
  height: 100%;
  max-height: 100%;
}

stream-user-list {
  height: 100%;
  max-height: 100%;
}

stream-user-list .str-chat__user-list-item {
  display: flex;
  align-items: center;
  gap: var(--str-chat__spacing-2);
}

: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=");
  --str-chat__winning-poll-option-icon: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNS44MzMzIDQuMTY2NjdIMTQuMTY2N1YyLjVINS44MzMzM1Y0LjE2NjY3SDQuMTY2NjdDMy4yNSA0LjE2NjY3IDIuNSA0LjkxNjY3IDIuNSA1LjgzMzMzVjYuNjY2NjdDMi41IDguNzkxNjcgNC4xIDEwLjUyNSA2LjE1ODMzIDEwLjc4MzNDNi42ODMzMyAxMi4wMzMzIDcuODA4MzMgMTIuOTc1IDkuMTY2NjcgMTMuMjVWMTUuODMzM0g1LjgzMzMzVjE3LjVIMTQuMTY2N1YxNS44MzMzSDEwLjgzMzNWMTMuMjVDMTIuMTkxNyAxMi45NzUgMTMuMzE2NyAxMi4wMzMzIDEzLjg0MTcgMTAuNzgzM0MxNS45IDEwLjUyNSAxNy41IDguNzkxNjcgMTcuNSA2LjY2NjY3VjUuODMzMzNDMTcuNSA0LjkxNjY3IDE2Ljc1IDQuMTY2NjcgMTUuODMzMyA0LjE2NjY3Wk00LjE2NjY3IDYuNjY2NjdWNS44MzMzM0g1LjgzMzMzVjkuMDE2NjdDNC44NjY2NyA4LjY2NjY3IDQuMTY2NjcgNy43NSA0LjE2NjY3IDYuNjY2NjdaTTEwIDExLjY2NjdDOC42MjUgMTEuNjY2NyA3LjUgMTAuNTQxNyA3LjUgOS4xNjY2N1Y0LjE2NjY3SDEyLjVWOS4xNjY2N0MxMi41IDEwLjU0MTcgMTEuMzc1IDExLjY2NjcgMTAgMTEuNjY2N1pNMTUuODMzMyA2LjY2NjY3QzE1LjgzMzMgNy43NSAxNS4xMzMzIDguNjY2NjcgMTQuMTY2NyA5LjAxNjY3VjUuODMzMzNIMTUuODMzM1Y2LjY2NjY3WiIgZmlsbD0iIzVFNjc2RSIvPgo8L3N2Zz4K");
  --str-chat__arrow-left-icon: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0Ljc5MTUgNy4wMDUxSDMuNjIxNDhMOC41MDE0OCAyLjEyNTFDOC44OTE0OCAxLjczNTEgOC44OTE0OCAxLjA5NTEgOC41MDE0OCAwLjcwNTA5OEM4LjExMTQ4IDAuMzE1MDk4IDcuNDgxNDggMC4zMTUwOTggNy4wOTE0OCAwLjcwNTA5OEwwLjUwMTQ4NCA3LjI5NTFDMC4xMTE0ODQgNy42ODUxIDAuMTExNDg0IDguMzE1MSAwLjUwMTQ4NCA4LjcwNTFMNy4wOTE0OCAxNS4yOTUxQzcuNDgxNDggMTUuNjg1MSA4LjExMTQ4IDE1LjY4NTEgOC41MDE0OCAxNS4yOTUxQzguODkxNDggMTQuOTA1MSA4Ljg5MTQ4IDE0LjI3NTEgOC41MDE0OCAxMy44ODUxTDMuNjIxNDggOS4wMDUxSDE0Ljc5MTVDMTUuMzQxNSA5LjAwNTEgMTUuNzkxNSA4LjU1NTEgMTUuNzkxNSA4LjAwNTFDMTUuNzkxNSA3LjQ1NTEgMTUuMzQxNSA3LjAwNTEgMTQuNzkxNSA3LjAwNTFaIiBmaWxsPSIjMDgwNzA3Ii8+Cjwvc3ZnPgo=");
  --str-chat__close-icon: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTQgMTQiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjI5OTcgMC43MDk5NzFDMTIuOTA5NyAwLjMxOTk3MSAxMi4yNzk3IDAuMzE5OTcxIDExLjg4OTcgMC43MDk5NzFMNi45OTk3MyA1LjU4OTk3TDIuMTA5NzMgMC42OTk5NzFDMS43MTk3MyAwLjMwOTk3MSAxLjA4OTczIDAuMzA5OTcxIDAuNjk5NzI3IDAuNjk5OTcxQzAuMzA5NzI3IDEuMDg5OTcgMC4zMDk3MjcgMS43MTk5NyAwLjY5OTcyNyAyLjEwOTk3TDUuNTg5NzMgNi45OTk5N0wwLjY5OTcyNyAxMS44OUMwLjMwOTcyNyAxMi4yOCAwLjMwOTcyNyAxMi45MSAwLjY5OTcyNyAxMy4zQzEuMDg5NzMgMTMuNjkgMS43MTk3MyAxMy42OSAyLjEwOTczIDEzLjNMNi45OTk3MyA4LjQwOTk3TDExLjg4OTcgMTMuM0MxMi4yNzk3IDEzLjY5IDEyLjkwOTcgMTMuNjkgMTMuMjk5NyAxMy4zQzEzLjY4OTcgMTIuOTEgMTMuNjg5NyAxMi4yOCAxMy4yOTk3IDExLjg5TDguNDA5NzMgNi45OTk5N0wxMy4yOTk3IDIuMTA5OTdDMTMuNjc5NyAxLjcyOTk3IDEzLjY3OTcgMS4wODk5NyAxMy4yOTk3IDAuNzA5OTcxWiIgZmlsbD0iIzA4MDcwNyIvPgo8L3N2Zz4K");
  --str-chat__add-attachment-icon: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjggMjgiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNS4zMzMyIDcuMzMzMDdMMTIuNjY2NiA3LjMzMzA3TDEyLjY2NjYgMTIuNjY2NEw3LjMzMzI0IDEyLjY2NjRMNy4zMzMyNCAxNS4zMzMxTDEyLjY2NjYgMTUuMzMzMUwxMi42NjY2IDIwLjY2NjRMMTUuMzMzMiAyMC42NjY0TDE1LjMzMzIgMTUuMzMzMUwyMC42NjY2IDE1LjMzMzFMMjAuNjY2NiAxMi42NjY0TDE1LjMzMzIgMTIuNjY2NEwxNS4zMzMyIDcuMzMzMDdaTTEzLjk5OTkgMC42NjY0MDRDNi42Mzk5MSAwLjY2NjQwNCAwLjY2NjU3NiA2LjYzOTc0IDAuNjY2NTc3IDEzLjk5OTdDMC42NjY1NzYgMjEuMzU5NyA2LjYzOTkxIDI3LjMzMzEgMTMuOTk5OSAyNy4zMzMxQzIxLjM1OTkgMjcuMzMzMSAyNy4zMzMyIDIxLjM1OTcgMjcuMzMzMiAxMy45OTk3QzI3LjMzMzIgNi42Mzk3NCAyMS4zNTk5IDAuNjY2NDA0IDEzLjk5OTkgMC42NjY0MDRaTTEzLjk5OTkgMjQuNjY2NEM4LjExOTkxIDI0LjY2NjQgMy4zMzMyNCAxOS44Nzk3IDMuMzMzMjUgMTMuOTk5N0MzLjMzMzI0IDguMTE5NzQgOC4xMTk5MSAzLjMzMzA3IDEzLjk5OTkgMy4zMzMwN0MxOS44Nzk5IDMuMzMzMDcgMjQuNjY2NiA4LjExOTc0IDI0LjY2NjYgMTMuOTk5N0MyNC42NjY2IDE5Ljg3OTcgMTkuODc5OSAyNC42NjY0IDEzLjk5OTkgMjQuNjY2NFoiLz4KPC9zdmc+Cg==");
  --str-chat__folder-icon: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMTYiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xOCAySDEwTDggMEgyQzAuOSAwIDAuMDA5OTk5OTkgMC45IDAuMDA5OTk5OTkgMkwwIDE0QzAgMTUuMSAwLjkgMTYgMiAxNkgxOEMxOS4xIDE2IDIwIDE1LjEgMjAgMTRWNEMyMCAyLjkgMTkuMSAyIDE4IDJaTTE4IDE0SDJWNEgxOFYxNFoiIC8+Cjwvc3ZnPgo=");
  --str-chat__poll-icon: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNiAwSDJDMC45IDAgMCAwLjkgMCAyVjE2QzAgMTcuMSAwLjkgMTggMiAxOEgxNkMxNy4xIDE4IDE4IDE3LjEgMTggMTZWMkMxOCAwLjkgMTcuMSAwIDE2IDBaTTE2IDE2SDJWMkgxNlYxNlpNNCA3SDZWMTRINFY3Wk04IDRIMTBWMTRIOFY0Wk0xMiAxMEgxNFYxNEgxMlYxMFoiLz4KPC9zdmc+");
  --str-chat__handle-icon: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgNiIgZmlsbD0iY3VycmVuQ29sb3IiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTYgMEgwVjJIMTZWMFpNMCA2SDE2VjRIMFY2WiIvPgo8L3N2Zz4K");
  --str-chat__circle-stop-icon: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSI0IDQgMjggMjgiIHdpZHRoPSIzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2LjQ1NTEgMjcuMjQ0MUMyMi42MzA5IDI3LjI0NDEgMjcuNzQ0MSAyMi4xMTk4IDI3Ljc0NDEgMTUuOTU1MUMyNy43NDQxIDkuNzc5MyAyMi42MTk4IDQuNjY2MDIgMTYuNDQ0IDQuNjY2MDJDMTAuMjc5MyA0LjY2NjAyIDUuMTY2MDIgOS43NzkzIDUuMTY2MDIgMTUuOTU1MUM1LjE2NjAyIDIyLjExOTggMTAuMjkwNCAyNy4yNDQxIDE2LjQ1NTEgMjcuMjQ0MVpNMTYuNDU1MSAyNS4zNjI2QzExLjIzMTEgMjUuMzYyNiA3LjA1ODU5IDIxLjE3OSA3LjA1ODU5IDE1Ljk1NTFDNy4wNTg1OSAxMC43MzExIDExLjIyMDEgNi41NDc1MyAxNi40NDQgNi41NDc1M0MyMS42NjggNi41NDc1MyAyNS44NTE2IDEwLjczMTEgMjUuODYyNiAxNS45NTUxQzI1Ljg3MzcgMjEuMTc5IDIxLjY3OSAyNS4zNjI2IDE2LjQ1NTEgMjUuMzYyNlpNMTMuNTIyMSAxOS45ODM3SDE5LjM2NTlDMjAuMDYzMiAxOS45ODM3IDIwLjQ3MjcgMTkuNTc0MiAyMC40NzI3IDE4Ljg5OTFWMTMuMDExMUMyMC40NzI3IDEyLjMyNDkgMjAuMDYzMiAxMS45MjY0IDE5LjM2NTkgMTEuOTI2NEgxMy41MjIxQzEyLjgzNTkgMTEuOTI2NCAxMi40MTU0IDEyLjMyNDkgMTIuNDE1NCAxMy4wMTExVjE4Ljg5OTFDMTIuNDE1NCAxOS41NzQyIDEyLjgzNTkgMTkuOTgzNyAxMy41MjIxIDE5Ljk4MzdaIiBmaWxsPSIjMDA1ZmZmIi8+Cjwvc3ZnPg==");
  --str-chat__magnifier-glass-icon: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjEgMjEiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOSAwQzEzLjk2OCAwIDE4IDQuMDMyIDE4IDlDMTggMTMuOTY4IDEzLjk2OCAxOCA5IDE4QzQuMDMyIDE4IDAgMTMuOTY4IDAgOUMwIDQuMDMyIDQuMDMyIDAgOSAwWk05IDE2QzEyLjg2NyAxNiAxNiAxMi44NjcgMTYgOUMxNiA1LjEzMiAxMi44NjcgMiA5IDJDNS4xMzIgMiAyIDUuMTMyIDIgOUMyIDEyLjg2NyA1LjEzMiAxNiA5IDE2Wk0yMC4zMTQgMTguODk5TDE3LjQ4NSAxNi4wNzFMMTYuMDcxIDE3LjQ4NUwxOC44OTkgMjAuMzE0TDIwLjMxNCAxOC44OTlaIi8+Cjwvc3ZnPgo=");
  --str-chat__clear-icon: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDEwQzAgNC40NzcxNSA0LjQ3NzE1IDAgMTAgMEMxNS41MjI4IDAgMjAgNC40NzcxNSAyMCAxMEMyMCAxNS41MjI4IDE1LjUyMjggMjAgMTAgMjBDNC40NzcxNSAyMCAwIDE1LjUyMjggMCAxMFpNMTAgMkM1LjU4MTcyIDIgMiA1LjU4MTcyIDIgMTBDMiAxNC40MTgzIDUuNTgxNzIgMTggMTAgMThDMTQuNDE4MyAxOCAxOCAxNC40MTgzIDE4IDEwQzE4IDUuNTgxNzIgMTQuNDE4MyAyIDEwIDJaTTEzLjUzNTggNi40NjQ0NkMxMy4xNDUzIDYuMDczOTQgMTIuNTEyMSA2LjA3Mzk0IDEyLjEyMTYgNi40NjQ0NkwxMC4wMDAzIDguNTg1NzhMNy44Nzg5OCA2LjQ2NDQ2QzcuNDg4NDYgNi4wNzM5NCA2Ljg1NTI5IDYuMDczOTQgNi40NjQ3NyA2LjQ2NDQ2QzYuMDc0MjQgNi44NTQ5OSA2LjA3NDI0IDcuNDg4MTUgNi40NjQ3NyA3Ljg3ODY4TDguNTg2MDkgMTBMNi40NjQ3NyAxMi4xMjEzQzYuMDc0MjQgMTIuNTExOCA2LjA3NDI0IDEzLjE0NSA2LjQ2NDc3IDEzLjUzNTVDNi44NTUyOSAxMy45MjYxIDcuNDg4NDYgMTMuOTI2MSA3Ljg3ODk4IDEzLjUzNTVMMTAuMDAwMyAxMS40MTQyTDEyLjEyMTYgMTMuNTM1NUMxMi41MTIxIDEzLjkyNjEgMTMuMTQ1MyAxMy45MjYxIDEzLjUzNTggMTMuNTM1NUMxMy45MjY0IDEzLjE0NSAxMy45MjY0IDEyLjUxMTggMTMuNTM1OCAxMi4xMjEzTDExLjQxNDUgMTBMMTMuNTM1OCA3Ljg3ODY4QzEzLjkyNjQgNy40ODgxNSAxMy45MjY0IDYuODU0OTkgMTMuNTM1OCA2LjQ2NDQ2WiIvPgo8L3N2Zz4K");
}

@font-face {
  font-family: "stream-chat-icons";
  src: url('_-node_modules-stream-chat-react-dist-assets-icons-stream-chat-icons.eot');
  src: url('_-node_modules-stream-chat-react-dist-assets-icons-stream-chat-icons.eot#iefix') format("embedded-opentype"), url('_-node_modules-stream-chat-react-dist-assets-icons-stream-chat-icons.woff') format("woff2"), url('_-node_modules-stream-chat-react-dist-assets-icons-stream-chat-icons.woff') format("woff"), url('_-node_modules-stream-chat-react-dist-assets-icons-stream-chat-icons.ttf') format("truetype"), url('_-node_modules-stream-chat-react-dist-assets-icons-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('_-node_modules-stream-chat-react-dist-assets-icons-stream-chat-icons.svg#stream-chat-icons') format("svg");
  }
}
.str-chat {
  --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 32);
}

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

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

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

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

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

.str-chat .str-chat__avatar--message-status,
.str-chat .stream-chat__avatar--message-status {
  --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 15);
}

.str-chat .str-chat__avatar--poll-vote-author {
  --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 20);
}

.str-chat__avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--str-chat__avatar-size);
  line-height: var(--str-chat__avatar-size);
  width: var(--str-chat__avatar-size);
  min-width: var(--str-chat__avatar-size);
}

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

.str-chat__avatar.str-chat__avatar--no-letters {
  --str-chat-icon-width: calc(var(--str-chat__avatar-size) * 0.33);
  --str-chat-icon-height: calc(var(--str-chat__avatar-size) * 0.33);
}

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

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

.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__avatar-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  height: var(--str-chat__avatar-size);
  line-height: var(--str-chat__avatar-size);
  width: var(--str-chat__avatar-size);
  min-width: var(--str-chat__avatar-size);
  overflow: hidden;
}

.str-chat__avatar-group.str-chat__avatar-group--three-part .str-chat__avatar:nth-child(1) {
  grid-area: 1/1/3/2;
}

.str-chat__avatar-group.str-chat__avatar-group--three-part .str-chat__avatar:nth-child(2) {
  grid-area: 1/2/2/3;
}

.str-chat__avatar-group.str-chat__avatar-group--three-part .str-chat__avatar:nth-child(3) {
  grid-area: 2/2/3/3;
}

.str-chat__avatar-group .str-chat__avatar {
  height: 100%;
  line-height: 100%;
  width: 100%;
  min-width: 100%;
}

.str-chat__avatar-group .str-chat__avatar .str-chat__avatar-fallback, .str-chat__avatar-group .str-chat__avatar img {
  border-radius: 0;
}

.str-chat__avatar-group .str-chat__avatar.str-chat__avatar--single .str-chat__avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--str-chat__avatar-size) * 0.5);
}

.str-chat__avatar-group .str-chat__avatar .str-chat__avatar-fallback {
  font-size: calc(var(--str-chat__avatar-size) * 0.33);
}

.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: 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-list-angular-host .str-chat__message-attachment-card--video {
  width: 100%;
}

.str-chat__attachment-list-angular-host .str-chat__message-attachment-card--video a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.str-chat__attachment-list-angular-host .str-chat__message-attachment-card--video a .str-chat__message-attachment-card--video-play,
.str-chat__attachment-list-angular-host .str-chat__message-attachment-card--video a stream-icon-placeholder {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateY(-50%);
  width: calc(var(--str-chat__spacing-px) * 36);
  height: calc(var(--str-chat__spacing-px) * 36);
}

.str-chat__attachment-list-angular-host .str-chat__message-attachment-card--video a img {
  cursor: pointer;
}

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

.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: calc(100% + var(--str-chat__spacing-2_5));
  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__suggestion-list-container .str-chat__suggestion-list--react {
  overflow-y: unset;
}

.str-chat__suggestion-list-container .str-chat__suggestion-list--react .str-chat__suggestion-list-item > button {
  width: 100%;
}

.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;
  display: flex;
  align-items: center;
  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;
  display: flex;
  align-items: center;
  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,
stream-voice-recorder-wavebar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.str-chat__audio_recorder button,
stream-voice-recorder-wavebar 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,
stream-voice-recorder-wavebar .str-chat__audio_recorder__cancel-button {
  --str-chat-icon-height: 28px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__cancel-button svg,
stream-voice-recorder-wavebar .str-chat__audio_recorder__cancel-button svg {
  height: 28px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__toggle-playback-button,
stream-voice-recorder-wavebar .str-chat__audio_recorder__toggle-playback-button {
  --str-chat-icon-height: 16px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__toggle-playback-button svg,
stream-voice-recorder-wavebar .str-chat__audio_recorder__toggle-playback-button svg {
  height: 16px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__pause-recording-button,
stream-voice-recorder-wavebar .str-chat__audio_recorder__pause-recording-button {
  --str-chat-icon-height: 12px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__pause-recording-button svg,
stream-voice-recorder-wavebar .str-chat__audio_recorder__pause-recording-button svg {
  height: 12px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__resume-recording-button,
stream-voice-recorder-wavebar .str-chat__audio_recorder__resume-recording-button {
  --str-chat-icon-height: 24px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__resume-recording-button svg,
stream-voice-recorder-wavebar .str-chat__audio_recorder__resume-recording-button svg {
  height: 24px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__stop-button,
stream-voice-recorder-wavebar .str-chat__audio_recorder__stop-button {
  --str-chat-icon-height: 12px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__stop-button svg,
stream-voice-recorder-wavebar .str-chat__audio_recorder__stop-button svg {
  height: 12px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__complete-button,
stream-voice-recorder-wavebar .str-chat__audio_recorder__complete-button {
  --str-chat-icon-height: 16px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__complete-button svg,
stream-voice-recorder-wavebar .str-chat__audio_recorder__complete-button svg {
  height: 16px;
}

.str-chat__audio_recorder .str-chat__recording-timer,
stream-voice-recorder-wavebar .str-chat__recording-timer {
  display: flex;
  align-items: center;
  width: 3rem;
}

.str-chat__audio_recorder .str-chat__recording-timer--hours,
stream-voice-recorder-wavebar .str-chat__recording-timer--hours {
  width: 3.75rem;
}

.str-chat__audio_recorder .str-chat__wave-progress-bar__track-container,
stream-voice-recorder-wavebar .str-chat__wave-progress-bar__track-container {
  padding-block: 0.5rem;
  overflow-x: auto;
  height: fit-content;
}

.str-chat__audio_recorder .str-chat__waveform-box-container,
stream-voice-recorder-wavebar .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,
stream-voice-recorder-wavebar .str-chat__audio_recorder__waveform-box,
stream-voice-recorder-wavebar .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,
stream-voice-recorder-wavebar .str-chat__wave-progress-bar__track {
  width: 120px;
}

.str-chat__audio_recorder .str-chat__audio_recorder__waveform-box,
stream-voice-recorder-wavebar .str-chat__audio_recorder__waveform-box {
  overflow-x: hidden;
}

.str-chat__audio_recorder-container .str-chat__message-attachment__voice-recording-widget {
  display: flex;
  gap: var(--str-chat__spacing-1_5);
}

.str-chat__audio_recorder-container .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment-voice-recording-widget--first-row {
  display: none;
}

.str-chat__audio_recorder-container .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__audio-state {
  display: flex;
  gap: var(--str-chat__spacing-1_5);
}

.str-chat__audio_recorder-container .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__audio-state .str-chat__message-attachment__voice-recording-widget__timer {
  min-width: 3rem;
  align-self: center;
}

.str-chat__audio_recorder-container .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__right-section {
  display: none;
}

.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__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 {
  /* stylelint-disable */
  height: 100%;
  padding: 0 var(--str-chat__spacing-2);
}

.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 .stream-chat__paginated-list {
  gap: 0;
}

.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-angular__channel-list .str-chat__channel-list-messenger__main {
  display: flex;
  flex-direction: column;
}

.str-chat-angular__channel-list .str-chat__channel-list-messenger__main stream-paginated-list {
  min-height: 0;
}

.str-chat__channel-preview-container {
  position: relative;
}

.str-chat__channel-preview-container .str-chat__channel-preview__action-buttons {
  position: absolute;
  right: var(--str-chat__spacing-2);
  bottom: var(--str-chat__spacing-3);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1px;
}

.str-chat__channel-preview-container .str-chat__channel-preview__action-buttons .str-chat__channel-preview__action-button {
  --str-chat-icon-height: 13px;
  cursor: pointer;
  padding-block: 2px;
  padding-inline: 4px;
}

.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;
  max-width: calc(100% - 40px);
}

.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--active.str-chat__channel-search--inline, .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 {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
  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__dialog-overlay {
  inset: 0;
  overflow: hidden;
  position: absolute;
  height: var(--str-chat__dialog-overlay-height);
  width: 100%;
  z-index: 2;
}

.str-chat__dialog {
  width: 100%;
}

.str-chat__dialog .str-chat__dialog__body {
  padding: 2rem 1rem;
  overflow-y: auto;
}

.str-chat__dialog .str-chat__dialog__body .str-chat__dialog__title {
  margin-bottom: 1rem;
}

.str-chat__dialog .str-chat__dialog__controls {
  display: flex;
  justify-content: flex-end;
  gap: 1.25rem;
  padding: 2.25rem 1.25rem 0;
}

.str-chat__dialog .str-chat__dialog__controls .str-chat__dialog__controls-button {
  background: none;
  border: none;
}

.str-chat__prompt-dialog input[type=text] {
  width: 100%;
  padding: 0.625rem 1rem;
}

.str-chat__dialog-menu {
  overflow: hidden;
}

.str-chat__dialog-menu .str-chat__dialog-menu__button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0.75rem;
}

.str-chat__dialog-menu .str-chat__dialog-menu__button .str-chat__dialog-menu__button-icon {
  height: 1rem;
  width: 1rem;
}

.str-chat__dialog-menu .str-chat__dialog-menu__button .str-chat__dialog-menu__button-text {
  padding-inline: 0.675rem;
}

.str-chat__drag-and-drop-container__item {
  display: flex;
  width: 100%;
  padding-block: 0.25rem;
}

.str-chat__dropzone-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 5;
}

.str-chat__dropzone-container p {
  margin: unset;
}

.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__dialog__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.str-chat__dialog__field .str-chat__form-field-error {
  margin-left: 0.5rem;
}

.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: "\e814";
} /* '' */
.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__icon--mic::before {
  content: "\e812";
} /* '' */
.str-chat__icon--bin::before {
  content: "\e813";
} /* '' */
.str-chat__infinite-scroll-paginator {
  overflow-y: auto;
  overflow-x: hidden;
}

.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__link-preview-card--loading .str-chat__link-preview-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.str-chat__link-preview-card--loading .str-chat__link-preview-card__content .str-chat__link-preview-card__content-title {
  height: calc(var(--str-chat__spacing-px) * 16);
  width: 100%;
}

.str-chat__link-preview-card--loading .str-chat__link-preview-card__content .str-chat__link-preview-card__content-description {
  height: calc(var(--str-chat__spacing-px) * 12);
  width: 100%;
}

.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);
  }
}
stream-loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
}

stream-loading-indicator .str-chat__loading-indicator {
  width: var(--str-chat__loading-indicator-size);
  height: var(--str-chat__loading-indicator-size);
}

.str-chat__loading-indicator-placeholder {
  width: var(--str-chat__loading-indicator-size);
  height: var(--str-chat__loading-indicator-size);
}

.str-chat {
  /* The width/height of the message options button(s), for Angular SDK it's only used on desktop devices starting from version 5 */
  --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)
  );
  /* The maximum number of lines displayed for quoted messages, set to "none" to turn off clamping */
  --str-chat__quoted-message-line-clamp: 5;
}

.str-chat__message {
  --str-chat-message-options-size: calc(3 * var(--str-chat__message-options-button-size));
}

.str-chat__message.str-chat__message-without-touch-support {
  --str-chat-message-options-size: calc(1 * var(--str-chat__message-options-button-size));
}

.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__quoted-message-text-value {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: var(--str-chat__quoted-message-line-clamp);
  line-clamp: var(--str-chat__quoted-message-line-clamp);
  -webkit-box-orient: vertical;
}

.str-chat__message,
.str-chat__quoted-message-preview {
  display: grid;
  word-wrap: break-word;
  word-break: break-word;
  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--blocked,
.str-chat__quoted-message-preview.str-chat__message--blocked {
  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: var(--str-chat-message-options-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 {
  white-space: pre-line;
  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--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 {
  white-space: pre-line;
  margin: 0;
}

.str-chat__message .str-chat__message--blocked-inner,
.str-chat__quoted-message-preview .str-chat__message--blocked-inner {
  padding: var(--str-chat__spacing-2) var(--str-chat__spacing-4);
}

.str-chat__message .str-chat__message--blocked-inner p,
.str-chat__quoted-message-preview .str-chat__message--blocked-inner p {
  white-space: pre-line;
  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 {
  white-space: pre-line;
  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__message-with-touch-support),
.str-chat__virtual-list:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) {
  /* 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__message-with-touch-support) .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__message-with-touch-support) .str-chat__li:focus-within:not(:has(.str-chat__reaction-list:focus-within, .str-chat__modal--open)) .str-chat__message-options,
.str-chat__ul:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) .str-chat__li:has(.str-chat__message-options--active) .str-chat__message-options,
.str-chat__virtual-list:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) .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__message-with-touch-support) .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__message-with-touch-support) .str-chat__li:has(.str-chat__message-options--active) .str-chat__message-options {
  display: flex;
}

.str-chat__ul:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) .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__message-with-touch-support) .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__ul:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) .str-chat__li:has(.str-chat__message-options--active) .str-chat__message--other .str-chat__message-inner,
.str-chat__virtual-list:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) .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__message-with-touch-support) .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__message-with-touch-support) .str-chat__li:has(.str-chat__message-options--active) .str-chat__message--other .str-chat__message-inner {
  margin-inline-end: 0;
}

.str-chat__ul:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) .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__message-with-touch-support) .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__ul:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) .str-chat__li:has(.str-chat__message-options--active) .str-chat__message--me .str-chat__message-inner,
.str-chat__virtual-list:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) .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__message-with-touch-support) .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__message-with-touch-support) .str-chat__li:has(.str-chat__message-options--active) .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__message-with-touch-support) .str-chat__li:hover .str-chat__message-options,
  .str-chat__ul:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) .str-chat__li:focus-within .str-chat__message-options,
  .str-chat__virtual-list:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) .str-chat__li:hover .str-chat__message-options,
  .str-chat__virtual-list:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) .str-chat__li:focus-within .str-chat__message-options {
    display: flex;
  }
  .str-chat__ul:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) .str-chat__li:hover .str-chat__message--other .str-chat__message-inner,
  .str-chat__ul:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) .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__message-with-touch-support) .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__message-with-touch-support) .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__message-with-touch-support) .str-chat__li:hover .str-chat__message--me .str-chat__message-inner,
  .str-chat__ul:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) .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__message-with-touch-support) .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__message-with-touch-support) .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.str-chat__message-options--active {
  display: flex;
}

.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-inner:focus-within .str-chat__message-options {
  display: flex;
}

.str-chat__message--other .str-chat__message-inner:not(:has(.str-chat__message-options--active)) {
  margin-inline-end: var(--str-chat-message-options-size);
}

.str-chat__message--me .str-chat__message-inner {
  margin-inline-start: var(--str-chat-message-options-size);
}

.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-with-touch-support .str-chat__message-bubble {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.str-chat__message-with-touch-support.str-chat__message-menu-opened .str-chat__attachments-container,
.str-chat__message-with-touch-support.str-chat__message-menu-opened .str-chat__message-text-inner {
  pointer-events: none;
}

.str-chat__message-with-touch-support .str-chat__message-inner {
  margin-inline: 0;
}

.str-chat__message-with-touch-support .str-chat__message-options {
  display: none;
}

.str-chat__message-with-touch-support .stream-chat-angular__image-modal-host {
  -webkit-touch-callout: default;
}

.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-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__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-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__stop-ai-generation-button {
  width: calc(var(--str-chat__spacing-px) * 30);
  height: calc(var(--str-chat__spacing-px) * 28);
  cursor: pointer;
}

.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 {
  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 25);
  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__quoted-message-preview .str-chat__quoted-poll-preview__name {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
  overflow-x: hidden;
}

.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__attachment-selector-actions-menu button,
.str-chat__attachment-selector button {
  background: none;
  border: none;
}

.str-chat__attachment-selector .str-chat__attachment-selector__menu-button {
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.str-chat__attachment-selector .str-chat__attachment-selector__menu-button .str-chat__attachment-selector__menu-button__icon {
  height: 26px;
  width: 26px;
}

.str-chat__file-input {
  display: none;
}

.str-chat__attachment-selector-actions-menu {
  min-width: 300px;
  padding-block: 0.5rem;
}

.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__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__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: 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 {
  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-angular-v5__reaction-selector {
  margin: var(--str-chat__spacing-2);
  position: static;
  justify-content: flex-start;
}

.str-chat__message-reaction-selector.str-chat-angular-v5__reaction-selector .str-chat__message-reactions-options {
  max-width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0;
}

.str-chat__message-reaction-selector.str-chat-angular-v5__reaction-selector .str-chat__message-reactions-options .str-chat__message-reactions-option {
  flex-shrink: 0;
}

.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: 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-react__message-reaction-selector {
  position: static;
  inset-block-end: unset;
}

.str-chat-react__message-reaction-selector ul {
  margin: 0;
}

.str-chat__message--me .str-chat-react__message-reaction-selector, .str-chat__message--other .str-chat-react__message-reaction-selector {
  inset-inline-start: unset;
}

.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 .str-chat__modal-header {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1.25rem 1rem;
}

.str-chat__modal--open .str-chat__modal-header button.str-chat__modal-header__go-back-button,
.str-chat__modal--open .str-chat__modal-header .str-chat__modal__close-button {
  padding: 1rem;
  background-size: 0.875rem;
  background-repeat: no-repeat;
  background-position: center;
}

.str-chat__modal--open .str-chat__modal-header button.str-chat__modal-header__go-back-button {
  background-image: var(--str-chat__arrow-left-icon);
}

.str-chat__modal--open .str-chat__modal-header .str-chat__modal-header__close-button {
  background-image: var(--str-chat__close-icon);
  background-repeat: no-repeat;
  height: 0.875rem;
  width: 0.875rem;
}

.str-chat__modal--open .str-chat__modal-header .str-chat__modal-header__title {
  flex: 1;
}

.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%;
  max-height: 80%;
  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: 100;
}

.str-chat__list-notifications {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  row-gap: var(--str-chat__spacing-1);
  margin: var(--str-chat__spacing-1_5);
  width: auto;
}

.str-chat__notification {
  padding: var(--str-chat__spacing-3_5) var(--str-chat__spacing-4);
}

.str-chat-react__notification {
  z-index: 101;
}

.str-chat__poll {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0.675rem;
  max-width: 270px;
  font: var(--str-chat__body-text);
}

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

.str-chat__poll .str-chat__checkmark {
  grid-column: 1/2;
  grid-row: 1/2;
  margin-right: 0.125rem;
  height: 1rem;
  width: 1rem;
}

.str-chat__poll .str-chat__checkmark--checked {
  height: calc(1rem + 1px);
  width: calc(1rem + 1px);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Im00IDkuNC00LTRMMS40IDQgNCA2LjYgMTAuNiAwIDEyIDEuNGwtOCA4WiIvPjwvc3ZnPg==");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 10px;
}

.str-chat__poll .str-chat__poll-header .str-chat__poll-title {
  font: var(--str-chat__body-medium-text);
}

.str-chat__poll .str-chat__poll-header .str-chat__poll-subtitle {
  font: var(--str-chat__caption-text);
}

.str-chat__poll .str-chat__poll-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.str-chat__poll .str-chat__poll-actions .str-chat__poll-action {
  padding: 0.675rem;
  font: var(--str-chat__subtitle-text);
  color: var(--str-chat__primary-color);
}

.str-chat__poll-option-list--full .str-chat__amount-bar,
.str-chat__modal__poll-results .str-chat__amount-bar {
  display: none;
}

.str-chat__poll-option {
  cursor: pointer;
}

.str-chat__poll-option.str-chat__poll-option--full-vote-list {
  cursor: default;
  height: 100%;
  padding: 0;
}

.str-chat__poll-option .str-chat__poll-option-data {
  flex: 1;
  display: flex;
  align-items: flex-start;
  font: var(--str-chat__body-text);
  gap: 0.125rem;
}

.str-chat__poll-option .str-chat__poll-option-data p {
  margin: 0;
  flex: 1;
}

.str-chat__poll-option .str-chat__poll-option-data .str-chat__poll-option-voters {
  --str-chat__avatar-size: 1.175rem;
  display: flex;
}

.str-chat__poll-option-list--full .str-chat__poll-option {
  display: flex;
  flex-direction: row;
  padding: 1rem 0.75rem;
}

.str-chat__poll-option-list--full .str-chat__poll-option:nth-of-type(1) {
  padding-top: 1rem;
  border-top-left-radius: var(--str-chat__border-radius-sm);
  border-top-right-radius: var(--str-chat__border-radius-sm);
}

.str-chat__poll-option-list--full .str-chat__poll-option:last-child {
  padding-bottom: 1rem;
  border-bottom-left-radius: var(--str-chat__border-radius-sm);
  border-bottom-right-radius: var(--str-chat__border-radius-sm);
}

.str-chat__poll-option-list:not(.str-chat__poll-option-list--full) {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-block: 1rem 0.5rem;
}

.str-chat__poll-option-list:not(.str-chat__poll-option-list--full) .str-chat__poll-option {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  gap: 0.125rem;
}

.str-chat__poll-option-list:not(.str-chat__poll-option-list--full) .str-chat__poll-option .str-chat__poll-option-data {
  grid-column: 2/3;
  grid-row: 1/2;
}

.str-chat__poll-option-list:not(.str-chat__poll-option-list--full) .str-chat__poll-option .str-chat__poll-option__votes-bar {
  grid-column: 2/3;
  grid-row: 2/3;
  height: 0.25rem;
  width: 100%;
  margin-top: 0.25rem;
}

.str-chat__modal__poll-results .str-chat__poll-option {
  display: flex;
  flex-direction: column;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__close-button {
  display: none;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner {
  padding: 0 0 0.5rem;
  overflow: hidden;
  max-width: 400px;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__tooltip {
  max-width: 300px;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__suggest-poll-option .str-chat__form-field-error {
  height: 1rem;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-answer-list,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-option-list,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-results {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 400px;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-answer-list .str-chat__loading-indicator-placeholder,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-option--full-vote-list .str-chat__loading-indicator-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-option-list__title,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-results__title {
  padding: 1.175rem 1rem;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-answer-list__body,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-results__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: 1rem;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-results__body,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-option-list__body,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-answer-list,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-results__option-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-height: 100%;
  min-height: 0;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-answer-list {
  padding-bottom: 0;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-results__body,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-option-list__body,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-answer-list {
  overflow-y: auto;
  padding: 0 1rem 1.25rem;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-answer-list,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-results__option-list {
  gap: 0.5rem;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-results__body,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__modal__poll-option-list__body {
  gap: 2rem;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-option__show-all-votes-button {
  padding-bottom: 1rem;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-answer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.75rem 1rem;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-answer .str-chat__poll-answer__text {
  margin: 0;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__checkmark {
  margin-right: 1rem;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-option__header {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  width: 100%;
  padding: 0.75rem 1rem;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-option__header .str-chat__poll-option__option-text {
  flex: 1;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-vote {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding-block: 0.375rem;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-vote .str-chat__poll-vote__author {
  display: flex;
  align-items: center;
  gap: calc(var(--str-chat__spacing-px) * 5);
  min-width: 0;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-vote .str-chat__poll-vote__author .str-chat__poll-vote__author__name {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
  max-width: 130px;
  min-width: 0;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-result-option-vote-counter {
  display: flex;
  gap: 0.375rem;
}

.str-chat__poll-actions .str-chat__modal .str-chat__modal__inner .str-chat__poll-result-option-vote-counter .str-chat__poll-result-winning-option-icon {
  height: 1.25rem;
  width: 1.25rem;
  background-image: var(--str-chat__winning-poll-option-icon);
}

.str-chat__poll-vote-listing {
  padding: 0 1rem 0.75rem;
}

.str-chat__modal__poll-results--option-detail .str-chat__modal-header__title {
  padding-inline: 1rem;
  flex: 1;
}

.str-chat__modal__poll-results--option-detail .str-chat__modal__poll-results__body {
  padding-inline: 1rem;
}

.str-chat__quoted-poll-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-start;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__modal__close-button {
  display: none;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__modal__inner {
  padding: 0;
  max-height: unset;
  display: block;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog button {
  background: none;
  border: none;
  cursor: pointer;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__modal-header {
  padding-block: 14px;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__modal-header .str-chat__modal-header__close-button {
  background-image: var(--str-chat__close-icon);
  background-repeat: no-repeat;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__dialog__body {
  flex: 1 1;
  padding: 1rem;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__dialog__body form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__input-fieldset {
  margin: 0;
  padding: 0;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__input-fieldset .str-chat__form__input-field {
  width: 100%;
  padding: 1rem;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__input-fieldset .str-chat__form__input-field .str-chat__form__input-field__value {
  width: 100%;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__input-fieldset .str-chat__form__input-field .str-chat__form__input-field__value .str-chat__form__input-field__error {
  width: 100%;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__input-field--with-label .str-chat__form__input-field__value {
  padding: 1rem;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__input-field__value input {
  width: 100%;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__expandable-field {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__expandable-field .str-chat__form__switch-field {
  padding: 0;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__expandable-field .str-chat__form__input-field {
  width: 100%;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__expandable-field .str-chat__form__input-field .str-chat__form__input-field__value {
  padding: 0;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__expandable-field .str-chat__form__input-field .str-chat__form__input-field__value .str-chat__form-field-error {
  height: 1rem;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__input-fieldset__values {
  display: flex;
  flex-direction: column;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__field-label {
  display: block;
  margin-bottom: 0.5rem;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__input-field--draggable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__input-field--draggable .str-chat__drag-handle {
  height: 1rem;
  width: 1rem;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__switch-field {
  width: 100%;
  padding: 1rem;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__switch-field input[type=checkbox] {
  display: none;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__switch-field label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__switch-field .str-chat__form__switch-field__switch {
  display: flex;
  align-items: center;
  width: calc(var(--str-chat__spacing-px) * 52);
  height: calc(var(--str-chat__spacing-px) * 32);
  padding: 0.25rem;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__switch-field .str-chat__form__switch-field__switch .str-chat__form__switch-field__switch-handle {
  height: 1.5rem;
  width: 1.5rem;
}

.str-chat__modal.str-chat__create-poll-modal .str-chat__poll-creation-dialog .str-chat__form__switch-field .str-chat__form__switch-field__switch.str-chat__form__switch-field__switch--on .str-chat__form__switch-field__switch-handle {
  transform: translateX(1.25rem);
}

@media only screen and (max-device-width: 768px) {
  .str-chat__modal--open .str-chat__modal__inner {
    width: 90%;
  }
  .str-chat__create-poll-modal .str-chat__modal__inner,
  .str-chat__poll-answer-list-modal .str-chat__modal__inner,
  .str-chat__poll-results-modal .str-chat__modal__inner {
    height: 90%;
    max-height: unset;
  }
}
.str-chat__search {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.str-chat__search.str-chat__search--active {
  flex: 1;
  max-height: 100%;
}

.str-chat__search .str-chat__search-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--str-chat__spacing-2_5) var(--str-chat__spacing-2);
  gap: 0.25rem;
}

.str-chat__search .str-chat__search-bar .str-chat__search-bar-button {
  background: none;
  border: none;
  padding: var(--str-chat__spacing-1);
  cursor: pointer;
}

.str-chat__search .str-chat__search-bar .str-chat__search-input--wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  padding: var(--str-chat__spacing-1_5) var(--str-chat__spacing-2);
  min-width: 0;
}

.str-chat__search .str-chat__search-bar .str-chat__search-input--wrapper .str-chat__search-input--icon {
  height: 20px;
  width: 20px;
  margin-right: 0.5rem;
}

.str-chat__search .str-chat__search-bar .str-chat__search-input--wrapper .str-chat__search-input--clear-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.str-chat__search .str-chat__search-bar .str-chat__search-input--wrapper .str-chat__search-input--clear-button:disabled {
  cursor: default;
}

.str-chat__search .str-chat__search-bar .str-chat__search-input--wrapper .str-chat__search-input--clear-button .str-chat__search-input--clear-button-icon {
  height: 20px;
  width: 20px;
  mask-size: 20px;
  -webkit-mask-size: 20px;
}

.str-chat__search .str-chat__search-bar .str-chat__search-input--wrapper input {
  flex: 1;
  min-width: 0;
}

.str-chat__search .str-chat__search-results {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.str-chat__search .str-chat__search-results .str-chat__search-results-header {
  width: 100%;
}

.str-chat__search .str-chat__search-results .str-chat__search-results-header button {
  background: none;
  border: none;
  cursor: pointer;
}

.str-chat__search .str-chat__search-results .str-chat__search-results-header .str-chat__search-results-header__filter-source-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2_5);
  width: 100%;
}

.str-chat__search .str-chat__search-results .str-chat__search-results-header .str-chat__search-results-header__filter-source-buttons .str-chat__search-results-header__filter-source-button {
  padding: 0.5rem 0.75rem;
  border-radius: var(--str-chat__border-radius-circle);
  background-color: var(--str-chat__tertiary-surface-color);
}

.str-chat__search .str-chat__search-results .str-chat__search-results-header .str-chat__search-results-header__filter-source-buttons .str-chat__search-results-header__filter-source-button--active {
  background-color: var(--str-chat__surface-color);
  color: var(--str-chat__text-color);
  font-weight: 500;
}

.str-chat__search .str-chat__search-results .str-chat__search-results-presearch,
.str-chat__search .str-chat__search-results .str-chat__search-source-results-empty {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.25rem;
}

.str-chat__search .str-chat__search-results .str-chat__search-source-results {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.str-chat__search .str-chat__search-results .str-chat__search-source-results .str-chat__search-source-result-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.str-chat__search .str-chat__search-results .str-chat__search-source-results .str-chat__search-source-result-list .str-chat__infinite-scroll-paginator__content {
  display: flex;
  flex-direction: column;
}

.str-chat__search .str-chat__search-results .str-chat__search-source-results .str-chat__search-source-result-list .str-chat__search-result {
  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__search .str-chat__search-results .str-chat__search-source-results .str-chat__search-source-result-list .str-chat__search-result .search__result-text,
.str-chat__search .str-chat__search-results .str-chat__search-source-results .str-chat__search-source-result-list .str-chat__search-result .str-chat__search-result--display-name {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
  overflow-y: hidden;
}

.str-chat__search .str-chat__search-results .str-chat__search-source-results .str-chat__search-source-result-list .str-chat__search-source-result-list__footer {
  height: 4rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.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 .str-chat__main-panel-inner {
  height: auto;
}

.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__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__thread-list-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.str-chat__unseen-threads-banner {
  font-size: 16px;
  font-weight: 400;
  margin: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.str-chat__unseen-threads-banner__button {
  --str-chat-icon-width: 16px;
  --str-chat-icon-heigh: 22px;
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.str-chat__thread-list .str-chat__thread-list-item {
  align-items: stretch;
  box-sizing: border-box;
  padding-block: 14px;
  padding-inline: 8px;
  gap: 6px;
  width: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__channel {
  --str-chat-icon-height: 14px;
  --str-chat-icon-width: 14px;
  display: flex;
  gap: 5px;
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__channel .str-chat__icon {
  margin-top: 2px;
  flex-shrink: 0;
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__thread-status-symbol {
  font-size: 14px;
  line-height: 1;
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__channel-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__parent-message {
  display: flex;
  gap: 3px;
  justify-content: space-between;
  align-items: center;
  height: 15px;
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__parent-message-text {
  font-size: 12px;
  font-weight: 400;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__latest-reply {
  --str-chat__avatar-size: 49px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__latest-reply-details {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 4px;
  width: 0;
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__latest-reply-created-by {
  font-weight: 500;
  font-size: 16px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__latest-reply-text-and-timestamp {
  display: flex;
  font-size: 14px;
  font-weight: 400;
  justify-content: space-between;
  align-items: baseline;
  line-height: 16px;
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__latest-reply-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__latest-reply-timestamp {
  white-space: nowrap;
}

.str-chat__thread-list .str-chat__thread-list-loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 14px;
  padding-inline: 8px;
}

.str-chat__thread-list-empty-placeholder {
  --str-chat-icon-height: 95px;
  --str-chat-icon-width: 95px;
  font-size: 20px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16px;
}

.str-chat__chat-view {
  display: flex;
  width: 100%;
  height: 100%;
}

.str-chat__chat-view__selector {
  display: flex;
  flex-direction: column;
  padding-inline: 8px;
  padding-block: 16px;
  gap: 20px;
}

.str-chat__chat-view__selector-button {
  --str-chat-icon-height: 20px;
  --str-chat-icon-width: 20px;
  --str-chat-unread-count-badge-absolute-offset-vertical: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 10px;
  padding-block: 10px;
  border-radius: 8px;
  gap: 4px;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
}

.str-chat__chat-view__channels {
  display: flex;
  flex-grow: 1;
}

.str-chat__chat-view__threads {
  display: flex;
  flex-grow: 1;
}

.str-chat {
  --str-chat-unread-count-badge-absolute-offset-vertical: 50%;
  --str-chat-unread-count-badge-absolute-offset-horizontal: 50%;
}

.str-chat__unread-count-badge-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.str-chat__unread-count-badge {
  font-size: 12px;
  min-width: 22px;
  min-height: 22px;
  line-height: 8px;
  font-weight: 700;
  padding: 7px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.str-chat__unread-count-badge--top-right {
  position: absolute;
  translate: var(--str-chat-unread-count-badge-absolute-offset-horizontal) calc(var(--str-chat-unread-count-badge-absolute-offset-vertical) * -1);
}

.str-chat__unread-count-badge--bottom-left {
  position: absolute;
  translate: calc(var(--str-chat-unread-count-badge-absolute-offset-horizontal) * -1) var(--str-chat-unread-count-badge-absolute-offset-vertical);
}

.str-chat__unread-count-badge--bottom-right {
  position: absolute;
  translate: var(--str-chat-unread-count-badge-absolute-offset-horizontal) var(--str-chat-unread-count-badge-absolute-offset-vertical);
}

.str-chat__unread-count-badge--top-left {
  position: absolute;
  translate: calc(var(--str-chat-unread-count-badge-absolute-offset-horizontal) * -1) calc(var(--str-chat-unread-count-badge-absolute-offset-vertical) * -1);
}

.str-chat__ai-state-indicator-container {
  padding: 0 8px;
}

.str-chat {
  --str-chat__blue950: #001333;
  --str-chat__blue900: #00163d;
  --str-chat__blue800: #002666;
  --str-chat__blue700: #003999;
  --str-chat__blue600: #004ccc;
  --str-chat__blue500: #005fff;
  --str-chat__blue400: #337eff;
  --str-chat__blue300: #669fff;
  --str-chat__blue200: #ccdfff;
  --str-chat__blue100: #e0f0ff;
  --str-chat__blue50: #ebf5ff;
  --str-chat__grey950: #080707;
  --str-chat__grey900: #17191c;
  --str-chat__grey800: #1c1e22;
  --str-chat__grey700: #272a30;
  --str-chat__grey600: #4c525c;
  --str-chat__grey500: #72767e;
  --str-chat__grey400: #b4b7bb;
  --str-chat__grey300: #dbdde1;
  --str-chat__grey200: #e9eaed;
  --str-chat__grey100: #f4f4f5;
  --str-chat__grey50: #ffffff;
  --str-chat__red900: #330003;
  --str-chat__red800: #660006;
  --str-chat__red700: #990008;
  --str-chat__red600: #cc000b;
  --str-chat__red500: #ff000e;
  --str-chat__red400: #ff3742;
  --str-chat__red300: #ff666e;
  --str-chat__red200: #ff999f;
  --str-chat__red100: #ffe5e7;
  --str-chat__green900: #062d16;
  --str-chat__green800: #0d592c;
  --str-chat__green700: #138643;
  --str-chat__green600: #19b359;
  --str-chat__green500: #20e070;
  --str-chat__green400: #4ce68c;
  --str-chat__green300: #79eca9;
  --str-chat__green200: #a6f2c6;
  --str-chat__green100: #e9f1ff;
  --str-chat__yellow900: #332500;
  --str-chat__yellow800: #664900;
  --str-chat__yellow700: #996e00;
  --str-chat__yellow600: #cc9200;
  --str-chat__yellow500: #ffb700;
  --str-chat__yellow400: #ffd466;
  --str-chat__yellow300: #ffe299;
  --str-chat__yellow200: #fff1cc;
  --str-chat__yellow100: #fff8e5;
  /* Border radius used for slightly rounded elements */
  --str-chat__border-radius-xs: 8px;
  /* Border radius used for slightly rounded elements */
  --str-chat__border-radius-sm: 14px;
  /* Border radius used for rounded elements */
  --str-chat__border-radius-md: 18px;
  /* Border radius used for rounded elements */
  --str-chat__border-radius-lg: 20px;
  /* Border radius used for circular elements */
  --str-chat__border-radius-circle: 999px;
  /* The font used in the chat, by default, we use [preinstalled OS fonts](https://systemfontstack.com/) */
  --str-chat__font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, Helvetica Neue, sans-serif;
  /* The font used for caption texts */
  --str-chat__caption-text: 0.75rem/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.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--no-letters {
  --str-chat-icon-color: var(--str-chat__avatar-color);
  background: var(--str-chat__avatar-background-color);
  color: var(--str-chat__avatar-color);
  box-shadow: var(--str-chat__avatar-box-shadow);
  border-radius: var(--str-chat__avatar-border-radius);
  border-block-start: var(--str-chat__avatar-border-block-start);
  border-block-end: var(--str-chat__avatar-border-block-end);
  border-inline-start: var(--str-chat__avatar-border-inline-start);
  border-inline-end: var(--str-chat__avatar-border-inline-end);
}

.str-chat__avatar .str-chat__avatar-fallback {
  background: var(--str-chat__avatar-background-color);
  color: var(--str-chat__avatar-color);
  box-shadow: var(--str-chat__avatar-box-shadow);
  border-radius: var(--str-chat__avatar-border-radius);
  border-block-start: var(--str-chat__avatar-border-block-start);
  border-block-end: var(--str-chat__avatar-border-block-end);
  border-inline-start: var(--str-chat__avatar-border-inline-start);
  border-inline-end: var(--str-chat__avatar-border-inline-end);
  text-transform: uppercase;
}

.str-chat__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__avatar-group {
  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__attachment-list-angular-host .str-chat__message-attachment-card--video-play {
  --str-chat-icon-color: var(--str-chat__text-color);
  background-color: var(--str-chat__secondary-background-color);
  border-radius: var(--str-chat__border-radius-circle);
}

.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 {
  --str-chat-icon-color: var(--str-chat__text-low-emphasis-color);
  color: var(--str-chat__text-low-emphasis-color);
}

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

.str-chat__audio_recorder .str-chat__message-attachment-audio-widget--play-button {
  --str-chat-icon-color: var(--str-chat__text-low-emphasis-color);
  box-shadow: none;
  border: none;
}

.str-chat__audio_recorder .str-chat__audio_recorder__pause-recording-button,
.str-chat__audio_recorder .str-chat__audio_recorder__resume-recording-button {
  --str-chat-icon-color: var(--str-chat__danger-color);
  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 {
  --str-chat-icon-color: var(--str-chat__on-primary-color);
  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);
  text-align: left;
  font: var(--str-chat__subtitle-text);
}

.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__suggestion-list-container .str-chat__suggestion-list--react .str-chat__suggestion-list-item > button {
  background: none;
  border: none;
  text-decoration: none;
}

.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-container .str-chat__channel-preview__action-buttons .str-chat__channel-preview__action-button {
  --str-chat-icon-color: var(--str-chat__text-low-emphasis-color);
  border: none;
  background-color: transparent;
}

.str-chat__channel-preview-container .str-chat__channel-preview__action-buttons .str-chat__channel-preview__action-button--pin.str-chat__channel-preview__action-button--active {
  --str-chat-icon-color: var(--str-chat__unread-badge-color);
}

.str-chat__channel-preview-container .str-chat__channel-preview__action-buttons .str-chat__channel-preview__action-button--archive.str-chat__channel-preview__action-button--active {
  --str-chat-icon-color: var(--str-chat__text-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__dialog-menu-border-radius: var(--str-chat__border-radius-sm);
  /* The text/icon color of the component */
  --str-chat__dialog-menu-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__dialog-menu-background-color: var(--str-chat__secondary-background-color);
  /* Top border of the component */
  --str-chat__dialog-menu-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__dialog-menu-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__dialog-menu-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__dialog-menu-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__dialog-menu-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__dialog-menu-button-border-radius: 0;
  /* The text/icon color of an item in the message actions box */
  --str-chat__dialog-menu-button-color: var(--str-chat__text-color);
  /* The background color of an item in the message actions box */
  --str-chat__dialog-menu-button-background-color: transparent;
  /* The background color of an item in the message actions box when hovered */
  --str-chat__dialog-menu-button-hover-background-color: var(--str-chat__secondary-surface-color);
  /* Top border of an item in the message actions box */
  --str-chat__dialog-menu-button-border-block-start: none;
  /* Bottom border of an item in the message actions box */
  --str-chat__dialog-menu-button-border-block-end: none;
  /* Left (right in RTL layout) border of an item in the message actions box */
  --str-chat__dialog-menu-button-border-inline-start: none;
  /* Right (left in RTL layout) border of an item in the message actions box */
  --str-chat__dialog-menu-button-border-inline-end: none;
  /* Box shadow applied to an item in the message actions box */
  --str-chat__dialog-menu-button-box-shadow: none;
}

.str-chat__dialog .str-chat__dialog__title {
  font: var(--str-chat__subtitle-medium-text);
}

.str-chat__dialog .str-chat__dialog__prompt {
  font: var(--str-chat__subtitle-text);
}

.str-chat__dialog .str-chat__dialog__controls .str-chat__dialog__controls-button {
  cursor: pointer;
  font: var(--str-chat__body-medium-text);
  color: var(--str-chat__primary-color);
}

.str-chat__dialog .str-chat__dialog__controls .str-chat__dialog__controls-button--submit {
  text-transform: uppercase;
}

.str-chat__dialog .str-chat__dialog__controls .str-chat__dialog__controls-button--submit:disabled {
  color: var(--str-chat__disabled-color);
}

.str-chat__prompt-dialog input[type=text] {
  font: var(--str-chat__subtitle-text);
  border-radius: 20px;
  border: 1px solid var(--str-chat__primary-color);
}

.str-chat__dialog-menu {
  background: var(--str-chat__dialog-menu-background-color);
  color: var(--str-chat__dialog-menu-color);
  box-shadow: var(--str-chat__dialog-menu-box-shadow);
  border-radius: var(--str-chat__dialog-menu-border-radius);
  border-block-start: var(--str-chat__dialog-menu-border-block-start);
  border-block-end: var(--str-chat__dialog-menu-border-block-end);
  border-inline-start: var(--str-chat__dialog-menu-border-inline-start);
  border-inline-end: var(--str-chat__dialog-menu-border-inline-end);
}

.str-chat__dialog-menu .str-chat__dialog-menu__button {
  background: var(--str-chat__dialog-menu-button-background-color);
  color: var(--str-chat__dialog-menu-button-color);
  box-shadow: var(--str-chat__dialog-menu-button-box-shadow);
  border-radius: var(--str-chat__dialog-menu-button-border-radius);
  border-block-start: var(--str-chat__dialog-menu-button-border-block-start);
  border-block-end: var(--str-chat__dialog-menu-button-border-block-end);
  border-inline-start: var(--str-chat__dialog-menu-button-border-inline-start);
  border-inline-end: var(--str-chat__dialog-menu-button-border-inline-end);
  cursor: pointer;
  font: var(--str-chat__subtitle-text);
}

.str-chat__dialog-menu .str-chat__dialog-menu__button:hover, .str-chat__dialog-menu .str-chat__dialog-menu__button:focus {
  background-color: var(--str-chat__dialog-menu-button-hover-background-color);
}

.str-chat {
  /* Top border of the component */
  --str-chat__drag-and-drop-container-border-block-start: 2px solid transparent;
  /* Bottom border of the component */
  --str-chat__drag-and-drop-container-border-block-end: 2px solid transparent;
  /* Top border of the component on dragover */
  --str-chat__drag-and-drop-container-on-dragover-border-block-start: 2px solid var(--str-chat__primary-color);
  /* Bottom border of the component on dragover */
  --str-chat__drag-and-drop-container-on-dragover-border-block-end: 2px solid var(--str-chat__primary-color);
  /* Left (right in RTL layout) border of the component on dragover */
  --str-chat__drag-and-drop-container-on-dragover-border-inline-start: none;
  /* Right (left in RTL layout) border of the component on dragover */
  --str-chat__drag-and-drop-container-on-dragover-border-inline-end: none;
}

.str-chat__drag-and-drop-container--dragging {
  cursor: grabbing;
}

.str-chat__drag-and-drop-container__item[draggable=true] {
  cursor: grab;
}

.str-chat__drag-and-drop-container__item[draggable=true]:active {
  background: transparent;
}

.str-chat__drag-and-drop-container__item {
  border-bottom: var(--str-chat__drag-and-drop-container-border-block-start);
  border-top: var(--str-chat__drag-and-drop-container-border-block-start);
}

.str-chat__drag-and-drop-container__item.str-chat__drag-and-drop-container__item--dragged-over-from-top {
  border-bottom: var(--str-chat__drag-and-drop-container-on-dragover-border-block-end);
}

.str-chat__drag-and-drop-container__item.str-chat__drag-and-drop-container__item--dragged-over-from-bottom {
  border-top: var(--str-chat__drag-and-drop-container-on-dragover-border-block-start);
}

.str-chat {
  /* 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);
}

.str-chat__dropzone-container {
  background-color: var(--str-chat__dropzone-container-background-color);
  color: var(--str-chat__dropzone-container-color);
  backdrop-filter: var(--str-chat__dropzone-container-backdrop-filter);
  font: var(--str-chat__subtitle-text);
}

.str-chat {
  /* The border radius used for the borders of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
  --str-chat__edit-message-modal-button-border-radius: none;
  /* The text color used for the send button. Note for Angular SDK users: this variable isn't available starting from version 5 */
  --str-chat__edit-message-modal-send-button-color: var(--str-chat__primary-color);
  /* The text color used for the cancel button. Note for Angular SDK users: this variable isn't available starting from version 5 */
  --str-chat__edit-message-modal-cancel-button-color: var(--str-chat__text-low-emphasis-color);
  /* The background color of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
  --str-chat__edit-message-modal-button-background-color: transparent;
  /* Top border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
  --str-chat__edit-message-modal-button-border-block-start: none;
  /* Bottom border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
  --str-chat__edit-message-modal-button-border-block-end: none;
  /* Left (right in RTL layout) border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
  --str-chat__edit-message-modal-button-border-inline-start: none;
  /* Right (left in RTL layout) border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
  --str-chat__edit-message-modal-button-border-inline-end: none;
  /* Box shadow applied to the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
  --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);
}

.str-chat__form-field-error {
  font-size: 0.75rem;
  color: var(--str-chat__danger-color);
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* 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 {
  --str-chat__link-preview-loading-state-color: var(--str-chat__disabled-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__link-preview-card--loading .str-chat__link-preview-card__content-title,
.str-chat__link-preview-card--loading .str-chat__link-preview-card__content-description {
  background-image: linear-gradient(-90deg, var(--str-chat__link-preview-loading-state-color) 0%, var(--str-chat__link-preview-loading-state-color) 100%);
  animation: pulsate 1s linear 0s infinite alternate;
  border-radius: calc(var(--str-chat__spacing-px) * 3);
}

.str-chat__link-preview-card--loading .str-chat__link-preview-card__content-title:nth-of-type(2),
.str-chat__link-preview-card--loading .str-chat__link-preview-card__content-description:nth-of-type(2) {
  animation: pulsate 1s linear 0.3334s infinite alternate;
}

.str-chat__link-preview-card--loading .str-chat__link-preview-card__content-title:last-of-type,
.str-chat__link-preview-card--loading .str-chat__link-preview-card__content-description:last-of-type {
  animation: pulsate 1s linear 0.6667s infinite alternate;
}

@keyframes pulsate {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
.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 deleted message */
  --str-chat__blocked-message-border-radius: var(--str-chat__border-radius-md);
  /* The text/icon of a deleted message */
  --str-chat__blocked-message-color: var(--str-chat__text-low-emphasis-color);
  /* The background of a deleted message */
  --str-chat__blocked-message-background-color: var(--str-chat__secondary-surface-color);
  /* Top border of a deleted message */
  --str-chat__blocked-message-border-block-start: none;
  /* Bottom border of a deleted message */
  --str-chat__blocked-message-border-block-end: none;
  /* Left (right in RTL layout) border of a deleted message */
  --str-chat__blocked-message-border-inline-start: none;
  /* Right (left in RTL layout) border of a deleted message */
  --str-chat__blocked-message-border-inline-end: none;
  /* Box shadow applied to a deleted message */
  --str-chat__blocked-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-mention {
  color: var(--str-chat__message-mention-color);
  font: var(--str-chat__body2-medium-text);
}

.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-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--blocked-inner {
  background: var(--str-chat__blocked-message-background-color);
  color: var(--str-chat__blocked-message-color);
  box-shadow: var(--str-chat__blocked-message-box-shadow);
  border-radius: var(--str-chat__blocked-message-border-radius);
  border-block-start: var(--str-chat__blocked-message-border-block-start);
  border-block-end: var(--str-chat__blocked-message-border-block-end);
  border-inline-start: var(--str-chat__blocked-message-border-inline-start);
  border-inline-end: var(--str-chat__blocked-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);
}

@media (hover: none) {
  .str-chat__message-actions-box .str-chat__message-actions-list-item-button:hover {
    background-color: transparent;
  }
}
.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 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;
  /* Color applied to an icon in a button that opens attachment selector */
  --str-chat__attachment-selector-button-icon-color: var(--str-chat__text-low-emphasis-color);
  /* Color applied to an icon in a button that opens attachment selector when hovered over */
  --str-chat__attachment-selector-button-icon-color-hover: var(--str-chat__primary-color);
  /* Color applied to an attachment selector menu item icon when hovered over */
  --str-chat__attachment-selector-actions-menu-button-icon-color: var(--str-chat__primary-color);
  /* Color applied to an attachment selector menu item icon when hovered over or focused */
  --str-chat__attachment-selector-actions-menu-button-icon-color-active: var(
    --str-chat__primary-color
  );
}

.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__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__stop-ai-generation-button {
  background-image: var(--str-chat__circle-stop-icon);
  background-color: transparent;
  border-width: 0;
}

.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 {
  --str-chat-icon-color: var(--str-chat__start-recording-audio-button-color);
  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__attachment-selector .str-chat__attachment-selector__menu-button .str-chat__attachment-selector__menu-button__icon {
  background-color: var(--str-chat__attachment-selector-button-icon-color);
  mask: var(--str-chat__add-attachment-icon) no-repeat center/contain;
}

.str-chat__attachment-selector .str-chat__attachment-selector__menu-button:hover .str-chat__attachment-selector__menu-button__icon {
  background-color: var(--str-chat__attachment-selector-button-icon-color-hover);
}

.str-chat__attachment-selector-actions-menu .str-chat__attachment-selector-actions-menu__button {
  color: var(--str-chat__text-low-emphasis-color);
}

.str-chat__attachment-selector-actions-menu .str-chat__attachment-selector-actions-menu__button .str-chat__dialog-menu__button-icon {
  background-color: var(--str-chat__attachment-selector-actions-menu-button-icon-color);
}

.str-chat__attachment-selector-actions-menu .str-chat__attachment-selector-actions-menu__button:hover, .str-chat__attachment-selector-actions-menu .str-chat__attachment-selector-actions-menu__button:focus {
  color: var(--str-chat__text-color);
}

.str-chat__attachment-selector-actions-menu .str-chat__attachment-selector-actions-menu__button:hover .str-chat__dialog-menu__button-icon, .str-chat__attachment-selector-actions-menu .str-chat__attachment-selector-actions-menu__button:focus .str-chat__dialog-menu__button-icon {
  background-color: var(--str-chat__attachment-selector-actions-menu-button-icon-color-active);
}

.str-chat__attachment-selector-actions-menu .str-chat__attachment-selector-actions-menu__upload-file-button .str-chat__dialog-menu__button-icon {
  mask: var(--str-chat__folder-icon) no-repeat center/contain;
}

.str-chat__attachment-selector-actions-menu .str-chat__attachment-selector-actions-menu__create-poll-button .str-chat__dialog-menu__button-icon {
  mask: var(--str-chat__poll-icon) no-repeat center/contain;
}

.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 .str-chat-angular-v5__reaction-selector {
  --str-chat__message-reactions-options-box-shadow: none;
  --str-chat__message-reactions-options-border-radius: 0;
}

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

@media (hover: none) {
  .str-chat__reaction-selector .str-chat__message-reactions-options .str-chat__message-reactions-option:hover {
    background-color: transparent;
  }
}
.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);
  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-header .str-chat__modal-header__title {
  font: var(--str-chat__subtitle2-medium-text);
}

.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__poll .str-chat__poll-header .str-chat__poll-subtitle {
  color: var(--str-chat__text-low-emphasis-color);
}

.str-chat__poll .str-chat__checkmark {
  border-radius: var(--str-chat__border-radius-circle);
  border: 1px solid var(--str-chat__disabled-color);
}

.str-chat__poll .str-chat__checkmark--checked {
  background-color: var(--str-chat__primary-color);
  border: none;
}

.str-chat__poll .str-chat__poll-option-list .str-chat__poll-option.str-chat__poll-option--votable:hover {
  cursor: pointer;
}

.str-chat__poll .str-chat__poll-option-list .str-chat__poll-option .str-chat__poll-option__votes-bar {
  background: linear-gradient(to right, var(--str-chat__primary-color) var(--str-chat__amount-bar-fulfillment), var(--str-chat__surface-color) var(--str-chat__amount-bar-fulfillment));
  border-radius: calc(var(--str-chat__spacing-px) * 4);
}

.str-chat__poll .str-chat__poll-option-list .str-chat__poll-option .str-chat__poll-option__votes-bar--winner {
  background: linear-gradient(to right, var(--str-chat__info-color) var(--str-chat__amount-bar-fulfillment), var(--str-chat__surface-color) var(--str-chat__amount-bar-fulfillment));
}

.str-chat__poll .str-chat__poll-option-list--full,
.str-chat__poll .str-chat__poll-answer,
.str-chat__poll .str-chat__modal__poll-option-list__title,
.str-chat__poll .str-chat__modal__poll-results .str-chat__modal__poll-results__title,
.str-chat__poll .str-chat__modal__poll-results .str-chat__poll-option {
  border-radius: 0.75rem;
}

.str-chat__poll-option-list--full {
  overflow: clip;
}

.str-chat__poll--closed .str-chat__poll-option:hover {
  cursor: unset;
}

.str-chat__poll-actions .str-chat__modal .str-chat__poll-answer__text,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__poll-option-list__title,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__poll-results__title {
  font: var(--str-chat__subtitle-medium-text);
}

.str-chat__poll-actions .str-chat__modal .str-chat__poll-option-list--full,
.str-chat__poll-actions .str-chat__modal .str-chat__poll-answer,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__poll-option-list__title,
.str-chat__poll-actions .str-chat__modal .str-chat__modal__poll-results__title,
.str-chat__poll-actions .str-chat__modal .str-chat__poll-option {
  background-color: var(--str-chat__tertiary-surface-color);
}

.str-chat__poll-actions .str-chat__modal .str-chat__poll-option-list--full .str-chat__poll-option-text {
  font-weight: 500;
}

.str-chat__poll-actions .str-chat__modal .str-chat__poll-option-list--full .str-chat__poll-option--votable:hover {
  background-color: var(--str-chat__secondary-surface-color);
}

.str-chat__poll-actions .str-chat__modal .str-chat__poll-option .str-chat__poll-option__header {
  font: var(--str-chat__subtitle-text);
}

.str-chat__poll-actions .str-chat__modal .str-chat__poll-option .str-chat__poll-option__header .str-chat__poll-option__option-text {
  font: var(--str-chat__subtitle-medium-text);
}

.str-chat__poll-actions .str-chat__modal .str-chat__poll-option .str-chat__poll-option__show-all-votes-button {
  font: var(--str-chat__subtitle-text);
  color: var(--str-chat__primary-color);
}

.str-chat__poll-vote .str-chat__poll-vote__author__name {
  text-transform: capitalize;
}

.str-chat__poll-vote .str-chat__poll-vote__timestamp {
  color: var(--str-chat__text-low-emphasis-color);
}

.str-chat__quoted-poll-preview {
  font: var(--str-chat__body-medium-text);
}

.str-chat__poll-creation-dialog .str-chat__form__input-fieldset {
  border: none;
}

.str-chat__poll-creation-dialog .str-chat__form__expandable-field,
.str-chat__poll-creation-dialog .str-chat__form__input-field:not(.str-chat__form__input-field--with-label),
.str-chat__poll-creation-dialog .str-chat__form__input-field--with-label .str-chat__form__input-field__value {
  background-color: var(--str-chat__tertiary-surface-color);
  border-radius: 0.75rem;
}

.str-chat__poll-creation-dialog .str-chat__form__expandable-field input,
.str-chat__poll-creation-dialog .str-chat__form__input-field:not(.str-chat__form__input-field--with-label) input,
.str-chat__poll-creation-dialog .str-chat__form__input-field--with-label .str-chat__form__input-field__value input {
  border: none;
  background: transparent;
  outline: none;
}

.str-chat__poll-creation-dialog .str-chat__form__expandable-field input, .str-chat__poll-creation-dialog .str-chat__form__expandable-field input::placeholder,
.str-chat__poll-creation-dialog .str-chat__form__input-field:not(.str-chat__form__input-field--with-label) input,
.str-chat__poll-creation-dialog .str-chat__form__input-field:not(.str-chat__form__input-field--with-label) input::placeholder,
.str-chat__poll-creation-dialog .str-chat__form__input-field--with-label .str-chat__form__input-field__value input,
.str-chat__poll-creation-dialog .str-chat__form__input-field--with-label .str-chat__form__input-field__value input::placeholder {
  font: var(--str-chat__subtitle-text);
}

.str-chat__poll-creation-dialog .str-chat__form__input-field--draggable input {
  pointer-events: auto;
}

.str-chat__poll-creation-dialog .str-chat__form__input-field--draggable .str-chat__drag-handle {
  background-color: var(--str-chat__text-low-emphasis-color);
  mask: var(--str-chat__handle-icon) no-repeat center/contain;
}

.str-chat__poll-creation-dialog .str-chat__form__input-field--has-error {
  border: 1px solid var(--str-chat__message-error-message-color);
}

.str-chat__poll-creation-dialog .str-chat__form__expandable-field .str-chat__form__input-field--has-error {
  border: none;
}

.str-chat__poll-creation-dialog .str-chat__form__expandable-field .str-chat__form__input-field--has-error .str-chat__form__input-field__value {
  border: none;
}

.str-chat__poll-creation-dialog .str-chat__form__input-field--with-label.str-chat__form__input-field--has-error {
  border: none;
}

.str-chat__poll-creation-dialog .str-chat__form__input-field--with-label.str-chat__form__input-field--has-error .str-chat__form__input-field__value {
  border: 1px solid var(--str-chat__message-error-message-color);
}

.str-chat__poll-creation-dialog .str-chat__form__switch-field {
  background-color: var(--str-chat__tertiary-surface-color);
  border-radius: 0.75rem;
}

.str-chat__poll-creation-dialog .str-chat__form__switch-field, .str-chat__poll-creation-dialog .str-chat__form__switch-field label {
  cursor: pointer;
}

.str-chat__poll-creation-dialog .str-chat__form__switch-field .str-chat__form__switch-field__switch {
  cursor: pointer;
  background-color: var(--str-chat__text-low-emphasis-color);
  border-radius: 100px;
}

.str-chat__poll-creation-dialog .str-chat__form__switch-field .str-chat__form__switch-field__switch .str-chat__form__switch-field__switch-handle {
  border-radius: var(--str-chat__border-radius-circle);
  background-color: var(--str-chat__disabled-color);
}

.str-chat__poll-creation-dialog .str-chat__form__switch-field .str-chat__form__switch-field__switch.str-chat__form__switch-field__switch--on {
  background-color: var(--str-chat__green600);
}

.str-chat__poll-creation-dialog .str-chat__form__switch-field .str-chat__form__switch-field__switch.str-chat__form__switch-field__switch--on .str-chat__form__switch-field__switch-handle {
  background-color: var(--str-chat__background-color);
  border-radius: var(--str-chat__border-radius-circle);
}

/* Only available in React SDK. */
.str-chat {
  /* The text/icon color of the component */
  --str-chat__search-input-color: var(--str-chat__text-color);
  /* The text/icon color of the component */
  --str-chat__search-input-placeholder-color: var(--str-chat__text-low-emphasis-color);
  /* The text/icon color of the component */
  --str-chat__search-input-icon-color: var(--str-chat__text-low-emphasis-color);
  /* Top border of the component */
  --str-chat__search-input-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__search-input-border-block-end: none;
  /* Left (right in RTL layout) borhe component */
  --str-chat__search-input-border-inline-start: none;
  /* Right (left in RTL layout) borhe component */
  --str-chat__search-input-border-inline-end: none;
  /* The border radius used for the borders of the component */
  --str-chat__search-input-wrapper-border-radius: var(--str-chat__border-radius-circle);
  /* The background color of the component */
  --str-chat__search-input-wrapper-background-color: transparent;
  /* Top border of the component */
  --str-chat__search-input-wrapper-border-block-start: var(--str-chat__surface-color) 1px
  solid;
  /* Bottom border of the component */
  --str-chat__search-input-wrapper-border-block-end: var(--str-chat__surface-color) 1px
  solid;
  /* Left (right in RTL layout) border of the component */
  --str-chat__search-input-wrapper-border-inline-start: var(--str-chat__surface-color) 1px
  solid;
  /* Right (left in RTL layout) border of the component */
  --str-chat__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__search-input-wrapper-active-border-radius: var(--str-chat__border-radius-circle);
  /* The background color of the component */
  --str-chat__search-input-wrapper-active-background-color: transparent;
  /* Top border of the component */
  --str-chat__search-input-wrapper-active-border-block-start: var(--str-chat__primary-color)
  1px solid;
  /* Bottom border of the component */
  --str-chat__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__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__search-input-wrapper-active-border-inline-end: var(--str-chat__primary-color)
  1px solid;
  /* The background applied to channel search result */
  --str-chat__search-result-background-color: transparent;
  /* Top border of the component */
  --str-chat__search-result-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__search-result-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__search-result-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__search-result-border-inline-end: none;
  /* Background color used for the search result hover / focused state */
  --str-chat__search-result-hover-background-color: var(
                  --str-chat__secondary-surface-color
  );
  --str-chat__search-result-list-color: var(--str-chat__text-color);
  --str-chat__search-result-list-background-color: var(--str-chat__secondary-background-color);
  /* Top border of the component  */
  --str-chat__search-result-list-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__search-result-list-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__search-result-list-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__search-result-list-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__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__search-results-header-color: var(--str-chat__text-low-emphasis-color);
  /* The background color used in the search results header  */
  --str-chat__search-results-header-background-color: var(--str-chat__background-color);
  /* Top border of the component  */
  --str-chat__search-results-header-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__search-results-header-border-block-end: var(--str-chat__surface-color) 1px
  solid;
  /* Left (right in RTL layout) border of the component */
  --str-chat__search-results-header-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__search-results-header-border-inline-end: none;
  /* The font color used in the empty search results indicator  */
  --str-chat__search-results-empty-color: var(--str-chat__text-low-emphasis-color);
  /* The icon color used in the empty search results indicator  */
  --str-chat__search-results-empty-icon-color: var(--str-chat__disabled-color);
  /* The background color used in the empty search results indicator  */
  --str-chat__search-results-empty-background-color: var(--str-chat__background-color);
  /* Top border of the component  */
  --str-chat__search-results-empty-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__search-results-empty-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__search-results-empty-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__search-results-empty-border-inline-end: none;
}

.str-chat__search-input--wrapper {
  background: var(--str-chat__search-input-wrapper-background-color);
  color: var(--str-chat__search-input-wrapper-color);
  box-shadow: var(--str-chat__search-input-wrapper-box-shadow);
  border-radius: var(--str-chat__search-input-wrapper-border-radius);
  border-block-start: var(--str-chat__search-input-wrapper-border-block-start);
  border-block-end: var(--str-chat__search-input-wrapper-border-block-end);
  border-inline-start: var(--str-chat__search-input-wrapper-border-inline-start);
  border-inline-end: var(--str-chat__search-input-wrapper-border-inline-end);
}

.str-chat__search-input--wrapper .str-chat__search-input--icon {
  background-image: var(--str-chat__magnifier-glass-icon);
  background-repeat: no-repeat;
}

.str-chat__search-input--wrapper input {
  background: var(--str-chat__search-input-background-color);
  color: var(--str-chat__search-input-color);
  box-shadow: var(--str-chat__search-input-box-shadow);
  border-radius: var(--str-chat__search-input-border-radius);
  border-block-start: var(--str-chat__search-input-border-block-start);
  border-block-end: var(--str-chat__search-input-border-block-end);
  border-inline-start: var(--str-chat__search-input-border-inline-start);
  border-inline-end: var(--str-chat__search-input-border-inline-end);
  outline: none;
  font: var(--str-chat__subtitle-text);
}

.str-chat__search-input--wrapper .str-chat__search-input--clear-button-icon {
  background-color: transparent;
  mask: var(--str-chat__clear-icon) no-repeat center/contain;
}

.str-chat__search-input--wrapper-active {
  background: var(--str-chat__search-input-wrapper-active-background-color);
  color: var(--str-chat__search-input-wrapper-active-color);
  box-shadow: var(--str-chat__search-input-wrapper-active-box-shadow);
  border-radius: var(--str-chat__search-input-wrapper-active-border-radius);
  border-block-start: var(--str-chat__search-input-wrapper-active-border-block-start);
  border-block-end: var(--str-chat__search-input-wrapper-active-border-block-end);
  border-inline-start: var(--str-chat__search-input-wrapper-active-border-inline-start);
  border-inline-end: var(--str-chat__search-input-wrapper-active-border-inline-end);
}

.str-chat__search-input--wrapper-active .str-chat__search-input--clear-button-icon {
  background-color: var(--str-chat__text-low-emphasis-color);
}

.str-chat__search-bar-button--exit-search {
  background: none;
  border: none;
  color: var(--str-chat__primary-color);
  font: var(--str-chat__subtitle-text);
}

.str-chat__search-results-header {
  background: var(--str-chat__search-results-header-background-color);
  color: var(--str-chat__search-results-header-color);
  box-shadow: var(--str-chat__search-results-header-box-shadow);
  border-radius: var(--str-chat__search-results-header-border-radius);
  border-block-start: var(--str-chat__search-results-header-border-block-start);
  border-block-end: var(--str-chat__search-results-header-border-block-end);
  border-inline-start: var(--str-chat__search-results-header-border-inline-start);
  border-inline-end: var(--str-chat__search-results-header-border-inline-end);
  font: var(--str-chat__subtitle-text);
}

.str-chat__search-source-result-list {
  background: var(--str-chat__search-result-list-background-color);
  color: var(--str-chat__search-result-list-color);
  box-shadow: var(--str-chat__search-result-list-box-shadow);
  border-radius: var(--str-chat__search-result-list-border-radius);
  border-block-start: var(--str-chat__search-result-list-border-block-start);
  border-block-end: var(--str-chat__search-result-list-border-block-end);
  border-inline-start: var(--str-chat__search-result-list-border-inline-start);
  border-inline-end: var(--str-chat__search-result-list-border-inline-end);
}

.str-chat__search-source-result-list .str-chat__search-container-empty {
  background: var(--str-chat__search-results-empty-background-color);
  color: var(--str-chat__search-results-empty-color);
  box-shadow: var(--str-chat__search-results-empty-box-shadow);
  border-radius: var(--str-chat__search-results-empty-border-radius);
  border-block-start: var(--str-chat__search-results-empty-border-block-start);
  border-block-end: var(--str-chat__search-results-empty-border-block-end);
  border-inline-start: var(--str-chat__search-results-empty-border-inline-start);
  border-inline-end: var(--str-chat__search-results-empty-border-inline-end);
  font: var(--str-chat__subtitle2-medium-text);
}

.str-chat__search-source-result-list .str-chat__search-container-empty svg path {
  fill: var(--str-chat__search-results-empty-icon-color);
}

.str-chat__search-source-result-list .str-chat__search-result {
  background: var(--str-chat__search-result-background-color);
  color: var(--str-chat__search-result-color);
  box-shadow: var(--str-chat__search-result-box-shadow);
  border-radius: var(--str-chat__search-result-border-radius);
  border-block-start: var(--str-chat__search-result-border-block-start);
  border-block-end: var(--str-chat__search-result-border-block-end);
  border-inline-start: var(--str-chat__search-result-border-inline-start);
  border-inline-end: var(--str-chat__search-result-border-inline-end);
}

.str-chat__search-source-result-list .str-chat__search-result.str-chat__channel-preview-messenger--active {
  background-color: var(--str-chat__channel-preview-active-background-color);
}

.str-chat__search-source-result-list .str-chat__search-result .str-chat__search-result--display-name {
  font: var(--str-chat__subtitle-medium-text);
}

.str-chat__search-source-result-list .str-chat__search-result:hover,
.str-chat__search-source-result-list .str-chat__search-result--focused {
  background-color: var(--str-chat__search-result-hover-background-color);
}

.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;
  }
}
/* Only available in React SDK. */
.str-chat {
  --str-chat-thread-list-border-color: var(--str-chat__surface-color);
  --str-chat-thread-list-container-background-color: var(--str-chat__secondary-background-color);
  --str-chat-unseen-threads-banner-background-color: var(--str-chat__text-color);
  --str-chat-unseen-threads-banner-color: var(--str-chat__opaque-surface-text-color);
  --str-chat-thread-list-item-background-color-default: var(--str-chat__secondary-background-color);
  --str-chat-thread-list-item-background-color-selected: var(--str-chat__surface-color);
  --str-chat-thread-list-item-text-color: var(--str-chat__text-color);
  --str-chat-thread-list-item-text-low-emphasis-color: var(--str-chat__text-low-emphasis-color);
  --str-chat-thread-list-empty-placeholder-background-color: var(
    --str-chat__secondary-background-color
  );
  --str-chat-thread-list-empty-placeholder-color: var(--str-chat__text-low-emphasis-color);
}

.str-chat__thread-list-container {
  background-color: var(--str-chat-thread-list-container-background-color);
}

.str-chat__unseen-threads-banner {
  border-radius: 16px;
  background: var(--str-chat-unseen-threads-banner-background-color);
  color: var(--str-chat-unseen-threads-banner-color);
}

.str-chat__unseen-threads-banner__button {
  --str-chat-icon-color: var(--str-chat-unseen-threads-banner-color);
}

.str-chat__thread-list {
  border-right: 1px solid var(--str-chat-thread-list-border-color);
}

.str-chat__thread-list .str-chat__thread-list-item {
  --str-chat-icon-color: var(--str-chat-thread-list-item-text-color);
  border: none;
  background-color: var(--str-chat-thread-list-item-background-color-default);
  color: var(--str-chat-thread-list-item-text-color);
}

.str-chat__thread-list .str-chat__thread-list-item[aria-selected=true] {
  background-color: var(--str-chat-thread-list-item-background-color-selected);
}

.str-chat__thread-list .str-chat__thread-list-item[aria-selected=true] .str-chat__thread-list-item__parent-message-text,
.str-chat__thread-list .str-chat__thread-list-item[aria-selected=true] .str-chat__thread-list-item__latest-reply-text-and-timestamp {
  color: inherit;
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__parent-message-text {
  color: var(--str-chat-thread-list-item-text-low-emphasis-color);
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__latest-reply {
  --str-chat__avatar-background-color: var(--str-chat__secondary-surface-color);
  --str-chat__avatar-color: var(--str-chat__text-low-emphasis-color);
}

.str-chat__thread-list .str-chat__thread-list-item .str-chat__thread-list-item__latest-reply-text-and-timestamp {
  color: var(--str-chat-thread-list-item-text-low-emphasis-color);
}

.str-chat__thread-list-empty-placeholder {
  --str-chat-icon-color: var(--str-chat-thread-list-empty-placeholder-color);
  background-color: var(--str-chat-thread-list-empty-placeholder-background-color);
  color: var(--str-chat-thread-list-empty-placeholder-color);
}

/* Only available in React SDK. */
.str-chat {
  --str-chat-selector-background-color: var(--str-chat__secondary-background-color);
  --str-chat-selector-border-color: var(--str-chat__surface-color);
  --str-chat-selector-button-color-default: var(--str-chat__text-low-emphasis-color);
  --str-chat-selector-button-color-selected: var(--str-chat__text-color);
  --str-chat-selector-button-background-color-default: transparent;
  --str-chat-selector-button-background-color-selected: var(--str-chat__surface-color);
}

.str-chat__chat-view__selector {
  border-right: 1px solid var(--str-chat-selector-border-color);
  background-color: var(--str-chat-selector-background-color);
}

.str-chat__chat-view__selector-button {
  --str-chat-icon-color: var(--str-chat-selector-button-color-default);
  border: none;
  background: var(--str-chat-selector-button-background-color-default);
  color: var(--str-chat-selector-button-color-default);
}

.str-chat__chat-view__selector-button[aria-selected=true] {
  --str-chat-icon-color: var(--str-chat-selector-button-color-selected);
  color: var(--str-chat-selector-button-color-selected);
  background: var(--str-chat-selector-button-background-color-selected);
}

/* Only available in React SDK. */
.str-chat {
  --str-chat-unread-count-badge-color: var(--str-chat__on-unread-badge-color);
  --str-chat-unread-count-badge-background-color: var(--str-chat__danger-color);
}

.str-chat__unread-count-badge {
  background-color: var(--str-chat-unread-count-badge-background-color);
  color: var(--str-chat-unread-count-badge-color);
  border-radius: 9999px;
}

.str-chat__ai-state-indicator-container {
  background-color: var(--str-chat__grey300);
}

.str-chat__ai-state-indicator-text {
  color: var(--str-chat__text-color);
}

.content {
  pointer-events: none;
}

.handle {
  visibility: hidden;
}

.node-container{
  margin: 0.5rem;
  width: 20rem;
  cursor: pointer;
  overflow: hidden;
  border-radius: 0.75rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 100ms;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  pointer-events: all;
}
.node-container .footer{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  --tw-bg-opacity: 1;
  background-color: rgb(32 126 167 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 50ms;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.node-container .footer:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(27 102 137 / var(--tw-bg-opacity, 1));
}
.node-container .footer button{
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.node-container .footer.readonly{
  cursor: not-allowed;
}
.node-container .footer.readonly button{
  cursor: not-allowed;
}
.node-container.question {
  --primary-node-question-color: #344D80;
  --primary-node-question-border-color: #0e7490;
  border-width: 1px;
  border-color: var(--primary-node-question-border-color);
}
.node-container.question .header{
  display: flex;
  min-height: 4rem;
  width: 100%;
  min-width: 18rem;
  align-items: flex-start;
  justify-content: space-between;
  background-color: var(--primary-node-question-color);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1.5rem;
  padding-right: 0.5rem;
}
.node-container.question span.type, .node-container.question span.valuetype{
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.node-container.question span.title{
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity, 1));
}
.node-container.question span.desc{
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity, 1));
}
.node-container.question p.title{
  width: 100%;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(52 77 128 / var(--tw-text-opacity, 1));
}
.node-container.question .separator{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  width: 100%;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 229 228 / var(--tw-border-opacity, 1));
}
.node-container.information {
  --primary-node-information-color: #b45309;
  --primary-node-information-border-color: #b45309;
  border-width: 1px;
  border-color: var(--primary-node-information-border-color);
}
.node-container.information .header{
  display: flex;
  min-height: 4rem;
  width: 100%;
  min-width: 18rem;
  align-items: flex-start;
  justify-content: space-between;
  background-color: var(--primary-node-information-color);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1.5rem;
  padding-right: 0.5rem;
}
.node-container.information span.type, .node-container.information span.valuetype{
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.node-container.information span.title{
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity, 1));
}
.node-container.information span.desc{
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity, 1));
}
.node-container.information p.title{
  width: 100%;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(52 77 128 / var(--tw-text-opacity, 1));
}
.node-container.information .separator{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  width: 100%;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 229 228 / var(--tw-border-opacity, 1));
}
.node-container.outcome {
  --primary-node-outcome-color: #3f6212;
  --primary-node-outcome-border-color: #3f6212;
  border-width: 1px;
  border-color: var(--primary-node-outcome-border-color);
}
.node-container.outcome .header{
  display: flex;
  min-height: 4rem;
  width: 100%;
  min-width: 18rem;
  align-items: flex-start;
  justify-content: space-between;
  background-color: var(--primary-node-outcome-color);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1.5rem;
  padding-right: 0.5rem;
}
.node-container.outcome span.type, .node-container.outcome span.valuetype{
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.node-container.outcome span.title{
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity, 1));
}
.node-container.outcome span.desc{
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity, 1));
}
.node-container.outcome p.title{
  width: 100%;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(52 77 128 / var(--tw-text-opacity, 1));
}
.node-container.outcome .advice-text{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-family: "Inter";
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity, 1));
}
.node-container.outcome .card-container{
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 229 228 / var(--tw-border-opacity, 1));
  padding: 0.5rem;
}
.node-container.outcome .primary-heading{
  width: 72.50px;
  overflow-wrap: break-word;
  font-family: "Inter";
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity, 1));
}
.node-container.outcome .primary-content{
  margin-left: 0.5rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-family: "Inter";
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity, 1));
}
.node-container.outcome .secondary-heading{
  width: 72.50px;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.node-container.outcome .secondary-content{
  margin-left: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.node-container.outcome .sub-title-cols{
  display: grid;
  grid-auto-columns: max-content;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 0.5rem;
}
.formio-component-form .node-container.outcome .sub-title-cols{
  display: flex;
  flex-direction: row;
}
.node-container.outcome .separator{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  width: 100%;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 229 228 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.node-container.requires-translation {
  --primary-node-question-color: #b91c1c;
  --primary-node-question-border-color: #b91c1c;
  --primary-node-information-color: #b91c1c;
  --primary-node-information-border-color: #b91c1c;
  --primary-node-outcome-color: #b91c1c;
  --primary-node-outcome-border-color: #b91c1c;
}
.node-container.selected{
  border-width: 2px;
}

.placeholder-container{
  margin: 0.25rem;
  display: inline-flex;
  width: 20rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 100ms;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.placeholder-container .placeholder{
  display: inline-flex;
  height: 38px;
  width: 76px;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(30 58 138 / var(--tw-border-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.placeholder-container .placeholder span{
  text-align: center;
  font-family: "Inter";
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.placeholder-container .placeholder.selected{
  --tw-bg-opacity: 1;
  background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
}
.placeholder-container .placeholder.selected span{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.edgeAddButton{
  position: relative;
  z-index: 2;
  display: inline-flex;
  height: 34px;
  width: 38px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(52 77 128 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  pointer-events: all;
}
.edgeAddButton.readonly{
  cursor: pointer;
  --tw-bg-opacity: 1;
  background-color: rgb(168 162 158 / var(--tw-bg-opacity, 1));
}

.edgeRulesButton{
  position: relative;
  z-index: 2;
  display: inline-flex;
  max-width: 30rem;
  cursor: pointer;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  pointer-events: all;
}
.edgeRulesButton span{
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  text-overflow: ellipsis;
}

.rules-separator{
  height: 18px;
  width: 1px;
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

.context-menu {
  background: white;
  border-radius: 4px;
  border-style: solid;
  box-shadow: 10px 19px 20px rgba(0, 0, 0, 0.1);
  position: absolute;
  z-index: 1000;
}

.context-menu-backdrop {
  position: fixed;
  top: 0;
  left: 5rem;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  z-index: 999;
  cursor: pointer;
}

.context-menu button {
  background: white;
  padding: 0.5em;
  text-align: left;
  width: 100%;
  display: flex;
  align-items: center;
}
.context-menu button:not(:last-child) {
  border-bottom: 1px solid #0984e3;
}
.context-menu button ion-icon {
  font-size: 24px;
  color: #0984e3;
  margin-right: 16px;
}

.context-menu button:hover {
  background: #c3e1f8;
}

.status-badge{
  display: none;
  height: 38px;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}

@media (min-width: 640px){
  .status-badge{
    display: flex;
  }
}
.status-badge.published{
  --tw-bg-opacity: 1;
  background-color: rgb(20 184 166 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.status-badge.draft{
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.status-badge.paused{
  --tw-bg-opacity: 1;
  background-color: rgb(193 187 176 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.status-badge.paused span{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.status-badge.in_review{
  --tw-bg-opacity: 1;
  background-color: rgb(52 77 128 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.status-badge span{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.title-container{
  display: inline-flex;
  width: 100vw;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
}
.title-container h1{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px){
  .title-container h1{
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.actions-container {
  width: calc(100vw - 5rem);
  display: inline-flex;
  height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
}
.actions-container .algorithm-name{
  display: inline-flex;
  min-width: 0px;
  flex-shrink: 1;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.actions-container .algorithm-name .bk-button{
  flex-shrink: 0;
  cursor: pointer;
  stroke-width: 1;
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.actions-container .algorithm-name .bk-button:hover{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.actions-container .algorithm-name .launch-button{
  margin-left: 1rem;
  display: none;
  flex-shrink: 0;
  cursor: pointer;
  stroke-width: 1;
  color: hsla(220, 42%, 35%, 1);
}
.actions-container .algorithm-name .launch-button:hover{
  color: hsla(220, 100%, 35%, 1);
}
@media (min-width: 640px){
  .actions-container .algorithm-name .launch-button{
    display: block;
  }
}
.actions-container .actions{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.actions-container h2{
  min-width: 2rem;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px){
  .actions-container h2{
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
.actions-container button{
  display: inline-flex;
  height: 38px;
  width: 82px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(32 126 167 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.actions-container button:hover{
  cursor: pointer;
  --tw-bg-opacity: 1;
  background-color: rgb(32 126 167 / var(--tw-bg-opacity, 1));
}
.actions-container button.disabled{
  pointer-events: none;
  cursor: not-allowed;
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.actions-container button.disabled:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.actions-container button.disabled span{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.actions-container button span{
  text-align: center;
  font-family: "Inter";
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.actions-container button svg.ionicon {
  color: white;
  stroke: white !important;
}
.actions-container button.formula-btn{
  height: 38px;
  width: auto;
  border-width: 1px;
  border-color: hsla(220, 42%, 35%, 1);
  background-color: transparent;
}
@media (min-width: 768px){
  .actions-container button.formula-btn{
    width: 155px;
  }
}
.actions-container button.formula-btn span{
  display: none;
  flex-grow: 1;
  color: hsla(220, 42%, 35%, 1);
}
@media (min-width: 768px){
  .actions-container button.formula-btn span{
    display: block;
  }
}
.actions-container button.formula-btn svg{
  flex-shrink: 1;
  stroke: #344D80 !important;
}
.actions-container button.formula-btn:hover{
  background-color: hsla(220, 42%, 35%, 1);
}
.actions-container button.formula-btn:hover span{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.actions-container button.formula-btn:hover svg {
  stroke: white !important;
}

.title-panel {
  margin: 0px !important;
}

.node-actions-container{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 229 228 / var(--tw-border-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.node-actions-separator{
  height: 1rem;
  width: 0.125rem;
  --tw-bg-opacity: 1;
  background-color: rgb(231 229 228 / var(--tw-bg-opacity, 1));
}

.node-actions-icon{
  cursor: pointer;
  stroke: #e7e5e4;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.node-actions-icon:hover{
  stroke: #fff;
}

.node-actions-container.readonly{
  cursor: not-allowed;
}

.badge{
  max-width: 9rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  text-align: center;
  font-family: "Inter";
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.badge span{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: content-box;
  white-space: normal;
}

.option-value{
  min-height: 35.3px;
  background-color: transparent;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(14 116 144 / var(--tw-text-opacity, 1));
}
.option-value span{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: content-box;
  white-space: normal;
}

span.options{
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  width: 5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity, 1));
}

span.options-image{
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  width: 5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity, 1));
}

span.optionValue{
  height: 4rem;
  min-height: 4rem;
  width: 7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-family: "Inter";
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(14 116 144 / var(--tw-text-opacity, 1));
}

.optionLabel{
  text-align: left;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(231 229 228 / var(--tw-text-opacity, 1));
}

.options-scroll-container{
  display: flex;
  max-height: 9rem;
  overflow: hidden;
}

.more-options{
  padding-left: 5rem;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.image-text.value{
  background-color: transparent;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(14 116 144 / var(--tw-text-opacity, 1));
}

.preview-icon{
  cursor: pointer;
  --tw-text-opacity: 1;
  color: rgb(52 77 128 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 75ms;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.preview-icon:hover{
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-text-opacity: 1;
  color: rgb(14 116 144 / var(--tw-text-opacity, 1));
}

.preview-image-container{
  position: relative;
  display: flex;
  width: 12rem;
  align-items: center;
  justify-content: space-between;
}

.image-dialog {
  border: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1024px;
  overflow: hidden;
  border-radius: 0.75rem;
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.overlay-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.image-close{
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  --tw-scale-x: .9;
  --tw-scale-y: .9;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  cursor: pointer;
  background-color: transparent;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 75ms;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.image-close:hover{
  --tw-scale-x: 1.25;
  --tw-scale-y: 1.25;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.image-scroll-container{
  max-height: 104px;
  overflow: hidden;
}

.react-language-dropdown{
  z-index: 50;
}
.react-language-dropdown .language-dropdown-input{
  display: inline-flex;
  height: 38px;
  width: auto;
  max-width: 16rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.react-language-dropdown .language-dropdown-input:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
}
.react-language-dropdown .language-dropdown-input:disabled{
  cursor: not-allowed;
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
.react-language-dropdown .language-dropdown-input-text{
  text-align: center;
  font-family: "Inter";
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.react-language-dropdown .language-dropdown-input-chevron{
  flex-shrink: 0;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.react-language-dropdown .custom-select-options{
  position: absolute;
  top: 100%;
  right: 0px;
  z-index: 50;
  margin-top: 6px;
  display: inline-flex;
  max-height: 10rem;
  width: 100%;
  min-width: 15rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: auto;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 229 228 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.react-language-dropdown .custom-select-option{
  z-index: 50;
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  align-self: stretch;
  border-radius: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.react-language-dropdown .custom-select-option:focus, .react-language-dropdown .custom-select-option:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.react-language-dropdown .custom-select-option span{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-family: "Inter";
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity, 1));
}
.react-language-dropdown .custom-select-option .custom-select-option-label{
  display: flex;
  align-items: center;
  gap: 14px;
}
.react-language-dropdown .custom-select-option .custom-select-option-check{
  flex-shrink: 0;
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.react-language-dropdown .disabled{
  pointer-events: none;
  cursor: not-allowed;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.react-language-dropdown .disabled:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(214 211 209 / var(--tw-bg-opacity, 1));
}

.react-language-backdrop{
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 40;
  height: 100%;
  width: 100%;
  cursor: pointer;
}

.react-status-dropdown{
  z-index: 50;
}
.react-status-dropdown .status-badge{
  display: none;
  height: 38px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}
@media (min-width: 640px){
  .react-status-dropdown .status-badge{
    display: flex;
  }
}
.react-status-dropdown .status-badge.published{
  --tw-bg-opacity: 1;
  background-color: rgb(20 184 166 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.react-status-dropdown .status-badge.draft{
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.react-status-dropdown .status-badge.paused{
  --tw-bg-opacity: 1;
  background-color: rgb(193 187 176 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.react-status-dropdown .status-badge.paused span{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.react-status-dropdown .status-badge.in_review{
  --tw-bg-opacity: 1;
  background-color: rgb(52 77 128 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.react-status-dropdown .status-badge.loading, .react-status-dropdown .status-badge.pending-changes{
  cursor: not-allowed;
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.react-status-dropdown .status-badge span{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.react-status-dropdown .custom-select-options{
  position: absolute;
  top: 100%;
  right: 0px;
  z-index: 50;
  margin-top: 6px;
  display: inline-flex;
  max-height: 10rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: auto;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 229 228 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.react-status-dropdown .custom-select-option{
  z-index: 50;
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  align-self: stretch;
  border-radius: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.react-status-dropdown .custom-select-option:focus, .react-status-dropdown .custom-select-option:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.react-status-dropdown .custom-select-option span{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-family: "Inter";
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity, 1));
}
.react-status-dropdown .custom-select-option .custom-select-option-label{
  display: flex;
  align-items: center;
  gap: 14px;
}
.react-status-dropdown .custom-select-option .custom-select-option-check{
  flex-shrink: 0;
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.react-status-dropdown .disabled{
  pointer-events: none;
  cursor: not-allowed;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.react-status-dropdown .disabled:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(214 211 209 / var(--tw-bg-opacity, 1));
}

.react-status-backdrop{
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 40;
  height: 100%;
  width: 100%;
  cursor: pointer;
}

.str-video{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.closed-captions{
  min-height: 2.5rem;
  width: 100%;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}

.closed-captions__speaker{
  margin-right: 0.25rem;
  margin-left: 0.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.closed-captions__text{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.str-video__call-controls{
  position: sticky;
  bottom: 0px;
  display: flex;
  flex-wrap: wrap;
}

.pip-window{
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}

@keyframes bounce{
  0%, 100%{
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }
  50%{
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}

.animatedChatButton{
  animation: bounce 1s infinite;
}

.chatActionButtonWrapper{
  display: inline-flex;
  height: 38px;
  align-items: flex-start;
  justify-content: flex-start;
}

.chatActionButton{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(52 77 128 / var(--tw-border-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 15px;
  --tw-text-opacity: 1;
  color: rgb(52 77 128 / var(--tw-text-opacity, 1));
}

.chatActionButton:where(.dark, .dark *){
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.callInProgressNotification{
  left: -0.25rem;
  top: -0.125rem;
}

@keyframes pulse{
  50%{
    opacity: .5;
  }
}

.callInProgressNotification{
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --tw-bg-opacity: 1;
  background-color: hsl(109 66% 35% / var(--tw-bg-opacity, 1));
  opacity: 0.05;
}

.pinnedMessageNotification{
  display: flex;
  width: 100%;
  cursor: pointer;
  justify-content: space-between;
  border-bottom-width: 2px;
  --tw-border-opacity: 1;
  border-bottom-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
  background-color: #f2cf1f33;
}

.chatVerticalDivider{
  width: 1px;
  align-self: stretch;
  --tw-bg-opacity: 1;
  background-color: rgb(229 227 222 / var(--tw-bg-opacity, 1));
}

.chatVerticalDivider:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.str-chat__edit-message-form-options{
  gap: 0.5rem;
}

/* based on angular-toastr css https://github.com/Foxandxss/angular-toastr/blob/cb508fe6801d6b288d3afc525bb40fee1b101650/dist/angular-toastr.css */
/* position */
.toast-center-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.toast-top-center {
  top: 0;
  right: 0;
  width: 100%;
}

.toast-bottom-center {
  bottom: 0;
  right: 0;
  width: 100%;
}

.toast-top-full-width {
  top: 0;
  right: 0;
  width: 100%;
}

.toast-bottom-full-width {
  bottom: 0;
  right: 0;
  width: 100%;
}

.toast-top-left {
  top: 12px;
  left: 12px;
}

.toast-top-right {
  top: 12px;
  right: 12px;
}

.toast-bottom-right {
  right: 12px;
  bottom: 12px;
}

.toast-bottom-left {
  bottom: 12px;
  left: 12px;
}

/* toast styles */
.toast-title {
  font-weight: bold;
}

.toast-message {
  word-wrap: break-word;
}

.toast-message a,
.toast-message label {
  color: #FFFFFF;
}

.toast-message a:hover {
  color: #CCCCCC;
  text-decoration: none;
}

.toast-close-button {
  position: relative;
  right: -0.3em;
  top: -0.3em;
  float: right;
  font-size: 20px;
  font-weight: bold;
  color: #FFFFFF;
  text-shadow: 0 1px 0 #ffffff;
  /* opacity: 0.8; */
}

.toast-close-button:hover,
.toast-close-button:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.4;
}

/*Additional properties for button version
 iOS requires the button element instead of an anchor tag.
 If you want the anchor version, it requires `href="#"`.*/
button.toast-close-button {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.toast-container {
  pointer-events: none;
  position: fixed;
  z-index: 999999;
}

.toast-container * {
  box-sizing: border-box;
}

.toast-container .ngx-toastr {
  position: relative;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 15px 15px 15px 50px;
  width: 300px;
  border-radius: 3px 3px 3px 3px;
  background-position: 15px center;
  background-repeat: no-repeat;
  background-size: 24px;
  box-shadow: 0 0 12px #999999;
  color: #FFFFFF;
}

.toast-container .ngx-toastr:hover {
  box-shadow: 0 0 12px #000000;
  opacity: 1;
  cursor: pointer;
}

/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/info-circle.svg */
.toast-info {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTI1NiA4QzExOS4wNDMgOCA4IDExOS4wODMgOCAyNTZjMCAxMzYuOTk3IDExMS4wNDMgMjQ4IDI0OCAyNDhzMjQ4LTExMS4wMDMgMjQ4LTI0OEM1MDQgMTE5LjA4MyAzOTIuOTU3IDggMjU2IDh6bTAgMTEwYzIzLjE5NiAwIDQyIDE4LjgwNCA0MiA0MnMtMTguODA0IDQyLTQyIDQyLTQyLTE4LjgwNC00Mi00MiAxOC44MDQtNDIgNDItNDJ6bTU2IDI1NGMwIDYuNjI3LTUuMzczIDEyLTEyIDEyaC04OGMtNi42MjcgMC0xMi01LjM3My0xMi0xMnYtMjRjMC02LjYyNyA1LjM3My0xMiAxMi0xMmgxMnYtNjRoLTEyYy02LjYyNyAwLTEyLTUuMzczLTEyLTEydi0yNGMwLTYuNjI3IDUuMzczLTEyIDEyLTEyaDY0YzYuNjI3IDAgMTIgNS4zNzMgMTIgMTJ2MTAwaDEyYzYuNjI3IDAgMTIgNS4zNzMgMTIgMTJ2MjR6Jy8+PC9zdmc+");
}

/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/times-circle.svg */
.toast-error {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTI1NiA4QzExOSA4IDggMTE5IDggMjU2czExMSAyNDggMjQ4IDI0OCAyNDgtMTExIDI0OC0yNDhTMzkzIDggMjU2IDh6bTEyMS42IDMxMy4xYzQuNyA0LjcgNC43IDEyLjMgMCAxN0wzMzggMzc3LjZjLTQuNyA0LjctMTIuMyA0LjctMTcgMEwyNTYgMzEybC02NS4xIDY1LjZjLTQuNyA0LjctMTIuMyA0LjctMTcgMEwxMzQuNCAzMzhjLTQuNy00LjctNC43LTEyLjMgMC0xN2w2NS42LTY1LTY1LjYtNjUuMWMtNC43LTQuNy00LjctMTIuMyAwLTE3bDM5LjYtMzkuNmM0LjctNC43IDEyLjMtNC43IDE3IDBsNjUgNjUuNyA2NS4xLTY1LjZjNC43LTQuNyAxMi4zLTQuNyAxNyAwbDM5LjYgMzkuNmM0LjcgNC43IDQuNyAxMi4zIDAgMTdMMzEyIDI1Nmw2NS42IDY1LjF6Jy8+PC9zdmc+");
}

/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/check.svg */
.toast-success {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTE3My44OTggNDM5LjQwNGwtMTY2LjQtMTY2LjRjLTkuOTk3LTkuOTk3LTkuOTk3LTI2LjIwNiAwLTM2LjIwNGwzNi4yMDMtMzYuMjA0YzkuOTk3LTkuOTk4IDI2LjIwNy05Ljk5OCAzNi4yMDQgMEwxOTIgMzEyLjY5IDQzMi4wOTUgNzIuNTk2YzkuOTk3LTkuOTk3IDI2LjIwNy05Ljk5NyAzNi4yMDQgMGwzNi4yMDMgMzYuMjA0YzkuOTk3IDkuOTk3IDkuOTk3IDI2LjIwNiAwIDM2LjIwNGwtMjk0LjQgMjk0LjQwMWMtOS45OTggOS45OTctMjYuMjA3IDkuOTk3LTM2LjIwNC0uMDAxeicvPjwvc3ZnPg==");
}

/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/exclamation-triangle.svg */
.toast-warning {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1NzYgNTEyJyB3aWR0aD0nNTc2JyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTU2OS41MTcgNDQwLjAxM0M1ODcuOTc1IDQ3Mi4wMDcgNTY0LjgwNiA1MTIgNTI3Ljk0IDUxMkg0OC4wNTRjLTM2LjkzNyAwLTU5Ljk5OS00MC4wNTUtNDEuNTc3LTcxLjk4N0wyNDYuNDIzIDIzLjk4NWMxOC40NjctMzIuMDA5IDY0LjcyLTMxLjk1MSA4My4xNTQgMGwyMzkuOTQgNDE2LjAyOHpNMjg4IDM1NGMtMjUuNDA1IDAtNDYgMjAuNTk1LTQ2IDQ2czIwLjU5NSA0NiA0NiA0NiA0Ni0yMC41OTUgNDYtNDYtMjAuNTk1LTQ2LTQ2LTQ2em0tNDMuNjczLTE2NS4zNDZsNy40MTggMTM2Yy4zNDcgNi4zNjQgNS42MDkgMTEuMzQ2IDExLjk4MiAxMS4zNDZoNDguNTQ2YzYuMzczIDAgMTEuNjM1LTQuOTgyIDExLjk4Mi0xMS4zNDZsNy40MTgtMTM2Yy4zNzUtNi44NzQtNS4wOTgtMTIuNjU0LTExLjk4Mi0xMi42NTRoLTYzLjM4M2MtNi44ODQgMC0xMi4zNTYgNS43OC0xMS45ODEgMTIuNjU0eicvPjwvc3ZnPg==");
}

.toast-container.toast-top-center .ngx-toastr,
.toast-container.toast-bottom-center .ngx-toastr {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.toast-container.toast-top-full-width .ngx-toastr,
.toast-container.toast-bottom-full-width .ngx-toastr {
  width: 96%;
  margin-left: auto;
  margin-right: auto;
}

.ngx-toastr {
  background-color: #030303;
  pointer-events: auto;
}

.toast-success {
  background-color: #51A351;
}

.toast-error {
  background-color: #BD362F;
}

.toast-info {
  background-color: #2F96B4;
}

.toast-warning {
  background-color: #F89406;
}

.toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background-color: #000000;
  opacity: 0.4;
}

/* Responsive Design */
@media all and (max-width: 240px) {
  .toast-container .ngx-toastr.div {
    padding: 8px 8px 8px 50px;
    width: 11em;
  }
  .toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
}
@media all and (min-width: 241px) and (max-width: 480px) {
  .toast-container .ngx-toastr.div {
    padding: 8px 8px 8px 50px;
    width: 18em;
  }
  .toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
}
@media all and (min-width: 481px) and (max-width: 768px) {
  .toast-container .ngx-toastr.div {
    padding: 15px 15px 15px 50px;
    width: 25em;
  }
}
/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: "FontAwesome";
  src: url('fontawesome-webfont.eot?v=4.7.0');
  src: url('fontawesome-webfont.eot?#iefix&v=4.7.0') format("embedded-opentype"), url('fontawesome-webfont.woff2?v=4.7.0') format("woff2"), url('fontawesome-webfont.woff?v=4.7.0') format("woff"), url('fontawesome-webfont.ttf?v=4.7.0') format("truetype"), url('fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format("svg");
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* makes the font 33% larger relative to the icon container */
.fa-lg {
  font-size: 1.3333333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}

.fa-2x {
  font-size: 2em;
}

.fa-3x {
  font-size: 3em;
}

.fa-4x {
  font-size: 4em;
}

.fa-5x {
  font-size: 5em;
}

.fa-fw {
  width: 1.2857142857em;
  text-align: center;
}

.fa-ul {
  padding-left: 0;
  margin-left: 2.1428571429em;
  list-style-type: none;
}
.fa-ul > li {
  position: relative;
}

.fa-li {
  position: absolute;
  left: -2.1428571429em;
  width: 2.1428571429em;
  top: 0.1428571429em;
  text-align: center;
}
.fa-li.fa-lg {
  left: -1.8571428571em;
}

.fa-border {
  padding: 0.2em 0.25em 0.15em;
  border: solid 0.08em #eee;
  border-radius: 0.1em;
}

.fa-pull-left {
  float: left;
}

.fa-pull-right {
  float: right;
}

.fa.fa-pull-left {
  margin-right: 0.3em;
}
.fa.fa-pull-right {
  margin-left: 0.3em;
}

/* Deprecated as of 4.4.0 */
.pull-right {
  float: right;
}

.pull-left {
  float: left;
}

.fa.pull-left {
  margin-right: 0.3em;
}
.fa.pull-right {
  margin-left: 0.3em;
}

.fa-spin {
  animation: fa-spin 2s infinite linear;
}

.fa-pulse {
  animation: fa-spin 1s infinite steps(8);
}
@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
.fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  transform: rotate(90deg);
}

.fa-rotate-180 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  transform: rotate(180deg);
}

.fa-rotate-270 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
  transform: rotate(270deg);
}

.fa-flip-horizontal {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  transform: scale(-1, 1);
}

.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  transform: scale(1, -1);
}

:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
  filter: none;
}

.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}

.fa-stack-1x, .fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}

.fa-stack-1x {
  line-height: inherit;
}

.fa-stack-2x {
  font-size: 2em;
}

.fa-inverse {
  color: #fff;
}

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
   readers do not read off random characters that represent icons */
.fa-glass:before {
  content: "\f000";
}

.fa-music:before {
  content: "\f001";
}

.fa-search:before {
  content: "\f002";
}

.fa-envelope-o:before {
  content: "\f003";
}

.fa-heart:before {
  content: "\f004";
}

.fa-star:before {
  content: "\f005";
}

.fa-star-o:before {
  content: "\f006";
}

.fa-user:before {
  content: "\f007";
}

.fa-film:before {
  content: "\f008";
}

.fa-th-large:before {
  content: "\f009";
}

.fa-th:before {
  content: "\f00a";
}

.fa-th-list:before {
  content: "\f00b";
}

.fa-check:before {
  content: "\f00c";
}

.fa-remove:before,
.fa-close:before,
.fa-times:before {
  content: "\f00d";
}

.fa-search-plus:before {
  content: "\f00e";
}

.fa-search-minus:before {
  content: "\f010";
}

.fa-power-off:before {
  content: "\f011";
}

.fa-signal:before {
  content: "\f012";
}

.fa-gear:before,
.fa-cog:before {
  content: "\f013";
}

.fa-trash-o:before {
  content: "\f014";
}

.fa-home:before {
  content: "\f015";
}

.fa-file-o:before {
  content: "\f016";
}

.fa-clock-o:before {
  content: "\f017";
}

.fa-road:before {
  content: "\f018";
}

.fa-download:before {
  content: "\f019";
}

.fa-arrow-circle-o-down:before {
  content: "\f01a";
}

.fa-arrow-circle-o-up:before {
  content: "\f01b";
}

.fa-inbox:before {
  content: "\f01c";
}

.fa-play-circle-o:before {
  content: "\f01d";
}

.fa-rotate-right:before,
.fa-repeat:before {
  content: "\f01e";
}

.fa-refresh:before {
  content: "\f021";
}

.fa-list-alt:before {
  content: "\f022";
}

.fa-lock:before {
  content: "\f023";
}

.fa-flag:before {
  content: "\f024";
}

.fa-headphones:before {
  content: "\f025";
}

.fa-volume-off:before {
  content: "\f026";
}

.fa-volume-down:before {
  content: "\f027";
}

.fa-volume-up:before {
  content: "\f028";
}

.fa-qrcode:before {
  content: "\f029";
}

.fa-barcode:before {
  content: "\f02a";
}

.fa-tag:before {
  content: "\f02b";
}

.fa-tags:before {
  content: "\f02c";
}

.fa-book:before {
  content: "\f02d";
}

.fa-bookmark:before {
  content: "\f02e";
}

.fa-print:before {
  content: "\f02f";
}

.fa-camera:before {
  content: "\f030";
}

.fa-font:before {
  content: "\f031";
}

.fa-bold:before {
  content: "\f032";
}

.fa-italic:before {
  content: "\f033";
}

.fa-text-height:before {
  content: "\f034";
}

.fa-text-width:before {
  content: "\f035";
}

.fa-align-left:before {
  content: "\f036";
}

.fa-align-center:before {
  content: "\f037";
}

.fa-align-right:before {
  content: "\f038";
}

.fa-align-justify:before {
  content: "\f039";
}

.fa-list:before {
  content: "\f03a";
}

.fa-dedent:before,
.fa-outdent:before {
  content: "\f03b";
}

.fa-indent:before {
  content: "\f03c";
}

.fa-video-camera:before {
  content: "\f03d";
}

.fa-photo:before,
.fa-image:before,
.fa-picture-o:before {
  content: "\f03e";
}

.fa-pencil:before {
  content: "\f040";
}

.fa-map-marker:before {
  content: "\f041";
}

.fa-adjust:before {
  content: "\f042";
}

.fa-tint:before {
  content: "\f043";
}

.fa-edit:before,
.fa-pencil-square-o:before {
  content: "\f044";
}

.fa-share-square-o:before {
  content: "\f045";
}

.fa-check-square-o:before {
  content: "\f046";
}

.fa-arrows:before {
  content: "\f047";
}

.fa-step-backward:before {
  content: "\f048";
}

.fa-fast-backward:before {
  content: "\f049";
}

.fa-backward:before {
  content: "\f04a";
}

.fa-play:before {
  content: "\f04b";
}

.fa-pause:before {
  content: "\f04c";
}

.fa-stop:before {
  content: "\f04d";
}

.fa-forward:before {
  content: "\f04e";
}

.fa-fast-forward:before {
  content: "\f050";
}

.fa-step-forward:before {
  content: "\f051";
}

.fa-eject:before {
  content: "\f052";
}

.fa-chevron-left:before {
  content: "\f053";
}

.fa-chevron-right:before {
  content: "\f054";
}

.fa-plus-circle:before {
  content: "\f055";
}

.fa-minus-circle:before {
  content: "\f056";
}

.fa-times-circle:before {
  content: "\f057";
}

.fa-check-circle:before {
  content: "\f058";
}

.fa-question-circle:before {
  content: "\f059";
}

.fa-info-circle:before {
  content: "\f05a";
}

.fa-crosshairs:before {
  content: "\f05b";
}

.fa-times-circle-o:before {
  content: "\f05c";
}

.fa-check-circle-o:before {
  content: "\f05d";
}

.fa-ban:before {
  content: "\f05e";
}

.fa-arrow-left:before {
  content: "\f060";
}

.fa-arrow-right:before {
  content: "\f061";
}

.fa-arrow-up:before {
  content: "\f062";
}

.fa-arrow-down:before {
  content: "\f063";
}

.fa-mail-forward:before,
.fa-share:before {
  content: "\f064";
}

.fa-expand:before {
  content: "\f065";
}

.fa-compress:before {
  content: "\f066";
}

.fa-plus:before {
  content: "\f067";
}

.fa-minus:before {
  content: "\f068";
}

.fa-asterisk:before {
  content: "\f069";
}

.fa-exclamation-circle:before {
  content: "\f06a";
}

.fa-gift:before {
  content: "\f06b";
}

.fa-leaf:before {
  content: "\f06c";
}

.fa-fire:before {
  content: "\f06d";
}

.fa-eye:before {
  content: "\f06e";
}

.fa-eye-slash:before {
  content: "\f070";
}

.fa-warning:before,
.fa-exclamation-triangle:before {
  content: "\f071";
}

.fa-plane:before {
  content: "\f072";
}

.fa-calendar:before {
  content: "\f073";
}

.fa-random:before {
  content: "\f074";
}

.fa-comment:before {
  content: "\f075";
}

.fa-magnet:before {
  content: "\f076";
}

.fa-chevron-up:before {
  content: "\f077";
}

.fa-chevron-down:before {
  content: "\f078";
}

.fa-retweet:before {
  content: "\f079";
}

.fa-shopping-cart:before {
  content: "\f07a";
}

.fa-folder:before {
  content: "\f07b";
}

.fa-folder-open:before {
  content: "\f07c";
}

.fa-arrows-v:before {
  content: "\f07d";
}

.fa-arrows-h:before {
  content: "\f07e";
}

.fa-bar-chart-o:before,
.fa-bar-chart:before {
  content: "\f080";
}

.fa-twitter-square:before {
  content: "\f081";
}

.fa-facebook-square:before {
  content: "\f082";
}

.fa-camera-retro:before {
  content: "\f083";
}

.fa-key:before {
  content: "\f084";
}

.fa-gears:before,
.fa-cogs:before {
  content: "\f085";
}

.fa-comments:before {
  content: "\f086";
}

.fa-thumbs-o-up:before {
  content: "\f087";
}

.fa-thumbs-o-down:before {
  content: "\f088";
}

.fa-star-half:before {
  content: "\f089";
}

.fa-heart-o:before {
  content: "\f08a";
}

.fa-sign-out:before {
  content: "\f08b";
}

.fa-linkedin-square:before {
  content: "\f08c";
}

.fa-thumb-tack:before {
  content: "\f08d";
}

.fa-external-link:before {
  content: "\f08e";
}

.fa-sign-in:before {
  content: "\f090";
}

.fa-trophy:before {
  content: "\f091";
}

.fa-github-square:before {
  content: "\f092";
}

.fa-upload:before {
  content: "\f093";
}

.fa-lemon-o:before {
  content: "\f094";
}

.fa-phone:before {
  content: "\f095";
}

.fa-square-o:before {
  content: "\f096";
}

.fa-bookmark-o:before {
  content: "\f097";
}

.fa-phone-square:before {
  content: "\f098";
}

.fa-twitter:before {
  content: "\f099";
}

.fa-facebook-f:before,
.fa-facebook:before {
  content: "\f09a";
}

.fa-github:before {
  content: "\f09b";
}

.fa-unlock:before {
  content: "\f09c";
}

.fa-credit-card:before {
  content: "\f09d";
}

.fa-feed:before,
.fa-rss:before {
  content: "\f09e";
}

.fa-hdd-o:before {
  content: "\f0a0";
}

.fa-bullhorn:before {
  content: "\f0a1";
}

.fa-bell:before {
  content: "\f0f3";
}

.fa-certificate:before {
  content: "\f0a3";
}

.fa-hand-o-right:before {
  content: "\f0a4";
}

.fa-hand-o-left:before {
  content: "\f0a5";
}

.fa-hand-o-up:before {
  content: "\f0a6";
}

.fa-hand-o-down:before {
  content: "\f0a7";
}

.fa-arrow-circle-left:before {
  content: "\f0a8";
}

.fa-arrow-circle-right:before {
  content: "\f0a9";
}

.fa-arrow-circle-up:before {
  content: "\f0aa";
}

.fa-arrow-circle-down:before {
  content: "\f0ab";
}

.fa-globe:before {
  content: "\f0ac";
}

.fa-wrench:before {
  content: "\f0ad";
}

.fa-tasks:before {
  content: "\f0ae";
}

.fa-filter:before {
  content: "\f0b0";
}

.fa-briefcase:before {
  content: "\f0b1";
}

.fa-arrows-alt:before {
  content: "\f0b2";
}

.fa-group:before,
.fa-users:before {
  content: "\f0c0";
}

.fa-chain:before,
.fa-link:before {
  content: "\f0c1";
}

.fa-cloud:before {
  content: "\f0c2";
}

.fa-flask:before {
  content: "\f0c3";
}

.fa-cut:before,
.fa-scissors:before {
  content: "\f0c4";
}

.fa-copy:before,
.fa-files-o:before {
  content: "\f0c5";
}

.fa-paperclip:before {
  content: "\f0c6";
}

.fa-save:before,
.fa-floppy-o:before {
  content: "\f0c7";
}

.fa-square:before {
  content: "\f0c8";
}

.fa-navicon:before,
.fa-reorder:before,
.fa-bars:before {
  content: "\f0c9";
}

.fa-list-ul:before {
  content: "\f0ca";
}

.fa-list-ol:before {
  content: "\f0cb";
}

.fa-strikethrough:before {
  content: "\f0cc";
}

.fa-underline:before {
  content: "\f0cd";
}

.fa-table:before {
  content: "\f0ce";
}

.fa-magic:before {
  content: "\f0d0";
}

.fa-truck:before {
  content: "\f0d1";
}

.fa-pinterest:before {
  content: "\f0d2";
}

.fa-pinterest-square:before {
  content: "\f0d3";
}

.fa-google-plus-square:before {
  content: "\f0d4";
}

.fa-google-plus:before {
  content: "\f0d5";
}

.fa-money:before {
  content: "\f0d6";
}

.fa-caret-down:before {
  content: "\f0d7";
}

.fa-caret-up:before {
  content: "\f0d8";
}

.fa-caret-left:before {
  content: "\f0d9";
}

.fa-caret-right:before {
  content: "\f0da";
}

.fa-columns:before {
  content: "\f0db";
}

.fa-unsorted:before,
.fa-sort:before {
  content: "\f0dc";
}

.fa-sort-down:before,
.fa-sort-desc:before {
  content: "\f0dd";
}

.fa-sort-up:before,
.fa-sort-asc:before {
  content: "\f0de";
}

.fa-envelope:before {
  content: "\f0e0";
}

.fa-linkedin:before {
  content: "\f0e1";
}

.fa-rotate-left:before,
.fa-undo:before {
  content: "\f0e2";
}

.fa-legal:before,
.fa-gavel:before {
  content: "\f0e3";
}

.fa-dashboard:before,
.fa-tachometer:before {
  content: "\f0e4";
}

.fa-comment-o:before {
  content: "\f0e5";
}

.fa-comments-o:before {
  content: "\f0e6";
}

.fa-flash:before,
.fa-bolt:before {
  content: "\f0e7";
}

.fa-sitemap:before {
  content: "\f0e8";
}

.fa-umbrella:before {
  content: "\f0e9";
}

.fa-paste:before,
.fa-clipboard:before {
  content: "\f0ea";
}

.fa-lightbulb-o:before {
  content: "\f0eb";
}

.fa-exchange:before {
  content: "\f0ec";
}

.fa-cloud-download:before {
  content: "\f0ed";
}

.fa-cloud-upload:before {
  content: "\f0ee";
}

.fa-user-md:before {
  content: "\f0f0";
}

.fa-stethoscope:before {
  content: "\f0f1";
}

.fa-suitcase:before {
  content: "\f0f2";
}

.fa-bell-o:before {
  content: "\f0a2";
}

.fa-coffee:before {
  content: "\f0f4";
}

.fa-cutlery:before {
  content: "\f0f5";
}

.fa-file-text-o:before {
  content: "\f0f6";
}

.fa-building-o:before {
  content: "\f0f7";
}

.fa-hospital-o:before {
  content: "\f0f8";
}

.fa-ambulance:before {
  content: "\f0f9";
}

.fa-medkit:before {
  content: "\f0fa";
}

.fa-fighter-jet:before {
  content: "\f0fb";
}

.fa-beer:before {
  content: "\f0fc";
}

.fa-h-square:before {
  content: "\f0fd";
}

.fa-plus-square:before {
  content: "\f0fe";
}

.fa-angle-double-left:before {
  content: "\f100";
}

.fa-angle-double-right:before {
  content: "\f101";
}

.fa-angle-double-up:before {
  content: "\f102";
}

.fa-angle-double-down:before {
  content: "\f103";
}

.fa-angle-left:before {
  content: "\f104";
}

.fa-angle-right:before {
  content: "\f105";
}

.fa-angle-up:before {
  content: "\f106";
}

.fa-angle-down:before {
  content: "\f107";
}

.fa-desktop:before {
  content: "\f108";
}

.fa-laptop:before {
  content: "\f109";
}

.fa-tablet:before {
  content: "\f10a";
}

.fa-mobile-phone:before,
.fa-mobile:before {
  content: "\f10b";
}

.fa-circle-o:before {
  content: "\f10c";
}

.fa-quote-left:before {
  content: "\f10d";
}

.fa-quote-right:before {
  content: "\f10e";
}

.fa-spinner:before {
  content: "\f110";
}

.fa-circle:before {
  content: "\f111";
}

.fa-mail-reply:before,
.fa-reply:before {
  content: "\f112";
}

.fa-github-alt:before {
  content: "\f113";
}

.fa-folder-o:before {
  content: "\f114";
}

.fa-folder-open-o:before {
  content: "\f115";
}

.fa-smile-o:before {
  content: "\f118";
}

.fa-frown-o:before {
  content: "\f119";
}

.fa-meh-o:before {
  content: "\f11a";
}

.fa-gamepad:before {
  content: "\f11b";
}

.fa-keyboard-o:before {
  content: "\f11c";
}

.fa-flag-o:before {
  content: "\f11d";
}

.fa-flag-checkered:before {
  content: "\f11e";
}

.fa-terminal:before {
  content: "\f120";
}

.fa-code:before {
  content: "\f121";
}

.fa-mail-reply-all:before,
.fa-reply-all:before {
  content: "\f122";
}

.fa-star-half-empty:before,
.fa-star-half-full:before,
.fa-star-half-o:before {
  content: "\f123";
}

.fa-location-arrow:before {
  content: "\f124";
}

.fa-crop:before {
  content: "\f125";
}

.fa-code-fork:before {
  content: "\f126";
}

.fa-unlink:before,
.fa-chain-broken:before {
  content: "\f127";
}

.fa-question:before {
  content: "\f128";
}

.fa-info:before {
  content: "\f129";
}

.fa-exclamation:before {
  content: "\f12a";
}

.fa-superscript:before {
  content: "\f12b";
}

.fa-subscript:before {
  content: "\f12c";
}

.fa-eraser:before {
  content: "\f12d";
}

.fa-puzzle-piece:before {
  content: "\f12e";
}

.fa-microphone:before {
  content: "\f130";
}

.fa-microphone-slash:before {
  content: "\f131";
}

.fa-shield:before {
  content: "\f132";
}

.fa-calendar-o:before {
  content: "\f133";
}

.fa-fire-extinguisher:before {
  content: "\f134";
}

.fa-rocket:before {
  content: "\f135";
}

.fa-maxcdn:before {
  content: "\f136";
}

.fa-chevron-circle-left:before {
  content: "\f137";
}

.fa-chevron-circle-right:before {
  content: "\f138";
}

.fa-chevron-circle-up:before {
  content: "\f139";
}

.fa-chevron-circle-down:before {
  content: "\f13a";
}

.fa-html5:before {
  content: "\f13b";
}

.fa-css3:before {
  content: "\f13c";
}

.fa-anchor:before {
  content: "\f13d";
}

.fa-unlock-alt:before {
  content: "\f13e";
}

.fa-bullseye:before {
  content: "\f140";
}

.fa-ellipsis-h:before {
  content: "\f141";
}

.fa-ellipsis-v:before {
  content: "\f142";
}

.fa-rss-square:before {
  content: "\f143";
}

.fa-play-circle:before {
  content: "\f144";
}

.fa-ticket:before {
  content: "\f145";
}

.fa-minus-square:before {
  content: "\f146";
}

.fa-minus-square-o:before {
  content: "\f147";
}

.fa-level-up:before {
  content: "\f148";
}

.fa-level-down:before {
  content: "\f149";
}

.fa-check-square:before {
  content: "\f14a";
}

.fa-pencil-square:before {
  content: "\f14b";
}

.fa-external-link-square:before {
  content: "\f14c";
}

.fa-share-square:before {
  content: "\f14d";
}

.fa-compass:before {
  content: "\f14e";
}

.fa-toggle-down:before,
.fa-caret-square-o-down:before {
  content: "\f150";
}

.fa-toggle-up:before,
.fa-caret-square-o-up:before {
  content: "\f151";
}

.fa-toggle-right:before,
.fa-caret-square-o-right:before {
  content: "\f152";
}

.fa-euro:before,
.fa-eur:before {
  content: "\f153";
}

.fa-gbp:before {
  content: "\f154";
}

.fa-dollar:before,
.fa-usd:before {
  content: "\f155";
}

.fa-rupee:before,
.fa-inr:before {
  content: "\f156";
}

.fa-cny:before,
.fa-rmb:before,
.fa-yen:before,
.fa-jpy:before {
  content: "\f157";
}

.fa-ruble:before,
.fa-rouble:before,
.fa-rub:before {
  content: "\f158";
}

.fa-won:before,
.fa-krw:before {
  content: "\f159";
}

.fa-bitcoin:before,
.fa-btc:before {
  content: "\f15a";
}

.fa-file:before {
  content: "\f15b";
}

.fa-file-text:before {
  content: "\f15c";
}

.fa-sort-alpha-asc:before {
  content: "\f15d";
}

.fa-sort-alpha-desc:before {
  content: "\f15e";
}

.fa-sort-amount-asc:before {
  content: "\f160";
}

.fa-sort-amount-desc:before {
  content: "\f161";
}

.fa-sort-numeric-asc:before {
  content: "\f162";
}

.fa-sort-numeric-desc:before {
  content: "\f163";
}

.fa-thumbs-up:before {
  content: "\f164";
}

.fa-thumbs-down:before {
  content: "\f165";
}

.fa-youtube-square:before {
  content: "\f166";
}

.fa-youtube:before {
  content: "\f167";
}

.fa-xing:before {
  content: "\f168";
}

.fa-xing-square:before {
  content: "\f169";
}

.fa-youtube-play:before {
  content: "\f16a";
}

.fa-dropbox:before {
  content: "\f16b";
}

.fa-stack-overflow:before {
  content: "\f16c";
}

.fa-instagram:before {
  content: "\f16d";
}

.fa-flickr:before {
  content: "\f16e";
}

.fa-adn:before {
  content: "\f170";
}

.fa-bitbucket:before {
  content: "\f171";
}

.fa-bitbucket-square:before {
  content: "\f172";
}

.fa-tumblr:before {
  content: "\f173";
}

.fa-tumblr-square:before {
  content: "\f174";
}

.fa-long-arrow-down:before {
  content: "\f175";
}

.fa-long-arrow-up:before {
  content: "\f176";
}

.fa-long-arrow-left:before {
  content: "\f177";
}

.fa-long-arrow-right:before {
  content: "\f178";
}

.fa-apple:before {
  content: "\f179";
}

.fa-windows:before {
  content: "\f17a";
}

.fa-android:before {
  content: "\f17b";
}

.fa-linux:before {
  content: "\f17c";
}

.fa-dribbble:before {
  content: "\f17d";
}

.fa-skype:before {
  content: "\f17e";
}

.fa-foursquare:before {
  content: "\f180";
}

.fa-trello:before {
  content: "\f181";
}

.fa-female:before {
  content: "\f182";
}

.fa-male:before {
  content: "\f183";
}

.fa-gittip:before,
.fa-gratipay:before {
  content: "\f184";
}

.fa-sun-o:before {
  content: "\f185";
}

.fa-moon-o:before {
  content: "\f186";
}

.fa-archive:before {
  content: "\f187";
}

.fa-bug:before {
  content: "\f188";
}

.fa-vk:before {
  content: "\f189";
}

.fa-weibo:before {
  content: "\f18a";
}

.fa-renren:before {
  content: "\f18b";
}

.fa-pagelines:before {
  content: "\f18c";
}

.fa-stack-exchange:before {
  content: "\f18d";
}

.fa-arrow-circle-o-right:before {
  content: "\f18e";
}

.fa-arrow-circle-o-left:before {
  content: "\f190";
}

.fa-toggle-left:before,
.fa-caret-square-o-left:before {
  content: "\f191";
}

.fa-dot-circle-o:before {
  content: "\f192";
}

.fa-wheelchair:before {
  content: "\f193";
}

.fa-vimeo-square:before {
  content: "\f194";
}

.fa-turkish-lira:before,
.fa-try:before {
  content: "\f195";
}

.fa-plus-square-o:before {
  content: "\f196";
}

.fa-space-shuttle:before {
  content: "\f197";
}

.fa-slack:before {
  content: "\f198";
}

.fa-envelope-square:before {
  content: "\f199";
}

.fa-wordpress:before {
  content: "\f19a";
}

.fa-openid:before {
  content: "\f19b";
}

.fa-institution:before,
.fa-bank:before,
.fa-university:before {
  content: "\f19c";
}

.fa-mortar-board:before,
.fa-graduation-cap:before {
  content: "\f19d";
}

.fa-yahoo:before {
  content: "\f19e";
}

.fa-google:before {
  content: "\f1a0";
}

.fa-reddit:before {
  content: "\f1a1";
}

.fa-reddit-square:before {
  content: "\f1a2";
}

.fa-stumbleupon-circle:before {
  content: "\f1a3";
}

.fa-stumbleupon:before {
  content: "\f1a4";
}

.fa-delicious:before {
  content: "\f1a5";
}

.fa-digg:before {
  content: "\f1a6";
}

.fa-pied-piper-pp:before {
  content: "\f1a7";
}

.fa-pied-piper-alt:before {
  content: "\f1a8";
}

.fa-drupal:before {
  content: "\f1a9";
}

.fa-joomla:before {
  content: "\f1aa";
}

.fa-language:before {
  content: "\f1ab";
}

.fa-fax:before {
  content: "\f1ac";
}

.fa-building:before {
  content: "\f1ad";
}

.fa-child:before {
  content: "\f1ae";
}

.fa-paw:before {
  content: "\f1b0";
}

.fa-spoon:before {
  content: "\f1b1";
}

.fa-cube:before {
  content: "\f1b2";
}

.fa-cubes:before {
  content: "\f1b3";
}

.fa-behance:before {
  content: "\f1b4";
}

.fa-behance-square:before {
  content: "\f1b5";
}

.fa-steam:before {
  content: "\f1b6";
}

.fa-steam-square:before {
  content: "\f1b7";
}

.fa-recycle:before {
  content: "\f1b8";
}

.fa-automobile:before,
.fa-car:before {
  content: "\f1b9";
}

.fa-cab:before,
.fa-taxi:before {
  content: "\f1ba";
}

.fa-tree:before {
  content: "\f1bb";
}

.fa-spotify:before {
  content: "\f1bc";
}

.fa-deviantart:before {
  content: "\f1bd";
}

.fa-soundcloud:before {
  content: "\f1be";
}

.fa-database:before {
  content: "\f1c0";
}

.fa-file-pdf-o:before {
  content: "\f1c1";
}

.fa-file-word-o:before {
  content: "\f1c2";
}

.fa-file-excel-o:before {
  content: "\f1c3";
}

.fa-file-powerpoint-o:before {
  content: "\f1c4";
}

.fa-file-photo-o:before,
.fa-file-picture-o:before,
.fa-file-image-o:before {
  content: "\f1c5";
}

.fa-file-zip-o:before,
.fa-file-archive-o:before {
  content: "\f1c6";
}

.fa-file-sound-o:before,
.fa-file-audio-o:before {
  content: "\f1c7";
}

.fa-file-movie-o:before,
.fa-file-video-o:before {
  content: "\f1c8";
}

.fa-file-code-o:before {
  content: "\f1c9";
}

.fa-vine:before {
  content: "\f1ca";
}

.fa-codepen:before {
  content: "\f1cb";
}

.fa-jsfiddle:before {
  content: "\f1cc";
}

.fa-life-bouy:before,
.fa-life-buoy:before,
.fa-life-saver:before,
.fa-support:before,
.fa-life-ring:before {
  content: "\f1cd";
}

.fa-circle-o-notch:before {
  content: "\f1ce";
}

.fa-ra:before,
.fa-resistance:before,
.fa-rebel:before {
  content: "\f1d0";
}

.fa-ge:before,
.fa-empire:before {
  content: "\f1d1";
}

.fa-git-square:before {
  content: "\f1d2";
}

.fa-git:before {
  content: "\f1d3";
}

.fa-y-combinator-square:before,
.fa-yc-square:before,
.fa-hacker-news:before {
  content: "\f1d4";
}

.fa-tencent-weibo:before {
  content: "\f1d5";
}

.fa-qq:before {
  content: "\f1d6";
}

.fa-wechat:before,
.fa-weixin:before {
  content: "\f1d7";
}

.fa-send:before,
.fa-paper-plane:before {
  content: "\f1d8";
}

.fa-send-o:before,
.fa-paper-plane-o:before {
  content: "\f1d9";
}

.fa-history:before {
  content: "\f1da";
}

.fa-circle-thin:before {
  content: "\f1db";
}

.fa-header:before {
  content: "\f1dc";
}

.fa-paragraph:before {
  content: "\f1dd";
}

.fa-sliders:before {
  content: "\f1de";
}

.fa-share-alt:before {
  content: "\f1e0";
}

.fa-share-alt-square:before {
  content: "\f1e1";
}

.fa-bomb:before {
  content: "\f1e2";
}

.fa-soccer-ball-o:before,
.fa-futbol-o:before {
  content: "\f1e3";
}

.fa-tty:before {
  content: "\f1e4";
}

.fa-binoculars:before {
  content: "\f1e5";
}

.fa-plug:before {
  content: "\f1e6";
}

.fa-slideshare:before {
  content: "\f1e7";
}

.fa-twitch:before {
  content: "\f1e8";
}

.fa-yelp:before {
  content: "\f1e9";
}

.fa-newspaper-o:before {
  content: "\f1ea";
}

.fa-wifi:before {
  content: "\f1eb";
}

.fa-calculator:before {
  content: "\f1ec";
}

.fa-paypal:before {
  content: "\f1ed";
}

.fa-google-wallet:before {
  content: "\f1ee";
}

.fa-cc-visa:before {
  content: "\f1f0";
}

.fa-cc-mastercard:before {
  content: "\f1f1";
}

.fa-cc-discover:before {
  content: "\f1f2";
}

.fa-cc-amex:before {
  content: "\f1f3";
}

.fa-cc-paypal:before {
  content: "\f1f4";
}

.fa-cc-stripe:before {
  content: "\f1f5";
}

.fa-bell-slash:before {
  content: "\f1f6";
}

.fa-bell-slash-o:before {
  content: "\f1f7";
}

.fa-trash:before {
  content: "\f1f8";
}

.fa-copyright:before {
  content: "\f1f9";
}

.fa-at:before {
  content: "\f1fa";
}

.fa-eyedropper:before {
  content: "\f1fb";
}

.fa-paint-brush:before {
  content: "\f1fc";
}

.fa-birthday-cake:before {
  content: "\f1fd";
}

.fa-area-chart:before {
  content: "\f1fe";
}

.fa-pie-chart:before {
  content: "\f200";
}

.fa-line-chart:before {
  content: "\f201";
}

.fa-lastfm:before {
  content: "\f202";
}

.fa-lastfm-square:before {
  content: "\f203";
}

.fa-toggle-off:before {
  content: "\f204";
}

.fa-toggle-on:before {
  content: "\f205";
}

.fa-bicycle:before {
  content: "\f206";
}

.fa-bus:before {
  content: "\f207";
}

.fa-ioxhost:before {
  content: "\f208";
}

.fa-angellist:before {
  content: "\f209";
}

.fa-cc:before {
  content: "\f20a";
}

.fa-shekel:before,
.fa-sheqel:before,
.fa-ils:before {
  content: "\f20b";
}

.fa-meanpath:before {
  content: "\f20c";
}

.fa-buysellads:before {
  content: "\f20d";
}

.fa-connectdevelop:before {
  content: "\f20e";
}

.fa-dashcube:before {
  content: "\f210";
}

.fa-forumbee:before {
  content: "\f211";
}

.fa-leanpub:before {
  content: "\f212";
}

.fa-sellsy:before {
  content: "\f213";
}

.fa-shirtsinbulk:before {
  content: "\f214";
}

.fa-simplybuilt:before {
  content: "\f215";
}

.fa-skyatlas:before {
  content: "\f216";
}

.fa-cart-plus:before {
  content: "\f217";
}

.fa-cart-arrow-down:before {
  content: "\f218";
}

.fa-diamond:before {
  content: "\f219";
}

.fa-ship:before {
  content: "\f21a";
}

.fa-user-secret:before {
  content: "\f21b";
}

.fa-motorcycle:before {
  content: "\f21c";
}

.fa-street-view:before {
  content: "\f21d";
}

.fa-heartbeat:before {
  content: "\f21e";
}

.fa-venus:before {
  content: "\f221";
}

.fa-mars:before {
  content: "\f222";
}

.fa-mercury:before {
  content: "\f223";
}

.fa-intersex:before,
.fa-transgender:before {
  content: "\f224";
}

.fa-transgender-alt:before {
  content: "\f225";
}

.fa-venus-double:before {
  content: "\f226";
}

.fa-mars-double:before {
  content: "\f227";
}

.fa-venus-mars:before {
  content: "\f228";
}

.fa-mars-stroke:before {
  content: "\f229";
}

.fa-mars-stroke-v:before {
  content: "\f22a";
}

.fa-mars-stroke-h:before {
  content: "\f22b";
}

.fa-neuter:before {
  content: "\f22c";
}

.fa-genderless:before {
  content: "\f22d";
}

.fa-facebook-official:before {
  content: "\f230";
}

.fa-pinterest-p:before {
  content: "\f231";
}

.fa-whatsapp:before {
  content: "\f232";
}

.fa-server:before {
  content: "\f233";
}

.fa-user-plus:before {
  content: "\f234";
}

.fa-user-times:before {
  content: "\f235";
}

.fa-hotel:before,
.fa-bed:before {
  content: "\f236";
}

.fa-viacoin:before {
  content: "\f237";
}

.fa-train:before {
  content: "\f238";
}

.fa-subway:before {
  content: "\f239";
}

.fa-medium:before {
  content: "\f23a";
}

.fa-yc:before,
.fa-y-combinator:before {
  content: "\f23b";
}

.fa-optin-monster:before {
  content: "\f23c";
}

.fa-opencart:before {
  content: "\f23d";
}

.fa-expeditedssl:before {
  content: "\f23e";
}

.fa-battery-4:before,
.fa-battery:before,
.fa-battery-full:before {
  content: "\f240";
}

.fa-battery-3:before,
.fa-battery-three-quarters:before {
  content: "\f241";
}

.fa-battery-2:before,
.fa-battery-half:before {
  content: "\f242";
}

.fa-battery-1:before,
.fa-battery-quarter:before {
  content: "\f243";
}

.fa-battery-0:before,
.fa-battery-empty:before {
  content: "\f244";
}

.fa-mouse-pointer:before {
  content: "\f245";
}

.fa-i-cursor:before {
  content: "\f246";
}

.fa-object-group:before {
  content: "\f247";
}

.fa-object-ungroup:before {
  content: "\f248";
}

.fa-sticky-note:before {
  content: "\f249";
}

.fa-sticky-note-o:before {
  content: "\f24a";
}

.fa-cc-jcb:before {
  content: "\f24b";
}

.fa-cc-diners-club:before {
  content: "\f24c";
}

.fa-clone:before {
  content: "\f24d";
}

.fa-balance-scale:before {
  content: "\f24e";
}

.fa-hourglass-o:before {
  content: "\f250";
}

.fa-hourglass-1:before,
.fa-hourglass-start:before {
  content: "\f251";
}

.fa-hourglass-2:before,
.fa-hourglass-half:before {
  content: "\f252";
}

.fa-hourglass-3:before,
.fa-hourglass-end:before {
  content: "\f253";
}

.fa-hourglass:before {
  content: "\f254";
}

.fa-hand-grab-o:before,
.fa-hand-rock-o:before {
  content: "\f255";
}

.fa-hand-stop-o:before,
.fa-hand-paper-o:before {
  content: "\f256";
}

.fa-hand-scissors-o:before {
  content: "\f257";
}

.fa-hand-lizard-o:before {
  content: "\f258";
}

.fa-hand-spock-o:before {
  content: "\f259";
}

.fa-hand-pointer-o:before {
  content: "\f25a";
}

.fa-hand-peace-o:before {
  content: "\f25b";
}

.fa-trademark:before {
  content: "\f25c";
}

.fa-registered:before {
  content: "\f25d";
}

.fa-creative-commons:before {
  content: "\f25e";
}

.fa-gg:before {
  content: "\f260";
}

.fa-gg-circle:before {
  content: "\f261";
}

.fa-tripadvisor:before {
  content: "\f262";
}

.fa-odnoklassniki:before {
  content: "\f263";
}

.fa-odnoklassniki-square:before {
  content: "\f264";
}

.fa-get-pocket:before {
  content: "\f265";
}

.fa-wikipedia-w:before {
  content: "\f266";
}

.fa-safari:before {
  content: "\f267";
}

.fa-chrome:before {
  content: "\f268";
}

.fa-firefox:before {
  content: "\f269";
}

.fa-opera:before {
  content: "\f26a";
}

.fa-internet-explorer:before {
  content: "\f26b";
}

.fa-tv:before,
.fa-television:before {
  content: "\f26c";
}

.fa-contao:before {
  content: "\f26d";
}

.fa-500px:before {
  content: "\f26e";
}

.fa-amazon:before {
  content: "\f270";
}

.fa-calendar-plus-o:before {
  content: "\f271";
}

.fa-calendar-minus-o:before {
  content: "\f272";
}

.fa-calendar-times-o:before {
  content: "\f273";
}

.fa-calendar-check-o:before {
  content: "\f274";
}

.fa-industry:before {
  content: "\f275";
}

.fa-map-pin:before {
  content: "\f276";
}

.fa-map-signs:before {
  content: "\f277";
}

.fa-map-o:before {
  content: "\f278";
}

.fa-map:before {
  content: "\f279";
}

.fa-commenting:before {
  content: "\f27a";
}

.fa-commenting-o:before {
  content: "\f27b";
}

.fa-houzz:before {
  content: "\f27c";
}

.fa-vimeo:before {
  content: "\f27d";
}

.fa-black-tie:before {
  content: "\f27e";
}

.fa-fonticons:before {
  content: "\f280";
}

.fa-reddit-alien:before {
  content: "\f281";
}

.fa-edge:before {
  content: "\f282";
}

.fa-credit-card-alt:before {
  content: "\f283";
}

.fa-codiepie:before {
  content: "\f284";
}

.fa-modx:before {
  content: "\f285";
}

.fa-fort-awesome:before {
  content: "\f286";
}

.fa-usb:before {
  content: "\f287";
}

.fa-product-hunt:before {
  content: "\f288";
}

.fa-mixcloud:before {
  content: "\f289";
}

.fa-scribd:before {
  content: "\f28a";
}

.fa-pause-circle:before {
  content: "\f28b";
}

.fa-pause-circle-o:before {
  content: "\f28c";
}

.fa-stop-circle:before {
  content: "\f28d";
}

.fa-stop-circle-o:before {
  content: "\f28e";
}

.fa-shopping-bag:before {
  content: "\f290";
}

.fa-shopping-basket:before {
  content: "\f291";
}

.fa-hashtag:before {
  content: "\f292";
}

.fa-bluetooth:before {
  content: "\f293";
}

.fa-bluetooth-b:before {
  content: "\f294";
}

.fa-percent:before {
  content: "\f295";
}

.fa-gitlab:before {
  content: "\f296";
}

.fa-wpbeginner:before {
  content: "\f297";
}

.fa-wpforms:before {
  content: "\f298";
}

.fa-envira:before {
  content: "\f299";
}

.fa-universal-access:before {
  content: "\f29a";
}

.fa-wheelchair-alt:before {
  content: "\f29b";
}

.fa-question-circle-o:before {
  content: "\f29c";
}

.fa-blind:before {
  content: "\f29d";
}

.fa-audio-description:before {
  content: "\f29e";
}

.fa-volume-control-phone:before {
  content: "\f2a0";
}

.fa-braille:before {
  content: "\f2a1";
}

.fa-assistive-listening-systems:before {
  content: "\f2a2";
}

.fa-asl-interpreting:before,
.fa-american-sign-language-interpreting:before {
  content: "\f2a3";
}

.fa-deafness:before,
.fa-hard-of-hearing:before,
.fa-deaf:before {
  content: "\f2a4";
}

.fa-glide:before {
  content: "\f2a5";
}

.fa-glide-g:before {
  content: "\f2a6";
}

.fa-signing:before,
.fa-sign-language:before {
  content: "\f2a7";
}

.fa-low-vision:before {
  content: "\f2a8";
}

.fa-viadeo:before {
  content: "\f2a9";
}

.fa-viadeo-square:before {
  content: "\f2aa";
}

.fa-snapchat:before {
  content: "\f2ab";
}

.fa-snapchat-ghost:before {
  content: "\f2ac";
}

.fa-snapchat-square:before {
  content: "\f2ad";
}

.fa-pied-piper:before {
  content: "\f2ae";
}

.fa-first-order:before {
  content: "\f2b0";
}

.fa-yoast:before {
  content: "\f2b1";
}

.fa-themeisle:before {
  content: "\f2b2";
}

.fa-google-plus-circle:before,
.fa-google-plus-official:before {
  content: "\f2b3";
}

.fa-fa:before,
.fa-font-awesome:before {
  content: "\f2b4";
}

.fa-handshake-o:before {
  content: "\f2b5";
}

.fa-envelope-open:before {
  content: "\f2b6";
}

.fa-envelope-open-o:before {
  content: "\f2b7";
}

.fa-linode:before {
  content: "\f2b8";
}

.fa-address-book:before {
  content: "\f2b9";
}

.fa-address-book-o:before {
  content: "\f2ba";
}

.fa-vcard:before,
.fa-address-card:before {
  content: "\f2bb";
}

.fa-vcard-o:before,
.fa-address-card-o:before {
  content: "\f2bc";
}

.fa-user-circle:before {
  content: "\f2bd";
}

.fa-user-circle-o:before {
  content: "\f2be";
}

.fa-user-o:before {
  content: "\f2c0";
}

.fa-id-badge:before {
  content: "\f2c1";
}

.fa-drivers-license:before,
.fa-id-card:before {
  content: "\f2c2";
}

.fa-drivers-license-o:before,
.fa-id-card-o:before {
  content: "\f2c3";
}

.fa-quora:before {
  content: "\f2c4";
}

.fa-free-code-camp:before {
  content: "\f2c5";
}

.fa-telegram:before {
  content: "\f2c6";
}

.fa-thermometer-4:before,
.fa-thermometer:before,
.fa-thermometer-full:before {
  content: "\f2c7";
}

.fa-thermometer-3:before,
.fa-thermometer-three-quarters:before {
  content: "\f2c8";
}

.fa-thermometer-2:before,
.fa-thermometer-half:before {
  content: "\f2c9";
}

.fa-thermometer-1:before,
.fa-thermometer-quarter:before {
  content: "\f2ca";
}

.fa-thermometer-0:before,
.fa-thermometer-empty:before {
  content: "\f2cb";
}

.fa-shower:before {
  content: "\f2cc";
}

.fa-bathtub:before,
.fa-s15:before,
.fa-bath:before {
  content: "\f2cd";
}

.fa-podcast:before {
  content: "\f2ce";
}

.fa-window-maximize:before {
  content: "\f2d0";
}

.fa-window-minimize:before {
  content: "\f2d1";
}

.fa-window-restore:before {
  content: "\f2d2";
}

.fa-times-rectangle:before,
.fa-window-close:before {
  content: "\f2d3";
}

.fa-times-rectangle-o:before,
.fa-window-close-o:before {
  content: "\f2d4";
}

.fa-bandcamp:before {
  content: "\f2d5";
}

.fa-grav:before {
  content: "\f2d6";
}

.fa-etsy:before {
  content: "\f2d7";
}

.fa-imdb:before {
  content: "\f2d8";
}

.fa-ravelry:before {
  content: "\f2d9";
}

.fa-eercast:before {
  content: "\f2da";
}

.fa-microchip:before {
  content: "\f2db";
}

.fa-snowflake-o:before {
  content: "\f2dc";
}

.fa-superpowers:before {
  content: "\f2dd";
}

.fa-wpexplorer:before {
  content: "\f2de";
}

.fa-meetup:before {
  content: "\f2e0";
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

body .ab-feed .ab-feed-buttons-wrapper {
  display: none;
}

body .ab-feed {
  background-color: white;
  box-shadow: none;
}

body .ab-feed .ab-feed-body {
  border: none;
}

body .ab-feed.ab-effect-slide {
  transition: none;
  transform: none;
}

body .ab-feed .ab-no-cards-message {
  display: none;
}

body .ab-feed .ab-card {
  border-radius: 10px;
}

body .ab-feed .ab-card .ab-unread-indicator {
  background-color: #CD9197;
}

body .ab-card-body {
  font-family: Poppins;
}

body .notification-dropdown-feed .ab-feed {
  width: 100%;
}

body .notification-dropdown-feed .ab-feed-body {
  width: 100%;
}

.joii-text-primary{
  color: hsla(220, 42%, 35%, 1);
}

.joii-text-primary:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}

.joii-bg-primary{
  background-color: hsla(220, 42%, 35%, 1);
}

.joii-bg-primary:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.joii-bg-info {
  background: #9D5425;
}

.joii-text-info {
  color: #9D5425;
}

.joii-bg-success {
  background: #2A7407;
}

.joii-border-primary{
  border-color: hsla(220, 42%, 35%, 1);
}

.joii-border-primary:where(.dark, .dark *){
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.joii-border-info {
  border-color: #9D5425;
}

.joii-bg-primary-light{
  --tw-bg-opacity: 1;
  background-color: rgb(225 237 248 / var(--tw-bg-opacity, 1));
}

.joii-bg-primary-light:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}

.joii-bg-danger-light {
  background: #fdcaca;
}

.joii-ring-danger-mid {
  --tw-ring-color: rgb(252, 165, 165);
}

.joii-text-danger-dark {
  color: #7f1d1d;
}

.joii-text-secondary{
  color: hsla(45, 100%, 25%, 1);
}

.joii-text-secondary:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(254 215 170 / var(--tw-text-opacity, 1));
}

.joii-raised-well{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.joii-raised-well:where(.dark, .dark *){
  --tw-border-opacity: 1;
  border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}

.joii-btn{
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-width: 2px;
  border-color: transparent;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  font-weight: 500;
  border-radius: 1.5rem;
}

.joii-btn:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width: 2px;
}

.joii-btn-primary{
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-width: 2px;
  border-color: transparent;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  font-weight: 500;
  border-radius: 1.5rem;
}

.joii-btn-primary:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width: 2px;
}

.joii-btn-primary{
  font-size: 1rem;
  line-height: 1.5rem;
  background-color: hsla(220, 42%, 35%, 1);
}

.joii-btn-primary:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.joii-btn-primary{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.joii-btn-primary:hover{
  border-width: 2px;
}

.joii-btn-primary:disabled{
  cursor: not-allowed;
  opacity: 0.5;
}

.joii-btn-primary:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.joii-btn-info{
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-width: 2px;
  border-color: transparent;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  font-weight: 500;
  border-radius: 1.5rem;
}

.joii-btn-info:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width: 2px;
}

.joii-btn-info{
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  background: #9D5425;
}

.joii-btn-info:hover{
  border-width: 2px;
}

.joii-btn-info:disabled{
  cursor: not-allowed;
  opacity: 0.5;
}

.joii-btn-success{
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-width: 2px;
  border-color: transparent;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  font-weight: 500;
  border-radius: 1.5rem;
}

.joii-btn-success:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width: 2px;
}

.joii-btn-success{
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  background: #2A7407;
}

.joii-btn-success:hover{
  border-width: 2px;
}

.joii-btn-success:disabled{
  cursor: not-allowed;
  opacity: 0.5;
}

.joii-btn-primary-sml-round{
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-width: 2px;
  border-color: transparent;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  font-weight: 500;
  border-radius: 1.5rem;
}

.joii-btn-primary-sml-round:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width: 2px;
}

.joii-btn-primary-sml-round{
  font-size: 1rem;
  line-height: 1.5rem;
  background-color: hsla(220, 42%, 35%, 1);
}

.joii-btn-primary-sml-round:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.joii-btn-primary-sml-round{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.joii-btn-primary-sml-round:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.joii-btn-primary-sml-round{
  border-radius: 0.5rem;
}

.joii-btn-primary-sml-round:hover{
  border-width: 2px;
}

.joii-btn-primary-sml-round:disabled{
  cursor: not-allowed;
  opacity: 0.5;
}

.joii-btn-primary-sml-circle{
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-width: 2px;
  border-color: transparent;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  font-weight: 500;
  border-radius: 1.5rem;
}

.joii-btn-primary-sml-circle:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width: 2px;
}

.joii-btn-primary-sml-circle{
  font-size: 1rem;
  line-height: 1.5rem;
  background-color: hsla(220, 42%, 35%, 1);
}

.joii-btn-primary-sml-circle:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.joii-btn-primary-sml-circle{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  border-radius: 100%;
}

.joii-btn-primary-sml-circle:hover{
  border-width: 2px;
}

.joii-btn-primary-sml-circle:disabled{
  cursor: not-allowed;
  opacity: 0.5;
}

.joii-btn-outline{
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-width: 2px;
  border-color: transparent;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  font-weight: 500;
  border-radius: 1.5rem;
}

.joii-btn-outline:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width: 2px;
}

.joii-btn-outline{
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.joii-btn-outline:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.joii-btn-outline{
  color: hsla(220, 42%, 35%, 1);
}

.joii-btn-outline:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}

.joii-btn-outline{
  border-width: 2px;
  border-color: hsla(220, 42%, 35%, 1);
}

.joii-btn-outline:where(.dark, .dark *){
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.joii-btn-outline:disabled{
  cursor: not-allowed;
  opacity: 0.5;
}

.joii-btn-info-outline{
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-width: 2px;
  border-color: transparent;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  font-weight: 500;
  border-radius: 1.5rem;
}

.joii-btn-info-outline:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width: 2px;
}

.joii-btn-info-outline{
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  color: #9D5425;
  border-width: 2px;
  border-color: #9D5425;
}

.joii-btn-info-outline:disabled{
  cursor: not-allowed;
  opacity: 0.5;
}

.joii-btn-outline-sml-round{
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-width: 2px;
  border-color: transparent;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  font-weight: 500;
  border-radius: 1.5rem;
}

.joii-btn-outline-sml-round:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width: 2px;
}

.joii-btn-outline-sml-round{
  font-size: 1rem;
  line-height: 1.5rem;
  color: hsla(220, 42%, 35%, 1);
}

.joii-btn-outline-sml-round:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}

.joii-btn-outline-sml-round{
  border-width: 2px;
  border-radius: 0.5rem;
  border-color: hsla(220, 42%, 35%, 1);
}

.joii-btn-outline-sml-round:where(.dark, .dark *){
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.joii-btn-outline-sml-round:disabled{
  cursor: not-allowed;
  opacity: 0.5;
}

.joii-btn-primary-sml-round ng-icon,
.joii-btn-outline-sml-round ng-icon {
  position: relative;
  top: 4px;
  margin-right: 5px;
}

.google-btn{
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-width: 2px;
  border-color: transparent;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  font-weight: 500;
  border-radius: 1.5rem;
}

.google-btn:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width: 2px;
}

.google-btn{
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.google-btn:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
  border-width: 2px;
}

.joii-btn-light{
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-width: 2px;
  border-color: transparent;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  font-weight: 500;
  border-radius: 1.5rem;
}

.joii-btn-light:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width: 2px;
}

.joii-btn-light{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.joii-btn-light:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.joii-btn-danger{
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-width: 2px;
  border-color: transparent;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  font-weight: 500;
  border-radius: 1.5rem;
}

.joii-btn-danger:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width: 2px;
}

.joii-btn-danger{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.joii-btn-danger:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.joii-btn-secondary{
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.5;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(32 126 167 / var(--tw-text-opacity, 1));
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-width: 2px;
  border-color: transparent;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  font-weight: 500;
  border-radius: 1.5rem;
}

.joii-btn-secondary:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width: 2px;
}

.joii-btn-secondary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 1.5rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(32 126 167 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 100ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.joii-btn-secondary:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(32 126 167 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.form > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.input-group{
  margin-top: 0.75rem;
  display: grid;
}

.formio-component-form .input-group{
  display: flex;
  flex-direction: row;
}

.input-group{
  grid-template-columns: repeat(1, minmax(0, 1fr));
  row-gap: 1.5rem;
  column-gap: 1rem;
}

@media (min-width: 640px){
  .input-group{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.input-group{
  align-items: center;
}

select.disabled{
  cursor: not-allowed;
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(52 77 128 / var(--tw-bg-opacity, 1));
}

.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

.clearfix {
  display: inline-block;
  display: block;
}

body {
  font-family: "Poppins", sans-serif;
  overflow: visible;
}
body div.float-ui-container {
  background: rgb(52, 77, 128);
  color: white;
  border: 0;
  max-width: 250px;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 8px 0 rgba(0, 0, 0, 0.14), 0 1px 14px 0 rgba(0, 0, 0, 0.12);
  z-index: 999;
}
body div.float-ui-container > .float-ui-arrow {
  background-color: rgb(52, 77, 128);
}

.formio-component-submit,
.btn-wizard-nav-submit,
.hiddeninput,
.hiddenoutputs{
  display: none;
}

.rich-text-container ul {
  list-style-type: disc;
  margin-left: 20px;
}

.rich-text-container ol {
  list-style-type: decimal;
  margin-left: 20px;
}

.rich-text-container .ql-editor{
  padding: 0px;
}
.rich-text-container .ql-editor > *{
  padding: 0px;
  font-family: Inter, sans-serif;
  font-size: 16px;
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.rich-text-container .ql-editor li {
  padding-left: 0;
}
.rich-text-container .ql-editor ol {
  margin-left: 0;
  padding-left: 1.5rem;
}
.rich-text-container .ql-editor a{
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}

.rich-text-container.light .ql-editor{
  padding: 0px;
}
.rich-text-container.light .ql-editor > *{
  padding: 0px;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  --tw-text-opacity: 1;
  color: rgb(82 82 91 / var(--tw-text-opacity, 1));
}
.rich-text-container.light .ql-editor li {
  padding-left: 0;
}
.rich-text-container.light .ql-editor ol {
  margin-left: 0;
  padding-left: 1.5rem;
}
.rich-text-container.light .ql-editor a{
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}

.rich-text-container h1,
.rich-text-container h2,
.rich-text-container h3,
.rich-text-container h4,
.rich-text-container h5,
.rich-text-container h6 {
  all: unset;
  font-size: revert;
  font-weight: revert;
  margin-top: revert;
  margin-bottom: revert;
  line-height: revert;
}

.rich-text-container a{
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}

.label-style app-label div label {
  color: #344D80;
  min-width: 150px;
  margin-left: 10px;
  margin-right: 10px;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.react-flow__minimap {
  background: rgba(205, 205, 205, 0.8);
}

.joii-input{
  display: block;
  width: 100%;
  border-radius: 0.375rem;
  border-width: 0px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  font-size: 15px;
}

.joii-input:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.joii-input:focus {
  box-shadow: 0px 0px 0px 4px rgba(59, 130, 246, 0.25);
}

.tooltip-primary-950 div.float-ui-container {
  background: hsl(221, 38%, 21%);
  color: white;
  border: 0;
  max-width: 250px;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 8px 0 rgba(0, 0, 0, 0.14), 0 1px 14px 0 rgba(0, 0, 0, 0.12);
  z-index: 999;
}
.tooltip-primary-950 div.float-ui-container > .float-ui-arrow {
  background-color: hsl(221, 38%, 21%);
}

.language-dropdown {
  background: none !important;
  max-width: unset !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.language-dropdown div.float-ui-container {
  background: white;
  color: white;
  border: 0;
  max-width: 250px;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 8px 0 rgba(0, 0, 0, 0.14), 0 1px 14px 0 rgba(0, 0, 0, 0.12);
  z-index: 999;
}
.language-dropdown div.float-ui-container > .float-ui-arrow {
  background-color: white;
}
.language-dropdown .float-ui-arrow{
  display: none;
}

app-chat-window div.float-ui-container {
  background: transparent;
  color: white;
  border: 0;
  max-width: 250px;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 8px 0 rgba(0, 0, 0, 0.14), 0 1px 14px 0 rgba(0, 0, 0, 0.12);
  z-index: 999;
}
app-chat-window div.float-ui-container > .float-ui-arrow {
  background-color: transparent;
}

quill-editor {
  display: block !important;
}

.ql-toolbar.ql-snow{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 229 228 / var(--tw-border-opacity, 1));
  font-family: "Inter", sans-serif;
}

.ql-container.ql-snow{
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 229 228 / var(--tw-border-opacity, 1));
  font-family: "Inter", sans-serif;
}

.formio-component-form .choices__list:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.formio-component-form .choices__list .choices__item--selectable.is-highlighted:where(.dark, .dark *){
  --tw-bg-opacity: 1 !important;
  background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1)) !important;
}
.formio-component-form .choices__list .choices__input:where(.dark, .dark *){
  --tw-bg-opacity: 1 !important;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1)) !important;
}
.formio-component-form .toggle .form-check{
  border-style: none;
}
.formio-component-form .toggle .form-check-input{
  margin-inline-end: 0.5rem;
  margin-top: 0.3rem;
  height: 0.875rem;
  width: 2rem;
  appearance: none;
  border-radius: 0.4375rem;
  background-color: rgb(0 0 0 / 0.25);
}
.formio-component-form .toggle .form-check-input::before{
  pointer-events: none;
  position: absolute;
  height: 1.5rem;
  width: 0.875rem;
  border-radius: 100%;
  background-color: transparent;
  --tw-content: "";
  content: var(--tw-content);
}
.formio-component-form .toggle .form-check-input::after{
  position: absolute;
  z-index: 0;
  margin-top: -0.1875rem;
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 100%;
  border-style: none;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-content: "";
  content: var(--tw-content);
}
.formio-component-form .toggle .form-check-input:checked{
  background-color: hsla(220, 42%, 35%, 1);
}
.formio-component-form .toggle .form-check-input:checked::after{
  position: absolute;
  z-index: 0;
  margin-top: -3px;
  margin-inline-start: 1.0625rem;
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 100%;
  border-style: none;
  background-color: hsla(220, 42%, 35%, 1);
  --tw-content: "";
  content: var(--tw-content);
}
.formio-component-form .toggle .form-check-input:hover{
  cursor: pointer;
}
.formio-component-form .toggle .form-check-input:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.formio-component-form .toggle .form-check-input:focus::before{
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 0.12;
  content: var(--tw-content);
  --tw-shadow-color: rgb(0 0 0 / 0.6);
  --tw-shadow: var(--tw-shadow-colored);
}
.formio-component-form .toggle .form-check-input:focus::after{
  position: absolute;
  z-index: 1;
  display: block;
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 100%;
  --tw-content: "";
  content: var(--tw-content);
}
.formio-component-form .toggle .form-check-input:focus:checked{
  border-color: hsla(220, 42%, 35%, 1);
  background-color: hsla(220, 42%, 35%, 1);
}
.formio-component-form .toggle .form-check-input:focus:checked::before{
  margin-inline-start: 1.0625rem;
  content: var(--tw-content);
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.formio-component-form .toggle .form-check-label{
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}
.formio-component-form .form-group.pointClicked{
  margin: 0px;
  padding: 0px;
}
.formio-component-form .form-group.pointClicked label{
  display: none;
}
.formio-component-form .form-group.pointClicked .dropdown{
  border-style: none;
  padding: 0px;
  text-align: left;
  font-size: 1.125rem;
  line-height: 1.75rem;
  text-transform: capitalize;
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.formio-component-form .form-group.pointClicked .choices{
  margin: 0px;
  padding: 0px;
}
.formio-component-form .form-group.pointClicked .formio-select-autocomplete-input{
  display: none;
}
.formio-component-form .form-control.open-modal-button{
  display: flex;
  width: 9rem;
  align-items: center;
  justify-content: flex-start;
  gap: 0.625rem;
  border-radius: 0.375rem;
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  text-align: center;
  font-family: "Inter";
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #f1f5f9;
  font-size: 0px;
  --tw-ring-shadow:none;
}
.formio-component-form .form-control.open-modal-button table{
  display: none;
}
.formio-component-form .form-control.open-modal-button:not(:disabled):not(.disabled):hover{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.625rem;
  border-radius: 0.375rem;
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
  text-align: center;
  line-height: 1;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #f1f5f9;
}
.formio-component-form .form-control.open-modal-button:after {
  content: "Specific parts of the body";
  font-size: 0.75rem;
}
.formio-component-form .formio-tagpad-image-container{
  width: 66.666667%;
  max-width: 100% !important;
  max-height: 100% !important;
}
.formio-component-form .formio-tagpad-form-container{
  width: 33.333333%;
  max-width: 100% !important;
  max-height: 100% !important;
}
.formio-modified:not(.has-error) .formio-component-form.toggle .form-check .form-check-label{
  font-family: "Inter";
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.formio-modified:not(.has-error) .formio-component-form.toggle .form-check .form-check-label:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.formio-component-form .btn-warning{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border-radius: 0.5rem;
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  text-align: center;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.formio-component-form .btn-warning:not(:disabled):not(.disabled):hover{
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.formio-component-form .radio input[type=radio],
.formio-component-form .form-radio input[type=radio]{
  display: none;
}
.formio-component-form .form-check-inline .form-check-label,
.formio-component-form .radio .form-check-label, .form-check .formio-component-form:not(.toggle) .form-check-label{
  display: flex;
  height: 38px;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 11px;
  padding-bottom: 11px;
  font-family: "Inter";
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.peer:checked ~ .formio-component-form .form-check-inline .form-check-label,.peer:checked ~ 
.formio-component-form .radio .form-check-label,.peer:checked ~  .form-check .formio-component-form:not(.toggle) .form-check-label{
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.formio-component-form .form-check-inline .form-check-label:where(.dark, .dark *),
.formio-component-form .radio .form-check-label:where(.dark, .dark *), .form-check .formio-component-form:not(.toggle) .form-check-label:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(245 245 245 / var(--tw-text-opacity, 1));
}
.formio-component-form .form-check-inline .form-check-label span:where(.dark, .dark *),
.formio-component-form .radio .form-check-label span:where(.dark, .dark *), .form-check .formio-component-form:not(.toggle) .form-check-label span:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.formio-component-form .form-check-inline.radio-selected .form-check-label,
.formio-component-form .radio.radio-selected .form-check-label, .form-check .formio-component-form:not(.toggle).radio-selected .form-check-label{
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.formio-component-form .form-check-inline.radio-selected .form-check-label:where(.dark, .dark *),
.formio-component-form .radio.radio-selected .form-check-label:where(.dark, .dark *), .form-check .formio-component-form:not(.toggle).radio-selected .form-check-label:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
}
.formio-component-form .form-check-inline.radio-selected .form-check-label,
.formio-component-form .radio.radio-selected .form-check-label, .form-check .formio-component-form:not(.toggle).radio-selected .form-check-label{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.formio-component-form .form-check-inline.radio-selected .form-check-label:where(.dark, .dark *),
.formio-component-form .radio.radio-selected .form-check-label:where(.dark, .dark *), .form-check .formio-component-form:not(.toggle).radio-selected .form-check-label:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.formio-component-form .form-check-inline.radio-selected span:where(.dark, .dark *),
.formio-component-form .radio.radio-selected span:where(.dark, .dark *), .form-check .formio-component-form:not(.toggle).radio-selected span:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.formio-component-form .formio-modified:not(.has-error) .form-check-inline .form-check-label,
.formio-component-form .formio-modified:not(.has-error) .radio .form-check-label, .form-check .formio-component-form .formio-modified:not(.has-error):not(.toggle) .form-check-label{
  display: flex;
  height: 38px;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 11px;
  padding-bottom: 11px;
  font-family: "Inter";
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.peer:checked ~ .formio-component-form .formio-modified:not(.has-error) .form-check-inline .form-check-label,.peer:checked ~ 
.formio-component-form .formio-modified:not(.has-error) .radio .form-check-label,.peer:checked ~  .form-check .formio-component-form .formio-modified:not(.has-error):not(.toggle) .form-check-label{
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.formio-component-form .formio-modified:not(.has-error) .form-check-inline .form-check-label:where(.dark, .dark *),
.formio-component-form .formio-modified:not(.has-error) .radio .form-check-label:where(.dark, .dark *), .form-check .formio-component-form .formio-modified:not(.has-error):not(.toggle) .form-check-label:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(245 245 245 / var(--tw-text-opacity, 1));
}
.formio-component-form .formio-modified:not(.has-error) .form-check-inline.radio-selected .form-check-label,
.formio-component-form .formio-modified:not(.has-error) .radio.radio-selected .form-check-label, .form-check .formio-component-form .formio-modified:not(.has-error):not(.toggle).radio-selected .form-check-label{
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.formio-component-form .formio-modified:not(.has-error) .form-check-inline.radio-selected .form-check-label:where(.dark, .dark *),
.formio-component-form .formio-modified:not(.has-error) .radio.radio-selected .form-check-label:where(.dark, .dark *), .form-check .formio-component-form .formio-modified:not(.has-error):not(.toggle).radio-selected .form-check-label:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
}
.formio-component-form .formio-modified:not(.has-error) .form-check-inline.radio-selected .form-check-label,
.formio-component-form .formio-modified:not(.has-error) .radio.radio-selected .form-check-label, .form-check .formio-component-form .formio-modified:not(.has-error):not(.toggle).radio-selected .form-check-label{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.formio-component-form .formio-modified:not(.has-error) .form-check-inline.radio-selected .form-check-label:where(.dark, .dark *),
.formio-component-form .formio-modified:not(.has-error) .radio.radio-selected .form-check-label:where(.dark, .dark *), .form-check .formio-component-form .formio-modified:not(.has-error):not(.toggle).radio-selected .form-check-label:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.formio-component-form .grid{
  display: flex;
  flex-direction: row;
}
.formio-component-form .form-radio{
  display: flex;
  flex: 1 1 0%;
  flex-direction: row;
  flex-wrap: wrap;
}
.formio-component-form .form-radio > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.formio-component-form .field-wrapper{
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
}
.formio-component-form .field-content {
  margin-left: 10px !important;
}
.formio-component-form .col-form-label,
.formio-component-form label,
.formio-component-form .card-title,
.formio-component-form .form-text{
  font-family: "Inter";
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity, 1));
}
.formio-component-form .col-form-label:where(.dark, .dark *),
.formio-component-form label:where(.dark, .dark *),
.formio-component-form .card-title:where(.dark, .dark *),
.formio-component-form .form-text:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.formio-component-form .col-form-label{
  font-weight: 700;
}
.formio-component-form .form-group{
  padding-left: 0.5rem;
  padding-bottom: 0.5rem;
}
.formio-component-form .formio-component-container:after {
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  border-top-width: 1px;
}
.formio-component-form .formio-component-container:last-child:after {
  content: none;
}
.formio-component-form .card-header{
  --tw-bg-opacity: 1;
  background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
}
.formio-component-form .card:where(.dark, .dark *), .formio-component-form .card-header:where(.dark, .dark *){
  --tw-border-opacity: 1;
  border-color: rgb(224 242 254 / var(--tw-border-opacity, 1));
}
.formio-component-form .card-header-tabs{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.formio-component-form .card-header-tabs:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.formio-component-form .card-header-tabs .nav-tabs .nav-item{
  cursor: pointer;
  white-space: nowrap;
  border-bottom-width: 2px;
  border-color: transparent;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.formio-component-form .card-header-tabs .nav-tabs .nav-item:hover{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.formio-component-form .card-header-tabs .nav-tabs .nav-item:hover:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.formio-component-form .card-header-tabs .nav-tabs .nav-item .active{
  cursor: pointer;
  white-space: nowrap;
  border-bottom-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(30 58 138 / var(--tw-border-opacity, 1));
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: hsla(220, 42%, 35%, 1);
}
.formio-component-form .card-header-tabs .nav-tabs .nav-item .active:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.formio-component-form .card{
  margin-left: 1rem;
}
.formio-component-form .input-group > .form-control:not([type=hidden]) {
  width: auto;
}
.formio-component-form .col-form-label:after {
  content: "optional";
  padding-left: 0.25rem;
  text-align: center;
  font-family: "Inter";
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.formio-component-form .field-required:after {
  content: "" !important;
}
.formio-component-form .formio-day-component-year,
.formio-component-form .formio-day-component-day,
.formio-component-form .form-control{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
  display: block;
  width: 100%;
  border-radius: 0.375rem;
  border-width: 0px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  font-size: 15px;
}
.formio-component-form .formio-day-component-year:where(.dark, .dark *),
.formio-component-form .formio-day-component-day:where(.dark, .dark *),
.formio-component-form .form-control:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.formio-component-form .formio-day-component-year:focus,
.formio-component-form .formio-day-component-day:focus,
.formio-component-form .form-control:focus {
  box-shadow: 0px 0px 0px 4px rgba(59, 130, 246, 0.25);
}
.formio-component-form .formio-day-component-year::placeholder,
.formio-component-form .formio-day-component-day::placeholder,
.formio-component-form .form-control::placeholder{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.formio-component-form .formio-day-component-year:focus,
.formio-component-form .formio-day-component-day:focus,
.formio-component-form .form-control:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity, 1));
}
.formio-component-form .formio-day-component-year:where(.dark, .dark *),
.formio-component-form .formio-day-component-day:where(.dark, .dark *),
.formio-component-form .form-control:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.formio-component-form .formio-editor-read-only-content:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.formio-component-form .formio-component-panel .card-body{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
}
.formio-component-form .formio-component-panel .card-body::placeholder{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.formio-component-form .formio-component-panel .card-body:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity, 1));
}
.formio-component-form .formio-component-panel .card-body:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.formio-component-form .formio-component-panel .card-header{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
}
.formio-component-form .formio-component-panel .card-header::placeholder{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.formio-component-form .formio-component-panel .card-header:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity, 1));
}
.formio-component-form .formio-component-panel .card-header:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.formio-component-form .formio-component-signature .signature-pad-refresh {
  z-index: 28;
}
.formio-component-form .formio-component-signature .signature-pad-refresh .refresh::before {
  content: "\f021";
}
.formio-component-form .formio-component-datagrid .formio-button-remove-row .remove-circle::before {
  content: "\f014";
}
.formio-component-form .formio-component-datetime .input-group-text .calendar::before {
  content: "\f073";
}
.formio-component-form .formio-modified:not(.has-error) label{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.formio-component-form .formio-modified:not(.has-error) label:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.formio-component-form .choices__input:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.formio-component-form .input-group{
  display: flex;
  flex-direction: row;
  column-gap: 0px;
}
.formio-component-form .input-group .form-control{
  height: 3rem;
}
.formio-component-form .input-group .input-group-prepend,
.formio-component-form .input-group .input-group-append{
  height: 3rem;
}
.formio-component-form .formio-tagpad-remove-button{
  display: none;
}

.formio-dialog.formio-dialog-theme-default .formio-dialog-content.formio-dialog-content{
  position: fixed;
  left: 50%;
  top: 50%;
  margin: 0.25rem;
  max-height: 90vh;
  min-height: 5rem;
  width: 66.666667%;
  --tw-translate-x: -50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  overflow-y: auto;
}

.formio-dialog.formio-dialog-theme-default .formio-dialog-content.formio-dialog-content:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.formio-dialog.formio-dialog-theme-default .formio-dialog-content.formio-dialog-content .btn{
  margin: 0.25rem;
}
.formio-dialog.formio-dialog-theme-default .formio-dialog-content.formio-dialog-content div > .btn{
  margin-top: 1.25rem;
  flex: 1 1 auto;
}
.formio-dialog.formio-dialog-theme-default .formio-dialog-content.formio-dialog-content .card:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.showValidationErrors .formio-component-form .required:not(.formio-modified) .form-check-label{
  --tw-bg-opacity: 1;
  background-color: rgb(252 231 243 / var(--tw-bg-opacity, 1));
}

.showValidationErrors .formio-component-form .required:not(.formio-modified) .form-check-label:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(252 231 243 / var(--tw-bg-opacity, 1));
}

.showValidationErrors .formio-component-form .required:not(.formio-modified) .form-check-label{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.showValidationErrors .formio-component-form .required:not(.formio-modified) .form-check-label:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.showValidationErrors .formio-component-form .has-error .form-check-label{
  --tw-bg-opacity: 1;
  background-color: rgb(252 231 243 / var(--tw-bg-opacity, 1));
}
.showValidationErrors .formio-component-form .has-error .form-check-label:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(252 231 243 / var(--tw-bg-opacity, 1));
}
.showValidationErrors .formio-component-form .has-error .form-check-label{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.showValidationErrors .formio-component-form .has-error .form-check-label:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.OT_widget-container {
  background: none !important;
}

.treatmentPlan .toastui-editor-defaultUI{
  border-width: 0px;
}
.treatmentPlan .toastui-editor-defaultUI .toastui-editor-toolbar,
.treatmentPlan .toastui-editor-defaultUI .toastui-editor-mode-switch {
  display: none !important;
}

.toastui-editor-contents:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.toastui-editor-contents p:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.notes .toastui-editor-defaultUI{
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(231 229 228 / var(--tw-border-opacity, 1));
  border-radius: 10px;
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  overflow: hidden;
}
.notes .toastui-editor-defaultUI .toastui-editor-toolbar,
.notes .toastui-editor-defaultUI .toastui-editor-mode-switch {
  display: none !important;
}

.table-column-select app-multi-select div div {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  text-align: start;
  width: 200px;
  top: 5px;
  right: 5px;
}

.OT_archiving {
  display: none !important;
}

.cdk-overlay-container {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.cdk-overlay-connected-position-bounding-box {
  position: absolute;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 1px;
  min-height: 1px;
}

.cdk-overlay-pane {
  position: absolute;
  pointer-events: auto;
  box-sizing: border-box;
  z-index: 1000;
  display: flex;
  max-width: 100%;
  max-height: 100%;
}

.dialog-backdrop{
  background-color: rgb(23 23 23 / 0.5);
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.trail-table app-sortable-table div {
  overflow: visible;
}

td.list-trials-id-col {
  width: 10%;
  max-width: 10%;
}

td.list-trials-name-col {
  width: 35%;
  max-width: 35%;
}
td.list-trials-name-col span {
  width: 100%;
  max-width: 100%;
}

td.list-trials-description-col {
  width: 40%;
  max-width: 40%;
}
td.list-trials-description-col span {
  width: 100%;
  max-width: 100%;
}

td.list-trials-status-col {
  width: 15%;
  max-width: 15%;
}
td.list-trials-status-col span {
  width: 100%;
  max-width: 100%;
}

.trials-table table {
  table-layout: auto;
  width: 100%;
}
.trials-table table th, .trials-table table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.float-ui-container.float-ui-fixed {
  text-wrap: wrap;
}

.toastui-editor-contents {
  z-index: 0;
}

.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

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

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

.visible{
  visibility: visible;
}

.collapse{
  visibility: collapse;
}

.static{
  position: static;
}

.fixed{
  position: fixed;
}

.\!absolute{
  position: absolute !important;
}

.absolute{
  position: absolute;
}

.relative{
  position: relative;
}

.sticky{
  position: sticky;
}

.inset-0{
  inset: 0px;
}

.inset-x-0{
  left: 0px;
  right: 0px;
}

.inset-y-0{
  top: 0px;
  bottom: 0px;
}

.\!top-3\/4{
  top: 75% !important;
}

.-left-6{
  left: -1.5rem;
}

.-right-0\.5{
  right: -0.125rem;
}

.-right-3{
  right: -0.75rem;
}

.-right-5{
  right: -1.25rem;
}

.-right-52{
  right: -13rem;
}

.-top-0\.5{
  top: -0.125rem;
}

.-top-1{
  top: -0.25rem;
}

.-top-3{
  top: -0.75rem;
}

.-top-4{
  top: -1rem;
}

.-top-48{
  top: -12rem;
}

.-top-\[15px\]{
  top: -15px;
}

.-top-\[2px\]{
  top: -2px;
}

.-top-\[4px\]{
  top: -4px;
}

.-top-\[50px\]{
  top: -50px;
}

.-top-\[80px\]{
  top: -80px;
}

.-top-px{
  top: -1px;
}

.bottom-0{
  bottom: 0px;
}

.bottom-1\/2{
  bottom: 50%;
}

.bottom-10{
  bottom: 2.5rem;
}

.bottom-14{
  bottom: 3.5rem;
}

.bottom-2{
  bottom: 0.5rem;
}

.bottom-20{
  bottom: 5rem;
}

.bottom-25{
  bottom: 6.25rem;
}

.bottom-3{
  bottom: 0.75rem;
}

.bottom-4{
  bottom: 1rem;
}

.bottom-44{
  bottom: 11rem;
}

.bottom-5{
  bottom: 1.25rem;
}

.bottom-6{
  bottom: 1.5rem;
}

.bottom-full{
  bottom: 100%;
}

.left-0{
  left: 0px;
}

.left-1{
  left: 0.25rem;
}

.left-1\/2{
  left: 50%;
}

.left-1\/3{
  left: 33.333333%;
}

.left-12{
  left: 3rem;
}

.left-15{
  left: 3.75rem;
}

.left-16{
  left: 4rem;
}

.left-2{
  left: 0.5rem;
}

.left-22{
  left: 5.5rem;
}

.left-28{
  left: 7rem;
}

.left-3{
  left: 0.75rem;
}

.left-4{
  left: 1rem;
}

.left-40{
  left: 10rem;
}

.left-68{
  left: 17rem;
}

.left-\[-0\.25rem\]{
  left: -0.25rem;
}

.left-\[-0\.875rem\]{
  left: -0.875rem;
}

.left-\[18px\]{
  left: 18px;
}

.left-\[20px\]{
  left: 20px;
}

.left-\[25px\]{
  left: 25px;
}

.left-\[30px\]{
  left: 30px;
}

.left-\[4px\]{
  left: 4px;
}

.left-\[58px\]{
  left: 58px;
}

.left-\[6px\]{
  left: 6px;
}

.left-\[8px\]{
  left: 8px;
}

.right-0{
  right: 0px;
}

.right-1{
  right: 0.25rem;
}

.right-1\/2{
  right: 50%;
}

.right-1\/3{
  right: 33.333333%;
}

.right-10{
  right: 2.5rem;
}

.right-2{
  right: 0.5rem;
}

.right-3{
  right: 0.75rem;
}

.right-4{
  right: 1rem;
}

.right-5{
  right: 1.25rem;
}

.right-6{
  right: 1.5rem;
}

.right-9{
  right: 2.25rem;
}

.start-0{
  inset-inline-start: 0px;
}

.top-0{
  top: 0px;
}

.top-1{
  top: 0.25rem;
}

.top-1\/2{
  top: 50%;
}

.top-10{
  top: 2.5rem;
}

.top-14{
  top: 3.5rem;
}

.top-15{
  top: 3.75rem;
}

.top-16{
  top: 4rem;
}

.top-2{
  top: 0.5rem;
}

.top-2\.5{
  top: 0.625rem;
}

.top-22{
  top: 5.5rem;
}

.top-3{
  top: 0.75rem;
}

.top-4{
  top: 1rem;
}

.top-7{
  top: 1.75rem;
}

.top-8{
  top: 2rem;
}

.top-\[12px\]{
  top: 12px;
}

.top-\[18px\]{
  top: 18px;
}

.top-\[1px\]{
  top: 1px;
}

.top-\[20px\]{
  top: 20px;
}

.top-\[2px\]{
  top: 2px;
}

.top-\[3px\]{
  top: 3px;
}

.top-\[43px\]{
  top: 43px;
}

.top-\[45px\]{
  top: 45px;
}

.top-\[4px\]{
  top: 4px;
}

.top-\[58px\]{
  top: 58px;
}

.top-\[65px\]{
  top: 65px;
}

.top-\[73px\]{
  top: 73px;
}

.top-\[80px\]{
  top: 80px;
}

.top-\[82px\]{
  top: 82px;
}

.top-\[8px\]{
  top: 8px;
}

.top-\[9px\]{
  top: 9px;
}

.top-full{
  top: 100%;
}

.z-0{
  z-index: 0;
}

.z-1{
  z-index: 1;
}

.z-10{
  z-index: 10;
}

.z-2{
  z-index: 2;
}

.z-20{
  z-index: 20;
}

.z-30{
  z-index: 30;
}

.z-40{
  z-index: 40;
}

.z-5{
  z-index: 5;
}

.z-50{
  z-index: 50;
}

.z-\[1000\]{
  z-index: 1000;
}

.z-\[1\]{
  z-index: 1;
}

.z-\[2\]{
  z-index: 2;
}

.z-\[9999\]{
  z-index: 9999;
}

.order-1{
  order: 1;
}

.col-span-1{
  grid-column: span 1 / span 1;
}

.col-span-2{
  grid-column: span 2 / span 2;
}

.col-span-3{
  grid-column: span 3 / span 3;
}

.col-span-5{
  grid-column: span 5 / span 5;
}

.col-span-6{
  grid-column: span 6 / span 6;
}

.col-span-full{
  grid-column: 1 / -1;
}

.row-span-1{
  grid-row: span 1 / span 1;
}

.row-span-4{
  grid-row: span 4 / span 4;
}

.float-right{
  float: right;
}

.float-left{
  float: left;
}

.\!-m-px{
  margin: -1px !important;
}

.-m-1\.5{
  margin: -0.375rem;
}

.-m-2\.5{
  margin: -0.625rem;
}

.m-0{
  margin: 0px;
}

.m-1{
  margin: 0.25rem;
}

.m-2{
  margin: 0.5rem;
}

.m-4{
  margin: 1rem;
}

.m-7{
  margin: 1.75rem;
}

.m-auto{
  margin: auto;
}

.-mx-2{
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.-mx-3{
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.-my-1\.5{
  margin-top: -0.375rem;
  margin-bottom: -0.375rem;
}

.-my-6{
  margin-top: -1.5rem;
  margin-bottom: -1.5rem;
}

.mx-2{
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-3{
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.mx-4{
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-\[15\%\]{
  margin-left: 15%;
  margin-right: 15%;
}

.mx-\[3px\]{
  margin-left: 3px;
  margin-right: 3px;
}

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.my-2{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-5{
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.my-6{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.my-7{
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
}

.my-8{
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.my-auto{
  margin-top: auto;
  margin-bottom: auto;
}

.-mb-px{
  margin-bottom: -1px;
}

.-mr-\[100\%\]{
  margin-right: -100%;
}

.-mt-5{
  margin-top: -1.25rem;
}

.mb-0\.5{
  margin-bottom: 0.125rem;
}

.mb-1{
  margin-bottom: 0.25rem;
}

.mb-10{
  margin-bottom: 2.5rem;
}

.mb-11{
  margin-bottom: 2.75rem;
}

.mb-12{
  margin-bottom: 3rem;
}

.mb-14{
  margin-bottom: 3.5rem;
}

.mb-15{
  margin-bottom: 3.75rem;
}

.mb-16{
  margin-bottom: 4rem;
}

.mb-2{
  margin-bottom: 0.5rem;
}

.mb-2\.5{
  margin-bottom: 0.625rem;
}

.mb-20{
  margin-bottom: 5rem;
}

.mb-3{
  margin-bottom: 0.75rem;
}

.mb-4{
  margin-bottom: 1rem;
}

.mb-40{
  margin-bottom: 10rem;
}

.mb-5{
  margin-bottom: 1.25rem;
}

.mb-6{
  margin-bottom: 1.5rem;
}

.mb-7{
  margin-bottom: 1.75rem;
}

.mb-8{
  margin-bottom: 2rem;
}

.mb-\[10px\]{
  margin-bottom: 10px;
}

.mb-\[14px\]{
  margin-bottom: 14px;
}

.me-3{
  margin-inline-end: 0.75rem;
}

.me-4{
  margin-inline-end: 1rem;
}

.ml-0\.5{
  margin-left: 0.125rem;
}

.ml-1{
  margin-left: 0.25rem;
}

.ml-10{
  margin-left: 2.5rem;
}

.ml-2{
  margin-left: 0.5rem;
}

.ml-20{
  margin-left: 5rem;
}

.ml-24{
  margin-left: 6rem;
}

.ml-28{
  margin-left: 7rem;
}

.ml-3{
  margin-left: 0.75rem;
}

.ml-4{
  margin-left: 1rem;
}

.ml-5{
  margin-left: 1.25rem;
}

.ml-6{
  margin-left: 1.5rem;
}

.ml-7{
  margin-left: 1.75rem;
}

.ml-8{
  margin-left: 2rem;
}

.ml-9{
  margin-left: 2.25rem;
}

.ml-\[-2px\]{
  margin-left: -2px;
}

.ml-auto{
  margin-left: auto;
}

.mr-0{
  margin-right: 0px;
}

.mr-0\.5{
  margin-right: 0.125rem;
}

.mr-1{
  margin-right: 0.25rem;
}

.mr-10{
  margin-right: 2.5rem;
}

.mr-2{
  margin-right: 0.5rem;
}

.mr-2\.5{
  margin-right: 0.625rem;
}

.mr-24{
  margin-right: 6rem;
}

.mr-3{
  margin-right: 0.75rem;
}

.mr-4{
  margin-right: 1rem;
}

.mr-5{
  margin-right: 1.25rem;
}

.mr-6{
  margin-right: 1.5rem;
}

.ms-1{
  margin-inline-start: 0.25rem;
}

.ms-2{
  margin-inline-start: 0.5rem;
}

.mt-0{
  margin-top: 0px;
}

.mt-0\.5{
  margin-top: 0.125rem;
}

.mt-1{
  margin-top: 0.25rem;
}

.mt-10{
  margin-top: 2.5rem;
}

.mt-11{
  margin-top: 2.75rem;
}

.mt-12{
  margin-top: 3rem;
}

.mt-15{
  margin-top: 3.75rem;
}

.mt-2{
  margin-top: 0.5rem;
}

.mt-2\.5{
  margin-top: 0.625rem;
}

.mt-22{
  margin-top: 5.5rem;
}

.mt-3{
  margin-top: 0.75rem;
}

.mt-4{
  margin-top: 1rem;
}

.mt-5{
  margin-top: 1.25rem;
}

.mt-6{
  margin-top: 1.5rem;
}

.mt-7{
  margin-top: 1.75rem;
}

.mt-8{
  margin-top: 2rem;
}

.mt-9{
  margin-top: 2.25rem;
}

.mt-\[104px\]{
  margin-top: 104px;
}

.mt-\[116px\]{
  margin-top: 116px;
}

.mt-\[184px\]{
  margin-top: 184px;
}

.mt-auto{
  margin-top: auto;
}

.box-content{
  box-sizing: content-box;
}

.line-clamp-1{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.line-clamp-8{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
}

.block{
  display: block;
}

.inline-block{
  display: inline-block;
}

.inline{
  display: inline;
}

.flex{
  display: flex;
}

.inline-flex{
  display: inline-flex;
}

.table{
  display: table;
}

.flow-root{
  display: flow-root;
}

.grid{
  display: grid;
}

.hidden{
  display: none;
}

.aspect-1{
  aspect-ratio: 1;
}

.aspect-\[2\.4\/1\]{
  aspect-ratio: 2.4/1;
}

.size-8{
  width: 2rem;
  height: 2rem;
}

.\!h-\[80vh\]{
  height: 80vh !important;
}

.\!h-px{
  height: 1px !important;
}

.h-0{
  height: 0px;
}

.h-0\.5{
  height: 0.125rem;
}

.h-1{
  height: 0.25rem;
}

.h-1\.5{
  height: 0.375rem;
}

.h-10{
  height: 2.5rem;
}

.h-11{
  height: 2.75rem;
}

.h-12{
  height: 3rem;
}

.h-14{
  height: 3.5rem;
}

.h-15{
  height: 3.75rem;
}

.h-16{
  height: 4rem;
}

.h-2{
  height: 0.5rem;
}

.h-2\/3{
  height: 66.666667%;
}

.h-20{
  height: 5rem;
}

.h-22{
  height: 5.5rem;
}

.h-24{
  height: 6rem;
}

.h-26{
  height: 6.5rem;
}

.h-28{
  height: 7rem;
}

.h-3{
  height: 0.75rem;
}

.h-3\.5{
  height: 0.875rem;
}

.h-30{
  height: 8.5rem;
}

.h-32{
  height: 8rem;
}

.h-36{
  height: 9rem;
}

.h-4{
  height: 1rem;
}

.h-4\/5{
  height: 80%;
}

.h-40{
  height: 10rem;
}

.h-44{
  height: 11rem;
}

.h-5{
  height: 1.25rem;
}

.h-6{
  height: 1.5rem;
}

.h-60{
  height: 15rem;
}

.h-64{
  height: 16rem;
}

.h-7{
  height: 1.75rem;
}

.h-7\.5{
  height: 1.875rem;
}

.h-72{
  height: 18rem;
}

.h-8{
  height: 1.8rem;
}

.h-80{
  height: 20rem;
}

.h-9{
  height: 2.25rem;
}

.h-96{
  height: 24rem;
}

.h-\[101px\]{
  height: 101px;
}

.h-\[102px\]{
  height: 102px;
}

.h-\[103px\]{
  height: 103px;
}

.h-\[108px\]{
  height: 108px;
}

.h-\[10px\]{
  height: 10px;
}

.h-\[11\.93px\]{
  height: 11.93px;
}

.h-\[116px\]{
  height: 116px;
}

.h-\[124px\]{
  height: 124px;
}

.h-\[130px\]{
  height: 130px;
}

.h-\[149px\]{
  height: 149px;
}

.h-\[154px\]{
  height: 154px;
}

.h-\[156px\]{
  height: 156px;
}

.h-\[170px\]{
  height: 170px;
}

.h-\[17px\]{
  height: 17px;
}

.h-\[180px\]{
  height: 180px;
}

.h-\[189px\]{
  height: 189px;
}

.h-\[18px\]{
  height: 18px;
}

.h-\[19px\]{
  height: 19px;
}

.h-\[1px\]{
  height: 1px;
}

.h-\[200px\]{
  height: 200px;
}

.h-\[210px\]{
  height: 210px;
}

.h-\[21px\]{
  height: 21px;
}

.h-\[220px\]{
  height: 220px;
}

.h-\[231px\]{
  height: 231px;
}

.h-\[248px\]{
  height: 248px;
}

.h-\[250px\]{
  height: 250px;
}

.h-\[26px\]{
  height: 26px;
}

.h-\[29px\]{
  height: 29px;
}

.h-\[2px\]{
  height: 2px;
}

.h-\[313px\]{
  height: 313px;
}

.h-\[32px\]{
  height: 32px;
}

.h-\[33px\]{
  height: 33px;
}

.h-\[34px\]{
  height: 34px;
}

.h-\[356px\]{
  height: 356px;
}

.h-\[36px\]{
  height: 36px;
}

.h-\[37px\]{
  height: 37px;
}

.h-\[38px\]{
  height: 38px;
}

.h-\[3px\]{
  height: 3px;
}

.h-\[40px\]{
  height: 40px;
}

.h-\[416px\]{
  height: 416px;
}

.h-\[42px\]{
  height: 42px;
}

.h-\[45px\]{
  height: 45px;
}

.h-\[46px\]{
  height: 46px;
}

.h-\[480px\]{
  height: 480px;
}

.h-\[500px\]{
  height: 500px;
}

.h-\[520px\]{
  height: 520px;
}

.h-\[52px\]{
  height: 52px;
}

.h-\[53px\]{
  height: 53px;
}

.h-\[54px\]{
  height: 54px;
}

.h-\[58px\]{
  height: 58px;
}

.h-\[600px\]{
  height: 600px;
}

.h-\[60px\]{
  height: 60px;
}

.h-\[61px\]{
  height: 61px;
}

.h-\[64px\]{
  height: 64px;
}

.h-\[66px\]{
  height: 66px;
}

.h-\[66vh\]{
  height: 66vh;
}

.h-\[70px\]{
  height: 70px;
}

.h-\[72px\]{
  height: 72px;
}

.h-\[77px\]{
  height: 77px;
}

.h-\[85px\]{
  height: 85px;
}

.h-\[88px\]{
  height: 88px;
}

.h-\[91px\]{
  height: 91px;
}

.h-\[98px\]{
  height: 98px;
}

.h-auto{
  height: auto;
}

.h-fit{
  height: fit-content;
}

.h-full{
  height: 100%;
}

.h-px{
  height: 1px;
}

.h-screen{
  height: 100vh;
}

.max-h-12{
  max-height: 3rem;
}

.max-h-36{
  max-height: 9rem;
}

.max-h-40{
  max-height: 10rem;
}

.max-h-48{
  max-height: 12rem;
}

.max-h-6{
  max-height: 1.5rem;
}

.max-h-8{
  max-height: 2rem;
}

.max-h-96{
  max-height: 24rem;
}

.max-h-\[100px\]{
  max-height: 100px;
}

.max-h-\[60vh\]{
  max-height: 60vh;
}

.max-h-\[736px\]{
  max-height: 736px;
}

.max-h-\[80vh\]{
  max-height: 80vh;
}

.max-h-\[90vh\]{
  max-height: 90vh;
}

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

.max-h-max{
  max-height: max-content;
}

.max-h-screen{
  max-height: 100vh;
}

.min-h-12{
  min-height: 3rem;
}

.min-h-14{
  min-height: 3.5rem;
}

.min-h-16{
  min-height: 4rem;
}

.min-h-36{
  min-height: 9rem;
}

.min-h-40{
  min-height: 10rem;
}

.min-h-5{
  min-height: 1.25rem;
}

.min-h-6{
  min-height: 1.5rem;
}

.min-h-8{
  min-height: 2rem;
}

.min-h-\[122px\]{
  min-height: 122px;
}

.min-h-\[133px\]{
  min-height: 133px;
}

.min-h-\[150px\]{
  min-height: 150px;
}

.min-h-\[168px\]{
  min-height: 168px;
}

.min-h-\[250px\]{
  min-height: 250px;
}

.min-h-\[300px\]{
  min-height: 300px;
}

.min-h-\[50vh\]{
  min-height: 50vh;
}

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

.min-h-screen{
  min-height: 100vh;
}

.\!w-8\/12{
  width: 66.666667% !important;
}

.\!w-px{
  width: 1px !important;
}

.w-0{
  width: 0px;
}

.w-0\.5{
  width: 0.125rem;
}

.w-1{
  width: 0.25rem;
}

.w-1\/2{
  width: 50%;
}

.w-1\/3{
  width: 33.333333%;
}

.w-1\/4{
  width: 25%;
}

.w-1\/5{
  width: 20%;
}

.w-1\/6{
  width: 16.666667%;
}

.w-10{
  width: 2.5rem;
}

.w-12{
  width: 3rem;
}

.w-14{
  width: 3.5rem;
}

.w-16{
  width: 4rem;
}

.w-2{
  width: 0.5rem;
}

.w-2\/3{
  width: 66.666667%;
}

.w-2\/5{
  width: 40%;
}

.w-20{
  width: 5rem;
}

.w-22{
  width: 5.5rem;
}

.w-24{
  width: 6rem;
}

.w-25{
  width: 6.25rem;
}

.w-26{
  width: 6.5rem;
}

.w-28{
  width: 7rem;
}

.w-3{
  width: 0.75rem;
}

.w-3\.5{
  width: 0.875rem;
}

.w-3\/5{
  width: 60%;
}

.w-32{
  width: 9rem;
}

.w-36{
  width: 9rem;
}

.w-4{
  width: 1rem;
}

.w-4\/5{
  width: 80%;
}

.w-40{
  width: 10rem;
}

.w-5{
  width: 1.25rem;
}

.w-5\/6{
  width: 83.333333%;
}

.w-52{
  width: 13rem;
}

.w-56{
  width: 14rem;
}

.w-6{
  width: 1.5rem;
}

.w-60{
  width: 15rem;
}

.w-64{
  width: 16rem;
}

.w-7{
  width: 1.75rem;
}

.w-72{
  width: 18rem;
}

.w-8{
  width: 2rem;
}

.w-80{
  width: 20rem;
}

.w-9{
  width: 2.25rem;
}

.w-96{
  width: 24rem;
}

.w-\[100px\]{
  width: 100px;
}

.w-\[109px\]{
  width: 109px;
}

.w-\[10px\]{
  width: 10px;
}

.w-\[115px\]{
  width: 115px;
}

.w-\[116px\]{
  width: 116px;
}

.w-\[118px\]{
  width: 118px;
}

.w-\[131px\]{
  width: 131px;
}

.w-\[133px\]{
  width: 133px;
}

.w-\[140px\]{
  width: 140px;
}

.w-\[144px\]{
  width: 144px;
}

.w-\[146\.32px\]{
  width: 146.32px;
}

.w-\[15\%\]{
  width: 15%;
}

.w-\[150px\]{
  width: 150px;
}

.w-\[156px\]{
  width: 156px;
}

.w-\[164px\]{
  width: 164px;
}

.w-\[180px\]{
  width: 180px;
}

.w-\[18px\]{
  width: 18px;
}

.w-\[200px\]{
  width: 200px;
}

.w-\[209px\]{
  width: 209px;
}

.w-\[210px\]{
  width: 210px;
}

.w-\[248px\]{
  width: 248px;
}

.w-\[250px\]{
  width: 250px;
}

.w-\[260px\]{
  width: 260px;
}

.w-\[267px\]{
  width: 267px;
}

.w-\[26px\]{
  width: 26px;
}

.w-\[272px\]{
  width: 272px;
}

.w-\[273px\]{
  width: 273px;
}

.w-\[296px\]{
  width: 296px;
}

.w-\[29px\]{
  width: 29px;
}

.w-\[2px\]{
  width: 2px;
}

.w-\[300px\]{
  width: 300px;
}

.w-\[30px\]{
  width: 30px;
}

.w-\[320px\]{
  width: 320px;
}

.w-\[322px\]{
  width: 322px;
}

.w-\[32px\]{
  width: 32px;
}

.w-\[344px\]{
  width: 344px;
}

.w-\[34px\]{
  width: 34px;
}

.w-\[350px\]{
  width: 350px;
}

.w-\[36px\]{
  width: 36px;
}

.w-\[400px\]{
  width: 400px;
}

.w-\[40px\]{
  width: 40px;
}

.w-\[451px\]{
  width: 451px;
}

.w-\[465px\]{
  width: 465px;
}

.w-\[48px\]{
  width: 48px;
}

.w-\[500px\]{
  width: 500px;
}

.w-\[52px\]{
  width: 52px;
}

.w-\[60\%\]{
  width: 60%;
}

.w-\[624px\]{
  width: 624px;
}

.w-\[647px\]{
  width: 647px;
}

.w-\[66vw\]{
  width: 66vw;
}

.w-\[70px\]{
  width: 70px;
}

.w-\[72px\]{
  width: 72px;
}

.w-\[83px\]{
  width: 83px;
}

.w-\[88px\]{
  width: 88px;
}

.w-\[91px\]{
  width: 91px;
}

.w-\[98\.5\%\]{
  width: 98.5%;
}

.w-\[calc\(100\%-80px\)\]{
  width: calc(100% - 80px);
}

.w-auto{
  width: auto;
}

.w-fit{
  width: fit-content;
}

.w-full{
  width: 100%;
}

.w-max{
  width: max-content;
}

.w-px{
  width: 1px;
}

.w-screen{
  width: 100vw;
}

.min-w-0{
  min-width: 0px;
}

.min-w-24{
  min-width: 6rem;
}

.min-w-28{
  min-width: 7rem;
}

.min-w-44{
  min-width: 11rem;
}

.min-w-48{
  min-width: 12rem;
}

.min-w-60{
  min-width: 15rem;
}

.min-w-64{
  min-width: 16rem;
}

.min-w-\[100px\]{
  min-width: 100px;
}

.min-w-\[200px\]{
  min-width: 200px;
}

.min-w-\[250px\]{
  min-width: 250px;
}

.min-w-\[500px\]{
  min-width: 500px;
}

.min-w-\[50vw\]{
  min-width: 50vw;
}

.min-w-\[600px\]{
  min-width: 600px;
}

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

.max-w-1\/2{
  max-width: 50%;
}

.max-w-1\/4{
  max-width: 25%;
}

.max-w-10{
  max-width: 2.5rem;
}

.max-w-16{
  max-width: 4rem;
}

.max-w-32{
  max-width: 9rem;
}

.max-w-40{
  max-width: 10rem;
}

.max-w-60{
  max-width: 15rem;
}

.max-w-64{
  max-width: 16rem;
}

.max-w-7xl{
  max-width: 80rem;
}

.max-w-80{
  max-width: 20rem;
}

.max-w-96{
  max-width: 24rem;
}

.max-w-\[1000px\]{
  max-width: 1000px;
}

.max-w-\[100px\]{
  max-width: 100px;
}

.max-w-\[120px\]{
  max-width: 120px;
}

.max-w-\[140px\]{
  max-width: 140px;
}

.max-w-\[164px\]{
  max-width: 164px;
}

.max-w-\[171px\]{
  max-width: 171px;
}

.max-w-\[180px\]{
  max-width: 180px;
}

.max-w-\[182px\]{
  max-width: 182px;
}

.max-w-\[283\.99px\]{
  max-width: 283.99px;
}

.max-w-\[296px\]{
  max-width: 296px;
}

.max-w-\[300px\]{
  max-width: 300px;
}

.max-w-\[311px\]{
  max-width: 311px;
}

.max-w-\[312px\]{
  max-width: 312px;
}

.max-w-\[340px\]{
  max-width: 340px;
}

.max-w-\[344px\]{
  max-width: 344px;
}

.max-w-\[354px\]{
  max-width: 354px;
}

.max-w-\[443px\]{
  max-width: 443px;
}

.max-w-\[596px\]{
  max-width: 596px;
}

.max-w-\[720px\]{
  max-width: 720px;
}

.max-w-\[800px\]{
  max-width: 800px;
}

.max-w-\[80vw\]{
  max-width: 80vw;
}

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

.max-w-lg{
  max-width: 50rem;
}

.max-w-md{
  max-width: 40rem;
}

.max-w-screen{
  max-width: 100vw;
}

.max-w-screen-md{
  max-width: 768px;
}

.max-w-screen-sm{
  max-width: 640px;
}

.max-w-screen-xl{
  max-width: 1280px;
}

.max-w-sm{
  max-width: 30rem;
}

.max-w-xl{
  max-width: 60rem;
}

.flex-1{
  flex: 1 1 0%;
}

.flex-auto{
  flex: 1 1 auto;
}

.flex-initial{
  flex: 0 1 auto;
}

.flex-none{
  flex: none;
}

.flex-shrink{
  flex-shrink: 1;
}

.flex-shrink-0{
  flex-shrink: 0;
}

.shrink{
  flex-shrink: 1;
}

.shrink-0{
  flex-shrink: 0;
}

.flex-grow{
  flex-grow: 1;
}

.grow{
  flex-grow: 1;
}

.basis-0{
  flex-basis: 0px;
}

.basis-full{
  flex-basis: 100%;
}

.table-fixed{
  table-layout: fixed;
}

.origin-center{
  transform-origin: center;
}

.origin-top-left{
  transform-origin: top left;
}

.origin-top-right{
  transform-origin: top right;
}

.\!-translate-y-2\/4{
  --tw-translate-y: -50% !important;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}

.-translate-x-1\/2{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-1\/2{
  --tw-translate-x: 50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-1\/2{
  --tw-translate-y: 50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-\[-50\%\]{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-rotate-45{
  --tw-rotate: -45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-rotate-90{
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-45{
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-\[22deg\]{
  --tw-rotate: 22deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-100{
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-125{
  --tw-scale-x: 1.25;
  --tw-scale-y: 1.25;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-95{
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes ping{
  75%, 100%{
    transform: scale(2);
    opacity: 0;
  }
}

.animate-ping{
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pulse{
  50%{
    opacity: .5;
  }
}

.animate-pulse{
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin{
  to{
    transform: rotate(360deg);
  }
}

.animate-spin{
  animation: spin 1s linear infinite;
}

@keyframes spin{
  to{
    transform: rotate(360deg);
  }
}

.animate-spin-slow{
  animation: spin 2s linear infinite;
}

.cursor-default{
  cursor: default;
}

.cursor-not-allowed{
  cursor: not-allowed;
}

.cursor-pointer{
  cursor: pointer;
}

.\!resize-y{
  resize: vertical !important;
}

.resize{
  resize: both;
}

.list-inside{
  list-style-position: inside;
}

.list-disc{
  list-style-type: disc;
}

.list-none{
  list-style-type: none;
}

.appearance-none{
  appearance: none;
}

.break-inside-avoid-column{
  break-inside: avoid-column;
}

.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-8{
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.grid-cols-\[auto\2c 1fr\]{
  grid-template-columns: auto 1fr;
}

.grid-rows-1{
  grid-template-rows: repeat(1, minmax(0, 1fr));
}

.grid-rows-2{
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.grid-rows-5{
  grid-template-rows: repeat(5, minmax(0, 1fr));
}

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

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

.flex-col{
  flex-direction: column;
}

.flex-wrap{
  flex-wrap: wrap;
}

.flex-wrap-reverse{
  flex-wrap: wrap-reverse;
}

.flex-nowrap{
  flex-wrap: nowrap;
}

.place-items-start{
  place-items: start;
}

.place-items-center{
  place-items: center;
}

.content-center{
  align-content: center;
}

.content-between{
  align-content: space-between;
}

.items-start{
  align-items: flex-start;
}

.items-end{
  align-items: flex-end;
}

.items-center{
  align-items: center;
}

.\!items-baseline{
  align-items: baseline !important;
}

.items-stretch{
  align-items: stretch;
}

.justify-start{
  justify-content: flex-start;
}

.justify-end{
  justify-content: flex-end;
}

.justify-center{
  justify-content: center;
}

.justify-between{
  justify-content: space-between;
}

.justify-evenly{
  justify-content: space-evenly;
}

.justify-items-center{
  justify-items: center;
}

.gap-0\.5{
  gap: 0.125rem;
}

.gap-1{
  gap: 0.25rem;
}

.gap-10{
  gap: 2.5rem;
}

.gap-14{
  gap: 3.5rem;
}

.gap-2{
  gap: 0.5rem;
}

.gap-2\.5{
  gap: 0.625rem;
}

.gap-3{
  gap: 0.75rem;
}

.gap-3\.5{
  gap: 0.875rem;
}

.gap-4{
  gap: 1rem;
}

.gap-5{
  gap: 1.25rem;
}

.gap-6{
  gap: 1.5rem;
}

.gap-8{
  gap: 2rem;
}

.gap-\[14px\]{
  gap: 14px;
}

.gap-\[15px\]{
  gap: 15px;
}

.gap-\[3px\]{
  gap: 3px;
}

.gap-\[5px\]{
  gap: 5px;
}

.gap-\[7px\]{
  gap: 7px;
}

.gap-px{
  gap: 1px;
}

.gap-x-10{
  column-gap: 2.5rem;
}

.gap-x-2{
  column-gap: 0.5rem;
}

.gap-x-3{
  column-gap: 0.75rem;
}

.gap-x-4{
  column-gap: 1rem;
}

.gap-x-6{
  column-gap: 1.5rem;
}

.gap-x-8{
  column-gap: 2rem;
}

.gap-y-1{
  row-gap: 0.25rem;
}

.gap-y-10{
  row-gap: 2.5rem;
}

.gap-y-4{
  row-gap: 1rem;
}

.gap-y-6{
  row-gap: 1.5rem;
}

.gap-y-7{
  row-gap: 1.75rem;
}

.gap-y-8{
  row-gap: 2rem;
}

.-space-x-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(-0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(-0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-2\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.625rem * var(--tw-space-x-reverse));
  margin-left: calc(0.625rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(2rem * var(--tw-space-x-reverse));
  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-gray-100 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
}

.divide-gray-500\/10 > :not([hidden]) ~ :not([hidden]){
  border-color: rgb(107 114 128 / 0.1);
}

.divide-white\/5 > :not([hidden]) ~ :not([hidden]){
  border-color: rgb(255 255 255 / 0.05);
}

.self-end{
  align-self: flex-end;
}

.self-center{
  align-self: center;
}

.self-stretch{
  align-self: stretch;
}

.overflow-auto{
  overflow: auto;
}

.\!overflow-hidden{
  overflow: hidden !important;
}

.overflow-hidden{
  overflow: hidden;
}

.overflow-visible{
  overflow: visible;
}

.overflow-scroll{
  overflow: scroll;
}

.overflow-x-auto{
  overflow-x: auto;
}

.overflow-y-auto{
  overflow-y: auto;
}

.overflow-x-hidden{
  overflow-x: hidden;
}

.overflow-x-clip{
  overflow-x: clip;
}

.overflow-x-scroll{
  overflow-x: scroll;
}

.\!overflow-y-scroll{
  overflow-y: scroll !important;
}

.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

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

.whitespace-normal{
  white-space: normal;
}

.\!whitespace-nowrap{
  white-space: nowrap !important;
}

.whitespace-nowrap{
  white-space: nowrap;
}

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

.text-wrap{
  text-wrap: wrap;
}

.text-nowrap{
  text-wrap: nowrap;
}

.break-words{
  overflow-wrap: break-word;
}

.break-all{
  word-break: break-all;
}

.rounded{
  border-radius: 0.25rem;
}

.rounded-2xl{
  border-radius: 1rem;
}

.rounded-3xl{
  border-radius: 1.5rem;
}

.rounded-\[100px\]{
  border-radius: 100px;
}

.rounded-\[10px\]{
  border-radius: 10px;
}

.rounded-\[29px\]{
  border-radius: 29px;
}

.rounded-\[8px\]{
  border-radius: 8px;
}

.rounded-\[999px\]{
  border-radius: 999px;
}

.rounded-full{
  border-radius: 100%;
}

.rounded-lg{
  border-radius: 0.5rem;
}

.rounded-md{
  border-radius: 0.375rem;
}

.rounded-none{
  border-radius: 0px;
}

.rounded-sm{
  border-radius: 0.125rem;
}

.rounded-xl{
  border-radius: 0.75rem;
}

.rounded-b{
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.rounded-b-lg{
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.rounded-l-full{
  border-top-left-radius: 100%;
  border-bottom-left-radius: 100%;
}

.rounded-r-full{
  border-top-right-radius: 100%;
  border-bottom-right-radius: 100%;
}

.rounded-t-lg{
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.rounded-bl-2xl{
  border-bottom-left-radius: 1rem;
}

.rounded-bl-3xl{
  border-bottom-left-radius: 1.5rem;
}

.rounded-bl-\[10px\]{
  border-bottom-left-radius: 10px;
}

.rounded-bl-md{
  border-bottom-left-radius: 0.375rem;
}

.rounded-bl-xl{
  border-bottom-left-radius: 0.75rem;
}

.rounded-br-2xl{
  border-bottom-right-radius: 1rem;
}

.rounded-br-3xl{
  border-bottom-right-radius: 1.5rem;
}

.rounded-br-\[10px\]{
  border-bottom-right-radius: 10px;
}

.rounded-br-md{
  border-bottom-right-radius: 0.375rem;
}

.rounded-br-xl{
  border-bottom-right-radius: 0.75rem;
}

.rounded-tl-2xl{
  border-top-left-radius: 1rem;
}

.rounded-tl-3xl{
  border-top-left-radius: 1.5rem;
}

.rounded-tl-\[10px\]{
  border-top-left-radius: 10px;
}

.rounded-tr-2xl{
  border-top-right-radius: 1rem;
}

.rounded-tr-3xl{
  border-top-right-radius: 1.5rem;
}

.rounded-tr-\[10px\]{
  border-top-right-radius: 10px;
}

.\!border-0{
  border-width: 0px !important;
}

.border{
  border-width: 1px;
}

.border-0{
  border-width: 0px;
}

.border-1{
  border-width: 1px;
}

.border-2{
  border-width: 2px;
}

.border-4{
  border-width: 4px;
}

.border-5{
  border-width: 5px;
}

.border-8{
  border-width: 8px;
}

.border-\[0\.50px\]{
  border-width: 0.50px;
}

.border-\[10px\]{
  border-width: 10px;
}

.border-\[3px\]{
  border-width: 3px;
}

.border-y-\[10px\]{
  border-top-width: 10px;
  border-bottom-width: 10px;
}

.border-b{
  border-bottom-width: 1px;
}

.border-b-1{
  border-bottom-width: 1px;
}

.border-b-2{
  border-bottom-width: 2px;
}

.border-l{
  border-left-width: 1px;
}

.border-l-2{
  border-left-width: 2px;
}

.border-l-4{
  border-left-width: 4px;
}

.border-l-5{
  border-left-width: 5px;
}

.border-r{
  border-right-width: 1px;
}

.border-t{
  border-top-width: 1px;
}

.border-t-2{
  border-top-width: 2px;
}

.border-solid{
  border-style: solid;
}

.border-dashed{
  border-style: dashed;
}

.border-dotted{
  border-style: dotted;
}

.border-none{
  border-style: none;
}

.border-\[\#2a7407\]{
  --tw-border-opacity: 1;
  border-color: rgb(42 116 7 / var(--tw-border-opacity, 1));
}

.border-\[\#344d80\]{
  --tw-border-opacity: 1;
  border-color: rgb(52 77 128 / var(--tw-border-opacity, 1));
}

.border-\[\#E5E3DE\]{
  --tw-border-opacity: 1;
  border-color: rgb(229 227 222 / var(--tw-border-opacity, 1));
}

.border-\[\#cadff3\]{
  --tw-border-opacity: 1;
  border-color: rgb(202 223 243 / var(--tw-border-opacity, 1));
}

.border-\[\#cd9197\]{
  --tw-border-opacity: 1;
  border-color: rgb(205 145 151 / var(--tw-border-opacity, 1));
}

.border-\[\#d1d1d1\]{
  --tw-border-opacity: 1;
  border-color: rgb(209 209 209 / var(--tw-border-opacity, 1));
}

.border-\[\#e5e3de\]{
  --tw-border-opacity: 1;
  border-color: rgb(229 227 222 / var(--tw-border-opacity, 1));
}

.border-\[\#e9e9eb\]{
  --tw-border-opacity: 1;
  border-color: rgb(233 233 235 / var(--tw-border-opacity, 1));
}

.border-\[\#e9fae2\]{
  --tw-border-opacity: 1;
  border-color: rgb(233 250 226 / var(--tw-border-opacity, 1));
}

.border-\[\#efdcde\]{
  --tw-border-opacity: 1;
  border-color: rgb(239 220 222 / var(--tw-border-opacity, 1));
}

.border-\[\#f7dada\]{
  --tw-border-opacity: 1;
  border-color: rgb(247 218 218 / var(--tw-border-opacity, 1));
}

.border-amber-400{
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}

.border-blue-300{
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}

.border-blue-400{
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}

.border-blue-600{
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}

.border-blue-900{
  --tw-border-opacity: 1;
  border-color: rgb(30 58 138 / var(--tw-border-opacity, 1));
}

.border-cool-blue-600{
  --tw-border-opacity: 1;
  border-color: rgb(32 126 167 / var(--tw-border-opacity, 1));
}

.border-dark-blue-600{
  --tw-border-opacity: 1;
  border-color: rgb(71 121 201 / var(--tw-border-opacity, 1));
}

.border-gray-100{
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}

.border-gray-200{
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-gray-300{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-gray-400{
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

.border-gray-500{
  --tw-border-opacity: 1;
  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
}

.border-gray-900{
  --tw-border-opacity: 1;
  border-color: rgb(17 24 39 / var(--tw-border-opacity, 1));
}

.border-gray-900\/10{
  border-color: rgb(17 24 39 / 0.1);
}

.border-indigo-600{
  --tw-border-opacity: 1;
  border-color: rgb(79 70 229 / var(--tw-border-opacity, 1));
}

.border-lime-800{
  --tw-border-opacity: 1;
  border-color: rgb(63 98 18 / var(--tw-border-opacity, 1));
}

.border-neutral-100{
  --tw-border-opacity: 1;
  border-color: rgb(245 245 245 / var(--tw-border-opacity, 1));
}

.border-neutral-300{
  --tw-border-opacity: 1;
  border-color: rgb(212 212 212 / var(--tw-border-opacity, 1));
}

.border-neutral-greige-100{
  --tw-border-opacity: 1;
  border-color: rgb(229 227 222 / var(--tw-border-opacity, 1));
}

.border-primary{
  border-color: hsla(220, 42%, 35%, 1);
}

.border-primary-900{
  border-color: hsla(220, 100%, 19%, 1);
}

.border-red-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}

.border-red-400{
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}

.border-red-50{
  --tw-border-opacity: 1;
  border-color: rgb(254 242 242 / var(--tw-border-opacity, 1));
}

.border-red-500{
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}

.border-sky-100{
  --tw-border-opacity: 1;
  border-color: rgb(224 242 254 / var(--tw-border-opacity, 1));
}

.border-slate-300{
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}

.border-stone-200{
  --tw-border-opacity: 1;
  border-color: rgb(231 229 228 / var(--tw-border-opacity, 1));
}

.border-teal-400{
  --tw-border-opacity: 1;
  border-color: rgb(45 212 191 / var(--tw-border-opacity, 1));
}

.border-teal-500{
  --tw-border-opacity: 1;
  border-color: rgb(20 184 166 / var(--tw-border-opacity, 1));
}

.border-teal-600{
  --tw-border-opacity: 1;
  border-color: rgb(13 148 136 / var(--tw-border-opacity, 1));
}

.border-transparent{
  border-color: transparent;
}

.border-white{
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-white\/20{
  border-color: rgb(255 255 255 / 0.2);
}

.border-white\/30{
  border-color: rgb(255 255 255 / 0.3);
}

.border-yellow-50{
  border-color: hsla(45, 100%, 98%, 1);
}

.border-t-transparent{
  border-top-color: transparent;
}

.\!bg-\[\#207EA7\]{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(32 126 167 / var(--tw-bg-opacity, 1)) !important;
}

.\!bg-\[\#2A7407\]{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(42 116 7 / var(--tw-bg-opacity, 1)) !important;
}

.\!bg-\[\#B15420\]{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(177 84 32 / var(--tw-bg-opacity, 1)) !important;
}

.\!bg-\[\#CA0909\]{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(202 9 9 / var(--tw-bg-opacity, 1)) !important;
}

.\!bg-\[\#FBBF26\]{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(251 191 38 / var(--tw-bg-opacity, 1)) !important;
}

.\!bg-white{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}

.bg-\[\#14B8A6\]{
  --tw-bg-opacity: 1;
  background-color: rgb(20 184 166 / var(--tw-bg-opacity, 1));
}

.bg-\[\#207EA7\]{
  --tw-bg-opacity: 1;
  background-color: rgb(32 126 167 / var(--tw-bg-opacity, 1));
}

.bg-\[\#207ea7\]{
  --tw-bg-opacity: 1;
  background-color: rgb(32 126 167 / var(--tw-bg-opacity, 1));
}

.bg-\[\#20E070\]{
  --tw-bg-opacity: 1;
  background-color: rgb(32 224 112 / var(--tw-bg-opacity, 1));
}

.bg-\[\#212e4a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(33 46 74 / var(--tw-bg-opacity, 1));
}

.bg-\[\#2A7407\]{
  --tw-bg-opacity: 1;
  background-color: rgb(42 116 7 / var(--tw-bg-opacity, 1));
}

.bg-\[\#2a7407\]{
  --tw-bg-opacity: 1;
  background-color: rgb(42 116 7 / var(--tw-bg-opacity, 1));
}

.bg-\[\#344D80\]{
  --tw-bg-opacity: 1;
  background-color: rgb(52 77 128 / var(--tw-bg-opacity, 1));
}

.bg-\[\#344d80\]{
  --tw-bg-opacity: 1;
  background-color: rgb(52 77 128 / var(--tw-bg-opacity, 1));
}

.bg-\[\#56B7DA\]{
  --tw-bg-opacity: 1;
  background-color: rgb(86 183 218 / var(--tw-bg-opacity, 1));
}

.bg-\[\#CA0909\]{
  --tw-bg-opacity: 1;
  background-color: rgb(202 9 9 / var(--tw-bg-opacity, 1));
}

.bg-\[\#E1EDF8\]{
  --tw-bg-opacity: 1;
  background-color: rgb(225 237 248 / var(--tw-bg-opacity, 1));
}

.bg-\[\#E5E7EB\]{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.bg-\[\#EF4444\]{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.bg-\[\#F4F2F0\]{
  --tw-bg-opacity: 1;
  background-color: rgb(244 242 240 / var(--tw-bg-opacity, 1));
}

.bg-\[\#FEF9C3\]{
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}

.bg-\[\#FEFCE8\]{
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}

.bg-\[\#cd9197\]{
  --tw-bg-opacity: 1;
  background-color: rgb(205 145 151 / var(--tw-bg-opacity, 1));
}

.bg-\[\#d9d9d9\]{
  --tw-bg-opacity: 1;
  background-color: rgb(217 217 217 / var(--tw-bg-opacity, 1));
}

.bg-\[\#e1edf8\]{
  --tw-bg-opacity: 1;
  background-color: rgb(225 237 248 / var(--tw-bg-opacity, 1));
}

.bg-\[\#e5f2f9\]{
  --tw-bg-opacity: 1;
  background-color: rgb(229 242 249 / var(--tw-bg-opacity, 1));
}

.bg-\[\#e9e9eb\]{
  --tw-bg-opacity: 1;
  background-color: rgb(233 233 235 / var(--tw-bg-opacity, 1));
}

.bg-\[\#e9fae2\]{
  --tw-bg-opacity: 1;
  background-color: rgb(233 250 226 / var(--tw-bg-opacity, 1));
}

.bg-\[\#efdcdd\]{
  --tw-bg-opacity: 1;
  background-color: rgb(239 220 221 / var(--tw-bg-opacity, 1));
}

.bg-\[\#f2f7fc\]{
  --tw-bg-opacity: 1;
  background-color: rgb(242 247 252 / var(--tw-bg-opacity, 1));
}

.bg-\[\#f6eced\]{
  --tw-bg-opacity: 1;
  background-color: rgb(246 236 237 / var(--tw-bg-opacity, 1));
}

.bg-\[\#f6f6f6\]{
  --tw-bg-opacity: 1;
  background-color: rgb(246 246 246 / var(--tw-bg-opacity, 1));
}

.bg-\[\#f7dada\]{
  --tw-bg-opacity: 1;
  background-color: rgb(247 218 218 / var(--tw-bg-opacity, 1));
}

.bg-\[\#f9f9f9\]{
  --tw-bg-opacity: 1;
  background-color: rgb(249 249 249 / var(--tw-bg-opacity, 1));
}

.bg-\[\#fbf5f6\]{
  --tw-bg-opacity: 1;
  background-color: rgb(251 245 246 / var(--tw-bg-opacity, 1));
}

.bg-\[\#fcfcfc\]{
  --tw-bg-opacity: 1;
  background-color: rgb(252 252 252 / var(--tw-bg-opacity, 1));
}

.bg-\[\#ff3b30\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 59 48 / var(--tw-bg-opacity, 1));
}

.bg-\[stone-200\]{
  background-color: stone-200;
}

.bg-amber-400{
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}

.bg-amber-50{
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}

.bg-amber-500{
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}

.bg-amber-600{
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}

.bg-amber-700{
  --tw-bg-opacity: 1;
  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
}

.bg-black{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-black\/50{
  background-color: rgb(0 0 0 / 0.5);
}

.bg-blue-100{
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.bg-blue-300{
  --tw-bg-opacity: 1;
  background-color: rgb(147 197 253 / var(--tw-bg-opacity, 1));
}

.bg-blue-400{
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}

.bg-blue-50{
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.bg-blue-500{
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.bg-blue-600{
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.bg-blue-700{
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.bg-blue-900{
  --tw-bg-opacity: 1;
  background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
}

.bg-cool-blue{
  --tw-bg-opacity: 1;
  background-color: rgb(32 126 167 / var(--tw-bg-opacity, 1));
}

.bg-cool-blue-600{
  --tw-bg-opacity: 1;
  background-color: rgb(32 126 167 / var(--tw-bg-opacity, 1));
}

.bg-cool-blue-900{
  --tw-bg-opacity: 1;
  background-color: rgb(27 72 95 / var(--tw-bg-opacity, 1));
}

.bg-cyan-100{
  --tw-bg-opacity: 1;
  background-color: rgb(207 250 254 / var(--tw-bg-opacity, 1));
}

.bg-cyan-600{
  --tw-bg-opacity: 1;
  background-color: rgb(8 145 178 / var(--tw-bg-opacity, 1));
}

.bg-cyan-700{
  --tw-bg-opacity: 1;
  background-color: rgb(14 116 144 / var(--tw-bg-opacity, 1));
}

.bg-dark-blue-600{
  --tw-bg-opacity: 1;
  background-color: rgb(71 121 201 / var(--tw-bg-opacity, 1));
}

.bg-gray-100{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-200{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.bg-gray-300{
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.bg-gray-400{
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

.bg-gray-50{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-gray-500{
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}

.bg-gray-600{
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}

.bg-green-100{
  --tw-bg-opacity: 1;
  background-color: hsl(104 67% 89% / var(--tw-bg-opacity, 1));
}

.bg-green-400{
  --tw-bg-opacity: 1;
  background-color: hsl(107 59% 55% / var(--tw-bg-opacity, 1));
}

.bg-green-50{
  --tw-bg-opacity: 1;
  background-color: hsl(103 71% 93% / var(--tw-bg-opacity, 1));
}

.bg-green-500{
  --tw-bg-opacity: 1;
  background-color: hsl(108 62% 44% / var(--tw-bg-opacity, 1));
}

.bg-lime-800{
  --tw-bg-opacity: 1;
  background-color: rgb(63 98 18 / var(--tw-bg-opacity, 1));
}

.bg-neutral-100{
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}

.bg-neutral-greige-300{
  --tw-bg-opacity: 1;
  background-color: rgb(193 187 176 / var(--tw-bg-opacity, 1));
}

.bg-orange-100{
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}

.bg-pale-pink{
  --tw-bg-opacity: 1;
  background-color: rgb(247 218 218 / var(--tw-bg-opacity, 1));
}

.bg-primary{
  background-color: hsla(220, 42%, 35%, 1);
}

.bg-primary-900{
  background-color: hsla(220, 100%, 19%, 1);
}

.bg-purple-100{
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}

.bg-red-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.bg-red-200{
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}

.bg-red-400{
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
}

.bg-red-50{
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.bg-red-500{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.bg-red-600{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.bg-red-700{
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}

.bg-red-800{
  --tw-bg-opacity: 1;
  background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1));
}

.bg-secondary-100{
  background-color: hsla(190, 81%, 82%, 1);
}

.bg-secondary-500{
  background-color: hsla(190, 81%, 50%, 1);
}

.bg-sky-100{
  --tw-bg-opacity: 1;
  background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
}

.bg-sky-600{
  --tw-bg-opacity: 1;
  background-color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
}

.bg-slate-100{
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.bg-slate-200{
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.bg-slate-400{
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}

.bg-slate-50{
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.bg-slate-600{
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}

.bg-slate-950{
  --tw-bg-opacity: 1;
  background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
}

.bg-stone-100{
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 244 / var(--tw-bg-opacity, 1));
}

.bg-stone-200{
  --tw-bg-opacity: 1;
  background-color: rgb(231 229 228 / var(--tw-bg-opacity, 1));
}

.bg-stone-300{
  --tw-bg-opacity: 1;
  background-color: rgb(214 211 209 / var(--tw-bg-opacity, 1));
}

.bg-stone-50{
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1));
}

.bg-stone-500{
  --tw-bg-opacity: 1;
  background-color: rgb(120 113 108 / var(--tw-bg-opacity, 1));
}

.bg-teal-50{
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 250 / var(--tw-bg-opacity, 1));
}

.bg-teal-500{
  --tw-bg-opacity: 1;
  background-color: rgb(20 184 166 / var(--tw-bg-opacity, 1));
}

.bg-teal-600{
  --tw-bg-opacity: 1;
  background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1));
}

.bg-transparent{
  background-color: transparent;
}

.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/30{
  background-color: rgb(255 255 255 / 0.3);
}

.bg-yellow-100{
  background-color: hsla(45, 100%, 96%, 1);
}

.bg-yellow-300{
  background-color: hsla(45, 100%, 89%, 1);
}

.bg-yellow-50{
  background-color: hsla(45, 100%, 98%, 1);
}

.bg-yellow-500{
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}

.bg-opacity-25{
  --tw-bg-opacity: 0.25;
}

.bg-opacity-45{
  --tw-bg-opacity: 0.45;
}

.bg-gradient-to-r{
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-none{
  background-image: none;
}

.from-\[\#dbf0f6\]{
  --tw-gradient-from: #dbf0f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(219 240 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-\[\#2cadc4\]{
  --tw-gradient-to: #2cadc4 var(--tw-gradient-to-position);
}

.bg-cover{
  background-size: cover;
}

.bg-clip-padding{
  background-clip: padding-box;
}

.bg-center{
  background-position: center;
}

.fill-\[\#E5E3DE\]{
  fill: #E5E3DE;
}

.fill-amber-400{
  fill: #fbbf24;
}

.fill-primary{
  fill: hsla(220, 42%, 35%, 1);
}

.fill-red-500{
  fill: #ef4444;
}

.stroke-white{
  stroke: #fff;
}

.stroke-1{
  stroke-width: 1;
}

.object-contain{
  object-fit: contain;
}

.object-cover{
  object-fit: cover;
}

.object-center{
  object-position: center;
}

.object-right-top{
  object-position: right top;
}

.\!p-0{
  padding: 0px !important;
}

.p-0{
  padding: 0px;
}

.p-0\.5{
  padding: 0.125rem;
}

.p-1{
  padding: 0.25rem;
}

.p-1\.5{
  padding: 0.375rem;
}

.p-10{
  padding: 2.5rem;
}

.p-12{
  padding: 3rem;
}

.p-15{
  padding: 3.75rem;
}

.p-2{
  padding: 0.5rem;
}

.p-2\.5{
  padding: 0.625rem;
}

.p-3{
  padding: 0.75rem;
}

.p-4{
  padding: 1rem;
}

.p-5{
  padding: 1.25rem;
}

.p-6{
  padding: 1.5rem;
}

.p-7{
  padding: 1.75rem;
}

.p-8{
  padding: 2rem;
}

.px-0{
  padding-left: 0px;
  padding-right: 0px;
}

.px-0\.5{
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}

.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-10{
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-20{
  padding-left: 5rem;
  padding-right: 5rem;
}

.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-64{
  padding-left: 16rem;
  padding-right: 16rem;
}

.px-8{
  padding-left: 2rem;
  padding-right: 2rem;
}

.px-\[11px\]{
  padding-left: 11px;
  padding-right: 11px;
}

.px-\[62px\]{
  padding-left: 62px;
  padding-right: 62px;
}

.py-0{
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-24{
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5{
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-\[11px\]{
  padding-top: 11px;
  padding-bottom: 11px;
}

.py-\[15px\]{
  padding-top: 15px;
  padding-bottom: 15px;
}

.py-\[60px\]{
  padding-top: 60px;
  padding-bottom: 60px;
}

.pb-0{
  padding-bottom: 0px;
}

.pb-10{
  padding-bottom: 2.5rem;
}

.pb-12{
  padding-bottom: 3rem;
}

.pb-2{
  padding-bottom: 0.5rem;
}

.pb-3{
  padding-bottom: 0.75rem;
}

.pb-30{
  padding-bottom: 8.5rem;
}

.pb-4{
  padding-bottom: 1rem;
}

.pb-40{
  padding-bottom: 10rem;
}

.pb-5{
  padding-bottom: 1.25rem;
}

.pb-6{
  padding-bottom: 1.5rem;
}

.pb-7{
  padding-bottom: 1.75rem;
}

.pb-8{
  padding-bottom: 2rem;
}

.pb-\[200px\]{
  padding-bottom: 200px;
}

.pl-1{
  padding-left: 0.25rem;
}

.pl-12{
  padding-left: 3rem;
}

.pl-15{
  padding-left: 3.75rem;
}

.pl-2{
  padding-left: 0.5rem;
}

.pl-20{
  padding-left: 5rem;
}

.pl-3{
  padding-left: 0.75rem;
}

.pl-4{
  padding-left: 1rem;
}

.pl-5{
  padding-left: 1.25rem;
}

.pl-7{
  padding-left: 1.75rem;
}

.pl-8{
  padding-left: 2rem;
}

.pl-\[11px\]{
  padding-left: 11px;
}

.pl-\[25px\]{
  padding-left: 25px;
}

.pr-1{
  padding-right: 0.25rem;
}

.pr-10{
  padding-right: 2.5rem;
}

.pr-15{
  padding-right: 3.75rem;
}

.pr-2{
  padding-right: 0.5rem;
}

.pr-20{
  padding-right: 5rem;
}

.pr-3{
  padding-right: 0.75rem;
}

.pr-4{
  padding-right: 1rem;
}

.pr-5{
  padding-right: 1.25rem;
}

.pr-6{
  padding-right: 1.5rem;
}

.pr-9{
  padding-right: 2.25rem;
}

.pr-\[25px\]{
  padding-right: 25px;
}

.pr-\[30px\]{
  padding-right: 30px;
}

.ps-10{
  padding-inline-start: 2.5rem;
}

.ps-3{
  padding-inline-start: 0.75rem;
}

.pt-0{
  padding-top: 0px;
}

.pt-0\.5{
  padding-top: 0.125rem;
}

.pt-1{
  padding-top: 0.25rem;
}

.pt-10{
  padding-top: 2.5rem;
}

.pt-14{
  padding-top: 3.5rem;
}

.pt-15{
  padding-top: 3.75rem;
}

.pt-16{
  padding-top: 4rem;
}

.pt-2{
  padding-top: 0.5rem;
}

.pt-2\.5{
  padding-top: 0.625rem;
}

.pt-20{
  padding-top: 5rem;
}

.pt-3{
  padding-top: 0.75rem;
}

.pt-4{
  padding-top: 1rem;
}

.pt-5{
  padding-top: 1.25rem;
}

.pt-6{
  padding-top: 1.5rem;
}

.pt-7{
  padding-top: 1.75rem;
}

.pt-8{
  padding-top: 2rem;
}

.text-left{
  text-align: left;
}

.text-center{
  text-align: center;
}

.text-right{
  text-align: right;
}

.-indent-\[999px\]{
  text-indent: -999px;
}

.align-top{
  vertical-align: top;
}

.align-middle{
  vertical-align: middle;
}

.align-sub{
  vertical-align: sub;
}

.font{
  font-family: Poppins, sans-serif;
}

.font-\[\'Inter\'\]{
  font-family: 'Inter';
}

.font-\[\'Poppins\'\]{
  font-family: 'Poppins';
}

.font-inter{
  font-family: Inter, sans-serif;
}

.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl{
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-6xl{
  font-size: 3.75rem;
  line-height: 1;
}

.text-\[10px\]{
  font-size: 10px;
}

.text-\[11px\]{
  font-size: 11px;
}

.text-\[15px\]{
  font-size: 15px;
}

.text-\[18px\]{
  font-size: 18px;
}

.text-\[22px\]{
  font-size: 22px;
}

.text-\[24px\]{
  font-size: 24px;
}

.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-md{
  font-size: 1.125rem;
}

.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold{
  font-weight: 700;
}

.font-extrabold{
  font-weight: 800;
}

.font-light{
  font-weight: 300;
}

.font-medium{
  font-weight: 500;
}

.font-normal{
  font-weight: 400;
}

.font-semibold{
  font-weight: 600;
}

.uppercase{
  text-transform: uppercase;
}

.lowercase{
  text-transform: lowercase;
}

.capitalize{
  text-transform: capitalize;
}

.italic{
  font-style: italic;
}

.leading-10{
  line-height: 2.5rem;
}

.leading-3{
  line-height: .75rem;
}

.leading-4{
  line-height: 1rem;
}

.leading-5{
  line-height: 1.25rem;
}

.leading-6{
  line-height: 1.5rem;
}

.leading-7{
  line-height: 1.75rem;
}

.leading-8{
  line-height: 2rem;
}

.leading-9{
  line-height: 2.25rem;
}

.leading-\[15px\]{
  line-height: 15px;
}

.leading-\[18px\]{
  line-height: 18px;
}

.leading-\[21px\]{
  line-height: 21px;
}

.leading-\[27px\]{
  line-height: 27px;
}

.leading-\[30px\]{
  line-height: 30px;
}

.leading-\[33px\]{
  line-height: 33px;
}

.leading-\[45px\]{
  line-height: 45px;
}

.leading-\[48px\]{
  line-height: 48px;
}

.leading-loose{
  line-height: 2;
}

.leading-none{
  line-height: 1;
}

.leading-normal{
  line-height: 1.5;
}

.leading-relaxed{
  line-height: 1.625;
}

.leading-tight{
  line-height: 1.25;
}

.tracking-tight{
  letter-spacing: -0.025em;
}

.tracking-tighter{
  letter-spacing: -0.05em;
}

.tracking-wide{
  letter-spacing: 0.025em;
}

.\!text-blue-900{
  --tw-text-opacity: 1 !important;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1)) !important;
}

.text-\[\#207EA7\]{
  --tw-text-opacity: 1;
  color: rgb(32 126 167 / var(--tw-text-opacity, 1));
}

.text-\[\#207ea7\]{
  --tw-text-opacity: 1;
  color: rgb(32 126 167 / var(--tw-text-opacity, 1));
}

.text-\[\#212E4A\]{
  --tw-text-opacity: 1;
  color: rgb(33 46 74 / var(--tw-text-opacity, 1));
}

.text-\[\#222222\]{
  --tw-text-opacity: 1;
  color: rgb(34 34 34 / var(--tw-text-opacity, 1));
}

.text-\[\#222222\]\/50{
  color: rgb(34 34 34 / 0.5);
}

.text-\[\#222222\]\/60{
  color: rgb(34 34 34 / 0.6);
}

.text-\[\#2a7407\]{
  --tw-text-opacity: 1;
  color: rgb(42 116 7 / var(--tw-text-opacity, 1));
}

.text-\[\#344d80\]{
  --tw-text-opacity: 1;
  color: rgb(52 77 128 / var(--tw-text-opacity, 1));
}

.text-\[\#696969\]{
  --tw-text-opacity: 1;
  color: rgb(105 105 105 / var(--tw-text-opacity, 1));
}

.text-\[\#6B7280\]{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-\[\#6d6d6d\]{
  --tw-text-opacity: 1;
  color: rgb(109 109 109 / var(--tw-text-opacity, 1));
}

.text-\[\#803320\]{
  --tw-text-opacity: 1;
  color: rgb(128 51 32 / var(--tw-text-opacity, 1));
}

.text-\[\#854D0E\]{
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}

.text-\[\#ca0909\]{
  --tw-text-opacity: 1;
  color: rgb(202 9 9 / var(--tw-text-opacity, 1));
}

.text-amber-200{
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}

.text-amber-400{
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.text-amber-500{
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}

.text-amber-600{
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}

.text-amber-800{
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}

.text-black{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.text-black\/50{
  color: rgb(0 0 0 / 0.5);
}

.text-black\/60{
  color: rgb(0 0 0 / 0.6);
}

.text-blue-400{
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}

.text-blue-500{
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.text-blue-600{
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-blue-700{
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.text-blue-800{
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.text-blue-900{
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}

.text-cool-blue{
  --tw-text-opacity: 1;
  color: rgb(32 126 167 / var(--tw-text-opacity, 1));
}

.text-cool-blue-600{
  --tw-text-opacity: 1;
  color: rgb(32 126 167 / var(--tw-text-opacity, 1));
}

.text-cyan-600{
  --tw-text-opacity: 1;
  color: rgb(8 145 178 / var(--tw-text-opacity, 1));
}

.text-cyan-700{
  --tw-text-opacity: 1;
  color: rgb(14 116 144 / var(--tw-text-opacity, 1));
}

.text-cyan-800{
  --tw-text-opacity: 1;
  color: rgb(21 94 117 / var(--tw-text-opacity, 1));
}

.text-dark-blue-900{
  --tw-text-opacity: 1;
  color: rgb(52 77 128 / var(--tw-text-opacity, 1));
}

.text-dark-red{
  --tw-text-opacity: 1;
  color: rgb(202 9 9 / var(--tw-text-opacity, 1));
}

.text-gray-200{
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}

.text-gray-300{
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.text-gray-400{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-600{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-gray-800{
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.text-gray-900{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-green-400{
  --tw-text-opacity: 1;
  color: hsl(107 59% 55% / var(--tw-text-opacity, 1));
}

.text-green-600{
  --tw-text-opacity: 1;
  color: hsl(109 66% 35% / var(--tw-text-opacity, 1));
}

.text-green-700{
  --tw-text-opacity: 1;
  color: hsl(111 60% 27% / var(--tw-text-opacity, 1));
}

.text-green-800{
  --tw-text-opacity: 1;
  color: hsl(110 53% 23% / var(--tw-text-opacity, 1));
}

.text-indigo-600{
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}

.text-lime-500{
  --tw-text-opacity: 1;
  color: rgb(132 204 22 / var(--tw-text-opacity, 1));
}

.text-neutral-500{
  --tw-text-opacity: 1;
  color: rgb(115 115 115 / var(--tw-text-opacity, 1));
}

.text-neutral-700{
  --tw-text-opacity: 1;
  color: rgb(64 64 64 / var(--tw-text-opacity, 1));
}

.text-neutral-800{
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity, 1));
}

.text-neutral-greige-300{
  --tw-text-opacity: 1;
  color: rgb(193 187 176 / var(--tw-text-opacity, 1));
}

.text-orange-800{
  --tw-text-opacity: 1;
  color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}

.text-primary{
  color: hsla(220, 42%, 35%, 1);
}

.text-primary-900{
  color: hsla(220, 100%, 19%, 1);
}

.text-primary-950{
  color: hsla(220, 38%, 21%, 1);
}

.text-purple-800{
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}

.text-red-300{
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.text-red-400{
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.text-red-500{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.text-red-600{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-red-700{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.text-red-800{
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

.text-sky-400{
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity, 1));
}

.text-slate-600{
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.text-slate-700{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.text-slate-800{
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}

.text-teal-500{
  --tw-text-opacity: 1;
  color: rgb(20 184 166 / var(--tw-text-opacity, 1));
}

.text-teal-600{
  --tw-text-opacity: 1;
  color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}

.text-teal-700{
  --tw-text-opacity: 1;
  color: rgb(15 118 110 / var(--tw-text-opacity, 1));
}

.text-transparent{
  color: transparent;
}

.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/60{
  color: rgb(255 255 255 / 0.6);
}

.text-white\/80{
  color: rgb(255 255 255 / 0.8);
}

.text-yellow{
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.text-yellow-400{
  color: hsla(45, 100%, 85%, 1);
}

.text-yellow-700{
  color: hsla(45, 100%, 45%, 1);
}

.text-yellow-800{
  color: hsla(45, 100%, 35%, 1);
}

.text-zinc-500{
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}

.text-zinc-600{
  --tw-text-opacity: 1;
  color: rgb(82 82 91 / var(--tw-text-opacity, 1));
}

.text-zinc-700{
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / var(--tw-text-opacity, 1));
}

.text-zinc-800{
  --tw-text-opacity: 1;
  color: rgb(39 39 42 / var(--tw-text-opacity, 1));
}

.underline{
  text-decoration-line: underline;
}

.line-through{
  text-decoration-line: line-through;
}

.no-underline{
  text-decoration-line: none;
}

.decoration-solid{
  text-decoration-style: solid;
}

.placeholder-neutral-800::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(38 38 38 / var(--tw-placeholder-opacity, 1));
}

.opacity-0{
  opacity: 0;
}

.opacity-100{
  opacity: 1;
}

.opacity-25{
  opacity: 0.25;
}

.opacity-30{
  opacity: 0.3;
}

.opacity-50{
  opacity: 0.5;
}

.opacity-60{
  opacity: 0.6;
}

.opacity-70{
  opacity: 0.7;
}

.opacity-75{
  opacity: 0.75;
}

.opacity-90{
  opacity: 0.9;
}

.shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-2xl{
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_-1px_10px_0px_rgba\(0\2c 0\2c 0\2c 0\.08\)\]{
  --tw-shadow: 0px -1px 10px 0px rgba(0,0,0,0.08);
  --tw-shadow-colored: 0px -1px 10px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_16px_24px_0px_rgba\(194\2c 194\2c 194\2c 0\.25\)\]{
  --tw-shadow: 0px 16px 24px 0px rgba(194,194,194,0.25);
  --tw-shadow-colored: 0px 16px 24px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_4px_8px_0px_rgba\(194\2c 194\2c 194\2c 0\.25\)\]{
  --tw-shadow: 0px 4px 8px 0px rgba(194,194,194,0.25);
  --tw-shadow-colored: 0px 4px 8px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_6px_10px_0px_rgba\(0\2c 0\2c 0\2c 0\.08\)\]{
  --tw-shadow: 0px 6px 10px 0px rgba(0,0,0,0.08);
  --tw-shadow-colored: 0px 6px 10px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-none{
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-slate-400{
  --tw-shadow-color: #94a3b8;
  --tw-shadow: var(--tw-shadow-colored);
}

.outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline{
  outline-style: solid;
}

.outline-1{
  outline-width: 1px;
}

.outline-2{
  outline-width: 2px;
}

.outline-offset-\[-0\.50px\]{
  outline-offset: -0.50px;
}

.outline-offset-\[-1px\]{
  outline-offset: -1px;
}

.outline-offset-\[-2px\]{
  outline-offset: -2px;
}

.\!outline-blue-900{
  outline-color: #1e3a8a !important;
}

.outline-\[\#d1d1d1\]{
  outline-color: #d1d1d1;
}

.outline-\[\#e9e9eb\]{
  outline-color: #e9e9eb;
}

.outline-indigo-100{
  outline-color: #e0e7ff;
}

.outline-neutral-300{
  outline-color: #d4d4d4;
}

.ring-1{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-2{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-inset{
  --tw-ring-inset: inset;
}

.ring-black{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1));
}

.ring-gray-300{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
}

.ring-gray-500\/10{
  --tw-ring-color: rgb(107 114 128 / 0.1);
}

.ring-teal-700\/10{
  --tw-ring-color: rgb(15 118 110 / 0.1);
}

.ring-white{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}

.ring-opacity-5{
  --tw-ring-opacity: 0.05;
}

.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-lg{
  --tw-backdrop-blur: blur(16px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-md{
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm{
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-100{
  transition-duration: 100ms;
}

.duration-150{
  transition-duration: 150ms;
}

.duration-200{
  transition-duration: 200ms;
}

.duration-300{
  transition-duration: 300ms;
}

.duration-75{
  transition-duration: 75ms;
}

.duration-\[600ms\]{
  transition-duration: 600ms;
}

.ease-\[cubic-bezier\(0\.25\2c 0\.1\2c 0\.25\2c 1\.0\)\]{
  transition-timing-function: cubic-bezier(0.25,0.1,0.25,1.0);
}

.ease-in{
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-linear{
  transition-timing-function: linear;
}

.ease-out{
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.\!\[clip\:rect\(0\2c 0\2c 0\2c 0\)\]{
  clip: rect(0,0,0,0) !important;
}

.placeholder\:font-normal::placeholder{
  font-weight: 400;
}

.placeholder\:text-gray-400::placeholder{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.placeholder\:text-gray-500::placeholder{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.before\:absolute::before{
  content: var(--tw-content);
  position: absolute;
}

.before\:-bottom-\[940px\]::before{
  content: var(--tw-content);
  bottom: -940px;
}

.before\:-left-\[185px\]::before{
  content: var(--tw-content);
  left: -185px;
}

.before\:h-\[1082px\]::before{
  content: var(--tw-content);
  height: 1082px;
}

.before\:w-\[1082px\]::before{
  content: var(--tw-content);
  width: 1082px;
}

.before\:rounded-full::before{
  content: var(--tw-content);
  border-radius: 100%;
}

.before\:bg-white::before{
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.before\:content-\[\'\'\]::before{
  --tw-content: '';
  content: var(--tw-content);
}

.after\:clear-both::after{
  content: var(--tw-content);
  clear: both;
}

.after\:block::after{
  content: var(--tw-content);
  display: block;
}

.after\:h-8::after{
  content: var(--tw-content);
  height: 1.8rem;
}

.after\:w-8::after{
  content: var(--tw-content);
  width: 2rem;
}

.after\:rounded-full::after{
  content: var(--tw-content);
  border-radius: 100%;
}

.after\:bg-white::after{
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.after\:shadow-md::after{
  content: var(--tw-content);
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.after\:duration-300::after{
  content: var(--tw-content);
  transition-duration: 300ms;
}

.after\:content-\[\'\'\]::after{
  --tw-content: '';
  content: var(--tw-content);
}

.last\:border-b-0:last-child{
  border-bottom-width: 0px;
}

.visited\:text-purple-900:visited{
  color: rgb(88 28 135 );
}

.visited\:underline:visited{
  text-decoration-line: underline;
}

.focus-within\:outline-none:focus-within{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-within\:ring-2:focus-within{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-within\:ring-indigo-500:focus-within{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
}

.focus-within\:ring-offset-2:focus-within{
  --tw-ring-offset-width: 2px;
}

.focus-within\:ring-offset-gray-100:focus-within{
  --tw-ring-offset-color: #f3f4f6;
}

.hover\:scale-105:hover{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-125:hover{
  --tw-scale-x: 1.25;
  --tw-scale-y: 1.25;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-150:hover{
  --tw-scale-x: 1.5;
  --tw-scale-y: 1.5;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:cursor-pointer:hover{
  cursor: pointer;
}

.hover\:border-blue-400:hover{
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}

.hover\:border-gray-300:hover{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.hover\:border-primary:hover{
  border-color: hsla(220, 42%, 35%, 1);
}

.hover\:border-white:hover{
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.hover\:bg-blue-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-500:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-cyan-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(8 145 178 / var(--tw-bg-opacity, 1));
}

.hover\:bg-cyan-900:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(22 78 99 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-300:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-400:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-50:hover{
  --tw-bg-opacity: 1;
  background-color: hsl(103 71% 93% / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-600:hover{
  --tw-bg-opacity: 1;
  background-color: hsl(109 66% 35% / var(--tw-bg-opacity, 1));
}

.hover\:bg-indigo-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary:hover{
  background-color: hsla(220, 42%, 35%, 1);
}

.hover\:bg-primary-800:hover{
  background-color: hsla(220, 100%, 27%, 1);
}

.hover\:bg-red-300:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(252 165 165 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}

.hover\:bg-secondary-700:hover{
  background-color: hsla(190, 81%, 34%, 1);
}

.hover\:bg-slate-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.hover\:bg-teal-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(204 251 241 / var(--tw-bg-opacity, 1));
}

.hover\:bg-teal-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-yellow-50:hover{
  background-color: hsla(45, 100%, 98%, 1);
}

.hover\:bg-zinc-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(228 228 231 / var(--tw-bg-opacity, 1));
}

.hover\:bg-opacity-50:hover{
  --tw-bg-opacity: 0.5;
}

.hover\:text-\[\#344d80\]:hover{
  --tw-text-opacity: 1;
  color: rgb(52 77 128 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-600:hover{
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-800:hover{
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-900:hover{
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-400:hover{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-600:hover{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-700:hover{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-800:hover{
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.hover\:text-indigo-500:hover{
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}

.hover\:text-neutral-700:hover{
  --tw-text-opacity: 1;
  color: rgb(64 64 64 / var(--tw-text-opacity, 1));
}

.hover\:text-primary:hover{
  color: hsla(220, 42%, 35%, 1);
}

.hover\:text-primary-500:hover{
  color: hsla(220, 100%, 51%, 1);
}

.hover\:text-primary-700:hover{
  color: hsla(220, 100%, 35%, 1);
}

.hover\:text-red-600:hover{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.hover\:text-red-700:hover{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-700:hover{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.hover\:text-teal-800:hover{
  --tw-text-opacity: 1;
  color: rgb(17 94 89 / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:text-zinc-400:hover{
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
}

.hover\:text-zinc-700:hover{
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover{
  text-decoration-line: underline;
}

.hover\:no-underline:hover{
  text-decoration-line: none;
}

.hover\:opacity-75:hover{
  opacity: 0.75;
}

.hover\:opacity-90:hover{
  opacity: 0.9;
}

.hover\:outline-none:hover{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.hover\:ring-teal-800\/10:hover{
  --tw-ring-color: rgb(17 94 89 / 0.1);
}

.hover\:brightness-90:hover{
  --tw-brightness: brightness(.9);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.focus\:border-blue-300:focus{
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}

.focus\:border-blue-500:focus{
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.focus\:border-blue-900:focus{
  --tw-border-opacity: 1;
  border-color: rgb(30 58 138 / var(--tw-border-opacity, 1));
}

.focus\:border-indigo-300:focus{
  --tw-border-opacity: 1;
  border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}

.focus\:border-indigo-500:focus{
  --tw-border-opacity: 1;
  border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
}

.focus\:border-primary-900:focus{
  border-color: hsla(220, 100%, 19%, 1);
}

.focus\:border-teal-400:focus{
  --tw-border-opacity: 1;
  border-color: rgb(45 212 191 / var(--tw-border-opacity, 1));
}

.focus\:bg-gray-100:focus{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.focus\:text-white:focus{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.focus\:underline:focus{
  text-decoration-line: underline;
}

.focus\:no-underline:focus{
  text-decoration-line: none;
}

.focus\:opacity-90:focus{
  opacity: 0.9;
}

.focus\:shadow:focus{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-0:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-1:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-inset:focus{
  --tw-ring-inset: inset;
}

.focus\:ring-blue-200:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity, 1));
}

.focus\:ring-blue-400:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity, 1));
}

.focus\:ring-blue-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.focus\:ring-blue-600:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity, 1));
}

.focus\:ring-cyan-600:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(8 145 178 / var(--tw-ring-opacity, 1));
}

.focus\:ring-green-600:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: hsl(109 66% 35% / var(--tw-ring-opacity, 1));
}

.focus\:ring-indigo-300:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(165 180 252 / var(--tw-ring-opacity, 1));
}

.focus\:ring-indigo-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
}

.focus\:ring-indigo-600:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity, 1));
}

.focus\:ring-primary:focus{
  --tw-ring-color: hsla(220, 42%, 35%, 1);
}

.focus\:ring-primary-300:focus{
  --tw-ring-color: hsla(220, 100%, 67%, 1);
}

.focus\:ring-primary-800:focus{
  --tw-ring-color: hsla(220, 100%, 27%, 1);
}

.focus\:ring-primary-900:focus{
  --tw-ring-color: hsla(220, 100%, 19%, 1);
}

.focus\:ring-red-600:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity, 1));
}

.focus\:ring-yellow-600:focus{
  --tw-ring-color: hsla(45, 100%, 55%, 1);
}

.focus\:ring-offset-2:focus{
  --tw-ring-offset-width: 2px;
}

.focus\:ring-offset-blue-50:focus{
  --tw-ring-offset-color: #eff6ff;
}

.focus\:ring-offset-green-50:focus{
  --tw-ring-offset-color: hsl(103, 71%, 93%);
}

.focus\:ring-offset-red-50:focus{
  --tw-ring-offset-color: #fef2f2;
}

.focus\:ring-offset-yellow-50:focus{
  --tw-ring-offset-color: hsla(45, 100%, 98%, 1);
}

.focus-visible\:underline:focus-visible{
  text-decoration-line: underline;
}

.active\:bg-primary:active{
  background-color: hsla(220, 42%, 35%, 1);
}

.active\:bg-white:active{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.disabled\:cursor-auto:disabled{
  cursor: auto;
}

.disabled\:cursor-not-allowed:disabled{
  cursor: not-allowed;
}

.disabled\:border-gray-200:disabled{
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.disabled\:bg-\[\#d1d1d1\]:disabled{
  --tw-bg-opacity: 1;
  background-color: rgb(209 209 209 / var(--tw-bg-opacity, 1));
}

.disabled\:bg-gray-200:disabled{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.disabled\:bg-gray-400:disabled{
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

.disabled\:bg-slate-400:disabled{
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}

.disabled\:opacity-50:disabled{
  opacity: 0.5;
}

.group:hover .group-hover\:block{
  display: block;
}

.group:hover .group-hover\:scale-100{
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:bg-gray-300{
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:text-gray-900{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:opacity-100{
  opacity: 1;
}

.group:hover .group-hover\:after\:translate-x-1::after{
  content: var(--tw-content);
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.peer:checked ~ .peer-checked\:bg-\[\#207ea7\]{
  --tw-bg-opacity: 1;
  background-color: rgb(32 126 167 / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:after\:translate-x-6::after{
  content: var(--tw-content);
  --tw-translate-x: 1.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (prefers-reduced-motion: reduce){
  .motion-reduce\:transition-none{
    transition-property: none;
  }
}

@media (min-width: 640px){
  .sm\:inset-auto{
    inset: auto;
  }
  .sm\:bottom-2{
    bottom: 0.5rem;
  }
  .sm\:left-\[88px\]{
    left: 88px;
  }
  .sm\:left-auto{
    left: auto;
  }
  .sm\:right-8{
    right: 2rem;
  }
  .sm\:top-\[88px\]{
    top: 88px;
  }
  .sm\:col-span-1{
    grid-column: span 1 / span 1;
  }
  .sm\:col-span-2{
    grid-column: span 2 / span 2;
  }
  .sm\:col-span-3{
    grid-column: span 3 / span 3;
  }
  .sm\:col-span-4{
    grid-column: span 4 / span 4;
  }
  .sm\:col-span-5{
    grid-column: span 5 / span 5;
  }
  .sm\:col-span-6{
    grid-column: span 6 / span 6;
  }
  .sm\:mb-10{
    margin-bottom: 2.5rem;
  }
  .sm\:mb-12{
    margin-bottom: 3rem;
  }
  .sm\:mt-0{
    margin-top: 0px;
  }
  .sm\:block{
    display: block;
  }
  .sm\:flex{
    display: flex;
  }
  .sm\:inline-flex{
    display: inline-flex;
  }
  .sm\:grid{
    display: grid;
  }
  .sm\:hidden{
    display: none;
  }
  .sm\:size-10{
    width: 2.5rem;
    height: 2.5rem;
  }
  .sm\:h-24{
    height: 6rem;
  }
  .sm\:h-8{
    height: 1.8rem;
  }
  .sm\:h-\[120px\]{
    height: 120px;
  }
  .sm\:h-\[167px\]{
    height: 167px;
  }
  .sm\:h-\[600px\]{
    height: 600px;
  }
  .sm\:h-\[72px\]{
    height: 72px;
  }
  .sm\:w-10{
    width: 2.5rem;
  }
  .sm\:w-8{
    width: 2rem;
  }
  .sm\:w-\[120px\]{
    width: 120px;
  }
  .sm\:w-\[344px\]{
    width: 344px;
  }
  .sm\:w-\[72px\]{
    width: 72px;
  }
  .sm\:w-auto{
    width: auto;
  }
  .sm\:max-w-15{
    max-width: 3.75rem;
  }
  .sm\:max-w-\[392px\]{
    max-width: 392px;
  }
  .sm\:max-w-md{
    max-width: 40rem;
  }
  .sm\:max-w-sm{
    max-width: 30rem;
  }
  .sm\:grid-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sm\:grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .sm\:grid-rows-2{
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .sm\:flex-row{
    flex-direction: row;
  }
  .sm\:flex-col{
    flex-direction: column;
  }
  .sm\:items-end{
    align-items: flex-end;
  }
  .sm\:justify-start{
    justify-content: flex-start;
  }
  .sm\:justify-between{
    justify-content: space-between;
  }
  .sm\:gap-0{
    gap: 0px;
  }
  .sm\:gap-4{
    gap: 1rem;
  }
  .sm\:gap-6{
    gap: 1.5rem;
  }
  .sm\:gap-x-6{
    column-gap: 1.5rem;
  }
  .sm\:self-start{
    align-self: flex-start;
  }
  .sm\:rounded-\[10px\]{
    border-radius: 10px;
  }
  .sm\:bg-neutral-100{
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
  }
  .sm\:px-0{
    padding-left: 0px;
    padding-right: 0px;
  }
  .sm\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .sm\:py-16{
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .sm\:py-24{
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .sm\:py-32{
    padding-top: 9rem;
    padding-bottom: 9rem;
  }
  .sm\:pt-10{
    padding-top: 2.5rem;
  }
  .sm\:text-left{
    text-align: left;
  }
  .sm\:text-5xl{
    font-size: 3rem;
    line-height: 1;
  }
  .sm\:text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .sm\:leading-6{
    line-height: 1.5rem;
  }
  .sm\:shadow-md{
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
  .sm\:ring-1{
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
  .sm\:ring-gray-900\/10{
    --tw-ring-color: rgb(17 24 39 / 0.1);
  }
}

@media (min-width: 768px){
  .md\:bottom-12{
    bottom: 3rem;
  }
  .md\:left-0{
    left: 0px;
  }
  .md\:left-12{
    left: 3rem;
  }
  .md\:left-30{
    left: 8.5rem;
  }
  .md\:left-5{
    left: 1.25rem;
  }
  .md\:top-30{
    top: 8.5rem;
  }
  .md\:top-5{
    top: 1.25rem;
  }
  .md\:order-1{
    order: 1;
  }
  .md\:order-2{
    order: 2;
  }
  .md\:col-span-2{
    grid-column: span 2 / span 2;
  }
  .md\:col-span-3{
    grid-column: span 3 / span 3;
  }
  .md\:my-12{
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .md\:mb-0{
    margin-bottom: 0px;
  }
  .md\:mb-10{
    margin-bottom: 2.5rem;
  }
  .md\:mb-4{
    margin-bottom: 1rem;
  }
  .md\:mb-6{
    margin-bottom: 1.5rem;
  }
  .md\:mb-8{
    margin-bottom: 2rem;
  }
  .md\:ml-28{
    margin-left: 7rem;
  }
  .md\:mr-2{
    margin-right: 0.5rem;
  }
  .md\:mr-4{
    margin-right: 1rem;
  }
  .md\:mt-0{
    margin-top: 0px;
  }
  .md\:mt-4{
    margin-top: 1rem;
  }
  .md\:block{
    display: block;
  }
  .md\:flex{
    display: flex;
  }
  .md\:grid{
    display: grid;
  }
  .md\:hidden{
    display: none;
  }
  .md\:h-25{
    height: 6.25rem;
  }
  .md\:h-36{
    height: 9rem;
  }
  .md\:h-80{
    height: 20rem;
  }
  .md\:h-\[208px\]{
    height: 208px;
  }
  .md\:h-\[240px\]{
    height: 240px;
  }
  .md\:h-\[245px\]{
    height: 245px;
  }
  .md\:h-\[291px\]{
    height: 291px;
  }
  .md\:h-\[300px\]{
    height: 300px;
  }
  .md\:h-\[640px\]{
    height: 640px;
  }
  .md\:h-auto{
    height: auto;
  }
  .md\:w-25{
    width: 6.25rem;
  }
  .md\:w-3\/5{
    width: 60%;
  }
  .md\:w-5\/12{
    width: 41.666667%;
  }
  .md\:w-52{
    width: 13rem;
  }
  .md\:w-80{
    width: 20rem;
  }
  .md\:w-9\/12{
    width: 75%;
  }
  .md\:w-\[164px\]{
    width: 164px;
  }
  .md\:w-\[179px\]{
    width: 179px;
  }
  .md\:w-\[416px\]{
    width: 416px;
  }
  .md\:w-\[448px\]{
    width: 448px;
  }
  .md\:w-\[672px\]{
    width: 672px;
  }
  .md\:w-\[720px\]{
    width: 720px;
  }
  .md\:w-\[800px\]{
    width: 800px;
  }
  .md\:w-auto{
    width: auto;
  }
  .md\:w-full{
    width: 100%;
  }
  .md\:max-w-32{
    max-width: 9rem;
  }
  .md\:max-w-\[100px\]{
    max-width: 100px;
  }
  .md\:max-w-\[164px\]{
    max-width: 164px;
  }
  .md\:max-w-\[800px\]{
    max-width: 800px;
  }
  .md\:max-w-none{
    max-width: none;
  }
  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .md\:flex-nowrap{
    flex-wrap: nowrap;
  }
  .md\:items-end{
    align-items: flex-end;
  }
  .md\:items-center{
    align-items: center;
  }
  .md\:justify-start{
    justify-content: flex-start;
  }
  .md\:justify-end{
    justify-content: flex-end;
  }
  .md\:justify-between{
    justify-content: space-between;
  }
  .md\:gap-6{
    gap: 1.5rem;
  }
  .md\:space-x-8 > :not([hidden]) ~ :not([hidden]){
    --tw-space-x-reverse: 0;
    margin-right: calc(2rem * var(--tw-space-x-reverse));
    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
  }
  .md\:space-y-6 > :not([hidden]) ~ :not([hidden]){
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
  }
  .md\:px-0{
    padding-left: 0px;
    padding-right: 0px;
  }
  .md\:px-10{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .md\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .md\:pt-0{
    padding-top: 0px;
  }
  .md\:pt-6{
    padding-top: 1.5rem;
  }
  .md\:text-center{
    text-align: center;
  }
  .md\:text-3xl{
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 1024px){
  .lg\:left-12{
    left: 3rem;
  }
  .lg\:left-28{
    left: 7rem;
  }
  .lg\:top-14{
    top: 3.5rem;
  }
  .lg\:top-28{
    top: 7rem;
  }
  .lg\:my-16{
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
  .lg\:mb-0{
    margin-bottom: 0px;
  }
  .lg\:ml-16{
    margin-left: 4rem;
  }
  .lg\:mr-16{
    margin-right: 4rem;
  }
  .lg\:ms-10{
    margin-inline-start: 2.5rem;
  }
  .lg\:mt-0{
    margin-top: 0px;
  }
  .lg\:block{
    display: block;
  }
  .lg\:flex{
    display: flex;
  }
  .lg\:hidden{
    display: none;
  }
  .lg\:h-56{
    height: 14rem;
  }
  .lg\:h-9{
    height: 2.25rem;
  }
  .lg\:h-\[703px\]{
    height: 703px;
  }
  .lg\:h-auto{
    height: auto;
  }
  .lg\:w-1\/2{
    width: 50%;
  }
  .lg\:w-1\/3{
    width: 33.333333%;
  }
  .lg\:w-2\/3{
    width: 66.666667%;
  }
  .lg\:w-4\/12{
    width: 33.333333%;
  }
  .lg\:w-48{
    width: 12rem;
  }
  .lg\:w-9{
    width: 2.25rem;
  }
  .lg\:w-96{
    width: 24rem;
  }
  .lg\:max-w-64{
    max-width: 16rem;
  }
  .lg\:max-w-full{
    max-width: 100%;
  }
  .lg\:flex-none{
    flex: none;
  }
  .lg\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg\:items-start{
    align-items: flex-start;
  }
  .lg\:items-center{
    align-items: center;
  }
  .lg\:justify-between{
    justify-content: space-between;
  }
  .lg\:gap-x-12{
    column-gap: 3rem;
  }
  .lg\:gap-x-9{
    column-gap: 2.25rem;
  }
  .lg\:rounded-bl-\[10px\]{
    border-bottom-left-radius: 10px;
  }
  .lg\:rounded-tl-\[10px\]{
    border-top-left-radius: 10px;
  }
  .lg\:rounded-tr-none{
    border-top-right-radius: 0px;
  }
  .lg\:px-20{
    padding-left: 5rem;
    padding-right: 5rem;
  }
  .lg\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .lg\:pl-4{
    padding-left: 1rem;
  }
  .lg\:pt-8{
    padding-top: 2rem;
  }
}

@media (min-width: 1280px){
  .xl\:w-1\/3{
    width: 33.333333%;
  }
  .xl\:w-2\/5{
    width: 40%;
  }
  .xl\:w-3\/5{
    width: 60%;
  }
  .xl\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .xl\:gap-x-8{
    column-gap: 2rem;
  }
  .xl\:px-0{
    padding-left: 0px;
    padding-right: 0px;
  }
  .xl\:px-24{
    padding-left: 6rem;
    padding-right: 6rem;
  }
}

.rtl\:text-right:where([dir="rtl"], [dir="rtl"] *){
  text-align: right;
}

.dark\:border-\[\#374151\]:where(.dark, .dark *){
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}

.dark\:border-\[\#3a4a61\]:where(.dark, .dark *){
  --tw-border-opacity: 1;
  border-color: rgb(58 74 97 / var(--tw-border-opacity, 1));
}

.dark\:border-\[\#4679c9\]:where(.dark, .dark *){
  --tw-border-opacity: 1;
  border-color: rgb(70 121 201 / var(--tw-border-opacity, 1));
}

.dark\:border-\[\#a65865\]:where(.dark, .dark *){
  --tw-border-opacity: 1;
  border-color: rgb(166 88 101 / var(--tw-border-opacity, 1));
}

.dark\:border-blue-500:where(.dark, .dark *){
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.dark\:border-gray-400:where(.dark, .dark *){
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

.dark\:border-gray-600:where(.dark, .dark *){
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}

.dark\:border-slate-100:where(.dark, .dark *){
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
}

.dark\:border-slate-800:where(.dark, .dark *){
  --tw-border-opacity: 1;
  border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
}

.dark\:border-white:where(.dark, .dark *){
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.dark\:\!bg-\[\#CA0909\]:where(.dark, .dark *){
  --tw-bg-opacity: 1 !important;
  background-color: rgb(202 9 9 / var(--tw-bg-opacity, 1)) !important;
}

.dark\:bg-\[\#080707\]:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(8 7 7 / var(--tw-bg-opacity, 1));
}

.dark\:bg-\[\#122f3f\]:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(18 47 63 / var(--tw-bg-opacity, 1));
}

.dark\:bg-\[\#17191c\]:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(23 25 28 / var(--tw-bg-opacity, 1));
}

.dark\:bg-\[\#1F2937\]:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.dark\:bg-\[\#344D80\]:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(52 77 128 / var(--tw-bg-opacity, 1));
}

.dark\:bg-\[\#375496\]:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(55 84 150 / var(--tw-bg-opacity, 1));
}

.dark\:bg-\[\#743d4a\]:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(116 61 74 / var(--tw-bg-opacity, 1));
}

.dark\:bg-\[\#e1edf8\]:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(225 237 248 / var(--tw-bg-opacity, 1));
}

.dark\:bg-blue-500:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.dark\:bg-blue-900:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
}

.dark\:bg-gray-400:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

.dark\:bg-gray-700:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.dark\:bg-gray-800:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.dark\:bg-green-900:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: hsl(113 48% 20% / var(--tw-bg-opacity, 1));
}

.dark\:bg-lime-600:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(101 163 13 / var(--tw-bg-opacity, 1));
}

.dark\:bg-red-600:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.dark\:bg-slate-400:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}

.dark\:bg-slate-500:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1));
}

.dark\:bg-slate-600:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}

.dark\:bg-slate-700:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.dark\:bg-slate-800:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}

.dark\:bg-slate-900:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}

.dark\:bg-slate-950:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
}

.dark\:bg-white:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.dark\:text-\[\#162033\]:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(22 32 51 / var(--tw-text-opacity, 1));
}

.dark\:text-\[\#1F2937\]:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.dark\:text-\[\#c4cbcf\]:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(196 203 207 / var(--tw-text-opacity, 1));
}

.dark\:text-black:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.dark\:text-blue-200:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}

.dark\:text-blue-300:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.dark\:text-blue-400:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-100:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-200:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-300:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-400:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-500:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.dark\:text-green-200:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: hsl(105 67% 80% / var(--tw-text-opacity, 1));
}

.dark\:text-primary:where(.dark, .dark *){
  color: hsla(220, 42%, 35%, 1);
}

.dark\:text-primary-100:where(.dark, .dark *){
  color: hsla(220, 100%, 83%, 1);
}

.dark\:text-primary-light:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(225 237 248 / var(--tw-text-opacity, 1));
}

.dark\:text-red-500:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.dark\:text-slate-100:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}

.dark\:text-slate-800:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}

.dark\:text-stone-200:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(231 229 228 / var(--tw-text-opacity, 1));
}

.dark\:text-stone-300:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(214 211 209 / var(--tw-text-opacity, 1));
}

.dark\:text-white:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.dark\:opacity-95:where(.dark, .dark *){
  opacity: 0.95;
}

.dark\:ring-offset-gray-800:where(.dark, .dark *){
  --tw-ring-offset-color: #1f2937;
}

.dark\:hover\:bg-gray-600:hover:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:text-white:hover:where(.dark, .dark *){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:dark\:text-white:where(.dark, .dark *):hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.dark\:focus\:ring-blue-600:focus:where(.dark, .dark *){
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity, 1));
}

.dark\:disabled\:bg-slate-400:disabled:where(.dark, .dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/@angular/material/prebuilt-themes/indigo-pink.css?ngGlobalStyle ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************/
.mat-ripple{overflow:hidden;position:relative}.mat-ripple:not(:empty){transform:translateZ(0)}.mat-ripple.mat-ripple-unbounded{overflow:visible}.mat-ripple-element{position:absolute;border-radius:50%;pointer-events:none;transition:opacity,transform 0ms cubic-bezier(0, 0, 0.2, 1);transform:scale3d(0, 0, 0);background-color:var(--mat-ripple-color, rgba(0, 0, 0, 0.1))}.cdk-high-contrast-active .mat-ripple-element{display:none}.cdk-drag-preview .mat-ripple-element,.cdk-drag-placeholder .mat-ripple-element{display:none}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}textarea.cdk-textarea-autosize{resize:none}textarea.cdk-textarea-autosize-measuring{padding:2px 0 !important;box-sizing:content-box !important;height:auto !important;overflow:hidden !important}textarea.cdk-textarea-autosize-measuring-firefox{padding:2px 0 !important;box-sizing:content-box !important;height:0 !important}@keyframes cdk-text-field-autofill-start{/*!*/}@keyframes cdk-text-field-autofill-end{/*!*/}.cdk-text-field-autofill-monitored:-webkit-autofill{animation:cdk-text-field-autofill-start 0s 1ms}.cdk-text-field-autofill-monitored:not(:-webkit-autofill){animation:cdk-text-field-autofill-end 0s 1ms}.mat-focus-indicator{position:relative}.mat-focus-indicator::before{top:0;left:0;right:0;bottom:0;position:absolute;box-sizing:border-box;pointer-events:none;display:var(--mat-focus-indicator-display, none);border:var(--mat-focus-indicator-border-width, 3px) var(--mat-focus-indicator-border-style, solid) var(--mat-focus-indicator-border-color, transparent);border-radius:var(--mat-focus-indicator-border-radius, 4px)}.mat-focus-indicator:focus::before{content:""}.cdk-high-contrast-active{--mat-focus-indicator-display: block}.mat-mdc-focus-indicator{position:relative}.mat-mdc-focus-indicator::before{top:0;left:0;right:0;bottom:0;position:absolute;box-sizing:border-box;pointer-events:none;display:var(--mat-mdc-focus-indicator-display, none);border:var(--mat-mdc-focus-indicator-border-width, 3px) var(--mat-mdc-focus-indicator-border-style, solid) var(--mat-mdc-focus-indicator-border-color, transparent);border-radius:var(--mat-mdc-focus-indicator-border-radius, 4px)}.mat-mdc-focus-indicator:focus::before{content:""}.cdk-high-contrast-active{--mat-mdc-focus-indicator-display: block}.mat-app-background{background-color:var(--mat-app-background-color, var(--mat-app-background, transparent));color:var(--mat-app-text-color, var(--mat-app-on-background, inherit))}.mat-elevation-z0,.mat-mdc-elevation-specific.mat-elevation-z0{box-shadow:var(--mat-app-elevation-shadow-level-0, none)}.mat-elevation-z1,.mat-mdc-elevation-specific.mat-elevation-z1{box-shadow:var(--mat-app-elevation-shadow-level-1, none)}.mat-elevation-z2,.mat-mdc-elevation-specific.mat-elevation-z2{box-shadow:var(--mat-app-elevation-shadow-level-2, none)}.mat-elevation-z3,.mat-mdc-elevation-specific.mat-elevation-z3{box-shadow:var(--mat-app-elevation-shadow-level-3, none)}.mat-elevation-z4,.mat-mdc-elevation-specific.mat-elevation-z4{box-shadow:var(--mat-app-elevation-shadow-level-4, none)}.mat-elevation-z5,.mat-mdc-elevation-specific.mat-elevation-z5{box-shadow:var(--mat-app-elevation-shadow-level-5, none)}.mat-elevation-z6,.mat-mdc-elevation-specific.mat-elevation-z6{box-shadow:var(--mat-app-elevation-shadow-level-6, none)}.mat-elevation-z7,.mat-mdc-elevation-specific.mat-elevation-z7{box-shadow:var(--mat-app-elevation-shadow-level-7, none)}.mat-elevation-z8,.mat-mdc-elevation-specific.mat-elevation-z8{box-shadow:var(--mat-app-elevation-shadow-level-8, none)}.mat-elevation-z9,.mat-mdc-elevation-specific.mat-elevation-z9{box-shadow:var(--mat-app-elevation-shadow-level-9, none)}.mat-elevation-z10,.mat-mdc-elevation-specific.mat-elevation-z10{box-shadow:var(--mat-app-elevation-shadow-level-10, none)}.mat-elevation-z11,.mat-mdc-elevation-specific.mat-elevation-z11{box-shadow:var(--mat-app-elevation-shadow-level-11, none)}.mat-elevation-z12,.mat-mdc-elevation-specific.mat-elevation-z12{box-shadow:var(--mat-app-elevation-shadow-level-12, none)}.mat-elevation-z13,.mat-mdc-elevation-specific.mat-elevation-z13{box-shadow:var(--mat-app-elevation-shadow-level-13, none)}.mat-elevation-z14,.mat-mdc-elevation-specific.mat-elevation-z14{box-shadow:var(--mat-app-elevation-shadow-level-14, none)}.mat-elevation-z15,.mat-mdc-elevation-specific.mat-elevation-z15{box-shadow:var(--mat-app-elevation-shadow-level-15, none)}.mat-elevation-z16,.mat-mdc-elevation-specific.mat-elevation-z16{box-shadow:var(--mat-app-elevation-shadow-level-16, none)}.mat-elevation-z17,.mat-mdc-elevation-specific.mat-elevation-z17{box-shadow:var(--mat-app-elevation-shadow-level-17, none)}.mat-elevation-z18,.mat-mdc-elevation-specific.mat-elevation-z18{box-shadow:var(--mat-app-elevation-shadow-level-18, none)}.mat-elevation-z19,.mat-mdc-elevation-specific.mat-elevation-z19{box-shadow:var(--mat-app-elevation-shadow-level-19, none)}.mat-elevation-z20,.mat-mdc-elevation-specific.mat-elevation-z20{box-shadow:var(--mat-app-elevation-shadow-level-20, none)}.mat-elevation-z21,.mat-mdc-elevation-specific.mat-elevation-z21{box-shadow:var(--mat-app-elevation-shadow-level-21, none)}.mat-elevation-z22,.mat-mdc-elevation-specific.mat-elevation-z22{box-shadow:var(--mat-app-elevation-shadow-level-22, none)}.mat-elevation-z23,.mat-mdc-elevation-specific.mat-elevation-z23{box-shadow:var(--mat-app-elevation-shadow-level-23, none)}.mat-elevation-z24,.mat-mdc-elevation-specific.mat-elevation-z24{box-shadow:var(--mat-app-elevation-shadow-level-24, none)}.mat-theme-loaded-marker{display:none}html{--mat-ripple-color:rgba(0, 0, 0, 0.1);--mat-option-selected-state-label-text-color:#3f51b5;--mat-option-label-text-color:rgba(0, 0, 0, 0.87);--mat-option-hover-state-layer-color:rgba(0, 0, 0, 0.04);--mat-option-focus-state-layer-color:rgba(0, 0, 0, 0.04);--mat-option-selected-state-layer-color:rgba(0, 0, 0, 0.04)}.mat-accent{--mat-option-selected-state-label-text-color:#ff4081;--mat-option-label-text-color:rgba(0, 0, 0, 0.87);--mat-option-hover-state-layer-color:rgba(0, 0, 0, 0.04);--mat-option-focus-state-layer-color:rgba(0, 0, 0, 0.04);--mat-option-selected-state-layer-color:rgba(0, 0, 0, 0.04)}.mat-warn{--mat-option-selected-state-label-text-color:#f44336;--mat-option-label-text-color:rgba(0, 0, 0, 0.87);--mat-option-hover-state-layer-color:rgba(0, 0, 0, 0.04);--mat-option-focus-state-layer-color:rgba(0, 0, 0, 0.04);--mat-option-selected-state-layer-color:rgba(0, 0, 0, 0.04)}html{--mat-optgroup-label-text-color:rgba(0, 0, 0, 0.87)}.mat-primary{--mat-full-pseudo-checkbox-selected-icon-color:#3f51b5;--mat-full-pseudo-checkbox-selected-checkmark-color:#fafafa;--mat-full-pseudo-checkbox-unselected-icon-color:rgba(0, 0, 0, 0.54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color:#fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color:#b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color:#b0b0b0;--mat-minimal-pseudo-checkbox-selected-checkmark-color:#3f51b5;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color:#b0b0b0}html{--mat-full-pseudo-checkbox-selected-icon-color:#ff4081;--mat-full-pseudo-checkbox-selected-checkmark-color:#fafafa;--mat-full-pseudo-checkbox-unselected-icon-color:rgba(0, 0, 0, 0.54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color:#fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color:#b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color:#b0b0b0;--mat-minimal-pseudo-checkbox-selected-checkmark-color:#ff4081;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color:#b0b0b0}.mat-accent{--mat-full-pseudo-checkbox-selected-icon-color:#ff4081;--mat-full-pseudo-checkbox-selected-checkmark-color:#fafafa;--mat-full-pseudo-checkbox-unselected-icon-color:rgba(0, 0, 0, 0.54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color:#fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color:#b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color:#b0b0b0;--mat-minimal-pseudo-checkbox-selected-checkmark-color:#ff4081;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color:#b0b0b0}.mat-warn{--mat-full-pseudo-checkbox-selected-icon-color:#f44336;--mat-full-pseudo-checkbox-selected-checkmark-color:#fafafa;--mat-full-pseudo-checkbox-unselected-icon-color:rgba(0, 0, 0, 0.54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color:#fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color:#b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color:#b0b0b0;--mat-minimal-pseudo-checkbox-selected-checkmark-color:#f44336;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color:#b0b0b0}html{--mat-app-background-color:#fafafa;--mat-app-text-color:rgba(0, 0, 0, 0.87);--mat-app-elevation-shadow-level-0:0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-1:0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-2:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-3:0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-4:0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-5:0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-6:0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-7:0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-8:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-9:0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-10:0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-11:0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-12:0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-13:0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-14:0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-15:0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-16:0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-17:0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-18:0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-19:0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-20:0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-21:0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-22:0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-23:0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-24:0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);--mat-option-label-text-font:Roboto, sans-serif;--mat-option-label-text-line-height:24px;--mat-option-label-text-size:16px;--mat-option-label-text-tracking:0.03125em;--mat-option-label-text-weight:400;--mat-optgroup-label-text-font:Roboto, sans-serif;--mat-optgroup-label-text-line-height:24px;--mat-optgroup-label-text-size:16px;--mat-optgroup-label-text-tracking:0.03125em;--mat-optgroup-label-text-weight:400;--mdc-elevated-card-container-shape:4px;--mdc-outlined-card-container-shape:4px;--mdc-outlined-card-outline-width:1px;--mdc-elevated-card-container-color:white;--mdc-elevated-card-container-elevation:0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);--mdc-outlined-card-container-color:white;--mdc-outlined-card-outline-color:rgba(0, 0, 0, 0.12);--mdc-outlined-card-container-elevation:0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);--mat-card-subtitle-text-color:rgba(0, 0, 0, 0.54);--mat-card-title-text-font:Roboto, sans-serif;--mat-card-title-text-line-height:32px;--mat-card-title-text-size:20px;--mat-card-title-text-tracking:0.0125em;--mat-card-title-text-weight:500;--mat-card-subtitle-text-font:Roboto, sans-serif;--mat-card-subtitle-text-line-height:22px;--mat-card-subtitle-text-size:14px;--mat-card-subtitle-text-tracking:0.0071428571em;--mat-card-subtitle-text-weight:500;--mdc-linear-progress-active-indicator-height:4px;--mdc-linear-progress-track-height:4px;--mdc-linear-progress-track-shape:0}.mat-mdc-progress-bar{--mdc-linear-progress-active-indicator-color:#3f51b5;--mdc-linear-progress-track-color:rgba(63, 81, 181, 0.25)}.mat-mdc-progress-bar.mat-accent{--mdc-linear-progress-active-indicator-color:#ff4081;--mdc-linear-progress-track-color:rgba(255, 64, 129, 0.25)}.mat-mdc-progress-bar.mat-warn{--mdc-linear-progress-active-indicator-color:#f44336;--mdc-linear-progress-track-color:rgba(244, 67, 54, 0.25)}html{--mdc-plain-tooltip-container-shape:4px;--mdc-plain-tooltip-supporting-text-line-height:16px;--mdc-plain-tooltip-container-color:#616161;--mdc-plain-tooltip-supporting-text-color:#fff;--mdc-plain-tooltip-supporting-text-font:Roboto, sans-serif;--mdc-plain-tooltip-supporting-text-size:12px;--mdc-plain-tooltip-supporting-text-weight:400;--mdc-plain-tooltip-supporting-text-tracking:0.0333333333em;--mdc-filled-text-field-active-indicator-height:1px;--mdc-filled-text-field-focus-active-indicator-height:2px;--mdc-filled-text-field-container-shape:4px;--mdc-outlined-text-field-outline-width:1px;--mdc-outlined-text-field-focus-outline-width:2px;--mdc-outlined-text-field-container-shape:4px;--mdc-filled-text-field-caret-color:#3f51b5;--mdc-filled-text-field-focus-active-indicator-color:#3f51b5;--mdc-filled-text-field-focus-label-text-color:rgba(63, 81, 181, 0.87);--mdc-filled-text-field-container-color:whitesmoke;--mdc-filled-text-field-disabled-container-color:#fafafa;--mdc-filled-text-field-label-text-color:rgba(0, 0, 0, 0.6);--mdc-filled-text-field-hover-label-text-color:rgba(0, 0, 0, 0.6);--mdc-filled-text-field-disabled-label-text-color:rgba(0, 0, 0, 0.38);--mdc-filled-text-field-input-text-color:rgba(0, 0, 0, 0.87);--mdc-filled-text-field-disabled-input-text-color:rgba(0, 0, 0, 0.38);--mdc-filled-text-field-input-text-placeholder-color:rgba(0, 0, 0, 0.6);--mdc-filled-text-field-error-hover-label-text-color:#f44336;--mdc-filled-text-field-error-focus-label-text-color:#f44336;--mdc-filled-text-field-error-label-text-color:#f44336;--mdc-filled-text-field-error-caret-color:#f44336;--mdc-filled-text-field-active-indicator-color:rgba(0, 0, 0, 0.42);--mdc-filled-text-field-disabled-active-indicator-color:rgba(0, 0, 0, 0.06);--mdc-filled-text-field-hover-active-indicator-color:rgba(0, 0, 0, 0.87);--mdc-filled-text-field-error-active-indicator-color:#f44336;--mdc-filled-text-field-error-focus-active-indicator-color:#f44336;--mdc-filled-text-field-error-hover-active-indicator-color:#f44336;--mdc-outlined-text-field-caret-color:#3f51b5;--mdc-outlined-text-field-focus-outline-color:#3f51b5;--mdc-outlined-text-field-focus-label-text-color:rgba(63, 81, 181, 0.87);--mdc-outlined-text-field-label-text-color:rgba(0, 0, 0, 0.6);--mdc-outlined-text-field-hover-label-text-color:rgba(0, 0, 0, 0.6);--mdc-outlined-text-field-disabled-label-text-color:rgba(0, 0, 0, 0.38);--mdc-outlined-text-field-input-text-color:rgba(0, 0, 0, 0.87);--mdc-outlined-text-field-disabled-input-text-color:rgba(0, 0, 0, 0.38);--mdc-outlined-text-field-input-text-placeholder-color:rgba(0, 0, 0, 0.6);--mdc-outlined-text-field-error-caret-color:#f44336;--mdc-outlined-text-field-error-focus-label-text-color:#f44336;--mdc-outlined-text-field-error-label-text-color:#f44336;--mdc-outlined-text-field-error-hover-label-text-color:#f44336;--mdc-outlined-text-field-outline-color:rgba(0, 0, 0, 0.38);--mdc-outlined-text-field-disabled-outline-color:rgba(0, 0, 0, 0.06);--mdc-outlined-text-field-hover-outline-color:rgba(0, 0, 0, 0.87);--mdc-outlined-text-field-error-focus-outline-color:#f44336;--mdc-outlined-text-field-error-hover-outline-color:#f44336;--mdc-outlined-text-field-error-outline-color:#f44336;--mat-form-field-focus-select-arrow-color:rgba(63, 81, 181, 0.87);--mat-form-field-disabled-input-text-placeholder-color:rgba(0, 0, 0, 0.38);--mat-form-field-state-layer-color:rgba(0, 0, 0, 0.87);--mat-form-field-error-text-color:#f44336;--mat-form-field-select-option-text-color:inherit;--mat-form-field-select-disabled-option-text-color:GrayText;--mat-form-field-leading-icon-color:unset;--mat-form-field-disabled-leading-icon-color:unset;--mat-form-field-trailing-icon-color:unset;--mat-form-field-disabled-trailing-icon-color:unset;--mat-form-field-error-focus-trailing-icon-color:unset;--mat-form-field-error-hover-trailing-icon-color:unset;--mat-form-field-error-trailing-icon-color:unset;--mat-form-field-enabled-select-arrow-color:rgba(0, 0, 0, 0.54);--mat-form-field-disabled-select-arrow-color:rgba(0, 0, 0, 0.38);--mat-form-field-hover-state-layer-opacity:0.04;--mat-form-field-focus-state-layer-opacity:0.08}.mat-mdc-form-field.mat-accent{--mdc-filled-text-field-caret-color:#ff4081;--mdc-filled-text-field-focus-active-indicator-color:#ff4081;--mdc-filled-text-field-focus-label-text-color:rgba(255, 64, 129, 0.87);--mdc-outlined-text-field-caret-color:#ff4081;--mdc-outlined-text-field-focus-outline-color:#ff4081;--mdc-outlined-text-field-focus-label-text-color:rgba(255, 64, 129, 0.87);--mat-form-field-focus-select-arrow-color:rgba(255, 64, 129, 0.87)}.mat-mdc-form-field.mat-warn{--mdc-filled-text-field-caret-color:#f44336;--mdc-filled-text-field-focus-active-indicator-color:#f44336;--mdc-filled-text-field-focus-label-text-color:rgba(244, 67, 54, 0.87);--mdc-outlined-text-field-caret-color:#f44336;--mdc-outlined-text-field-focus-outline-color:#f44336;--mdc-outlined-text-field-focus-label-text-color:rgba(244, 67, 54, 0.87);--mat-form-field-focus-select-arrow-color:rgba(244, 67, 54, 0.87)}html{--mat-form-field-container-height:56px;--mat-form-field-filled-label-display:block;--mat-form-field-container-vertical-padding:16px;--mat-form-field-filled-with-label-container-padding-top:24px;--mat-form-field-filled-with-label-container-padding-bottom:8px;--mdc-filled-text-field-label-text-font:Roboto, sans-serif;--mdc-filled-text-field-label-text-size:16px;--mdc-filled-text-field-label-text-tracking:0.03125em;--mdc-filled-text-field-label-text-weight:400;--mdc-outlined-text-field-label-text-font:Roboto, sans-serif;--mdc-outlined-text-field-label-text-size:16px;--mdc-outlined-text-field-label-text-tracking:0.03125em;--mdc-outlined-text-field-label-text-weight:400;--mat-form-field-container-text-font:Roboto, sans-serif;--mat-form-field-container-text-line-height:24px;--mat-form-field-container-text-size:16px;--mat-form-field-container-text-tracking:0.03125em;--mat-form-field-container-text-weight:400;--mat-form-field-outlined-label-text-populated-size:16px;--mat-form-field-subscript-text-font:Roboto, sans-serif;--mat-form-field-subscript-text-line-height:20px;--mat-form-field-subscript-text-size:12px;--mat-form-field-subscript-text-tracking:0.0333333333em;--mat-form-field-subscript-text-weight:400;--mat-select-container-elevation-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mat-select-panel-background-color:white;--mat-select-enabled-trigger-text-color:rgba(0, 0, 0, 0.87);--mat-select-disabled-trigger-text-color:rgba(0, 0, 0, 0.38);--mat-select-placeholder-text-color:rgba(0, 0, 0, 0.6);--mat-select-enabled-arrow-color:rgba(0, 0, 0, 0.54);--mat-select-disabled-arrow-color:rgba(0, 0, 0, 0.38);--mat-select-focused-arrow-color:rgba(63, 81, 181, 0.87);--mat-select-invalid-arrow-color:rgba(244, 67, 54, 0.87)}html .mat-mdc-form-field.mat-accent{--mat-select-panel-background-color:white;--mat-select-enabled-trigger-text-color:rgba(0, 0, 0, 0.87);--mat-select-disabled-trigger-text-color:rgba(0, 0, 0, 0.38);--mat-select-placeholder-text-color:rgba(0, 0, 0, 0.6);--mat-select-enabled-arrow-color:rgba(0, 0, 0, 0.54);--mat-select-disabled-arrow-color:rgba(0, 0, 0, 0.38);--mat-select-focused-arrow-color:rgba(255, 64, 129, 0.87);--mat-select-invalid-arrow-color:rgba(244, 67, 54, 0.87)}html .mat-mdc-form-field.mat-warn{--mat-select-panel-background-color:white;--mat-select-enabled-trigger-text-color:rgba(0, 0, 0, 0.87);--mat-select-disabled-trigger-text-color:rgba(0, 0, 0, 0.38);--mat-select-placeholder-text-color:rgba(0, 0, 0, 0.6);--mat-select-enabled-arrow-color:rgba(0, 0, 0, 0.54);--mat-select-disabled-arrow-color:rgba(0, 0, 0, 0.38);--mat-select-focused-arrow-color:rgba(244, 67, 54, 0.87);--mat-select-invalid-arrow-color:rgba(244, 67, 54, 0.87)}html{--mat-select-arrow-transform:translateY(-8px);--mat-select-trigger-text-font:Roboto, sans-serif;--mat-select-trigger-text-line-height:24px;--mat-select-trigger-text-size:16px;--mat-select-trigger-text-tracking:0.03125em;--mat-select-trigger-text-weight:400;--mat-autocomplete-container-shape:4px;--mat-autocomplete-container-elevation-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mat-autocomplete-background-color:white;--mdc-dialog-container-shape:4px;--mat-dialog-container-elevation-shadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);--mat-dialog-container-max-width:80vw;--mat-dialog-container-small-max-width:80vw;--mat-dialog-container-min-width:0;--mat-dialog-actions-alignment:start;--mat-dialog-actions-padding:8px;--mat-dialog-content-padding:20px 24px;--mat-dialog-with-actions-content-padding:20px 24px;--mat-dialog-headline-padding:0 24px 9px;--mdc-dialog-container-color:white;--mdc-dialog-subhead-color:rgba(0, 0, 0, 0.87);--mdc-dialog-supporting-text-color:rgba(0, 0, 0, 0.6);--mdc-dialog-subhead-font:Roboto, sans-serif;--mdc-dialog-subhead-line-height:32px;--mdc-dialog-subhead-size:20px;--mdc-dialog-subhead-weight:500;--mdc-dialog-subhead-tracking:0.0125em;--mdc-dialog-supporting-text-font:Roboto, sans-serif;--mdc-dialog-supporting-text-line-height:24px;--mdc-dialog-supporting-text-size:16px;--mdc-dialog-supporting-text-weight:400;--mdc-dialog-supporting-text-tracking:0.03125em}.mat-mdc-standard-chip{--mdc-chip-container-shape-radius:16px;--mdc-chip-with-avatar-avatar-shape-radius:14px;--mdc-chip-with-avatar-avatar-size:28px;--mdc-chip-with-icon-icon-size:18px;--mdc-chip-outline-width:0;--mdc-chip-outline-color:transparent;--mdc-chip-disabled-outline-color:transparent;--mdc-chip-focus-outline-color:transparent;--mdc-chip-hover-state-layer-opacity:0.04;--mdc-chip-with-avatar-disabled-avatar-opacity:1;--mdc-chip-flat-selected-outline-width:0;--mdc-chip-selected-hover-state-layer-opacity:0.04;--mdc-chip-with-trailing-icon-disabled-trailing-icon-opacity:1;--mdc-chip-with-icon-disabled-icon-opacity:1;--mat-chip-disabled-container-opacity:0.4;--mat-chip-trailing-action-opacity:0.54;--mat-chip-trailing-action-focus-opacity:1;--mat-chip-trailing-action-state-layer-color:transparent;--mat-chip-selected-trailing-action-state-layer-color:transparent;--mat-chip-trailing-action-hover-state-layer-opacity:0;--mat-chip-trailing-action-focus-state-layer-opacity:0;--mdc-chip-disabled-label-text-color:#212121;--mdc-chip-elevated-container-color:#e0e0e0;--mdc-chip-elevated-selected-container-color:#e0e0e0;--mdc-chip-elevated-disabled-container-color:#e0e0e0;--mdc-chip-flat-disabled-selected-container-color:#e0e0e0;--mdc-chip-focus-state-layer-color:black;--mdc-chip-hover-state-layer-color:black;--mdc-chip-selected-hover-state-layer-color:black;--mdc-chip-focus-state-layer-opacity:0.12;--mdc-chip-selected-focus-state-layer-color:black;--mdc-chip-selected-focus-state-layer-opacity:0.12;--mdc-chip-label-text-color:#212121;--mdc-chip-selected-label-text-color:#212121;--mdc-chip-with-icon-icon-color:#212121;--mdc-chip-with-icon-disabled-icon-color:#212121;--mdc-chip-with-icon-selected-icon-color:#212121;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color:#212121;--mdc-chip-with-trailing-icon-trailing-icon-color:#212121;--mat-chip-selected-disabled-trailing-icon-color:#212121;--mat-chip-selected-trailing-icon-color:#212121}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary{--mdc-chip-disabled-label-text-color:white;--mdc-chip-elevated-container-color:#3f51b5;--mdc-chip-elevated-selected-container-color:#3f51b5;--mdc-chip-elevated-disabled-container-color:#3f51b5;--mdc-chip-flat-disabled-selected-container-color:#3f51b5;--mdc-chip-focus-state-layer-color:black;--mdc-chip-hover-state-layer-color:black;--mdc-chip-selected-hover-state-layer-color:black;--mdc-chip-focus-state-layer-opacity:0.12;--mdc-chip-selected-focus-state-layer-color:black;--mdc-chip-selected-focus-state-layer-opacity:0.12;--mdc-chip-label-text-color:white;--mdc-chip-selected-label-text-color:white;--mdc-chip-with-icon-icon-color:white;--mdc-chip-with-icon-disabled-icon-color:white;--mdc-chip-with-icon-selected-icon-color:white;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color:white;--mdc-chip-with-trailing-icon-trailing-icon-color:white;--mat-chip-selected-disabled-trailing-icon-color:white;--mat-chip-selected-trailing-icon-color:white}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent{--mdc-chip-disabled-label-text-color:white;--mdc-chip-elevated-container-color:#ff4081;--mdc-chip-elevated-selected-container-color:#ff4081;--mdc-chip-elevated-disabled-container-color:#ff4081;--mdc-chip-flat-disabled-selected-container-color:#ff4081;--mdc-chip-focus-state-layer-color:black;--mdc-chip-hover-state-layer-color:black;--mdc-chip-selected-hover-state-layer-color:black;--mdc-chip-focus-state-layer-opacity:0.12;--mdc-chip-selected-focus-state-layer-color:black;--mdc-chip-selected-focus-state-layer-opacity:0.12;--mdc-chip-label-text-color:white;--mdc-chip-selected-label-text-color:white;--mdc-chip-with-icon-icon-color:white;--mdc-chip-with-icon-disabled-icon-color:white;--mdc-chip-with-icon-selected-icon-color:white;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color:white;--mdc-chip-with-trailing-icon-trailing-icon-color:white;--mat-chip-selected-disabled-trailing-icon-color:white;--mat-chip-selected-trailing-icon-color:white}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn{--mdc-chip-disabled-label-text-color:white;--mdc-chip-elevated-container-color:#f44336;--mdc-chip-elevated-selected-container-color:#f44336;--mdc-chip-elevated-disabled-container-color:#f44336;--mdc-chip-flat-disabled-selected-container-color:#f44336;--mdc-chip-focus-state-layer-color:black;--mdc-chip-hover-state-layer-color:black;--mdc-chip-selected-hover-state-layer-color:black;--mdc-chip-focus-state-layer-opacity:0.12;--mdc-chip-selected-focus-state-layer-color:black;--mdc-chip-selected-focus-state-layer-opacity:0.12;--mdc-chip-label-text-color:white;--mdc-chip-selected-label-text-color:white;--mdc-chip-with-icon-icon-color:white;--mdc-chip-with-icon-disabled-icon-color:white;--mdc-chip-with-icon-selected-icon-color:white;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color:white;--mdc-chip-with-trailing-icon-trailing-icon-color:white;--mat-chip-selected-disabled-trailing-icon-color:white;--mat-chip-selected-trailing-icon-color:white}.mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height:32px}.mat-mdc-standard-chip{--mdc-chip-label-text-font:Roboto, sans-serif;--mdc-chip-label-text-line-height:20px;--mdc-chip-label-text-size:14px;--mdc-chip-label-text-tracking:0.0178571429em;--mdc-chip-label-text-weight:400}html{--mdc-switch-disabled-selected-icon-opacity:0.38;--mdc-switch-disabled-track-opacity:0.12;--mdc-switch-disabled-unselected-icon-opacity:0.38;--mdc-switch-handle-height:20px;--mdc-switch-handle-shape:10px;--mdc-switch-handle-width:20px;--mdc-switch-selected-icon-size:18px;--mdc-switch-track-height:14px;--mdc-switch-track-shape:7px;--mdc-switch-track-width:36px;--mdc-switch-unselected-icon-size:18px;--mdc-switch-selected-focus-state-layer-opacity:0.12;--mdc-switch-selected-hover-state-layer-opacity:0.04;--mdc-switch-selected-pressed-state-layer-opacity:0.1;--mdc-switch-unselected-focus-state-layer-opacity:0.12;--mdc-switch-unselected-hover-state-layer-opacity:0.04;--mdc-switch-unselected-pressed-state-layer-opacity:0.1}html .mat-mdc-slide-toggle{--mat-switch-disabled-selected-handle-opacity:0.38;--mat-switch-disabled-unselected-handle-opacity:0.38;--mat-switch-unselected-handle-size:20px;--mat-switch-selected-handle-size:20px;--mat-switch-pressed-handle-size:20px;--mat-switch-with-icon-handle-size:20px;--mat-switch-selected-handle-horizontal-margin:0;--mat-switch-selected-with-icon-handle-horizontal-margin:0;--mat-switch-selected-pressed-handle-horizontal-margin:0;--mat-switch-unselected-handle-horizontal-margin:0;--mat-switch-unselected-with-icon-handle-horizontal-margin:0;--mat-switch-unselected-pressed-handle-horizontal-margin:0;--mat-switch-visible-track-opacity:1;--mat-switch-hidden-track-opacity:1;--mat-switch-visible-track-transition:transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);--mat-switch-hidden-track-transition:transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);--mat-switch-track-outline-width:1px;--mat-switch-track-outline-color:transparent;--mat-switch-selected-track-outline-width:1px;--mat-switch-selected-track-outline-color:transparent;--mat-switch-disabled-unselected-track-outline-width:1px;--mat-switch-disabled-unselected-track-outline-color:transparent}html{--mdc-switch-selected-focus-state-layer-color:#3949ab;--mdc-switch-selected-handle-color:#3949ab;--mdc-switch-selected-hover-state-layer-color:#3949ab;--mdc-switch-selected-pressed-state-layer-color:#3949ab;--mdc-switch-selected-focus-handle-color:#1a237e;--mdc-switch-selected-hover-handle-color:#1a237e;--mdc-switch-selected-pressed-handle-color:#1a237e;--mdc-switch-selected-focus-track-color:#7986cb;--mdc-switch-selected-hover-track-color:#7986cb;--mdc-switch-selected-pressed-track-color:#7986cb;--mdc-switch-selected-track-color:#7986cb;--mdc-switch-disabled-selected-handle-color:#424242;--mdc-switch-disabled-selected-icon-color:#fff;--mdc-switch-disabled-selected-track-color:#424242;--mdc-switch-disabled-unselected-handle-color:#424242;--mdc-switch-disabled-unselected-icon-color:#fff;--mdc-switch-disabled-unselected-track-color:#424242;--mdc-switch-handle-surface-color:#fff;--mdc-switch-selected-icon-color:#fff;--mdc-switch-unselected-focus-handle-color:#212121;--mdc-switch-unselected-focus-state-layer-color:#424242;--mdc-switch-unselected-focus-track-color:#e0e0e0;--mdc-switch-unselected-handle-color:#616161;--mdc-switch-unselected-hover-handle-color:#212121;--mdc-switch-unselected-hover-state-layer-color:#424242;--mdc-switch-unselected-hover-track-color:#e0e0e0;--mdc-switch-unselected-icon-color:#fff;--mdc-switch-unselected-pressed-handle-color:#212121;--mdc-switch-unselected-pressed-state-layer-color:#424242;--mdc-switch-unselected-pressed-track-color:#e0e0e0;--mdc-switch-unselected-track-color:#e0e0e0;--mdc-switch-handle-elevation-shadow:0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);--mdc-switch-disabled-handle-elevation-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);--mdc-switch-disabled-label-text-color: rgba(0, 0, 0, 0.38)}html .mat-mdc-slide-toggle{--mat-switch-label-text-color:rgba(0, 0, 0, 0.87)}html .mat-mdc-slide-toggle.mat-accent{--mdc-switch-selected-focus-state-layer-color:#d81b60;--mdc-switch-selected-handle-color:#d81b60;--mdc-switch-selected-hover-state-layer-color:#d81b60;--mdc-switch-selected-pressed-state-layer-color:#d81b60;--mdc-switch-selected-focus-handle-color:#880e4f;--mdc-switch-selected-hover-handle-color:#880e4f;--mdc-switch-selected-pressed-handle-color:#880e4f;--mdc-switch-selected-focus-track-color:#f06292;--mdc-switch-selected-hover-track-color:#f06292;--mdc-switch-selected-pressed-track-color:#f06292;--mdc-switch-selected-track-color:#f06292}html .mat-mdc-slide-toggle.mat-warn{--mdc-switch-selected-focus-state-layer-color:#e53935;--mdc-switch-selected-handle-color:#e53935;--mdc-switch-selected-hover-state-layer-color:#e53935;--mdc-switch-selected-pressed-state-layer-color:#e53935;--mdc-switch-selected-focus-handle-color:#b71c1c;--mdc-switch-selected-hover-handle-color:#b71c1c;--mdc-switch-selected-pressed-handle-color:#b71c1c;--mdc-switch-selected-focus-track-color:#e57373;--mdc-switch-selected-hover-track-color:#e57373;--mdc-switch-selected-pressed-track-color:#e57373;--mdc-switch-selected-track-color:#e57373}html{--mdc-switch-state-layer-size:40px}html .mat-mdc-slide-toggle{--mat-switch-label-text-font:Roboto, sans-serif;--mat-switch-label-text-line-height:20px;--mat-switch-label-text-size:14px;--mat-switch-label-text-tracking:0.0178571429em;--mat-switch-label-text-weight:400}html{--mdc-radio-disabled-selected-icon-opacity:0.38;--mdc-radio-disabled-unselected-icon-opacity:0.38;--mdc-radio-state-layer-size:40px}.mat-mdc-radio-button.mat-primary{--mdc-radio-disabled-selected-icon-color:black;--mdc-radio-disabled-unselected-icon-color:black;--mdc-radio-unselected-hover-icon-color:#212121;--mdc-radio-unselected-focus-icon-color:#212121;--mdc-radio-unselected-icon-color:rgba(0, 0, 0, 0.54);--mdc-radio-unselected-pressed-icon-color:rgba(0, 0, 0, 0.54);--mdc-radio-selected-focus-icon-color:#3f51b5;--mdc-radio-selected-hover-icon-color:#3f51b5;--mdc-radio-selected-icon-color:#3f51b5;--mdc-radio-selected-pressed-icon-color:#3f51b5;--mat-radio-ripple-color:black;--mat-radio-checked-ripple-color:#3f51b5;--mat-radio-disabled-label-color:rgba(0, 0, 0, 0.38);--mat-radio-label-text-color:rgba(0, 0, 0, 0.87)}.mat-mdc-radio-button.mat-accent{--mdc-radio-disabled-selected-icon-color:black;--mdc-radio-disabled-unselected-icon-color:black;--mdc-radio-unselected-hover-icon-color:#212121;--mdc-radio-unselected-focus-icon-color:#212121;--mdc-radio-unselected-icon-color:rgba(0, 0, 0, 0.54);--mdc-radio-unselected-pressed-icon-color:rgba(0, 0, 0, 0.54);--mdc-radio-selected-focus-icon-color:#ff4081;--mdc-radio-selected-hover-icon-color:#ff4081;--mdc-radio-selected-icon-color:#ff4081;--mdc-radio-selected-pressed-icon-color:#ff4081;--mat-radio-ripple-color:black;--mat-radio-checked-ripple-color:#ff4081;--mat-radio-disabled-label-color:rgba(0, 0, 0, 0.38);--mat-radio-label-text-color:rgba(0, 0, 0, 0.87)}.mat-mdc-radio-button.mat-warn{--mdc-radio-disabled-selected-icon-color:black;--mdc-radio-disabled-unselected-icon-color:black;--mdc-radio-unselected-hover-icon-color:#212121;--mdc-radio-unselected-focus-icon-color:#212121;--mdc-radio-unselected-icon-color:rgba(0, 0, 0, 0.54);--mdc-radio-unselected-pressed-icon-color:rgba(0, 0, 0, 0.54);--mdc-radio-selected-focus-icon-color:#f44336;--mdc-radio-selected-hover-icon-color:#f44336;--mdc-radio-selected-icon-color:#f44336;--mdc-radio-selected-pressed-icon-color:#f44336;--mat-radio-ripple-color:black;--mat-radio-checked-ripple-color:#f44336;--mat-radio-disabled-label-color:rgba(0, 0, 0, 0.38);--mat-radio-label-text-color:rgba(0, 0, 0, 0.87)}html{--mdc-radio-state-layer-size:40px;--mat-radio-touch-target-display:block;--mat-radio-label-text-font:Roboto, sans-serif;--mat-radio-label-text-line-height:20px;--mat-radio-label-text-size:14px;--mat-radio-label-text-tracking:0.0178571429em;--mat-radio-label-text-weight:400;--mdc-slider-active-track-height:6px;--mdc-slider-active-track-shape:9999px;--mdc-slider-handle-height:20px;--mdc-slider-handle-shape:50%;--mdc-slider-handle-width:20px;--mdc-slider-inactive-track-height:4px;--mdc-slider-inactive-track-shape:9999px;--mdc-slider-with-overlap-handle-outline-width:1px;--mdc-slider-with-tick-marks-active-container-opacity:0.6;--mdc-slider-with-tick-marks-container-shape:50%;--mdc-slider-with-tick-marks-container-size:2px;--mdc-slider-with-tick-marks-inactive-container-opacity:0.6;--mdc-slider-handle-elevation:0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);--mat-slider-value-indicator-width:auto;--mat-slider-value-indicator-height:32px;--mat-slider-value-indicator-caret-display:block;--mat-slider-value-indicator-border-radius:4px;--mat-slider-value-indicator-padding:0 12px;--mat-slider-value-indicator-text-transform:none;--mat-slider-value-indicator-container-transform:translateX(-50%);--mdc-slider-handle-color:#3f51b5;--mdc-slider-focus-handle-color:#3f51b5;--mdc-slider-hover-handle-color:#3f51b5;--mdc-slider-active-track-color:#3f51b5;--mdc-slider-inactive-track-color:#3f51b5;--mdc-slider-with-tick-marks-inactive-container-color:#3f51b5;--mdc-slider-with-tick-marks-active-container-color:white;--mdc-slider-disabled-active-track-color:#000;--mdc-slider-disabled-handle-color:#000;--mdc-slider-disabled-inactive-track-color:#000;--mdc-slider-label-container-color:#000;--mdc-slider-label-label-text-color:#fff;--mdc-slider-with-overlap-handle-outline-color:#fff;--mdc-slider-with-tick-marks-disabled-container-color:#000;--mat-slider-ripple-color:#3f51b5;--mat-slider-hover-state-layer-color:rgba(63, 81, 181, 0.05);--mat-slider-focus-state-layer-color:rgba(63, 81, 181, 0.2);--mat-slider-value-indicator-opacity:0.6}html .mat-accent{--mdc-slider-handle-color:#ff4081;--mdc-slider-focus-handle-color:#ff4081;--mdc-slider-hover-handle-color:#ff4081;--mdc-slider-active-track-color:#ff4081;--mdc-slider-inactive-track-color:#ff4081;--mdc-slider-with-tick-marks-inactive-container-color:#ff4081;--mdc-slider-with-tick-marks-active-container-color:white;--mat-slider-ripple-color:#ff4081;--mat-slider-hover-state-layer-color:rgba(255, 64, 129, 0.05);--mat-slider-focus-state-layer-color:rgba(255, 64, 129, 0.2)}html .mat-warn{--mdc-slider-handle-color:#f44336;--mdc-slider-focus-handle-color:#f44336;--mdc-slider-hover-handle-color:#f44336;--mdc-slider-active-track-color:#f44336;--mdc-slider-inactive-track-color:#f44336;--mdc-slider-with-tick-marks-inactive-container-color:#f44336;--mdc-slider-with-tick-marks-active-container-color:white;--mat-slider-ripple-color:#f44336;--mat-slider-hover-state-layer-color:rgba(244, 67, 54, 0.05);--mat-slider-focus-state-layer-color:rgba(244, 67, 54, 0.2)}html{--mdc-slider-label-label-text-font:Roboto, sans-serif;--mdc-slider-label-label-text-size:14px;--mdc-slider-label-label-text-line-height:22px;--mdc-slider-label-label-text-tracking:0.0071428571em;--mdc-slider-label-label-text-weight:500;--mat-menu-container-shape:4px;--mat-menu-divider-bottom-spacing:0;--mat-menu-divider-top-spacing:0;--mat-menu-item-spacing:16px;--mat-menu-item-icon-size:24px;--mat-menu-item-leading-spacing:16px;--mat-menu-item-trailing-spacing:16px;--mat-menu-item-with-icon-leading-spacing:16px;--mat-menu-item-with-icon-trailing-spacing:16px;--mat-menu-base-elevation-level:8;--mat-menu-item-label-text-color:rgba(0, 0, 0, 0.87);--mat-menu-item-icon-color:rgba(0, 0, 0, 0.87);--mat-menu-item-hover-state-layer-color:rgba(0, 0, 0, 0.04);--mat-menu-item-focus-state-layer-color:rgba(0, 0, 0, 0.04);--mat-menu-container-color:white;--mat-menu-divider-color:rgba(0, 0, 0, 0.12);--mat-menu-item-label-text-font:Roboto, sans-serif;--mat-menu-item-label-text-size:16px;--mat-menu-item-label-text-tracking:0.03125em;--mat-menu-item-label-text-line-height:24px;--mat-menu-item-label-text-weight:400;--mdc-list-list-item-container-shape:0;--mdc-list-list-item-leading-avatar-shape:50%;--mdc-list-list-item-container-color:transparent;--mdc-list-list-item-selected-container-color:transparent;--mdc-list-list-item-leading-avatar-color:transparent;--mdc-list-list-item-leading-icon-size:24px;--mdc-list-list-item-leading-avatar-size:40px;--mdc-list-list-item-trailing-icon-size:24px;--mdc-list-list-item-disabled-state-layer-color:transparent;--mdc-list-list-item-disabled-state-layer-opacity:0;--mdc-list-list-item-disabled-label-text-opacity:0.38;--mdc-list-list-item-disabled-leading-icon-opacity:0.38;--mdc-list-list-item-disabled-trailing-icon-opacity:0.38;--mat-list-active-indicator-color:transparent;--mat-list-active-indicator-shape:4px;--mdc-list-list-item-label-text-color:rgba(0, 0, 0, 0.87);--mdc-list-list-item-supporting-text-color:rgba(0, 0, 0, 0.54);--mdc-list-list-item-leading-icon-color:rgba(0, 0, 0, 0.38);--mdc-list-list-item-trailing-supporting-text-color:rgba(0, 0, 0, 0.38);--mdc-list-list-item-trailing-icon-color:rgba(0, 0, 0, 0.38);--mdc-list-list-item-selected-trailing-icon-color:rgba(0, 0, 0, 0.38);--mdc-list-list-item-disabled-label-text-color:black;--mdc-list-list-item-disabled-leading-icon-color:black;--mdc-list-list-item-disabled-trailing-icon-color:black;--mdc-list-list-item-hover-label-text-color:rgba(0, 0, 0, 0.87);--mdc-list-list-item-hover-leading-icon-color:rgba(0, 0, 0, 0.38);--mdc-list-list-item-hover-trailing-icon-color:rgba(0, 0, 0, 0.38);--mdc-list-list-item-focus-label-text-color:rgba(0, 0, 0, 0.87);--mdc-list-list-item-hover-state-layer-color:black;--mdc-list-list-item-hover-state-layer-opacity:0.04;--mdc-list-list-item-focus-state-layer-color:black;--mdc-list-list-item-focus-state-layer-opacity:0.12}.mdc-list-item__start,.mdc-list-item__end{--mdc-radio-disabled-selected-icon-color:black;--mdc-radio-disabled-unselected-icon-color:black;--mdc-radio-unselected-hover-icon-color:#212121;--mdc-radio-unselected-focus-icon-color:#212121;--mdc-radio-unselected-icon-color:rgba(0, 0, 0, 0.54);--mdc-radio-unselected-pressed-icon-color:rgba(0, 0, 0, 0.54);--mdc-radio-selected-focus-icon-color:#3f51b5;--mdc-radio-selected-hover-icon-color:#3f51b5;--mdc-radio-selected-icon-color:#3f51b5;--mdc-radio-selected-pressed-icon-color:#3f51b5}.mat-accent .mdc-list-item__start,.mat-accent .mdc-list-item__end{--mdc-radio-disabled-selected-icon-color:black;--mdc-radio-disabled-unselected-icon-color:black;--mdc-radio-unselected-hover-icon-color:#212121;--mdc-radio-unselected-focus-icon-color:#212121;--mdc-radio-unselected-icon-color:rgba(0, 0, 0, 0.54);--mdc-radio-unselected-pressed-icon-color:rgba(0, 0, 0, 0.54);--mdc-radio-selected-focus-icon-color:#ff4081;--mdc-radio-selected-hover-icon-color:#ff4081;--mdc-radio-selected-icon-color:#ff4081;--mdc-radio-selected-pressed-icon-color:#ff4081}.mat-warn .mdc-list-item__start,.mat-warn .mdc-list-item__end{--mdc-radio-disabled-selected-icon-color:black;--mdc-radio-disabled-unselected-icon-color:black;--mdc-radio-unselected-hover-icon-color:#212121;--mdc-radio-unselected-focus-icon-color:#212121;--mdc-radio-unselected-icon-color:rgba(0, 0, 0, 0.54);--mdc-radio-unselected-pressed-icon-color:rgba(0, 0, 0, 0.54);--mdc-radio-selected-focus-icon-color:#f44336;--mdc-radio-selected-hover-icon-color:#f44336;--mdc-radio-selected-icon-color:#f44336;--mdc-radio-selected-pressed-icon-color:#f44336}.mat-mdc-list-option{--mdc-checkbox-disabled-selected-icon-color:rgba(0, 0, 0, 0.38);--mdc-checkbox-disabled-unselected-icon-color:rgba(0, 0, 0, 0.38);--mdc-checkbox-selected-checkmark-color:white;--mdc-checkbox-selected-focus-icon-color:#3f51b5;--mdc-checkbox-selected-hover-icon-color:#3f51b5;--mdc-checkbox-selected-icon-color:#3f51b5;--mdc-checkbox-selected-pressed-icon-color:#3f51b5;--mdc-checkbox-unselected-focus-icon-color:#212121;--mdc-checkbox-unselected-hover-icon-color:#212121;--mdc-checkbox-unselected-icon-color:rgba(0, 0, 0, 0.54);--mdc-checkbox-selected-focus-state-layer-color:#3f51b5;--mdc-checkbox-selected-hover-state-layer-color:#3f51b5;--mdc-checkbox-selected-pressed-state-layer-color:#3f51b5;--mdc-checkbox-unselected-focus-state-layer-color:black;--mdc-checkbox-unselected-hover-state-layer-color:black;--mdc-checkbox-unselected-pressed-state-layer-color:black}.mat-mdc-list-option.mat-accent{--mdc-checkbox-disabled-selected-icon-color:rgba(0, 0, 0, 0.38);--mdc-checkbox-disabled-unselected-icon-color:rgba(0, 0, 0, 0.38);--mdc-checkbox-selected-checkmark-color:white;--mdc-checkbox-selected-focus-icon-color:#ff4081;--mdc-checkbox-selected-hover-icon-color:#ff4081;--mdc-checkbox-selected-icon-color:#ff4081;--mdc-checkbox-selected-pressed-icon-color:#ff4081;--mdc-checkbox-unselected-focus-icon-color:#212121;--mdc-checkbox-unselected-hover-icon-color:#212121;--mdc-checkbox-unselected-icon-color:rgba(0, 0, 0, 0.54);--mdc-checkbox-selected-focus-state-layer-color:#ff4081;--mdc-checkbox-selected-hover-state-layer-color:#ff4081;--mdc-checkbox-selected-pressed-state-layer-color:#ff4081;--mdc-checkbox-unselected-focus-state-layer-color:black;--mdc-checkbox-unselected-hover-state-layer-color:black;--mdc-checkbox-unselected-pressed-state-layer-color:black}.mat-mdc-list-option.mat-warn{--mdc-checkbox-disabled-selected-icon-color:rgba(0, 0, 0, 0.38);--mdc-checkbox-disabled-unselected-icon-color:rgba(0, 0, 0, 0.38);--mdc-checkbox-selected-checkmark-color:white;--mdc-checkbox-selected-focus-icon-color:#f44336;--mdc-checkbox-selected-hover-icon-color:#f44336;--mdc-checkbox-selected-icon-color:#f44336;--mdc-checkbox-selected-pressed-icon-color:#f44336;--mdc-checkbox-unselected-focus-icon-color:#212121;--mdc-checkbox-unselected-hover-icon-color:#212121;--mdc-checkbox-unselected-icon-color:rgba(0, 0, 0, 0.54);--mdc-checkbox-selected-focus-state-layer-color:#f44336;--mdc-checkbox-selected-hover-state-layer-color:#f44336;--mdc-checkbox-selected-pressed-state-layer-color:#f44336;--mdc-checkbox-unselected-focus-state-layer-color:black;--mdc-checkbox-unselected-hover-state-layer-color:black;--mdc-checkbox-unselected-pressed-state-layer-color:black}.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start{color:#3f51b5}.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end{opacity:1}html{--mdc-list-list-item-one-line-container-height:48px;--mdc-list-list-item-two-line-container-height:64px;--mdc-list-list-item-three-line-container-height:88px;--mat-list-list-item-leading-icon-start-space:16px;--mat-list-list-item-leading-icon-end-space:32px}.mdc-list-item__start,.mdc-list-item__end{--mdc-radio-state-layer-size:40px}.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line,.mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line,.mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line{height:56px}.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines,.mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines,.mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines{height:72px}html{--mdc-list-list-item-label-text-font:Roboto, sans-serif;--mdc-list-list-item-label-text-line-height:24px;--mdc-list-list-item-label-text-size:16px;--mdc-list-list-item-label-text-tracking:0.03125em;--mdc-list-list-item-label-text-weight:400;--mdc-list-list-item-supporting-text-font:Roboto, sans-serif;--mdc-list-list-item-supporting-text-line-height:20px;--mdc-list-list-item-supporting-text-size:14px;--mdc-list-list-item-supporting-text-tracking:0.0178571429em;--mdc-list-list-item-supporting-text-weight:400;--mdc-list-list-item-trailing-supporting-text-font:Roboto, sans-serif;--mdc-list-list-item-trailing-supporting-text-line-height:20px;--mdc-list-list-item-trailing-supporting-text-size:12px;--mdc-list-list-item-trailing-supporting-text-tracking:0.0333333333em;--mdc-list-list-item-trailing-supporting-text-weight:400}.mdc-list-group__subheader{font:400 16px/28px Roboto, sans-serif;letter-spacing:.009375em}html{--mat-paginator-container-text-color:rgba(0, 0, 0, 0.87);--mat-paginator-container-background-color:white;--mat-paginator-enabled-icon-color:rgba(0, 0, 0, 0.54);--mat-paginator-disabled-icon-color:rgba(0, 0, 0, 0.12);--mat-paginator-container-size:56px;--mat-paginator-form-field-container-height:40px;--mat-paginator-form-field-container-vertical-padding:8px;--mat-paginator-touch-target-display:block;--mat-paginator-container-text-font:Roboto, sans-serif;--mat-paginator-container-text-line-height:20px;--mat-paginator-container-text-size:12px;--mat-paginator-container-text-tracking:0.0333333333em;--mat-paginator-container-text-weight:400;--mat-paginator-select-trigger-text-size:12px;--mdc-secondary-navigation-tab-container-height:48px;--mdc-tab-indicator-active-indicator-height:2px;--mdc-tab-indicator-active-indicator-shape:0;--mat-tab-header-divider-color:transparent;--mat-tab-header-divider-height:0}.mat-mdc-tab-group,.mat-mdc-tab-nav-bar{--mdc-tab-indicator-active-indicator-color:#3f51b5;--mat-tab-header-disabled-ripple-color:rgba(0, 0, 0, 0.38);--mat-tab-header-pagination-icon-color:black;--mat-tab-header-inactive-label-text-color:rgba(0, 0, 0, 0.6);--mat-tab-header-active-label-text-color:#3f51b5;--mat-tab-header-active-ripple-color:#3f51b5;--mat-tab-header-inactive-ripple-color:#3f51b5;--mat-tab-header-inactive-focus-label-text-color:rgba(0, 0, 0, 0.6);--mat-tab-header-inactive-hover-label-text-color:rgba(0, 0, 0, 0.6);--mat-tab-header-active-focus-label-text-color:#3f51b5;--mat-tab-header-active-hover-label-text-color:#3f51b5;--mat-tab-header-active-focus-indicator-color:#3f51b5;--mat-tab-header-active-hover-indicator-color:#3f51b5}.mat-mdc-tab-group.mat-accent,.mat-mdc-tab-nav-bar.mat-accent{--mdc-tab-indicator-active-indicator-color:#ff4081;--mat-tab-header-disabled-ripple-color:rgba(0, 0, 0, 0.38);--mat-tab-header-pagination-icon-color:black;--mat-tab-header-inactive-label-text-color:rgba(0, 0, 0, 0.6);--mat-tab-header-active-label-text-color:#ff4081;--mat-tab-header-active-ripple-color:#ff4081;--mat-tab-header-inactive-ripple-color:#ff4081;--mat-tab-header-inactive-focus-label-text-color:rgba(0, 0, 0, 0.6);--mat-tab-header-inactive-hover-label-text-color:rgba(0, 0, 0, 0.6);--mat-tab-header-active-focus-label-text-color:#ff4081;--mat-tab-header-active-hover-label-text-color:#ff4081;--mat-tab-header-active-focus-indicator-color:#ff4081;--mat-tab-header-active-hover-indicator-color:#ff4081}.mat-mdc-tab-group.mat-warn,.mat-mdc-tab-nav-bar.mat-warn{--mdc-tab-indicator-active-indicator-color:#f44336;--mat-tab-header-disabled-ripple-color:rgba(0, 0, 0, 0.38);--mat-tab-header-pagination-icon-color:black;--mat-tab-header-inactive-label-text-color:rgba(0, 0, 0, 0.6);--mat-tab-header-active-label-text-color:#f44336;--mat-tab-header-active-ripple-color:#f44336;--mat-tab-header-inactive-ripple-color:#f44336;--mat-tab-header-inactive-focus-label-text-color:rgba(0, 0, 0, 0.6);--mat-tab-header-inactive-hover-label-text-color:rgba(0, 0, 0, 0.6);--mat-tab-header-active-focus-label-text-color:#f44336;--mat-tab-header-active-hover-label-text-color:#f44336;--mat-tab-header-active-focus-indicator-color:#f44336;--mat-tab-header-active-hover-indicator-color:#f44336}.mat-mdc-tab-group.mat-background-primary,.mat-mdc-tab-nav-bar.mat-background-primary{--mat-tab-header-with-background-background-color:#3f51b5;--mat-tab-header-with-background-foreground-color:white}.mat-mdc-tab-group.mat-background-accent,.mat-mdc-tab-nav-bar.mat-background-accent{--mat-tab-header-with-background-background-color:#ff4081;--mat-tab-header-with-background-foreground-color:white}.mat-mdc-tab-group.mat-background-warn,.mat-mdc-tab-nav-bar.mat-background-warn{--mat-tab-header-with-background-background-color:#f44336;--mat-tab-header-with-background-foreground-color:white}.mat-mdc-tab-header{--mdc-secondary-navigation-tab-container-height:48px;--mat-tab-header-label-text-font:Roboto, sans-serif;--mat-tab-header-label-text-size:14px;--mat-tab-header-label-text-tracking:0.0892857143em;--mat-tab-header-label-text-line-height:36px;--mat-tab-header-label-text-weight:500}html{--mdc-checkbox-disabled-selected-checkmark-color:#fff;--mdc-checkbox-selected-focus-state-layer-opacity:0.16;--mdc-checkbox-selected-hover-state-layer-opacity:0.04;--mdc-checkbox-selected-pressed-state-layer-opacity:0.16;--mdc-checkbox-unselected-focus-state-layer-opacity:0.16;--mdc-checkbox-unselected-hover-state-layer-opacity:0.04;--mdc-checkbox-unselected-pressed-state-layer-opacity:0.16;--mdc-checkbox-disabled-selected-icon-color:rgba(0, 0, 0, 0.38);--mdc-checkbox-disabled-unselected-icon-color:rgba(0, 0, 0, 0.38);--mdc-checkbox-selected-checkmark-color:white;--mdc-checkbox-selected-focus-icon-color:#ff4081;--mdc-checkbox-selected-hover-icon-color:#ff4081;--mdc-checkbox-selected-icon-color:#ff4081;--mdc-checkbox-selected-pressed-icon-color:#ff4081;--mdc-checkbox-unselected-focus-icon-color:#212121;--mdc-checkbox-unselected-hover-icon-color:#212121;--mdc-checkbox-unselected-icon-color:rgba(0, 0, 0, 0.54);--mdc-checkbox-selected-focus-state-layer-color:#ff4081;--mdc-checkbox-selected-hover-state-layer-color:#ff4081;--mdc-checkbox-selected-pressed-state-layer-color:#ff4081;--mdc-checkbox-unselected-focus-state-layer-color:black;--mdc-checkbox-unselected-hover-state-layer-color:black;--mdc-checkbox-unselected-pressed-state-layer-color:black;--mat-checkbox-disabled-label-color:rgba(0, 0, 0, 0.38);--mat-checkbox-label-text-color:rgba(0, 0, 0, 0.87)}.mat-mdc-checkbox.mat-primary{--mdc-checkbox-disabled-selected-icon-color:rgba(0, 0, 0, 0.38);--mdc-checkbox-disabled-unselected-icon-color:rgba(0, 0, 0, 0.38);--mdc-checkbox-selected-checkmark-color:white;--mdc-checkbox-selected-focus-icon-color:#3f51b5;--mdc-checkbox-selected-hover-icon-color:#3f51b5;--mdc-checkbox-selected-icon-color:#3f51b5;--mdc-checkbox-selected-pressed-icon-color:#3f51b5;--mdc-checkbox-unselected-focus-icon-color:#212121;--mdc-checkbox-unselected-hover-icon-color:#212121;--mdc-checkbox-unselected-icon-color:rgba(0, 0, 0, 0.54);--mdc-checkbox-selected-focus-state-layer-color:#3f51b5;--mdc-checkbox-selected-hover-state-layer-color:#3f51b5;--mdc-checkbox-selected-pressed-state-layer-color:#3f51b5;--mdc-checkbox-unselected-focus-state-layer-color:black;--mdc-checkbox-unselected-hover-state-layer-color:black;--mdc-checkbox-unselected-pressed-state-layer-color:black}.mat-mdc-checkbox.mat-warn{--mdc-checkbox-disabled-selected-icon-color:rgba(0, 0, 0, 0.38);--mdc-checkbox-disabled-unselected-icon-color:rgba(0, 0, 0, 0.38);--mdc-checkbox-selected-checkmark-color:white;--mdc-checkbox-selected-focus-icon-color:#f44336;--mdc-checkbox-selected-hover-icon-color:#f44336;--mdc-checkbox-selected-icon-color:#f44336;--mdc-checkbox-selected-pressed-icon-color:#f44336;--mdc-checkbox-unselected-focus-icon-color:#212121;--mdc-checkbox-unselected-hover-icon-color:#212121;--mdc-checkbox-unselected-icon-color:rgba(0, 0, 0, 0.54);--mdc-checkbox-selected-focus-state-layer-color:#f44336;--mdc-checkbox-selected-hover-state-layer-color:#f44336;--mdc-checkbox-selected-pressed-state-layer-color:#f44336;--mdc-checkbox-unselected-focus-state-layer-color:black;--mdc-checkbox-unselected-hover-state-layer-color:black;--mdc-checkbox-unselected-pressed-state-layer-color:black}html{--mdc-checkbox-state-layer-size:40px;--mat-checkbox-touch-target-display:block;--mat-checkbox-label-text-font:Roboto, sans-serif;--mat-checkbox-label-text-line-height:20px;--mat-checkbox-label-text-size:14px;--mat-checkbox-label-text-tracking:0.0178571429em;--mat-checkbox-label-text-weight:400;--mdc-text-button-container-shape:4px;--mdc-text-button-keep-touch-target:false;--mdc-filled-button-container-shape:4px;--mdc-filled-button-keep-touch-target:false;--mdc-protected-button-container-shape:4px;--mdc-protected-button-container-elevation-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);--mdc-protected-button-disabled-container-elevation-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);--mdc-protected-button-focus-container-elevation-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);--mdc-protected-button-hover-container-elevation-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);--mdc-protected-button-pressed-container-elevation-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mdc-outlined-button-keep-touch-target:false;--mdc-outlined-button-outline-width:1px;--mdc-outlined-button-container-shape:4px;--mat-text-button-horizontal-padding:8px;--mat-text-button-with-icon-horizontal-padding:8px;--mat-text-button-icon-spacing:8px;--mat-text-button-icon-offset:0;--mat-filled-button-horizontal-padding:16px;--mat-filled-button-icon-spacing:8px;--mat-filled-button-icon-offset:-4px;--mat-protected-button-horizontal-padding:16px;--mat-protected-button-icon-spacing:8px;--mat-protected-button-icon-offset:-4px;--mat-outlined-button-horizontal-padding:15px;--mat-outlined-button-icon-spacing:8px;--mat-outlined-button-icon-offset:-4px;--mdc-text-button-label-text-color:black;--mdc-text-button-disabled-label-text-color:rgba(0, 0, 0, 0.38);--mat-text-button-state-layer-color:black;--mat-text-button-disabled-state-layer-color:black;--mat-text-button-ripple-color:rgba(0, 0, 0, 0.1);--mat-text-button-hover-state-layer-opacity:0.04;--mat-text-button-focus-state-layer-opacity:0.12;--mat-text-button-pressed-state-layer-opacity:0.12;--mdc-filled-button-container-color:white;--mdc-filled-button-label-text-color:black;--mdc-filled-button-disabled-container-color:rgba(0, 0, 0, 0.12);--mdc-filled-button-disabled-label-text-color:rgba(0, 0, 0, 0.38);--mat-filled-button-state-layer-color:black;--mat-filled-button-disabled-state-layer-color:black;--mat-filled-button-ripple-color:rgba(0, 0, 0, 0.1);--mat-filled-button-hover-state-layer-opacity:0.04;--mat-filled-button-focus-state-layer-opacity:0.12;--mat-filled-button-pressed-state-layer-opacity:0.12;--mdc-protected-button-container-color:white;--mdc-protected-button-label-text-color:black;--mdc-protected-button-disabled-container-color:rgba(0, 0, 0, 0.12);--mdc-protected-button-disabled-label-text-color:rgba(0, 0, 0, 0.38);--mat-protected-button-state-layer-color:black;--mat-protected-button-disabled-state-layer-color:black;--mat-protected-button-ripple-color:rgba(0, 0, 0, 0.1);--mat-protected-button-hover-state-layer-opacity:0.04;--mat-protected-button-focus-state-layer-opacity:0.12;--mat-protected-button-pressed-state-layer-opacity:0.12;--mdc-outlined-button-disabled-outline-color:rgba(0, 0, 0, 0.12);--mdc-outlined-button-disabled-label-text-color:rgba(0, 0, 0, 0.38);--mdc-outlined-button-label-text-color:black;--mdc-outlined-button-outline-color:rgba(0, 0, 0, 0.12);--mat-outlined-button-state-layer-color:black;--mat-outlined-button-disabled-state-layer-color:black;--mat-outlined-button-ripple-color:rgba(0, 0, 0, 0.1);--mat-outlined-button-hover-state-layer-opacity:0.04;--mat-outlined-button-focus-state-layer-opacity:0.12;--mat-outlined-button-pressed-state-layer-opacity:0.12}.mat-mdc-button.mat-primary{--mdc-text-button-label-text-color:#3f51b5;--mat-text-button-state-layer-color:#3f51b5;--mat-text-button-ripple-color:rgba(63, 81, 181, 0.1)}.mat-mdc-button.mat-accent{--mdc-text-button-label-text-color:#ff4081;--mat-text-button-state-layer-color:#ff4081;--mat-text-button-ripple-color:rgba(255, 64, 129, 0.1)}.mat-mdc-button.mat-warn{--mdc-text-button-label-text-color:#f44336;--mat-text-button-state-layer-color:#f44336;--mat-text-button-ripple-color:rgba(244, 67, 54, 0.1)}.mat-mdc-unelevated-button.mat-primary{--mdc-filled-button-container-color:#3f51b5;--mdc-filled-button-label-text-color:white;--mat-filled-button-state-layer-color:white;--mat-filled-button-ripple-color:rgba(255, 255, 255, 0.1)}.mat-mdc-unelevated-button.mat-accent{--mdc-filled-button-container-color:#ff4081;--mdc-filled-button-label-text-color:white;--mat-filled-button-state-layer-color:white;--mat-filled-button-ripple-color:rgba(255, 255, 255, 0.1)}.mat-mdc-unelevated-button.mat-warn{--mdc-filled-button-container-color:#f44336;--mdc-filled-button-label-text-color:white;--mat-filled-button-state-layer-color:white;--mat-filled-button-ripple-color:rgba(255, 255, 255, 0.1)}.mat-mdc-raised-button.mat-primary{--mdc-protected-button-container-color:#3f51b5;--mdc-protected-button-label-text-color:white;--mat-protected-button-state-layer-color:white;--mat-protected-button-ripple-color:rgba(255, 255, 255, 0.1)}.mat-mdc-raised-button.mat-accent{--mdc-protected-button-container-color:#ff4081;--mdc-protected-button-label-text-color:white;--mat-protected-button-state-layer-color:white;--mat-protected-button-ripple-color:rgba(255, 255, 255, 0.1)}.mat-mdc-raised-button.mat-warn{--mdc-protected-button-container-color:#f44336;--mdc-protected-button-label-text-color:white;--mat-protected-button-state-layer-color:white;--mat-protected-button-ripple-color:rgba(255, 255, 255, 0.1)}.mat-mdc-outlined-button.mat-primary{--mdc-outlined-button-label-text-color:#3f51b5;--mdc-outlined-button-outline-color:rgba(0, 0, 0, 0.12);--mat-outlined-button-state-layer-color:#3f51b5;--mat-outlined-button-ripple-color:rgba(63, 81, 181, 0.1)}.mat-mdc-outlined-button.mat-accent{--mdc-outlined-button-label-text-color:#ff4081;--mdc-outlined-button-outline-color:rgba(0, 0, 0, 0.12);--mat-outlined-button-state-layer-color:#ff4081;--mat-outlined-button-ripple-color:rgba(255, 64, 129, 0.1)}.mat-mdc-outlined-button.mat-warn{--mdc-outlined-button-label-text-color:#f44336;--mdc-outlined-button-outline-color:rgba(0, 0, 0, 0.12);--mat-outlined-button-state-layer-color:#f44336;--mat-outlined-button-ripple-color:rgba(244, 67, 54, 0.1)}html{--mdc-text-button-container-height:36px;--mdc-filled-button-container-height:36px;--mdc-protected-button-container-height:36px;--mdc-outlined-button-container-height:36px;--mat-text-button-touch-target-display:block;--mat-filled-button-touch-target-display:block;--mat-protected-button-touch-target-display:block;--mat-outlined-button-touch-target-display:block;--mdc-text-button-label-text-font:Roboto, sans-serif;--mdc-text-button-label-text-size:14px;--mdc-text-button-label-text-tracking:0.0892857143em;--mdc-text-button-label-text-weight:500;--mdc-text-button-label-text-transform:none;--mdc-filled-button-label-text-font:Roboto, sans-serif;--mdc-filled-button-label-text-size:14px;--mdc-filled-button-label-text-tracking:0.0892857143em;--mdc-filled-button-label-text-weight:500;--mdc-filled-button-label-text-transform:none;--mdc-protected-button-label-text-font:Roboto, sans-serif;--mdc-protected-button-label-text-size:14px;--mdc-protected-button-label-text-tracking:0.0892857143em;--mdc-protected-button-label-text-weight:500;--mdc-protected-button-label-text-transform:none;--mdc-outlined-button-label-text-font:Roboto, sans-serif;--mdc-outlined-button-label-text-size:14px;--mdc-outlined-button-label-text-tracking:0.0892857143em;--mdc-outlined-button-label-text-weight:500;--mdc-outlined-button-label-text-transform:none;--mdc-icon-button-icon-size:24px;--mdc-icon-button-icon-color:inherit;--mdc-icon-button-disabled-icon-color:rgba(0, 0, 0, 0.38);--mat-icon-button-state-layer-color:black;--mat-icon-button-disabled-state-layer-color:black;--mat-icon-button-ripple-color:rgba(0, 0, 0, 0.1);--mat-icon-button-hover-state-layer-opacity:0.04;--mat-icon-button-focus-state-layer-opacity:0.12;--mat-icon-button-pressed-state-layer-opacity:0.12}html .mat-mdc-icon-button.mat-primary{--mdc-icon-button-icon-color:#3f51b5;--mat-icon-button-state-layer-color:#3f51b5;--mat-icon-button-ripple-color:rgba(63, 81, 181, 0.1)}html .mat-mdc-icon-button.mat-accent{--mdc-icon-button-icon-color:#ff4081;--mat-icon-button-state-layer-color:#ff4081;--mat-icon-button-ripple-color:rgba(255, 64, 129, 0.1)}html .mat-mdc-icon-button.mat-warn{--mdc-icon-button-icon-color:#f44336;--mat-icon-button-state-layer-color:#f44336;--mat-icon-button-ripple-color:rgba(244, 67, 54, 0.1)}html{--mat-icon-button-touch-target-display:block}.mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 48px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:12px}html{--mdc-fab-container-shape:50%;--mdc-fab-container-elevation-shadow:0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);--mdc-fab-focus-container-elevation-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mdc-fab-hover-container-elevation-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mdc-fab-pressed-container-elevation-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);--mdc-fab-small-container-shape:50%;--mdc-fab-small-container-elevation-shadow:0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);--mdc-fab-small-focus-container-elevation-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mdc-fab-small-hover-container-elevation-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mdc-fab-small-pressed-container-elevation-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);--mdc-extended-fab-container-height:48px;--mdc-extended-fab-container-shape:24px;--mdc-extended-fab-container-elevation-shadow:0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);--mdc-extended-fab-focus-container-elevation-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mdc-extended-fab-hover-container-elevation-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mdc-extended-fab-pressed-container-elevation-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);--mdc-fab-container-color:white;--mat-fab-foreground-color:black;--mat-fab-state-layer-color:black;--mat-fab-disabled-state-layer-color:black;--mat-fab-ripple-color:rgba(0, 0, 0, 0.1);--mat-fab-hover-state-layer-opacity:0.04;--mat-fab-focus-state-layer-opacity:0.12;--mat-fab-pressed-state-layer-opacity:0.12;--mat-fab-disabled-state-container-color:rgba(0, 0, 0, 0.12);--mat-fab-disabled-state-foreground-color:rgba(0, 0, 0, 0.38);--mdc-fab-small-container-color:white;--mat-fab-small-foreground-color:black;--mat-fab-small-state-layer-color:black;--mat-fab-small-disabled-state-layer-color:black;--mat-fab-small-ripple-color:rgba(0, 0, 0, 0.1);--mat-fab-small-hover-state-layer-opacity:0.04;--mat-fab-small-focus-state-layer-opacity:0.12;--mat-fab-small-pressed-state-layer-opacity:0.12;--mat-fab-small-disabled-state-container-color:rgba(0, 0, 0, 0.12);--mat-fab-small-disabled-state-foreground-color:rgba(0, 0, 0, 0.38)}html .mat-mdc-fab.mat-primary{--mdc-fab-container-color:#3f51b5;--mat-fab-foreground-color:white;--mat-fab-state-layer-color:white;--mat-fab-ripple-color:rgba(255, 255, 255, 0.1)}html .mat-mdc-fab.mat-accent{--mdc-fab-container-color:#ff4081;--mat-fab-foreground-color:white;--mat-fab-state-layer-color:white;--mat-fab-ripple-color:rgba(255, 255, 255, 0.1)}html .mat-mdc-fab.mat-warn{--mdc-fab-container-color:#f44336;--mat-fab-foreground-color:white;--mat-fab-state-layer-color:white;--mat-fab-ripple-color:rgba(255, 255, 255, 0.1)}html .mat-mdc-mini-fab.mat-primary{--mdc-fab-small-container-color:#3f51b5;--mat-fab-small-foreground-color:white;--mat-fab-small-state-layer-color:white;--mat-fab-small-ripple-color:rgba(255, 255, 255, 0.1)}html .mat-mdc-mini-fab.mat-accent{--mdc-fab-small-container-color:#ff4081;--mat-fab-small-foreground-color:white;--mat-fab-small-state-layer-color:white;--mat-fab-small-ripple-color:rgba(255, 255, 255, 0.1)}html .mat-mdc-mini-fab.mat-warn{--mdc-fab-small-container-color:#f44336;--mat-fab-small-foreground-color:white;--mat-fab-small-state-layer-color:white;--mat-fab-small-ripple-color:rgba(255, 255, 255, 0.1)}html{--mat-fab-touch-target-display:block;--mat-fab-small-touch-target-display:block;--mdc-extended-fab-label-text-font:Roboto, sans-serif;--mdc-extended-fab-label-text-size:14px;--mdc-extended-fab-label-text-tracking:0.0892857143em;--mdc-extended-fab-label-text-weight:500;--mdc-snackbar-container-shape:4px;--mdc-snackbar-container-color:#333333;--mdc-snackbar-supporting-text-color:rgba(255, 255, 255, 0.87);--mat-snack-bar-button-color:#ff4081;--mdc-snackbar-supporting-text-font:Roboto, sans-serif;--mdc-snackbar-supporting-text-line-height:20px;--mdc-snackbar-supporting-text-size:14px;--mdc-snackbar-supporting-text-weight:400;--mat-table-row-item-outline-width:1px;--mat-table-background-color:white;--mat-table-header-headline-color:rgba(0, 0, 0, 0.87);--mat-table-row-item-label-text-color:rgba(0, 0, 0, 0.87);--mat-table-row-item-outline-color:rgba(0, 0, 0, 0.12);--mat-table-header-container-height:56px;--mat-table-footer-container-height:52px;--mat-table-row-item-container-height:52px;--mat-table-header-headline-font:Roboto, sans-serif;--mat-table-header-headline-line-height:22px;--mat-table-header-headline-size:14px;--mat-table-header-headline-weight:500;--mat-table-header-headline-tracking:0.0071428571em;--mat-table-row-item-label-text-font:Roboto, sans-serif;--mat-table-row-item-label-text-line-height:20px;--mat-table-row-item-label-text-size:14px;--mat-table-row-item-label-text-weight:400;--mat-table-row-item-label-text-tracking:0.0178571429em;--mat-table-footer-supporting-text-font:Roboto, sans-serif;--mat-table-footer-supporting-text-line-height:20px;--mat-table-footer-supporting-text-size:14px;--mat-table-footer-supporting-text-weight:400;--mat-table-footer-supporting-text-tracking:0.0178571429em;--mdc-circular-progress-active-indicator-width:4px;--mdc-circular-progress-size:48px;--mdc-circular-progress-active-indicator-color:#3f51b5}html .mat-accent{--mdc-circular-progress-active-indicator-color:#ff4081}html .mat-warn{--mdc-circular-progress-active-indicator-color:#f44336}html{--mat-badge-container-shape:50%;--mat-badge-container-size:unset;--mat-badge-small-size-container-size:unset;--mat-badge-large-size-container-size:unset;--mat-badge-legacy-container-size:22px;--mat-badge-legacy-small-size-container-size:16px;--mat-badge-legacy-large-size-container-size:28px;--mat-badge-container-offset:-11px 0;--mat-badge-small-size-container-offset:-8px 0;--mat-badge-large-size-container-offset:-14px 0;--mat-badge-container-overlap-offset:-11px;--mat-badge-small-size-container-overlap-offset:-8px;--mat-badge-large-size-container-overlap-offset:-14px;--mat-badge-container-padding:0;--mat-badge-small-size-container-padding:0;--mat-badge-large-size-container-padding:0;--mat-badge-background-color:#3f51b5;--mat-badge-text-color:white;--mat-badge-disabled-state-background-color:#b9b9b9;--mat-badge-disabled-state-text-color:rgba(0, 0, 0, 0.38)}.mat-badge-accent{--mat-badge-background-color:#ff4081;--mat-badge-text-color:white}.mat-badge-warn{--mat-badge-background-color:#f44336;--mat-badge-text-color:white}html{--mat-badge-text-font:Roboto, sans-serif;--mat-badge-line-height:22px;--mat-badge-text-size:12px;--mat-badge-text-weight:600;--mat-badge-small-size-text-size:9px;--mat-badge-small-size-line-height:16px;--mat-badge-large-size-text-size:24px;--mat-badge-large-size-line-height:28px;--mat-bottom-sheet-container-shape:4px;--mat-bottom-sheet-container-text-color:rgba(0, 0, 0, 0.87);--mat-bottom-sheet-container-background-color:white;--mat-bottom-sheet-container-text-font:Roboto, sans-serif;--mat-bottom-sheet-container-text-line-height:20px;--mat-bottom-sheet-container-text-size:14px;--mat-bottom-sheet-container-text-tracking:0.0178571429em;--mat-bottom-sheet-container-text-weight:400;--mat-legacy-button-toggle-height:36px;--mat-legacy-button-toggle-shape:2px;--mat-legacy-button-toggle-focus-state-layer-opacity:1;--mat-standard-button-toggle-shape:4px;--mat-standard-button-toggle-hover-state-layer-opacity:0.04;--mat-standard-button-toggle-focus-state-layer-opacity:0.12;--mat-legacy-button-toggle-text-color:rgba(0, 0, 0, 0.38);--mat-legacy-button-toggle-state-layer-color:rgba(0, 0, 0, 0.12);--mat-legacy-button-toggle-selected-state-text-color:rgba(0, 0, 0, 0.54);--mat-legacy-button-toggle-selected-state-background-color:#e0e0e0;--mat-legacy-button-toggle-disabled-state-text-color:rgba(0, 0, 0, 0.26);--mat-legacy-button-toggle-disabled-state-background-color:#eeeeee;--mat-legacy-button-toggle-disabled-selected-state-background-color:#bdbdbd;--mat-standard-button-toggle-text-color:rgba(0, 0, 0, 0.87);--mat-standard-button-toggle-background-color:white;--mat-standard-button-toggle-state-layer-color:black;--mat-standard-button-toggle-selected-state-background-color:#e0e0e0;--mat-standard-button-toggle-selected-state-text-color:rgba(0, 0, 0, 0.87);--mat-standard-button-toggle-disabled-state-text-color:rgba(0, 0, 0, 0.26);--mat-standard-button-toggle-disabled-state-background-color:white;--mat-standard-button-toggle-disabled-selected-state-text-color:rgba(0, 0, 0, 0.87);--mat-standard-button-toggle-disabled-selected-state-background-color:#bdbdbd;--mat-standard-button-toggle-divider-color:#e0e0e0;--mat-standard-button-toggle-height:48px;--mat-legacy-button-toggle-label-text-font:Roboto, sans-serif;--mat-legacy-button-toggle-label-text-line-height:24px;--mat-legacy-button-toggle-label-text-size:16px;--mat-legacy-button-toggle-label-text-tracking:0.03125em;--mat-legacy-button-toggle-label-text-weight:400;--mat-standard-button-toggle-label-text-font:Roboto, sans-serif;--mat-standard-button-toggle-label-text-line-height:24px;--mat-standard-button-toggle-label-text-size:16px;--mat-standard-button-toggle-label-text-tracking:0.03125em;--mat-standard-button-toggle-label-text-weight:400;--mat-datepicker-calendar-container-shape:4px;--mat-datepicker-calendar-container-touch-shape:4px;--mat-datepicker-calendar-container-elevation-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);--mat-datepicker-calendar-container-touch-elevation-shadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);--mat-datepicker-calendar-date-selected-state-text-color:white;--mat-datepicker-calendar-date-selected-state-background-color:#3f51b5;--mat-datepicker-calendar-date-selected-disabled-state-background-color:rgba(63, 81, 181, 0.4);--mat-datepicker-calendar-date-today-selected-state-outline-color:white;--mat-datepicker-calendar-date-focus-state-background-color:rgba(63, 81, 181, 0.3);--mat-datepicker-calendar-date-hover-state-background-color:rgba(63, 81, 181, 0.3);--mat-datepicker-toggle-active-state-icon-color:#3f51b5;--mat-datepicker-calendar-date-in-range-state-background-color:rgba(63, 81, 181, 0.2);--mat-datepicker-calendar-date-in-comparison-range-state-background-color:rgba(249, 171, 0, 0.2);--mat-datepicker-calendar-date-in-overlap-range-state-background-color:#a8dab5;--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color:#46a35e;--mat-datepicker-toggle-icon-color:rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-body-label-text-color:rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-period-button-text-color:black;--mat-datepicker-calendar-period-button-icon-color:rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-navigation-button-icon-color:rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-header-divider-color:rgba(0, 0, 0, 0.12);--mat-datepicker-calendar-header-text-color:rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-date-today-outline-color:rgba(0, 0, 0, 0.38);--mat-datepicker-calendar-date-today-disabled-state-outline-color:rgba(0, 0, 0, 0.18);--mat-datepicker-calendar-date-text-color:rgba(0, 0, 0, 0.87);--mat-datepicker-calendar-date-outline-color:transparent;--mat-datepicker-calendar-date-disabled-state-text-color:rgba(0, 0, 0, 0.38);--mat-datepicker-calendar-date-preview-state-outline-color:rgba(0, 0, 0, 0.24);--mat-datepicker-range-input-separator-color:rgba(0, 0, 0, 0.87);--mat-datepicker-range-input-disabled-state-separator-color:rgba(0, 0, 0, 0.38);--mat-datepicker-range-input-disabled-state-text-color:rgba(0, 0, 0, 0.38);--mat-datepicker-calendar-container-background-color:white;--mat-datepicker-calendar-container-text-color:rgba(0, 0, 0, 0.87)}.mat-datepicker-content.mat-accent{--mat-datepicker-calendar-date-selected-state-text-color:white;--mat-datepicker-calendar-date-selected-state-background-color:#ff4081;--mat-datepicker-calendar-date-selected-disabled-state-background-color:rgba(255, 64, 129, 0.4);--mat-datepicker-calendar-date-today-selected-state-outline-color:white;--mat-datepicker-calendar-date-focus-state-background-color:rgba(255, 64, 129, 0.3);--mat-datepicker-calendar-date-hover-state-background-color:rgba(255, 64, 129, 0.3);--mat-datepicker-calendar-date-in-range-state-background-color:rgba(255, 64, 129, 0.2);--mat-datepicker-calendar-date-in-comparison-range-state-background-color:rgba(249, 171, 0, 0.2);--mat-datepicker-calendar-date-in-overlap-range-state-background-color:#a8dab5;--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color:#46a35e}.mat-datepicker-content.mat-warn{--mat-datepicker-calendar-date-selected-state-text-color:white;--mat-datepicker-calendar-date-selected-state-background-color:#f44336;--mat-datepicker-calendar-date-selected-disabled-state-background-color:rgba(244, 67, 54, 0.4);--mat-datepicker-calendar-date-today-selected-state-outline-color:white;--mat-datepicker-calendar-date-focus-state-background-color:rgba(244, 67, 54, 0.3);--mat-datepicker-calendar-date-hover-state-background-color:rgba(244, 67, 54, 0.3);--mat-datepicker-calendar-date-in-range-state-background-color:rgba(244, 67, 54, 0.2);--mat-datepicker-calendar-date-in-comparison-range-state-background-color:rgba(249, 171, 0, 0.2);--mat-datepicker-calendar-date-in-overlap-range-state-background-color:#a8dab5;--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color:#46a35e}.mat-datepicker-toggle-active.mat-accent{--mat-datepicker-toggle-active-state-icon-color:#ff4081}.mat-datepicker-toggle-active.mat-warn{--mat-datepicker-toggle-active-state-icon-color:#f44336}.mat-calendar-controls{--mat-icon-button-touch-target-display:none}.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 40px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:8px}html{--mat-datepicker-calendar-text-font:Roboto, sans-serif;--mat-datepicker-calendar-text-size:13px;--mat-datepicker-calendar-body-label-text-size:14px;--mat-datepicker-calendar-body-label-text-weight:500;--mat-datepicker-calendar-period-button-text-size:14px;--mat-datepicker-calendar-period-button-text-weight:500;--mat-datepicker-calendar-header-text-size:11px;--mat-datepicker-calendar-header-text-weight:400;--mat-divider-width:1px;--mat-divider-color:rgba(0, 0, 0, 0.12);--mat-expansion-container-shape:4px;--mat-expansion-legacy-header-indicator-display:inline-block;--mat-expansion-header-indicator-display:none;--mat-expansion-container-background-color:white;--mat-expansion-container-text-color:rgba(0, 0, 0, 0.87);--mat-expansion-actions-divider-color:rgba(0, 0, 0, 0.12);--mat-expansion-header-hover-state-layer-color:rgba(0, 0, 0, 0.04);--mat-expansion-header-focus-state-layer-color:rgba(0, 0, 0, 0.04);--mat-expansion-header-disabled-state-text-color:rgba(0, 0, 0, 0.26);--mat-expansion-header-text-color:rgba(0, 0, 0, 0.87);--mat-expansion-header-description-color:rgba(0, 0, 0, 0.54);--mat-expansion-header-indicator-color:rgba(0, 0, 0, 0.54);--mat-expansion-header-collapsed-state-height:48px;--mat-expansion-header-expanded-state-height:64px;--mat-expansion-header-text-font:Roboto, sans-serif;--mat-expansion-header-text-size:14px;--mat-expansion-header-text-weight:500;--mat-expansion-header-text-line-height:inherit;--mat-expansion-header-text-tracking:inherit;--mat-expansion-container-text-font:Roboto, sans-serif;--mat-expansion-container-text-line-height:20px;--mat-expansion-container-text-size:14px;--mat-expansion-container-text-tracking:0.0178571429em;--mat-expansion-container-text-weight:400;--mat-grid-list-tile-header-primary-text-size:14px;--mat-grid-list-tile-header-secondary-text-size:12px;--mat-grid-list-tile-footer-primary-text-size:14px;--mat-grid-list-tile-footer-secondary-text-size:12px;--mat-icon-color:inherit}.mat-icon.mat-primary{--mat-icon-color:#3f51b5}.mat-icon.mat-accent{--mat-icon-color:#ff4081}.mat-icon.mat-warn{--mat-icon-color:#f44336}html{--mat-sidenav-container-shape:0;--mat-sidenav-container-elevation-shadow:0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);--mat-sidenav-container-width:auto;--mat-sidenav-container-divider-color:rgba(0, 0, 0, 0.12);--mat-sidenav-container-background-color:white;--mat-sidenav-container-text-color:rgba(0, 0, 0, 0.87);--mat-sidenav-content-background-color:#fafafa;--mat-sidenav-content-text-color:rgba(0, 0, 0, 0.87);--mat-sidenav-scrim-color:rgba(0, 0, 0, 0.6);--mat-stepper-header-icon-foreground-color:white;--mat-stepper-header-selected-state-icon-background-color:#3f51b5;--mat-stepper-header-selected-state-icon-foreground-color:white;--mat-stepper-header-done-state-icon-background-color:#3f51b5;--mat-stepper-header-done-state-icon-foreground-color:white;--mat-stepper-header-edit-state-icon-background-color:#3f51b5;--mat-stepper-header-edit-state-icon-foreground-color:white;--mat-stepper-container-color:white;--mat-stepper-line-color:rgba(0, 0, 0, 0.12);--mat-stepper-header-hover-state-layer-color:rgba(0, 0, 0, 0.04);--mat-stepper-header-focus-state-layer-color:rgba(0, 0, 0, 0.04);--mat-stepper-header-label-text-color:rgba(0, 0, 0, 0.54);--mat-stepper-header-optional-label-text-color:rgba(0, 0, 0, 0.54);--mat-stepper-header-selected-state-label-text-color:rgba(0, 0, 0, 0.87);--mat-stepper-header-error-state-label-text-color:#f44336;--mat-stepper-header-icon-background-color:rgba(0, 0, 0, 0.54);--mat-stepper-header-error-state-icon-foreground-color:#f44336;--mat-stepper-header-error-state-icon-background-color:transparent}html .mat-step-header.mat-accent{--mat-stepper-header-icon-foreground-color:white;--mat-stepper-header-selected-state-icon-background-color:#ff4081;--mat-stepper-header-selected-state-icon-foreground-color:white;--mat-stepper-header-done-state-icon-background-color:#ff4081;--mat-stepper-header-done-state-icon-foreground-color:white;--mat-stepper-header-edit-state-icon-background-color:#ff4081;--mat-stepper-header-edit-state-icon-foreground-color:white}html .mat-step-header.mat-warn{--mat-stepper-header-icon-foreground-color:white;--mat-stepper-header-selected-state-icon-background-color:#f44336;--mat-stepper-header-selected-state-icon-foreground-color:white;--mat-stepper-header-done-state-icon-background-color:#f44336;--mat-stepper-header-done-state-icon-foreground-color:white;--mat-stepper-header-edit-state-icon-background-color:#f44336;--mat-stepper-header-edit-state-icon-foreground-color:white}html{--mat-stepper-header-height:72px;--mat-stepper-container-text-font:Roboto, sans-serif;--mat-stepper-header-label-text-font:Roboto, sans-serif;--mat-stepper-header-label-text-size:14px;--mat-stepper-header-label-text-weight:400;--mat-stepper-header-error-state-label-text-size:16px;--mat-stepper-header-selected-state-label-text-size:16px;--mat-stepper-header-selected-state-label-text-weight:400;--mat-sort-arrow-color:#757575;--mat-toolbar-container-background-color:whitesmoke;--mat-toolbar-container-text-color:rgba(0, 0, 0, 0.87)}.mat-toolbar.mat-primary{--mat-toolbar-container-background-color:#3f51b5;--mat-toolbar-container-text-color:white}.mat-toolbar.mat-accent{--mat-toolbar-container-background-color:#ff4081;--mat-toolbar-container-text-color:white}.mat-toolbar.mat-warn{--mat-toolbar-container-background-color:#f44336;--mat-toolbar-container-text-color:white}html{--mat-toolbar-standard-height:64px;--mat-toolbar-mobile-height:56px;--mat-toolbar-title-text-font:Roboto, sans-serif;--mat-toolbar-title-text-line-height:32px;--mat-toolbar-title-text-size:20px;--mat-toolbar-title-text-tracking:0.0125em;--mat-toolbar-title-text-weight:500;--mat-tree-container-background-color:white;--mat-tree-node-text-color:rgba(0, 0, 0, 0.87);--mat-tree-node-min-height:48px;--mat-tree-node-text-font:Roboto, sans-serif;--mat-tree-node-text-size:14px;--mat-tree-node-text-weight:400}.mat-h1,.mat-headline-5,.mat-typography .mat-h1,.mat-typography .mat-headline-5,.mat-typography h1{font:400 24px/32px Roboto, sans-serif;letter-spacing:normal;margin:0 0 16px}.mat-h2,.mat-headline-6,.mat-typography .mat-h2,.mat-typography .mat-headline-6,.mat-typography h2{font:500 20px/32px Roboto, sans-serif;letter-spacing:.0125em;margin:0 0 16px}.mat-h3,.mat-subtitle-1,.mat-typography .mat-h3,.mat-typography .mat-subtitle-1,.mat-typography h3{font:400 16px/28px Roboto, sans-serif;letter-spacing:.009375em;margin:0 0 16px}.mat-h4,.mat-body-1,.mat-typography .mat-h4,.mat-typography .mat-body-1,.mat-typography h4{font:400 16px/24px Roboto, sans-serif;letter-spacing:.03125em;margin:0 0 16px}.mat-h5,.mat-typography .mat-h5,.mat-typography h5{font:400 calc(14px*.83)/20px Roboto, sans-serif;margin:0 0 12px}.mat-h6,.mat-typography .mat-h6,.mat-typography h6{font:400 calc(14px*.67)/20px Roboto, sans-serif;margin:0 0 12px}.mat-body-strong,.mat-subtitle-2,.mat-typography .mat-body-strong,.mat-typography .mat-subtitle-2{font:500 14px/22px Roboto, sans-serif;letter-spacing:.0071428571em}.mat-body,.mat-body-2,.mat-typography .mat-body,.mat-typography .mat-body-2,.mat-typography{font:400 14px/20px Roboto, sans-serif;letter-spacing:.0178571429em}.mat-body p,.mat-body-2 p,.mat-typography .mat-body p,.mat-typography .mat-body-2 p,.mat-typography p{margin:0 0 12px}.mat-small,.mat-caption,.mat-typography .mat-small,.mat-typography .mat-caption{font:400 12px/20px Roboto, sans-serif;letter-spacing:.0333333333em}.mat-headline-1,.mat-typography .mat-headline-1{font:300 96px/96px Roboto, sans-serif;letter-spacing:-0.015625em;margin:0 0 56px}.mat-headline-2,.mat-typography .mat-headline-2{font:300 60px/60px Roboto, sans-serif;letter-spacing:-.0083333333em;margin:0 0 64px}.mat-headline-3,.mat-typography .mat-headline-3{font:400 48px/50px Roboto, sans-serif;letter-spacing:normal;margin:0 0 64px}.mat-headline-4,.mat-typography .mat-headline-4{font:400 34px/40px Roboto, sans-serif;letter-spacing:.0073529412em;margin:0 0 64px}

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