/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@font-face {
  font-family: "Public Sans";
  src: url('PublicSans-Regular.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Public Sans";
  src: url('PublicSans-SemiBold.ttf') format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Public Sans";
  src: url('PublicSans-Bold.ttf') format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Public Sans";
  src: url('PublicSans-ExtraBold.ttf') format("truetype");
  font-weight: 800;
  font-style: normal;
}
html {
  --primary-blue: #2d40ff;
  --primary-lilac: #8099ff;
  --electric-blue: #8099ff;
  --text-primary: #fffafa;
  --text-light-disabled: #919eab;
  --text-light-secondary: #637381;
  --text-primary-opacity: #fffafa66;
  --gradient-primary-text: linear-gradient(
    105deg,
    #ffd80a 0%,
    #d155e5 50%,
    #4857ed 88.42%
  );
  --divider-color: #919eab;
  --divider-color-16opacity: rgba(145, 158, 171, 0.16);
  --divider-color-24opacity: rgba(145, 158, 171, 0.24);
  --transparent-grey-16: #919eab16;
  --action-light-selected: rgba(145, 158, 171, 0.16);
  --background-dark: #111111;
  --background-dark-gradient: linear-gradient(
    180deg,
    #1c1c20 0%,
    #131318 43.09%,
    #0c0c0e 100%
  );
  --background-dark-gradient-2: linear-gradient(
    180deg,
    #0f0f0f 0%,
    #161625 54.17%,
    #0c0c0e 100%
  );
  --hero-slider-background: linear-gradient(
    180deg,
    #0c0c0e -2.3%,
    #0f0f0f 15.53%,
    #161625 53.11%,
    #0c0c0e 100%
  );
  --button-hover-background: #2333d3;
  --button-disabled-background: #707dff;
  --button-disabled-text-color: #e6e9eccc;
  --button-outline-hover: #2d40ff0d;
  --button-outline-disabled: #c4c8f2;
  --button-outline-input-color: #919eab32;
  --app-color-red: #ff5630;
  --app-color-green: #77dd77;
  --danger-color: #c35c44;
  --navbar-height: 88px;
  --input-border-color: rgba(145, 158, 171, 0.32);
  --swiper-pagination-color: #8099ff;
  --swiper-pagination-bullet-inactive-color: #d9d9d9;
  --swiper-pagination-bullet-size: 12px;
  --swiper-pagination-bullet-width: 12px;
  --swiper-pagination-bullet-height: 12px;
  --error-main: rgba(255, 86, 48, 1);
  --light-gradient: linear-gradient(
    139.88deg,
    #ffb81a 10.12%,
    #ff52cc 45.1%,
    #a345ff 72.98%,
    #3d68fe 94.84%,
    #464fcc 115.07%
  );
  --sound-wave-gradient: linear-gradient(
    93deg,
    #ffd80a 2.54%,
    #d155e5 26.68%,
    #4857ed 52.34%
  );
}

@media only screen and (max-width: 768px) {
  html {
    --navbar-height: 65px;
  }
}
.typo-h1 {
  font-size: 64px;
  font-weight: 800;
  line-height: 80px;
}

.typo-h2 {
  font-size: 48px;
  font-weight: 800;
  line-height: 64px;
}

.typo-h3 {
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
}

.typo-h4 {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
}

.typo-h5 {
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
}

.typo-h6 {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}

.typo-subtitle1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.typo-subtitle2 {
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}

.typo-body1 {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.typo-body2 {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.typo-caption {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.typo-overline {
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

.typo-info {
  font-size: 12px;
  line-height: 18px;
  color: var(--text-light-disabled);
}

.uppercase {
  text-transform: uppercase;
}

@media only screen and (max-width: 768px) {
  .typo-h1 {
    font-size: 40px;
    font-weight: 800;
    line-height: 50px;
  }
  .typo-h2 {
    font-size: 32px;
    font-weight: 800;
    line-height: 42px;
  }
  .typo-h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
  }
  .typo-h4 {
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
  }
  .typo-h5 {
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
  }
  .typo-h6 {
    font-size: 17px;
    font-weight: 700;
    line-height: 26px;
  }
}
html {
  --primary-blue: #2d40ff;
  --primary-lilac: #8099ff;
  --electric-blue: #8099ff;
  --text-primary: #fffafa;
  --text-light-disabled: #919eab;
  --text-light-secondary: #637381;
  --text-primary-opacity: #fffafa66;
  --gradient-primary-text: linear-gradient(
    105deg,
    #ffd80a 0%,
    #d155e5 50%,
    #4857ed 88.42%
  );
  --divider-color: #919eab;
  --divider-color-16opacity: rgba(145, 158, 171, 0.16);
  --divider-color-24opacity: rgba(145, 158, 171, 0.24);
  --transparent-grey-16: #919eab16;
  --action-light-selected: rgba(145, 158, 171, 0.16);
  --background-dark: #111111;
  --background-dark-gradient: linear-gradient(
    180deg,
    #1c1c20 0%,
    #131318 43.09%,
    #0c0c0e 100%
  );
  --background-dark-gradient-2: linear-gradient(
    180deg,
    #0f0f0f 0%,
    #161625 54.17%,
    #0c0c0e 100%
  );
  --hero-slider-background: linear-gradient(
    180deg,
    #0c0c0e -2.3%,
    #0f0f0f 15.53%,
    #161625 53.11%,
    #0c0c0e 100%
  );
  --button-hover-background: #2333d3;
  --button-disabled-background: #707dff;
  --button-disabled-text-color: #e6e9eccc;
  --button-outline-hover: #2d40ff0d;
  --button-outline-disabled: #c4c8f2;
  --button-outline-input-color: #919eab32;
  --app-color-red: #ff5630;
  --app-color-green: #77dd77;
  --danger-color: #c35c44;
  --navbar-height: 88px;
  --input-border-color: rgba(145, 158, 171, 0.32);
  --swiper-pagination-color: #8099ff;
  --swiper-pagination-bullet-inactive-color: #d9d9d9;
  --swiper-pagination-bullet-size: 12px;
  --swiper-pagination-bullet-width: 12px;
  --swiper-pagination-bullet-height: 12px;
  --error-main: rgba(255, 86, 48, 1);
  --light-gradient: linear-gradient(
    139.88deg,
    #ffb81a 10.12%,
    #ff52cc 45.1%,
    #a345ff 72.98%,
    #3d68fe 94.84%,
    #464fcc 115.07%
  );
  --sound-wave-gradient: linear-gradient(
    93deg,
    #ffd80a 2.54%,
    #d155e5 26.68%,
    #4857ed 52.34%
  );
}

@media only screen and (max-width: 768px) {
  html {
    --navbar-height: 65px;
  }
}
@font-face {
  font-family: "icomoon";
  src: url('icomoon.eot?zbme9m');
  src: url('icomoon.eot?zbme9m#iefix') format("embedded-opentype"), url('icomoon.ttf?zbme9m') format("truetype"), url('icomoon.woff?zbme9m') format("woff"), url('icomoon.svg?zbme9m#icomoon') format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
i {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-unlike {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("/assets/icons/unlike.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-followers {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("/assets/icons/followers-icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-following {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("/assets/icons/following-icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-followers {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("/assets/icons/followers-icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-arrow_right_alt_black:before {
  content: "\e900";
}

.icon-external_link:before {
  content: "\e901";
}

.icon-ic_add_a_photo:before {
  content: "\e902";
}

.icon-ic_add_photo_alternate:before {
  content: "\e903";
}

.icon-ic_add_shopping_cart:before {
  content: "\e904";
}

.icon-ic_adornment:before {
  content: "\e905";
}

.icon-ic_alert:before {
  content: "\e906";
}

.icon-ic_android:before {
  content: "\e907";
}

.icon-ic_apple:before {
  content: "\e908";
}

.icon-ic_archive:before {
  content: "\e909";
}

.icon-ic_arrow_down1:before {
  content: "\e90a";
}

.icon-ic_arrow_left:before {
  content: "\e90b";
}

.icon-ic_arrow_left-1:before {
  content: "\e90c";
}

.icon-ic_arrow_right:before {
  content: "\e90d";
}

.icon-ic_arrow_right-1:before {
  content: "\e90e";
}

.icon-ic_attach_file1:before {
  content: "\e90f";
}

.icon-ic_attach_file2:before {
  content: "\e910";
}

.icon-ic_book:before {
  content: "\e911";
}

.icon-ic_bookmark_default:before {
  content: "\e912";
}

.icon-ic_bookmark_filledin:before {
  content: "\e913";
}

.icon-ic_bug:before {
  content: "\e914";
}

.icon-ic_calendar:before {
  content: "\e915";
}

.icon-ic_calendar-1:before {
  content: "\e916";
}

.icon-ic_call:before {
  content: "\e917";
}

.icon-ic_caret_down:before {
  content: "\e918";
}

.icon-ic_cart:before {
  content: "\e919";
}

.icon-ic_chat:before {
  content: "\e91a";
}

.icon-ic_check:before {
  content: "\e91b";
}

.icon-ic_check_outline:before {
  content: "\e91c";
}

.icon-ic_checkbox_indeterminate:before {
  content: "\e91d";
}

.icon-ic_checkbox_off:before {
  content: "\e91e";
}

.icon-ic_checkbox_on:before {
  content: "\e91f";
}

.icon-ic_checkmark:before {
  content: "\e920";
}

.icon-ic_chevron_down:before {
  content: "\e921";
}

.icon-ic_chevron_left:before {
  content: "\e922";
}

.icon-ic_chevron_right:before {
  content: "\e923";
}

.icon-ic_chevron_up:before {
  content: "\e924";
}

.icon-ic_clock:before {
  content: "\e925";
}

.icon-ic_clock_outline:before {
  content: "\e926";
}

.icon-ic_close:before {
  content: "\e927";
}

.icon-ic_close_fullscreen:before {
  content: "\e928";
}

.icon-ic_cloud_upload:before {
  content: "\e929";
}

.icon-ic_collections:before {
  content: "\e92a";
}

.icon-ic_color_picker:before {
  content: "\e92b";
}

.icon-ic_crown:before {
  content: "\e92c";
}

.icon-ic_diagonal_arrow_left_down:before {
  content: "\e92d";
}

.icon-ic_diagonal_arrow_right_up:before {
  content: "\e92e";
}

.icon-ic_done_all:before {
  content: "\e92f";
}

.icon-ic_download:before {
  content: "\e930";
}

.icon-ic_edit:before {
  content: "\e931";
}

.icon-ic_emoji:before {
  content: "\e932";
}

.icon-ic_error:before {
  content: "\e933";
}

.icon-ic_expand:before {
  content: "\e934";
}

.icon-ic_expand_more:before {
  content: "\e935";
}

.icon-ic_eye:before {
  content: "\e936";
}

.icon-ic_eye_off:before {
  content: "\e937";
}

.icon-ic_facebook:before {
  content: "\e938";
}

.icon-ic_favorite:before {
  content: "\e939";
}

.icon-ic_file:before {
  content: "\e93a";
}

.icon-ic_filter:before {
  content: "\e93b";
}

.icon-ic_flash:before {
  content: "\e93c";
}

.icon-ic_grid:before {
  content: "\e93d";
}

.icon-ic_guard:before {
  content: "\e93e";
}

.icon-ic_image_thumbnail:before {
  content: "\e93f";
}

.icon-ic_important:before {
  content: "\e940";
}

.icon-ic_inbox:before {
  content: "\e941";
}

.icon-ic_info:before {
  content: "\e942";
}

.icon-ic_info_outline:before {
  content: "\e943";
}

.icon-ic_instagram:before {
  content: "\e944";
}

.icon-ic_job:before {
  content: "\e945";
}

.icon-ic_label:before {
  content: "\e946";
}

.icon-ic_like:before {
  content: "\e947";
}

.icon-ic_linkedin:before {
  content: "\e948";
}

.icon-ic_list:before {
  content: "\e949";
}

.icon-ic_location:before {
  content: "\e94a";
}

.icon-ic_mail:before {
  content: "\e94b";
}

.icon-ic_mail_mark:before {
  content: "\e94c";
}

.icon-ic_menu:before {
  content: "\e94d";
}

.icon-ic_mic:before {
  content: "\e94e";
}

.icon-ic_minus:before {
  content: "\e94f";
}

.icon-ic_more:before {
  content: "\e950";
}

.icon-ic_notifications:before {
  content: "\e951";
}

.icon-ic_number .path1:before {
  content: "\e952";
  color: rgb(0, 0, 0);
}

.icon-ic_number .path2:before {
  content: "\e953";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}

.icon-ic_person:before {
  content: "\e954";
}

.icon-ic_plus:before {
  content: "\e955";
}

.icon-ic_printer:before {
  content: "\e956";
}

.icon-ic_profile:before {
  content: "\e957";
}

.icon-ic_radio_off:before {
  content: "\e958";
}

.icon-ic_radio_on:before {
  content: "\e959";
}

.icon-ic_receipt:before {
  content: "\e95a";
}

.icon-ic_refresh:before {
  content: "\e95b";
}

.icon-ic_remove:before {
  content: "\e95c";
}

.icon-ic_reply:before {
  content: "\e95d";
}

.icon-ic_search:before {
  content: "\e95e";
}

.icon-ic_send:before {
  content: "\e95f";
}

.icon-ic_share:before {
  content: "\e960";
}

.icon-ic_spam:before {
  content: "\e961";
}

.icon-ic_star:before {
  content: "\e962";
}

.icon-ic_star_border:before {
  content: "\e963";
}

.icon-ic_tiktok:before {
  content: "\e964";
}

.icon-ic_trash:before {
  content: "\e965";
}

.icon-ic_trending_down:before {
  content: "\e966";
}

.icon-ic_trending_up:before {
  content: "\e967";
}

.icon-ic_trophy:before {
  content: "\e968";
}

.icon-ic_twitterold:before {
  content: "\e969";
}

.icon-ic_user_group:before {
  content: "\e96a";
}

.icon-ic_verified:before {
  content: "\e96b";
}

.icon-ic_videocam:before {
  content: "\e96c";
}

.icon-ic_view_agenda:before {
  content: "\e96d";
}

.icon-ic_view_day:before {
  content: "\e96e";
}

.icon-ic_view_module:before {
  content: "\e96f";
}

.icon-ic_view_week:before {
  content: "\e970";
}

.icon-ic_vpn_key:before {
  content: "\e971";
}

.icon-ic_windows:before {
  content: "\e972";
}

.icon-ic_x:before {
  content: "\e973";
}

.icon-ic_youtube:before {
  content: "\e974";
}

.icon-round_align_horizontal_center:before {
  content: "\e975";
}

.icon-round_align_horizontal_left:before {
  content: "\e976";
}

.icon-round_align_horizontal_right:before {
  content: "\e977";
}

.icon-ic_copy:before {
  content: "\e942";
}

.ng-select.validation-failed .ng-select-container {
  border: 1px solid var(--app-color-red) !important;
}
.ng-select .ng-select-container {
  border: 1px solid var(--input-border-color) !important;
  border-radius: 8px !important;
  height: unset !important;
  padding: 16px;
  background-color: #0d0d0f !important;
  color: var(--text-light-disabled) !important;
}
.ng-select .ng-select-container .ng-value-container {
  padding-left: 0 !important;
}
.ng-select .ng-select-container .ng-value-container .ng-placeholder {
  color: #747474 !important;
}
.ng-select .ng-select-container .ng-value-container .ng-input {
  height: 100%;
  top: 0 !important;
  padding: 16px !important;
}
.ng-select .ng-select-container .ng-value-container .ng-input input {
  color: var(--text-light-disabled) !important;
}
.ng-select .ng-dropdown-panel {
  background-color: #16191f;
  border: 1px solid #373c41 !important;
  border-radius: 8px !important;
}
.ng-select .ng-dropdown-panel .ng-option {
  background-color: transparent !important;
  margin: 8px !important;
  padding: 16px 8px !important;
  color: var(--text-primary) !important;
}
.ng-select .ng-dropdown-panel .ng-option:hover {
  background-color: rgba(145, 158, 171, 0.08) !important;
  border-radius: 8px !important;
}
.ng-select .ng-dropdown-panel .ng-option.ng-option-selected {
  background-color: rgba(145, 158, 171, 0.16) !important;
  border-radius: 8px !important;
}
.ng-select .ng-dropdown-panel .ng-option .ng-option-label {
  color: var(--text-primary) !important;
  font-family: "Public Sans", sans-serif !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 22px !important;
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
  background-color: var(--text-primary) !important;
  color: var(--background-dark) !important;
}
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left {
  border: none !important;
}

.upload-widget .upload-widget__modal {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid var(--input-border-color);
  background-color: var(--background-dark);
}
.upload-widget .upload-widget__widget-base__children .btn--file {
  background-color: var(--electric-blue);
  color: black;
  border: none;
  margin-right: 10px;
}
.upload-widget .upload-widget__widget-base__children .btn--file:hover {
  color: black !important;
  background-color: var(--electric-blue) !important;
  opacity: 0.7 !important;
  border: none !important;
}

/* You can add global styles to this file, and also import other style files */
html,
body,
input,
textarea,
button {
  font-family: "Public Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  letter-spacing: 0.5px;
}

body,
h1,
h2,
h3,
p {
  margin: 0;
}

html {
  background: var(--background-dark);
}

.section-outer {
  max-width: 100vw;
  display: flex;
  justify-content: center;
  background-color: var(--background-dark);
}
.section-outer .section-inner {
  max-width: 1440px;
  width: 100%;
}

.text-gradient {
  background: var(--gradient-primary-text);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 100%;
}

.bold-text {
  font-weight: 700;
}

.text-link {
  cursor: pointer;
  color: var(--text-primary);
}
.text-link.underline {
  text-decoration: underline;
  text-underline-offset: 4px;
}

a.text-link {
  text-decoration: none;
}

.text-red {
  color: var(--app-color-red);
}

.text-green {
  color: var(--app-color-green);
}

.text-lilac {
  color: var(--primary-lilac);
}

.input-xyd .input-field {
  padding: 16px;
  width: 100%;
  background: transparent;
  color: var(--text-light-disabled);
  border: 1px solid var(--input-border-color);
  border-radius: 8px;
}
.input-xyd .input-field::placeholder {
  color: #747474;
}
.input-xyd .input-field.validation-failed {
  border: 1px solid var(--app-color-red);
}
.input-xyd .input-with-icon {
  position: relative;
}
.input-xyd .input-with-icon.input-prefix .input-field {
  padding-left: 40px;
}
.input-xyd .input-with-icon .input-field {
  padding-right: 20px;
}
.input-xyd .input-with-icon .icon-wrapper {
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
  right: 10px;
  top: 0;
}
.input-xyd .input-with-icon .icon-wrapper.large-icon {
  font-size: 24px;
}
.input-xyd .input-with-icon .icon-wrapper-prefix {
  left: 10px;
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
  top: 0;
}
.input-xyd .input-with-icon .icon-wrapper-prefix.large-icon {
  font-size: 24px;
}
.input-xyd .input-messages {
  margin-top: 8px;
  margin-left: 12px;
  display: flex;
  gap: 4px;
  flex-direction: column;
}
.input-xyd .input-messages .success-text,
.input-xyd .input-messages .danger-text {
  display: flex;
  align-items: center;
  gap: 4px;
}
.input-xyd .input-messages .success-text i,
.input-xyd .input-messages .danger-text i {
  font-size: 16px !important;
}
.input-xyd .input-messages .success-text,
.input-xyd .input-messages .success-text i {
  color: var(--app-color-green) !important;
}
.input-xyd .input-messages .danger-text,
.input-xyd .input-messages .danger-text i {
  color: var(--app-color-red) !important;
}
.input-xyd .input-messages .neutral-text,
.input-xyd .input-messages .neutral-text i {
  color: var(--text-light-disabled) !important;
}

.cursor-pointer {
  cursor: pointer;
}

.w-100 {
  width: 100%;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flex-center-horizontally {
  display: flex;
  align-items: center;
  gap: 4px;
}

.button-primary,
.button-text,
.button-outline {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.button-clear {
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.button-large {
  font-size: 15px;
  font-weight: 700;
  line-height: 26px;
  padding: 11px 22px;
  border-radius: 8px;
}
.button-large i {
  font-size: 24px;
}

.button-medium {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  padding: 6px 16px;
  min-width: 119px;
  border-radius: 8px;
}
.button-medium i {
  font-size: 22px;
}

.button-small {
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
  padding: 4px 10px;
  border-radius: 8px;
}
.button-small i {
  font-size: 20px;
}

.button-primary {
  outline: none;
  border: none;
  background-color: var(--primary-blue);
  color: var(--text-primary);
}
.button-primary:hover {
  background-color: var(--button-hover-background);
}
.button-primary:disabled {
  background-color: var(--button-disabled-background);
  color: var(--button-disabled-text-color);
  cursor: not-allowed;
}

.button-outline {
  border-radius: 8px;
  border: 1px solid var(--primary-lilac);
  color: var(--primary-lilac);
  background-color: transparent;
}
.button-outline:hover {
  border: 1px solid var(--primary-blue);
  color: var(--primary-blue);
  background-color: var(--button-outline-hover);
}
.button-outline:disabled {
  border: 1px solid var(--button-outline-disabled);
  color: var(--button-outline-disabled);
  cursor: not-allowed;
}

.button-text {
  border: none;
  color: var(--primary-lilac);
  background-color: transparent;
}
.button-text:hover {
  background-color: rgba(45, 64, 255, 0.05);
}
.button-text:disabled {
  color: var(--button-outline-disabled);
  background-color: transparent;
  cursor: not-allowed;
}

.pill-blue {
  padding: 2px 8px;
  border-radius: 6px;
  background-color: var(--primary-lilac);
  color: white;
}

.divider {
  height: 1px;
  background: var(--gradient-primary-text);
  width: 100%;
  margin: 32px 0;
}

.underline {
  text-decoration: underline;
}

.custom-radio {
  cursor: pointer;
}

.custom-radio input[type=radio] {
  -webkit-appearance: none;
          appearance: none;
  width: 24px;
  height: 24px;
  border: 1px solid var(--electric-blue);
  border-radius: 50%;
  outline: none;
  transition: box-shadow 0.3s ease;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-right: 16px;
}

.custom-radio input[type=radio]:before {
  content: "";
  cursor: pointer;
  display: block;
  width: 60%;
  height: 60%;
  border-radius: 50%;
}

.custom-radio input[type=radio]:hover:not(:checked):before {
  background: var(--electric-blue);
  opacity: 0.5;
}

.custom-radio input[type=radio]:checked:before {
  background: var(--electric-blue);
}

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

body.dialog-open {
  overflow: hidden;
}

.nsm-dialog-btn-close {
  border: 0;
  background: none;
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 1.2em;
  cursor: pointer;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-x: hidden;
  overflow-y: auto;
  transition: background-color 500ms;
  background-color: transparent;
  z-index: 999;
}
.overlay.nsm-overlay-open {
  background-color: rgba(0, 0, 0, 0.5);
}
.overlay.transparent {
  background-color: transparent;
}

.nsm-dialog {
  position: relative;
  opacity: 1;
  visibility: visible;
  min-height: 200px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  pointer-events: none;
  outline: none;
}
.nsm-dialog.nsm-dialog-close {
  opacity: 0;
}
.nsm-dialog.nsm-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 3.5rem);
}

.nsm-content {
  position: relative;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  background-clip: padding-box;
  background-color: #fff;
  border-radius: 2px;
  padding: 1rem;
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
  margin-left: 1.75rem;
  margin-right: 1.75rem;
  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);
  outline: 0;
  transform: translate3d(0, 0, 0);
}

.nsm-body {
  position: relative;
  flex: 1 1 auto;
}

/* *************************
* Animations
* *************************/
.nsm-dialog[class*=nsm-dialog-animation-] {
  transition: transform 500ms ease-in-out, opacity 500ms;
}

.nsm-dialog-animation-ltr {
  transform: translate3d(-50%, 0, 0);
}
.nsm-dialog-animation-ltr.nsm-dialog-open {
  transform: translate3d(0, 0, 0);
}
.nsm-dialog-animation-ltr.nsm-dialog-close {
  transform: translate3d(-50%, 0, 0);
}

.nsm-dialog-animation-rtl {
  transform: translate3d(50%, 0, 0);
}
.nsm-dialog-animation-rtl.nsm-dialog-open {
  transform: translate3d(0, 0, 0);
}
.nsm-dialog-animation-rtl.nsm-dialog-close {
  transform: translate3d(50%, 0, 0);
}

.nsm-dialog-animation-ttb {
  transform: translate3d(0, -50%, 0);
}
.nsm-dialog-animation-ttb.nsm-dialog-open {
  transform: translate3d(0, 0, 0);
}
.nsm-dialog-animation-ttb.nsm-dialog-close {
  transform: translate3d(0, -50%, 0);
}

.nsm-dialog-animation-btt {
  transform: translate3d(0, 50%, 0);
}
.nsm-dialog-animation-btt.nsm-dialog-open {
  transform: translate3d(0, 0, 0);
}
.nsm-dialog-animation-btt.nsm-dialog-close {
  transform: translate3d(0, 50%, 0);
}

.nsm-dialog.centered-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.nsm-dialog.xyd-dialog {
  max-width: 1210px;
}
.nsm-dialog.xyd-dialog .nsm-content {
  padding: 0;
  border-radius: 16px;
  box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.12), 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
  background: linear-gradient(#0d0d0f, #0d0d0f) padding-box, linear-gradient(to bottom, rgba(220, 220, 220, 0.45), rgba(220, 220, 220, 0)) border-box;
  border: 1px solid transparent;
}

.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

@media only screen and (max-width: 1200px) {
  body:not(.disable-scroll-modal) .nsm-dialog.centered-dialog {
    overflow-y: auto;
  }
  .nsm-dialog.centered-dialog {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: unset;
    overflow-y: hidden;
  }
  .overlay.nsm-overlay-open {
    overflow: hidden !important;
  }
  .nsm-dialog.xyd-dialog .nsm-content {
    margin: 0;
  }
}
@media only screen and (max-width: 768px) {
  .mobile-only {
    display: block;
  }
  .desktop-only {
    display: none;
  }
}
/* Importing Datepicker SCSS file. */
/* .bs-datepicker */
.bs-datepicker {
  display: flex;
  align-items: stretch;
  flex-flow: row wrap;
  background: #fff;
  box-shadow: 0 0 10px 0 #aaa;
  position: relative;
  z-index: 1;
  /* button */
  /* .bs-datepicker-head */
  /* .bs-datepicker-body */
  /* .current-timedate */
  /* .bs-datepicker-multiple */
  /* .bs-datepicker-btns */
  /*.bs-datepicker-custom-range */
  /* .bs-datepicker-predefined-btns */
  /* .bs-datepicker-buttons */
}
.bs-datepicker:after {
  clear: both;
  content: "";
  display: block;
}
.bs-datepicker bs-day-picker {
  float: left;
}
.bs-datepicker button:hover,
.bs-datepicker button:focus,
.bs-datepicker button:active,
.bs-datepicker input:hover,
.bs-datepicker input:focus,
.bs-datepicker input:active, .bs-datepicker-btns button:hover, .bs-datepicker-btns button:focus, .bs-datepicker-btns button:active, .bs-datepicker-predefined-btns button:active, .bs-datepicker-predefined-btns button:focus {
  outline: none;
}
.bs-datepicker-head {
  min-width: 270px;
  height: 50px;
  padding: 10px;
  border-radius: 3px 3px 0 0;
  text-align: justify;
  /* .bs-datepicker-head button */
}
.bs-datepicker-head:after {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 100%;
}
.bs-datepicker-head button {
  display: inline-block;
  vertical-align: top;
  padding: 0;
  height: 30px;
  line-height: 30px;
  border: 0;
  background: transparent;
  text-align: center;
  cursor: pointer;
  color: #fff;
  transition: 0.3s;
}
.bs-datepicker-head button[disabled], .bs-datepicker-head button[disabled]:hover, .bs-datepicker-head button[disabled]:active {
  background: rgba(221, 221, 221, 0.3);
  color: #f5f5f5;
  cursor: not-allowed;
}
.bs-datepicker-head button.previous span {
  transform: translate(-1px, -1px);
}
.bs-datepicker-head button.next span {
  transform: translate(1px, -1px);
}
.bs-datepicker-head button.next, .bs-datepicker-head button.previous {
  border-radius: 50%;
  width: 30px;
  height: 30px;
}
.bs-datepicker-head button.next span, .bs-datepicker-head button.previous span {
  font-size: 28px;
  line-height: 1;
  display: inline-block;
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 50%;
}
.bs-datepicker-head button.current {
  border-radius: 15px;
  max-width: 155px;
  padding: 0 13px;
}
.bs-datepicker-head button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.bs-datepicker-head button:active {
  background-color: rgba(0, 0, 0, 0.2);
}
.bs-datepicker-body {
  padding: 10px;
  border-radius: 0 0 3px 3px;
  min-height: 232px;
  min-width: 278px;
  border: 1px solid #e9edf0;
  /* .bs-datepicker-body table */
}
.bs-datepicker-body .days.weeks {
  position: relative;
  z-index: 1;
}
.bs-datepicker-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  /* .bs-datepicker-body table.days */
  /* .bs-datepicker-body table.weeks */
}
.bs-datepicker-body table th {
  font-size: 13px;
  color: #9aaec1;
  font-weight: 400;
  text-align: center;
}
.bs-datepicker-body table td {
  color: #54708b;
  text-align: center;
  position: relative;
  padding: 0;
  /* todo: check first :not(.disabled) usage */
}
.bs-datepicker-body table td span {
  display: block;
  margin: 0 auto;
  font-size: 13px;
  border-radius: 50%;
  /*z-index: 1;*/
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.bs-datepicker-body table td:not(.disabled):not(.week) span:not(.disabled):not(.is-other-month) {
  cursor: pointer;
}
.bs-datepicker-body table td.is-highlighted:not(.disabled):not(.selected) span,
.bs-datepicker-body table td span.is-highlighted:not(.disabled):not(.selected) {
  background-color: #e9edf0;
  transition: 0s;
}
.bs-datepicker-body table td.is-active-other-month:not(.disabled):not(.selected) span,
.bs-datepicker-body table td span.is-active-other-month:not(.disabled):not(.selected) {
  background-color: #e9edf0;
  transition: 0s;
  cursor: pointer;
}
.bs-datepicker-body table td span.disabled, .bs-datepicker-body table td.disabled span {
  color: #9aaec1;
}
.bs-datepicker-body table td span.selected, .bs-datepicker-body table td.selected span {
  color: #fff;
}
.bs-datepicker-body table td span.selected.disabled, .bs-datepicker-body table td.selected.disabled span {
  opacity: 0.3;
}
.bs-datepicker-body table td span.is-other-month, .bs-datepicker-body table td.is-other-month span {
  color: rgba(0, 0, 0, 0.25);
}
.bs-datepicker-body table td.active {
  position: relative;
}
.bs-datepicker-body table td.active.select-start:before {
  left: 35%;
}
.bs-datepicker-body table td.active.select-end:before {
  left: -85%;
}
.bs-datepicker-body table td span.active.select-start:after,
.bs-datepicker-body table td span.active.select-end:after, .bs-datepicker-body table td.active.select-start span:after, .bs-datepicker-body table td.active.select-end span:after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  transition: 0.3s;
  top: 0;
  border-radius: 50%;
}
.bs-datepicker-body table td:before,
.bs-datepicker-body table td span:before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 6px;
  bottom: 6px;
  left: -3px;
  right: -2px;
  box-sizing: content-box;
  background: transparent;
}
.bs-datepicker-body table td.active.select-start + td.active:before {
  left: -20%;
}
.bs-datepicker-body table td:last-child.active:before {
  border-radius: 0 3px 3px 0;
  width: 125%;
  left: -25%;
}
.bs-datepicker-body table td span[class*=select-], .bs-datepicker-body table td[class*=select-] span {
  border-radius: 50%;
  color: #fff;
}
.bs-datepicker-body table.days td.active:not(.select-start):not(.disabled):before, .bs-datepicker-body table.days td.in-range:not(.select-start):not(.disabled):before,
.bs-datepicker-body table.days span.active:not(.select-start):not(.disabled):before,
.bs-datepicker-body table.days span.in-range:not(.select-start):not(.disabled):before {
  background: #e9edf0;
}
.bs-datepicker-body table.days span {
  width: 32px;
  height: 32px;
  line-height: 32px;
}
.bs-datepicker-body table.days span.select-start {
  z-index: 2;
}
.bs-datepicker-body table.days span.is-highlighted.in-range:before {
  right: 3px;
  left: 0;
}
.bs-datepicker-body table.days span.in-range.select-end:before {
  right: 4px;
  left: 0;
}
.bs-datepicker-body table.days td.select-start + td.select-end:before, .bs-datepicker-body table.days td.select-start + td.is-highlighted:before, .bs-datepicker-body table.days td.active + td.is-highlighted:before, .bs-datepicker-body table.days td.active + td.select-end:before, .bs-datepicker-body table.days td.in-range + td.is-highlighted:before, .bs-datepicker-body table.days td.in-range + td.select-end:before {
  background: #e9edf0;
  width: 100%;
}
.bs-datepicker-body table.weeks tr td:nth-child(2).active:before {
  border-radius: 3px 0 0 3px;
  left: 0;
  width: 100%;
}
.bs-datepicker-body table:not(.weeks) tr td:first-child:before {
  border-radius: 3px 0 0 3px;
}
.bs-datepicker-body table.years td span {
  width: 46px;
  height: 46px;
  line-height: 45px;
  margin: 0 auto;
}
.bs-datepicker-body table.years tr:not(:last-child) td span {
  margin-bottom: 8px;
}
.bs-datepicker-body table.months td {
  height: 52px;
}
.bs-datepicker-body table.months td span {
  padding: 6px;
  border-radius: 15px;
}
.bs-datepicker .current-timedate {
  color: #54708b;
  font-size: 15px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  border-radius: 20px;
  border: 1px solid #e9edf0;
  margin-bottom: 10px;
  cursor: pointer;
  text-transform: uppercase;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.bs-datepicker .current-timedate span:not(:empty):before {
  content: "";
  width: 15px;
  height: 16px;
  display: inline-block;
  margin-right: 4px;
  vertical-align: text-bottom;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAQCAYAAADJViUEAAABMklEQVQoU9VTwW3CQBCcOUgBtEBKSAukAnBKME+wFCAlYIhk8sQlxFABtJAScAsuAPBEewYcxCP8ouxrPDsza61uiVN1o6RNHD4htSCmq49RfO71BvMJqBBkITRf1kmUW49nQRC9h1I5AZlBClaL8aP1fKgOOxCx8aSLs+Q19eZuNO8QmPqJRtDFguy7OAcDbJPs+/BKVPDIPrvD2ZJgWAmVe7O0rI0Vqs1seyWUXpuJoppYCa5L+U++NpNPkr5OE2oMdARsb3gykJT5ydZcL8Z9Ww60nxg2LhjON9li9OwXZzo+xLbp3nC2s9CL2RrueGyVrgwNm8HpsCzZ9EEW6kqXlo1GQe03FzP/7W8Hl0dBtu7Bf7zt6mIwvX1RvzDCm7+q3mAW0Dl/GPdUCeXrZLT9BrDrGkm4qlPvAAAAAElFTkSuQmCC);
}
.bs-datepicker-multiple {
  border-radius: 4px 0 0 4px;
}
.bs-datepicker-multiple + .bs-datepicker-multiple {
  margin-left: 10px;
}
.bs-datepicker-multiple .bs-datepicker {
  box-shadow: none;
  position: relative;
}
.bs-datepicker-multiple .bs-datepicker:not(:last-child) {
  padding-right: 10px;
}
.bs-datepicker-multiple .bs-datepicker + .bs-datepicker:after {
  content: "";
  display: block;
  width: 14px;
  height: 10px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAKCAYAAABrGwT5AAAA1ElEQVQoU42RsQrCUAxF77VuDu7O4oMWW//BURBBpZvgKk4uIrjoqKOTf+DopIO4uYggtFTfw3+pkQqCW1/G5J7kJiFy4m5MxUlxAzgIPHX+lzMPzupRYlYgxiR7vqsOP8YKzsTx0yxFMCUZ+q7aZzlr+OvgoWcAFyAHgat2jLWu48252DdqAihDJGSSJNUUxYmQjs3+hPQBlAh2rG2LCOPnaw3IiGDX99TRCs7ASJsNhUOA7d/LcuHvRG22FIZvsNXw1MX6VZExCilOQKEfeLXr/10+aC9Ho7arh7oAAAAASUVORK5CYII=);
  position: absolute;
  top: 25px;
  left: -8px;
}
.bs-datepicker-multiple .bs-datepicker .left {
  float: left;
}
.bs-datepicker-multiple .bs-datepicker .right {
  float: right;
}
.bs-datepicker-container {
  padding: 15px;
}
.bs-datepicker .bs-media-container {
  display: flex;
}
@media (max-width: 768px) {
  .bs-datepicker .bs-media-container {
    flex-direction: column;
  }
}
.bs-datepicker .bs-timepicker-in-datepicker-container {
  display: flex;
  justify-content: space-around;
}
.bs-datepicker-custom-range {
  padding: 15px;
  background: #eee;
}
.bs-datepicker-predefined-btns button {
  width: 100%;
  display: block;
  height: 30px;
  background-color: #9aaec1;
  border-radius: 4px;
  color: #fff;
  border: 0;
  margin-bottom: 10px;
  padding: 0 18px;
  text-align: left;
  transition: 0.3s;
}
.bs-datepicker-predefined-btns button:hover {
  background-color: #54708b;
}
.bs-datepicker-buttons {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  padding-top: 10px;
  border-top: 1px solid #e9edf0;
}
.bs-datepicker-buttons .btn-default {
  margin-left: 10px;
}
.bs-datepicker-buttons .btn-today-wrapper {
  display: flex;
  flex-flow: row wrap;
}
.bs-datepicker-buttons .clear-right,
.bs-datepicker-buttons .today-right {
  flex-grow: 0;
}
.bs-datepicker-buttons .clear-left,
.bs-datepicker-buttons .today-left {
  flex-grow: 1;
}
.bs-datepicker-buttons .clear-center,
.bs-datepicker-buttons .today-center {
  flex-grow: 0.5;
}

/* .bs-timepicker */
.bs-timepicker-container {
  padding: 10px 0;
}
.bs-timepicker-label {
  color: #54708b;
  margin-bottom: 10px;
}
.bs-timepicker-controls {
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
}
.bs-timepicker-controls button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 0;
  background-color: #e9edf0;
  color: #54708b;
  font-size: 16px;
  font-weight: 700;
  vertical-align: middle;
  line-height: 0;
  padding: 0;
  transition: 0.3s;
}
.bs-timepicker-controls button:hover {
  background-color: #d5dadd;
}
.bs-timepicker-controls input {
  width: 35px;
  height: 25px;
  border-radius: 13px;
  text-align: center;
  border: 1px solid #e9edf0;
}
.bs-timepicker .switch-time-format {
  text-transform: uppercase;
  min-width: 54px;
  height: 25px;
  border-radius: 20px;
  border: 1px solid #e9edf0;
  background: #fff;
  color: #54708b;
  font-size: 13px;
}
.bs-timepicker .switch-time-format img {
  vertical-align: initial;
  margin-left: 4px;
}

bs-datepicker-container,
bs-daterangepicker-container {
  z-index: 1080;
}

/* screen size < 1024px */
@media (max-width: 768px) {
  .bs-datepicker {
    width: min-content;
    justify-content: center;
  }
  .bs-datepicker-multiple {
    display: flex;
  }
  .bs-datepicker-multiple + .bs-datepicker-multiple {
    margin-top: 10px;
    margin-left: 0;
  }
}
/* theming */
.theme-default .bs-datepicker-head {
  background-color: #777;
}
.theme-default .btn-today-wrapper .btn-success, .theme-default .btn-clear-wrapper .btn-success {
  background-color: #777;
  border-color: #777;
}
.theme-default .btn-today-wrapper .btn-success:not(:disabled):not(.disabled):active:focus, .theme-default .btn-clear-wrapper .btn-success:not(:disabled):not(.disabled):active:focus {
  box-shadow: none;
}
.theme-default .btn-today-wrapper .btn-success:focus, .theme-default .btn-clear-wrapper .btn-success:focus {
  box-shadow: none;
}
.theme-default .btn-today-wrapper .btn-success:not(:disabled):not(.disabled):active, .theme-default .btn-clear-wrapper .btn-success:not(:disabled):not(.disabled):active {
  background-color: #616161;
  border-color: #616161;
}
.theme-default .btn-today-wrapper .btn-success:hover, .theme-default .btn-clear-wrapper .btn-success:hover {
  background-color: #6F6E6E;
  border-color: #6F6E6E;
}
.theme-default .bs-datepicker-predefined-btns button.selected {
  background-color: #777;
}
.theme-default .bs-datepicker-body table td span.selected, .theme-default .bs-datepicker-body table td.selected span,
.theme-default .bs-datepicker-body table td span[class*=select-]:after, .theme-default .bs-datepicker-body table td[class*=select-] span:after {
  background-color: #777;
}
.theme-default .bs-datepicker-body table td.week span {
  color: #777;
}
.theme-default .bs-datepicker-body table td.active-week span:hover {
  cursor: pointer;
  background-color: #777;
  color: #fff;
  opacity: 0.5;
  transition: 0s;
}

.theme-green .bs-datepicker-head {
  background-color: #5cb85c;
}
.theme-green .btn-today-wrapper .btn-success, .theme-green .btn-clear-wrapper .btn-success {
  background-color: #5cb85c;
  border-color: #5cb85c;
}
.theme-green .btn-today-wrapper .btn-success:not(:disabled):not(.disabled):active:focus, .theme-green .btn-clear-wrapper .btn-success:not(:disabled):not(.disabled):active:focus {
  box-shadow: none;
}
.theme-green .btn-today-wrapper .btn-success:focus, .theme-green .btn-clear-wrapper .btn-success:focus {
  box-shadow: none;
}
.theme-green .btn-today-wrapper .btn-success:not(:disabled):not(.disabled):active, .theme-green .btn-clear-wrapper .btn-success:not(:disabled):not(.disabled):active {
  background-color: #1e7e34;
  border-color: #1e7e34;
}
.theme-green .btn-today-wrapper .btn-success:hover, .theme-green .btn-clear-wrapper .btn-success:hover {
  background-color: #218838;
  border-color: #218838;
}
.theme-green .bs-datepicker-predefined-btns button.selected {
  background-color: #5cb85c;
}
.theme-green .bs-datepicker-body table td span.selected, .theme-green .bs-datepicker-body table td.selected span,
.theme-green .bs-datepicker-body table td span[class*=select-]:after, .theme-green .bs-datepicker-body table td[class*=select-] span:after {
  background-color: #5cb85c;
}
.theme-green .bs-datepicker-body table td.week span {
  color: #5cb85c;
}
.theme-green .bs-datepicker-body table td.active-week span:hover {
  cursor: pointer;
  background-color: #5cb85c;
  color: #fff;
  opacity: 0.5;
  transition: 0s;
}

.theme-blue .bs-datepicker-head {
  background-color: #5bc0de;
}
.theme-blue .btn-today-wrapper .btn-success, .theme-blue .btn-clear-wrapper .btn-success {
  background-color: #5bc0de;
  border-color: #5bc0de;
}
.theme-blue .btn-today-wrapper .btn-success:not(:disabled):not(.disabled):active:focus, .theme-blue .btn-clear-wrapper .btn-success:not(:disabled):not(.disabled):active:focus {
  box-shadow: none;
}
.theme-blue .btn-today-wrapper .btn-success:focus, .theme-blue .btn-clear-wrapper .btn-success:focus {
  box-shadow: none;
}
.theme-blue .btn-today-wrapper .btn-success:not(:disabled):not(.disabled):active, .theme-blue .btn-clear-wrapper .btn-success:not(:disabled):not(.disabled):active {
  background-color: #2AA8CD;
  border-color: #2AA8CD;
}
.theme-blue .btn-today-wrapper .btn-success:hover, .theme-blue .btn-clear-wrapper .btn-success:hover {
  background-color: #3AB3D7;
  border-color: #3AB3D7;
}
.theme-blue .bs-datepicker-predefined-btns button.selected {
  background-color: #5bc0de;
}
.theme-blue .bs-datepicker-body table td span.selected, .theme-blue .bs-datepicker-body table td.selected span,
.theme-blue .bs-datepicker-body table td span[class*=select-]:after, .theme-blue .bs-datepicker-body table td[class*=select-] span:after {
  background-color: #5bc0de;
}
.theme-blue .bs-datepicker-body table td.week span {
  color: #5bc0de;
}
.theme-blue .bs-datepicker-body table td.active-week span:hover {
  cursor: pointer;
  background-color: #5bc0de;
  color: #fff;
  opacity: 0.5;
  transition: 0s;
}

.theme-dark-blue .bs-datepicker-head {
  background-color: #337ab7;
}
.theme-dark-blue .btn-today-wrapper .btn-success, .theme-dark-blue .btn-clear-wrapper .btn-success {
  background-color: #337ab7;
  border-color: #337ab7;
}
.theme-dark-blue .btn-today-wrapper .btn-success:not(:disabled):not(.disabled):active:focus, .theme-dark-blue .btn-clear-wrapper .btn-success:not(:disabled):not(.disabled):active:focus {
  box-shadow: none;
}
.theme-dark-blue .btn-today-wrapper .btn-success:focus, .theme-dark-blue .btn-clear-wrapper .btn-success:focus {
  box-shadow: none;
}
.theme-dark-blue .btn-today-wrapper .btn-success:not(:disabled):not(.disabled):active, .theme-dark-blue .btn-clear-wrapper .btn-success:not(:disabled):not(.disabled):active {
  background-color: #266498;
  border-color: #266498;
}
.theme-dark-blue .btn-today-wrapper .btn-success:hover, .theme-dark-blue .btn-clear-wrapper .btn-success:hover {
  background-color: #2C6FA9;
  border-color: #2C6FA9;
}
.theme-dark-blue .bs-datepicker-predefined-btns button.selected {
  background-color: #337ab7;
}
.theme-dark-blue .bs-datepicker-body table td span.selected, .theme-dark-blue .bs-datepicker-body table td.selected span,
.theme-dark-blue .bs-datepicker-body table td span[class*=select-]:after, .theme-dark-blue .bs-datepicker-body table td[class*=select-] span:after {
  background-color: #337ab7;
}
.theme-dark-blue .bs-datepicker-body table td.week span {
  color: #337ab7;
}
.theme-dark-blue .bs-datepicker-body table td.active-week span:hover {
  cursor: pointer;
  background-color: #337ab7;
  color: #fff;
  opacity: 0.5;
  transition: 0s;
}

.theme-red .bs-datepicker-head {
  background-color: #d9534f;
}
.theme-red .btn-today-wrapper .btn-success, .theme-red .btn-clear-wrapper .btn-success {
  background-color: #d9534f;
  border-color: #d9534f;
}
.theme-red .btn-today-wrapper .btn-success:not(:disabled):not(.disabled):active:focus, .theme-red .btn-clear-wrapper .btn-success:not(:disabled):not(.disabled):active:focus {
  box-shadow: none;
}
.theme-red .btn-today-wrapper .btn-success:focus, .theme-red .btn-clear-wrapper .btn-success:focus {
  box-shadow: none;
}
.theme-red .btn-today-wrapper .btn-success:not(:disabled):not(.disabled):active, .theme-red .btn-clear-wrapper .btn-success:not(:disabled):not(.disabled):active {
  background-color: #D23531;
  border-color: #D23531;
}
.theme-red .btn-today-wrapper .btn-success:hover, .theme-red .btn-clear-wrapper .btn-success:hover {
  background-color: #E33732;
  border-color: #E33732;
}
.theme-red .bs-datepicker-predefined-btns button.selected {
  background-color: #d9534f;
}
.theme-red .bs-datepicker-body table td span.selected, .theme-red .bs-datepicker-body table td.selected span,
.theme-red .bs-datepicker-body table td span[class*=select-]:after, .theme-red .bs-datepicker-body table td[class*=select-] span:after {
  background-color: #d9534f;
}
.theme-red .bs-datepicker-body table td.week span {
  color: #d9534f;
}
.theme-red .bs-datepicker-body table td.active-week span:hover {
  cursor: pointer;
  background-color: #d9534f;
  color: #fff;
  opacity: 0.5;
  transition: 0s;
}

.theme-orange .bs-datepicker-head {
  background-color: #f0ad4e;
}
.theme-orange .btn-today-wrapper .btn-success, .theme-orange .btn-clear-wrapper .btn-success {
  background-color: #f0ad4e;
  border-color: #f0ad4e;
}
.theme-orange .btn-today-wrapper .btn-success:not(:disabled):not(.disabled):active:focus, .theme-orange .btn-clear-wrapper .btn-success:not(:disabled):not(.disabled):active:focus {
  box-shadow: none;
}
.theme-orange .btn-today-wrapper .btn-success:focus, .theme-orange .btn-clear-wrapper .btn-success:focus {
  box-shadow: none;
}
.theme-orange .btn-today-wrapper .btn-success:not(:disabled):not(.disabled):active, .theme-orange .btn-clear-wrapper .btn-success:not(:disabled):not(.disabled):active {
  background-color: #ED9C29;
  border-color: #ED9C29;
}
.theme-orange .btn-today-wrapper .btn-success:hover, .theme-orange .btn-clear-wrapper .btn-success:hover {
  background-color: #FFAC35;
  border-color: #FFAC35;
}
.theme-orange .bs-datepicker-predefined-btns button.selected {
  background-color: #f0ad4e;
}
.theme-orange .bs-datepicker-body table td span.selected, .theme-orange .bs-datepicker-body table td.selected span,
.theme-orange .bs-datepicker-body table td span[class*=select-]:after, .theme-orange .bs-datepicker-body table td[class*=select-] span:after {
  background-color: #f0ad4e;
}
.theme-orange .bs-datepicker-body table td.week span {
  color: #f0ad4e;
}
.theme-orange .bs-datepicker-body table td.active-week span:hover {
  cursor: pointer;
  background-color: #f0ad4e;
  color: #fff;
  opacity: 0.5;
  transition: 0s;
}
/*!*************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/swiper/swiper-bundle.min.css?ngGlobalStyle ***!
  \*************************************************************************************************************************************************************************************************************************************************/
/**
 * Swiper 10.3.1
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2023 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: September 28, 2023
 */

@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;overflow:clip;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./node_modules/stream-chat-angular/src/assets/styles/v2/scss/index.scss?ngGlobalStyle ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.str-chat {
  box-sizing: border-box;
}
.str-chat * {
  font-family: var(--str-chat__font-family);
  box-sizing: border-box;
}
.str-chat .ngxp__container {
  z-index: 1;
  margin: -8px !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
}
.str-chat .ngxp__container .ngxp__arrow {
  display: none !important;
}
.str-chat.google-chrome popper-content .ngxp__container {
  display: block !important;
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0;
}
.str-chat.google-chrome popper-content .ngxp__container[aria-hidden=true] {
  visibility: hidden;
}

stream-icon,
stream-icon-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
}

:root {
  /* The theme version being used, 1 or 2. Used internally by SDKs */
  --str-chat__theme-version: 2;
}

.str-chat {
  /* Used for elements where sizing is necessary (such as icons, avatar), you can use this variable to scale those elements */
  --str-chat__spacing-px: 1px;
  /* Used for margins and paddings */
  --str-chat__spacing-0_5: 0.125rem;
  /* Used for margins and paddings */
  --str-chat__spacing-1: 0.25rem;
  /* Used for margins and paddings */
  --str-chat__spacing-1_5: 0.375rem;
  /* Used for margins and paddings */
  --str-chat__spacing-2: 0.5rem;
  /* Used for margins and paddings */
  --str-chat__spacing-2_5: 0.625rem;
  /* Used for margins and paddings */
  --str-chat__spacing-3: 0.75rem;
  /* Used for margins and paddings */
  --str-chat__spacing-3_5: 0.875rem;
  /* Used for margins and paddings */
  --str-chat__spacing-4: 1rem;
  /* Used for margins and paddings */
  --str-chat__spacing-5: 1.25rem;
  /* Used for margins and paddings */
  --str-chat__spacing-6: 1.5rem;
  /* Used for margins and paddings */
  --str-chat__spacing-7: 1.75rem;
  /* Used for margins and paddings */
  --str-chat__spacing-8: 2rem;
  /* Used for margins and paddings */
  --str-chat__spacing-9: 2.25rem;
  /* Used for margins and paddings */
  --str-chat__spacing-10: 2.5rem;
  /* Used for margins and paddings */
  --str-chat__spacing-11: 2.75rem;
  /* Used for margins and paddings */
  --str-chat__spacing-12: 3rem;
  /* Used for margins and paddings */
  --str-chat__spacing-14: 3.5rem;
  /* Used for margins and paddings */
  --str-chat__spacing-16: 4rem;
}

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

.str-chat__loading-channels-avatar {
  flex-shrink: 0;
  width: calc(var(--str-chat__spacing-px) * 49);
  height: calc(var(--str-chat__spacing-px) * 49);
}

.str-chat {
  /* The margin applied to every attachment in the attachment list */
  --str-chat__attachment-margin: var(--str-chat__spacing-0_5);
  /* The height of GIFs */
  --str-chat__gif-height: calc(var(--str-chat__spacing-px) * 200);
}

.str-chat__attachment-list {
  /* The maximum allowed width and height of attachments, in case of gallery images this is the maximum size of the whole gallery (not just for a single image inside the gallery). There are some constraints for the acceptable values you can provide for this variable, [Angular documentation](https://getstream.io/chat/docs/sdk/angular/components/AttachmentListComponent/#maximum-size), [React documentation](https://getstream.io/chat/docs/sdk/react/message-components/attachment/#image-and-video-sizing). */
  --str-chat__attachment-max-width: calc(
    var(--str-chat__message-max-width) - calc(2 * var(--str-chat__attachment-margin))
  );
  /* The maximum height of videos, the default value is the mase as `--str-chat__attachment-max-width`. The rendered video can be smaller based on the aspect ratio */
  --str-chat__video-height: var(--str-chat__attachment-max-width);
  /* The height of scraped images, the default value is optimized for 1.91:1 aspect ratio */
  --str-chat__scraped-image-height: calc(var(--str-chat__attachment-max-width) * calc(1 / 1.91));
  /* The height of scraped videos, the default value is optimized for 16:9 aspect ratio */
  --str-chat__scraped-video-height: calc(var(--str-chat__attachment-max-width) * calc(9 / 16));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}
.str-chat__attachment-list .str-chat__message-attachment--card .str-chat__message-attachment-card--header {
  position: relative;
}
.str-chat__attachment-list .str-chat__message-attachment--card .str-chat__message-attachment-card--source-link {
  padding-bottom: var(--str-chat__spacing-2);
}
.str-chat__attachment-list .str-chat__message-attachment--card .str-chat__message-attachment-card--text {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
}
.str-chat__attachment-list .str-chat__message-attachment--image,
.str-chat__attachment-list .str-chat__message-attachment--video,
.str-chat__attachment-list .str-chat__message-attachment-card--header {
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.str-chat__attachment-list .str-chat__message-attachment-card--header {
  height: var(--str-chat__scraped-image-height);
}
.str-chat__attachment-list .str-chat__message-attachment-card--header img {
  object-fit: cover;
  max-height: 100%;
  max-width: 100%;
  width: 100%;
  height: 100%;
  cursor: default;
}
.str-chat__attachment-list .str-chat__message-attachment-card-react--header img {
  cursor: zoom-in;
}
.str-chat__attachment-list .str-chat__message-attachment-card--giphy .str-chat__message-attachment-card--header {
  height: var(--str-chat__gif-height);
}
.str-chat__attachment-list .str-chat__message-attachment-card--giphy .str-chat__message-attachment-card--header img {
  object-fit: contain;
  max-height: 100%;
  max-width: 100%;
  cursor: default;
}
.str-chat__attachment-list .str-chat__message-attachment-card--giphy .str-chat__message-attachment-card-react--header img {
  cursor: zoom-in;
}
.str-chat__attachment-list .str-chat__message-attachment--image:not(.str-chat__message-attachment--card) > img {
  height: min(var(--str-chat__attachment-max-width), min(var(--str-chat__attachment-max-width, 1000000) / var(--original-width, 1000000), 1px) * var(--original-height, 1000000));
  max-width: var(--str-chat__attachment-max-width);
  max-height: var(--str-chat__attachment-max-width);
  object-fit: cover;
  width: 100%;
  cursor: zoom-in;
}
.str-chat__attachment-list .str-chat__message-attachment--video:not(.str-chat__message-attachment--card),
.str-chat__attachment-list .str-chat__message-attachment-card--video .str-chat__message-attachment-card--header {
  max-width: var(--str-chat__attachment-max-width);
  display: flex;
}
.str-chat__attachment-list .str-chat__message-attachment--video:not(.str-chat__message-attachment--card) .str-chat__player-wrapper,
.str-chat__attachment-list .str-chat__message-attachment-card--video .str-chat__message-attachment-card--header .str-chat__player-wrapper {
  height: 100%;
  width: 100%;
  min-width: 0;
  max-width: var(--str-chat__attachment-max-width);
  display: flex;
  flex-direction: column;
}
.str-chat__attachment-list .str-chat__message-attachment--video:not(.str-chat__message-attachment--card) .str-chat__player-wrapper .react-player,
.str-chat__attachment-list .str-chat__message-attachment--video:not(.str-chat__message-attachment--card) .str-chat__player-wrapper .str-chat__video-angular,
.str-chat__attachment-list .str-chat__message-attachment-card--video .str-chat__message-attachment-card--header .str-chat__player-wrapper .react-player,
.str-chat__attachment-list .str-chat__message-attachment-card--video .str-chat__message-attachment-card--header .str-chat__player-wrapper .str-chat__video-angular {
  height: 100%;
  width: 100%;
  max-width: var(--str-chat__attachment-max-width);
  max-height: 100%;
  min-height: 0;
}
.str-chat__attachment-list .str-chat__message-attachment--video:not(.str-chat__message-attachment--card):not(.str-chat__message-attachment-dynamic-size) {
  height: var(--str-chat__video-height);
}
.str-chat__attachment-list .str-chat__message-attachment--video.str-chat__message-attachment-dynamic-size:not(.str-chat__message-attachment--card) {
  max-height: var(--str-chat__video-height);
}
.str-chat__attachment-list .str-chat__message-attachment--video.str-chat__message-attachment-dynamic-size:not(.str-chat__message-attachment--card) .str-chat__player-wrapper {
  height: min(var(--str-chat__video-height), min(var(--str-chat__attachment-max-width, 1000000) / var(--original-width, 1000000), 1px) * var(--original-height, 1000000));
  max-height: var(--str-chat__video-height);
}
.str-chat__attachment-list .str-chat__message-attachment--video.str-chat__message-attachment-dynamic-size:not(.str-chat__message-attachment--card) .str-chat__video-angular {
  max-height: var(--str-chat__video-height);
}
.str-chat__attachment-list .str-chat__message-attachment-card--video .str-chat__message-attachment-card--header {
  height: var(--str-chat__scraped-video-height);
}
.str-chat__attachment-list .str-chat__message-attachment--video:not(.str-chat__message-attachment--card),
.str-chat__attachment-list .str-chat__message-attachment--image:not(.str-chat__message-attachment--card) {
  margin: var(--str-chat__attachment-margin);
}
.str-chat__attachment-list .str-chat__message-attachment--gallery {
  margin: var(--str-chat__attachment-margin);
}
.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__gallery {
  display: grid;
  grid-template-columns: 50% 50%;
  overflow: hidden;
  width: -moz-fit-content;
  width: fit-content;
  gap: var(--str-chat__spacing-0_5);
  max-width: var(--str-chat__attachment-max-width);
  height: var(--str-chat__attachment-max-width);
}
.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__gallery.str-chat__gallery-two-rows {
  grid-template-rows: 50% 50%;
}
.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__gallery .str-chat__gallery-image {
  padding: 0;
  margin: 0;
}
.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__gallery .str-chat__gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  max-width: var(--str-chat__attachment-max-width);
}
.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__gallery .str-chat__gallery-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: top left;
  background-repeat: no-repeat;
  margin: 0;
  cursor: zoom-in;
  max-width: var(--str-chat__attachment-max-width);
}
.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__gallery .str-chat__gallery-placeholder p {
  position: relative;
  z-index: 1;
}
.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__gallery .str-chat__gallery-placeholder::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.str-chat__attachment-list .str-chat__gallery .str-chat__message-attachment--svg-image,
.str-chat__attachment-list .str-chat__message-attachment--image.str-chat__message-attachment--svg-image {
  padding: var(--str-chat__spacing-6);
}
.str-chat__attachment-list .str-chat__gallery .str-chat__message-attachment--svg-image img,
.str-chat__attachment-list .str-chat__message-attachment--image.str-chat__message-attachment--svg-image img {
  object-fit: contain;
  max-width: calc(var(--str-chat__attachment-max-width) - var(--str-chat__spacing-6));
  max-height: calc(var(--str-chat__attachment-max-width) - var(--str-chat__spacing-6));
}
.str-chat__attachment-list .str-chat__message-attachment-file--item,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--str-chat__spacing-2);
  column-gap: var(--str-chat__spacing-4);
  margin: var(--str-chat__attachment-margin);
}
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  row-gap: var(--str-chat__spacing-0_5);
  min-width: 0;
}
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text .str-chat__message-attachment-file--item-first-row,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text .str-chat__message-attachment-audio-widget--text-first-row,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-file--item-first-row,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-audio-widget--text-first-row,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text .str-chat__message-attachment-file--item-first-row,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text .str-chat__message-attachment-audio-widget--text-first-row,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-file--item-first-row,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-audio-widget--text-first-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--str-chat__spacing-2);
}
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-file--item-name,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-audio-widget--title,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-file--item-name,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-audio-widget--title,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-file--item-name,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-audio-widget--title,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-file--item-name,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-audio-widget--title,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-file--item-name,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-audio-widget--title,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-file--item-name,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-audio-widget--title,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-file--item-name,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-audio-widget--title,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-file--item-name,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-audio-widget--title {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
  min-width: 0;
}
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-download-icon svg,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-download-icon svg,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-download-icon svg,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-download-icon svg,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-download-icon svg,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-download-icon svg,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-download-icon svg,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-download-icon svg {
  width: calc(var(--str-chat__spacing-px) * 24);
  height: calc(var(--str-chat__spacing-px) * 16);
}
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__file-icon {
  width: calc(var(--str-chat__spacing-px) * 34);
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--play-controls {
  display: flex;
  align-items: center;
  justify-content: center;
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--progress-track {
  max-width: calc(var(--str-chat__spacing-px) * 120);
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text-second-row {
  display: flex;
  align-items: center;
  width: 100%;
  grid-column-gap: var(--str-chat__spacing-5);
  padding-top: var(--str-chat__spacing-2_5);
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text-second-row .str-chat__message-attachment-file--item-size {
  line-height: calc(var(--str-chat__spacing-px) * 14);
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget--progress-track {
  position: relative;
  height: calc(var(--str-chat__spacing-px) * 5);
  flex: 1;
  cursor: pointer;
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget--progress-track .str-chat__message-attachment-audio-widget--progress-indicator {
  position: absolute;
  inset-inline-start: 0;
  height: inherit;
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget--play-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--str-chat__spacing-px) * 36);
  width: calc(var(--str-chat__spacing-px) * 36);
  cursor: pointer;
  z-index: 1;
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget--play-button svg {
  width: var(--str-chat__spacing-3);
}
.str-chat__attachment-list .str-chat__message-attachment-card {
  min-width: 0;
  max-width: var(--str-chat__attachment-max-width);
  margin: var(--str-chat__attachment-margin);
}
.str-chat__attachment-list .str-chat__message-attachment-card .str-chat__message-attachment-card--content {
  padding: var(--str-chat__spacing-2_5);
}
.str-chat__attachment-list .str-chat__message-attachment-card .str-chat__message-attachment-card--content .str-chat__message-attachment-card--title {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
}
.str-chat__attachment-list .str-chat__message-attachment-card--audio .str-chat__message-attachment-card--content {
  padding: 0;
}
.str-chat__attachment-list .str-chat__message-attachment-card--audio .str-chat__message-attachment-card--content .str-chat__message-attachment-card-audio-widget {
  display: flex;
  flex-direction: column;
  row-gap: var(--str-chat__spacing-2_5);
  width: 100%;
  padding: var(--str-chat__spacing-2);
}
.str-chat__attachment-list .str-chat__message-attachment-card--audio .str-chat__message-attachment-card--content .str-chat__message-attachment-card-audio-widget .str-chat__message-attachment-card-audio-widget--first-row {
  display: flex;
  align-items: center;
  column-gap: var(--str-chat__spacing-3_5);
}
.str-chat__attachment-list .str-chat__message-attachment-actions .str-chat__message-attachment-actions-form {
  display: flex;
  justify-content: stretch;
}
.str-chat__attachment-list .str-chat__message-attachment-actions .str-chat__message-attachment-actions-form .str-chat__message-attachment-actions-button {
  cursor: pointer;
  width: 100%;
  padding: var(--str-chat__spacing-3) var(--str-chat__spacing-4);
  white-space: nowrap;
}
.str-chat__attachment-list .str-chat__message-attachment-with-actions.str-chat__message-attachment--giphy .str-chat__message-attachment-card .str-chat__message-attachment-card--content {
  display: none;
}

.str-chat__quoted-message-preview {
  /* stylelint-disable-next-line length-zero-no-unit */
  --str-chat__attachment-margin: 0px;
}
.str-chat__quoted-message-preview * {
  cursor: pointer !important;
}
.str-chat__quoted-message-preview .str-chat__message-attachment-card .str-chat__message-attachment-card--source-link,
.str-chat__quoted-message-preview .str-chat__message-attachment-card .str-chat__message-attachment-card--content {
  display: none;
}
.str-chat__quoted-message-preview .str-chat__message-attachment-file--item-download {
  display: none;
}

.str-chat__message .str-chat__quoted-message-preview .str-chat__message-attachment-file--item {
  padding: 0;
}

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

.str-chat__attachment-preview-list {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--str-chat__spacing-1_5);
  width: 100%;
}
.str-chat__attachment-preview-list .str-chat__attachment-list-scroll-container {
  overflow-y: hidden;
  overflow-x: auto;
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: var(--str-chat__spacing-2);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-image {
  position: relative;
  height: calc(var(--str-chat__spacing-px) * 72);
  width: calc(var(--str-chat__spacing-px) * 72);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-image .str-chat__attachment-preview-image-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-image .str-chat__attachment-preview-thumbnail {
  object-fit: cover;
  height: calc(var(--str-chat__spacing-px) * 72);
  width: calc(var(--str-chat__spacing-px) * 72);
  word-break: break-all;
  overflow: hidden;
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-file {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: calc(var(--str-chat__spacing-px) * 72);
  width: calc(var(--str-chat__spacing-px) * 200);
  position: relative;
  padding: 0 var(--str-chat__spacing-4);
  column-gap: var(--str-chat__spacing-2);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-icon svg {
  height: calc(var(--str-chat__spacing-px) * 37);
  width: unset;
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-end {
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-end .str-chat__attachment-preview-file-name {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
  max-width: 100%;
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-end .str-chat__attachment-preview-file-download {
  line-height: calc(var(--str-chat__spacing-px) * 13);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-end .str-chat__attachment-preview-file-download svg {
  width: calc(var(--str-chat__spacing-px) * 16);
  height: calc(var(--str-chat__spacing-px) * 16);
}
.str-chat__attachment-preview-list button.str-chat__attachment-preview-delete {
  padding: unset;
  background: unset;
  border: unset;
  border-radius: var(--str-chat__border-radius-circle);
  display: flex;
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-delete {
  position: absolute;
  top: calc(var(--str-chat__spacing-px) * 2);
  inset-inline-end: calc(var(--str-chat__spacing-px) * 2);
  cursor: pointer;
  z-index: 1;
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-delete svg {
  width: calc(var(--str-chat__spacing-px) * 24);
  height: calc(var(--str-chat__spacing-px) * 24);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-error {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: unset;
  background: unset;
  border: unset;
  border-radius: unset;
  inset-inline-start: 0;
  cursor: pointer;
}

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

.mention-menu {
  padding: var(--str-chat__spacing-2) 0 !important;
  margin: 0 !important;
  min-width: 50%;
}
.mention-menu .mention-item {
  padding: 0 !important;
}

.str-chat__suggestion-list-container {
  position: absolute;
  bottom: var(--str-chat__spacing-7);
  width: 100%;
  padding: var(--str-chat__spacing-2) 0;
}
.str-chat__suggestion-list-container .str-chat__suggestion-list {
  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__channel {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.str-chat__channel .str-chat__container {
  height: 100%;
  display: flex;
}
.str-chat__channel .str-chat__container .str-chat__main-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}
.str-chat__channel .str-chat__container .str-chat__main-panel--hideOnThread {
  display: none;
}

.str-chat__empty-channel {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--str-chat__spacing-4);
  position: relative;
}
.str-chat__empty-channel svg {
  width: calc(var(--str-chat__spacing-px) * 136);
  height: calc(var(--str-chat__spacing-px) * 136);
}
.str-chat__empty-channel .str-chat__empty-channel-notifications {
  position: absolute;
  inset-block-end: var(--str-chat__spacing-2);
}

.str-chat__loading-channel {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.str-chat__loading-channel .str-chat__loading-channel-header {
  display: flex;
  padding: var(--str-chat__spacing-2);
  column-gap: var(--str-chat__spacing-4);
  align-items: center;
}
.str-chat__loading-channel .str-chat__loading-channel-header .str-chat__loading-channel-header-avatar {
  flex-shrink: 0;
  width: calc(var(--str-chat__spacing-px) * 40);
  height: calc(var(--str-chat__spacing-px) * 40);
  border-radius: var(--str-chat__avatar-border-radius);
}
.str-chat__loading-channel .str-chat__loading-channel-header .str-chat__loading-channel-header-end {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  overflow-x: hidden;
  flex: 1;
  row-gap: var(--str-chat__spacing-1_5);
}
.str-chat__loading-channel .str-chat__loading-channel-header .str-chat__loading-channel-header-end .str-chat__loading-channel-header-name {
  border-radius: var(--str-chat__border-radius-xs);
  height: calc(var(--str-chat__spacing-px) * 16);
  width: calc(var(--str-chat__spacing-px) * 170);
}
.str-chat__loading-channel .str-chat__loading-channel-header .str-chat__loading-channel-header-end .str-chat__loading-channel-header-info {
  border-radius: var(--str-chat__border-radius-xs);
  height: calc(var(--str-chat__spacing-px) * 16);
  width: calc(var(--str-chat__spacing-px) * 66);
}
.str-chat__loading-channel .str-chat__loading-channel-message-list {
  padding: 0 var(--str-chat__spacing-2);
  height: 100%;
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__li {
  margin-inline: calc(-1 * var(--str-chat__spacing-2));
  padding-inline: var(--str-chat__spacing-2);
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__parent-message-li {
  margin-inline: calc(-1 * var(--str-chat__spacing-2));
}
@media only screen and (min-device-width: 768px) {
  .str-chat__loading-channel .str-chat__loading-channel-message-list {
    padding: 0 min(var(--str-chat__spacing-10), 4%);
  }
  .str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__li {
    margin-inline: calc(-1 * min(var(--str-chat__spacing-10), 4%));
    padding-inline: min(var(--str-chat__spacing-10), 4%);
  }
  .str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__parent-message-li {
    margin-inline: calc(-1 * min(var(--str-chat__spacing-10), 4%) - 2px);
  }
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message {
  display: flex;
  width: 100%;
  column-gap: var(--str-chat__spacing-2);
  padding: var(--str-chat__spacing-4) 0;
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message .str-chat__loading-channel-message-avatar {
  flex-shrink: 0;
  width: calc(var(--str-chat__spacing-px) * 49);
  height: calc(var(--str-chat__spacing-px) * 49);
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message .str-chat__loading-channel-message-end {
  display: flex;
  flex-direction: column;
  width: 100%;
  row-gap: var(--str-chat__spacing-2);
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message .str-chat__loading-channel-message-end .str-chat__loading-channel-message-last-row {
  display: flex;
  width: 100%;
  column-gap: var(--str-chat__spacing-2);
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message .str-chat__loading-channel-message-sender {
  height: calc(var(--str-chat__spacing-px) * 16);
  width: calc(var(--str-chat__spacing-px) * 66);
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message .str-chat__loading-channel-message-text {
  height: calc(var(--str-chat__spacing-px) * 16);
  width: 100%;
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message .str-chat__loading-channel-message-date {
  height: calc(var(--str-chat__spacing-px) * 16);
  width: calc(var(--str-chat__spacing-px) * 50);
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message:nth-of-type(2) {
  flex-direction: row-reverse;
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message:nth-of-type(2) .str-chat__loading-channel-message-sender {
  align-self: end;
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message:nth-of-type(2) .str-chat__loading-channel-message-last-row {
  flex-direction: row-reverse;
}
.str-chat__loading-channel .str-chat__loading-channel-message-input-row {
  display: flex;
  column-gap: var(--str-chat__spacing-2);
  padding: var(--str-chat__spacing-2);
}
.str-chat__loading-channel .str-chat__loading-channel-message-input-row .str-chat__loading-channel-message-input {
  width: 100%;
  height: calc(var(--str-chat__spacing-px) * 36);
}
.str-chat__loading-channel .str-chat__loading-channel-message-input-row .str-chat__loading-channel-message-send {
  height: calc(var(--str-chat__spacing-px) * 36);
  width: calc(var(--str-chat__spacing-px) * 36);
}

.str-chat__channel-header {
  display: flex;
  padding: var(--str-chat__spacing-2);
  column-gap: var(--str-chat__spacing-4);
  align-items: center;
}
.str-chat__channel-header .str-chat__header-hamburger {
  display: none;
}
.str-chat__channel-header .str-chat__channel-header-end {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  overflow-x: hidden;
  flex: 1;
  row-gap: var(--str-chat__spacing-1_5);
}
.str-chat__channel-header .str-chat__channel-header-end p {
  margin: 0;
}
.str-chat__channel-header .str-chat__channel-header-end .str-chat__channel-header-title,
.str-chat__channel-header .str-chat__channel-header-end .str-chat__channel-header-info {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
}
.str-chat__channel-header .str-chat__channel-header-end .str-chat__channel-header-title {
  overflow-y: hidden;
}

.str-chat__channel-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.str-chat__channel-list .str-chat__channel-list-messenger {
  height: 100%;
}
.str-chat__channel-list .str-chat__channel-list-messenger .str-chat__channel-list-messenger__main {
  height: 100%;
}
.str-chat__channel-list .str-chat__channel-list-messenger .str-chat__channel-list-messenger__main .str-chat__channel-list-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--str-chat__spacing-4);
}
.str-chat__channel-list .str-chat__channel-list-messenger .str-chat__channel-list-messenger__main .str-chat__channel-list-empty svg {
  width: calc(var(--str-chat__spacing-px) * 136);
  height: calc(var(--str-chat__spacing-px) * 136);
}
.str-chat__channel-list .str-chat__channel-list-messenger .str-chat__channel-list-messenger__main .str-chat__channel-list-empty-v1 {
  display: none;
}
.str-chat__channel-list .str-chat__load-more-button {
  display: flex;
  justify-content: center;
  margin: var(--str-chat__spacing-2) 0;
}
.str-chat__channel-list .str-chat__load-more-button .str-chat__load-more-button__button {
  display: flex;
  align-items: center;
  justify-content: center;
}
.str-chat__channel-list .str-chat__down-main {
  display: none;
}

.str-chat__channel-list-react {
  overflow: hidden;
}
.str-chat__channel-list-react .str-chat__channel-list-messenger-react {
  overflow: hidden;
  padding-bottom: var(--str-chat__spacing-2_5);
}
.str-chat__channel-list-react .str-chat__channel-list-messenger-react .str-chat__channel-list-messenger-react__main {
  overflow-y: auto;
}

.str-chat__channel-preview {
  display: flex;
  column-gap: var(--str-chat__spacing-2);
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2);
  margin: 0;
  text-align: start;
  cursor: pointer;
}
.str-chat__channel-preview .str-chat__channel-preview-end {
  display: flex;
  flex-direction: column;
  row-gap: var(--str-chat__spacing-0_5);
  width: 100%;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  min-width: 0;
}
.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-end-first-row {
  display: flex;
  column-gap: var(--str-chat__spacing-1);
  align-items: center;
}
.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-end-first-row .str-chat__channel-preview-unread-badge {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 var(--str-chat__spacing-2);
}
.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-end-first-row .str-chat__channel-preview-messenger--name {
  width: 100%;
}
.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-messenger--name,
.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-messenger--last-message {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
  overflow-y: hidden;
  min-width: 0;
}
.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-messenger--name p,
.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-messenger--last-message p {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
  margin: 0;
}

.str-chat__channel-preview-loading {
  display: flex;
  column-gap: var(--str-chat__spacing-2);
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2);
  margin: 0;
  text-align: start;
}
.str-chat__channel-preview-loading .str-chat__channel-preview-end-loading {
  display: flex;
  flex-direction: column;
  row-gap: var(--str-chat__spacing-0_5);
  width: 100%;
}
.str-chat__channel-preview-loading .str-chat__loading-channels-username {
  height: calc(var(--str-chat__spacing-px) * 16);
  width: calc(var(--str-chat__spacing-px) * 66);
}
.str-chat__channel-preview-loading .str-chat__loading-channels-status {
  height: calc(var(--str-chat__spacing-px) * 16);
  width: 100%;
}

.str-chat__channel-search {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.str-chat__channel-search.str-chat__channel-search--with-results.str-chat__channel-search--inline {
  height: 100%;
}
.str-chat__channel-search.str-chat__channel-search--inline {
  min-height: 0;
}
.str-chat__channel-search .str-chat__channel-search-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--str-chat__spacing-2_5);
  height: 65px;
}
.str-chat__channel-search .str-chat__channel-search-bar .str-chat__channel-search-bar-button {
  outline: none;
  background: none;
  border: none;
  width: calc(var(--str-chat__spacing-px) * 40);
  height: calc(var(--str-chat__spacing-px) * 40);
  padding: var(--str-chat__spacing-2_5);
  cursor: pointer;
}
.str-chat__channel-search .str-chat__channel-search-bar .str-chat__channel-search-input--wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  padding: var(--str-chat__spacing-2_5);
  min-width: 0;
}
.str-chat__channel-search .str-chat__channel-search-bar .str-chat__channel-search-input--wrapper .str-chat__channel-search-input--icon,
.str-chat__channel-search .str-chat__channel-search-bar .str-chat__channel-search-input--wrapper .str-chat__channel-search-input--clear-button {
  display: inline-flex;
  padding: 0 var(--str-chat__spacing-2_5);
}
.str-chat__channel-search .str-chat__channel-search-bar .str-chat__channel-search-input--wrapper .str-chat__channel-search-input--clear-button {
  outline: none;
  background: none;
  border: none;
  cursor: pointer;
}
.str-chat__channel-search .str-chat__channel-search-bar .str-chat__channel-search-input--wrapper .str-chat__channel-search-input--clear-button:disabled {
  cursor: default;
}
.str-chat__channel-search .str-chat__channel-search-bar .str-chat__channel-search-input--wrapper input {
  flex: 1;
  min-width: 0;
}
.str-chat__channel-search .str-chat__channel-search-container-searching {
  width: 100%;
  padding: var(--str-chat__spacing-5) var(--str-chat__spacing-4);
}
.str-chat__channel-search .str-chat__channel-search-results-header {
  width: 100%;
  padding: var(--str-chat__spacing-5) var(--str-chat__spacing-4);
}
.str-chat__channel-search .str-chat__channel-search-result-list {
  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 {
  outline: none;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  width: 100%;
  column-gap: var(--str-chat__spacing-2);
  padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2);
}
.str-chat__channel-search .str-chat__channel-search-result-list .str-chat__channel-search-result .channel-search__result-text,
.str-chat__channel-search .str-chat__channel-search-result-list .str-chat__channel-search-result .str-chat__channel-search-result--display-name {
  overflow-y: hidden;
}

.str-chat__cta-button {
  padding: var(--str-chat__spacing-3_5) var(--str-chat__spacing-6);
  cursor: pointer;
}

.str-chat__circle-fab {
  width: calc(var(--str-chat__spacing-px) * 42);
  height: calc(var(--str-chat__spacing-px) * 42);
  padding: 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.str-chat__circle-fab .str-chat__circle-fab-icon {
  display: inline-block;
  height: calc(var(--str-chat__spacing-px) * 24);
}

.str-chat__edit-message-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  row-gap: var(--str-chat__spacing-5);
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
}
.str-chat__edit-message-form .str-chat__edit-message-form-options {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.str-chat__edit-message-form .str-chat__edit-message-form-options button {
  cursor: pointer;
  margin: 0;
}

.str-chat__message .str-chat__message-input-angular-host {
  max-height: 100%;
  min-height: 0;
  display: flex;
  min-width: 0;
  max-width: 100%;
}
.str-chat__message .str-chat__message-edit-in-progress .str-chat__modal--open .str-chat__modal__inner {
  height: 40%;
  max-height: 80%;
  min-width: 90%;
  max-width: 90%;
  width: 90%;
  flex-basis: min-content;
}
@media only screen and (min-device-width: 768px) {
  .str-chat__message .str-chat__message-edit-in-progress .str-chat__modal--open .str-chat__modal__inner {
    min-width: 40%;
    max-width: 60%;
    width: min-content;
  }
}

.str-chat__image-carousel {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
}
.str-chat__image-carousel .str-chat__image-carousel-stepper {
  padding: var(--str-chat__spacing-2_5);
  border: none;
  cursor: pointer;
  background: transparent;
}
.str-chat__image-carousel .str-chat__image-carousel-image {
  object-fit: cover;
  min-height: 0;
  max-height: 100%;
  min-width: 0;
  max-width: 100%;
}

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

[dir=rtl] .str-chat__image-carousel-stepper svg {
  transform: scale(-1, 1);
}

.str-chat__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 {
  outline: none;
  background: none;
  border: none;
  cursor: pointer;
}

.str-chat__loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rotate 1s linear infinite;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.str-chat {
  /* The width/height of the message options buttons */
  --str-chat__message-options-button-size: calc(var(--str-chat__spacing-px) * 26);
  /* The maximum allowed width of the message component */
  --str-chat__message-max-width: calc(var(--str-chat__spacing-px) * 480);
  /* The maximum allowed width of the message component, if it has attachments */
  --str-chat__message-with-attachment-max-width: calc(var(--str-chat__spacing-px) * 300);
  /* The maximum allowed width of quoted messages inside the message component */
  --str-chat__quoted-message-max-width: calc(var(--str-chat__spacing-px) * 180);
  /* The maximum allowed width of quoted messages inside the message input component */
  --str-chat__quoted-message-inside-message-input-max-width: calc(
    var(--str-chat__spacing-px) * 200
  );
  /* The maximum allowed height of quoted messages inside the message input component */
  --str-chat__quoted-message-inside-message-input-max-height: calc(
    var(--str-chat__quoted-message-inside-message-input-max-width) +
      calc(var(--str-chat__spacing-px) * 50)
  );
}

.str-chat__message .str-chat__message-bubble {
  max-width: var(--str-chat__message-max-width);
}

.str-chat__message.str-chat__message--has-attachment {
  --str-chat__message-max-width: var(--str-chat__message-with-attachment-max-width);
}
.str-chat__message.str-chat__message--has-attachment .str-chat__message-bubble {
  max-width: var(--str-chat__message-max-width);
}

.str-chat__quoted-message-preview {
  --str-chat__message-max-width: var(--str-chat__quoted-message-max-width);
}
.str-chat__quoted-message-preview .str-chat__quoted-message-bubble {
  pointer-events: none;
  max-width: var(--str-chat__message-max-width);
}

.str-chat__message,
.str-chat__quoted-message-preview {
  display: grid;
  word-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
  overflow-wrap: break-word;
}
.str-chat__message.str-chat__message--other, .str-chat__message.str-chat__quoted-message-preview,
.str-chat__quoted-message-preview.str-chat__message--other,
.str-chat__quoted-message-preview.str-chat__quoted-message-preview {
  grid-template-areas: "avatar message" ". replies" ". translation-notice" ". metadata";
  column-gap: var(--str-chat__spacing-2);
  grid-template-columns: auto 1fr;
  justify-items: start;
}
.str-chat__message.str-chat__message--me,
.str-chat__quoted-message-preview.str-chat__message--me {
  grid-template-areas: "message" "replies" "translation-notice" "metadata";
  justify-items: end;
}
.str-chat__message.str-chat__message--me > .str-chat__message-sender-avatar,
.str-chat__quoted-message-preview.str-chat__message--me > .str-chat__message-sender-avatar {
  display: none;
}
.str-chat__message.str-chat__message--deleted,
.str-chat__quoted-message-preview.str-chat__message--deleted {
  grid-template-areas: "message";
}
.str-chat__message.str-chat__message--system,
.str-chat__quoted-message-preview.str-chat__message--system {
  grid-template-areas: "message";
  grid-template-columns: auto;
}
.str-chat__message .str-chat__message-sender-avatar,
.str-chat__quoted-message-preview .str-chat__message-sender-avatar {
  grid-area: avatar;
  align-self: end;
}
.str-chat__message .str-chat__message-inner,
.str-chat__quoted-message-preview .str-chat__message-inner {
  grid-area: message;
  display: grid;
  grid-template-areas: "reactions reactions" "message-bubble options";
  grid-template-columns: auto 1fr;
  column-gap: var(--str-chat__spacing-2);
  position: relative;
}
.str-chat__message .str-chat__message-inner .str-chat__message-options,
.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-options {
  grid-area: options;
  align-items: start;
  justify-content: flex-end;
  flex-direction: row-reverse;
  width: calc(3 * var(--str-chat__message-options-button-size));
}
.str-chat__message .str-chat__message-inner .str-chat__message-options .str-chat__message-actions-box-button,
.str-chat__message .str-chat__message-inner .str-chat__message-options .str-chat__message-reply-in-thread-button,
.str-chat__message .str-chat__message-inner .str-chat__message-options .str-chat__message-reactions-button,
.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-options .str-chat__message-actions-box-button,
.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-options .str-chat__message-reply-in-thread-button,
.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-options .str-chat__message-reactions-button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: var(--str-chat__message-options-button-size);
  height: var(--str-chat__message-options-button-size);
}
.str-chat__message .str-chat__message-inner .str-chat__message-options .str-chat__message-actions-box-button,
.str-chat__message .str-chat__message-inner .str-chat__message-options .str-chat__message-actions-container,
.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-options .str-chat__message-actions-box-button,
.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-options .str-chat__message-actions-container {
  position: relative;
}
.str-chat__message .str-chat__message-inner .str-chat__message-reactions-host,
.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-reactions-host {
  grid-area: reactions;
}
.str-chat__message .str-chat__message-inner .str-chat__message-bubble,
.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-bubble {
  grid-area: message-bubble;
  position: relative;
  min-width: 0;
}
.str-chat__message .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text,
.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text {
  padding: var(--str-chat__spacing-2) var(--str-chat__spacing-4);
}
.str-chat__message .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text p,
.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text p {
  margin: 0;
}
.str-chat__message .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text .str-chat__message-text-inner,
.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text .str-chat__message-text-inner {
  overflow-y: hidden;
}
.str-chat__message .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text p,
.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text p {
  white-space: pre-line;
}
.str-chat__message.str-chat__message--me .str-chat__message-inner,
.str-chat__quoted-message-preview.str-chat__message--me .str-chat__message-inner {
  grid-template-areas: "reactions reactions" "options message-bubble";
  grid-template-columns: 1fr auto;
}
.str-chat__message.str-chat__message--me .str-chat__message-inner .str-chat__message-options,
.str-chat__quoted-message-preview.str-chat__message--me .str-chat__message-inner .str-chat__message-options {
  flex-direction: row;
}
.str-chat__message .str-chat__translation-notice,
.str-chat__quoted-message-preview .str-chat__translation-notice {
  grid-area: translation-notice;
}
.str-chat__message .str-chat__translation-notice button,
.str-chat__quoted-message-preview .str-chat__translation-notice button {
  cursor: pointer;
  padding: var(--str-chat__spacing-1) 0;
  margin: 0;
}
.str-chat__message .str-chat__message-metadata,
.str-chat__quoted-message-preview .str-chat__message-metadata {
  grid-area: metadata;
  display: flex;
  align-items: center;
  column-gap: var(--str-chat__spacing-1);
  margin-block-start: var(--str-chat__spacing-0_5);
}
.str-chat__message .str-chat__message-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-status,
.str-chat__quoted-message-preview .str-chat__message-status {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: var(--str-chat__spacing-0_5);
  position: relative;
}
.str-chat__message .str-chat__message-status svg,
.str-chat__quoted-message-preview .str-chat__message-status svg {
  width: calc(var(--str-chat__spacing-px) * 15);
  height: calc(var(--str-chat__spacing-px) * 15);
}
.str-chat__message .str-chat__message-replies-count-button-wrapper,
.str-chat__quoted-message-preview .str-chat__message-replies-count-button-wrapper {
  grid-area: replies;
}
.str-chat__message .str-chat__message-replies-count-button-wrapper button,
.str-chat__quoted-message-preview .str-chat__message-replies-count-button-wrapper button {
  cursor: pointer;
  padding: 0;
}
.str-chat__message .str-chat__message--deleted-inner,
.str-chat__quoted-message-preview .str-chat__message--deleted-inner {
  padding: var(--str-chat__spacing-2) var(--str-chat__spacing-4);
}
.str-chat__message .str-chat__message--deleted-inner p,
.str-chat__quoted-message-preview .str-chat__message--deleted-inner p {
  margin: 0;
}
.str-chat__message .str-chat__quoted-message-bubble,
.str-chat__quoted-message-preview .str-chat__quoted-message-bubble {
  padding: var(--str-chat__spacing-2) var(--str-chat__spacing-4);
  display: flex;
  column-gap: var(--str-chat__spacing-1);
  min-width: 0;
  width: 100%;
}
.str-chat__message .str-chat__quoted-message-bubble p,
.str-chat__quoted-message-preview .str-chat__quoted-message-bubble p {
  margin: 0;
}
.str-chat__message .str-chat__emoji-display-fix,
.str-chat__quoted-message-preview .str-chat__emoji-display-fix {
  display: inline-block;
  width: 1.25em;
}
.str-chat__message .str-chat__message-error-icon,
.str-chat__quoted-message-preview .str-chat__message-error-icon {
  display: none;
}
.str-chat__message .str-chat__simple-message--error-failed,
.str-chat__quoted-message-preview .str-chat__simple-message--error-failed {
  cursor: pointer;
}
.str-chat__message.str-chat__message--error .str-chat__message-error-icon, .str-chat__message.str-chat__message--failed .str-chat__message-error-icon,
.str-chat__quoted-message-preview.str-chat__message--error .str-chat__message-error-icon,
.str-chat__quoted-message-preview.str-chat__message--failed .str-chat__message-error-icon {
  display: block;
  position: absolute;
  bottom: 0;
  inset-inline-end: calc(-1 * (calc(var(--str-chat__spacing-px) * 18) / 2));
}
.str-chat__message.str-chat__message--error .str-chat__message-error-icon svg, .str-chat__message.str-chat__message--failed .str-chat__message-error-icon svg,
.str-chat__quoted-message-preview.str-chat__message--error .str-chat__message-error-icon svg,
.str-chat__quoted-message-preview.str-chat__message--failed .str-chat__message-error-icon svg {
  width: calc(var(--str-chat__spacing-px) * 18);
  height: calc(var(--str-chat__spacing-px) * 18);
}

.str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:hover .str-chat__message-options,
.str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:hover .str-chat__message-options {
  display: flex;
}
.str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:hover .str-chat__message--other .str-chat__message-inner,
.str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:hover .str-chat__message--other .str-chat__message-inner {
  margin-inline-end: 0;
}
.str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:hover .str-chat__message--me .str-chat__message-inner,
.str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:hover .str-chat__message--me .str-chat__message-inner {
  margin-inline-start: 0;
}

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

.str-chat__message-inner .str-chat__message-options {
  display: none;
}
.str-chat__message-inner .str-chat__message-edit-in-progress.str-chat__message-options {
  display: flex;
}

.str-chat__message--other .str-chat__message-inner {
  margin-inline-end: calc(var(--str-chat__message-options-button-size) * 3);
}

.str-chat__message--me .str-chat__message-inner {
  margin-inline-start: calc(var(--str-chat__message-options-button-size) * 3);
}

.str-chat__li--middle .str-chat__message,
.str-chat__li--top .str-chat__message {
  margin-block-end: var(--str-chat__spacing-0_5);
}
.str-chat__li--middle .str-chat__message .str-chat__message-metadata,
.str-chat__li--top .str-chat__message .str-chat__message-metadata {
  display: none;
}
.str-chat__li--middle .str-chat__message > .str-chat__message-sender-avatar,
.str-chat__li--top .str-chat__message > .str-chat__message-sender-avatar {
  visibility: hidden;
}

.str-chat__li--bottom .str-chat__message,
.str-chat__li--single .str-chat__message {
  margin-block-end: var(--str-chat__spacing-2);
}

.str-chat__date-separator {
  display: flex;
  padding: var(--str-chat__spacing-8);
  align-items: center;
}
.str-chat__date-separator-line {
  flex: 1;
  height: var(--str-chat__spacing-px);
}
.str-chat__date-separator > *:not(:last-child) {
  margin-right: var(--str-chat__spacing-4);
}

.str-chat__message .str-chat__quoted-message-preview {
  margin-block-end: var(--str-chat__spacing-2);
}

.str-chat__message--system {
  width: 100%;
  text-align: center;
}
.str-chat__message--system p {
  margin: 0;
}

.str-chat__quoted-message-preview .str-chat__quoted-message-bubble {
  flex-direction: column;
  align-items: stretch;
  row-gap: var(--str-chat__spacing-1);
  flex-basis: min-content;
}

.str-chat__message-input .str-chat__quoted-message-preview {
  --str-chat__message-max-width: var(--str-chat__quoted-message-inside-message-input-max-width);
}
.str-chat__message-input .str-chat__quoted-message-preview .str-chat__quoted-message-bubble {
  max-height: var(--str-chat__quoted-message-inside-message-input-max-height);
}
.str-chat__message-input .str-chat__quoted-message-preview .str-chat__quoted-message-bubble .str-chat__quoted-message-text {
  max-height: 100%;
  min-height: 0;
}
.str-chat__message-input .str-chat__quoted-message-preview .str-chat__quoted-message-bubble .str-chat__quoted-message-text p {
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.str-chat__message-actions-box {
  overflow: hidden;
}
.str-chat__message-actions-box .str-chat__message-actions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-width: 10rem;
}
.str-chat__message-actions-box .str-chat__message-actions-list .str-chat__message-actions-list-item-button {
  padding: var(--str-chat__spacing-2) var(--str-chat__spacing-4);
  margin: 0;
  cursor: pointer;
  width: 100%;
  text-align: start;
}

.str-chat__message-actions-box:not(.str-chat__message-actions-box-angular) {
  display: none;
  position: absolute;
  z-index: 1;
}
.str-chat__message-actions-box:not(.str-chat__message-actions-box-angular).str-chat__message-actions-box--open {
  display: block;
}
.str-chat__message-actions-box:not(.str-chat__message-actions-box-angular).str-chat__message-actions-box--mine {
  inset-block-end: 100%;
  inset-inline-start: 100%;
}
.str-chat__message-actions-box:not(.str-chat__message-actions-box-angular):not(.str-chat__message-actions-box--mine) {
  inset-block-end: 100%;
  inset-inline-end: 100%;
}

.str-chat__message-edit-in-progress .ngxp__container {
  transform: initial !important;
  will-change: initial !important;
  z-index: initial;
}

.str-chat__message-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--str-chat__spacing-1) var(--str-chat__spacing-2);
  position: relative;
}
.str-chat__message-input .str-chat__quoted-message-preview-header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.str-chat__message-input .str-chat__quoted-message-preview-header .str-chat__quoted-message-reply-to-message {
  width: 100%;
  text-align: center;
}
.str-chat__message-input .str-chat__quoted-message-preview-header .str-chat__quoted-message-remove {
  width: calc(var(--str-chat__spacing-px) * 40);
  height: calc(var(--str-chat__spacing-px) * 40);
  cursor: pointer;
}
.str-chat__message-input .str-chat__dropzone-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 5;
}
.str-chat__message-input .str-chat__dropzone-container p {
  margin: unset;
}
.str-chat__message-input .str-chat__message-input-inner {
  flex-grow: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.str-chat__message-input .str-chat__message-input-inner .str-chat__file-input-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--str-chat__spacing-px) * 45);
  height: calc(var(--str-chat__spacing-px) * 45);
  cursor: pointer;
}
.str-chat__message-input .str-chat__message-input-inner .str-chat__file-input-container .str-chat__file-input {
  display: none;
}
.str-chat__message-input .str-chat__message-input-inner .str-chat__file-input-container .str-chat__file-input-label {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  max-height: 100%;
}
.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container .str-chat__message-textarea-with-emoji-picker {
  width: 100%;
  min-height: 0;
  max-height: 100%;
  display: flex;
  padding: var(--str-chat__spacing-2) var(--str-chat__spacing-4);
  column-gap: var(--str-chat__spacing-2);
}
.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container .str-chat__message-textarea-with-emoji-picker .str-chat__message-textarea {
  width: 100%;
  display: flex;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
}
.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container .str-chat__message-textarea-with-emoji-picker .str-chat__message-textarea-emoji-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--str-chat__spacing-px) * 27);
  height: calc(var(--str-chat__spacing-px) * 27);
  font-size: calc(var(--str-chat__spacing-px) * 27);
  align-self: end;
}
.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container .str-chat__message-textarea-with-emoji-picker .str-chat__message-textarea-emoji-picker .str-chat__message-textarea-emoji-picker-container {
  z-index: 5;
}
.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container .str-chat__message-textarea-with-emoji-picker .str-chat__message-textarea-emoji-picker .str-chat__message-textarea-emoji-picker-container .str-chat__emoji-picker-container {
  display: flex;
}
.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container .str-chat__message-textarea-with-emoji-picker .str-chat__message-textarea-emoji-picker .str-chat__emoji-picker-button {
  padding: unset;
  background: unset;
  border: unset;
  border-radius: var(--str-chat__border-radius-circle);
  display: flex;
  cursor: pointer;
}
.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container .str-chat__message-textarea-with-emoji-picker .str-chat__message-textarea-emoji-picker .str-chat__emoji-picker-button svg {
  width: calc(var(--str-chat__spacing-px) * 24);
  height: calc(var(--str-chat__spacing-px) * 24);
}
.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container .str-chat__message-textarea-with-emoji-picker .str-chat__message-textarea-emoji-picker .str-chat__emoji-picker-button svg path {
  fill: var(--str-chat__message-input-tools-color);
}
.str-chat__message-input .str-chat__message-textarea-angular-host {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.str-chat__message-input .str-chat__message-textarea-react-host {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.str-chat__message-input .str-chat__send-button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  width: calc(var(--str-chat__spacing-px) * 45);
  height: calc(var(--str-chat__spacing-px) * 45);
  min-width: calc(var(--str-chat__spacing-px) * 45);
}
.str-chat__message-input .str-chat__send-button svg {
  width: calc(var(--str-chat__spacing-px) * 32);
  height: calc(var(--str-chat__spacing-px) * 32);
}
.str-chat__message-input .str-chat__message-input-cooldown {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: var(--str-chat__spacing-2);
  margin-block: calc(var(--str-chat__spacing-2) / 2);
  min-width: calc(calc(var(--str-chat__spacing-px) * 45) - var(--str-chat__spacing-2));
  min-height: calc(calc(var(--str-chat__spacing-px) * 45) - var(--str-chat__spacing-2));
}
.str-chat__message-input .str-chat__message-input-not-allowed {
  align-self: center;
  padding: var(--str-chat__spacing-3);
}
.str-chat__message-input .str-chat__quoted-message-preview {
  padding: var(--str-chat__spacing-2);
}

.str-chat__message-input-angular-host {
  max-height: 50%;
}

.str-chat-angular__message-input {
  height: 100%;
  max-height: 100%;
}

.str-chat-angular__message-input-inner {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  flex-grow: initial;
}

[dir=rtl] .str-chat__send-button svg {
  transform: scale(-1, 1);
}

.str-chat__main-panel-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  align-items: center;
}

.str-chat__list {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  width: 100%;
  height: 100%;
  max-height: 100%;
}
.str-chat__list .str-chat__message-list-scroll {
  padding: 0 var(--str-chat__spacing-2);
}
.str-chat__list .str-chat__message-list-scroll .str-chat__li {
  margin-inline: calc(-1 * var(--str-chat__spacing-2));
  padding-inline: var(--str-chat__spacing-2);
}
.str-chat__list .str-chat__message-list-scroll .str-chat__parent-message-li {
  margin-inline: calc(-1 * var(--str-chat__spacing-2));
}
@media only screen and (min-device-width: 768px) {
  .str-chat__list .str-chat__message-list-scroll {
    padding: 0 min(var(--str-chat__spacing-10), 4%);
  }
  .str-chat__list .str-chat__message-list-scroll .str-chat__li {
    margin-inline: calc(-1 * min(var(--str-chat__spacing-10), 4%));
    padding-inline: min(var(--str-chat__spacing-10), 4%);
  }
  .str-chat__list .str-chat__message-list-scroll .str-chat__parent-message-li {
    margin-inline: calc(-1 * min(var(--str-chat__spacing-10), 4%) - 2px);
  }
}
.str-chat__list .str-chat__message-list-scroll .str-chat__ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.str-chat__list .str-chat__parent-message-li {
  padding-block-end: var(--str-chat__spacing-4);
  margin-block-end: var(--str-chat__spacing-4);
}
.str-chat__list .str-chat__parent-message-li .str-chat__thread-start {
  text-align: start;
  padding-top: var(--str-chat__spacing-3);
}

.str-chat__jump-to-latest-message {
  position: absolute;
  inset-block-end: var(--str-chat__spacing-4);
  inset-inline-end: var(--str-chat__spacing-2);
  z-index: 2;
}
.str-chat__jump-to-latest-message .str-chat__jump-to-latest-unread-count {
  position: absolute;
  padding: var(--str-chat__spacing-0_5) var(--str-chat__spacing-2);
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
}

.str-chat__thread .str-chat__main-panel-inner {
  height: auto;
}

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

.str-chat__virtual-list {
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  flex: 1;
  -webkit-overflow-scrolling: touch; /* enable smooth scrolling on ios */
  margin: 0;
  width: 100%;
  height: 100%;
}
.str-chat__virtual-list .str-chat__message-list-scroll {
  overscroll-behavior: none;
}
.str-chat__virtual-list .str-chat__message-list-scroll > div {
  padding: 0 var(--str-chat__spacing-2);
}
.str-chat__virtual-list .str-chat__message-list-scroll > div .str-chat__li {
  margin-inline: calc(-1 * var(--str-chat__spacing-2));
  padding-inline: var(--str-chat__spacing-2);
}
.str-chat__virtual-list .str-chat__message-list-scroll > div .str-chat__parent-message-li {
  margin-inline: calc(-1 * var(--str-chat__spacing-2));
}
@media only screen and (min-device-width: 768px) {
  .str-chat__virtual-list .str-chat__message-list-scroll > div {
    padding: 0 min(var(--str-chat__spacing-10), 4%);
  }
  .str-chat__virtual-list .str-chat__message-list-scroll > div .str-chat__li {
    margin-inline: calc(-1 * min(var(--str-chat__spacing-10), 4%));
    padding-inline: min(var(--str-chat__spacing-10), 4%);
  }
  .str-chat__virtual-list .str-chat__message-list-scroll > div .str-chat__parent-message-li {
    margin-inline: calc(-1 * min(var(--str-chat__spacing-10), 4%) - 2px);
  }
}
.str-chat__virtual-list .str-chat__parent-message-li {
  padding-block-end: var(--str-chat__spacing-4);
}
.str-chat__virtual-list .str-chat__parent-message-li .str-chat__thread-start {
  text-align: start;
  padding-top: var(--str-chat__spacing-3);
}
.str-chat__virtual-list__loading {
  display: flex;
  padding-top: var(--str-chat__spacing-2);
  justify-content: center;
  width: 100%;
  position: absolute;
}
.str-chat__virtual-list p {
  margin: 0 !important;
}
.str-chat__virtual-list p a {
  white-space: pre-line;
  overflow: hidden;
  word-wrap: break-word;
}
.str-chat__virtual-list .str-chat__message {
  margin-block-end: 0 !important;
}
.str-chat__virtual-list .str-chat__virtual-list-message-wrapper {
  padding-block-end: var(--str-chat__spacing-0_5);
}

.str-chat__thread--virtualized .str-chat__main-panel-inner {
  height: 100%;
}
.str-chat__thread--virtualized .str-chat__main-panel-inner .str-chat__virtual-list-message-wrapper:first-of-type {
  padding-block-start: var(--str-chat__spacing-4);
}

.str-chat__message-reactions-container {
  display: flex;
}
.str-chat__message-reactions-container .str-chat__message-reactions {
  list-style: none;
  display: flex;
  margin-block-start: var(--str-chat__spacing-0_5);
  margin-block-end: var(--str-chat__spacing-0_5);
  column-gap: var(--str-chat__spacing-0_5);
  width: -moz-fit-content;
  width: fit-content;
  padding: 0;
  position: relative;
}
.str-chat__message-reactions-container .str-chat__message-reactions .str-chat__message-reaction {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--str-chat__spacing-1_5);
  position: relative;
}
.str-chat__message-reactions-container .str-chat__message-reactions .str-chat__message-reaction button {
  outline: none;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.str-chat__message-reactions-container .str-chat__message-reactions .str-chat__message-reaction .str-chat__message-reaction-emoji {
  height: calc(var(--str-chat__spacing-px) * 13);
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.str-chat__message-reactions-container .str-chat__message-reactions .str-chat__reaction-list--counter,
.str-chat__message-reactions-container .str-chat__message-reactions .str-chat__simple-reactions-list-item--last-number {
  display: none;
}

.str-chat__message--me .str-chat__message-reactions-container {
  justify-content: flex-end;
}

.str-chat__message--other .str-chat__message-reactions-container {
  justify-content: flex-start;
}

.str-chat__message-reaction-selector {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  inset-block-end: 100%;
}
.str-chat__message-reaction-selector .str-chat__message-reactions-options {
  list-style: none;
  display: flex;
  margin-block-end: var(--str-chat__spacing-0_5);
  width: -moz-fit-content;
  width: fit-content;
  column-gap: var(--str-chat__spacing-1);
  padding: var(--str-chat__spacing-2);
}
.str-chat__message-reaction-selector .str-chat__message-reactions-options .str-chat__message-reactions-option {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: calc(var(--str-chat__spacing-px) * 40);
  height: calc(var(--str-chat__spacing-px) * 40);
}
.str-chat__message-reaction-selector .str-chat__message-reactions-options .str-chat__message-reactions-option .str-chat__message-reaction-emoji {
  height: calc(var(--str-chat__spacing-px) * 20);
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.str-chat__message-reaction-selector .str-chat__message-reactions-options .str-chat__message-reactions-last-user {
  display: none;
}
.str-chat__message-reaction-selector .str-chat__message-reactions-options .str-chat__message-reactions-list-item__count {
  display: none;
}

.str-chat__message--me .str-chat__message-reaction-selector {
  inset-inline-end: 0;
}

.str-chat__message--other .str-chat__message-reaction-selector {
  inset-inline-start: 0;
}

.str-chat__modal--open {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}
.str-chat__modal--open button.str-chat__modal__close-button {
  padding: unset;
  background: unset;
  border: unset;
  border-radius: var(--str-chat__border-radius-circle);
  margin: var(--str-chat__spacing-2);
  cursor: pointer;
}
.str-chat__modal--open .str-chat__modal__close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--str-chat__spacing-2);
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  cursor: pointer;
}
.str-chat__modal--open .str-chat__modal__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--str-chat__spacing-8) var(--str-chat__spacing-4);
  width: 40%;
  min-width: 0;
  min-height: 0;
}

.str-chat__modal--close {
  display: none;
}

.str-chat__message-notification {
  display: block;
  position: absolute;
  align-self: center;
  padding: var(--str-chat__spacing-1) var(--str-chat__spacing-2);
  bottom: calc(var(--str-chat__spacing-px) * 10);
  z-index: 101;
}

.str-chat__list-notifications {
  position: relative;
}

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

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

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

.str-chat__thread-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.str-chat__thread-container .str-chat__thread-header {
  display: flex;
  padding: var(--str-chat__spacing-2);
  column-gap: var(--str-chat__spacing-4);
  align-items: center;
}
.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-details {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  overflow-x: hidden;
  flex: 1;
  row-gap: var(--str-chat__spacing-1_5);
}
.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-details .str-chat__thread-header-name,
.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-details .str-chat__thread-header-reply-count,
.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-details .str-chat__thread-header-channel-name,
.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-details .str-chat__thread-header-subtitle,
.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-details .str-chat__thread-header-title {
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  overflow-x: clip;
  text-overflow: ellipsis;
}
.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-details .str-chat__thread-header-subtitle {
  overflow-y: hidden;
}
.str-chat__thread-container .str-chat__thread-header .str-chat__close-thread-button {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  width: calc(var(--str-chat__spacing-px) * 40);
  height: calc(var(--str-chat__spacing-px) * 40);
  cursor: pointer;
  line-height: calc(var(--str-chat__spacing-px) * 21);
  font-size: calc(var(--str-chat__spacing-px) * 21);
}
.str-chat__thread-container .str-chat__thread-header .str-chat__close-thread-button svg {
  height: calc(var(--str-chat__spacing-px) * 21);
  width: calc(var(--str-chat__spacing-px) * 21);
}
.str-chat__thread-container .str-chat__thread-list {
  height: auto;
}

.str-chat__main-panel--hideOnThread + .str-chat__thread-container {
  flex: 1;
}

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

.str-chat__tooltip {
  overflow-y: hidden;
  display: flex;
  padding: var(--str-chat__spacing-2);
  z-index: 1;
  max-width: calc(var(--str-chat__spacing-px) * 150);
  width: max-content;
}

.str-chat__typing-indicator-react-host {
  position: static !important;
}

.str-chat__virtual-list .str-chat__typing-indicator {
  position: static;
}

.str-chat__typing-indicator {
  padding: var(--str-chat__spacing-1_5);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  column-gap: var(--str-chat__spacing-1);
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
}
.str-chat__typing-indicator .str-chat__typing-indicator__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: var(--str-chat__spacing-0_5);
}
.str-chat__typing-indicator .str-chat__typing-indicator__dots .str-chat__typing-indicator__dot {
  width: calc(var(--str-chat__spacing-px) * 4);
  height: calc(var(--str-chat__spacing-px) * 4);
}

.str-chat {
  --str-chat__blue950: #001333;
  --str-chat__blue900: #00163d;
  --str-chat__blue800: #002666;
  --str-chat__blue700: #003999;
  --str-chat__blue600: #004ccc;
  --str-chat__blue500: #005fff;
  --str-chat__blue400: #337eff;
  --str-chat__blue300: #669fff;
  --str-chat__blue200: #ccdfff;
  --str-chat__blue100: #e0f0ff;
  --str-chat__blue50: #ebf5ff;
  --str-chat__grey950: #080707;
  --str-chat__grey900: #17191c;
  --str-chat__grey800: #1c1e22;
  --str-chat__grey700: #272a30;
  --str-chat__grey600: #4c525c;
  --str-chat__grey500: #72767e;
  --str-chat__grey400: #b4b7bb;
  --str-chat__grey300: #dbdde1;
  --str-chat__grey200: #e9eaed;
  --str-chat__grey100: #f4f4f5;
  --str-chat__grey50: #ffffff;
  --str-chat__red900: #330003;
  --str-chat__red800: #660006;
  --str-chat__red700: #990008;
  --str-chat__red600: #cc000b;
  --str-chat__red500: #ff000e;
  --str-chat__red400: #ff3742;
  --str-chat__red300: #ff666e;
  --str-chat__red200: #ff999f;
  --str-chat__red100: #ffe5e7;
  --str-chat__green900: #062d16;
  --str-chat__green800: #0d592c;
  --str-chat__green700: #138643;
  --str-chat__green600: #19b359;
  --str-chat__green500: #20e070;
  --str-chat__green400: #4ce68c;
  --str-chat__green300: #79eca9;
  --str-chat__green200: #a6f2c6;
  --str-chat__green100: #e9f1ff;
  --str-chat__yellow900: #332500;
  --str-chat__yellow800: #664900;
  --str-chat__yellow700: #996e00;
  --str-chat__yellow600: #cc9200;
  --str-chat__yellow500: #ffb700;
  --str-chat__yellow400: #ffd466;
  --str-chat__yellow300: #ffe299;
  --str-chat__yellow200: #fff1cc;
  --str-chat__yellow100: #fff8e5;
}

.str-chat {
  /* Border radius used for slightly rounded elements */
  --str-chat__border-radius-xs: 8px;
  /* Border radius used for slightly rounded elements */
  --str-chat__border-radius-sm: 14px;
  /* Border radius used for rounded elements */
  --str-chat__border-radius-md: 18px;
  /* Border radius used for rounded elements */
  --str-chat__border-radius-lg: 20px;
  /* Border radius used for circular elements */
  --str-chat__border-radius-circle: 999px;
  /* The font used in the chat, by default, we use [preinstalled OS fonts](https://systemfontstack.com/) */
  --str-chat__font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, Helvetica Neue, sans-serif;
  /* The font used for caption texts */
  --str-chat__caption-text: 0.75rem/1rem var(--str-chat__font-family);
  /* The font used for caption texts with emphasize */
  --str-chat__caption-medium-text: 500 0.75rem/1rem var(--str-chat__font-family);
  /* The font used for body texts */
  --str-chat__body-text: 0.875rem/1rem var(--str-chat__font-family);
  /* The font used for body texts with emphasize */
  --str-chat__body-medium-text: 500 0.875rem/1rem var(--str-chat__font-family);
  /* The font used for body texts */
  --str-chat__body2-text: 0.9375rem/1rem var(--str-chat__font-family);
  /* The font used for body texts with emphasize */
  --str-chat__body2-medium-text: 500 0.9375rem/1rem var(--str-chat__font-family);
  /* The font used for subtitle texts */
  --str-chat__subtitle-text: 1rem/1.25rem var(--str-chat__font-family);
  /* The font used for subtitle texts with emphasize */
  --str-chat__subtitle-medium-text: 500 1rem/1.25rem var(--str-chat__font-family);
  /* The font used for subtitle texts */
  --str-chat__subtitle2-text: 1.25rem/1.5rem var(--str-chat__font-family);
  /* The font used for subtitle texts with emphasize */
  --str-chat__subtitle2-medium-text: 500 1.25rem/1.5rem var(--str-chat__font-family);
  /* The font used for headline texts */
  --str-chat__headline-text: 1.5rem/1.5rem var(--str-chat__font-family);
  /* The font used for headline texts */
  --str-chat__headline2-text: 1.8rem/1.8rem var(--str-chat__font-family);
}

.str-chat,
.str-chat__theme-light {
  /* Used for emphasis, brands can inject their main color using this variable */
  --str-chat__primary-color: var(--str-chat__blue500);
  /* Used for emphasised overlays - color of --str-chat__primary-color with alpha channel */
  --str-chat__primary-overlay-color: rgba(0, 95, 255, 0.6);
  /* Used for emphasis, brands can inject their main color using this variable, it has less emphasis than primary color */
  --str-chat__primary-color-low-emphasis: var(--str-chat__blue300);
  /* Used to indicate that a UI element with primary color is in an active state */
  --str-chat__active-primary-color: var(--str-chat__blue600);
  /* If the primary color is used as a background, text/icons are displayed in this color */
  --str-chat__on-primary-color: var(--str-chat__grey50);
  /* Used as a background color for the main chat UI components */
  --str-chat__background-color: var(--str-chat__grey50);
  /* Used as a background color for the main chat UI components */
  --str-chat__secondary-background-color: var(--str-chat__grey50);
  /* Used as a background color to give emphasis, but less vibrant than the primary color */
  --str-chat__primary-surface-color: var(--str-chat__blue100);
  /* Used as a background color to give emphasis, but less vibrant than the primary surface color */
  --str-chat__primary-surface-color-low-emphasis: var(--str-chat__blue50);
  /* A neutral color used to give emphasis to different surfaces */
  --str-chat__surface-color: var(--str-chat__grey300);
  /* A neutral color used to give emphasis to different surfaces */
  --str-chat__secondary-surface-color: var(--str-chat__grey200);
  /* A neutral color used to give emphasis to different surfaces */
  --str-chat__tertiary-surface-color: var(--str-chat__grey100);
  /* The main color used for texts/icons */
  --str-chat__text-color: var(--str-chat__grey950);
  /* Used for texts/icons that need less emphasis */
  --str-chat__text-low-emphasis-color: var(--str-chat__grey500);
  /* Used for displaying disabled UI elements (typically buttons) */
  --str-chat__disabled-color: var(--str-chat__grey400);
  /* Used for text/icon colors if disabled color is used as a background color */
  --str-chat__on-disabled-color: var(--str-chat__grey50);
  /* Used for error messages, and destructive actions */
  --str-chat__danger-color: var(--str-chat__red400);
  /* The background color used to highlight a message when jumping to a message. Only available in React SDK. */
  --str-chat__message-highlight-color: var(--str-chat__yellow100);
  /* Used for displaying the unread badge */
  --str-chat__unread-badge-color: var(--str-chat__red400);
  /* Used for text/icon colors if unread badge color is used as a background color */
  --str-chat__on-unread-badge-color: var(--str-chat__grey50);
  /* The background color used for overlays */
  --str-chat__overlay-color: rgba(252, 252, 252, 0.9);
  /* The background color used for subtle overlays */
  --str-chat__secondary-overlay-color: rgba(0, 0, 0, 0.2);
  /* The text/icon color used on subtle overlays */
  --str-chat__secondary-overlay-text-color: var(--str-chat__grey50);
  /* The background color used for opaque surfaces */
  --str-chat__opaque-surface-background-color: rgba(0, 0, 0, 0.8);
  /* The text color used on opaque surfaces */
  --str-chat__opaque-surface-text-color: var(--str-chat__grey50);
  /* If a component has a box shadow applied to it, this will be the color used for the shadow */
  --str-chat__box-shadow-color: rgba(0, 0, 0, 0.18);
  /* 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;
  -webkit-appearance: none;
          appearance: none;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  outline: none;
  position: absolute;
  z-index: 4;
  filter: drop-shadow(0 2px 2px #1a1a1a);
}
@media (hover: hover) and (pointer: fine) {
  .image-gallery-icon:hover {
    color: #337ab7;
  }
  .image-gallery-icon:hover .image-gallery-svg {
    transform: scale(1.1);
  }
}
.image-gallery-icon:focus {
  outline: 2px solid #337ab7;
}

.image-gallery-using-mouse .image-gallery-icon:focus {
  outline: none;
}

.image-gallery-fullscreen-button {
  bottom: 0;
  padding: 20px;
}
.image-gallery-fullscreen-button .image-gallery-svg {
  height: 28px;
  width: 28px;
}
@media (max-width: 768px) {
  .image-gallery-fullscreen-button {
    padding: 15px;
  }
  .image-gallery-fullscreen-button .image-gallery-svg {
    height: 24px;
    width: 24px;
  }
}
@media (max-width: 480px) {
  .image-gallery-fullscreen-button {
    padding: 10px;
  }
  .image-gallery-fullscreen-button .image-gallery-svg {
    height: 16px;
    width: 16px;
  }
}

.image-gallery-fullscreen-button {
  right: 0;
}

.image-gallery-left-nav,
.image-gallery-right-nav {
  padding: 50px 10px;
  top: 50%;
  transform: translateY(-50%);
}
.image-gallery-left-nav .image-gallery-svg,
.image-gallery-right-nav .image-gallery-svg {
  height: 120px;
  width: 60px;
}
@media (max-width: 768px) {
  .image-gallery-left-nav .image-gallery-svg,
  .image-gallery-right-nav .image-gallery-svg {
    height: 72px;
    width: 36px;
  }
}
@media (max-width: 480px) {
  .image-gallery-left-nav .image-gallery-svg,
  .image-gallery-right-nav .image-gallery-svg {
    height: 48px;
    width: 24px;
  }
}
.image-gallery-left-nav[disabled],
.image-gallery-right-nav[disabled] {
  cursor: disabled;
  opacity: 0.6;
  pointer-events: none;
}

.image-gallery-left-nav {
  left: 0;
}

.image-gallery-right-nav {
  right: 0;
}

.image-gallery {
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  position: relative;
}
.image-gallery.fullscreen-modal {
  background: #000;
  bottom: 0;
  height: 100%;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 5;
}
.image-gallery.fullscreen-modal .image-gallery-content {
  top: 50%;
  transform: translateY(-50%);
}

.image-gallery-content {
  position: relative;
  line-height: 0;
  top: 0;
}
.image-gallery-content.fullscreen {
  background: #000;
}
.image-gallery-content.fullscreen .image-gallery-slide .image-gallery-image {
  max-width: 100%;
}
.image-gallery-content .image-gallery-slide .image-gallery-image {
  max-height: calc(100vh - 80px);
  max-width: unset;
  object-fit: contain;
}
.image-gallery-content.left .image-gallery-slide .image-gallery-image, .image-gallery-content.right .image-gallery-slide .image-gallery-image, .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);
}
.str-chat__avatar .str-chat__avatar-fallback {
  background: var(--str-chat__avatar-background-color);
  color: var(--str-chat__avatar-color);
  box-shadow: var(--str-chat__avatar-box-shadow);
  border-radius: var(--str-chat__avatar-border-radius);
  border-block-start: var(--str-chat__avatar-border-block-start);
  border-block-end: var(--str-chat__avatar-border-block-end);
  border-inline-start: var(--str-chat__avatar-border-inline-start);
  border-inline-end: var(--str-chat__avatar-border-inline-end);
  text-transform: uppercase;
}
.str-chat__avatar .str-chat__avatar--online-indicator {
  background-color: var(--str-chat__avatar-online-indicator-color);
  border-radius: var(--str-chat__avatar-online-indicator-border-radius);
}

.str-chat__loading-channels-avatar {
  border-radius: var(--str-chat__avatar-border-radius);
}

.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__attachment-list-border-radius: 0;
  /* The text/icon color of the component */
  --str-chat__attachment-list-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__attachment-list-background-color: transparent;
  /* Top border of the component */
  --str-chat__attachment-list-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__attachment-list-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__attachment-list-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__attachment-list-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__attachment-list-box-shadow: none;
  /* The border radius used for the borders of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
  --str-chat__image-attachment-border-radius: calc(
    var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
  );
  /* The text/icon color of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
  --str-chat__image-attachment-color: var(--str-chat__text-color);
  /* The background color of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
  --str-chat__image-attachment-background-color: var(--str-chat__text-low-emphasis-color);
  /* Top border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
  --str-chat__image-attachment-border-block-start: none;
  /* Bottom border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
  --str-chat__image-attachment-border-block-end: none;
  /* Left (right in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
  --str-chat__image-attachment-border-inline-start: none;
  /* Right (left in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
  --str-chat__image-attachment-border-inline-end: none;
  /* Box shadow applied to image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
  --str-chat__image-attachment-box-shadow: none;
  /* The border radius used for the borders of image gallery attachments */
  --str-chat__image-gallery-attachment-border-radius: calc(
    var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
  );
  /* The text/icon color of image gallery attachments */
  --str-chat__image-gallery-attachment-color: var(--str-chat__text-color);
  /* The background color of image gallery attachments */
  --str-chat__image-gallery-attachment-background-color: transparent;
  /* Top border of image gallery attachments */
  --str-chat__image-gallery-attachment-border-block-start: none;
  /* Bottom border of image gallery attachments */
  --str-chat__image-gallery-attachment-border-block-end: none;
  /* Left (right in RTL layout) border of image gallery attachments */
  --str-chat__image-gallery-attachment-border-inline-start: none;
  /* Right (left in RTL layout) border of image gallery attachments */
  --str-chat__image-gallery-attachment-border-inline-end: none;
  /* Box shadow applied to image gallery attachments */
  --str-chat__image-gallery-attachment-box-shadow: none;
  /* Overlay color applied to image gallery attachments */
  --str-chat__image-gallery-attachment-overlay: var(--str-chat__secondary-overlay-color);
  /* Text colors used on overlay applied to image gallery attachments */
  --str-chat__image-gallery-attachment-overlay-text-color: var(
    --str-chat__secondary-overlay-text-color
  );
  /* The border radius used for the borders of card attachments */
  --str-chat__card-attachment-border-radius: 0;
  /* The text/icon color of card attachments */
  --str-chat__card-attachment-color: var(--str-chat__text-color);
  /* The text color of links inside card attachments */
  --str-chat__card-attachment-link-color: var(--str-chat__primary-color);
  /* The background color of card attachments */
  --str-chat__card-attachment-background-color: transparent;
  /* Top border of card attachments */
  --str-chat__card-attachment-border-block-start: none;
  /* Bottom border of card attachments */
  --str-chat__card-attachment-border-block-end: none;
  /* Left (right in RTL layout) border of card attachments */
  --str-chat__card-attachment-border-inline-start: none;
  /* Right (left in RTL layout) border of card attachments */
  --str-chat__card-attachment-border-inline-end: none;
  /* Box shadow applied to card attachments */
  --str-chat__card-attachment-box-shadow: none;
  /* The border radius used for the borders of file attachments */
  --str-chat__file-attachment-border-radius: calc(
    var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
  );
  /* The text/icon color of file attachments */
  --str-chat__file-attachment-color: var(--str-chat__text-color);
  /* The text/icon color of file attachments for low emphasis texts (for example file size) */
  --str-chat__file-attachment-secondary-color: var(--str-chat__text-low-emphasis-color);
  /* The background color of file attachments */
  --str-chat__file-attachment-background-color: var(--str-chat__secondary-background-color);
  /* Top border of file attachments */
  --str-chat__file-attachment-border-block-start: none;
  /* Bottom border of file attachments */
  --str-chat__file-attachment-border-block-end: none;
  /* Left (right in RTL layout) border of file attachments */
  --str-chat__file-attachment-border-inline-start: none;
  /* Right (left in RTL layout) border of file attachments */
  --str-chat__file-attachment-border-inline-end: none;
  /* Box shadow applied to file attachments */
  --str-chat__file-attachment-box-shadow: none;
  /* Border radius applied audio widget */
  --str-chat__audio-attachment-widget-border-radius: calc(
    var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
  );
  /* Text color used in audio widget */
  --str-chat__audio-attachment-widget-color: var(--str-chat__text-color);
  /* Border radius applied audio widget */
  --str-chat__audio-attachment-widget-secondary-color: var(--str-chat__text-low-emphasis-color);
  /* The text/icon color for low emphasis texts (for example file size) in audio widget */
  --str-chat__audio-attachment-widget-background-color: var(--str-chat__secondary-background-color);
  /* Top border of audio widget */
  --str-chat__audio-attachment-widget-border-block-start: none;
  /* Bottom border of audio widget */
  --str-chat__audio-attachment-widget-border-block-end: none;
  /* Left (right in RTL layout) border of audio widget */
  --str-chat__audio-attachment-widget-border-inline-start: none;
  /* Right (left in RTL layout) border of audio widget */
  --str-chat__audio-attachment-widget-border-inline-end: none;
  /* Box shadow applied to audio widget */
  --str-chat__audio-attachment-widget-box-shadow: none;
  /* Border radius applied to the play / pause button of audio widget */
  --str-chat__audio-attachment-controls-button-border-radius: var(--str-chat__border-radius-circle);
  /* Text color applied to audio widget's play / pause button */
  --str-chat__audio-attachment-controls-button-color: var(--str-chat__text-color);
  /* Background color applied to audio widget's play / pause button */
  --str-chat__audio-attachment-controls-button-background-color: var(
    --str-chat__secondary-background-color
  );
  /* Background color applied to audio widget's play / pause button when in pressed (active) state */
  --str-chat__audio-attachment-controls-button-pressed-background-color: var(
    --str-chat__surface-color
  );
  /* Top border of audio widget's play / pause button */
  --str-chat__audio-attachment-controls-button-border-block-start: none;
  /* Bottom border of audio widget's play / pause button */
  --str-chat__audio-attachment-controls-button-border-block-end: none;
  /* Left (right in RTL layout) border of audio widget's play / pause button */
  --str-chat__audio-attachment-controls-button-border-inline-start: none;
  /* Right (left in RTL layout) border of audio widget's play / pause button */
  --str-chat__audio-attachment-controls-button-border-inline-end: none;
  /* Box shadow applied to audio widget's play / pause button */
  --str-chat__audio-attachment-controls-button-box-shadow: var(--str-chat__circle-fab-box-shadow);
  /* The border radius used for attachment actions */
  --str-chat__attachment-actions-border-radius: 0;
  /* The text/icon color of attachment actions */
  --str-chat__attachment-actions-color: var(--str-chat__text-color);
  /* The background color of attachment actions */
  --str-chat__attachment-actions-background-color: transparent;
  /* Top border of attachment actions */
  --str-chat__attachment-actions-border-block-start: none;
  /* Bottom border of attachment actions */
  --str-chat__attachment-actions-border-block-end: none;
  /* Left (right in RTL layout) border of attachment actions */
  --str-chat__attachment-actions-border-inline-start: none;
  /* Right (left in RTL layout) border of attachment actions */
  --str-chat__attachment-actions-border-inline-end: none;
  /* Box shadow applied to attachment actions */
  --str-chat__attachment-actions-box-shadow: none;
  /* The border radius used for an attachment action */
  --str-chat__attachment-action-border-radius: 0;
  /* The text/icon color of an attachment action */
  --str-chat__attachment-action-color: var(--str-chat__text-low-emphasis-color);
  /* The background color of an attachment action */
  --str-chat__attachment-action-background-color: var(--str-chat__secondary-background-color);
  /* Top border of an attachment action */
  --str-chat__attachment-action-border-block-start: var(--str-chat__surface-color) 1px solid;
  /* Bottom border of an attachment action */
  --str-chat__attachment-action-border-block-end: var(--str-chat__surface-color) 1px solid;
  /* Left (right in RTL layout) border of an attachment action */
  --str-chat__attachment-action-border-inline-start: var(--str-chat__surface-color) 1px solid;
  /* Right (left in RTL layout) border of an attachment action */
  --str-chat__attachment-action-border-inline-end: var(--str-chat__surface-color) 1px solid;
  /* Box shadow applied to an attachment action */
  --str-chat__attachment-action-box-shadow: none;
  /* The text/icon color of an attachment action while in pressed state */
  --str-chat__attachment-action-active-color: var(--str-chat__primary-color);
}

.str-chat__attachment-list {
  background: var(--str-chat__attachment-list-background-color);
  color: var(--str-chat__attachment-list-color);
  box-shadow: var(--str-chat__attachment-list-box-shadow);
  border-radius: var(--str-chat__attachment-list-border-radius);
  border-block-start: var(--str-chat__attachment-list-border-block-start);
  border-block-end: var(--str-chat__attachment-list-border-block-end);
  border-inline-start: var(--str-chat__attachment-list-border-inline-start);
  border-inline-end: var(--str-chat__attachment-list-border-inline-end);
}
.str-chat__attachment-list .str-chat__message-attachment--image,
.str-chat__attachment-list .str-chat__message-attachment-card--header,
.str-chat__attachment-list .str-chat__message-attachment--video {
  background: var(--str-chat__image-attachment-background-color);
  color: var(--str-chat__image-attachment-color);
  box-shadow: var(--str-chat__image-attachment-box-shadow);
  border-radius: var(--str-chat__image-attachment-border-radius);
  border-block-start: var(--str-chat__image-attachment-border-block-start);
  border-block-end: var(--str-chat__image-attachment-border-block-end);
  border-inline-start: var(--str-chat__image-attachment-border-inline-start);
  border-inline-end: var(--str-chat__image-attachment-border-inline-end);
}
.str-chat__attachment-list .str-chat__gallery {
  background: var(--str-chat__image-gallery-attachment-background-color);
  color: var(--str-chat__image-gallery-attachment-color);
  box-shadow: var(--str-chat__image-gallery-attachment-box-shadow);
  border-radius: var(--str-chat__image-gallery-attachment-border-radius);
  border-block-start: var(--str-chat__image-gallery-attachment-border-block-start);
  border-block-end: var(--str-chat__image-gallery-attachment-border-block-end);
  border-inline-start: var(--str-chat__image-gallery-attachment-border-inline-start);
  border-inline-end: var(--str-chat__image-gallery-attachment-border-inline-end);
}
.str-chat__attachment-list .str-chat__gallery .str-chat__gallery-image {
  background-color: transparent;
  border: 0;
}
.str-chat__attachment-list .str-chat__gallery .str-chat__gallery-placeholder {
  color: var(--str-chat__image-gallery-attachment-overlay-text-color);
  display: flex;
  border: none;
  font: var(--str-chat__headline2-text);
}
.str-chat__attachment-list .str-chat__gallery .str-chat__gallery-placeholder::after {
  background-color: var(--str-chat__image-gallery-attachment-overlay);
}
.str-chat__attachment-list .str-chat__message-attachment--svg-image {
  background-image: repeating-conic-gradient(#d4d5d7 0% 25%, #f4f4f4 0% 50%);
  background-size: 24px 24px;
}
.str-chat__attachment-list .str-chat__message-attachment-file--item {
  background: var(--str-chat__file-attachment-background-color);
  color: var(--str-chat__file-attachment-color);
  box-shadow: var(--str-chat__file-attachment-box-shadow);
  border-radius: var(--str-chat__file-attachment-border-radius);
  border-block-start: var(--str-chat__file-attachment-border-block-start);
  border-block-end: var(--str-chat__file-attachment-border-block-end);
  border-inline-start: var(--str-chat__file-attachment-border-inline-start);
  border-inline-end: var(--str-chat__file-attachment-border-inline-end);
}
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-name,
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--title,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-name,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--title {
  font: var(--str-chat__subtitle-medium-text);
}
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-size,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-size {
  color: var(--str-chat__file-attachment-secondary-color);
  font: var(--str-chat__body-text);
}
.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-download-icon svg path,
.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-download-icon svg path {
  fill: var(--str-chat__file-attachment-color);
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget {
  background: var(--str-chat__audio-attachment-widget-background-color);
  color: var(--str-chat__audio-attachment-widget-color);
  box-shadow: var(--str-chat__audio-attachment-widget-box-shadow);
  border-radius: var(--str-chat__audio-attachment-widget-border-radius);
  border-block-start: var(--str-chat__audio-attachment-widget-border-block-start);
  border-block-end: var(--str-chat__audio-attachment-widget-border-block-end);
  border-inline-start: var(--str-chat__audio-attachment-widget-border-inline-start);
  border-inline-end: var(--str-chat__audio-attachment-widget-border-inline-end);
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget--progress-track {
  background-color: var(--str-chat__disabled-color);
  border-radius: calc(var(--str-chat__spacing-px) * 5);
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget--progress-track .str-chat__message-attachment-audio-widget--progress-indicator {
  background-color: var(--str-chat__primary-color);
  border-radius: inherit;
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget--play-button {
  background: var(--str-chat__audio-attachment-controls-button-background-color);
  color: var(--str-chat__audio-attachment-controls-button-color);
  box-shadow: var(--str-chat__audio-attachment-controls-button-box-shadow);
  border-radius: var(--str-chat__audio-attachment-controls-button-border-radius);
  border-block-start: var(--str-chat__audio-attachment-controls-button-border-block-start);
  border-block-end: var(--str-chat__audio-attachment-controls-button-border-block-end);
  border-inline-start: var(--str-chat__audio-attachment-controls-button-border-inline-start);
  border-inline-end: var(--str-chat__audio-attachment-controls-button-border-inline-end);
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget--play-button svg path {
  fill: var(--str-chat__audio-attachment-controls-button-color);
}
.str-chat__attachment-list .str-chat__message-attachment-audio-widget--play-button:active {
  background-color: var(--str-chat__audio-attachment-controls-button-pressed-background-color);
}
.str-chat__attachment-list .str-chat__message-attachment--card {
  background: var(--str-chat__card-attachment-background-color);
  color: var(--str-chat__card-attachment-color);
  box-shadow: var(--str-chat__card-attachment-box-shadow);
  border-radius: var(--str-chat__card-attachment-border-radius);
  border-block-start: var(--str-chat__card-attachment-border-block-start);
  border-block-end: var(--str-chat__card-attachment-border-block-end);
  border-inline-start: var(--str-chat__card-attachment-border-inline-start);
  border-inline-end: var(--str-chat__card-attachment-border-inline-end);
  font: var(--str-chat__body-text);
}
.str-chat__attachment-list .str-chat__message-attachment--card .str-chat__message-attachment-card--source-link {
  font: var(--str-chat__body-medium-text);
}
.str-chat__attachment-list .str-chat__message-attachment--card .str-chat__message-attachment-card--title {
  font: var(--str-chat__body-medium-text);
}
.str-chat__attachment-list .str-chat__message-attachment-card--audio img {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.str-chat__attachment-list .str-chat__message-attachment-card--audio .str-chat__message-attachment-card--header .str-chat__message-attachment-card--source-link {
  background-color: var(--str-chat__audio-attachment-widget-background-color);
}
.str-chat__attachment-list .str-chat__message-attachment-card--audio .str-chat__message-attachment-card-audio-widget {
  background-color: var(--str-chat__audio-attachment-widget-background-color);
  border-radius: 0 0 calc(var(--str-chat__spacing-px) * 14) calc(var(--str-chat__spacing-px) * 14);
}
.str-chat__attachment-list .str-chat__message-attachment-card--audio .str-chat__message-attachment-card-audio-widget .str-chat__message-attachment-audio-widget--title {
  color: var(--str-chat__text-color);
  font: var(--str-chat__body-medium-text);
}
.str-chat__attachment-list .str-chat__message-attachment-actions {
  background: var(--str-chat__attachment-actions-background-color);
  color: var(--str-chat__attachment-actions-color);
  box-shadow: var(--str-chat__attachment-actions-box-shadow);
  border-radius: var(--str-chat__attachment-actions-border-radius);
  border-block-start: var(--str-chat__attachment-actions-border-block-start);
  border-block-end: var(--str-chat__attachment-actions-border-block-end);
  border-inline-start: var(--str-chat__attachment-actions-border-inline-start);
  border-inline-end: var(--str-chat__attachment-actions-border-inline-end);
}
.str-chat__attachment-list .str-chat__message-attachment-actions .str-chat__message-attachment-actions-button {
  background: var(--str-chat__attachment-action-background-color);
  color: var(--str-chat__attachment-action-color);
  box-shadow: var(--str-chat__attachment-action-box-shadow);
  border-radius: var(--str-chat__attachment-action-border-radius);
  border-block-start: var(--str-chat__attachment-action-border-block-start);
  border-block-end: var(--str-chat__attachment-action-border-block-end);
  border-inline-start: var(--str-chat__attachment-action-border-inline-start);
  border-inline-end: var(--str-chat__attachment-action-border-inline-end);
  font: var(--str-chat__subtitle-medium-text);
  border-collapse: collapse;
}
.str-chat__attachment-list .str-chat__message-attachment-actions .str-chat__message-attachment-actions-button:active {
  color: var(--str-chat__attachment-action-active-color);
}
.str-chat__attachment-list .str-chat__message-attachment-actions .str-chat__message-attachment-actions-button:not(:last-of-type) {
  border-inline-end: none;
}
.str-chat__attachment-list .str-chat__message-attachment-with-actions.str-chat__message-attachment--giphy .str-chat__message-attachment-card--header {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.str-chat__message-attachment-card.str-chat__message-attachment-card--audio .str-chat__message-attachment-card--header {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__attachment-preview-list-border-radius: var(--str-chat__border-radius-sm);
  /* The text/icon color of the component */
  --str-chat__attachment-preview-list-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__attachment-preview-list-background-color: transparent;
  /* Top border of the component */
  --str-chat__attachment-preview-list-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__attachment-preview-list-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__attachment-preview-list-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__attachment-preview-list-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__attachment-preview-list-box-shadow: none;
  /* Background color of the preview delete icon */
  --str-chat__attachment-preview-close-icon-background: var(--str-chat__secondary-overlay-color);
  /* Foreground color of the preview delete icon */
  --str-chat__attachment-preview-close-icon-color: var(--str-chat__secondary-overlay-text-color);
  /* Color of the upload retry icon */
  --str-chat__attachment-preview-retry-icon-color: var(--str-chat__primary-color);
  /* Color of the preview download icon */
  --str-chat__attachment-preview-download-icon-color: var(--str-chat__text-low-emphasis-color);
  /* Overlay color applied to attachment previews during upload and if an error occured during upload */
  --str-chat__attachment-preview-overlay-color: var(--str-chat__overlay-color);
  /* The border radius used for the borders of the image preview */
  --str-chat__attachment-preview-image-border-radius: var(--str-chat__border-radius-sm);
  /* The text/icon color of the image preview */
  --str-chat__attachment-preview-image-color: var(--str-chat__text-color);
  /* The background color of the image preview */
  --str-chat__attachment-preview-image-background-color: transparent;
  /* Top border of the image preview */
  --str-chat__attachment-preview-image-border-block-start: none;
  /* Bottom border of the image preview */
  --str-chat__attachment-preview-image-border-block-end: none;
  /* Left (right in RTL layout) border of the image preview */
  --str-chat__attachment-preview-image-border-inline-start: none;
  /* Right (left in RTL layout) border of the image preview */
  --str-chat__attachment-preview-image-border-inline-end: none;
  /* Box shadow applied to the image preview */
  --str-chat__attachment-preview-image-box-shadow: none;
  /* The border radius used for the borders of the file preview */
  --str-chat__attachment-preview-file-border-radius: var(--str-chat__border-radius-md);
  /* The text/icon color of the file preview */
  --str-chat__attachment-preview-file-color: var(--str-chat__text-color);
  /* The background color of the file preview */
  --str-chat__attachment-preview-file-background-color: transparent;
  /* Top border of the file preview */
  --str-chat__attachment-preview-file-border-block-start: 1px solid var(--str-chat__surface-color);
  /* Bottom border of the file preview */
  --str-chat__attachment-preview-file-border-block-end: 1px solid var(--str-chat__surface-color);
  /* Left (right in RTL layout) border of the file preview */
  --str-chat__attachment-preview-file-border-inline-start: 1px solid var(--str-chat__surface-color);
  /* Right (left in RTL layout) border of the file preview */
  --str-chat__attachment-preview-file-border-inline-end: 1px solid var(--str-chat__surface-color);
  /* Box shadow applied to the file preview */
  --str-chat__attachment-preview-file-box-shadow: none;
}

.str-chat__attachment-preview-list {
  background: var(--str-chat__attachment-preview-list-background-color);
  color: var(--str-chat__attachment-preview-list-color);
  box-shadow: var(--str-chat__attachment-preview-list-box-shadow);
  border-radius: var(--str-chat__attachment-preview-list-border-radius);
  border-block-start: var(--str-chat__attachment-preview-list-border-block-start);
  border-block-end: var(--str-chat__attachment-preview-list-border-block-end);
  border-inline-start: var(--str-chat__attachment-preview-list-border-inline-start);
  border-inline-end: var(--str-chat__attachment-preview-list-border-inline-end);
}
.str-chat__attachment-preview-list .str-chat__attachment-list-scroll-container {
  border-radius: inherit;
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-image {
  background: var(--str-chat__attachment-preview-image-background-color);
  color: var(--str-chat__attachment-preview-image-color);
  box-shadow: var(--str-chat__attachment-preview-image-box-shadow);
  border-radius: var(--str-chat__attachment-preview-image-border-radius);
  border-block-start: var(--str-chat__attachment-preview-image-border-block-start);
  border-block-end: var(--str-chat__attachment-preview-image-border-block-end);
  border-inline-start: var(--str-chat__attachment-preview-image-border-inline-start);
  border-inline-end: var(--str-chat__attachment-preview-image-border-inline-end);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-image .str-chat__attachment-preview-thumbnail,
.str-chat__attachment-preview-list .str-chat__attachment-preview-image .str-chat__attachment-preview-image-loading {
  border-radius: var(--str-chat__attachment-preview-image-border-radius);
  background-color: var(--str-chat__attachment-preview-overlay-color);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-file {
  background: var(--str-chat__attachment-preview-file-background-color);
  color: var(--str-chat__attachment-preview-file-color);
  box-shadow: var(--str-chat__attachment-preview-file-box-shadow);
  border-radius: var(--str-chat__attachment-preview-file-border-radius);
  border-block-start: var(--str-chat__attachment-preview-file-border-block-start);
  border-block-end: var(--str-chat__attachment-preview-file-border-block-end);
  border-inline-start: var(--str-chat__attachment-preview-file-border-inline-start);
  border-inline-end: var(--str-chat__attachment-preview-file-border-inline-end);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-name {
  font: var(--str-chat__subtitle-medium-text);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-download svg path {
  fill: var(--str-chat__attachment-preview-download-icon-color);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-delete svg {
  background-color: var(--str-chat__attachment-preview-close-icon-background);
  border-radius: 999px;
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-delete svg path {
  fill: var(--str-chat__attachment-preview-close-icon-color);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-error {
  background-color: var(--str-chat__attachment-preview-overlay-color);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-error svg path {
  fill: var(--str-chat__attachment-preview-retry-icon-color);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-error.str-chat__attachment-preview-error-image {
  border-radius: var(--str-chat__attachment-preview-image-border-radius);
}
.str-chat__attachment-preview-list .str-chat__attachment-preview-error.str-chat__attachment-preview-error-file {
  border-radius: var(--str-chat__attachment-preview-file-border-radius);
}

.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__autocomplete-menu-border-radius: var(--str-chat__border-radius-xs);
  /* The text/icon color of the component */
  --str-chat__autocomplete-menu-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__autocomplete-menu-background-color: var(--str-chat__secondary-background-color);
  /* Top border of the component */
  --str-chat__autocomplete-menu-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__autocomplete-menu-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__autocomplete-menu-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__autocomplete-menu-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__autocomplete-menu-box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
  /* The background color of a selected autocomplete item */
  --str-chat__autocomplete-active-background-color: var(--str-chat__surface-color);
  /* The border radius used for the borders of the component (ReactSDK) */
  --str-chat__suggestion-list-container-border-radius: var(--str-chat__border-radius-xs);
  /* The text/icon color of the component (ReactSDK) */
  --str-chat__suggestion-list-container-color: var(--str-chat__text-color);
  /* The background color of the component (ReactSDK) */
  --str-chat__suggestion-list-container-background-color: var(
    --str-chat__secondary-background-color
  );
  /* Top border of the component (ReactSDK) */
  --str-chat__suggestion-list-container-border-block-start: none;
  /* Bottom border of the component (ReactSDK) */
  --str-chat__suggestion-list-container-border-block-end: none;
  /* Left (right in RTL layout) border of the component (ReactSDK) */
  --str-chat__suggestion-list-container-border-inline-start: none;
  /* Right (left in RTL layout) border of the component (ReactSDK) */
  --str-chat__suggestion-list-container-border-inline-end: none;
  /* Box shadow applied to the component (ReactSDK) */
  --str-chat__suggestion-list-container-box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
  /* The background color of a selected autocomplete item (ReactSDK) */
  --str-chat__suggestion-list-item--selected-background-color: var(--str-chat__surface-color);
  /* The border radius used for the borders of the slash command item in the autocomplete list */
  --str-chat__slash-command-border-radius: 0;
  /* The text/icon color of the slash command item in the autocomplete list */
  --str-chat__slash-command-color: var(--str-chat__text-color);
  /* The background color of the slash command item in the autocomplete list */
  --str-chat__slash-command-background-color: transparent;
  /* Top border of the slash command item in the autocomplete list */
  --str-chat__slash-command-border-block-start: none;
  /* Bottom border of the slash command item in the autocomplete list */
  --str-chat__slash-command-border-block-end: none;
  /* Left (right in RTL layout) border of the slash command item in the autocomplete list */
  --str-chat__slash-command-border-inline-start: none;
  /* Right (left in RTL layout) border of the slash command item in the autocomplete list */
  --str-chat__slash-command-border-inline-end: none;
  /* Box shadow of the slash command item in the autocomplete list */
  --str-chat__slash-command-box-shadow: none;
  /* Text color of the arguments of a slash command item in the autocomplete list */
  --str-chat__slash-command-args-color: var(--str-chat__text-low-emphasis-color);
  /* The border radius used for the borders of the user mention item in the autocomplete list */
  --str-chat__mention-list-user-item-border-radius: 0;
  /* The text/icon color of the user mention item in the autocomplete list */
  --str-chat__mention-list-user-item-color: var(--str-chat__text-color);
  /* The background color of the user mention item in the autocomplete list */
  --str-chat__mention-list-user-item-background-color: transparent;
  /* Top border of the user mention item in the autocomplete list */
  --str-chat__mention-list-user-item-border-block-start: none;
  /* Bottom border of the user mention item in the autocomplete list */
  --str-chat__mention-list-user-item-border-block-end: none;
  /* Left (right in RTL layout) border of the user mention item in the autocomplete list */
  --str-chat__mention-list-user-item-border-inline-start: none;
  /* Right (left in RTL layout) border of the user mention item in the autocomplete list */
  --str-chat__mention-list-user-item-border-inline-end: none;
  /* Box shadow of the user mention item in the autocomplete list */
  --str-chat__mention-list-user-item-box-shadow: none;
  /* The text color of the at sign inside a user mention itome in the autocomplete list */
  --str-chat__mention-list-user-item-at-sign-color: var(--str-chat__primary-color);
  /* The font used in the emoji suggestion item in the autocomplete list */
  --str-chat__mention-list-emoji-item-font-family: var(--str-chat__font-family);
  /* The border radius used for the borders of the emoji suggestion item in the autocomplete list */
  --str-chat__mention-list-emoji-item-border-radius: 0;
  /* The text/icon color of the emoji suggestion item in the autocomplete list */
  --str-chat__mention-list-emoji-item-color: var(--str-chat__text-color);
  /* The background color of the emoji suggestion item in the autocomplete list */
  --str-chat__mention-list-emoji-item-background-color: transparent;
  /* Top border of the emoji suggestion item in the autocomplete list */
  --str-chat__mention-list-emoji-item-border-block-start: none;
  /* Bottom border of the emoji suggestion item in the autocomplete list */
  --str-chat__mention-list-emoji-item-border-block-end: none;
  /* Left (right in RTL layout) border of the emoji suggestion item in the autocomplete list */
  --str-chat__mention-list-emoji-item-border-inline-start: none;
  /* Right (left in RTL layout) border of the emoji suggestion item in the autocomplete list */
  --str-chat__mention-list-emoji-item-border-inline-end: none;
  /* Box shadow of the emoji suggestion item in the autocomplete list */
  --str-chat__mention-list-emoji-item-box-shadow: none;
}

.mention-menu {
  background: var(--str-chat__autocomplete-menu-background-color) !important;
  color: var(--str-chat__autocomplete-menu-color) !important;
  box-shadow: var(--str-chat__autocomplete-menu-box-shadow) !important;
  border-radius: var(--str-chat__autocomplete-menu-border-radius) !important;
  border-block-start: var(--str-chat__autocomplete-menu-border-block-start) !important;
  border-block-end: var(--str-chat__autocomplete-menu-border-block-end) !important;
  border-inline-start: var(--str-chat__autocomplete-menu-border-inline-start) !important;
  border-inline-end: var(--str-chat__autocomplete-menu-border-inline-end) !important;
}
.mention-menu .active.mention-active > a {
  background-color: var(--str-chat__autocomplete-active-background-color) !important;
}
.mention-menu .mention-item {
  color: var(--str-chat__autocomplete-menu-color) !important;
  background-color: transparent !important;
}

.str-chat__slash-command {
  background: var(--str-chat__slash-command-background-color);
  color: var(--str-chat__slash-command-color);
  box-shadow: var(--str-chat__slash-command-box-shadow);
  border-radius: var(--str-chat__slash-command-border-radius);
  border-block-start: var(--str-chat__slash-command-border-block-start);
  border-block-end: var(--str-chat__slash-command-border-block-end);
  border-inline-start: var(--str-chat__slash-command-border-inline-start);
  border-inline-end: var(--str-chat__slash-command-border-inline-end);
}
.str-chat__slash-command .str-chat__slash-command-header .str-chat__slash-command-name {
  text-transform: capitalize;
  font: var(--str-chat__subtitle2-text);
}
.str-chat__slash-command .str-chat__slash-command-header .str-chat__slash-command-args {
  color: var(--str-chat__slash-command-args-color);
  font: var(--str-chat__subtitle-text);
}

.str-chat__user-item {
  background: var(--str-chat__mention-list-user-item-background-color);
  color: var(--str-chat__mention-list-user-item-color);
  box-shadow: var(--str-chat__mention-list-user-item-box-shadow);
  border-radius: var(--str-chat__mention-list-user-item-border-radius);
  border-block-start: var(--str-chat__mention-list-user-item-border-block-start);
  border-block-end: var(--str-chat__mention-list-user-item-border-block-end);
  border-inline-start: var(--str-chat__mention-list-user-item-border-inline-start);
  border-inline-end: var(--str-chat__mention-list-user-item-border-inline-end);
}
.str-chat__user-item .str-chat__user-item--name {
  font: var(--str-chat__subtitle-text);
}
.str-chat__user-item .str-chat__user-item-at {
  font: var(--str-chat__subtitle2-text);
  color: var(--str-chat__mention-list-user-item-at-sign-color);
}

.str-chat__emoji-item {
  background: var(--str-chat__mention-list-emoji-item-background-color);
  color: var(--str-chat__mention-list-emoji-item-color);
  box-shadow: var(--str-chat__mention-list-emoji-item-box-shadow);
  border-radius: var(--str-chat__mention-list-emoji-item-border-radius);
  border-block-start: var(--str-chat__mention-list-emoji-item-border-block-start);
  border-block-end: var(--str-chat__mention-list-emoji-item-border-block-end);
  border-inline-start: var(--str-chat__mention-list-emoji-item-border-inline-start);
  border-inline-end: var(--str-chat__mention-list-emoji-item-border-inline-end);
}
.str-chat__emoji-item .str-chat__emoji-item--name {
  font: var(--str-chat__subtitle-text);
}

.str-chat__suggestion-list-container {
  background: var(--str-chat__suggestion-list-container-background-color);
  color: var(--str-chat__suggestion-list-container-color);
  box-shadow: var(--str-chat__suggestion-list-container-box-shadow);
  border-radius: var(--str-chat__suggestion-list-container-border-radius);
  border-block-start: var(--str-chat__suggestion-list-container-border-block-start);
  border-block-end: var(--str-chat__suggestion-list-container-border-block-end);
  border-inline-start: var(--str-chat__suggestion-list-container-border-inline-start);
  border-inline-end: var(--str-chat__suggestion-list-container-border-inline-end);
}
.str-chat__suggestion-list-container .str-chat__suggestion-list .str-chat__suggestion-list-item > a {
  text-decoration: none;
}
.str-chat__suggestion-list-container .str-chat__suggestion-list .str-chat__suggestion-item--selected {
  background-color: var(--str-chat__suggestion-list-item--selected-background-color);
}

.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__channel-border-radius: 0;
  /* The text/icon color of the component */
  --str-chat__channel-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__channel-background-color: var(--str-chat__background-color);
  /* Box shadow applied to the component */
  --str-chat__channel-box-shadow: none;
  /* Top border of the component */
  --str-chat__channel-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__channel-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__channel-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__channel-border-inline-end: none;
  /* The icon color used when no channel is selected */
  --str-chat__channel-empty-indicator-color: var(--str-chat__disabled-color);
  /* The text color used when no channel is selected */
  --str-chat__channel-empty-color: var(--str-chat__text-low-emphasis-color);
  /* The color of the loading indicator */
  --str-chat__channel-loading-state-color: var(--str-chat__disabled-color);
}

.str-chat__channel {
  background: var(--str-chat__channel-background-color);
  color: var(--str-chat__channel-color);
  box-shadow: var(--str-chat__channel-box-shadow);
  border-radius: var(--str-chat__channel-border-radius);
  border-block-start: var(--str-chat__channel-border-block-start);
  border-block-end: var(--str-chat__channel-border-block-end);
  border-inline-start: var(--str-chat__channel-border-inline-start);
  border-inline-end: var(--str-chat__channel-border-inline-end);
}

.str-chat__empty-channel {
  background: var(--str-chat__channel-background-color);
  color: var(--str-chat__channel-color);
  box-shadow: var(--str-chat__channel-box-shadow);
  border-radius: var(--str-chat__channel-border-radius);
  border-block-start: var(--str-chat__channel-border-block-start);
  border-block-end: var(--str-chat__channel-border-block-end);
  border-inline-start: var(--str-chat__channel-border-inline-start);
  border-inline-end: var(--str-chat__channel-border-inline-end);
  font: var(--str-chat__headline-text);
  text-align: center;
}
.str-chat__empty-channel svg path {
  fill: var(--str-chat__channel-empty-indicator-color);
}
.str-chat__empty-channel .str-chat__empty-channel-text {
  color: var(--str-chat__channel-empty-color);
}

.str-chat__loading-channel {
  animation: pulsate 1s linear 0s infinite alternate;
}
.str-chat__loading-channel:nth-of-type(2) {
  animation: pulsate 1s linear 0.3334s infinite alternate;
}
.str-chat__loading-channel:last-of-type {
  animation: pulsate 1s linear 0.6667s infinite alternate;
}
@keyframes pulsate {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
.str-chat__loading-channel .str-chat__loading-channel-header {
  background-color: var(--str-chat__channel-header-background-color);
}
.str-chat__loading-channel .str-chat__loading-channel-header .str-chat__loading-channel-header-avatar {
  background-image: linear-gradient(-90deg, var(--str-chat__channel-loading-state-color) 0%, var(--str-chat__channel-loading-state-color) 100%);
  border-radius: var(--str-chat__avatar-border-radius);
}
.str-chat__loading-channel .str-chat__loading-channel-header .str-chat__loading-channel-header-name,
.str-chat__loading-channel .str-chat__loading-channel-header .str-chat__loading-channel-header-info {
  background-image: linear-gradient(-90deg, var(--str-chat__channel-loading-state-color) 0%, var(--str-chat__channel-loading-state-color) 100%);
  border-radius: var(--str-chat__border-radius-xs);
}
.str-chat__loading-channel .str-chat__loading-channel-message-list {
  background-color: var(--str-chat__message-list-background-color);
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message-avatar {
  background-image: linear-gradient(-90deg, var(--str-chat__channel-loading-state-color) 0%, var(--str-chat__channel-loading-state-color) 100%);
  border-radius: var(--str-chat__avatar-border-radius);
}
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message-sender,
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message-text,
.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message-date {
  background-image: linear-gradient(-90deg, var(--str-chat__channel-loading-state-color) 0%, var(--str-chat__channel-loading-state-color) 100%);
  border-radius: var(--str-chat__message-bubble-border-radius);
}
.str-chat__loading-channel .str-chat__loading-channel-message-input-row .str-chat__loading-channel-message-input,
.str-chat__loading-channel .str-chat__loading-channel-message-input-row .str-chat__loading-channel-message-send {
  background-image: linear-gradient(-90deg, var(--str-chat__channel-loading-state-color) 0%, var(--str-chat__channel-loading-state-color) 100%);
}
.str-chat__loading-channel .str-chat__loading-channel-message-input-row .str-chat__loading-channel-message-input {
  border-radius: var(--str-chat__message-textarea-border-radius);
}
.str-chat__loading-channel .str-chat__loading-channel-message-input-row .str-chat__loading-channel-message-send {
  border-radius: var(--str-chat__message-send-border-radius);
}

.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__channel-header-border-radius: 0;
  /* The text/icon color of the component */
  --str-chat__channel-header-color: 0;
  /* The background color of the component */
  --str-chat__channel-header-background-color: var(--str-chat__secondary-background-color);
  /* Top border of the component */
  --str-chat__channel-header-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__channel-header-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__channel-header-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__channel-header-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__channel-header-box-shadow: none;
  /* The text/icon color used to display member information about the channel */
  --str-chat__channel-header-info-color: var(--str-chat__text-low-emphasis-color);
}

.str-chat__channel-header {
  background: var(--str-chat__channel-header-background-color);
  color: var(--str-chat__channel-header-color);
  box-shadow: var(--str-chat__channel-header-box-shadow);
  border-radius: var(--str-chat__channel-header-border-radius);
  border-block-start: var(--str-chat__channel-header-border-block-start);
  border-block-end: var(--str-chat__channel-header-border-block-end);
  border-inline-start: var(--str-chat__channel-header-border-inline-start);
  border-inline-end: var(--str-chat__channel-header-border-inline-end);
}
.str-chat__channel-header .str-chat__channel-header-title {
  font: var(--str-chat__subtitle-medium-text);
}
.str-chat__channel-header .str-chat__channel-header-info {
  font: var(--str-chat__body-text);
  color: var(--str-chat__channel-header-info-color);
}

.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__channel-list-border-radius: 0;
  /* The text/icon color of the component */
  --str-chat__channel-list-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__channel-list-background-color: var(--str-chat__secondary-background-color);
  /* Box shadow applied to the component */
  --str-chat__channel-list-box-shadow: none;
  /* Top border of the component */
  --str-chat__channel-list-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__channel-list-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__channel-list-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__channel-list-border-inline-end: 1px solid var(--str-chat__surface-color);
  /* The border radius used for the borders of the load more button */
  --str-chat__channel-list-load-more-border-radius: var(--str-chat__cta-button-border-radius);
  /* The text/icon color of the load more button */
  --str-chat__channel-list-load-more-color: var(--str-chat__cta-button-color);
  /* The background color of the load more button */
  --str-chat__channel-list-load-more-background-color: var(--str-chat__cta-button-background-color);
  /* Box shadow applied to the load more button */
  --str-chat__channel-list-load-more-box-shadow: var(--str-chat__cta-button-box-shadow);
  /* Top border of the load more button */
  --str-chat__channel-list-load-more-border-block-start: var(
    --str-chat__cta-button-border-block-start
  );
  /* Bottom border of the load more button */
  --str-chat__channel-list-load-more-border-block-end: var(--str-chat__cta-button-border-block-end);
  /* Left (right in RTL layout) border of the load more button */
  --str-chat__channel-list-load-more-border-inline-start: var(
    --str-chat__cta-button-border-inline-start
  );
  /* Right (left in RTL layout) border of the load more button */
  --str-chat__channel-list-load-more-border-inline-end: var(
    --str-chat__cta-button-border-inline-end
  );
  /* The background color of the load more button in pressed state */
  --str-chat__channel-list-load-more-pressed-background-color: var(
    --str-chat__cta-button-pressed-background-color
  );
  /* The background color of the load more button in disabled state */
  --str-chat__channel-list-load-more-disabled-background-color: var(
    --str-chat__cta-button-disabled-background-color
  );
  /* The text/icon color of the load more button in disabled state */
  --str-chat__channel-list-load-more-disabled-color: var(--str-chat__cta-button-disabled-color);
  /* The icon color for the empty list state */
  --str-chat__channel-list-empty-indicator-color: var(--str-chat__disabled-color);
}

.str-chat__channel-list {
  background: var(--str-chat__channel-list-background-color);
  color: var(--str-chat__channel-list-color);
  box-shadow: var(--str-chat__channel-list-box-shadow);
  border-radius: var(--str-chat__channel-list-border-radius);
  border-block-start: var(--str-chat__channel-list-border-block-start);
  border-block-end: var(--str-chat__channel-list-border-block-end);
  border-inline-start: var(--str-chat__channel-list-border-inline-start);
  border-inline-end: var(--str-chat__channel-list-border-inline-end);
}
.str-chat__channel-list .str-chat__load-more-button__button {
  background: var(--str-chat__channel-list-load-more-background-color);
  color: var(--str-chat__channel-list-load-more-color);
  box-shadow: var(--str-chat__channel-list-load-more-box-shadow);
  border-radius: var(--str-chat__channel-list-load-more-border-radius);
  border-block-start: var(--str-chat__channel-list-load-more-border-block-start);
  border-block-end: var(--str-chat__channel-list-load-more-border-block-end);
  border-inline-start: var(--str-chat__channel-list-load-more-border-inline-start);
  border-inline-end: var(--str-chat__channel-list-load-more-border-inline-end);
  width: 80%;
}
.str-chat__channel-list .str-chat__load-more-button__button:active {
  background-color: var(--str-chat__channel-list-load-more-pressed-background-color);
}
.str-chat__channel-list .str-chat__load-more-button__button:disabled {
  background-color: var(--str-chat__channel-list-load-more-disabled-background-color);
  color: var(--str-chat__channel-list-load-more-disabled-color);
}
.str-chat__channel-list .str-chat__channel-list-empty {
  font: var(--str-chat__headline-text);
  text-align: center;
}
.str-chat__channel-list .str-chat__channel-list-empty svg path {
  fill: var(--str-chat__channel-list-empty-indicator-color);
}

.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__channel-preview-border-radius: 0;
  /* The text/icon color of the component */
  --str-chat__channel-preview-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__channel-preview-background-color: transparent;
  /* Top border of the component */
  --str-chat__channel-preview-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__channel-preview-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__channel-preview-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__channel-preview-border-inline-end: none;
  /* Background color used for selected channel preview components */
  --str-chat__channel-preview-active-background-color: var(--str-chat__surface-color);
  /* Background color used for the hover state */
  --str-chat__channel-preview-hover-background-color: var(--str-chat__secondary-surface-color);
  /* Text color of the latest message when preview is not hovered or selected */
  --str-chat__channel-preview-latest-message-secondary-color: var(
    --str-chat__text-low-emphasis-color
  );
  /* The color of the loading indicator while initializing the channel list */
  --str-chat__channel-preview-loading-state-color: var(--str-chat__disabled-color);
  /* The background color of the unread badge */
  --str-chat__channel-preview-unread-badge-background-color: var(--str-chat__unread-badge-color);
  /* The color of the unread badge */
  --str-chat__channel-preview-unread-badge-color: var(--str-chat__on-unread-badge-color);
  /* The border radius used for the borders of the unread badge */
  --str-chat__channel-preview-unread-badge-border-radius: var(--str-chat__border-radius-circle);
  /* Top border of the unread badge */
  --str-chat__channel-preview-unread-badge-border-block-start: none;
  /* Bottom border of the unread badge */
  --str-chat__channel-preview-unread-badge-border-block-end: none;
  /* Left (right in RTL layout) border of the unread badge */
  --str-chat__channel-preview-unread-badge-border-inline-start: none;
  /* Right (left in RTL layout) border of the unread badge */
  --str-chat__channel-preview-unread-badge-border-inline-end: none;
}

.str-chat__channel-preview {
  background: var(--str-chat__channel-preview-background-color);
  color: var(--str-chat__channel-preview-color);
  box-shadow: var(--str-chat__channel-preview-box-shadow);
  border-radius: var(--str-chat__channel-preview-border-radius);
  border-block-start: var(--str-chat__channel-preview-border-block-start);
  border-block-end: var(--str-chat__channel-preview-border-block-end);
  border-inline-start: var(--str-chat__channel-preview-border-inline-start);
  border-inline-end: var(--str-chat__channel-preview-border-inline-end);
}
.str-chat__channel-preview--active, .str-chat__channel-preview-messenger--active {
  background-color: var(--str-chat__channel-preview-active-background-color);
}
.str-chat__channel-preview:hover {
  background-color: var(--str-chat__channel-preview-hover-background-color);
}
.str-chat__channel-preview .str-chat__channel-preview-end-first-row {
  font: var(--str-chat__subtitle-medium-text);
}
.str-chat__channel-preview .str-chat__channel-preview-end-first-row .str-chat__channel-preview-unread-badge {
  background: var(--str-chat__channel-preview-unread-badge-background-color);
  color: var(--str-chat__channel-preview-unread-badge-color);
  box-shadow: var(--str-chat__channel-preview-unread-badge-box-shadow);
  border-radius: var(--str-chat__channel-preview-unread-badge-border-radius);
  border-block-start: var(--str-chat__channel-preview-unread-badge-border-block-start);
  border-block-end: var(--str-chat__channel-preview-unread-badge-border-block-end);
  border-inline-start: var(--str-chat__channel-preview-unread-badge-border-inline-start);
  border-inline-end: var(--str-chat__channel-preview-unread-badge-border-inline-end);
  font-size: 80%;
}
.str-chat__channel-preview .str-chat__channel-preview-end-first-row .str-chat__channel-preview-messenger--last-message {
  font: var(--str-chat__body-text);
  color: var(--str-chat__channel-preview-latest-message-secondary-color);
}
.str-chat__channel-preview .str-chat__channel-preview-end-first-row--active .str-chat__channel-preview-messenger--last-message, .str-chat__channel-preview .str-chat__channel-preview-end-first-row:hover .str-chat__channel-preview-messenger--last-message {
  color: var(--str-chat__channel-preview-color);
}

.str-chat__channel-preview-loading {
  animation: pulsate 1s linear 0s infinite alternate;
}
.str-chat__channel-preview-loading:nth-of-type(2) {
  animation: pulsate 1s linear 0.3334s infinite alternate;
}
.str-chat__channel-preview-loading:last-of-type {
  animation: pulsate 1s linear 0.6667s infinite alternate;
}
@keyframes pulsate {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
.str-chat__channel-preview-loading .str-chat__loading-channels-avatar,
.str-chat__channel-preview-loading .str-chat__loading-channels-username,
.str-chat__channel-preview-loading .str-chat__loading-channels-status {
  background-image: linear-gradient(-90deg, var(--str-chat__channel-preview-loading-state-color) 0%, var(--str-chat__channel-preview-loading-state-color) 100%);
}
.str-chat__channel-preview-loading .str-chat__loading-channels-username,
.str-chat__channel-preview-loading .str-chat__loading-channels-status {
  border-radius: var(--str-chat__border-radius-xs);
}

/* Only available in React SDK. */
.str-chat {
  /* The text/icon color of the component */
  --str-chat__channel-search-input-color: var(--str-chat__text-color);
  /* The text/icon color of the component */
  --str-chat__channel-search-input-placeholder-color: var(--str-chat__text-low-emphasis-color);
  /* The text/icon color of the component */
  --str-chat__channel-search-input-icon-color: var(--str-chat__text-low-emphasis-color);
  /* Top border of the component */
  --str-chat__channel-search-input-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__channel-search-input-border-block-end: none;
  /* Left (right in RTL layout) borhe component */
  --str-chat__channel-search-input-border-inline-start: none;
  /* Right (left in RTL layout) borhe component */
  --str-chat__channel-search-input-border-inline-end: none;
  /* The border radius used for the borders of the component */
  --str-chat__channel-search-input-wrapper-border-radius: var(--str-chat__border-radius-lg);
  /* The background color of the component */
  --str-chat__channel-search-input-wrapper-background-color: transparent;
  /* Top border of the component */
  --str-chat__channel-search-input-wrapper-border-block-start: var(--str-chat__surface-color) 1px
    solid;
  /* Bottom border of the component */
  --str-chat__channel-search-input-wrapper-border-block-end: var(--str-chat__surface-color) 1px
    solid;
  /* Left (right in RTL layout) border of the component */
  --str-chat__channel-search-input-wrapper-border-inline-start: var(--str-chat__surface-color) 1px
    solid;
  /* Right (left in RTL layout) border of the component */
  --str-chat__channel-search-input-wrapper-border-inline-end: var(--str-chat__surface-color) 1px
    solid;
  /* The border radius used for the borders of the component */
  --str-chat__channel-search-input-wrapper-active-border-radius: var(--str-chat__border-radius-lg);
  /* The background color of the component */
  --str-chat__channel-search-input-wrapper-active-background-color: transparent;
  /* Top border of the component */
  --str-chat__channel-search-input-wrapper-active-border-block-start: var(--str-chat__primary-color)
    1px solid;
  /* Bottom border of the component */
  --str-chat__channel-search-input-wrapper-active-border-block-end: var(--str-chat__primary-color)
    1px solid;
  /* Left (right in RTL layout) border of the component */
  --str-chat__channel-search-input-wrapper-active-border-inline-start: var(
      --str-chat__primary-color
    )
    1px solid;
  /* Right (left in RTL layout) border of the component */
  --str-chat__channel-search-input-wrapper-active-border-inline-end: var(--str-chat__primary-color)
    1px solid;
  /* The background applied to channel search result */
  --str-chat__channel-search-result-background-color: transparent;
  /* Top border of the component */
  --str-chat__channel-search-result-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__channel-search-result-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__channel-search-result-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__channel-search-result-border-inline-end: none;
  /* Background color used for the search result hover / focused state */
  --str-chat__channel-search-result-hover-background-color: var(
    --str-chat__secondary-surface-color
  );
  --str-chat__channel-search-result-list-color: var(--str-chat__text-color);
  --str-chat__channel-search-result-list-background-color: var(--str-chat__secondary-background-color);
  /* Top border of the component  */
  --str-chat__channel-search-result-list-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__channel-search-result-list-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__channel-search-result-list-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__channel-search-result-list-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__channel-search-result-list-popup-box-shadow: 0 4px 4px var(--str-chat__box-shadow-color);
  /* The font color used in the search results header  */
  --str-chat__channel-search-results-header-color: var(--str-chat__text-low-emphasis-color);
  /* The background color used in the search results header  */
  --str-chat__channel-search-results-header-background-color: var(--str-chat__background-color);
  /* Top border of the component  */
  --str-chat__channel-search-results-header-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__channel-search-results-header-border-block-end: var(--str-chat__surface-color) 1px
    solid;
  /* Left (right in RTL layout) border of the component */
  --str-chat__channel-search-results-header-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__channel-search-results-header-border-inline-end: none;
  /* The font color used in the search results loading indicator  */
  --str-chat__channel-search-results-loading-indicator-color: var(--str-chat__text-low-emphasis-color);
  /* The background color used in the search results loading indicator  */
  --str-chat__channel-search-results-loading-indicator-background-color: var(--str-chat__background-color);
  /* Top border of the component  */
  --str-chat__channel-search-results-loading-indicator-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__channel-search-results-loading-indicator-border-block-end: var(--str-chat__surface-color) 1px
    solid;
  /* Left (right in RTL layout) border of the component */
  --str-chat__channel-search-results-loading-indicator-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__channel-search-results-loading-indicator-border-inline-end: none;
  /* The font color used in the empty search results indicator  */
  --str-chat__channel-search-results-empty-color: var(--str-chat__text-low-emphasis-color);
  /* The icon color used in the empty search results indicator  */
  --str-chat__channel-search-results-empty-icon-color: var(--str-chat__disabled-color);
  /* The background color used in the empty search results indicator  */
  --str-chat__channel-search-results-empty-background-color: var(--str-chat__background-color);
  /* Top border of the component  */
  --str-chat__channel-search-results-empty-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__channel-search-results-empty-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__channel-search-results-empty-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__channel-search-results-empty-border-inline-end: none;
}

.str-chat__channel-search-input--wrapper {
  background: var(--str-chat__channel-search-input-wrapper-background-color);
  color: var(--str-chat__channel-search-input-wrapper-color);
  box-shadow: var(--str-chat__channel-search-input-wrapper-box-shadow);
  border-radius: var(--str-chat__channel-search-input-wrapper-border-radius);
  border-block-start: var(--str-chat__channel-search-input-wrapper-border-block-start);
  border-block-end: var(--str-chat__channel-search-input-wrapper-border-block-end);
  border-inline-start: var(--str-chat__channel-search-input-wrapper-border-inline-start);
  border-inline-end: var(--str-chat__channel-search-input-wrapper-border-inline-end);
}
.str-chat__channel-search-input--wrapper input {
  background: var(--str-chat__channel-search-input-background-color);
  color: var(--str-chat__channel-search-input-color);
  box-shadow: var(--str-chat__channel-search-input-box-shadow);
  border-radius: var(--str-chat__channel-search-input-border-radius);
  border-block-start: var(--str-chat__channel-search-input-border-block-start);
  border-block-end: var(--str-chat__channel-search-input-border-block-end);
  border-inline-start: var(--str-chat__channel-search-input-border-inline-start);
  border-inline-end: var(--str-chat__channel-search-input-border-inline-end);
  outline: none;
  font: var(--str-chat__subtitle-text);
}
.str-chat__channel-search-input--wrapper .str-chat__channel-search-input--clear-button svg path {
  fill: transparent;
}

.str-chat__channel-search-input--wrapper-active {
  background: var(--str-chat__channel-search-input-wrapper-active-background-color);
  color: var(--str-chat__channel-search-input-wrapper-active-color);
  box-shadow: var(--str-chat__channel-search-input-wrapper-active-box-shadow);
  border-radius: var(--str-chat__channel-search-input-wrapper-active-border-radius);
  border-block-start: var(--str-chat__channel-search-input-wrapper-active-border-block-start);
  border-block-end: var(--str-chat__channel-search-input-wrapper-active-border-block-end);
  border-inline-start: var(--str-chat__channel-search-input-wrapper-active-border-inline-start);
  border-inline-end: var(--str-chat__channel-search-input-wrapper-active-border-inline-end);
}
.str-chat__channel-search-input--wrapper-active .str-chat__channel-search-input--icon svg path {
  fill: var(--str-chat__primary-color);
}
.str-chat__channel-search-input--wrapper-active .str-chat__channel-search-input--clear-button svg path {
  fill: var(--str-chat__text-low-emphasis-color);
}

.str-chat__channel-search-results-header {
  background: var(--str-chat__channel-search-results-header-background-color);
  color: var(--str-chat__channel-search-results-header-color);
  box-shadow: var(--str-chat__channel-search-results-header-box-shadow);
  border-radius: var(--str-chat__channel-search-results-header-border-radius);
  border-block-start: var(--str-chat__channel-search-results-header-border-block-start);
  border-block-end: var(--str-chat__channel-search-results-header-border-block-end);
  border-inline-start: var(--str-chat__channel-search-results-header-border-inline-start);
  border-inline-end: var(--str-chat__channel-search-results-header-border-inline-end);
  font: var(--str-chat__subtitle-text);
}

.str-chat__channel-search-result-list {
  background: var(--str-chat__channel-search-result-list-background-color);
  color: var(--str-chat__channel-search-result-list-color);
  box-shadow: var(--str-chat__channel-search-result-list-box-shadow);
  border-radius: var(--str-chat__channel-search-result-list-border-radius);
  border-block-start: var(--str-chat__channel-search-result-list-border-block-start);
  border-block-end: var(--str-chat__channel-search-result-list-border-block-end);
  border-inline-start: var(--str-chat__channel-search-result-list-border-inline-start);
  border-inline-end: var(--str-chat__channel-search-result-list-border-inline-end);
}
.str-chat__channel-search-result-list.popup {
  box-shadow: var(--str-chat__channel-search-result-list-popup-box-shadow);
}
.str-chat__channel-search-result-list .str-chat__channel-search-container-searching {
  background: var(--str-chat__channel-search-results-loading-indicator-background-color);
  color: var(--str-chat__channel-search-results-loading-indicator-color);
  box-shadow: var(--str-chat__channel-search-results-loading-indicator-box-shadow);
  border-radius: var(--str-chat__channel-search-results-loading-indicator-border-radius);
  border-block-start: var(--str-chat__channel-search-results-loading-indicator-border-block-start);
  border-block-end: var(--str-chat__channel-search-results-loading-indicator-border-block-end);
  border-inline-start: var(--str-chat__channel-search-results-loading-indicator-border-inline-start);
  border-inline-end: var(--str-chat__channel-search-results-loading-indicator-border-inline-end);
}
.str-chat__channel-search-result-list .str-chat__channel-search-container-empty {
  background: var(--str-chat__channel-search-results-empty-background-color);
  color: var(--str-chat__channel-search-results-empty-color);
  box-shadow: var(--str-chat__channel-search-results-empty-box-shadow);
  border-radius: var(--str-chat__channel-search-results-empty-border-radius);
  border-block-start: var(--str-chat__channel-search-results-empty-border-block-start);
  border-block-end: var(--str-chat__channel-search-results-empty-border-block-end);
  border-inline-start: var(--str-chat__channel-search-results-empty-border-inline-start);
  border-inline-end: var(--str-chat__channel-search-results-empty-border-inline-end);
  font: var(--str-chat__subtitle2-medium-text);
}
.str-chat__channel-search-result-list .str-chat__channel-search-container-empty svg path {
  fill: var(--str-chat__channel-search-results-empty-icon-color);
}
.str-chat__channel-search-result-list .str-chat__channel-search-result {
  background: var(--str-chat__channel-search-result-background-color);
  color: var(--str-chat__channel-search-result-color);
  box-shadow: var(--str-chat__channel-search-result-box-shadow);
  border-radius: var(--str-chat__channel-search-result-border-radius);
  border-block-start: var(--str-chat__channel-search-result-border-block-start);
  border-block-end: var(--str-chat__channel-search-result-border-block-end);
  border-inline-start: var(--str-chat__channel-search-result-border-inline-start);
  border-inline-end: var(--str-chat__channel-search-result-border-inline-end);
}
.str-chat__channel-search-result-list .str-chat__channel-search-result .str-chat__channel-search-result--display-name {
  font: var(--str-chat__subtitle-medium-text);
}
.str-chat__channel-search-result-list .str-chat__channel-preview-messenger--active {
  background-color: var(--str-chat__channel-preview-active-background-color);
}
.str-chat__channel-search-result-list .str-chat__channel-search-result:hover,
.str-chat__channel-search-result-list .str-chat__channel-search-result--focused {
  background-color: var(--str-chat__channel-search-result-hover-background-color);
}

.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__edit-message-modal-button-border-radius: none;
  /* The text color used for the send button */
  --str-chat__edit-message-modal-send-button-color: var(--str-chat__primary-color);
  /* The text color used for the cancel button */
  --str-chat__edit-message-modal-cancel-button-color: var(--str-chat__text-low-emphasis-color);
  /* The background color of the component */
  --str-chat__edit-message-modal-button-background-color: transparent;
  /* Top border of the component */
  --str-chat__edit-message-modal-button-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__edit-message-modal-button-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__edit-message-modal-button-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__edit-message-modal-button-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__edit-message-modal-button-box-shadow: none;
}

.str-chat__edit-message-form .str-chat__edit-message-form-options .str-chat__edit-message-cancel,
.str-chat__edit-message-form .str-chat__edit-message-form-options .str-chat__edit-message-send {
  background: var(--str-chat__edit-message-modal-button-background-color);
  color: var(--str-chat__edit-message-modal-button-color);
  box-shadow: var(--str-chat__edit-message-modal-button-box-shadow);
  border-radius: var(--str-chat__edit-message-modal-button-border-radius);
  border-block-start: var(--str-chat__edit-message-modal-button-border-block-start);
  border-block-end: var(--str-chat__edit-message-modal-button-border-block-end);
  border-inline-start: var(--str-chat__edit-message-modal-button-border-inline-start);
  border-inline-end: var(--str-chat__edit-message-modal-button-border-inline-end);
  font: var(--str-chat__body-medium-text);
}
.str-chat__edit-message-form .str-chat__edit-message-form-options .str-chat__edit-message-cancel {
  text-transform: capitalize;
  color: var(--str-chat__edit-message-modal-cancel-button-color);
}
.str-chat__edit-message-form .str-chat__edit-message-form-options .str-chat__edit-message-send {
  text-transform: uppercase;
  color: var(--str-chat__edit-message-modal-send-button-color);
}

/* Only available in Angular SDK. */
.str-chat {
  /* The color of the stepper icon. */
  --str-chat__image-carousel-stepper-color: var(--str-chat__text-color);
}

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

.str-chat__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__loading-indicator svg linearGradient stop:last-child {
  stop-color: var(--str-chat__loading-indicator-color, var(--str-chat__primary-color, #006cff));
}

.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__message-border-radius: none;
  /* The text/icon color of the component */
  --str-chat__message-color: var(--str-chat__text-color);
  /* The text/icon color used for displaying error messages */
  --str-chat__message-error-message-color: var(--str-chat__danger-color);
  /* The text/icon color used for displaying items with less emphasis */
  --str-chat__message-secondary-color: var(--str-chat__text-low-emphasis-color);
  /* The text color used for displaying links */
  --str-chat__message-link-color: var(--str-chat__primary-color);
  /* The text color used for displaying mentions */
  --str-chat__message-mention-color: var(--str-chat__primary-color);
  /* The text/icon color used for displaying message status */
  --str-chat__message-status-color: var(--str-chat__primary-color);
  /* The text color used for displaying the number of thread replies of a message */
  --str-chat__message-replies-count-color: var(--str-chat__primary-color);
  /* The background color of the component */
  --str-chat__message-background-color: transparent;
  /* The background color of a jumped-to message */
  --str-chat__message-highlighted-background-color: var(--str-chat__message-highlight-color);
  /* Top border of the component */
  --str-chat__message-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__message-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__message-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__message-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__message-box-shadow: none;
  /* The background of the message component in active state */
  --str-chat__message-active-bacground-color: transparent;
  /* The icon color used for displaying message options */
  --str-chat__message-options-color: var(--str-chat__text-low-emphasis-color);
  /* The icon color used for displaying message options if a message option is clicked */
  --str-chat__message-options-hover-background-color: var(--str-chat__tertiary-surface-color);
  /* The border radius used for displaying message options */
  --str-chat__message-options-border-radius: var(--str-chat__border-radius-circle);
  /* The background color used if a message option is hovered */
  --str-chat__message-options-active-color: var(--str-chat__primary-color);
  /* The border radius used for the borders of the message bubble */
  --str-chat__message-bubble-border-radius: var(--str-chat__border-radius-md);
  /* The text/icon of the message bubble */
  --str-chat__message-bubble-color: var(--str-chat__text-color);
  /* The background of the message bubble */
  --str-chat__message-bubble-background-color: var(--str-chat__secondary-surface-color);
  /* The text/icon of the message bubble, if the message was sent by the user */
  --str-chat__own-message-bubble-color: var(--str-chat__message-bubble-color);
  /* The background of the message bubble, if the message was sent by the user */
  --str-chat__own-message-bubble-background-color: var(--str-chat__primary-surface-color);
  /* The background of the message bubble, if it's a quoted message */
  --str-chat__quoted-message-bubble-background-color: var(--str-chat__secondary-background-color);
  /* Top border of the message bubble */
  --str-chat__message-bubble-border-block-start: none;
  /* Bottom border of the message bubble */
  --str-chat__message-bubble-border-block-end: none;
  /* Left (right in RTL layout) border of the message bubble */
  --str-chat__message-bubble-border-inline-start: none;
  /* Right (left in RTL layout) border of the message bubble */
  --str-chat__message-bubble-border-inline-end: none;
  /* Box shadow applied to the message bubble */
  --str-chat__message-bubble-box-shadow: none;
  /* The border radius used for the borders of a deleted message */
  --str-chat__deleted-message-border-radius: var(--str-chat__border-radius-md);
  /* The text/icon of a deleted message */
  --str-chat__deleted-message-color: var(--str-chat__text-low-emphasis-color);
  /* The background of a deleted message */
  --str-chat__deleted-message-background-color: var(--str-chat__secondary-surface-color);
  /* Top border of a deleted message */
  --str-chat__deleted-message-border-block-start: none;
  /* Bottom border of a deleted message */
  --str-chat__deleted-message-border-block-end: none;
  /* Left (right in RTL layout) border of a deleted message */
  --str-chat__deleted-message-border-inline-start: none;
  /* Right (left in RTL layout) border of a deleted message */
  --str-chat__deleted-message-border-inline-end: none;
  /* Box shadow applied to a deleted message */
  --str-chat__deleted-message-box-shadow: none;
  /* The border radius used for the borders of a system message */
  --str-chat__system-message-border-radius: 0;
  /* The text/icon of a system message */
  --str-chat__system-message-color: var(--str-chat__text-low-emphasis-color);
  /* The background of a system message */
  --str-chat__system-message-background-color: transparent;
  /* Top border of a system message */
  --str-chat__system-message-border-block-start: none;
  /* Bottom border of a system message */
  --str-chat__system-message-border-block-end: none;
  /* Left (right in RTL layout) border of a system message */
  --str-chat__system-message-border-inline-start: none;
  /* Right (left in RTL layout) border of a system message */
  --str-chat__system-message-border-inline-end: none;
  /* Box shadow applied to a system message */
  --str-chat__system-message-box-shadow: none;
  /* Text color in a date separator*/
  --str-chat__date-separator-color: var(--str-chat__text-low-emphasis-color);
  /* The line color applied to date separator */
  --str-chat__date-separator-line-color: var(--str-chat__disabled-color);
  /* The border radius used for the borders of a date separator */
  --str-chat__date-separator-border-radius: 0;
  /* The background color of a date separator */
  --str-chat__date-separator-background-color: transparent;
  /* Top border of a date separator */
  --str-chat__date-separator-border-block-start: none;
  /* Bottom border of a date separator */
  --str-chat__date-separator-border-block-end: none;
  /* Left (right in RTL layout) border of a date separator */
  --str-chat__date-separator-border-inline-start: none;
  /* Right (left in RTL layout) border of a date separator */
  --str-chat__date-separator-border-inline-end: none;
  /* Box shadow applied to a date separator */
  --str-chat__date-separator-box-shadow: none;
  /* The text color of the translation notice that is displayed if a message is translated with auto-translation */
  --str-chat__translation-notice-color: var(--str-chat__text-low-emphasis-color);
  /* The hover color of the translation notice that is displayed if a message is translated with auto-translation */
  --str-chat__translation-notice-active-background-color: var(--str-chat__tertiary-surface-color);
}

.str-chat__message--system {
  background: var(--str-chat__system-message-background-color);
  color: var(--str-chat__system-message-color);
  box-shadow: var(--str-chat__system-message-box-shadow);
  border-radius: var(--str-chat__system-message-border-radius);
  border-block-start: var(--str-chat__system-message-border-block-start);
  border-block-end: var(--str-chat__system-message-border-block-end);
  border-inline-start: var(--str-chat__system-message-border-inline-start);
  border-inline-end: var(--str-chat__system-message-border-inline-end);
  font: var(--str-chat__caption-text);
}

.str-chat__date-separator {
  background: var(--str-chat__date-separator-background-color);
  color: var(--str-chat__date-separator-color);
  box-shadow: var(--str-chat__date-separator-box-shadow);
  border-radius: var(--str-chat__date-separator-border-radius);
  border-block-start: var(--str-chat__date-separator-border-block-start);
  border-block-end: var(--str-chat__date-separator-border-block-end);
  border-inline-start: var(--str-chat__date-separator-border-inline-start);
  border-inline-end: var(--str-chat__date-separator-border-inline-end);
  font: var(--str-chat__body-text);
}
.str-chat__date-separator-line {
  background-color: var(--str-chat__date-separator-line-color);
  border: none;
}

.str-chat__message {
  background: var(--str-chat__message-background-color);
  color: var(--str-chat__message-color);
  box-shadow: var(--str-chat__message-box-shadow);
  border-radius: var(--str-chat__message-border-radius);
  border-block-start: var(--str-chat__message-border-block-start);
  border-block-end: var(--str-chat__message-border-block-end);
  border-inline-start: var(--str-chat__message-border-inline-start);
  border-inline-end: var(--str-chat__message-border-inline-end);
}
.str-chat__message a {
  text-decoration: none;
  color: var(--str-chat__message-link-color);
}
.str-chat__message .str-chat__message-mention {
  color: var(--str-chat__message-mention-color);
  font: var(--str-chat__body2-medium-text);
}
.str-chat__message .str-chat__message-bubble {
  background: var(--str-chat__message-bubble-background-color);
  color: var(--str-chat__message-bubble-color);
  box-shadow: var(--str-chat__message-bubble-box-shadow);
  border-radius: var(--str-chat__message-bubble-border-radius);
  border-block-start: var(--str-chat__message-bubble-border-block-start);
  border-block-end: var(--str-chat__message-bubble-border-block-end);
  border-inline-start: var(--str-chat__message-bubble-border-inline-start);
  border-inline-end: var(--str-chat__message-bubble-border-inline-end);
  font: var(--str-chat__body2-text);
}
.str-chat__message .str-chat__message--deleted-inner {
  background: var(--str-chat__deleted-message-background-color);
  color: var(--str-chat__deleted-message-color);
  box-shadow: var(--str-chat__deleted-message-box-shadow);
  border-radius: var(--str-chat__deleted-message-border-radius);
  border-block-start: var(--str-chat__deleted-message-border-block-start);
  border-block-end: var(--str-chat__deleted-message-border-block-end);
  border-inline-start: var(--str-chat__deleted-message-border-inline-start);
  border-inline-end: var(--str-chat__deleted-message-border-inline-end);
  font: var(--str-chat__body2-text);
}
.str-chat__message.str-chat__message--me .str-chat__message-bubble {
  color: var(--str-chat__own-message-bubble-color);
  background-color: var(--str-chat__own-message-bubble-background-color);
}
.str-chat__message .str-chat__message-options .str-chat__message-actions-box-button,
.str-chat__message .str-chat__message-options .str-chat__message-reply-in-thread-button,
.str-chat__message .str-chat__message-options .str-chat__message-reactions-button {
  outline: none;
  background: none;
  border: none;
  border-radius: var(--str-chat__message-options-border-radius);
}
.str-chat__message .str-chat__message-options .str-chat__message-actions-box-button .str-chat__message-action-icon path,
.str-chat__message .str-chat__message-options .str-chat__message-reply-in-thread-button .str-chat__message-action-icon path,
.str-chat__message .str-chat__message-options .str-chat__message-reactions-button .str-chat__message-action-icon path {
  fill: var(--str-chat__message-options-color);
}
.str-chat__message .str-chat__message-options .str-chat__message-actions-box-button:hover,
.str-chat__message .str-chat__message-options .str-chat__message-reply-in-thread-button:hover,
.str-chat__message .str-chat__message-options .str-chat__message-reactions-button:hover {
  background-color: var(--str-chat__message-options-hover-background-color);
}
.str-chat__message .str-chat__message-options .str-chat__message-actions-box-button:active .str-chat__message-action-icon path,
.str-chat__message .str-chat__message-options .str-chat__message-reply-in-thread-button:active .str-chat__message-action-icon path,
.str-chat__message .str-chat__message-options .str-chat__message-reactions-button:active .str-chat__message-action-icon path {
  fill: var(--str-chat__message-options-active-color);
}
.str-chat__message .str-chat__translation-notice button {
  font: var(--str-chat__body2-text);
  color: var(--str-chat__translation-notice-color);
  border: none;
  background: none;
}
.str-chat__message .str-chat__translation-notice button:active, .str-chat__message .str-chat__translation-notice button:hover {
  background: var(--str-chat__translation-notice-active-background-color);
}
.str-chat__message .str-chat__message-metadata {
  color: var(--str-chat__message-secondary-color);
  font: var(--str-chat__caption-text);
}
.str-chat__message .str-chat__message-metadata .str-chat__message-sender-name {
  font: var(--str-chat__caption-medium-text);
}
.str-chat__message .str-chat__message-status {
  color: var(--str-chat__message-status-color);
  font: var(--str-chat__body-text);
}
.str-chat__message .str-chat__message-status svg path {
  fill: var(--str-chat__message-status-color);
}
.str-chat__message .str-chat__message-replies-count-button-wrapper button {
  border: none;
  background-color: transparent;
  font: var(--str-chat__body-medium-text);
  color: var(--str-chat__message-replies-count-color);
}
.str-chat__message .str-chat__message--error-message {
  color: var(--str-chat__message-error-message-color);
  font: var(--str-chat__caption-text);
}
.str-chat__message .str-chat__message-error-icon {
  /* stylelint-disable-next-line selector-max-id */
}
.str-chat__message .str-chat__message-error-icon svg #background {
  fill: var(--str-chat__message-error-message-color);
}

.str-chat__message--highlighted {
  transition: background-color 0.1s ease-out;
  background-color: var(--str-chat__message-highlighted-background-color);
}

.str-chat__li:hover {
  background-color: var(--str-chat__message-active-bacground-color);
}

.str-chat__li--top .str-chat__message--other .str-chat__message-bubble,
.str-chat__li--single .str-chat__message--other .str-chat__message-bubble {
  border-end-start-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
}
.str-chat__li--top .str-chat__message--me .str-chat__message-bubble,
.str-chat__li--single .str-chat__message--me .str-chat__message-bubble {
  border-end-end-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
}

.str-chat__li--middle .str-chat__message--other .str-chat__message-bubble,
.str-chat__li--bottom .str-chat__message--other .str-chat__message-bubble {
  border-start-start-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
  border-end-start-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
}
.str-chat__li--middle .str-chat__message--me .str-chat__message-bubble,
.str-chat__li--bottom .str-chat__message--me .str-chat__message-bubble {
  border-start-end-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
  border-end-end-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
}

.str-chat__message-with-thread-link.str-chat__message--other .str-chat__message-bubble {
  border-end-start-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
}
.str-chat__message-with-thread-link.str-chat__message--me .str-chat__message-bubble {
  border-end-end-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
}

.str-chat__quoted-message-preview {
  background: var(--str-chat__message-background-color);
  color: var(--str-chat__message-color);
  box-shadow: var(--str-chat__message-box-shadow);
  border-radius: var(--str-chat__message-border-radius);
  border-block-start: var(--str-chat__message-border-block-start);
  border-block-end: var(--str-chat__message-border-block-end);
  border-inline-start: var(--str-chat__message-border-inline-start);
  border-inline-end: var(--str-chat__message-border-inline-end);
}
.str-chat__quoted-message-preview .str-chat__quoted-message-bubble {
  background: var(--str-chat__message-bubble-background-color);
  color: var(--str-chat__message-bubble-color);
  box-shadow: var(--str-chat__message-bubble-box-shadow);
  border-radius: var(--str-chat__message-bubble-border-radius);
  border-block-start: var(--str-chat__message-bubble-border-block-start);
  border-block-end: var(--str-chat__message-bubble-border-block-end);
  border-inline-start: var(--str-chat__message-bubble-border-inline-start);
  border-inline-end: var(--str-chat__message-bubble-border-inline-end);
  background-color: var(--str-chat__quoted-message-bubble-background-color);
  border-end-start-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
}

.str-chat__message-input .str-chat__quoted-message-preview .str-chat__quoted-message-bubble {
  background-color: var(--str-chat__message-bubble-background-color);
}

.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__message-actions-box-border-radius: var(--str-chat__border-radius-sm);
  /* The text/icon color of the component */
  --str-chat__message-actions-box-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__message-actions-box-background-color: var(--str-chat__secondary-background-color);
  /* Top border of the component */
  --str-chat__message-actions-box-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__message-actions-box-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__message-actions-box-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__message-actions-box-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__message-actions-box-box-shadow: 0 0 8px var(--str-chat__box-shadow-color);
  /* The border radius used for the borders of an item in the message actions box */
  --str-chat__message-actions-box-item-border-radius: 0;
  /* The text/icon color of an item in the message actions box */
  --str-chat__message-actions-box-item-color: var(--str-chat__text-color);
  /* The background color of an item in the message actions box */
  --str-chat__message-actions-box-item-background-color: transparent;
  /* The background color of an item in the message actions box when hovered */
  --str-chat__message-actions-box-item-hover-background-color: var(
    --str-chat__secondary-surface-color
  );
  /* Top border of an item in the message actions box */
  --str-chat__message-actions-box-item-border-block-start: none;
  /* Bottom border of an item in the message actions box */
  --str-chat__message-actions-box-item-border-block-end: none;
  /* Left (right in RTL layout) border of an item in the message actions box */
  --str-chat__message-actions-box-item-border-inline-start: none;
  /* Right (left in RTL layout) border of an item in the message actions box */
  --str-chat__message-actions-box-item-border-inline-end: none;
  /* Box shadow applied to an item in the message actions box */
  --str-chat__message-actions-box-item-box-shadow: none;
}

.str-chat__message-actions-box {
  background: var(--str-chat__message-actions-box-background-color);
  color: var(--str-chat__message-actions-box-color);
  box-shadow: var(--str-chat__message-actions-box-box-shadow);
  border-radius: var(--str-chat__message-actions-box-border-radius);
  border-block-start: var(--str-chat__message-actions-box-border-block-start);
  border-block-end: var(--str-chat__message-actions-box-border-block-end);
  border-inline-start: var(--str-chat__message-actions-box-border-inline-start);
  border-inline-end: var(--str-chat__message-actions-box-border-inline-end);
}
.str-chat__message-actions-box .str-chat__message-actions-list-item-button {
  background: var(--str-chat__message-actions-box-item-background-color);
  color: var(--str-chat__message-actions-box-item-color);
  box-shadow: var(--str-chat__message-actions-box-item-box-shadow);
  border-radius: var(--str-chat__message-actions-box-item-border-radius);
  border-block-start: var(--str-chat__message-actions-box-item-border-block-start);
  border-block-end: var(--str-chat__message-actions-box-item-border-block-end);
  border-inline-start: var(--str-chat__message-actions-box-item-border-inline-start);
  border-inline-end: var(--str-chat__message-actions-box-item-border-inline-end);
  font: var(--str-chat__subtitle-text);
}
.str-chat__message-actions-box .str-chat__message-actions-list-item-button:hover {
  background-color: var(--str-chat__message-actions-box-item-hover-background-color);
}

.str-chat {
  /* The border radius of the component */
  --str-chat__message-input-border-radius: 0;
  /* The text/icon color of the component */
  --str-chat__message-input-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__message-input-background-color: var(--str-chat__secondary-background-color);
  /* Top border of the component */
  --str-chat__message-input-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__message-input-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__message-input-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__message-input-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__message-input-box-shadow: none;
  /* The text/icon color of the dropzone container */
  --str-chat__dropzone-container-color: var(--str-chat__on-primary-color);
  /* The background color of the dropzone container */
  --str-chat__dropzone-container-background-color: var(--str-chat__primary-overlay-color);
  /* The backdrop filter applied to the dropzone container */
  --str-chat__dropzone-container-backdrop-filter: blur(3px);
  /* The border radius used for the borders of the textarea */
  --str-chat__message-textarea-border-radius: var(--str-chat__border-radius-md);
  /* The text/icon color of the textarea */
  --str-chat__message-textarea-color: var(--str-chat__text-color);
  /* The background color of the textarea */
  --str-chat__message-textarea-background-color: transparent;
  /* Top border of the textarea */
  --str-chat__message-textarea-border-block-start: 1px solid var(--str-chat__surface-color);
  /* Bottom border of the textarea */
  --str-chat__message-textarea-border-block-end: 1px solid var(--str-chat__surface-color);
  /* Left (right in RTL layout) border of the textarea */
  --str-chat__message-textarea-border-inline-start: 1px solid var(--str-chat__surface-color);
  /* Right (left in RTL layout) border of the textarea */
  --str-chat__message-textarea-border-inline-end: 1px solid var(--str-chat__surface-color);
  /* Box shadow applied to the textarea */
  --str-chat__message-textarea-box-shadow: none;
  /* The border radius used for the borders of the send button */
  --str-chat__message-send-border-radius: var(--str-chat__border-radius-circle);
  /* The text/icon color of the send button */
  --str-chat__message-send-color: var(--str-chat__primary-color);
  /* The background color of the send button */
  --str-chat__message-send-background-color: transparent;
  /* Top border of the send button */
  --str-chat__message-send-border-block-start: 0;
  /* Bottom border of the send button */
  --str-chat__message-send-border-block-end: 0;
  /* Left (right in RTL layout) border of the send button */
  --str-chat__message-send-border-inline-start: 0;
  /* Right (left in RTL layout) border of the send button */
  --str-chat__message-send-border-inline-end: 0;
  /* Box shadow applied to the send button */
  --str-chat__message-send-box-shadow: none;
  /* The color of the send button in disabled state */
  --str-chat__message-send-disabled-color: var(--str-chat__disabled-color);
  /* The background color of the send button in disabled state */
  --str-chat__message-send-disabled-background-color: transparent;
  /* The border radius used for the borders of the tool buttons of the message input (such as attachment upload button) */
  --str-chat__message-input-tools-border-radius: var(--str-chat__border-radius-circle);
  /* The text/icon color of the tool buttons of the message input (such as attachment upload button) */
  --str-chat__message-input-tools-color: var(--str-chat__text-low-emphasis-color);
  /* The background color of the tool buttons of the message input (such as attachment upload button) */
  --str-chat__message-input-tools-background-color: transparent;
  /* Top border of the tool buttons of the message input (such as attachment upload button) */
  --str-chat__message-input-tools-border-block-start: 0;
  /* Bottom border of the tool buttons of the message input (such as attachment upload button) */
  --str-chat__message-input-tools-border-block-end: 0;
  /* Left (right in RTL layout) border of the tool buttons of the message input (such as attachment upload button) */
  --str-chat__message-input-tools-border-inline-start: 0;
  /* Right (left in RTL layout) border of the tool buttons of the message input (such as attachment upload button) */
  --str-chat__message-input-tools-border-inline-end: 0;
  /* Box shadow applied to the tool buttons of the message input (such as attachment upload button) */
  --str-chat__message-input-tools-box-shadow: none;
  /* Thex text color of the message that is displayed when the use can't send messages */
  --str-chat__message-input-not-allowed-color: var(--str-chat__disabled-color);
  /* The border radius used for the borders of the cooldown timer */
  --str-chat__cooldown-border-radius: var(--str-chat__border-radius-circle);
  /* The text/icon color of the cooldown timer */
  --str-chat__cooldown-color: var(--str-chat__on-disabled-color);
  /* The background color of the cooldown timer */
  --str-chat__cooldown-background-color: var(--str-chat__disabled-color);
  /* Top border of the cooldown timer */
  --str-chat__cooldown-border-block-start: 0;
  /* Bottom border of the cooldown timer */
  --str-chat__cooldown-border-block-end: 0;
  /* Left (right in RTL layout) border of the cooldown timer */
  --str-chat__cooldown-border-inline-start: 0;
  /* Right (left in RTL layout) border of the cooldown timer */
  --str-chat__cooldown-border-inline-end: 0;
  /* Box shadow applied to the cooldown timer */
  --str-chat__cooldown-box-shadow: none;
}

.str-chat__message-input {
  background: var(--str-chat__message-input-background-color);
  color: var(--str-chat__message-input-color);
  box-shadow: var(--str-chat__message-input-box-shadow);
  border-radius: var(--str-chat__message-input-border-radius);
  border-block-start: var(--str-chat__message-input-border-block-start);
  border-block-end: var(--str-chat__message-input-border-block-end);
  border-inline-start: var(--str-chat__message-input-border-inline-start);
  border-inline-end: var(--str-chat__message-input-border-inline-end);
}
.str-chat__message-input .str-chat__dropzone-container {
  background-color: var(--str-chat__dropzone-container-background-color);
  color: var(--str-chat__dropzone-container-color);
  -webkit-backdrop-filter: var(--str-chat__dropzone-container-backdrop-filter);
          backdrop-filter: var(--str-chat__dropzone-container-backdrop-filter);
  font: var(--str-chat__subtitle-text);
}
.str-chat__message-input .str-chat__file-input-container {
  background: var(--str-chat__message-input-tools-background-color);
  color: var(--str-chat__message-input-tools-color);
  box-shadow: var(--str-chat__message-input-tools-box-shadow);
  border-radius: var(--str-chat__message-input-tools-border-radius);
  border-block-start: var(--str-chat__message-input-tools-border-block-start);
  border-block-end: var(--str-chat__message-input-tools-border-block-end);
  border-inline-start: var(--str-chat__message-input-tools-border-inline-start);
  border-inline-end: var(--str-chat__message-input-tools-border-inline-end);
}
.str-chat__message-input .str-chat__file-input-container svg path {
  fill: var(--str-chat__message-input-tools-color);
}
.str-chat__message-input .str-chat__attachment-preview-image-error svg path {
  fill: var(--str-chat__primary-color);
}
.str-chat__message-input .str-chat__message-textarea-container {
  background: var(--str-chat__message-textarea-background-color);
  color: var(--str-chat__message-textarea-color);
  box-shadow: var(--str-chat__message-textarea-box-shadow);
  border-radius: var(--str-chat__message-textarea-border-radius);
  border-block-start: var(--str-chat__message-textarea-border-block-start);
  border-block-end: var(--str-chat__message-textarea-border-block-end);
  border-inline-start: var(--str-chat__message-textarea-border-inline-start);
  border-inline-end: var(--str-chat__message-textarea-border-inline-end);
}
.str-chat__message-input .str-chat__message-textarea-container .str-chat__message-textarea {
  resize: none;
  border: none;
  color: var(--str-chat__message-textarea-color);
  background-color: transparent;
  box-shadow: none;
  outline: none;
  font: var(--str-chat__subtitle-text);
}
.str-chat__message-input .str-chat__send-button {
  background: var(--str-chat__message-send-background-color);
  color: var(--str-chat__message-send-color);
  box-shadow: var(--str-chat__message-send-box-shadow);
  border-radius: var(--str-chat__message-send-border-radius);
  border-block-start: var(--str-chat__message-send-border-block-start);
  border-block-end: var(--str-chat__message-send-border-block-end);
  border-inline-start: var(--str-chat__message-send-border-inline-start);
  border-inline-end: var(--str-chat__message-send-border-inline-end);
}
.str-chat__message-input .str-chat__send-button svg path {
  fill: var(--str-chat__message-send-color);
}
.str-chat__message-input .str-chat__send-button:disabled {
  background-color: var(--str-chat__message-send-disabled-background-color);
}
.str-chat__message-input .str-chat__send-button:disabled svg path {
  fill: var(--str-chat__message-send-disabled-color);
}
.str-chat__message-input .str-chat__message-input-cooldown {
  background: var(--str-chat__cooldown-background-color);
  color: var(--str-chat__cooldown-color);
  box-shadow: var(--str-chat__cooldown-box-shadow);
  border-radius: var(--str-chat__cooldown-border-radius);
  border-block-start: var(--str-chat__cooldown-border-block-start);
  border-block-end: var(--str-chat__cooldown-border-block-end);
  border-inline-start: var(--str-chat__cooldown-border-inline-start);
  border-inline-end: var(--str-chat__cooldown-border-inline-end);
  font: var(--str-chat__subtitle-medium-text);
}
.str-chat__message-input .str-chat__message-input-not-allowed {
  color: var(--str-chat__message-input-not-allowed-color);
  font: var(--str-chat__subtitle-text);
}
.str-chat__message-input .str-chat__quoted-message-preview-header .str-chat__quoted-message-reply-to-message {
  font: var(--str-chat__subtitle-medium-text);
}
.str-chat__message-input .str-chat__quoted-message-preview-header .str-chat__quoted-message-remove {
  background-color: transparent;
  border: none;
}
.str-chat__message-input .str-chat__quoted-message-preview-header .str-chat__quoted-message-remove svg path {
  fill: var(--str-chat__message-input-tools-color);
}

.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__message-list-border-radius: 0;
  /* The text/icon color of the component */
  --str-chat__message-list-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__message-list-background-color: var(--str-chat__background-color);
  /* Box shadow applied to the component */
  --str-chat__message-list-box-shadow: none;
  /* Top border of the component */
  --str-chat__message-list-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__message-list-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__message-list-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__message-list-border-inline-end: none;
  /* The border radius used for the borders of the jump to latest message button */
  --str-chat__jump-to-latest-message-border-radius: var(--str-chat__circle-fab-border-radius);
  /* The text/icon color of the jump to latest message button */
  --str-chat__jump-to-latest-message-color: var(--str-chat__circle-fab-color);
  /* The background color of the jump to latest message button */
  --str-chat__jump-to-latest-message-background-color: var(--str-chat__circle-fab-background-color);
  /* The background color of the jump to latest message button in pressed state */
  --str-chat__jump-to-latest-message-pressed-background-color: var(
    --str-chat__circle-fab-pressed-background-color
  );
  /* Box shadow applied to the jump to latest message button */
  --str-chat__jump-to-latest-message-box-shadow: var(--str-chat__circle-fab-box-shadow);
  /* Top border of the jump to latest message button */
  --str-chat__jump-to-latest-message-border-block-start: var(
    --str-chat__circle-fab-border-block-start
  );
  /* Bottom border of the jump to latest message button */
  --str-chat__jump-to-latest-message-border-block-end: var(--str-chat__circle-fab-border-block-end);
  /* Left (right in RTL layout) border of the jump to latest message button */
  --str-chat__jump-to-latest-message-border-inline-start: var(
    --str-chat__circle-fab-border-inline-start
  );
  /* Right (left in RTL layout) border of the jump to latest message button */
  --str-chat__jump-to-latest-message-border-inline-end: var(
    --str-chat__circle-fab-border-inline-end
  );
  /* The background color of the unread messages count on the jump to latest message button */
  --str-chat__jump-to-latest-message-unread-count-background-color: var(
    --str-chat__jump-to-latest-message-color
  );
  /* The text/icon color of the unread messages count on the jump to latest message button */
  --str-chat__jump-to-latest-message-unread-count-color: var(
    --str-chat__jump-to-latest-message-background-color
  );
  /* The color used for displaying thread replies and thread separator at the start of a thread */
  --str-chat__thread-head-start-color: var(--str-chat__text-low-emphasis-color);
  /* The color used for the separator below the first message in a thread */
  --str-chat__thread-head-start-border-block-end-color: var(--str-chat__surface-color);
}

.str-chat__list {
  background: var(--str-chat__message-list-background-color);
  color: var(--str-chat__message-list-color);
  box-shadow: var(--str-chat__message-list-box-shadow);
  border-radius: var(--str-chat__message-list-border-radius);
  border-block-start: var(--str-chat__message-list-border-block-start);
  border-block-end: var(--str-chat__message-list-border-block-end);
  border-inline-start: var(--str-chat__message-list-border-inline-start);
  border-inline-end: var(--str-chat__message-list-border-inline-end);
}
.str-chat__list .str-chat__parent-message-li {
  border-block-end: 1px solid var(--str-chat__thread-head-start-border-block-end-color);
}
.str-chat__list .str-chat__parent-message-li .str-chat__thread-start {
  color: var(--str-chat__thread-head-start-color);
  font: var(--str-chat__subtitle-text);
}

.str-chat__jump-to-latest-message .str-chat__circle-fab {
  background: var(--str-chat__jump-to-latest-message-background-color);
  color: var(--str-chat__jump-to-latest-message-color);
  box-shadow: var(--str-chat__jump-to-latest-message-box-shadow);
  border-radius: var(--str-chat__jump-to-latest-message-border-radius);
  border-block-start: var(--str-chat__jump-to-latest-message-border-block-start);
  border-block-end: var(--str-chat__jump-to-latest-message-border-block-end);
  border-inline-start: var(--str-chat__jump-to-latest-message-border-inline-start);
  border-inline-end: var(--str-chat__jump-to-latest-message-border-inline-end);
}
.str-chat__jump-to-latest-message .str-chat__circle-fab svg path {
  fill: var(--str-chat__jump-to-latest-message-color);
}
.str-chat__jump-to-latest-message .str-chat__circle-fab:active {
  background-color: var(--str-chat__jump-to-latest-message-pressed-background-color);
}
.str-chat__jump-to-latest-message .str-chat__circle-fab .str-chat__jump-to-latest-unread-count {
  background-color: var(--str-chat__jump-to-latest-message-unread-count-background-color);
  color: var(--str-chat__jump-to-latest-message-unread-count-color);
  border-radius: var(--str-chat__jump-to-latest-message-border-radius);
  font: var(--str-chat__caption-text);
}

/* Only available in React SDK. */
.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__virtual-list-border-radius: 0;
  /* The text/icon color of the component */
  --str-chat__virtual-list-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__virtual-list-background-color: var(--str-chat__background-color);
  /* Box shadow applied to the component */
  --str-chat__virtual-list-box-shadow: none;
  /* Top border of the component */
  --str-chat__virtual-list-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__virtual-list-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__virtual-list-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__virtual-list-border-inline-end: none;
}

.str-chat__virtual-list {
  background: var(--str-chat__virtual-list-background-color);
  color: var(--str-chat__virtual-list-color);
  box-shadow: var(--str-chat__virtual-list-box-shadow);
  border-radius: var(--str-chat__virtual-list-border-radius);
  border-block-start: var(--str-chat__virtual-list-border-block-start);
  border-block-end: var(--str-chat__virtual-list-border-block-end);
  border-inline-start: var(--str-chat__virtual-list-border-inline-start);
  border-inline-end: var(--str-chat__virtual-list-border-inline-end);
}
.str-chat__virtual-list .str-chat__parent-message-li {
  border-block-end: 1px solid var(--str-chat__thread-head-start-border-block-end-color);
}
.str-chat__virtual-list .str-chat__parent-message-li .str-chat__thread-start {
  color: var(--str-chat__thread-head-start-color);
  font: var(--str-chat__subtitle-text);
}

.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__message-reactions-border-radius: none;
  /* The text/icon color of the component */
  --str-chat__message-reactions-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__message-reactions-background-color: transparent;
  /* Top border of the component */
  --str-chat__message-reactions-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__message-reactions-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__message-reactions-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__message-reactions-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__message-reactions-box-shadow: none;
  /* The border radius used for the borders of a message reaction */
  --str-chat__message-reaction-border-radius: var(--str-chat__border-radius-xs);
  /* The text/icon color of a message reaction */
  --str-chat__message-reaction-color: var(--str-chat__text-color);
  /* The background color of a message reaction */
  --str-chat__message-reaction-background-color: var(--str-chat__tertiary-surface-color);
  /* Top border of a message reaction */
  --str-chat__message-reaction-border-block-start: none;
  /* Bottom border of a message reaction */
  --str-chat__message-reaction-border-block-end: none;
  /* Left (right in RTL layout) border of a message reaction */
  --str-chat__message-reaction-border-inline-start: none;
  /* Right (left in RTL layout) border of a message reaction */
  --str-chat__message-reaction-border-inline-end: none;
  /* Box shadow applied to a message reaction */
  --str-chat__message-reaction-box-shadow: none;
  /* The text/icon color of a message reaction, if the user reacted with that reaction */
  --str-chat__own-message-reaction-color: var(--str-chat__text-color);
  /* The background color of a message reaction, if the user reacted with that reaction */
  --str-chat__own-message-reaction-background-color: var(
    --str-chat__primary-surface-color-low-emphasis
  );
}

.str-chat__message-reactions-container .str-chat__message-reactions {
  background: var(--str-chat__message-reactions-background-color);
  color: var(--str-chat__message-reactions-color);
  box-shadow: var(--str-chat__message-reactions-box-shadow);
  border-radius: var(--str-chat__message-reactions-border-radius);
  border-block-start: var(--str-chat__message-reactions-border-block-start);
  border-block-end: var(--str-chat__message-reactions-border-block-end);
  border-inline-start: var(--str-chat__message-reactions-border-inline-start);
  border-inline-end: var(--str-chat__message-reactions-border-inline-end);
}
.str-chat__message-reactions-container .str-chat__message-reactions .str-chat__message-reaction {
  background: var(--str-chat__message-reaction-background-color);
  color: var(--str-chat__message-reaction-color);
  box-shadow: var(--str-chat__message-reaction-box-shadow);
  border-radius: var(--str-chat__message-reaction-border-radius);
  border-block-start: var(--str-chat__message-reaction-border-block-start);
  border-block-end: var(--str-chat__message-reaction-border-block-end);
  border-inline-start: var(--str-chat__message-reaction-border-inline-start);
  border-inline-end: var(--str-chat__message-reaction-border-inline-end);
  font: var(--str-chat__caption-text);
}
.str-chat__message-reactions-container .str-chat__message-reactions .str-chat__message-reaction.str-chat__message-reaction-own {
  color: var(--str-chat__own-message-reaction-color);
  background-color: var(--str-chat__own-message-reaction-background-color);
}

.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__message-reactions-options-border-radius: var(--str-chat__border-radius-circle);
  /* The text/icon color of the component */
  --str-chat__message-reactions-options-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__message-reactions-options-background-color: var(
    --str-chat__secondary-background-color
  );
  /* Top border of the component */
  --str-chat__message-reactions-options-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__message-reactions-options-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__message-reactions-options-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__message-reactions-options-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__message-reactions-options-box-shadow: 0 0 8px var(--str-chat__box-shadow-color);
  /* The border radius used for the borders of the component */
  --str-chat__message-reactions-option-border-radius: var(--str-chat__border-radius-md);
  /* The text/icon color of the component */
  --str-chat__message-reactions-option-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__message-reactions-option-background-color: var(
    --str-chat__secondary-background-color
  );
  /* The background color of the component when hovered */
  --str-chat__message-reactions-option-hover-background-color: var(
    --str-chat__primary-surface-color
  );
  /* The background color of the component when selected */
  --str-chat__message-reactions-option-selected-background-color: var(
    --str-chat__primary-color-low-emphasis
  );
  /* Top border of the component */
  --str-chat__message-reactions-option-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__message-reactions-option-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__message-reactions-option-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__message-reactions-option-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__message-reactions-option-box-shadow: none;
}

.str-chat__reaction-selector .str-chat__message-reactions-options {
  background: var(--str-chat__message-reactions-options-background-color);
  color: var(--str-chat__message-reactions-options-color);
  box-shadow: var(--str-chat__message-reactions-options-box-shadow);
  border-radius: var(--str-chat__message-reactions-options-border-radius);
  border-block-start: var(--str-chat__message-reactions-options-border-block-start);
  border-block-end: var(--str-chat__message-reactions-options-border-block-end);
  border-inline-start: var(--str-chat__message-reactions-options-border-inline-start);
  border-inline-end: var(--str-chat__message-reactions-options-border-inline-end);
}
.str-chat__reaction-selector .str-chat__message-reactions-options .str-chat__message-reactions-option {
  background: var(--str-chat__message-reactions-option-background-color);
  color: var(--str-chat__message-reactions-option-color);
  box-shadow: var(--str-chat__message-reactions-option-box-shadow);
  border-radius: var(--str-chat__message-reactions-option-border-radius);
  border-block-start: var(--str-chat__message-reactions-option-border-block-start);
  border-block-end: var(--str-chat__message-reactions-option-border-block-end);
  border-inline-start: var(--str-chat__message-reactions-option-border-inline-start);
  border-inline-end: var(--str-chat__message-reactions-option-border-inline-end);
}
.str-chat__reaction-selector .str-chat__message-reactions-options .str-chat__message-reactions-option:hover {
  background-color: var(--str-chat__message-reactions-option-hover-background-color);
}
.str-chat__reaction-selector .str-chat__message-reactions-options .str-chat__message-reactions-option.str-chat__message-reactions-option-selected {
  background-color: var(--str-chat__message-reactions-option-selected-background-color);
}

.str-chat {
  /* The border radius used for the borders of the content area of the component of the content area of the component */
  --str-chat__modal-border-radius: var(--str-chat__border-radius-sm);
  /* The text/icon color of the content area of the component */
  --str-chat__modal-color: var(--str-chat__text-color);
  /* The background color of the content area of the component */
  --str-chat__modal-background-color: var(--str-chat__secondary-background-color);
  /* The overlay color of the component */
  --str-chat__modal-overlay-color: var(--str-chat__secondary-overlay-color);
  /* The backdrop filter applied to the component */
  --str-chat__modal-overlay-backdrop-filter: blur(3px);
  /* Top border of the content area of the component */
  --str-chat__modal-border-block-start: none;
  /* Bottom border of the content area of the component */
  --str-chat__modal-border-block-end: none;
  /* Left (right in RTL layout) border of the content area of the component */
  --str-chat__modal-border-inline-start: none;
  /* Right (left in RTL layout) border of the content area of the component */
  --str-chat__modal-border-inline-end: none;
  /* Box shadow applied to the content area of the component */
  --str-chat__modal-box-shadow: none;
  /* The background color of the close button */
  --str-chat__modal-close-icon-background: var(--str-chat__text-low-emphasis-color);
  /* The icon color of the close button */
  --str-chat__modal-close-icon-color: var(--str-chat__on-disabled-color);
}

.str-chat__modal {
  background-color: var(--str-chat__modal-overlay-color);
  -webkit-backdrop-filter: var(--str-chat__modal-overlay-backdrop-filter);
          backdrop-filter: var(--str-chat__modal-overlay-backdrop-filter);
}
.str-chat__modal .str-chat__modal__inner {
  background: var(--str-chat__modal-background-color);
  color: var(--str-chat__modal-color);
  box-shadow: var(--str-chat__modal-box-shadow);
  border-radius: var(--str-chat__modal-border-radius);
  border-block-start: var(--str-chat__modal-border-block-start);
  border-block-end: var(--str-chat__modal-border-block-end);
  border-inline-start: var(--str-chat__modal-border-inline-start);
  border-inline-end: var(--str-chat__modal-border-inline-end);
}
.str-chat__modal .str-chat__modal__close-button {
  outline: none;
  background: none;
  border: none;
}
.str-chat__modal .str-chat__modal__close-button svg path {
  fill: var(--str-chat__modal-close-icon-color);
}
.str-chat__modal .str-chat__modal__close-button svg rect,
.str-chat__modal .str-chat__modal__close-button svg circle {
  fill: var(--str-chat__modal-close-icon-background);
}

.str-chat__message-attachment--card .str-chat__modal--open .str-chat__modal__inner.str-chat-react__modal__inner,
.str-chat__message-attachment--image .str-chat__modal--open .str-chat__modal__inner.str-chat-react__modal__inner,
.str-chat__message-attachment--gallery .str-chat__modal--open .str-chat__modal__inner.str-chat-react__modal__inner {
  background-color: transparent;
  width: unset;
  height: unset;
  padding: 0;
}
.str-chat__message-attachment--card .str-chat__modal--open .str-chat__modal__inner.str-chat-react__modal__inner img,
.str-chat__message-attachment--image .str-chat__modal--open .str-chat__modal__inner.str-chat-react__modal__inner img,
.str-chat__message-attachment--gallery .str-chat__modal--open .str-chat__modal__inner.str-chat-react__modal__inner img {
  max-width: unset;
  max-height: calc(100vh - 80px);
  cursor: default;
}

/* Only available in React SDK. */
.str-chat {
  /* The background color of the component */
  --str-chat__message-notification-background-color: var(--str-chat__primary-color);
  /* Top border of the component */
  --str-chat__message-notification-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__message-notification-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__message-notification-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__message-notification-border-inline-end: none;
  /* The border radius used for the borders of the component */
  --str-chat__message-notification-border-radius: 50px;
  /* Box shadow applied to the component */
  --str-chat__message-notification-box-shadow: none;
  /* The text/icon color of the component */
  --str-chat__message-notification-color: var(--str-chat__on-primary-color);
}

.str-chat__message-notification {
  background: var(--str-chat__message-notification-background-color);
  color: var(--str-chat__message-notification-color);
  box-shadow: var(--str-chat__message-notification-box-shadow);
  border-radius: var(--str-chat__message-notification-border-radius);
  border-block-start: var(--str-chat__message-notification-border-block-start);
  border-block-end: var(--str-chat__message-notification-border-block-end);
  border-inline-start: var(--str-chat__message-notification-border-inline-start);
  border-inline-end: var(--str-chat__message-notification-border-inline-end);
  font: var(--str-chat__caption-text);
  cursor: pointer;
}

.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__notification-list-border-radius: none;
  /* The text/icon color of the component */
  --str-chat__notification-list-color: var(--str-chat__notification-list-text-color);
  /* The background color of the component */
  --str-chat__notification-list-background-color: transparent;
  /* Top border of the component */
  --str-chat__notification-list-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__notification-list-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__notification-list-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__notification-list-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__notification-list-box-shadow: none;
}

.str-chat__list-notifications {
  background: var(--str-chat__notification-list-background-color);
  color: var(--str-chat__notification-list-color);
  box-shadow: var(--str-chat__notification-list-box-shadow);
  border-radius: var(--str-chat__notification-list-border-radius);
  border-block-start: var(--str-chat__notification-list-border-block-start);
  border-block-end: var(--str-chat__notification-list-border-block-end);
  border-inline-start: var(--str-chat__notification-list-border-inline-start);
  border-inline-end: var(--str-chat__notification-list-border-inline-end);
}

.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__notification-border-radius: var(--str-chat__border-radius-sm);
  /* The text/icon color of the component */
  --str-chat__notification-color: var(--str-chat__opaque-surface-text-color);
  /* The background color of the component */
  --str-chat__notification-background-color: var(--str-chat__opaque-surface-background-color);
  /* Top border of the component */
  --str-chat__notification-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__notification-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__notification-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__notification-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__notification-box-shadow: 0 0 8px var(--str-chat__box-shadow-color);
}

.str-chat__notification {
  background: var(--str-chat__notification-background-color);
  color: var(--str-chat__notification-color);
  box-shadow: var(--str-chat__notification-box-shadow);
  border-radius: var(--str-chat__notification-border-radius);
  border-block-start: var(--str-chat__notification-border-block-start);
  border-block-end: var(--str-chat__notification-border-block-end);
  border-inline-start: var(--str-chat__notification-border-inline-start);
  border-inline-end: var(--str-chat__notification-border-inline-end);
  font: var(--str-chat__subtitle-text);
}

.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__thread-border-radius: 0;
  /* The text/icon color of the component */
  --str-chat__thread-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__thread-background-color: var(--str-chat__secondary-background-color);
  /* Top border of the component */
  --str-chat__thread-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__thread-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__thread-border-inline-start: 1px solid var(--str-chat__surface-color);
  /* Right (left in RTL layout) border of the component */
  --str-chat__thread-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__thread-box-shadow: none;
  /* The border radius used for the borders of the thread header */
  --str-chat__thread-header-border-radius: 0;
  /* The text/icon color of the thread header */
  --str-chat__thread-header-color: var(--str-chat__text-color);
  /* The background color of the thread header */
  --str-chat__thread-header-background-color: var(--str-chat__secondary-background-color);
  /* Top border of the thread header */
  --str-chat__thread-header-border-block-start: none;
  /* Bottom border of the thread header */
  --str-chat__thread-header-border-block-end: none;
  /* Left (right in RTL layout) border of the thread header */
  --str-chat__thread-header-border-inline-start: none;
  /* Right (left in RTL layout) border of the thread header */
  --str-chat__thread-header-border-inline-end: none;
  /* Box shadow applied to the thread header */
  --str-chat__thread-header-box-shadow: none;
  /* The text/icon color used to display less emphasized text in the channel header */
  --str-chat__thread-header-info-color: var(--str-chat__text-low-emphasis-color);
}

.str-chat__thread-container {
  background: var(--str-chat__thread-background-color);
  color: var(--str-chat__thread-color);
  box-shadow: var(--str-chat__thread-box-shadow);
  border-radius: var(--str-chat__thread-border-radius);
  border-block-start: var(--str-chat__thread-border-block-start);
  border-block-end: var(--str-chat__thread-border-block-end);
  border-inline-start: var(--str-chat__thread-border-inline-start);
  border-inline-end: var(--str-chat__thread-border-inline-end);
}
.str-chat__thread-container .str-chat__thread-header {
  background: var(--str-chat__thread-header-background-color);
  color: var(--str-chat__thread-header-color);
  box-shadow: var(--str-chat__thread-header-box-shadow);
  border-radius: var(--str-chat__thread-header-border-radius);
  border-block-start: var(--str-chat__thread-header-border-block-start);
  border-block-end: var(--str-chat__thread-header-border-block-end);
  border-inline-start: var(--str-chat__thread-header-border-inline-start);
  border-inline-end: var(--str-chat__thread-header-border-inline-end);
}
.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-name,
.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-title {
  font: var(--str-chat__subtitle-medium-text);
}
.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-channel-name,
.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-subtitle {
  font: var(--str-chat__body-text);
  color: var(--str-chat__thread-header-info-color);
}
.str-chat__thread-container .str-chat__thread-header .str-chat__close-thread-button {
  background-color: transparent;
  border: none;
}
.str-chat__thread-container .str-chat__thread-header .str-chat__close-thread-button svg path {
  fill: var(--str-chat__thread-color);
}

.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__tooltip-border-radius: var(--str-chat__border-radius-xs);
  /* The text/icon color of the component */
  --str-chat__tooltip-color: var(--str-chat__text-color);
  /* The background color of the component */
  --str-chat__tooltip-background-color: var(--str-chat__secondary-background-color);
  /* Top border of the component */
  --str-chat__tooltip-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__tooltip-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__tooltip-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__tooltip-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__tooltip-box-shadow: 0 0 20px var(--str-chat__box-shadow-color);
}

.str-chat__tooltip {
  background: var(--str-chat__tooltip-background-color);
  color: var(--str-chat__tooltip-color);
  box-shadow: var(--str-chat__tooltip-box-shadow);
  border-radius: var(--str-chat__tooltip-border-radius);
  border-block-start: var(--str-chat__tooltip-border-block-start);
  border-block-end: var(--str-chat__tooltip-border-block-end);
  border-inline-start: var(--str-chat__tooltip-border-inline-start);
  border-inline-end: var(--str-chat__tooltip-border-inline-end);
  font: var(--str-chat__caption-text);
}
.str-chat__tooltip::after {
  background-color: var(--str-chat__tooltip-background-color);
}

.str-chat {
  /* The border radius used for the borders of the component */
  --str-chat__typing-indicator-border-radius: none;
  /* The text/icon color of the component */
  --str-chat__typing-indicator-color: var(--str-chat__text-low-emphasis-color);
  /* The background color of the component */
  --str-chat__typing-indicator-background-color: var(--str-chat__overlay-color);
  /* Top border of the component */
  --str-chat__typing-indicator-border-block-start: none;
  /* Bottom border of the component */
  --str-chat__typing-indicator-border-block-end: none;
  /* Left (right in RTL layout) border of the component */
  --str-chat__typing-indicator-border-inline-start: none;
  /* Right (left in RTL layout) border of the component */
  --str-chat__typing-indicator-border-inline-end: none;
  /* Box shadow applied to the component */
  --str-chat__typing-indicator-box-shadow: none;
  /* Background color of the animated dots in the typing indicator */
  --str-chat__typing-indicator-dot-background-color: var(--str-chat__text-color);
}

.str-chat__typing-indicator {
  background: var(--str-chat__typing-indicator-background-color);
  color: var(--str-chat__typing-indicator-color);
  box-shadow: var(--str-chat__typing-indicator-box-shadow);
  border-radius: var(--str-chat__typing-indicator-border-radius);
  border-block-start: var(--str-chat__typing-indicator-border-block-start);
  border-block-end: var(--str-chat__typing-indicator-border-block-end);
  border-inline-start: var(--str-chat__typing-indicator-border-inline-start);
  border-inline-end: var(--str-chat__typing-indicator-border-inline-end);
}
.str-chat__typing-indicator .str-chat__typing-indicator__dots .str-chat__typing-indicator__dot {
  border-radius: 999px;
  animation: dotFlashing 1s infinite alternate;
  background-color: var(--str-chat__typing-indicator-dot-background-color);
}
.str-chat__typing-indicator .str-chat__typing-indicator__dots .str-chat__typing-indicator__dot:nth-child(1) {
  animation-delay: 0s;
}
.str-chat__typing-indicator .str-chat__typing-indicator__dots .str-chat__typing-indicator__dot:nth-child(2) {
  animation-delay: 0.5s;
}
.str-chat__typing-indicator .str-chat__typing-indicator__dots .str-chat__typing-indicator__dot:nth-child(3) {
  animation-delay: 1s;
}
@keyframes dotFlashing {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.2;
  }
}
/*!******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/@ng-select/ng-select/themes/default.theme.css?ngGlobalStyle ***!
  \******************************************************************************************************************************************************************************************************************************************************************/
.ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#b3b3b3 #ccc #d9d9d9}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}.ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #333}.ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}.ng-select.ng-select-opened.ng-select-right>.ng-select-container{border-top-right-radius:0;border-bottom-right-radius:0}.ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-opened.ng-select-left>.ng-select-container{border-top-left-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:#007eff;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 0 3px rgba(0,126,255,0.1)}.ng-select.ng-select-disabled>.ng-select-container{background-color:#f9f9f9}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{color:#333;background-color:#fff;border-radius:4px;border:1px solid #ccc;min-height:36px;align-items:center}.ng-select .ng-select-container:hover{box-shadow:0 1px 0 rgba(0,0,0,0.06)}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px}[dir="rtl"] .ng-select .ng-select-container .ng-value-container{padding-right:10px;padding-left:0}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#999}.ng-select.ng-select-single .ng-select-container{height:36px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:5px;left:0;padding-left:10px;padding-right:50px}[dir="rtl"] .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{padding-right:10px;padding-left:50px}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e6e6e6}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:5px;padding-left:7px}[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-right:7px;padding-left:0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-bottom:5px;color:#333;background-color:#ebf5ff;border-radius:2px;margin-right:5px}[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{margin-right:0;margin-left:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:0;padding-right:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#d1e8ff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #b8dbff}[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-left:1px solid #b8dbff;border-right:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #b8dbff}[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:0;border-right:1px solid #b8dbff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 3px 3px}[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 3px 3px 0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{color:#000}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-bottom:5px;padding-left:3px}[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-right:3px;padding-left:0}.ng-select .ng-clear-wrapper{color:#999}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#D0021B}.ng-select .ng-clear-wrapper:focus .ng-clear{color:#D0021B}.ng-select .ng-clear-wrapper:focus{outline:none}.ng-select .ng-spinner-zone{padding:5px 5px 0 0}[dir="rtl"] .ng-select .ng-spinner-zone{padding:5px 0 0 5px}.ng-select .ng-arrow-wrapper{width:25px;padding-right:5px}[dir="rtl"] .ng-select .ng-arrow-wrapper{padding-left:5px;padding-right:0}.ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}.ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}.ng-dropdown-panel{background-color:#fff;border:1px solid #ccc;box-shadow:0 1px 0 rgba(0,0,0,0.06);left:0}.ng-dropdown-panel.ng-select-top{bottom:100%;border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}.ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}.ng-dropdown-panel.ng-select-right{left:100%;top:0;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}.ng-dropdown-panel.ng-select-right .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px}.ng-dropdown-panel.ng-select-bottom{top:100%;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}.ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.ng-dropdown-panel.ng-select-left{left:-100%;top:0;border-top-left-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}.ng-dropdown-panel.ng-select-left .ng-dropdown-panel-items .ng-option:first-child{border-top-left-radius:4px}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:rgba(0,0,0,0.54);cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#f5faff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{color:rgba(0,0,0,0.54);background-color:#ebf5ff;font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:rgba(0,0,0,0.87);padding:8px 10px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#333;background-color:#ebf5ff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#f5faff;color:#333}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}[dir="rtl"] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:22px;padding-left:0}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}[dir="rtl"] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-left:5px;padding-right:0}[dir="rtl"] .ng-dropdown-panel{direction:rtl;text-align:right}

/*!**************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/intl-tel-input/build/css/intlTelInput.css?ngGlobalStyle ***!
  \**************************************************************************************************************************************************************************************************************************************************************/
.iti {
  position: relative;
  display: inline-block;
}
.iti * {
  box-sizing: border-box;
}
.iti__hide {
  display: none;
}
.iti__v-hide {
  visibility: hidden;
}
.iti input.iti__tel-input,
.iti input.iti__tel-input[type=text],
.iti input.iti__tel-input[type=tel] {
  position: relative;
  z-index: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-right: 36px;
  margin-right: 0;
}
.iti__flag-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 1px;
}
.iti__selected-flag {
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 6px 0 8px;
}
.iti__arrow {
  margin-left: 6px;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid #555;
}
[dir=rtl] .iti__arrow {
  margin-right: 6px;
  margin-left: 0;
}
.iti__arrow--up {
  border-top: none;
  border-bottom: 4px solid #555;
}
.iti__dropdown-content {
  border-radius: 3px;
  background-color: white;
}
.iti--inline-dropdown .iti__dropdown-content {
  position: absolute;
  z-index: 2;
  margin-top: 3px;
  margin-left: -1px;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}
.iti__dropdown-content--dropup {
  bottom: 100%;
  margin-bottom: 3px;
}
.iti__search-input {
  width: 100%;
  border-width: 0;
  border-radius: 3px;
  padding: 9px 12px;
}
.iti__search-input + .iti__country-list {
  border-top: 1px solid #ccc;
}
.iti__country-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.iti--inline-dropdown .iti__country-list {
  max-height: 185px;
}
.iti--flexible-dropdown-width .iti__country-list {
  white-space: nowrap;
}
@media (max-width: 500px) {
  .iti--flexible-dropdown-width .iti__country-list {
    white-space: normal;
  }
}
.iti__flag-box {
  display: inline-block;
  width: 20px;
}
.iti__divider {
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #ccc;
}
.iti__country {
  display: flex;
  align-items: center;
  padding: 8px 8px;
  outline: none;
}
.iti__dial-code {
  color: #999;
}
.iti__country.iti__highlight {
  background-color: rgba(0, 0, 0, 0.05);
}
.iti__flag-box, .iti__country-name {
  margin-right: 8px;
}
[dir=rtl] .iti__flag-box, [dir=rtl] .iti__country-name {
  margin-right: 0;
  margin-left: 8px;
}
.iti--allow-dropdown input.iti__tel-input,
.iti--allow-dropdown input.iti__tel-input[type=text],
.iti--allow-dropdown input.iti__tel-input[type=tel], .iti--show-selected-dial-code input.iti__tel-input,
.iti--show-selected-dial-code input.iti__tel-input[type=text],
.iti--show-selected-dial-code input.iti__tel-input[type=tel] {
  padding-right: 6px;
  padding-left: 52px;
  margin-left: 0;
}
[dir=rtl] .iti--allow-dropdown input.iti__tel-input,
[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=text],
[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel], [dir=rtl] .iti--show-selected-dial-code input.iti__tel-input,
[dir=rtl] .iti--show-selected-dial-code input.iti__tel-input[type=text],
[dir=rtl] .iti--show-selected-dial-code input.iti__tel-input[type=tel] {
  padding-right: 52px;
  padding-left: 6px;
  margin-right: 0;
}
.iti--allow-dropdown .iti__flag-container, .iti--show-selected-dial-code .iti__flag-container {
  right: auto;
  left: 0;
}
[dir=rtl] .iti--allow-dropdown .iti__flag-container, [dir=rtl] .iti--show-selected-dial-code .iti__flag-container {
  right: 0;
  left: auto;
}
.iti--allow-dropdown .iti__flag-container:hover {
  cursor: pointer;
}
.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
  background-color: rgba(0, 0, 0, 0.05);
}
.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover,
.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover {
  cursor: default;
}
.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover .iti__selected-flag,
.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover .iti__selected-flag {
  background-color: transparent;
}
.iti--show-selected-dial-code .iti__selected-flag {
  background-color: rgba(0, 0, 0, 0.05);
}
.iti--show-selected-dial-code.iti--show-flags .iti__selected-dial-code {
  margin-left: 6px;
}
[dir=rtl] .iti--show-selected-dial-code.iti--show-flags .iti__selected-dial-code {
  margin-left: 0;
  margin-right: 6px;
}
.iti--container {
  position: fixed;
  top: -1000px;
  left: -1000px;
  z-index: 1060;
  padding: 1px;
}
.iti--container:hover {
  cursor: pointer;
}

.iti--fullscreen-popup.iti--container {
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.iti--fullscreen-popup.iti--container.iti--country-search {
  justify-content: flex-start;
}
.iti--fullscreen-popup .iti__dropdown-content {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  position: relative;
}
.iti--fullscreen-popup .iti__country {
  padding: 10px 10px;
  line-height: 1.5em;
}

.iti__flag {
  width: 20px;
}
.iti__flag.iti__be {
  width: 18px;
}
.iti__flag.iti__ch {
  width: 15px;
}
.iti__flag.iti__mc {
  width: 19px;
}
.iti__flag.iti__ne {
  width: 18px;
}
.iti__flag.iti__np {
  width: 13px;
}
.iti__flag.iti__va {
  width: 15px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2x) {
  .iti__flag {
    background-size: 5762px 15px;
  }
}
.iti__flag.iti__ac {
  height: 10px;
  background-position: 0px 0px;
}
.iti__flag.iti__ad {
  height: 14px;
  background-position: -22px 0px;
}
.iti__flag.iti__ae {
  height: 10px;
  background-position: -44px 0px;
}
.iti__flag.iti__af {
  height: 14px;
  background-position: -66px 0px;
}
.iti__flag.iti__ag {
  height: 14px;
  background-position: -88px 0px;
}
.iti__flag.iti__ai {
  height: 10px;
  background-position: -110px 0px;
}
.iti__flag.iti__al {
  height: 15px;
  background-position: -132px 0px;
}
.iti__flag.iti__am {
  height: 10px;
  background-position: -154px 0px;
}
.iti__flag.iti__ao {
  height: 14px;
  background-position: -176px 0px;
}
.iti__flag.iti__aq {
  height: 14px;
  background-position: -198px 0px;
}
.iti__flag.iti__ar {
  height: 13px;
  background-position: -220px 0px;
}
.iti__flag.iti__as {
  height: 10px;
  background-position: -242px 0px;
}
.iti__flag.iti__at {
  height: 14px;
  background-position: -264px 0px;
}
.iti__flag.iti__au {
  height: 10px;
  background-position: -286px 0px;
}
.iti__flag.iti__aw {
  height: 14px;
  background-position: -308px 0px;
}
.iti__flag.iti__ax {
  height: 13px;
  background-position: -330px 0px;
}
.iti__flag.iti__az {
  height: 10px;
  background-position: -352px 0px;
}
.iti__flag.iti__ba {
  height: 10px;
  background-position: -374px 0px;
}
.iti__flag.iti__bb {
  height: 14px;
  background-position: -396px 0px;
}
.iti__flag.iti__bd {
  height: 12px;
  background-position: -418px 0px;
}
.iti__flag.iti__be {
  height: 15px;
  background-position: -440px 0px;
}
.iti__flag.iti__bf {
  height: 14px;
  background-position: -460px 0px;
}
.iti__flag.iti__bg {
  height: 12px;
  background-position: -482px 0px;
}
.iti__flag.iti__bh {
  height: 12px;
  background-position: -504px 0px;
}
.iti__flag.iti__bi {
  height: 12px;
  background-position: -526px 0px;
}
.iti__flag.iti__bj {
  height: 14px;
  background-position: -548px 0px;
}
.iti__flag.iti__bl {
  height: 14px;
  background-position: -570px 0px;
}
.iti__flag.iti__bm {
  height: 10px;
  background-position: -592px 0px;
}
.iti__flag.iti__bn {
  height: 10px;
  background-position: -614px 0px;
}
.iti__flag.iti__bo {
  height: 14px;
  background-position: -636px 0px;
}
.iti__flag.iti__bq {
  height: 14px;
  background-position: -658px 0px;
}
.iti__flag.iti__br {
  height: 14px;
  background-position: -680px 0px;
}
.iti__flag.iti__bs {
  height: 10px;
  background-position: -702px 0px;
}
.iti__flag.iti__bt {
  height: 14px;
  background-position: -724px 0px;
}
.iti__flag.iti__bv {
  height: 15px;
  background-position: -746px 0px;
}
.iti__flag.iti__bw {
  height: 14px;
  background-position: -768px 0px;
}
.iti__flag.iti__by {
  height: 10px;
  background-position: -790px 0px;
}
.iti__flag.iti__bz {
  height: 12px;
  background-position: -812px 0px;
}
.iti__flag.iti__ca {
  height: 10px;
  background-position: -834px 0px;
}
.iti__flag.iti__cc {
  height: 10px;
  background-position: -856px 0px;
}
.iti__flag.iti__cd {
  height: 15px;
  background-position: -878px 0px;
}
.iti__flag.iti__cf {
  height: 14px;
  background-position: -900px 0px;
}
.iti__flag.iti__cg {
  height: 14px;
  background-position: -922px 0px;
}
.iti__flag.iti__ch {
  height: 15px;
  background-position: -944px 0px;
}
.iti__flag.iti__ci {
  height: 14px;
  background-position: -961px 0px;
}
.iti__flag.iti__ck {
  height: 10px;
  background-position: -983px 0px;
}
.iti__flag.iti__cl {
  height: 14px;
  background-position: -1005px 0px;
}
.iti__flag.iti__cm {
  height: 14px;
  background-position: -1027px 0px;
}
.iti__flag.iti__cn {
  height: 14px;
  background-position: -1049px 0px;
}
.iti__flag.iti__co {
  height: 14px;
  background-position: -1071px 0px;
}
.iti__flag.iti__cp {
  height: 14px;
  background-position: -1093px 0px;
}
.iti__flag.iti__cq {
  height: 12px;
  background-position: -1115px 0px;
}
.iti__flag.iti__cr {
  height: 12px;
  background-position: -1137px 0px;
}
.iti__flag.iti__cu {
  height: 10px;
  background-position: -1159px 0px;
}
.iti__flag.iti__cv {
  height: 12px;
  background-position: -1181px 0px;
}
.iti__flag.iti__cw {
  height: 14px;
  background-position: -1203px 0px;
}
.iti__flag.iti__cx {
  height: 10px;
  background-position: -1225px 0px;
}
.iti__flag.iti__cy {
  height: 14px;
  background-position: -1247px 0px;
}
.iti__flag.iti__cz {
  height: 14px;
  background-position: -1269px 0px;
}
.iti__flag.iti__de {
  height: 12px;
  background-position: -1291px 0px;
}
.iti__flag.iti__dg {
  height: 10px;
  background-position: -1313px 0px;
}
.iti__flag.iti__dj {
  height: 14px;
  background-position: -1335px 0px;
}
.iti__flag.iti__dk {
  height: 15px;
  background-position: -1357px 0px;
}
.iti__flag.iti__dm {
  height: 10px;
  background-position: -1379px 0px;
}
.iti__flag.iti__do {
  height: 14px;
  background-position: -1401px 0px;
}
.iti__flag.iti__dz {
  height: 14px;
  background-position: -1423px 0px;
}
.iti__flag.iti__ea {
  height: 14px;
  background-position: -1445px 0px;
}
.iti__flag.iti__ec {
  height: 14px;
  background-position: -1467px 0px;
}
.iti__flag.iti__ee {
  height: 13px;
  background-position: -1489px 0px;
}
.iti__flag.iti__eg {
  height: 14px;
  background-position: -1511px 0px;
}
.iti__flag.iti__eh {
  height: 10px;
  background-position: -1533px 0px;
}
.iti__flag.iti__er {
  height: 10px;
  background-position: -1555px 0px;
}
.iti__flag.iti__es {
  height: 14px;
  background-position: -1577px 0px;
}
.iti__flag.iti__et {
  height: 10px;
  background-position: -1599px 0px;
}
.iti__flag.iti__eu {
  height: 14px;
  background-position: -1621px 0px;
}
.iti__flag.iti__ez {
  height: 14px;
  background-position: -1643px 0px;
}
.iti__flag.iti__fi {
  height: 12px;
  background-position: -1665px 0px;
}
.iti__flag.iti__fj {
  height: 10px;
  background-position: -1687px 0px;
}
.iti__flag.iti__fk {
  height: 10px;
  background-position: -1709px 0px;
}
.iti__flag.iti__fm {
  height: 11px;
  background-position: -1731px 0px;
}
.iti__flag.iti__fo {
  height: 15px;
  background-position: -1753px 0px;
}
.iti__flag.iti__fr {
  height: 14px;
  background-position: -1775px 0px;
}
.iti__flag.iti__fx {
  height: 14px;
  background-position: -1797px 0px;
}
.iti__flag.iti__ga {
  height: 15px;
  background-position: -1819px 0px;
}
.iti__flag.iti__gb {
  height: 10px;
  background-position: -1841px 0px;
}
.iti__flag.iti__gd {
  height: 12px;
  background-position: -1863px 0px;
}
.iti__flag.iti__ge {
  height: 14px;
  background-position: -1885px 0px;
}
.iti__flag.iti__gf {
  height: 14px;
  background-position: -1907px 0px;
}
.iti__flag.iti__gg {
  height: 14px;
  background-position: -1929px 0px;
}
.iti__flag.iti__gh {
  height: 14px;
  background-position: -1951px 0px;
}
.iti__flag.iti__gi {
  height: 10px;
  background-position: -1973px 0px;
}
.iti__flag.iti__gl {
  height: 14px;
  background-position: -1995px 0px;
}
.iti__flag.iti__gm {
  height: 14px;
  background-position: -2017px 0px;
}
.iti__flag.iti__gn {
  height: 14px;
  background-position: -2039px 0px;
}
.iti__flag.iti__gp {
  height: 14px;
  background-position: -2061px 0px;
}
.iti__flag.iti__gq {
  height: 14px;
  background-position: -2083px 0px;
}
.iti__flag.iti__gr {
  height: 14px;
  background-position: -2105px 0px;
}
.iti__flag.iti__gs {
  height: 10px;
  background-position: -2127px 0px;
}
.iti__flag.iti__gt {
  height: 13px;
  background-position: -2149px 0px;
}
.iti__flag.iti__gu {
  height: 11px;
  background-position: -2171px 0px;
}
.iti__flag.iti__gw {
  height: 10px;
  background-position: -2193px 0px;
}
.iti__flag.iti__gy {
  height: 12px;
  background-position: -2215px 0px;
}
.iti__flag.iti__hk {
  height: 14px;
  background-position: -2237px 0px;
}
.iti__flag.iti__hm {
  height: 10px;
  background-position: -2259px 0px;
}
.iti__flag.iti__hn {
  height: 10px;
  background-position: -2281px 0px;
}
.iti__flag.iti__hr {
  height: 10px;
  background-position: -2303px 0px;
}
.iti__flag.iti__ht {
  height: 12px;
  background-position: -2325px 0px;
}
.iti__flag.iti__hu {
  height: 10px;
  background-position: -2347px 0px;
}
.iti__flag.iti__ic {
  height: 14px;
  background-position: -2369px 0px;
}
.iti__flag.iti__id {
  height: 14px;
  background-position: -2391px 0px;
}
.iti__flag.iti__ie {
  height: 10px;
  background-position: -2413px 0px;
}
.iti__flag.iti__il {
  height: 15px;
  background-position: -2435px 0px;
}
.iti__flag.iti__im {
  height: 10px;
  background-position: -2457px 0px;
}
.iti__flag.iti__in {
  height: 14px;
  background-position: -2479px 0px;
}
.iti__flag.iti__io {
  height: 10px;
  background-position: -2501px 0px;
}
.iti__flag.iti__iq {
  height: 14px;
  background-position: -2523px 0px;
}
.iti__flag.iti__ir {
  height: 12px;
  background-position: -2545px 0px;
}
.iti__flag.iti__is {
  height: 15px;
  background-position: -2567px 0px;
}
.iti__flag.iti__it {
  height: 14px;
  background-position: -2589px 0px;
}
.iti__flag.iti__je {
  height: 12px;
  background-position: -2611px 0px;
}
.iti__flag.iti__jm {
  height: 10px;
  background-position: -2633px 0px;
}
.iti__flag.iti__jo {
  height: 10px;
  background-position: -2655px 0px;
}
.iti__flag.iti__jp {
  height: 14px;
  background-position: -2677px 0px;
}
.iti__flag.iti__ke {
  height: 14px;
  background-position: -2699px 0px;
}
.iti__flag.iti__kg {
  height: 12px;
  background-position: -2721px 0px;
}
.iti__flag.iti__kh {
  height: 13px;
  background-position: -2743px 0px;
}
.iti__flag.iti__ki {
  height: 10px;
  background-position: -2765px 0px;
}
.iti__flag.iti__km {
  height: 12px;
  background-position: -2787px 0px;
}
.iti__flag.iti__kn {
  height: 14px;
  background-position: -2809px 0px;
}
.iti__flag.iti__kp {
  height: 10px;
  background-position: -2831px 0px;
}
.iti__flag.iti__kr {
  height: 14px;
  background-position: -2853px 0px;
}
.iti__flag.iti__kw {
  height: 10px;
  background-position: -2875px 0px;
}
.iti__flag.iti__ky {
  height: 10px;
  background-position: -2897px 0px;
}
.iti__flag.iti__kz {
  height: 10px;
  background-position: -2919px 0px;
}
.iti__flag.iti__la {
  height: 14px;
  background-position: -2941px 0px;
}
.iti__flag.iti__lb {
  height: 14px;
  background-position: -2963px 0px;
}
.iti__flag.iti__lc {
  height: 10px;
  background-position: -2985px 0px;
}
.iti__flag.iti__li {
  height: 12px;
  background-position: -3007px 0px;
}
.iti__flag.iti__lk {
  height: 10px;
  background-position: -3029px 0px;
}
.iti__flag.iti__lr {
  height: 11px;
  background-position: -3051px 0px;
}
.iti__flag.iti__ls {
  height: 14px;
  background-position: -3073px 0px;
}
.iti__flag.iti__lt {
  height: 12px;
  background-position: -3095px 0px;
}
.iti__flag.iti__lu {
  height: 12px;
  background-position: -3117px 0px;
}
.iti__flag.iti__lv {
  height: 10px;
  background-position: -3139px 0px;
}
.iti__flag.iti__ly {
  height: 10px;
  background-position: -3161px 0px;
}
.iti__flag.iti__ma {
  height: 14px;
  background-position: -3183px 0px;
}
.iti__flag.iti__mc {
  height: 15px;
  background-position: -3205px 0px;
}
.iti__flag.iti__md {
  height: 10px;
  background-position: -3226px 0px;
}
.iti__flag.iti__me {
  height: 10px;
  background-position: -3248px 0px;
}
.iti__flag.iti__mf {
  height: 14px;
  background-position: -3270px 0px;
}
.iti__flag.iti__mg {
  height: 14px;
  background-position: -3292px 0px;
}
.iti__flag.iti__mh {
  height: 11px;
  background-position: -3314px 0px;
}
.iti__flag.iti__mk {
  height: 10px;
  background-position: -3336px 0px;
}
.iti__flag.iti__ml {
  height: 14px;
  background-position: -3358px 0px;
}
.iti__flag.iti__mm {
  height: 14px;
  background-position: -3380px 0px;
}
.iti__flag.iti__mn {
  height: 10px;
  background-position: -3402px 0px;
}
.iti__flag.iti__mo {
  height: 14px;
  background-position: -3424px 0px;
}
.iti__flag.iti__mp {
  height: 10px;
  background-position: -3446px 0px;
}
.iti__flag.iti__mq {
  height: 14px;
  background-position: -3468px 0px;
}
.iti__flag.iti__mr {
  height: 14px;
  background-position: -3490px 0px;
}
.iti__flag.iti__ms {
  height: 10px;
  background-position: -3512px 0px;
}
.iti__flag.iti__mt {
  height: 14px;
  background-position: -3534px 0px;
}
.iti__flag.iti__mu {
  height: 14px;
  background-position: -3556px 0px;
}
.iti__flag.iti__mv {
  height: 14px;
  background-position: -3578px 0px;
}
.iti__flag.iti__mw {
  height: 14px;
  background-position: -3600px 0px;
}
.iti__flag.iti__mx {
  height: 12px;
  background-position: -3622px 0px;
}
.iti__flag.iti__my {
  height: 10px;
  background-position: -3644px 0px;
}
.iti__flag.iti__mz {
  height: 14px;
  background-position: -3666px 0px;
}
.iti__flag.iti__na {
  height: 14px;
  background-position: -3688px 0px;
}
.iti__flag.iti__nc {
  height: 10px;
  background-position: -3710px 0px;
}
.iti__flag.iti__ne {
  height: 15px;
  background-position: -3732px 0px;
}
.iti__flag.iti__nf {
  height: 10px;
  background-position: -3752px 0px;
}
.iti__flag.iti__ng {
  height: 10px;
  background-position: -3774px 0px;
}
.iti__flag.iti__ni {
  height: 12px;
  background-position: -3796px 0px;
}
.iti__flag.iti__nl {
  height: 14px;
  background-position: -3818px 0px;
}
.iti__flag.iti__no {
  height: 15px;
  background-position: -3840px 0px;
}
.iti__flag.iti__np {
  height: 15px;
  background-position: -3862px 0px;
}
.iti__flag.iti__nr {
  height: 10px;
  background-position: -3877px 0px;
}
.iti__flag.iti__nu {
  height: 10px;
  background-position: -3899px 0px;
}
.iti__flag.iti__nz {
  height: 10px;
  background-position: -3921px 0px;
}
.iti__flag.iti__om {
  height: 10px;
  background-position: -3943px 0px;
}
.iti__flag.iti__pa {
  height: 14px;
  background-position: -3965px 0px;
}
.iti__flag.iti__pe {
  height: 14px;
  background-position: -3987px 0px;
}
.iti__flag.iti__pf {
  height: 14px;
  background-position: -4009px 0px;
}
.iti__flag.iti__pg {
  height: 15px;
  background-position: -4031px 0px;
}
.iti__flag.iti__ph {
  height: 10px;
  background-position: -4053px 0px;
}
.iti__flag.iti__pk {
  height: 14px;
  background-position: -4075px 0px;
}
.iti__flag.iti__pl {
  height: 13px;
  background-position: -4097px 0px;
}
.iti__flag.iti__pm {
  height: 14px;
  background-position: -4119px 0px;
}
.iti__flag.iti__pn {
  height: 10px;
  background-position: -4141px 0px;
}
.iti__flag.iti__pr {
  height: 14px;
  background-position: -4163px 0px;
}
.iti__flag.iti__ps {
  height: 10px;
  background-position: -4185px 0px;
}
.iti__flag.iti__pt {
  height: 14px;
  background-position: -4207px 0px;
}
.iti__flag.iti__pw {
  height: 13px;
  background-position: -4229px 0px;
}
.iti__flag.iti__py {
  height: 11px;
  background-position: -4251px 0px;
}
.iti__flag.iti__qa {
  height: 8px;
  background-position: -4273px 0px;
}
.iti__flag.iti__re {
  height: 14px;
  background-position: -4295px 0px;
}
.iti__flag.iti__ro {
  height: 14px;
  background-position: -4317px 0px;
}
.iti__flag.iti__rs {
  height: 14px;
  background-position: -4339px 0px;
}
.iti__flag.iti__ru {
  height: 14px;
  background-position: -4361px 0px;
}
.iti__flag.iti__rw {
  height: 14px;
  background-position: -4383px 0px;
}
.iti__flag.iti__sa {
  height: 14px;
  background-position: -4405px 0px;
}
.iti__flag.iti__sb {
  height: 10px;
  background-position: -4427px 0px;
}
.iti__flag.iti__sc {
  height: 10px;
  background-position: -4449px 0px;
}
.iti__flag.iti__sd {
  height: 10px;
  background-position: -4471px 0px;
}
.iti__flag.iti__se {
  height: 13px;
  background-position: -4493px 0px;
}
.iti__flag.iti__sg {
  height: 14px;
  background-position: -4515px 0px;
}
.iti__flag.iti__sh {
  height: 10px;
  background-position: -4537px 0px;
}
.iti__flag.iti__si {
  height: 10px;
  background-position: -4559px 0px;
}
.iti__flag.iti__sj {
  height: 15px;
  background-position: -4581px 0px;
}
.iti__flag.iti__sk {
  height: 14px;
  background-position: -4603px 0px;
}
.iti__flag.iti__sl {
  height: 14px;
  background-position: -4625px 0px;
}
.iti__flag.iti__sm {
  height: 15px;
  background-position: -4647px 0px;
}
.iti__flag.iti__sn {
  height: 14px;
  background-position: -4669px 0px;
}
.iti__flag.iti__so {
  height: 14px;
  background-position: -4691px 0px;
}
.iti__flag.iti__sr {
  height: 14px;
  background-position: -4713px 0px;
}
.iti__flag.iti__ss {
  height: 10px;
  background-position: -4735px 0px;
}
.iti__flag.iti__st {
  height: 10px;
  background-position: -4757px 0px;
}
.iti__flag.iti__su {
  height: 10px;
  background-position: -4779px 0px;
}
.iti__flag.iti__sv {
  height: 12px;
  background-position: -4801px 0px;
}
.iti__flag.iti__sx {
  height: 14px;
  background-position: -4823px 0px;
}
.iti__flag.iti__sy {
  height: 14px;
  background-position: -4845px 0px;
}
.iti__flag.iti__sz {
  height: 14px;
  background-position: -4867px 0px;
}
.iti__flag.iti__ta {
  height: 10px;
  background-position: -4889px 0px;
}
.iti__flag.iti__tc {
  height: 10px;
  background-position: -4911px 0px;
}
.iti__flag.iti__td {
  height: 14px;
  background-position: -4933px 0px;
}
.iti__flag.iti__tf {
  height: 14px;
  background-position: -4955px 0px;
}
.iti__flag.iti__tg {
  height: 13px;
  background-position: -4977px 0px;
}
.iti__flag.iti__th {
  height: 14px;
  background-position: -4999px 0px;
}
.iti__flag.iti__tj {
  height: 10px;
  background-position: -5021px 0px;
}
.iti__flag.iti__tk {
  height: 10px;
  background-position: -5043px 0px;
}
.iti__flag.iti__tl {
  height: 10px;
  background-position: -5065px 0px;
}
.iti__flag.iti__tm {
  height: 14px;
  background-position: -5087px 0px;
}
.iti__flag.iti__tn {
  height: 14px;
  background-position: -5109px 0px;
}
.iti__flag.iti__to {
  height: 10px;
  background-position: -5131px 0px;
}
.iti__flag.iti__tr {
  height: 14px;
  background-position: -5153px 0px;
}
.iti__flag.iti__tt {
  height: 12px;
  background-position: -5175px 0px;
}
.iti__flag.iti__tv {
  height: 10px;
  background-position: -5197px 0px;
}
.iti__flag.iti__tw {
  height: 14px;
  background-position: -5219px 0px;
}
.iti__flag.iti__tz {
  height: 14px;
  background-position: -5241px 0px;
}
.iti__flag.iti__ua {
  height: 14px;
  background-position: -5263px 0px;
}
.iti__flag.iti__ug {
  height: 14px;
  background-position: -5285px 0px;
}
.iti__flag.iti__uk {
  height: 10px;
  background-position: -5307px 0px;
}
.iti__flag.iti__um {
  height: 11px;
  background-position: -5329px 0px;
}
.iti__flag.iti__un {
  height: 14px;
  background-position: -5351px 0px;
}
.iti__flag.iti__us {
  height: 11px;
  background-position: -5373px 0px;
}
.iti__flag.iti__uy {
  height: 14px;
  background-position: -5395px 0px;
}
.iti__flag.iti__uz {
  height: 10px;
  background-position: -5417px 0px;
}
.iti__flag.iti__va {
  height: 15px;
  background-position: -5439px 0px;
}
.iti__flag.iti__vc {
  height: 14px;
  background-position: -5456px 0px;
}
.iti__flag.iti__ve {
  height: 14px;
  background-position: -5478px 0px;
}
.iti__flag.iti__vg {
  height: 10px;
  background-position: -5500px 0px;
}
.iti__flag.iti__vi {
  height: 14px;
  background-position: -5522px 0px;
}
.iti__flag.iti__vn {
  height: 14px;
  background-position: -5544px 0px;
}
.iti__flag.iti__vu {
  height: 12px;
  background-position: -5566px 0px;
}
.iti__flag.iti__wf {
  height: 14px;
  background-position: -5588px 0px;
}
.iti__flag.iti__ws {
  height: 10px;
  background-position: -5610px 0px;
}
.iti__flag.iti__xk {
  height: 15px;
  background-position: -5632px 0px;
}
.iti__flag.iti__ye {
  height: 14px;
  background-position: -5654px 0px;
}
.iti__flag.iti__yt {
  height: 14px;
  background-position: -5676px 0px;
}
.iti__flag.iti__za {
  height: 14px;
  background-position: -5698px 0px;
}
.iti__flag.iti__zm {
  height: 14px;
  background-position: -5720px 0px;
}
.iti__flag.iti__zw {
  height: 10px;
  background-position: -5742px 0px;
}

.iti__flag {
  height: 15px;
  box-shadow: 0px 0px 1px 0px #888;
  background-image: url('flags.png?1');
  background-repeat: no-repeat;
  background-position: 20px 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2x) {
  .iti__flag {
    background-image: url('flags@2x.png?1');
  }
}

.iti__globe {
  background-image: url('globe.png');
  background-size: contain;
  background-position: right;
  box-shadow: none;
  height: 19px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2x) {
  .iti__globe {
    background-image: url('globe@2x.png');
  }
}

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