/*!***************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/Link.module.scss ***!
  \***************************************************************************************************************************************************************************************************/
.Link-module__link {
  color: inherit;
}
.Link-module__link:hover {
  color: inherit;
}
.Link-module__link:hover.GroupCallLink {
  text-decoration: none;
}

.Link-module__isPrimary {
  color: var(--color-primary);
}
.Link-module__isPrimary:hover {
  color: var(--color-primary);
}
/*!***********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/spoiler/Spoiler.scss ***!
  \***********************************************************************************************************************************************************************************************************/
.Spoiler--concealed {
  cursor: pointer;
  background-image: url(/spoiler-dots-black.b2dd6e4f4a5a520c4ccd.png);
  background-size: auto min(100%, 1.125rem);
  border-radius: 0.5rem;
}
html.theme-dark .Spoiler--concealed, html.theme-light .ListItem.selected .Spoiler--concealed, .ActionMessage .Spoiler--concealed, .MediaViewerFooter .Spoiler--concealed {
  background-image: url(/spoiler-dots-white.ab45f83c6ba729884808.png);
}
.emoji-only .Spoiler--concealed {
  background-size: auto 1.125rem;
}
.Spoiler--animated {
  animation: pulse-opacity-light 1.75s linear infinite;
}
.Spoiler__content {
  opacity: 1;
  transition: opacity 250ms ease;
}
.Spoiler--concealed .Spoiler__content {
  -webkit-user-select: none;
          user-select: none;
  opacity: 0;
}

@keyframes pulse-opacity-light {
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
  75% {
    opacity: 1;
  }
}
/*!**************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/StickerView.module.scss ***!
  \**************************************************************************************************************************************************************************************************************/
:root {
  --thumbs-background: var(--color-background);
}

.StickerView-module__thumb {
  width: 100%;
  height: 100%;
  z-index: 1;
}
.StickerView-module__thumb.closing {
  transition-delay: 150ms;
}

.StickerView-module__thumb-opaque {
  background: var(--thumbs-background);
  transition-delay: 0s;
}

.StickerView-module__no-transition {
  transition: none !important;
}

.StickerView-module__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.StickerView-module__thumb:not(.shown), .StickerView-module__media:not(.shown) {
  display: block !important;
}
/*!**************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/CustomEmoji.module.scss ***!
  \**************************************************************************************************************************************************************************************************************/
.CustomEmoji-module__root {
  display: inline-flex;
  vertical-align: text-bottom;
  width: var(--custom-emoji-size);
  height: var(--custom-emoji-size);
  position: relative;
  flex: 0 0 var(--custom-emoji-size);
}
.CustomEmoji-module__root.CustomEmoji-module__with-grid-fix .CustomEmoji-module__media, .CustomEmoji-module__root.CustomEmoji-module__with-grid-fix .CustomEmoji-module__thumb {
  width: calc(100% + 1px) !important;
  height: calc(100% + 1px) !important;
}
.CustomEmoji-module__root canvas {
  display: block;
}

.CustomEmoji-module__thumb {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.CustomEmoji-module__media {
  width: var(--custom-emoji-size) !important;
  height: var(--custom-emoji-size) !important;
  -webkit-user-select: none !important;
          user-select: none !important;
}

.CustomEmoji-module__root, .CustomEmoji-module__media, .CustomEmoji-module__thumb {
  border-radius: var(--custom-emoji-border-radius) !important;
}

.CustomEmoji-module__highlight-catch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-user-select: auto !important;
          user-select: auto !important;
  z-index: 1;
}
/*!*******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/code/CodeOverlay.module.scss ***!
  \*******************************************************************************************************************************************************************************************************************/
.CodeOverlay-module__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

.CodeOverlay-module__copy, .CodeOverlay-module__wrap {
  display: flex;
  font-size: 1.25rem;
  padding: 0.125rem;
  border-radius: 0.125rem;
  margin: 0.125rem;
  transition: background-color 0.15s ease-in-out;
  cursor: pointer;
}
.CodeOverlay-module__copy:hover, .CodeOverlay-module__copy.CodeOverlay-module__wrapOn, .CodeOverlay-module__wrap:hover, .CodeOverlay-module__wrap.CodeOverlay-module__wrapOn {
  background-color: var(--color-background-compact-menu-hover);
}

.CodeOverlay-module__content {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 0.125rem;
  background-color: var(--color-background-compact-menu);
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
  border-bottom-left-radius: 0.25rem;
  pointer-events: auto;
}
.CodeOverlay-module__content.CodeOverlay-module__hidden {
  display: none;
}
/*!**********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/code/CodeBlock.scss ***!
  \**********************************************************************************************************************************************************************************************************/
.code-block {
  white-space: pre-wrap;
  background-color: var(--color-code-bg);
  margin: 0;
  padding: 0.5rem;
  margin-block: 0.25rem;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.code-block:hover .code-overlay {
  opacity: 1;
}
.code-block.no-word-wrap {
  white-space: pre;
  padding-bottom: 0.25rem;
}
html.theme-light .code-block {
  --color-type: #0053d4;
  --color-keyword: #388e22;
  --color-class: #3e6c20;
  --color-string: #9a1111;
  --color-template: #9A5334;
  --color-selector: #9A5334;
  --color-function: #a753b7;
  --color-comment: #616161;
  --color-section: #9a1111;
  --color-variable: #BD63C5;
  --color-attribute: #276b8f;
  --color-link: #276b8f;
  --color-tag: #000000;
}
html.theme-dark :not(.own) .code-block {
  --color-type: #56b6c2;
  --color-keyword: #c678dd;
  --color-class: #e06c75;
  --color-string: #98c379;
  --color-template: #d19a66;
  --color-selector: #e06c75;
  --color-function: #61aeee;
  --color-comment: #5c6370;
  --color-section: #e06c75;
  --color-variable: #d19a66;
  --color-attribute: #d19a66;
  --color-link: #d19a66;
  --color-tag: #e06c75;
}
html.theme-dark .own .code-block {
  --color-type: #9EFFFF;
  --color-keyword: #ffe900;
  --color-class: #b2f5ff;
  --color-string: #fedcad;
  --color-template: #ffe900;
  --color-selector: #b2f5ff;
  --color-function: #87ff91;
  --color-comment: #cbcbcb;
  --color-section: #b2f5ff;
  --color-variable: #ffe900;
  --color-attribute: #ffe900;
  --color-link: #ffe900;
  --color-tag: #b2f5ff;
}
.code-block .hljs {
  display: block;
  overflow-x: auto;
  color: var(--color-text);
}

.hljs-keyword,
.hljs-literal,
.hljs-symbol,
.hljs-name {
  color: var(--color-keyword);
}

.hljs-link {
  color: var(--color-link);
  text-decoration: underline;
}

.hljs-built_in,
.hljs-type {
  color: var(--color-type);
}

.hljs-number,
.hljs-class {
  color: var(--color-class);
}

.hljs-string,
.hljs-meta .hljs-string {
  color: var(--color-string);
}

.hljs-regexp,
.hljs-template-tag {
  color: var(--color-template);
}

.hljs-subst,
.hljs-function,
.hljs-title,
.hljs-params,
.hljs-formula {
  color: var(--color-function);
}

.hljs-comment,
.hljs-quote {
  color: var(--color-comment);
  font-style: italic;
}

.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-tag, .hljs-doctag {
  color: var(--color-tag);
}

.hljs-variable,
.hljs-template-variable {
  color: var(--color-variable);
}

.hljs-attr,
.hljs-attribute {
  color: var(--color-attribute);
}

.hljs-section {
  color: var(--color-section);
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-bullet,
.hljs-selector-tag,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: var(--color-selector);
}
/*!*************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/Blockquote.module.scss ***!
  \*************************************************************************************************************************************************************************************************************/
.Blockquote-module__root {
  display: inline-block;
  width: 100%;
}

.Blockquote-module__collapsed {
  -webkit-mask-image: linear-gradient(to top, transparent 0px, black 1rem);
          mask-image: linear-gradient(to top, transparent 0px, black 1rem);
}

.Blockquote-module__gradientContainer {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
  max-height: inherit;
}

.Blockquote-module__collapseIcon {
  position: absolute;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  bottom: 0;
  right: 0;
}

.Blockquote-module__clickable {
  cursor: var(--custom-cursor, pointer);
}
/*!*******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/TopicDefaultIcon.module.scss ***!
  \*******************************************************************************************************************************************************************************************************************/
.TopicDefaultIcon-module__root {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.TopicDefaultIcon-module__icon {
  position: absolute;
  width: 100%;
  height: 100%;
}

.TopicDefaultIcon-module__title {
  z-index: 1;
  color: #ffffff;
  font-weight: 500;
  font-size: 0.75em;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.TopicDefaultIcon-module__title .emoji {
  width: 1em;
  height: 1em;
}
/*!***********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/Spinner.scss ***!
  \***********************************************************************************************************************************************************************************************/
.Spinner {
  --spinner-size: 2rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spinner-size);
  height: var(--spinner-size);
}
.Spinner > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: contain;
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.Spinner.with-background::before {
  content: "";
  position: absolute;
  left: -0.125rem;
  top: -0.125rem;
  bottom: -0.125rem;
  right: -0.125rem;
  border-radius: 50%;
}
.Spinner.with-background.bg-dark::before {
  background: rgba(0, 0, 0, 0.25);
}
.Spinner.with-background.bg-light::before {
  background: rgba(255, 255, 255, 0.4);
}
.Spinner.white > div {
  background-image: var(--spinner-white-data);
}
.Spinner.white.with-background > div {
  background-image: var(--spinner-white-thin-data);
}
.Spinner.blue > div {
  background-image: var(--spinner-blue-data);
}
.theme-dark .Spinner.blue > div {
  background-image: var(--spinner-dark-blue-data);
}
.Spinner.black > div {
  background-image: var(--spinner-black-data);
}
.Spinner.green > div {
  background-image: var(--spinner-green-data);
}
.Spinner.gray > div {
  background-image: var(--spinner-gray-data);
}
.Spinner.yellow > div {
  background-image: var(--spinner-yellow-data);
}
.Spinner.thick-blue > div {
  background-image: var(--spinner-captcha-data);
}
.ListItem .Spinner {
  --spinner-size: 1.25rem;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/*!****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/RippleEffect.scss ***!
  \****************************************************************************************************************************************************************************************************/
@keyframes ripple-animation {
  from {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale(2);
  }
}
.ripple-container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
body.animation-level-0 .ripple-container {
  display: none;
}
.ripple-container span {
  position: absolute;
  display: block;
  background-color: var(--ripple-color, rgba(0, 0, 0, 0.08));
  border-radius: 50%;
  transform: scale(0);
  animation: ripple-animation 700ms;
  pointer-events: none;
}
/*!**********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/Button.scss ***!
  \**********************************************************************************************************************************************************************************************/
.Button {
  outline: none !important;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  line-height: 1;
  height: 3.375rem;
  max-height: 100%;
  border: 0;
  border-radius: var(--border-radius-default);
  background-color: transparent;
  background-size: cover;
  padding: 0 0.7rem;
  color: white;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  transition: background-color 0.15s, color 0.15s;
  text-decoration: none !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  --premium-gradient: linear-gradient(
    88.39deg,
    #6c93ff -2.56%,
    #976fff 51.27%,
    #df69d1 107.39%
  );
}
.Button:active, .Button.clicked, body.animation-level-0 .Button {
  transition: none !important;
}
.Button.active {
  cursor: auto;
}
.Button.round {
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 50%;
}
.Button.round i:not(.icon-svg) {
  font-size: 1.5rem;
}
.Button [stroke] {
  stroke: var(--color-text-secondary);
}
.Button.primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  --ripple-color: rgba(0, 0, 0, 0.08);
}
.Button.primary [stroke] {
  stroke: white;
}
.Button.primary:not(.disabled):not(:disabled):active, .Button.primary:not(.disabled):not(:disabled).active {
  background-color: var(--color-primary-shade);
}
@media (hover: hover) {
  .Button.primary:not(.disabled):not(:disabled):hover {
    background-color: var(--color-primary-shade);
  }
}
body.animation-level-0 .Button.primary:not(.disabled):not(:disabled):active {
  background-color: var(--color-primary-shade-darker);
}
.Button.full-width {
  width: 100%;
  max-width: 28.125rem;
}
.Button.secondary {
  background-color: var(--color-background);
  color: rgba(var(--color-text-secondary-rgb), 0.75);
  --ripple-color: rgba(0, 0, 0, 0.08);
}
.Button.secondary path:not([fill]) {
  stroke: var(--color-text-secondary);
}
.Button.secondary path:not([stroke]) {
  fill: var(--color-text-secondary);
}
.Button.secondary.send path {
  fill: var(--color-primary);
}
.Button.secondary:not(.disabled):not(:disabled):active, .Button.secondary:not(.disabled):not(:disabled).active {
  background-color: var(--color-primary);
  color: white;
}
.Button.secondary:not(.disabled):not(:disabled):active svg path:not([fill]), .Button.secondary:not(.disabled):not(:disabled).active svg path:not([fill]) {
  stroke: white;
}
.Button.secondary:not(.disabled):not(:disabled):active svg path:not([stroke]), .Button.secondary:not(.disabled):not(:disabled).active svg path:not([stroke]) {
  fill: white;
}
@media (hover: hover) {
  .Button.secondary:not(.disabled):not(:disabled):hover {
    background-color: var(--color-primary);
    color: white;
  }
  .Button.secondary:not(.disabled):not(:disabled):hover svg path:not([fill]) {
    stroke: white;
  }
  .Button.secondary:not(.disabled):not(:disabled):hover svg path:not([stroke]) {
    fill: white;
  }
}
body.animation-level-0 .Button.secondary:not(.disabled):not(:disabled):active {
  background-color: var(--color-primary-shade);
}
.Button.gray {
  background-color: var(--color-background);
  color: var(--color-text-secondary);
  --ripple-color: rgba(0, 0, 0, 0.08);
}
.Button.gray:not(.disabled):not(:disabled):active, .Button.gray:not(.disabled):not(:disabled).active {
  color: var(--color-primary);
}
@media (hover: hover) {
  .Button.gray:not(.disabled):not(:disabled):hover {
    color: var(--color-primary);
  }
}
body.animation-level-0 .Button.gray:not(.disabled):not(:disabled):active {
  background-color: var(--color-chat-hover);
}
.Button.green {
  background-color: var(--color-green);
  color: white;
}
.Button.green path:not([fill]) {
  stroke: white;
}
.Button.green:not(.disabled):not(:disabled):active, .Button.green:not(.disabled):not(:disabled).active {
  background-color: var(--color-green-darker);
}
@media (hover: hover) {
  .Button.green:not(.disabled):not(:disabled):hover {
    background-color: var(--color-green-darker);
  }
}
.Button.blue {
  background-color: var(--color-message-reaction);
  color: var(--color-primary);
}
.Button.blue:not(.disabled):not(:disabled):active, .Button.blue:not(.disabled):not(:disabled).active {
  background-color: var(--color-message-reaction-hover);
}
@media (hover: hover) {
  .Button.blue:not(.disabled):not(:disabled):hover {
    background-color: var(--color-message-reaction-hover);
  }
}
.Button.light-blue {
  background-color: #126df1;
  color: white;
}
.Button.light-blue:not(.disabled):not(:disabled):active, .Button.light-blue:not(.disabled):not(:disabled).active {
  background-color: var(--color-primary);
}
@media (hover: hover) {
  .Button.light-blue:not(.disabled):not(:disabled):hover {
    background-color: var(--color-primary);
  }
}
.Button.danger {
  background-color: #fde7eb;
  color: var(--color-error);
  --ripple-color: rgba(var(--color-error-rgb), 0.16);
}
.Button.danger [stroke] {
  stroke: var(--color-error);
}
.Button.danger:not(.disabled):not(:disabled):active, .Button.danger:not(.disabled):not(:disabled).active {
  background-color: var(--color-error);
  color: var(--color-white);
}
.Button.danger:not(.disabled):not(:disabled):active [stroke], .Button.danger:not(.disabled):not(:disabled).active [stroke] {
  stroke: var(--color-white);
}
@media (hover: hover) {
  .Button.danger:not(.disabled):not(:disabled):hover {
    background-color: var(--color-error);
    color: var(--color-white);
  }
  .Button.danger:not(.disabled):not(:disabled):hover [stroke] {
    stroke: var(--color-white);
  }
}
body.animation-level-0 .Button.danger:not(.disabled):not(:disabled):active {
  background-color: var(--color-error-shade);
}
.Button.success {
  background-color: var(--color-success);
}
.Button.success:not(.disabled):not(:disabled):active, .Button.success:not(.disabled):not(:disabled).active {
  background-color: #3da929;
}
@media (hover: hover) {
  .Button.success:not(.disabled):not(:disabled):hover {
    background-color: #3da929;
  }
}
.Button.destructive [stroke] {
  stroke: var(--color-error);
}
.Button.border-btn {
  border: 0.316667px solid #b1b1b5;
  background-color: transparent;
  color: var(--color-text);
  gap: 8px;
  --ripple-color: var(--color-interactive-element-hover);
}
.Button.border-btn:not(.disabled):not(:disabled):active, .Button.border-btn:not(.disabled):not(:disabled).active {
  background-color: var(--color-interactive-element-hover);
}
@media (hover: hover) {
  .Button.border-btn:not(.disabled):not(:disabled):hover {
    background-color: var(--color-interactive-element-hover);
  }
}
body.animation-level-0 .Button.border-btn:not(.disabled):not(:disabled):active {
  background-color: rgba(var(--color-text-secondary-rgb), 0.16);
}
.Button.border-btn svg path:not([fill]) {
  stroke: var(--color-text-secondary);
}
.Button.border-btn.activated {
  color: var(--color-primary);
}
.Button.border-btn.activated svg path {
  stroke: var(--color-primary);
}
.Button.text {
  background-color: transparent;
  font-weight: 500;
  color: var(--color-text);
  height: 2.5rem;
  border-radius: 1.25rem;
  overflow: visible;
}
.Button.text.primary {
  color: var(--color-text);
  background-color: transparent;
  border: 1px solid var(--color-message-reaction);
}
.Button.text.primary:not(.disabled):not(:disabled):active, .Button.text.primary:not(.disabled):not(:disabled).active {
  background-color: var(--color-message-reaction);
  color: var(--color-primary);
}
@media (hover: hover) {
  .Button.text.primary:not(.disabled):not(:disabled):hover {
    background-color: var(--color-message-reaction);
    color: var(--color-primary);
  }
}
body.animation-level-0 .Button.text.primary:not(.disabled):not(:disabled):active {
  background-color: var(--color-message-reaction);
}
.Button.text.secondary {
  background-color: transparent;
  color: var(--color-text-secondary);
}
.Button.text.no-style {
  border: none;
  height: auto;
  border-radius: 0;
}
.Button.text.no-style:not(.disabled):not(:disabled):active, .Button.text.no-style:not(.disabled):not(:disabled).active {
  background-color: var(--color-background);
}
@media (hover: hover) {
  .Button.text.no-style:not(.disabled):not(:disabled):hover {
    background-color: var(--color-background);
  }
}
.Button.text.smaller {
  font-size: 0.875rem;
}
.Button.text.danger:not(.disabled):not(:disabled):active, .Button.text.danger:not(.disabled):not(:disabled).active {
  background-color: rgba(var(--color-error-rgb), 0.08);
  color: var(--color-error);
}
@media (hover: hover) {
  .Button.text.danger:not(.disabled):not(:disabled):hover {
    background-color: rgba(var(--color-error-rgb), 0.08);
    color: var(--color-error);
  }
}
body.animation-level-0 .Button.text.danger:not(.disabled):not(:disabled):active {
  background-color: rgba(var(--color-error-rgb), 0.16);
}
.Button.faded {
  opacity: 0.8;
}
.Button.faded:not(.disabled):not(:disabled):active, .Button.faded:not(.disabled):not(:disabled).active {
  opacity: 1;
}
@media (hover: hover) {
  .Button.faded:not(.disabled):not(:disabled):hover {
    opacity: 1;
  }
}
.Button.faded.activated {
  opacity: 1;
}
.Button.translucent {
  background-color: transparent;
  color: var(--color-text);
  --ripple-color: var(--color-interactive-element-hover);
}
.Button.translucent:not(.disabled):not(:disabled):active, .Button.translucent:not(.disabled):not(:disabled).active {
  background-color: var(--color-interactive-element-hover);
}
@media (hover: hover) {
  .Button.translucent:not(.disabled):not(:disabled):hover {
    background-color: var(--color-interactive-element-hover);
  }
}
body.animation-level-0 .Button.translucent:not(.disabled):not(:disabled):active {
  background-color: rgba(var(--color-text-secondary-rgb), 0.16);
}
.Button.translucent.activated {
  color: var(--color-primary);
}
.Button.translucent.activated [stroke] {
  stroke: var(--color-primary);
}
.Button.translucent-white {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.5);
  --ripple-color: rgba(255, 255, 255, 0.08);
}
.Button.translucent-white path:not([fill]) {
  stroke: white;
}
.Button.translucent-white:not(.disabled):not(:disabled):active, .Button.translucent-white:not(.disabled):not(:disabled).active {
  background-color: rgba(255, 255, 255, 0.08);
  color: white;
}
@media (hover: hover) {
  .Button.translucent-white:not(.disabled):not(:disabled):hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: white;
  }
}
body.animation-level-0 .Button.translucent-white:not(.disabled):not(:disabled):active {
  background-color: rgba(255, 255, 255, 0.16);
}
.Button.translucent-black {
  background-color: transparent;
  color: rgba(0, 0, 0, 0.8);
  --ripple-color: rgba(0, 0, 0, 0.08);
}
.Button.translucent-black:not(.disabled):not(:disabled):active, .Button.translucent-black:not(.disabled):not(:disabled).active {
  background-color: rgba(0, 0, 0, 0.08);
}
@media (hover: hover) {
  .Button.translucent-black:not(.disabled):not(:disabled):hover {
    background-color: rgba(0, 0, 0, 0.08);
  }
}
body.animation-level-0 .Button.translucent-black:not(.disabled):not(:disabled):active {
  background-color: rgba(0, 0, 0, 0.16);
}
.Button.dark {
  background-color: rgba(0, 0, 0, 0.75);
  color: white;
  --ripple-color: rgba(255, 255, 255, 0.08);
}
.Button.dark path {
  stroke: white;
}
.Button.dark:not(.disabled):not(:disabled):active, .Button.dark:not(.disabled):not(:disabled).active {
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
}
@media (hover: hover) {
  .Button.dark:not(.disabled):not(:disabled):hover {
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
  }
}
body.animation-level-0 .Button.dark:not(.disabled):not(:disabled):active {
  background-color: rgba(0, 0, 0, 0.95);
}
.Button.smaller {
  height: 2.9375rem;
  min-width: 2.9375rem;
  padding: 0.3125rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--border-radius-default-small);
}
.Button.smaller.round {
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  border-radius: 50%;
}
.Button.smaller.pill {
  height: 2.5rem;
  border-radius: 1.25rem;
  padding: 0.3125rem 1rem;
}
.Button.smaller.with-icon {
  padding-left: 0.75rem;
  padding-right: 1.25rem;
}
.Button.smaller.with-icon i {
  font-size: 1.5rem;
  margin-right: 0.5rem;
}
.Button.smaller.with-icon[dir=rtl] {
  padding-left: 1.25rem;
  padding-right: 0.75rem;
}
.Button.smaller.with-icon[dir=rtl] i {
  margin-left: 0.5rem;
  margin-right: 0;
}
@media (max-width: 600px) {
  .Button.smaller {
    height: 2.5rem;
  }
  .Button.smaller.round {
    width: 2.5rem;
  }
}
.Button.link {
  font-size: 0.875rem;
  font-weight: 500;
  height: auto;
  padding: 0.7rem 1rem 0.6rem;
  background-color: transparent;
  color: var(--color-primary);
}
.Button.link.primary path {
  stroke: var(--color-primary);
}
.Button.link.danger {
  color: var(--color-error);
}
.Button.link.danger path {
  stroke: var(--color-error);
}
.Button.link.danger:not(.disabled):not(:disabled):active, .Button.link.danger:not(.disabled):not(:disabled).active {
  background-color: rgba(var(--color-error-rgb), 0.08);
  color: var(--color-error);
}
@media (hover: hover) {
  .Button.link.danger:not(.disabled):not(:disabled):hover {
    background-color: rgba(var(--color-error-rgb), 0.08);
    color: var(--color-error);
  }
}
.Button.link:not(.disabled):not(:disabled):active, .Button.link:not(.disabled):not(:disabled).active {
  background-color: var(--color-primary-opacity-hover);
}
@media (hover: hover) {
  .Button.link:not(.disabled):not(:disabled):hover {
    background-color: var(--color-primary-opacity-hover);
  }
}
.Button.tiny {
  height: 2.25rem;
  padding: 0.4375rem;
  border-radius: var(--border-radius-default-small);
  font-size: 0.875rem;
  font-weight: 500;
}
.Button.tiny.round {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
}
.Button.tiny i {
  font-size: 1.25rem;
}
.Button.tiny.pill {
  height: 2rem;
  border-radius: 1rem;
  padding: 0.3125rem 1rem;
  font-size: 1rem;
}
.Button.fluid {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  width: auto;
}
.Button.fluid.tiny {
  padding-left: 1.375rem;
  padding-right: 1.375rem;
}
.Button.pill {
  border-radius: 1.75rem;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  text-transform: none;
}
.Button.loading {
  position: relative;
  pointer-events: none;
}
.Button.loading .Spinner {
  position: absolute;
  right: 0.875rem;
  top: 0.875rem;
  --spinner-size: 1.8125rem;
}
.Button .emoji {
  vertical-align: -3px;
}
.Button.shiny::before {
  content: "";
  position: absolute;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent 0%, var(--color-skeleton-foreground) 50%, transparent 100%);
  animation: wave 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes wave {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.Button.premium {
  background: var(--premium-gradient);
}
.Button.disabled {
  color: #929298;
  cursor: default;
}
.Button.disabled:not(.round) {
  background-color: var(--color-gray);
}
.Button.disabled:not(.click-allowed) {
  pointer-events: none;
}
.Button.disabled.round {
  opacity: 0.5;
}
.Button.outline {
  background-color: var(--color-background);
  border: 1px solid var(--color-borders-input);
  color: var(--color-text);
}
.Button.outline:not(.disabled):not(:disabled):active, .Button.outline:not(.disabled):not(:disabled).active {
  background-color: rgba(0, 0, 0, 0.08);
}
@media (hover: hover) {
  .Button.outline:not(.disabled):not(:disabled):hover {
    background-color: rgba(0, 0, 0, 0.08);
  }
}
body.animation-level-0 .Button.outline:not(.disabled):not(:disabled):active {
  background-color: rgba(0, 0, 0, 0.16);
}
.Button.outline.activated svg path {
  stroke: var(--color-primary);
}
.Button .css-icon-down,
.Button .css-icon-up {
  position: absolute;
  top: 0.25rem;
  right: 0;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--color-text);
  border-top: 0;
  border-left: 0;
  transform: scaleY(1) rotate(45deg);
  transition: color 0.2s ease, transform 0.2s ease, top 0.2s ease;
}
.Button .css-icon-up {
  transform: scaleY(1) rotate(225deg);
}
.Button .Spinner {
  width: 1.5rem;
  height: 1.5rem;
}

.buttons-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.buttons-row > * {
  width: 100%;
  flex-shrink: 1;
}
/*!*********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/Modal.scss ***!
  \*********************************************************************************************************************************************************************************************/
.Modal {
  position: relative;
  z-index: var(--z-modal);
}
.Modal .modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.Modal .modal-container.centered {
  align-items: center;
}
@media (min-width: 576px) {
  .Modal .modal-container.centered {
    min-height: calc(100% - 3.5rem);
  }
}
.Modal .modal-dialog {
  position: relative;
  width: 100%;
  min-width: 17.5rem;
  max-width: 35rem;
  max-height: 92vh;
  margin: 1.75rem auto 0;
  background-color: var(--color-background);
  box-shadow: 0 0.625rem 1.875rem var(--color-default-shadow);
  border-radius: var(--border-radius-messages);
  transform: translate3d(0, -1rem, 0);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.Modal .modal-dialog.custom-scroll {
  overflow-x: hidden;
  overflow-y: auto;
}
body.animation-level-0 .Modal .modal-dialog {
  transition: none;
  transform: none !important;
}
@media (max-width: 450px) {
  .Modal .modal-dialog {
    max-width: calc(100vw - 3rem) !important;
  }
}
.Modal .description-primary {
  padding: 0.75rem;
  background-color: #f0f6ff;
  color: var(--color-primary);
  border-radius: var(--border-radius-default-smaller);
}
.Modal .description-primary h3 {
  margin-bottom: 0.875rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
}
.Modal .description-primary .row {
  font-size: 0.8125rem;
  display: flex;
  justify-content: space-between;
}
.Modal .description-primary .row:not(:last-of-type) {
  margin-bottom: 0.25rem;
}
.Modal .description-primary .row :first-child {
  color: var(--color-text);
}
.Modal .description-primary [stroke] {
  stroke: var(--color-primary);
}
.Modal .description-adult {
  font-size: 0.875rem;
  padding: 0.5rem;
  border-radius: var(--border-radius-default-smaller);
  border: 1px solid var(--color-error);
}
.Modal .description-adult .banner-adult {
  display: flex;
  justify-content: center;
  padding: 5px 0;
  border-radius: 0.25rem;
  background: linear-gradient(175deg, #ff758f 27.08%, #ef4061 75.52%);
  margin-bottom: 0.625rem;
}
.Modal .benefits {
  padding: 1rem;
  border-radius: var(--border-radius-default-smaller);
  border: 1px solid rgba(7, 7, 8, 0.12);
}
.Modal .benefits ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  padding-left: 1.25rem;
  margin-bottom: 0;
}
.Modal .benefits li {
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding-left: 0;
  background-repeat: no-repeat;
  text-align: left;
}
.Modal.confirm {
  z-index: var(--z-lock-screen);
}
.Modal.confirm .modal-content {
  text-align: center;
  padding: 0.5rem 2.5rem 0;
}
.Modal.confirm .modal-content .full-name {
  display: flex;
  gap: 0.25rem;
}
@media only screen and (max-width: 480px) {
  .Modal.confirm .modal-content {
    padding: 0 1rem;
  }
}
.Modal.confirm .modal-content div:not(.price) {
  line-height: 1.1875rem;
}
.Modal.confirm .modal-content h2 {
  margin-bottom: 0;
}
.Modal.confirm .modal-content .amount {
  justify-content: center;
  gap: 0;
}
.Modal.confirm .modal-content .amount svg {
  margin-left: 0.25rem;
  margin-right: -1px;
}
.Modal.confirm .modal-content ul {
  list-style-type: decimal;
  padding-left: 1.25rem;
  padding-top: 0.5rem;
}
.Modal.confirm .modal-content ul li {
  text-align: left;
}
.Modal.info-confirm .modal-content p {
  margin: 0;
}
.Modal.delete .modal-dialog, .Modal.error .modal-dialog, .Modal.confirm .modal-dialog, .Modal.pin .modal-dialog, .Modal.unpin-all .modal-dialog {
  max-width: 25rem;
}
.Modal.error .modal-content > div {
  margin-top: 1rem;
}
.Modal.narrow .modal-dialog {
  max-width: 20rem;
}
.Modal.slim .modal-dialog {
  max-width: 25rem;
}
.Modal .modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: rgba(7, 7, 8, 0.2);
}
.Modal.transparent-backdrop .modal-backdrop {
  background-color: transparent;
}
.Modal .close {
  position: absolute;
  right: 0;
  top: 0;
}
.Modal.open .modal-dialog {
  transform: translate3d(0, 0, 0);
}
.Modal.closing .modal-dialog {
  transform: translate3d(0, 1rem, 0);
}
.Modal .modal-header,
.Modal .modal-header-condensed {
  display: flex;
  width: 100%;
  align-items: center;
  flex-shrink: 0;
  gap: 0.75rem;
  padding: 0.825rem 2.5rem 0.5rem 3.125rem;
  min-height: 2.825rem;
}
.Modal .modal-header > .Button,
.Modal .modal-header-condensed > .Button {
  margin-right: 0.25rem;
  position: absolute;
  z-index: 2;
  top: 2px;
  left: 2px;
}
.Modal .modal-header .title,
.Modal .modal-header-condensed .title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1;
}
.Modal .modal-header .title .fullName,
.Modal .modal-header-condensed .title .fullName {
  font-size: 1.125rem;
  margin-bottom: 0;
}
.Modal .modal-header .status,
.Modal .modal-header-condensed .status {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
.Modal .modal-header path:not([stroke]),
.Modal .modal-header-condensed path:not([stroke]) {
  fill: var(--color-text-secondary);
}
.Modal .modal-title {
  font-size: 1rem;
  font-weight: 500;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.Modal .Radio .Radio-main .label {
  font-size: 0.9375rem;
}
.Modal .modal-header-condensed {
  padding: 0.5rem 1.25rem 0 0.9375rem !important;
}
.Modal .modal-header-condensed .modal-action-button {
  font-size: 0.875rem;
  height: 2.25rem;
  width: auto;
  line-height: 1.625rem;
  margin-left: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  min-width: 5rem;
}
.Modal .modal-header-condensed .modal-action-button.danger {
  background-color: var(--color-error);
  color: var(--color-white);
}
.Modal .modal-header-condensed .modal-action-button.danger:hover, .Modal .modal-header-condensed .modal-action-button.danger:focus, .Modal .modal-header-condensed .modal-action-button.danger:active {
  background-color: var(--color-error-shade);
}
.Modal .modal-content {
  width: 100%;
  flex-grow: 1;
  padding: 0.5rem 2.5rem 2.5rem;
}
.Modal .modal-content .text-secondary:not(.text-small) {
  font-size: 0.9375rem;
}
.Modal .modal-content.custom-scroll {
  overflow-y: auto;
}
.Modal .modal-content p {
  line-height: 1.2;
  margin-bottom: 1rem;
  white-space: pre-line;
  word-wrap: break-word;
}
.Modal .modal-content b,
.Modal .modal-content strong {
  word-break: break-word;
}
.Modal .modal-content .description-primary p {
  margin-bottom: 0.5rem;
}
.Modal .modal-content .SearchInput input {
  height: 2.25rem;
  padding-left: 2.75rem;
}
.Modal .modal-content .SearchInput > .icon {
  top: 9px;
}
.Modal .modal-content .SearchInput svg {
  width: 1.125rem;
  height: 1.125rem;
}
.Modal .modal-content .auth-form {
  padding: 0;
}
@media (max-width: 480px) {
  .Modal .modal-content {
    padding: 0.5rem 0.5rem 2.5rem;
  }
}
.Modal .modal-title,
.Modal .modal-content {
  unicode-bidi: plaintext;
  text-align: initial;
}
.Modal .modal-about {
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.Modal .modal-help {
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.3;
}
.Modal .dialog-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.Modal .dialog-buttons .outline {
  color: var(--color-primary);
}
.Modal .dialog-buttons-column {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
.Modal .dialog-checkbox {
  margin: 1rem 0;
}
.Modal .confirm-dialog-button {
  height: 3rem;
}
.Modal .dialog-button-spacer {
  flex-grow: 1;
}
.Modal .Message:not(.own) {
  padding-left: 0;
  margin-bottom: 0;
}
.Modal .modal-footer {
  display: flex;
  align-items: center;
  padding: 0.1875rem 0.75rem;
  border-top: 1px solid var(--color-borders);
}
.Modal .modal-footer .input {
  margin: 0;
}
.Modal .modal-footer .form-control {
  border: none;
  height: 2.5rem;
}
.Modal .modal-footer .Button.primary {
  height: 2.375rem;
  border-radius: 0.625rem;
  padding: 1.25rem;
}
.Modal .modal-footer .symbol-menu-button {
  width: 3.12rem !important;
}
@media (min-width: 600px) {
  .Modal .modal-footer .symbol-menu-button {
    margin-left: 0;
  }
}

.share-qr-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 0 2.5rem 1.5rem;
  overflow-y: auto;
}
.share-qr-container .description {
  color: #74747b;
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.17;
}

.country-modal,
.category-modal {
  max-height: 17rem;
}
@supports (overflow-y: scroll) {
  .country-modal,
  .category-modal {
    overflow-y: scroll;
    overflow-x: hidden;
  }
}
.country-modal .Checkbox .Checkbox-main .label,
.category-modal .Checkbox .Checkbox-main .label {
  flex-wrap: nowrap;
}
/*!**************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/RadioGroup.scss ***!
  \**************************************************************************************************************************************************************************************************/
.Management .radio-right .Radio .Radio-main::before {
  right: 1.125rem;
  left: auto;
  top: 0.25rem;
  transform: none;
  background-color: transparent;
  box-shadow: none;
  border: transparent;
}

.Management .radio-right .Radio .Radio-main::after {
  content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9InRpY2stY2lyY2xlIj4KPGcgaWQ9InRpY2stY2lyY2xlXzIiPgo8cGF0aCBpZD0iVmVjdG9yIiBkPSJNMTIgMkM2LjQ5IDIgMiA2LjQ5IDIgMTJDMiAxNy41MSA2LjQ5IDIyIDEyIDIyQzE3LjUxIDIyIDIyIDE3LjUxIDIyIDEyQzIyIDYuNDkgMTcuNTEgMiAxMiAyWk0xNi43OCA5LjdMMTEuMTEgMTUuMzdDMTAuOTcgMTUuNTEgMTAuNzggMTUuNTkgMTAuNTggMTUuNTlDMTAuMzggMTUuNTkgMTAuMTkgMTUuNTEgMTAuMDUgMTUuMzdMNy4yMiAxMi41NEM2LjkzIDEyLjI1IDYuOTMgMTEuNzcgNy4yMiAxMS40OEM3LjUxIDExLjE5IDcuOTkgMTEuMTkgOC4yOCAxMS40OEwxMC41OCAxMy43OEwxNS43MiA4LjY0QzE2LjAxIDguMzUgMTYuNDkgOC4zNSAxNi43OCA4LjY0QzE3LjA3IDguOTMgMTcuMDcgOS40IDE2Ljc4IDkuN1oiIGZpbGw9IiMwQTQ5QTUiLz4KPC9nPgo8L2c+Cjwvc3ZnPgo=);
  right: 2.05rem;
  left: auto;
  top: 0.1rem;
  transform: none;
  color: white;
  width: 0;
  height: 0;
}

.Management .permission-list .radio-right .Radio {
  padding-left: 0;
}
/*!*********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/Radio.scss ***!
  \*********************************************************************************************************************************************************************************************/
.Radio {
  display: block;
  position: relative;
  padding-left: 3.75rem;
  text-align: left;
  margin-bottom: 1.5rem;
  line-height: 1.5rem;
  flex: 1 1;
  cursor: pointer;
}
.Radio.radio--no-mb {
  margin-bottom: 0;
}
.Radio.disabled {
  pointer-events: none;
  opacity: 0.5;
}
.Radio.hidden-widget {
  cursor: default;
}
.Radio.hidden-widget .Radio-main::before, .Radio.hidden-widget .Radio-main::after {
  visibility: hidden;
}
.Radio > input {
  position: absolute;
  z-index: var(--z-below);
  opacity: 0;
}
.Radio .Radio-main::before, .Radio .Radio-main::after {
  content: "";
  display: block;
  position: absolute;
  left: 1.1875rem;
  top: 50%;
  width: 1.125rem;
  height: 1.125rem;
  transform: translateY(-50%);
}
.Radio .Radio-main::before {
  box-shadow: 0 0 0 2px var(--color-placeholders);
  border-radius: 50%;
  background-color: var(--color-background);
  opacity: 1;
  transition: border-color 0.1s ease, opacity 0.1s ease;
}
.Radio .Radio-main::after {
  left: 1.38rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0;
  transition: opacity 0.1s ease;
}
.Radio .Radio-main .label {
  display: block;
  word-break: break-word;
  unicode-bidi: plaintext;
  text-align: left;
}
.Radio .Radio-main .subLabel {
  display: block;
  font-size: 0.875rem;
  line-height: 1rem;
  color: var(--color-text-secondary);
  unicode-bidi: plaintext;
}
.Radio input:checked ~ .Radio-main::before {
  box-shadow: 0 0 0 2px var(--color-primary);
}
.Radio input:checked ~ .Radio-main::after {
  opacity: 1;
}
.Radio.loading .Radio-main::before,
.Radio.loading .Radio-main::after {
  opacity: 0 !important;
}
.Radio.loading .Spinner {
  position: absolute;
  left: 1.0625rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  animation: fade-in 0.2s ease forwards;
  --spinner-size: 1.25rem;
}
.Radio[dir=rtl] {
  padding-left: 0;
  padding-right: 4.5rem;
}
.Radio[dir=rtl] .Radio-main {
  text-align: right;
}
.Radio[dir=rtl] .Radio-main::before {
  left: auto;
  right: 1.0625rem;
}
.Radio[dir=rtl] .Radio-main::after {
  left: auto;
  right: 1.375rem;
}
.Radio[dir=rtl] .label,
.Radio[dir=rtl] .subLabel {
  text-align: right;
}
.Radio[dir=rtl].loading .Spinner {
  left: auto;
  right: 1.0625rem;
}
.Radio.radio-button {
  border: 1px solid var(--color-borders-input);
  border-radius: 1rem;
  padding: 15px 0;
  display: flex;
  justify-content: center;
}
.Radio.radio-button .Radio-main {
  position: relative;
  padding-left: 2rem;
}
.Radio.radio-button .Radio-main::before {
  left: 2px;
}
.Radio.radio-button .Radio-main::after {
  left: 0.3rem;
}
.Radio.radio-button .Radio-main .label {
  margin: 0;
}

.smaller .Radio .Radio-main::before {
  width: 1rem;
  height: 1rem;
  left: 1.5rem;
  box-shadow: 0 0 0 1.5px var(--color-placeholders);
}
.smaller .Radio .Radio-main::after {
  left: 1.6875rem;
  width: 0.625rem;
  height: 0.625rem;
}
.smaller.left-top .Radio {
  padding-left: 2.25rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.smaller.left-top .Radio .Radio-main::before {
  left: 0.125rem;
  top: 0.75rem;
}
.smaller.left-top .Radio .Radio-main::after {
  left: 0.3125rem;
  top: 0.75rem;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*!**************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/Transition.scss ***!
  \**************************************************************************************************************************************************************************************************/
.Transition {
  position: relative;
  /*
   * slide
   */
  /*
   * slide-vertical
   */
  /*
   * slide-vertical-fade
   */
  /*
   * mv-slide
   */
  /*
   * slide-fade
   */
  /*
   * zoom-fade
   */
  /*
   * fade
   */
  /*
   * slide-layers
   */
  /*
   * push-slide
   */
  /*
   * slide-fade
   */
}
.Transition > * {
  width: 100%;
  height: 100%;
  animation-fill-mode: forwards !important;
  transition: background-color 0.2s;
}
.Transition > *.from, .Transition > *.to {
  position: absolute;
  top: 0;
  left: 0;
}
.Transition > *:not(.Transition__slide--active):not(.from):not(.to) {
  display: none !important;
}
.Transition.skip-slide-transition {
  transition: none !important;
}
.Transition.slide-optimized, .Transition.slide-optimized-rtl {
  contain: strict;
}
body.is-safari .Transition.slide-optimized, body.is-safari .Transition.slide-optimized-rtl {
  transform: translate3d(0, 0, 0);
}
#root .Transition.slide-optimized > div, #root .Transition.slide-optimized-rtl > div {
  position: absolute;
  display: block !important;
  top: 0;
  left: 0;
  transition: transform var(--slide-transition);
  transform: scale(0);
}
.Transition.slide > .to {
  transform: translateX(100%);
}
.Transition.slide.animating > .from {
  animation: slide-out var(--slide-transition);
}
.Transition.slide.animating > .to {
  animation: slide-in var(--slide-transition);
}
.Transition.slide.backwards > .to {
  transform: translateX(-100%);
}
.Transition.slide.backwards.animating > .from {
  animation: slide-in-backwards var(--slide-transition);
}
.Transition.slide.backwards.animating > .to {
  animation: slide-out-backwards var(--slide-transition);
}
.Transition.slide-rtl > .to {
  transform: translateX(-100%);
}
.Transition.slide-rtl.animating > .from {
  animation: slide-out var(--slide-transition);
}
.Transition.slide-rtl.animating > .to {
  animation: slide-in var(--slide-transition);
}
.Transition.slide-rtl.backwards > .to {
  transform: translateX(100%);
}
.Transition.slide-rtl.backwards.animating > .from {
  animation: slide-in-backwards var(--slide-transition);
}
.Transition.slide-rtl.backwards.animating > .to {
  animation: slide-out-backwards var(--slide-transition);
}
.Transition.slide-vertical > .to {
  transform: translateY(100%);
}
.Transition.slide-vertical.animating > .from {
  animation: slide-vertical-out var(--slide-transition);
}
.Transition.slide-vertical.animating > .to {
  animation: slide-vertical-in var(--slide-transition);
}
.Transition.slide-vertical.backwards > .to {
  transform: translateY(-100%);
}
.Transition.slide-vertical.backwards.animating > .from {
  animation: slide-vertical-in-backwards var(--slide-transition);
}
.Transition.slide-vertical.backwards.animating > .to {
  animation: slide-vertical-out-backwards var(--slide-transition);
}
.Transition.slide-vertical-fade > .to {
  transform: translateY(100%);
}
.Transition.slide-vertical-fade.animating > .from {
  animation: slide-vertical-fade-out var(--slide-transition);
}
.Transition.slide-vertical-fade.animating > .to {
  animation: slide-vertical-fade-in var(--slide-transition);
}
.Transition.slide-vertical-fade.backwards > .to {
  transform: translateY(-100%);
}
.Transition.slide-vertical-fade.backwards.animating > .from {
  animation: slide-vertical-fade-in-backwards var(--slide-transition);
}
.Transition.slide-vertical-fade.backwards.animating > .to {
  animation: slide-vertical-fade-out-backwards var(--slide-transition);
}
.Transition.mv-slide > * > div {
  animation-fill-mode: forwards !important;
}
.Transition.mv-slide > .to > div {
  transform: translateX(100vw);
}
.Transition.mv-slide.animating > .from > div {
  animation: mv-slide-out 0.4s ease;
}
.Transition.mv-slide.animating > .to > div {
  animation: mv-slide-in 0.4s ease;
}
.Transition.mv-slide.backwards > .to > div {
  transform: translateX(-100vw);
}
.Transition.mv-slide.backwards.animating > .from > div {
  animation: mv-slide-in-backwards 0.4s ease;
}
.Transition.mv-slide.backwards.animating > .to > div {
  animation: mv-slide-out-backwards 0.4s ease;
}
.Transition.slide-fade > .from {
  transform-origin: left;
  transform: translateX(0);
  opacity: 1;
}
.Transition.slide-fade > .to {
  transform-origin: left;
  transform: translateX(1.5rem);
  opacity: 0;
}
.Transition.slide-fade.animating > .from {
  animation: fade-out-opacity var(--slide-transition), slide-fade-out-move var(--slide-transition);
}
.Transition.slide-fade.animating > .to {
  animation: fade-in-opacity var(--slide-transition), slide-fade-in-move var(--slide-transition);
}
.Transition.slide-fade.backwards > .from {
  transform: translateX(0);
  opacity: 1;
}
.Transition.slide-fade.backwards > .to {
  transform: translateX(-1.5rem);
  opacity: 0;
}
.Transition.slide-fade.backwards.animating > .from {
  animation: fade-in-backwards-opacity var(--slide-transition), slide-fade-in-backwards-move var(--slide-transition);
}
.Transition.slide-fade.backwards.animating > .to {
  animation: fade-out-backwards-opacity var(--slide-transition), slide-fade-out-backwards-move var(--slide-transition);
}
.Transition.zoom-fade > .from {
  transform-origin: center;
  transform: scale(1);
  opacity: 1;
}
.Transition.zoom-fade > .to {
  transform-origin: center;
  opacity: 0;
}
.Transition.zoom-fade.animating > .from {
  animation: fade-out-opacity 0.15s ease;
}
.Transition.zoom-fade.animating > .to {
  animation: fade-in-opacity 0.15s ease, zoom-fade-in-move 0.15s ease;
}
.Transition.zoom-fade.backwards > .from {
  transform: scale(1);
}
.Transition.zoom-fade.backwards > .to {
  transform: scale(0.95);
}
.Transition.zoom-fade.backwards.animating > .from {
  animation: fade-in-backwards-opacity 0.1s ease, zoom-fade-in-backwards-move 0.15s ease;
}
.Transition.zoom-fade.backwards.animating > .to {
  animation: fade-out-backwards-opacity 0.15s ease, zoom-fade-out-backwards-move 0.15s ease;
}
.Transition.fade > .from {
  opacity: 1;
}
.Transition.fade > .to {
  opacity: 0;
}
.Transition.fade.animating > .from {
  animation: fade-out-opacity 0.15s ease;
}
.Transition.fade.animating > .to {
  animation: fade-in-opacity 0.15s ease;
}
.Transition.slide-layers {
  --background-color: var(--color-background);
  background: black;
}
.Transition.slide-layers > div {
  background: var(--background-color);
}
.Transition.slide-layers > .to {
  transform: translateX(100%);
}
.Transition.slide-layers.animating > .from {
  animation: slide-layers-out var(--layer-transition);
}
.Transition.slide-layers.animating > .to {
  animation: slide-in var(--layer-transition);
}
.Transition.slide-layers.backwards > .to {
  transform: translateX(-20%);
  opacity: 0.75;
}
.Transition.slide-layers.backwards.animating > .from {
  animation: slide-in-backwards var(--layer-transition);
}
.Transition.slide-layers.backwards.animating > .to {
  animation: slide-layers-out-backwards var(--layer-transition);
}
.Transition.push-slide > div {
  background: var(--color-background);
}
.Transition.push-slide > .from {
  transform-origin: center;
  transform: scale(1);
  opacity: 1;
}
.Transition.push-slide > .from .custom-scroll {
  scrollbar-color: transparent !important;
}
.Transition.push-slide > .from .custom-scroll::-webkit-scrollbar-thumb {
  background-color: transparent !important;
}
.Transition.push-slide > .to {
  transform: translateX(100%);
}
.Transition.push-slide.animating > .from {
  animation: push-out 0.25s ease-in-out;
}
.Transition.push-slide.animating > .to {
  animation: slide-in-200 0.25s ease-in-out;
}
.Transition.push-slide.backwards > .to {
  transform: scale(0.7);
}
.Transition.push-slide.backwards.animating > .from {
  animation: slide-in-200-backwards 0.25s ease-in-out;
}
.Transition.push-slide.backwards.animating > .to {
  animation: push-out-backwards 0.25s ease-in-out;
}
.Transition.reveal > .to {
  clip-path: inset(0 100% 0 0);
}
.Transition.reveal.animating > .to {
  animation: reveal-in 350ms ease-in;
}
.Transition.reveal.backwards > .from {
  clip-path: inset(0 0 0 0);
}
.Transition.reveal.backwards > .to {
  clip-path: none;
}
.Transition.reveal.backwards.animating > .from {
  animation: reveal-in-backwards 350ms ease-out;
}
.Transition.reveal.backwards.animating > .to {
  animation: none;
}

/*
 * common
 */
@keyframes fade-in-opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-out-opacity {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-in-backwards-opacity {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-out-backwards-opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*
 * slide
 */
@keyframes slide-in {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slide-out {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes slide-in-backwards {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes slide-out-backwards {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
/*
 * slide-vertical
 */
@keyframes slide-vertical-in {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slide-vertical-out {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes slide-vertical-in-backwards {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}
@keyframes slide-vertical-out-backwards {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
/*
 * slide-vertical-fade
 */
@keyframes slide-vertical-fade-in {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-vertical-fade-out {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}
@keyframes slide-vertical-fade-in-backwards {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}
@keyframes slide-vertical-fade-out-backwards {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/*
 * mv-slide
 */
@keyframes mv-slide-in {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes mv-slide-out {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100vw);
  }
}
@keyframes mv-slide-in-backwards {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100vw);
  }
}
@keyframes mv-slide-out-backwards {
  0% {
    transform: translateX(-100vw);
  }
  100% {
    transform: translateX(0);
  }
}
/*
 * slide-fade
 */
@keyframes slide-fade-in-move {
  0% {
    transform: translateX(1.5rem);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slide-fade-out-move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1.5rem);
  }
}
@keyframes slide-fade-in-backwards-move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(1.5rem);
  }
}
@keyframes slide-fade-out-backwards-move {
  0% {
    transform: translateX(-1.5rem);
  }
  100% {
    transform: translateX(0);
  }
}
/*
 * zoom-fade
 */
@keyframes zoom-fade-in-move {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes zoom-fade-in-backwards-move {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
@keyframes zoom-fade-out-backwards-move {
  0% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
/*
 * slide-layers
 */
@keyframes slide-layers-out {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-20%);
    opacity: calc(1 - var(--layer-blackout-opacity));
  }
}
@keyframes slide-layers-out-backwards {
  0% {
    transform: translateX(-20%);
    opacity: calc(1 - var(--layer-blackout-opacity));
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
/*
 * push-slide
 */
@keyframes push-out {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.7);
    opacity: 0;
  }
}
@keyframes push-out-backwards {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/*
 * slide
 */
@keyframes slide-in-200 {
  0% {
    transform: translateX(200%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slide-in-200-backwards {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200%);
  }
}
/*
 * slide
 */
@keyframes reveal-in {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}
/*
 * slide
 */
@keyframes reveal-in-backwards {
  0% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 100% 0 0);
  }
}
/*!********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/Menu.scss ***!
  \********************************************************************************************************************************************************************************************/
.Menu.fluid .bubble {
  width: auto;
}
.Menu .backdrop {
  position: fixed;
  left: -100vw;
  right: -100vw;
  top: -100vh;
  bottom: 0;
  z-index: var(--z-menu-backdrop);
}
.Menu .menu-container {
  transform-origin: top left;
}
@media (min-width: 600px) {
  .Menu.BotCommandMenu .bubble {
    min-width: auto;
  }
}
.Menu .bubble {
  overflow: hidden;
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  position: absolute;
  background-color: var(--color-background);
  box-shadow: 0px 1.58333px 3.16667px rgba(0, 0, 0, 0.14), 0px 0.316667px 5.7px rgba(0, 0, 0, 0.12), 0px 0.95px 1.58333px rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius-default-tiny);
  z-index: var(--z-menu-bubble);
  transform: scale(0.85);
  overscroll-behavior: contain;
  transition: opacity 0.2s cubic-bezier(0.2, 0, 0.2, 1), transform 0.2s cubic-bezier(0.2, 0, 0.2, 1) !important;
  --offset-y: calc(100% + 0.5rem);
  --offset-x: 0;
}
@media (min-width: 600px) {
  .Menu .bubble {
    min-width: 15.5rem;
  }
}
.Menu .bubble.custom-scroll {
  overflow-y: auto;
}
body.animation-level-0 .Menu .bubble {
  transform: none !important;
  transition: opacity 0.15s !important;
}
.Menu .bubble.top {
  top: var(--offset-y);
}
.Menu .bubble.bottom {
  bottom: var(--offset-y);
}
.Menu .bubble.left {
  left: var(--offset-x);
}
.Menu .bubble.right {
  right: var(--offset-x);
}
.Menu .bubble.with-notice {
  padding-bottom: 0;
}
body.has-open-dialog .Menu:not(.with-menu-transitions) .bubble {
  transition: none !important;
}
.Menu .notice {
  padding: 0.5rem 0;
  background: var(--color-chat-hover);
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  text-align: center;
}
.Menu .footer {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  width: 100%;
  color: var(--color-text);
  background: var(--color-background);
  font-size: 0.9375rem;
  line-height: 1.125rem;
  padding: 1rem 0.75rem;
  box-shadow: 0px 1.58333px 3.16667px rgba(0, 0, 0, 0.14), 0px 0.316667px 5.7px rgba(0, 0, 0, 0.12), 0px 0.95px 1.58333px rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius-default-tiny);
}
.Menu.compact .bubble {
  background: var(--color-background);
  padding: 0.5rem 0;
}
.Menu.compact .notice {
  background: none;
}
.Menu.compact.no-blur .bubble {
  background: var(--color-background);
}
.Menu .menu-loading-row {
  margin: 0.125rem 1rem;
  width: calc(100% - 2rem);
}
.Menu.botton-tooltip {
  color: initial;
  overflow: hidden;
}
.Menu.botton-tooltip .botton-tooltip-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.Menu.botton-tooltip .close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  right: 0;
  bottom: 100%;
  background-color: #fff;
  border-radius: 50%;
}
.Menu.botton-tooltip .backdrop {
  background-color: rgba(7, 7, 8, 0.2);
}
.Menu.botton-tooltip .bubble-title {
  font-size: 1.125rem;
  font-weight: 500;
  white-space: normal;
}
.Menu.botton-tooltip .bubble {
  padding: 0.5rem 1.5rem 0.5rem 0.75rem;
  border-radius: 2rem;
  overflow: visible;
  pointer-events: none;
}
.Menu.botton-tooltip .bubble.right {
  right: 50%;
  margin-right: -0.875rem;
}
.Menu.botton-tooltip .bubble:before {
  content: "";
  width: 1rem;
  height: 0.5rem;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0 0 1rem 1rem;
  position: absolute;
  right: 0.5rem;
  top: 100%;
  margin-top: -5px;
  background-color: var(--color-background);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.23);
  transform: rotate(-28deg);
}
.Menu.botton-tooltip .bubble:after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  position: absolute;
  right: 0.625rem;
  top: 100%;
  margin-top: 7px;
  background-color: var(--color-background);
  box-shadow: 0px 1.58333px 3.16667px rgba(0, 0, 0, 0.14), 0px 0.316667px 5.7px rgba(0, 0, 0, 0.12), 0px 0.95px 1.58333px rgba(0, 0, 0, 0.2);
}
/*!****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/DropdownMenu.scss ***!
  \****************************************************************************************************************************************************************************************************/
.DropdownMenu {
  position: relative;
}
.DropdownMenu .input {
  margin-bottom: 0;
}

.attachment-modal-more-menu path:not([fill]) {
  stroke: var(--color-primary);
}
/*!************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/MenuItem.scss ***!
  \************************************************************************************************************************************************************************************************/
.MenuItem {
  width: 100%;
  font-size: 0.9375rem;
  background: none;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  display: flex;
  align-items: center;
  padding: 0.625rem 1.5rem;
  position: relative;
  overflow: hidden;
  line-height: 1.3rem;
  white-space: nowrap;
  color: var(--color-text);
  --ripple-color: rgba(0, 0, 0, 0.08);
  cursor: pointer;
  unicode-bidi: plaintext;
}
@media (hover: hover) {
  .MenuItem:hover, .MenuItem:focus {
    background-color: var(--color-chat-hover);
    text-decoration: none;
  }
}
.MenuItem .right-badge {
  min-width: 1.5rem;
  height: 1.5rem;
  margin-left: auto;
  background: var(--color-gray);
  border-radius: 0.75rem;
  padding: 0 0.4375rem;
  color: white;
  font-size: 0.875rem;
  line-height: 1.5rem;
  font-weight: 500;
  text-align: center;
  flex-shrink: 0;
}
.MenuItem.compact .right-badge {
  background: none;
  padding: 0;
  color: var(--color-text-secondary);
}
.MenuItem[dir=rtl] .right-badge {
  margin-left: 0;
  margin-right: auto;
}
@media (max-width: 600px) {
  .MenuItem:focus, .MenuItem:hover, .MenuItem:active {
    text-decoration: none;
    color: inherit;
  }
  .MenuItem:active {
    background-color: var(--color-chat-hover);
  }
}
.MenuItem i {
  font-size: 1.5rem;
  width: 1.5625rem;
  margin-right: 0.6875rem;
  color: var(--color-primary);
}
.MenuItem i.svg-icon {
  font-size: 2rem;
}
.MenuItem .menu-item-name {
  margin-right: 2rem;
}
.MenuItem .menu-item-name.capitalize {
  text-transform: capitalize;
}
.MenuItem.disabled {
  opacity: 0.5 !important;
  cursor: default !important;
}
.MenuItem.destructive i {
  color: inherit;
}
.MenuItem.destructive [stroke] {
  stroke: var(--color-error);
}
.MenuItem:not(.has-ripple):not(.disabled):not(.compact):active {
  background-color: var(--color-item-active);
  transition: none !important;
}
.MenuItem .Switcher,
.MenuItem .menu-item-badge {
  margin-left: auto;
}
.MenuItem .menu-item-badge {
  margin-right: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-primary);
  font-weight: normal;
  line-height: normal;
}
.MenuItem[dir=rtl] i {
  margin-left: 2rem;
  margin-right: 0;
}
.MenuItem[dir=rtl] .menu-item-name {
  margin-left: 2rem;
  margin-right: 0;
}
.MenuItem[dir=rtl] > .Switcher {
  margin-left: 0;
  margin-right: auto;
}
.MenuItem.compact {
  font-size: 0.875rem;
  margin: 0.125rem 0.25rem;
  padding: 0.25rem;
  border-radius: 0.375rem;
  width: auto;
  font-weight: 500;
  transform: scale(1);
  transition: 0.15s ease-in-out transform;
}
.MenuItem.compact i {
  max-width: 1.25rem;
  font-size: 1.25rem;
  margin-left: 0.5rem;
  margin-right: 1.25rem;
}
.MenuItem.compact i::before {
  max-width: 1.25rem;
}
@media (hover: hover) {
  .MenuItem.compact:hover, .MenuItem.compact:focus, .MenuItem.compact:active {
    background: var(--color-background-compact-menu-hover);
    text-decoration: none;
  }
  .MenuItem.compact:active {
    transform: scale(0.98);
  }
}
.MenuItem b {
  font-weight: 600;
}
.MenuItem.wrap {
  display: block;
  white-space: normal;
}
.MenuItem.menu-custom-emoji-sets {
  margin: 0 0.25rem;
  padding: 0.5rem 0.75rem;
  font-weight: 400;
  font-size: small;
  line-height: 1.125rem;
}
/*!*******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/ProgressSpinner.scss ***!
  \*******************************************************************************************************************************************************************************************************/
.ProgressSpinner {
  position: relative;
  z-index: 1;
  width: 3.375rem;
  height: 3.375rem;
  background: rgba(0, 0, 0, 0.25) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLjcxNyA5Ljc1TDE4LjMgMi4xNjdhLjY4NC42ODQgMCAxMC0uOTY3LS45NjdMOS43NSA4Ljc4MyAyLjE2NyAxLjJhLjY4NC42ODQgMCAxMC0uOTY3Ljk2N0w4Ljc4MyA5Ljc1IDEuMiAxNy4zMzNhLjY4NC42ODQgMCAxMC45NjcuOTY3bDcuNTgzLTcuNTgzIDcuNTgzIDcuNTgzYS42ODEuNjgxIDAgMDAuOTY3IDAgLjY4NC42ODQgMCAwMDAtLjk2N0wxMC43MTcgOS43NXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9Ii43NSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==) no-repeat 49% 49%;
  border-radius: 50%;
  cursor: pointer;
}
.ProgressSpinner.no-cross {
  background: transparent !important;
  pointer-events: none;
}
.ProgressSpinner.square {
  background-image: none;
}
.ProgressSpinner.square::after {
  content: "";
  position: absolute;
  width: 0.8125rem;
  height: 0.8125rem;
  border-radius: 0.125rem;
  background-color: #fff;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
}
.ProgressSpinner.size-s, .ProgressSpinner.size-m {
  width: auto;
  height: auto;
  background: rgba(0, 0, 0, 0.25) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTguMjE4IDcuNWw1LjYzMy01LjYzM2EuNTA4LjUwOCAwIDEwLS43MTgtLjcxOEw3LjUgNi43ODIgMS44NjcgMS4xNDlhLjUwOC41MDggMCAxMC0uNzE4LjcxOEw2Ljc4MiA3LjVsLTUuNjMzIDUuNjMzYS41MDguNTA4IDAgMTAuNzE4LjcxOEw3LjUgOC4yMThsNS42MzMgNS42MzNhLjUwNi41MDYgMCAwMC43MTggMCAuNTA4LjUwOCAwIDAwMC0uNzE4TDguMjE4IDcuNXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSIjRkZGIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+) no-repeat 50% 50%;
}
.ProgressSpinner.size-s.square, .ProgressSpinner.size-m.square {
  background-image: none;
  width: 0.75rem;
  height: 0.75rem;
}
.ProgressSpinner.size-xl {
  width: 3.25rem;
  height: 3.25rem;
}
.ProgressSpinner.size-xl svg {
  width: 3rem;
  height: 3rem;
  margin: 0.125rem;
}
.ProgressSpinner.size-xl circle {
  stroke-width: 3px;
}
.ProgressSpinner.transparent {
  background-color: transparent !important;
}
.ProgressSpinner svg {
  display: block;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  animation: 4s linear 0s infinite ProgressSpinnerAnimation;
}
.ProgressSpinner circle {
  transition: stroke-dashoffset 0.5s;
}

@keyframes ProgressSpinnerAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/*!*******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/mediaViewer/MediaViewerActions.scss ***!
  \*******************************************************************************************************************************************************************************************************************/
.MediaViewerActions {
  display: flex;
  margin-inline-start: auto;
  margin-inline-end: -0.375rem;
}
.MediaViewerActions .Button {
  color: white;
}
.MediaViewerActions .Button svg [fill] {
  fill: white;
}

.MediaViewerActions-mobile {
  position: relative;
  color: var(--color-text);
}
.MediaViewerActions-mobile .ProgressSpinner {
  position: absolute;
  top: 0;
  left: 0;
}
.MediaViewerActions-mobile .Button {
  color: white;
}
.MediaViewerActions-mobile .Button svg [fill] {
  fill: white;
}
/*!******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/mediaViewer/MediaViewerFooter.scss ***!
  \******************************************************************************************************************************************************************************************************************/
.MediaViewerFooter {
  position: absolute;
  bottom: 0;
  padding: 1rem 0;
  width: 100%;
  transition: opacity 0.15s;
}
#MediaViewer.zoomed .MediaViewerFooter {
  display: none;
}
@media (max-height: 640px) {
  .MediaViewerFooter {
    padding: 0.5rem 0 0;
  }
}
.MediaViewerFooter.mobile {
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%);
}
.MediaViewerFooter.mobile.is-for-video {
  opacity: 0;
  pointer-events: none;
  padding-bottom: 5rem;
}
.video-controls-visible .MediaViewerFooter.mobile.is-for-video:not(.is-hidden) {
  opacity: 1;
  pointer-events: auto;
}
.MediaViewerFooter.mobile .media-viewer-footer-content {
  opacity: 1;
  z-index: 1;
}
.MediaViewerFooter.mobile .media-text.multiline::before {
  display: none;
  background: none;
}
body.ghost-animating .MediaViewerFooter {
  opacity: 0;
}
.MediaViewerFooter .media-viewer-footer-content {
  position: relative;
  max-width: var(--messages-container-width);
  margin: auto;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.MediaViewerFooter .media-viewer-footer-content:hover {
  opacity: 1;
}
.MediaViewerFooter.is-hidden {
  opacity: 0;
}
.MediaViewerFooter .media-text {
  margin-bottom: 0;
  overflow: auto;
  padding: 0 0.5rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9375rem;
  letter-spacing: 0.025rem;
  max-height: 4.25rem;
}
@media (max-height: 640px) {
  .MediaViewerFooter .media-text {
    max-height: 2.75rem;
  }
}
.MediaViewerFooter .media-text .emoji:not(.custom-emoji) {
  width: 0.9375rem;
  height: 0.9375rem;
  vertical-align: -2px;
}
.MediaViewerFooter .media-text.multiline::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  right: -0.75rem;
  top: -0.25rem;
  bottom: -0.25rem;
  background: rgba(0, 0, 0, 0.75);
  border-radius: var(--border-radius-default);
  z-index: var(--z-below);
}
.MediaViewerFooter a {
  color: var(--color-links);
}
.MediaViewerFooter a:hover, .MediaViewerFooter a:focus {
  text-decoration: underline;
}
/*!***************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/RangeSlider.scss ***!
  \***************************************************************************************************************************************************************************************************/
.RangeSlider {
  --slider-color: var(--color-primary);
  margin-bottom: 1rem;
}
.RangeSlider.disabled {
  pointer-events: none;
  --slider-color: var(--color-text-secondary);
}
.RangeSlider .slider-top-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.625rem;
}
.RangeSlider .slider-top-row .value {
  flex-shrink: 0;
  margin-left: 1rem;
  color: var(--color-text-secondary);
}
.RangeSlider .slider-top-row[dir=rtl] .value {
  margin-left: 0;
  margin-right: 1rem;
}
.RangeSlider .slider-main {
  position: relative;
  z-index: 1;
}
.RangeSlider .slider-main::before {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0.3125rem;
  height: 0.125rem;
  background-color: var(--color-borders);
  border-radius: 0.125rem;
  opacity: 0.5;
  z-index: -1;
}
.RangeSlider .slider-fill-track {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0.3125rem;
  height: 0.125rem;
  border-radius: 0.125rem;
  pointer-events: none;
}
.RangeSlider.bold .slider-main::before {
  top: 0.25rem;
  height: 0.25rem;
}
.RangeSlider.bold .slider-fill-track {
  top: 0.25rem;
  height: 0.25rem;
}
.RangeSlider input[type=range] {
  display: block;
  width: 100%;
  height: 0.75rem;
  margin-bottom: 0.5rem;
  background: transparent;
}
.RangeSlider input[type=range]:focus {
  outline: none;
}
.RangeSlider input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.RangeSlider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}
.RangeSlider input[type=range]::-moz-slider-thumb {
  -moz-appearance: none;
}
.RangeSlider input[type=range]::-webkit-slider-runnable-track {
  cursor: pointer;
}
.RangeSlider input[type=range]::-moz-range-track, .RangeSlider input[type=range]::-moz-range-progress {
  cursor: pointer;
}
.RangeSlider input[type=range]::-webkit-slider-thumb {
  background: var(--slider-color);
  border: none;
  height: 0.6875rem;
  width: 0.6875rem;
  border-radius: 50%;
  cursor: pointer;
  transform: scale(1);
  -webkit-transition: transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out;
}
.RangeSlider input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}
.RangeSlider input[type=range]::-moz-range-thumb {
  background: var(--slider-color);
  border: none;
  height: 0.6875rem;
  width: 0.6875rem;
  border-radius: 50%;
  cursor: pointer;
  transform: scale(1);
  -moz-transition: transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out;
}
.RangeSlider input[type=range]::-moz-range-thumb:hover {
  transform: scale(1.2);
}
.RangeSlider input[type=range]::-ms-thumb {
  background: var(--slider-color);
  border: none;
  height: 0.6875rem;
  width: 0.6875rem;
  border-radius: 50%;
  cursor: pointer;
  transform: scale(1);
  -ms-transition: transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out;
}
.RangeSlider input[type=range]::-ms-thumb:hover {
  transform: scale(1.2);
}
.RangeSlider .slider-options {
  display: grid;
  grid-template-rows: auto;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
}
.RangeSlider.thumbs-4 .slider-options {
  grid-auto-columns: 17% 1fr 1fr 17%;
}
.RangeSlider.thumbs-5 .slider-options {
  grid-auto-columns: 13.5% 1fr 1fr 1fr 13.5%;
}
.RangeSlider .slider-option {
  font-size: 0.8125rem;
  text-align: center;
  cursor: pointer;
  padding-bottom: 0.625rem;
  color: var(--color-text-secondary);
  transition: color 0.2s ease;
}
.RangeSlider .slider-option:hover, .RangeSlider .slider-option.active {
  color: var(--color-text);
}
.RangeSlider .slider-option.active {
  font-weight: 500;
}
.RangeSlider .slider-option:first-child {
  text-align: left;
}
.RangeSlider .slider-option:last-child {
  text-align: right;
}
/*!********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/mediaViewer/VideoPlayerControls.scss ***!
  \********************************************************************************************************************************************************************************************************************/
.VideoPlayerControls {
  display: flex;
  align-items: center;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 2rem 0.5rem 0.5rem;
  font-size: 0.875rem;
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%);
  transition: opacity 0.3s;
  z-index: var(--z-video-player-controls);
  opacity: 0;
  pointer-events: none;
}
#MediaViewer.zoomed .VideoPlayerControls {
  display: none;
}
.VideoPlayerControls.mobile {
  position: fixed;
  padding: 2.25rem 0.5rem 0.75rem;
  background: none;
}
.VideoPlayerControls.mobile .player-seekline {
  top: 1rem;
}
.VideoPlayerControls.mobile .playback-rate-menu .bubble {
  bottom: 4.6875rem;
}
.VideoPlayerControls.active {
  opacity: 1;
  pointer-events: auto;
}
.VideoPlayerControls .buttons {
  display: flex;
  align-items: center;
  width: 100%;
}
.VideoPlayerControls .spacer {
  flex-grow: 1;
}
.VideoPlayerControls .Button.round {
  width: 2rem;
  padding: 0;
  margin: 0.25rem;
  height: 2rem;
}
@media (max-width: 320px) {
  .VideoPlayerControls .Button.round {
    margin: 0.125rem;
  }
}
.VideoPlayerControls .volume-slider {
  margin-bottom: 0;
  margin-left: -0.75rem;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  width: 0;
  --volume-slider-width: 4rem;
  --slider-color: #fff;
  --color-borders: rgba(255, 255, 255, 0.5);
  /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
  transition: width 0.2s ease-in-out;
}
.VideoPlayerControls .volume-slider:hover {
  overflow: hidden;
  width: var(--volume-slider-width);
}
.VideoPlayerControls .volume-slider:hover .RangeSlider__input {
  opacity: 1;
}
.VideoPlayerControls .volume-slider .RangeSlider__input {
  margin-bottom: 0;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}
.VideoPlayerControls .volume:hover + .volume-slider {
  overflow: hidden;
  width: var(--volume-slider-width);
}
.VideoPlayerControls .volume:hover + .volume-slider .RangeSlider__input {
  opacity: 1;
}
.VideoPlayerControls .player-time {
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
.VideoPlayerControls .player-file-size {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 0.5rem;
}
@media (max-width: 320px) {
  .VideoPlayerControls .player-file-size {
    margin: 0.25rem;
  }
}
.VideoPlayerControls .player-seekline {
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: 1rem;
  height: 1rem;
  touch-action: none;
  cursor: pointer;
}
.VideoPlayerControls .player-seekline-track {
  position: absolute;
  top: 50%;
  left: -0.25rem;
  right: -0.25rem;
  height: 5px;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.16);
  border-radius: var(--border-radius-default);
}
.VideoPlayerControls .player-seekline-buffered, .VideoPlayerControls .player-seekline-played, .VideoPlayerControls .player-seekline-input {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: var(--border-radius-default);
}
.VideoPlayerControls .player-seekline-buffered {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
}
.VideoPlayerControls .player-seekline-played {
  background: var(--color-primary);
}
.VideoPlayerControls .player-seekline-played::after {
  content: "";
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background-color: var(--color-primary);
  right: 0;
  top: 50%;
  transform: translate(0.325rem, -50%);
}
.VideoPlayerControls .playback-rate-menu {
  color: var(--color-text);
}
.VideoPlayerControls .playback-rate-menu .bubble {
  min-width: 3.5rem;
  margin-right: 5.8125rem;
  bottom: 4.1875rem;
}
.VideoPlayerControls .playback-rate-menu.no-fullscreen .bubble, .VideoPlayerControls .playback-rate-menu.no-pip .bubble {
  margin-right: 3.3125rem;
}
.VideoPlayerControls .playback-rate-menu.no-fullscreen.no-pip .bubble {
  margin-right: 0.8125rem;
}
/*!************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/mediaViewer/VideoPlayer.scss ***!
  \************************************************************************************************************************************************************************************************************/
.VideoPlayer {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  overflow: hidden;
}
#MediaViewer.zoomed .VideoPlayer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#MediaViewer.zoomed .VideoPlayer > div {
  width: 100% !important;
  height: 100% !important;
}
#MediaViewer.zoomed .VideoPlayer video {
  max-height: none !important;
}
@media (min-width: 601px) {
  .VideoPlayer {
    z-index: 1;
  }
}
@media (max-width: 600px) {
  .VideoPlayer {
    overflow: visible;
  }
}
@media (max-height: 640px) {
  .VideoPlayer {
    margin-bottom: 1.75rem;
  }
  .has-footer .VideoPlayer {
    margin-bottom: 0;
  }
}
.VideoPlayer video {
  display: block;
  max-height: calc(100vh - 8.25rem);
  margin: auto;
  object-fit: contain;
  outline: none;
  width: 100%;
  height: 100%;
  background: no-repeat 50% 50%;
  background-size: contain;
}
@media (max-height: 640px) {
  .VideoPlayer video {
    max-height: calc(100vh - 10rem);
  }
}
.is-touch-env .VideoPlayer video {
  pointer-events: none;
}
.VideoPlayer .play-button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3.25rem;
  height: 3.25rem;
  background-color: rgba(0, 0, 0, 0.5) !important;
  z-index: 3;
}
body:not(.animation-level-0) .VideoPlayer .play-button {
  transition: opacity 0.3s ease !important;
}
.VideoPlayer .play-button .icon-play {
  font-size: 1.75rem;
  position: relative;
  left: 0.125rem;
}
.VideoPlayer .spinner-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.VideoPlayer .spinner-container .buffering {
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 0.75rem;
  position: absolute;
  left: 0.1875rem;
  top: 0.1875rem;
  z-index: 1;
  padding: 0 0.375rem;
  border-radius: 0.75rem;
  line-height: 1.125rem;
}
.VideoPlayer .spinner-container .ProgressSpinner {
  cursor: pointer;
}
/*!*******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/mediaViewer/MediaViewerContent.scss ***!
  \*******************************************************************************************************************************************************************************************************************/
.MediaViewerContent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  overflow: hidden;
  z-index: 1;
  padding: 3.25rem 0;
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.MediaViewerContent .thumbnail {
  position: relative;
}
.MediaViewerContent .thumbnail img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.MediaViewerContent > img {
  max-width: 100vw;
  max-height: calc(100vh - 8.25rem);
  object-fit: contain;
  transition: transform 0.2s;
}
.MediaViewerContent .spinner-wrapper {
  max-width: 100vw;
  margin: auto;
}
.MediaViewerContent .Spinner {
  margin: auto;
}
.MediaViewerContent iframe {
  border: none;
}
/*!******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/mediaViewer/MediaViewerSlides.scss ***!
  \******************************************************************************************************************************************************************************************************************/
.MediaViewerSlides {
  position: absolute;
  display: flex;
  height: 100%;
  max-height: 100vh;
  min-height: -moz-available;
  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
  max-height: -webkit-fill-available;
  width: 100%;
  overflow: hidden;
  touch-action: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.MediaViewerSlides * {
  -ms-scroll-chaining: none;
}

.MediaViewerSlide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  flex: 100% 0 0;
  z-index: 0;
  touch-action: none;
  transform-origin: 0 0;
}
.MediaViewerSlide--active {
  z-index: 1;
}
.MediaViewerSlide--moving {
  cursor: move;
}
/*!************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/mediaViewer/MediaViewer.scss ***!
  \************************************************************************************************************************************************************************************************************/
#MediaViewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  z-index: var(--z-media-viewer);
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto 1fr;
  grid-column-gap: 0;
  grid-row-gap: 0;
  justify-items: stretch;
  align-items: center;
}
@media (max-width: 600px) {
  #MediaViewer {
    background: rgb(0, 0, 0);
  }
}
#MediaViewer:not(.shown) {
  display: block !important;
  transform: scale(0);
}
body.ghost-animating #MediaViewer > .pan-wrapper,
body.ghost-animating #MediaViewer > button,
body.ghost-animating #MediaViewer .MediaViewerContent img,
body.ghost-animating #MediaViewer .MediaViewerContent .VideoPlayer {
  display: none;
}
body.animation-level-2 #MediaViewer {
  transition-duration: 0.3s !important;
}
#MediaViewer:not(.open) .SenderInfo,
#MediaViewer .closing .SenderInfo {
  pointer-events: none;
  transition: none;
}
#MediaViewer.zoomed .navigation {
  display: none;
}
#MediaViewer.zoomed .media-viewer-head {
  z-index: 2;
}
#MediaViewer.zoomed .MediaViewerSlide {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  padding: 0;
  z-index: 1;
}
#MediaViewer .media-viewer-head {
  display: flex;
  grid-area: 1/1/2/-2;
  position: relative;
  z-index: var(--z-media-viewer-head);
  min-width: 0;
  background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 100%);
  padding: 0.5rem max(1.25rem, env(safe-area-inset-left));
}
#MediaViewer .media-viewer-head > .Transition {
  width: 100%;
  min-width: 0;
}
@media (max-width: 600px) {
  #MediaViewer .media-viewer-head {
    padding: 0.5rem max(0.5rem, env(safe-area-inset-left));
  }
  #MediaViewer .media-viewer-head .media-viewer-close {
    margin-right: 1.5rem;
  }
}
@supports not (padding: 0.5rem max(1.25rem, env(safe-area-inset-left))) {
  #MediaViewer .media-viewer-head {
    padding: 0.5rem 1.25rem;
  }
  @media (max-width: 600px) {
    #MediaViewer .media-viewer-head {
      padding: 0.5rem;
    }
  }
}
#MediaViewer .media-viewer-head-left {
  display: flex;
}
#MediaViewer > .Transition, #MediaViewer > .pan-wrapper {
  grid-area: 1/1/-1/-1;
}
#MediaViewer > .Transition, #MediaViewer > .pan-wrapper .Transition {
  position: relative;
  justify-self: center;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}
#MediaViewer .navigation {
  position: fixed;
  top: 4rem;
  width: 10vw;
  bottom: 0;
  border: none;
  padding: 0;
  margin: 0;
  appearance: none;
  background: transparent no-repeat;
  background-size: 1.25rem;
  transition: opacity 0.15s;
  outline: none;
  cursor: pointer;
  z-index: 1;
}
@media (max-width: 600px) {
  #MediaViewer .navigation {
    width: 20vw;
  }
}
#MediaViewer .navigation:hover, .is-touch-env #MediaViewer .navigation {
  opacity: 1;
}
#MediaViewer .navigation.prev {
  background-image: url(/media_navigation_previous.11f3cfece8fead5a78e6.svg);
  background-position: 1.25rem calc(50% - 2rem);
  left: env(safe-area-inset-left);
}
#MediaViewer .navigation.prev[dir=rtl] {
  left: auto;
  right: env(safe-area-inset-right);
  transform: scaleX(-1);
}
@supports not (left: env(safe-area-inset-left)) {
  #MediaViewer .navigation.prev {
    left: 0;
  }
  #MediaViewer .navigation.prev[dir=rtl] {
    left: auto;
    right: 0;
  }
}
#MediaViewer .navigation.next {
  right: env(safe-area-inset-right);
  background-image: url(/media_navigation_next.3d6e264d21e73ad72573.svg);
  background-position: calc(100% - 1.25rem) calc(50% - 2rem);
}
#MediaViewer .navigation.next[dir=rtl] {
  right: auto;
  left: env(safe-area-inset-left);
  transform: scaleX(-1);
}
@supports not (right: env(safe-area-inset-right)) {
  #MediaViewer .navigation.next {
    right: 0;
  }
  #MediaViewer .navigation.next[dir=rtl] {
    right: auto;
    left: 0;
  }
}
#MediaViewer .navigation.inline {
  top: calc(50% - 3rem);
  bottom: unset;
  height: 6rem;
  background-position-y: center;
}
@media (max-width: 600px) {
  #MediaViewer .navigation.inline {
    opacity: 0;
    transition: opacity 0.15s ease-in;
    pointer-events: none;
  }
  .video-controls-visible #MediaViewer .navigation.inline {
    opacity: 1;
    pointer-events: auto;
  }
}
#MediaViewer .is-protected {
  -webkit-user-select: none;
          user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

.ghost {
  position: absolute;
  z-index: var(--z-media-viewer);
  will-change: transform, opacity;
  overflow: hidden;
  border-radius: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.ghost.transition-circle {
  transition: transform 0.2s ease, opacity 0.2s ease, border-radius 0.2s ease;
}
.ghost.rounded-corners {
  border-radius: var(--border-radius-messages);
}
.ghost.circle {
  border-radius: 50%;
}
body.is-ios .ghost {
  transition: transform 0.2s ease, opacity 0.2s ease, border-radius 0.2s ease !important;
}
.ghost img,
.ghost video {
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
  object-fit: cover;
}
/*!***********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/Loading.scss ***!
  \***********************************************************************************************************************************************************************************************/
.Loading {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.Loading.interactive {
  cursor: pointer;
}
.Loading p {
  font-size: 0.875rem;
  color: #74747b;
  max-width: 320px;
  text-align: center;
}
.Loading .Spinner {
  --spinner-size: 2.375rem;
}
.Loading .Spinner.with-background::before {
  left: -0.375rem;
  top: -0.375rem;
  bottom: -0.375rem;
  right: -0.375rem;
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/DotAnimation.scss ***!
  \********************************************************************************************************************************************************************************************************/
.DotAnimation {
  display: inline-flex;
  align-items: center;
}
.DotAnimation .ellipsis {
  display: flex;
  width: 1rem;
  overflow: hidden;
}
.DotAnimation .ellipsis::after {
  content: "...";
  animation: dot-animation 1s steps(4, start) infinite;
}
html[lang=ar] .DotAnimation .ellipsis::after, html[lang=fa] .DotAnimation .ellipsis::after {
  animation-name: dot-animation-rtl;
}

@keyframes dot-animation {
  from {
    transform: translateX(-1rem);
  }
}
@keyframes dot-animation-rtl {
  from {
    transform: translateX(1rem);
  }
}
/*!************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/MenuSeparator.module.scss ***!
  \************************************************************************************************************************************************************************************************************/
.MenuSeparator-module__root {
  margin: 0.25rem 1rem;
  height: 1px;
  border-radius: 1px;
  background-color: var(--color-interactive-inactive);
}
/*!************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/ListItem.scss ***!
  \************************************************************************************************************************************************************************************************/
.ListItem {
  position: relative;
}
.ListItem.has-ripple .ListItem-button {
  overflow: hidden;
}
body.is-ios .ListItem::after, body.is-android .ListItem::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0.75rem;
  right: 0;
  height: 0.02rem;
  background-color: var(--color-underline);
  /* stylelint-disable-next-line plugin/whole-pixel */
}
body.is-ios .ListItem:last-of-type::after, body.is-android .ListItem:last-of-type::after {
  display: none;
}
body.is-ios .ListItem.small-icon::after, body.is-android .ListItem.small-icon::after {
  left: 3.875rem;
}
body.is-ios .ListItem.no-icon::after, body.is-android .ListItem.no-icon::after {
  left: 0;
}
.ListItem .ListItem-button {
  width: 100%;
  height: 100%;
  background: var(--background-color);
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  display: flex;
  align-items: center;
  padding: 1rem;
  position: relative;
  white-space: nowrap;
  color: var(--color-text);
  border-radius: var(--border-radius-default);
  --ripple-color: rgba(0, 0, 0, 0.08);
  text-decoration: none;
  transition: var(--select-transition);
}
.ListItem .ListItem-button > i {
  font-size: 1.5rem;
  color: var(--color-text-secondary);
}
.ListItem .ListItem-button > .Switcher {
  margin-left: auto;
}
.ListItem .ListItem-button.is_link {
  color: var(--color-primary);
}
.ListItem .ListItem-button.is_link svg [stroke] {
  stroke: var(--color-primary);
}
.ListItem .ListItem-button.smaller {
  font-size: 0.9375rem;
  padding: 0.5rem 1rem;
}
.ListItem .ListItem-button .middle {
  flex-grow: 1;
}
.ListItem .contact-info {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ListItem .title,
.ListItem .subtitle {
  line-height: 1.5rem;
}
.ListItem .title .Button.link,
.ListItem .subtitle .Button.link {
  padding-top: 0;
  padding-bottom: 0;
}
.ListItem .user-status,
.ListItem .group-status,
.ListItem .title,
.ListItem .other-usernames,
.ListItem .subtitle {
  text-align: initial;
  unicode-bidi: plaintext;
  text-overflow: ellipsis;
  overflow: hidden;
}
.ListItem .other-usernames {
  display: block;
  white-space: normal;
  line-height: 1.25rem;
}
.ListItem .username-link {
  position: relative;
  z-index: 2;
}
.ListItem.multiline .ListItem-button > i {
  position: relative;
  top: 0.25rem;
}
.ListItem.underline:not(:last-child) .ListItem-button::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 0;
  right: -0.5rem;
  width: 100%;
  height: 0.02rem;
  background-color: var(--color-underline);
}
.ListItem.disabled:not(.click-allowed) {
  pointer-events: none;
}
.ListItem.disabled .ListItem-button {
  opacity: 0.5;
}
.ListItem.active .ListItem-button {
  background-color: var(--color-primary);
  color: white;
}
.ListItem:not(.disabled):not(.is-static) .ListItem-button {
  cursor: pointer;
}
body.cursor-ew-resize .ListItem:not(.disabled):not(.is-static) .ListItem-button {
  cursor: ew-resize !important;
}
@media (hover: hover) and (min-width: 768px) {
  .ListItem:not(.disabled):not(.is-static) .ListItem-button:hover {
    --background-color: var(--color-chat-hover);
  }
}
@media (max-width: 600px) {
  .ListItem:not(.disabled):not(.is-static) .ListItem-button.active {
    --background-color: var(--color-chat-hover);
  }
}
@media (min-width: 600px) {
  .ListItem:not(.has-ripple):not(.is-static) .ListItem-button:active, body.animation-level-0 .ListItem .ListItem-button:active {
    --background-color: var(--color-item-active) !important;
  }
}
.ListItem.has-menu-open .ListItem-button {
  --background-color: var(--color-chat-hover);
}
.ListItem.narrow {
  margin-bottom: 0.75rem;
}
.ListItem.narrow .ListItem-button {
  padding: 0.5rem 1rem;
}
.ListItem.inactive {
  pointer-events: none;
}
.ListItem.focus {
  --background-color: var(--color-chat-hover);
}
.ListItem.destructive .ListItem-button {
  color: var(--color-error);
}
.ListItem.destructive .ListItem-button i {
  color: inherit;
}
.ListItem-context-menu {
  position: absolute;
}
.ListItem-context-menu .bubble .MenuItem button {
  padding-left: 1rem !important;
  padding-right: 2rem !important;
}
body.is-ios .ListItem.chat-item-clickable, body.is-macos .ListItem.chat-item-clickable {
  --color-text-secondary: var(--color-text-secondary-apple);
}
.ListItem.chat-item-clickable .ListItem-button {
  padding: 0.688rem 0.5rem;
}
.ListItem.chat-item-clickable .Avatar {
  margin-right: 0.725rem;
}
.ListItem.chat-item-clickable .info {
  flex: 1;
  overflow: hidden;
}
.ListItem.chat-item-clickable .info-name-title {
  display: flex;
  align-items: center;
}
.ListItem.chat-item-clickable .info-row,
.ListItem.chat-item-clickable .title,
.ListItem.chat-item-clickable .subtitle {
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.ListItem.chat-item-clickable .subtitle {
  justify-content: space-between;
}
.ListItem.chat-item-clickable .title > svg {
  margin-top: -0.125rem;
  flex-shrink: 0;
}
.ListItem.chat-item-clickable .separator {
  flex-grow: 1;
  min-width: 0.5rem;
}
.ListItem.chat-item-clickable h3,
.ListItem.chat-item-clickable .last-message,
.ListItem.chat-item-clickable .status,
.ListItem.chat-item-clickable .typing-status {
  font-size: 1rem;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: initial;
}
.ListItem.chat-item-clickable .last-message {
  font-size: 0.9375rem;
}
.ListItem.chat-item-clickable .user-status,
.ListItem.chat-item-clickable .contact-phone,
.ListItem.chat-item-clickable .contact-username {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-text-secondary);
}
.ListItem.chat-item-clickable .contact-username {
  color: var(--color-primary);
}
.ListItem.chat-item-clickable .ChatInfo {
  display: flex;
  align-items: center;
  flex: 1;
  overflow: hidden;
}
.ListItem.chat-item-clickable .ChatInfo .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ListItem.chat-item-clickable .ChatInfo .custom-title {
  padding-inline-start: 1rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-inline-start: auto;
  flex-shrink: 0;
}
.ListItem.chat-item-clickable .ChatInfo .status,
.ListItem.chat-item-clickable .ChatInfo .typing-status {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.ListItem.chat-item-clickable .ChatInfo .status.online .user-status,
.ListItem.chat-item-clickable .ChatInfo .typing-status.online .user-status {
  color: var(--color-primary);
}
.ListItem.chat-item-clickable .ChatInfo .status[dir=rtl], .ListItem.chat-item-clickable .ChatInfo .status[dir=auto],
.ListItem.chat-item-clickable .ChatInfo .typing-status[dir=rtl],
.ListItem.chat-item-clickable .ChatInfo .typing-status[dir=auto] {
  text-align: initial;
  width: 100%;
}
.ListItem.chat-item-clickable .ChatInfo .status .group-status:only-child,
.ListItem.chat-item-clickable .ChatInfo .status .user-status:only-child,
.ListItem.chat-item-clickable .ChatInfo .typing-status .group-status:only-child,
.ListItem.chat-item-clickable .ChatInfo .typing-status .user-status:only-child {
  display: flow-root;
}
.ListItem.chat-item-clickable .contact-phone,
.ListItem.chat-item-clickable .contact-username,
.ListItem.chat-item-clickable h3,
.ListItem.chat-item-clickable .last-message,
.ListItem.chat-item-clickable .status,
.ListItem.chat-item-clickable .typing-status {
  text-align: initial;
  unicode-bidi: plaintext;
}
body.is-ios .ListItem.chat-item-clickable .last-message, body.is-macos .ListItem.chat-item-clickable .last-message,
body.is-ios .ListItem.chat-item-clickable .status,
body.is-macos .ListItem.chat-item-clickable .status,
body.is-ios .ListItem.chat-item-clickable .typing-status,
body.is-macos .ListItem.chat-item-clickable .typing-status {
  font-size: 0.9375rem;
}
.ListItem.chat-item-clickable[dir=rtl] .ListItem-button {
  padding: 0.5625rem 0.5625rem 0.5625rem 0.6875rem;
}
.ListItem.chat-item-clickable[dir=rtl] .Avatar {
  margin-left: 0.5rem;
  margin-right: 0;
}
.ListItem.chat-item-clickable[dir=rtl] .info > .status {
  width: 100%;
}
.ListItem.chat-item-clickable.BotCommand .ListItem-button {
  padding: 0.364rem 0.5rem;
}
.ListItem.subscriptions-item .subtitle {
  justify-content: flex-start;
  gap: 1rem;
  font-size: 0.875rem;
}
.ListItem.subscriptions-item .Avatar {
  width: 3.5625rem;
  height: 3.5625rem;
  background-position: top;
  background-size: cover;
}
.ListItem.subscriptions-item .Avatar.ai-text {
  background-image: url(/gradienta-LeG68PrXA6Y-unsplash.c43e5bd2d98fbdf612d8.jpg);
}
.ListItem.subscriptions-item .Avatar.ai-img {
  background-image: url(/image-bg.6065befde6ca526f3d6e.jpg);
}
.ListItem.subscriptions-item .Avatar.ai-double {
  background-image: url(/image-and-text-bg.8b9707d92f6be4b9ecc6.png);
}
.ListItem.subscriptions-item .info-row {
  gap: 0.25rem;
}
.ListItem.subscriptions-item .info-row .type,
.ListItem.subscriptions-item .info-row .icon-svg {
  flex: 0 0 auto;
}
.ListItem.subscriptions-item.has-action .secondary-icon {
  margin-right: 0;
}
.ListItem.subscriptions-item .MenuItem [stroke] {
  stroke: var(--color-text);
}
.ListItem.referral-item .subtitle {
  justify-content: flex-start;
  gap: 0.375rem;
  font-size: 0.875rem;
  line-height: 1rem;
}
.ListItem.referral-item .Avatar {
  width: 2.6875rem;
  height: 2.6875rem;
}
.ListItem.referral-item .info-row {
  gap: 0.25rem;
}
.ListItem.referral-item.chat-item-clickable .ListItem-button {
  padding: 0.75rem 1.25rem;
}
.ListItem.search-result-message .Avatar {
  width: 2.75rem;
  height: 2.75rem;
}
.ListItem.search-result-message .title {
  flex-grow: 1;
  padding-right: 0.125rem;
}
.ListItem.search-result-message .search-result-message-top {
  display: flex;
}
.ListItem.search-result-message h3 {
  max-width: 80%;
  font-size: 1rem;
  line-height: 1.5rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  display: block;
}
.ListItem.search-result-message .subtitle {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  display: block;
  max-width: 20rem;
}
.ListItem.search-result-message .subtitle .matching-text-highlight {
  color: var(--color-text);
  background: #cae3f7;
  border-radius: 0.25rem;
  padding: 0 0.125rem;
  display: inline-block;
}
.theme-dark .ListItem.search-result-message .subtitle .matching-text-highlight {
  --color-text: #000;
}
.ListItem.search-result-message[dir=rtl] .LastMessageMeta {
  margin-left: 0;
  margin-right: auto;
}
.ListItem.search-result-message[dir=rtl] .subtitle {
  margin-right: 0;
  display: block;
}
.ListItem.picker-list-item {
  margin: 0;
}
.ListItem.picker-list-item .ListItem-button {
  display: flex;
  align-items: center;
}
.ListItem.picker-list-item .Avatar {
  width: 2.75rem;
  height: 2.75rem;
}
.ListItem.picker-list-item .Checkbox {
  flex-shrink: 0;
  height: 1.5rem;
  margin: 0;
  padding-left: 2.5rem;
}
.ListItem.picker-list-item[dir=rtl] .Checkbox {
  padding-left: 0;
  padding-right: 4rem;
}
.ListItem .multiline-item {
  flex-grow: 1;
  white-space: initial;
  overflow: hidden;
}
.ListItem .multiline-item .word-break {
  overflow-wrap: break-word;
}
.ListItem .multiline-item .title,
.ListItem .multiline-item .subtitle {
  display: block;
  text-align: initial;
}
.ListItem .multiline-item .title {
  line-height: 1.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ListItem .multiline-item .subtitle {
  font-size: 0.75rem;
  line-height: 1.5rem;
  color: var(--color-text-secondary);
}
.ListItem .multiline-item .subtitle + .subtitle {
  margin-top: -0.25rem;
}
.ListItem .multiline-item .subtitle.black {
  color: var(--color-text);
}
.ListItem[dir=rtl] .ListItem-button > i {
  margin-left: 2rem;
  margin-right: 0;
}
.ListItem .type {
  display: flex;
  text-transform: capitalize;
  align-items: center;
  background: var(--color-2);
  color: white;
  font-size: 0.6875rem;
  line-height: 1;
  padding: 0 0.25rem;
  border-radius: 10px;
  height: 1.125rem;
}
.ListItem .type .icon-svg {
  background-color: white;
  border-radius: 50%;
  margin-right: 0.25rem;
}
.ListItem .type .icon-svg svg path {
  stroke: var(--color-2);
}
.ListItem .type.cancelled {
  background: var(--color-text-secondary);
}
.ListItem.text-trigger {
  font-weight: 500;
  text-align: left;
}
.ListItem.text-trigger .ListItem-button {
  background-color: var(--color-background-secondary);
  padding: 0.9375rem 0.9375rem 0.9375rem 1.1rem;
  border-radius: var(--border-radius-default-smaller);
}
.ListItem.text-trigger .ListItem-button path:not([stroke]) {
  fill: var(--color-text-secondary);
}
.ListItem.text-trigger.has-action .ListItem-button {
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
}
.ListItem.has-action .secondary-icon {
  margin-right: -0.625rem;
}
.ListItem .title > svg:last-child {
  flex-shrink: 0;
}
.ListItem .title svg.green [stroke] {
  stroke: #44be2e;
}

.links-item-middle {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.links-item-middle .ListItem {
  --background-color: var(--color-background-secondary);
}
.links-item-middle .ListItem .ListItem-button {
  padding: 0.75rem 1rem;
  white-space: normal;
}
.links-item-middle .title-icon {
  flex: 0 0 auto;
}
.links-item-middle .title-icon:not(.custom) svg [fill] {
  fill: white;
}
.links-item-middle .title-icon.earn-bg {
  background: linear-gradient(180deg, #00a89b 1.79%, #84ce5d 101.79%);
}
.links-item-middle .title-icon.contacts-bg {
  background: linear-gradient(180deg, #c446c3 1.79%, #8b57c6 101.79%);
}
.links-item-middle .title-icon.broadcast-bg {
  background: linear-gradient(180deg, #8b57c5 1.79%, #536bc3 101.79%);
}
.links-item-middle .title-icon.pay-bg {
  background: linear-gradient(180deg, #00a7f8 1.79%, #00a89b 101.79%);
}
.links-item-middle .title-icon.tips-bg {
  background: linear-gradient(135deg, #ffa500 31.17%, #e4df6b 75.98%);
}
.links-item-middle .info {
  flex: 1 1 auto;
}
.links-item-middle .sub {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.2;
}
.links-item-middle .css-icon-right {
  border-color: var(--color-primary);
  flex: 0 0 auto;
}

.secondary-icon path {
  fill: var(--color-text-secondary);
}

.list-item-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*!**************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/Avatar.scss ***!
  \**************************************************************************************************************************************************************************************************/
.Avatar {
  --color-user: var(--color-primary);
  --radius: 50%;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 3.375rem;
  height: 3.375rem;
  border-radius: var(--radius);
  color: white;
  font-weight: 500;
  display: flex;
  white-space: nowrap;
  -webkit-user-select: none;
          user-select: none;
  position: relative;
}
.Avatar:not(.no-bg) {
  background: linear-gradient(var(--color-white) -125%, var(--color-user));
}
.Avatar__media {
  border-radius: var(--radius);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.Avatar .emoji {
  width: 1rem;
  height: 1rem;
}
.Avatar__icon {
  font-size: 1.25rem;
}
.Avatar.size-micro {
  width: 1rem;
  height: 1rem;
  font-size: 0.5rem;
}
.Avatar.size-micro .emoji {
  width: 0.5625rem;
  height: 0.5625rem;
}
.Avatar.size-tiny {
  width: 1.875rem;
  height: 1.875rem;
  font-size: 0.875rem;
  line-height: 1.9375rem;
}
.Avatar.size-tiny .emoji {
  width: 0.875rem;
  height: 0.875rem;
}
.Avatar.size-mini {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.75rem;
}
.Avatar.size-mini .emoji {
  width: 0.75rem;
  height: 0.75rem;
}
.Avatar.size-small {
  width: 2.125rem;
  height: 2.125rem;
  font-size: 0.875rem;
  line-height: 2.0625rem;
}
.Avatar.size-small .emoji {
  width: 0.875rem;
  height: 0.875rem;
}
.Avatar.size-small-mobile {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.875rem;
}
.Avatar.size-small-mobile .emoji {
  width: 0.875rem;
  height: 0.875rem;
}
.Avatar.size-medium {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.1875rem;
  line-height: 1;
}
.Avatar.size-medium .emoji {
  width: 1rem;
  height: 1rem;
}
.Avatar.size-large {
  font-size: 1.375rem;
}
.Avatar.size-large i {
  font-size: 1.625rem;
}
.Avatar.size-large .emoji {
  width: 1.3125rem;
  height: 1.3125rem;
}
.Avatar.size-jumbo {
  width: 5rem;
  height: 5rem;
  font-size: 2.25rem;
}
.Avatar.size-jumbo__i {
  font-size: 6rem;
}
.Avatar.size-jumbo .emoji {
  width: 3.5rem;
  height: 3.5rem;
}
.Avatar.online::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 2px;
  right: 0;
  width: 0.625rem;
  height: 0.6255rem;
  border-radius: 42%;
  box-shadow: 0 0 0 1.5px var(--color-background);
  background-color: #44be2e;
  flex-shrink: 0;
}
.Avatar.interactive {
  cursor: pointer;
}
.Avatar .poster {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
.Avatar.forum {
  --radius: var(--border-radius-forum-avatar);
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/TypingStatus.scss ***!
  \********************************************************************************************************************************************************************************************************/
@charset "UTF-8";
.typing-status {
  display: flex;
  align-items: baseline;
}
.typing-status .sender-name::after {
  content: " ";
  color: var(--color-text-secondary);
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/VerifiedIcon.scss ***!
  \********************************************************************************************************************************************************************************************************/
.VerifiedIcon {
  display: inline-block;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  --color-fill: var(--color-primary);
  --color-checkmark: #fff;
}
.VerifiedIcon.premium {
  --color-fill: #fe9024;
}
.VerifiedIcon path {
  fill: var(--color-fill);
}
.VerifiedIcon circle {
  fill: var(--color-checkmark);
}
/*!****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/FakeIcon.scss ***!
  \****************************************************************************************************************************************************************************************************/
.FakeIcon {
  border: 1px solid var(--color-error);
  border-radius: 0.375rem;
  color: var(--color-error);
  font-size: 0.625rem;
  padding: 0.125rem 0.25rem;
  line-height: initial;
  margin-inline: 0.25rem;
  font-weight: 500;
  text-transform: capitalize;
}
/*!****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/FullNameTitle.module.scss ***!
  \****************************************************************************************************************************************************************************************************************/
.FullNameTitle-module__root {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.FullNameTitle-module__root > h3 {
  margin-bottom: 0;
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/NothingFound.scss ***!
  \********************************************************************************************************************************************************************************************************/
.NothingFound {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.NothingFound.with-description {
  flex-direction: column;
}
.NothingFound .AnimatedSticker {
  margin: 0 auto;
}
.NothingFound p {
  color: var(--color-text-secondary);
}
.NothingFound .description {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  text-align: center;
  margin: 1rem 0 0;
  unicode-bidi: plaintext;
}
/*!***************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/SearchInput.scss ***!
  \***************************************************************************************************************************************************************************************************/
.SearchInput {
  position: relative;
  width: 100%;
  color: rgba(var(--color-text-secondary-rgb), 0.5);
  background-color: var(--color-chat-hover);
  box-shadow: 0 0 0 1px var(--color-chat-hover);
  border-radius: 1.125rem;
  transition: border-color 0.15s ease;
}
.SearchInput path {
  fill: rgba(var(--color-text-secondary-rgb), 0.5);
}
.SearchInput.with-picker-item {
  display: flex;
}
.SearchInput.with-picker-item .icon-search {
  display: none;
}
.SearchInput.with-picker-item input {
  padding-left: 0.5rem;
}
.SearchInput.with-picker-item[dir=rtl] input {
  padding-right: 0.5rem;
  padding-left: 0;
}
.SearchInput.is-hidding {
  width: 100px;
}
.SearchInput.has-focus {
  border-color: var(--color-primary);
  caret-color: var(--color-primary);
  background-color: var(--color-background);
}
.SearchInput.has-focus input + i {
  color: var(--color-primary);
}
.SearchInput input {
  height: 2.75rem;
  margin-bottom: 0;
  border: none !important;
  border-radius: 1.125rem;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: calc(0.4375rem - var(--border-width)) calc(2.625rem - var(--border-width)) calc(0.5rem - var(--border-width)) calc(3.3rem - var(--border-width));
}
.SearchInput input::placeholder {
  color: var(--color-placeholders);
}
.CountryCodeInput .SearchInput input {
  background-color: #fff !important;
  border-radius: 0;
}
.CountryCodeInput .SearchInput {
  box-shadow: none;
  border-bottom: 1px solid var(--color-borders);
  border-radius: 0;
}
@media (max-width: 600px) {
  .CountryCodeInput .SearchInput {
    display: none;
  }
}
.SearchInput .icon-container-left {
  position: absolute;
  top: 0.6rem;
  left: 1rem;
  font-size: 1.375rem;
  pointer-events: none;
}
.SearchInput .Loading {
  position: absolute;
  top: 0;
  right: 0;
  height: 2.5rem;
  width: 2.5rem;
}
.SearchInput .Loading .Spinner {
  --spinner-size: 1.5rem;
}
.SearchInput .Button {
  position: absolute;
  top: 0.125rem;
  right: 0.125rem;
  font-size: 1rem;
}
@media (max-width: 600px) {
  .SearchInput input {
    height: 2.5rem;
    border-radius: 1.25rem;
    padding-left: calc(2.625rem - var(--border-width));
  }
  .SearchInput i {
    top: 0.5rem;
  }
  .SearchInput i svg {
    width: 20px;
    height: 20px;
  }
}
.SearchInput[dir=rtl] input {
  direction: rtl;
}
.SearchInput[dir=rtl] > i {
  left: auto;
  right: 0.75rem;
}
.SearchInput[dir=rtl] .Loading {
  left: 0.5rem;
  right: auto;
}
.SearchInput[dir=rtl] .Button {
  left: 0.125rem;
  right: auto;
}
/*!************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/ChatOrUserPicker.scss ***!
  \************************************************************************************************************************************************************************************************************/
.ChatOrUserPicker {
  z-index: calc(var(--z-media-viewer) + 1);
}
.ChatOrUserPicker .modal-dialog {
  display: flex;
  flex-direction: column;
  height: 85%;
  max-height: 33.125rem;
  max-width: 26.5rem;
}
@media (max-width: 600px) {
  .ChatOrUserPicker .modal-dialog {
    height: 90%;
  }
}
.ChatOrUserPicker .modal-header {
  flex-wrap: wrap;
  padding: 0.5rem 0.5rem 1rem;
  gap: 0.25rem;
}
.ChatOrUserPicker .modal-header .Button [stroke] {
  stroke: var(--color-primary);
}
.ChatOrUserPicker .modal-header > .Button {
  position: static;
  margin: 0;
}
.ChatOrUserPicker .modal-header .input-group,
.ChatOrUserPicker .modal-header .input,
.ChatOrUserPicker .modal-header .SearchInput {
  margin: 0;
  flex: 1;
}
.ChatOrUserPicker .modal-header .form-control {
  border: none;
  box-shadow: none !important;
  background-color: var(--color-chat-hover);
  height: 2.125rem;
  padding: 0.5rem 0.5rem 0.5rem 2.375rem;
  line-height: 1.75rem;
  unicode-bidi: plaintext;
}
.ChatOrUserPicker .modal-header .MenuItem {
  padding: 0.25rem 1rem;
}
@media (min-width: 600px) {
  .ChatOrUserPicker .modal-header .Menu .bubble {
    min-width: auto;
  }
}
.ChatOrUserPicker .SearchInput .icon {
  width: 1.125rem;
  height: 1.125rem;
}
.ChatOrUserPicker .SearchInput .icon-container-left {
  top: 0.3125rem;
  left: 0.75rem;
}
.ChatOrUserPicker .modal-content {
  padding: 0 0 0.5rem !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ChatOrUserPicker .modal-content > .Transition {
  height: 100%;
  overflow: hidden;
}
.ChatOrUserPicker .modal-content .picker-list {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 0.5rem;
}
.ChatOrUserPicker .Checkbox {
  padding-left: 1.75rem;
  margin-bottom: 1.5rem;
}
.ChatOrUserPicker .Checkbox .Checkbox-main::before, .ChatOrUserPicker .Checkbox .Checkbox-main::after {
  width: 1.5rem;
  height: 1.5rem;
}
.ChatOrUserPicker .Checkbox.round .Checkbox-main::after {
  background-color: var(--color-success);
}
.ChatOrUserPicker .selected-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.ChatOrUserPicker .no-results {
  height: 100%;
  margin: 0;
  padding: 1rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
}
.ChatOrUserPicker .scroll-container {
  position: relative;
}
.ChatOrUserPicker .ListItem {
  position: absolute;
  width: 100%;
}
body.is-ios .ChatOrUserPicker .ListItem:not(:last-of-type)::after, body.is-android .ChatOrUserPicker .ListItem:not(:last-of-type)::after {
  right: -0.5rem;
}
@media (max-width: 600px) {
  .ChatOrUserPicker .ListItem.chat-item-clickable:not(.force-rounded-corners) {
    margin: 0;
  }
  .ChatOrUserPicker .ListItem.chat-item-clickable:not(.force-rounded-corners) .ListItem-button {
    border-radius: 0;
  }
}
.ChatOrUserPicker .topic-icon {
  --custom-emoji-size: 2.75rem;
  margin-inline-end: 0.25rem !important;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 2.75rem !important;
}
.ChatOrUserPicker .topic-icon-letter {
  font-size: 1.5rem;
}
.ChatOrUserPicker .topic-item .ListItem-button {
  display: flex;
  align-items: center;
  font-size: 1rem;
  line-height: 1.6875rem;
  font-weight: 500;
}
.ChatOrUserPicker .topic-item .fullName {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ChatOrUserPicker .topic-item .emoji-small {
  width: 1rem;
  height: 1rem;
}
/*!****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/EmojiButton.scss ***!
  \****************************************************************************************************************************************************************************************************************/
.EmojiButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0.3125rem;
  border-radius: var(--border-radius-messages-small);
  cursor: pointer;
  font-size: 1.75rem;
  line-height: 2.5rem;
  background-color: transparent;
  transition: background-color 0.15s ease;
}
@media (max-width: 600px) {
  .EmojiButton {
    margin: 0.25rem;
  }
}
.mac-os-fix .EmojiButton {
  line-height: inherit;
}
.EmojiButton.focus, .EmojiButton:hover {
  background-color: var(--color-background-selected);
}
.EmojiButton > img {
  width: 1.5rem;
  height: 1.5rem;
}
.EmojiButton > .custom-emoji {
  --custom-emoji-size: 2rem;
}
/*!****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/EmojiPicker.scss ***!
  \****************************************************************************************************************************************************************************************************************/
.EmojiPicker {
  --emoji-size: 2rem;
  height: 100%;
}
.EmojiPicker-main {
  height: calc(100% - 3rem);
  overflow-y: auto;
  padding: 0.4375rem;
}
@media (max-width: 600px) {
  .EmojiPicker-main {
    padding: 0.5rem 0.25rem;
  }
}
.EmojiPicker-header {
  height: 2.125rem;
  border-bottom: 1px solid var(--color-borders);
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 0 2px var(--color-default-shadow);
}
.EmojiPicker-header .Button.round i {
  font-size: 1.25rem;
}
.EmojiPicker-header .Button.translucent {
  color: var(--color-text-secondary);
}
.EmojiPicker-header .Button.translucent.activated {
  color: var(--color-primary);
}
@media (max-width: 600px) {
  .EmojiPicker-header {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scrollbar-color: rgba(0, 0, 0, 0);
  }
  .EmojiPicker-header::-webkit-scrollbar {
    height: 0;
  }
  .EmojiPicker-header::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0);
  }
  .EmojiPicker-header .symbol-set-button {
    display: inline-flex;
  }
  .EmojiPicker-header::after {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 1px;
    height: 1rem;
  }
}
/*!*********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/StickerButton.scss ***!
  \*********************************************************************************************************************************************************************************************************/
.StickerButton {
  --custom-emoji-size: 2.5rem;
  --premium-gradient: linear-gradient(88.39deg, #6C93FF -2.56%, #976FFF 51.27%, #DF69D1 107.39%);
  display: inline-block;
  width: 4rem;
  height: 4rem;
  margin: 0.5rem;
  border-radius: var(--border-radius-messages-small);
  background: transparent no-repeat center;
  background-size: contain;
  transition: background-color 0.15s ease, opacity 0.3s ease !important;
  position: relative;
}
.StickerButton.custom-emoji {
  width: var(--custom-emoji-size);
  height: var(--custom-emoji-size);
  margin: 0.3125rem;
}
.StickerButton.custom-emoji.status-default {
  font-size: 2rem;
  padding: 0.25rem;
  color: var(--color-text);
}
.StickerButton.set-expand {
  padding: 0;
  vertical-align: bottom;
}
.StickerButton .sticker-locked {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: white;
  background: var(--premium-gradient);
}
.StickerButton .sticker-premium {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: white;
  background: var(--premium-gradient);
  z-index: 1;
}
.StickerButton.interactive {
  cursor: pointer;
}
.StickerButton.interactive:hover {
  background-color: var(--color-interactive-element-hover);
}
.StickerButton.interactive:hover .sticker-remove-button {
  opacity: 1;
}
@media (max-width: 600px) {
  .StickerButton, .StickerButton.custom-emoji {
    margin: 0.25rem;
  }
}
.StickerButton.set-button {
  width: 2.75rem !important;
  height: 2.75rem;
  margin: 0 0.5rem;
}
.StickerButton.large {
  width: 10rem;
  height: 10rem;
  margin: 0;
}
.StickerButton .AnimatedSticker,
.StickerButton img,
.StickerButton video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.StickerButton img,
.StickerButton video {
  object-fit: contain;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
          user-select: none;
}
.StickerButton .sticker-remove-button {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0.125rem;
  opacity: 0;
}
.StickerButton .sticker-remove-button i {
  font-size: 1rem;
}

.sticker-context-menu {
  position: absolute;
  cursor: default;
  z-index: var(--z-header-menu);
}
.sticker-context-menu .bubble {
  width: auto !important;
}
/*!***************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/StickerSetCover.module.scss ***!
  \***************************************************************************************************************************************************************************************************************************/
.StickerSetCover-module__video {
  width: 100%;
}
/*!******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/StickerPicker.scss ***!
  \******************************************************************************************************************************************************************************************************************/
.StickerPicker {
  height: 100%;
}
.StickerPicker-main {
  position: relative;
  height: calc(100% - 3rem);
  overflow-y: auto;
  padding: 0.5rem 0.25rem;
}
.StickerPicker-header {
  height: 3rem;
  border-bottom: 1px solid var(--color-borders);
  padding: 0.125rem 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  box-shadow: 0 0 2px var(--color-default-shadow);
  scrollbar-width: none;
  scrollbar-color: rgba(0, 0, 0, 0);
}
.StickerPicker-header::-webkit-scrollbar {
  height: 0;
}
.StickerPicker-header::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0);
}
.StickerPicker-header::after {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 1px;
  height: 1rem;
}
.StickerPicker-header .sticker-set-button {
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
}
.StickerPicker-header .sticker-set-button.StickerButton {
  background-size: 2rem;
}
.StickerPicker-header .sticker-set-button.StickerButton video, .StickerPicker-header .sticker-set-button.StickerButton img, .StickerPicker-header .sticker-set-button.StickerButton .AnimatedSticker {
  top: 0.375rem;
  left: 0.375rem;
  width: 2rem;
  height: 2rem;
}
.StickerPicker-header .sticker-set-button .sticker-set-cover {
  width: 2rem;
  height: 2rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.StickerPicker-header .sticker-set-button .sticker-set-cover video, .StickerPicker-header .sticker-set-button .sticker-set-cover img, .StickerPicker-header .sticker-set-button .sticker-set-cover .AnimatedSticker {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.StickerPicker-header .sticker-set-button.activated {
  background-color: var(--color-background-selected);
}
.StickerPicker-header .shared-canvas-container {
  display: inline-block;
}
.StickerPicker-header .shared-canvas {
  max-width: 1280px;
  z-index: 1;
}
.StickerPicker .symbol-set-container {
  width: 100%;
  line-height: 0;
}
.StickerPicker .sticker-set-button {
  width: 2.75rem !important;
  height: 2.75rem;
  margin: 0 0.25rem;
  border-radius: var(--border-radius-messages-small);
}
.StickerPicker .picker-disabled {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.CustomEmojiPicker {
  --emoji-size: 2.5rem;
}
/*!*******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/PremiumIcon.scss ***!
  \*******************************************************************************************************************************************************************************************************/
.PremiumIcon {
  flex-shrink: 0;
  display: flex;
  width: 1rem;
  height: 1rem;
  --color-fill: var(--color-primary);
}
.PremiumIcon.big {
  width: 1.5rem;
  height: 1.5rem;
}
.PremiumIcon > svg {
  width: 100%;
  height: 100%;
}
.PremiumIcon.clickable {
  cursor: pointer;
  pointer-events: auto;
}
/*!*****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/GifButton.scss ***!
  \*****************************************************************************************************************************************************************************************************/
.GifButton {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6.25rem;
  background-color: transparent;
  position: relative;
}
.GifButton:hover .gif-unsave-button {
  opacity: 0.8;
}
.GifButton:last-child {
  margin-bottom: 1rem;
}
.GifButton.vertical {
  grid-column-end: span 1;
}
.GifButton.horizontal {
  grid-column-end: span 2;
}
.GifButton.interactive {
  cursor: pointer;
}
.GifButton .thumbnail {
  width: 100%;
  height: 100%;
  background: transparent no-repeat center;
  background-size: cover !important;
}
.GifButton .preview, .GifButton video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
          user-select: none;
}
.GifButton .Spinner {
  position: absolute;
  pointer-events: none;
}
.GifButton .gif-unsave-button {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 1rem;
  height: 1rem;
  padding: 0.125rem;
  border-radius: 0.25rem;
  transition: 0.15s opacity ease-in-out;
  opacity: 0;
  z-index: 1;
}
.GifButton .gif-unsave-button-icon {
  font-size: 0.75rem;
}
.GifButton .gif-context-menu {
  position: absolute;
}
.GifButton .gif-context-menu .bubble {
  width: auto;
}
/*!**************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/GifPicker.scss ***!
  \**************************************************************************************************************************************************************************************************************/
.GifPicker {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 6.25rem;
  grid-gap: 0.25rem;
  grid-auto-flow: dense;
  height: 100%;
  overflow-y: auto;
  padding: 0.25rem;
}
@supports (overflow: overlay) {
  .GifPicker {
    overflow-y: overlay;
  }
}
.GifPicker .Loading, .GifPicker .picker-disabled {
  grid-column: 1/-1;
  height: var(--menu-height);
}
/*!***************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/SymbolMenu.scss ***!
  \***************************************************************************************************************************************************************************************************************/
.SymbolMenu.attachment-modal-symbol-menu {
  position: absolute;
  z-index: 10000;
}
@media (max-height: 800px) {
  .SymbolMenu:not(.mobile-menu) {
    --symbol-menu-height: 40vh;
  }
}
.SymbolMenu.mobile-menu {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-background);
  z-index: var(--z-symbol-menu-mobile);
  transition: transform var(--layer-transition);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  transform: translate3d(0, calc(var(--symbol-menu-height) + var(--symbol-menu-footer-height) + env(safe-area-inset-bottom)), 0);
}
.SymbolMenu.mobile-menu.open:not(.in-attachment-modal) {
  transform: translate3d(0, 0, 0);
}
body.is-media-viewer-open .SymbolMenu.mobile-menu.open:not(.in-attachment-modal) {
  transform: translate3d(0, calc(var(--symbol-menu-height) + var(--symbol-menu-footer-height)), 0);
}
.SymbolMenu.mobile-menu.open.in-attachment-modal {
  z-index: calc(var(--z-modal) + 1);
  transform: translate3d(0, calc(var(--symbol-menu-height) + var(--symbol-menu-footer-height)), 0);
}
@supports not (padding-right: env(safe-area-inset-right)) {
  .SymbolMenu.mobile-menu {
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    transform: translate3d(0, calc(var(--symbol-menu-height) + var(--symbol-menu-footer-height)), 0);
  }
}
body.animation-level-0 .SymbolMenu.mobile-menu {
  transition: none;
}
.SymbolMenu.mobile-menu.left-column-open {
  transform: translate3d(100vw, 0, 0) !important;
}
.SymbolMenu-main {
  height: var(--symbol-menu-height);
  max-height: calc(100vh - var(--symbol-menu-footer-height) - env(safe-area-inset-bottom));
}
@supports not (max-height: calc(100vh - var(--symbol-menu-footer-height) - env(safe-area-inset-bottom))) {
  .SymbolMenu-main {
    max-height: calc(100vh - var(--symbol-menu-footer-height));
  }
}
.SymbolMenu-footer {
  border-top: 1px solid var(--color-borders);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 2px var(--color-default-shadow);
  position: relative;
}
.SymbolMenu-footer .Button {
  flex-shrink: 0;
  width: 2.125rem !important;
  height: 2.125rem;
  margin: 0 0.05rem;
  padding: 0;
}
.SymbolMenu-footer .Button.round i {
  font-size: 1.0625rem;
}
.SymbolMenu-footer .Button.round.activated i {
  font-size: 1.25rem;
}
.SymbolMenu-footer .Button.translucent:not(.activated) {
  color: var(--color-text-secondary);
}
.SymbolMenu-footer .Button.activated {
  pointer-events: none;
}
.SymbolMenu-footer .Button.symbol-tab-button {
  margin: 0 0.05rem;
}
.SymbolMenu-footer .Button.symbol-search-button {
  position: absolute;
  left: 0.25rem;
}
.SymbolMenu-footer .Button.symbol-delete-button {
  position: absolute;
  right: 0.25rem;
}
.SymbolMenu .Transition.slide {
  height: 100%;
}
.SymbolMenu .Transition.slide .Loading {
  height: var(--symbol-menu-height);
}
.is-pointer-env .SymbolMenu > .backdrop {
  position: absolute;
  top: -1rem;
  left: 0;
  right: auto;
  width: 3.5rem;
  height: 4.5rem;
}
.is-pointer-env .SymbolMenu.attachment-modal-symbol-menu > .backdrop {
  bottom: 0;
  top: auto;
}
.is-pointer-env .Button.bot-menu:not(.open) ~ .SymbolMenu > .backdrop, .is-pointer-env .Button.bot-commands ~ .SymbolMenu > .backdrop, .is-pointer-env .Button.send-as-button ~ .SymbolMenu > .backdrop {
  left: 3rem;
  width: 3.25rem;
}
.is-pointer-env .Button.bot-menu.open ~ .SymbolMenu > .backdrop {
  left: calc(var(--bot-menu-text-width, 0) + 3rem);
}
.SymbolMenu .bubble {
  --offset-y: 4rem;
  border-radius: var(--border-radius-default);
  box-shadow: none;
  filter: drop-shadow(0px 1.58333px 3.16667px rgba(0, 0, 0, 0.14)) drop-shadow(0px 0.316667px 5.7px rgba(0, 0, 0, 0.12)) drop-shadow(0px 0.95px 1.58333px rgba(0, 0, 0, 0.2));
  width: calc(var(--symbol-menu-width) + 0.25rem);
  padding: 0;
  overflow: hidden;
}
@supports (overflow: overlay) {
  .SymbolMenu .bubble {
    width: var(--symbol-menu-width);
  }
}
.SymbolMenu .picker-disabled {
  height: var(--symbol-menu-height);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
}
.SymbolMenu .symbol-close-button {
  display: none;
  position: absolute;
  right: max(0.25rem, env(safe-area-inset-right));
  top: max(0.25rem, env(safe-area-inset-top));
}
@supports not (right: max(0.25rem, env(safe-area-inset-right))) {
  .SymbolMenu .symbol-close-button {
    right: 0.25rem;
    top: 0.25rem;
  }
}
@media (orientation: landscape) {
  .SymbolMenu .symbol-close-button {
    display: block;
  }
}

.symbol-set {
  margin-bottom: 0.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
}
.symbol-set.symbol-set-locked::before {
  content: "";
  display: block;
  position: absolute;
  inset: -0.25rem;
  top: 0.75rem;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><rect width='100%' height='100%' style='stroke: rgba(112, 117, 121, 0.7); width: calc(100% - 4px); height: calc(100% - 4px);' fill='none' stroke-dashoffset='5' stroke-width='2' stroke-dasharray='8' stroke-linecap='round' rx='8' ry='8' x='2' y='2' /></svg>");
}
.symbol-set-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(var(--color-text-secondary-rgb), 0.75);
}
.symbol-set-name {
  font-size: 0.75rem;
  line-height: 1.6875rem;
  font-weight: 500;
  margin: 0;
  padding: 0 0.5rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  unicode-bidi: plaintext;
  z-index: 1;
  background-color: var(--color-background);
}
.symbol-set-locked-icon {
  margin-right: 0.25rem;
}
.symbol-set-remove {
  right: 0;
  position: absolute;
  font-size: 1rem;
  cursor: pointer;
}
.symbol-set-container {
  text-align: initial;
}
.symbol-set-button {
  flex-shrink: 0;
  width: 2.125rem !important;
  height: 2.125rem;
  margin: 0 0.25rem;
  padding: 0;
}
.Transition_slide:not(.Transition_slide-active) .symbol-set {
  overflow: hidden;
}
.symbol-set .symbol-set-container {
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, var(--emoji-size, 4rem));
  grid-gap: 0.5rem;
  padding: 0.3125rem;
}
@media (max-width: 600px) {
  .symbol-set .symbol-set-container {
    grid-gap: 0.5rem;
  }
}
.symbol-set .symbol-set-container:not(.shown) {
  display: block;
}
.symbol-set .symbol-set-container.closing {
  transition: none;
}
.symbol-set .symbol-set-container > .EmojiButton,
.symbol-set .symbol-set-container > .StickerButton {
  margin: 0;
}
/*!******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/TextFormatter.scss ***!
  \******************************************************************************************************************************************************************************************************************/
.TextFormatter {
  transform: translate(-50%, -3.25rem);
  z-index: 1;
}
.TextFormatter, .TextFormatter-link-control {
  position: absolute;
  background: var(--color-background);
  border-radius: var(--border-radius-messages);
  padding: 0.5rem 0.375rem;
  box-shadow: 0 1px 2px var(--color-default-shadow);
}
.TextFormatter-link-control {
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.Modal .TextFormatter-link-control {
  max-width: 100%;
}
@media (max-width: 600px) {
  .TextFormatter-link-control {
    max-width: calc(100vw - var(--text-formatter-left) + 3rem);
  }
}
.TextFormatter-link-control input {
  border: none !important;
  outline: none !important;
  width: 100%;
  color: var(--color-text);
  background-color: var(--color-background);
}
.TextFormatter-buttons, .TextFormatter-link-url-confirm {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.TextFormatter-divider {
  width: 1px;
  height: 1.75rem;
  margin: 0 0.25rem;
  background-color: var(--color-borders);
}
.TextFormatter-link-url-input-wrapper {
  width: 20rem;
  position: relative;
  max-width: 100%;
}
@media (max-width: 600px) {
  .TextFormatter-link-url-input-wrapper {
    max-width: 90vw;
  }
}
.TextFormatter-link-url-input-wrapper::before, .TextFormatter-link-url-input-wrapper::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1rem;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.TextFormatter-link-url-input-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--color-background) 0.25rem, transparent 1rem);
}
.TextFormatter-link-url-input-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--color-background) 0.25rem, transparent 1rem);
}
.TextFormatter-link-url-input-wrapper.mask-left::before {
  opacity: 1;
}
.TextFormatter-link-url-input-wrapper.mask-right::after {
  opacity: 1;
}
.TextFormatter-link-url-confirm {
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.TextFormatter-link-url-confirm.shown {
  opacity: 1;
}
.TextFormatter.link-control-shown .TextFormatter-link-control {
  opacity: 1;
  pointer-events: auto;
}
.TextFormatter .Button {
  width: 2rem;
  height: 2rem;
  padding: 0.25rem;
  font-size: 1.5rem;
  margin: 0 0.125rem;
  border-radius: var(--border-radius-messages-small);
  flex-shrink: 0;
  cursor: pointer;
}
.TextFormatter .Button.active {
  background-color: var(--color-primary) !important;
  color: white;
}
.TextFormatter .Button.disabled {
  opacity: 0.5;
  pointer-events: none;
}
/*!************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/Checkbox.scss ***!
  \************************************************************************************************************************************************************************************************/
.Checkbox {
  display: block;
  position: relative;
  padding-left: 2rem;
  text-align: left;
  margin-bottom: 1rem;
  line-height: 1.3rem;
  cursor: pointer;
}
.Checkbox.disabled {
  pointer-events: none;
  opacity: 0.5;
}
.Checkbox.round .Checkbox-main::before {
  border-radius: 50%;
}
.Checkbox.round .Checkbox-main::after {
  background: var(--color-primary) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEzLjkuOEw1LjggOC45IDIuMSA1LjJjLS40LS40LTEuMS0uNC0xLjYgMC0uNC40LS40IDEuMSAwIDEuNkw1IDExLjJjLjQuNCAxLjEuNCAxLjYgMGw4LjktOC45Yy40LS40LjQtMS4xIDAtMS42LS41LS40LTEuMi0uNC0xLjYuMXoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=) no-repeat 50% 50%;
  background-size: 12px;
  border-radius: 50%;
}
.Checkbox.round input:checked ~ .Checkbox-main::before {
  opacity: 0;
}
.Checkbox.loading .Checkbox-main::before,
.Checkbox.loading .Checkbox-main::after {
  opacity: 0 !important;
}
.Checkbox.loading .Spinner {
  position: absolute;
  left: 0.375rem;
  top: 0.125rem;
  opacity: 0;
  animation: fade-in 0.2s ease forwards;
  --spinner-size: 1.25rem;
}
.Checkbox.blocking input:not(:checked) ~ .Checkbox-main::before {
  border-color: var(--color-error);
}
.Checkbox.blocking input:not(:checked) ~ .Checkbox-main::after {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHBvbHlnb24gcG9pbnRzPSIwIDAgMjQgMCAyNCAyNCAwIDI0Ii8+CiAgICA8cGF0aCBmaWxsPSIjZTUzOTM1IiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xOCwzIEMxOS42NTY4NTQyLDMgMjEsNC4zNDMxNDU3NSAyMSw2IEwyMSwxOCBDMjEsMTkuNjU2ODU0MiAxOS42NTY4NTQyLDIxIDE4LDIxIEw2LDIxIEM0LjM0MzE0NTc1LDIxIDMsMTkuNjU2ODU0MiAzLDE4IEwzLDYgQzMsNC4zNDMxNDU3NSA0LjM0MzE0NTc1LDMgNiwzIEwxOCwzIFogTTE2LDExIEw4LDExIEM3LjQ0NzcxNTI1LDExIDcsMTEuNDQ3NzE1MyA3LDEyIEM3LDEyLjU1MjI4NDcgNy40NDc3MTUyNSwxMyA4LDEzIEwxNiwxMyBDMTYuNTUyMjg0NywxMyAxNywxMi41NTIyODQ3IDE3LDEyIEMxNywxMS40NDc3MTUzIDE2LjU1MjI4NDcsMTEgMTYsMTEgWiIvPgogIDwvZz4KPC9zdmc+Cg==);
  opacity: 1;
  background-size: 1.375rem;
  background-position: -0.125rem -0.125rem;
}
.Checkbox input {
  position: absolute;
  z-index: var(--z-below);
  opacity: 0;
}
.Checkbox .Checkbox-main::before, .Checkbox .Checkbox-main::after {
  pointer-events: none;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 1.1875rem;
  height: 1.1875rem;
}
.Checkbox .Checkbox-main::before {
  border: 2px solid var(--color-borders-checkbox);
  border-radius: 42%;
  background-color: var(--color-background);
  transition: border-color 0.1s ease, background-color 0.1s ease;
}
.Checkbox .Checkbox-main::after {
  /* stylelint-disable-next-line scss/operator-no-unspaced */
  background: center no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEzLjkuOEw1LjggOC45IDIuMSA1LjJjLS40LS40LTEuMS0uNC0xLjYgMC0uNC40LS40IDEuMSAwIDEuNkw1IDExLjJjLjQuNCAxLjEuNCAxLjYgMGw4LjktOC45Yy40LS40LjQtMS4xIDAtMS42LS41LS40LTEuMi0uNC0xLjYuMXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPg==);
  background-size: 0.75rem;
  opacity: 0;
  transition: opacity 0.1s ease;
}
.Checkbox .Checkbox-main .label {
  display: flex;
  align-items: center;
  text-align: initial;
  flex-wrap: wrap;
  column-gap: 0.25rem;
  font-size: 0.9375rem;
}
.Checkbox .Checkbox-main .label .link {
  font-weight: 500;
  text-decoration: underline;
  color: inherit;
}
.Checkbox .Checkbox-main .right-icon {
  margin-left: auto;
  color: var(--color-text-secondary);
  font-size: 1.25rem;
}
.Checkbox .Checkbox-main .subLabel {
  display: block;
  font-size: 0.875rem;
  line-height: 1rem;
  color: var(--color-text-secondary);
}
.Checkbox.square .Checkbox-main::before, .Checkbox.square .Checkbox-main::after {
  width: 1.5rem;
  height: 1.5rem;
}
.Checkbox.square .Checkbox-main::before {
  border-radius: 0.5rem;
}
.Checkbox input:checked ~ .Checkbox-main::before {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}
.Checkbox input:checked ~ .Checkbox-main::after {
  opacity: 1;
}
.Checkbox[dir=rtl] {
  padding-left: 0;
  padding-right: 4.5rem;
}
.Checkbox[dir=rtl].loading .Spinner {
  left: auto;
  right: 0.375rem;
}
.Checkbox[dir=rtl] .label,
.Checkbox[dir=rtl] .subLabel {
  text-align: right;
}
.Checkbox[dir=rtl] .Checkbox-main::before, .Checkbox[dir=rtl] .Checkbox-main::after {
  left: auto;
  right: 1.1875rem;
}
/*!**************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/PickerSelectedItem.scss ***!
  \**************************************************************************************************************************************************************************************************************/
.PickerSelectedItem {
  display: flex;
  align-items: center;
  background: var(--color-chat-hover);
  height: 1.875rem;
  min-width: 2rem;
  font-size: 0.8125rem;
  margin-left: 0.5rem;
  margin-bottom: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 1rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex-shrink: 1;
  transition: background-color 0.15s ease;
  max-width: calc(50% - 0.5rem);
}
.PickerSelectedItem.minimized {
  padding-right: 0;
}
.PickerSelectedItem:hover {
  background-color: var(--color-item-active);
}
.PickerSelectedItem.closeable:hover {
  background-color: rgba(var(--color-error-rgb), 0.16);
}
.PickerSelectedItem.closeable:hover .item-remove {
  opacity: 1;
}
.PickerSelectedItem.closeable:hover .Avatar,
.PickerSelectedItem.closeable:hover .item-icon {
  opacity: 0;
}
.PickerSelectedItem.search-date .item-remove {
  background: var(--color-primary);
}
.PickerSelectedItem.search-date:hover {
  background: var(--color-chat-hover);
}
.PickerSelectedItem.search-date .item-name {
  font-size: 0.875rem;
}
.SearchInput .PickerSelectedItem {
  flex: 1 0 auto;
  position: relative;
  top: 0.25rem;
  left: -0.125rem;
  color: var(--color-text-secondary);
}
.PickerSelectedItem .Avatar,
.PickerSelectedItem .item-icon {
  width: 1.875rem;
  height: 1.875rem;
  opacity: 1;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}
.PickerSelectedItem .Avatar .Avatar__icon,
.PickerSelectedItem .Avatar i,
.PickerSelectedItem .item-icon .Avatar__icon,
.PickerSelectedItem .item-icon i {
  font-size: 1rem;
}
.PickerSelectedItem .Avatar svg,
.PickerSelectedItem .item-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.PickerSelectedItem .item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: white;
}
.PickerSelectedItem .item-icon i {
  font-size: 1.25rem;
  position: relative;
  top: -1px;
}
.PickerSelectedItem .item-name {
  margin-left: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.PickerSelectedItem .item-name .emoji.emoji-small {
  width: 1.125rem;
  height: 1.125rem;
  background-size: 1.125rem;
  vertical-align: -2px;
}
.PickerSelectedItem .item-remove {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 0.8125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-error);
  font-size: 1.5rem;
  color: white;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.PickerSelectedItem.forum-avatar {
  border-start-start-radius: 0.625rem;
  border-end-start-radius: 0.625rem;
}
.PickerSelectedItem.forum-avatar .item-remove {
  border-radius: 0.625rem;
}
.PickerSelectedItem[dir=rtl] {
  padding-left: 1rem;
  padding-right: 0;
}
.PickerSelectedItem[dir=rtl].minimized {
  padding-right: 0;
  padding-left: 0;
}
.SearchInput .PickerSelectedItem[dir=rtl] {
  left: auto;
  right: -0.125rem;
}
.PickerSelectedItem[dir=rtl] .item-name {
  margin-left: 0;
  margin-right: 0.5rem;
}
.PickerSelectedItem[dir=rtl] .item-remove {
  left: auto;
  right: 0;
}
/*!*************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/main/Dialogs.scss ***!
  \*************************************************************************************************************************************************************************************************/
#Dialogs {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: var(--z-modal);
}
/*!****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/Notification.scss ***!
  \****************************************************************************************************************************************************************************************************/
.Notification-container {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: var(--z-notification);
}
@media (min-width: 1276px) {
  .Notification-container {
    transition: transform var(--layer-transition);
  }
}
@media (max-width: 600px) {
  .Notification-container {
    top: 0.5rem;
    right: 0.5rem;
  }
}
.Notification-container ~ .Notification-container {
  margin-top: 0.25rem;
}
.has-header-tools .Notification-container ~ .Notification-container {
  margin-top: 0.25rem;
}

.Notification-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.Notification {
  max-width: 20.5rem;
  background: #d4efdf;
  border-radius: var(--border-radius-messages);
  padding: 0.75rem 1rem;
  gap: 1rem;
  display: flex;
  align-items: center;
}
.Notification svg {
  flex-shrink: 0;
}
.Notification.error {
  background: #fde7eb;
}
.Notification.error path {
  stroke: var(--color-error);
}
.Notification .content {
  word-break: break-word;
  flex-grow: 1;
  line-height: 1.3;
}
.Notification.bold-link b {
  color: var(--color-primary);
  cursor: pointer;
}
.Notification .notification-title {
  font-weight: 500;
}
.Notification .Notification-button {
  color: var(--color-primary);
  font-weight: 500;
  text-transform: none;
  margin: 0 0.5rem;
  height: 2rem;
  width: auto;
}
/*!*************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/main/UrlAuthModal.module.scss ***!
  \*************************************************************************************************************************************************************************************************************/
.UrlAuthModal-module__checkbox {
  margin: 1rem 0;
}
/*!*********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/CalendarModal.scss ***!
  \*********************************************************************************************************************************************************************************************************/
.CalendarModal .modal-dialog {
  max-width: 20.5rem;
  overflow-y: auto;
}
.CalendarModal .modal-dialog .modal-content {
  padding: 1.25rem;
  overflow-y: auto;
}
@media (max-width: 600px) {
  .CalendarModal .modal-dialog .modal-content {
    padding: 1rem;
  }
}
@media (max-height: 500px) {
  .CalendarModal .modal-dialog .modal-content {
    padding-bottom: 2.5rem;
  }
}
.CalendarModal .timepicker {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.CalendarModal .timepicker .form-control {
  max-width: 5rem;
  text-align: center;
}
.CalendarModal .timepicker .form-control:first-child {
  margin-right: 1rem;
}
.CalendarModal .timepicker .form-control:last-child {
  margin-left: 1rem;
}
.CalendarModal .footer {
  display: flex;
  justify-content: flex-end;
}
.CalendarModal .footer .Button {
  text-transform: none;
}
.CalendarModal h3 {
  font-size: 2.125rem;
  color: var(--color-primary);
  font-weight: normal;
}
@media (max-width: 600px) {
  .CalendarModal h3 {
    font-size: 1.5rem;
  }
}
.CalendarModal .month-selector {
  display: flex;
  align-items: center;
}
.CalendarModal .month-selector Button.round i {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-text);
}
.CalendarModal .month-selector h4 {
  text-transform: capitalize;
  flex: 1;
  margin: 0;
  font-size: 0.875rem;
  text-align: center;
}
@media (max-width: 600px) {
  .CalendarModal .month-selector h4 {
    margin-left: 0.75rem;
  }
}
.CalendarModal .month-selector .Button.hidden {
  opacity: 0.5;
  pointer-events: none;
}
.CalendarModal .day-button {
  position: relative;
  border-radius: 4rem;
  outline: none !important;
  font-weight: 500;
}
@media (max-width: 600px) {
  .CalendarModal .day-button {
    margin: 0.25rem 0.375rem;
  }
}
.CalendarModal .day-button.weekday {
  margin-bottom: 0;
  color: #74747b;
}
.CalendarModal .day-button.weekday span {
  font-size: 0.8125rem;
  font-weight: 300;
}
.CalendarModal .day-button.clickable {
  cursor: pointer;
}
.CalendarModal .day-button.clickable:hover {
  background-color: var(--color-interactive-element-hover);
}
.CalendarModal .day-button.clickable.selected, .CalendarModal .day-button.clickable.range {
  background-color: var(--color-primary);
  color: white;
}
.CalendarModal .day-button.disabled {
  opacity: 0.25;
  pointer-events: none;
}
.CalendarModal .day-button::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.CalendarModal .day-button span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}
.CalendarModal .calendar-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 17rem;
  padding: 0.7rem;
}
@media (max-width: 600px) {
  .CalendarModal .calendar-wrapper {
    padding: 0;
  }
}
.CalendarModal .year-selection .Menu .bubble {
  min-width: auto;
  max-height: 14rem;
}
.CalendarModal .year-selection .MenuItem.compact {
  padding: 0 0.25rem;
}
.CalendarModal .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 100%;
}
.CalendarModal .Button.text {
  padding: 0.25rem 1rem 0.25rem 0;
}
/*!*********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/main/NewContactModal.scss ***!
  \*********************************************************************************************************************************************************************************************************/
.NewContactModal .modal-dialog {
  max-width: 28rem;
}
.NewContactModal__new-contact {
  display: flex;
}
@media (max-width: 500px) {
  .NewContactModal__new-contact {
    flex-direction: column;
  }
}
.NewContactModal__new-contact-fieldset {
  flex: 1;
  margin-inline-start: 1rem;
}
@media (max-width: 500px) {
  .NewContactModal__new-contact-fieldset {
    margin-inline-start: 0;
    margin-top: 1rem;
  }
}
.NewContactModal__profile {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
}
.NewContactModal__profile-info {
  margin-inline-start: 1rem;
}
.NewContactModal__user-status {
  color: var(--color-text-secondary);
}
.NewContactModal__phone-number {
  font-size: 1.5rem;
  margin-bottom: 0;
}
.NewContactModal__help-text {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}
/*!************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/main/WebAppModal.module.scss ***!
  \************************************************************************************************************************************************************************************************************/
.WebAppModal-module__root .modal-header {
  border-bottom: 1px solid var(--color-dividers);
  padding: 0.5rem;
  transition: 0.25s ease-in-out background-color;
}
.WebAppModal-module__root .modal-dialog {
  height: 75%;
  justify-content: center;
  border: none;
  box-shadow: none;
  margin: 0;
  overflow: hidden;
}
.WebAppModal-module__root .modal-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border-bottom-right-radius: var(--border-radius-default);
  border-bottom-left-radius: var(--border-radius-default);
  transition: 0.25s ease-in-out background-color;
}
@media (max-width: 600px) {
  .WebAppModal-module__root .modal-dialog {
    background-color: var(--color-background);
    border-radius: 0;
    height: 100%;
    max-width: 100% !important;
  }
  .WebAppModal-module__root .modal-content {
    max-height: none;
    border-radius: 0;
  }
}

.WebAppModal-module__close-icon {
  position: absolute;
  transform: rotate(-45deg);
}
.WebAppModal-module__close-icon, .WebAppModal-module__close-icon::before, .WebAppModal-module__close-icon::after {
  width: 1.125rem;
  height: 0.125rem;
  border-radius: 0.125rem;
  background-color: var(--color-text-secondary);
  transition: transform var(--slide-transition);
}
.WebAppModal-module__close-icon::before, .WebAppModal-module__close-icon::after {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
}
.WebAppModal-module__close-icon::before {
  transform: rotate(90deg);
}
.WebAppModal-module__close-icon.WebAppModal-module__state-back {
  transform: rotate(180deg);
}
.WebAppModal-module__close-icon.WebAppModal-module__state-back::before {
  transform: rotate(45deg) scaleX(0.75) translate(0, -0.375rem);
}
.WebAppModal-module__close-icon.WebAppModal-module__state-back::after {
  transform: rotate(-45deg) scaleX(0.75) translate(0, 0.375rem);
}

.WebAppModal-module__loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.25s ease-in-out;
}

.WebAppModal-module__hide {
  opacity: 0;
}

.WebAppModal-module__frame {
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 1;
}
.WebAppModal-module__frame.WebAppModal-module__with-button {
  height: calc(100% - 3.5rem);
}

.WebAppModal-module__main-button {
  position: absolute;
  bottom: 0;
  border-radius: 0;
  z-index: 1;
  transform: translateY(100%);
  transition-property: background-color, color, transform;
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out;
}
.WebAppModal-module__main-button.WebAppModal-module__visible {
  transform: translateY(0);
}
.WebAppModal-module__main-button.WebAppModal-module__hidden {
  visibility: hidden;
}

.WebAppModal-module__main-button-spinner {
  position: absolute;
  right: 1rem;
}

.WebAppModal-module__web-app-popup .modal-dialog {
  max-width: min(30rem, 100%);
}
.WebAppModal-module__web-app-popup.WebAppModal-module__without-title .modal-content {
  padding-top: 0;
}
.WebAppModal-module__web-app-popup .modal-content {
  padding-left: 2rem;
}
/*!************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/main/premium/common/PremiumLimitsCompare.module.scss ***!
  \************************************************************************************************************************************************************************************************************************************/
.PremiumLimitsCompare-module__root {
  display: flex;
  position: relative;
}

.PremiumLimitsCompare-module__floating-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  background: #7E85FF;
  position: absolute;
  top: -1.5rem;
  left: 50%;
  transform: translate(-50%, -20px);
}

.PremiumLimitsCompare-module__floating-badge-triangle {
  position: absolute;
  bottom: -15px;
}

.PremiumLimitsCompare-module__floating-badge-icon {
  margin-right: 0.25rem;
}

.PremiumLimitsCompare-module__text, .PremiumLimitsCompare-module__floating-badge-value {
  font-size: 16px;
  font-weight: 500;
}

.PremiumLimitsCompare-module__left-text {
}

.PremiumLimitsCompare-module__right-text, .PremiumLimitsCompare-module__left-text {
  margin-inline-end: auto;
}

.PremiumLimitsCompare-module__right-value, .PremiumLimitsCompare-module__left-value {
  margin-inline-start: 1rem;
}

.PremiumLimitsCompare-module__right-text, .PremiumLimitsCompare-module__right-value {
  color: #ffffff;
}

.PremiumLimitsCompare-module__left-text, .PremiumLimitsCompare-module__left-value {
  color: #000000;
}

.PremiumLimitsCompare-module__line {
  padding: 0.375rem 0.75rem;
  flex-basis: 50%;
  display: flex;
}

.PremiumLimitsCompare-module__left {
  background: #F1F3F5;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.PremiumLimitsCompare-module__right {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background: linear-gradient(84.4deg, #6C93FF -4.85%, #976FFF 51.72%, #DF69D1 110.7%), #F1F3F5;
}
/*!***********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/main/premium/common/PremiumLimitPreview.module.scss ***!
  \***********************************************************************************************************************************************************************************************************************************/
.PremiumLimitPreview-module__root {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
}

.PremiumLimitPreview-module__title {
  font-weight: 500;
  color: var(--color-text);
  margin-left: 0.75rem;
  unicode-bidi: plaintext;
}

.PremiumLimitPreview-module__description {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
  margin-left: 0.75rem;
  unicode-bidi: plaintext;
}
/*!********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/main/premium/previews/PremiumFeaturePreviewVideo.module.scss ***!
  \********************************************************************************************************************************************************************************************************************************************/
.PremiumFeaturePreviewVideo-module__root {
  display: flex;
  justify-content: center;
  aspect-ratio: 1;
  overflow: hidden;
  position: relative;
}
@supports not (aspect-ratio: 1) {
  .PremiumFeaturePreviewVideo-module__root {
    height: 0;
    padding-bottom: 100%;
  }
}

.PremiumFeaturePreviewVideo-module__wrapper {
  width: 70%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  --y-static: -40%;
  --y-dynamic: -10%;
  --scroll-progress-converted: var(--scroll-progress, 0);
  --abs-scroll-progress-converted: var(--abs-scroll-progress, 0);
  transform: perspective(200px) translate3d(calc(var(--scroll-progress-converted) * -30%), calc(var(--y-static) + var(--abs-scroll-progress-converted) * var(--y-dynamic)), 0) rotateY(calc(var(--scroll-progress-converted) * 40deg));
  opacity: calc(1 - var(--abs-scroll-progress-converted) * 0.4);
}
@supports not (aspect-ratio: 1) {
  .PremiumFeaturePreviewVideo-module__wrapper {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.005, 0, -342.2, 0, 1);
  }
}

.PremiumFeaturePreviewVideo-module__down {
  --y-static: 3%;
  --y-dynamic: 10%;
}

.PremiumFeaturePreviewVideo-module__root .reverse {
  --scroll-progress-converted: calc((1 - var(--scroll-progress, 0)) * -1);
  --abs-scroll-progress-converted: calc(1 - var(--abs-scroll-progress, 0));
}

.PremiumFeaturePreviewVideo-module__frame {
  position: relative;
  z-index: 1;
  width: 100%;
  -webkit-user-drag: none;
}

.PremiumFeaturePreviewVideo-module__video {
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 0;
  padding: 4%;
  border-radius: 0 0 10% 10%;
}

@supports (aspect-ratio: 1) {
  .PremiumFeaturePreviewVideo-module__down .PremiumFeaturePreviewVideo-module__video {
    top: 0;
    bottom: initial;
    border-radius: 10% 10% 0 0;
  }
}
/*!*************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/SliderDots.module.scss ***!
  \*************************************************************************************************************************************************************************************************************/
.SliderDots-module__root {
  display: flex;
  justify-content: center;
  margin: 2rem;
  align-items: center;
  --fake-translate: calc(8px);
  --dot-width: calc(10px + 8px);
  --start-from: 0;
  --length: 50;
  --count: 8;
  --center: calc((var(--length) * var(--dot-width)) / 2);
  transform: translateX(calc(var(--center) - var(--dot-width) * var(--count) / 2 - var(--dot-width) * var(--start-from)));
  transition: 0.25s ease-out transform;
}

.SliderDots-module__arrow {
  z-index: 2;
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  transition: 0.25s ease-in-out opacity;
}

.SliderDots-module__right {
  left: initial;
  right: 0.5rem;
}

.SliderDots-module__arrow.SliderDots-module__arrow-hidden {
  opacity: 0 !important;
}

.SliderDots-module__dot {
  flex: none;
  cursor: pointer;
  width: 8px;
  height: 8px;
  background: #DFE1E5;
  border-radius: 50%;
  margin-right: 10px;
  transition: 0.25s ease-in-out opacity;
}

.SliderDots-module__medium {
  width: 6px;
  height: 6px;
}

.SliderDots-module__small {
  width: 4px;
  height: 4px;
}

.SliderDots-module__invisible {
  opacity: 0;
  pointer-events: none;
}

.SliderDots-module__active {
  background: #8F77FF;
}
/*!***********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/main/premium/previews/PremiumFeaturePreviewStickers.module.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************/
.PremiumFeaturePreviewStickers-module__root {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.PremiumFeaturePreviewStickers-module__sticker {
  --x: 0px;
  --y: 0px;
  transition: 0.25s cubic-bezier(0.5, 0.45, 0.28, 1.4) transform, 0.25s ease-in-out opacity;
  position: absolute;
  transform: translate(var(--x), var(--y)) scale(var(--opacity));
  opacity: var(--opacity);
}
.PremiumFeaturePreviewStickers-module__sticker canvas {
  width: 100% !important;
  height: 100% !important;
}

.PremiumFeaturePreviewStickers-module__effect-sticker {
  z-index: 2;
}
.PremiumFeaturePreviewStickers-module__effect-sticker canvas {
  width: 100% !important;
  height: 100% !important;
}
/*!****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/main/premium/PremiumFeatureModal.module.scss ***!
  \****************************************************************************************************************************************************************************************************************************/
.PremiumFeatureModal-module__root {
  padding: 1rem;
}

.PremiumFeatureModal-module__button {
  font-weight: 600;
  font-size: 1rem;
  height: 3rem;
}

.PremiumFeatureModal-module__button-content {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.PremiumFeatureModal-module__back-button {
  margin: -0.5rem;
  position: absolute;
  z-index: 2;
}

.PremiumFeatureModal-module__white-back-button {
  color: white !important;
}

.PremiumFeatureModal-module__content {
  margin: 0 -1rem;
  margin-top: -1rem;
  overflow-x: scroll;
  display: flex;
  scroll-snap-type: x mandatory;
  width: calc(100% + 2rem);
}

.PremiumFeatureModal-module__frame {
  aspect-ratio: 1;
}
@supports not (aspect-ratio: 1) {
  .PremiumFeatureModal-module__frame {
    height: 0;
    padding-bottom: 100%;
  }
}

.PremiumFeatureModal-module__slide {
  width: 100%;
  flex: none;
  position: relative;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  margin-bottom: 7.5rem;
}

.PremiumFeatureModal-module__limits {
  background: var(--color-background);
}

.PremiumFeatureModal-module__limits-content {
  overflow: auto;
  padding: 1rem;
  margin-top: 3.6875rem;
  height: calc(var(--vh) * 55 + 41px);
}

.PremiumFeatureModal-module__header {
  padding-left: 4rem;
  font-size: 1.25rem;
  font-weight: 500;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  border-bottom: 0.0625rem solid var(--color-borders);
  position: absolute;
  background: var(--color-background);
  width: 100%;
  transition: 0.1s ease-out border-bottom-color;
}

.PremiumFeatureModal-module__no-header-border {
  border-bottom-color: transparent;
}

.PremiumFeatureModal-module__preview {
  position: absolute;
  margin: 0 -1rem;
  margin-top: -1rem;
  background: var(--premium-feature-background);
  aspect-ratio: 1;
  width: 100%;
  border-top-right-radius: var(--border-radius-default);
  border-top-left-radius: var(--border-radius-default);
}
@supports not (aspect-ratio: 1) {
  .PremiumFeatureModal-module__preview {
    height: 0;
    padding-bottom: 100%;
  }
}

.PremiumFeatureModal-module__title {
  font-size: 1.25rem;
  font-weight: 500;
  text-align: center;
  color: var(--color-text);
  margin-top: 1rem;
}

.PremiumFeatureModal-module__description {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.375rem;
  text-align: center;
  color: var(--color-text-secondary);
  padding: 0 5%;
}

.PremiumFeatureModal-module__footer {
  border-top: 0.0625rem solid var(--color-borders);
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 1rem 1rem 1rem;
  width: 100%;
  background: var(--color-background);
  transition: 0.1s ease-out border-top-color;
}

.PremiumFeatureModal-module__no-footer-border {
  border-top-color: transparent;
}

@media (max-width: 600px) {
  .PremiumFeatureModal-module__preview {
    border-radius: 0;
  }
  .PremiumFeatureModal-module__description {
    padding: 0 2rem;
  }
  .PremiumFeatureModal-module__limits-content {
    height: calc(var(--vh) * 100 - 193px);
  }
}
/*!***************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/main/premium/PremiumFeatureItem.module.scss ***!
  \***************************************************************************************************************************************************************************************************************************/
.PremiumFeatureItem-module__root {
  display: flex;
  padding: 0.5rem !important;
}

.PremiumFeatureItem-module__text {
  display: flex;
  flex-direction: column;
  margin-inline-start: 1.75rem !important;
}

.PremiumFeatureItem-module__header {
  display: flex;
}

.PremiumFeatureItem-module__description {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  line-height: 1.25rem;
  min-height: 2.5rem;
}

.PremiumFeatureItem-module__icon {
  min-width: 2rem;
  height: 2rem;
  align-self: center;
  border-radius: 0.625rem;
  background: var(--item-color, #000);
}
/*!*************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/main/premium/PremiumMainModal.module.scss ***!
  \*************************************************************************************************************************************************************************************************************************/
.PremiumMainModal-module__root {
  --premium-gradient: linear-gradient(88.39deg, #6C93FF -2.56%, #976FFF 51.27%, #DF69D1 107.39%);
  --premium-feature-background: linear-gradient(65.85deg, #6C93FF -0.24%, #976FFF 53.99%, #DF69D1 110.53%);
  -webkit-user-select: none;
          user-select: none;
}

.PremiumMainModal-module__root .modal-content {
  padding: 0;
}

.PremiumMainModal-module__root .modal-dialog {
  max-width: 55vh;
}

.PremiumMainModal-module__root .modal-dialog, .PremiumMainModal-module__root .modal-content {
  overflow: hidden;
}

.PremiumMainModal-module__transition {
  height: min(55vh + 41px + 193px, 90vh);
}

.PremiumMainModal-module__button {
  font-weight: 600;
  font-size: 1rem;
  height: 3rem;
}

.PremiumMainModal-module__main {
  padding: 1rem;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.PremiumMainModal-module__logo {
  margin: 1rem;
  width: 6.25rem;
  height: 6.25rem;
  min-height: 6.25rem;
}

.PremiumMainModal-module__header-text {
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
}

.PremiumMainModal-module__description {
  text-align: center;
  margin-bottom: 2rem;
}

.PremiumMainModal-module__list {
  margin-bottom: 5rem;
  width: 100%;
}

.PremiumMainModal-module__no-button {
  margin-bottom: 0;
}

.PremiumMainModal-module__header {
  z-index: 2;
  display: flex;
  align-items: center;
  border-bottom: 0.0625rem solid var(--color-borders);
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  height: 3.5rem;
  padding: 0.5rem;
  background: var(--color-background);
  transition: 0.25s ease-out transform;
}

.PremiumMainModal-module__hidden-header {
  transform: translateY(-100%);
}

.PremiumMainModal-module__close-button {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 3;
}

.PremiumMainModal-module__premium-header-text {
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0 0 0 3rem;
  unicode-bidi: plaintext;
}

.PremiumMainModal-module__footer-text {
  color: var(--color-text-secondary);
  margin: 0.5rem;
  font-size: 0.875rem;
  unicode-bidi: plaintext;
}

.PremiumMainModal-module__primary-footer-text {
  color: var(--color-text);
}

.PremiumMainModal-module__footer {
  position: absolute;
  width: 100%;
  background: var(--color-background);
  border-top: 0.0625rem solid var(--color-borders);
  left: 0;
  bottom: 0;
  padding: 1rem;
}

@media (max-width: 600px) {
  .PremiumMainModal-module__root .modal-dialog {
    width: 100%;
    height: 100%;
    max-width: 100% !important;
    border-radius: 0;
  }
  .PremiumMainModal-module__root .modal-content {
    max-height: 100vh;
  }
  .PremiumMainModal-module__root .PremiumMainModal-module__transition {
    height: 100%;
  }
}
/*!*******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/main/premium/GiftOption.module.scss ***!
  \*******************************************************************************************************************************************************************************************************************/
.GiftOption-module__wrapper {
  position: relative;
  display: block;
  padding-inline: 4.5rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: var(--border-radius-default);
  background: var(--color-background);
  box-shadow: 0 0 0 0.0625rem var(--color-borders-input);
  cursor: pointer;
  line-height: 1.5rem;
}

.GiftOption-module__active {
  box-shadow: 0 0 0 0.125rem var(--color-primary);
}

.GiftOption-module__input {
  position: absolute;
  z-index: var(--z-below);
  opacity: 0;
}
.GiftOption-module__input:checked ~ .GiftOption-module__content::before {
  border-color: var(--color-primary);
}
.GiftOption-module__input:checked ~ .GiftOption-module__content::after {
  opacity: 1;
}

.GiftOption-module__content {
  display: grid;
  grid-template-areas: "left_top right" "left_bottom right";
  grid-template-columns: 1fr auto;
  justify-content: start;
  padding: 0.5rem 0;
  gap: 0.25rem;
}
.GiftOption-module__content::before, .GiftOption-module__content::after {
  content: "";
  display: block;
  position: absolute;
  inset-inline-start: 1.0625rem;
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  transform: translateY(-50%);
}
.GiftOption-module__content::before {
  border: 2px solid var(--color-borders-input);
  border-radius: 50%;
  background-color: var(--color-background);
  opacity: 1;
  transition: border-color 0.1s ease, opacity 0.1s ease;
}
.GiftOption-module__content::after {
  inset-inline-start: 1.375rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0;
  transition: opacity 0.1s ease;
}

.GiftOption-module__month {
  grid-area: left_top;
  white-space: nowrap;
}

.GiftOption-module__perMonth {
  grid-area: left_bottom;
  align-self: end;
  display: flex;
  flex-direction: row-reverse;
  margin-inline-end: auto;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
@media (max-width: 450px) {
  .GiftOption-module__perMonth {
    flex-direction: column-reverse;
  }
}

.GiftOption-module__amount {
  grid-area: right;
  align-self: center;
  justify-self: end;
  padding-inline-start: 1.5rem;
  color: var(--color-text-secondary);
}

.GiftOption-module__discount {
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: var(--border-radius-default-small);
  padding: 0 0.5rem;
  unicode-bidi: plaintext;
  margin-inline-end: 0.5rem;
  align-self: baseline;
}
/*!*************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/main/premium/GiftPremiumModal.module.scss ***!
  \*************************************************************************************************************************************************************************************************************************/
@media (min-width: 451px) {
  .GiftPremiumModal-module__modalDialog .modal-dialog {
    max-width: 32rem !important;
  }
}
.GiftPremiumModal-module__closeButton {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
}

.GiftPremiumModal-module__avatar {
  margin: 0 auto 1.5rem;
}

.GiftPremiumModal-module__headerText {
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
}

.GiftPremiumModal-module__description,
.GiftPremiumModal-module__premiumFeatures {
  text-align: center;
  margin: 0 auto 2rem;
  max-width: 25rem;
}

.GiftPremiumModal-module__premiumFeatures {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.GiftPremiumModal-module__options {
  margin-bottom: 2.5rem;
}

.GiftPremiumModal-module__button {
  height: 3rem;
  background: linear-gradient(88.39deg, #6C93FF -2.56%, #976FFF 51.27%, #DF69D1 107.39%);
  font-size: 1rem;
  font-weight: 600;
}
/*!****************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/main/premium/common/PremiumLimitReachedModal.module.scss ***!
  \****************************************************************************************************************************************************************************************************************************************/
.PremiumLimitReachedModal-module__root .modal-content {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}

.PremiumLimitReachedModal-module__root .modal-dialog {
  max-width: 22.5rem;
  padding: 0 1rem 1rem 1rem;
  display: flex;
  flex-direction: column;
}

.PremiumLimitReachedModal-module__limit-compare {
  margin: 0.5rem 0 1.25rem 0;
  width: 100%;
}

.PremiumLimitReachedModal-module__picker-list {
  overflow-y: auto;
  margin-bottom: 0.5rem;
}
.PremiumLimitReachedModal-module__picker-list .title {
  line-height: 1.25;
}
.PremiumLimitReachedModal-module__picker-list .status {
  line-height: 1.25;
}

.PremiumLimitReachedModal-module__limit-badge {
  background: var(--color-primary);
  padding: 0.8125rem 1.5rem;
  border-radius: 1.5rem;
  margin: 0.5rem auto 1rem auto;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.PremiumLimitReachedModal-module__limit-value {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-white);
}

.PremiumLimitReachedModal-module__limit-icon {
  display: flex;
  font-size: 1.25rem;
  color: var(--color-white);
}
.PremiumLimitReachedModal-module__limit-icon [stroke] {
  stroke: white;
}
.PremiumLimitReachedModal-module__limit-icon g [fill] {
  fill: white;
}

.PremiumLimitReachedModal-module__limit-description {
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.28;
  margin-bottom: 1rem;
}

.PremiumLimitReachedModal-module__subscribe-button {
  margin-left: 1rem !important;
  --premium-gradient: linear-gradient(
    88.39deg,
    #6c93ff -2.56%,
    #976fff 51.27%,
    #df69d1 107.39%
  );
  background: var(--premium-gradient);
}

.PremiumLimitReachedModal-module__button-icon {
  margin-left: 0.75rem;
  font-size: 1.25rem;
}

.PremiumLimitReachedModal-module__root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.PremiumLimitReachedModal-module__floating-badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #ffffff;
  padding: 0.685rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, #6ca5f9 27.08%, #3a85f3 75.52%);
}
.PremiumLimitReachedModal-module__floating-badge:before {
  content: "";
  display: block;
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #3c86f3 transparent transparent;
  position: absolute;
  top: 100%;
}

.PremiumLimitReachedModal-module__floating-badge-triangle {
  position: absolute;
  bottom: -15px;
}

.PremiumLimitReachedModal-module__floating-badge-icon {
  margin-right: 0.25rem;
}

.PremiumLimitReachedModal-module__text,
.PremiumLimitReachedModal-module__floating-badge-value {
  font-size: 15px;
  font-weight: 500;
}

.PremiumLimitReachedModal-module__right-value,
.PremiumLimitReachedModal-module__left-value {
  margin-inline-start: 1rem;
}

.PremiumLimitReachedModal-module__right-text,
.PremiumLimitReachedModal-module__right-value {
  color: #ffffff;
}

.PremiumLimitReachedModal-module__line {
  padding: 0.375rem 0.75rem;
  flex-basis: 50%;
  display: flex;
}

.PremiumLimitReachedModal-module__left {
  display: flex;
  justify-content: center;
  background: #f1f3f5;
  border-radius: 0.5rem;
  padding: 1rem;
  width: 100%;
  font-size: 15px;
}
.PremiumLimitReachedModal-module__left b {
  font-weight: 500;
  margin-inline-end: 0.5rem;
}
.PremiumLimitReachedModal-module__left span {
  font-weight: 500;
  color: var(--color-error);
}

.PremiumLimitReachedModal-module__right {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background: linear-gradient(84.4deg, #6c93ff -4.85%, #976fff 51.72%, #df69d1 110.7%), #f1f3f5;
}
/*!*****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/ChatOwned.scss ***!
  \*****************************************************************************************************************************************************************************************************/
.limit-list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.limit-list-item .ListItem {
  flex-grow: 1;
}
.limit-list-item .ListItem.chat-item-clickable .ListItem-button {
  padding: 0.375rem 0.5rem;
}
.limit-list-item .Button {
  padding: 0;
}
.limit-list-item .Button.round {
  width: 1.5rem;
  height: 1.5rem;
}
.limit-list-item .Button.danger:not(.disabled):not(:disabled) {
  background-color: var(--color-error);
  color: var(--color-white);
}
.limit-list-item .Button.danger:not(.disabled):not(:disabled) [stroke] {
  stroke: var(--color-white);
}
/*!***********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/DeleteChatModal.scss ***!
  \***********************************************************************************************************************************************************************************************************/
.DeleteChatModal .modal-dialog {
  max-width: 20rem;
}
.DeleteChatModal .modal-header {
  padding: 1.125rem 1.25rem 0;
}
.DeleteChatModal .modal-title:not(:only-child) {
  margin: 0 0 0 0.75rem;
}
.DeleteChatModal .modal-content {
  padding: 0.5rem 1.25rem;
}
.DeleteChatModal .confirm-dialog-button {
  margin-right: -0.625rem;
}
/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/left/main/StatusPickerMenu.module.scss ***!
  \**********************************************************************************************************************************************************************************************************************/
.StatusPickerMenu-module__menuContent {
  --offset-y: 3.25rem !important;
  --offset-x: auto !important;
  --color-text: var(--color-primary);
  left: 0.5rem;
  width: 100%;
  max-width: 26rem;
  height: 26rem;
  padding: 0 !important;
}
@media (max-width: 26rem) {
  .StatusPickerMenu-module__menuContent {
    left: 0.5rem !important;
    right: 0.5rem !important;
    width: calc(100vw - 1rem);
  }
}
.StatusPickerMenu-module__menuContent .custom-emoji {
  color: var(--color-primary);
}
/*!****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/MessageSelectToolbar.scss ***!
  \****************************************************************************************************************************************************************************************************************/
.MessageSelectToolbar {
  display: flex;
  position: absolute;
  bottom: calc(0.5rem + env(safe-area-inset-bottom));
  left: 0.5rem;
  right: 0.5rem;
  width: auto;
  z-index: 20;
  justify-content: center;
  margin: 0;
  opacity: 1;
}
@supports not (bottom: calc(0.5rem + env(safe-area-inset-bottom))) {
  .MessageSelectToolbar {
    bottom: 0.5rem;
  }
}
.mask-image-disabled .MessageSelectToolbar::before {
  left: auto !important;
  right: auto !important;
}
.no-composer .MessageSelectToolbar {
  width: 100%;
}
@media (max-width: 600px) {
  .no-composer .MessageSelectToolbar {
    width: calc(100% - 1rem);
  }
}
@media (min-width: 601px) {
  .MessageSelectToolbar {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
  }
  .no-composer .MessageSelectToolbar {
    top: -4.75rem;
  }
}
.MessageSelectToolbar .MessageSelectToolbar-inner {
  transform: scaleX(1) translateX(0);
}
.no-composer .middle-column-footer-button-container + .MessageSelectToolbar, .no-composer .messaging-disabled + .MessageSelectToolbar {
  top: auto;
}
body.animation-level-0 .MessageSelectToolbar {
  transition: none !important;
}
.MessageSelectToolbar:not(.shown) {
  opacity: 0;
  pointer-events: none;
}
.MessageSelectToolbar:not(.shown) .shown-inner {
  transform: scaleX(var(--toolbar-hidden-scale, 1));
}
.MessageSelectToolbar:not(.shown).with-composer .MessageSelectToolbar-inner {
  transform: scaleX(var(--toolbar-hidden-scale, 1)) translateX(var(--toolbar-translate-x, 0));
}
.MessageSelectToolbar:not(.shown):not(.with-composer) .MessageSelectToolbar-inner {
  transform: scaleX(var(--toolbar-unpin-hidden-scale)) translateX(0);
}
.MessageSelectToolbar::before {
  z-index: -1;
  max-width: calc(100% * var(--composer-hidden-scale));
  width: 100%;
  left: auto;
  right: auto;
}
.MessageSelectToolbar-inner {
  width: 100%;
  max-width: calc(100% * var(--composer-hidden-scale));
  display: flex;
  align-items: center;
  padding: 0.063rem 0.1rem;
  background: var(--color-background);
  border-radius: var(--border-radius-messages);
  font-weight: 500;
  transform: scaleX(1);
  transition: transform var(--select-transition), opacity var(--select-transition);
}
@media (max-width: 600px) {
  .MessageSelectToolbar-inner {
    padding: 0;
    max-width: none;
  }
}
.MessageSelectToolbar-inner > .Button {
  width: 3rem;
  height: 3rem;
}
.MessageSelectToolbar-inner > .Button svg path {
  stroke: var(--color-text-secondary);
}
@media (max-width: 600px) {
  .MessageSelectToolbar-inner > .Button {
    width: 2.875rem;
    height: 2.875rem;
  }
}
.MessageSelectToolbar-count {
  margin-left: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
}
@media (max-width: 600px) {
  .MessageSelectToolbar-count {
    margin-right: 0.5rem;
  }
}
.MessageSelectToolbar-actions {
  margin-left: auto;
  display: flex;
}
.MessageSelectToolbar-actions .item {
  width: 100%;
  background: none;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  display: flex;
  position: relative;
  overflow: hidden;
  line-height: 1.5rem;
  white-space: nowrap;
  color: var(--color-text);
  --ripple-color: rgba(0, 0, 0, 0.08);
  cursor: pointer;
  unicode-bidi: plaintext;
  padding: 0.6875rem;
  border-radius: 50%;
}
.MessageSelectToolbar-actions .item.destructive {
  color: var(--color-error);
}
.MessageSelectToolbar-actions .item.destructive i {
  color: inherit;
}
.MessageSelectToolbar-actions .item.disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}
.MessageSelectToolbar-actions .item:not(.disabled):active {
  background-color: var(--color-item-active);
  transition: none !important;
}
@media (hover: hover) {
  .MessageSelectToolbar-actions .item:hover, .MessageSelectToolbar-actions .item:focus {
    background-color: var(--color-chat-hover);
    text-decoration: none;
  }
}
/*!***************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/ReactionStaticEmoji.scss ***!
  \***************************************************************************************************************************************************************************************************************/
.ReactionStaticEmoji {
  width: 1rem;
  display: block;
}
/*!************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/ReactorListModal.scss ***!
  \************************************************************************************************************************************************************************************************************/
.ReactorListModal {
  --color-reaction: var(--color-message-reaction);
  --hover-color-reaction: var(--color-message-reaction-hover);
  --accent-color: var(--color-primary);
}
.ReactorListModal .modal-content {
  overflow: hidden;
}
.ReactorListModal .Reactions {
  margin-bottom: 0.5rem;
}
.ReactorListModal .icon-heart {
  width: 1.125rem;
  height: 1.125rem;
  margin-right: 0.25rem;
}
.ReactorListModal .reaction-filter-emoji {
  margin-right: 0.25rem;
}
.ReactorListModal .reactor-list {
  max-height: 400px;
  overflow: auto;
  overflow-x: hidden;
}
.ReactorListModal .reactors-list-item {
  margin: 0;
}
.ReactorListModal .reactors-list-item .ListItem-button {
  display: flex;
  align-items: center;
}
.ReactorListModal .reactors-list-emoji {
  width: 1.5rem;
  height: 1.5rem;
  margin-inline-start: auto;
}
/*!*********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/EmojiInteractionAnimation.scss ***!
  \*********************************************************************************************************************************************************************************************************************/
.EmojiInteractionAnimation {
  --start-x: 0;
  --start-y: 0;
  --scale: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}
@keyframes show-interaction {
  from {
    transform: translate(0, 0) scale(var(--scale, 0));
  }
  to {
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes show-interaction-reversed {
  from {
    transform: translate(50%, 0) scaleX(-1) scale(var(--scale, 0));
  }
  to {
    transform: translate(100%, -50%) scaleX(-1) scale(1);
  }
}
.EmojiInteractionAnimation .AnimatedSticker {
  position: absolute;
  top: var(--start-y);
  left: var(--start-x);
  transform: scale(var(--scale), 0);
  transform-origin: left top;
  transition: 0.25s cubic-bezier(0.29, 0.81, 0.27, 0.99) opacity;
}
.EmojiInteractionAnimation.reversed .AnimatedSticker {
  transform: scale(var(--scale), 0) scaleX(-1);
}
.EmojiInteractionAnimation.playing .AnimatedSticker {
  animation: show-interaction forwards 0.25s cubic-bezier(0.29, 0.81, 0.27, 0.99);
}
.EmojiInteractionAnimation.reversed.playing .AnimatedSticker {
  animation: show-interaction-reversed forwards 0.25s cubic-bezier(0.29, 0.81, 0.27, 0.99);
}
.EmojiInteractionAnimation.hiding .AnimatedSticker {
  opacity: 0;
}
.EmojiInteractionAnimation.reversed.hiding .AnimatedSticker {
  opacity: 0;
}
/*!***********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/MessageLanguageModal.module.scss ***!
  \***********************************************************************************************************************************************************************************************************************/
.MessageLanguageModal-module__root .modal-content {
  min-height: min(75vh, 32rem);
  display: flex;
  flex-direction: column;
}
.MessageLanguageModal-module__root .matching-text-highlight {
  color: var(--color-primary);
}

.MessageLanguageModal-module__list-item {
  text-align: left;
}
.MessageLanguageModal-module__list-item[dir=rtl] {
  text-align: right;
}

.MessageLanguageModal-module__title, .MessageLanguageModal-module__subtitle {
  text-align: inherit !important;
}

.MessageLanguageModal-module__languages {
  overflow-y: auto;
}
@supports (overflow-y: overlay) {
  .MessageLanguageModal-module__languages {
    overflow-y: overlay;
    overflow-x: hidden;
  }
}
/*!*******************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/Tab.scss ***!
  \*******************************************************************************************************************************************************************************************/
.Tab {
  display: flex;
  justify-content: center;
  appearance: none;
  background: none;
  width: auto;
  margin: 0;
  border: none;
  padding: 0.625rem 1.25rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-top-left-radius: var(--border-radius-messages-small);
  border-top-right-radius: var(--border-radius-messages-small);
}
.Tab, .Tab:active, .Tab:focus {
  outline: none;
}
.Tab--active {
  cursor: default;
  color: var(--color-primary);
}
.Tab--active .platform {
  opacity: 1 !important;
}
@media (hover: hover) {
  .Tab:not(.Tab--active):hover {
    background: var(--color-interactive-element-hover);
  }
}
@media (max-width: 600px) {
  .Tab:not(.Tab--active):active {
    background: var(--color-interactive-element-hover);
  }
}
.Tab > span {
  position: relative;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.Tab .badge {
  min-width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.75rem;
  padding: 0 0.3125rem;
  font-size: 0.875rem;
  line-height: 1.3125rem;
  font-weight: 500;
  text-align: center;
  flex-shrink: 0;
}
body.is-ios .Tab .badge, body.is-macos .Tab .badge {
  line-height: 1.25rem;
}
.Tab__badge--active {
  background: var(--color-primary) !important;
}
.Tab .blocked {
  position: absolute;
  bottom: -0.625rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
}
.Tab .platform {
  position: absolute;
  bottom: -0.75rem;
  left: 0;
  opacity: 0;
  background-color: var(--color-primary);
  height: 0.25rem;
  width: 100%;
  border-radius: 0.25rem 0.25rem 0 0;
  pointer-events: none;
  box-sizing: content-box;
  transform-origin: left;
}
.Tab .platform.animate {
  transition: transform var(--slide-transition);
}
body.animation-level-0 .Tab .platform.animate {
  transition: none !important;
}
/*!***********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/TabList.scss ***!
  \***********************************************************************************************************************************************************************************************/
.TabList {
  position: sticky;
  top: 0;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  font-size: 0.875rem;
  flex-wrap: nowrap;
  background-color: var(--color-background);
  margin-bottom: 0.125rem;
  overflow-x: auto;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
}
.TabList::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.TabList::-webkit-scrollbar-thumb {
  background-color: transparent;
  box-shadow: none;
}
.TabList::after {
  content: "";
  position: absolute;
  bottom: -0.5px;
  left: 0;
  width: 100%;
  height: 0;
  box-shadow: 0 0.015rem 0 0.015rem var(--color-borders);
}
.TabList.big {
  font-size: 1rem;
  --border-radius-messages-small: 0;
}
/*!***************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/left/search/RecentContacts.scss ***!
  \***************************************************************************************************************************************************************************************************************/
.RecentContacts .Loading {
  min-height: 75vh;
}
.RecentContacts .top-peers-section {
  padding: 0.5rem 1rem;
}
.RecentContacts .top-peers {
  height: 6rem;
  margin: 0 -1rem;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  scrollbar-color: rgba(0, 0, 0, 0);
}
.RecentContacts .top-peers::-webkit-scrollbar {
  height: 0;
}
.RecentContacts .top-peers::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0);
}
.RecentContacts .top-peer-item {
  display: inline-block;
  width: 4.5rem;
  height: 6rem;
  padding: 0.625rem 0.25rem;
  margin-left: 0.5rem;
  border-radius: var(--border-radius-default);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.RecentContacts .top-peer-item:first-child {
  margin-left: 0.5rem;
}
@media (max-width: 600px) {
  .RecentContacts .top-peer-item:first-child {
    margin-left: 0.125rem;
  }
}
.RecentContacts .top-peer-item:last-child {
  margin-right: 0.125rem;
}
.RecentContacts .top-peer-item .Avatar {
  margin: 0 auto 0.375rem;
}
.RecentContacts .top-peer-item:hover {
  background: var(--color-chat-hover);
}
.RecentContacts .top-peer-item .top-peer-name {
  text-align: center;
  white-space: nowrap;
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.RecentContacts .top-peer-item .top-peer-name .emoji-small {
  width: 1rem;
  height: 1rem;
  background-size: 1rem;
  margin-inline-end: 1px;
  vertical-align: -3px;
}
.RecentContacts .recent-chats-header {
  display: flex;
  align-items: center;
}
.RecentContacts .recent-chats-header .Button {
  margin-left: auto;
}
.RecentContacts .recent-chats-header[dir=rtl] .Button {
  margin-left: 0;
  margin-right: auto;
}
/*!************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/left/search/ChatMessage.scss ***!
  \************************************************************************************************************************************************************************************************************/
.ChatMessage:first-child {
  margin-top: 0.5rem;
}
.ChatMessage:hover .Avatar.online::after, .ChatMessage.selected .Avatar.online::after {
  border-color: var(--color-chat-hover);
}
.ChatMessage .ListItem-button {
  padding: 0.25rem 0.5rem;
}
.ChatMessage .info .title {
  flex-grow: 1;
}
.ChatMessage .info h3 {
  font-size: 1rem;
  width: auto;
}
.ChatMessage .info .subtitle {
  color: var(--color-text-secondary);
}
.ChatMessage .info .subtitle .matching-text-highlight {
  color: var(--color-text);
  background: #cae3f7;
  border-radius: 0.25rem;
  padding: 0 0.125rem;
  display: inline-block;
}
.theme-dark .ChatMessage .info .subtitle .matching-text-highlight {
  --color-text: #000;
}
.ChatMessage .info .message {
  flex-grow: 1;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
}
.ChatMessage .info .message .sender-name {
  color: var(--color-text);
}
.ChatMessage .info .message .sender-name::after {
  content: ": ";
}
.ChatMessage .info .message .media-preview-spoiler {
  filter: blur(1px);
}
.ChatMessage .info .message .media-preview--image {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: cover;
  border-radius: 0.125rem;
  vertical-align: -0.25rem;
  margin-inline-start: 0.125rem;
  margin-inline-end: 0.25rem;
}
.ChatMessage .info .message .icon-play {
  position: relative;
  display: inline-block;
  font-size: 0.75rem;
  color: #fff;
  margin-inline-start: -1.25rem;
  margin-inline-end: 0.5rem;
  bottom: 0.0625rem;
}
.ChatMessage .info-row {
  display: flex;
  justify-content: space-between;
}
.ChatMessage[dir=rtl] .subtitle {
  text-align: right;
}
/*!************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/left/search/DateSuggest.scss ***!
  \************************************************************************************************************************************************************************************************************/
.DateSuggest {
  display: flex;
  height: 2rem;
  flex-direction: row;
  justify-content: space-between;
  margin-left: 0.5rem;
  margin-bottom: 0.5rem;
}
.DateSuggest .date-item {
  display: flex;
  flex: 1 1 auto;
  min-width: 8rem;
  margin-top: 0.375rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.DateSuggest .date-item .icon-calendar {
  font-size: 1.25rem;
  margin-right: 0.25rem;
}
/*!***************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/MediaSpoiler.module.scss ***!
  \***************************************************************************************************************************************************************************************************************/
.MediaSpoiler-module__root {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--color-text-secondary);
  --click-shift-x: 0px;
  --click-shift-y: 0px;
}

.MediaSpoiler-module__mask-animation.closing {
  -webkit-mask-image: url(/mask.c474db1e76529489b940.svg), linear-gradient(#ffffff, #ffffff);
          mask-image: url(/mask.c474db1e76529489b940.svg), linear-gradient(#ffffff, #ffffff);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  -webkit-mask-position: calc(50% + var(--click-shift-x)) calc(50% + var(--click-shift-y)), center center;
          mask-position: calc(50% + var(--click-shift-x)) calc(50% + var(--click-shift-y)), center center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 0%;
          mask-size: 0%;
}
body.animation-level-2 .MediaSpoiler-module__mask-animation.closing {
  animation: 500ms ease-in MediaSpoiler-module__circle-cut forwards;
}
.MediaSpoiler-module__mask-animation.closing .MediaSpoiler-module__dots {
  transform: scale(1.2);
}

.MediaSpoiler-module__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.MediaSpoiler-module__dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  --background-url: url(/turbulence_1x.29559632f446607390d2.png);
  --background-size: 256px;
  background: rgba(0, 0, 0, 0.25) var(--background-url);
  background-size: var(--background-size) var(--background-size);
  transition: transform 500ms ease-in;
  transform-origin: calc(50% + var(--click-shift-x)) calc(50% + var(--click-shift-y));
  --x-direction: var(--background-size);
  --y-direction: 0;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .MediaSpoiler-module__dots {
    --background-url: url(/turbulence_2x.e41db87f55d18f1c8d43.png);
  }
}
@media (-webkit-min-device-pixel-ratio: 3) {
  .MediaSpoiler-module__dots {
    --background-url: url(/turbulence_3x.6570f80327858cc09a2b.png);
  }
}
.MediaSpoiler-module__dots::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--background-url);
  background-size: var(--background-size) var(--background-size);
  --x-direction: 0;
  --y-direction: var(--background-size);
  animation: 2s linear -0.8s infinite MediaSpoiler-module__opacity-breath;
  background-position: calc(var(--x-direction) / 2) calc(var(--y-direction) / 2);
}
.MediaSpoiler-module__dots::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--background-url);
  background-size: var(--background-size) var(--background-size);
  --x-direction: calc(-1 * var(--background-size));
  --y-direction: calc(-1 * var(--background-size));
  animation: 2s linear -1.5s infinite MediaSpoiler-module__opacity-breath;
  background-position: calc(var(--x-direction) / 2) calc(var(--y-direction) / 2);
}

body.animation-level-2 .MediaSpoiler-module__dots {
  animation: 20s linear infinite MediaSpoiler-module__dots;
}
body.animation-level-2 .MediaSpoiler-module__dots::before {
  animation: 20s linear MediaSpoiler-module__-7s infinite :local(dots);
}
body.animation-level-2 .MediaSpoiler-module__dots::after {
  animation: 20s linear MediaSpoiler-module__-14s infinite :local(dots);
}

@keyframes MediaSpoiler-module__dots {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: var(--x-direction) var(--y-direction);
  }
}
@keyframes MediaSpoiler-module__circle-cut {
  0% {
    -webkit-mask-size: 0%, 100%;
            mask-size: 0%, 100%;
  }
  100% {
    -webkit-mask-size: 350%, 100%;
            mask-size: 350%, 100%;
  }
}
@keyframes MediaSpoiler-module__opacity-breath {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}
/*!*************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/Media.scss ***!
  \*************************************************************************************************************************************************************************************************/
.Media {
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.Media .video-duration {
  position: absolute;
  left: 0.25rem;
  top: 0.25rem;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 0.75rem;
  padding: 0 0.3125rem;
  border-radius: 0.1875rem;
  line-height: 1.125rem;
}
.Media .media-miniature {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/*!************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/Skeleton.scss ***!
  \************************************************************************************************************************************************************************************************/
.Skeleton {
  position: relative;
  background-color: var(--color-skeleton-background);
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.Skeleton.inline {
  display: inline-block;
  height: 1rem;
  border-radius: 0.5rem;
}
.Skeleton.round {
  border-radius: 50%;
}
.Skeleton.rounded-rect {
  border-radius: 1rem;
}
.Skeleton.pulse::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-skeleton-foreground);
  animation: skeleton-pulse 2s ease-in-out 0.5s infinite;
}
@keyframes skeleton-pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
.Skeleton.wave::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent 0%, var(--color-skeleton-foreground) 50%, transparent 100%);
  animation: skeleton-wave 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes skeleton-wave {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(100%);
  }
}
/*!***************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/WebLink.scss ***!
  \***************************************************************************************************************************************************************************************************/
.WebLink {
  min-height: 3rem;
  padding: 0.25rem 0 0 3.75rem;
  font-size: 0.875rem;
  line-height: 1.125rem;
  position: relative;
}
.WebLink + .WebLink {
  margin-top: 1.5rem;
}
.WebLink.without-media {
  padding-top: 0;
}
.WebLink.without-media::before {
  content: attr(data-initial);
  width: 3rem;
  height: 3rem;
  position: absolute;
  left: 0;
  top: 0;
  background-color: var(--color-webpage-initial-background);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-messages-small);
  text-transform: uppercase;
  font-weight: 500;
  font-size: 1.5rem;
}
.WebLink .Media {
  position: absolute;
  left: 0;
  top: 0;
  width: 3rem;
  height: 3rem;
  cursor: default !important;
  padding-bottom: unset !important;
  border-radius: var(--border-radius-messages-small) !important;
}
.WebLink .site-name,
.WebLink .site-description,
.WebLink .site-title {
  word-break: break-word;
  text-align: initial;
}
.WebLink .site-name {
  display: block;
  color: var(--color-links);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.WebLink .site-title {
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 0.0625rem;
  line-height: 1.3125rem;
}
.WebLink .sender-name,
.WebLink .site-description {
  margin-bottom: 0;
  color: var(--color-text-secondary);
  line-height: 1.125rem;
  max-height: 2.25rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.WebLink .sender-name {
  margin-top: 0.25rem;
}
.WebLink .site-description .emoji {
  width: 1rem !important;
  height: 1rem !important;
}
.WebLink[dir=rtl] {
  padding: 0.25rem 3.75rem 0 0;
}
.WebLink[dir=rtl] .Media, .WebLink[dir=rtl].without-media::before {
  left: auto;
  right: 0;
}
.WebLink[dir=rtl] .content {
  text-align: right;
}
/*!************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/File.scss ***!
  \************************************************************************************************************************************************************************************************/
@charset "UTF-8";
.File {
  --secondary-color: var(--color-text-secondary);
  display: flex;
  align-items: center;
}
.Message.own .File {
  --secondary-color: var(--color-text-green);
}
.content-inner .File {
  min-width: 14rem;
}
@media (max-width: 340px) {
  .content-inner .File {
    min-width: 11rem;
  }
}
.File .file-icon-container {
  position: relative;
}
.File .file-progress,
.File .file-icon,
.File .file-preview {
  width: 3rem;
  height: 3.25rem;
  margin-inline-end: 0.75rem;
  border-radius: var(--border-radius-messages-small);
  background: linear-gradient(180deg, #5895ff 0%, #387cf4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.File .file-progress {
  position: absolute;
  top: 0;
  left: 0;
}
.File .file-icon {
  align-items: flex-end;
  flex-shrink: 0;
  position: relative;
}
.File .file-icon .file-ext {
  font-size: 0.725rem;
  transition: opacity 0.15s;
  color: white;
}
.File .file-icon::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  border-bottom-left-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.4);
  border-color: transparent var(--color-background) transparent var(--color-background);
  border-width: 0 0.85rem 0.85rem 0;
  border-style: solid;
  /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
  transition: border-width 0.15s ease-in;
}
.File .file-preview {
  background: transparent;
  overflow: hidden;
}
.File .file-preview + .action-icon, .File .file-preview + .file-progress {
  background: rgba(0, 0, 0, 0.5);
  border-radius: var(--border-radius-messages-small);
}
.File .file-preview img {
  object-fit: cover;
}
.File .action-icon {
  color: #fff;
  font-size: 1.5rem;
  position: absolute;
  top: 0;
  width: 3rem;
  height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
}
.File.interactive .file-icon-container {
  cursor: pointer;
}
.File.interactive .file-icon-container:hover .file-icon::after {
  border-width: 0;
}
.File.interactive .file-icon-container:hover .action-icon {
  opacity: 1;
}
.File.interactive .file-icon-container:hover .action-icon.hidden {
  opacity: 0;
}
.File.interactive .file-icon-container:hover .file-ext {
  opacity: 0;
}
.File .file-info {
  margin-top: 0.1875rem;
  margin-right: 0.125rem;
  white-space: nowrap;
  overflow: hidden;
  flex-grow: 1;
}
.File .file-info + .Link {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  padding-left: 1rem;
  white-space: nowrap;
}
.File .file-title {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}
.File .file-title .emoji {
  vertical-align: -4px;
}
.File .file-subtitle {
  font-size: 0.875rem;
  line-height: 0.9375rem;
  color: var(--secondary-color);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.File .file-subtitle span + span::before {
  content: " • ";
}
.File.smaller {
  --background-color: var(--color-background);
  --border-radius-messages-small: 0.3125rem;
}
.File.smaller .action-icon,
.File.smaller .file-progress,
.File.smaller .file-icon,
.File.smaller .file-preview {
  width: 3rem;
  height: 3rem;
}
.File.smaller .file-icon {
  padding-bottom: 0.375rem;
}
.File.smaller .file-icon::after {
  border-width: 0 1rem 1rem 0;
}
.File.smaller .file-info {
  margin-top: -0.125rem;
}
.File.smaller .file-title {
  font-weight: 400;
}
.File.smaller .file-subtitle {
  line-height: 1rem;
}
.File:dir(rtl) .file-progress,
.File:dir(rtl) .file-icon,
.File:dir(rtl) .file-preview, .File[dir=rtl] .file-progress,
.File[dir=rtl] .file-icon,
.File[dir=rtl] .file-preview {
  margin-left: 0.75rem;
  margin-right: 0;
}
.File:dir(rtl) .file-info, .File[dir=rtl] .file-info {
  text-align: right;
}
.File:dir(rtl) .file-info + .Link, .File[dir=rtl] .file-info + .Link {
  padding-left: 0;
  padding-right: 1rem;
}
.File:dir(rtl) .action-icon, .File[dir=rtl] .action-icon {
  left: auto;
  right: 0;
}
.File.file-preview-item .file-icon {
  width: 1.5625rem;
  height: 1.875rem;
  padding: 0 0 0.125rem;
  margin: 0;
}
.File.file-preview-item .file-icon::after {
  border-width: 0 0.625rem 0.625rem 0;
  border-color: transparent var(--color-chat-hover) transparent var(--color-chat-hover);
}
.File.file-preview-item .file-icon .file-ext {
  font-size: 0.5rem;
}

.File .file-progress.red,
.File .file-icon.red {
  background: #e94848;
}
.File .file-progress.orange,
.File .file-icon.orange {
  background: var(--color-warning);
}
.File .file-progress.green,
.File .file-icon.green {
  background: linear-gradient(180deg, #1abf74 0%, #019f57 100%);
}
/*!*************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/Audio.scss ***!
  \*************************************************************************************************************************************************************************************************/
.Audio {
  display: flex;
  align-items: center;
  min-height: 4.125rem;
  position: relative;
  padding: 0.5rem 0.5rem 0;
  border-radius: 0.625rem;
}
.Audio .media-loading {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.Audio .media-loading.interactive {
  pointer-events: auto;
}
.Audio .button-wrap {
  position: relative;
}
.own .Audio {
  --color-text-secondary: var(--accent-color);
  --color-interactive-active: var(--color-text-green);
  --color-interactive-inactive: rgba(var(--color-text-green-rgb), 0.4);
  --color-interactive-buffered: rgba(
    var(--color-text-green-rgb),
    0.4
  );
}
.theme-dark .own .Audio {
  --color-text-green-rgb: 255, 255, 255;
  --color-text-green: var(--color-white);
}
.own .Audio .duration {
  color: #fff;
}
.own .Audio .Button.primary {
  background-color: var(--color-white);
  color: var(--color-primary);
  --color-primary-shade: #fff;
}
.theme-dark .own .Audio .Button {
  --color-primary-shade: #fff;
  --color-primary-shade-darker: #fff;
}
.own .Audio .toggle-play .icon-svg svg [fill] {
  fill: var(--color-primary);
}
.own .Audio .download-button {
  border-color: var(--color-primary);
}
.Audio .Button.tiny.round {
  width: 3rem;
  height: 3rem;
}
.Audio .toggle-play {
  margin-inline-end: 0.75rem;
}
.Audio .toggle-play.translucent-white {
  color: rgba(255, 255, 255, 0.8);
}
.Audio .toggle-play .icon-svg {
  position: absolute;
  left: 50%;
}
.Audio .toggle-play .icon-svg svg [fill] {
  fill: white;
}
.Audio .toggle-play .icon-svg.i-play {
  margin-left: 1px;
}
@media (max-width: 600px) {
  .Audio .toggle-play .icon-svg.i-play {
    margin-left: 0.125rem;
  }
}
.Audio .toggle-play .i-play,
.Audio .toggle-play .i-pause {
  opacity: 1;
  transform: scale(1) translate(-50%, 0);
  transition: opacity 0.4s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.Audio .toggle-play.play .i-pause, .Audio .toggle-play.pause .i-play, .Audio .toggle-play.loading .i-play, .Audio .toggle-play.loading .i-pause {
  opacity: 0;
  transform: scale(0.5) translate(-50%, 0);
}
.Audio .download-button {
  position: absolute;
  width: 1.15rem !important;
  height: 1.15rem !important;
  padding: 0;
  left: 1.875rem;
  top: 1.875rem;
  border: 1px solid white;
  z-index: 1;
}
.Audio .download-button i {
  font-size: 0.8125rem;
}
.Audio .content {
  align-self: center;
  min-width: 0;
  flex-grow: 1;
  text-align: initial;
}
.Audio .content-row {
  display: flex;
  justify-content: space-between;
}
.Audio .title {
  font-weight: 500;
  line-height: 1.18;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.Audio canvas {
  height: 23px;
}
.Audio .voice-duration {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: flex-end;
}
.Audio .voice-duration.unread::after {
  content: "";
  position: relative;
  margin: 0 0 0.375rem 0.25rem;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background-color: var(--background-color);
}
body.is-ios .Audio .voice-duration.unread::after {
  margin-bottom: 0.4375rem;
}
.Audio:not(.own) .voice-duration span {
  color: var(--color-primary);
}
.Audio .waveform-wrapper {
  display: flex;
}
@keyframes loader-rectangle {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.Audio .waveform-wrapper .transcribe-icon {
  transition: 0.25s ease-in-out transform;
}
.Audio .waveform-wrapper .transcribe-shown {
  transform: rotateZ(180deg);
}
.Audio .waveform-wrapper .loading-svg {
  position: absolute;
  top: 0;
  left: 0;
}
.Audio .waveform-wrapper .loading-rect {
  animation: 1s linear loader-rectangle infinite;
}
.Audio .waveform-wrapper .Button {
  border-radius: var(--border-radius-default-tiny);
  background: var(--color-voice-transcribe);
  color: var(--accent-color);
  width: auto;
  margin-inline-start: 0.25rem;
  font-size: 1.25rem;
  height: 1.5rem;
  padding: 0.375rem;
}
.Audio .waveform-wrapper .Button:hover {
  background: var(--color-voice-transcribe) !important;
  opacity: 0.8;
}
.Audio .waveform {
  cursor: pointer;
  margin-left: 1px;
  touch-action: none;
  display: flex;
  align-items: flex-end;
}
.Audio .meta,
.Audio .performer,
.Audio .date {
  font-size: 0.875rem;
  margin: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  unicode-bidi: plaintext;
}
.Audio .date {
  flex-shrink: 0;
}
.Audio .duration {
  font-size: 0.875rem;
  color: var(--color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.Audio .meta {
  display: flex;
  flex-direction: column;
}
.Audio .meta.with-date {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.Audio .meta > span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.Audio .meta .performer {
  flex-shrink: 1;
}
.Audio .meta .duration.with-seekline {
  margin-inline-end: 0.625rem;
}
.Audio .meta .bullet {
  margin: 0 0.25rem;
  flex-shrink: 0;
}
.Audio .seekline {
  flex-grow: 1;
  height: 1.125rem;
  position: relative;
  top: 2px;
  cursor: pointer;
  touch-action: none;
}
.Audio .seekline::before {
  content: "";
  position: absolute;
  width: 100%;
  top: 7px;
  height: 2px;
  background-color: var(--color-interactive-inactive);
  border-radius: 2px;
}
.Audio .seekline-play-progress {
  position: absolute;
  height: 2px;
  border-radius: 2px;
  overflow: hidden;
  width: 100%;
  top: 7px;
}
.Audio .seekline-play-progress i {
  position: absolute;
  width: 100%;
  background-color: var(--color-interactive-active);
  height: 4px;
  border-radius: 2px;
  right: 100%;
}
.Audio .seekline-buffered-progress {
  height: 2px;
  border-radius: 2px;
  position: absolute;
  top: 7px;
  background-color: rgba(7, 7, 8, 0.1);
}
.Audio .seekline-thumb {
  position: absolute;
  width: 100%;
  top: 7px;
  left: 0;
}
.Audio .seekline-thumb i {
  pointer-events: none;
  position: absolute;
  width: 100%;
  right: 100%;
}
.Audio .seekline-thumb i::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -7px;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background: var(--color-interactive-active);
}
.Audio.bigger .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
  line-height: 1.5rem;
}
.Audio.bigger .performer,
.Audio.bigger .date {
  line-height: 1.0625rem;
}
.Audio.bigger[dir=rtl] .media-loading {
  left: auto !important;
  right: 0;
}
.Audio .ProgressSpinner.size-s svg {
  width: 2.25rem;
  height: 2.25rem;
}
.Audio[dir=rtl]:last-child {
  margin-bottom: 0.625rem;
}
.Audio[dir=rtl] .toggle-play {
  margin-left: 0.5rem;
  margin-right: 0;
}
.Audio[dir=rtl] .toggle-play.smaller {
  margin-left: 0.75rem;
  margin-right: 0;
}
.Audio[dir=rtl] .meta.duration.with-seekline {
  margin-inline-start: 0.625rem;
}
.Audio[dir=rtl] .content,
.Audio[dir=rtl] .duration {
  text-align: right;
}
.Audio[dir=rtl] .download-button {
  left: auto;
  right: 2rem;
}
/*!***********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/left/search/LeftSearch.scss ***!
  \***********************************************************************************************************************************************************************************************************/
@charset "UTF-8";
.LeftSearch {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.LeftSearch > .Transition {
  flex: 1;
  overflow: hidden;
}
.LeftSearch .TabList {
  z-index: 1;
  overflow: hidden;
}
.LeftSearch .documents-list {
  padding: 0 1.25rem 1.25rem;
}
.LeftSearch .documents-list .ListItem {
  padding: 0.625rem 0;
}
.LeftSearch .section-heading {
  position: relative;
  padding-top: 0.5rem;
  padding-left: 0.5rem;
  margin: 0 0 0.5rem -1.25rem !important;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}
.LeftSearch .section-heading::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: var(--color-borders);
  left: 0.625rem;
  top: -1px;
}
.LeftSearch .section-heading[dir=rtl], .LeftSearch .section-heading[dir=auto] {
  padding-left: 0;
  padding-right: 1.25rem;
  margin: 0 -1.25rem 0 1rem !important;
  text-align: initial;
}
.LeftSearch .section-heading[dir=rtl]::before, .LeftSearch .section-heading[dir=auto]::before {
  left: auto;
  right: 0.625rem;
}
.LeftSearch .section-heading.topic-search-heading {
  margin-left: -1.0625rem !important;
  padding-left: 2.125rem;
}
.LeftSearch .LeftSearch .search-section .section-heading,
.LeftSearch .RecentContacts .search-section .section-heading {
  margin-left: -0.5rem !important;
  padding-left: 1.5rem;
  width: calc(100% + 0.625rem);
  box-shadow: 0 -1px 0 0 var(--color-borders);
}
.LeftSearch .LeftSearch .search-section .section-heading::before,
.LeftSearch .RecentContacts .search-section .section-heading::before {
  display: none;
}
.LeftSearch .WebLink {
  display: flex;
}
.LeftSearch .content:not(.with-seekline) {
  align-self: center;
  min-width: 0;
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.LeftSearch .message-date {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  padding-left: 1rem;
  white-space: nowrap;
}
.LeftSearch .media-list {
  display: grid;
  padding: 0.5rem;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-gap: 0.25rem;
}
.LeftSearch .ListItem.search-result .ChatInfo .handle {
  unicode-bidi: plaintext;
  color: var(--color-primary);
}
.LeftSearch .ListItem.search-result .ChatInfo .handle::before {
  content: "@";
}
html[lang=ar] .LeftSearch .ListItem.search-result .ChatInfo .handle::before {
  content: " ،@";
  margin-inline-end: 0.25rem;
}
.LeftSearch .ListItem.search-result .ChatInfo .handle:not(:last-child):after {
  content: ", ";
  color: var(--color-text-secondary);
}
html[lang=ar] .LeftSearch .ListItem.search-result .ChatInfo .handle:not(:last-child):after {
  content: "";
}
.LeftSearch .ListItem.search-result .ChatInfo[dir=rtl] .status {
  text-align: right;
}
.LeftSearch .ListItem.search-result .ChatInfo[dir=rtl] .status .handle {
  float: right;
}
.LeftSearch .ListItem.search-result .topic-item {
  display: flex;
  align-items: center;
  font-size: 1rem;
  line-height: 1.6875rem;
  font-weight: 500;
  overflow: hidden;
}
.LeftSearch .ListItem.search-result .topic-item .topic-icon {
  --custom-emoji-size: 2rem;
  margin-inline-end: 0.25rem !important;
  width: 2rem;
  height: 2rem;
  font-size: 2rem !important;
}
.LeftSearch .ListItem.search-result .topic-item .fullName {
  overflow: hidden;
  text-overflow: ellipsis;
}
.LeftSearch .ListItem.search-result-message .sender-name {
  color: var(--color-text);
}
.LeftSearch .ListItem.search-result-message .sender-name::after {
  content: ": ";
  white-space: pre;
}
@media (max-width: 600px) {
  .LeftSearch .ListItem {
    margin: 0 -0.125rem 0 -0.5rem;
  }
}
.LeftSearch .search-section {
  padding: 0 0.125rem 0.5rem 0.5rem;
}
.LeftSearch .search-section .section-heading {
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  font-weight: 500;
  margin-bottom: 0 !important;
  padding-top: 0.875rem;
}
.LeftSearch .search-section .section-heading .Link {
  float: right;
  color: var(--color-links);
  font-weight: 400;
  margin-right: 1rem;
}
.LeftSearch .search-section .section-heading .Link:focus, .LeftSearch .search-section .section-heading .Link:hover {
  text-decoration: underline;
}
.LeftSearch .search-section .section-heading[dir=rtl] .Link, .LeftSearch .search-section .section-heading[dir=auto] .Link {
  margin-left: 1rem;
  margin-right: 0;
}
.LeftSearch .search-section .Loading {
  height: 4.5rem;
  margin-bottom: 0.5rem;
}
.LeftSearch .chat-selection {
  padding-top: 0.5rem;
  display: flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-end;
  box-shadow: inset 0 -1px 0 0 var(--color-borders);
  background-color: var(--color-background);
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: rgba(0, 0, 0, 0);
}
.LeftSearch .chat-selection > .PickerSelectedItem {
  flex: 0 0 auto;
}
.LeftSearch .chat-selection > .PickerSelectedItem:last-child {
  margin-right: auto;
}
.LeftSearch .chat-selection[dir=rtl] > .PickerSelectedItem:last-child {
  margin-left: auto;
  margin-right: 0;
}
.LeftSearch .NothingFound {
  height: 100%;
  padding: 0.5rem 1rem;
  text-align: center;
}
.LeftSearch [dir=rtl] .message-date {
  padding-left: 0;
  padding-right: 1rem;
}
/*!*************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/CropModal.scss ***!
  \*************************************************************************************************************************************************************************************************/
.CropModal .modal-dialog {
  width: calc(100% - 2rem);
  max-width: 35rem;
  height: calc(100% - 1rem);
  max-height: 35rem;
  position: relative;
}
.CropModal .modal-content,
.CropModal #avatar-crop {
  overflow: hidden;
}
.CropModal .confirm-button {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  box-shadow: 0 1px 2px var(--color-default-shadow);
}
.CropModal #avatar-crop {
  max-width: 25rem;
  margin: 0 auto;
  position: relative;
  padding-top: 15px;
}
.CropModal #avatar-crop::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.CropModal #avatar-crop .cr-boundary {
  height: 400px !important;
  position: absolute;
  top: 18px;
  left: 0;
  border-radius: var(--border-radius-messages-small);
}
.CropModal #avatar-crop .cr-vp-circle {
  width: 384px !important;
  height: 384px !important;
}
.CropModal #avatar-crop .cr-viewport {
  border: none;
  box-shadow: 0 0 2000px 2000px rgba(127, 127, 127, 0.5);
}
.CropModal #avatar-crop .cr-slider {
  position: relative;
  top: 23px;
}
.CropModal #avatar-crop .cr-slider::-webkit-slider-runnable-track {
  background: var(--color-borders);
}
.CropModal #avatar-crop .cr-slider::-moz-range-track {
  background: var(--color-borders);
}
.CropModal #avatar-crop .cr-slider::-ms-track {
  background: var(--color-borders);
}
.CropModal #avatar-crop .cr-slider::-webkit-slider-thumb {
  background: var(--color-primary);
  cursor: pointer;
  transform: scale(1);
  -webkit-transition: transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out;
}
.CropModal #avatar-crop .cr-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}
.CropModal #avatar-crop .cr-slider::-moz-range-thumb {
  background: var(--color-primary);
  cursor: pointer;
  transform: scale(1);
  -moz-transition: transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out;
}
.CropModal #avatar-crop .cr-slider::-moz-range-thumb:hover {
  transform: scale(1.2);
}
.CropModal #avatar-crop .cr-slider::-ms-thumb {
  background: var(--color-primary);
  cursor: pointer;
  transform: scale(1);
  -ms-transition: transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out;
}
.CropModal #avatar-crop .cr-slider::-ms-thumb:hover {
  transform: scale(1.2);
}
/*!******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/AvatarEditable.scss ***!
  \******************************************************************************************************************************************************************************************************/
.AvatarEditable {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.5rem;
}
.settings-edit-profile .AvatarEditable {
  margin-bottom: 2rem;
}
.AvatarEditable .label {
  margin-left: auto;
  margin-right: auto;
  width: 7.5rem;
  height: 7.5rem;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  border-radius: 50%;
  color: white;
  font-size: 3rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  outline: none !important;
  transition: border-radius 200ms;
}
.settings-edit-profile .AvatarEditable .label {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}
.AvatarEditable .label input {
  display: none;
}
.AvatarEditable .label img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.AvatarEditable .label i {
  transform: scale(1);
  width: 48px;
  height: 48px;
  transition: transform 0.15s linear;
  z-index: var(--z-register-add-avatar);
}
.Transition_slide:not(.Transition_slide-active) .AvatarEditable .label input,
.Transition_slide:not(.Transition_slide-active) .AvatarEditable .label i, .Transition_slide:not(.Transition_slide-active) .AvatarEditable .label::after {
  display: none !important;
}
.Transition_slide:not(.Transition_slide-active) .AvatarEditable .label img {
  position: static !important;
}
.AvatarEditable .label:hover i {
  transform: scale(1.2);
}
.AvatarEditable .label.filled {
  background-color: var(--color-background);
}
.AvatarEditable .label.filled::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.AvatarEditable .label.disabled {
  pointer-events: none;
}
.AvatarEditable .label.disabled i {
  display: none;
}
.AvatarEditable .label.disabled::after {
  display: none;
}
.AvatarEditable .label.rounded-square {
  border-radius: var(--border-radius-forum-avatar);
}
.AvatarEditable .Button.link {
  font-size: 0.9375rem;
}
.AvatarEditable .Button.link svg {
  display: none;
}
.settings-edit-profile .AvatarEditable .Button.link svg {
  display: inline-block;
}
/*!**********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/auth/CountryCodeInput.scss ***!
  \**********************************************************************************************************************************************************************************************************/
.CountryCodeInput .input {
  cursor: pointer;
  z-index: var(--z-country-code-input-group);
}
.CountryCodeInput .input label {
  color: var(--color-text);
}
.CountryCodeInput .input .Spinner {
  position: absolute;
  top: 1rem;
  right: 0.75rem;
  opacity: 0.5;
  --spinner-size: 1.5rem;
}
.CountryCodeInput .input .css-icon-down {
  position: absolute;
  top: 1.125rem;
  right: 1.5rem;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid var(--color-text);
  border-radius: 3px;
  border-top: 0;
  border-left: 0;
  transform: scaleY(1) rotate(45deg);
  /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
  transition: color 0.2s ease, transform 0.2s ease, top 0.2s ease;
}
.CountryCodeInput .input .css-icon-down.open {
  border-color: var(--color-primary);
  transform: scaleY(-1) rotate(45deg);
  top: 1.5rem;
}
.CountryCodeInput .bubble {
  width: 100%;
  max-height: 18rem;
  overflow-y: auto;
  transform-origin: top center !important;
}
.CountryCodeInput .Menu.compact .bubble {
  background-color: var(--color-background);
}
.CountryCodeInput .Menu .bubble {
  border-radius: var(--border-radius-default);
}
.CountryCodeInput .MenuItem {
  font-size: 1rem;
}
.CountryCodeInput .MenuItem button {
  display: flex;
  align-items: center;
}
.CountryCodeInput .MenuItem.no-results button {
  justify-content: center;
  padding: 0.5rem 1rem;
}
.CountryCodeInput .MenuItem.no-results button span {
  font-size: 0.875rem;
}
.CountryCodeInput .country-flag {
  font-size: 2rem;
  margin-right: 1rem;
  width: 1.25rem;
  height: 0.875rem;
  display: flex;
}
.CountryCodeInput .country-flag img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}
.CountryCodeInput .country-flag .emoji {
  width: 2rem;
  height: 2rem;
  display: inline-block;
  vertical-align: 4px;
  margin: -0.5rem 0.125rem;
}
.CountryCodeInput .country-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.CountryCodeInput .country-code {
  margin-left: auto;
  opacity: 0.5;
  padding-right: 0.25rem;
}
/*!**********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/Select.scss ***!
  \**********************************************************************************************************************************************************************************************/
.select-dropdown .input-group,
.select-dropdown .input {
  cursor: pointer;
  z-index: var(--z-country-code-input-group);
}
.select-dropdown .input-group label,
.select-dropdown .input label {
  color: var(--color-text);
}
.select-dropdown .input-group .Spinner,
.select-dropdown .input .Spinner {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  opacity: 0.5;
  --spinner-size: 1.5rem;
}
.select-dropdown .input-group .css-icon-down,
.select-dropdown .input .css-icon-down {
  position: absolute;
  top: 1.125rem;
  right: 1.5rem;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid var(--color-text);
  border-radius: 3px;
  border-top: 0;
  border-left: 0;
  transform: scaleY(1) rotate(45deg);
  /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
  transition: color 0.2s ease, transform 0.2s ease, top 0.2s ease;
}
.select-dropdown .input-group .css-icon-down.open,
.select-dropdown .input .css-icon-down.open {
  border-color: var(--color-primary);
  transform: scaleY(-1) rotate(45deg);
  top: 1.5rem;
}
.select-dropdown .bubble {
  width: 100%;
  max-height: 23.5rem;
  overflow-y: auto;
  transform-origin: top center !important;
  box-shadow: 0px 1.58333px 3.16667px rgba(0, 0, 0, 0.14), 0px 0.316667px 5.7px rgba(0, 0, 0, 0.12), 0px 0.95px 1.58333px rgba(0, 0, 0, 0.2);
}
.select-dropdown .MenuItem button {
  display: flex;
  align-items: center;
}
.select-dropdown .MenuItem.no-results button {
  justify-content: center;
  padding: 0.5rem 1rem;
}
.select-dropdown .MenuItem.no-results button span {
  font-size: 0.875rem;
}

.select-text {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/Draggable.module.scss ***!
  \********************************************************************************************************************************************************************************************************/
.Draggable-module__container {
  position: absolute;
  width: 100%;
  z-index: 1;
}
.Draggable-module__container:has(.ListItem-context-menu) {
  z-index: 2;
}

.Draggable-module__isDragging {
  z-index: 2;
}
.Draggable-module__isDragging > *:not(.Draggable-module__knob) {
  pointer-events: none;
}

.Draggable-module__knob {
  position: absolute;
  top: 50%;
  width: 2rem;
  height: 2rem;
  color: var(--color-text-secondary);
  font-size: 1.25rem;
  line-height: 1.75;
  text-align: center;
  opacity: 0;
  transition: opacity 150ms;
  cursor: grab !important;
  transform: translateY(-50%);
}
.Draggable-module__container:hover .Draggable-module__knob {
  opacity: 1;
}
.Draggable-module__isDragging .Draggable-module__knob {
  opacity: 1;
  cursor: grabbing !important;
}
@media (pointer: coarse) {
  .Draggable-module__knob {
    opacity: 1 !important;
    touch-action: none;
  }
}
/*!************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/FloatingActionButton.scss ***!
  \************************************************************************************************************************************************************************************************************/
.FloatingActionButton {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  transform: translateY(calc(5rem - var(--call-header-height, 0rem)));
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 20;
}
body.animation-level-0 .FloatingActionButton {
  transition: none !important;
}
.FloatingActionButton.revealed {
  transform: translateY(calc(0rem - var(--call-header-height, 0rem)));
}
.FloatingActionButton[dir=rtl] {
  right: auto;
  left: 1rem;
}
/*!******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/ShowMoreButton.scss ***!
  \******************************************************************************************************************************************************************************************************/
.ShowMoreButton {
  color: var(--color-text) !important;
  display: flex;
  align-items: center;
  text-align: left;
  text-transform: none;
  padding-left: 0.75rem !important;
  opacity: 1 !important;
}
.ShowMoreButton i {
  font-size: 1.5rem;
  margin-right: 2rem;
  color: var(--color-text-secondary);
}
.ShowMoreButton .Spinner {
  top: 0.4375rem;
}
/*!**************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/Picker.scss ***!
  \**************************************************************************************************************************************************************************************************/
.Picker {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-grow: 1;
}
.Picker .picker-header {
  padding: 0.5rem 0 0.25rem 0.5rem;
  border-bottom: 1px solid var(--color-borders);
  display: flex;
  flex-flow: row wrap;
  flex-shrink: 0;
  overflow-y: auto;
  max-height: 28rem;
}
.Picker .picker-header .input {
  margin-bottom: 0.25rem;
  margin-left: 0.5rem;
  flex-grow: 1;
}
.Picker .picker-header .form-control {
  height: 2rem;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  font-size: 0.9375rem;
}
.Picker .picker-list {
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem;
}
@media (max-width: 600px) {
  .Picker .picker-list {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
.Picker .no-results {
  height: 100%;
  margin: 0;
  padding: 1rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
}
.Picker .section-help {
  white-space: pre-line;
}
/*!***************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/folders/SettingsFoldersChatsPicker.scss ***!
  \***************************************************************************************************************************************************************************************************************************************/
.SettingsFoldersChatsPicker {
  height: calc(100% - var(--header-height));
}
.SettingsFoldersChatsPicker .picker-header {
  box-shadow: 0 0 2px var(--color-default-shadow);
}
.SettingsFoldersChatsPicker .picker-header .max-items-reached {
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  flex-grow: 1;
  color: var(--color-text-secondary);
}
.SettingsFoldersChatsPicker .picker-list {
  padding: 0 0.5rem 0.5rem;
}
.SettingsFoldersChatsPicker .picker-list .no-results {
  height: 10rem;
}
.SettingsFoldersChatsPicker .ListItem.picker-list-item.chat-type-item .ListItem-button {
  padding: 0.875rem 0.75rem;
}
.SettingsFoldersChatsPicker .ListItem.picker-list-item.chat-item .ListItem-button {
  padding: 0.5rem 0.75rem;
}
.SettingsFoldersChatsPicker .ListItem.picker-list-item .Checkbox {
  margin-left: auto;
  padding-left: 3.25rem;
}
.SettingsFoldersChatsPicker .ListItem.picker-list-item .chat-type {
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
}
.SettingsFoldersChatsPicker .ListItem.picker-list-item[dir=rtl] .Checkbox {
  margin-left: 0;
  margin-right: auto;
  padding-left: 0;
  padding-right: 3.25rem;
}
.SettingsFoldersChatsPicker .settings-item-header {
  margin-left: 0.75rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
.SettingsFoldersChatsPicker .picker-list-divider {
  margin: 0.5rem -0.5rem 0;
  border-bottom: 1px solid var(--color-borders);
}
/*!****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/folders/SettingsFolders.scss ***!
  \****************************************************************************************************************************************************************************************************************************/
.settings-folders-recommended-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.settings-folders-blocked-icon {
  color: var(--color-text-secondary);
  margin-left: 0.25rem;
}

.settings-folders-list-item .ChatInfo {
  display: flex;
  align-items: center;
}
.settings-folders-list-item .ChatInfo .Avatar {
  margin-left: -0.25rem;
  margin-right: 1.5rem;
}
.settings-folders-list-item .ChatInfo .title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.settings-folders-list-item .ChatInfo .title h3 {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3125;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}
.settings-folders-list-item .ChatInfo .status {
  display: none;
}
.settings-folders-list-item .ChatInfo[dir=rtl] .title h3 {
  text-align: right;
}
.settings-folders-list-item .ListItem-button i {
  opacity: 0.9;
}
.settings-folders-list-item.color-primary .ListItem-button {
  color: var(--color-primary);
}
.settings-folders-list-item.color-primary .ListItem-button i {
  opacity: 1;
  color: inherit;
}
.settings-folders-list-item[dir=rtl] .Avatar {
  margin-left: 1.5rem;
  margin-right: -0.25rem;
}

.settings-item .ShowMoreButton {
  margin: 0 -1rem;
  width: calc(100% + 2rem);
  padding-left: 1rem !important;
}

.settings-sortable-container {
  position: relative;
}

.settings-sortable-container .draggable-knob {
  margin-top: -0.25rem;
}

.settings-sortable-item .multiline-item {
  padding-inline-end: 3rem;
}
/*!*************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/react-toggle/style.css ***!
  \*************************************************************************************************************************************************************/
.react-toggle {
  touch-action: pan-x;

  display: inline-block;
  position: relative;
  cursor: pointer;
  background-color: transparent;
  border: 0;
  padding: 0;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;

  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
}

.react-toggle-screenreader-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.react-toggle--disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transition: opacity 0.25s;
}

.react-toggle-track {
  width: 50px;
  height: 24px;
  padding: 0;
  border-radius: 30px;
  background-color: #4D4D4D;
  transition: all 0.2s ease;
}

.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
  background-color: #000000;
}

.react-toggle--checked .react-toggle-track {
  background-color: #19AB27;
}

.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
  background-color: #128D15;
}

.react-toggle-track-check {
  position: absolute;
  width: 14px;
  height: 10px;
  top: 0px;
  bottom: 0px;
  margin-top: auto;
  margin-bottom: auto;
  line-height: 0;
  left: 8px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.react-toggle--checked .react-toggle-track-check {
  opacity: 1;
  transition: opacity 0.25s ease;
}

.react-toggle-track-x {
  position: absolute;
  width: 10px;
  height: 10px;
  top: 0px;
  bottom: 0px;
  margin-top: auto;
  margin-bottom: auto;
  line-height: 0;
  right: 10px;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.react-toggle--checked .react-toggle-track-x {
  opacity: 0;
}

.react-toggle-thumb {
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  position: absolute;
  top: 1px;
  left: 1px;
  width: 22px;
  height: 22px;
  border: 1px solid #4D4D4D;
  border-radius: 50%;
  background-color: #FAFAFA;
  box-sizing: border-box;
  transition: all 0.25s ease;
}

.react-toggle--checked .react-toggle-thumb {
  left: 27px;
  border-color: #19AB27;
}

.react-toggle--focus .react-toggle-thumb {
  box-shadow: 0px 0px 2px 3px #0099E0;
}

.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
  box-shadow: 0px 0px 5px 5px #0099E0;
}

/*!******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/SettingsGeneralBackground.scss ***!
  \******************************************************************************************************************************************************************************************************************************/
.SettingsGeneralBackground .settings-wallpapers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-gap: 10px;
  background-color: var(--color-background);
  box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent);
}
.SettingsGeneralBackground .Loading {
  height: auto !important;
  margin-top: 5rem;
}

.appearance {
  display: flex;
  justify-content: center;
}
.appearance__wrap {
  margin-top: 56px;
  max-width: 400px;
  width: 100%;
}
.appearance__text-size-wrap {
  position: relative;
  padding: 0 20px;
}
.appearance__line {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 2px;
  height: 12px;
  background: #0A49A5;
}
.appearance__settings-chat {
  margin-top: 22px;
}
.appearance__chat {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}
.appearance__chat label {
  margin-bottom: 0;
}
.appearance__chat:first-child::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 1px;
  width: 90%;
  border-top: 1px solid #F7F7F7;
  border-bottom: 1px solid #F7F7F7;
  margin-left: 20px;
}
.appearance__chat:last-child::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  height: 1px;
  width: 90%;
  border-top: 1px solid #F7F7F7;
  border-bottom: 1px solid #F7F7F7;
  margin-left: 20px;
}
.appearance__chat:hover {
  background: #F7F7F7;
  border-bottom: 1px solid #F7F7F7;
  border-radius: 12px;
  cursor: pointer;
}

.container-background {
  max-width: 720px;
  padding: 0 20px;
  margin: 0 auto;
}

.select-background {
  margin-top: 16px;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #929298;
  margin-bottom: 8px;
}

.background-wrap {
  margin-top: 22px;
  margin-left: -20px;
}

.select-background-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 7px;
}

.select-background-text {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #0A49A5;
}

.chat-theme-wrap {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
}

.react-toggle-track {
  width: 30px;
  height: 13px;
}

.react-toggle-thumb {
  width: 11px;
  height: 11px;
}

.react-toggle--checked .react-toggle-thumb {
  left: 17px;
  border-color: #0A49A5;
}

.react-toggle--checked .react-toggle-track {
  background-color: #0A49A5;
}
.react-toggle--checked .react-toggle-track:hover {
  background-color: #0A49A5;
}
/*!******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/WallpaperTile.scss ***!
  \******************************************************************************************************************************************************************************************************************/
.WallpaperTile {
  height: 0;
  padding-bottom: 100%;
  cursor: pointer;
  position: relative;
}
.WallpaperTile .media-inner, .WallpaperTile::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.WallpaperTile .media-inner {
  overflow: hidden;
  transform: scale(1);
  transition: transform 0.15s ease;
}
.WallpaperTile .media-inner img,
.WallpaperTile .media-inner canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.WallpaperTile::after {
  content: "";
  display: block;
  border: 2px solid var(--color-primary);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.WallpaperTile .spinner-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-green-wrapper {
  position: absolute;
  z-index: 50;
  left: calc(50% - 14px);
  bottom: 10px;
}
/*!***********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/SettingsGeneralBackgroundColor.scss ***!
  \***********************************************************************************************************************************************************************************************************************************/
.SettingsGeneralBackgroundColor:not(.is-dragging) .handle {
  transition: transform 300ms ease;
}
.SettingsGeneralBackgroundColor .color-picker,
.SettingsGeneralBackgroundColor .hue-picker {
  position: relative;
}
.SettingsGeneralBackgroundColor .color-picker {
  margin-top: 1rem;
  height: 12rem;
}
.SettingsGeneralBackgroundColor .hue-picker {
  margin: 2rem 0;
  height: 0.5rem;
}
.SettingsGeneralBackgroundColor canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-default);
  cursor: pointer;
}
.SettingsGeneralBackgroundColor .handle {
  position: absolute;
  top: -0.75rem;
  left: -0.75rem;
  width: 1.5rem;
  height: 1.5rem;
  border: 0.125rem solid var(--color-white);
  border-radius: 0.75rem;
  cursor: grab;
}
.SettingsGeneralBackgroundColor .hue-picker .handle {
  top: -0.5rem;
}
.SettingsGeneralBackgroundColor .tools {
  margin-bottom: 0.625rem;
  display: flex;
}
.SettingsGeneralBackgroundColor .tools .input-group {
  margin-bottom: 0;
}
.SettingsGeneralBackgroundColor .tools .input-group[dir=rtl] label {
  transform: scale(0.75) translate(1.25rem, -2.25rem);
}
.SettingsGeneralBackgroundColor .tools .input-group:first-child {
  margin-right: 0.5rem;
}
.SettingsGeneralBackgroundColor .tools .input-group:last-child {
  margin-left: 0.5rem;
}
.SettingsGeneralBackgroundColor .predefined-colors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-gap: 0.0625rem;
  background-color: var(--color-background);
  box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent);
}
.SettingsGeneralBackgroundColor .predefined-colors div {
  cursor: pointer;
  box-shadow: inset 0 0 0 0 var(--color-background);
  transition: box-shadow 300ms ease;
}
.SettingsGeneralBackgroundColor .predefined-colors div.active {
  border: 0.125rem solid var(--color-primary);
  box-shadow: inset 0 0 0 0.3125rem var(--color-background);
}
.SettingsGeneralBackgroundColor .predefined-colors div:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 100%;
  pointer-events: none;
}
/*!*********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/SettingsActiveSession.module.scss ***!
  \*********************************************************************************************************************************************************************************************************************************/
.SettingsActiveSession-module__SettingsActiveSession .modal-dialog {
  max-width: 25rem;
}
.SettingsActiveSession-module__SettingsActiveSession .modal-content {
  padding: 0.5rem 1rem 0;
}

.SettingsActiveSession-module__iconDevice {
  width: 4.5rem;
  height: 4.5rem;
  background-repeat: no-repeat;
  background-size: 4.5rem;
  margin: 0 auto 1rem;
}

.SettingsActiveSession-module__iconDevice__android {
  background-image: url(/android.e844ef5108f5247c3ad6.svg);
}

.SettingsActiveSession-module__iconDevice__apple {
  background-image: url(/apple.7c15b777c80cc9cf66c7.svg);
}

.SettingsActiveSession-module__iconDevice__brave {
  background-image: url(/brave.0fd0fa6559be2b444ec8.svg);
}

.SettingsActiveSession-module__iconDevice__chrome {
  background-image: url(/chrome.6934c6c798865ce29f75.svg);
}

.SettingsActiveSession-module__iconDevice__edge {
  background-image: url(/edge.d1ab56caf49fb17588dd.svg);
}

.SettingsActiveSession-module__iconDevice__firefox {
  background-image: url(/firefox.4c48df1e1d6fec39574c.svg);
}

.SettingsActiveSession-module__iconDevice__linux {
  background-image: url(/linux.4621b6a8be603f575969.svg);
}

.SettingsActiveSession-module__iconDevice__opera {
  background-image: url(/opera.c7bbfd3bc8b6b9af31e4.svg);
}

.SettingsActiveSession-module__iconDevice__safari {
  background-image: url(/safari.7ee1f0e2a1d1f412b99a.svg);
}

.SettingsActiveSession-module__iconDevice__samsung {
  background-image: url(/samsung.73faa628349edb4ce820.svg);
}

.SettingsActiveSession-module__iconDevice__ubuntu {
  background-image: url(/ubuntu.18f8ad0dce306aede39f.svg);
}

.SettingsActiveSession-module__iconDevice__unknown {
  background-image: url(/unknown.84408b661fe8440b0ab3.svg);
}

.SettingsActiveSession-module__iconDevice__vivaldi {
  background-image: url(/vivaldi.a368ff337881fd82267c.svg);
}

.SettingsActiveSession-module__iconDevice__windows {
  background-image: url(/windows.9b4a4548f2259298a42e.svg);
}

.SettingsActiveSession-module__iconDevice__xbox {
  background-image: url(/xbox.02164035485d5bccaf4a.svg);
}

.SettingsActiveSession-module__title {
  text-align: center;
  margin-bottom: 0.25rem;
  line-height: 1.2;
}

.SettingsActiveSession-module__note,
.SettingsActiveSession-module__date {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  text-align: center;
}

.SettingsActiveSession-module__box {
  display: flex;
  flex-direction: column;
  gap: 1.625rem;
  background: var(--color-background-secondary);
  padding: 1.625rem 0.5rem 1.625rem 1.25rem;
  border-radius: var(--border-radius-default);
  margin: 1rem 0;
}

.SettingsActiveSession-module__item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  line-height: 1.125;
}
.SettingsActiveSession-module__item svg {
  flex-shrink: 0;
}
.SettingsActiveSession-module__item svg [fill] {
  fill: var(--color-text-secondary);
}
.SettingsActiveSession-module__item svg [stroke] {
  stroke: var(--color-text-secondary);
}

.SettingsActiveSession-module__item_title {
  font-weight: 500;
  margin-bottom: 0.375rem;
}

.SettingsActiveSession-module__item_subtitle {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.SettingsActiveSession-module__actionHeader {
  margin-top: 1px;
}

.SettingsActiveSession-module__actionName {
  margin-right: auto;
}

.SettingsActiveSession-module__footerButton {
  margin-bottom: 1rem;
}
/*!***************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/SettingsActiveSessions.scss ***!
  \***************************************************************************************************************************************************************************************************************************/
.SettingsActiveSessions .icon-device {
  width: 2.625rem;
  height: 2.625rem;
  background-repeat: no-repeat;
  background-size: 2.625rem;
  flex: 0 0 auto;
}
.SettingsActiveSessions .ListItem-button {
  gap: 0.75rem;
  align-items: flex-start;
}
.SettingsActiveSessions .icon-device-android {
  background-image: url(/android.e844ef5108f5247c3ad6.svg);
}
.SettingsActiveSessions .icon-device-apple {
  background-image: url(/apple.7c15b777c80cc9cf66c7.svg);
}
.SettingsActiveSessions .icon-device-brave {
  background-image: url(/brave.0fd0fa6559be2b444ec8.svg);
}
.SettingsActiveSessions .icon-device-chrome {
  background-image: url(/chrome.6934c6c798865ce29f75.svg);
}
.SettingsActiveSessions .icon-device-edge {
  background-image: url(/edge.d1ab56caf49fb17588dd.svg);
}
.SettingsActiveSessions .icon-device-firefox {
  background-image: url(/firefox.4c48df1e1d6fec39574c.svg);
}
.SettingsActiveSessions .icon-device-linux {
  background-image: url(/linux.4621b6a8be603f575969.svg);
}
.SettingsActiveSessions .icon-device-opera {
  background-image: url(/opera.c7bbfd3bc8b6b9af31e4.svg);
}
.SettingsActiveSessions .icon-device-safari {
  background-image: url(/safari.7ee1f0e2a1d1f412b99a.svg);
}
.SettingsActiveSessions .icon-device-samsung {
  background-image: url(/samsung.73faa628349edb4ce820.svg);
}
.SettingsActiveSessions .icon-device-ubuntu {
  background-image: url(/ubuntu.18f8ad0dce306aede39f.svg);
}
.SettingsActiveSessions .icon-device-unknown {
  background-image: url(/unknown.84408b661fe8440b0ab3.svg);
}
.SettingsActiveSessions .icon-device-vivaldi {
  background-image: url(/vivaldi.a368ff337881fd82267c.svg);
}
.SettingsActiveSessions .icon-device-windows {
  background-image: url(/windows.9b4a4548f2259298a42e.svg);
}
.SettingsActiveSessions .icon-device-xbox {
  background-image: url(/xbox.02164035485d5bccaf4a.svg);
}
.SettingsActiveSessions .settings-item {
  box-shadow: none;
}
.SettingsActiveSessions .settings-item .ListItem + .ListItem::after {
  left: 0;
}
.SettingsActiveSessions .settings-item .ListItem:not(.device) .ListItem-button {
  padding-left: 1.125rem;
}
.SettingsActiveSessions h5 {
  color: var(--color-primary);
  padding-left: 1.125rem;
}
.SettingsActiveSessions .settings-item-description {
  padding-left: 1rem;
}
/*!*********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/SettingsActiveWebsite.module.scss ***!
  \*********************************************************************************************************************************************************************************************************************************/
.SettingsActiveWebsite-module__root .modal-dialog {
  max-width: 28rem;
}

.SettingsActiveWebsite-module__avatar {
  width: 5rem;
  height: 5rem;
  font-size: 3.5rem;
  margin: 0 auto 1rem;
  border-radius: 1rem;
}
.SettingsActiveWebsite-module__avatar .Avatar__media {
  border-radius: 1rem;
}

.SettingsActiveWebsite-module__title {
  justify-content: center;
}

.SettingsActiveWebsite-module__note {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  text-align: center;
}

.SettingsActiveWebsite-module__box {
  background: var(--color-background-secondary);
  padding: 1rem 1rem 0.5rem;
  border-radius: var(--border-radius-default);
  margin: 1rem 0;
}

.SettingsActiveWebsite-module__action-header {
  margin-top: 1px;
}

.SettingsActiveWebsite-module__action-name {
  margin-right: auto;
}

.SettingsActiveWebsite-module__header-button {
  margin-right: -0.5rem;
}
/*!**********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/SettingsActiveWebsites.module.scss ***!
  \**********************************************************************************************************************************************************************************************************************************/
.SettingsActiveWebsites-module__avatar {
  width: 2rem;
  height: 2rem;
  margin-inline-end: 1.5rem;
  border-radius: 0.5rem;
}
.SettingsActiveWebsites-module__avatar .Avatar__media {
  border-radius: 0.5rem;
}

.SettingsActiveWebsites-module__clear-help {
  margin-top: 0.5rem !important;
  margin-bottom: 0 !important;
}

.subtitle {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/AnimatedIconWithPreview.module.scss ***!
  \**************************************************************************************************************************************************************************************************************************/
.AnimatedIconWithPreview-module__root {
  position: relative;
  display: block !important;
}

.AnimatedIconWithPreview-module__preview {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
/*!**********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/StickerSetCard.scss ***!
  \**********************************************************************************************************************************************************************************************************/
.settings-item .StickerSetCard.ListItem {
  margin-bottom: 0.5rem;
}
.StickerSetCard .StickerButton,
.StickerSetCard .Button {
  width: 3rem;
  height: 3rem;
  margin: 0 0.5rem 0 0;
  padding: 0;
  flex: 0 0 3rem;
}
.StickerSetCard .install-button {
  box-sizing: content-box;
}
.StickerSetCard img {
  max-width: 100%;
  max-height: 100%;
}
.StickerSetCard .multiline-menu-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.StickerSetCard[dir=rtl] .StickerButton,
.StickerSetCard[dir=rtl] .Button {
  margin: 0 0 0 0.5rem;
}
/*!**********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/SettingsDoNotTranslate.module.scss ***!
  \**********************************************************************************************************************************************************************************************************************************/
.SettingsDoNotTranslate-module__root, .SettingsDoNotTranslate-module__item {
  display: flex;
  flex-direction: column;
}

.SettingsDoNotTranslate-module__item {
  overflow: hidden;
  min-height: 25rem;
}

.SettingsDoNotTranslate-module__checkbox {
  margin: 0;
}

.SettingsDoNotTranslate-module__languages {
  overflow-y: auto;
}
@supports (overflow-y: overlay) {
  .SettingsDoNotTranslate-module__languages {
    overflow-y: overlay;
    overflow-x: hidden;
  }
}
/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/SettingsPurchases.scss ***!
  \**********************************************************************************************************************************************************************************************************************/
#SettingsPurchases {
  height: 100%;
}
#SettingsPurchases .ListItem {
  margin-bottom: 0.1875rem;
}
#SettingsPurchases .ListItem::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 0;
  box-shadow: 0 0.01rem 0 0.01rem var(--color-borders);
}
#SettingsPurchases .ListItem-button {
  gap: 1rem;
  padding: 0.75em;
}
#SettingsPurchases .thumbnail {
  position: relative;
  width: 2.625rem;
  height: 2.625rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 0.25rem;
}
#SettingsPurchases .thumbnail img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
#SettingsPurchases .thumbnail .icon-svg {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
#SettingsPurchases .thumbnail .icon-svg svg {
  width: 1rem;
}
#SettingsPurchases .thumbnail.audio {
  border-radius: 50%;
  background-color: var(--color-primary);
}
#SettingsPurchases .thumbnail.audio .icon-svg {
  display: flex;
}
#SettingsPurchases .info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  line-height: 1.2;
}
#SettingsPurchases h4 {
  margin-bottom: 0;
}
#SettingsPurchases .subtitle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
}
#SettingsPurchases .subtitle svg path {
  stroke: var(--color-text-secondary);
}
#SettingsPurchases .duration {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background-color: var(--color-black-opacity-60);
  color: white;
  border-radius: 0.3125rem;
  font-size: 0.75rem;
  line-height: 1.5;
  padding: 0 0.5rem;
}
#SettingsPurchases .duration svg {
  width: 0.5rem;
}
#SettingsPurchases .action svg path {
  stroke: var(--color-error);
}
/*!***********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/wallet/DetailsCard/DetailsCard.scss ***!
  \***********************************************************************************************************************************************************************************************************************************/
.details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.details__btn-wrapper {
  display: flex;
  justify-content: center;
  gap: 16px;
  width: 320px;
}
.details__btn-wrapper .primary {
  flex-grow: 1;
  min-width: 48%;
}
.details .description {
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.15;
  max-width: 20rem;
}

.wallet__earn-statistic {
  margin-bottom: 1.625rem;
}
.wallet__earn-statistic .Button {
  flex-direction: column;
  height: 4.625rem;
  border-radius: 0.875rem;
}
.wallet__earn-statistic .Button.outline {
  border-color: #f2f2f2;
}
.wallet__earn-statistic .title {
  font-size: 0.75rem;
}
.wallet__earn-statistic .row {
  margin: -0.25rem;
  padding: 0 1.25rem;
}
.wallet__earn-statistic .col {
  padding: 0.25rem;
}

.earning-content {
  padding-top: 1rem;
}
.earning-content .earning-reward {
  margin: 0 -0.25rem;
}
.earning-content .earning-reward .col {
  padding: 0.25rem;
}
.earning-content .earning-reward .reward {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background-color: var(--color-background-secondary);
  border-radius: var(--border-radius-messages);
}
.earning-content .earning-reward .reward .icon-svg {
  width: 2.1875rem;
  height: 2.1875rem;
  border-radius: 43%;
  background: linear-gradient(135deg, #ffa500 31.17%, #d88b00 75.98%);
}
.earning-content .earning-reward .reward.total .icon-svg {
  background: linear-gradient(135deg, #44be2e 31.17%, #27ae60 75.98%);
}
.earning-content .earning-reward .reward [stroke] {
  stroke: white;
}
.earning-content .earning-reward .reward .title {
  font-size: 0.6875rem;
  color: var(--color-placeholders);
  margin-bottom: 0.25rem;
}
.earning-content .earning-reward .reward h3 {
  margin: 0;
  line-height: 1;
  font-size: 1.5rem;
}
.earning-content .Avatar {
  --radius: 45%;
}
.earning-content .Avatar.size-medium {
  width: 2.625rem;
  height: 2.625rem;
}
.earning-content .earn .row {
  gap: 2rem;
}
.earning-content .earn .col {
  text-align: right;
}
.earning-content .earn .info-row {
  gap: 0.25rem;
}
.earning-content .earn::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.02rem;
  background-color: var(--color-background-secondary);
}
.earning-content .earn .ListItem-button {
  padding: 1.125rem 1.25rem;
}
/*!*************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/wallet/SlideWallets/SlideWallets.scss ***!
  \*************************************************************************************************************************************************************************************************************************************/
.slide-wallet {
  --swiper-pagination-bullet-size: 5px;
  --swiper-theme-color: var(--color-primary);
  padding-top: 40px;
}
.slide-wallet .container-desc {
  display: flex;
  justify-content: space-between;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 0.875rem 1rem;
  color: white;
}
.slide-wallet .container-desc .left-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.slide-wallet .container-desc .right-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  margin-top: 2px;
  gap: 0.875rem;
}
.slide-wallet .container-desc .right-side div :first-child {
  font-size: 0.6875rem;
  line-height: 1;
  font-weight: normal;
}
.slide-wallet .container-desc .right-side div :last-child {
  font-size: 0.9375rem;
  font-weight: normal;
}
.slide-wallet .container-desc .amount {
  font-size: 1.875rem;
  font-weight: 500;
  gap: 0.25rem;
}
.slide-wallet .container-desc .amount [stroke] {
  stroke: white;
}
.slide-wallet__container {
  display: flex;
  justify-content: center;
}
.slide-wallet__container-img {
  position: relative;
  box-shadow: 0 15px 20px 0 var(--color-black-opacity-15);
  border-radius: 0.75rem;
  overflow: hidden;
}
.slide-wallet__pointers {
  display: flex;
  justify-content: center;
  gap: 5px;
}
.slide-wallet__point {
  width: 5px;
  height: 5px;
  background: rgba(7, 7, 8, 0.15);
  border-radius: 50%;
}
.slide-wallet__point:first-child {
  background: #0a49a5;
}
.slide-wallet__btn {
  display: flex;
  align-items: center;
}
.slide-wallet__arrow-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  margin-top: 1rem;
  margin-bottom: 1rem;
  opacity: 0;
}
.slide-wallet__arrow-wrapper.active {
  opacity: 1;
}
.slide-wallet__arrow-wrapper div {
  height: max-content;
}
.slide-wallet__arrow-wrapper svg {
  position: relative;
  z-index: 5;
  cursor: pointer;
}

.wallet__slide-wallet .swiper .swiper-pagination {
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: -moz-fit-content;
  width: fit-content;
}
/*!************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/swiper/swiper.min.css ***!
  \************************************************************************************************************************************************************/
/**
 * Swiper 9.4.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: June 13, 2023
 */

@font-face{font-family:swiper-icons;src:url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper,swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;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-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide,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);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,.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{transform-style:preserve-3d}.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-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-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.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-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-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,swiper-container: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)}}
/*!***********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/swiper/modules/navigation/navigation.min.css ***!
  \***********************************************************************************************************************************************************************************/
: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: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,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.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-button-lock{display:none}
/*!***********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/swiper/modules/pagination/pagination.min.css ***!
  \***********************************************************************************************************************************************************************************/
.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;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,:host(.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}
/*!*********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/swiper/modules/scrollbar/scrollbar.min.css ***!
  \*********************************************************************************************************************************************************************************/
.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;-ms-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}
/*!***********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/wallet/TransactionHeader/TransactionHeader.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************/
.transactions {
  padding-bottom: 2rem;
}
.transactions__header {
  padding: 1rem 0 1rem 1.25rem;
}
.transactions__wrapper {
  position: sticky;
  top: -1px;
  background-color: var(--color-background);
  z-index: 2;
}
.transactions__search-wrap {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #cfcfd2;
}
.transactions__search-input {
  width: 100%;
  height: 3.125rem;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border: none;
  outline: none;
}
.transactions__title {
  color: #070708;
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 19px;
}
.transactions__month-row {
  padding: 0.875rem 1.25rem 1rem;
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.2;
  color: var(--color-text-secondary);
}
.transactions .ListItem {
  margin-bottom: 0.1875rem;
}
.transactions .ListItem-button {
  gap: 1rem;
  padding: 0.625em 1.25rem;
  border-radius: var(--border-radius-messages);
}
.transactions .thumbnail {
  width: 2.625rem;
  height: 2.625rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 1.1875rem;
  background: #44be2e linear-gradient(135deg, #44be2e 31.17%, #27ae60 75.98%);
}
.transactions .thumbnail.negative {
  background: #ff758f linear-gradient(135deg, #ff758f 27.08%, #ef4061 75.52%);
}
.transactions .thumbnail.primary {
  background: var(--color-primary);
}
.transactions .thumbnail img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.transactions .thumbnail .icon-svg {
  justify-content: center;
  align-items: center;
}
.transactions .thumbnail.music {
  background: linear-gradient(95deg, #faa60d 0%, #3fc0ff 100%);
}
.transactions .thumbnail.elloai {
  background: linear-gradient(135deg, #ff758f 27.08%, #ef4061 75.52%);
}
.transactions .thumbnail [stroke] {
  stroke: white;
}
.transactions .info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
}
.transactions .info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.transactions .Avatar {
  background-size: cover;
}
.transactions .Avatar.no-bg {
  background: #eeeeef;
}
.transactions .Avatar.ai-img {
  background-image: url(/image-bg-transactions.1a3f0f58361b68e55700.jpg);
}
.transactions .Avatar.ai-text {
  background-image: url(/gradienta-LeG68PrXA6Y-unsplash.c43e5bd2d98fbdf612d8.jpg);
}
.transactions .Avatar.ai-double {
  background-image: url(/image-and-text-bg.8b9707d92f6be4b9ecc6.png);
}
.transactions h4 {
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.transactions .title .Avatar.size-mini,
.transactions .info-row .Avatar.size-mini {
  width: 1.25rem;
  height: 1.25rem;
}
.transactions .subtitle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-gray);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.transactions .duration {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background-color: var(--color-black-opacity-60);
  color: white;
  border-radius: 0.3125rem;
  font-size: 0.75rem;
  line-height: 1.5;
  padding: 0 0.5rem;
}
.transactions .duration svg {
  width: 0.5rem;
}
.transactions .action {
  font-size: 1.25rem;
  transition: font-size 0.2s ease-in-out;
  display: flex;
  align-items: center;
  line-height: 0;
  gap: 0.25rem;
}
.transactions__background {
  margin-bottom: 0.25rem;
  position: relative;
}
.transactions__background:not(.active-item)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.02rem;
  background-color: var(--color-background-secondary);
}
.transactions__background.active-item {
  background: var(--color-background-secondary);
  border-radius: var(--border-radius-messages);
}
.transactions__background.active-item:hover {
  background-color: var(--color-chat-hover);
}
.transactions__desc {
  position: relative;
  padding: 0 1.25rem 1rem;
}
.transactions__row-desc {
  overflow: hidden;
}
.transactions__row-desc .title {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.1875rem;
  line-height: 1.2;
}
.transactions__row-desc .title span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.transactions__row-desc .title .Button.link {
  font-size: inherit;
  padding: 0.25rem 0;
  border-radius: 0;
}
.transactions__row-desc .title .Button.link:hover {
  background-color: transparent;
}
.transactions__row-desc .subtitle {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}
.transactions__desc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.transactions__status {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-success);
  font-weight: 500;
}
.transactions__status .icon-svg {
  border-radius: 50%;
  border: 1px solid var(--color-success);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-success);
}
.transactions__status.pending {
  color: var(--color-5);
}
.transactions__status.pending .icon-svg {
  background-color: transparent;
  border-color: transparent;
}
.transactions__content {
  margin: -0.25rem;
}
.transactions__content .col {
  padding: 0.25rem;
}
.transactions__box {
  display: flex;
  height: 100%;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: #ffffff;
  border-radius: 12px;
}
.transactions__box [stroke] {
  stroke: var(--color-text);
}
.transactions__down-text {
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
}
.transactions__filter-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: var(--color-background);
}
.transactions__filter {
  cursor: pointer;
}
.transactions__filter.active [stroke], .transactions__filter:hover [stroke] {
  stroke: var(--color-primary);
}
.transactions__filter-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 0.5rem 1.25rem;
}
.transactions__filter-list {
  padding: 0;
}
.transactions__filter-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
}
.transactions__filter-item:hover {
  border-radius: 12px;
  background: #f6f6f6;
  cursor: pointer;
}
.transactions__body {
  transition: opacity 0.2s ease-in-out;
  opacity: 1;
  position: relative;
}
.transactions__body.hide {
  opacity: 0;
}
.transactions .Loading {
  padding: 1rem;
  position: absolute;
  background-color: var(--color-background);
  width: 100%;
  top: 0;
  z-index: 1;
}
@media (max-width: 920px) {
  .transactions__header {
    padding: 1rem 0 0.5rem 1.25rem;
  }
}

.icon-svg-wrapper {
  display: flex;
  gap: 22px;
  padding: 0 1.25rem;
}
/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/wallet/WalletMainPage.scss ***!
  \**************************************************************************************************************************************************************************************************************************/
.wallet.settings-container {
  height: 100%;
}
.wallet > div {
  height: 100%;
}
.wallet__slide-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wallet__title {
  margin-bottom: 12px;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.15px;
  color: #070708;
}
.wallet__box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wallet__desc p {
  text-align: center;
  max-width: 720px;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #070708;
}

.welcome-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 10px;
  height: calc(100% - var(--header-height));
}
.welcome-page__wrap {
  max-width: 720px;
  width: 100%;
}
.welcome-page__wrap > .welcome-page__desc {
  margin-bottom: 2.25rem;
}
.welcome-page__wrap p {
  line-height: 1.2;
}
.welcome-page__wrap a {
  margin-bottom: 25px;
  display: block;
}
.welcome-page__title {
  font-size: 1.125rem;
  margin-bottom: 2rem;
}
.welcome-page__title-list {
  font-weight: 500;
  margin-bottom: 16px;
}
.welcome-page__list {
  list-style-position: inside;
  padding-left: 0;
  margin-top: 8px;
}
.welcome-page__veriety {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 2.75rem;
  margin-bottom: 1rem;
}
.welcome-page__veriety a {
  display: block;
  margin-top: 16px;
}
.welcome-page__name {
  margin-bottom: 1rem;
}
.welcome-page__desc {
  line-height: 1.25;
  margin-bottom: 1.1875rem;
  padding-left: 0.75rem;
}
.welcome-page .form-submit button {
  max-width: 360px;
}

.left-text {
  justify-self: start;
  text-align: left !important;
}

.global-title {
  margin: 0;
}

.form-control.input-not-border {
  text-align: center;
  max-width: 15.625rem;
  border: none;
  font-size: 3rem;
  padding: 0;
}
.form-control.input-not-border.as-disabled:not(:focus) {
  background: transparent !important;
  border-color: transparent;
}
.form-control.input-not-border + label {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
  font-size: 3rem;
  line-height: 1.17;
  text-align: center;
}
.error .form-control.input-not-border {
  color: var(--color-error);
}
/*!***************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/SettingsInvitationLink.scss ***!
  \***************************************************************************************************************************************************************************************************************************/
.settings-invitation {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 0;
}
.settings-invitation .qr-inner {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
}
.settings-invitation .qr-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin: 0 auto 0.875rem;
  padding: 3.75rem 2rem 1rem;
  border-radius: 20px;
  background-color: #6ca5f9;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.15);
}
.settings-invitation .qr-wrapper h3 {
  color: white;
}
.settings-invitation .qr-wrapper .Avatar {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
.settings-invitation .qr-container {
  margin-bottom: 0.75rem;
  text-align: center;
}
.settings-invitation .qr-description {
  font-size: 0.75rem;
  color: #74747b;
  font-weight: 500;
  text-align: center;
}
.settings-invitation .title {
  color: var(--color-primary);
  font-size: 0.9375rem;
  padding: 1rem 0.5rem 0.375rem 1.375rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.settings-invitation .Button.link {
  font-size: 0.9375rem;
  font-weight: normal;
  justify-content: flex-start;
}
.settings-invitation .Button.link i {
  font-size: 1.35rem;
}
.settings-invitation .links-list {
  position: relative;
  margin-bottom: 2rem;
}
.settings-invitation .links-list::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  box-shadow: 0 -0.01rem 0 0.01rem var(--color-borders);
}
.settings-invitation .invite-link .ListItem-button {
  gap: 0.75rem;
}
.settings-invitation .invite-link .ListItem-button > svg path {
  fill: var(--color-text-secondary);
}
.settings-invitation .invite-link .ListItem-button > .icon-svg {
  width: 2rem;
  height: 2rem;
  background-color: #3a85f3;
  border-radius: 50%;
}
.settings-invitation .invite-link .ListItem-button > .icon-svg :first-child {
  width: 18px;
}
.settings-invitation .invite-link .ListItem-button > .icon-svg path {
  stroke: white;
}
.settings-invitation .invite-link .ListItem-button > .icon-svg.error {
  background-color: var(--color-error);
}
.settings-invitation .invite-link .ListItem-button > .icon-svg.expire {
  background-color: var(--color-success);
}
.settings-invitation .invite-link .ListItem-button > .icon-svg .wick {
  position: absolute;
  transform: rotate(-90deg);
}
.settings-invitation .invite-link .info {
  line-height: 1.2;
}
.settings-invitation .invite-link .link-title {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-invitation .invite-link .subtitle {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
.settings-invitation .invite-link.ListItem.chat-item-clickable .ListItem-button {
  padding: 0.5rem 0.875rem;
}
.settings-invitation .invite-link-inactive .ListItem-button > .icon-svg {
  background-color: var(--color-black-opacity-35);
}

.settings-create-link {
  width: 100%;
}
.settings-create-link .input-group {
  display: flex;
  gap: 2rem;
}
.settings-create-link .link-value {
  display: flex;
  justify-content: space-between;
}
.settings-create-link .form-submit button {
  max-width: 360px;
}

.invite-wrap .button-group {
  display: flex;
  gap: 0.75rem;
}
.invite-wrap .button-group .Button {
  flex-grow: 1;
}
.invite-wrap .button-group .Button.smaller {
  height: 2.4375rem;
  border-radius: var(--border-radius-default-small);
}
/*!*********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/wallet/WalletCard/WalletCard.scss ***!
  \*********************************************************************************************************************************************************************************************************************************/
.wallet-card {
  width: 100%;
}
.wallet-card__wrap {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 19px 0;
}
.wallet-card__box {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  padding: 20px;
}
.wallet-card__box:hover {
  background: #F7F7F7;
  border-radius: 12px;
}
.wallet-card__name-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wallet-card__info {
  margin-top: 20px;
  padding-left: 37px;
}

.recharts-cartesian-axis-line {
  color: #F7F7F7 !important;
}
/*!*****************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/wallet/WalletSettings/WalletSettings.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************/
.settings-wallet {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 39px 0;
}
.settings-wallet__check-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-wallet__check-box label {
  display: flex;
  justify-content: space-between;
}
.settings-wallet__check-box label::after {
  content: "";
  position: absolute;
  bottom: -25px;
  margin-left: -60px;
  display: block;
  height: 1px;
  background-color: #f7f7f7;
  width: 105%;
}

.currency {
  color: #929298;
  font-size: 0.9375rem;
}

.radio-group-wrap {
  position: relative;
}

.settings-wallet__check-box .radio-group {
  position: relative;
}
.settings-wallet__check-box .radio-group:first-child::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -21px;
  display: block;
  height: 1px;
  background-color: #f7f7f7;
  width: 106%;
}
.settings-wallet__check-box .radio-group .radio-group-wrap .Radio {
  margin: 45px 0 45px -15px;
}
/*!*****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/ColumnCharts/ColumnCharts.scss ***!
  \*****************************************************************************************************************************************************************************************************************/
.chart {
  margin: 1.75rem 0;
}
.chart__wrapper {
  background: #f6f6f6;
  border: 1px solid #f7f7f7;
  border-radius: 12px;
  padding: 20px;
}
.chart__title {
  font-weight: 500;
  line-height: 19px;
}
.chart__subtitle {
  font-size: 0.8125rem;
  line-height: 1.15;
  color: var(--color-text-secondary);
  margin-top: 8px;
}
.chart__subtitle [stroke] {
  stroke: var(--color-text-secondary);
}
.chart__wrap-column {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 24px;
}
.chart__column {
  position: relative;
  width: 10px;
  height: 80px;
  background: rgba(7, 7, 8, 0.05);
  border-radius: 5px;
}
@media (max-width: 480px) {
  .chart__column {
    width: 8px;
  }
}
.chart__column-color {
  position: absolute;
  bottom: 0;
  width: 10px;
  border-radius: 5px;
  transition: height 0.2s ease;
  background: linear-gradient(135deg, #44be2e 27.08%, #27ae60 75.52%);
}
.chart__column-color.negative {
  background: linear-gradient(135deg, #ff758f 27.08%, #ef4061 75.52%);
}
@media (max-width: 480px) {
  .chart__column-color {
    width: 8px;
  }
}
.chart .row {
  justify-content: center;
  margin: 0 -0.5rem;
}
.chart .col {
  padding: 0 0.5rem;
}
/*!**************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/wallet/DetailsChannel/InfoChannel/InfoChannel.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************/
.info-channel {
  max-width: 720px;
  margin: 0 auto;
}
.info-channel__wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 16px;
  background: #F7F7F7;
  border-radius: 12px;
  padding: 30px 20px;
  margin-bottom: -15px;
}
.info-channel__title {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 15px;
  color: #929298;
  margin-bottom: 6px;
}
.info-channel__subtitle {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  color: #070708;
}
/*!*****************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/wallet/DetailsChannel/DetailsChannel.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************/
.wallet__info-channel-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 39px 0 20px;
}
.wallet__info-channel-title-wrap {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
}
/*!*********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/wallet/PayPalForm/PayPalForm.scss ***!
  \*********************************************************************************************************************************************************************************************************************************/
.form-wrapper {
  display: flex;
  gap: 16px;
}

.form-inner {
  width: 100%;
  max-width: 360px;
}
.form-inner .amount {
  margin-bottom: 1rem;
  justify-content: center;
}
.form-inner .amount .input {
  width: auto;
  margin-bottom: 0;
}
.form-inner .amount > svg {
  flex: 0 0 auto;
}

.form-height {
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
  position: relative;
}
.form-height .Loading .Spinner {
  --spinner-size: 8.25rem;
}

.transfer-form .description {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-placeholders);
  font-size: 0.9375rem;
  gap: 0.125rem;
  margin-bottom: 0.5rem;
}
.transfer-form .description svg {
  margin-left: 0.25rem;
}
.transfer-form .description [stroke] {
  stroke: var(--color-placeholders);
}
.transfer-form .form-submit {
  margin-top: 40px;
}

.form-card-title {
  margin-bottom: 12px;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  line-height: 13px;
  color: #070708;
}

.form-sum-number {
  font-size: 48px;
  line-height: 56px;
  color: #070708;
  text-align: center;
}

.form-sum-balance {
  margin: 24px 0;
  font-size: 0.8125rem;
  line-height: 1.15;
  text-align: center;
  color: var(--color-text-secondary);
}
.form-sum-balance [stroke] {
  stroke: var(--color-text-secondary);
}

.form-ello-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.25rem;
  height: 3.875rem;
  padding: 0.25rem 0.375rem;
  border-radius: 0.5rem;
  background-color: #eeeeef;
  margin: 0 auto;
}

.center-error .input .input-notification--error {
  text-align: center;
}
/*!**************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/ThemeList.scss ***!
  \**************************************************************************************************************************************************************************************************************/
.chat-theme {
  position: relative;
}
.chat-theme__box {
  width: 101px;
  height: 136px;
  background-image: url(/theme.1814ce68f4afb74de5a7.svg);
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: border 0.2s;
}
.chat-theme__box:hover {
  border: 2px solid #0A49A5;
}
.chat-theme__theme-first {
  position: absolute;
  top: 16px;
  right: 6px;
}
.chat-theme__theme-second {
  position: absolute;
  top: 54px;
  left: 6px;
}
/*!****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/information/information.scss ***!
  \****************************************************************************************************************************************************************************************************************************/
.information-content {
  padding-top: 2rem;
}
.information-content dl {
  margin: 1.75rem 0;
}
.information-content dd {
  font-size: 0.9375rem;
  position: relative;
  margin: 0;
  padding: 0.625rem 1.25rem;
}
.information-content dd:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.02rem;
  background-color: var(--color-underline);
}

.information-item-middle [stroke] {
  stroke: var(--color-primary);
}
.information-item-middle .ListItem:not(:last-child) {
  border-bottom: 1px solid #f2f2f2;
}
.information-item-middle .ListItem-button {
  padding: 0.5625rem 1rem;
}
/*!*****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/wallet/BankForm/BankForm.scss ***!
  \*****************************************************************************************************************************************************************************************************************************/
.bank-transfer {
  padding-top: 2.625rem;
}
.bank-transfer__wrap {
  width: 100%;
  max-width: 720px;
  padding: 41px 10px 76px;
}
.bank-transfer .header {
  display: flex;
  align-items: center;
  gap: 1.5625rem;
}
.bank-transfer__label {
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  min-height: 1.2em;
}
.bank-transfer .input-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.bank-transfer .input-group > *,
.bank-transfer .input-group .select-dropdown {
  margin-bottom: 0;
}
.bank-transfer .with-description .bank-transfer__gray {
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.bank-transfer__gray {
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--color-text-secondary);
}
.bank-transfer__sum {
  font-weight: 600;
  font-size: 30px;
  line-height: 33px;
  color: var(--color-primary);
}
.bank-transfer__sum [stroke] {
  stroke: var(--color-primary);
}
.bank-transfer__max-width {
  margin: 0 auto;
  max-width: 360px;
}
.bank-transfer__inner-type {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.bank-transfer__recipient {
  width: 100%;
}
.bank-transfer__currency {
  width: 100%;
}
.bank-transfer__currency > p {
  margin-top: 8px;
}
.bank-transfer .request-wrapper {
  max-width: 22.5rem;
  margin: 0 auto;
}
.bank-transfer .request-wrapper .bank-transfer__sum {
  margin-bottom: 2.125rem;
}
.bank-transfer .request-block {
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: var(--color-background-secondary);
  border-radius: var(--border-radius-messages);
  font-size: 0.8175rem;
  line-height: 1.15;
}
.bank-transfer .request-block dd {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.bank-transfer .request-block dd span {
  color: var(--color-text-secondary);
}
.bank-transfer .request-block dd:last-child {
  margin-bottom: 0;
}
.bank-transfer .request-block b {
  text-align: right;
}
@media (max-width: 600px) {
  .bank-transfer .input-group {
    grid-template-columns: repeat(1, 1fr);
  }
}

.requisits-wrap {
  max-width: 360px;
  margin: 0 auto;
}
.requisits-wrap .Button {
  border-radius: 0.625rem;
}
.requisits-wrap .Button.link {
  font-size: 0.8125rem;
  text-transform: uppercase;
  color: var(--color-10);
  border: 1px solid var(--color-10);
  margin-bottom: 2.5rem;
}

.requisits-list .loading-wrap {
  height: 7rem;
}
.requisits-list .item {
  display: flex;
  padding: 0.5rem;
  gap: 0.25rem;
  border-radius: var(--border-radius-default);
  border: 1px solid var(--color-borders-checkbox);
  margin-bottom: 0.75rem;
}
.requisits-list .item .title {
  font-weight: 500;
  font-size: 0.8125rem;
  padding-left: 2.125rem;
}
.requisits-list .item .description {
  font-size: 0.8125rem;
  padding-left: 2.125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.requisits-list .item [stroke] {
  stroke: var(--color-text);
}
.requisits-list .Radio {
  margin-bottom: 0;
  padding-left: 2.125rem;
}
.requisits-list .Radio .Radio-main::before {
  left: 2px;
}
.requisits-list .Radio .Radio-main::after {
  left: 5px;
}
.requisits-list .Radio .label {
  font-weight: 500;
}
.requisits-list .left-content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  gap: 0.25rem;
  flex-grow: 1;
}

.form-submit-bottom {
  padding-bottom: 76px;
}
/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/wallet/Transfer/TopUp.scss ***!
  \**************************************************************************************************************************************************************************************************************************/
.top-up {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.top-up__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.top-up__box {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eeeeef;
  border-radius: 12px;
  width: 149px;
  height: 149px;
  transition: transform 0.25s;
}
@media only screen and (max-width: 480px) {
  .top-up__box {
    width: 90px;
    height: 90px;
  }
  .top-up__box svg {
    width: 70px;
  }
}
.top-up__box:not(.not-hover) {
  cursor: pointer;
}
.top-up__box:not(.not-hover):hover {
  transform: scale(1.1);
}
.top-up__box.not-hover [stroke] {
  stroke: #b1b1b5;
}
.top-up__title {
  margin-top: 8px;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 15px;
  color: #070708;
  text-align: center;
}
/*!*************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/wallet/TinyBarChart/TinyBarChart.scss ***!
  \*************************************************************************************************************************************************************************************************************************************/
.bar-chart {
  max-width: 720px;
  margin: 0 auto;
  padding: 39px 0;
}
.bar-chart__wrap {
  display: flex;
  flex-direction: column;
  height: 230px;
  width: 100%;
  background: #f6f6f6;
  border-radius: var(--border-radius-messages);
}
.bar-chart .chart-container {
  flex-grow: 1;
}
.bar-chart__header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
}
.bar-chart__total {
  font-size: 0.875rem;
  line-height: 18px;
  color: #929298;
}
.bar-chart__num {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.15px;
  color: #070708;
}
.bar-chart__wrap-btn {
  display: flex;
  gap: 28px;
}
.bar-chart__btn1 {
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #ff758f 27.08%, #ef4061 75.52%);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
}
.bar-chart__btn1:hover::before {
  content: "";
  display: block;
  position: absolute;
  width: 34px;
  height: 34px;
  top: -8px;
  left: -8px;
  border: 1px solid #cfcfd2;
  border-radius: 8px;
}
.bar-chart__btn2 {
  position: relative;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #44be2e 31.17%, #27ae60 75.98%);
  border-radius: 4px;
  cursor: pointer;
}
.bar-chart__btn2:hover::before {
  content: "";
  display: block;
  position: absolute;
  width: 34px;
  height: 34px;
  top: -8px;
  left: -8px;
  border: 1px solid #cfcfd2;
  border-radius: 8px;
}
.bar-chart__filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.bar-chart__title {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 24px;
  text-align: center;
  color: #070708;
}
.bar-chart .btn-group {
  width: 13.375rem;
}
.bar-chart .tab-nav .Button {
  flex-shrink: 1;
}
.bar-chart .tab-nav .Button.text.primary {
  border-color: var(--color-gray);
}
.bar-chart .tab-nav .Button.text.primary:not(.active-btn-filter) {
  background-color: var(--color-background-secondary);
}
.bar-chart .tab-nav .Button.text.primary:not(.disabled):not(:disabled):hover, .bar-chart .tab-nav .Button.text.primary:not(.disabled):not(:disabled):active {
  color: var(--color-text);
  background-color: transparent;
}
.bar-chart__btn-week {
  background: #f6f6f6;
  border-left: 1px solid #cfcfd2;
  border-top: 1px solid #cfcfd2;
  border-bottom: 1px solid #cfcfd2;
  border-radius: 100px 0px 0px 100px;
  padding: 11px 18px;
  transition: all 0.6s;
}
.bar-chart__btn-week:hover {
  background: #ffffff;
}

.recharts-color {
  background: linear-gradient(135deg, #ff758f 27.08%, #ef4061 75.52%);
  border-radius: 4px;
}

.active-btn::before {
  content: "";
  display: block;
  position: absolute;
  width: 34px;
  height: 34px;
  top: -8px;
  left: -8px;
  border: 1px solid #cfcfd2;
  border-radius: 8px;
}

.recharts-responsive-container {
  height: 166px;
}

.active-btn-filter {
  background-color: #fff;
}
/*!*************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/Settings.scss ***!
  \*************************************************************************************************************************************************************************************************************/
#settings_content > .Transition {
  height: 100%;
  overflow: hidden;
}

.settings-wrap {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.settings-main-header {
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
}

.setting-info {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.settings-more-menu .bubble {
  width: auto;
}
.settings-more-menu .bubble .MenuItem button {
  padding-left: 1rem !important;
  padding-right: 2rem !important;
}

.settings-container {
  width: 100%;
  min-height: 100%;
  margin: 0 auto;
  padding: 1rem;
}
@media (min-width: 1276px) {
  .settings-container {
    width: calc(100% - var(--right-column-width));
  }
}
.settings-container .infinite-scroll {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.settings-container .Menu .bubble {
  border-radius: var(--border-radius-default);
}
.settings-container.ai-space {
  padding-top: 1.5rem;
}

.settings-content {
  height: 100%;
  width: 100%;
  background-color: var(--color-background);
}
@supports (overflow-y: overlay) {
  .settings-content {
    overflow-y: overlay;
    overflow-x: hidden;
  }
}
.settings-content.no-border, .settings-content.two-fa, .settings-content.local-passcode, .settings-content.password-form {
  border-top: none;
}
.settings-content.password-form .input-group.error label::first-letter {
  text-transform: uppercase;
}
.settings-content.infinite-scroll {
  display: flex;
  flex-direction: column;
}
.settings-content.infinite-scroll > .custom-scroll {
  flex: 1 1 auto;
  height: auto;
}
.settings-content .chat-list {
  padding: 0.5rem 0;
}
.settings-content .chat-list .ListItem-button {
  padding-left: 1rem;
  padding-right: 1rem;
}
.settings-content .chat-list .ListItem-button > .icon-svg svg path {
  fill: var(--color-text-secondary);
}
.settings-content .subscriptions-list .DropdownMenu .icon-svg svg path {
  fill: var(--color-text-secondary);
}
.settings-content .settings-icon-locked {
  align-self: center;
  margin-right: 0.25rem !important;
  font-size: 1rem !important;
}
.settings-content #monkey {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.settings-content .AnimatedEmoji {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

.settings-layout .settings-content {
  transform: translate3d(0, 0, 0);
  transition: transform var(--layer-transition);
}
#Main.right-column-open .settings-layout .settings-content {
  width: calc(100% - var(--right-column-width));
  transform: translate3d(calc(var(--right-column-width) / -2), 0, 0);
}
#Main.right-column-open .settings-layout .settings-content .settings-container {
  width: 100%;
}

.settings-subscriptions .type-select {
  margin-bottom: 1rem;
}
.settings-subscriptions .type-select .Button {
  padding: 0.5rem 1.5rem 0.5rem 1rem;
}
.settings-subscriptions .type-select .Button .css-icon-down {
  top: 0.5rem;
  width: 0.6rem;
  height: 0.6rem;
  border-width: 2px;
}

.settings-content-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.5rem 1rem;
  text-align: center;
  background-color: var(--color-background);
  box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent);
  margin-bottom: 0.625rem;
}
.settings-content-header.no-border {
  margin-bottom: 0;
  box-shadow: none;
}
.settings-content-header .input-group {
  width: 100%;
}

.settings-content-icon {
  margin-bottom: 2.5rem;
}
.settings-content-icon.opacity-transition:not(.shown) {
  display: block;
  visibility: hidden;
}

.settings-main-menu-premium .PremiumIcon {
  margin-right: 2rem;
}

.settings-main-menu {
  background-color: var(--color-background-secondary);
  padding-bottom: 0.75rem;
}
.settings-main-menu .Button.full-width {
  margin: 0 auto;
  max-width: calc(100% - 2rem);
}

.ChatExtraActions {
  display: flex;
}

.settings-edit-profile {
  padding-bottom: 1rem;
}
.settings-edit-profile .input-group {
  display: flex;
  column-gap: 1rem;
}
.settings-edit-profile .form-submit button {
  max-width: 360px;
}

.settings-item {
  padding: 0.5rem 0.25rem 0.5rem 0.5rem;
  margin-bottom: 0.75rem;
  min-height: 3.75rem;
  background-color: var(--color-background);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(0, 0, 0, 0.05), 0px 2px 10px rgba(0, 0, 0, 0.04);
}
.settings-item .ListItem-button {
  padding: 0.5rem 0.75rem;
  gap: 1rem;
}
.settings-item .ListItem-button .Button.smaller.round {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  margin-right: 0;
}
.settings-item .switcher-wrap {
  padding-right: 0.5rem;
}
.settings-item.ListItem {
  min-height: 3.125rem;
  padding: 0 0 0 0.5rem;
}
.settings-item-header {
  display: flex;
  text-align: left;
  width: 100%;
  align-items: center;
  font-weight: normal;
  margin-bottom: 0.75rem;
  padding-left: 1.25rem;
  padding-right: 0.5rem;
}
.settings-item-header > :first-child {
  flex-grow: 1;
}
.settings-item-header .invite-link {
  overflow: hidden;
}
.settings-item-slider {
  margin-top: 2rem;
}
.settings-item-description {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-top: -0.5rem;
  margin-bottom: 0;
  line-height: 1.125rem;
}
.settings-content.two-fa .settings-item-description, .settings-content.password-form .settings-item-description, .settings-content.local-passcode .settings-item-description {
  font-size: 1rem;
}
.settings-edit-profile .settings-item-description {
  margin-bottom: 0;
  padding-bottom: 1.5rem;
}
.settings-item-description[dir=rtl] {
  text-align: right;
  unicode-bidi: plaintext;
}
.settings-item-description-larger {
  font-size: 1rem;
  line-height: 1.3125rem;
  color: var(--color-text-secondary);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.settings-item-description-larger[dir=rtl] {
  text-align: right;
}
.settings-item-middle {
  border-bottom: 1px solid var(--color-placeholders);
  padding-bottom: 2rem;
  margin-bottom: 1.5rem;
}
.settings-item-middle .ListItem::after,
.settings-item-middle .Radio::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.02rem;
  background-color: var(--color-underline);
}
.settings-item-middle .ListItem {
  padding: 0.125rem 0;
}
.settings-item-middle .ListItem::after {
  bottom: 0;
}
.settings-item-middle .ListItem .ListItem-button {
  padding: 0.782rem 1.25rem;
}
.settings-item-middle .Radio {
  margin: 0;
  padding-top: 0.8125rem;
  padding-bottom: 0.8125rem;
}
.settings-item p {
  margin: 0;
  font-size: 0.875rem;
}
.settings-item .title {
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.settings-item .title .icon-svg {
  padding: 0.25rem;
}
.settings-item h5 {
  margin-top: 0.875rem;
}
.settings-item .subtitle {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}
.settings-item .ListItem {
  padding: 0.125rem 0;
}
.settings-item .ListItem .ListItem-button {
  padding: 0.75rem;
  gap: 1.25rem;
  border-radius: 0.75rem;
}
.settings-item .ListItem + .ListItem::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0.75rem;
  width: 100%;
  height: 0.02rem;
  background-color: var(--color-underline);
}
.settings-item .ListItem:last-child {
  margin-bottom: 0;
}
.settings-item .ListItem .multiline-menu-item {
  white-space: initial;
  flex-grow: 1;
}
.settings-item .ListItem .multiline-menu-item.full-size {
  width: 100%;
  overflow: hidden;
}
.settings-item .ListItem .multiline-menu-item .date {
  float: right;
  font-size: 0.75rem;
  margin-left: 1rem;
  color: var(--color-text-secondary);
}
.settings-item .ListItem .multiline-menu-item .title,
.settings-item .ListItem .multiline-menu-item .subtitle {
  display: block;
  text-align: left;
}
.settings-item .ListItem .multiline-menu-item .title {
  line-height: 1.25rem;
}
.settings-item .ListItem .multiline-menu-item .subtitle {
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-text-secondary);
}
.settings-item .ListItem .multiline-menu-item .subtitle + .subtitle {
  margin-top: -0.25rem;
}
.settings-item .ListItem .multiline-menu-item .subtitle.black {
  color: var(--color-text);
}
.settings-item .ListItem .multiline-menu-item .subtitle.tight {
  line-height: 1.3125rem;
  margin-bottom: 0.1875rem;
}
.settings-item .ListItem.destructive .ListItem-button {
  color: var(--color-error);
}
.settings-item .ListItem.destructive .ListItem-button i {
  color: inherit;
}
.settings-item .ListItem.blocked-list-item {
  margin-bottom: 0.5rem;
}
.settings-item .ListItem.blocked-list-item .ListItem-button {
  align-items: center;
  text-align: left;
  padding: 0.5rem;
}
.settings-item .ListItem.blocked-list-item .Avatar {
  width: 3rem;
  height: 3rem;
  margin-right: 1rem;
}
.settings-item .ListItem.blocked-list-item .contact-name {
  font-size: 1rem;
  line-height: 1rem;
  margin-bottom: 0.25rem;
  font-weight: 500;
}
.settings-item .ListItem.blocked-list-item .contact-phone {
  font-size: 0.875rem;
  line-height: 1rem;
  color: var(--color-text-secondary);
}
.settings-item .ListItem[dir=rtl] .multiline-menu-item .title,
.settings-item .ListItem[dir=rtl] .multiline-menu-item .subtitle {
  text-align: right;
}
.settings-item .ListItem[dir=rtl] .multiline-menu-item .date {
  float: left;
  margin-left: 0;
  margin-right: 1rem;
}
.settings-item .RangeSlider {
  margin-bottom: 1.0625rem;
}
.settings-item .Checkbox,
.settings-item .radio-group {
  margin: 0 -1rem 0.5rem;
}
.settings-item .radio-group .Radio:last-child {
  margin-bottom: 0;
}
.settings-item .radio-group .Checkbox {
  margin-left: 0;
}
.settings-item .Radio + .Radio,
.settings-item .Checkbox + .Checkbox {
  margin-top: 2rem;
}
.settings-item__current-value {
  display: flex;
  align-items: center;
  margin-inline-start: auto;
  padding-inline-start: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
}
.settings-item__current-value .css-icon-right {
  margin-left: 1rem;
  transform: scale(0.9) rotate(-45deg);
  border-color: var(--color-text-secondary);
}

.ChatExtra .settings-item-header:not(:last-child) {
  margin-bottom: 0;
}
.ChatExtra .settings-item:not(:last-child) {
  box-shadow: none;
  position: relative;
}
.ChatExtra .settings-item:not(:last-child):after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 1.25rem;
  width: 100%;
  height: 0;
  box-shadow: 0 -0.015rem 0 0.015rem var(--color-borders);
}

.settings-scroll-wrapper {
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

.settings-fab-wrapper {
  height: calc(100% - var(--header-height));
  position: relative;
  overflow: hidden;
}
.settings-fab-wrapper .settings-content {
  height: 100%;
}
.settings-fab-wrapper .FloatingActionButton {
  right: 1.5rem;
}
.settings-fab-wrapper .FloatingActionButton[dir=rtl] {
  right: auto;
  left: 1.5rem;
}

.settings-quick-reaction .Radio-main .label {
  display: flex;
  align-items: center;
}
.settings-quick-reaction .ReactionStaticEmoji {
  margin-inline-end: 1rem;
  width: 1.5rem;
}

.SettingsDefaultReaction .current-default-reaction {
  margin-inline-end: 2rem;
}

.settings-privacy {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.settings-privacy dl > .settings-item-description {
  margin-top: 1rem;
  margin-bottom: 0;
  padding-left: 1.375rem;
}
.settings-privacy dd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0.75rem 1rem 0.75rem 1.25rem;
}
.settings-privacy dd::after {
  content: "";
  position: absolute;
  top: 0;
  left: 2.375rem;
  width: 100%;
  height: 0.02rem;
  background-color: var(--color-underline);
}
.settings-privacy dd span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.settings-privacy dd svg {
  vertical-align: middle;
}
.settings-privacy dd .Avatar {
  display: inline-flex;
  background-size: cover;
}
.settings-privacy .settings-item-description {
  margin-top: 0.75rem;
  margin-bottom: 0;
}
.settings-privacy .input-group {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.settings-privacy .input-group:last-child {
  margin-bottom: 0;
}
.settings-privacy h5 {
  color: var(--color-primary);
}
.settings-privacy .form-submit button {
  max-width: 360px;
}
.settings-privacy .items-wrapper {
  padding-bottom: 1rem;
}

.button-to-go-wrapper {
  display: flex;
  justify-content: center;
}
.button-to-go-wrapper .button-to-go {
  font-size: 0.8125rem;
  height: auto;
  padding: 0.4375rem 1.0625rem;
  border-radius: var(--border-radius-default-smaller);
}

.before-delete h5 {
  padding-left: 1.25rem;
}

.Loyalty-page {
  height: 100%;
}
@supports (overflow-y: scroll) {
  .Loyalty-page {
    overflow-y: scroll;
    overflow-x: hidden;
  }
}
.Loyalty-page .settings-container {
  min-height: auto;
}
.Loyalty-page > .btn-group {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--color-background);
}
.Loyalty-page .Button.text {
  border-radius: 0;
  height: 2.875rem;
  color: var(--color-text-secondary);
}
.Loyalty-page .Button.text.active {
  color: var(--color-text);
  border-bottom: 1px solid var(--color-text);
}
.Loyalty-page .Button[aria-label=Copy] [stroke] {
  stroke: #3a85f3;
}
.Loyalty-page .heading-banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding: 1.5rem 0.5rem 2.25rem;
  background-image: url(/bg-progress.4e77eba21996ca9f03cc.svg);
  background-size: cover;
}
.Loyalty-page .heading-banner.referrals {
  background-image: url(/bg-referrals.3c367fdda6578a7cffa0.svg);
}
.Loyalty-page .heading-banner h4 {
  margin-bottom: 0;
}
.Loyalty-page .heading-banner .amount [stroke] {
  stroke: white;
}

.referral-description {
  text-align: center;
  padding: 2.5rem 0;
  line-height: 1;
}
.referral-description .heading {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.referral-description .heading svg {
  margin-left: 0.5rem;
}
.referral-description .heading svg [fill] {
  fill: var(--color-text);
}
.referral-description p {
  color: var(--color-text-secondary);
}

@media (max-width: 600px) {
  .settings-edit-profile .input-group {
    flex-direction: column;
    margin-bottom: 0rem !important;
  }
  .settings-item {
    padding: 0.5rem;
  }
}
@media (max-width: 480px) {
  .settings-privacy .input-group {
    flex-wrap: wrap;
  }
}
/*!***************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/left/main/Chat.scss ***!
  \***************************************************************************************************************************************************************************************************/
.Chat {
  --background-color: var(--color-background);
  --thumbs-background: var(--background-color);
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  -webkit-touch-callout: none;
}
body.is-ios .Chat, body.is-macos .Chat {
  --color-text-meta: var(--color-text-meta-apple);
}
.Chat.static {
  position: static;
}
.Chat.animate-opacity {
  will-change: opacity;
  transition: opacity 0.2s ease-out;
}
.Chat.animate-transform {
  will-change: transform;
  transition: transform 0.2s ease-out;
}
.Chat:hover .Avatar.online::after, .Chat.ListItem.has-menu-open .Avatar.online::after {
  border-color: var(--color-chat-hover);
}
.Chat:hover .avatar-badge-wrapper, .Chat.ListItem.has-menu-open .avatar-badge-wrapper {
  --outline-color: var(--color-chat-hover);
}
.Chat:hover .ChatCallStatus, .Chat.ListItem.has-menu-open .ChatCallStatus {
  border-color: var(--color-chat-hover);
}
@media (min-width: 600px) {
  .Chat:not(.has-ripple):not(.is-static) .ListItem-button:active, body.animation-level-0 .Chat .ListItem-button:active {
    --background-color: var(--color-chat-hover) !important;
  }
}
.Chat:last-of-type {
  border-bottom: 0.5rem solid transparent;
}
@media (max-width: 600px) {
  .Chat.selected {
    --background-color: var(--color-chat-hover) !important;
  }
  .Chat.selected .Avatar.online::after {
    border-color: var(--color-chat-hover);
  }
  .Chat.selected .ChatCallStatus {
    border-color: var(--color-chat-hover);
  }
}
@media (min-width: 600px) {
  .Chat.selected:not(.forum), .Chat.selected:not(.forum):hover {
    --background-color: var(--color-chat-active) !important;
  }
  .Chat.selected:not(.forum) .title .custom-emoji, .Chat.selected:not(.forum):hover .title .custom-emoji {
    color: var(--color-white);
  }
  .Chat.selected:not(.forum) .title svg [stroke], .Chat.selected:not(.forum):hover .title svg [stroke] {
    stroke: white;
  }
  .Chat.selected:not(.forum) .title svg:not(.VerifiedIcon) [fill], .Chat.selected:not(.forum):hover .title svg:not(.VerifiedIcon) [fill] {
    fill: white;
  }
  .Chat.selected:not(.forum) .VerifiedIcon,
  .Chat.selected:not(.forum) .PremiumIcon, .Chat.selected:not(.forum):hover .VerifiedIcon,
  .Chat.selected:not(.forum):hover .PremiumIcon {
    --color-fill: white;
    --color-checkmark: var(--color-primary);
  }
  .Chat.selected:not(.forum) .ChatCallStatus, .Chat.selected:not(.forum):hover .ChatCallStatus {
    border-color: var(--color-chat-active) !important;
  }
  .Chat.selected:not(.forum) .ListItem-button, .Chat.selected:not(.forum):hover .ListItem-button {
    --background-color: var(--color-chat-active) !important;
    --color-text: var(--color-white);
    --color-text-meta-colored: var(--color-white);
    --color-text-meta: var(--color-white);
    --color-text-secondary: var(--color-white);
    --color-error: var(--color-white);
    --color-pinned: var(--color-white);
    --color-chat-username: var(--color-white);
  }
  .Chat.selected:not(.forum) .avatar-bot [fill="#fff"], .Chat.selected:not(.forum):hover .avatar-bot [fill="#fff"] {
    fill: var(--color-primary);
  }
  .Chat.selected:not(.forum) .avatar-bot [fill="#0A49A5"], .Chat.selected:not(.forum):hover .avatar-bot [fill="#0A49A5"] {
    fill: white;
  }
  .Chat.selected:not(.forum) .icon-muted, .Chat.selected:not(.forum):hover .icon-muted {
    color: var(--color-white) !important;
  }
  .Chat.selected:not(.forum) .general-forum-icon, .Chat.selected:not(.forum):hover .general-forum-icon {
    color: var(--color-white) !important;
  }
  .Chat.selected:not(.forum) .Badge:not(.pinned):not(.muted):not(.mention):not(.reaction), .Chat.selected:not(.forum):hover .Badge:not(.pinned):not(.muted):not(.mention):not(.reaction) {
    background: #5380c0;
  }
  .Chat.selected:not(.forum) .avatar-badge-wrapper .Badge:not(.pinned), .Chat.selected:not(.forum):hover .avatar-badge-wrapper .Badge:not(.pinned) {
    --outline-color: transparent;
  }
  .Chat.selected:not(.forum) .avatar-badge-wrapper .Badge:not(.pinned).muted, .Chat.selected:not(.forum):hover .avatar-badge-wrapper .Badge:not(.pinned).muted {
    background: var(--color-gray);
  }
  .Chat.chat-bot .Avatar {
    --color-user: white;
  }
  .Chat.chat-system.selected:not(.forum) .ListItem-button, .Chat.chat-system.selected:not(.forum):hover .ListItem-button {
    --background-color: #126df1 !important;
  }
  .Chat.chat-system .Avatar {
    --color-user: white;
  }
}
.Chat.selected-forum::before {
  transform: translateX(0) scaleY(1) !important;
}
@media (max-width: 600px) {
  .Chat .ListItem-button {
    border-radius: 0 !important;
  }
}
.Chat.forum {
  --color-chat-username: var(--color-text);
}
.Chat.forum::before {
  content: "";
  position: absolute;
  top: 0.625rem;
  bottom: 0.625rem;
  left: -0.4375rem;
  width: 0.3125rem;
  transform: translateX(-0.375rem) scaleY(0.5);
  transition: transform var(--layer-transition);
  background: var(--color-primary);
  z-index: 1;
  border-start-end-radius: var(--border-radius-default);
  border-end-end-radius: var(--border-radius-default);
}
body.animation-level-0 .Chat.forum::before {
  transition: none;
}
@media (max-width: 600px) {
  .Chat.forum::before {
    left: 0;
  }
}
.Chat.forum .ListItem-button {
  padding-top: 0.25rem;
  padding-bottom: 0.375rem;
}
.Chat.forum .title {
  line-height: 1.375rem;
}
.Chat .ripple-container {
  z-index: 2;
}
.Chat .status {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  z-index: 1;
}
.Chat .avatar-badge-wrapper {
  position: absolute;
  bottom: 0;
  right: 0.5rem;
  z-index: 2;
  --outline-color: var(--color-background);
}
.Chat .avatar-badge-wrapper .Badge {
  box-shadow: 0 0 0 2px var(--outline-color);
}
.Chat .avatar-badge-wrapper .Badge-transition {
  transition: opacity var(--layer-transition), transform var(--layer-transition);
}
body.animation-level-0 .Chat .avatar-badge-wrapper .Badge-transition {
  transition: none;
}
.Chat .info-row .icon-muted,
.Chat .info-row > .icon-svg {
  margin-left: 0.5rem;
}
body.is-ios .Chat .info-row .icon-muted,
body.is-ios .Chat .info-row > .icon-svg {
  margin-top: 0;
  margin-right: 0.5rem;
}
.Chat .info {
  transition: opacity 300ms ease, transform var(--layer-transition);
}
body.animation-level-0 .Chat .info {
  transition: none;
}
.Chat .info .title .custom-emoji {
  color: var(--color-primary);
}
.Chat .info .general-forum-icon {
  font-size: 1.25rem;
  color: var(--color-text-secondary);
}
body.is-ios .Chat .info .LastMessageMeta {
  font-size: 0.875rem;
  margin-right: 0;
}
.Chat .info .last-message,
.Chat .info .typing-status {
  padding-right: 0.25rem;
  flex-grow: 1;
  color: var(--color-text-secondary);
  unicode-bidi: plaintext;
}
.Chat .info .last-message[dir=ltr],
.Chat .info .typing-status[dir=ltr] {
  text-align: left;
}
.Chat .info .last-message .sender-name,
.Chat .info .typing-status .sender-name {
  color: var(--color-chat-username);
}
body.is-macos .Chat .info .last-message .sender-name, body.is-ios .Chat .info .last-message .sender-name,
body.is-macos .Chat .info .typing-status .sender-name,
body.is-ios .Chat .info .typing-status .sender-name {
  color: var(--color-text);
}
.Chat .info .last-message .draft,
.Chat .info .typing-status .draft {
  color: var(--color-error);
}
.Chat .info .last-message .draft::after {
  content: ": ";
}
.Chat .info .last-message .colon {
  margin-inline-end: 0.25rem;
}
.Chat .info .last-message .media-preview-spoiler {
  filter: blur(1px);
}
.Chat .info .last-message .media-preview--image {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: cover;
  border-radius: 0.125rem;
  vertical-align: -0.25rem;
  margin-inline-end: 0.25rem;
  margin-inline-start: 0.125rem;
}
body.is-ios .Chat .info .last-message .media-preview--image {
  width: 1.125rem;
  height: 1.125rem;
  vertical-align: -0.1875rem;
}
.Chat .info .last-message .media-preview--image.round {
  border-radius: 0.625rem;
}
.Chat .info .last-message .emoji-small {
  width: 1rem;
  height: 1rem;
  vertical-align: -0.125rem;
}
.Chat .info .last-message .icon-play {
  position: relative;
  display: inline-block;
  font-size: 0.75rem;
  color: #fff;
  margin-inline-start: -1.25rem;
  margin-inline-end: 0.5rem;
  bottom: 0.0625rem;
}
body.is-ios .Chat .info .last-message .icon-play {
  margin-inline-start: -1.125rem;
  bottom: 0;
}
.Chat[dir=rtl] .info .LastMessageMeta {
  margin-left: 0;
  margin-right: auto;
}
.Chat[dir=rtl] .info .title,
.Chat[dir=rtl] .info .subtitle {
  padding-left: 0.125rem;
  padding-right: 0;
}
.Chat[dir=rtl] .info .icon-muted {
  margin-left: 0;
  margin-right: 0.25rem;
}
.Chat[dir=rtl] .info .last-message,
.Chat[dir=rtl] .info .typing-status {
  padding-left: 0.5rem;
  padding-right: 0;
  text-align: right;
  unicode-bidi: plaintext;
}

.privat .fullName {
  color: var(--color-2);
}
.privat [stroke] {
  stroke: var(--color-2);
}

.privat-channel .fullName {
  color: var(--color-primary);
}
/*!********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/settings/aiSpace/AiSpace.scss ***!
  \********************************************************************************************************************************************************************************************************************/
.ai-space {
  --color-chat-hover: var(--color-background-secondary);
}
.ai-space h3 {
  font-size: 1.5rem;
}
.ai-space .ListItem .ListItem-button {
  padding: 0.75rem 0;
  gap: 1rem;
  transition: var(--layer-transition);
}
@media (min-width: 768px) {
  .ai-space .ListItem .ListItem-button:hover {
    padding: 0.75rem 1rem;
  }
}
.ai-space .ListItem .fullName {
  font-size: 1.125rem;
}
.ai-space .ListItem .info {
  flex-grow: 1;
  overflow: hidden;
}
.ai-space .ListItem .open-chat {
  padding: 0.4375rem 1.125rem;
  border-radius: 0.5rem;
  background-color: var(--color-message-reaction);
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
}
.ai-space .SearchInput {
  border-radius: 0.875rem;
}
.ai-space .SearchInput .icon-container-left {
  top: 0.75rem;
}
.ai-space .SearchInput input {
  height: 2.9375rem;
}
.ai-space .SearchInput > .icon {
  top: 0.75rem;
}
.ai-space .heading {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ai-space .heading p {
  font-size: 0.875rem;
  line-height: 1.3;
}
.ai-space .title-icon {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 1.5rem;
  margin-bottom: 0.75rem;
}
.ai-space .item-middle {
  border-radius: 0.625rem;
  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.05), 0px 2px 10px 0px rgba(0, 0, 0, 0.04);
  background-color: var(--color-background);
  padding: 0.75rem 0 1rem;
  margin-bottom: 0.5rem;
}
.ai-space .filter-group {
  padding: 1.5rem 0;
  gap: 0.75rem;
  transition: var(--layer-transition);
  position: relative;
  flex-wrap: wrap;
}
.ai-space .filter-group.show-all {
  flex-wrap: wrap;
}
.ai-space .filter-group .Button {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
  padding: 0.75rem 1rem;
  gap: 0.75rem;
}
.ai-space .filter-group .Button.without-icon {
  padding: 0.75rem 1.5rem;
}
.ai-space .filter-group .icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
}

.ai-banner {
  position: relative;
  border-radius: 16px;
  background: linear-gradient(135deg, #1ecbff 0%, #004aa9 22.16%, #683af3 85.39%, #bb3af3 100%);
  color: white;
  line-height: 1.1875;
  padding: 1rem;
  margin-bottom: 1.5rem;
}
.ai-banner:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(/bg-stars.6eb1bdb34d433e4220c0.png);
  background-position: center;
}
.ai-banner h3 {
  text-indent: 0.5rem;
}
.ai-banner .description,
.ai-banner dd {
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.12);
}
.ai-banner .description {
  margin-bottom: 0.75rem;
}
.ai-banner dl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.ai-banner dd {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  gap: 0.5rem;
  margin-bottom: 0;
}
.ai-banner .Button.primary {
  background-color: white;
  color: var(--color-text);
  text-transform: uppercase;
  line-height: 2.9375rem;
}
.ai-banner .Button.primary:not(.disabled):not(:disabled):hover {
  color: white;
}
.ai-banner .Button.full-width {
  max-width: 100%;
}
.ai-banner .Avatar {
  background-size: cover;
  background-image: url(/gradienta-LeG68PrXA6Y-unsplash.c43e5bd2d98fbdf612d8.jpg);
}
.ai-banner .Avatar.ai-image {
  background-image: url(/image-bg.6065befde6ca526f3d6e.jpg);
}

.bots-list .ListItem.chat-item-clickable .ListItem-button {
  padding: 0.5rem;
}
/*!*********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/left/newChat/NewChat.scss ***!
  \*********************************************************************************************************************************************************************************************************/
#NewChat .NewChat-inner {
  height: calc(100% - var(--header-height));
  display: flex;
  flex-direction: column;
}

.NewChat {
  height: 100%;
  overflow: hidden;
  position: relative;
}
.NewChat-inner {
  height: 100%;
  overflow-x: hidden;
}
.NewChat-inner.step-1 {
  padding: 0 0 15px 8px;
}
.NewChat-inner.step-1 .Button.full-width {
  max-width: calc(100% - 4.5rem);
}
.NewChat-inner.step-2 {
  padding: 0 1.25rem 1rem;
  display: flex;
  flex-direction: column;
}
.NewChat-inner.step-2 .error {
  color: var(--color-error);
}
.NewChat-inner.step-2 .note {
  margin-top: -0.5625rem;
  color: var(--color-text-secondary);
}
.NewChat-inner.step-2 .chat-members-heading {
  color: var(--color-primary);
  font-size: 0.9375rem;
  margin: 1rem 0.25rem 0.375rem;
}
.NewChat-inner.step-2 .chat-members-list {
  margin: 0 -1.25rem;
  padding: 0 1rem 1rem;
  overflow-x: hidden;
  flex-grow: 1;
}
.NewChat p {
  white-space: pre-line;
}
.NewChat .left-header {
  box-shadow: none;
}
.NewChat .AvatarEditable {
  margin-bottom: 0.5rem;
}
.NewChat .AvatarEditable .Button {
  display: none;
}
.NewChat .AvatarEditable label {
  margin-top: 0;
  background: linear-gradient(135deg, #6ca5f9 27.08%, #3a85f3 75.52%);
}
.NewChat .link-block {
  display: flex;
  align-items: center;
  padding: 0.625rem 0;
}
.NewChat .link-block .input {
  margin: 0;
}
.NewChat .subscription {
  padding-top: 0.5rem;
  padding-bottom: 1rem;
}
.NewChat .subscription form {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.NewChat .subscription form .center-block {
  justify-content: flex-start;
}
.NewChat .center-block {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.NewChat .fees {
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin: 1rem auto;
  max-width: 320px;
  flex-grow: 1;
}
.NewChat .fees [stroke] {
  stroke: var(--color-primary);
}
.NewChat .fees .link {
  text-decoration: underline;
  color: inherit;
}
.NewChat .fees h4 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.channel-type-description {
  padding: 1rem 1.125rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
}
.channel-type-description .centered-block {
  flex-grow: 1;
}
.channel-type-description .Button {
  margin-bottom: 4rem;
}
.channel-type-description h2 {
  font-size: 1.5rem;
  font-weight: 600;
}

.channel-selects .select-dropdown {
  margin-bottom: 0.625rem;
}
.channel-selects .CountryCodeInput .bubble,
.channel-selects .select-dropdown .bubble {
  max-height: 14.5rem;
}

.link-block .input-wrapper {
  margin-bottom: 0.5rem;
}

.input .input-wrapper .padding-label {
  padding-left: 20px;
}

.icon-position {
  position: absolute;
  bottom: 33px;
  left: 9px;
}

.padding-input .input .input-wrapper input {
  padding-left: 31px;
}
/*!***********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/ChatForumLastMessage.module.scss ***!
  \***********************************************************************************************************************************************************************************************************************/
.ChatForumLastMessage-module__root {
  --radius: 0.75rem;
  --first-column-background-color: var(--color-background-selected);
  display: flex;
  min-width: 0;
  overflow: hidden;
  margin-inline-end: 0.5rem;
  flex-grow: 1;
  flex-direction: column;
  align-items: flex-start;
  z-index: 3;
  transition: 0.25s ease-out background-color;
  pointer-events: none;
}
@media (hover: hover) {
  .ListItem-button:hover .ChatForumLastMessage-module__root {
    --first-column-background-color: var(--color-forum-unread-topic-hover);
  }
  .ChatForumLastMessage-module__root:hover {
    --first-column-background-color: var(--color-forum-hover-unread-topic-hover) !important;
  }
}
@media not (hover: hover) {
  .ListItem-button:active .ChatForumLastMessage-module__root {
    --first-column-background-color: var(--color-forum-unread-topic-hover);
  }
  .ChatForumLastMessage-module__root:active {
    --first-column-background-color: var(--color-forum-hover-unread-topic-hover) !important;
  }
}

.ChatForumLastMessage-module__title-row {
  display: flex;
  max-width: 100%;
}

.ChatForumLastMessage-module__loading {
  color: var(--color-text-secondary);
  line-height: 1.25rem;
}

.ChatForumLastMessage-module__other-column, .ChatForumLastMessage-module__main-column {
  display: flex;
  align-items: center;
  font-size: 0.9375rem;
  line-height: 1.25rem;
  color: var(--color-text-secondary);
}

.ChatForumLastMessage-module__unread {
  color: var(--color-text);
}
.ChatForumLastMessage-module__unread.ChatForumLastMessage-module__main-column, .ChatForumLastMessage-module__unread.ChatForumLastMessage-module__last-message {
  padding: 0 0.3125rem;
}
.ChatForumLastMessage-module__unread.ChatForumLastMessage-module__main-column, .ChatForumLastMessage-module__unread.ChatForumLastMessage-module__last-message, .ChatForumLastMessage-module__unread .ChatForumLastMessage-module__after-wrapper {
  background: var(--first-column-background-color);
}

.ChatForumLastMessage-module__other-column {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  display: inline;
}

.ChatForumLastMessage-module__main-column {
  border-start-start-radius: var(--radius);
  border-start-end-radius: var(--radius);
  border-end-end-radius: var(--radius);
  max-width: 100%;
  position: relative;
  pointer-events: initial;
}
.ChatForumLastMessage-module__main-column .ChatForumLastMessage-module__after-wrapper {
  width: var(--radius);
  height: var(--radius);
  bottom: 0;
  position: absolute;
  inset-inline-end: calc(var(--radius) * -1);
}
.ChatForumLastMessage-module__main-column .ChatForumLastMessage-module__after {
  border-end-start-radius: var(--radius);
  background: var(--background-color);
  width: 100%;
  height: 100%;
}

.ChatForumLastMessage-module__title {
  margin-left: 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ChatForumLastMessage-module__other-column-title {
  font-size: 0.9375rem;
  margin-left: 0.25rem;
}

.ChatForumLastMessage-module__other-columns {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.25rem;
  height: 1.25rem;
}

.ChatForumLastMessage-module__ellipsis {
  margin-left: auto;
}

.ChatForumLastMessage-module__last-message {
  border-end-start-radius: var(--radius);
  border-end-end-radius: var(--radius);
  max-width: 100%;
  pointer-events: initial;
  position: relative;
}
.ChatForumLastMessage-module__last-message .ChatForumLastMessage-module__after-wrapper {
  width: var(--radius);
  height: var(--radius);
  top: 0;
  position: absolute;
  inset-inline-end: calc(var(--radius) * -1);
}
.ChatForumLastMessage-module__last-message .ChatForumLastMessage-module__after {
  border-start-start-radius: var(--radius);
  background: var(--background-color);
  width: 100%;
  height: 100%;
}
.ChatForumLastMessage-module__last-message .last-message {
  line-height: 1.25rem !important;
}

.ChatForumLastMessage-module__reverse-corner .ChatForumLastMessage-module__main-column {
  border-end-end-radius: 0;
}
.ChatForumLastMessage-module__reverse-corner .ChatForumLastMessage-module__last-message {
  border-start-end-radius: var(--radius);
}

.ChatForumLastMessage-module__overwritten-width .ChatForumLastMessage-module__last-message, .ChatForumLastMessage-module__overwritten-width .ChatForumLastMessage-module__main-column {
  min-width: var(--overwritten-width);
}
.ChatForumLastMessage-module__overwritten-width .ChatForumLastMessage-module__last-message {
  border-start-end-radius: 0;
}
.ChatForumLastMessage-module__overwritten-width .ChatForumLastMessage-module__main-column {
  border-end-end-radius: 0;
}
/*!*****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/MessageOutgoingStatus.scss ***!
  \*****************************************************************************************************************************************************************************************************************/
.MessageOutgoingStatus {
  width: 1.1875rem;
  height: 1.3125rem;
  line-height: 1;
  font-size: 1.1875rem;
}
.MessageOutgoingStatus i svg path {
  stroke: var(--accent-color);
}
.MessageOutgoingStatus .icon-message-succeeded {
  padding-left: 0.125rem;
}
.MessageOutgoingStatus .Transition {
  width: 100%;
  height: 100%;
}
.MessageOutgoingStatus .MessageOutgoingStatus--failed::before {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;
  border-radius: 50%;
  background: white;
}
.MessageOutgoingStatus .icon-message-failed {
  background: none;
  color: var(--color-error);
  z-index: 1;
  position: relative;
}
/*!***********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/LastMessageMeta.scss ***!
  \***********************************************************************************************************************************************************************************************************/
.LastMessageMeta {
  margin-right: 0.1875rem;
  flex-shrink: 0;
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
}
.LastMessageMeta .MessageOutgoingStatus {
  color: var(--color-text-meta-colored);
  margin-right: 0.125rem;
  font-size: 1.25rem;
}
body.is-ios .LastMessageMeta .MessageOutgoingStatus {
  margin-bottom: -0.125rem;
}
.LastMessageMeta .MessageOutgoingStatus i svg path {
  stroke: var(--color-text-meta-colored);
}
.LastMessageMeta .time {
  color: var(--color-text-secondary);
}
/*!*************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/left/main/ChatCallStatus.scss ***!
  \*************************************************************************************************************************************************************************************************************/
@keyframes bar-animation-transform-1 {
  0% {
    transform: scaleY(0.33);
  }
  12.5% {
    transform: scaleY(1.66);
  }
  25% {
    transform: scaleY(0.33);
  }
  37.5% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.33);
  }
  62.5% {
    transform: scaleY(1.66);
  }
  75% {
    transform: scaleY(0.33);
  }
  87.5% {
    transform: scaleY(1.66);
  }
  100% {
    transform: scaleY(0.33);
  }
}
@keyframes bar-animation-transform-2 {
  0% {
    transform: scaleY(1);
  }
  12.5% {
    transform: scaleY(0.33);
  }
  25% {
    transform: scaleY(1.66);
  }
  37.5% {
    transform: scaleY(0.33);
  }
  50% {
    transform: scaleY(1);
  }
  62.5% {
    transform: scaleY(0.33);
  }
  75% {
    transform: scaleY(1.66);
  }
  87.5% {
    transform: scaleY(0.33);
  }
  100% {
    transform: scaleY(1);
  }
}
.ChatCallStatus {
  position: absolute;
  right: 6px;
  bottom: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #0ac630;
  border: 2px solid var(--color-background);
  overflow: hidden;
  z-index: 1;
}
.ChatCallStatus .indicator {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.ChatCallStatus .indicator > div {
  width: 2px;
  height: 6px;
  background: var(--color-background);
  border-radius: 1px;
  margin: 1px;
  will-change: transform;
  transform: translateZ(0);
}
.ChatCallStatus .indicator > div:nth-child(odd) {
  transform: scaleY(0.8);
}
.ChatCallStatus .indicator > div:nth-child(even) {
  transform: scaleY(1.33);
}
.ChatCallStatus.selected {
  background-color: var(--color-white);
  border-color: var(--color-chat-active);
}
.ChatCallStatus.selected .indicator div {
  background-color: var(--color-chat-active);
}
.ChatCallStatus.active .indicator div:nth-child(odd) {
  animation: bar-animation-transform-2 3.2s normal infinite;
}
.ChatCallStatus.active .indicator div:nth-child(even) {
  animation: bar-animation-transform-1 3.2s normal infinite;
}
/*!******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/AnimatedCounter.module.scss ***!
  \******************************************************************************************************************************************************************************************************************/
.AnimatedCounter-module__root {
  display: inline-flex;
  white-space: pre;
}
.AnimatedCounter-module__root[dir=rtl] {
  flex-direction: row-reverse;
}

.AnimatedCounter-module__character-container {
  position: relative;
}

@keyframes AnimatedCounter-module__character-disappear {
  from {
    transform: none;
    opacity: 1;
  }
  to {
    transform: perspective(10px) translateY(10px) rotateX(-30deg);
    opacity: 0;
  }
}
@keyframes AnimatedCounter-module__character-appear {
  from {
    transform: perspective(10px) translateY(-10px) rotateX(30deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.AnimatedCounter-module__character {
  white-space: pre;
  visibility: hidden;
}

.AnimatedCounter-module__character-old {
  position: absolute;
  top: 0;
  left: 0;
  animation: 200ms ease-out AnimatedCounter-module__character-disappear forwards;
}

.AnimatedCounter-module__character-new {
  position: absolute;
  top: 0;
  left: 0;
  animation: 200ms ease-out AnimatedCounter-module__character-appear forwards;
}
/*!****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/left/main/Badge.scss ***!
  \****************************************************************************************************************************************************************************************************/
.Badge-transition {
  transform: scale(0);
}

.Badge-wrapper {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.Badge-wrapper svg path {
  stroke: var(--color-placeholders);
}
.Badge-wrapper .Badge svg path {
  stroke: var(--color-white);
}

.Badge {
  min-width: 1.5rem;
  height: 1.4375rem;
  background: var(--color-placeholders);
  border-radius: 0.625rem;
  padding: 0 0.47168rem;
  color: white;
  font-size: 0.8125rem;
  line-height: 1.4375rem;
  font-weight: 500;
  text-align: center;
  flex-shrink: 0;
}
body.is-macos .Badge {
  line-height: 1.5rem;
}
body.is-ios .Badge:not(.unopened) {
  line-height: 1.375rem;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 0.375rem;
}
.Badge.mention {
  background: var(--color-text-green);
}
.Badge.unread:not(.muted), .Badge.unopened:not(.muted) {
  background: var(--color-primary);
  color: var(--color-white);
}
.Badge.unopened {
  width: 0.5rem;
  height: 0.5rem;
  min-width: auto;
  min-height: auto;
  padding: 0;
  align-self: center;
}
.Badge.pinned {
  color: var(--color-pinned);
  background: transparent;
  width: 1.5rem;
  padding: 0;
}
.Badge.pinned i {
  font-size: 1.5rem;
}
.Badge.reaction:not(.muted) {
  background: #ed504f;
}
.Badge.mention, .Badge.reaction {
  min-width: 1.375rem;
  width: 1.375rem;
  height: 1.375rem;
  padding: 0.2rem 0;
}
.Badge.mention i, .Badge.reaction i {
  vertical-align: super;
}
body.is-ios .Badge.mention, body.is-ios .Badge.reaction {
  width: 1.375rem;
  padding: 0.25rem;
}
body.is-ios .Badge.mention i, body.is-ios .Badge.reaction i {
  font-size: 0.875rem;
}
/*!*************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/left/main/Archive.module.scss ***!
  \*************************************************************************************************************************************************************************************************************/
.Archive-module__root {
  --background-color: var(--color-background);
}

.Archive-module__minimized {
  background-color: var(--color-background-secondary);
  margin: -0.5rem -0.5rem 0 -0.5rem !important;
}
.Archive-module__minimized:hover {
  opacity: 0.85;
}
.Archive-module__minimized .Archive-module__button {
  border-radius: 0;
  padding: 0.375rem !important;
  background-color: transparent;
}
body.is-ios .Archive-module__minimized .Archive-module__button, body.is-android .Archive-module__minimized .Archive-module__button {
  padding-bottom: 0.3125rem !important;
}
.Archive-module__minimized .Archive-module__title {
  justify-content: center !important;
  color: var(--color-text-secondary);
}
.Archive-module__minimized .Archive-module__unread-count {
  position: absolute;
  right: 0.75rem;
  background-color: transparent;
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
}
.Archive-module__minimized .Archive-module__info {
  transform: none !important;
}
.Archive-module__minimized .Archive-module__name {
  line-height: 1.25rem !important;
  font-size: 0.8125rem !important;
}
.Archive-module__minimized::after {
  display: none;
}

.Archive-module__info {
  transition: opacity 0.3s ease, transform var(--layer-transition);
}
body.animation-level-0 .Archive-module__info {
  transition: none;
}

.Archive-module__icon {
  margin-inline-end: 0.5rem;
}

.Archive-module__name {
  display: flex;
  align-items: center;
}

.Archive-module__avatarWrapper {
  flex-shrink: 0;
  background-color: var(--background-color);
  z-index: 1;
}

.Archive-module__avatar {
  font-size: 1.625rem;
  background: linear-gradient(135deg, #b5b5b5 31.17%, #848484 75.98%) !important;
}
.Archive-module__avatar svg path {
  stroke: var(--background-color);
}

.Archive-module__title {
  flex-grow: 1;
}

.Archive-module__chatsPreview {
  color: var(--color-text-secondary);
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Archive-module__unread {
  color: var(--color-text);
}
/*!***********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/left/main/Topic.module.scss ***!
  \***********************************************************************************************************************************************************************************************************/
.Topic-module__root .ListItem-button {
  padding: 0.5rem 0.75rem !important;
}
.Topic-module__root .ListItem-button .last-message,
.Topic-module__root .ListItem-button .status,
.Topic-module__root .ListItem-button .typing-status {
  line-height: 1.5rem !important;
}
.Topic-module__root .ListItem-button .LastMessageMeta {
  padding-top: 0;
  margin-top: -0.5rem;
  margin-right: 0 !important;
}
.Topic-module__root .fullName .emoji-small {
  width: 1rem;
  height: 1rem;
}
body.is-ios .Topic-module__root::after {
  left: 0.75rem !important;
}
.Topic-module__root::after {
  left: 0.75rem !important;
}

.Topic-module__closed-icon {
  color: var(--color-pinned);
  font-size: 0.75rem;
  margin-top: -0.5rem;
  margin-right: 0.25rem;
}

.Topic-module__topic-icon {
  margin-inline-end: 0.25rem;
}
/*!***************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/HeaderMenuContainer.scss ***!
  \***************************************************************************************************************************************************************************************************************/
.HeaderMenuContainer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: var(--z-header-menu);
}
.HeaderMenuContainer .Menu {
  position: absolute;
  font-size: 1rem;
}
.HeaderMenuContainer .Menu .backdrop {
  z-index: var(--z-header-menu-backdrop);
}
.HeaderMenuContainer .Menu .bubble {
  z-index: var(--z-header-menu);
  --offset-y: calc(100% + 0.5rem);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
/*!*****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/calls/group/GroupCallTopPane.scss ***!
  \*****************************************************************************************************************************************************************************************************************/
.GroupCallTopPane {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 2.875rem;
  overflow: hidden;
  box-shadow: 0 2px 2px var(--color-light-shadow);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0.375rem 0.5rem 0.375rem 0.75rem;
  background: var(--color-background);
  z-index: -1;
  cursor: pointer;
}
.GroupCallTopPane::before {
  content: "";
  display: block;
  position: absolute;
  top: -0.1875rem;
  left: 0;
  right: 0;
  height: 0.125rem;
  box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow);
}
.GroupCallTopPane.is-hidden {
  display: none;
}
@media (max-width: 600px) {
  .GroupCallTopPane.has-pinned-offset {
    top: calc(100% + 2.875rem);
  }
}
.GroupCallTopPane .info {
  display: flex;
  flex-direction: column;
}
.GroupCallTopPane .info .title {
  font-size: 0.875rem;
  color: var(--color-text);
}
.GroupCallTopPane .info .participants {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}
.GroupCallTopPane .avatars {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.GroupCallTopPane .avatars .Avatar {
  margin: 0 0 0 -0.75rem;
}
.GroupCallTopPane .avatars .Avatar:first-child {
  width: 2rem;
  height: 2rem;
}
.GroupCallTopPane .avatars .Avatar:not(:first-child) {
  width: 2.25rem;
  height: 2.25rem;
  border: 0.125rem solid var(--color-background);
}
.GroupCallTopPane .join {
  height: 1.5rem;
  border-radius: 1.5rem;
  font-weight: 500;
  padding: 1rem 1rem;
  width: auto;
}

@media (min-width: 1440px) {
  #Main.right-column-open .MiddleHeader .GroupCallTopPane {
    width: calc(100% - var(--right-column-width));
  }
}
/*!****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/left/main/EmptyForum.module.scss ***!
  \****************************************************************************************************************************************************************************************************************/
.EmptyForum-module__root {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 1rem;
}
.EmptyForum-module__root .Button.pill {
  max-width: 100%;
  margin-top: 0.625rem;
  font-weight: 500;
  padding-inline-start: 0.75rem;
  unicode-bidi: plaintext;
  justify-content: start;
}
.EmptyForum-module__root .Button.pill .EmptyForum-module__button-text {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.EmptyForum-module__root .Button.pill i {
  margin-inline-end: 0.625rem;
  font-size: 1.5rem;
}

.EmptyForum-module__sticker {
  height: 7rem;
  margin-bottom: 1.875rem;
}

.EmptyForum-module__title {
  font-size: 1.25rem;
  margin-bottom: 0.125rem;
  word-break: break-word;
  text-align: center;
  max-width: 100%;
}

.EmptyForum-module__description {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  text-align: center;
}
body.EmptyForum-module__is-ios .EmptyForum-module__description, body.EmptyForum-module__is-macos .EmptyForum-module__description {
  color: var(--color-text-secondary-apple);
}
/*!****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/left/main/ForumPanel.module.scss ***!
  \****************************************************************************************************************************************************************************************************************/
.ForumPanel-module__root {
  position: absolute;
  top: 0;
  right: 0;
  left: 4.75rem;
  z-index: var(--z-forum-panel);
  height: 100%;
  background-color: var(--color-background);
  border-left: 1px solid var(--color-borders);
  display: flex;
  flex-direction: column;
  transition: transform var(--layer-transition);
  transform: translate3d(100%, 0, 0);
}
@media (max-width: 600px) {
  .ForumPanel-module__root {
    left: 4.3125rem;
  }
}
.ForumPanel-module__root.ForumPanel-module__rtl {
  left: 0;
  right: 4.75rem;
  transform: translateX(-100%);
  border-left: none;
  border-right: 1px solid var(--color-borders);
}
.ForumPanel-module__root.ForumPanel-module__no-animation {
  transition: none;
}
.ForumPanel-module__root .chat-list {
  position: relative;
  overflow-x: hidden;
  padding-top: 0 !important;
}
.ForumPanel-module__root .HeaderActions {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.ForumPanel-module__group-call {
  position: static !important;
}

.ForumPanel-module__notch {
  width: 100%;
  height: 0;
  border-bottom: 0.0625rem solid var(--color-borders);
  transition: 0.1s ease opacity;
  opacity: 0;
}

.ForumPanel-module__scrolled .ForumPanel-module__notch {
  opacity: 1;
}

.ForumPanel-module__scroll-top-handler {
  position: absolute;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 1px;
}

.ForumPanel-module__info {
  margin-left: 0.4375rem;
  min-width: 0;
  width: 100%;
  cursor: pointer;
}
.ForumPanel-module__info .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  overflow: hidden;
}
.ForumPanel-module__info .fullName {
  line-height: 1.375rem;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: plaintext;
  font-size: 1rem !important;
  font-weight: 500 !important;
  margin: 0 !important;
}
.ForumPanel-module__info .status {
  font-size: 0.875rem;
  line-height: 1.125rem;
  margin: 0;
  color: var(--color-text-secondary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}
/*!*******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/left/ArchivedChats.scss ***!
  \*******************************************************************************************************************************************************************************************************/
.ArchivedChats {
  height: 100%;
  overflow: hidden;
}
.ArchivedChats .chat-list {
  height: calc(100% - var(--header-height));
}
.ArchivedChats .DropdownMenuFiller {
  width: 2.5rem;
  height: 2.5rem;
}
.ArchivedChats .Button.rtl {
  transition: var(--slide-transition) transform;
  position: absolute;
  z-index: 2;
}
.ArchivedChats .Button.rtl.right-aligned {
  transform: translateX(calc(clamp(var(--left-column-min-width), var(--left-column-width), var(--left-column-max-width)) - 4.375rem));
}
.ArchivedChats .Button.rtl.disable-transition {
  transition: none;
}
.ArchivedChats .archived-chats-more-menu {
  margin-left: auto !important;
}
/*!****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/message/ReactionSelectorReaction.scss ***!
  \****************************************************************************************************************************************************************************************************************************/
.ReactionSelectorReaction {
  position: relative;
  min-width: 1.5rem;
  min-height: 1.5rem;
}
.ReactionSelectorReaction__static {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(/All.85acbede5d2ff67e7877.png);
  background-repeat: no-repeat;
  background-size: auto 100%;
}
.ReactionSelectorReaction .AnimatedSticker {
  position: absolute;
  top: 0;
  left: 0;
}
.ReactionSelectorReaction--compact {
  min-width: 1.375rem;
  min-height: 1.375rem;
}
.ReactionSelectorReaction--chosen::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  border-radius: 50%;
  background-color: var(--color-background-compact-menu-hover);
}
/*!********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/message/ReactionSelector.scss ***!
  \********************************************************************************************************************************************************************************************************************/
.ReactionSelector {
  position: absolute;
  background: var(--color-background);
  min-width: 3rem;
  z-index: 100;
  border-radius: 0.75rem;
  box-shadow: 0px 1.58333px 3.16667px rgba(0, 0, 0, 0.14), 0px 0.316667px 5.7px rgba(0, 0, 0, 0.12), 0px 0.95px 1.58333px var(--color-default-shadow);
  left: 0;
  top: -2.75rem;
}
.ReactionSelector.with-button {
  width: calc(100% + 1.5rem);
}
.ReactionSelector__bubble-big {
  border: 0.5rem solid var(--color-background);
  position: absolute;
  display: block;
  content: "";
  right: 1.5rem;
  bottom: -0.5rem;
  width: 1rem;
  height: 1rem;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0 0 50% 50%;
  z-index: -1;
}
.ReactionSelector__show-more {
  right: 0.25rem;
  top: 0.125rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 50%;
  font-size: 1.5rem;
  transition: var(--select-transition);
}
.ReactionSelector__show-more.show {
  transform: rotate(180deg);
}
.ReactionSelector__bubble-small {
  position: absolute;
  display: block;
  content: "";
  right: 0;
  bottom: 0;
  width: 0.1875rem;
  height: 0.1875rem;
  border-radius: 50%;
  box-shadow: 0px 1.58333px 3.16667px rgba(0, 0, 0, 0.46);
  background: var(--color-background);
}
body.is-safari .ReactionSelector {
  filter: none;
  box-shadow: 0 0.25rem 0.125rem var(--color-default-shadow);
}
body.is-safari .ReactionSelector__bubble-small, body.is-safari .ReactionSelector__bubble-big {
  box-shadow: 0 0.25rem 0.125rem var(--color-default-shadow);
}
.ReactionSelector__items-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
}
.ReactionSelector__items {
  padding: 0.375rem 0.75rem;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow: overlay;
  overflow-y: hidden;
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.ReactionSelector--compact {
  background: var(--color-background-compact-menu-reactions);
  height: 2.25rem;
  top: -2.75rem;
}
.ReactionSelector--compact .ReactionSelector__items {
  padding: 0 0.5rem;
}
.ReactionSelector--compact .ReactionSelector__bubble-big {
  border-color: var(--color-background-compact-menu-reactions);
}
.ReactionSelector--compact .ReactionSelector__bubble-small {
  background: var(--color-background-compact-menu-reactions);
}
.ReactionSelector__blocked-button {
  width: 2rem !important;
  height: 2rem !important;
  margin-left: 0.5rem !important;
}
.ReactionSelector--compact .ReactionSelector__blocked-button {
  width: 1.5rem !important;
  height: 1.5rem !important;
}
.ReactionSelector--compact .ReactionSelector__blocked-button i {
  font-size: 1.25rem;
}
/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/message/MessageContextMenu.scss ***!
  \**********************************************************************************************************************************************************************************************************************/
.MessageContextMenu {
  position: absolute;
  font-size: 1rem;
}
.MessageContextMenu .scrollable-content {
  overflow-x: hidden;
  overflow-y: overlay;
  padding: 0.5rem 0;
  overscroll-behavior: contain;
}
.MessageContextMenu.compact .scrollable-content {
  padding: 0.25rem 0;
}
.MessageContextMenu.compact .bubble {
  transition: opacity 0.15s cubic-bezier(0.2, 0, 0.2, 1), transform 0.15s cubic-bezier(0.2, 0, 0.2, 1) !important;
  overflow: initial;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.MessageContextMenu.with-reactions .bubble {
  margin-top: 3.5rem;
}
.MessageContextMenu .backdrop {
  touch-action: none;
}
.MessageContextMenu--seen-by {
  max-width: 14rem;
}
.MessageContextMenu--seen-by-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.MessageContextMenu .avatars {
  display: flex;
  align-self: center;
  margin-inline-start: auto;
  padding-inline-start: 1rem;
}
.MessageContextMenu .avatars .Avatar {
  border: 0.0625rem solid var(--color-background);
  margin-right: 0;
  box-sizing: content-box;
}
.MessageContextMenu .avatars .Avatar:not(:first-child) {
  margin-left: -0.1875rem;
}
/*!***********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/StickerSetModal.scss ***!
  \***********************************************************************************************************************************************************************************************************/
.StickerSetModal .modal-dialog {
  width: 26.25rem;
  max-width: 100%;
}
@media (max-width: 600px) {
  .StickerSetModal .modal-dialog {
    width: 18.875rem;
  }
}
.StickerSetModal .modal-header {
  padding: 0.5rem 1rem;
}
.StickerSetModal .modal-content {
  text-align: center;
  padding: 0;
}
.StickerSetModal .stickers {
  position: relative;
  width: 100%;
  height: 19rem;
  max-height: 50vh;
  overflow-y: auto;
  padding: 0 0.25rem;
  text-align: left;
}
.StickerSetModal .button-wrapper {
  padding: 0.5rem 0;
  border-top: 1px solid var(--color-borders);
  box-shadow: 0 0 2px var(--color-default-shadow);
}
.StickerSetModal .button-wrapper button {
  display: inline-block;
}
.StickerSetModal .Loading {
  width: 100%;
  height: 22.8125rem;
  max-height: calc(50vh + 3.8125rem);
}
/*!***********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/CustomEmojiSetsModal.module.scss ***!
  \***********************************************************************************************************************************************************************************************************************/
.CustomEmojiSetsModal-module__root .modal-dialog {
  max-width: 26.25rem;
}
.CustomEmojiSetsModal-module__root .multiline-menu-item {
  flex-grow: 1;
}
.CustomEmojiSetsModal-module__root .subtitle {
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-text-secondary);
}

.CustomEmojiSetsModal-module__sets {
  position: relative;
  width: 100%;
  min-height: 19rem;
  max-height: 50vh;
  overflow-y: auto;
  padding: 0 0.25rem;
  text-align: left;
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/MobileSearch.scss ***!
  \********************************************************************************************************************************************************************************************************/
#MobileSearch > .header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-mobile-search);
  width: 100%;
  height: var(--header-height);
  background: var(--color-background);
  display: flex;
  align-items: center;
  padding-left: max(0.25rem, env(safe-area-inset-left));
  padding-right: max(0.5rem, env(safe-area-inset-right));
}
#MobileSearch > .header > .SearchInput {
  margin-left: 0.25rem;
  flex: 1;
}
@supports not (padding-left: max(0.25rem, env(safe-area-inset-left))) {
  #MobileSearch > .header {
    padding-left: 0.25rem;
    padding-right: 0.5rem;
  }
}

#MobileSearch > .footer {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: var(--z-mobile-search);
  width: 100%;
  height: 3.5rem;
  background: var(--color-background);
  display: flex;
  align-items: center;
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(0.5rem, env(safe-area-inset-right));
}
body:not(.keyboard-visible) #MobileSearch > .footer {
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(3.5rem + env(safe-area-inset-bottom));
}
@supports not (padding-left: max(1rem, env(safe-area-inset-left))) {
  #MobileSearch > .footer {
    padding-left: 1rem;
    padding-right: 0.5rem;
  }
  body:not(.keyboard-visible) #MobileSearch > .footer {
    padding-bottom: 0;
    height: 3.5rem;
  }
}
#MobileSearch > .footer > .counter {
  flex: 1;
  color: var(--color-text-secondary);
}

#MobileSearch:not(.active) .header,
#MobileSearch:not(.active) .footer {
  transform: translateX(-999rem);
}
/*!****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/ReactionEmoji.module.scss ***!
  \****************************************************************************************************************************************************************************************************************/
.ReactionEmoji-module__root {
  --custom-emoji-size: 2.25rem;
  cursor: var(--custom-cursor, pointer);
  display: inline-block;
  width: var(--custom-emoji-size);
  height: var(--custom-emoji-size);
  border-radius: var(--border-radius-messages-small);
  background: transparent no-repeat center;
  background-size: contain;
  transition: background-color 0.15s ease, opacity 0.3s ease !important;
  position: relative;
}
.ReactionEmoji-module__root.ReactionEmoji-module__selected, .ReactionEmoji-module__root:hover {
  background-color: var(--color-interactive-element-hover);
}
/*!*************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/StickerPicker.module.scss ***!
  \*************************************************************************************************************************************************************************************************************************/
.StickerPicker-module__root {
  --color-primary: var(--color-text);
  height: 100%;
}

.StickerPicker-module__main {
  --symbol-set-gap-size: 0.25rem;
  position: relative;
  height: calc(100% - 3rem);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem 0.25rem;
  padding-inline-end: calc(0.25rem - var(--scrollbar-width));
}
.StickerPicker-module__main_customEmoji {
  padding: 0.5rem 0.75rem;
  padding-inline-end: calc(0.75rem - var(--scrollbar-width));
}
.StickerPicker-module__main .bubble {
  border-radius: var(--border-radius-default) !important;
}

.StickerPicker-module__header {
  height: 3rem;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding: 0 0.375rem;
  scrollbar-width: none;
  scrollbar-color: rgba(0, 0, 0, 0);
}
.StickerPicker-module__header::-webkit-scrollbar {
  height: 0;
}
.StickerPicker-module__header::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0);
}
.StickerPicker-module__header::after {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 1px;
  height: 1rem;
}
.StickerPicker-module__header.StickerPicker-module__headerWithBorder {
  /* stylelint-disable-next-line plugin/whole-pixel */
  box-shadow: inset 0 -0.5px 0 0 var(--color-borders-alternate);
}
.StickerPicker-module__header > .shared-canvas-container {
  display: inline-block;
}
.StickerPicker-module__header .shared-canvas {
  max-width: 1280px;
  z-index: 1;
}

.StickerPicker-module__stickerCover {
  display: inline-grid;
  vertical-align: middle;
  grid-template-areas: "cover";
  justify-content: center;
  align-items: center;
  width: 2.25rem !important;
  height: 2.25rem;
  margin: 0.375rem 0.125rem !important;
  padding: 0;
  border-radius: var(--border-radius-messages-small) !important;
}
.StickerPicker-module__stickerCover.StickerButton {
  background-size: 1.875rem;
}
.StickerPicker-module__stickerCover.StickerButton .sticker-media,
.StickerPicker-module__stickerCover.StickerButton .AnimatedSticker {
  position: static;
  grid-area: cover;
  width: 1.875rem;
  height: 1.875rem;
}
.StickerPicker-module__stickerCover.StickerPicker-module__activated {
  color: var(--color-text-lighter);
  background-color: var(--color-interactive-element-hover);
}
.theme-dark .StickerPicker-module__stickerCover.StickerPicker-module__activated {
  --color-text-lighter: var(--color-text);
}

.StickerPicker-module__pickerDisabled {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/*!********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/CustomEmojiPicker.module.scss ***!
  \********************************************************************************************************************************************************************************************************************/
.CustomEmojiPicker-module__root {
  --emoji-size: 2.25rem;
  height: 100%;
  max-height: calc(100 * var(--vh));
}
.CustomEmojiPicker-module__root .symbol-set-container {
  --symbol-set-gap-size: 0.625rem;
}

.CustomEmojiPicker-module__activated {
  background-color: var(--color-interactive-element-hover);
}
/*!********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/message/ReactionPickerLimited.module.scss ***!
  \********************************************************************************************************************************************************************************************************************************/
.ReactionPickerLimited-module__root {
  --emoji-size: 2.25rem;
}

.ReactionPickerLimited-module__wrapper {
  position: relative;
  height: auto;
  max-height: min(18rem, 100%);
  overflow-y: auto;
  padding: 0.5rem 0.25rem;
}
/*!*************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/message/ReactionPicker.module.scss ***!
  \*************************************************************************************************************************************************************************************************************************/
.ReactionPicker-module__menu {
  position: absolute;
  z-index: var(--z-reaction-picker);
}
@media (max-width: 600px) {
  .ReactionPicker-module__menu {
    max-width: 100%;
    left: 0 !important;
    right: 0 !important;
  }
}

.ReactionPicker-module__menuContent {
  --border-radius-default: 1.25rem;
  width: calc(var(--symbol-menu-width) + var(--scrollbar-width));
  height: var(--symbol-menu-height);
  padding: 0 !important;
  transform-origin: 9rem 4.625rem !important;
}
body:not(.no-menu-blur) .ReactionPicker-module__menuContent {
  --color-background: var(--color-background-compact-menu);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.ReactionPicker-module__menuContent.bubble {
  transform: scale(0.8) !important;
  transition: opacity 150ms cubic-bezier(0.2, 0, 0.2, 1), transform 150ms cubic-bezier(0.2, 0, 0.2, 1) !important;
  --offset-x: -0.75rem;
  --offset-y: calc(100% + 0.625rem);
}
.ReactionPicker-module__menuContent.bubble.open {
  transform: scale(1) !important;
}
@media (max-width: 440px) {
  .ReactionPicker-module__menuContent {
    max-width: min(100% - 1rem, 26.25rem);
    left: 50% !important;
    right: auto !important;
  }
  .ReactionPicker-module__menuContent.bubble {
    transform: scale(0.5) translateX(-50%) !important;
    transform-origin: 0 3.5rem !important;
  }
  .ReactionPicker-module__menuContent.bubble.open {
    transform: scale(1) translateX(-50%) !important;
  }
}

.ReactionPicker-module__onlyReactions {
  height: auto;
  transform-origin: 9rem 1.75rem !important;
}
.ReactionPicker-module__onlyReactions.bubble {
  --offset-y: calc(100% + 0.1875rem);
}

.ReactionPicker-module__hidden {
  display: none !important;
}
/*!*******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/MentionTooltip.scss ***!
  \*******************************************************************************************************************************************************************************************************************/
.MentionTooltip {
  width: calc(100% - 4rem);
  max-width: 20rem;
  flex-direction: column;
  z-index: -1;
}
@media (max-width: 600px) {
  .MentionTooltip {
    width: calc(100% - 3rem);
  }
}
.MentionTooltip .ListItem.chat-item-clickable {
  margin: 0;
}
.MentionTooltip .ListItem.chat-item-clickable .ListItem-button {
  border-radius: 0;
}
.MentionTooltip .ListItem.chat-item-clickable .info {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.MentionTooltip .ListItem.chat-item-clickable .title {
  margin-inline-end: 0.625rem;
  max-width: 70%;
}
.MentionTooltip .ListItem.chat-item-clickable .handle {
  font-size: 1rem;
}
.MentionTooltip .ListItem.chat-item-clickable[dir=rtl] .status {
  width: auto;
}
.MentionTooltip .ChatInfo .title h3 {
  line-height: 1.25;
}
.MentionTooltip .ChatInfo .Avatar {
  margin-right: 0.7em;
}
.MentionTooltip .ChatInfo .handle::before {
  content: "@";
}
.MentionTooltip .ChatInfo .user-status {
  display: none !important;
}
/*!*******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/CustomSendMenu.scss ***!
  \*******************************************************************************************************************************************************************************************************************/
.CustomSendMenu {
  position: relative;
  bottom: 3.5rem;
}
.is-pointer-env .CustomSendMenu > .backdrop {
  position: absolute;
  top: -1rem;
  left: auto;
  right: 0;
  width: 3.5rem;
}
.CustomSendMenu .media-disabled > button {
  white-space: normal;
}
.CustomSendMenu .bubble {
  width: 16rem;
}
/*!*******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/AttachmentModalItem.module.scss ***!
  \*******************************************************************************************************************************************************************************************************************************/
.AttachmentModalItem-module__root {
  flex: 1 calc(50% - 0.5rem);
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: var(--border-radius-default);
  overflow: hidden;
}

.AttachmentModalItem-module__preview {
  width: 100%;
  height: 12rem;
  object-fit: cover;
}

.AttachmentModalItem-module__duration {
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 0.75rem;
  position: absolute;
  left: 0.1875rem;
  top: 0.1875rem;
  z-index: 1;
  padding: 0 0.375rem;
  border-radius: 0.75rem;
  line-height: 1.125rem;
  -webkit-user-select: none;
  user-select: none;
}

.AttachmentModalItem-module__single .AttachmentModalItem-module__preview {
  height: auto;
  max-height: 24rem;
}

.AttachmentModalItem-module__no-grouping {
  flex-basis: 100%;
}

.AttachmentModalItem-module__file {
  margin: 0.5rem;
  flex-grow: 1;
  min-width: 0;
}

.AttachmentModalItem-module__overlay {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  display: flex;
  overflow: hidden;
}

.AttachmentModalItem-module__action-item {
  display: block;
  padding: 0.3125rem;
  color: white;
  border-radius: var(--border-radius-messages-small);
  transition: 0.2s background-color ease-in-out;
  cursor: pointer;
  background-color: var(--color-black-opacity-60) !important;
}
.AttachmentModalItem-module__action-item:hover {
  background-color: rgba(0, 0, 0, 0.15) !important;
}
@media (max-width: 600px) {
  .AttachmentModalItem-module__action-item {
    font-size: 1.25rem;
  }
}

.AttachmentModalItem-module__delete-file {
  font-size: 1.5rem;
  color: var(--color-text-secondary);
  background-color: transparent !important;
  margin-right: 1rem;
}
/*!***************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/AttachmentModal.module.scss ***!
  \***************************************************************************************************************************************************************************************************************************/
.AttachmentModal-module__root {
  --border-radius-default: 0.75rem;
}
.AttachmentModal-module__root .modal-dialog {
  max-width: 25rem;
}
@media (max-width: 600px) {
  .AttachmentModal-module__root .modal-dialog {
    max-height: 100%;
  }
}
.AttachmentModal-module__root .modal-header {
  padding: 0.825rem 0.5rem 0rem 3.125rem;
}
.AttachmentModal-module__root .modal-header-condensed {
  padding: 0 !important;
  border-bottom: 1px solid transparent;
  transition: border-color 250ms ease-in-out;
}
.AttachmentModal-module__root .modal-content {
  display: flex;
  flex-direction: column;
  padding: 0;
  max-height: calc(100vh - 3.25rem - 5rem);
  overflow-x: auto;
  padding-bottom: env(safe-area-inset-bottom);
}
@supports not (padding-bottom: env(safe-area-inset-bottom)) {
  .AttachmentModal-module__root .modal-content {
    padding-bottom: 0;
  }
}
.AttachmentModal-module__root .symbol-menu-button {
  flex-shrink: 0;
  background: none !important;
  width: 3.5rem !important;
  height: 3.5rem !important;
  padding: 0 !important;
  align-self: flex-end;
}
.AttachmentModal-module__root .symbol-menu-button,
.AttachmentModal-module__root .mobile-symbol-menu-button {
  margin-right: -1.75rem;
  margin-left: -0.5rem !important;
  color: var(--color-composer-button);
}
.AttachmentModal-module__root .mobile-symbol-menu-button {
  margin-left: 0 !important;
  margin-right: -1.25rem !important;
  width: 2.875rem;
  height: 2.875rem;
}
.AttachmentModal-module__root .attachment-modal-symbol-menu {
  bottom: 0;
  left: 0;
}
body.keyboard-visible .AttachmentModal-module__root .modal-content {
  padding-bottom: 0;
}
.AttachmentModal-module__root.AttachmentModal-module__mobile .modal-dialog {
  margin: 0;
  max-width: 100% !important;
  align-self: end;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.AttachmentModal-module__root.AttachmentModal-module__mobile:not(.open) .modal-dialog {
  transform: translate3d(0, 8rem, 0);
}
.AttachmentModal-module__root.AttachmentModal-module__mobile.AttachmentModal-module__symbolMenuOpen .modal-dialog {
  transition: var(--layer-transition);
  transform: translate3d(0, calc((var(--symbol-menu-footer-height) + var(--symbol-menu-height) - env(safe-area-inset-bottom)) * -1), 0);
}
@supports not (bottom: env(safe-area-inset-bottom)) {
  .AttachmentModal-module__root.AttachmentModal-module__mobile.AttachmentModal-module__symbolMenuOpen .modal-dialog {
    transform: translate3d(0, calc((var(--symbol-menu-footer-height) + var(--symbol-menu-height)) * -1), 0);
  }
}
.AttachmentModal-module__root.AttachmentModal-module__header-border .modal-header-condensed {
  border-bottom-color: var(--color-borders);
}

.AttachmentModal-module__attachments {
  max-height: 26rem;
  min-height: 5rem;
  overflow: auto;
  flex-shrink: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0.25rem;
  padding: 0.5rem 0.5625rem 0;
}
@media (max-width: 600px) {
  .AttachmentModal-module__attachments {
    max-height: 80vh;
  }
}

.AttachmentModal-module__attachments-bottom-padding {
  padding-bottom: 0.5rem;
}

.AttachmentModal-module__caption-wrapper {
  position: relative;
  padding: 0 0.8125rem;
  border-top: 1px solid transparent;
  transition: border-color 250ms ease-in-out;
}
.AttachmentModal-module__caption-wrapper .form-control {
  background: var(--color-background);
}
.AttachmentModal-module__caption-wrapper .MentionTooltip {
  right: 0 !important;
  z-index: 0;
}

.AttachmentModal-module__caption-top-border {
  border-top-color: var(--color-borders);
}

.AttachmentModal-module__caption {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.AttachmentModal-module__drop-target {
  display: flex;
  flex-direction: column;
  position: relative;
}
.AttachmentModal-module__drop-target::before, .AttachmentModal-module__drop-target::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--border-radius-default);
  pointer-events: none;
  opacity: 0;
  transition: 250ms opacity;
  z-index: 1;
}
.AttachmentModal-module__drop-target::before {
  background-image: var(--drag-target-border-hovered);
  background-color: var(--color-background);
}
.AttachmentModal-module__drop-target::after {
  content: attr(data-attach-description);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-primary);
}

.AttachmentModal-module__hovered .AttachmentModal-module__drop-target::before {
  opacity: 0.95;
}
.AttachmentModal-module__hovered .AttachmentModal-module__drop-target::after {
  opacity: 1;
}
.AttachmentModal-module__hovered .AttachmentModal-module__caption-wrapper,
.AttachmentModal-module__hovered .AttachmentModal-module__attachments,
.AttachmentModal-module__hovered .input-scroller {
  pointer-events: none;
}

.AttachmentModal-module__send-wrapper {
  align-self: flex-end;
  position: relative;
  padding-bottom: 0.5rem;
}

.AttachmentModal-module__send {
  height: 2.5rem;
  padding: 0 1rem;
}

.CustomSendMenu {
  bottom: 2.25rem;
}
.AttachmentModal-module__is-pointer-env .CustomSendMenu > .backdrop {
  width: 100%;
  top: -2rem;
  bottom: auto;
  height: 3.5rem;
}
/*!**************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/PollModal.scss ***!
  \**************************************************************************************************************************************************************************************************************/
.PollModal .modal-dialog {
  max-width: 26.25rem;
  max-height: calc(100vh - 5rem);
}
.PollModal .modal-content {
  padding: 0.5rem 1.25rem 1.875rem;
  min-height: 4.875rem;
}
.PollModal .modal-header-condensed {
  margin-bottom: 1rem;
}
.PollModal .options-header {
  color: var(--color-text-secondary);
  font-size: 1rem;
  font-weight: 500;
  margin: 1.5rem 0.25rem;
}
.PollModal .options-list {
  margin: 1rem -0.75rem -0.5rem;
  padding: 0 0.75rem;
  border-top: 1px solid var(--color-chat-hover);
  max-height: 20rem;
  overflow: auto;
}
.PollModal .options-list.overflown {
  padding: 0 0.4375rem 0.5rem 0.75rem;
}
@media (max-width: 600px) {
  .PollModal .options-list {
    overflow: hidden;
    max-height: none;
  }
  .PollModal .options-list, .PollModal .options-list.overflown {
    padding: 0 0.75rem;
  }
}
.PollModal .option-wrapper {
  position: relative;
}
.PollModal .option-wrapper .form-control {
  padding-right: 3rem;
}
.PollModal .option-wrapper .option-remove-button {
  position: absolute;
  top: 0.3125rem;
  right: 0.3125rem;
}
.PollModal .quiz-mode {
  margin-top: 1.5rem;
}
.PollModal .quiz-mode .options-header {
  margin-bottom: 0.5rem;
}
.PollModal .quiz-mode .note {
  margin-top: 0.5rem;
}
.PollModal .note {
  font-size: smaller;
  color: var(--color-text-secondary);
}
.PollModal .poll-error {
  font-size: smaller;
  color: var(--color-error);
  margin: -1rem 0 1rem 0.25rem;
}
.PollModal .input-group:last-child {
  margin-bottom: 0.5rem;
}
/*!***************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/BotCommand.scss ***!
  \***************************************************************************************************************************************************************************************************************/
.BotCommand {
  margin: 0 !important;
}
.BotCommand .ListItem-button {
  border-radius: 0;
}
.BotCommand .multiline-item {
  padding: 0 0.5rem;
}
.BotCommand .multiline-item .title {
  font-size: 0.9375rem;
}
.BotCommand .multiline-item .subtitle {
  line-height: 1.3125;
  font-size: 0.875rem;
}
.BotCommand.with-avatar .multiline-item {
  padding: 0;
  display: flex;
}
.BotCommand.with-avatar .content-inner {
  flex: 1;
}
/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/BotCommandTooltip.scss ***!
  \**********************************************************************************************************************************************************************************************************************/
.BotCommandTooltip {
  width: calc(100% - 4rem);
  max-width: 26rem;
  flex-direction: column;
  z-index: -1;
}
@media (max-width: 600px) {
  .BotCommandTooltip {
    width: calc(100% - 3rem);
  }
}
/*!*******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/BotCommandMenu.scss ***!
  \*******************************************************************************************************************************************************************************************************************/
.BotCommandMenu .menu-container {
  max-height: 40vh;
  overflow: auto;
  flex-direction: column;
  border-radius: var(--border-radius-messages);
  padding: 0.75rem 0;
}
.is-pointer-env .BotCommandMenu > .backdrop {
  position: absolute;
  top: -1rem;
  left: 0.75rem;
  right: auto;
  width: 5rem;
  height: 4rem;
}
/*!*******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/StickerTooltip.scss ***!
  \*******************************************************************************************************************************************************************************************************************/
.StickerTooltip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  grid-auto-rows: auto;
  place-items: center;
}
.StickerTooltip.hidden {
  display: none;
}
/*!******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/CustomEmojiTooltip.module.scss ***!
  \******************************************************************************************************************************************************************************************************************************/
.CustomEmojiTooltip-module__root.composer-tooltip {
  display: flex;
  padding: 0;
  z-index: 1;
  overflow-y: hidden;
  overflow-x: auto;
}
@supports (overflow-x: overlay) {
  .CustomEmojiTooltip-module__root.composer-tooltip {
    overflow-x: overlay;
  }
}
.CustomEmojiTooltip-module__root.composer-tooltip .CustomEmojiTooltip-module__emojiButton {
  flex: 0 0 2rem;
  --custom-emoji-size: 2rem;
  margin: 0.5rem 0 0.5rem 0.25rem;
}
.CustomEmojiTooltip-module__root.composer-tooltip.shown + .StickerTooltip {
  transform: translateY(-1.75rem);
}
/*!***************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/DropTarget.scss ***!
  \***************************************************************************************************************************************************************************************************************/
.DropTarget {
  border-radius: var(--border-radius-default);
  background: var(--color-background);
  padding: 1.5rem;
  flex: 1 1 auto;
  width: 100%;
  max-width: 43.75rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.3125rem;
  display: flex;
  color: var(--color-text-secondary);
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.04), 0px 1px 1px 0px rgba(0, 0, 0, 0.05), 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
}
@media (max-height: 350px) {
  .DropTarget {
    padding: 0.75rem;
  }
}
.DropTarget.hovered .target-content {
  color: var(--color-primary);
  background-image: var(--drag-target-border-hovered);
}
.DropTarget.hovered svg path {
  stroke: var(--color-primary);
}
.DropTarget + .DropTarget {
  margin-top: 0.3125rem;
}
.DropTarget:last-child {
  margin-bottom: 0;
}
.DropTarget .target-content {
  pointer-events: none;
  background-image: var(--drag-target-border);
  border-radius: 0.5rem;
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: 0.2s color, 0.2s background-image;
}
.DropTarget svg {
  width: 4rem;
  height: 4rem;
  margin-bottom: 1.25rem;
}
.DropTarget svg path {
  stroke: var(--color-text-secondary);
  transition: 0.2s stroke;
}
@media (max-height: 520px) {
  .DropTarget svg {
    width: 2rem;
    height: 2rem;
    margin-bottom: 1rem;
  }
}
@media (max-height: 450px) {
  .DropTarget svg {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 0.5rem;
    margin-top: 0.25rem;
  }
}
.DropTarget .title {
  font-size: 1.125rem;
  font-weight: 500;
}
@media (max-height: 450px) {
  .DropTarget .title {
    font-size: 1rem;
  }
}
.DropTarget .description {
  font-size: 1rem;
  letter-spacing: 0.3px;
}
@media (max-height: 450px) {
  .DropTarget .description {
    font-size: 0.875rem;
  }
}
/*!*************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/DropArea.scss ***!
  \*************************************************************************************************************************************************************************************************************/
.DropArea {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 100vh;
  z-index: var(--z-drop-area);
  padding: 80px 20px 20px;
  display: flex;
  flex-direction: column;
}
#Main.right-column-open .DropArea {
  max-width: calc(100% - var(--right-column-width));
}
/*!*****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/EmojiTooltip.scss ***!
  \*****************************************************************************************************************************************************************************************************************/
.EmojiTooltip {
  display: flex;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
}
@supports (overflow-x: overlay) {
  .EmojiTooltip {
    overflow-x: overlay;
  }
}
.EmojiTooltip .EmojiButton {
  flex: 0 0 2.5rem;
  margin-right: 0;
}
/*!*****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/inlineResults/BaseResult.scss ***!
  \*****************************************************************************************************************************************************************************************************************************/
.BaseResult.chat-item-clickable > .ListItem-button {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}
.BaseResult.chat-item-clickable > .ListItem-button .title {
  display: block;
  text-overflow: ellipsis;
}
.BaseResult .thumb {
  background-color: var(--color-background-secondary);
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  line-height: 3rem;
  border-radius: var(--border-radius-default-tiny);
  display: inline-flex;
  align-content: center;
  justify-content: center;
  margin-inline-end: 0.5rem;
  overflow: hidden;
  font-size: 1.5rem;
}
.BaseResult .thumb img:not(.emoji) {
  width: 100%;
  object-fit: cover;
}
.BaseResult .thumb img.emoji {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.75rem 0 0;
}
.BaseResult .content-inner {
  min-width: 0;
}
.BaseResult .title {
  font-weight: 500;
  text-align: left;
  unicode-bidi: plaintext;
}
.BaseResult .description {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  unicode-bidi: plaintext;
}
.BaseResult[dir=rtl] .title, .BaseResult[dir=rtl] .description {
  text-align: right;
}
/*!******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/inlineResults/MediaResult.scss ***!
  \******************************************************************************************************************************************************************************************************************************/
.MediaResult {
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.MediaResult img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/*!*********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/InlineBotTooltip.scss ***!
  \*********************************************************************************************************************************************************************************************************************/
.InlineBotTooltip .switch-pm .title {
  margin: 0 auto;
  font-weight: 500;
}
.InlineBotTooltip.gallery {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-flow: dense;
  grid-gap: 1px;
  padding: 0;
}
@media (max-width: 600px) {
  .InlineBotTooltip.gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}
.InlineBotTooltip.gallery .switch-pm {
  grid-column: 1/-1;
}
.InlineBotTooltip.gallery .switch-pm .ListItem-button {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.InlineBotTooltip.gallery .StickerButton {
  width: initial;
  height: 0;
  margin: 0;
  padding-bottom: 100%;
  border-radius: var(--border-radius-default);
}
.InlineBotTooltip.gallery .StickerButton .AnimatedSticker,
.InlineBotTooltip.gallery .StickerButton img,
.InlineBotTooltip.gallery .StickerButton canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
@media (min-width: 600px) {
  .InlineBotTooltip.gallery .StickerButton .AnimatedSticker,
  .InlineBotTooltip.gallery .StickerButton img,
  .InlineBotTooltip.gallery .StickerButton canvas {
    top: 0.25rem;
    left: 0.25rem;
    width: calc(100% - 0.5rem) !important;
    height: calc(100% - 0.5rem) !important;
  }
}
.InlineBotTooltip:not(.gallery) .GifButton {
  width: 4rem;
  height: 4rem;
  margin: 0.5rem;
}
/*!***************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/SendAsMenu.scss ***!
  \***************************************************************************************************************************************************************************************************************/
.SendAsMenu .send-as-title {
  font-weight: 500;
  line-height: 1.25rem;
  word-break: break-word;
  margin-inline-start: 1rem;
  margin-block: 0.5rem;
}
.SendAsMenu .menu-container {
  width: calc(100% - 4rem);
  max-width: 20rem;
  max-height: 40vh;
  overflow: auto;
  flex-direction: column;
}
@media (max-width: 600px) {
  .SendAsMenu .menu-container {
    width: calc(100% - 3rem);
  }
}
.is-pointer-env .SendAsMenu > .backdrop {
  z-index: 2;
  position: absolute;
  top: -1rem;
  left: 0;
  right: auto;
  width: 3.5rem;
  height: 4.5rem;
}

.SendAsItem {
  margin: 0 !important;
}
.SendAsItem .Avatar.selected {
  margin-right: 0.75rem;
  position: relative;
  width: calc(2.125rem - 4px);
  height: calc(2.125rem - 4px);
}
.SendAsItem .Avatar.selected::before {
  display: block;
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  border: 2px solid var(--color-primary);
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  border-radius: 50%;
}
.SendAsItem .ListItem-button {
  padding: 0.5625rem 1rem !important;
  border-radius: 0;
  align-items: center;
}
.SendAsItem .ListItem-button > .send-as-icon-locked {
  margin-right: 0.5rem;
}
.SendAsItem .info {
  margin-inline-start: 0.5rem;
}
.SendAsItem .subtitle {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.3125;
}
/*!******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/right/RightSearch.scss ***!
  \******************************************************************************************************************************************************************************************************/
.RightSearch {
  height: 100%;
  padding: 0 0.5rem;
  overflow-y: auto;
}
.RightSearch .helper-text {
  padding: 1rem;
  margin-bottom: 0.125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  unicode-bidi: plaintext;
  text-align: initial;
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/right/StickerSearch.scss ***!
  \********************************************************************************************************************************************************************************************************/
.StickerSearch {
  height: 100%;
  padding: 0 0.5rem;
  overflow-y: auto;
}
.StickerSearch .helper-text {
  padding: 1rem;
  margin-bottom: 0.125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.StickerSearch .sticker-set {
  margin-bottom: 1rem;
}
.StickerSearch .sticker-set-header {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;
}
.StickerSearch .sticker-set-header .title-wrapper {
  overflow: hidden;
}
.StickerSearch .sticker-set-header .title {
  font-size: 1rem;
  line-height: 1.6875rem;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.StickerSearch .sticker-set-header .count {
  color: var(--color-text-secondary);
  margin: 0;
}
.StickerSearch .sticker-set-header .Button {
  flex-shrink: 0;
  margin-left: 1rem;
}
.StickerSearch .sticker-set-header .Button.is-added {
  background: var(--color-chat-hover);
  color: var(--color-text-secondary);
}
.StickerSearch .sticker-set-header .Button.is-added:hover, .StickerSearch .sticker-set-header .Button.is-added:active {
  background: var(--color-item-active) !important;
}
.StickerSearch .sticker-set-main {
  display: flex;
  flex-wrap: nowrap;
}
.StickerSearch .sticker-set[dir=rtl] .title-wrapper {
  text-align: right;
}
.StickerSearch .sticker-set[dir=rtl] .Button {
  margin-left: 0;
  margin-right: 1rem;
}
.StickerSearch .StickerButton {
  margin: 0.125rem;
}
/*!****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/right/GifSearch.scss ***!
  \****************************************************************************************************************************************************************************************************/
.GifSearch {
  height: 100%;
  padding: 0.25rem;
}
.GifSearch .gif-container {
  height: 100%;
  overflow: auto;
}
.GifSearch .gif-container.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 6.25rem;
  grid-gap: 0.25rem;
  grid-auto-flow: dense;
}
.GifSearch .helper-text {
  color: var(--color-text-meta);
  margin-top: 2rem;
  text-align: center;
}
/*!*************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/statistics/StatisticsOverview.scss ***!
  \*************************************************************************************************************************************************************************************************************************/
.StatisticsOverview {
  padding: 1rem 0;
}
.StatisticsOverview__header {
  margin-bottom: 0.5rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.StatisticsOverview__title {
  margin-right: 2em;
  line-height: 30px;
}
.StatisticsOverview__title:first-letter {
  text-transform: uppercase;
}
.StatisticsOverview__caption {
  text-align: right;
  font-weight: normal;
}
.StatisticsOverview__table {
  width: 100%;
}
.StatisticsOverview__table-cell {
  width: 50%;
}
.StatisticsOverview__table-heading {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
.StatisticsOverview__table-value {
  margin: 0;
  display: inline-block;
}
.StatisticsOverview__value {
  color: var(--color-success);
}
.StatisticsOverview__value.negative {
  color: var(--color-error);
}
/*!*****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/statistics/Statistics.scss ***!
  \*****************************************************************************************************************************************************************************************************************/
.Statistics {
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}
.Statistics__graph {
  opacity: 1;
  transition: opacity 0.3s ease;
}
.Statistics__graph:last-of-type {
  margin-bottom: 0;
  border-bottom: none;
}
.Statistics__graph.hidden {
  opacity: 0;
  margin: 0;
}
.Statistics__graph.hidden .lovely-chart--header {
  display: none;
}
.Statistics .lovely-chart--container {
  font: inherit !important;
  font-size: 13px !important;
}
.Statistics .lovely-chart--header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.75rem;
  padding: 0.5rem 1rem;
  background-color: var(--color-background-secondary);
  transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
  cursor: pointer;
  margin-bottom: 0.75rem;
}
.Statistics .lovely-chart--header-title {
  flex-grow: 1;
}
.Statistics .lovely-chart--header svg {
  transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
}
.Statistics .lovely-chart--header:not(.open) .lovely-chart--header-caption [stroke] {
  stroke: var(--color-text);
}
.Statistics .lovely-chart--header.open {
  background-color: var(--color-background);
}
.Statistics .lovely-chart--header.open .lovely-chart--header-caption svg {
  transform: rotate(-180deg);
}
.Statistics .lovely-chart--tooltip-balloon {
  left: 3px;
}
.Statistics .lovely-chart--header,
.Statistics .lovely-chart--tooltip-title,
.Statistics .lovely-chart--tooltip-dataset-value,
.Statistics .lovely-chart--percentage-title {
  font-weight: 500 !important;
}
.Statistics .lovely-chart--container-type-pie.lovely-chart--state-zoomed-in > canvas {
  animation-name: pie-slim-in !important;
}
.Statistics .lovely-chart--container-type-pie:not(.lovely-chart--state-zoomed-in) > canvas {
  animation-name: pie-slim-out !important;
}
.Statistics .title-icon.growthGraph {
  background-color: var(--color-4);
}
.Statistics .title-icon.followersGraph {
  background-color: var(--color-6);
}
.Statistics .title-icon.muteGraph {
  background-color: var(--color-5);
}
.Statistics .title-icon.topHoursGraph {
  background-color: var(--color-green);
}
.Statistics .title-icon.viewsBySourceGraph {
  background-color: var(--color-1);
}
.Statistics .title-icon.newFollowersBySourceGraph {
  background-color: var(--color-3);
}
.Statistics .title-icon.interactionsGraph {
  background-color: var(--color-9);
}

@keyframes pie-slim-in {
  0% {
    clip-path: circle(80% at center calc(50% - 7.5px));
    -webkit-clip-path: circle(80% at center calc(50% - 7.5px));
    transform: rotate(-360deg);
  }
  25% {
    clip-path: circle(40% at center calc(50% - 7.5px));
    -webkit-clip-path: circle(40% at center calc(50% - 7.5px));
    transform: rotate(-360deg);
  }
  75% {
    clip-path: circle(40% at center calc(50% - 7.5px));
    -webkit-clip-path: circle(40% at center calc(50% - 7.5px));
    transform: rotate(0);
  }
}
@keyframes pie-slim-out {
  0% {
    clip-path: circle(40% at center calc(50% - 7.5px));
    -webkit-clip-path: circle(40% at center calc(50% - 7.5px));
    transform: rotate(360deg);
  }
  50% {
    clip-path: circle(40% at center calc(50% - 7.5px));
    -webkit-clip-path: circle(40% at center calc(50% - 7.5px));
    transform: rotate(0);
  }
  75% {
    clip-path: circle(80% at center calc(50% - 7.5px));
    -webkit-clip-path: circle(80% at center calc(50% - 7.5px));
    transform: rotate(0);
  }
}
/*!******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/statistics/StatisticsPublicForward.scss ***!
  \******************************************************************************************************************************************************************************************************************************/
.StatisticsPublicForward {
  position: relative;
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
}
.StatisticsPublicForward:hover, .StatisticsPublicForward:active {
  background-color: var(--color-chat-hover);
}
.StatisticsPublicForward .Avatar {
  flex-shrink: 0;
  margin-right: 0.5rem;
}
.StatisticsPublicForward__title {
  line-height: 1.25rem;
}
.StatisticsPublicForward__views {
  color: var(--color-text-meta);
  font-size: 0.8125rem;
}
/*!************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/right/PollAnswerResults.scss ***!
  \************************************************************************************************************************************************************************************************************/
.PollAnswerResults {
  border-bottom: 1px solid var(--color-borders);
  padding: 0 0.5rem 0.625rem;
  display: flex;
  flex-direction: column-reverse;
}
.PollAnswerResults .answer-head {
  display: flex;
  align-items: center;
  font-size: 0.9375rem;
  line-height: 1.3125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  padding: 1rem 0.75rem 0.5rem 1rem;
  position: sticky;
  top: 0;
  background: var(--color-background);
}
@media (max-width: 600px) {
  .PollAnswerResults .answer-head {
    padding: 0.5rem 0.25rem 0.5rem 0.5rem;
  }
}
.PollAnswerResults .answer-percent {
  margin-left: auto;
}
.PollAnswerResults .answer-percent[dir=auto] {
  margin-left: 0;
  margin-right: auto;
}
.PollAnswerResults .poll-voters {
  padding: 0 0.75rem;
  position: relative;
  min-height: 3rem;
}
@media (max-width: 600px) {
  .PollAnswerResults .poll-voters {
    padding: 0 0.25rem;
  }
}
.PollAnswerResults .poll-voters .Spinner {
  --spinner-size: 1.25rem;
}
.PollAnswerResults .chat-item-clickable .ChatInfo .Avatar.size-tiny {
  margin-right: 1.75rem;
}
.PollAnswerResults .chat-item-clickable[dir=rtl] .ChatInfo .Avatar.size-tiny {
  margin-left: 1.75rem;
  margin-right: 0;
}
.PollAnswerResults .ShowMoreButton {
  margin: 0.25rem 0 0 -0.5rem;
  width: calc(100% + 1rem);
}
.PollAnswerResults .ShowMoreButton[dir=rtl] .icon-down {
  margin-left: 2rem;
  margin-right: 0;
}
.PollAnswerResults .icon-down {
  vertical-align: middle;
  margin-right: 2rem;
  font-size: 1.5rem;
}
/*!******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/right/PollResults.scss ***!
  \******************************************************************************************************************************************************************************************************/
.PollResults {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}
.PollResults > .Loading {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.75);
}
.PollResults .poll-question {
  padding: 0.75rem 1.5rem;
  flex-shrink: 0;
  font-size: 1.25rem;
}
@media (max-width: 600px) {
  .PollResults .poll-question {
    padding: 0 1rem;
  }
}
.PollResults .poll-results-list {
  border-top: 1px solid var(--color-borders);
  flex-grow: 1;
  overflow: auto;
}
/*!*************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/right/ManageTopic.module.scss ***!
  \*************************************************************************************************************************************************************************************************************/
.ManageTopic-module__root {
  position: relative;
  height: 100%;
  background-color: var(--color-background-secondary);
  --topic-icon-size: 5rem;
}

.ManageTopic-module__content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ManageTopic-module__section {
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: var(--color-background);
  box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent);
  margin-bottom: 0.625rem;
}

.ManageTopic-module__top {
  padding: 1rem 1.5rem;
}

.ManageTopic-module__bottom {
  flex-grow: 1;
  min-height: 0;
  margin-bottom: 0;
}

.ManageTopic-module__iconWrapper {
  margin: 1.5rem 0;
  align-self: center;
  width: var(--topic-icon-size);
  height: var(--topic-icon-size);
  --custom-emoji-size: var(--topic-icon-size);
  font-size: calc(var(--topic-icon-size) - 2rem);
}

.ManageTopic-module__icon {
  width: 100%;
  height: 100%;
}

.ManageTopic-module__clickable {
  cursor: pointer;
}

.ManageTopic-module__heading {
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.ManageTopic-module__icon-picker {
  min-height: 10rem;
}
/*!******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/right/Certificate.scss ***!
  \******************************************************************************************************************************************************************************************************/
.certificate-info-wrapper {
  background: var(--color-background-secondary);
}
.certificate-info-wrapper .qr-container {
  display: flex;
  justify-content: center;
}
.certificate-info-wrapper .logo {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 5rem;
  height: 5rem;
  background: var(--color-background);
  box-shadow: 0px 1.33469px 2.33571px rgba(0, 0, 0, 0.17);
  border-radius: 2.1875rem;
  transform: translate(-50%, 50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.info-block {
  position: relative;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  background-color: var(--color-background);
  border-radius: var(--border-radius-default-bigger);
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
  line-height: 1.2;
}
.info-block h3 {
  margin-bottom: 0.75rem;
}
.info-block h4 {
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}
.info-block li {
  margin-bottom: 0.75rem;
}
.info-block.has-qr {
  padding-top: 3.5rem;
  padding-bottom: 2.5rem;
  margin-top: 2.5rem;
  text-align: center;
}
.info-block ul {
  padding-left: 1.125rem;
}
.info-block .description {
  padding: 1rem;
  border-radius: var(--border-radius-messages);
  background: #f7f7f7;
  font-weight: 500;
}
.info-block .description .row {
  display: flex;
  justify-content: space-between;
}
.info-block .description .row:not(:last-child) {
  margin-bottom: 0.75rem;
}
.info-block .description .subtitle {
  color: var(--color-text-secondary);
}
/*!***********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/SelectAvatar.module.scss ***!
  \***********************************************************************************************************************************************************************************************************/
.SelectAvatar-module__input {
  display: none;
}
/*!****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/right/management/Management.scss ***!
  \****************************************************************************************************************************************************************************************************************/
.Management {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--color-background-secondary);
}
.Management > .custom-scroll {
  overflow-y: overlay;
  overflow-x: hidden;
}
.Management .personal-photo {
  margin-right: 2rem;
  transform: scale(1.25);
}
.Management .section-help {
  line-height: 1.2;
  margin: 0 auto 0.75rem;
}
.Management .section-help p {
  margin-bottom: 0;
}
.Management .section-help ul {
  list-style-type: decimal;
  padding-left: 1.5rem;
}
.Management .section-help .title {
  font-size: 1.125rem;
  font-weight: 500;
}
.Management .section-info {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  padding: 0 1.25rem;
  white-space: pre-line;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}
.Management textarea.form-control {
  height: auto;
}
.Management .radio-group .Radio {
  padding-left: 2.5rem;
  margin-bottom: 1.25rem;
}
.Management .radio-group .Radio:last-child {
  margin-bottom: 0.625rem;
}
.Management .radio-group .Radio-main::before {
  left: 0.125rem;
  top: 0.25rem;
  transform: none;
}
.Management .radio-group .Radio-main::after {
  left: 0.3125rem;
  top: 0.4375rem;
  transform: none;
}
.Management .radio-group .Radio-main .subLabel {
  font-size: 0.875rem;
}
.Management .radio-group.underline .Radio {
  margin-bottom: 0;
}
.Management .radio-group.underline .radio-group-wrap {
  position: relative;
  margin: 0 -1.25rem;
  padding: 0.75rem 1.25rem;
}
.Management .radio-group.underline .radio-group-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  box-shadow: 0 -0.01rem 0 0.01rem var(--color-borders);
}
.Management__filter {
  padding: 0 1rem 0.25rem 0.75rem;
  background-color: var(--color-background);
  box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent);
  margin-bottom: 0.625rem;
  display: flex;
  flex-flow: row wrap;
  flex-shrink: 0;
  overflow-y: auto;
  max-height: 20rem;
}
.Management__filter .input {
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  flex-grow: 1;
}
.Management__filter .form-control {
  height: 2rem;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  font-size: 0.9375rem;
}
.Management .Spinner {
  margin: 2rem auto;
}
.Management.user-edit .section {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  padding: 1rem;
}
.Management.user-edit .form-submit {
  flex-grow: 2;
  justify-content: flex-end;
}
.Management .image-input {
  border: none;
  margin: 0;
}
.Management .image-input button {
  border: none;
  box-shadow: none;
}

.Management .section,
.Profile .section {
  padding: 0.125rem 0.5rem 0.125rem 1.25rem;
  margin-bottom: 0.75rem;
  background-color: var(--color-background);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(0, 0, 0, 0.05), 0px 2px 10px rgba(0, 0, 0, 0.04);
}
.Management .section.wide,
.Profile .section.wide {
  padding: 1.5rem;
}
.Management .section.no-border,
.Profile .section.no-border {
  border-top: none;
}
.Management .section > .ChatInfo,
.Profile .section > .ChatInfo {
  margin: 0 0 2rem !important;
}
.Management .section > .ChatInfo .title h3,
.Profile .section > .ChatInfo .title h3 {
  margin-bottom: 0;
}
.Management .section .row,
.Profile .section .row {
  justify-content: space-between;
}
.Management .section .section-icon,
.Profile .section .section-icon {
  margin: 0 auto 2rem;
}
.Management .section .ListItem:not(.text-trigger),
.Profile .section .ListItem:not(.text-trigger) {
  margin-left: -0.75rem;
}
.Management .section .ListItem:not(.text-trigger) .Reaction,
.Profile .section .ListItem:not(.text-trigger) .Reaction {
  display: flex;
  align-items: center;
}
.Management .section .ListItem:not(.text-trigger):last-child,
.Profile .section .ListItem:not(.text-trigger):last-child {
  margin-bottom: 0;
}
.Management .section .ListItem:not(.text-trigger) .multiline-item .subtitle,
.Profile .section .ListItem:not(.text-trigger) .multiline-item .subtitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.is-ios .Management .section .ListItem:not(.text-trigger).with-checkbox::after, body.is-android .Management .section .ListItem:not(.text-trigger).with-checkbox::after,
body.is-ios .Profile .section .ListItem:not(.text-trigger).with-checkbox::after,
body.is-android .Profile .section .ListItem:not(.text-trigger).with-checkbox::after {
  bottom: -1rem;
}
.Management .section .ListItem:not(.text-trigger):not(.picker-list-item) .Checkbox,
.Profile .section .ListItem:not(.text-trigger):not(.picker-list-item) .Checkbox {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.Management .section .ListItem:not(.text-trigger).narrow .Checkbox,
.Profile .section .ListItem:not(.text-trigger).narrow .Checkbox {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.Management .section .ListItem:not(.text-trigger).exceptions-member .ChatInfo .status,
.Profile .section .ListItem:not(.text-trigger).exceptions-member .ChatInfo .status {
  white-space: pre-wrap;
}
.Management .section .ListItem:not(.text-trigger) .ListItem-button,
.Profile .section .ListItem:not(.text-trigger) .ListItem-button {
  padding: 0.5rem 1rem;
  min-height: 3.125rem;
}
.Management .section .label,
.Profile .section .label {
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
}
.Management .section .label .ReactionStaticEmoji,
.Profile .section .label .ReactionStaticEmoji {
  width: 1.5rem;
  margin-right: 1rem;
}
.Management .section .section-heading,
.Profile .section .section-heading {
  font-size: 0.9375rem;
  color: var(--color-primary);
  margin-top: 0.875rem;
  margin-bottom: 0.25rem;
}
.Management .section .section-heading[dir=auto],
.Profile .section .section-heading[dir=auto] {
  text-align: initial;
}
.Management .section .section-help,
.Profile .section .section-help {
  color: var(--color-text-secondary);
  line-height: 1.375rem;
}
.Management .section .section-help[dir=auto],
.Profile .section .section-help[dir=auto] {
  text-align: initial;
}
.Management .section .section-info_push,
.Profile .section .section-info_push {
  margin-top: 0.5rem;
}
.Management .section[dir=rtl],
.Profile .section[dir=rtl] {
  text-align: right;
}
.Management .section .Button.link,
.Profile .section .Button.link {
  font-size: 0.9375rem;
  font-weight: normal;
}
.Management .section .Button.link i,
.Profile .section .Button.link i {
  font-size: 1.35rem;
}
.Management .section.settings-invitation,
.Profile .section.settings-invitation {
  display: block;
  padding-left: 0.75rem;
}
.Management .section.settings-invitation .links-list,
.Profile .section.settings-invitation .links-list {
  margin-bottom: 0;
}
.Management .section .link-value,
.Profile .section .link-value {
  display: flex;
  justify-content: space-between;
}
.Management .section.is-group-members,
.Profile .section.is-group-members {
  padding: 0 0 0 0.75rem;
}
.Management .group-link .ListItem,
.Profile .group-link .ListItem {
  font-size: 0.9375rem;
}
.Management .group-link .badge-counter,
.Profile .group-link .badge-counter {
  font-weight: 500;
}
.Management .group-link .icon-svg,
.Profile .group-link .icon-svg {
  margin-right: 1.375rem;
}
.Management .group-link .price,
.Profile .group-link .price {
  align-items: center;
}

.ManageGroupMembers {
  padding: 0.5rem 1rem;
}

.ManageInvites .primary-link {
  position: relative;
}
.ManageInvites .AvatarEditable {
  margin-top: 0.75rem;
  margin-bottom: 0.875rem;
}
.ManageInvites .primary-link-input {
  cursor: pointer;
  margin-bottom: 1rem;
  padding-right: 3rem;
}
.ManageInvites .primary-link-more-menu {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 1;
}
.ManageInvites .create-link {
  margin-bottom: 0.5rem;
}
.ManageInvites .ListItem-button {
  align-items: center;
}
.ManageInvites .link-status-icon {
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 0.5rem;
  position: static !important;
  color: white !important;
  margin-right: 1rem !important;
}
.ManageInvites .link-status-icon-gray {
  background-color: #707579;
}
.ManageInvites .link-status-icon-green {
  background-color: #4fae4e;
}
.ManageInvites .link-status-icon-red {
  background-color: #e17076;
}
.ManageInvites .link-status-icon-blue {
  background-color: #3390ec;
}
.ManageInvites .invite-title {
  white-space: nowrap;
}

.ManageInvite .link-name {
  margin-bottom: 1rem;
}
.ManageInvite .expire-limit {
  margin-top: 1rem;
}
.ManageInvite .usage-limit {
  margin-top: 1rem;
}
.ManageInvite .usage-limit::-webkit-outer-spin-button, .ManageInvite .usage-limit::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.ManageInvite .custom-scroll {
  padding-bottom: 4rem;
}

.ManageInviteInfo .copy-link {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.ManageInviteInfo .link-title {
  text-align: center;
}

.ManageJoinRequests .bulk-actions {
  display: flex;
  justify-content: space-around;
}
.ManageJoinRequests .bulk-action-button {
  width: auto;
  height: auto;
}

.ManageInvite .hint,
.ManageInvites .hint {
  font-size: 0.875rem;
  margin-bottom: 0;
  margin-top: 0.5rem;
}

.DropdownList {
  display: none;
  transition: 0.25s ease-in-out transform;
  transform: translateY(-100%);
  position: absolute;
  width: 100%;
  left: 0;
  padding: 0 1.5rem 0 2.5rem;
  background: var(--color-background);
}
.DropdownList--open {
  transform: translateY(-2rem);
}

.DropdownListTrap {
  height: 0;
  width: 100%;
}
.DropdownListTrap::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--before-shift-height) + 2.5rem);
  background: var(--color-background);
  content: "";
  z-index: 1;
}

.with-shifted-dropdown .ListItem,
.with-shifted-dropdown .section-heading {
  position: relative;
  z-index: 2;
}
.with-shifted-dropdown .without-bottom-shadow {
  box-shadow: none;
  padding-bottom: 0;
}
.with-shifted-dropdown .part {
  background-color: var(--color-background);
  box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent);
  margin: 0 -1.5rem;
  padding: 0 1.5rem 1rem;
}
.with-shifted-dropdown .section,
.with-shifted-dropdown .part {
  position: relative;
  transition: 0.25s ease-in-out transform;
}
.with-shifted-dropdown .section.shifted,
.with-shifted-dropdown .part.shifted {
  transform: translateY(var(--shift-height));
}

.permission-list .row,
.switcher-list .row {
  position: relative;
  padding: 0.75rem 0;
}
.permission-list .row:not(:first-of-type)::after,
.switcher-list .row:not(:first-of-type)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  box-shadow: 0 -0.01rem 0 0.01rem var(--color-borders);
}
.permission-list .row:first-of-type,
.switcher-list .row:first-of-type {
  padding-top: 0.25rem;
}
.permission-list .row-not-wrap,
.switcher-list .row-not-wrap {
  flex-wrap: nowrap !important;
}
.permission-list .row-not-wrap > *,
.switcher-list .row-not-wrap > * {
  flex-shrink: inherit;
  width: 100%;
  max-width: 100%;
}
.permission-list .row-not-wrap .switcher-wrap,
.switcher-list .row-not-wrap .switcher-wrap {
  margin-right: 20px;
  width: -moz-fit-content;
  width: fit-content;
}
.permission-list .DropdownMenu .icon-svg path,
.switcher-list .DropdownMenu .icon-svg path {
  fill: var(--color-text-secondary);
}

.is-group-members {
  margin: 0.125rem 0.75rem 0.125rem 1.25rem;
  border-radius: 1rem;
}

.is-group-members .ListItem-button {
  padding: 0.5rem 0 0.5rem 0.5rem !important;
}

.row-not-wrap .switch-control {
  width: inherit !important;
  max-width: none !important;
  flex-shrink: unset;
}

.row-not-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap !important;
}
/*!************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/Switcher.scss ***!
  \************************************************************************************************************************************************************************************************/
.Switcher {
  display: inline-flex;
  align-items: center;
  position: relative;
  margin: 0;
}
.Switcher.disabled {
  pointer-events: none;
  opacity: 0.5;
}
.Switcher.inactive {
  pointer-events: none;
}
body.animation-level-0 .Switcher .widget,
body.animation-level-0 .Switcher .widget::after, .Switcher.no-animation .widget,
.Switcher.no-animation .widget::after {
  transition: none !important;
}
body.animation-level-0 .Switcher .widget:active:after, .Switcher.no-animation .widget:active:after {
  width: 1.125rem;
}
.Switcher input {
  height: 0;
  width: 0;
  visibility: hidden;
  position: absolute;
  z-index: var(--z-below);
  opacity: 0;
}
.Switcher .widget {
  cursor: pointer;
  text-indent: -999px;
  width: 2rem;
  height: 0.875rem;
  background-color: var(--color-borders-checkbox);
  display: inline-block;
  border-radius: 0.5rem;
  position: relative;
  transition: background-color 150ms;
}
.Switcher .widget:after {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 1.25rem;
  height: 1.25rem;
  background-color: #4d4d50;
  border-radius: 0.75rem;
  transition: transform 200ms;
  border: 2px solid var(--color-background);
}
.Switcher input:not(:disabled):checked + .widget {
  background: var(--color-primary);
}
.Switcher input:checked + .widget:after {
  transform: translateX(65%);
}
.Switcher.reverse input:not(:disabled):checked + .widget {
  background-color: #b0cefa;
}
.Switcher.reverse input:not(:disabled):checked + .widget::after {
  background-color: var(--color-primary);
}
.Switcher.has-icon input:checked + .widget::after {
  background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2711%27 height=%277%27 fill=%27none%27 viewBox=%270 0 11 7%27%3E%3Cpath stroke=%27%2351AEE7%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27M1.294 4.108 3.6 6.177 9.706.824%27/%3E%3C/svg%3E"), var(--color-primary);
  background-repeat: no-repeat;
  background-position: center;
}

.switcher-wrap {
  padding: 0.25rem 0 0.25rem 1.125rem;
  display: flex;
}

.switch-control {
  display: flex;
  align-items: center;
}
.switch-control .disabled {
  pointer-events: none;
}
/*!******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/ManageUsernames.module.scss ***!
  \******************************************************************************************************************************************************************************************************************/
.ManageUsernames-module__container {
  background-color: var(--color-background);
  padding: 1.5rem 1.5rem 0;
  box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent);
  margin-bottom: 0.625rem;
}

.ManageUsernames-module__header {
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin-bottom: 2rem;
  position: relative;
}
.ManageUsernames-module__header[dir=rtl] {
  text-align: right;
}

.ManageUsernames-module__description {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-top: 1rem;
  margin-bottom: 0;
  padding-top: 0.5rem;
  padding-bottom: 1.5rem;
}

.ManageUsernames-module__sortableContainer {
  position: relative;
}
.ManageUsernames-module__sortableContainer .draggable-knob {
  margin-top: -0.25rem;
}

.ManageUsernames-module__item {
  margin-bottom: 0;
  margin-left: -1rem;
  margin-right: -1rem;
}
/*!*****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/right/management/JoinRequest.scss ***!
  \*****************************************************************************************************************************************************************************************************************/
.JoinRequest {
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
}
.JoinRequest:not(:last-child) {
  border-bottom: 1px solid var(--color-borders);
}
.JoinRequest__top {
  display: flex;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.5rem;
}
.JoinRequest__top:hover {
  background-color: var(--color-chat-hover);
}
.JoinRequest__user {
  display: flex;
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
}
.JoinRequest__user-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  margin-left: 1rem;
}
.JoinRequest__user-subtitle {
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.JoinRequest__user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.JoinRequest__date {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  margin-left: 1rem;
  white-space: nowrap;
}
.JoinRequest__buttons {
  display: flex;
  justify-content: space-evenly;
  margin-top: 1rem;
  gap: 0.5rem;
}
.JoinRequest__button {
  width: auto;
  height: auto;
}
/*!*********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/right/AddChatMembers.scss ***!
  \*********************************************************************************************************************************************************************************************************/
.AddChatMembers {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.AddChatMembers-inner {
  height: 100%;
  overflow: hidden;
}
/*!*********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/payment/ShippingInfo.scss ***!
  \*********************************************************************************************************************************************************************************************************/
.ShippingInfo {
  padding: 0.5rem 1rem;
}
.ShippingInfo h5 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin: 1rem 0 1.25rem;
}
/*!*****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/payment/Shipping.scss ***!
  \*****************************************************************************************************************************************************************************************************/
.Shipping {
  padding: 0.5rem 1rem;
}
.Shipping form p {
  color: var(--color-text-secondary);
  font-weight: 500;
  margin: 0.5rem 0 2rem;
}
.Shipping form .Radio {
  margin-bottom: 2rem;
}
/*!************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/payment/Checkout.module.scss ***!
  \************************************************************************************************************************************************************************************************************/
.Checkout-module__root {
  padding: 0.75rem 0 0.5rem;
}

.Checkout-module__description {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin: 0 1rem;
}

.Checkout-module__checkout-picture {
  height: 6rem;
}
@supports (aspect-ratio: 1) {
  .Checkout-module__checkout-picture {
    margin: 0.25rem 0.75rem 0 0;
    min-width: 0;
    width: 100%;
    max-width: 8rem;
    height: auto;
  }
}

.Checkout-module__text {
  min-width: 0;
}

.Checkout-module__checkout-title {
  font-size: 1.125rem;
  line-height: 1.25;
}

.Checkout-module__checkout-description {
  font-size: 0.8125rem;
  line-height: 1.125rem;
  color: var(--color-text-secondary);
  word-break: break-word;
  margin-bottom: 0.25rem;
}

.Checkout-module__price-info {
  margin: 1rem;
}

.Checkout-module__price-info-item {
  margin: 1rem 0.5rem;
  display: flex;
  flex-direction: row;
  align-content: space-between;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.Checkout-module__price-info-item-main {
  color: var(--color-text);
}
.Checkout-module__price-info-item-title {
  display: flex;
  flex: 1 auto;
}

.Checkout-module__tipsList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
}

.Checkout-module__tipsItem {
  border-radius: 1.375rem;
  padding: 0 0.75rem;
  height: 2.5rem;
  min-width: 5rem;
  line-height: 2.5rem;
  text-align: center;
  background: var(--color-primary-opacity);
  color: var(--color-primary);
  transition: background-color 200ms, color 200ms;
  cursor: pointer;
  font-weight: 500;
}
.Checkout-module__tipsItem:hover, .Checkout-module__tipsItem:focus {
  background: var(--color-primary-opacity-hover);
}
.Checkout-module__tipsItem_active {
  color: var(--color-white);
  background: var(--color-primary) !important;
}
.theme-dark .Checkout-module__tipsItem {
  color: var(--color-white);
}

.Checkout-module__invoice-info {
  border-top: 0.0625rem var(--color-borders) solid;
  padding: 0.5rem;
}

.Checkout-module__provider {
  float: left;
  background: no-repeat center;
  background-size: 2rem;
  border-radius: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 2rem;
}

.Checkout-module__provider.Checkout-module__stripe {
  background-image: url(/stripe-logo.c0c5683dcd30037389c3.png);
}

.Checkout-module__provider.Checkout-module__smartglocal {
  background-image: url(/smartglocal-logo.79242cc58c4b29e51f99.png);
}

.Checkout-module__checkout-info-item-info-title {
  font-size: 1rem;
  line-height: 1.4375rem;
  margin-bottom: 0;
  font-weight: 400;
  word-break: break-word;
  color: var(--color-text);
  text-transform: capitalize;
}
.Checkout-module__checkout-info-item-info-data {
  margin-bottom: 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.Checkout-module__tos-checkbox {
  padding-left: 4rem;
}
.Checkout-module__tos-checkbox .Checkbox-main::before, .Checkout-module__tos-checkbox .Checkbox-main::after {
  left: 0.6875rem;
}
/*!******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/payment/CardInput.scss ***!
  \******************************************************************************************************************************************************************************************************/
.CardInput {
  position: relative;
}
.CardInput .input-group.has-right-addon .form-control {
  padding-right: 4rem;
}
.CardInput .right-addon {
  position: absolute;
  top: 0.8125rem;
  right: 1rem;
  z-index: 8;
}
.CardInput .right-addon img {
  max-width: 2rem;
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/payment/PaymentInfo.scss ***!
  \********************************************************************************************************************************************************************************************************/
.PaymentInfo {
  padding: 0.5rem 1rem;
}
.PaymentInfo h5 {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin: 1rem 0 1.25rem;
}
.PaymentInfo .inline-inputs {
  display: flex;
  justify-content: space-between;
}
.PaymentInfo .inline-inputs .input-group {
  flex: 1 10rem;
  max-width: 45%;
  display: flex;
}
.PaymentInfo .description {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-top: -0.75rem;
  margin-bottom: 1.25rem;
}
/*!***********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/payment/ConfirmPayment.scss ***!
  \***********************************************************************************************************************************************************************************************************/
.ConfirmPayment {
  display: flex;
  height: 100%;
  border-bottom-left-radius: var(--border-radius-default-small);
  border-bottom-right-radius: var(--border-radius-default-small);
  overflow: hidden;
}
.ConfirmPayment__content {
  width: 100%;
  height: 100%;
  border: none;
}
/*!*********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/payment/PaymentModal.scss ***!
  \*********************************************************************************************************************************************************************************************************/
.PaymentModal.recurring .Transition {
  height: 33rem;
  max-height: calc(92vh - 8.375rem);
}
.PaymentModal .modal-backdrop {
  pointer-events: none;
}
.PaymentModal .header {
  position: relative;
  border-top-left-radius: var(--border-radius-default-small);
  border-top-right-radius: var(--border-radius-default-small);
  width: 100%;
  padding: 0.5rem 1rem 0.25rem;
  display: flex;
  align-items: center;
  flex-direction: row;
  background: var(--color-background);
}
.PaymentModal .header h3 {
  margin-bottom: 0;
  margin-left: 1.5rem;
  unicode-bidi: plaintext;
  text-align: initial;
}
.PaymentModal .Transition {
  height: min(27rem, 68vh);
}
.PaymentModal .empty-content {
  height: 25rem;
  max-height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.PaymentModal .receipt-content {
  height: 25rem;
  overflow-y: auto;
}
.PaymentModal .content {
  overflow: auto;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  position: relative;
}
.PaymentModal .footer {
  position: relative;
  bottom: 0;
  border-bottom-left-radius: var(--border-radius-default-small);
  border-bottom-right-radius: var(--border-radius-default-small);
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--color-background);
  border-top: 0.0625rem var(--color-borders) solid;
}
.PaymentModal .footer button {
  text-transform: none;
  font-weight: 500;
}
.PaymentModal .modal-dialog {
  width: 25rem;
}
.PaymentModal .modal-content {
  padding: 0;
  overflow: hidden;
}

@media screen and (max-device-width: 640px) and (max-height: 640px) and (orientation: landscape) {
  .PaymentModal .modal-dialog,
  .PaymentModal.recurring .modal-dialog {
    max-height: 100%;
  }
  .PaymentModal .Transition,
  .PaymentModal.recurring .Transition {
    height: 10rem;
  }
}
/*!******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/layouts/GlobalLayout/GlobalLayout.module.scss ***!
  \******************************************************************************************************************************************************************************************************************/
.GlobalLayout-module__bg {
  height: 100%;
  background-color: var(--theme-background-color);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (max-width: 600px) {
  .GlobalLayout-module__bg {
    height: calc(var(--vh, 1vh) * 100);
  }
}
html.theme-light .GlobalLayout-module__bg {
  background-image: url(/Wallpaper.eb222cd63b99ceb4a238.svg);
}
.GlobalLayout-module__bg::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: url(/chat-bg-pattern-light.ee148af944f6580293ae.png);
  background-position: top right;
  background-size: 510px auto;
  background-repeat: repeat;
  mix-blend-mode: overlay;
}
html.theme-dark .GlobalLayout-module__bg::before {
  background-image: url(/chat-bg-pattern-dark.ad38368a9e8140d0ac7d.png);
  mix-blend-mode: unset;
}
@media (max-width: 600px) {
  .GlobalLayout-module__bg::before {
    bottom: auto;
    height: calc(var(--vh, 1vh) * 100);
  }
}

.GlobalLayout-module__mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  z-index: var(--z-ui-loader-mask);
  display: flex;
}

.GlobalLayout-module__main {
  position: relative;
  height: 100%;
}

.GlobalLayout-module__left {
  flex: 1;
  background: var(--color-background);
  min-width: 16rem;
  width: 33vw;
  max-width: 26.5rem;
  height: 100%;
}
@media (min-width: 926px) {
  .GlobalLayout-module__left {
    max-width: 40vw;
  }
}
@media (min-width: 1276px) {
  .GlobalLayout-module__left {
    width: 25vw;
    max-width: 33vw;
  }
}
@media (max-width: 1275px) {
  .GlobalLayout-module__left {
    flex: 2;
  }
}
@media (max-width: 925px) {
  .GlobalLayout-module__left {
    width: 26.5rem !important;
  }
}
@media (max-width: 600px) {
  .GlobalLayout-module__left {
    max-width: none;
    width: 100vw !important;
  }
}

.GlobalLayout-module__middle {
  flex: 3;
  border-left: 1px solid var(--color-borders);
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-size: cover !important;
}
@media (max-width: 1275px) {
  .GlobalLayout-module__middle {
    border-right: none;
  }
}
@media (max-width: 600px) {
  .GlobalLayout-module__middle {
    display: none;
  }
}

.GlobalLayout-module__right {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  height: 100%;
  width: var(--right-column-width);
  border-left: 1px solid var(--color-borders);
  background: var(--color-background);
}

.GlobalLayout-module__blank {
  flex: 1;
  background-color: var(--color-background);
}

.GlobalLayout-module__header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 4rem;
  padding: 0 2.5rem 0 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-gray);
  z-index: 3;
}
@media (max-width: 480px) {
  .GlobalLayout-module__header {
    height: 2.5rem;
    padding: 0 1rem;
  }
}
/*!*****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/main/AppInactive.scss ***!
  \*****************************************************************************************************************************************************************************************************/
#AppInactive {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#AppInactive .content {
  max-width: 23rem;
  margin: auto;
  padding: 2rem;
  line-height: 1.28;
  text-align: center;
  background: var(--color-background);
  border-radius: var(--border-radius-default);
}
#AppInactive .title {
  margin-top: 1rem;
}
#AppInactive .description {
  color: #4d4d50;
  font-size: 0.875rem;
  margin: 1rem 0;
}
#AppInactive img {
  width: 100%;
  max-width: 20rem;
}
/*!*************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/ReCaptcha.scss ***!
  \*************************************************************************************************************************************************************************************************/
.captcha-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fafafa;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0.625rem 0.5rem 0.75rem;
  border: 1px solid #d6d6d6;
  border-radius: 2px;
}

.captcha-content {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.captcha-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.captcha-privacy {
  margin: 0;
  font-size: 0.5rem;
  color: #a6a6a6;
  font-weight: 500;
}
.captcha-privacy a {
  color: #a6a6a6;
}

.captcha-checkbox-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.captcha-checkbox-container.checked .captcha-checkbox {
  transition: all 0.25s;
  opacity: 0;
}
.captcha-checkbox-container.checked .captcha-checkbox-checkmark {
  transition: all 0.5s;
  width: 1.75rem;
}
.captcha-checkbox-container.error .captcha-spiner {
  opacity: 1;
  visibility: visible;
}
.captcha-checkbox-container.error .captcha-checkbox {
  transition: all 0.25s;
  opacity: 0;
}

.captcha-checkbox {
  display: inline-block;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid #c1c1c1;
  border-radius: 2px;
  background: white;
  transition: none;
  opacity: 1;
}
.captcha-checkbox:hover {
  border-color: #b2b2b2;
}

.captcha-checkbox-checkmark {
  position: absolute;
  left: 0;
  width: 0;
  height: 1.75rem;
  background-image: var(--captcha-checkmark-data);
  background-repeat: no-repeat;
  transition: none;
}

.captcha-spiner {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #f9f9f9;
  border: 6px solid #468ee5;
  border-radius: 1.5rem;
  border-bottom-color: transparent;
  border-left-color: transparent;
  box-sizing: content-box;
  outline: 0;
  opacity: 0;
  visibility: hidden;
  animation: spinner-spin linear 2.5s infinite;
  transition-duration: 1s;
}

@keyframes spinner-spin {
  0% {
    transform: rotateZ(0deg);
  }
  10% {
    transform: rotateZ(135deg);
  }
  25% {
    transform: rotateZ(245deg);
  }
  60% {
    transform: rotateZ(700deg);
  }
  75% {
    transform: rotateZ(810deg);
  }
  100% {
    transform: rotateZ(1080deg);
  }
}
/*!**********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/auth/Auth.scss ***!
  \**********************************************************************************************************************************************************************************************/
.Auth {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  overflow-y: auto;
}

.AuthHeader {
  position: fixed;
  top: 0;
  width: 100%;
  height: 4rem;
  padding: 0 2.5rem 0 1.5rem;
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-gray);
  background-color: var(--color-background);
  z-index: 3;
}
@media (max-height: 520px) {
  .AuthHeader {
    display: none;
  }
}
@media (max-width: 480px) {
  .AuthHeader {
    height: 2.5rem;
    padding: 0 1rem;
  }
}

.auth-section {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
}

.auth-form,
.register-form {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 23.75rem;
  text-align: center;
}
.auth-form.confirm-email,
.register-form.confirm-email {
  max-width: 24rem;
}
.auth-form .transition-block,
.register-form .transition-block {
  width: 100%;
}
@media (min-width: 600px) and (min-height: 450px) {
  .auth-form.qr,
  .register-form.qr {
    padding: 0;
    height: 100%;
  }
}
.auth-form #logo,
.auth-form .AvatarEditable label,
.register-form #logo,
.register-form .AvatarEditable label {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 7.5rem;
  height: 7.5rem;
  margin-bottom: 1.75rem;
}
@media (min-width: 600px) and (min-height: 450px) {
  .auth-form #logo,
  .auth-form .AvatarEditable label,
  .register-form #logo,
  .register-form .AvatarEditable label {
    width: 10rem;
    height: 10rem;
    margin-bottom: 2.5rem;
  }
}
body.is-electron .auth-form #logo,
body.is-electron .auth-form .AvatarEditable label,
body.is-electron .register-form #logo,
body.is-electron .register-form .AvatarEditable label {
  width: 6rem;
  height: 6rem;
  margin-bottom: 1.75rem;
}
.auth-form #logo,
.register-form #logo {
  background: url(/telegram-logo.1b2bb5b107f046ea9325.svg) center no-repeat;
  background-size: 100%;
}
.auth-form h1,
.register-form h1 {
  font-size: 1.25rem;
  line-height: 1;
}
@media (min-width: 600px) {
  .auth-form h1,
  .register-form h1 {
    font-size: 2rem;
    line-height: 1.5;
  }
}
.auth-form h3,
.register-form h3 {
  font-size: 1.125rem;
  text-align: left;
}
.auth-form .note,
.register-form .note {
  font-size: 0.875rem;
  line-height: 1.35;
  margin-bottom: 2.5rem;
  color: var(--color-text-secondary);
}
@media (min-width: 600px) {
  .auth-form .note,
  .register-form .note {
    font-size: 1rem;
    margin-bottom: 3rem;
  }
}
.auth-form .tab-nav,
.register-form .tab-nav {
  margin-top: 1rem;
}
.auth-form .tab-nav .Button,
.register-form .tab-nav .Button {
  font-size: 0.875rem;
}
.auth-form .text-muted,
.register-form .text-muted {
  line-height: 1.2;
}

.login-title {
  margin: 1.5rem 0 1.125rem;
}

.auth-form {
  padding: 4.5rem 0;
}
.auth-form .footer {
  position: fixed;
  display: flex;
  justify-content: center;
  width: 100%;
  left: 0;
  bottom: 0;
  margin-bottom: 1.625rem;
}
@media (max-height: 520px) {
  .auth-form .footer {
    position: static;
    margin-top: 2rem;
  }
}

.register-form {
  padding: 4.5rem 0 1rem 0;
}
.register-form .radio-group {
  display: flex;
  gap: 0.5rem;
}
.register-form .bubble {
  border-radius: 8px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.33;
  padding: 4px 8px;
}

.auth-password-form .radio-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1rem 1rem 0;
  border: 1px solid var(--color-borders-input);
  border-radius: 1rem;
}
.auth-password-form .Radio .Radio-main {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  line-height: 1.2;
}
.auth-password-form .Radio .Radio-main .subLabel {
  color: inherit;
}
.auth-password-form .terms {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
}
.auth-password-form .link {
  color: inherit;
  text-decoration: underline;
}

.register-form-wrap {
  padding-bottom: 1rem;
}

.bubble-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

#auth-registration-form,
#auth-phone-number-form,
#auth-code-form,
#auth-password-form,
#auth-qr-form,
#forgot-password,
#confirm-form {
  height: 100%;
}

@media (max-width: 768px) {
  #auth-password-form .auth-form:before,
  #auth-password-form .register-form:before,
  #auth-registration-form .auth-form:before,
  #auth-registration-form .register-form:before {
    display: block;
    content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAzIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMTAzIDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAuMTg3ODY2IDBWMjMuNDM1M0gyMy42Njk3VjE4LjYzNTNINi4yNzU3NVYxMy41NTI5SDEzLjgxMzFWOS4zMTc2NUg2LjI3NTc1VjMuMzg4MjRDNi4yNzU3NSAwLjkwMzUyOSAzLjc2MzI5IDAuMDk0MTE3NyAyLjUwNzA2IDBIMC4xODc4NjZaTTI4LjU5OCAwVjIzLjQzNTNINDcuNzMxM1YxOC42MzUzSDM0LjY4NTlWMEgyOC41OThaTTUxLjc4OTkgMFYyMy40MzUzSDcwLjkyMzJWMTguNjM1M0g1Ny44Nzc4VjBINTEuNzg5OVpNNzUuMjcxNyAyMy40MzUzVjEwLjQ0NzFDNzUuMzY4NCA2Ljk2NDcxIDc3LjY0ODkgMCA4NS45OTggMEgxMDIuODEyVjE0LjRDMTAyLjgxMiAxNy40MTE4IDEwMC45NTcgMjMuNDM1MyA5My41MzU0IDIzLjQzNTNINzUuMjcxN1pNODAuNDg5OSAxOC42MzUzVjEwLjg0MTdDODAuNTQ4OSA4LjgyNzc4IDgyLjIzMTEgNC44IDg3LjMyODUgNC44SDk3LjU5NFYxMy40MTAxQzk3LjU5NCAxNS4xNTE4IDk2LjQ2MTIgMTguNjM1MyA5MS45MzAyIDE4LjYzNTNIODAuNDg5OVpNMTEuMjA0IDBIMjMuMzc5OFYzLjM4ODI0QzIzLjM3OTggNC45Njk0MSAyMS44MzM3IDUuMzY0NzEgMjEuMDYwNiA1LjM2NDcxSDguODg0ODRWMS45NzY0N0M4Ljg4NDg0IDAuMzk1Mjk0IDEwLjQzMSAwIDExLjIwNCAwWiIgZmlsbD0iIzBBNDlBNSIvPgo8L3N2Zz4K);
  }
  .auth-form {
    padding: 5rem 0 1rem;
  }
  .register-form {
    padding-top: 5rem;
  }
}
#forgot-password .title,
#forgot-password .text-muted {
  width: 100%;
  text-align: left;
  margin-bottom: 2.875rem;
  font-size: 0.875rem;
}
#forgot-password .text-muted {
  margin-bottom: 1.375rem;
}

#auth-phone-number-form form {
  min-height: 26.25rem;
}
#auth-phone-number-form .Button {
  margin-top: 2.75rem;
}
#auth-phone-number-form .Button + .Button {
  margin-top: 1rem;
}

#auth-code-form,
#auth-password-form {
  position: relative;
}
#auth-code-form h1,
#auth-password-form h1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-number-edit {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  font-size: 1.5rem;
  color: var(--color-text-secondary);
  opacity: 0.75;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.auth-number-edit:hover, .auth-number-edit:focus {
  opacity: 1;
}

#auth-qr-form .qr-outer {
  height: 210px;
  width: 100%;
  position: relative;
}
#auth-qr-form .qr-inner,
#auth-qr-form .qr-loading {
  height: 210px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
}
#auth-qr-form .qr-inner {
  transition: none !important;
}
#auth-qr-form .qr-inner.enter {
  animation: qr-show 300ms ease-in-out forwards;
}
#auth-qr-form .qr-loading {
  transition: opacity 1ms;
}
#auth-qr-form .qr-plane {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  border-radius: 50%;
  background-color: var(--color-telegram-blue);
}
#auth-qr-form .qr-container {
  background-color: white;
  border-radius: var(--border-radius-default);
  overflow: hidden;
}
#auth-qr-form .title {
  width: 100%;
  text-align: left;
  margin: 2.875rem 0;
  font-size: 0.875rem;
}
#auth-qr-form ol {
  list-style: none;
  width: 100%;
  counter-reset: item;
  padding: 0;
  margin-bottom: 1.8125rem;
}
#auth-qr-form ol li {
  counter-increment: item;
  text-align: left;
  margin: 0;
  font-size: 0.875rem;
}

.verify-timer-wpapper p:not(.verify-timer) {
  font-size: 0.875rem;
}

#sign-in-password {
  word-break: normal !important;
}

@keyframes qr-show {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  30% {
    opacity: 0.5;
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.form-submit {
  align-items: center;
  width: 100%;
}
.form-submit button:not(.full-width) {
  width: 100%;
  max-width: 225px;
}
.form-submit--margin {
  margin-top: -15px;
}

.banner-link {
  margin-bottom: 1rem;
}
.banner-link .img-wrap {
  margin-bottom: 0.5rem;
  height: 176px;
  overflow: hidden;
  border-radius: 0.5rem;
  position: relative;
  background: #000;
}
.banner-link .img-wrap img {
  transition: all 0.3s ease-in-out;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner-link .img-wrap::before {
  content: "";
  position: absolute;
  height: 200%;
  width: 15%;
  left: -20%;
  background-color: rgba(255, 255, 255, 0.5);
  transform: rotate(-45deg) translate(0, -35%);
  transition: all 0.3s ease;
}
.banner-link:hover .img-wrap:before {
  left: 150%;
}
.banner-link:hover .img-wrap img {
  opacity: 0.8;
  transform: scale(1.1);
}
.banner-link:hover .title::after {
  margin-left: 5px;
}
.banner-link .title {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.banner-link .title::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0.4375rem;
  height: 0.4375rem;
  border: solid var(--color-text);
  transform: rotate(45deg) translateX(0);
  border-width: 2px 2px 0 0;
  border-radius: 2px;
  margin-top: 1px;
  transition: all 0.3s ease-in-out;
}

.go-info {
  width: 100%;
  padding: 1rem;
  margin-top: 1.5rem;
  background-color: var(--color-background-secondary);
  border-radius: var(--border-radius-default);
}
.go-info .title {
  margin-bottom: 0.625rem;
}
.go-info .Button {
  color: var(--color-primary);
}

.infoAccount .AuthHeader {
  border: none;
  background-color: transparent;
}
.infoAccount .account-info-container {
  height: 100%;
}
.infoAccount .auth-section {
  background: linear-gradient(#c1e0f5, #fcf5eb);
}
.infoAccount .Auth .account-info-content {
  height: 100%;
  max-width: 47rem;
  margin: 0 auto;
  padding: 6.125rem 1rem 1rem;
}
.infoAccount .text-bubble {
  font-size: 0.875rem;
  line-height: 1.3;
  margin-bottom: 0.625rem;
}

.verifi-input-wrap {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(6, 1fr);
  margin: 1.5rem auto 2.125rem;
  max-width: 330px;
  position: relative;
}
.verifi-input-wrap .form-control {
  text-align: center;
  border-radius: var(--border-radius-default-small);
  padding-left: calc(1rem - var(--border-width));
  padding-right: calc(1rem - var(--border-width));
}
.verifi-input-wrap .input-notification--error {
  font-size: 0.875rem;
  position: absolute;
  top: 100%;
  margin-top: 0.5rem;
  line-height: 1 !important;
  color: var(--color-error);
}

.auth-blocked-user h2 {
  font-weight: bold;
  line-height: 1.1;
}
.auth-blocked-user p {
  line-height: 1.19;
}

.mail-sent {
  position: absolute;
  inset: 0;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-background);
  visibility: hidden;
  opacity: 0;
  transform: scale(0.1);
  transition: all var(--select-transition);
}
.mail-sent.show {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
.mail-sent h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.mail-sent p {
  max-width: 23.5rem;
  text-align: center;
  line-height: 1.2;
}

.social-auth {
  display: flex;
  justify-content: space-around;
  gap: 2.5rem;
  font-size: 0.75rem;
  line-height: 1.16;
  color: var(--color-text-secondary);
  margin-top: 1rem;
}
.social-auth .social-auth-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  cursor: pointer;
}

@media (max-height: 520px) {
  .register-form {
    padding-top: 1rem;
  }
}
@media (max-width: 480px) {
  .Auth {
    padding-top: 2.5rem;
  }
  .auth-form {
    padding: 0.5rem;
  }
  .register-form {
    padding: 1rem;
  }
}
.text-red {
  color: var(--color-error);
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  margin-top: 8px;
}
/*!****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/left/LeftColumn.scss ***!
  \****************************************************************************************************************************************************************************************************/
#NewChat {
  height: 100%;
}

.left-header {
  position: relative;
  height: var(--header-height);
  padding: 0 1rem;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  background-color: var(--color-background);
}
.left-header h4,
.left-header h3 {
  margin-bottom: 0;
  -webkit-user-select: none;
          user-select: none;
}
.left-header .SearchInput {
  margin-left: 0.5rem;
  max-width: calc(100% - 1rem);
}
@media (max-width: 600px) {
  .left-header .SearchInput {
    max-width: calc(100% - 1rem);
  }
}
@media (max-width: 600px) {
  .left-header {
    padding: 0.5rem;
    --header-height: 3.5rem;
  }
}
.left-header .Button.smaller {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
}
.left-header .Button.smaller + .DropdownMenu {
  margin-left: 0.25rem;
}
.left-header .Button.link {
  font-size: 0.75rem;
  gap: 0.25rem;
}

.left-column-main .button-go-explore {
  transition: padding-right 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.left-column-main.revealed-button .button-go-explore {
  padding-right: 3rem;
}
@media (max-width: 600px) {
  .left-column-main.revealed-button .button-go-explore {
    padding-right: 3.5rem;
  }
}
/*!***********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/left/main/LeftMainMenu.scss ***!
  \***********************************************************************************************************************************************************************************************************/
.LeftMainMenu {
  display: flex;
  border-top: 1px solid #fff;
  box-shadow: 0 -0.041744rem 0.1252325rem var(--color-default-shadow);
  position: relative;
  z-index: var(--z-forum-panel);
  background: var(--color-background);
}
.LeftMainMenu .MenuItem {
  padding: 0.5rem 0;
  font-size: 0.75rem;
  line-height: 1;
  flex: 1 1;
  overflow: visible;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all var(--select-transition);
  color: var(--color-text-secondary);
}
.LeftMainMenu .MenuItem path {
  transition: all var(--select-transition);
}
.LeftMainMenu .MenuItem path:not([fill]) {
  stroke: var(--color-text-secondary);
}
.LeftMainMenu .MenuItem path:not([stroke]) {
  fill: var(--color-text-secondary);
}
.LeftMainMenu .MenuItem:hover, .LeftMainMenu .MenuItem.active {
  background-color: var(--color-background);
  color: var(--color-primary);
}
.LeftMainMenu .MenuItem:hover:after, .LeftMainMenu .MenuItem.active:after {
  width: 100%;
  background-color: var(--color-primary);
}
.LeftMainMenu .MenuItem:hover path:not([fill]), .LeftMainMenu .MenuItem.active path:not([fill]) {
  stroke: var(--color-primary);
}
.LeftMainMenu .MenuItem:hover path:not([stroke]), .LeftMainMenu .MenuItem.active path:not([stroke]) {
  fill: var(--color-primary);
}
.LeftMainMenu .MenuItem:after {
  content: "";
  position: absolute;
  bottom: 0.25rem;
  width: 0%;
  max-width: 2.625rem;
  height: 0.25rem;
  background-color: var(--color-white);
  border-radius: 0.25rem 0.25rem 0 0;
  transform: translateY(0.25rem);
  transition: all var(--select-transition);
}
.LeftMainMenu .MenuItem i {
  margin-right: 0;
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/ProfilePhoto.scss ***!
  \********************************************************************************************************************************************************************************************************/
.ProfilePhoto {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.ProfilePhoto .avatar-media {
  width: 100%;
  object-fit: cover;
}
.ProfilePhoto .spinner-wrapper {
  width: 100%;
  height: 100%;
}
.ProfilePhoto .spinner-wrapper, .ProfilePhoto.deleted-account, .ProfilePhoto.replies-bot-account, .ProfilePhoto.no-photo, .ProfilePhoto.saved-messages {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  background: linear-gradient(var(--color-white) -125%, var(--color-user));
  cursor: default;
}
.ProfilePhoto.no-photo {
  font-size: 14rem;
  white-space: nowrap;
}
.ProfilePhoto.no-photo.user {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ProfilePhoto.no-photo.user:not(.deleted-account)::before, .ProfilePhoto.no-photo.user:not(.deleted-account)::after {
  content: "";
  background-color: #68a2f7;
  border-radius: 50%;
}
.ProfilePhoto.no-photo.user:not(.deleted-account)::before {
  width: 30%;
  height: 30%;
}
.ProfilePhoto.no-photo.user:not(.deleted-account)::after {
  width: 50%;
  height: 30%;
}
.ProfilePhoto.phoenix-bg {
  background-image: linear-gradient(0deg, #391366 0%, #391366 100%);
}
.ProfilePhoto.replies-bot-account, .ProfilePhoto.deleted-account, .ProfilePhoto.saved-messages {
  font-size: 10rem;
}
.ProfilePhoto.no-bg .thumb {
  z-index: 0;
}
.ProfilePhoto .thumb {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.ProfilePhoto .thumb:not(.shown),
.ProfilePhoto .avatar-media:not(.shown) {
  display: block !important;
  object-fit: cover;
}
/*!*******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/ProfileInfo.scss ***!
  \*******************************************************************************************************************************************************************************************************/
.ProfileInfo {
  aspect-ratio: 1/1;
  position: relative;
}
@supports not (aspect-ratio: 1/1) {
  .ProfileInfo::before {
    float: left;
    padding-top: 100%;
    content: "";
  }
  .ProfileInfo::after {
    display: block;
    content: "";
    clear: both;
  }
}
.ProfileInfo .title svg:not(.VerifiedIcon) {
  flex-shrink: 0;
}
.ProfileInfo .title svg:not(.VerifiedIcon) [stroke] {
  stroke: white;
}
.ProfileInfo .title svg:not(.VerifiedIcon) [fill] {
  fill: white;
}
.ProfileInfo .title .VerifiedIcon,
.ProfileInfo .title .PremiumIcon {
  --color-fill: var(--color-white);
  --color-checkmark: var(--color-primary);
  z-index: 2;
  opacity: 0.8;
}
.ProfileInfo .title .VerifiedIcon circle,
.ProfileInfo .title .PremiumIcon circle {
  fill: var(--color-checkmark);
}
.ProfileInfo .fullName {
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.375rem;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 0;
  color: white;
}
.ProfileInfo .fullName svg {
  vertical-align: bottom;
}
.ProfileInfo .emoji:not(.custom-emoji) {
  width: 1.5rem;
  height: 1.5rem;
  background-size: 1.5rem;
}
.ProfileInfo .custom-emoji {
  --custom-emoji-size: 1.5rem;
  color: var(--color-white);
  pointer-events: auto;
  cursor: pointer;
}

.profile-info .switcher-wrap {
  border-left: 0.5px solid rgba(var(--color-borders-rgb), 0.5);
}
/*!**************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/ProfileInfo.module.scss ***!
  \**************************************************************************************************************************************************************************************************************/
.ProfileInfo-module__self {
  overflow: hidden;
}
.ProfileInfo-module__self.ghost {
  margin: 0;
}
.ProfileInfo-module__self .ProfileInfo-module__status {
  line-height: 1rem;
}

.ProfileInfo-module__fallbackPhoto {
  position: absolute;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: 0.25s ease-in-out opacity;
}

.ProfileInfo-module__fallbackPhotoContents {
  display: flex;
  font-size: 0.75rem;
  color: var(--color-white);
  opacity: 0.5;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  align-items: center;
  height: 1.5rem;
  pointer-events: none;
  transition: 0.25s ease-in-out opacity;
}
.ProfileInfo-module__fallbackPhotoContents:hover {
  opacity: 1;
}

.ProfileInfo-module__fallbackPhotoVisible {
  opacity: 1;
}
.ProfileInfo-module__fallbackPhotoVisible .ProfileInfo-module__fallbackPhotoContents {
  pointer-events: all;
}

.ProfileInfo-module__fallbackPhotoAvatar {
  margin-right: 0.5rem;
}

.ProfileInfo-module__photoWrapper {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}
.ProfileInfo-module__photoWrapper > .Transition {
  width: 100%;
  height: 100%;
}

.ProfileInfo-module__photoDashes {
  position: absolute;
  width: 100%;
  height: 0.125rem;
  padding: 0 0.375rem;
  z-index: 2;
  display: flex;
  top: 0.5rem;
  left: 0;
}

.ProfileInfo-module__photoDash {
  flex: 1 1 auto;
  background-color: var(--color-white);
  opacity: 0.25;
  border-radius: 0.125rem;
  margin: 0 0.125rem;
  transition: opacity 300ms ease;
}
.ProfileInfo-module__photoDash_current {
  opacity: 0.75;
}

.ProfileInfo-module__navigation {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25%;
  border: none;
  padding: 0;
  margin: 0;
  appearance: none;
  background: transparent no-repeat;
  background-size: 1.25rem;
  opacity: 0.25;
  transition: opacity 0.15s;
  outline: none !important;
  cursor: pointer;
  z-index: 1;
}
.ProfileInfo-module__navigation:hover, .is-touch-env .ProfileInfo-module__navigation {
  opacity: 1;
}
.ProfileInfo-module__navigation_prev {
  left: 0;
  background-image: url(/media_navigation_previous.11f3cfece8fead5a78e6.svg);
  background-position: 1.25rem 50%;
}
.ProfileInfo-module__navigation_prev[dir=rtl] {
  left: auto;
  right: 0;
  transform: scaleX(-1);
}
.ProfileInfo-module__navigation_next {
  right: 0;
  background-image: url(/media_navigation_next.3d6e264d21e73ad72573.svg);
  background-position: calc(100% - 1.25rem) 50%;
}
.ProfileInfo-module__navigation_next[dir=rtl] {
  left: 0;
  right: auto;
  transform: scaleX(-1);
}

.ProfileInfo-module__info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 100px;
  padding: 0 1.5rem 1rem;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}
.ProfileInfo-module__info:dir(rtl) .ProfileInfo-module__status {
  text-align: right;
  unicode-bidi: plaintext;
}
.ProfileInfo-module__info[dir=rtl] .ProfileInfo-module__status {
  text-align: right;
  unicode-bidi: plaintext;
}
.ProfileInfo-module__info .Button.smaller.round {
  position: absolute;
  right: 1.25rem;
  bottom: 1rem;
  width: 2.4375rem;
  height: 2.4375rem;
  min-width: 2.4375rem;
}
.ProfileInfo-module__info .Button.dark {
  background-color: rgba(0, 0, 0, 0.6);
}
.ProfileInfo-module__info p {
  font-size: 0.875rem;
  margin-bottom: 0;
}
.ProfileInfo-module__info p span {
  color: var(--color-gray);
}

.ProfileInfo-module__status {
  font-size: 0.875rem;
  opacity: 0.5;
}

.ProfileInfo-module__topicContainer {
  --custom-emoji-size: 7.5rem;
  padding: 1rem 1rem 0.75rem;
}

.ProfileInfo-module__topicTitle {
  font-size: 1.25rem;
  line-height: 1.5rem;
  text-align: center;
  margin: 0.5rem 0 0;
}

.ProfileInfo-module__topicIcon {
  margin: auto;
  width: 7.5rem !important;
  height: 7.5rem !important;
  display: flex !important;
}
.ProfileInfo-module__topicIcon.general-forum-icon {
  font-size: 7.5rem;
  color: var(--color-text-secondary);
}

.ProfileInfo-module__topicIconTitle {
  font-size: 3rem !important;
  font-weight: 400;
}
.ProfileInfo-module__topicIconTitle .emoji-small {
  width: 3rem;
  height: 3rem;
}

.ProfileInfo-module__topicMessagesCounter {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-text-secondary);
  margin: 0;
  text-align: center;
}

.ProfileInfo-module__button {
  position: absolute;
  bottom: 1rem;
  right: 1.25rem;
  z-index: 2;
}
/*!*************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/ModalList.scss ***!
  \*************************************************************************************************************************************************************************************************/
.modal-list {
  position: absolute;
  bottom: 25px;
  right: -155px;
  display: flex;
  flex-direction: column;
  gap: 21px;
  width: max-content;
  padding: 20px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.modal-list__item {
  display: flex;
  align-items: center;
  gap: 16px;
}
/*!****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/left/Calls/CallsSidebarMain.scss ***!
  \****************************************************************************************************************************************************************************************************************/
.calls-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  --color-message-reaction: #f2f2f2;
}
.calls-wrap .left-header {
  justify-content: center;
}
.calls-wrap .ListItem::before {
  content: "";
  position: absolute;
  top: 0;
  left: 4.1625rem;
  right: 0;
  height: 0.02rem;
  background-color: var(--color-underline);
}
.calls-wrap .ListItem .status {
  gap: 0.625rem;
}
.calls-wrap .ListItem .status .icon-svg {
  transform: rotateZ(180deg);
}
.calls-wrap .ListItem .status .icon-svg.incoming {
  transform: rotateZ(0);
}
.calls-wrap .ListItem .status .icon-svg.incoming.missed [stroke] {
  stroke: var(--color-error);
}
.calls-wrap .ListItem.chat-item-clickable .ListItem-button {
  padding-top: 0.34375rem;
  padding-bottom: 0.34375rem;
}
.calls-wrap .Avatar.size-medium {
  width: 2.9375rem;
  height: 2.9375rem;
}
.calls-wrap .left-header .destructive {
  position: absolute;
  right: 0.5rem;
}
/*!*****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/left/ConnectionStatusOverlay.scss ***!
  \*****************************************************************************************************************************************************************************************************************/
.connection-state-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: transform 300ms ease, opacity 300ms ease;
  opacity: 1;
}
.connection-state-wrapper:not(.open) {
  transform: translateY(-3rem);
  opacity: 0;
}
.connection-state-wrapper:not(.shown) {
  display: none;
}

#ConnectionStatusOverlay {
  height: 2.9375rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin: 0.375rem 0.5rem;
  padding: 0 0.75rem;
  background: var(--color-yellow);
  border-radius: var(--border-radius-default);
}
#ConnectionStatusOverlay.interactive {
  cursor: pointer;
}
#ConnectionStatusOverlay > .Spinner {
  --spinner-size: 1.75rem;
}
#ConnectionStatusOverlay > .state-text {
  flex: 1;
  color: var(--color-text-lighter);
  font-size: 0.9375rem;
  font-weight: 500;
  padding-bottom: 0.0625rem;
  margin-inline-start: 1.875rem;
  white-space: nowrap;
}
@media (max-width: 950px) {
  #ConnectionStatusOverlay > .state-text {
    margin-inline-start: 1.25rem;
  }
}
#ConnectionStatusOverlay .Transition {
  width: 100%;
  min-width: 0;
}
#ConnectionStatusOverlay .Transition > div {
  display: flex;
  align-items: center;
  width: 100%;
}
/*!*************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/left/main/LeftMainHeader.scss ***!
  \*************************************************************************************************************************************************************************************************************/
#LeftMainHeader .DropdownMenuFiller {
  width: 2.5rem;
  height: 2.5rem;
}
#LeftMainHeader .DropdownMenu.rtl {
  transition: var(--slide-transition) transform;
  position: absolute;
  z-index: 2;
}
#LeftMainHeader .DropdownMenu.rtl.right-aligned {
  transform: translateX(calc(clamp(var(--left-column-min-width), var(--left-column-width), var(--left-column-max-width)) - 4.375rem));
}
#LeftMainHeader .DropdownMenu.rtl.disable-transition {
  transition: none;
}
#LeftMainHeader .animated-menu-icon, #LeftMainHeader .animated-menu-icon::before, #LeftMainHeader .animated-menu-icon::after {
  width: 1.125rem;
  height: 0.125rem;
  border-radius: 0.125rem;
  background-color: var(--color-text-secondary);
  transition: transform 0.25s;
  transform: rotate(0);
}
#LeftMainHeader .animated-menu-icon::before, #LeftMainHeader .animated-menu-icon::after {
  position: absolute;
  left: 0;
  content: "";
}
#LeftMainHeader .animated-menu-icon::before {
  top: -0.3125rem;
}
#LeftMainHeader .animated-menu-icon::after {
  top: 0.3125rem;
}
#LeftMainHeader .animated-menu-icon.state-back {
  transform: rotate(180deg);
}
#LeftMainHeader .animated-menu-icon.state-back::before {
  transform: rotate(45deg) scaleX(0.75) translate(0.375rem, -0.1875rem);
}
#LeftMainHeader .animated-menu-icon.state-back::after {
  transform: rotate(-45deg) scaleX(0.75) translate(0.375rem, 0.1875rem);
}
#LeftMainHeader .animated-menu-icon.no-animation {
  transition: none;
}
#LeftMainHeader .animated-menu-icon.no-animation::before, #LeftMainHeader .animated-menu-icon.no-animation::after {
  transition: none;
}
#LeftMainHeader .MenuItem.compact .Switcher {
  transform: scale(0.75);
}
#LeftMainHeader .Menu .bubble {
  min-width: 17rem;
  max-height: calc(100 * var(--vh) - 3.75rem);
  overflow-y: auto;
}
@supports (overflow-y: overlay) {
  #LeftMainHeader .Menu .bubble {
    overflow-y: overlay;
    overflow-x: hidden;
  }
}
#LeftMainHeader .extra-spacing {
  position: relative;
  margin-left: 0.8125rem;
}
#LeftMainHeader .emoji-status-effect {
  top: 50%;
  left: 50%;
}
#LeftMainHeader .emoji-status {
  --custom-emoji-size: 1.5rem;
  color: var(--color-primary);
}
#LeftMainHeader .PremiumIcon {
  width: 1.5rem;
  height: 1.5rem;
}
.Transition_slide:not(.Transition_slide-active) #LeftMainHeader .Menu .bubble {
  transition: none !important;
}
#LeftMainHeader .SearchInput {
  transition: opacity var(--layer-transition);
}
#LeftMainHeader .SearchInput--hidden {
  opacity: 0;
  pointer-events: none;
}
#LeftMainHeader .btn-block {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-grow: 1;
}
#LeftMainHeader .width-in {
  flex-grow: 1;
}
#LeftMainHeader h4 {
  margin: 0;
  padding-left: 0.75rem;
  white-space: nowrap;
}
#LeftMainHeader h4.is-feed {
  padding: 0;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}
#LeftMainHeader .header-banner {
  height: 39px;
  margin: 0 1rem;
  border-radius: 0.625rem;
  overflow: hidden;
}
#LeftMainHeader .header-banner img {
  width: 100%;
  border-radius: 0.625rem;
}
/*!*******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/left/NewChatButton.scss ***!
  \*******************************************************************************************************************************************************************************************************/
.NewChatButton {
  position: absolute;
  right: 1rem;
  bottom: 0.875rem;
  z-index: 2;
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(5rem);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  --color-interactive-element-hover: white;
}
.NewChatButton[dir=rtl] {
  right: auto;
  left: 1rem;
}
.NewChatButton .translucent {
  width: 2.25rem;
  height: 2.25rem;
  background-color: white;
  padding: 0;
}
body.animation-level-0 .NewChatButton {
  transform: none !important;
  opacity: 0;
  transition: opacity 0.15s;
}
body.animation-level-0 .NewChatButton.revealed {
  opacity: 1;
}
.NewChatButton.revealed {
  transform: translateY(0);
  opacity: 1;
}
@media (max-width: 600px) {
  .NewChatButton.revealed {
    transform: translate3d(0, 0, 0.625rem);
    transform-style: preserve-3d;
  }
}
.NewChatButton > .Button {
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
}
.NewChatButton > .Button .icon-svg {
  position: absolute;
}
.NewChatButton > .Button:not(.active) .plus {
  animation: grow-icon 0.4s ease-out;
}
.NewChatButton > .Button:not(.active) .close {
  animation: hide-icon 0.4s forwards ease-out;
}
.NewChatButton > .Button.active .close {
  animation: grow-icon 0.4s ease-out;
}
.NewChatButton > .Button.active .plus {
  animation: hide-icon 0.4s forwards ease-out;
}
.NewChatButton .MenuItem {
  padding: 0.7rem 1.3rem;
}
/*!***********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/message/Message.scss ***!
  \***********************************************************************************************************************************************************************************************************/
.message-content {
  position: relative;
  max-width: var(--max-width);
}
@media (max-width: 600px) {
  .message-content:not(.is-feed) {
    max-width: min(29rem, 100vw - 4.25rem);
  }
  .MessageList.no-avatars .message-content {
    max-width: min(29rem, 100vw - 3.75rem);
  }
  .Message.own .message-content {
    max-width: min(30rem, 100vw - 3.75rem);
  }
  .message-content.has-action-button {
    max-width: min(29rem, 100vw - 7rem);
  }
  .MessageList.no-avatars .message-content.has-action-button {
    max-width: min(29rem, 100vw - 4.5rem);
  }
  .Message.own .message-content.has-action-button {
    max-width: min(30rem, 100vw - 4.5rem);
  }
}
.message-content img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
          user-select: none;
}
.message-content .emoji {
  -webkit-user-drag: none;
  -webkit-user-select: text;
          user-select: text;
}
.message-content .text-content,
.message-content .transcription {
  margin: 0;
  word-break: break-word;
  white-space: pre-wrap;
  line-height: 1.3125;
  text-align: initial;
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  unicode-bidi: plaintext;
  border-radius: 0.25rem;
  position: relative;
}
.message-content .text-content > span,
.message-content .transcription > span {
  flex-grow: 1;
}
.message-content .text-content > span.MessageMeta,
.message-content .transcription > span.MessageMeta {
  align-self: flex-end;
}
.message-content .transcription + .text-content {
  margin-top: 0.5rem;
}
.message-content .transcription .DotAnimation {
  display: inline;
}
.message-content .transcription .DotAnimation .ellipsis {
  display: inline-flex;
}
.message-content .transcription.transcription-error {
  color: var(--color-text-meta);
  font-size: 0.875rem;
}
.own .message-content .transcription.transcription-error {
  color: var(--color-message-meta-own);
}
.message-content .translation-animation {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.message-content .text-loading {
  --background-gradient-size: 20rem;
  --animation-color: var(--color-skeleton-background);
  background-image: linear-gradient(to right, transparent 10%, var(--animation-color) 50%, transparent 90%);
  background-size: var(--background-gradient-size);
  display: inline;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  color: transparent;
  border-radius: 0.25rem;
  animation: text-loading 1.5s linear infinite;
}
.theme-dark .message-content .text-loading {
  --animation-color: var(--color-skeleton-foreground);
}
.message-content .text-loading .emoji {
  opacity: 0;
}
.message-content .text-entity-link {
  unicode-bidi: plaintext;
}
.message-content.with-voice-transcription > .MessageMeta {
  position: relative;
  top: 0.375rem;
  bottom: auto !important;
  float: right;
  line-height: 1.35;
  height: calc(var(--message-meta-height, 1rem));
  margin-left: 0.4375rem;
  margin-right: -0.5rem;
}
.message-content.with-voice-transcription > .MessageMeta .MessageOutgoingStatus .Transition {
  max-height: calc(var(--message-meta-height, 1rem));
  overflow: hidden;
}
html[data-message-text-size="12"] .message-content.with-voice-transcription > .MessageMeta {
  top: 0.25rem;
}
html[data-message-text-size="17"] .message-content.with-voice-transcription > .MessageMeta {
  top: 0.4375rem;
}
html[data-message-text-size="18"] .message-content.with-voice-transcription > .MessageMeta, html[data-message-text-size="19"] .message-content.with-voice-transcription > .MessageMeta {
  top: 0.5rem;
}
html[data-message-text-size="20"] .message-content.with-voice-transcription > .MessageMeta {
  top: 0.5625rem;
}
.message-content.with-voice-transcription:dir(rtl) > .MessageMeta {
  float: left;
  margin-left: -0.25rem;
  margin-right: 0.4375rem;
}
.message-content .MessageMeta.reactions-offset .MessageOutgoingStatus .Transition {
  max-height: calc(var(--message-meta-height, 1rem));
  overflow: hidden;
}
html[data-message-text-size="12"] .message-content .MessageMeta.reactions-offset {
  top: 0.25rem;
}
html[data-message-text-size="17"] .message-content .MessageMeta.reactions-offset {
  top: 0.4375rem;
}
html[data-message-text-size="18"] .message-content .MessageMeta.reactions-offset, html[data-message-text-size="19"] .message-content .MessageMeta.reactions-offset {
  top: 0.5rem;
}
html[data-message-text-size="20"] .message-content .MessageMeta.reactions-offset {
  top: 0.5625rem;
}
.message-content.with-voice-transcription::after, .message-content.document:not(.text)::after {
  content: "";
  display: block;
  clear: both;
}
.message-content.with-voice-transcription .MessageMeta[dir=rtl] {
  float: left;
  margin-right: 0.4375rem;
  margin-left: -0.5rem;
}
.theme-dark .Message.own .message-content .text-entity-link {
  text-decoration: underline !important;
}
.theme-dark .Message.own .message-content .text-entity-link:hover {
  text-decoration: none !important;
}
.message-content:not(.custom-shape) {
  font-size: var(--message-text-size, 1rem);
}
body.is-ios .message-content:not(.custom-shape) {
  font-size: var(--message-text-size, 1.0625rem);
}
.message-content:not(.custom-shape) > .content-inner {
  min-width: 8.75rem;
}
.message-content .matching-text-highlight {
  color: var(--color-text);
  background: #cae3f7;
  border-radius: 0.25rem;
  padding: 0 0.125rem;
}
.theme-dark .message-content .matching-text-highlight {
  --color-text: #000;
}
.message-content .message-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc(var(--message-text-size, 1rem) - 0.125rem);
  padding-top: 0.25rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--accent-color);
  unicode-bidi: plaintext;
  display: flex;
}
.message-content .message-title .message-title-name {
  display: flex;
  align-items: center;
}
.message-content .message-title > .interactive {
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: plaintext;
}
.message-content .message-title.interactive, .message-content .message-title > .interactive {
  cursor: pointer;
}
.message-content .message-title.interactive:hover, .message-content .message-title > .interactive:hover {
  opacity: 0.85;
}
.message-content .message-title > .color-1 {
  color: var(--color-user-1);
}
.message-content .message-title > .color-1 .custom-emoji {
  color: var(--color-user-1);
}
.message-content .message-title > .color-1 .PremiumIcon {
  --color-fill: var(--color-user-1);
}
.message-content .message-title > .color-2 {
  color: var(--color-user-2);
}
.message-content .message-title > .color-2 .custom-emoji {
  color: var(--color-user-2);
}
.message-content .message-title > .color-2 .PremiumIcon {
  --color-fill: var(--color-user-2);
}
.message-content .message-title > .color-3 {
  color: var(--color-user-3);
}
.message-content .message-title > .color-3 .custom-emoji {
  color: var(--color-user-3);
}
.message-content .message-title > .color-3 .PremiumIcon {
  --color-fill: var(--color-user-3);
}
.message-content .message-title > .color-4 {
  color: var(--color-user-4);
}
.message-content .message-title > .color-4 .custom-emoji {
  color: var(--color-user-4);
}
.message-content .message-title > .color-4 .PremiumIcon {
  --color-fill: var(--color-user-4);
}
.message-content .message-title > .color-5 {
  color: var(--color-user-5);
}
.message-content .message-title > .color-5 .custom-emoji {
  color: var(--color-user-5);
}
.message-content .message-title > .color-5 .PremiumIcon {
  --color-fill: var(--color-user-5);
}
.message-content .message-title > .color-6 {
  color: var(--color-user-6);
}
.message-content .message-title > .color-6 .custom-emoji {
  color: var(--color-user-6);
}
.message-content .message-title > .color-6 .PremiumIcon {
  --color-fill: var(--color-user-6);
}
.message-content .message-title > .color-7 {
  color: var(--color-user-7);
}
.message-content .message-title > .color-7 .custom-emoji {
  color: var(--color-user-7);
}
.message-content .message-title > .color-7 .PremiumIcon {
  --color-fill: var(--color-user-7);
}
.message-content .message-title > .color-8 {
  color: var(--color-user-8);
}
.message-content .message-title > .color-8 .custom-emoji {
  color: var(--color-user-8);
}
.message-content .message-title > .color-8 .PremiumIcon {
  --color-fill: var(--color-user-8);
}
.theme-dark .Message.own .message-content .message-title > .color-1 {
  color: var(--accent-color);
}
.message-content .message-title + .File {
  margin-top: 0.25rem;
}
.message-content .message-title .via {
  padding-right: 0.25rem;
  font-weight: 400;
}
.message-content .message-title span + .via {
  padding-left: 0.25rem;
}
.message-content .message-title .custom-emoji {
  margin-left: 0.25rem;
}
.message-content .message-title .PremiumIcon {
  vertical-align: middle;
  opacity: 0.5;
  margin-left: 0.25rem;
  margin-top: -2px;
}
.message-content .message-title .admin-title {
  flex: 1;
  margin-left: 1rem;
  text-align: right;
  font-weight: 400;
  font-size: 0.75rem;
  margin-top: -0.125rem;
  color: rgba(var(--color-text-meta-rgb), 0.75);
}
.Message.own .message-content .message-title .admin-title {
  color: var(--accent-color);
}
.message-content.custom-shape {
  line-height: 1.2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
}
.message-content.custom-shape .message-title {
  background-color: rgba(7, 7, 8, 0.45);
  border-radius: 0.5rem;
  padding: 0.5rem;
  color: white;
}
.message-content.custom-shape.has-comments {
  min-height: 5.25rem;
  margin-top: 0 !important;
}
.message-content.custom-shape.has-comments.has-replies {
  min-height: 6.5rem;
}
.message-content.custom-shape.has-subheader {
  max-width: 100%;
}
.message-content.custom-shape .with-subheader {
  display: flex;
  align-items: flex-start;
  flex-direction: row-reverse;
  direction: ltr;
}
.message-content.custom-shape .with-subheader > p {
  margin-bottom: 0;
}
.message-content.custom-shape .with-subheader .EmbeddedMessage {
  border-radius: var(--border-radius-messages);
}
@media (max-width: 600px) {
  .message-content.custom-shape .with-subheader .EmbeddedMessage {
    max-width: calc(90vw - 13rem);
  }
}
@media (max-width: 340px) {
  .message-content.custom-shape .with-subheader .EmbeddedMessage {
    margin-left: -1rem;
    z-index: 1;
    max-width: calc(90vw - 12rem);
  }
}
.message-content.custom-shape .with-subheader .message-subheader {
  gap: 0.5rem;
  margin-left: 0.5rem;
}
.message-content.custom-shape .message-media-duration {
  background: var(--color-black-opacity-60);
}
.message-content.custom-shape .text-content {
  padding-bottom: 1.5rem;
}
.message-content.custom-shape .media-inner {
  line-height: 1;
  font-size: 1rem;
  flex-shrink: 0;
}
.message-content.custom-shape .media-inner .full-media {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.message-content.custom-shape .emoji:not(.custom-emoji) {
  display: inline-block;
  color: transparent;
}
.message-content.custom-shape .emoji:not(.custom-emoji)::selection {
  background-color: var(--color-selection-highlight-emoji);
  color: transparent;
}
.message-content.custom-shape.emoji-only {
  --custom-emoji-size: var(--emoji-only-size);
  --emoji-only-size: 2.25rem;
  border-radius: inherit;
  min-width: 6rem;
}
.message-content.custom-shape.emoji-only .AnimatedEmoji {
  width: var(--emoji-only-size);
  height: var(--emoji-only-size);
}
.message-content.custom-shape.emoji-only .custom-emoji {
  line-height: 0;
  vertical-align: bottom;
}
.message-content.custom-shape.emoji-only .text-content {
  word-break: normal;
  line-height: var(--emoji-only-size);
  font-size: var(--emoji-only-size);
}
.message-content.custom-shape.emoji-only .text-content .emoji {
  width: var(--emoji-only-size);
  height: var(--emoji-only-size);
}
.message-content.custom-shape.emoji-only .text-content .MessageMeta {
  text-shadow: none;
  bottom: 0;
  right: 0;
  line-height: 1rem;
  min-height: 25px;
}
.message-content.custom-shape.emoji-only .text-content .MessageMeta svg [fill] {
  fill: white;
}
.message-content.custom-shape.emoji-only-1 {
  --emoji-only-size: 5.625rem;
}
.message-content.custom-shape.emoji-only-2 {
  --emoji-only-size: 5.625rem;
}
.message-content.custom-shape.emoji-only-3 {
  --emoji-only-size: 5.25rem;
}
.message-content.custom-shape.emoji-only-4 {
  --emoji-only-size: 4.5rem;
}
.message-content.custom-shape.emoji-only-5 {
  --emoji-only-size: 3.75rem;
}
.message-content.custom-shape.emoji-only-6 {
  --emoji-only-size: 3rem;
}
.message-content.custom-shape.emoji-only-7 {
  --emoji-only-size: 2.25rem;
}
.message-content.custom-shape.emoji-only-1 {
  --emoji-only-size: 7rem;
}
.Message:not(.own) .message-content.custom-shape {
  --hover-color: var(--color-reply-hover);
  --active-color: var(--color-reply-active);
}
.Message.own .message-content.custom-shape {
  --hover-color: var(--color-reply-own-hover);
  --active-color: var(--color-reply-own-active);
}
.Message.own .message-content.custom-shape .with-subheader {
  flex-direction: row;
}
.Message.own .message-content.custom-shape .with-subheader .EmbeddedMessage {
  margin-right: 0.5rem;
}
@media (max-width: 340px) {
  .Message.own .message-content.custom-shape .with-subheader .EmbeddedMessage {
    margin-left: 0;
    z-index: 1;
    max-width: calc(90vw - 11.5rem);
  }
}
.message-content .message-subheader {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.25rem;
  padding: 0.125rem 0;
}
.message-content .message-topic {
  align-self: flex-start;
}
.message-content.has-shadow {
  box-shadow: 0 1px 1px var(--color-default-shadow);
}
.message-content.has-solid-background, .message-content.has-background .message-content {
  background: var(--background-color);
}
.message-content.has-solid-background {
  min-height: 48px;
}
.message-content.has-solid-background:not(.media), .message-content.has-solid-background.is-forwarded, .message-content.has-solid-background.media.web-page {
  padding: 0.3125rem 0.5rem 0.375rem 0.626rem;
}
.message-content.has-solid-background.media.text {
  padding-bottom: 0.375rem;
  padding-top: 0.3125rem;
}
.message-content.has-solid-background .forwarded-message > .text-content:not(.with-meta):last-child::after {
  content: "";
  display: inline-block;
  width: var(--meta-safe-area-size);
  height: 1rem;
}
body.is-ios .Message.own .message-content.has-solid-background {
  padding-left: 0.625rem;
}
.message-content.document {
  padding: 0.5rem !important;
}
.theme-dark .message-content.document .File {
  --color-primary: var(--color-selection-highlight);
}
.message-content.document .File + .text-content {
  margin-top: 0.3125rem;
}
.message-content.voice .message-title,
.message-content.voice .Embedded, .message-content.audio .message-title,
.message-content.audio .Embedded {
  margin-top: -0.1875rem;
  margin-bottom: 0.1875rem;
}
.message-content.voice {
  padding: 0.5rem !important;
}
.message-content.voice .Voice + .text-content {
  margin-top: 0.5rem;
}
.message-content.audio {
  min-width: 24rem;
}
@media (max-width: 600px) {
  .message-content.audio {
    min-width: 17rem;
  }
}
.message-content.audio .Audio + .text-content {
  margin-top: 0.25rem;
}
.message-content.audio:not(.has-replies) .Audio + .text-content {
  margin-bottom: -0.4375rem;
}
.message-content:not(.custom-shape) .emoji:not(.custom-emoji) {
  display: inline-block;
  width: 1.25rem;
  background-size: 1.25rem;
  color: transparent;
  margin-inline-end: 1px;
  vertical-align: text-bottom;
}
.message-content:not(.custom-shape) .emoji:not(.custom-emoji)::selection {
  background-color: var(--color-selection-highlight-emoji);
  color: transparent;
}
.message-content:not(.custom-shape) .text-content .emoji {
  width: calc(1.25 * var(--message-text-size, 1rem));
  height: calc(1.25 * var(--message-text-size, 1rem));
  background-size: calc(1.25 * var(--message-text-size, 1rem));
}
.message-content:not(.custom-shape) .text-content .custom-emoji {
  --custom-emoji-size: max(
    calc(1.25 * var(--message-text-size, 1rem)),
    20px
  );
  width: var(--custom-emoji-size);
  height: var(--custom-emoji-size);
}
.message-content .no-media-corners {
  --border-top-left-radius: 0;
  --border-top-right-radius: 0;
}
.message-content.custom-shape.is-via-bot {
  font-size: inherit !important;
}
.message-content.custom-shape.is-via-bot .content-inner {
  display: flex;
  align-items: flex-start;
  flex-direction: row-reverse;
  direction: ltr;
  gap: 0.5rem;
}
.message-content.custom-shape.is-via-bot .content-inner > .message-title {
  display: inline-flex;
  position: relative;
  top: 0.125rem;
  max-width: calc(100% - 3rem);
  padding: 0 0.5rem;
  background-color: var(--background-color);
  border-radius: var(--border-radius-messages);
}
.Message.own .message-content.custom-shape.is-via-bot .content-inner > .message-title {
  margin-left: -3rem;
}
.Message.own .message-content.custom-shape.is-via-bot .content-inner {
  flex-direction: row;
}
.message-content.custom-shape.is-via-bot .media-inner {
  margin-top: 0.375rem;
}
.Message.own .message-content.has-solid-background {
  padding: 0.3125rem 0.625rem 0.375rem 0.5rem;
}
.message-content:not(.is-feed).media:not(.text) .Reactions, .message-content:not(.is-feed).voice .Reactions {
  min-height: 0;
  margin-top: 0;
}
.message-content.media.text .message-subheader {
  margin-bottom: 0.3125rem;
}
.message-content.media.text .text-content,
.message-content.media.text .transcription {
  padding: 0 0.5rem 0 0.625rem;
}

.message-content.media .media-inner,
.WebPage .media-inner {
  display: flex;
  justify-content: center;
  align-items: center;
}
.message-content.media .media-inner.interactive,
.WebPage .media-inner.interactive {
  cursor: pointer;
}
.message-content.media .media-inner.interactive.dark video, .message-content.media .media-inner.interactive.dark canvas,
.WebPage .media-inner.interactive.dark video,
.WebPage .media-inner.interactive.dark canvas {
  background-color: #232323;
}
.message-content.media.round.has-subheader,
.WebPage.round.has-subheader {
  width: auto !important;
}
.message-content.media.is-via-bot .media-inner, .message-content.media.has-subheader .media-inner, .message-content.media.has-subheader .Album,
.WebPage.is-via-bot .media-inner,
.WebPage.has-subheader .media-inner,
.WebPage.has-subheader .Album {
  margin-left: -0.626rem;
  margin-right: -0.5rem;
}
body.is-ios .Message.own .message-content.media.is-via-bot .media-inner, body.is-ios .Message.own .message-content.media.has-subheader .media-inner, body.is-ios .Message.own .message-content.media.has-subheader .Album,
body.is-ios .Message.own .WebPage.is-via-bot .media-inner,
body.is-ios .Message.own .WebPage.has-subheader .media-inner,
body.is-ios .Message.own .WebPage.has-subheader .Album {
  margin-left: -0.626rem;
}
.message-content.media.text .media-inner:not(.RoundVideo),
.WebPage.text .media-inner:not(.RoundVideo) {
  margin-top: -0.3125rem;
}
.message-content.media.has-subheader .media-inner, .message-content.media.force-sender-name .Album, .message-content.media.has-subheader .Album,
.message-content.media .message-title ~ .media-inner,
.WebPage.has-subheader .media-inner,
.WebPage.force-sender-name .Album,
.WebPage.has-subheader .Album,
.WebPage .message-title ~ .media-inner {
  margin-top: 0.375rem;
  margin-bottom: -0.375rem;
}
body.is-ios .Message.own .message-content.media.has-subheader .media-inner, body.is-ios .Message.own .message-content.media.force-sender-name .Album, body.is-ios .Message.own .message-content.media.has-subheader .Album,
body.is-ios .Message.own .message-content.media .message-title ~ .media-inner,
body.is-ios .Message.own .WebPage.has-subheader .media-inner,
body.is-ios .Message.own .WebPage.force-sender-name .Album,
body.is-ios .Message.own .WebPage.has-subheader .Album,
body.is-ios .Message.own .WebPage .message-title ~ .media-inner {
  margin-bottom: -0.4375rem;
}
.message-content.media:not(.text) .RoundVideo,
.WebPage:not(.text) .RoundVideo {
  margin-bottom: 0;
}
.message-content.media.text .media-inner, .message-content.media.text .Album,
.WebPage.text .media-inner,
.WebPage.text .Album {
  margin-bottom: 0.25rem;
}
body.is-ios .Message.own .message-content.media.text .media-inner, body.is-ios .Message.own .message-content.media.text .Album,
body.is-ios .Message.own .WebPage.text .media-inner,
body.is-ios .Message.own .WebPage.text .Album {
  margin-bottom: 0.375rem;
}
.message-content.media .media-loading,
.WebPage .media-loading {
  display: flex;
  align-items: center;
  justify-content: center;
}
.message-content.media .media-loading:not(.open),
.WebPage .media-loading:not(.open) {
  opacity: 0.5;
  transform: scale(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.message-content.media .icon-large-play,
.message-content.media .icon-download,
.WebPage .icon-large-play,
.WebPage .icon-download {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0.7;
  transition: opacity 150ms;
}
.message-content.media .icon-large-play:hover,
.message-content.media .icon-download:hover,
.WebPage .icon-large-play:hover,
.WebPage .icon-download:hover {
  opacity: 1;
}
.message-content.media .icon-large-play:before,
.message-content.media .icon-download:before,
.WebPage .icon-large-play:before,
.WebPage .icon-download:before {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.375rem;
  height: 3.375rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
}
.message-content.media .icon-large-play.opacity-transition,
.message-content.media .icon-download.opacity-transition,
.WebPage .icon-large-play.opacity-transition,
.WebPage .icon-download.opacity-transition {
  transition: opacity 0.15s ease;
}
.message-content.media .icon-large-play.opacity-transition:not(.open),
.message-content.media .icon-download.opacity-transition:not(.open),
.WebPage .icon-large-play.opacity-transition:not(.open),
.WebPage .icon-download.opacity-transition:not(.open) {
  opacity: 0;
}
.message-content.media .icon-download,
.WebPage .icon-download {
  font-size: 1.5rem;
}
.message-content.media .icon-large-play,
.WebPage .icon-large-play {
  font-size: 2.5rem;
}
.message-content.media .message-media-duration,
.message-content.media .message-transfer-progress,
.WebPage .message-media-duration,
.WebPage .message-transfer-progress {
  background: var(--color-black-opacity-40);
  color: #fff;
  font-size: 0.8125rem;
  position: absolute;
  left: 0.25rem;
  top: 0.25rem;
  z-index: 1;
  padding: 2px 0.375rem 1px;
  border-radius: 1.25rem;
  line-height: 1.25;
  -webkit-user-select: none;
          user-select: none;
}
.message-content.media .message-media-duration,
.WebPage .message-media-duration {
  display: flex;
  align-items: center;
}
.message-content.media .message-media-duration .icon-muted,
.WebPage .message-media-duration .icon-muted {
  margin-left: 0.25rem;
  font-size: 0.75rem;
}

.own .message-content.media.force-sender-name .media-inner, .own .message-content.media.force-sender-name .Album, .own .message-content.media.text .media-inner, .own .message-content.media.is-via-bot .media-inner, .own .message-content.media.has-subheader .media-inner, .own .message-content.media.has-subheader .Album,
.own .WebPage.force-sender-name .media-inner,
.own .WebPage.force-sender-name .Album,
.own .WebPage.text .media-inner,
.own .WebPage.is-via-bot .media-inner,
.own .WebPage.has-subheader .media-inner,
.own .WebPage.has-subheader .Album {
  margin-right: -0.626rem;
  margin-left: -0.5rem;
}
.own .text-entity-link {
  color: white;
}

.message-content.contact .forwarded-message, .message-content.voice .forwarded-message, .message-content.poll .forwarded-message {
  margin-bottom: 0.5rem;
}
.message-content:not(.custom-shape) .forwarded-message {
  position: relative;
  padding-left: 0.625rem;
}
.message-content:not(.custom-shape) .forwarded-message::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.0625rem;
  width: 2px;
  background: var(--accent-color);
  border-radius: 2px;
}
.message-content:not(.custom-shape) .forwarded-message:dir(rtl) {
  padding-inline-start: 0.625rem;
}
.message-content:not(.custom-shape) .forwarded-message:dir(rtl)::before {
  left: auto;
  right: 0.0625rem;
}
.forwarded-message > .media-inner {
  margin: 0 !important;
  margin-bottom: 0.25rem !important;
}

.long-word-break-all {
  word-break: break-all;
}

.text-entity-link {
  color: var(--color-links);
  word-break: break-word;
  cursor: pointer;
  unicode-bidi: initial;
}
.text-entity-link:hover, .text-entity-link:active, .text-entity-link:visited {
  text-decoration: underline !important;
}
.text-entity-link[data-entity-type=MessageEntityHashtag] {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.text-entity-code {
  color: var(--color-code);
  background: var(--color-code-bg);
  white-space: pre-wrap;
  margin: 0;
  padding: 1px 2px;
  border-radius: 4px;
}
.text-entity-code.clickable {
  cursor: pointer;
}

.text-entity-pre {
  white-space: pre-wrap;
  background-color: var(--color-code-bg);
  margin: 0;
  padding: 0.5rem;
  margin-block: 0.25rem;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.text-entity-pre:hover .code-overlay {
  opacity: 1;
}
.text-entity-pre.no-word-wrap {
  white-space: pre;
  padding-bottom: 0.25rem;
}
.text-entity-pre .pre-code {
  overflow-x: auto;
}

.text-entity-code,
.text-entity-pre,
.code-block,
.hljs {
  --color-scrollbar: var(--color-scrollbar-code);
  font-family: var(--font-family-monospace);
  font-size: 0.875rem;
}

@keyframes text-loading {
  0% {
    background-position-x: 0;
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    background-position-x: var(--background-gradient-size);
    opacity: 1;
  }
}
.message-content-wrapper:not(.has-appendix) .svg-appendix {
  display: none;
}
.message-content-wrapper .svg-appendix {
  overflow: hidden;
  position: absolute;
  bottom: -1px;
  width: 1.125rem;
  height: 2.1875rem;
  font-size: 1rem !important;
}
.message-content-wrapper .svg-appendix::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 1.98rem;
  width: 7px;
  background-color: var(--background-color);
}
.message-content-wrapper .svg-appendix .corner {
  fill: var(--background-color);
}
.Message.own .message-content-wrapper .svg-appendix {
  /* stylelint-disable-next-line plugin/whole-pixel */
  right: -0.625rem;
}
.Message.own .message-content-wrapper .svg-appendix::after {
  right: auto;
  left: 0;
}
.Message.own .message-content-wrapper .svg-appendix [fill] {
  fill: var(--background-color);
}
.Message:not(.own) .message-content-wrapper .svg-appendix {
  /* stylelint-disable-next-line plugin/whole-pixel */
  left: -0.6875rem;
}
.message-content-wrapper .svg-appendix-white {
  overflow: hidden;
  position: absolute;
  bottom: -1px;
  width: 1.125rem;
  height: 2.1875rem;
  font-size: 1rem !important;
}
.message-content-wrapper .svg-appendix-white::after {
  content: "";
  position: absolute;
  right: 0;
  top: 2px;
  height: 28px;
  width: 7px;
  background-color: white;
}
.message-content-wrapper .svg-appendix-white .corner {
  fill: var(--background-color);
}
.Message.own .message-content-wrapper .svg-appendix-white {
  /* stylelint-disable-next-line plugin/whole-pixel */
  right: -0.625rem;
}
.Message.own .message-content-wrapper .svg-appendix-white [fill] {
  fill: var(--color-primary);
}
.Message:not(.own) .message-content-wrapper .svg-appendix-white {
  /* stylelint-disable-next-line plugin/whole-pixel */
  left: -0.6875rem;
}
.message-content-wrapper[data-has-custom-appendix] .svg-appendix svg path,
.message-content-wrapper[data-has-custom-appendix] .svg-appendix .corner {
  fill: var(--appendix-bg);
}
.message-content-wrapper[data-has-custom-appendix] .svg-appendix::after {
  background-color: var(--appendix-bg);
}
.Message .message-content-wrapper.has-appendix-thumb .svg-appendix {
  --background-color: #ccc;
  opacity: 1;
  transition: opacity 500ms ease;
}

.message-content .content-inner .text-content .emoji-back .MessageMeta {
  bottom: 0.875rem;
}

.message-content-wrapper .reaction-buttons-wrap .chosen {
  background-color: var(--color-chat-active);
  color: #fff !important;
}

.message-content-wrapper .reaction-buttons-wrap .background-blue {
  background: rgba(255, 255, 255, 0.2);
  color: #fff !important;
}

.text-content .emoji-back .Button {
  background-color: #bdd2f1;
}
.text-content .emoji-back .Button:hover {
  background-color: #96b9ed;
}

.Message {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 0.375rem;
  position: relative;
  --background-color: var(--color-background);
  --hover-color: var(--color-reply-hover);
  --color-reaction: var(--color-message-reaction);
  --hover-color-reaction: var(--color-message-reaction-hover);
  --active-color: var(--color-reply-active);
  --max-width: 27.25rem;
  --accent-color: var(--color-primary);
  --accent-shade-color: var(--color-primary-shade);
  --secondary-color: var(--color-text-secondary);
  --meta-safe-area-base: 2.25rem;
  --meta-safe-author-width: 0px;
  --meta-safe-area-extra-width: 0px;
  --meta-safe-area-size: calc(
    var(--meta-safe-area-base) + var(--meta-safe-author-width) +
      var(--meta-safe-area-extra-width)
  );
  --color-voice-transcribe: var(--color-voice-transcribe-button);
  --thumbs-background: var(--color-background);
  --deleting-translate-x: -50%;
  --select-message-scale: 0.9;
  --border-top-left-radius: var(--border-radius-messages);
  --border-top-right-radius: var(--border-radius-messages);
  --border-bottom-left-radius: var(--border-radius-messages);
  --border-bottom-right-radius: var(--border-radius-messages);
}
@media (min-width: 1921px) {
  .Message {
    --max-width: calc(30vw - 1rem);
  }
}
@media (max-width: 600px) {
  .Message {
    margin-bottom: 0.25rem;
  }
}
.Message.is-swiped {
  transform: translateX(-2.5rem) !important;
}
.Message.is-protected {
  -webkit-user-select: none;
          user-select: none;
}
.Message > .Avatar,
.Message > .message-content-wrapper {
  opacity: 1;
  transform: scale(1) translateX(0);
  transition: transform var(--select-transition);
  max-width: 100%;
}
body.animation-level-0 .Message > .Avatar,
body.animation-level-0 .Message > .message-content-wrapper {
  transition: none !important;
}
.Message > .Avatar {
  position: absolute;
  bottom: 0;
  left: 0;
  margin-right: 0.3125rem;
}
.Message .quick-reaction {
  --custom-emoji-size: 1.75rem;
  cursor: pointer;
  position: absolute;
  right: -0.875rem;
  bottom: -0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.7);
  opacity: 0;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
  transition-delay: 0.2s;
}
.Message .quick-reaction.visible {
  opacity: 1 !important;
}
.Message .quick-reaction:hover {
  transition-delay: unset;
  transform: scale(1);
}
.Message.last-in-list .quick-reaction:hover {
  transform: translateY(-0.1875rem) scale(1);
}
.Message.last-in-group {
  margin-bottom: 0.75rem;
}
.Message.last-in-list {
  margin-bottom: 0.375rem;
}
body.is-android .Message.is-in-selection-mode .can-select-text {
  z-index: var(--z-message-select-control);
}
body.is-android .Message.is-in-selection-mode .media-inner {
  pointer-events: none;
}
.Message.has-inline-buttons {
  flex-direction: column;
  align-items: flex-start;
}
.Message.has-inline-buttons .message-content-wrapper {
  margin-bottom: 0.375rem;
}
.Message.has-active-reaction .message-content-wrapper {
  z-index: 1;
}
.Message:not(.own) {
  padding-left: 2.5rem;
}
.no-avatars .Message:not(.own), .Message:not(.own).is-thread-top {
  padding-left: 0;
}
@media (max-width: 600px) {
  .Message:not(.own) {
    padding-left: 2.875rem;
  }
  .no-avatars .Message:not(.own), .Message:not(.own).is-thread-top {
    padding-left: 0.25rem;
  }
}
.Message.own {
  justify-content: flex-end;
  --background-color: var(--color-primary);
  --hover-color: var(--color-3);
  --hover-color-reaction: var(--color-message-reaction-hover-own);
  --active-color: var(--color-reply-own-active);
  --max-width: 24rem;
  --accent-color: var(--color-accent-own);
  --accent-shade-color: var(--color-green);
  --secondary-color: var(--color-accent-own);
  --color-code: var(--color-code-own);
  --color-code-bg: var(--color-code-own-bg);
  --color-links: var(--color-own-links);
  --meta-safe-area-base: 3.5rem;
  --deleting-translate-x: 50%;
  --color-text-green: var(--color-accent-own);
  --color-voice-transcribe: var(--color-voice-transcribe-button-own);
  --thumbs-background: var(--color-background-own);
  --color-background-secondary: #4e8dfc;
  --color-text-secondary: white;
  color: var(--color-white);
}
@media (min-width: 1921px) {
  .Message.own {
    --max-width: 30vw;
  }
}
body.is-ios .Message.own, body.is-macos .Message.own {
  --color-background-own: var(--color-background-own-apple);
  --color-reply-own-hover: var(--color-reply-own-hover-apple);
  --color-reply-own-active: var(--color-reply-own-active-apple);
}
@media (max-width: 600px) {
  .Message.own {
    padding-right: 0.25rem;
  }
}
.Message.own .quick-reaction {
  right: auto;
  left: -0.75rem;
}
.Message.own .File .file-icon::after {
  border-color: transparent var(--background-color) transparent var(--background-color);
}
.Message.welcome {
  align-items: center;
  --max-width: 15.8rem;
  --background-color: var(--color-black-opacity-30);
}
.Message.welcome .message-content {
  padding: 1rem;
  font-size: 0.75rem;
  color: white;
}
.Message.welcome .message-content .text-content {
  text-align: center;
  line-height: 1.2;
}
.Message.welcome .message-content p {
  margin-bottom: 0.5rem;
}
.Message.is-deleting > .Avatar,
.Message.is-deleting > .message-content-wrapper {
  transition: opacity 0.2s ease, transform 0.2s ease-in;
  opacity: 0;
  transform: scale(0.3) translateX(var(--deleting-translate-x));
  transform-origin: bottom;
}
.Message.is-dissolving {
  visibility: hidden;
}
.Message.has-views {
  --meta-safe-area-extra-width: 4rem;
}
.Message.was-edited {
  --meta-safe-area-extra-width: 2.5rem;
}
.Message.was-edited.has-views {
  --meta-safe-area-extra-width: 7.5rem;
}
html[lang=ru] .Message.was-edited {
  --meta-safe-area-extra-width: 3.5rem;
}
html[lang=ru] .Message.was-edited.has-views {
  --meta-safe-area-extra-width: 8.5rem;
}
.select-mode-active .Message {
  cursor: pointer;
}
@media (min-width: 600px) {
  .select-mode-active .Message {
    -webkit-user-select: none;
            user-select: none;
  }
}
.select-mode-active .Message:not(.own) > .Avatar,
.select-mode-active .Message:not(.own) > .message-content-wrapper {
  transform: translateX(2.5rem);
}
.select-mode-active .Message:not(.is-album)::after {
  content: "";
  position: absolute;
  top: -0.25rem;
  bottom: -0.25rem;
  left: -4rem;
  right: -4rem;
  z-index: var(--z-message-select-area);
}
.select-mode-active .Message.is-album .message-select-control, .select-mode-active .Message.is-in-document-group .message-select-control {
  pointer-events: unset;
}
.select-mode-active .Message .message-select-control {
  opacity: 1;
}
.Message.is-selected .message-select-control {
  background: var(--color-green);
}
.Message.is-selected .message-select-control.group-select {
  background: transparent;
}
.Message.is-selected .message-select-control.group-select.is-selected {
  background: var(--color-green);
}
.Message .File.file-is-selected .message-select-control {
  background: var(--color-green);
}
.Message.is-in-document-group .File.file-is-selected .file-icon, .Message.has-menu-open.is-in-document-group .File .file-icon {
  --background-color: var(--color-background-selected);
}
.Message:not(.is-in-document-group) .has-replies .Audio {
  margin-bottom: 1rem;
}
.Message:not(.is-in-document-group) .has-replies .Audio [dir=rtl] {
  margin-bottom: 1.625rem;
}
.Message:not(.is-in-document-group) .message-content.audio {
  padding: 0.5rem 0.5rem 0.8125rem !important;
}
.Message .Audio .message-select-control {
  left: 0.875rem;
  top: 0.875rem;
}
html.theme-dark .Message.own .Audio .toggle-play:not(.with-image) + .media-loading .ProgressSpinner {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTguMjE4IDcuNWw1LjYzMy01LjYzM2EuNTA4LjUwOCAwIDEwLS43MTgtLjcxOEw3LjUgNi43ODIgMS44NjcgMS4xNDlhLjUwOC41MDggMCAxMC0uNzE4LjcxOEw2Ljc4MiA3LjVsLTUuNjMzIDUuNjMzYS41MDguNTA4IDAgMTAuNzE4LjcxOEw3LjUgOC4yMThsNS42MzMgNS42MzNhLjUwNi41MDYgMCAwMC43MTggMCAuNTA4LjUwOCAwIDAwMC0uNzE4TDguMjE4IDcuNXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSIjODA3QkQ1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+);
  background-position: center;
  background-size: 1rem;
}
html.theme-dark .Message.own .Audio .toggle-play:not(.with-image) + .media-loading .ProgressSpinner circle {
  stroke: var(--background-color);
}
.Message .File {
  position: relative;
  padding-bottom: 0.375rem;
}
.Message .File .message-select-control {
  position: absolute;
  top: 2rem;
  left: 1.625rem;
  z-index: 2;
}
.Message .album-item-select-wrapper {
  position: absolute;
}
.Message.own .Message .album-item-select-wrapper {
  background: var(--color-background-own);
}
.Message .album-item-select-wrapper .message-select-control {
  position: absolute;
  z-index: 2;
  top: 0.4375rem;
  right: 0.4375rem;
  left: unset;
}
.Message .album-item-select-wrapper img,
.Message .album-item-select-wrapper video {
  transition: transform var(--select-transition), opacity ease 300ms;
}
.Message .album-item-select-wrapper.is-selected .message-select-control {
  background: var(--color-green);
}
.Message .album-item-select-wrapper.is-selected img,
.Message .album-item-select-wrapper.is-selected video {
  transform: scale(var(--select-message-scale));
}
.Message.is-selected .message-select-control, .Message.is-forwarding .message-select-control {
  background: var(--color-green);
}
.Message.is-selected .Menu .bubble, .Message.is-forwarding .Menu .bubble {
  transition: none !important;
}
.Message.is-in-document-group .message-content {
  width: 100%;
}
.Message.is-in-document-group .message-content.document {
  padding: 0.25rem 0.5rem !important;
}
.Message.is-in-document-group.last-in-document-group .message-content.document {
  padding-bottom: 0.5rem !important;
}
.Message.is-in-document-group.first-in-document-group .message-content.document {
  padding-top: 0.5rem !important;
}
.Message.is-in-document-group:not(.first-in-document-group)::before {
  top: 0 !important;
}
.Message.is-in-document-group:not(.first-in-document-group) .message-content {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
.Message.is-in-document-group:not(.first-in-document-group) .forwarded-message::before {
  top: -1.5rem;
}
.Message.is-in-document-group:not(.last-in-document-group) {
  margin-bottom: 0;
}
.Message.is-in-document-group:not(.last-in-document-group)::before {
  bottom: 0 !important;
}
.Message.is-in-document-group:not(.last-in-document-group) .message-content {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.Message.is-in-document-group.is-in-selection-mode .Audio:not(.audio-is-selected) .message-select-control:not(.group-select),
.Message.is-in-document-group.is-in-selection-mode .File:not(.file-is-selected) .message-select-control:not(.group-select) {
  background: white;
}
.Message.is-in-document-group.is-in-selection-mode .Audio:not(.audio-is-selected) .message-select-control:not(.group-select)::after,
.Message.is-in-document-group.is-in-selection-mode .File:not(.file-is-selected) .message-select-control:not(.group-select)::after {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.6875rem;
  background: white;
  border: 0.125rem rgba(0, 0, 0, 0.2) solid;
  position: absolute;
}
.Message.is-in-document-group.is-in-selection-mode.own .message-content .Audio:not(.audio-is-selected) .message-select-control:not(.group-select),
.Message.is-in-document-group.is-in-selection-mode.own .message-content .File:not(.file-is-selected) .message-select-control:not(.group-select) {
  background: var(--background-color);
  border-color: var(--background-color);
}
.Message.is-in-document-group.is-in-selection-mode.own .message-content .Audio:not(.audio-is-selected) .message-select-control:not(.group-select)::after,
.Message.is-in-document-group.is-in-selection-mode.own .message-content .File:not(.file-is-selected) .message-select-control:not(.group-select)::after {
  background: var(--background-color);
  border-color: var(--color-message-meta-own);
}
.Message.is-in-document-group .message-content-wrapper {
  width: 20rem;
}
.Message.is-in-document-group .message-content {
  transition: background-color var(--select-transition);
}
.Message.is-in-document-group.own .message-content-wrapper {
  display: flex;
  justify-content: flex-end;
}
.Message.is-in-document-group.own .message-content-wrapper .message-content {
  width: 100%;
}
.Message .message-select-control {
  position: absolute;
  left: 0;
  bottom: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid white;
  background: rgba(7, 7, 8, 0.12);
  border-radius: 50%;
  z-index: var(--z-message-select-control);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--select-transition);
}
.Message .message-select-control .icon-svg {
  position: absolute;
  top: 2px;
}
.theme-dark .Message .message-select-control {
  border-color: rgba(255, 255, 255, 0.5019607843);
}
.Message .message-content.has-replies:not(.custom-shape):not(.has-reactions) .WebPage.with-square-photo .media-inner, .Message .message-content.has-replies:not(.custom-shape):not(.has-reactions) .WebPage.with-video .media-inner {
  margin-bottom: 1.5rem !important;
}
.Message .message-content.has-replies:not(.custom-shape) .media-inner,
.Message .message-content.has-replies:not(.custom-shape) .Album, .Message .message-content.text .media-inner,
.Message .message-content.text .Album {
  --border-bottom-left-radius: 0;
  --border-bottom-right-radius: 0;
}
.Message .message-content.has-subheader .EmbeddedMessage + .Album, .Message .message-content.has-subheader .EmbeddedMessage + .Audio, .Message .message-content.has-subheader .EmbeddedMessage + .File {
  margin-top: 0.375rem;
}
.Message .message-content:not(.custom-shape).has-subheader .media-inner, .Message .message-content:not(.custom-shape).has-subheader .Album, .Message .message-content:not(.custom-shape).force-sender-name .Album, .Message .message-content:not(.is-forwarded) .message-title ~ .media-inner {
  --border-top-left-radius: 0;
  --border-top-right-radius: 0;
}
.Message .message-content.is-forwarded .content-inner .message-title {
  margin-bottom: 1rem;
}
.Message .message-content > .Avatar {
  position: absolute;
  right: 100%;
  top: 0;
  margin-right: 0.625rem;
}
.Message .message-content-wrapper.is-channel {
  position: relative;
  z-index: 1;
}
.Message .message-action-button {
  position: absolute;
  bottom: 0;
  color: white;
  background-color: var(--pattern-color);
  opacity: 0;
  transition: opacity 150ms, filter 150ms, -webkit-backdrop-filter 150ms;
  transition: opacity 150ms, backdrop-filter 150ms, filter 150ms;
  transition: opacity 150ms, backdrop-filter 150ms, filter 150ms, -webkit-backdrop-filter 150ms;
}
@media (pointer: coarse) {
  .Message .message-action-button {
    opacity: 1 !important;
  }
}
.Message .message-action-button:hover, .Message .message-action-button:active, .Message .message-action-button:focus {
  background-color: var(--pattern-color) !important;
  -webkit-backdrop-filter: brightness(115%);
          backdrop-filter: brightness(115%);
}
@supports not ((-webkit-backdrop-filter: brightness(115%)) or (backdrop-filter: brightness(115%))) {
  .Message .message-action-button:hover, .Message .message-action-button:active, .Message .message-action-button:focus {
    filter: brightness(115%);
  }
}
.Message:hover .message-action-button, .Message[data-is-document-group-hover] .message-action-button {
  opacity: 1;
}
.Message.own .message-action-button {
  left: -3rem;
}
.Message:not(.own) .message-action-button {
  right: -3rem;
}
.Message .bottom-marker {
  height: 1px;
  width: 1px;
  visibility: hidden;
}
.Message .content-inner .for-translate {
  font-size: 0.875rem;
  color: var(--color-primary);
  line-height: 1.3;
}

.message-content,
.Album,
.bottom-marker.media .media-inner img,
.message-content.media .media-inner video,
.message-content.custom-shape .media-inner img,
.message-content.custom-shape .media-inner video,
.media-inner:not(.RoundVideo) {
  border-top-left-radius: var(--border-top-left-radius);
  border-top-right-radius: var(--border-top-right-radius);
  border-bottom-left-radius: var(--border-bottom-left-radius);
  border-bottom-right-radius: var(--border-bottom-right-radius);
}

.media-inner video.full-media {
  background: transparent !important;
}

.media-inner {
  overflow: hidden;
}

.Message .custom-shape .message-action-button {
  bottom: 0.5rem;
}
/*!*********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/message/Album.scss ***!
  \*********************************************************************************************************************************************************************************************************/
.Album {
  position: relative;
  overflow: hidden;
  margin: auto;
}
.message-content.media.text .Album {
  margin: -0.3125rem 0 0.5rem 0;
}
body.is-ios .Message.own .message-content.has-solid-background :not(.forwarded-message) .Album {
  margin: -0.3125rem -0.5rem 0.3125rem -0.625rem;
}
.forwarded-message .Album {
  margin-bottom: 0.125rem;
}
.message-content.media.text .forwarded-message .Album {
  margin: 0 0 0.3125rem;
  --border-bottom-left-radius: inherit;
  --border-bottom-right-radius: inherit;
}
.Album > .album-item-select-wrapper .media-inner, .message-content.media.text .Album > .album-item-select-wrapper .media-inner {
  margin: 0 !important;
}
.Album > .album-item-select-wrapper .media-inner, .Album > .album-item-select-wrapper .media-inner img, .Album > .album-item-select-wrapper .media-inner video {
  border-radius: 0 !important;
  object-fit: cover;
}
.own .message-content.media.text .Album {
  margin: -0.3125rem -0.5rem 0.375rem;
}
/*!**************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/message/RoundVideo.scss ***!
  \**************************************************************************************************************************************************************************************************************/
.RoundVideo {
  position: relative;
  width: 11.25rem;
  height: 11.25rem;
  cursor: pointer;
}
.RoundVideo .video-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  overflow: hidden;
}
.RoundVideo canvas {
  border-radius: 50%;
}
.RoundVideo .progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.RoundVideo .progress-circle {
  stroke: white;
  fill: transparent;
  stroke-width: 4;
  stroke-opacity: 0.35;
  stroke-linecap: round;
}
.RoundVideo video::-internal-media-controls-cast-button,
.RoundVideo video::-webkit-media-controls,
.RoundVideo video::-webkit-media-controls-start-playback-button {
  display: none;
}
/*!***********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/message/WebPage.scss ***!
  \***********************************************************************************************************************************************************************************************************/
.WebPage {
  margin-top: 0.25rem;
  margin-bottom: 0.125rem;
  padding-left: 0.625rem;
  font-size: calc(var(--message-text-size, 1rem) - 0.125rem);
  line-height: 1.125rem;
  max-width: 29rem;
  position: relative;
}
.WebPage::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0.125rem;
  background: var(--accent-color);
  border-radius: 0.125rem;
}
.WebPage-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.WebPage .media-inner {
  margin: 0 !important;
  margin-bottom: 0.375rem !important;
}
.WebPage .media-inner, .WebPage .media-inner img, .WebPage .media-inner canvas, .WebPage .media-inner.small-image img {
  border-radius: var(--border-radius-messages-small) !important;
}
.WebPage .media-inner.square-image {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin-bottom: 0 !important;
}
.WebPage .media-inner.square-image canvas,
.WebPage .media-inner.square-image img {
  width: 100% !important;
  height: 100% !important;
}
.WebPage.with-video .media-inner {
  margin-top: 0.5rem !important;
  margin-bottom: 1rem !important;
}
.message-content:not(.has-reactions) .WebPage.no-article:last-child {
  margin-bottom: 1rem !important;
}
.WebPage.with-square-photo {
  display: flex;
  margin-bottom: 1rem;
}
.WebPage.with-square-photo .WebPage-text {
  order: 1;
  padding-right: 1rem;
}
.WebPage.with-square-photo .media-inner {
  order: 2;
  flex-shrink: 0;
}
.WebPage.with-square-photo .media-inner.square-image {
  width: 5rem;
  height: 5rem;
  min-height: 0;
  margin-bottom: 0 !important;
}
.WebPage.with-square-photo .media-inner.square-image img {
  width: 100%;
  height: 100%;
}
.WebPage.with-square-photo:dir(rtl) .WebPage-text {
  padding-inline-end: 1rem;
}
.WebPage:not(.with-square-photo) .site-name:last-child::after,
.WebPage:not(.with-square-photo) .site-title:last-child::after,
.WebPage:not(.with-square-photo) .site-description:last-child::after {
  content: "";
  display: inline-block;
  width: var(--meta-safe-area-size);
  height: 0.75rem;
  float: right;
}
.WebPage .site-name,
.WebPage .site-description,
.WebPage .site-title {
  word-break: break-word;
  max-width: 100%;
}
.WebPage .site-name {
  color: var(--accent-color);
  font-weight: 500;
  margin-bottom: 0.125rem;
}
.WebPage .site-title {
  font-weight: 500;
  margin-bottom: 0.125rem;
}
.WebPage .site-description {
  line-height: 1.25;
  margin-bottom: 0;
}
body.is-ios .WebPage .site-description {
  line-height: 1.125rem;
}
.WebPage:dir(rtl) {
  padding-inline-start: 0.625rem;
}
.WebPage:dir(rtl)::before {
  left: auto;
  right: 0;
}
@media (min-width: 1921px) {
  @supports (aspect-ratio: 1) {
    .WebPage:not(.in-preview) {
      max-width: none;
    }
    .WebPage:not(.in-preview) .thumbnail,
    .WebPage:not(.in-preview) .full-media {
      width: 100% !important;
      height: auto !important;
    }
  }
}
/*!***********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/message/Invoice.scss ***!
  \***********************************************************************************************************************************************************************************************************/
.Invoice .title {
  color: var(--accent-color);
  font-weight: 500;
}
.Invoice .description {
  position: relative;
  margin-top: 0.5rem;
}
.content-inner:not(.forwarded-message) .Invoice .description.has-image {
  margin: 0.5rem -0.5rem -0.375rem;
}
.Invoice .description.has-image .invoice-image {
  position: relative;
  width: 100%;
  max-height: 30rem;
  object-fit: cover;
  border-bottom-left-radius: var(--border-bottom-left-radius);
  border-bottom-right-radius: var(--border-bottom-right-radius);
}
.forwarded-message .Invoice .description.has-image .invoice-image {
  border-top-left-radius: var(--border-top-left-radius);
  border-top-right-radius: var(--border-top-right-radius);
}
.Invoice .description.has-image .description-text {
  position: absolute;
  top: 0;
  padding: 0.25rem 0.5rem;
  margin: 0.25rem;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius-messages-small);
  color: var(--color-white);
  font-weight: 500;
}
.Invoice .description.has-image .description-text span {
  margin-left: 0.5rem;
}
.Invoice .invoice-image-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.Invoice .thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/*!***************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/message/MessageMeta.scss ***!
  \***************************************************************************************************************************************************************************************************************/
.MessageMeta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  gap: 0.25rem;
  color: white;
  cursor: pointer;
  max-width: 100%;
  -webkit-user-select: none;
          user-select: none;
  min-height: 2rem;
  padding-left: 0.75rem;
  margin-top: 0.25rem;
  font-size: 0.75rem;
}
.MessageMeta .message-time,
.MessageMeta .message-imported,
.MessageMeta .message-signature,
.MessageMeta .message-views,
.MessageMeta .message-replies,
.MessageMeta .message-translated,
.MessageMeta .message-pinned {
  white-space: nowrap;
  line-height: 1;
}
.MessageMeta.is-edit {
  min-width: 6.75rem;
}
.is-feed .MessageMeta {
  cursor: initial;
}
.MessageMeta .message-replies-wrapper {
  display: flex;
  align-items: center;
}
body.is-ios .MessageMeta .message-time {
  margin-right: 0.4rem;
}
.MessageMeta .message-translated {
  margin-inline-end: 0.25rem;
}
.MessageMeta .message-pinned {
  margin-inline-end: 0.1875rem;
}
.MessageMeta .message-imported,
.MessageMeta .message-signature {
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 0.375rem;
}
.MessageMeta .message-imported .emoji-small,
.MessageMeta .message-signature .emoji-small {
  width: 1rem !important;
  height: 1rem !important;
}
.MessageMeta .icon-channelviews {
  margin-left: 0.125rem;
  margin-right: 0.375rem;
  font-size: 1.125rem;
}
.MessageMeta .icon-reply-filled {
  margin-left: 0.125rem;
  margin-right: 0.375rem;
  font-size: 0.75rem;
}
.has-solid-background .MessageMeta {
  color: rgba(var(--color-text-meta-rgb), 0.75);
  background: none;
  padding: 3px;
}
.media:not(.text):not(.is-feed) .MessageMeta, .Message .custom-shape .MessageMeta,
.MessageMeta .Message .invoice {
  position: absolute;
  line-height: 1.15rem;
  bottom: 0.25rem;
  right: 0.25rem;
  width: auto;
  font-size: 0.8125rem;
  padding: 1px 0.375rem;
  background: rgba(153, 153, 153, 0.6);
  border-radius: 1.25rem;
  left: auto;
  --color-accent-own: white;
  --color-accent: white;
  color: white !important;
  opacity: 1;
}
.media:not(.text):not(.is-feed) .MessageMeta .MessageOutgoingStatus i, .Message .custom-shape .MessageMeta .MessageOutgoingStatus i,
.MessageMeta .Message .invoice .MessageOutgoingStatus i {
  background: transparent;
}
.media:not(.text):not(.is-feed) .MessageMeta .MessageOutgoingStatus i svg path, .Message .custom-shape .MessageMeta .MessageOutgoingStatus i svg path,
.MessageMeta .Message .invoice .MessageOutgoingStatus i svg path {
  stroke: white !important;
}
.media:not(.text):not(.is-feed) .MessageMeta, .Message .invoice .MessageMeta {
  background: rgba(7, 7, 8, 0.4);
}
.media:not(.text):not(.is-feed) .MessageMeta path:not([stroke]), .Message .invoice .MessageMeta path:not([stroke]) {
  fill: white;
}
.Message .media.round .MessageMeta {
  bottom: 0;
}
.voice .MessageMeta, .audio .MessageMeta {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
}
.media:not(.text):dir(rtl) .MessageMeta, .Message .custom-shape:dir(rtl) .MessageMeta {
  right: auto !important;
  left: 0.25rem;
  padding: 0 0.375rem 0 0.3125rem;
}
.is-forwarded.media:not(.text):dir(rtl) .MessageMeta, .Message .is-forwarded.custom-shape:dir(rtl) .MessageMeta {
  left: 0.8125rem;
}
.is-forwarded.media:not(.text):not(.round) .MessageMeta {
  bottom: 0.9375rem;
  right: 0.8125rem;
}
.Message.own .has-solid-background .MessageMeta {
  color: var(--color-message-meta-own);
}
.MessageMeta .MessageOutgoingStatus {
  margin-left: -0.1875rem;
  font-size: 1.1875rem;
  border-radius: 0.625rem;
}
.Message.own .MessageMeta .MessageOutgoingStatus {
  color: var(--color-accent-own);
}
.message-content.has-replies:not(.custom-shape) .MessageMeta {
  bottom: 2.875rem;
}
.message-content.has-replies.text:not(.custom-shape) .MessageMeta, .message-content.has-replies.voice:not(.custom-shape) .MessageMeta {
  bottom: 3.4375rem;
}
.MessageMeta[dir=rtl] .message-views {
  order: 10;
}
.MessageMeta[dir=rtl] .icon-channelviews {
  order: 9;
}

.Message:not(.own) .custom-shape .with-subheader + .MessageMeta {
  right: auto;
  left: 13.25rem;
  bottom: 0.25rem;
}

.custom-group-time {
  line-height: 1.125rem;
  bottom: 0.375rem;
  right: 0.375rem;
  width: auto;
  padding: 0 0.3125rem;
  border-radius: 0.3125rem;
  left: auto;
  opacity: 1;
}

.custom-group-time-in-text {
  line-height: 1.125rem;
  right: -3px;
  width: auto;
  padding: 0 0.3125rem;
  border-radius: 0.3125rem;
  left: auto;
  opacity: 1;
}

.custom-group-time-in-text-with-reaction {
  line-height: 1.125rem;
  bottom: -0.575rem;
  right: -0.375rem;
  width: auto;
  padding-left: 0.3125rem;
  border-radius: 0.3125rem;
  left: auto;
  opacity: 1;
}
/*!************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/message/Location.scss ***!
  \************************************************************************************************************************************************************************************************************/
.Location {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 0 !important;
}
.Location .location-accuracy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: accuracy-wave 5s ease-out infinite forwards;
}
@keyframes accuracy-wave {
  0% {
    transform: translate(-50%, -50%) scale(0);
    background-color: var(--color-primary);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    background-color: transparent;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.Location .map-wrapper {
  overflow: hidden;
  position: relative;
}
.Location .map {
  animation: fade-in 0.3s forwards;
}
.Location .pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  animation: fade-in 0.3s forwards;
  --pin-color: var(--color-primary);
}
.Location .geoLive::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 1rem;
  height: 1rem;
  background: var(--color-primary);
  border: 2px solid white;
  border-radius: 50%;
  z-index: 3;
}
.Location .geoLive .round-pin {
  bottom: 0.5rem;
}
.Location .direction {
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform 0.3s ease-out;
  transform: translate(-50%, 0.3125rem) rotate(var(--direction));
  transform-origin: bottom;
  width: 1.5rem;
  height: 2rem;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background: radial-gradient(circle, var(--color-primary) -100%, transparent 100%);
  border-radius: 40%;
  z-index: 2;
}
.Location .location-avatar {
  position: relative;
  overflow: hidden;
  margin-right: 0;
  margin-bottom: 1.3125rem;
  z-index: 5;
}
.Location .venue-icon {
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
  z-index: 5;
}
.Location .geo {
  height: 2.5rem;
}
.Location .geoLive,
.Location .venue {
  filter: drop-shadow(0 0 2px var(--color-default-shadow));
}
.Location .expired {
  --pin-color: white;
}
.Location .expired .location-avatar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
}
.Location .round-pin {
  fill: var(--pin-color);
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0);
  width: 5rem;
  z-index: 4;
}
.Location .location-info {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  padding: 0.3125rem 0.5rem 0.375rem;
}
.Location .location-info-title {
  font-weight: 500;
  grid-area: 1/1/2/2;
}
.Location .location-info-subtitle {
  color: var(--color-text-secondary);
  line-height: 1;
  font-size: 0.875rem;
  grid-area: 2/1/2/2;
}
.Message.own .Location .location-info-subtitle {
  color: var(--color-message-meta-own);
}
.Location .geo-countdown {
  grid-area: 1/2/3/3;
  position: relative;
  width: 2rem;
  height: 2rem;
}
.Location .geo-countdown-text {
  color: var(--accent-color);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.875rem;
  font-weight: 500;
}
.Location .geo-countdown-progress {
  stroke: var(--accent-color);
  fill: transparent;
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke-dashoffset 2s, stroke 0.2s;
}
/*!*****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/message/CommentButton.scss ***!
  \*****************************************************************************************************************************************************************************************************************/
.CommentButton {
  --background-color: var(--color-background);
  --hover-color: var(--color-chat-hover);
  position: relative;
  display: flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem 0.25rem 0.25rem 0.625rem;
  background: var(--background-color);
  border-bottom-right-radius: var(--border-bottom-right-radius);
  border-bottom-left-radius: var(--border-bottom-left-radius);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 2rem;
  color: var(--accent-color);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  -webkit-user-select: none;
          user-select: none;
  overflow: hidden;
}
body.animation-level-0 .CommentButton {
  transition: none !important;
}
.custom-shape .CommentButton {
  position: absolute;
  right: -3rem;
  width: 2.25rem;
  bottom: 4rem;
  height: 3.375rem;
  border-radius: 1.375rem;
  padding: 0.375rem 0.3125rem 0.25rem;
  align-items: baseline;
  justify-content: center;
  color: white;
  background-color: var(--pattern-color);
  opacity: 1;
  transition: opacity 150ms, filter 150ms, -webkit-backdrop-filter 150ms;
  transition: opacity 150ms, backdrop-filter 150ms, filter 150ms;
  transition: opacity 150ms, backdrop-filter 150ms, filter 150ms, -webkit-backdrop-filter 150ms;
}
.custom-shape .CommentButton:before {
  display: none;
}
@media (pointer: coarse) {
  .custom-shape .CommentButton {
    opacity: 1 !important;
  }
}
.custom-shape .CommentButton:hover {
  background-color: var(--pattern-color);
  -webkit-backdrop-filter: brightness(115%);
          backdrop-filter: brightness(115%);
}
@supports not ((-webkit-backdrop-filter: brightness(115%)) or (backdrop-filter: brightness(115%))) {
  .custom-shape .CommentButton:hover {
    filter: brightness(115%);
  }
}
.Message:hover .custom-shape .CommentButton {
  opacity: 1;
}
.custom-shape .CommentButton::after {
  content: attr(data-cnt);
  position: absolute;
  bottom: -0.0625rem;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
  display: block;
}
.custom-shape .CommentButton[data-cnt="0"] {
  height: 2.25rem;
}
.custom-shape .CommentButton[data-cnt="0"]::after {
  display: none;
}
.custom-shape .CommentButton .recent-repliers,
.custom-shape .CommentButton .icon-svg-comments,
.custom-shape .CommentButton .label,
.custom-shape .CommentButton .icon-next {
  display: none;
}
.custom-shape .CommentButton .icon-svg {
  margin-inline-end: 0;
}
.custom-shape .CommentButton .icon-svg [stroke] {
  stroke: white;
}
.custom-shape .CommentButton .comments-sticker {
  display: block;
}
.CommentButton:hover {
  background: var(--hover-color);
}
.CommentButton:hover + .svg-appendix::after {
  background-color: var(--hover-color);
}
.CommentButton:hover + .svg-appendix path {
  fill: var(--hover-color);
}
.CommentButton:hover .Avatar {
  border-color: var(--hover-color) !important;
}
.CommentButton:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0.75rem;
  width: 100%;
  height: 0.02rem;
  background-color: var(--color-underline);
}
.message-content.has-solid-background .CommentButton {
  margin: 0.375rem -0.5rem -0.375rem -0.625rem;
}
.message-content.has-solid-background.media .CommentButton {
  margin: 0;
}
.message-content.has-solid-background.audio .CommentButton {
  margin: 0.375rem 0rem -13px -0.5rem;
}
.message-content.has-solid-background.document .CommentButton {
  margin: 0.375rem 0rem -0.5rem -0.5rem;
}
.message-content.has-solid-background.is-feed .CommentButton {
  margin: 0.375rem -0.5rem -0.625rem;
}
.message-content.voice .CommentButton {
  margin: 0 -0.5rem -0.5rem -0.5rem;
}
.message-content.voice .CommentButton, .message-content.poll .CommentButton, .message-content.has-solid-background.text .CommentButton, .message-content.has-solid-background.is-forwarded .CommentButton {
  position: relative;
  z-index: 1;
}
.message-content.voice .CommentButton, .message-content.has-solid-background.text.voice .CommentButton {
  width: calc(100% + 1rem);
}
.message-content.is-feed .CommentButton, .message-content.audio .CommentButton, .message-content.document .CommentButton {
  width: calc(100% + 1rem) !important;
}
.CommentButton .comments-sticker {
  display: none;
}
.CommentButton .icon-comments,
.CommentButton .icon-svg {
  font-size: 1.5625rem;
  margin-inline-end: 0.875rem;
}
.CommentButton .icon-comments path,
.CommentButton .icon-svg path {
  stroke: var(--color-primary);
}
.CommentButton .icon-next {
  margin-inline-start: auto;
  font-size: 1.5rem;
}
.CommentButton .recent-repliers {
  display: inline-flex;
  align-items: center;
  margin-inline-start: -0.125rem;
}
.CommentButton .recent-repliers .Avatar {
  /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
  transition: border 0.15s;
  border: 1px solid var(--color-background);
  margin-inline-end: 0;
  z-index: 3;
  overflow: hidden;
}
.CommentButton .recent-repliers .Avatar .emoji {
  width: 1rem;
  background-size: 1rem;
}
.CommentButton .recent-repliers .Avatar + .Avatar {
  z-index: 2;
}
.CommentButton .recent-repliers .Avatar + .Avatar + .Avatar {
  z-index: 1;
}
.CommentButton .recent-repliers .Avatar:not(:first-child) {
  margin-inline-start: -0.625rem;
}
.CommentButton.has-unread .label {
  position: relative;
}
.CommentButton.has-unread .label::after {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent-color);
  margin-inline-start: 0.75rem;
}
.CommentButton.disabled {
  cursor: default;
  pointer-events: none;
}

.CommentButton_loading {
  --spinner-size: 1.375rem;
  position: absolute;
  right: 0.375rem;
}
.CommentButton-custom-shape .CommentButton_loading {
  right: 0;
}
/*!***********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/message/Contact.scss ***!
  \***********************************************************************************************************************************************************************************************************/
.Contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.25rem;
}
.Contact.interactive {
  cursor: pointer;
}
.Contact .contact-info {
  padding: 0.5rem;
  overflow: hidden;
  text-align: center;
}
.Contact .contact-info .contact-name {
  font-size: 1.25rem;
  font-weight: 500;
}
.Contact .contact-info .contact-name,
.Contact .contact-info .contact-phone {
  line-height: 1.45rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*!******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/message/InvoiceMediaPreview.module.scss ***!
  \******************************************************************************************************************************************************************************************************************************/
.InvoiceMediaPreview-module__root {
  position: relative;
  z-index: 0;
  overflow: hidden;
  cursor: pointer;
}

.InvoiceMediaPreview-module__duration {
  z-index: 2;
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  white-space: nowrap;
  font-size: 0.75rem;
  padding: 0 0.375rem;
  background-color: rgba(0, 0, 0, 0.3);
  color: #FFFFFF;
  border-radius: 0.5rem;
}

.InvoiceMediaPreview-module__buy {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.5rem 0.875rem;
  background-color: rgba(0, 0, 0, 0.75);
  color: #FFFFFF;
  border-radius: 1rem;
  white-space: nowrap;
  line-height: 1rem;
}

.InvoiceMediaPreview-module__spoiler {
  position: static;
}
/*!*************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/message/Reactions.scss ***!
  \*************************************************************************************************************************************************************************************************************/
.Reactions {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  overflow: visible;
  margin-top: 0.25rem;
  min-height: 1.125rem;
}
.Reactions.full-with {
  width: 100%;
}
.Reactions.like .Button {
  --reaction-background: white;
  border-radius: 0.75rem;
  border: 1px solid rgba(7, 7, 8, 0.05);
  font-size: 0.75rem;
  color: var(--color-text);
  height: 1.6875rem;
}
.Reactions.like .size {
  height: auto;
}
.Reactions .Button {
  --reaction-background: var(--color-reaction);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  height: 2rem;
  white-space: nowrap;
  width: auto;
  margin: 0.125rem;
  padding: 0 0.411rem;
  border: 2px solid transparent;
  background-color: var(--reaction-background);
  border-radius: 1.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  color: var(--accent-color);
  overflow: visible;
  line-height: 1.75rem;
}
.Reactions .Button .avatars {
  display: flex;
}
.Reactions .Button .avatars .Avatar {
  margin: 0;
  margin-inline-start: -0.25rem;
  border: 0.0625rem solid var(--reaction-background);
  width: 1.5rem;
  height: 1.5rem;
}
.Reactions .Button .avatars .Avatar:first-child {
  margin: 0;
}
.Reactions .Button.chosen {
  position: relative;
  z-index: 1;
}
.Reactions .Button .counter {
  margin-inline-end: 0.125rem;
}
.Reactions .Button.liked {
  --reaction-background: #d8e7fd !important;
}
.Reactions .Button:hover {
  --reaction-background: var(--hover-color-reaction) !important;
}
.Reactions .Button:first-of-type {
  margin-inline-start: 0;
}
.Reactions .Button:last-of-type {
  margin-inline-end: 0;
}
.Reactions.is-outside {
  margin-top: 0.125rem;
}
.has-comment .Reactions.is-outside {
  margin-top: 0.5rem;
}
.own .Reactions.is-outside {
  flex-direction: row-reverse;
}
.own .Reactions.is-outside .Button:first-of-type {
  margin-inline-start: 0.125rem;
  margin-inline-end: 0;
}
.own .Reactions.is-outside .Button:last-of-type {
  margin-inline-end: 0.125rem;
  margin-inline-start: 0;
}
.Reactions.is-outside .Button {
  --reaction-background: var(--pattern-color);
  color: white;
}
.theme-dark .Reactions.is-outside .Button {
  color: var(--accent-color);
}
.theme-dark .Reactions.is-outside .Button.chosen {
  border-color: var(--accent-color);
}
.Reactions .MessageMeta {
  margin-top: 0;
}

.reaction-buttons-wrap {
  display: flex;
  flex-wrap: wrap;
}

.reverse {
  flex-direction: row-reverse;
}
/*!***********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/feed/FeedLayout.scss ***!
  \***********************************************************************************************************************************************************************************************************/
.MessageFeedList.MessageList {
  margin-bottom: 0;
}
.MessageFeedList .messages-container {
  justify-content: flex-start;
}
.MessageFeedList .Loading {
  position: absolute;
  z-index: 99;
  left: 0;
  width: 100%;
}

.Message-feed .ListItem {
  margin-bottom: 0.375rem;
}
.Message-feed .ListItem .ListItem-button {
  --background-color: #f4f9ff;
  padding: 0.5rem 0.5rem;
  gap: 0.5rem;
  border-radius: 0.625rem;
}
.Message-feed .ListItem .ListItem-button .info {
  flex: 1;
  line-height: 1;
  overflow: hidden;
}
.Message-feed .ListItem .ListItem-button .info .text-primary {
  font-size: 0.8125rem;
}
.Message-feed .ListItem .ListItem-button .title svg {
  width: 16px;
  height: 16px;
}
.Message-feed .ListItem.has-action .secondary-icon {
  margin-right: -0.375rem;
  margin-top: -0.75rem;
}
.Message-feed .ListItem .Button.smaller.round {
  width: 2.125rem;
  height: 2.125rem;
  min-width: 2.125rem;
}
.Message-feed .ListItem .title {
  line-height: 1.25;
}
.Message-feed .fullName {
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.Message-feed .message-content-wrapper, .Message-feed.is-in-document-group .message-content-wrapper {
  width: 100%;
}
.Message-feed .message-content {
  width: 100%;
  --max-width: 27.5rem;
  margin: 0 auto;
}
.Message-feed .message-content.has-solid-background {
  padding: 0.625rem 0.5rem;
}
.Message-feed .message-content .text-content {
  width: 100%;
  line-height: 1.1875;
  margin-bottom: 0.5rem;
  word-break: break-word;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.Message-feed .message-content .Audio {
  width: 100%;
}
.Message-feed .message-content:not(.web-page).media .media-inner:not(.RoundVideo):not(.small-image):not(.square-image) {
  width: calc(100% + 0.75rem);
}
.Message-feed.is-in-document-group:not(.last-in-document-group) .message-content.has-solid-background {
  padding-bottom: 0;
}
.Message-feed .content-inner {
  display: flex;
  flex-direction: column;
  word-break: break-word;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.Message-feed .content-inner .for-translate {
  margin-bottom: 0.5rem;
}
.Message-feed .content-inner.full-width {
  align-items: center;
}
.Message-feed .Album {
  margin-left: -0.375rem;
  margin-right: -0.375rem;
}
.Message-feed.Message {
  width: 100%;
  margin-bottom: 1rem;
}
.Message-feed.Message:not(.own) {
  padding-left: 0;
}
.Message-feed .Avatar.size-small {
  width: 2.25rem;
  height: 2.25rem;
}

.bg-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1rem;
}
.bg-list .list-item {
  background-image: url(/Wallpaper.eb222cd63b99ceb4a238.svg);
  background-size: cover;
  width: 3.375rem;
  height: 5rem;
  border-radius: 0.5rem;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  transition: border var(--layer-transition);
}
.bg-list .list-item::before {
  content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkNoZWNrIEljb24iPgo8cGF0aCBpZD0iVmVjdG9yIDUiIGQ9Ik0zLjE4MTgyIDguOTAzMzhMNy4zMTA4NiAxMi42MzY3TDE0LjgxODIgNC42MzY3MiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+Cjwvc3ZnPgo=);
  height: 18px;
  z-index: 1;
  opacity: 0;
  transition: all var(--layer-transition);
}
.bg-list .list-item::after {
  content: "";
  position: absolute;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(7, 7, 8, 0.25);
  opacity: 0;
  transition: all var(--layer-transition);
}
.bg-list .list-item:hover {
  border: 1.5px solid #0a49a5;
}
.bg-list .list-item.active {
  border: 1.5px solid #0a49a5;
}
.bg-list .list-item.active::after, .bg-list .list-item.active::before {
  opacity: 1;
}
.bg-list .list-item.bg-image-1 {
  background-image: url(/bg-image-1.5902fb7d86cde72ab815.png);
}
.bg-list .list-item.bg-image-2 {
  background-image: url(/bg-image-2.9a8291b037d395690c85.png);
}
.bg-list .list-item.bg-image-3 {
  background-image: url(/bg-image-3.e900853b835321dfe09b.png);
}
.bg-list .list-item.bg-image-4 {
  background-image: url(/bg-image-4.a3d63bf94d1add59957e.png);
}
.bg-list .list-item.bg-image-5 {
  background-image: url(/bg-image-5.a7e357b9539b7b59980c.png);
}
.bg-list .list-item.bg-image-6 {
  background-image: url(/bg-image-6.a6b4b0f78012a6fc161a.png);
}
.bg-list .list-item.bg-image-7 {
  background-image: url(/bg-image-7.d9c45dfa409eba3bb850.png);
}

.what-show-list {
  margin-bottom: 3.125rem;
}
.what-show-list .row {
  justify-content: space-between;
  padding: 1.275rem 1rem;
  position: relative;
}
.what-show-list .row::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.02rem;
  background-color: var(--color-underline);
}

.select-channel {
  padding-bottom: 2rem;
}
.select-channel .TabList {
  margin-bottom: 1rem;
  z-index: 1;
}
.select-channel .TabList::after {
  box-shadow: none;
}
.select-channel .Tab {
  width: 100%;
}
.select-channel .Tab .platform {
  display: none;
}
.select-channel .Tab--active {
  color: var(--color-text);
  box-shadow: inset 0 -1px 0 var(--color-primary);
}
.select-channel .Avatar {
  width: 3.5625rem;
  height: 3.5625rem;
}

.settings-container {
  transform: translate3d(0, 0, 0);
  transition: transform var(--layer-transition);
  max-width: 47rem;
}

.feed-settings-content {
  height: 100%;
  width: 100%;
  background-color: var(--color-background);
}
@supports (overflow-y: overlay) {
  .feed-settings-content {
    overflow-y: overlay;
    overflow-x: hidden;
  }
}
#Main.right-column-open .feed-settings-content {
  width: calc(100% - var(--right-column-width));
  transform: translate3d(calc(var(--right-column-width) / -2), 0, 0);
}
#Main.right-column-open .feed-settings-content .settings-container {
  width: 100%;
}
.feed-settings-content h4 {
  padding-left: 1rem;
}

.empty-root {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.empty-root .sticker-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 16.875rem;
  background: #6aa2cb;
  padding: 1rem;
  border-radius: var(--border-radius-default);
}
.empty-root h3 {
  color: white;
  line-height: 1.2;
}
.empty-root .description {
  color: white;
  font-size: 0.875rem;
  line-height: 1.2857;
  text-align: center;
  margin-bottom: 0;
}

.feed-item {
  display: flex;
  align-items: center;
  gap: 0.725rem;
  padding: 0.5625rem 0.75rem 0.5625rem 0.625rem;
  position: relative;
}
.feed-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  box-shadow: 0 -0.01rem 0 0.01rem var(--color-borders);
}
.feed-item h3 {
  font-size: 1rem;
}
.feed-item .info {
  flex-grow: 1;
}
.feed-item .last-message {
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
}

.floating-button {
  position: absolute;
  top: 5rem;
  left: 0;
  width: 100%;
  z-index: 5;
}
.floating-button .Button {
  margin: 0 auto;
}
.floating-button .add-post {
  padding: 0 0.75rem;
  height: 2.5rem;
  font-size: 0.875rem;
  border-radius: 2.25rem;
}
.floating-button .add-post [stroke] {
  stroke: white;
}
#Main.right-column-open .floating-button {
  width: calc(100% - var(--right-column-width));
}

.recent-repliers {
  display: inline-flex;
  align-items: center;
  margin-inline-start: -0.25rem;
}
.recent-repliers .Avatar {
  transition: border 0.15s;
  border: 1px solid var(--color-background);
  border-radius: 10px;
  margin-inline-end: 0;
  z-index: 3;
  overflow: hidden;
}
.recent-repliers .Avatar + .Avatar {
  z-index: 2;
}
.recent-repliers .Avatar + .Avatar + .Avatar {
  z-index: 1;
}
.recent-repliers .Avatar:not(:first-child) {
  margin-inline-start: -0.625rem;
}
/*!******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/feed/FeedLayout.module.scss ***!
  \******************************************************************************************************************************************************************************************************************/
.FeedLayout-module__background {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  overflow: hidden;
  background-color: var(--theme-background-color);
}
.FeedLayout-module__background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: url(/Wallpaper.eb222cd63b99ceb4a238.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.FeedLayout-module__background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.FeedLayout-module__background.FeedLayout-module__defaultBgColor::after {
  top: -50%;
  left: -50%;
  bottom: -50%;
  right: -50%;
  background-image: url(/feed-bg-pattern.437fd56bed508c1276b8.png);
  background-size: auto;
  background-repeat: repeat;
  transform: rotate(-27.7deg);
  transform-origin: center;
}
.FeedLayout-module__background.FeedLayout-module__defaultBgColor.bg-image-1::before {
  background-image: linear-gradient(180deg, #79d9fc 0%, #7ecbf0 0.01%, #7784fc 100%);
}
.FeedLayout-module__background.FeedLayout-module__defaultBgColor.bg-image-2::before {
  background-image: linear-gradient(192deg, #a5befd 2.3%, #ffe0ce 79.38%, #c8e1b4 113.63%);
}
.FeedLayout-module__background.FeedLayout-module__defaultBgColor.bg-image-3::before {
  background-image: linear-gradient(196deg, #c5caec 15.1%, #fde0d0 47.9%, #cbf3fd 79.56%);
}
.FeedLayout-module__background.FeedLayout-module__defaultBgColor.bg-image-4::before {
  background-image: linear-gradient(110deg, #a2cd93 7.42%, #d5e08d 26.17%, #81cb89 86.41%);
}
.FeedLayout-module__background.FeedLayout-module__defaultBgColor.bg-image-5::before {
  background-image: linear-gradient(110deg, #c9c1f4 3.44%, #798ef9 38.67%, #b39ef0 80.16%);
}
.FeedLayout-module__background.FeedLayout-module__defaultBgColor.bg-image-6::before {
  background-image: linear-gradient(180deg, #fcb2e5 0%, #84d9f7 100%);
}
.FeedLayout-module__background.FeedLayout-module__defaultBgColor.bg-image-7::before {
  background-image: linear-gradient(200deg, #ffd489 37.54%, #ffb64a 76.37%);
}
.FeedLayout-module__background.FeedLayout-module__customBgImage::before {
  background-image: var(--custom-background) !important;
  transform: scale(1.1);
}
body:not(.animation-level-0) .FeedLayout-module__background.FeedLayout-module__withTransition {
  transition: background-color 0.2s;
}
body:not(.animation-level-0) .FeedLayout-module__background.FeedLayout-module__withTransition.FeedLayout-module__customBgImage::before {
  transition: background-image var(--layer-transition);
}
.FeedLayout-module__background.FeedLayout-module__customBgImage.FeedLayout-module__blurred::before {
  filter: blur(12px);
}
@media screen and (min-width: 1276px) {
  body.animation-level-2 .FeedLayout-module__background:not(.FeedLayout-module__customBgImage)::before {
    overflow: hidden;
    transform: scale(1);
    transform-origin: left center;
  }
}
@media screen and (min-width: 1276px) {
  html.theme-light body.animation-level-2 .FeedLayout-module__background:not(.FeedLayout-module__customBgImage).FeedLayout-module__withRightColumn::before {
    transform: scaleX(0.73) !important;
  }
}
@media screen and (min-width: 1921px) {
  html.theme-light body.animation-level-2 .FeedLayout-module__background:not(.FeedLayout-module__customBgImage).FeedLayout-module__withRightColumn::before {
    transform: scaleX(0.8) !important;
  }
}
@media screen and (min-width: 2600px) {
  html.theme-light body.animation-level-2 .FeedLayout-module__background:not(.FeedLayout-module__customBgImage).FeedLayout-module__withRightColumn::before {
    transform: scaleX(0.95) !important;
  }
}
html.theme-light body.animation-level-2 .FeedLayout-module__background:not(.FeedLayout-module__customBgImage).FeedLayout-module__withRightColumn.FeedLayout-module__withTransition::before {
  transition: transform var(--layer-transition);
}
html.theme-dark .FeedLayout-module__background:not(.FeedLayout-module__customBgImage):not(.FeedLayout-module__customBgColor) {
  mix-blend-mode: unset;
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/left/feed/FeedChats.scss ***!
  \********************************************************************************************************************************************************************************************************/
.FeedChats {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
  --color-message-reaction: #f2f2f2;
}
.FeedChats .left-header {
  box-shadow: none;
  justify-content: center;
}
.FeedChats .Button.text {
  font-size: 0.875rem;
}
.FeedChats .feed-header {
  display: none;
}

.middle-messages-feed .LeftMainMenu,
.FeedChats .LeftMainMenu {
  width: 100%;
  box-shadow: 0px 1.33469px 2.33571px 0px rgba(0, 0, 0, 0.17);
}
.middle-messages-feed .LeftMainMenu:not(.bottom-menu) .MenuItem,
.FeedChats .LeftMainMenu:not(.bottom-menu) .MenuItem {
  font-size: 0.9375rem;
  padding: 0.625rem 0 0.875rem;
  font-weight: 500;
}
.middle-messages-feed .LeftMainMenu:not(.bottom-menu) .MenuItem::after,
.FeedChats .LeftMainMenu:not(.bottom-menu) .MenuItem::after {
  max-width: 4rem;
}
/*!*******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/left/main/LeftMain.scss ***!
  \*******************************************************************************************************************************************************************************************************/
#LeftColumn-main {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
}
#LeftColumn-main > .Transition {
  flex: 1;
  overflow: hidden;
}
#LeftColumn-main .ChatFolders {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
#LeftColumn-main .ChatFolders .tabs-placeholder {
  height: 2.625rem;
  /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
  transition: height 150ms ease;
}
#LeftColumn-main .ChatFolders .tabs-placeholder:not(.open) {
  height: 0;
}
#LeftColumn-main .ChatFolders .TabList {
  justify-content: flex-start;
  padding-left: 0.5625rem;
  padding-bottom: 1px;
  border-bottom: 0;
  z-index: 1;
  opacity: 1;
  transition: opacity var(--layer-transition);
}
#LeftColumn-main .ChatFolders--tabs-hidden .TabList {
  pointer-events: none;
  opacity: 0.25;
}
#LeftColumn-main .ChatFolders .Tab {
  flex: 0 0 auto;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
#LeftColumn-main .ChatFolders .Tab > span {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  white-space: pre;
}
#LeftColumn-main .ChatFolders > .Transition {
  flex: 1;
  overflow: hidden;
}
#LeftColumn-main .RecentContacts,
#LeftColumn-main .LeftSearch,
#LeftColumn-main .search-content {
  height: 100%;
  overflow-y: auto;
}

.btn-update {
  position: absolute;
  bottom: 5rem;
  left: 50%;
  margin: 0 auto;
  transform: translateX(-50%);
  z-index: 1;
  white-space: nowrap;
}
/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/PinnedMessageNavigation.module.scss ***!
  \**************************************************************************************************************************************************************************************************************************/
.PinnedMessageNavigation-module__pinned-message-border {
  position: relative;
  height: 1.875rem;
  width: 0.125rem;
  min-width: 0.125rem;
  overflow: hidden;
}

.PinnedMessageNavigation-module__pinned-message-border-wrapper-1 {
  height: 2.25rem;
  width: 0.125rem;
  border-radius: 0.0625rem;
  background: var(--color-primary);
}

.PinnedMessageNavigation-module__pinned-message-border-wrapper {
  background-color: var(--color-primary-opacity);
  position: relative;
  will-change: transform;
  transition: transform 0.25s ease-in-out;
}

.PinnedMessageNavigation-module__pinned-message-border-mark {
  position: absolute;
  left: 0;
  top: 0;
  width: 0.125rem;
  background: var(--color-primary);
  border-radius: 0.0625rem;
  will-change: transform;
  transition: transform 0.25s ease-in-out;
  transform: translateY(var(--translate-y));
  height: var(--height);
}
/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/HeaderPinnedMessage.module.scss ***!
  \**********************************************************************************************************************************************************************************************************************/
.HeaderPinnedMessage-module__root {
  display: flex;
  align-items: center;
  margin-left: auto;
  cursor: default;
  flex-direction: row-reverse;
  background: var(--color-background);
}
.HeaderPinnedMessage-module__root .Button {
  margin-left: 0.25rem;
}
.HeaderPinnedMessage-module__root .Button svg path {
  stroke: var(--color-text-secondary);
}
.HeaderPinnedMessage-module__root .Button.tiny {
  margin-right: 0.625rem;
}
body.animation-level-1 .HeaderPinnedMessage-module__root .ripple-container {
  display: none;
}
body.animation-level-0 .HeaderPinnedMessage-module__root {
  transition: none !important;
}
@media (min-width: 1276px) {
  .HeaderPinnedMessage-module__root {
    transform: translate3d(0, 0, 0);
    transition: opacity 0.15s ease, transform var(--layer-transition);
  }
  #Main.right-column-open .HeaderPinnedMessage-module__root {
    transform: translate3d(calc(var(--right-column-width) * -1), 0, 0);
  }
}
.HeaderPinnedMessage-module__root > .Button {
  flex-shrink: 0;
}

.HeaderPinnedMessage-module__root.full-width {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--color-background);
  padding: 0.25rem 0.8125rem 0.25rem 1rem;
  box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow);
  transform: translate3d(0, 0, 0);
  transition: opacity 0.15s ease, transform var(--layer-transition);
}
.HeaderPinnedMessage-module__root.full-width::before {
  content: "";
  display: block;
  position: absolute;
  top: -0.1875rem;
  left: 0;
  right: 0;
  height: 0.125rem;
  box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow);
}
.HeaderPinnedMessage-module__root.full-width .HeaderPinnedMessage-module__pinnedMessage {
  margin-top: 0;
  margin-bottom: 0;
  flex: 1;
}
.HeaderPinnedMessage-module__root.full-width .HeaderPinnedMessage-module__messageText {
  max-width: none;
}
@media (min-width: 1276px) {
  .HeaderPinnedMessage-module__root.full-width {
    transform: translate3d(0, 0, 0);
    transition: opacity 0.15s ease, transform var(--layer-transition);
  }
  #Main.right-column-open .HeaderPinnedMessage-module__root.full-width {
    padding-left: calc(var(--right-column-width) + 1rem);
  }
}

.HeaderPinnedMessage-module__loading {
  --spinner-size: 1.5rem;
}

.HeaderPinnedMessage-module__pinListIcon {
  position: absolute;
  top: 0.8125rem;
  transition: 0.25s ease-in-out opacity, 0.25s ease-in-out transform;
}

.HeaderPinnedMessage-module__pinListIconHidden {
  opacity: 0;
  transform: scale(0.6);
}

.HeaderPinnedMessage-module__pinnedMessage {
  display: flex;
  flex-shrink: 1;
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
  padding: 0.25rem;
  padding-left: 0.375rem;
  border-radius: var(--border-radius-messages-small);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  align-items: center;
}
.HeaderPinnedMessage-module__pinnedMessage:hover:not(.HeaderPinnedMessage-module__no-hover) {
  background-color: var(--color-interactive-element-hover);
}

.HeaderPinnedMessage-module__messageTextTransition {
  height: 1.125rem;
  width: 100%;
  overflow: hidden;
}

.HeaderPinnedMessage-module__messageText {
  overflow: hidden;
  margin-inline-start: 0.375rem;
  margin-top: 0.125rem;
  min-width: 16rem;
  max-width: 16rem;
  flex-grow: 1;
  transition: 0.25s ease-in-out transform;
}
.HeaderPinnedMessage-module__messageText.HeaderPinnedMessage-module__withMedia {
  transform: translateX(2.625rem);
  margin-right: 2.625rem;
  max-width: 12.375rem;
  min-width: 12.375rem;
}
.HeaderPinnedMessage-module__messageText .emoji-small {
  width: 1rem;
  height: 1rem;
}
@media (min-width: 1440px) and (max-width: 1500px) {
  .HeaderPinnedMessage-module__messageText {
    max-width: 14rem;
  }
}

.HeaderPinnedMessage-module__title {
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1rem;
  height: 1rem;
  color: var(--color-primary);
  white-space: pre;
  text-align: initial;
}
body.is-ios .HeaderPinnedMessage-module__title {
  font-size: 0.9375rem;
}

.HeaderPinnedMessage-module__summary {
  font-size: 0.8125rem;
  line-height: 1.125rem;
  color: var(--color-text-secondary);
  height: 1.125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
body.is-ios .HeaderPinnedMessage-module__summary {
  font-size: 0.9375rem;
}

.HeaderPinnedMessage-module__inlineButton,
.HeaderPinnedMessage-module__inlineButton.Button.tiny {
  display: block;
  width: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 1.5rem;
  padding: 0 0.75rem;
  font-weight: 500;
  text-transform: none;
  height: 2rem;
  max-width: 10rem;
  flex-shrink: 1;
}

.HeaderPinnedMessage-module__pictogramTransition {
  position: absolute;
  width: 1.875rem !important;
  height: 1.875rem;
  margin-inline-start: 0.5rem;
  overflow: hidden;
}

.HeaderPinnedMessage-module__pinnedThumb {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  border-radius: 0.25rem;
  overflow: hidden;
}
.HeaderPinnedMessage-module__pinnedThumb + .HeaderPinnedMessage-module__messageText {
  max-width: 12rem;
}

.HeaderPinnedMessage-module__pinnedThumbImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 600px) {
  .HeaderPinnedMessage-module__pinnedMessage {
    flex-grow: 1;
    padding-top: 0;
    padding-bottom: 0;
    max-width: unset;
    margin-top: -0.1875rem;
  }
  .HeaderPinnedMessage-module__pinnedMessage::before {
    top: 0.125rem;
    bottom: 0.125rem;
  }
  .HeaderPinnedMessage-module__pinnedMessage .HeaderPinnedMessage-module__messageText {
    max-width: none;
  }
  .HeaderPinnedMessage-module__root.full-width {
    display: none;
  }
  .HeaderPinnedMessage-module__root {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 2.875rem;
    box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow);
    display: flex;
    flex-direction: row-reverse;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.5rem, env(safe-area-inset-right));
    background: var(--color-background);
  }
  @supports not (padding-left: max(0.75rem, env(safe-area-inset-left))) {
    .HeaderPinnedMessage-module__root {
      padding-left: 0.75rem;
      padding-right: 0.5rem;
    }
  }
  .HeaderPinnedMessage-module__root::before {
    content: "";
    display: block;
    position: absolute;
    top: -0.1875rem;
    left: 0;
    right: 0;
    height: 0.125rem;
    box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow);
  }
}
@media (min-width: 1276px) and (max-width: 1439px) {
  .MiddleHeader:not(.tools-stacked) .HeaderPinnedMessage-module__root {
    opacity: 1;
  }
  #Main.right-column-open .MiddleHeader:not(.tools-stacked) .HeaderPinnedMessage-module__root {
    opacity: 0;
  }
}
.tools-stacked.animated .HeaderPinnedMessage-module__root {
  animation: HeaderPinnedMessage-module__fade-in var(--layer-transition) forwards;
}
body.animation-level-0 .tools-stacked.animated .HeaderPinnedMessage-module__root {
  animation: none;
}
/*!*******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/AudioPlayer.scss ***!
  \*******************************************************************************************************************************************************************************************************/
.AudioPlayer {
  display: flex;
  margin-left: auto;
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
}
body.animation-level-0 .AudioPlayer {
  transition: none !important;
}
.AudioPlayer > .Button, .AudioPlayer > .playback-rate-menu {
  flex-shrink: 0;
  margin: 0.125rem;
}
.AudioPlayer .player-button {
  --color-text-secondary:
  --color-text-secondary-rgb: var(--color-primary-shade-rgb);
  --color-primary-shade: var(--color-green);
  --color-white: var(--color-background-own);
  margin: 0.125rem;
}
.AudioPlayer .player-button.Button.translucent {
  color: var(--color-primary);
}
.AudioPlayer .player-button.smaller i {
  font-size: 1.625rem;
  margin-top: -0.0625rem;
}
.AudioPlayer .player-button i {
  position: absolute;
  font-size: 1.9375rem;
  margin-top: -0.0625rem;
}
.AudioPlayer .player-button i.icon--play {
  margin-left: 0.125rem;
}
.AudioPlayer .player-button .icon--play,
.AudioPlayer .player-button .icon--pause {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.AudioPlayer .player-button path:not([stroke]) {
  fill: var(--color-primary);
}
.AudioPlayer .player-button.play .icon--pause, .AudioPlayer .player-button.pause .icon--play, .AudioPlayer .player-button.loading .icon--play, .AudioPlayer .player-button.loading .icon--pause {
  opacity: 0;
  transform: scale(0.5);
}
.AudioPlayer .volume-button-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.AudioPlayer .volume-button-wrapper .volume-slider-wrapper {
  position: absolute;
  width: 8rem;
  top: 2.625rem;
}
.AudioPlayer .volume-button-wrapper .volume-slider-spacer {
  position: absolute;
  transform: translateY(100%);
  bottom: 0;
  height: 1rem;
  width: 8rem;
  cursor: default;
  visibility: hidden;
}
.AudioPlayer .volume-button-wrapper:hover .volume-slider-spacer,
.AudioPlayer .volume-button-wrapper .volume-slider-spacer:hover {
  visibility: visible;
}
.AudioPlayer .volume-button-wrapper .volume-slider {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  background: var(--color-background);
  bottom: -1rem;
  transform: translateY(100%);
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  width: 8rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  cursor: default;
  box-shadow: 0 1px 2px var(--color-default-shadow);
}
.AudioPlayer .volume-button-wrapper .volume-slider .RangeSlider {
  margin-bottom: 0;
}
.AudioPlayer .volume-button-wrapper .volume-slider .RangeSlider input[type=range] {
  margin-bottom: 0;
}
.AudioPlayer .volume-button-wrapper:hover .volume-slider,
.AudioPlayer .volume-button-wrapper .volume-slider:hover,
.AudioPlayer .volume-button-wrapper .volume-slider-spacer:hover + .volume-slider {
  opacity: 1;
  visibility: visible;
}
.AudioPlayer .playback-wrapper {
  position: relative;
}
.AudioPlayer .playback-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  width: 5rem;
  height: 4rem;
  z-index: calc(var(--z-menu-backdrop) + 1);
}
.AudioPlayer .playback-button.on-top {
  z-index: calc(var(--z-menu-backdrop) + 2);
}
.AudioPlayer .playback-button.applied {
  --color-text-secondary: var(--color-primary);
}
.AudioPlayer .playback-button .playback-button-inner {
  transition: 0.15s color ease-out;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-primary);
  border: 1px solid;
  border-radius: 0.3125rem;
  padding: 0.25rem 0.5rem;
  font-variant-numeric: tabular-nums;
}
.AudioPlayer .playback-button .playback-button-inner.small {
  transform: scale(0.83);
}
.AudioPlayer .playback-button .playback-button-inner.tiny {
  transform: scale(0.75);
}
.AudioPlayer-content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex-shrink: 1;
  max-width: 14rem;
  padding: 0 0.5rem;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: var(--border-radius-messages-small);
}
.AudioPlayer-content:hover {
  background-color: var(--color-interactive-element-hover);
}
.right-column-shown .AudioPlayer-content {
  max-width: 10rem;
}
@media (max-width: 600px) {
  .AudioPlayer-content {
    max-width: 100%;
  }
}
@media (min-width: 1440px) {
  .AudioPlayer-content {
    max-width: 24rem;
  }
  .right-column-shown .AudioPlayer-content {
    max-width: 14rem;
  }
}
.AudioPlayer .AudioPlayer-content .title {
  display: block;
  margin-top: 0.125rem;
  font-weight: 500;
  font-size: 0.8125rem !important;
  color: var(--color-primary);
  line-height: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.is-ios .AudioPlayer .AudioPlayer-content .title {
  font-size: 0.9375rem !important;
  line-height: 1.125rem;
}
.AudioPlayer-content .subtitle {
  font-size: 0.8125rem !important;
  color: var(--color-text-secondary);
  line-height: 0.9375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0.125rem 0 0;
}
body.is-ios .AudioPlayer-content .subtitle {
  font-size: 0.9375rem !important;
  line-height: 1.125rem;
}
.AudioPlayer .playback-rate-menu .bubble {
  min-width: 8.125rem;
}
.AudioPlayer .playback-rate-menu .bubble path {
  stroke: var(--color-primary);
}
.AudioPlayer .playback-rate-menu .bubble .icon-check,
.AudioPlayer .playback-rate-menu .bubble .icon-placeholder {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  width: 1.5rem;
  color: var(--color-primary);
}
.AudioPlayer .playback-rate-menu .MenuItem {
  padding: 0.5rem 1rem;
  justify-content: space-between;
}
/*!***********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/ChatReportPanel.scss ***!
  \***********************************************************************************************************************************************************************************************************/
.ChatReportPanel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: flex;
  align-items: center;
  margin-left: auto;
  background: var(--color-background);
  padding: 0.375rem 0.8125rem 0.25rem 1rem;
  box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow), inset 0 0.125rem 0.125rem var(--color-light-shadow);
  transform: translate3d(0, 0, 0);
  transition: opacity 0.15s ease, transform var(--layer-transition);
}
body.animation-level-1 .ChatReportPanel .ripple-container {
  display: none;
}
@media (min-width: 1276px) {
  .ChatReportPanel {
    transform: translate3d(0, 0, 0);
    transition: opacity 0.15s ease, transform var(--layer-transition);
  }
  #Main.right-column-open .ChatReportPanel {
    padding-right: calc(var(--right-column-width) + 1rem);
  }
}
.ChatReportPanel .UserReportPanel--Button {
  margin-left: 0.25rem;
  flex: 1 1 50%;
  white-space: nowrap;
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/MiddleHeader.scss ***!
  \********************************************************************************************************************************************************************************************************/
.MiddleHeader {
  position: relative;
  width: 100%;
  z-index: var(--z-middle-header);
  background: #fff;
  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.05);
}
@media (max-width: 600px) {
  .MiddleHeader {
    position: relative;
  }
  .MiddleHeader.feed-header {
    box-shadow: none;
  }
}
.MiddleHeader .middle-header-inner {
  min-height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(0.8125rem, env(safe-area-inset-right));
  padding-top: 0.4375rem;
  padding-bottom: 0.4375rem;
  background: var(--color-background);
}
@media (max-width: 600px) {
  .MiddleHeader .middle-header-inner {
    --header-height: 3.5rem;
    padding-left: max(0.5rem, env(safe-area-inset-left));
    padding-right: max(0.5rem, env(safe-area-inset-right));
  }
}
.MiddleHeader .middle-header-inner .Transition {
  width: 100%;
  min-width: 0;
}
.MiddleHeader .middle-header-inner .Transition > div {
  display: flex;
  align-items: center;
  width: 100%;
}
@supports not (padding-left: max(1.5rem, env(safe-area-inset-left))) {
  .MiddleHeader {
    padding-left: 1.5rem;
    padding-right: 0.8125rem;
  }
  @media (max-width: 600px) {
    .MiddleHeader {
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }
  }
}
.MiddleHeader .back-button {
  margin-left: -0.5rem;
  margin-right: 0.5rem;
  position: relative;
}
@media (max-width: 600px) {
  .MiddleHeader .back-button {
    margin-left: 0;
  }
}
.MiddleHeader .back-button .unread-count {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 0.625rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
  font-weight: 500;
  text-align: center;
  position: absolute;
  top: -0.25rem;
  right: -0.5rem;
  background: var(--color-gray);
  color: white;
  pointer-events: none;
}
.MiddleHeader .back-button .unread-count.active {
  background: var(--color-primary);
}
.MiddleHeader .chat-info-wrapper {
  flex-grow: 1;
  overflow: hidden;
}
.MiddleHeader .right-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}
@media (min-width: 1440px) {
  .MiddleHeader .right-header {
    transform: translate3d(0, 0, 0);
    transition: transform var(--layer-transition);
  }
  #Main.right-column-open .MiddleHeader .right-header {
    transform: translate3d(calc(var(--right-column-width) * -1), 0, 0);
  }
}
.MiddleHeader .header-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  flex-shrink: 0;
  height: 100%;
}
body.animation-level-0 .MiddleHeader .header-tools,
body.animation-level-0 .MiddleHeader .header-tools .AudioPlayer,
body.animation-level-0 .MiddleHeader .header-tools .HeaderActions {
  transition: none !important;
}
@media (min-width: 1276px) and (max-width: 1439px) {
  .MiddleHeader .header-tools .HeaderActions {
    transform: translate3d(0, 0, 0);
    transition: transform var(--layer-transition);
  }
  #Main.right-column-open .MiddleHeader .header-tools .HeaderActions {
    transform: translate3d(calc(var(--right-column-width) * -1), 0, 0);
  }
}
@media (min-width: 1440px) {
  .MiddleHeader .header-tools {
    transform: translate3d(0, 0, 0);
    transition: transform var(--layer-transition);
  }
  #Main.right-column-open .MiddleHeader .header-tools {
    transform: translate3d(calc(var(--right-column-width) * -1), 0, 0);
  }
}
@media (min-width: 1276px) and (max-width: 1439px) {
  .MiddleHeader:not(.tools-stacked) .AudioPlayer {
    opacity: 1;
  }
  #Main.right-column-open .MiddleHeader:not(.tools-stacked) .AudioPlayer {
    opacity: 0;
  }
}
.MiddleHeader.tools-stacked .AudioPlayer .AudioPlayer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 2.875rem;
  box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow);
  display: flex;
  flex-direction: row-reverse;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: max(0.75rem, env(safe-area-inset-left));
  padding-right: max(0.5rem, env(safe-area-inset-right));
  background: var(--color-background);
  flex-direction: row;
  margin-top: 0;
  padding: 0.25rem 0.5rem;
}
@supports not (padding-left: max(0.75rem, env(safe-area-inset-left))) {
  .MiddleHeader.tools-stacked .AudioPlayer .AudioPlayer {
    padding-left: 0.75rem;
    padding-right: 0.5rem;
  }
}
.MiddleHeader.tools-stacked .AudioPlayer .AudioPlayer::before {
  content: "";
  display: block;
  position: absolute;
  top: -0.1875rem;
  left: 0;
  right: 0;
  height: 0.125rem;
  box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow);
}
.MiddleHeader.tools-stacked .AudioPlayer .AudioPlayer-content {
  padding: 0 0.5rem;
  flex-grow: 1;
}
.MiddleHeader.tools-stacked .AudioPlayer .AudioPlayer > .Button,
.MiddleHeader.tools-stacked .AudioPlayer .AudioPlayer > .playback-rate-menu {
  margin: -0.0625rem 0 0;
}
.MiddleHeader.tools-stacked .AudioPlayer .AudioPlayer > .player-close {
  margin-left: auto;
}
@media (min-width: 1150px) {
  #Main.right-column-open .MiddleHeader.tools-stacked .AudioPlayer {
    padding-right: calc(0.5rem + var(--right-column-width));
  }
}
.MiddleHeader.tools-stacked.animated .AudioPlayer {
  animation: fade-in var(--layer-transition) forwards;
}
body.animation-level-0 .MiddleHeader.tools-stacked.animated .AudioPlayer {
  animation: none;
}
.MiddleHeader h3 {
  white-space: pre;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: plaintext;
  font-size: 1.125rem;
}
.MiddleHeader h3 svg {
  vertical-align: sub;
}
body.is-ios .MiddleHeader h3, body.is-macos .MiddleHeader h3 {
  font-size: 1rem;
  font-weight: 600;
}
@media (max-width: 600px) {
  .MiddleHeader h3 {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (min-width: 1275px) {
  #Main.right-column-open .MiddleHeader h3 {
    max-width: calc(100% - var(--right-column-width));
  }
}
.MiddleHeader .ChatInfo {
  cursor: pointer;
  display: flex;
  align-items: center;
}
@media (max-width: 600px) {
  .MiddleHeader .ChatInfo {
    -webkit-user-select: none;
            user-select: none;
  }
}
.MiddleHeader .ChatInfo .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  overflow: hidden;
}
.MiddleHeader .ChatInfo .title {
  --custom-emoji-size: 1.375rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.MiddleHeader .ChatInfo .title .VerifiedIcon {
  width: 1.25rem;
  height: 1.25rem;
}
.MiddleHeader .ChatInfo .status,
.MiddleHeader .ChatInfo .typing-status {
  display: inline;
  unicode-bidi: plaintext;
}
@media (min-width: 1275px) {
  #Main.right-column-open .MiddleHeader .ChatInfo .status,
  #Main.right-column-open .MiddleHeader .ChatInfo .typing-status {
    max-width: calc(100% - var(--right-column-width));
  }
}
.MiddleHeader .ChatInfo .user-status {
  unicode-bidi: plaintext;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 1275px) {
  #Main.right-column-open .MiddleHeader .ChatInfo .user-status {
    max-width: calc(100% - var(--right-column-width));
  }
}
.MiddleHeader .ChatInfo .custom-emoji {
  color: var(--color-primary);
}
.MiddleHeader .ChatInfo .saved-messages svg,
.MiddleHeader .ChatInfo .deleted-account svg {
  width: 75%;
}
.MiddleHeader .Avatar,
.MiddleHeader .topic-header-icon {
  width: 2.625rem !important;
  height: 2.625rem !important;
  line-height: 2.6875rem;
  margin-right: 0.625rem;
}
.MiddleHeader .topic-header-icon {
  --custom-emoji-size: 2.5rem;
  font-size: 2.5rem;
}
.MiddleHeader .topic-header-icon .emoji-small {
  width: 1.25rem;
  height: 1.25rem;
}
.MiddleHeader .topic-header-icon .topic-icon-letter {
  font-size: 1.25rem;
}
.MiddleHeader .topic-header-icon.general-forum-icon {
  color: var(--color-text-secondary);
}
.MiddleHeader .status,
.MiddleHeader .typing-status {
  font-size: 0.875rem;
  line-height: 1.125rem;
  margin: 0;
  color: var(--color-text-secondary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}
.MiddleHeader .status .ellipsis,
.MiddleHeader .typing-status .ellipsis {
  display: inline-flex;
}
.MiddleHeader .status.online,
.MiddleHeader .typing-status.online {
  color: var(--color-primary);
}
.MiddleHeader .status .font-emoji,
.MiddleHeader .typing-status .font-emoji {
  line-height: 1rem;
}
.MiddleHeader .Button.round.smaller {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
}
.MiddleHeader .Button.primary {
  width: 8.125rem;
  max-width: 100%;
  height: 3.125rem;
  padding-top: 0.375rem;
  margin-right: 1rem;
  border-radius: var(--border-radius-messages);
  text-transform: uppercase;
}
.MiddleHeader h4 {
  margin: 0;
}
.MiddleHeader h4:first-child {
  padding-left: 0.75rem;
}
.MiddleHeader .HeaderActions {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.MiddleHeader .HeaderActions .Button {
  margin-left: 0.25rem;
}
.MiddleHeader .HeaderActions .Button.tiny {
  margin-right: 0.625rem;
  white-space: nowrap;
}
.MiddleHeader .HeaderActions .toggle-right-pane-button.active {
  color: var(--color-primary);
  opacity: 1;
}
.MiddleHeader .HeaderActions .badge-button {
  position: relative;
  overflow: visible;
}
.MiddleHeader .HeaderActions .badge {
  position: absolute;
  min-width: 1rem;
  height: 1rem;
  background: var(--color-primary);
  border-radius: 0.5rem;
  color: white;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  text-align: center;
  flex-shrink: 0;
  right: 0;
  top: 0;
}
.MiddleHeader .tab-bar-wrapper {
  background-color: white;
  width: 100%;
  border-top: 1px solid var(--color-light-shadow);
  opacity: 1;
  transition: width var(--layer-transition);
}
.MiddleHeader .tab-bar-wrapper:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
}
#Main.right-column-open .MiddleHeader .tab-bar-wrapper {
  width: calc(100% - var(--right-column-width));
}
.MiddleHeader .tab-bar {
  font-size: 0.875rem;
  color: var(--color-primary);
  font-weight: 500;
  text-transform: uppercase;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0;
  gap: 5px;
  transition: background-color 0.15s;
}
.MiddleHeader .tab-bar:hover {
  background-color: var(--color-primary-opacity-hover);
}
@media (max-width: 600px) {
  .MiddleHeader .AudioPlayer {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 2.875rem;
    box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow);
    display: flex;
    flex-direction: row-reverse;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.5rem, env(safe-area-inset-right));
    background: var(--color-background);
    flex-direction: row;
    margin-top: 0;
    padding: 0.25rem 0.5rem;
  }
  @supports not (padding-left: max(0.75rem, env(safe-area-inset-left))) {
    .MiddleHeader .AudioPlayer {
      padding-left: 0.75rem;
      padding-right: 0.5rem;
    }
  }
  .MiddleHeader .AudioPlayer::before {
    content: "";
    display: block;
    position: absolute;
    top: -0.1875rem;
    left: 0;
    right: 0;
    height: 0.125rem;
    box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow);
  }
  .MiddleHeader .AudioPlayer-content {
    padding: 0 0.5rem;
    flex-grow: 1;
  }
  .MiddleHeader .AudioPlayer > .Button,
  .MiddleHeader .AudioPlayer > .playback-rate-menu {
    margin: -0.0625rem 0 0;
  }
  .MiddleHeader .AudioPlayer > .player-close {
    margin-left: auto;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*!***********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/EmbeddedMessage.scss ***!
  \***********************************************************************************************************************************************************************************************************/
.EmbeddedMessage {
  display: flex;
  align-items: center;
  font-size: calc(var(--message-text-size, 1rem) - 0.125rem);
  line-height: 1.125rem;
  margin: 0 -0.25rem 0.0625rem;
  padding: 0.1rem 0.25rem 0.1rem 0.4375rem;
  border-radius: var(--border-radius-messages-small);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  direction: ltr;
}
.EmbeddedMessage.color-1 {
  --accent-color: var(--color-user-1);
}
.EmbeddedMessage.color-2 {
  --accent-color: var(--color-user-2);
}
.EmbeddedMessage.color-3 {
  --accent-color: var(--color-user-3);
}
.EmbeddedMessage.color-4 {
  --accent-color: var(--color-user-4);
}
.EmbeddedMessage.color-5 {
  --accent-color: var(--color-user-5);
}
.EmbeddedMessage.color-6 {
  --accent-color: var(--color-user-6);
}
.EmbeddedMessage.color-7 {
  --accent-color: var(--color-user-7);
}
.EmbeddedMessage.color-8 {
  --accent-color: var(--color-user-8);
}
body.animation-level-1 .EmbeddedMessage .ripple-container {
  display: none;
}
.custom-shape .EmbeddedMessage {
  max-width: 15rem;
  padding: 0.5rem;
  margin: 0;
  background-color: var(--background-color);
  box-shadow: 0 1px 2px var(--color-default-shadow);
}
.custom-shape .EmbeddedMessage::before {
  left: 0.625rem;
  top: 0.625rem;
  bottom: 0.625rem;
}
.custom-shape .EmbeddedMessage .embedded-thumb {
  margin-inline-start: 0.5rem;
}
.custom-shape .EmbeddedMessage:dir(rtl) {
  padding: 0.5rem;
}
.EmbeddedMessage::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 0.25rem;
  width: 2px;
  background: var(--accent-color);
  border-radius: 2px;
}
.EmbeddedMessage:hover, .EmbeddedMessage:active {
  background-color: var(--hover-color);
}
.EmbeddedMessage .message-title {
  font-size: calc(var(--message-text-size, 1rem) - 0.125rem);
}
.EmbeddedMessage .message-text {
  overflow: hidden;
  margin-inline-start: 0.5rem;
  display: flex;
  flex-direction: column-reverse;
}
.EmbeddedMessage .message-text .message-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  display: block;
}
.EmbeddedMessage .message-text p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 1.125rem;
  margin-bottom: 0;
  font-size: 0.8125rem;
  flex: 1;
  color: var(--color-text-secondary);
}
.EmbeddedMessage .message-text p::after {
  content: none;
  display: none;
}
.EmbeddedMessage .message-text .emoji {
  width: calc(1.125 * var(--message-text-size, 1rem)) !important;
  height: calc(1.125 * var(--message-text-size, 1rem)) !important;
  vertical-align: text-bottom !important;
}
.EmbeddedMessage .message-text .custom-emoji {
  --custom-emoji-size: max(
    calc(1.125 * var(--message-text-size, 1rem) + 1px),
    20px
  );
  margin-inline-end: 1px;
}
.EmbeddedMessage .message-text .custom-emoji > img {
  border-radius: 0;
}
.EmbeddedMessage .embedded-action-message {
  color: var(---secondary-color);
  opacity: 0.75;
}
.EmbeddedMessage .embedded-thumb {
  position: relative;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 0.2px;
  margin-left: 0.25rem;
  flex-shrink: 0;
  overflow: hidden;
}
.EmbeddedMessage .embedded-thumb.round {
  border-radius: 1rem;
}
.EmbeddedMessage .pictogram {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.EmbeddedMessage.inside-input {
  padding-inline-start: 0.75rem;
  width: 100%;
  --accent-color: var(--color-primary);
  --hover-color: var(--color-interactive-element-hover);
  --active-color: var(--color-reply-active);
}
.EmbeddedMessage.inside-input::before {
  bottom: 0.25rem;
}
.EmbeddedMessage.inside-input .embedded-thumb {
  margin-left: 0.125rem;
}
.EmbeddedMessage.inside-input .message-text {
  margin-inline-start: 0.375rem;
  flex-grow: 1;
}
.EmbeddedMessage.inside-input .message-title {
  font-weight: 500;
  color: var(--accent-color);
}
.EmbeddedMessage.inside-input .embedded-more {
  font-size: 1.5rem;
  opacity: 0.8;
  color: var(--color-text-secondary);
}
/*!***********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/message/Sticker.scss ***!
  \***********************************************************************************************************************************************************************************************************/
.Sticker {
  overflow: visible !important;
  contain: layout;
  position: relative;
}
.Sticker.reversed {
  transform: scaleX(-1);
}
.Sticker:not(.inactive) {
  cursor: pointer;
}
.Sticker.inactive {
  pointer-events: none;
}
.Sticker .effect-sticker {
  position: absolute;
  top: 50%;
  right: -1rem;
  transform: translateY(-50%);
}
/*!*****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/message/AnimatedEmoji.scss ***!
  \*****************************************************************************************************************************************************************************************************************/
.AnimatedEmoji.like-sticker-thumb img {
  transform: scale(0.8);
}
/*!*****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/message/InlineButtons.scss ***!
  \*****************************************************************************************************************************************************************************************************************/
.InlineButtons {
  display: flex;
  width: 100%;
  max-width: var(--max-width);
  gap: 0.375rem;
  flex-wrap: wrap;
}
.InlineButtons .row {
  width: 100%;
  gap: 0.5rem;
}
.InlineButtons .col {
  width: 100%;
}
.InlineButtons .Button {
  flex: 1;
  background: #6886b0;
  border-radius: var(--border-radius-messages-medium);
  font-weight: 500;
  text-transform: none;
  width: 100%;
  transition: background-color 150ms, color 150ms, filter 150ms, -webkit-backdrop-filter 150ms;
  transition: background-color 150ms, color 150ms, backdrop-filter 150ms, filter 150ms;
  transition: background-color 150ms, color 150ms, backdrop-filter 150ms, filter 150ms, -webkit-backdrop-filter 150ms;
}
.InlineButtons .Button.tiny {
  font-size: 0.9375rem;
  height: 2.5rem;
}
.InlineButtons .Button:hover, .InlineButtons .Button:focus {
  background: #3f608e !important;
  -webkit-backdrop-filter: brightness(115%);
          backdrop-filter: brightness(115%);
  color: white;
}
@supports not ((-webkit-backdrop-filter: brightness(115%)) or (backdrop-filter: brightness(115%))) {
  .InlineButtons .Button:hover, .InlineButtons .Button:focus {
    filter: brightness(115%);
  }
}
.InlineButtons .Button i {
  font-size: 0.875rem;
  position: absolute;
  right: 0.1875rem;
  top: 0.1875rem;
  display: block;
}
.InlineButtons .Button i.icon-arrow-right {
  font-size: 0.75rem;
  top: 0.125rem;
  right: 0.125rem;
  transform: rotate(-45deg);
}
.phoenix-bot .InlineButtons .Button {
  background: #6886b0;
  color: white;
}
.phoenix-bot .InlineButtons .Button:hover, .phoenix-bot .InlineButtons .Button:focus {
  background: #3f608e !important;
}
.InlineButtons .inline-button-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  line-height: 1.2;
}
.has-inline-buttons .media .InlineButtons {
  margin-top: 0.375rem;
}
/*!****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/message/CustomEmojiEffect.module.scss ***!
  \****************************************************************************************************************************************************************************************************************************/
.CustomEmojiEffect-module__root {
  position: absolute;
  z-index: 10;
}

.CustomEmojiEffect-module__particle {
  color: var(--color-primary);
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  offset-path: var(--offset-path);
  offset-rotate: 0deg;
  animation: 1.5s CustomEmojiEffect-module__particle ease-out;
  animation-fill-mode: forwards;
}

@keyframes CustomEmojiEffect-module__particle {
  0% {
    offset-distance: 0%;
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
  75% {
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
    transform: scale(1);
  }
}
/*!********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/message/ReactionAnimatedEmoji.module.scss ***!
  \********************************************************************************************************************************************************************************************************************************/
.ReactionAnimatedEmoji-module__root {
  --custom-emoji-border-radius: 0.25rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  margin-inline-end: 0.25rem;
  z-index: 1;
}
.ReactionAnimatedEmoji-module__root.ReactionAnimatedEmoji-module__is-custom-emoji {
  margin-inline-end: 0.375rem;
}

.ReactionAnimatedEmoji-module__animated-icon,
.ReactionAnimatedEmoji-module__effect {
  position: fixed;
  top: -0.375rem;
  left: -0.375rem;
  pointer-events: none;
}
.ReactionAnimatedEmoji-module__animated-icon.ReactionAnimatedEmoji-module__effect,
.ReactionAnimatedEmoji-module__effect.ReactionAnimatedEmoji-module__effect {
  top: -2.5rem;
  left: -2.5rem;
}
.ReactionAnimatedEmoji-module__animated-icon:not(.open),
.ReactionAnimatedEmoji-module__effect:not(.open) {
  opacity: 1 !important;
}
.ReactionAnimatedEmoji-module__animated-icon.closing,
.ReactionAnimatedEmoji-module__effect.closing {
  opacity: 0 !important;
}

.ReactionAnimatedEmoji-module__animating {
  transform: translateZ(0);
  contain: layout;
}
/*!**************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/message/PollOption.scss ***!
  \**************************************************************************************************************************************************************************************************************/
.PollOption {
  display: flex;
  flex-flow: row nowrap;
  margin-bottom: 0.75rem;
}
.PollOption:last-child {
  margin-bottom: 0;
}
.PollOption .poll-option-text {
  word-break: break-word;
}
.PollOption .poll-option-share {
  position: relative;
  margin-top: 0.125rem;
  width: 1.75rem;
  margin-inline-end: 0.5rem;
  flex-shrink: 0;
  font-weight: 500;
  font-size: 0.875rem;
  text-align: right;
}
.PollOption .poll-option-share.limit-width {
  display: inline-flex;
  justify-content: center;
  font-size: 0.75rem;
}
.PollOption .poll-option-chosen {
  position: absolute;
  right: 0;
  bottom: -5px;
  width: 1rem;
  height: 1rem;
  background: var(--accent-color);
  color: var(--background-color);
  border-radius: 0.5rem;
  font-size: 0.75rem;
  text-align: center;
}
.PollOption .poll-option-chosen.wrong {
  background: var(--color-error);
}
.is-forwarded .PollOption .poll-option-chosen > i {
  margin-left: 1px;
}
.PollOption .poll-option-chosen.animate {
  opacity: 0;
  animation-name: PollOptionIconAnimate;
  animation-delay: 0.09s;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}
.PollOption .poll-option-right {
  flex-grow: 1;
  line-height: 1.5rem;
}
.PollOption .poll-option-answer {
  position: relative;
}
.PollOption .poll-option-line {
  position: relative;
  width: 0;
  height: 0.25rem;
  min-width: 0.5rem;
  border-radius: 0.125rem;
  margin-top: 0.5rem;
  background: var(--accent-color);
  transform-origin: 0 0;
  transition: transform 0.3s;
  transition-delay: 0.09s;
}
.PollOption .poll-line {
  width: 30px;
  height: 35px;
  position: absolute;
  left: -27px;
  bottom: -5px;
  transition: stroke-dashoffset 0.3s, stroke-dasharray 0.3s;
  stroke-dashoffset: 0;
  stroke-dasharray: 0, 200%;
}
.PollOption .poll-line path {
  strokeWidth: 4px;
  stroke-linecap: round;
  stroke: var(--accent-color);
  fill: none;
}
.PollOption .wrong .poll-option-line {
  background: var(--color-error);
}
.PollOption .wrong .poll-line path {
  stroke: var(--color-error);
}

@keyframes PollOptionIconAnimate {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/message/Poll.scss ***!
  \********************************************************************************************************************************************************************************************************/
.Poll {
  min-width: 15rem;
  text-align: initial;
}
@media (max-width: 600px) {
  .Poll {
    min-width: 50vw;
  }
}
.Poll .poll-question {
  font-weight: 500;
  line-height: 1.25rem;
  margin: 0.125rem 0;
  word-break: break-word;
}
.Poll .poll-type,
.Poll .poll-voters-count {
  color: var(--secondary-color);
  font-size: 0.875rem;
}
.Poll .poll-type {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  min-height: 1.375rem;
}
.Poll .poll-voters-count {
  margin: 0.4375rem 0 1.125rem;
  text-align: center;
}
.Poll .poll-answers {
  padding-top: 0.25rem;
  padding-bottom: 1rem;
}
.Poll .Checkbox,
.Poll .Radio {
  padding-left: 2.25rem;
}
.Poll .Checkbox:last-child,
.Poll .Radio:last-child {
  margin-bottom: 0.75rem;
}
.Poll .Checkbox.disabled,
.Poll .Radio.disabled {
  opacity: 1 !important;
  cursor: not-allowed;
}
.Poll .Checkbox .Checkbox-main::before,
.Poll .Checkbox .Radio-main::before,
.Poll .Radio .Checkbox-main::before,
.Poll .Radio .Radio-main::before {
  left: 0.125rem;
  background-color: var(--background-color);
  --color-borders-input: var(--secondary-color);
}
.Poll .Checkbox .Checkbox-main::after,
.Poll .Checkbox .Radio-main::after,
.Poll .Radio .Checkbox-main::after,
.Poll .Radio .Radio-main::after {
  left: 0.4375rem;
  background-color: var(--accent-color);
}
.Poll .Checkbox input:checked ~ .Radio-main::before,
.Poll .Checkbox input:checked ~ .Checkbox-main::before,
.Poll .Radio input:checked ~ .Radio-main::before,
.Poll .Radio input:checked ~ .Checkbox-main::before {
  border-color: var(--accent-color);
}
.Poll .Checkbox .Spinner,
.Poll .Radio .Spinner {
  left: 0.125rem;
}
.Poll .Checkbox .Checkbox-main::after {
  left: 0.125rem;
  background-color: var(--color-primary);
}
.Message.own .Poll .Checkbox .Checkbox-main::after {
  background-color: var(--accent-color);
}
.Poll .Spinner > div {
  background-image: var(--spinner-gray-data);
}
.theme-dark .Poll .Spinner > div {
  background-image: var(--spinner-white-data);
}
.Message.own .Poll .Spinner > div {
  background-image: var(--spinner-green-data);
}
.theme-dark .Message.own .Poll .Spinner > div {
  background-image: var(--spinner-white-data);
}
.Poll .poll-recent-voters {
  display: inline-flex;
  align-items: center;
  vertical-align: text-bottom;
  margin-left: 0.875rem;
  margin-right: 0.5rem;
  margin-top: -2px;
}
.Poll .poll-recent-voters .Avatar {
  border: 0.0625rem solid var(--color-background);
  margin-right: 0;
  box-sizing: content-box;
}
.Message.own .Poll .poll-recent-voters .Avatar {
  border: 0.0625rem solid var(--secondary-color);
}
.Poll .poll-recent-voters .Avatar:not(:first-child) {
  margin-left: -3px;
}
.Poll .poll-countdown {
  margin-left: auto;
  font-size: 0.75rem;
  transition: color 0.2s;
}
.Poll .poll-countdown.hurry-up {
  color: var(--color-error);
}
.Poll .poll-countdown.hurry-up .poll-countdown-progress {
  stroke: var(--color-error);
}
.Poll .poll-countdown svg {
  vertical-align: -3px;
}
.Poll .poll-countdown-progress {
  stroke: var(--color-primary);
  fill: transparent;
  strokeWidth: 2;
  stroke-linecap: round;
  transition: stroke-dashoffset 2s, stroke 0.2s;
}
.Poll .poll-quiz-help {
  margin: -0.625rem 0 -0.625rem auto;
}
.Message:not(.own) .Poll .poll-quiz-help {
  color: var(--color-primary);
}
.Poll .poll-results,
.Poll .poll-answers {
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
}
.Poll .Button {
  text-transform: none;
  font-size: 1rem;
}
.Message.own .Poll .Button {
  color: var(--accent-color);
  --color-primary-shade-rgb: var(--color-accent-own);
}
.Poll > .Button {
  margin-bottom: 0.625rem;
}
/*!***************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/message/MessagePhoneCall.module.scss ***!
  \***************************************************************************************************************************************************************************************************************************/
.MessagePhoneCall-module__root {
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem;
  gap: 1rem;
}

.MessagePhoneCall-module__button.MessagePhoneCall-module__translucent {
  background-color: #eeeeef;
}
.MessagePhoneCall-module__button.MessagePhoneCall-module__translucent [stroke] {
  stroke: #b1b1b5;
}
.MessagePhoneCall-module__button.MessagePhoneCall-module__primary {
  background-color: #0a3f8d;
}
.MessagePhoneCall-module__button.MessagePhoneCall-module__primary [stroke] {
  stroke: #b0cefa;
}

.MessagePhoneCall-module__info {
  display: flex;
  flex-direction: column;
  -webkit-user-select: none;
          user-select: none;
}

.MessagePhoneCall-module__reason {
  font-weight: 500;
}

.MessagePhoneCall-module__arrow {
  font-size: 1.125rem;
  display: inline-block;
  transform: rotateZ(180deg);
}
.MessagePhoneCall-module__arrow.MessagePhoneCall-module__incoming {
  transform: rotateZ(0);
}
.MessagePhoneCall-module__arrow.MessagePhoneCall-module__incoming.MessagePhoneCall-module__missed [stroke] {
  stroke: var(--color-error);
}

.MessagePhoneCall-module__meta {
  display: flex;
  align-items: center;
  position: relative;
  left: -3px;
}

.MessagePhoneCall-module__duration {
  margin-inline-start: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.own .MessagePhoneCall-module__duration {
  color: var(--color-message-meta-own);
}
/*!************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/common/TopicChip.module.scss ***!
  \************************************************************************************************************************************************************************************************************/
.TopicChip-module__root {
  --custom-emoji-size: 1.125rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  line-height: 1.125rem;
  background-color: var(--background-color);
  border-radius: var(--border-radius-messages);
  color: var(--topic-button-accent-color);
  cursor: pointer;
}
.TopicChip-module__root::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: var(--topic-button-accent-color);
  opacity: 0.15;
  transition: opacity 0.15s ease-in-out;
  border-radius: var(--border-radius-messages);
}
.TopicChip-module__root:hover::before {
  opacity: 0.1;
}
/*!**********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/main/visualEffects/SnapEffectContainer.module.scss ***!
  \**********************************************************************************************************************************************************************************************************************************/
.SnapEffectContainer-module__root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-overlay-effects);
}

.SnapEffectContainer-module__ghost {
  position: absolute;
  overflow: visible !important;
  animation: SnapEffectContainer-module__scale 1s ease-in forwards !important;
  transform-origin: bottom;
}

.SnapEffectContainer-module__elementContainer {
  overflow: visible;
}

@keyframes SnapEffectContainer-module__scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
/*!********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/message/SponsoredMessage.scss ***!
  \********************************************************************************************************************************************************************************************************************/
.SponsoredMessage {
  --border-top-left-radius: var(--border-radius-messages) !important;
  --border-bottom-left-radius: var(--border-radius-messages) !important;
  margin-top: -0.5rem;
  margin-bottom: 0.5rem;
}
.SponsoredMessage::before {
  display: none;
}
.SponsoredMessage__button.secondary {
  margin-top: 0.5rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radius-default-tiny);
  color: var(--color-primary);
}
/*!***********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/ContactGreeting.scss ***!
  \***********************************************************************************************************************************************************************************************************/
.ContactGreeting {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ContactGreeting .wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: rgba(6, 100, 168, 0.3);
  padding: 0.9375rem;
  border-radius: 0.625rem;
  color: #fff;
}
.ContactGreeting .title {
  font-weight: 500;
  font-size: 0.9375rem;
  margin-bottom: 0.25rem;
  text-align: center;
  unicode-bidi: plaintext;
}
.ContactGreeting .description {
  font-size: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  unicode-bidi: plaintext;
}
.ContactGreeting .sticker {
  margin: 2rem 0 1rem;
  height: 10rem;
  width: 10rem;
  cursor: pointer;
}
.ContactGreeting .sticker .thumbnail {
  height: 10rem;
  width: 10rem;
}
/*!******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/NoMessages.scss ***!
  \******************************************************************************************************************************************************************************************************/
@charset "UTF-8";
.NoMessages {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.NoMessages .icon {
  font-size: 5rem;
  margin: 0 auto 1rem;
}
.NoMessages .topic-icon {
  --custom-emoji-size: 3rem;
  width: 3rem;
  height: 3rem;
  font-size: 2rem;
}
.NoMessages .AnimatedSticker {
  margin: 0 auto;
}
.NoMessages .wrapper {
  background: rgba(6, 100, 168, 0.3);
  padding: 0.9375rem;
  border-radius: 0.625rem;
  max-width: 15.9375rem;
}
.NoMessages .wrapper[dir=rtl] {
  text-align: right;
}
.NoMessages .title {
  margin-bottom: 0.25rem;
  text-align: center;
  unicode-bidi: plaintext;
}
.NoMessages .description {
  font-size: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
  unicode-bidi: plaintext;
}
.NoMessages .img-wrap {
  text-align: center;
}
.NoMessages .topic-description {
  text-align: center;
  padding: 0 1rem;
}
.NoMessages .list-checkmarks {
  font-size: 0.875rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  unicode-bidi: plaintext;
  line-height: 1.2;
}
.NoMessages .list-checkmarks li::before {
  content: "•";
  margin-inline-end: 0.5rem;
}
/*!*******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/MessageList.scss ***!
  \*******************************************************************************************************************************************************************************************************/
.MessageList {
  flex: 1;
  width: 100%;
  margin-bottom: 0.25rem;
  overflow-x: hidden;
  transition: transform var(--layer-transition);
  /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
  transition: bottom 150ms ease-out, transform var(--layer-transition);
}
body.animation-level-0 .MessageList {
  transition: none !important;
}
.mask-image-enabled .MessageList {
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 0.5rem);
          mask-image: linear-gradient(to top, transparent 0, #000 0.5rem);
}
@media (pointer: coarse) {
  .MessageList {
    -webkit-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
  }
  .MessageList.select-mode-active {
    -webkit-user-select: auto;
            user-select: auto;
    -webkit-touch-callout: default;
  }
}
body.keyboard-visible .MessageList {
  position: relative;
  bottom: calc(0px - env(safe-area-inset-bottom));
}
@supports not (bottom: calc(0px - env(safe-area-inset-bottom))) {
  body.keyboard-visible .MessageList {
    bottom: 0;
  }
}
body.keyboard-visible.animation-level-0 body.keyboard-visible .MessageList {
  transition: none !important;
}
.MessageList.no-avatars .Message > .Avatar {
  display: none;
}
.MessageList .messages-container {
  width: 100%;
  max-width: var(--messages-container-width);
  min-height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  padding: 1rem 1rem 0 1.125rem;
  position: relative;
}
@media (max-width: 600px) {
  .MessageList .messages-container {
    width: 100vw;
    padding: 1rem 0.5rem 0;
    margin: 0;
  }
}
.MessageList.no-composer {
  margin-bottom: 0;
}
.MessageList.no-composer .last-in-list {
  margin-bottom: 1rem;
}
.MessageList.select-mode-active, .MessageList.type-pinned {
  margin-bottom: 0;
}
.MessageList.select-mode-active .last-in-list, .MessageList.type-pinned .last-in-list {
  margin-bottom: 5.625rem;
}
@media (max-width: 600px) {
  .MessageList.select-mode-active .last-in-list, .MessageList.type-pinned .last-in-list {
    margin-bottom: 4.25rem;
  }
}
.MessageList.select-mode-active .last-in-list.ActionMessage, .MessageList.type-pinned .last-in-list.ActionMessage {
  padding-bottom: 0.125rem;
}
@media (max-width: 600px) {
  .MessageList.with-bottom-shift {
    margin-bottom: 0;
  }
  .MessageList.with-bottom-shift .last-in-list {
    margin-bottom: 4.25rem;
  }
  body:not(.keyboard-visible) .MessageList.with-bottom-shift .last-in-list {
    margin-bottom: calc(4.25rem + env(safe-area-inset-bottom));
  }
}
.MessageList .Message,
.MessageList .ActionMessage {
  position: relative;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.MessageList .Message:not(.open),
.MessageList .ActionMessage:not(.open) {
  transform: scale(0.8);
  opacity: 0;
}
.MessageList .Message.open.shown,
.MessageList .ActionMessage.open.shown {
  transform: none;
}
.MessageList .Message.hidden,
.MessageList .ActionMessage.hidden {
  margin: 0 !important;
  height: 0 !important;
}
.MessageList .Message.hidden .action-message-content,
.MessageList .ActionMessage.hidden .action-message-content {
  display: none;
}
.MessageList .Message:not(.hidden)::before,
.MessageList .ActionMessage:not(.hidden)::before {
  content: "";
  position: absolute;
  top: -0.1875rem;
  bottom: -0.1875rem;
  left: -50vw;
  right: -50vw;
  background: black;
  z-index: 0;
  opacity: 0;
  transition: opacity var(--select-transition);
}
body.animation-level-0 .MessageList .Message:not(.hidden)::before,
body.animation-level-0 .MessageList .ActionMessage:not(.hidden)::before {
  transition: none !important;
}
.MessageList .Message:not(.last-in-group)::before,
.MessageList .ActionMessage:not(.last-in-group)::before {
  bottom: -0.1875rem;
}
.MessageList .Message:not(.first-in-group)::before,
.MessageList .ActionMessage:not(.first-in-group)::before {
  top: -0.1875rem;
}
.MessageList .Message.focused::before,
.MessageList .ActionMessage.focused::before {
  transition: none !important;
}
.MessageList .Message.focused::before, .MessageList .Message.is-forwarding::before, .MessageList .Message.is-selected::before, .MessageList .Message.has-menu-open::before,
.MessageList .ActionMessage.focused::before,
.MessageList .ActionMessage.is-forwarding::before,
.MessageList .ActionMessage.is-selected::before,
.MessageList .ActionMessage.has-menu-open::before {
  opacity: 0.1;
}
.theme-dark .MessageList .Message.focused::before, .theme-dark .MessageList .Message.is-forwarding::before, .theme-dark .MessageList .Message.is-selected::before, .theme-dark .MessageList .Message.has-menu-open::before,
.theme-dark .MessageList .ActionMessage.focused::before,
.theme-dark .MessageList .ActionMessage.is-forwarding::before,
.theme-dark .MessageList .ActionMessage.is-selected::before,
.theme-dark .MessageList .ActionMessage.has-menu-open::before {
  opacity: 0.6;
}
html.theme-light .MessageList.with-default-bg .Message::before,
html.theme-light .MessageList.with-default-bg .ActionMessage::before {
  background: var(--pattern-color);
}
html.theme-light .MessageList.with-default-bg .Message.focused::before, html.theme-light .MessageList.with-default-bg .Message.is-forwarding::before, html.theme-light .MessageList.with-default-bg .Message.is-selected::before, html.theme-light .MessageList.with-default-bg .Message.has-menu-open::before,
html.theme-light .MessageList.with-default-bg .ActionMessage.focused::before,
html.theme-light .MessageList.with-default-bg .ActionMessage.is-forwarding::before,
html.theme-light .MessageList.with-default-bg .ActionMessage.is-selected::before,
html.theme-light .MessageList.with-default-bg .ActionMessage.has-menu-open::before {
  opacity: 0.35;
}
.MessageList > .empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.MessageList > .empty > span {
  max-width: 80%;
  text-align: left;
}
.MessageList > .empty > .bot-info {
  max-width: 17.5rem;
  display: flex;
  flex-direction: column;
  background: var(--color-primary);
  color: white;
  font-size: 0.875rem;
  line-height: 1.17;
  border-radius: var(--border-radius-messages);
  overflow: hidden;
  text-align: initial;
}
.MessageList > .empty > .bot-info > .bot-info-description {
  padding: 0.9375rem;
  word-break: break-all;
}
.MessageList > .empty > .bot-info .bot-info-title {
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.MessageList > .empty .text-entity-link {
  color: inherit !important;
  text-decoration: underline;
}
.MessageList > .empty .text-entity-link:hover, .MessageList > .empty .text-entity-link:focus {
  text-decoration: none;
}
.MessageList .sticky-date,
.MessageList .local-action-message,
.MessageList .ActionMessage,
.MessageList .empty {
  text-align: center;
  -webkit-user-select: none;
          user-select: none;
}
.MessageList .sticky-date > span,
.MessageList .local-action-message > span,
.MessageList .ActionMessage > span,
.MessageList .empty > span {
  display: inline-block;
  background: var(--color-black-opacity-40);
  color: white;
  font-size: calc(var(--message-text-size, 1rem) - 0.1875rem);
  padding: 0.047rem 0.5rem;
  border-radius: var(--border-radius-messages);
  word-break: break-word;
  position: relative;
  z-index: 0;
}
body.is-ios .MessageList .sticky-date > span, body.is-macos .MessageList .sticky-date > span,
body.is-ios .MessageList .local-action-message > span,
body.is-macos .MessageList .local-action-message > span,
body.is-ios .MessageList .ActionMessage > span,
body.is-macos .MessageList .ActionMessage > span,
body.is-ios .MessageList .empty > span,
body.is-macos .MessageList .empty > span {
  font-size: calc(var(--message-text-size, 1rem) - 0.125rem);
  line-height: calc(var(--message-text-size, 1rem) + 0.5rem);
}
.MessageList .sticky-date > span .emoji-small,
.MessageList .local-action-message > span .emoji-small,
.MessageList .ActionMessage > span .emoji-small,
.MessageList .empty > span .emoji-small {
  vertical-align: text-bottom;
  width: calc(1.25 * var(--message-text-size, 1rem));
  height: calc(1.25 * var(--message-text-size, 1rem));
  background-size: calc(1.25 * var(--message-text-size, 1rem));
}
.MessageList .action-message-content {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.MessageList .ActionMessage.centered-action {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.MessageList .action-message-gift {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  line-height: 1rem !important;
  padding-bottom: 0.75rem !important;
  margin-top: 0.5rem;
  cursor: pointer;
  outline: none;
}
.MessageList .action-message-suggested-avatar {
  max-width: 16rem;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  line-height: 1rem !important;
  padding-bottom: 0.75rem !important;
  margin-top: 0.5rem;
  cursor: pointer;
  outline: none;
}
.MessageList .action-message-suggested-avatar .Avatar {
  width: 6.5rem;
  height: 6.5rem;
  margin: 1rem;
}
.MessageList .action-message-button {
  display: inline-block;
  border-radius: var(--border-radius-default);
  padding: 0.5rem 0.75rem;
  margin-top: 0.5rem;
  background-color: var(--pattern-color);
}
.MessageList .sticky-date {
  margin-bottom: 1rem;
  z-index: var(--z-sticky-date);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}
@media (max-width: 600px) {
  .MessageList .sticky-date {
    margin-bottom: 0.75rem;
  }
}
body:not(.is-scrolling-messages) .MessageList .sticky-date.stuck {
  opacity: 0;
}
body:not(.is-scrolling-messages) .MessageList .sticky-date.stuck span {
  pointer-events: none;
}
body.animation-level-0 .MessageList .sticky-date {
  transition: none;
}
.MessageList .sticky-date.interactive {
  cursor: pointer;
}
.MessageList .sticky-date span {
  pointer-events: auto;
}
.MessageList.scrolled:not(.is-animating) .sticky-date {
  position: sticky;
  top: 0.25rem;
}
.ai-bot .MessageList.scrolled:not(.is-animating) .sticky-date {
  top: 2.75rem;
}
.MessageList.is-animating {
  overflow: hidden;
}
.MessageList.is-animating .message-select-control {
  display: none !important;
}
.has-header-tools .MessageList .sticky-date {
  top: 3.75rem !important;
}
.MessageList .local-action-message,
.MessageList .ActionMessage {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.MessageList .local-action-message,
.MessageList .ActionMessage.in-one-row {
  height: 1.5625rem;
}
.MessageList .ActionMessage .action-link {
  cursor: pointer;
}
.MessageList .ActionMessage .action-link:hover {
  text-decoration: underline;
}
.MessageList .ActionMessage .underlined-link {
  text-decoration: underline;
}
.MessageList .ActionMessage .underlined-link:hover {
  text-decoration: none;
}
.MessageList .sticky-date + .ActionMessage {
  margin-top: -0.375rem;
}
@media (min-width: 1276px) {
  .MessageList {
    width: 100%;
    transform: translate3d(0, 0, 0);
    transition: transform var(--layer-transition);
  }
  .MessageList .messages-container {
    width: calc(100% - var(--right-column-width));
  }
  body.animation-level-0 .MessageList {
    transition: none;
  }
  #Main.right-column-open .MessageList {
    transform: translate3d(calc(var(--right-column-width) / -2), 0, 0);
  }
  #Main.narrow-message-list .MessageList {
    width: calc(100% - var(--right-column-width));
  }
  #Main.narrow-message-list .MessageList .messages-container {
    width: 100%;
  }
}
@media (max-width: 600px) {
  .MessageList {
    transition: transform var(--layer-transition);
  }
  body.enable-symbol-menu-transforms .MessageList {
    transform: translate3d(0, 0, 0);
  }
  body.is-symbol-menu-open .MessageList {
    transform: translate3d(0, calc(-1 * (var(--symbol-menu-height) + var(--symbol-menu-footer-height))), 0);
  }
}
.animating > div > .MessageList {
  /* Styles for Firefox */
}
.animating > div > .MessageList::-webkit-scrollbar {
  width: 0;
}
@supports (scrollbar-width: none) {
  .animating > div > .MessageList {
    padding-right: 0.6875rem;
    scrollbar-width: none;
  }
}
.MessageList.MessageFeedList .messages-container {
  justify-content: flex-start;
}

.massages-info-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  font-size: 1.125rem;
  font-weight: 500;
  text-align: center;
  padding: 0.59375rem;
  background-color: white;
  transition: width var(--layer-transition);
  border-bottom: solid 1px var(--color-gray);
  border-top: 1px solid var(--color-light-shadow);
  transition: all var(--layer-transition);
}
.massages-info-line [stroke] {
  stroke: var(--color-primary);
}
.massages-info-line:hover {
  background-color: #f6f6f7;
}
.massages-info-line.prompt-left {
  position: absolute;
  height: 40px;
  padding: 0 0.5rem 0 1rem;
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  border-bottom: 1px solid #cfcfd2;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(26.5px);
          backdrop-filter: blur(26.5px);
}
.massages-info-line.prompt-left:after {
  width: 6rem;
  height: 2.5rem;
  background-image: url(/model_sprites.0f44fa156bb0496d3847.png);
  background-position: -500px -10px;
}
.massages-info-line.prompt-left.OpenAi::after {
  background-position-x: -85px;
}
.massages-info-line.prompt-left.Claude::after {
  background-position-x: -190px;
}
.massages-info-line.prompt-left.Gemini::after {
  background-position-x: 14px;
}
.massages-info-line.prompt-left.LLaMA::after {
  background-position-x: -295px;
}
.massages-info-line.prompt-left.Leonardo::after {
  background-position-x: -620px;
}
.massages-info-line.prompt-left.stability::after {
  background-position-x: -630px;
}
.massages-info-line.prompt-left.DALLE::after {
  background-position-x: -400px;
}

@media (min-width: 1440px) {
  #Main.right-column-open .massages-info-line {
    width: calc(100% - var(--right-column-width));
  }
}
@media (max-width: 420px) {
  .massages-info-line {
    font-size: 0.75rem;
  }
}
/*!*******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/ScrollDownButton.module.scss ***!
  \*******************************************************************************************************************************************************************************************************************/
.ScrollDownButton-module__root {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transition: opacity 0.2s ease;
  -webkit-user-select: none;
          user-select: none;
  pointer-events: auto;
}
.ScrollDownButton-module__root:not(:first-child) {
  margin-top: 0.5rem;
}
@media (max-width: 600px) {
  .ScrollDownButton-module__root:not(:first-child) {
    margin-top: 1rem;
  }
}
@media (min-width: 1276px) {
  .ScrollDownButton-module__root {
    transform: translateX(0);
    transition: transform var(--layer-transition), opacity 0.2s ease;
  }
  body.animation-level-0 .ScrollDownButton-module__root {
    transition: none !important;
  }
  #Main.right-column-open .ScrollDownButton-module__root {
    transform: translateX(calc(-1 * var(--right-column-width)));
  }
}

.ScrollDownButton-module__button {
  box-shadow: 0 1px 2px var(--color-default-shadow);
  color: var(--color-composer-button);
}
@media (max-width: 600px) {
  .ScrollDownButton-module__button {
    width: 2.875rem !important;
    height: 2.875rem !important;
  }
}

.ScrollDownButton-module__unread-count {
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.4375rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.575rem;
  font-weight: 500;
  text-align: center;
  position: absolute;
  top: -0.3125rem;
  right: -0.3125rem;
  background: var(--color-text-green);
  color: white;
  pointer-events: none;
}
@media (max-width: 600px) {
  .ScrollDownButton-module__unread-count {
    top: -0.6875rem;
    right: auto;
  }
}
/*!************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/FloatingActionButtons.module.scss ***!
  \************************************************************************************************************************************************************************************************************************/
.FloatingActionButtons-module__root {
  --base-bottom-pos: 5rem;
  position: absolute;
  bottom: var(--base-bottom-pos);
  right: max(1rem, env(safe-area-inset-right));
  opacity: 0;
  transform: translateY(4.5rem);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  z-index: var(--z-scroll-down-button);
  pointer-events: none;
}
.FloatingActionButtons-module__root .FloatingActionButtons-module__hidden {
  opacity: 0;
  pointer-events: none;
}
.FloatingActionButtons-module__root .FloatingActionButtons-module__reactions {
  transition: 0.2s ease opacity, 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) transform;
}
.FloatingActionButtons-module__root .FloatingActionButtons-module__transform-down {
  transform: translateY(4rem);
}
.FloatingActionButtons-module__root .FloatingActionButtons-module__unread {
  pointer-events: none;
}
body.animation-level-0 .FloatingActionButtons-module__root {
  transform: none !important;
  transition: opacity 0.15s;
}
@media (max-width: 600px) {
  .FloatingActionButtons-module__root {
    right: 0.5rem;
    bottom: 4.5rem;
  }
  body:not(.keyboard-visible) .FloatingActionButtons-module__root {
    bottom: calc(4.5rem + env(safe-area-inset-bottom));
  }
}
@supports not (right: max(1rem, env(safe-area-inset-right))) {
  .FloatingActionButtons-module__root {
    right: 1rem;
  }
  @media (max-width: 600px) {
    .FloatingActionButtons-module__root {
      right: 0.5rem;
    }
    body:not(.keyboard-visible) .FloatingActionButtons-module__root {
      bottom: 4.5rem;
    }
  }
}
.FloatingActionButtons-module__root.FloatingActionButtons-module__revealed {
  transform: translateY(0);
  opacity: 1;
}
.FloatingActionButtons-module__root.FloatingActionButtons-module__revealed .FloatingActionButtons-module__unread {
  pointer-events: auto;
}
.FloatingActionButtons-module__root.FloatingActionButtons-module__revealed.FloatingActionButtons-module__no-composer.FloatingActionButtons-module__no-extra-shift {
  transform: translateY(4rem);
}
.FloatingActionButtons-module__root.FloatingActionButtons-module__only-reactions {
  transform: translateY(4rem);
}
.FloatingActionButtons-module__root.FloatingActionButtons-module__only-reactions .FloatingActionButtons-module__unread {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 600px) {
  body.FloatingActionButtons-module__is-symbol-menu-open .FloatingActionButtons-module__root {
    bottom: calc(var(--base-bottom-pos) + var(--symbol-menu-height) + var(--symbol-menu-footer-height));
  }
}
/*!*************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/AttachBotIcon.module.scss ***!
  \*************************************************************************************************************************************************************************************************************************/
.AttachBotIcon-module__root {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.AttachBotIcon-module__root.AttachBotIcon-module__compact {
  width: 1.25rem;
  height: 1.25rem;
}

.AttachBotIcon-module__image {
  width: 1.75rem;
  position: absolute;
}
.AttachBotIcon-module__image.AttachBotIcon-module__compact {
  width: 1.5rem;
}
/*!***************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/AttachMenu.scss ***!
  \***************************************************************************************************************************************************************************************************************/
.AttachMenu {
  align-self: flex-end;
  position: relative;
}
.AttachMenu--button:focus {
  color: var(--color-primary);
}
.AttachMenu--menu {
  position: absolute;
  top: 0;
  width: 50px;
  height: 50px;
  z-index: -1;
}
.AttachMenu--menu.open {
  z-index: 1;
}
.AttachMenu--menu .bubble {
  max-height: 20rem;
  overflow: auto;
}
.is-pointer-env .AttachMenu--menu > .backdrop {
  position: absolute;
  top: -1rem;
  left: auto;
  right: 0;
  bottom: -100vh;
  width: 3.5rem;
}
.AttachMenu--menu .media-disabled > button {
  white-space: normal;
}

.bot-attach-context-menu {
  position: absolute;
}
/*!********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/BotKeyboardMenu.scss ***!
  \********************************************************************************************************************************************************************************************************************/
.BotKeyboardMenu .bubble {
  width: 100% !important;
  max-width: 27rem;
  border-radius: var(--border-radius-default-small);
}
.BotKeyboardMenu .content {
  display: flex;
  flex-direction: column;
  padding: 0.1875rem 0.625rem;
  max-height: 80vh;
  overflow: auto;
}
@media (max-width: 600px) {
  .BotKeyboardMenu .content {
    max-height: 75vh;
  }
}
.BotKeyboardMenu .content .row {
  display: flex;
  flex-direction: row;
}
.BotKeyboardMenu .content .row + .row {
  margin-top: 0.375rem;
}
.BotKeyboardMenu .content .Button {
  flex: 1;
  width: auto;
  height: auto;
  min-height: 3.0625rem;
  border-radius: var(--border-radius-messages-small);
  border: 2px solid var(--color-primary);
  background: var(--color-background);
  color: var(--color-primary);
  font-weight: 500;
  text-transform: none;
}
.BotKeyboardMenu .content .Button:hover {
  color: #fff;
  border-color: var(--color-primary-shade);
  background: var(--color-primary-shade);
}
.BotKeyboardMenu .content .Button + .Button {
  margin-left: 0.375rem;
}
/*!****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/ComposerEmbeddedMessage.scss ***!
  \****************************************************************************************************************************************************************************************************************************/
.ComposerEmbeddedMessage {
  height: 3.125rem;
  /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
  transition: height 150ms ease-out, opacity 150ms ease-out;
}
.select-mode-active + .middle-column-footer .ComposerEmbeddedMessage {
  display: none;
}
.ComposerEmbeddedMessage:not(.open) {
  height: 0 !important;
}
body.animation-level-0 .ComposerEmbeddedMessage {
  transition: none !important;
}
.ComposerEmbeddedMessage > div {
  display: flex;
  align-items: center;
  padding-right: 0.625rem;
  padding-top: 0.2rem;
}
.ComposerEmbeddedMessage .embedded-left-icon {
  flex-shrink: 0;
  background: none !important;
  width: 3.5rem;
  height: 2.875rem;
  margin: 0 -0.0625rem 0 0;
  padding: 0;
  display: grid;
  place-content: center;
  font-size: 1.5rem;
  color: var(--color-primary);
}
@media (max-width: 600px) {
  .ComposerEmbeddedMessage .embedded-left-icon {
    width: 2.875rem;
  }
}
.ComposerEmbeddedMessage .embedded-cancel {
  flex-shrink: 0;
  background: none !important;
  width: 2.25rem;
  height: 2.875rem;
  margin: 0 -0.0625rem 0 0.75rem;
  padding: 0;
  align-self: center;
}
.ComposerEmbeddedMessage .embedded-cancel svg path {
  stroke: var(--color-text-secondary);
}
@media (max-width: 600px) {
  .ComposerEmbeddedMessage .embedded-cancel {
    width: 1.75rem;
  }
}
.ComposerEmbeddedMessage .forward-context-menu {
  position: absolute;
}
.ComposerEmbeddedMessage .forward-context-menu .bubble {
  width: auto;
}
.ComposerEmbeddedMessage .forward-context-menu .icon-placeholder {
  width: 1.25rem;
}
/*!*******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/WebPagePreview.scss ***!
  \*******************************************************************************************************************************************************************************************************************/
.WebPagePreview {
  height: 2.625rem;
  /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
  transition: height 150ms ease-out, opacity 150ms ease-out;
  --accent-color: var(--color-primary);
}
body.animation-level-0 .WebPagePreview {
  transition: none !important;
}
.select-mode-active + .middle-column-footer .WebPagePreview {
  display: none;
}
.WebPagePreview:not(.open) {
  height: 0 !important;
}
.WebPagePreview > div {
  display: flex;
  align-items: center;
  padding-right: 0.625rem;
  padding-top: 0.1875rem;
}
.ComposerEmbeddedMessage + .WebPagePreview {
  margin-top: 0.75rem;
}
.WebPagePreview .WebPagePreview-left-icon {
  flex-shrink: 0;
  background: none !important;
  width: 3.5rem;
  height: 2.875rem;
  margin: 0 -0.0625rem 0 0;
  padding: 0;
  display: grid;
  place-content: center;
  font-size: 1.5rem;
  color: var(--color-primary);
}
@media (max-width: 600px) {
  .WebPagePreview .WebPagePreview-left-icon {
    width: 2.875rem;
  }
}
.WebPagePreview .WebPagePreview-clear {
  flex-shrink: 0;
  background: none !important;
  width: 2.25rem;
  height: 2.875rem;
  margin: 0 -0.0625rem 0 0;
  padding: 0;
  align-self: center;
}
@media (max-width: 600px) {
  .WebPagePreview .WebPagePreview-clear {
    width: 1.75rem;
  }
}
.WebPagePreview .WebPage {
  flex-grow: 1;
  margin: 0.1875rem 0 0.1875rem 0.125rem;
  max-width: calc(100% - 3.375rem);
  overflow: hidden;
}
.WebPagePreview .WebPage::before {
  top: 0.125rem;
  bottom: 0.0625rem;
}
.WebPagePreview .WebPage.with-video .media-inner {
  display: none;
}
.WebPagePreview .WebPage .site-title,
.WebPagePreview .WebPage .site-description {
  flex: 1;
  max-width: 100%;
  max-height: 1rem;
}
.WebPagePreview .WebPage .site-title {
  margin-top: 0.125rem;
  margin-bottom: 0.1875rem;
}
.WebPagePreview .WebPage .site-description {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/*!*************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/composer/Composer.scss ***!
  \*************************************************************************************************************************************************************************************************************/
.Composer {
  align-items: flex-end;
}
.select-mode-active + .middle-column-footer .Composer {
  position: absolute;
  padding-right: 2rem;
  bottom: env(safe-area-inset-bottom);
}
@supports not (bottom: env(safe-area-inset-bottom)) {
  .select-mode-active + .middle-column-footer .Composer {
    bottom: 0;
  }
}
@media (max-width: 600px) {
  .select-mode-active + .middle-column-footer .Composer {
    padding-right: 1rem;
  }
}
.select-mode-active + .middle-column-footer .Composer::before {
  right: 2.125rem;
}
@media (max-width: 600px) {
  .select-mode-active + .middle-column-footer .Composer::before {
    right: 1rem;
  }
}
.select-mode-active + .middle-column-footer .Composer .svg-appendix {
  opacity: 0;
}
.Composer .form-control {
  --border-width: 0;
}
@keyframes show-send-as-button {
  from {
    /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
    width: 1rem;
    transform: scale(0);
  }
  to {
    /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
    width: 3.5rem;
    transform: scale(1);
  }
}
.Composer > .Button {
  flex-shrink: 0;
  margin-left: 0.5rem;
}
.Composer > .Button:not(.danger) {
  color: var(--color-composer-button);
}
@media (max-width: 600px) {
  .Composer > .Button {
    width: 2.875rem;
    height: 2.875rem;
  }
}
.Composer > .Button .send,
.Composer > .Button .schedule,
.Composer > .Button .microphone-alt,
.Composer > .Button .check {
  position: absolute;
}
@media (hover: hover) {
  .Composer > .Button:not(:active):not(:focus):not(:hover) .send,
  .Composer > .Button:not(:active):not(:focus):not(:hover) .schedule,
  .Composer > .Button:not(:active):not(:focus):not(:hover) .check {
    color: var(--color-primary);
  }
}
@media (hover: none) {
  .Composer > .Button:not(:active):not(:focus) .send,
  .Composer > .Button:not(:active):not(:focus) .schedule,
  .Composer > .Button:not(:active):not(:focus) .check {
    color: var(--color-primary);
  }
}
.Composer > .Button.cancel {
  position: relative;
  z-index: 1;
}
.Composer > .Button.cancel:hover, .Composer > .Button.cancel.active {
  background: var(--color-chat-hover);
}
.Composer > .Button.recording {
  position: relative;
  z-index: 0;
  transition: box-shadow 0.1s;
}
.Composer > .Button.send .send, .Composer > .Button.isBot .send {
  animation: grow-icon 0.4s ease-out;
}
.Composer > .Button.send .send svg path, .Composer > .Button.isBot .send svg path {
  stroke: none;
}
.Composer > .Button.send .microphone-alt,
.Composer > .Button.send .check,
.Composer > .Button.send .schedule, .Composer > .Button.isBot .microphone-alt,
.Composer > .Button.isBot .check,
.Composer > .Button.isBot .schedule {
  animation: hide-icon 0.4s forwards ease-out;
}
.Composer > .Button.schedule .schedule {
  animation: grow-icon 0.4s ease-out;
}
.Composer > .Button.schedule .microphone-alt,
.Composer > .Button.schedule .check,
.Composer > .Button.schedule .send {
  animation: hide-icon 0.4s forwards ease-out;
}
.Composer > .Button.record:not(.isBot) .microphone-alt {
  animation: grow-icon 0.4s ease-out;
}
.Composer > .Button.record:not(.isBot) .send,
.Composer > .Button.record:not(.isBot) .check,
.Composer > .Button.record:not(.isBot) .schedule {
  animation: hide-icon 0.4s forwards ease-out;
}
.Composer > .Button.record.isBot {
  pointer-events: none;
}
.Composer > .Button.edit .check {
  animation: grow-icon 0.4s ease-out;
}
.Composer > .Button.edit .check svg path {
  stroke: var(--color-primary);
}
.Composer > .Button.edit .send,
.Composer > .Button.edit .microphone-alt,
.Composer > .Button.edit .schedule {
  animation: hide-icon 0.4s forwards ease-out;
}
.Composer > .Button.not-ready > i {
  animation-duration: 0ms !important;
}
body.animation-level-0 .Composer > .Button .send,
body.animation-level-0 .Composer > .Button .microphone-alt,
body.animation-level-0 .Composer > .Button .check,
body.animation-level-0 .Composer > .Button .schedule, body.animation-level-1 .Composer > .Button .send,
body.animation-level-1 .Composer > .Button .microphone-alt,
body.animation-level-1 .Composer > .Button .check,
body.animation-level-1 .Composer > .Button .schedule {
  animation-duration: 0ms !important;
}
.Composer .send-as-button {
  z-index: 1;
}
body:not(.animation-level-0) .Composer .send-as-button.appear-animation {
  animation: 0.25s ease-in-out forwards show-send-as-button;
  transform-origin: right;
}

.mobile-symbol-menu-button {
  width: 2.875rem;
  height: 2.875rem;
  position: relative;
}
.mobile-symbol-menu-button .icon-svg.smile,
.mobile-symbol-menu-button .icon-svg.keyboard,
.mobile-symbol-menu-button .Spinner {
  position: absolute;
}
.mobile-symbol-menu-button .Spinner {
  --spinner-size: 1.5rem;
}
.mobile-symbol-menu-button .icon-svg.smile {
  animation: grow-icon 0.4s ease-out;
}
.mobile-symbol-menu-button .icon-svg.keyboard,
.mobile-symbol-menu-button .Spinner {
  animation: hide-icon 0.4s forwards ease-out;
}
.mobile-symbol-menu-button.not-ready > i {
  animation-duration: 0ms !important;
}
.mobile-symbol-menu-button.is-loading .Spinner {
  animation: grow-icon 0.4s ease-out;
}
.mobile-symbol-menu-button.is-loading .icon-svg.keyboard, .mobile-symbol-menu-button.is-loading .icon-svg.smile {
  animation: hide-icon 0.4s forwards ease-out;
}
.mobile-symbol-menu-button.menu-opened .icon-svg.keyboard {
  animation: grow-icon 0.4s ease-out;
}
.mobile-symbol-menu-button.menu-opened .icon-svg.smile,
.mobile-symbol-menu-button.menu-opened .Spinner {
  animation: hide-icon 0.4s forwards ease-out;
}

#message-compose {
  flex-grow: 1;
  max-width: 100%;
  background: var(--color-background);
  border-radius: var(--border-radius-messages);
  position: relative;
  z-index: 1;
}
#message-compose .svg-appendix {
  position: absolute;
  bottom: 0;
  /* stylelint-disable-next-line plugin/whole-pixel */
  right: -0.625rem;
  width: 1rem;
  height: 1.25rem;
  transition: opacity 200ms;
  font-size: 1rem !important;
}
#message-compose .svg-appendix .corner {
  fill: var(--color-background);
}
@media (max-width: 600px) {
  #message-compose {
    max-width: calc(100% - 3.375rem);
  }
}

.message-input-wrapper {
  display: flex;
  align-items: center;
}
.message-input-wrapper .Button:not(.round) {
  height: auto;
  padding: 0.3125rem 0.5rem;
  border-radius: 0.9375rem;
  gap: 0.25rem;
}
.message-input-wrapper .Button:not(.round) span {
  margin-top: 1px;
}
.message-input-wrapper .input-scroller {
  margin-right: 0.5rem;
  padding-right: 0.25rem;
}
.message-input-wrapper > .Spinner {
  align-self: center;
  --spinner-size: 1.5rem;
  margin-right: -0.5rem;
}
.message-input-wrapper > .AttachMenu > .Button,
.message-input-wrapper > .Button {
  flex-shrink: 0;
  padding: 0;
  font-weight: normal;
}
.message-input-wrapper > .AttachMenu > .Button.round,
.message-input-wrapper > .Button.round {
  background: none !important;
}
.message-input-wrapper > .AttachMenu > .Button + .Button,
.message-input-wrapper > .AttachMenu > .Button + .AttachMenu,
.message-input-wrapper > .Button + .Button,
.message-input-wrapper > .Button + .AttachMenu {
  margin-left: 0;
}
@media (max-width: 600px) {
  .message-input-wrapper > .AttachMenu > .Button,
  .message-input-wrapper > .Button {
    width: 2.5rem;
    height: 2.875rem;
  }
  .message-input-wrapper > .AttachMenu > .Button + .Button,
  .message-input-wrapper > .AttachMenu > .Button + .AttachMenu,
  .message-input-wrapper > .Button + .Button,
  .message-input-wrapper > .Button + .AttachMenu {
    margin-left: -0.6875rem;
  }
  .message-input-wrapper > .AttachMenu > .Button.bot-commands,
  .message-input-wrapper > .Button.bot-commands {
    width: 4.5rem;
    align-self: flex-end;
    margin: 0.5rem;
  }
}
.message-input-wrapper > .AttachMenu > .Button.bot-menu,
.message-input-wrapper > .Button.bot-menu {
  --icon-width: 1.25rem;
  --icon-gap: 0.25rem;
  --padding-sides: 0.5rem;
  background: var(--color-primary) !important;
  height: 2rem;
  margin: 0 0.5rem 0.75rem;
  color: white !important;
  text-transform: none;
  display: inline-flex;
  padding: 0 var(--padding-sides);
  width: 2rem;
  max-width: clamp(0px, 12rem, 25vw);
  /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
  transition: 0.25s ease-out width, 0.25s ease-out border-radius;
  border-radius: 0.5rem;
  justify-content: flex-start;
}
.message-input-wrapper > .AttachMenu > .Button.bot-menu.open,
.message-input-wrapper > .Button.bot-menu.open {
  width: calc(var(--bot-menu-text-width) + var(--padding-sides) * 2 + var(--icon-gap) + var(--icon-width));
  border-radius: 1rem;
}
@media (max-width: 600px) {
  .message-input-wrapper > .AttachMenu > .Button.bot-menu,
  .message-input-wrapper > .Button.bot-menu {
    margin-bottom: 0.4375rem;
  }
}
.message-input-wrapper > .AttachMenu > .Button .bot-menu-icon,
.message-input-wrapper > .Button .bot-menu-icon {
  font-size: 1.25rem;
  margin-right: var(--icon-gap);
  transition: 0.25s ease-out transform;
  transform: translateX(-0.15rem);
}
.message-input-wrapper > .AttachMenu > .Button .bot-menu-icon.open,
.message-input-wrapper > .Button .bot-menu-icon.open {
  transform: translateX(0);
}
.message-input-wrapper > .AttachMenu > .Button .bot-menu-text,
.message-input-wrapper > .Button .bot-menu-text {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.message-input-wrapper > .AttachMenu > .Button.bot-commands,
.message-input-wrapper > .Button.bot-commands {
  color: white;
  margin-left: 0.875rem;
  margin-right: 0.5rem;
}
body.is-touch-env .message-input-wrapper > .AttachMenu > .Button.bot-commands.activated + .Button.mobile-symbol-menu-button,
body.is-touch-env .message-input-wrapper > .Button.bot-commands.activated + .Button.mobile-symbol-menu-button {
  z-index: calc(var(--z-menu-backdrop) + 1);
}
.message-input-wrapper > .AttachMenu > .Button.scheduled-button i::after,
.message-input-wrapper > .Button.scheduled-button i::after {
  content: "";
  position: absolute;
  top: 0.75rem;
  right: 0.875rem;
  border: 0.1875rem solid var(--color-background);
  box-sizing: content-box;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-green-darker);
  box-shadow: -0.375rem -0.25rem 0 -0.1875rem var(--color-background);
}
@media (max-width: 600px) {
  .message-input-wrapper > .AttachMenu > .Button.scheduled-button i::after,
  .message-input-wrapper > .Button.scheduled-button i::after {
    top: 0.5rem;
    right: 0.5rem;
  }
}
.message-input-wrapper > .input-group {
  flex-grow: 1;
  margin-bottom: 0;
}
.message-input-wrapper .recording-state {
  display: inline-block;
  position: relative;
  line-height: 3.5rem;
  height: 3.5rem;
  padding: 0 3.125rem 0 1rem;
  font-family: var(--font-family);
  font-variant-numeric: tabular-nums;
}
.message-input-wrapper .recording-state::after {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  background: var(--color-error);
  border-radius: 0.375rem;
  position: absolute;
  top: 50%;
  margin-top: -0.375rem;
  right: 1.3125rem;
  animation: recording-blink-like-macos 1.5s infinite;
}
@media (max-width: 600px) {
  .message-input-wrapper .recording-state {
    height: 2.875rem;
    line-height: 2.875rem;
  }
}

.symbol-menu-trigger {
  left: -1rem;
  bottom: 0;
  position: absolute;
}

@media (min-width: 600px) {
  .symbol-menu-button {
    width: 2rem !important;
    margin-left: 0.75rem;
  }
}
.input-scroller {
  min-height: 3.125rem;
  max-height: 26rem;
  overflow: hidden;
  /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
  transition: height 100ms ease;
}
.input-scroller.overflown {
  overflow-y: auto;
}
@media (max-width: 600px) {
  .input-scroller {
    min-height: 2.875rem !important;
    max-height: 16rem;
  }
}
.input-scroller > .input-scroller-content {
  position: relative;
}
body.animation-level-0 .input-scroller {
  transition: none !important;
}
.input-scroller .emoji {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 1px -5px;
  vertical-align: 0;
  pointer-events: none;
}
.input-scroller .custom-emoji {
  margin: 0;
  vertical-align: text-top;
}
.input-scroller.clone .custom-emoji {
  vertical-align: bottom;
}

#message-input-text,
#caption-input-text,
#comment-input-text {
  position: relative;
  flex-grow: 1;
}
#message-input-text .form-control,
#caption-input-text .form-control,
#comment-input-text .form-control {
  padding: calc((3.5rem - var(--composer-text-size, 1rem) * 1.375) / 2) 0.875rem;
  overflow: hidden;
  height: auto;
  line-height: 1.375;
  font-family: var(--font-family);
  unicode-bidi: plaintext;
  text-align: initial;
  font-size: var(--composer-text-size, 1rem);
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  caret-color: var(--color-text);
}
#message-input-text .form-control.touched + .placeholder-text,
#caption-input-text .form-control.touched + .placeholder-text,
#comment-input-text .form-control.touched + .placeholder-text {
  display: none;
}
#message-input-text .form-control.focus-disabled,
#caption-input-text .form-control.focus-disabled,
#comment-input-text .form-control.focus-disabled {
  pointer-events: none;
}
#message-input-text .forced-placeholder,
#message-input-text .placeholder-text,
#caption-input-text .forced-placeholder,
#caption-input-text .placeholder-text,
#comment-input-text .forced-placeholder,
#comment-input-text .placeholder-text {
  position: absolute;
  color: var(--color-placeholders);
  pointer-events: none;
  unicode-bidi: plaintext;
  text-align: initial;
  line-height: 1.3125;
  font-size: var(--composer-text-size, 1rem);
  top: calc((3.25rem - var(--composer-text-size, 1rem) * 1.375) / 2);
  bottom: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#message-input-text .forced-placeholder.with-icon,
#message-input-text .placeholder-text.with-icon,
#caption-input-text .forced-placeholder.with-icon,
#caption-input-text .placeholder-text.with-icon,
#comment-input-text .forced-placeholder.with-icon,
#comment-input-text .placeholder-text.with-icon {
  display: inline-flex;
  align-items: center;
}
#message-input-text .forced-placeholder .placeholder-icon,
#message-input-text .placeholder-text .placeholder-icon,
#caption-input-text .forced-placeholder .placeholder-icon,
#caption-input-text .placeholder-text .placeholder-icon,
#comment-input-text .forced-placeholder .placeholder-icon,
#comment-input-text .placeholder-text .placeholder-icon {
  margin-inline-end: 0.25rem;
}
@media (min-width: 600px) {
  #message-input-text .forced-placeholder,
  #message-input-text .placeholder-text,
  #caption-input-text .forced-placeholder,
  #caption-input-text .placeholder-text,
  #comment-input-text .forced-placeholder,
  #comment-input-text .placeholder-text {
    left: 0.75rem;
  }
}
#message-input-text .forced-placeholder,
#caption-input-text .forced-placeholder,
#comment-input-text .forced-placeholder {
  z-index: var(--z-below);
  left: 0;
}
@media (min-width: 600px) {
  #message-input-text .forced-placeholder,
  #caption-input-text .forced-placeholder,
  #comment-input-text .forced-placeholder {
    left: 0.75rem;
  }
}
#message-input-text[dir=rtl] .placeholder-text,
#caption-input-text[dir=rtl] .placeholder-text,
#comment-input-text[dir=rtl] .placeholder-text {
  right: 0;
}
#message-input-text .text-entity-link,
#caption-input-text .text-entity-link,
#comment-input-text .text-entity-link {
  color: var(--color-links) !important;
  cursor: default;
  text-decoration: none;
}
#message-input-text .text-entity-link:hover, #message-input-text .text-entity-link:active, #message-input-text .text-entity-link:visited,
#caption-input-text .text-entity-link:hover,
#caption-input-text .text-entity-link:active,
#caption-input-text .text-entity-link:visited,
#comment-input-text .text-entity-link:hover,
#comment-input-text .text-entity-link:active,
#comment-input-text .text-entity-link:visited {
  text-decoration: underline !important;
}
#message-input-text .spoiler,
#caption-input-text .spoiler,
#comment-input-text .spoiler {
  background-image: url(/spoiler-dots-black.b2dd6e4f4a5a520c4ccd.png);
  background-size: auto min(100%, 1.125rem);
  border-radius: 0.5rem;
  padding: 0 0.3125rem 0.125rem 0.3125rem;
  text-shadow: -2px -2px 0 var(--color-background), 2px -2px 0 var(--color-background), -2px 2px 0 var(--color-background), 2px 2px 0 var(--color-background);
}
html.theme-dark #message-input-text .spoiler,
html.theme-dark #caption-input-text .spoiler,
html.theme-dark #comment-input-text .spoiler {
  background-image: url(/spoiler-dots-white.ab45f83c6ba729884808.png);
}
#message-input-text .clone,
#caption-input-text .clone,
#comment-input-text .clone {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
  z-index: -10;
  unicode-bidi: plaintext;
  text-align: initial;
}

#message-input-text .form-control {
  margin-bottom: 0;
  line-height: 1.3125;
  padding: calc((3.125rem - var(--composer-text-size, 1rem) * 1.3125) / 2) 0;
  white-space: pre-wrap;
  height: auto;
  caret-color: var(--color-primary);
}
@media (max-width: 600px) {
  #message-input-text .form-control {
    padding: calc((2.875rem - var(--composer-text-size, 1rem) * 1.3125) / 2) 0;
  }
}
#message-input-text .forced-placeholder,
#message-input-text .placeholder-text {
  top: calc((3.125rem - var(--composer-text-size, 1rem) * 1.3125) / 2);
}
@media (max-width: 600px) {
  #message-input-text .forced-placeholder,
  #message-input-text .placeholder-text {
    top: calc((2.875rem - var(--composer-text-size, 1rem) * 1.3125) / 2);
  }
}
#message-input-text:not(:only-child) .form-control {
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 600px) {
  #message-input-text:not(:only-child) .form-control {
    padding-left: 0.75rem;
  }
}
.ComposerEmbeddedMessage + .message-input-wrapper #message-input-text .form-control.overflown, .WebPagePreview + .message-input-wrapper #message-input-text .form-control.overflown {
  margin-top: 0.75rem;
}

#caption-input-text,
#comment-input-text {
  --margin-for-scrollbar: 5rem;
}
#caption-input-text .input-scroller,
#comment-input-text .input-scroller {
  min-height: 3.5rem;
  max-height: 10rem;
  margin-right: calc((var(--margin-for-scrollbar) + 1rem) * -1);
}
#caption-input-text .input-scroller:has(.form-control:focus),
#comment-input-text .input-scroller:has(.form-control:focus) {
  border-color: var(--color-primary);
}
#caption-input-text .input-scroller-content,
#comment-input-text .input-scroller-content {
  margin-right: calc(var(--margin-for-scrollbar) + 0.5rem);
}
#caption-input-text .placeholder-text,
#comment-input-text .placeholder-text {
  top: auto;
  bottom: 1.125rem;
  left: 0.9375rem;
}

.composer-tooltip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  width: 100%;
  background: var(--color-background);
  border-radius: var(--border-radius-messages);
  padding: 0.5rem 0;
  max-height: 15rem;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0 1px 2px var(--color-default-shadow);
  opacity: 0;
  transform: translateY(1.5rem);
  transform-origin: bottom;
  transition: opacity var(--layer-transition), transform var(--layer-transition);
}
@supports (overflow-y: overlay) {
  .composer-tooltip {
    overflow-y: overlay;
    overflow-x: hidden;
  }
}
.composer-tooltip:not(.shown) {
  display: none;
}
.composer-tooltip.open {
  opacity: 1;
  transform: translateY(0);
}
.composer-tooltip .Loading {
  margin: 1rem 0;
}

@keyframes recording-blink-like-macos {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.3;
  }
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/MiddleColumn.scss ***!
  \********************************************************************************************************************************************************************************************************/
#MiddleColumn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  position: relative;
  z-index: 1;
  min-width: 0;
}
@media (max-width: 600px) {
  #MiddleColumn {
    overflow: hidden;
  }
}
#MiddleColumn > div {
  height: 100%;
  overflow: hidden;
}

.settings-layout {
  --slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.settings-layout > .Transition {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.settings-layout > .Transition > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.MiddleMessages {
  width: 100%;
  height: 100%;
}
.MiddleMessages .messages-layout {
  --slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.MiddleMessages .messages-layout > .Transition {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.MiddleMessages .messages-layout > .Transition > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.MiddleMessages .messages-layout.ai-support {
  --color-primary: #3a85f3;
}
.MiddleMessages .AiBotGreeting {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.MiddleMessages .AiBotGreeting .wrapper {
  width: 17.25rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-primary);
  padding: 0.9375rem;
  border-radius: 0.625rem;
  color: #fff;
}
.MiddleMessages .AiBotGreeting .title {
  font-weight: 500;
  font-size: 0.9375rem;
  margin-bottom: 0.25rem;
  text-align: center;
  unicode-bidi: plaintext;
}
.MiddleMessages .AiBotGreeting .description {
  font-size: 0.75rem;
  line-height: 1.17;
  margin: 0;
  padding: 0;
  list-style: none;
  unicode-bidi: plaintext;
}
.MiddleMessages .Composer #message-compose {
  transform: scaleX(1) translateX(0);
  transition: transform var(--select-transition), border-bottom-right-radius var(--select-transition);
}
.MiddleMessages .Composer #message-compose::before {
  transform: scaleX(-1) translateX(0);
  transition: transform var(--select-transition);
}
body.animation-level-0 .MiddleMessages .Composer #message-compose, body.animation-level-0 .MiddleMessages .Composer #message-compose::before {
  transition: none !important;
}
.MiddleMessages .Composer .message-input-wrapper, .MiddleMessages .Composer::before {
  opacity: 1;
  transition: opacity var(--select-transition);
}
body.animation-level-0 .MiddleMessages .Composer .message-input-wrapper, body.animation-level-0 .MiddleMessages .Composer::before {
  transition: none !important;
}
.MiddleMessages .Composer > .Button {
  opacity: 1;
  transform: scale(1);
  transition: opacity var(--select-transition), transform var(--select-transition), background-color 0.15s, color 0.15s;
}
body.animation-level-0 .MiddleMessages .Composer > .Button {
  transition: none !important;
}
.MiddleMessages .Composer.hover-disabled, .MiddleMessages .Composer:not(.shown) {
  pointer-events: none;
}
.MiddleMessages .Composer:not(.shown) .ComposerEmbeddedMessage {
  height: 0;
}
.MiddleMessages .Composer:not(.shown) #message-compose {
  transform: scaleX(var(--composer-hidden-scale, 1)) translateX(var(--composer-translate-x, 0));
  border-bottom-right-radius: var(--border-radius-messages);
}
.MiddleMessages .Composer:not(.shown) #message-compose::before {
  transform: scaleX(-1) translateX(200%);
}
@media (max-width: 600px) {
  .MiddleMessages .Composer:not(.shown) #editable-message-text {
    height: 2.5rem !important;
  }
}
.MiddleMessages .Composer:not(.shown) .message-input-wrapper, .MiddleMessages .Composer:not(.shown)::before {
  opacity: 0;
}
.MiddleMessages .Composer:not(.shown) > .Button {
  opacity: 0 !important;
  transform: scale(0.5);
}
.MiddleMessages .messaging-disabled {
  transform: scaleX(1);
  transition: transform var(--select-transition);
}
.MiddleMessages .messaging-disabled .messaging-disabled-inner span {
  opacity: 1;
  transition: opacity var(--select-transition);
}
body.animation-level-0 .MiddleMessages .messaging-disabled .messaging-disabled-inner span {
  transition: none !important;
}
body.animation-level-0 .MiddleMessages .messaging-disabled {
  transition: none !important;
}
.MiddleMessages .messaging-disabled:not(.shown) {
  transform: scaleX(var(--composer-hidden-scale, 1));
  pointer-events: none;
}
.MiddleMessages .messaging-disabled:not(.shown) .messaging-disabled-inner span {
  opacity: 0;
}
.MiddleMessages .messaging-disabled-inner {
  width: 100%;
  padding: 1rem;
  border-radius: var(--border-radius-messages);
  background: var(--color-background);
  color: var(--color-text-secondary);
  text-align: center;
  box-shadow: 0 1px 2px var(--color-default-shadow);
}
.MiddleMessages .middle-column-footer {
  width: 100%;
  max-width: var(--messages-container-width);
  padding: 0 1rem;
  position: relative;
  display: flex;
  align-items: flex-end;
  z-index: var(--z-middle-footer);
  transform: translate3d(0, 0, 0);
  /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
  transition: top 200ms, transform var(--layer-transition);
}
body.animation-level-0 .MiddleMessages .middle-column-footer {
  transition: none !important;
}
@media (min-width: 1276px) {
  .MiddleMessages .middle-column-footer {
    width: calc(100% - var(--right-column-width));
  }
  #Main.right-column-open .MiddleMessages .middle-column-footer {
    transform: translate3d(calc(var(--right-column-width) / -2), 0, 0);
  }
}
@media (max-width: 600px) {
  .MiddleMessages .middle-column-footer {
    padding: 0 0.5rem;
  }
  body.is-symbol-menu-open .MiddleMessages .middle-column-footer {
    transform: translate3d(0, calc(-1 * (var(--symbol-menu-height) + var(--symbol-menu-footer-height))), 0);
  }
}
.MiddleMessages .middle-column-footer:not(.no-composer) {
  padding-bottom: env(safe-area-inset-bottom);
  top: 0;
}
body.keyboard-visible .MiddleMessages .middle-column-footer:not(.no-composer) {
  top: env(safe-area-inset-bottom);
}
@supports not (padding-bottom: env(safe-area-inset-bottom)) {
  .MiddleMessages .middle-column-footer:not(.no-composer) {
    padding-bottom: 0;
  }
}
.MiddleMessages .middle-column-footer.with-notch::before {
  opacity: 1;
}
html.theme-dark .MiddleMessages .middle-column-footer::before {
  background: linear-gradient(90deg, rgba(127, 127, 127, 0) 0%, rgba(127, 127, 127, 0.4) 2%, rgba(127, 127, 127, 0.4) 98%, rgba(127, 127, 127, 0) 100%);
}

/* Common styles for message list fade-out shadow */
.Composer,
.messaging-disabled {
  margin-bottom: 1rem;
}
@media (max-width: 600px) {
  .Composer,
  .messaging-disabled {
    margin-bottom: 0.5rem;
  }
}

.Composer,
.unpin-all-button,
.join-subscribe-button,
.messaging-disabled {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}

.mask-image-disabled .unpin-all-button,
.mask-image-disabled .messaging-disabled {
  box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow);
  border-radius: var(--border-radius-messages);
}

.middle-column-footer-button-container {
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  padding-bottom: 1.25rem;
}
.middle-column-footer-button-container .unpin-all-button {
  text-transform: capitalize;
  color: var(--color-black);
}
@media (hover: hover) {
  .middle-column-footer-button-container .unpin-all-button:hover .icon-unpin {
    color: var(--color-white);
  }
}
@media (max-width: 600px) {
  .middle-column-footer-button-container .unpin-all-button:active .icon-unpin, .middle-column-footer-button-container .unpin-all-button:focus .icon-unpin {
    color: var(--color-white);
  }
}
.middle-column-footer-button-container .unpin-all-button .icon-unpin {
  margin-inline-start: -0.4375rem;
  margin-inline-end: 0.75rem;
  color: var(--color-text-secondary);
  font-size: 1.5rem;
  transition: color 0.15s;
}
.middle-column-footer-button-container .join-subscribe-button,
.middle-column-footer-button-container .unpin-all-button {
  height: 3.125rem;
  transform: scaleX(1);
  transition: transform var(--select-transition), background-color 0.15s, color 0.15s;
}
.middle-column-footer-button-container .join-subscribe-button svg path,
.middle-column-footer-button-container .unpin-all-button svg path {
  stroke: var(--color-text);
}
.middle-column-footer-button-container .join-subscribe-button span,
.middle-column-footer-button-container .unpin-all-button span {
  margin-top: 0.1875rem;
}
.middle-column-footer-button-container .join-subscribe-button i,
.middle-column-footer-button-container .unpin-all-button i {
  margin-right: 0.5rem;
}
.select-mode-active + .middle-column-footer .middle-column-footer-button-container .join-subscribe-button,
.select-mode-active + .middle-column-footer .middle-column-footer-button-container .unpin-all-button {
  box-shadow: none;
  transform: scaleX(var(--unpin-hidden-scale));
}
@media (max-width: 600px) {
  .middle-column-footer-button-container .join-subscribe-button,
  .middle-column-footer-button-container .unpin-all-button {
    height: 2.5rem;
  }
}
@media (max-width: 600px) {
  .middle-column-footer-button-container {
    padding-bottom: 0;
  }
  .middle-column-footer-button-container .join-subscribe-button {
    border-radius: 0;
    width: 100%;
  }
}
.mask-image-disabled .middle-column-footer-button-container::before {
  background: unset;
}

.quick-links-container {
  padding-top: 2.5rem;
}
@media (max-width: 600px) {
  .quick-links-container {
    padding-top: 1rem;
  }
}
/*!***************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/MiddleColumn.module.scss ***!
  \***************************************************************************************************************************************************************************************************************/
.MiddleColumn-module__background {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  overflow: hidden;
  background-color: var(--theme-background-color);
}
.MiddleColumn-module__background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
html.theme-light .MiddleColumn-module__background:not(.MiddleColumn-module__customBgImage)::before {
  background-image: url(/Wallpaper.eb222cd63b99ceb4a238.svg);
}
html.theme-light .MiddleColumn-module__background:not(.MiddleColumn-module__customBgImage).MiddleColumn-module__withPhoenix::before {
  background-image: linear-gradient(0deg, #391366 0%, #391366 100%);
}
html.theme-light .MiddleColumn-module__background:not(.MiddleColumn-module__customBgImage).MiddleColumn-module__withPhoenix::after {
  background-image: url(/bg_phoenix.21511f66f07343695d4f.png);
  background-repeat: no-repeat;
  background-position: right;
}
html.theme-light .MiddleColumn-module__background:not(.MiddleColumn-module__customBgImage).MiddleColumn-module__withCancer::before {
  background: linear-gradient(0deg, #ffdaee 0%, #ffdaee 100%), #fef1f8;
}
html.theme-light .MiddleColumn-module__background:not(.MiddleColumn-module__customBgImage).MiddleColumn-module__withCancer::after {
  background-image: url(/bg_cancer.2fe937b35b42b2411103.png);
  background-repeat: no-repeat;
  background-position: right;
}
html.theme-light .MiddleColumn-module__background:not(.MiddleColumn-module__customBgImage).MiddleColumn-module__withBusiness::before {
  background: #9386cb;
}
html.theme-light .MiddleColumn-module__background:not(.MiddleColumn-module__customBgImage).MiddleColumn-module__withBusiness::after {
  background-image: url(/bg_business.c5f901ffec3455ca9283.png);
  background-repeat: no-repeat;
  background-position: right;
}
.MiddleColumn-module__background:not(.MiddleColumn-module__customBgImage).MiddleColumn-module__customBgColor::before {
  display: none;
}
.MiddleColumn-module__background.MiddleColumn-module__customBgImage::before {
  background-image: var(--custom-background) !important;
  transform: scale(1.1);
}
body:not(.animation-level-0) .MiddleColumn-module__background.MiddleColumn-module__withTransition {
  transition: background-color 0.2s;
}
body:not(.animation-level-0) .MiddleColumn-module__background.MiddleColumn-module__withTransition.MiddleColumn-module__customBgImage::before {
  transition: background-image var(--layer-transition);
}
.MiddleColumn-module__background.MiddleColumn-module__customBgImage.MiddleColumn-module__blurred::before {
  filter: blur(12px);
}
@media screen and (min-width: 1276px) {
  body.animation-level-2 .MiddleColumn-module__background:not(.MiddleColumn-module__customBgImage)::before {
    overflow: hidden;
    transform: scale(1);
    transform-origin: left center;
  }
}
@media screen and (min-width: 1276px) {
  html.theme-light body.animation-level-2 .MiddleColumn-module__background:not(.MiddleColumn-module__customBgImage).MiddleColumn-module__withRightColumn::before {
    transform: scaleX(0.73) !important;
  }
}
@media screen and (min-width: 1921px) {
  html.theme-light body.animation-level-2 .MiddleColumn-module__background:not(.MiddleColumn-module__customBgImage).MiddleColumn-module__withRightColumn::before {
    transform: scaleX(0.8) !important;
  }
}
@media screen and (min-width: 2600px) {
  html.theme-light body.animation-level-2 .MiddleColumn-module__background:not(.MiddleColumn-module__customBgImage).MiddleColumn-module__withRightColumn::before {
    transform: scaleX(0.95) !important;
  }
}
html.theme-light body.animation-level-2 .MiddleColumn-module__background:not(.MiddleColumn-module__customBgImage).MiddleColumn-module__withRightColumn.MiddleColumn-module__withTransition::before {
  transition: transform var(--layer-transition);
}
.MiddleColumn-module__background:not(.MiddleColumn-module__customBgImage):not(.MiddleColumn-module__customBgColor)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.MiddleColumn-module__background:not(.MiddleColumn-module__customBgImage):not(.MiddleColumn-module__customBgColor).MiddleColumn-module__withFeed::after {
  top: -50%;
  left: -50%;
  bottom: -50%;
  right: -50%;
  background-image: url(/feed-bg-pattern.437fd56bed508c1276b8.png);
  background-size: auto;
  background-repeat: repeat;
  transform: rotate(-27.7deg);
  transform-origin: center;
}
html.theme-dark .MiddleColumn-module__background:not(.MiddleColumn-module__customBgImage):not(.MiddleColumn-module__customBgColor) {
  mix-blend-mode: unset;
}
/*!*****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/payment/aiPurchase/PaymentAi.scss ***!
  \*****************************************************************************************************************************************************************************************************************/
.payment-wrap {
  --color-message-reaction: #f2f2f2;
  padding: 2.5rem 1rem 1.5rem;
}
@media only screen and (max-width: 768px) {
  .payment-wrap {
    padding: 1.5rem 1rem 1.5rem;
  }
}

.payment-content {
  width: 100%;
  height: 100%;
  background-color: var(--color-background);
  overflow-x: hidden;
  overflow-y: auto;
}
.payment-content .btn-group {
  justify-content: center;
  margin-bottom: 1.875rem;
}
.payment-content .Button.success:not(.disabled):not(:disabled).active {
  background-color: var(--color-success);
}
.payment-content .Buttontext.primary:not(.disabled):not(:disabled).active {
  background-color: var(--color-message-reaction);
}

.payment-items-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#Main.right-column-open .payment-items-wrap,
#Main.right-column-open .payment-content {
  width: calc(100% - var(--right-column-width));
  transform: translate3d(calc(var(--right-column-width) / -2), 0, 0);
}

.payment-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 12rem;
  max-width: 33rem;
  background-position: top;
  background-size: cover;
  padding: 1.5rem;
  border-radius: var(--border-radius-default);
  margin-bottom: 1.25rem;
  background-image: url(/gradienta-LeG68PrXA6Y-unsplash.c43e5bd2d98fbdf612d8.jpg);
}
.payment-item.ai-img {
  background-image: url(/image-bg.6065befde6ca526f3d6e.jpg);
}
.payment-item.ai-double {
  background-image: url(/image-and-text-bg.8b9707d92f6be4b9ecc6.png);
}
.payment-item .title {
  font-size: 1.5rem;
  color: white;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.payment-item .title span {
  color: var(--color-text);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.17;
  background-color: white;
  padding: 0.25rem 0.625rem;
  border-radius: 0.75rem;
}
.payment-item .subtitle {
  font-size: 1.25rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.payment-item .bottom-row {
  display: flex;
  justify-content: space-between;
}
.payment-item .price {
  display: flex;
  background-color: white;
  width: 100%;
  gap: 0.5rem;
  padding: 0.75rem;
  box-shadow: 0px 12px 10px rgba(0, 0, 0, 0.15);
  border-radius: 15px 15px 15px 0px;
}
.payment-item .price > * {
  flex-grow: 1;
}
.payment-item .price .td {
  background-color: #f6f6f6;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
}
.payment-item .price .td > * {
  display: block;
}
.payment-item .price .td .subtitle {
  font-size: 0.9375rem;
}
.payment-item .price .title {
  color: var(--color-text);
  font-size: 1.25rem;
}
.payment-item .price h3 {
  font-size: 1.5rem;
  margin: 0;
}
.payment-item .price h3.smaller {
  font-size: 1.25rem;
}
@media (max-width: 480px) {
  .payment-item .price h3.smaller {
    font-size: 1rem;
  }
}
.payment-item .price span {
  padding-inline-end: 4px;
}
.payment-item .price span:not(:first-of-type):before {
  content: "";
  display: inline-block;
  height: 12px;
  width: 0px;
  margin-right: 6px;
  border-left: 1px solid #d9d9d9;
  font-weight: normal;
  position: relative;
  top: -1px;
}
.payment-item .price svg {
  margin-inline-start: 2px;
  margin-top: -1px;
}
.payment-item .price .sale {
  background: linear-gradient(135deg, #44be2e 31.17%, #27ae60 75.98%);
  font-size: 0.75rem;
  color: white;
  padding: 2px 8px;
  border-radius: 9px;
  font-weight: normal;
  margin-left: 0.25rem;
  vertical-align: text-bottom;
}
.payment-item .row {
  padding: 0.5rem;
}
.payment-item .description {
  color: white;
  margin-bottom: 0;
}
.payment-item .switcher-wrap {
  display: flex;
  color: white;
  font-size: 0.825rem;
  background-color: var(--color-black-opacity-15);
  border-radius: 1.125rem;
  padding: 7px 12px;
  margin-bottom: 0.625rem;
}
.payment-item .switcher-wrap .Switcher {
  margin: 0 0.75rem;
}
.payment-item .switcher-wrap .Switcher .widget {
  background-color: var(--color-black-opacity-20);
}
.payment-item .switcher-wrap .Switcher .widget:after {
  background-color: white;
}
.payment-item .switcher-wrap .Switcher input:checked + .widget:after {
  transform: translateX(65%);
}
.payment-item .amount {
  gap: 0.125rem;
}
.payment-item .Button {
  border: 1px solid rgba(255, 255, 255, 0.24);
}
.payment-item .Button.primary {
  background-color: rgba(255, 255, 255, 0.24);
}
.payment-item .Button.primary:not(.disabled):not(:disabled):active, .payment-item .Button.primary:not(.disabled):not(:disabled).active {
  background-color: rgba(255, 255, 255, 0.34);
}
@media (hover: hover) {
  .payment-item .Button.primary:not(.disabled):not(:disabled):hover {
    background-color: rgba(255, 255, 255, 0.34);
  }
}
.payment-item .Button.round {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.75rem;
}
@media only screen and (max-width: 768px) {
  .payment-item {
    height: 10rem;
    padding: 1.25rem;
  }
  .payment-item .title {
    font-size: 1.25;
  }
  .payment-item .Button.round {
    width: 3rem;
    height: 3rem;
  }
}

.payment-confirm .modal-content {
  padding: 2.25rem 2rem 2rem;
}
.payment-confirm h3 {
  margin-bottom: 1.25rem;
}
.payment-confirm h4 {
  font-size: 1.125rem;
  margin: 0;
}
.payment-confirm .buy-ai.Button.primary {
  background: linear-gradient(135deg, #44be2e 31.17%, #27ae60 75.98%);
}
.payment-confirm .pair-icon .icon-svg.ai-text {
  background-image: url(/gradienta-LeG68PrXA6Y-unsplash.c43e5bd2d98fbdf612d8.jpg);
}
.payment-confirm .pair-icon .icon-svg.ai-img {
  background-image: url(/image-bg.6065befde6ca526f3d6e.jpg);
}
.payment-confirm .pair-icon .icon-svg.ai-double {
  background-image: url(/image-and-text-bg.8b9707d92f6be4b9ecc6.png);
}
.payment-confirm .label {
  text-align: left;
  font-size: 0.875rem;
  margin-bottom: 0.875rem;
}
.payment-confirm .price-wrap {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.payment-confirm .price-wrap.direction-column {
  flex-direction: column;
}
.payment-confirm .prompts {
  background: rgba(7, 7, 8, 0.05);
  padding: 0.625rem;
  border-radius: 0.75rem;
  flex-grow: 1;
  display: flex;
  align-items: center;
  text-align: left;
}
.payment-confirm .flash-prompt {
  display: inline-flex;
  align-items: center;
  background: var(--color-primary);
  border-radius: 0.5rem;
  height: 2rem;
  padding: 0 0.5rem;
  margin-right: 0.75rem;
  color: white;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.payment-confirm .price {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-text);
  padding: 0.75rem;
  color: white;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.15px;
  border-radius: 0.75rem;
}
.payment-confirm .price [stroke] {
  stroke: white;
}
.payment-confirm .price i {
  font-style: normal;
  font-size: 15px;
}
.payment-confirm .notification {
  display: flex;
  gap: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.3;
}
.payment-confirm .notification p {
  margin-top: 2px;
  margin-bottom: 0;
  text-align: left;
}
.payment-confirm .notification svg {
  flex-shrink: 0;
}
.payment-confirm .notification [stroke] {
  stroke: var(--color-text);
}
.payment-confirm .dialog-buttons {
  margin-bottom: 2.5rem;
}
@media only screen and (max-width: 480px) {
  .payment-confirm h3 {
    margin-bottom: 1rem;
  }
}

.modal-content .logo-wrap {
  padding: 2.125rem;
  margin: 0 -2.5rem 1.75rem;
  background: var(--color-primary);
}

.ai-pack-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  background-image: url(/gradienta-LeG68PrXA6Y-unsplash.c43e5bd2d98fbdf612d8.jpg);
  background-repeat: no-repeat;
  background-size: 100% 22.25rem;
}
.ai-pack-wrap.ai-pack-img {
  background-image: url(/image-bg.6065befde6ca526f3d6e.jpg);
}
.ai-pack-wrap.ai-pack-double {
  background-image: url(/image-and-text-bg.8b9707d92f6be4b9ecc6.png);
}
.ai-pack-wrap h2 {
  font-size: 1.5rem;
  color: white;
  margin-bottom: 0;
}
.ai-pack-wrap .description {
  color: white;
}
.ai-pack-wrap > svg {
  width: 6.25rem;
  height: 6.25rem;
}
.ai-pack-wrap .check-block {
  width: 100%;
  max-width: 22.5rem;
}
.ai-pack-wrap .check-block .ListItem .info {
  flex-grow: 1;
}
.ai-pack-wrap .check-block .ListItem.check-unlim {
  padding: 2px;
  background-image: linear-gradient(160deg, #ff4066, #eee053);
  border-radius: var(--border-radius-default);
  z-index: 1;
}
.ai-pack-wrap .check-block .ListItem.check-unlim .ListItem-button {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2758%27 height=%2765%27 fill=%27none%27%3E%3Cg stroke-linecap=%27round%27 stroke-width=%272%27 clip-path=%27url%28%23a%29%27%3E%3Cpath stroke=%27url%28%23b%29%27 d=%27M2 58h55.5%27/%3E%3Cpath stroke=%27url%28%23c%29%27 d=%27M2 34h55.5%27/%3E%3Cpath stroke=%27url%28%23d%29%27 d=%27M2 10h55.5%27/%3E%3Cpath stroke=%27url%28%23e%29%27 d=%27M11.5 46H67%27/%3E%3Cpath stroke=%27url%28%23f%29%27 d=%27M11.5 22H67%27/%3E%3Cpath stroke=%27url%28%23g%29%27 d=%27M7.5 52H63%27/%3E%3Cpath stroke=%27url%28%23h%29%27 d=%27M7.5 28H63%27/%3E%3Cpath stroke=%27url%28%23i%29%27 d=%27M7.5 4H63%27/%3E%3Cpath stroke=%27url%28%23j%29%27 d=%27M7.5 64H63%27/%3E%3Cpath stroke=%27url%28%23k%29%27 d=%27M7.5 40H63%27/%3E%3Cpath stroke=%27url%28%23l%29%27 d=%27M7.5 16H63%27/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id=%27b%27 x1=%272%27 x2=%2757.5%27 y1=%2758.5%27 y2=%2758.5%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop stop-color=%27%23fff%27 stop-opacity=%270%27/%3E%3Cstop offset=%27.676%27 stop-color=%27%23EEDD54%27/%3E%3C/linearGradient%3E%3ClinearGradient id=%27c%27 x1=%272%27 x2=%2757.5%27 y1=%2734.5%27 y2=%2734.5%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop stop-color=%27%23fff%27 stop-opacity=%270%27/%3E%3Cstop offset=%27.648%27 stop-color=%27%23EFDA54%27/%3E%3C/linearGradient%3E%3ClinearGradient id=%27d%27 x1=%272%27 x2=%2757.5%27 y1=%2710.5%27 y2=%2710.5%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop stop-color=%27%23fff%27 stop-opacity=%270%27/%3E%3Cstop offset=%27.626%27 stop-color=%27%23F1C357%27/%3E%3C/linearGradient%3E%3ClinearGradient id=%27e%27 x1=%2711.5%27 x2=%2767%27 y1=%2746.5%27 y2=%2746.5%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop stop-color=%27%23fff%27 stop-opacity=%270%27/%3E%3Cstop offset=%27.5%27 stop-color=%27%23EEDF53%27/%3E%3C/linearGradient%3E%3ClinearGradient id=%27f%27 x1=%2711.5%27 x2=%2767%27 y1=%2722.5%27 y2=%2722.5%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop stop-color=%27%23fff%27 stop-opacity=%270%27/%3E%3Cstop offset=%27.483%27 stop-color=%27%23F0CF55%27/%3E%3C/linearGradient%3E%3ClinearGradient id=%27g%27 x1=%277.5%27 x2=%2763%27 y1=%2752.5%27 y2=%2752.5%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop stop-color=%27%23fff%27 stop-opacity=%270%27/%3E%3Cstop offset=%27.566%27 stop-color=%27%23EEDF53%27/%3E%3C/linearGradient%3E%3ClinearGradient id=%27h%27 x1=%277.5%27 x2=%2763%27 y1=%2728.5%27 y2=%2728.5%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop stop-color=%27%23fff%27 stop-opacity=%270%27/%3E%3Cstop offset=%27.551%27 stop-color=%27%23EFD555%27/%3E%3C/linearGradient%3E%3ClinearGradient id=%27i%27 x1=%277.5%27 x2=%2763%27 y1=%274.5%27 y2=%274.5%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop stop-color=%27%23fff%27 stop-opacity=%270%27/%3E%3Cstop offset=%27.491%27 stop-color=%27%23F2BC58%27/%3E%3C/linearGradient%3E%3ClinearGradient id=%27j%27 x1=%277.5%27 x2=%2763%27 y1=%2764.5%27 y2=%2764.5%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop stop-color=%27%23fff%27 stop-opacity=%270%27/%3E%3Cstop offset=%27.569%27 stop-color=%27%23EEDF53%27/%3E%3C/linearGradient%3E%3ClinearGradient id=%27k%27 x1=%277.5%27 x2=%2763%27 y1=%2740.5%27 y2=%2740.5%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop stop-color=%27%23fff%27 stop-opacity=%270%27/%3E%3Cstop offset=%27.549%27 stop-color=%27%23EEDF53%27/%3E%3C/linearGradient%3E%3ClinearGradient id=%27l%27 x1=%277.5%27 x2=%2763%27 y1=%2716.5%27 y2=%2716.5%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop stop-color=%27%23fff%27 stop-opacity=%270%27/%3E%3Cstop offset=%27.53%27 stop-color=%27%23F0C956%27/%3E%3C/linearGradient%3E%3CclipPath id=%27a%27%3E%3Cpath fill=%27%23fff%27 d=%27M0 0h42c8.837 0 16 7.163 16 16v33c0 8.837-7.163 16-16 16H0V0Z%27/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right;
  background-size: contain;
}
.ai-pack-wrap .check-block .ListItem .ListItem-button {
  --background-color: white;
  padding: 0.875rem 1rem;
  box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.16) !important;
}
.ai-pack-wrap .check-block .ListItem:not(.check-unlim) {
  width: 90%;
  margin: -2px auto 0;
}
.ai-pack-wrap .check-block .ListItem:not(.check-unlim) .ListItem-button {
  border-radius: 0 0 1rem 1rem;
  padding: 0.625rem 1rem;
}
.ai-pack-wrap .check-block .Checkbox {
  flex-shrink: 0;
  height: 1.5rem;
  margin: 0;
  padding-left: 2.5rem;
}
.ai-pack-wrap .check-block .price {
  font-size: 0.875rem;
}
.ai-pack-wrap .check-block .price span {
  font-weight: 500;
  color: var(--color-primary);
}
.ai-pack-wrap .check-block .price .count {
  color: white;
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.5rem;
  background-image: linear-gradient(135deg, #44be2e 31.17%, #27ae60 75.98%);
}
.ai-pack-wrap .success,
.ai-pack-wrap .pack-active {
  width: 100%;
  max-width: 20.5rem;
}
.ai-pack-wrap .free-block {
  background: #eeeeef;
  border-radius: 25px;
  padding: 0.5rem;
}
.ai-pack-wrap .free-block :first-child {
  display: inline-block;
  background-color: var(--color-primary);
  color: white;
  font-size: 1.125rem;
  padding: 0.375rem 1rem;
  border-radius: 1.25rem;
  margin-right: 0.75rem;
}
.ai-pack-wrap .free-block span:not(:first-child) {
  padding-inline-end: 4px;
}
.ai-pack-wrap .free-block span:not(:nth-child(1)):not(:nth-child(2)):before {
  content: "";
  display: inline-block;
  height: 12px;
  width: 0px;
  margin-right: 4px;
  border-left: 1px solid #d9d9d9;
  font-weight: normal;
  position: relative;
}
.ai-pack-wrap .main-description ul {
  max-width: 22.5rem;
  padding: 0;
  margin: 1.25rem 0;
}
.ai-pack-wrap .main-description h4 {
  font-size: 1.125rem;
}
.ai-pack-wrap .main-description li {
  list-style-type: none;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  line-height: 1.18;
}
.ai-pack-wrap .main-description li::before {
  content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNiAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkNoZWNrIEljb24iPgo8cGF0aCBpZD0iVmVjdG9yIDUiIGQ9Ik0zLjI4NTc3IDcuODE0MjlMNi42MzEzOSAxMC44MzkzTDEyLjcxNDMgNC4zNTcxNSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8L3N2Zz4K);
  padding: 3px;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50px;
  background: linear-gradient(135deg, #44be2e 31.17%, #27ae60 75.98%);
  margin: -1rem 1rem 0 0;
}
.ai-pack-wrap .main-description li span {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
.ai-pack-wrap .main-description li .content {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-borders);
}
.ai-pack-wrap .pack-active {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem;
  border: 1px dashed #fff;
  background: linear-gradient(#fff 0 0) padding-box, linear-gradient(to right, #ffc0e3, #a57fe3) border-box;
  border-radius: 0.75rem;
}
.ai-pack-wrap .pack-active b {
  color: var(--color-primary);
}
/*!***************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/middle/mediasale/MediaSale.scss ***!
  \***************************************************************************************************************************************************************************************************************/
.MediaSale .settings-container {
  padding-top: 3.75rem;
}
.MediaSale .image-input {
  max-width: 22.5rem;
}
.MediaSale .input {
  margin-bottom: 1.25rem;
}
.MediaSale .row {
  gap: 1.25rem;
}
.MediaSale .file-preview-item {
  margin-bottom: 0.5rem;
}
.MediaSale .file-preview-item:last-of-type {
  margin-bottom: 1.25rem;
}

.Modal .message-preview-wrap {
  padding: 1rem;
  margin-bottom: 1rem;
  background: linear-gradient(180deg, #fbf4ec, #bfdff6);
  border-radius: 0.375rem;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.Modal .message-content.media.text .Album {
  margin: 0 -0.375rem 0 -0.5rem;
}
.Modal .message-content .message-title {
  color: var(--color-error);
}
.Modal .media-inner {
  margin-bottom: 0.5rem;
}
.Modal .sale-wrap {
  background: var(--color-background-secondary);
  padding: 0.75rem;
  border-radius: var(--border-radius-messages);
}
.Modal .sale-wrap .Button.smaller {
  height: 1.9375rem;
  line-height: 1.9375rem;
  border-radius: var(--border-radius-default-smaller);
}
.Modal .sale-description {
  font-size: 0.8125rem;
  text-align: center;
  font-weight: 500;
}
.Modal .policy-link {
  color: var(--color-primary);
  text-align: center;
  font-size: 0.75rem;
  margin-bottom: 0.875rem;
}
/*!****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ui/FileDownload.scss ***!
  \****************************************************************************************************************************************************************************************************/
.image-input {
  border: 1px dashed var(--color-borders);
  border-radius: var(--border-radius-messages);
  padding: 0.4375rem;
  width: 100%;
  margin: 0 auto 1rem;
}
.image-input button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem;
  margin-bottom: 0;
  border: 1px solid var(--color-borders);
  box-shadow: 0px 1px 2px rgba(6, 25, 56, 0.05);
  border-radius: var(--border-radius-default-smaller);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-links);
  cursor: pointer;
}
.image-input button input {
  display: none;
}
.image-input button.full-width {
  width: 100%;
}
.image-input.hovered {
  border-color: var(--color-primary);
}
.image-input.hovered button {
  pointer-events: none;
}
/*!******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/right/RightHeader.scss ***!
  \******************************************************************************************************************************************************************************************************/
.RightHeader {
  display: flex;
  align-items: center;
  height: var(--header-height);
  padding: 0.5rem 0.8125rem;
  pointer-events: auto;
}
@media (max-width: 600px) {
  .RightHeader {
    padding: 0.5rem;
  }
}
.RightHeader .close-button {
  flex-shrink: 0;
}
.RightHeader .close-button svg path {
  stroke: var(--color-text-secondary);
}
.RightHeader > .Transition {
  flex: 1;
  height: 100%;
}
.RightHeader > .Transition > div {
  display: flex;
  align-items: center;
}
.RightHeader h3,
.RightHeader h4 {
  margin-bottom: 0;
  margin-left: 1rem;
}
.RightHeader h4 {
  text-transform: capitalize;
}
.RightHeader .tools {
  display: flex;
  margin-left: auto;
}
.RightHeader .tools .Button.translucent path:not([fill]) {
  stroke: var(--color-text);
}
.RightHeader .tools .Button.translucent path:not([stroke]) {
  fill: var(--color-text);
}
.RightHeader .SearchInput {
  margin-left: 0.5rem;
}
@media (min-width: 600px) {
  .RightHeader .SearchInput {
    margin-right: 0.5rem;
  }
}
.RightHeader .DropdownMenu {
  margin-left: auto;
}
/*!**************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/right/Profile.scss ***!
  \**************************************************************************************************************************************************************************************************/
.Profile {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-background-secondary);
  overflow-x: hidden;
  overflow-y: scroll;
}
@supports (overflow-y: overlay) {
  .Profile {
    overflow-y: overlay;
    overflow-x: hidden;
  }
}
.Profile > .profile-info > .ChatInfo {
  grid-area: chat_info;
}
.Profile > .profile-info > .ChatInfo .status.online {
  color: var(--color-primary);
}
.Profile > .profile-info > .ChatInfo .narrow {
  margin-bottom: 0;
}
.Profile > .profile-info > .ChatInfo .inactive.no-selection {
  user-select: auto;
  -webkit-user-select: auto !important;
}
.Profile > .profile-info > .ChatInfo [dir=rtl] .Switcher {
  margin-left: 0;
  margin-right: auto;
}
.Profile .FloatingActionButton {
  z-index: 1;
}

.shared-media {
  display: flex;
  flex-direction: column-reverse;
}
.shared-media .TabList {
  background: var(--color-background-secondary);
  top: -1px;
  z-index: 1;
}
.shared-media .TabList .Tab {
  padding: 1rem 0.75rem;
}
.shared-media .TabList .Tab span {
  white-space: nowrap;
}
.shared-media .TabList .Tab i {
  bottom: -1rem;
}
.shared-media .Transition {
  flex: 1;
}
.shared-media .content.empty-list {
  height: 100%;
  padding-top: 5rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.shared-media .content.empty-list .Spinner {
  --spinner-size: 2.75rem;
}
.shared-media .content.media-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-gap: 0.0625rem;
}
.shared-media .content.documents-list {
  padding: 1.25rem;
}
.shared-media .content.documents-list .File + .File {
  margin-top: 1.25rem;
}
.shared-media .content.links-list {
  padding: 1.25rem;
}
.shared-media .content.links-list .ProgressSpinner,
.shared-media .content.links-list .message-transfer-progress {
  display: none;
}
.shared-media .content.audio-list, .shared-media .content.voice-list {
  padding: 1rem 0.5rem;
}
.shared-media .content.audio-list .Audio .media-loading, .shared-media .content.voice-list .Audio .media-loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.commonChats-list,
.members-list {
  padding: 0.5rem;
  background: var(--color-background);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(0, 0, 0, 0.05), 0px 2px 10px rgba(0, 0, 0, 0.04);
}
@media (max-width: 600px) {
  .commonChats-list,
  .members-list {
    padding: 0.5rem 0;
  }
  .commonChats-list .ListItem.chat-item-clickable,
  .members-list .ListItem.chat-item-clickable {
    margin: 0;
  }
}
.commonChats-list .ListItem.chat-item-clickable .ChatInfo .custom-title,
.members-list .ListItem.chat-item-clickable .ChatInfo .custom-title {
  color: var(--color-primary);
  font-weight: 500;
}
.commonChats-list .ListItem.chat-item-clickable .ListItem-button,
.members-list .ListItem.chat-item-clickable .ListItem-button {
  padding: 5px;
}
.commonChats-list .ListItem.underline::after,
.members-list .ListItem.underline::after {
  left: 3.875rem;
}
.commonChats-list .ListItem.underline:last-child::after,
.members-list .ListItem.underline:last-child::after {
  display: none;
}
.commonChats-list .ListItem .ListItem-button,
.members-list .ListItem .ListItem-button {
  padding: 0.75rem;
}
.commonChats-list .ListItem.has-action .secondary-icon,
.members-list .ListItem.has-action .secondary-icon {
  margin-right: 0;
}
.commonChats-list .Avatar.size-medium,
.members-list .Avatar.size-medium {
  width: 2.9375rem;
  height: 2.9375rem;
  line-height: 2.9375rem;
}
/*!******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/right/RightColumn.scss ***!
  \******************************************************************************************************************************************************************************************************/
#RightColumn {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--right-column-width);
  height: 100%;
  padding-right: env(safe-area-inset-right);
  transform: translate3d(var(--right-column-width), 0, 0);
  background: var(--color-background);
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
  z-index: var(--z-right-column);
  transition: transform var(--layer-transition);
}
@supports not (padding-right: env(safe-area-inset-right)) {
  #RightColumn {
    padding-right: 0;
  }
}
body.animation-level-0 #RightColumn {
  transition: none;
}
@media (max-width: 1275px) {
  #RightColumn {
    box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow);
    border-left: none;
  }
}
@media (max-width: 1024px) {
  #RightColumn {
    --right-column-width: 22.5rem;
  }
}
@media (max-width: 600px) {
  #RightColumn {
    width: 100vw;
    transform: translate3d(110vw, 0, 0);
  }
}
#RightColumn > .Transition {
  height: calc(100% - var(--header-height));
  overflow: hidden;
}
#RightColumn .Management .section > .ChatInfo {
  padding: 0 1.5rem;
  margin: 1rem 0;
  text-align: center;
}
#RightColumn .Management .section > .ChatInfo .Avatar {
  margin: 0 auto 0.5rem;
}
#RightColumn .Management .section > .ChatInfo .Avatar.no-photo {
  cursor: default !important;
}
#RightColumn .Management .section > .ChatInfo .title {
  display: flex;
  justify-content: center;
  align-items: center;
}
#RightColumn .Management .section > .ChatInfo .title h3 {
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 2rem;
  white-space: pre-wrap;
  word-break: break-word;
}
#RightColumn .Management .section > .ChatInfo .title .emoji {
  width: 1.5rem;
  height: 1.5rem;
  background-size: 1.5rem;
}
#RightColumn .Management .section > .ChatInfo .status {
  font-size: 0.875rem;
  color: #868e96;
}

#RightColumn-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-right-column);
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}
@media (max-width: 1275px) {
  #RightColumn-wrapper {
    position: fixed;
  }
}
#RightColumn-wrapper.is-hidden {
  display: none;
}
#RightColumn-wrapper .overlay-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: black;
  opacity: 0;
}
@media (max-width: 600px) {
  #RightColumn-wrapper .overlay-backdrop {
    transition: opacity var(--layer-transition);
  }
  body.animation-level-0 #RightColumn-wrapper .overlay-backdrop {
    transition: none;
  }
}
#Main.right-column-shown #RightColumn-wrapper {
  visibility: visible;
}
@media (max-width: 600px) {
  #Main.right-column-open #RightColumn-wrapper .overlay-backdrop {
    opacity: var(--layer-blackout-opacity);
  }
}
#Main.right-column-open #RightColumn-wrapper #RightColumn {
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

.right-content {
  height: 100%;
  overflow-x: hidden;
  padding: 1.25rem;
}
/*!*****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/right/CreateSale.scss ***!
  \*****************************************************************************************************************************************************************************************************/
.file-preview-item {
  width: 100%;
  display: flex;
  align-items: center;
  background: var(--color-chat-hover);
  border-radius: var(--border-radius-default-small);
  padding-left: 0.75rem;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.file-preview-item .file-preview-img {
  width: 1.875rem;
  height: 1.875rem;
  flex-shrink: 0;
}
.file-preview-item .file-preview-img img {
  border-radius: var(--border-radius-default-tiny);
}
.file-preview-item .file-preview-name {
  flex-grow: 1;
  font-size: 0.8125rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-preview-item .file-preview-audio {
  width: 1.875rem;
  height: 1.875rem;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--color-primary);
}

.create-sale-form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/*!***********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/calls/ActiveCallHeader.scss ***!
  \***********************************************************************************************************************************************************************************************************/
.ActiveCallHeader {
  position: absolute;
  top: 0;
  left: 0;
  height: 2.5rem;
  width: 100%;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  font-size: 1.125rem;
  color: #fff;
  align-items: center;
  padding: 0 1rem;
  background: linear-gradient(92deg, #a259ff 1.51%, #0acf83 39.16%, #1abcfe 66.36%, #a259ff 100%);
  transform: translateY(-100%);
}
.ActiveCallHeader.open {
  transform: translateY(0);
}
/*!***********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/calls/phone/PhoneCallButton.module.scss ***!
  \***********************************************************************************************************************************************************************************************************************/
.PhoneCallButton-module__root {
  width: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.PhoneCallButton-module__root .Button.round {
  width: 4.375rem;
  height: 4.375rem;
}

.PhoneCallButton-module__button {
  background-color: rgba(7, 7, 8, 0.3) !important;
}
.PhoneCallButton-module__button:hover {
  background-color: rgba(7, 7, 8, 0.4) !important;
}
.PhoneCallButton-module__button.PhoneCallButton-module__active {
  background-color: #fff !important;
}
.PhoneCallButton-module__button.PhoneCallButton-module__active [fill] {
  fill: var(--color-text);
}
.PhoneCallButton-module__button.PhoneCallButton-module__active:hover {
  background-color: #ddd !important;
}

.PhoneCallButton-module__button-text {
  color: #fff;
  font-size: 0.75rem;
  margin-top: 0.25rem;
  white-space: nowrap;
}
/*!*****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/calls/phone/PhoneCall.module.scss ***!
  \*****************************************************************************************************************************************************************************************************************/
.PhoneCall-module__root .modal-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  max-width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  background: rgba(40, 40, 40, 0.85);
  -webkit-backdrop-filter: blur(27.5px);
          backdrop-filter: blur(27.5px);
}
.PhoneCall-module__root .modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 80vh;
  padding: 0;
}
.PhoneCall-module__root h1 {
  font-size: 1.875rem;
  font-weight: 600;
  color: white;
  margin: 0;
  line-height: 1.1;
}
.PhoneCall-module__root .Avatar {
  width: 8.4375rem;
  height: 8.4375rem;
  font-size: 3.5rem;
  border-radius: 44.5%;
  z-index: -1;
  margin-top: 3.25rem;
}
.PhoneCall-module__root .Avatar .Avatar__media {
  object-fit: cover;
}
.PhoneCall-module__root .Avatar.PhoneCall-module__blurred .Avatar__media {
  filter: blur(10px);
}

.PhoneCall-module__single-column .modal-dialog {
  max-width: 100% !important;
  border-radius: 0;
  margin: 0;
}
.PhoneCall-module__single-column .modal-content {
  height: calc(var(--vh) * 100);
  max-height: calc(var(--vh) * 100);
}

.PhoneCall-module__header {
  width: 100%;
  display: flex;
  align-items: center;
  color: #fff;
  position: absolute;
  padding: 0.5rem;
}
.PhoneCall-module__header .Button {
  color: #fff;
}

.PhoneCall-module__close-button {
  margin-left: auto;
}

.PhoneCall-module__emojis-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transition: 0.25s ease-in-out background-color;
  z-index: 2;
}
.PhoneCall-module__emojis-backdrop.PhoneCall-module__open {
  background-color: rgba(0, 0, 0, 0.7);
  pointer-events: auto;
}

.PhoneCall-module__emojis {
  -webkit-user-select: none;
          user-select: none;
  pointer-events: auto;
  cursor: pointer;
  margin-top: 1rem;
  height: 3rem;
  transition: 0.25s ease-in-out transform;
  top: 0;
  font-size: 1.5rem;
}
.PhoneCall-module__emojis.PhoneCall-module__open {
  transform: scale(2) translateY(3rem);
}

.PhoneCall-module__emoji-tooltip {
  -webkit-user-select: none;
          user-select: none;
  position: absolute;
  margin-top: 10rem;
  color: white;
  max-width: 20rem;
  text-align: center;
  font-weight: 500;
  opacity: 0;
  transition: 0.25s ease-in-out opacity;
}
.PhoneCall-module__emoji-tooltip.PhoneCall-module__open {
  opacity: 1;
}

.PhoneCall-module__user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-text-secondary);
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
  margin-top: 10rem;
}

.PhoneCall-module__buttons {
  display: flex;
  gap: 1.25rem;
  position: absolute;
  bottom: 2.5rem;
  -webkit-user-select: none;
          user-select: none;
}

.PhoneCall-module__leave {
  background: #ef4062 !important;
}
.PhoneCall-module__leave:hover {
  background-color: #d24646 !important;
}

.PhoneCall-module__accept {
  background: #27ae60 !important;
}
.PhoneCall-module__accept:hover {
  background-color: #4eab50 !important;
}

.PhoneCall-module__accept-icon {
  transform: rotate(-135deg);
}

.PhoneCall-module__main-video {
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
}

.PhoneCall-module__second-video {
  z-index: -1;
  position: absolute;
  width: 9rem;
  bottom: 1rem;
  right: 1rem;
  border-radius: 0.5rem;
  transform: translateY(calc(100% + 1rem));
  transition: 0.25s ease-in-out transform;
}
.PhoneCall-module__second-video.PhoneCall-module__visible {
  transform: translateY(-5.5rem);
}
.PhoneCall-module__second-video.PhoneCall-module__fullscreen {
  transform: translateY(0);
}
/*!*****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/calls/group/MicrophoneButton.scss ***!
  \*****************************************************************************************************************************************************************************************************************/
.MicrophoneButton {
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none !important;
  position: relative;
  width: 6rem;
  height: 6rem;
  border: 0;
  background: radial-gradient(100% 100% at 100% 0%, #00a0b9 0%, #33c659 55%, #33c659 100%);
  border-radius: 50%;
  font-size: 2rem;
  color: #fff;
  transition: 0.25s ease-out filter;
}
.MicrophoneButton::before {
  content: "";
  display: block;
  position: absolute;
  width: 8rem;
  height: 8rem;
  background: #64C166;
  border-radius: 50%;
  filter: blur(10px);
  opacity: 0.2;
  pointer-events: none;
}
body.is-ios .MicrophoneButton::before {
  display: none;
}
.MicrophoneButton:hover {
  filter: brightness(0.9);
}
.MicrophoneButton.crossed {
  background: radial-gradient(100% 100% at 100% 0%, #00AFFE 0%, #00AFFE 55%, #007FFF 100%);
}
.MicrophoneButton.crossed::before {
  background: #00AFFE;
}
.MicrophoneButton.muted-by-admin {
  background: radial-gradient(85.5% 103.5% at 87.5% 20.65%, #CE4D74 0%, #3D52DF 100%);
}
.MicrophoneButton.muted-by-admin::before {
  background: #3D52DF;
}
.MicrophoneButton.is-connecting, .MicrophoneButton.is-connecting:hover {
  background: #222B34;
}
.MicrophoneButton.is-connecting::before, .MicrophoneButton.is-connecting:hover::before {
  background: transparent;
}
/*!*************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/calls/group/GroupCallParticipantMenu.scss ***!
  \*************************************************************************************************************************************************************************************************************************/
.participant-menu {
  position: absolute;
  --color-text: white;
  --color-background-compact-menu: #212121DD;
  --color-background-compact-menu-hover: #00000066;
}
.participant-menu .bubble {
  background: none !important;
  border-radius: 0;
  padding: 0;
  border: none !important;
  box-shadow: none !important;
  overflow: visible;
  color: var(--color-text);
}
.participant-menu .bubble .group {
  box-shadow: 0 0.25rem 0.5rem 0.125rem rgba(16, 16, 16, 0.3);
  overflow: hidden;
  background: var(--color-background);
  border-radius: var(--border-radius-default);
  margin-bottom: 0.5rem;
}
.participant-menu.compact .group {
  background: var(--color-background-compact-menu);
}
.participant-menu .volume-control {
  height: 3rem;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.participant-menu .volume-control .info {
  pointer-events: none;
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.75rem 1rem;
}
.participant-menu .volume-control .info .AnimatedSticker {
  margin-right: 2rem;
}
.participant-menu .volume-control.high {
  --range-color: #4DA6E0;
}
.participant-menu .volume-control.normal {
  --range-color: #57BC6C;
}
.participant-menu .volume-control.medium {
  --range-color: #CAA53B;
}
.participant-menu .volume-control.low {
  --range-color: #CB5757;
}
.participant-menu .volume-control input[type=range] {
  display: block;
  width: 100%;
  height: 0.75rem;
  margin-bottom: 0.5rem;
  background: transparent;
}
.participant-menu .volume-control input[type=range]:focus {
  outline: none;
}
.participant-menu .volume-control input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.participant-menu .volume-control input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}
.participant-menu .volume-control input[type=range]::-moz-slider-thumb {
  -moz-appearance: none;
}
.participant-menu .volume-control input[type=range]::-webkit-slider-runnable-track {
  cursor: pointer;
}
.participant-menu .volume-control input[type=range]::-moz-range-track, .participant-menu .volume-control input[type=range]::-moz-range-progress {
  cursor: pointer;
}
.participant-menu .volume-control input[type=range] {
  height: 3rem;
  position: absolute;
  left: -1.5rem;
  top: 0;
  width: calc(100% + 3rem);
  margin: 0;
  z-index: 0;
}
.participant-menu .volume-control input[type=range]::-webkit-slider-thumb {
  border: none;
  height: 3rem;
  width: 1.5rem;
  background: var(--range-color);
  border-radius: var(--border-radius-default);
  box-shadow: -13.5rem 0 0 12.75rem var(--range-color);
  -webkit-transition: 0.25s ease-in-out background-color, 0.25s ease-in-out box-shadow;
  transition: 0.25s ease-in-out background-color, 0.25s ease-in-out box-shadow;
}
.participant-menu .volume-control input[type=range]::-moz-range-thumb {
  border: none;
  height: 3rem;
  width: 1.5rem;
  background: var(--range-color);
  border-radius: var(--border-radius-default);
  box-shadow: -13.5rem 0 0 12.75rem var(--range-color);
  -moz-transition: 0.25s ease-in-out background-color, 0.25s ease-in-out box-shadow;
  transition: 0.25s ease-in-out background-color, 0.25s ease-in-out box-shadow;
}
.participant-menu .volume-control input[type=range]::-ms-thumb {
  border: none;
  height: 3rem;
  width: 1.5rem;
  background: var(--range-color);
  border-radius: var(--border-radius-default);
  box-shadow: -13.5rem 0 0 12.75rem var(--range-color);
  -ms-transition: 0.25s ease-in-out background-color, 0.25s ease-in-out box-shadow;
  transition: 0.25s ease-in-out background-color, 0.25s ease-in-out box-shadow;
}
/*!*********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/calls/group/GroupCallParticipant.scss ***!
  \*********************************************************************************************************************************************************************************************************************/
.GroupCallParticipant {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  transition: 0.15s ease-out background-color;
  cursor: pointer;
}
.GroupCallParticipant:hover {
  background: #2f363e;
}
.GroupCallParticipant audio {
  display: none;
}
.GroupCallParticipant .Avatar {
  margin-right: 1rem;
}
.GroupCallParticipant .info {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.GroupCallParticipant .info .name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.GroupCallParticipant .info .about {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #848d94;
  font-size: 0.75rem;
}
.GroupCallParticipant .info .about.blue {
  color: #4da6e0;
}
.GroupCallParticipant .info .about.green {
  color: #57bc6c;
}
.GroupCallParticipant .info .about.red {
  color: #ff706f;
}
.GroupCallParticipant .microphone {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  font-size: 1.5rem;
  color: #ff706f;
}
.GroupCallParticipant.can-self-unmute .microphone {
  color: #848d94;
}
.GroupCallParticipant .streams {
  cursor: pointer;
  display: flex;
}
/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/calls/group/GroupCallParticipantVideo.scss ***!
  \**************************************************************************************************************************************************************************************************************************/
.GroupCallParticipantVideo {
  border-radius: 0.75rem;
  overflow: hidden;
  position: relative;
  max-height: 12.875rem;
  width: calc(50% - 0.25rem);
  /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
  transition: 0.25s ease-out width;
  cursor: pointer;
}
.GroupCallParticipantVideo .thumbnail-avatar {
  position: absolute;
  border-radius: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.1);
}
.GroupCallParticipantVideo .thumbnail-avatar img {
  filter: blur(10px);
  border-radius: 0;
  object-fit: cover;
}
.GroupCallParticipantVideo:last-child:nth-child(odd) {
  width: 100%;
}
.GroupCallParticipantVideo::before {
  box-shadow: 0 0 0 3px transparent inset;
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  content: "";
  z-index: 5;
  border-radius: 0.75rem;
  transition: 0.25s ease-out box-shadow;
}
.GroupCallParticipantVideo.active::before {
  box-shadow: 0px 0px 0px 3px #78ee7e inset;
}
.GroupCallParticipantVideo .back-button {
  position: absolute;
  z-index: 5;
  top: 0.75rem;
  left: 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border: 0;
  color: white;
  border-radius: 1rem;
  padding: 0.25rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transition: 0.25s ease-out opacity, 0.25s ease-out background-color;
  opacity: 0;
  cursor: pointer;
  outline: none !important;
}
.GroupCallParticipantVideo .back-button:hover {
  background: rgba(0, 0, 0, 0.4);
}
.GroupCallParticipantVideo video {
  display: block;
  width: 100%;
}
.GroupCallParticipantVideo .video {
  object-fit: contain;
  height: 12.5rem;
  position: relative;
}
.GroupCallParticipantVideo .thumbnail-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 100%;
  transform: translate(-50%, -50%) scale(1.5);
  background: black;
}
.GroupCallParticipantVideo .thumbnail {
  filter: blur(10px) brightness(0.5);
  object-fit: cover;
}
.GroupCallParticipantVideo .info {
  position: absolute;
  bottom: 0;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 0.5rem 0.25rem;
  width: 100%;
  height: 2rem;
  background: linear-gradient(0deg, #000, transparent);
  transition: 0.25s ease-out opacity;
  opacity: 0;
}
.GroupCallParticipantVideo .info .name {
  margin-left: 0.5rem;
}
.GroupCallParticipantVideo .info .last-icon {
  margin-left: auto;
}

.videos:hover .GroupCallParticipantVideo .info {
  opacity: 1;
}
.videos:hover .GroupCallParticipantVideo .back-button {
  opacity: 1;
}
/*!**********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/calls/group/GroupCall.scss ***!
  \**********************************************************************************************************************************************************************************************************/
.GroupCall .modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 37.5rem;
}
.GroupCall .modal-dialog {
  max-height: calc(100% - 4rem);
  background: #181f27;
}
.GroupCall .Menu {
  --color-text: white;
  --color-background-compact-menu: #212121DD;
  --color-background-compact-menu-hover: #00000066;
}
.GroupCall .Menu .bubble {
  box-shadow: 0 0.25rem 0.5rem 0.125rem rgba(16, 16, 16, 0.3);
}
.GroupCall.single-column {
  opacity: 1 !important;
}
.GroupCall.single-column .modal-dialog {
  max-width: 100% !important;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-top: auto;
  margin-bottom: 0;
  transform: translate3d(0, 100%, 0);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.GroupCall.single-column .modal-backdrop {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.GroupCall.single-column.open .modal-backdrop {
  opacity: 1;
}
.GroupCall.single-column.open .modal-dialog {
  transform: translate3d(0, 0, 0);
}
.GroupCall .header {
  width: 100%;
  display: flex;
  align-items: center;
  color: #fff;
  margin-bottom: 0.5rem;
}
.GroupCall .header h3 {
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0 auto 0 0.5rem;
}
.GroupCall .videos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.GroupCall .participants {
  margin-top: 0.75rem;
  background: #222b34;
  border-radius: 0.75rem;
}
.GroupCall .participants .Loading {
  padding: 2rem 0;
}
.GroupCall .participants .invite-btn {
  padding: 0.25rem 0.75rem;
  display: flex;
  align-items: center;
  border-radius: 0.75rem;
  transition: 0.15s ease-out background-color;
  cursor: pointer;
  color: var(--color-text-secondary);
}
.GroupCall .participants .invite-btn:hover {
  background: #2f363e;
}
.GroupCall .participants .invite-btn .text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.GroupCall .participants .invite-btn .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.5rem;
  margin-right: 1rem;
}
.GroupCall .scrollable {
  overflow: auto;
  padding-bottom: 2rem;
  max-width: 37.5rem;
  width: 100%;
}
.GroupCall .buttons {
  max-width: 37.5rem;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  position: relative;
  height: 8.75rem;
}
.GroupCall .buttons button {
  cursor: pointer;
}
.GroupCall .buttons::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 2rem;
  background: linear-gradient(0deg, #181f27, rgba(24, 31, 39, 0));
  z-index: 0;
  top: -2rem;
}
.GroupCall .buttons .button-wrapper {
  width: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.GroupCall .buttons .button-wrapper .button-text {
  white-space: nowrap;
  font-size: 0.75rem;
  margin-top: 0.5rem;
  color: #fff;
}
.GroupCall .buttons .button-wrapper.microphone-wrapper {
  width: 6rem;
}
.GroupCall .buttons .button-wrapper.microphone-wrapper .button-text {
  margin-top: 0.75rem;
  font-size: 1rem;
}
.GroupCall .buttons .Loading {
  position: absolute;
  transform: translate(0, -1.125rem);
}
.GroupCall .buttons .Loading .Spinner {
  --spinner-size: 6.5rem;
}
.GroupCall .buttons .video-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.GroupCall .buttons .small-button,
.GroupCall .buttons .smaller-button {
  outline: none;
  border: 0;
  background: #15415b;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  color: #fff;
  font-size: 1.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.25s ease-out background-color;
}
.GroupCall .buttons .small-button:hover,
.GroupCall .buttons .smaller-button:hover {
  background: #11364b;
}
.GroupCall .buttons .small-button.camera.active {
  background: #15415b;
}
.GroupCall .buttons .small-button.camera.active:hover {
  background: #11364b;
}
.GroupCall .buttons .small-button.speaker {
  background: #2b3a51;
}
.GroupCall .buttons .small-button.speaker.active {
  background: #496092;
}
.GroupCall .buttons .small-button.leave {
  background: #5a2824;
}
.GroupCall .buttons .small-button.leave:hover {
  background: #49201d;
}
.GroupCall .buttons .smaller-button {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.5rem;
  padding: 0;
}
.GroupCall.landscape .scrollable {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  gap: 1rem;
  align-items: flex-start;
  max-width: 100%;
  max-height: 100%;
}
.GroupCall.landscape .GroupCallParticipantVideo {
  max-height: initial;
}
.GroupCall.landscape .GroupCallParticipantVideo video {
  height: 100%;
}
.GroupCall.landscape .buttons {
  position: absolute;
  left: calc(50% - 7.8125rem);
  transform: translateX(-50%);
  width: auto;
  gap: 1rem;
  bottom: 4rem;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 1rem;
  z-index: 5;
  padding: 0.75rem 1rem;
  height: auto;
}
.GroupCall.landscape .buttons .button-text {
  display: none;
}
.GroupCall.landscape .buttons .video-buttons {
  flex-direction: row;
  gap: 1rem;
}
.GroupCall.landscape .buttons .video-buttons .smaller-button {
  margin-bottom: 0;
}
.GroupCall.landscape .buttons .Loading {
  transform: none;
}
.GroupCall.landscape .buttons .Loading .Spinner {
  --spinner-size: 3.25rem;
}
.GroupCall.landscape .buttons .MicrophoneButton canvas {
  width: 2rem !important;
  height: 2rem !important;
}
.GroupCall.landscape .buttons .MicrophoneButton,
.GroupCall.landscape .buttons .microphone-wrapper {
  width: 3rem;
  height: 3rem;
}
.GroupCall.landscape .buttons .MicrophoneButton .AnimatedSticker,
.GroupCall.landscape .buttons .microphone-wrapper .AnimatedSticker {
  display: flex;
  align-items: center;
  justify-content: center;
}
.GroupCall.landscape .buttons::before {
  display: none;
}
.GroupCall.landscape.no-sidebar .buttons {
  left: 50%;
}
.GroupCall.landscape .streams {
  width: 100%;
  height: 100%;
}
.GroupCall.landscape .videos {
  width: 100%;
  height: 100%;
  display: grid;
  --column-count: 1;
  grid-template-columns: repeat(var(--column-count), 1fr);
  grid-auto-rows: 1fr;
}
.GroupCall.landscape .videos .GroupCallParticipantVideo {
  max-height: 100%;
  width: 100%;
}
.GroupCall.landscape .videos .GroupCallParticipantVideo .thumbnail-wrapper {
  height: 100%;
}
.GroupCall.landscape .videos.span-last-video .GroupCallParticipantVideo:last-child {
  grid-column: span var(--column-count);
}
.GroupCall.landscape .participants {
  width: 15.625rem;
  margin-top: 0;
}
/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/calls/phone/RatePhoneCallModal.module.scss ***!
  \**************************************************************************************************************************************************************************************************************************/
.RatePhoneCallModal-module__stars {
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 1.5rem;
}

.RatePhoneCallModal-module__star {
  cursor: pointer;
  color: var(--color-text-secondary);
}
.RatePhoneCallModal-module__star:not(:first-child) {
  margin-left: 1rem;
}
.RatePhoneCallModal-module__star.RatePhoneCallModal-module__isFilled [fill] {
  fill: #f90;
}
.RatePhoneCallModal-module__star.RatePhoneCallModal-module__isFilled [stroke] {
  stroke: #f90;
}

.RatePhoneCallModal-module__comment {
  margin-top: 1rem;
  overflow: hidden;
}
.RatePhoneCallModal-module__comment:not(.RatePhoneCallModal-module__visible) {
  display: none;
}
/*!******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/main/ConfettiContainer.module.scss ***!
  \******************************************************************************************************************************************************************************************************************/
.ConfettiContainer-module__root {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-confetti);
  pointer-events: none;
  overflow: hidden;
}
/*!**********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/main/Main.scss ***!
  \**********************************************************************************************************************************************************************************************/
#Main {
  height: 100%;
  text-align: left;
  overflow: hidden;
}
@media (min-width: 1276px) {
  #Main {
    position: relative;
  }
}
@media (max-width: 600px) {
  #Main {
    height: calc(var(--vh, 1vh) * 100);
  }
}
@media (min-width: 926px) {
  #Main {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 100%;
  }
}

.has-call-header {
  --call-header-height: 2rem;
}
.has-call-header #LeftColumn,
.has-call-header #MiddleColumn,
.has-call-header #RightColumn-wrapper {
  height: calc(100% - 2.5rem);
  margin-top: 2.5rem;
}

.LeftColumn {
  width: 33vw;
  display: flex;
  flex-direction: column;
  --left-column-min-width: 16rem;
  --left-column-max-width: 26.5rem;
  min-width: var(--left-column-min-width);
  max-width: var(--left-column-max-width);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.46);
  z-index: 2;
  height: 100%;
  position: relative;
  background-color: var(--color-background);
}
.LeftColumn.hide {
  z-index: 1;
}
.LeftColumn > div:not(.LeftMainMenu) {
  height: calc(100% - var(--left-menu-height));
  overflow: hidden;
}
@media (max-width: 600px) {
  .LeftColumn {
    height: calc(var(--vh, 1vh) * 100);
  }
}
@media (min-width: 926px) {
  .LeftColumn {
    --left-column-max-width: 40vw;
  }
}
@media (min-width: 1276px) {
  .LeftColumn {
    width: 25vw;
    --left-column-max-width: 33vw;
  }
}
@media (max-width: 925px) {
  .LeftColumn {
    position: fixed;
    left: 0;
    top: 0;
    height: calc(var(--vh, 1vh) * 100);
    width: 20.5rem !important;
    transform: translate3d(-5rem, 0, 0);
    transition: transform var(--layer-transition);
  }
  body.animation-level-0 .LeftColumn {
    transition: none;
  }
  .LeftColumn::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: black;
    opacity: 0;
    transition: opacity var(--layer-transition);
    z-index: 1;
    pointer-events: none;
  }
  body.animation-level-0 .LeftColumn::after {
    transition: none;
  }
  body.is-android .LeftColumn::after {
    display: none;
  }
  body.is-android #Main.left-column-animating .LeftColumn::after, body.is-android #Main:not(.left-column-open) .LeftColumn::after {
    display: block;
  }
  body:not(.is-android) #Main:not(.left-column-open) .LeftColumn::after, body.android-left-blackout-open .LeftColumn::after {
    opacity: var(--layer-blackout-opacity);
  }
  #Main.left-column-open .LeftColumn {
    transform: translate3d(0, 0, 0);
  }
  #Main.history-animation-disabled .LeftColumn {
    transition: none;
  }
  #Main.history-animation-disabled .LeftColumn:after {
    transition: none;
  }
}
@media (max-width: 768px) {
  .LeftColumn {
    width: 19rem !important;
  }
}
@media (max-width: 600px) {
  .LeftColumn {
    max-width: none;
    --left-column-max-width: calc(100vw - env(safe-area-inset-left));
    transform: translate3d(-20vw, 0, 0);
    left: env(safe-area-inset-left) !important;
    width: calc(100vw - env(safe-area-inset-left)) !important;
  }
  @supports not (left: env(safe-area-inset-left)) {
    .LeftColumn {
      left: 0 !important;
      width: 100vw !important;
    }
  }
}

@media (max-width: 600px) {
  #RightColumn {
    height: calc(var(--vh, 1vh) * 100 + 1px);
  }
}
#Main.history-animation-disabled #RightColumn {
  transition: none;
}
#Main.history-animation-disabled #RightColumn .overlay-backdrop {
  transition: none;
}

#Main.history-animation-disabled .overlay-backdrop {
  transition: none;
}

@media (max-width: 925px) {
  #MiddleColumn {
    max-width: none;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    transform: translate3d(0, 0, 0);
    transition: transform var(--layer-transition);
  }
  body.animation-level-0 #MiddleColumn {
    transition: none;
  }
  #Main.left-column-open #MiddleColumn {
    transform: translate3d(20.5rem, 0, 0);
    width: calc(100% - 20.5rem);
  }
}
@media (max-width: 768px) {
  #Main.left-column-open #MiddleColumn {
    transform: translate3d(19rem, 0, 0);
    width: calc(100% - 19rem);
  }
}
@media (max-width: 600px) {
  #MiddleColumn {
    border-left: none;
  }
  #Main.left-column-open #MiddleColumn {
    transform: translate3d(100vw, 0, 0);
  }
  #Main.right-column-open #MiddleColumn {
    transform: translate3d(-20vw, 0, 0);
  }
}
#Main.history-animation-disabled #MiddleColumn {
  transition: none;
}
#Main.history-animation-disabled #MiddleColumn:after {
  transition: none;
}

body.is-android.animation-level-1 {
  --layer-transition: 250ms ease-in-out;
}
body.is-android.animation-level-1 #LeftColumn,
body.is-android.animation-level-1 #MiddleColumn,
body.is-android.animation-level-1 #RightColumn {
  transition: transform var(--layer-transition), opacity var(--layer-transition);
}
body.is-android.animation-level-1 #Main.left-column-open:not(.left-column-animating) #MiddleColumn {
  display: none;
}
body.is-android.animation-level-1 #Main.left-column-open #MiddleColumn {
  transform: translate3d(10vw, 0, 0);
  opacity: 0;
}
body.is-android.animation-level-1 #Main:not(.left-column-open) #LeftColumn {
  transform: translate3d(0, 0, 0);
  opacity: 0;
}
body.is-android.animation-level-1 #Main:not(.right-column-open):not(.right-column-animating) #RightColumn {
  display: none;
}
body.is-android.animation-level-1 #Main:not(.right-column-open) #RightColumn {
  transform: translate3d(10vw, 0, 0);
  opacity: 0;
}
body.is-android.animation-level-1 #Main.right-column-open #MiddleColumn {
  transform: translate3d(0, 0, 0);
  opacity: 0;
}
/*!************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/DeleteAccountPage/DeleteAccountPage.scss ***!
  \************************************************************************************************************************************************************************************************************************/
.delete-account-wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-account {
  position: relative;
  max-width: 371px;
  width: 100%;
  padding: 20px;
  border-radius: 15px;
  background: #FDE7EB;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.delete-account__close {
  position: absolute;
  right: 10px;
  top: 5px;
}
.delete-account__title {
  font-family: Roboto;
  font-weight: 500;
  font-size: 24px;
  line-height: 30px;
  text-align: center;
}
.delete-account__buttons-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 37px;
}
.delete-account__cancled {
  width: 100%;
  border-radius: 10px;
  padding: 10px;
  background: #c6d3f9;
  transition: all 0.3s ease;
  cursor: pointer;
}
.delete-account__cancled:hover {
  background: #b3c4f6;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.delete-account__delete {
  width: 100%;
  border-radius: 10px;
  padding: 10px;
  background: #ffb8c5;
  transition: all 0.3s ease;
  cursor: pointer;
}
.delete-account__delete:hover {
  background: #ffa7b6;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/*!********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ChangeEmailPage/ChangeEmailPage.scss ***!
  \********************************************************************************************************************************************************************************************************************/

/*!**********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/assets/styles/styles.scss ***!
  \**********************************************************************************************************************************************************************************************/
.pointer {
  cursor: pointer;
}

.global-title {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 18px;
}

.blue-text {
  color: #0A49A5;
}

.input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type=number],
input[type=number]:hover,
input[type=number]:focus {
  appearance: none;
  -moz-appearance: textfield;
}
/*!***********************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/assets/fonts/roboto.css ***!
  \***********************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular'), url(/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.499af208fa04aa805317.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular'), url(/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.6b69287db14836e8ccee.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular'), url(/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.350ec982325895563ada.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular'), url(/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.af30acd9d70ade5b828d.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular'), url(/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.62afd8a72052ca925aaf.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular'), url(/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.009379f5feecd3ef689a.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular'), url(/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.465390c6e54c60f4a15f.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(/KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP.66efaee062df58309edc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.3e1bb90afe5eb4a94c5f.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(/KFOlCnqEu92Fr1MmEU9fCBc4AMP6lbBP.acd64c8bf32762464b8f.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(/KFOlCnqEu92Fr1MmEU9fBxc4AMP6lbBP.cab892ae9aa422233ea4.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(/KFOlCnqEu92Fr1MmEU9fCxc4AMP6lbBP.01bafbfbc1e4ebe0139d.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.d3c211af53a789d2f9fd.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.324b1e6d0f5ae7c6ab42.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Persian, v33.001, https://github.com/rastikerdar/vazirmatn */
@font-face {
  font-family: Vazirmatn;
  src: url(/Vazirmatn-NL-Regular.572a8ef6359a125a67f0.woff2) format('woff2'),
  url(/Vazirmatn-NL-Regular.f0ab1c74565ee5cdb33d.woff) format('woff');
  font-weight: normal;
  font-display:swap;
  unicode-range:U+0627-06FF;
}

/* Persian, v33.003, https://github.com/rastikerdar/vazirmatn */
@font-face {
  font-family: Vazirmatn;
  src: url(/Vazirmatn-NL-Medium.26007b3a50dbbab53c15.woff2) format('woff2'),
  url(/Vazirmatn-NL-Medium.f3b8e058aff7dd59279b.woff) format('woff');
  font-weight: 500;
  font-display:swap;
  unicode-range: U+0600-06FF;
}

@font-face {
  font-family: "SF Pro Display";
  src: url(/SFPRODISPLAYREGULAR.d1f5e6e16dd4f75c3950.OTF) format('opentype');
  font-weight: 400; /* Regular = 400 */
  font-style: normal;
  font-display: swap;
}

/*!**************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles/index.scss ***!
  \**************************************************************************************************************************************************************************************/
/* stylelint-disable plugin/selector-tag-no-without-class */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

body {
  margin: 0;
}

[tabindex="-1"]:focus {
  outline: none !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

p,
ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

blockquote,
figure {
  margin: 0 0 1rem;
}

dfn {
  font-style: italic;
}

dt,
b,
strong {
  font-weight: 500;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

a {
  color: var(--color-links);
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

a:not([href]):not([tabindex]):not(.text-entity-link),
a:not([href]):not([tabindex]):not(.text-entity-link):hover,
a:not([href]):not([tabindex]):not(.text-entity-link):focus {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}

pre,
code,
kbd,
samp {
  font: 0.9375rem/1.25 "Courier", "Courier New", "Nimbus Mono L", "Courier 10 Pitch", "FreeMono", sans-serif-monospace, monospace;
  font-size-adjust: 0.43;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
  flex-shrink: 0;
}

svg[width="0px"] {
  display: none;
}

a,
area,
button,
[role=button],
input:not([type=range]),
label,
select,
summary,
textarea {
  touch-action: manipulation;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #868e96;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
}

label {
  display: inline-block;
  margin-bottom: 0.5rem;
}

button {
  border: none;
  background: none;
  outline: none;
  padding: 0;
  cursor: pointer;
}

button:focus {
  outline: none;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type=radio],
input[type=checkbox] {
  box-sizing: border-box;
  padding: 0;
}

input[type=date],
input[type=time],
input[type=datetime-local],
input[type=month] {
  -webkit-appearance: listbox;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}

:root {
  --theme-background-color: #ffffff;
  --color-background: #ffffff;
  --color-background-compact-menu: #ffffffbb;
  --color-background-compact-menu-reactions: #ffffffeb;
  --color-background-compact-menu-hover: #000000b2;
  --color-background-selected: #f4f4f5;
  --color-background-secondary: #f6f6f6;
  --color-background-secondary-accent: #e4e4e5;
  --color-background-own: #eeffde;
  --color-background-own-selected: color.adjust($color-light-green, -10%);
  --color-text: #070708;
  --color-text-lighter: #2e3939;
  --color-text-secondary: #929298;
  --color-icon-secondary: #929298;
  --color-text-secondary-rgb: 146, 146, 152;
  --color-text-secondary-apple: #8a8a90;
  --color-text-meta: #686c72;
  --color-text-meta-rgb: 104, 108, 114;
  --color-text-meta-colored: #04b505;
  --color-text-meta-apple: #8c8c91;
  --color-text-green: #04b505;
  --color-text-gray: #74747b;
  --color-text-green-rgb: 4, 181, 5;
  --color-borders: #cfcfd2;
  --color-underline: #ededed;
  --color-borders-rgb: 207, 207, 210;
  --color-borders-input: #cfcfd2;
  --color-borders-checkbox: #b1b1b5;
  --color-dividers: #c8c6cc;
  --color-dividers-android: #e7e7e7;
  --color-webpage-initial-background: #2e3939;
  --color-interactive-active: var(--color-primary);
  --color-interactive-inactive: rgba(var(--color-text-secondary-rgb), 0.25);
  --color-interactive-buffered: rgba(
    var(--color-text-secondary-rgb),
    0.25
  );
  --color-interactive-element-hover: rgba(
    var(--color-text-secondary-rgb),
    0.08
  );
  --color-composer-button: #929298CC;
  --color-voice-transcribe-button: #e8f3ff;
  --color-voice-transcribe-button-own: #cceebf;
  --color-primary: #0a49a5;
  --color-primary-shade: #0a49a5;
  --color-primary-shade-darker: #0a3e8c;
  --color-primary-shade-rgb: 10, 68, 152;
  --color-primary-opacity: rgba(var(--color-primary), 0.25);
  --color-primary-opacity-hover: rgba(var(--color-primary), 0.15);
  --color-green: #27ae60;
  --color-green-shade: #3db670;
  --color-green-darker: #229352;
  --color-success: #44be2e;
  --color-black-opacity-60: rgba(7, 7, 8, 0.6);
  --color-black-opacity-35: rgba(7, 7, 8, 0.35);
  --color-black-opacity-40: rgba(7, 7, 8, 0.4);
  --color-black-opacity-30: rgba(7, 7, 8, 0.3);
  --color-black-opacity-15: rgba(7, 7, 8, 0.15);
  --color-black-opacity-20: rgba(7, 7, 8, 0.2);
  --color-error: #ef4062;
  --color-error-shade: #dc3b5b;
  --color-error-rgb: 239, 64, 98;
  --color-warning: #fb8c00;
  --color-yellow: #fdd764;
  --color-links: #0a49a5;
  --color-own-links: #ffffff;
  --color-placeholders: #929298;
  --color-pinned: #ffffff;
  --color-code: #4a729a;
  --color-code-bg: rgba(146, 146, 152, 0.08);
  --color-code-own: #3c7940;
  --color-code-own-bg: rgba(146, 146, 152, 0.08);
  --color-accent-own: #ffffff;
  --color-message-meta-own: #04b505;
  --color-message-reaction: $color-message-reaction;
  --color-message-reaction-hover: $color-message-reaction-hover;
  --color-message-reaction-own: $color-message-reaction-own;
  --color-message-reaction-hover-own: $color-message-reaction-own-hover;
  --color-reply-hover: rgb(246, 246, 247);
  --color-reply-active: rgb(238, 238, 239);
  --color-reply-own-hover: rgb(210, 246, 196);
  --color-reply-own-active: rgb(182, 237, 170);
  --color-background-own-apple: #dcf8c5;
  --color-reply-own-hover-apple: #cbefb7;
  --color-reply-own-active-apple: #bae6a8;
  --color-white: #ffffff;
  --color-gray: #cfcfd2;
  --color-chat-username: #3c7eb0;
  --color-chat-hover: #eeeeef;
  --color-chat-active: #0a49a5;
  --color-item-active: #ededed;
  --color-selection-highlight: #3993fb;
  --color-selection-highlight-emoji: rgba(57, 147, 251, 0.7);
  --color-user-1: #e17076;
  --color-user-2: #7bc862;
  --color-user-4: #65aadd;
  --color-user-5: #a695e7;
  --color-user-6: #ee7aae;
  --color-user-7: #6ec9cb;
  --color-user-8: #faa774;
  --color-1: #2d9cdb;
  --color-2: #44be2e;
  --color-3: #5179e0;
  --color-4: #ef4062;
  --color-5: #f2c94c;
  --color-6: #ff9900;
  --color-7: #6ec9cb;
  --color-8: #faa774;
  --color-9: #9b51e0;
  --color-10: #619df5;
  --color-default-shadow: rgba(0, 0, 0, 0.15);
  --color-light-shadow: #7272722b;
  --color-button-group: #f2f2f2;
  --color-skeleton-background: rgba(33, 33, 33, 0.01);
  --color-skeleton-foreground: rgba(232, 232, 232, 0.5);
  --color-scrollbar: rgba(90, 90, 90, 0.3);
  --color-scrollbar-code: rgba(200, 200, 200, 0.3);
  --color-telegram-blue: #0a49a5;
  --color-forum-hover-unread-topic: #e9e9e9;
  --color-forum-hover-unread-topic-hover: #dcdcdc;
  --color-deleted-account: #9789d1;
  --color-archive: #9eaab5;
  --vh: 1vh;
  --border-radius-default: 1rem;
  --border-radius-default-bigger: 1.25rem;
  --border-radius-default-small: 0.625rem;
  --border-radius-default-smaller: 0.5rem;
  --border-radius-default-tiny: 0.25rem;
  --border-radius-messages: 0.75rem;
  --border-radius-messages-small: 0.25rem;
  --border-radius-messages-medium: 0.375rem;
  --border-radius-forum-avatar: 33%;
  --messages-container-width: 45.5rem;
  --right-column-width: 26.5rem;
  --header-height: 4rem;
  --left-menu-height: 3.8125rem;
  --custom-emoji-size: 1.25rem;
  --custom-emoji-border-radius: 0;
  --symbol-menu-width: 24rem;
  --symbol-menu-height: 23.25rem;
  --symbol-menu-footer-height: 2.125rem;
  --z-overlay-effects: 10001;
  --z-lock-screen: 3000;
  --z-ui-loader-mask: 2000;
  --z-notification: 1700;
  --z-confetti: 1600;
  --z-reaction-picker: 1200;
  --z-story-viewer: 1150;
  --z-reaction-interaction-effect: 1100;
  --z-right-column: 900;
  --z-header-menu: 990;
  --z-header-menu-backdrop: 980;
  --z-modal: 1510;
  --z-media-viewer: 1500;
  --z-video-player-controls: 3;
  --z-drop-area: 55;
  --z-animation-fade: 50;
  --z-menu-bubble: 21;
  --z-menu-backdrop: 20;
  --z-message-highlighted: 14;
  --z-message-context-menu: 13;
  --z-scroll-down-button: 12;
  --z-mobile-search: 12;
  --z-middle-header: 11;
  --z-middle-footer: 11;
  --z-country-code-input-group: 10;
  --z-message-select-control: 9;
  --z-message-select-area: 8;
  --z-sticky-date: 9;
  --z-register-add-avatar: 5;
  --z-forum-panel: 5;
  --z-media-viewer-head: 3;
  --z-symbol-menu-mobile: calc(var(--z-story-viewer) + 1);
  --z-resize-handle: 2;
  --z-below: -1;
  --spinner-white-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iI2ZmZmZmZiIvPjwvc3ZnPg==);
  --spinner-white-thin-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOCIgaGVpZ2h0PSIzOCIgZmlsbD0ibm9uZSI+PG1hc2sgaWQ9ImEiIGZpbGw9IiNmZmYiPjxwYXRoIGQ9Ik0wIDE5QTE5IDE5IDAgMSAwIDE5IDB2My44QTE1LjIgMTUuMiAwIDEgMSAzLjggMTlIMFoiLz48L21hc2s+PHBhdGggc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjgiIGQ9Ik0wIDE5QTE5IDE5IDAgMSAwIDE5IDB2My44QTE1LjIgMTUuMiAwIDEgMSAzLjggMTlIMFoiIG1hc2s9InVybCgjYSkiLz48L3N2Zz4=);
  --spinner-blue-data: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTM2IiBoZWlnaHQ9IjEzNSIgdmlld0JveD0iMCAwIDEzNiAxMzUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJMb2FkIiBkPSJNMiA2Ny41QzIgMTAzLjk1MSAzMS41NDkyIDEzMy41IDY4IDEzMy41QzEwNC40NTEgMTMzLjUgMTM0IDEwMy45NTEgMTM0IDY3LjVDMTM0IDMxLjA0OTIgMTA0LjQ1MSAxLjUgNjggMS41IiBzdHJva2U9IiMwQTQ5QTUiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPgo=);
  --spinner-dark-blue-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzgzNzhEQiIvPjwvc3ZnPg==);
  --spinner-black-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzJlMzkzOSIvPjwvc3ZnPg==);
  --spinner-green-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzRmYWU0ZSIvPjwvc3ZnPg==);
  --spinner-gray-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzcwNzU3OSIvPjwvc3ZnPg==);
  --spinner-yellow-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iI0ZERDc2NCIvPjwvc3ZnPg==);
  --spinner-captcha-data: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyNyAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkxvYWRpbmciPgo8cGF0aCBpZD0iVmVjdG9yIiBkPSJNMTIuNDcwNSAyNkMxNS43OTE3IDI2IDE4Ljc5NzggMjQuNjUwOCAyMC45NzA1IDIyLjQ3MDVDMjMuMTMzNSAyMC4zMDAxIDI0LjQ3MDUgMTcuMzA2MiAyNC40NzA1IDE0QzI0LjQ3MDUgNy4zNzI1OCAxOS4wOTggMiAxMi40NzA1IDJDOS4xNjQzMiAyIDYuMTcwNCAzLjMzNzA4IDQgNS41IiBzdHJva2U9IiM0NjhFRTUiIHN0cm9rZS13aWR0aD0iNCIvPgo8L2c+Cjwvc3ZnPgo=);
  --captcha-checkmark-data: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyOCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN1Y2Nlc3MiPgo8cGF0aCBpZD0iVmVjdG9yIiBkPSJNMiAxMi41TDkuNSAyMUwyNi41IDQiIHN0cm9rZT0iIzAwQTg2MCIgc3Ryb2tlLXdpZHRoPSI0Ii8+CjwvZz4KPC9zdmc+Cg==);
  --drag-target-border: url("data:image/svg+xml,%3csvg width=%27100%25%27 height=%27100%25%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3crect width=%27100%25%27 height=%27100%25%27 fill=%27none%27 rx=%278%27 ry=%278%27 stroke=%27%23929298%27 stroke-width=%272%27 stroke-dasharray=%279.1%2c 10.5%27 stroke-dashoffset=%273%27 stroke-linecap=%27round%27/%3e%3c/svg%3e");
  --drag-target-border-hovered: url("data:image/svg+xml,%3csvg width=%27100%25%27 height=%27100%25%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3crect width=%27100%25%27 height=%27100%25%27 fill=%27none%27 rx=%278%27 ry=%278%27 stroke=%27%230a49a5%27 stroke-width=%272%27 stroke-dasharray=%279.1%2c 10.5%27 stroke-dashoffset=%273%27 stroke-linecap=%27round%27/%3e%3c/svg%3e");
  --layer-blackout-opacity: 0.3;
  --layer-transition: 300ms cubic-bezier(0.33, 1, 0.68, 1);
  --slide-transition: 300ms cubic-bezier(0.25, 1, 0.5, 1);
  --select-transition: 200ms ease-out;
}
@media (min-width: 1276px) and (max-width: 1920px) {
  :root {
    --right-column-width: 25vw;
  }
}
@media (max-width: 925px) {
  :root {
    --right-column-width: 20.5rem;
  }
}
@media (max-width: 600px) {
  :root {
    --right-column-width: 100vw;
    --symbol-menu-width: 100vw;
    --symbol-menu-height: 14.6875rem;
  }
}
:root body.is-ios {
  --layer-transition: 450ms cubic-bezier(0.33, 1, 0.68, 1);
  --slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);
}
:root body.is-android {
  --layer-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);
  --slide-transition: 400ms cubic-bezier(0.25, 1, 0.5, 1);
}

.m-0 {
  margin: 0 !important;
}

.mt-0,
.my-0 {
  margin-top: 0 !important;
}

.mr-0,
.mx-0 {
  margin-right: 0 !important;
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
  margin-left: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1,
.my-1 {
  margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
  margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
  margin-right: 0.5rem !important;
}

.mb-2,
.my-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
  margin-left: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
  margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
  margin-left: 1.5rem !important;
}

.m-5 {
  margin: 2rem !important;
}

.mt-5,
.my-5 {
  margin-top: 2rem !important;
}

.mr-5,
.mx-5 {
  margin-right: 2rem !important;
}

.mb-5,
.my-5 {
  margin-bottom: 2rem !important;
}

.ml-5,
.mx-5 {
  margin-left: 2rem !important;
}

.m-6 {
  margin: 3rem !important;
}

.mt-6,
.my-6 {
  margin-top: 3rem !important;
}

.mr-6,
.mx-6 {
  margin-right: 3rem !important;
}

.mb-6,
.my-6 {
  margin-bottom: 3rem !important;
}

.ml-6,
.mx-6 {
  margin-left: 3rem !important;
}

.m-7 {
  margin: 4rem !important;
}

.mt-7,
.my-7 {
  margin-top: 4rem !important;
}

.mr-7,
.mx-7 {
  margin-right: 4rem !important;
}

.mb-7,
.my-7 {
  margin-bottom: 4rem !important;
}

.ml-7,
.mx-7 {
  margin-left: 4rem !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0,
.py-0 {
  padding-top: 0 !important;
}

.pr-0,
.px-0 {
  padding-right: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
  padding-left: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1,
.py-1 {
  padding-top: 0.25rem !important;
}

.pr-1,
.px-1 {
  padding-right: 0.25rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
  padding-left: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2,
.py-2 {
  padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
  padding-right: 0.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2,
.px-2 {
  padding-left: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pt-3,
.py-3 {
  padding-top: 1rem !important;
}

.pr-3,
.px-3 {
  padding-right: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
  padding-left: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.pt-4,
.py-4 {
  padding-top: 1.5rem !important;
}

.pr-4,
.px-4 {
  padding-right: 1.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

.pl-4,
.px-4 {
  padding-left: 1.5rem !important;
}

.p-5 {
  padding: 2rem !important;
}

.pt-5,
.py-5 {
  padding-top: 2rem !important;
}

.pr-5,
.px-5 {
  padding-right: 2rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 2rem !important;
}

.pl-5,
.px-5 {
  padding-left: 2rem !important;
}

.p-6 {
  padding: 3rem !important;
}

.pt-6,
.py-6 {
  padding-top: 3rem !important;
}

.pr-6,
.px-6 {
  padding-right: 3rem !important;
}

.pb-6,
.py-6 {
  padding-bottom: 3rem !important;
}

.pl-6,
.px-6 {
  padding-left: 3rem !important;
}

.p-7 {
  padding: 4rem !important;
}

.pt-7,
.py-7 {
  padding-top: 4rem !important;
}

.pr-7,
.px-7 {
  padding-right: 4rem !important;
}

.pb-7,
.py-7 {
  padding-bottom: 4rem !important;
}

.pl-7,
.px-7 {
  padding-left: 4rem !important;
}

.row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
}
.row.row-not-wrap > * {
  width: auto;
}

.col {
  flex: 1 0 0%;
}

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

@media (max-width: 480px) {
  .col {
    flex: 0 0 100%;
  }
  .col-6 {
    width: 100%;
  }
}
.form {
  width: 100%;
}

.max-length-indicator {
  position: absolute;
  right: 0.75rem;
  bottom: 0.5rem;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
}

.select-dropdown {
  width: 100%;
  margin-bottom: 1rem;
}

.input-group,
.input {
  position: relative;
  width: 100%;
  margin-bottom: 1rem;
}
.input-group label,
.input label {
  display: block;
  padding: 0 0.25rem;
  position: absolute;
  left: 0.825rem;
  top: 50%;
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-placeholders);
  transform: translate(0, -50%);
  cursor: text;
  pointer-events: none;
  white-space: nowrap;
}
.input-group.with-arrow::after,
.input.with-arrow::after {
  content: "";
  position: absolute;
  height: 0.75rem;
  width: 0.75rem;
  border-left: 1px var(--color-text-secondary) solid;
  border-bottom: 1px var(--color-text-secondary) solid;
  transform: rotate(-45deg);
  right: 2rem;
  top: 1rem;
}
.input-group:not(.as-text).touched label, .input-group:not(.as-text).success label,
.input-group:not(.as-text) .form-control:focus + label,
.input-group:not(.as-text) .form-control.focus + label,
.input:not(.as-text).touched label,
.input:not(.as-text).success label,
.input:not(.as-text) .form-control:focus + label,
.input:not(.as-text) .form-control.focus + label {
  opacity: 0;
}
.input-group.touched label,
.input.touched label {
  color: var(--color-text-secondary);
}
.input-group.success label,
.input.success label {
  color: var(--color-text-green) !important;
}
.input-group[dir=rtl] input,
.input[dir=rtl] input {
  text-align: right;
}
.input-group[dir=rtl] label,
.input[dir=rtl] label {
  left: auto;
  right: 0.75rem;
}
.input-group[dir=rtl].with-arrow::after,
.input[dir=rtl].with-arrow::after {
  border-left: none;
  border-right: 1px var(--color-text-secondary) solid;
  right: auto;
  left: 2rem;
}
.input-group[dir=rtl].touched label, .input-group[dir=rtl].error label, .input-group[dir=rtl].success label,
.input-group[dir=rtl] .form-control:focus + label,
.input-group[dir=rtl] .form-control.focus + label,
.input[dir=rtl].touched label,
.input[dir=rtl].error label,
.input[dir=rtl].success label,
.input[dir=rtl] .form-control:focus + label,
.input[dir=rtl] .form-control.focus + label {
  transform: scale(0.75) translate(1.5rem, -2.25rem);
}
.input-group .input-notification,
.input .input-notification {
  font-size: 0.875rem;
  margin-top: 0.5rem;
  margin-bottom: 0;
  text-align: left;
  line-height: 1.2;
  color: var(--color-text-secondary);
}
.input-group .input-notification--error,
.input .input-notification--error {
  letter-spacing: 0.25px;
  color: var(--color-error);
}
.input-group + .note,
.input + .note {
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin: 1.5rem 0.25rem;
  margin-top: -0.5625rem;
  color: var(--color-text-secondary);
}
.input-group.as-text .form-control,
.input.as-text .form-control {
  border: none;
  padding: 0;
  height: auto;
  border-radius: 0;
}
.input-group.as-text .input-notification--error,
.input.as-text .input-notification--error {
  position: absolute;
}
.input-group.as-text label,
.input-group.as-text .input-notification--error,
.input.as-text label,
.input.as-text .input-notification--error {
  font-size: 0.875rem;
  left: 0;
  top: 1.125rem;
  transform: none;
}
.input-group.as-text.success label, .input-group.as-text.error label,
.input.as-text.success label,
.input.as-text.error label {
  opacity: 1;
}
.input-group.has-prefix:not(.prefix-inside) .input-wrapper,
.input.has-prefix:not(.prefix-inside) .input-wrapper {
  display: flex;
}
.input-group.has-prefix:not(.prefix-inside) .form-control,
.input.has-prefix:not(.prefix-inside) .form-control {
  display: inline-block;
  width: auto;
}
.input-group.prefix-inside .form-control,
.input.prefix-inside .form-control {
  padding-left: 3rem;
}
.input-group.prefix-inside label,
.input.prefix-inside label {
  left: 2.75rem;
}
.input-group.prefix-inside .prefix,
.input.prefix-inside .prefix {
  display: inline-flex;
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translate(0, -50%);
}
.input-group.underline .form-control,
.input.underline .form-control {
  border-width: 0 0 1px;
  border-color: var(--color-gray);
  border-radius: 0;
  height: auto;
  padding-bottom: 0.375rem;
  padding-top: 0.375rem;
}
.input-group.underline .form-control.as-disabled,
.input.underline .form-control.as-disabled {
  background: transparent;
  border-color: var(--color-gray);
}
.input-group.underline .form-control + label,
.input.underline .form-control + label {
  left: 0;
  top: 0.3125rem;
}
.input-group.no-border .form-control,
.input.no-border .form-control {
  border-width: 0;
  border-radius: 0;
  height: auto;
  padding-bottom: 0.375rem;
  padding-top: 0.375rem;
  padding-left: 0;
}
.input-group.no-border .form-control + label,
.input.no-border .form-control + label {
  left: 0;
  top: 0.3125rem;
}

.sublabel {
  margin-bottom: 0.25rem;
  font-size: 0.6875rem;
}
.sublabel.required::after {
  content: "*";
  color: var(--color-error);
}

.form-control {
  --border-width: 1px;
  display: block;
  width: 100%;
  height: 3.375rem;
  padding: calc(0.75rem - var(--border-width)) calc(1.25rem - var(--border-width));
  border: var(--border-width) solid var(--color-borders-input);
  border-radius: var(--border-radius-default);
  color: var(--color-text);
  background-color: var(--color-background);
  outline: none;
  transition: border-color 0.15s ease;
  word-break: break-word;
  font-size: 1rem;
  line-height: 1.2rem;
}
.form-control[dir] {
  text-align: initial;
}
.form-control:hover {
  border-color: var(--color-primary);
}
.form-control:focus, .form-control.focus {
  border-color: var(--color-primary);
  caret-color: var(--color-primary);
}
.form-control:focus ~ .right button, .form-control.focus ~ .right button {
  background-color: var(--color-background);
}
.form-control::placeholder {
  color: var(--color-placeholders);
}
.form-control:disabled {
  background: #eeeeef;
  border-color: #eeeeef;
}
.form-control.as-disabled:not(:focus) {
  background: #eeeeef;
  border-color: #eeeeef;
}
.error .form-control {
  border-color: var(--color-error);
  caret-color: var(--color-error);
}
.success:not(.as-text) .form-control {
  border-color: var(--color-text-green);
  box-shadow: inset 0 0 0 1px var(--color-text-green);
  caret-color: var(--color-text-green);
}
.form-control:-webkit-autofill {
  box-shadow: inset 0 0 0 10rem var(--color-background);
  -webkit-text-fill-color: var(--color-text);
}
.form-control:autofill, .form-control:-webkit-autofill-strong-password, .form-control:-webkit-autofill-strong-password-viewable, .form-control:-webkit-autofill-and-obscured {
  box-shadow: inset 0 0 0 10rem var(--color-background);
  -webkit-text-fill-color: var(--color-text);
}
.form-control::-webkit-strong-password-auto-fill-button {
  opacity: 0;
  width: 0 !important;
  overflow: hidden !important;
  max-width: 0 !important;
  min-width: 0 !important;
  clip: rect(0, 0, 0, 0);
  position: absolute;
}
.form-control::-ms-clear, .form-control::-ms-reveal {
  display: none;
}
.form-control.smaller {
  height: 3rem;
}
@media (max-height: 520px) {
  .form-control {
    height: 3rem;
  }
}

select.form-control option {
  line-height: 2rem;
}

textarea.form-control {
  resize: none;
  overflow: auto;
  height: auto;
  min-height: 54px;
  line-height: 1.3125rem;
  padding-top: calc(1rem - var(--border-width));
  padding-bottom: calc(1rem - var(--border-width));
}

.input-group.password-input {
  position: relative;
}
.input-group.password-input .form-control {
  padding-right: 3.375rem;
}
.input-group.password-input .toggle-password {
  position: absolute;
  top: 0;
  right: 0;
  width: 3.375rem;
  height: 3.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none !important;
  color: var(--color-text-secondary);
  opacity: 0.7;
  font-size: 1.5rem;
}
.input-group.password-input .toggle-password:hover, .input-group.password-input .toggle-password:focus {
  opacity: 1;
}
.input-group.password-input[dir=rtl] .form-control {
  padding-left: 3.375rem;
  padding-right: calc(0.9rem - var(--border-width));
}
.input-group.password-input[dir=rtl] .toggle-password {
  left: 0;
  right: auto;
}

.input-icon {
  position: absolute;
  top: 0;
  padding: 0 1.125rem;
  height: 100%;
  display: flex;
  align-items: center;
}
.input-icon > * {
  display: inline-flex;
}
.input-icon.right {
  margin-left: 0.8rem;
  right: 0;
}
.input-icon.left {
  left: 0;
}
.input-icon.left path:not([fill]) {
  stroke: var(--color-text-secondary);
}
.input-icon.left path:not([stroke]) {
  fill: var(--color-text-secondary);
}
.input-icon.left + .form-control {
  padding-left: 3rem;
}
.input-icon.left + .form-control + label {
  padding-left: 3rem;
}

.input-wrapper {
  position: relative;
}

form p {
  font-size: 0.875rem;
  text-align: left;
}

.auth-password-center {
  display: flex;
  align-items: center;
}

.password-mask {
  -webkit-text-security: disc;
  -moz-webkit-text-security: disc;
  -moz-text-security: disc;
}

.auth-password-form .input {
  margin-bottom: 1rem;
}

.confirm-dialog-input .form-control {
  height: 3.125rem;
}

.form-submit {
  display: flex;
  flex-direction: column;
}

@font-face {
  font-family: "icomoon";
  src: url(/icomoon.c1278356e711ddb41f30.woff2) format("woff2"), url(/icomoon.b30301a4f0706dd8d7d9.woff) format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^=icon-],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
  font-family: "icomoon" !important;
  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;
}

[class^=icon-char-]::before,
[class*=" icon-char-"]::before {
  font-family: Roboto, "Helvetica Neue", sans-serif;
  content: attr(data-char);
  width: 1.5rem;
  text-align: center;
  display: block;
}

.icon-svg {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-svg.color-text path {
  stroke: var(--color-text) !important;
}
.icon-svg.destructive path {
  stroke: var(--color-error) !important;
}

.icon-loop:before {
  content: "\e98c";
}

.icon-skip-next:before {
  content: "\e98d";
}

.icon-skip-previous:before {
  content: "\e98e";
}

.icon-volume-1:before {
  content: "\e98f";
}

.icon-volume-2:before {
  content: "\e990";
}

.icon-volume-3:before {
  content: "\e991";
}

.icon-pinned-message:before {
  content: "\e9bf";
}

.icon-archive-filled:before {
  content: "\e9ba";
}

.icon-archive-from-main:before {
  content: "\e9bb";
}

.icon-archive-to-main:before {
  content: "\e9bc";
}

.icon-collapse:before {
  content: "\e9bd";
}

.icon-expand:before {
  content: "\e9be";
}

.icon-replies:before {
  content: "\e9b9";
}

.icon-forums:before {
  content: "\e9b4";
}

.icon-hashtag:before {
  content: "\e9b1";
}

.icon-reopen-topic:before {
  content: "\e9b2";
}

.icon-close-topic:before {
  content: "\e9b3";
}

.icon-open-in-new-tab:before {
  content: "\e9af";
}

.icon-pip:before {
  content: "\e9ae";
}

.icon-gift:before {
  content: "\e9ad";
}

.icon-sort:before {
  content: "\e9ac";
}

.icon-web:before {
  content: "\e9ab";
}

.icon-transcribe:before {
  content: "\e9aa";
}

.icon-add-one-badge:before {
  content: "\e99b";
}

.icon-chat-badge:before {
  content: "\e9a0";
}

.icon-chats-badge:before {
  content: "\e9a1";
}

.icon-double-badge:before {
  content: "\e9a2";
}

.icon-file-badge:before {
  content: "\e9a3";
}

.icon-folder-badge:before {
  content: "\e9a4";
}

.icon-link-badge:before {
  content: "\e9a5";
}

.icon-pin-badge:before {
  content: "\e9a6";
}

.icon-premium:before {
  content: "\e9a7";
}

.icon-unlock-badge:before {
  content: "\e9a8";
}

.icon-lock-badge:before {
  content: "\e9a9";
}

.icon-key:before {
  content: "\e99a";
}

.icon-heart-outline:before {
  content: "\e99e";
}

.icon-heart:before {
  content: "\e99f";
}

.icon-word-wrap:before {
  content: "\e99d";
}

.icon-webapp:before {
  content: "\e993";
}

.icon-reload:before {
  content: "\e994";
}

.icon-install:before {
  content: "\e999";
}

.icon-favorite-filled:before {
  content: "\e998";
}

.icon-share-screen:before {
  content: "\e97a";
}

.icon-video-outlined:before {
  content: "\e997";
}

.icon-stats:before {
  content: "\e996";
}

.icon-copy-media:before {
  content: "\e995";
}

.icon-sidebar:before {
  content: "\e992";
}

.icon-video-stop:before {
  content: "\e98b";
}

.icon-speaker:before {
  content: "\e981";
}

.icon-speaker-outline:before {
  content: "\e982";
}

.icon-phone-discard-outline:before {
  content: "\e983";
}

.icon-allow-speak:before {
  content: "\e984";
}

.icon-stop-raising-hand:before {
  content: "\e985";
}

.icon-share-screen-outlined:before {
  content: "\e986";
}

.icon-voice-chat:before {
  content: "\e987";
}

.icon-video:before {
  content: "\e988";
}

.icon-noise-suppression:before {
  content: "\e989";
}

.icon-phone-discard:before {
  content: "\e98a";
}

.icon-bot-commands-filled:before {
  content: "\e97f";
}

.icon-reply-filled:before {
  content: "\e980";
}

.icon-bug:before {
  content: "\e97e";
}

.icon-data:before {
  content: "\e97d";
}

.icon-darkmode:before {
  content: "\e979";
}

.icon-animations:before {
  content: "\e99c";
}

.icon-enter:before {
  content: "\e97b";
}

.icon-fontsize:before {
  content: "\e97c";
}

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

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

.icon-truck:before {
  content: "\e978";
}

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

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

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

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

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

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

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

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

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

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

.icon-link-broken:before {
  content: "\e9b0";
}

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

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

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

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

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

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

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

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

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

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

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

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

.icon-spoiler-disable:before {
  content: "\e9b5";
}

.icon-grouped:before {
  content: "\e9b6";
}

.icon-grouped-disable:before {
  content: "\e9b7";
}

.icon-spoiler:before {
  content: "\e9b8";
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.icon-new-chat-filled:before {
  content: "\e939";
}

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

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

.icon-add-user-filled:before {
  content: "\e904";
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.icon-stop:before {
  content: "\e952";
}

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

.icon-unarchive:before {
  content: "\e953";
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.icon-avatar-archived-chats:before {
  content: "\e90a";
}

.icon-avatar-deleted-account:before {
  content: "\e90b";
}

.icon-avatar-saved-messages:before {
  content: "\e90c";
}

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

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
body .preloader::after {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99998;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #5999f7;
}
body .preloader::before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAyIiBoZWlnaHQ9IjIwNCIgdmlld0JveD0iMCAwIDIwMiAyMDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF8xMDYwXzE1MjcpIj4KPG1hc2sgaWQ9InBhdGgtMS1pbnNpZGUtMV8xMDYwXzE1MjciIGZpbGw9IndoaXRlIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjU5Mzk5NCAyMDMuMjQ2VjEwMS43NzlDMC41OTM5OTQgNDUuNzQwOCA0NS42MDA2IDAuMzEyNSAxMDEuMTE5IDAuMzEyNUMxNTYuNjM4IDAuMzEyNSAyMDEuNjQ0IDQ1Ljc0MDggMjAxLjY0NCAxMDEuNzc5QzIwMS42NDQgMTU3LjgxOCAxNTYuNjM4IDIwMy4yNDYgMTAxLjExOSAyMDMuMjQ2SDAuNTkzOTk0Wk0zNy43NjIgNTQuMjI3VjE2NS42MTRIMTQ1LjEyOVYxNDIuOEg2NS41OThWMTE4LjY0NEgxMDAuMDYyVjk4LjUxMzZINjUuNTk4VjcwLjMzMTJDNjUuNTk4IDU4LjUyMTUgNTQuMTEwMSA1NC42NzQ0IDQ4LjM2NjIgNTQuMjI3SDM3Ljc2MlpNODguMTMxOSA1NC4yMjdIMTQzLjgwNFY3MC4zMzEyQzE0My44MDQgNzcuODQ2NSAxMzYuNzM0IDc5LjcyNTMgMTMzLjIgNzkuNzI1M0g3Ny41Mjc3VjYzLjYyMTFDNzcuNTI3NyA1Ni4xMDU4IDg0LjU5NzEgNTQuMjI3IDg4LjEzMTkgNTQuMjI3WiIvPgo8L21hc2s+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMC41OTM5OTQgMjAzLjI0NlYxMDEuNzc5QzAuNTkzOTk0IDQ1Ljc0MDggNDUuNjAwNiAwLjMxMjUgMTAxLjExOSAwLjMxMjVDMTU2LjYzOCAwLjMxMjUgMjAxLjY0NCA0NS43NDA4IDIwMS42NDQgMTAxLjc3OUMyMDEuNjQ0IDE1Ny44MTggMTU2LjYzOCAyMDMuMjQ2IDEwMS4xMTkgMjAzLjI0NkgwLjU5Mzk5NFpNMzcuNzYyIDU0LjIyN1YxNjUuNjE0SDE0NS4xMjlWMTQyLjhINjUuNTk4VjExOC42NDRIMTAwLjA2MlY5OC41MTM2SDY1LjU5OFY3MC4zMzEyQzY1LjU5OCA1OC41MjE1IDU0LjExMDEgNTQuNjc0NCA0OC4zNjYyIDU0LjIyN0gzNy43NjJaTTg4LjEzMTkgNTQuMjI3SDE0My44MDRWNzAuMzMxMkMxNDMuODA0IDc3Ljg0NjUgMTM2LjczNCA3OS43MjUzIDEzMy4yIDc5LjcyNTNINzcuNTI3N1Y2My42MjExQzc3LjUyNzcgNTYuMTA1OCA4NC41OTcxIDU0LjIyNyA4OC4xMzE5IDU0LjIyN1oiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0wLjU5Mzk5NCAyMDMuMjQ2SC03LjM3NDc2VjIxMS4yMTVIMC41OTM5OTRWMjAzLjI0NlpNMzcuNzYyIDE2NS42MTRIMjkuNzkzMlYxNzMuNTgzSDM3Ljc2MlYxNjUuNjE0Wk0zNy43NjIgNTQuMjI3VjQ2LjI1ODNIMjkuNzkzMlY1NC4yMjdIMzcuNzYyWk0xNDUuMTI5IDE2NS42MTRWMTczLjU4M0gxNTMuMDk4VjE2NS42MTRIMTQ1LjEyOVpNMTQ1LjEyOSAxNDIuOEgxNTMuMDk4VjEzNC44MzFIMTQ1LjEyOVYxNDIuOFpNNjUuNTk4IDE0Mi44SDU3LjYyOTJWMTUwLjc2OUg2NS41OThWMTQyLjhaTTY1LjU5OCAxMTguNjQ0VjExMC42NzVINTcuNjI5MlYxMTguNjQ0SDY1LjU5OFpNMTAwLjA2MiAxMTguNjQ0VjEyNi42MTNIMTA4LjAzVjExOC42NDRIMTAwLjA2MlpNMTAwLjA2MiA5OC41MTM2SDEwOC4wM1Y5MC41NDQ4SDEwMC4wNjJWOTguNTEzNlpNNjUuNTk4IDk4LjUxMzZINTcuNjI5MlYxMDYuNDgySDY1LjU5OFY5OC41MTM2Wk00OC4zNjYyIDU0LjIyN0w0OC45ODQ5IDQ2LjI4MjNMNDguNjc2IDQ2LjI1ODNINDguMzY2MlY1NC4yMjdaTTE0My44MDQgNTQuMjI3SDE1MS43NzNWNDYuMjU4M0gxNDMuODA0VjU0LjIyN1pNNzcuNTI3NyA3OS43MjUzSDY5LjU1ODlWODcuNjk0MUg3Ny41Mjc3Vjc5LjcyNTNaTS03LjM3NDc2IDEwMS43NzlWMjAzLjI0Nkg4LjU2Mjc0VjEwMS43NzlILTcuMzc0NzZaTTEwMS4xMTkgLTcuNjU2MjVDNDEuMTI5NyAtNy42NTYyNSAtNy4zNzQ3NiA0MS40MSAtNy4zNzQ3NiAxMDEuNzc5SDguNTYyNzRDOC41NjI3NCA1MC4wNzE2IDUwLjA3MTUgOC4yODEyNSAxMDEuMTE5IDguMjgxMjVWLTcuNjU2MjVaTTIwOS42MTMgMTAxLjc3OUMyMDkuNjEzIDQxLjQxIDE2MS4xMDggLTcuNjU2MjUgMTAxLjExOSAtNy42NTYyNVY4LjI4MTI1QzE1Mi4xNjcgOC4yODEyNSAxOTMuNjc1IDUwLjA3MTYgMTkzLjY3NSAxMDEuNzc5SDIwOS42MTNaTTEwMS4xMTkgMjExLjIxNUMxNjEuMTA4IDIxMS4yMTUgMjA5LjYxMyAxNjIuMTQ5IDIwOS42MTMgMTAxLjc3OUgxOTMuNjc1QzE5My42NzUgMTUzLjQ4NyAxNTIuMTY3IDE5NS4yNzcgMTAxLjExOSAxOTUuMjc3VjIxMS4yMTVaTTAuNTkzOTk0IDIxMS4yMTVIMTAxLjExOVYxOTUuMjc3SDAuNTkzOTk0VjIxMS4yMTVaTTQ1LjczMDcgMTY1LjYxNFY1NC4yMjdIMjkuNzkzMlYxNjUuNjE0SDQ1LjczMDdaTTE0NS4xMjkgMTU3LjY0NkgzNy43NjJWMTczLjU4M0gxNDUuMTI5VjE1Ny42NDZaTTEzNy4xNjEgMTQyLjhWMTY1LjYxNEgxNTMuMDk4VjE0Mi44SDEzNy4xNjFaTTY1LjU5OCAxNTAuNzY5SDE0NS4xMjlWMTM0LjgzMUg2NS41OThWMTUwLjc2OVpNNTcuNjI5MiAxMTguNjQ0VjE0Mi44SDczLjU2NjdWMTE4LjY0NEg1Ny42MjkyWk0xMDAuMDYyIDExMC42NzVINjUuNTk4VjEyNi42MTNIMTAwLjA2MlYxMTAuNjc1Wk05Mi4wOTI4IDk4LjUxMzZWMTE4LjY0NEgxMDguMDNWOTguNTEzNkg5Mi4wOTI4Wk02NS41OTggMTA2LjQ4MkgxMDAuMDYyVjkwLjU0NDhINjUuNTk4VjEwNi40ODJaTTU3LjYyOTIgNzAuMzMxMlY5OC41MTM2SDczLjU2NjdWNzAuMzMxMkg1Ny42MjkyWk00Ny43NDc0IDYyLjE3MTdDNDkuNTYwNiA2Mi4zMTI5IDUyLjQyMDMgNjMuMDU1NyA1NC41ODk2IDY0LjU2MjhDNTYuNDQ2MyA2NS44NTI2IDU3LjYyOTIgNjcuNDk5NyA1Ny42MjkyIDcwLjMzMTJINzMuNTY2N0M3My41NjY3IDYxLjM1MyA2OS4wMDU3IDU1LjE3MTcgNjMuNjgyNSA1MS40NzM3QzU4LjY3MTkgNDcuOTkyOSA1Mi45MTU2IDQ2LjU4ODUgNDguOTg0OSA0Ni4yODIzTDQ3Ljc0NzQgNjIuMTcxN1pNMzcuNzYyIDYyLjE5NThINDguMzY2MlY0Ni4yNTgzSDM3Ljc2MlY2Mi4xOTU4Wk0xNDMuODA0IDQ2LjI1ODNIODguMTMxOVY2Mi4xOTU4SDE0My44MDRWNDYuMjU4M1pNMTUxLjc3MyA3MC4zMzEyVjU0LjIyN0gxMzUuODM1VjcwLjMzMTJIMTUxLjc3M1pNMTMzLjIgODcuNjk0MUMxMzYuMDYzIDg3LjY5NDEgMTQwLjMwOCA4Ni45OTE1IDE0NC4xMTMgODQuNTY1QzE0OC4zNDYgODEuODY0NCAxNTEuNzczIDc3LjExNTggMTUxLjc3MyA3MC4zMzEySDEzNS44MzVDMTM1LjgzNSA3MC45MDczIDEzNS43MTUgNzEuMDMyNiAxMzUuNzU4IDcwLjk1OTVDMTM1Ljc4MiA3MC45MTg1IDEzNS43NjMgNzAuOTg2OSAxMzUuNTQyIDcxLjEyODFDMTM1LjI5NyA3MS4yODQ2IDEzNC45MDcgNzEuNDU5IDEzNC4zOTIgNzEuNTg5MkMxMzMuODc1IDcxLjcyMDEgMTMzLjQyOCA3MS43NTY2IDEzMy4yIDcxLjc1NjZWODcuNjk0MVpNNzcuNTI3NyA4Ny42OTQxSDEzMy4yVjcxLjc1NjZINzcuNTI3N1Y4Ny42OTQxWk02OS41NTg5IDYzLjYyMTFWNzkuNzI1M0g4NS40OTY0VjYzLjYyMTFINjkuNTU4OVpNODguMTMxOSA0Ni4yNTgzQzg1LjI2ODkgNDYuMjU4MyA4MS4wMjMzIDQ2Ljk2MDggNzcuMjE5IDQ5LjM4NzRDNzIuOTg1MSA1Mi4wODc5IDY5LjU1ODkgNTYuODM2NiA2OS41NTg5IDYzLjYyMTFIODUuNDk2NEM4NS40OTY0IDYzLjA0NTEgODUuNjE2MyA2Mi45MTk4IDg1LjU3MzggNjIuOTkyOEM4NS41NDk5IDYzLjAzMzggODUuNTY4MiA2Mi45NjU0IDg1Ljc4OTUgNjIuODI0M0M4Ni4wMzQ5IDYyLjY2NzggODYuNDI0NyA2Mi40OTMzIDg2LjkzOTEgNjIuMzYzMUM4Ny40NTYzIDYyLjIzMjIgODcuOTA0IDYyLjE5NTggODguMTMxOSA2Mi4xOTU4VjQ2LjI1ODNaIiBmaWxsPSJ3aGl0ZSIgbWFzaz0idXJsKCNwYXRoLTEtaW5zaWRlLTFfMTA2MF8xNTI3KSIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzEwNjBfMTUyNyI+CjxyZWN0IHdpZHRoPSIyMDEuMDk0IiBoZWlnaHQ9IjIwMy4yMDMiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjU5Mzc1IDAuMzEyNSkiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K);
  transition: all 0.3s ease;
}

h2 {
  font-size: 1.875rem;
  margin-bottom: 1rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1rem;
}

h5 {
  font-size: 0.9375rem;
}

.transition-block {
  transition: all 0.2s linear;
}

.fade {
  transition: opacity 0.15s linear;
}

.fade-enter .transition-block {
  opacity: 0;
}

.fade-enter-active .transition-block {
  opacity: 1;
}

.media-inner {
  position: relative;
}
.media-inner video.full-media,
.media-inner img.full-media,
.media-inner img.thumbnail,
.media-inner canvas.thumbnail {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.media-inner .full-media.with-blurred-bg {
  position: relative;
  border-radius: 0 !important;
}
.media-inner video {
  background: no-repeat 50% 50%;
  background-size: contain;
}
.media-inner .thumbnail {
  position: absolute;
  top: 0;
  left: 0;
}
.media-inner .thumbnail.with-blurred-bg {
  border-radius: 0 !important;
  left: 50%;
  transform: translateX(-50%);
}
.media-inner .media-loading {
  position: absolute;
}
.media-inner.fix-min-height {
  min-height: 5rem;
}

.animated-close-icon {
  position: absolute;
  transform: rotate(-45deg);
}
.animated-close-icon, .animated-close-icon::before, .animated-close-icon::after {
  width: 1.125rem;
  height: 1px;
  border-radius: 0.125rem;
  background-color: var(--color-text-secondary);
  transition: transform var(--slide-transition);
}
.animated-close-icon::before, .animated-close-icon::after {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
}
.animated-close-icon::before {
  transform: rotate(90deg);
}
.animated-close-icon.no-transition, .animated-close-icon.no-transition::before, .animated-close-icon.no-transition::after {
  transition: none;
}
.animated-close-icon.state-back {
  transform: rotate(180deg);
}
.animated-close-icon.state-back::before {
  transform: rotate(45deg) scaleX(0.6) translate(0.125rem, -0.375rem);
}
.animated-close-icon.state-back::after {
  transform: rotate(-45deg) scaleX(0.6) translate(0.125rem, 0.375rem);
}

.chat-list {
  background: var(--color-background);
  height: 100%;
  overflow-y: overlay;
  overflow-x: hidden;
}
.chat-list:not(.welcome) {
  padding: 0.5rem 0.4375rem 0.75rem 0.4375rem;
  padding-inline-end: calc(0.4375rem - var(--scrollbar-width));
  overflow-y: scroll;
}
.chat-list.forum-panel-open .info {
  opacity: 0;
  transform: translateX(-20%);
}
.chat-list.forum-panel-open .Chat[dir=rtl] .info {
  transform: translateX(20%);
}
.chat-list.forum-panel-open .Avatar {
  transform: scale(0.9);
}
@media (min-width: 600px) {
  .chat-list.forum-panel-open .selected-forum .Avatar {
    transform: none;
  }
}
@media (max-width: 920px) {
  .chat-list {
    padding-inline-end: 0.4375rem;
  }
}
@media (max-width: 600px) {
  .chat-list {
    padding-left: 0;
  }
  .chat-list.feed-list {
    padding: 0;
    background-color: transparent;
  }
}
.chat-list .scroll-container {
  position: relative;
}
.chat-list .no-results {
  color: var(--color-text-meta);
  margin-top: 2rem;
  text-align: center;
}
.chat-list .Avatar {
  transition: transform var(--layer-transition);
}
body.animation-level-0 .chat-list .Avatar {
  transition: none;
}
.chat-list .ListItem.chat-item-clickable {
  margin: 0;
}
body.is-ios .chat-list .ListItem::after, body.is-android .chat-list .ListItem::after {
  opacity: 1;
  transition: opacity var(--layer-transition);
}
body.is-ios .chat-list.forum-panel-open .ListItem::after, body.is-android .chat-list.forum-panel-open .ListItem::after {
  opacity: 0;
}

.Avatar:not(.no-bg).color-bg-1,
.ProfilePhoto:not(.no-bg).color-bg-1 {
  --color-user: var(--color-user-1);
}
.Avatar:not(.no-bg).color-bg-2,
.ProfilePhoto:not(.no-bg).color-bg-2 {
  --color-user: var(--color-user-2);
}
.Avatar:not(.no-bg).color-bg-4,
.ProfilePhoto:not(.no-bg).color-bg-4 {
  --color-user: var(--color-user-4);
}
.Avatar:not(.no-bg).color-bg-5,
.ProfilePhoto:not(.no-bg).color-bg-5 {
  --color-user: var(--color-user-5);
}
.Avatar:not(.no-bg).color-bg-6,
.ProfilePhoto:not(.no-bg).color-bg-6 {
  --color-user: var(--color-user-6);
}
.Avatar:not(.no-bg).color-bg-7,
.ProfilePhoto:not(.no-bg).color-bg-7 {
  --color-user: var(--color-user-7);
}
.Avatar:not(.no-bg).color-bg-8,
.ProfilePhoto:not(.no-bg).color-bg-8 {
  --color-user: var(--color-user-8);
}
.Avatar:not(.no-bg).replies-bot-account,
.ProfilePhoto:not(.no-bg).replies-bot-account {
  --color-user: #3a85f3;
}
.Avatar:not(.no-bg).saved-messages,
.ProfilePhoto:not(.no-bg).saved-messages {
  --color-user: var(--color-3);
}
.Avatar:not(.no-bg).deleted-account,
.ProfilePhoto:not(.no-bg).deleted-account {
  --color-user: var(--color-deleted-account);
}

.link {
  color: var(--color-links);
  text-decoration: none;
}

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

.d-block {
  display: block;
}

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

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

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

.flex-shrink {
  flex-shrink: 0;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.btn-group:not(.full-width) .Button {
  max-width: 143px;
}
.btn-group .Button {
  flex-shrink: 1;
  flex-grow: 1;
}
.btn-group .Button:not(:last-child) {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.btn-group .Button:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group .Button + .Button {
  border-left-width: 0;
}
.btn-group .Button.text {
  font-size: 0.875rem;
  text-wrap: nowrap;
}

.btn-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.625rem 0.5rem;
  overflow-x: hidden;
}
.filter-group .Button {
  font-size: 0.8125rem;
  color: #4d4d50;
  line-height: 1.15;
  background: var(--color-button-group);
  padding: 0.375rem 0.5rem;
  height: auto;
  border-radius: 2rem;
  transition: all 0.2s;
}
.filter-group .Button.selected {
  background: #d8e7fd;
  color: var(--color-primary);
}
.filter-group .Button .css-icon-down,
.filter-group .Button .css-icon-up {
  position: static;
  border-color: #4d4d50;
  margin-top: -0.25rem;
  margin-right: 0.125rem;
}
.filter-group .Button .css-icon-up {
  margin-top: 0.25rem;
}
@media only screen and (max-width: 1200px) {
  .filter-group {
    overflow-x: auto;
  }
}
@media (max-width: 600px) {
  .filter-group {
    padding-bottom: 0.75rem;
  }
}

.title-icon {
  display: flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: var(--color-primary);
}
.title-icon [stroke] {
  stroke: white;
}
.title-icon.color-bg-1 {
  background-color: var(--color-1);
}
.title-icon.color-bg-2 {
  background-color: var(--color-2);
}
.title-icon.color-bg-3 {
  background-color: var(--color-3);
}
.title-icon.color-bg-4 {
  background-color: var(--color-4);
}
.title-icon.color-bg-5 {
  background-color: var(--color-5);
}
.title-icon.color-bg-6 {
  background-color: var(--color-6);
}
.title-icon.color-bg-7 {
  background-color: var(--color-7);
}
.title-icon.color-bg-8 {
  background-color: var(--color-8);
}
.title-icon.color-bg-9 {
  background-color: var(--color-9);
}
.title-icon.color-bg-10 {
  background-color: var(--color-10);
}
.title-icon.color-bg-11 {
  background-color: var(--color-borders-checkbox);
}
.title-icon.color-bg-12 {
  background-color: var(--color-placeholders);
}
.title-icon.color-bg-green {
  background-color: var(--color-green);
}
.title-icon.color-bg-13 {
  background-color: #3a85f3;
}

.color-2 [stroke] {
  stroke: var(--color-2);
}

.ai-center {
  align-items: center;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-placeholder {
  color: var(--color-placeholders);
}

.word-break {
  word-break: break-word;
}

.css-icon-right {
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid var(--color-text);
  border-top: 0;
  border-left: 0;
  border-radius: 0.125rem;
  display: inline-block;
  transform: rotate(-45deg);
}

.text-small {
  font-size: small;
}

.text-smaller {
  font-size: 0.875rem;
  line-height: 1.3;
}

.text-secondary {
  color: var(--color-text-secondary);
}

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

.text-error {
  color: var(--color-error);
}
.text-error svg {
  vertical-align: middle;
  margin-inline-end: 1rem;
}
.text-error [stroke] {
  stroke: var(--color-error);
}

.text-success {
  color: var(--color-success);
}
.text-success svg {
  vertical-align: middle;
  margin-inline-end: 1rem;
}
.text-success [stroke] {
  stroke: var(--color-success);
}

.text-gray {
  color: var(--color-text-gray);
}

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

.error-line {
  background-color: var(--color-error);
  color: white;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 0.875rem;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.error-line.active {
  opacity: 1;
}

.text-bubble {
  background-color: var(--color-background);
  box-shadow: 0 1px 1px var(--color-default-shadow);
  border-radius: var(--border-radius-messages);
  position: relative;
  padding: 0.5rem 1rem;
}
.text-bubble::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -1px;
  left: -0.6875rem;
  width: 1.125rem;
  height: 2.1875rem;
  background-position: bottom left;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxOCAzNSI+PGcgZmlsdGVyPSJ1cmwoI2FwcGVuZGl4LW5vdC1vd24pIj48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im0xNyAzMC42NzUtNS45NC0xNy41NjNWMTNjMCAxNS42ODktNy42NiAxOC42NzMtMTAuMDA3IDE5LjU4N0wxIDMyLjYwOGEyOC41MzYgMjguNTM2IDAgMCAwIDE2LTEuOTMzWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9nPjxkZWZzPjxmaWx0ZXIgaWQ9ImFwcGVuZGl4LW5vdC1vd24iIHdpZHRoPSIxOCIgaGVpZ2h0PSIzNiIgeD0iMCIgeT0iMCIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiPjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+PGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9ImhhcmRBbHBoYSIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIvPjxmZU9mZnNldCBkeT0iMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249Ii41Ii8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjE1IDAiLz48ZmVCbGVuZCBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3dfMl81MzMzMSIvPjxmZUJsZW5kIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9ImVmZmVjdDFfZHJvcFNoYWRvd18yXzUzMzMxIiByZXN1bHQ9InNoYXBlIi8+PC9maWx0ZXI+PC9kZWZzPjwvc3ZnPg==);
}
.text-bubble::after {
  content: "";
  position: absolute;
  bottom: 0.25rem;
  left: 0;
  height: 1.98rem;
  width: 7px;
  background-color: var(--color-background);
}

.item-exit {
  opacity: 1;
  transform: scale(1);
}

.item-exit-active {
  opacity: 0;
  transform: scale(0);
  transition: opacity 200ms ease-in, transform 200ms ease-in;
}

.amount {
  display: flex;
  align-items: center;
  line-height: 1rem;
  gap: 0.5rem;
}
.amount .price {
  display: flex;
  gap: 0.125rem;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  background: #eeeeef;
  border-radius: var(--border-radius-messages);
}
.info-item .main-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-grow: 1;
}
.info-item .subtitle {
  display: block;
  font-size: 0.75rem;
  line-height: 1.16;
  color: var(--color-text-secondary);
}

.svg-rotate .icon-svg {
  transform: rotate(90deg);
}

.icon-svg svg {
  max-width: 100%;
  max-height: 100%;
}

.note-mark {
  width: 2.375rem;
  height: 2.375rem;
  margin: 0 auto;
  border-radius: 50%;
  background-color: #f9b3c0;
}
.note-mark::before {
  content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAxNCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggaWQ9IlVuaW9uIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTQuNjc2MTEgMy4wNDM2N0M1LjQ5MDUyIDIuNTY1MDQgNi40NDgwNCAyLjM5MDA4IDcuMzc5MDggMi41NDk3OEM4LjMxMDEyIDIuNzA5NDcgOS4xNTQ2IDMuMTkzNTMgOS43NjI5NCAzLjkxNjJDMTAuMzcxMyA0LjYzODg3IDEwLjcwNDIgNS41NTM1MiAxMC43MDI4IDYuNDk4MTZMMTAuNzAyOCA2LjUwMDAyQzEwLjcwMjggNy41ODY0NCA5Ljg3MTQ3IDguNTcyNzkgOC42MzQ0NyA5LjM5NzQ2QzguMDU0IDkuNzg0NDMgNy40NjQ2NSAxMC4wOCA3LjAxNTQ4IDEwLjI3OTZDNi43OTI2NyAxMC4zNzg3IDYuNjA4NzQgMTAuNDUyMSA2LjQ4MzQzIDEwLjQ5OTlDNi40MjA4OCAxMC41MjM3IDYuMzczMjUgMTAuNTQxIDYuMzQzMDQgMTAuNTUxN0w2LjMxMTIgMTAuNTYyOUw2LjMwNzU2IDEwLjU2NDJMNi4zMDYzMSAxMC41NjQ2QzUuNjUyMTggMTAuNzgzNCA1LjI5ODgxIDExLjQ5MDggNS41MTY5OSAxMi4xNDUzQzUuNzM1MyAxMi44MDAyIDYuNDQzMiAxMy4xNTQyIDcuMDk4MTIgMTIuOTM1OUw2LjcwMjg0IDExLjc1QzcuMDk4MTIgMTIuOTM1OSA3LjA5OTM3IDEyLjkzNTUgNy4wOTk3NiAxMi45MzUzTDcuMTAxODggMTIuOTM0Nkw3LjEwNzU2IDEyLjkzMjdMNy4xMjQ2MSAxMi45MjY5QzcuMTM4NDUgMTIuOTIyMSA3LjE1NzIxIDEyLjkxNTYgNy4xODA1NiAxMi45MDczQzcuMjI3MjUgMTIuODkwNyA3LjI5MjQxIDEyLjg2NyA3LjM3MzQyIDEyLjgzNjFDNy41MzUyMiAxMi43NzQ1IDcuNzYxNDUgMTIuNjgzOSA4LjAzMDgzIDEyLjU2NDJDOC41NjYwMyAxMi4zMjYzIDkuMjg5MTggMTEuOTY1NiAxMC4wMjEyIDExLjQ3NzZDMTEuNDA5MSAxMC41NTIzIDEzLjIwMjYgOC45MTM4MyAxMy4yMDI4IDYuNTAwNTNMMTMuMjAyOCA2LjUwMTg4TDExLjk1MyA2LjUwMDAyTDEzLjIwMjggNi41MDA1M0MxMy4yMDQ4IDQuOTY1OTcgMTIuNjYzOCAzLjQ4MDE5IDExLjY3NTUgMi4zMDYyQzEwLjY4NjkgMS4xMzE4NSA5LjMxNDY2IDAuMzQ1MjcxIDcuODAxNzIgMC4wODU3NjFDNi4yODg3OCAtMC4xNzM3NDkgNC43MzI4MSAwLjExMDU2MyAzLjQwOTQxIDAuODg4MzRDMi4wODYgMS42NjYxMiAxLjA4MDU2IDIuODg3MTcgMC41NzExNzMgNC4zMzUyMkMwLjM0MjA4MiA0Ljk4NjQ1IDAuNjg0MyA1LjcwMDEgMS4zMzU1NCA1LjkyOTE5QzEuOTg2NzcgNi4xNTgyOCAyLjcwMDQyIDUuODE2MDYgMi45Mjk1MSA1LjE2NDgzQzMuMjQyOTggNC4yNzM3MiAzLjg2MTcxIDMuNTIyMyA0LjY3NjExIDMuMDQzNjdaTTYuODQyNjUgMTcuMjQ5OUM2LjAxNDIyIDE3LjI0OTkgNS4zNDI2NSAxNy45MjE1IDUuMzQyNjUgMTguNzQ5OUM1LjM0MjY1IDE5LjU3ODMgNi4wMTQyMiAyMC4yNDk5IDYuODQyNjUgMjAuMjQ5OUg2Ljg2MDE1QzcuNjg4NTggMjAuMjQ5OSA4LjM2MDE1IDE5LjU3ODMgOC4zNjAxNSAxOC43NDk5QzguMzYwMTUgMTcuOTIxNSA3LjY4ODU4IDE3LjI0OTkgNi44NjAxNSAxNy4yNDk5SDYuODQyNjVaIiBmaWxsPSIjRUY0MDYyIi8+Cjwvc3ZnPgo=);
  display: inline-block;
  margin-top: 9px;
}

.pair-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 1.375rem;
}
.pair-icon .icon-svg {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-size: cover;
}
.pair-icon .icon-svg:not(.main) {
  margin-right: -1rem;
  box-shadow: 0 0 0 3px white;
}
.pair-icon .icon-svg:not(.main):nth-child(1) {
  z-index: 4;
}
.pair-icon .icon-svg:not(.main):nth-child(2) {
  z-index: 3;
}
.pair-icon .main {
  background: var(--color-primary);
}
.pair-icon .Avatar:not(.main) {
  margin-right: -1rem;
  box-shadow: 0 0 0 3px white;
  z-index: 2;
}
@media only screen and (max-width: 480px) {
  .pair-icon {
    margin-bottom: 1rem;
  }
  .pair-icon .icon-svg {
    width: 70px;
    height: 70px;
  }
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.comingSoon-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 0 0.5rem 1.5rem;
  background: url(/work-is-currently.58fcbb560a8edaa1ed50.jpg) no-repeat bottom;
  overflow-y: auto;
  background-size: cover;
}
.comingSoon-main h1 {
  font-size: 3.5rem;
  font-family: "Poppins", sans-serif;
  text-align: center;
  font-weight: 700;
  line-height: 1.4;
}
.comingSoon-main .heading {
  font-size: 1.125rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-primary);
  font-family: "Public Sans", sans-serif;
}
.comingSoon-main p {
  font-size: 1.5rem;
}
.comingSoon-main .buttons-row {
  justify-content: center;
}
.comingSoon-main .buttons-row .Button {
  background-color: var(--color-text-secondary);
  width: auto;
  min-width: 15rem;
  height: 3.75rem;
}
@media (max-width: 992px) {
  .comingSoon-main h1 {
    font-size: 4rem;
  }
}
@media (max-width: 768px) {
  .comingSoon-main h1 {
    font-size: 3rem;
  }
}

.collapsed-block {
  height: 3rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.collapsed-block.show {
  height: 100%;
}

.more-button {
  color: var(--color-primary);
  font-size: 0.75rem;
}

@media (max-width: 992px) {
  .grecaptcha-badge {
    display: none !important;
  }
}
.welcome-swiper {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2rem 0.75rem 0;
}
.welcome-swiper .swiper-wrapper {
  height: auto;
}
.welcome-swiper .description {
  color: var(--color-text-gray);
  text-align: center;
  line-height: 1.2;
}
.welcome-swiper .link-item-wrap {
  width: 100%;
  background-color: var(--color-button-group);
  border-radius: 0.75rem;
}
.welcome-swiper .link-item {
  display: flex;
  align-items: center;
  height: 3.125rem;
  padding: 0 0.5rem;
}
.welcome-swiper .link-item:not(:last-child) {
  border-bottom: 1px solid #cfcfd2;
}
.welcome-swiper .invite-link {
  flex-grow: 1;
  padding: 0 1rem;
}
.welcome-swiper .invite-link .title {
  font-weight: 500;
}
.welcome-swiper .link-description {
  color: var(--color-text-gray);
  text-align: center;
  line-height: 1.19;
}
.welcome-swiper .private-invite-wrap {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem 0;
  border-radius: 1rem;
  background-color: var(--color-button-group);
}
.welcome-swiper .private-invite-wrap .Button {
  box-shadow: 0 0 0 8px #fff;
  transform: translate(0px, 2rem);
}
.welcome-swiper .private-invite-wrap .Button.round {
  width: 3.75rem;
  height: 3.75rem;
}
.welcome-swiper h4 {
  font-size: 1.125rem;
}
.welcome-swiper h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  line-height: 1.2;
  letter-spacing: 0.15px;
  text-align: center;
  min-height: 4.5rem;
}
.welcome-swiper .divider {
  width: 100%;
  margin-top: 2.625rem;
}
.welcome-swiper .divider:before {
  margin-right: 0;
  margin-left: 1.5rem;
  border-bottom: 2px solid var(--color-borders);
}
.welcome-swiper .divider:after {
  margin-left: 0;
  margin-right: 1.5rem;
  border-bottom: 2px solid var(--color-borders);
}
.welcome-swiper .swiper {
  width: 100%;
}
.welcome-swiper .swiper:hover .swiper-button-next,
.welcome-swiper .swiper:hover .swiper-button-prev {
  opacity: 1;
}
.welcome-swiper .item-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.welcome-swiper .swiper-slide {
  width: 90%;
}
.welcome-swiper .item-bg {
  position: relative;
  width: 100%;
  padding-top: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0.25rem;
  overflow: hidden;
  cursor: pointer;
}
.welcome-swiper .item-bg.ai-space {
  background-image: url(/ai-space.95ba610cdd85954beab2.jpg);
}
.welcome-swiper .item-bg.secure {
  background-image: url(/secure.298179303ec23647e165.jpg);
}
.welcome-swiper .item-bg.channel {
  background-image: url(/channel.4136d935fda9982d9139.jpg);
}
.welcome-swiper .item-bg.course {
  background-image: url(/course.1d8790bd222ad9369023.jpg);
}
.welcome-swiper .item-bg.group {
  background-image: url(/group.26aff6874bf9279489df.jpg);
}
.welcome-swiper .item-bg.help {
  background-image: url(/help.0d021b4e7e89d263bca2.jpg);
}
.welcome-swiper .item-bg.social {
  background-image: url(/social.0ee28971a098e655becf.jpg);
}
.welcome-swiper .item-bg.tik-tok {
  background-image: url(/tik-tok.70df26e6bb0c6ca4b03e.jpg);
}
.welcome-swiper .item-bg.channels-future {
  background-image: url(/channels-future.6574b8500902dfa84b58.jpg);
}
.welcome-swiper .item-bg.connecting {
  background-image: url(/connecting.a778e27c4763c087b151.jpg);
}
.welcome-swiper .title span {
  color: white;
  font-size: 1.25rem;
  letter-spacing: 0.15px;
  font-weight: 500;
  line-height: 1.2;
}
.welcome-swiper .title .Button {
  font-size: 0.8125rem;
  height: 1.625rem;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 0.5rem;
}
.welcome-swiper .title .Button:not(.disabled):not(:disabled):active, .welcome-swiper .title .Button:not(.disabled):not(:disabled).active {
  background-color: rgba(255, 255, 255, 0.35);
}
@media (hover: hover) {
  .welcome-swiper .title .Button:not(.disabled):not(:disabled):hover {
    background-color: rgba(255, 255, 255, 0.35);
  }
}
.welcome-swiper .description {
  color: #484848;
  padding: 0.75rem;
  overflow-x: hidden;
  overflow-y: auto;
  line-height: 1.2;
}
.welcome-swiper .description ul {
  padding-left: 1.175rem;
  margin-bottom: 0;
}
.welcome-swiper .swiper-button-next,
.welcome-swiper .swiper-button-prev {
  opacity: 0;
  top: calc(clamp(var(--left-column-min-width), var(--left-column-width), var(--left-column-max-width)) * 0.65);
  width: 3.125rem;
  height: 3.125rem;
  background: white;
  border-radius: 50%;
  transition: var(--slide-transition);
}
.welcome-swiper .swiper-button-next::after,
.welcome-swiper .swiper-button-prev::after {
  content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyMiAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkJhY2sgMiI+CjxwYXRoIGlkPSJWZWN0b3IiIGQ9Ik0xOS4yNSAxMS4wMDAxTDIuNzUgMTEuMDAwMU0yLjc1IDExLjAwMDFMOS42MzIzNSAxNy40MTY3TTIuNzUgMTEuMDAwMUw5LjYzMjM1IDQuNTgzNDEiIHN0cm9rZT0iIzA3MDcwOCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+Cjwvc3ZnPgo=);
  font-size: 1.875rem;
}
@media (max-width: 1260px) {
  .welcome-swiper .swiper-button-next,
  .welcome-swiper .swiper-button-prev {
    display: none;
  }
}
.welcome-swiper .swiper-button-prev {
  left: 0.5rem;
}
.welcome-swiper .swiper-button-next {
  right: 0.5rem;
}
.welcome-swiper .swiper-button-next::after {
  transform: rotate(180deg);
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #aaa;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #ccc;
}

.divider::before {
  margin-right: 1.5em;
}

.divider::after {
  margin-left: 1.5em;
}

.clean-input {
  -webkit-autofill: none;
}
.clean-input::-webkit-contacts-auto-fill-button, .clean-input::-webkit-credentials-auto-fill-button, .clean-input::-webkit-autofill-button, .clean-input::-webkit-clear-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  height: 0;
  width: 0;
  margin: 0;
}

@media print {
  body,
  html,
  .messages-layout {
    background: #fff;
  }
  #LeftColumn,
  #RightColumn-wrapper,
  .ChatOrUserPicker,
  #Notifications,
  .Modal,
  .ActiveCallHeader,
  .unread-count,
  #middle-column-portals,
  .header-tools,
  .ScrollDownButton,
  .middle-column-footer {
    display: none !important;
  }
  #MiddleColumn {
    border-left: none !important;
  }
  html,
  body,
  #root,
  #UiLoader,
  #Main,
  #MiddleColumn,
  .MessageList,
  .messages-layout,
  .Transition,
  .Transition > * {
    height: auto !important;
    overflow: visible !important;
    display: block !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }
  .messages-container {
    max-width: 100rem !important;
    width: 100% !important;
  }
  .MessageList .sticky-date > span,
  .MessageList .local-action-message > span,
  .MessageList .ActionMessage > span,
  .MessageList .empty > span {
    background: var(--color-background-own) !important;
    color: var(--color-text) !important;
  }
}
html,
body {
  width: 100%;
  height: 100vh;
  font-family: var(--font-family);
  margin: 0;
  padding: 0;
  font-size: 16px;
  color: var(--color-text);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --font-family: "Roboto", -apple-system, BlinkMacSystemFont,
    "Apple Color Emoji", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
  --font-family-monospace: "Cascadia Mono", "Roboto Mono", "Droid Sans Mono",
    "SF Mono", "Menlo", "Ubuntu Mono", "Consolas", monospace;
}
@media (max-width: 600px) {
  html,
  body {
    height: calc(var(--vh, 1vh) * 100);
  }
}

noscript {
  width: 100%;
  height: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
}
noscript .nojs-video {
  pointer-events: none;
}
noscript .nojs-video::-webkit-media-controls {
  display: none;
}

body.is-ios,
body.is-macos {
  --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Roboto",
    "Apple Color Emoji", "Helvetica Neue", sans-serif;
}

html[lang=fa],
html[lang=fa] body {
  --font-family: "Vazirmatn", "Roboto", -apple-system, BlinkMacSystemFont,
    "Apple Color Emoji", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
}
html[lang=fa].is-ios, html[lang=fa].is-macos,
html[lang=fa] body.is-ios,
html[lang=fa] body.is-macos {
  --font-family: "Vazirmatn", -apple-system, BlinkMacSystemFont, "Roboto",
    "Apple Color Emoji", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
}

body.is-ios {
  --border-radius-messages: 1rem;
  --border-radius-messages-small: 0.5rem;
}

body.cursor-grabbing,
body.cursor-grabbing * {
  cursor: grabbing !important;
}

body.cursor-ew-resize {
  cursor: ew-resize !important;
}

#root,
.full-height {
  height: 100%;
}
@media (max-width: 600px) {
  #root,
  .full-height {
    height: calc(var(--vh, 1vh) * 100);
  }
}
#root.is-auth,
.full-height.is-auth {
  background: var(--color-background);
}

#middle-column-portals,
#portals {
  position: absolute;
  inset: 0;
}

.hidden {
  visibility: hidden;
}

.no-selection {
  user-select: none;
  -webkit-user-select: none !important;
}

.resize-handle {
  display: none;
  position: absolute;
  top: 0;
  right: -0.25rem;
  bottom: 0;
  width: 0.25rem;
  z-index: var(--z-resize-handle);
  cursor: ew-resize;
}
@media (min-width: 926px) {
  .resize-handle {
    display: block;
  }
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/*
 See the article for more information on this visually-hidden pattern.
 https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.visually-hidden {
  position: absolute !important;
  width: 0;
  height: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  z-index: -1;
}

.not-implemented {
  opacity: 0.5;
}
.not-implemented, .not-implemented * {
  cursor: not-allowed !important;
}

* {
  box-sizing: border-box;
}

.no-animations #root *,
.no-animations #root *::before,
.no-animations #root *::after {
  transition: none !important;
}

.custom-scroll,
.custom-scroll-x {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.3s ease;
  pointer-events: auto;
}
.custom-scroll::-webkit-scrollbar,
.custom-scroll-x::-webkit-scrollbar {
  background-color: transparent;
  width: 8px;
}
.custom-scroll::-webkit-scrollbar-thumb,
.custom-scroll-x::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 0.375rem;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.01);
}
.custom-scroll:hover, .custom-scroll:focus, .custom-scroll:focus-within, .custom-scroll.visible-scroll,
.custom-scroll-x:hover,
.custom-scroll-x:focus,
.custom-scroll-x:focus-within,
.custom-scroll-x.visible-scroll {
  scrollbar-color: var(--color-scrollbar) transparent;
}
.custom-scroll:hover::-webkit-scrollbar-thumb, .custom-scroll:focus::-webkit-scrollbar-thumb, .custom-scroll:focus-within::-webkit-scrollbar-thumb, .custom-scroll.visible-scroll::-webkit-scrollbar-thumb,
.custom-scroll-x:hover::-webkit-scrollbar-thumb,
.custom-scroll-x:focus::-webkit-scrollbar-thumb,
.custom-scroll-x:focus-within::-webkit-scrollbar-thumb,
.custom-scroll-x.visible-scroll::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar);
}

body:not(.is-ios) .custom-scroll::-webkit-scrollbar {
  width: 0.375rem;
}
body:not(.is-ios) .custom-scroll-x::-webkit-scrollbar {
  height: 0.375rem;
}

.no-scrollbar {
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.emoji-small {
  background: no-repeat;
  background-size: 1.25rem;
  color: transparent;
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  margin-inline-end: 1px;
  overflow: hidden;
  flex-shrink: 0;
}
.emoji-small::selection {
  background-color: var(--color-selection-highlight-emoji);
  color: transparent;
}

[role=button] {
  outline: none !important;
  cursor: pointer;
}

.zoom-in {
  transform: scale(0.85);
}

.opacity-transition {
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
}
.opacity-transition.open {
  opacity: 1;
  transition: all 0.2s ease-in;
}
.opacity-transition.open.zoom-in {
  transform: scale(1);
}
.opacity-transition:not(.shown) {
  display: none;
}
.opacity-transition:not(.shown).accordion-collapse {
  display: block;
  height: 0;
  visibility: hidden;
}
.opacity-transition.slow {
  transition-duration: 0.3s;
}

.width-in {
  max-width: 0;
}
.width-in.open {
  max-width: 100%;
}

.zoom-in-enter {
  opacity: 0;
  transform: scale(0);
}

.zoom-in-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.15s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.zoom-in-exit {
  opacity: 1;
  transform: scale(1);
}

.zoom-in-exit-active {
  opacity: 0;
  transform: scale(0);
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.color-primary {
  color: var(--color-primary) !important;
}

.color-danger {
  color: var(--color-error) !important;
}

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

.protector {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  -webkit-user-select: none;
          user-select: none;
  -webkit-touch-callout: none;
}

.for-ios-autocapitalization-fix {
  position: fixed;
  font-size: 16px;
  opacity: 0;
  bottom: 1rem;
  z-index: -1;
}

.emoji-test-element {
  opacity: 0;
  display: inline;
  white-space: nowrap;
  position: absolute;
  bottom: 0;
  left: 0;
}

.shared-canvas-container {
  position: relative;
}

.shared-canvas,
.absolute-video-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@keyframes grow-icon {
  0% {
    transform: scale(0.5);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
@keyframes hide-icon {
  from {
    transform: scale(1);
    opacity: 0.4;
  }
  to {
    transform: scale(0.5);
    opacity: 0;
  }
}

/*# sourceMappingURL=main.775d0527d6edd3fd3e78.css.map*/