.h_qmZuKBrM7SWOEcmH68 {
    color: inherit
}

.h_qmZuKBrM7SWOEcmH68:hover {
    color: inherit
}

.h_qmZuKBrM7SWOEcmH68:hover.GroupCallLink {
    text-decoration: none
}

.iZ_WxIDQyqM2SOYqu4Y8 {
    color: var(--color-primary)
}

.iZ_WxIDQyqM2SOYqu4Y8:hover {
    color: var(--color-primary)
}

.Spoiler--concealed {
    cursor: pointer;
    background-image: url(/static/css/spoiler-dots-black.b2dd6e4f4a5a520c4ccd.png);
    background-size: auto min(100%, 1.125rem);
    border-radius: .5rem
}

html.theme-dark .Spoiler--concealed,
html.theme-light .ListItem.selected .Spoiler--concealed,
.ActionMessage .Spoiler--concealed,
.MediaViewerFooter .Spoiler--concealed {
    background-image: url(/static/css/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: .25
    }
    75% {
        opacity: 1
    }
}

:root {
    --thumbs-background: var(--color-background)
}

.JutR25BuG9LYhLOr69Ix {
    width: 100%;
    height: 100%;
    z-index: 1
}

.JutR25BuG9LYhLOr69Ix.closing {
    transition-delay: 150ms
}

.RHoYaU19YySGCcA_Zhrs {
    background: var(--thumbs-background);
    transition-delay: 0s
}

.JdwpYPv99RP45A3pTgI6 {
    transition: none !important
}

.lLI5VQHfbz7HKFfIcAnu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.JutR25BuG9LYhLOr69Ix:not(.shown),
.lLI5VQHfbz7HKFfIcAnu:not(.shown) {
    display: block !important
}

._cPVRYXabaTi4NzwuAuv {
    display: inline-flex;
    vertical-align: text-bottom;
    width: var(--custom-emoji-size);
    height: var(--custom-emoji-size);
    position: relative
}

._cPVRYXabaTi4NzwuAuv.ATlIbx7wziKC9hp9tIjf .ZjeZqyl7YXHdvIDo1TbO,
._cPVRYXabaTi4NzwuAuv.ATlIbx7wziKC9hp9tIjf .a51PrE1gNHtEZTsTv199 {
    width: calc(100% + 1px) !important;
    height: calc(100% + 1px) !important
}

._cPVRYXabaTi4NzwuAuv.custom-color {
    --emoji-status-color: var(--color-primary)
}

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

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

._cPVRYXabaTi4NzwuAuv,
.ZjeZqyl7YXHdvIDo1TbO,
.a51PrE1gNHtEZTsTv199 {
    border-radius: 0 !important
}

.AiczWP5U5KsV643i4Fkw {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-user-select: auto !important;
    user-select: auto !important
}

.vhb5MbStCTaCURtHT0sJ {
    opacity: 0
}

.SwhO2lEtk47g68_ixpDe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease-in-out
}

.deqdY4TS7mStC8qkslV4,
.iEZTJnlmMCct8jJztTx8 {
    display: flex;
    font-size: 1.25rem;
    padding: .125rem;
    border-radius: .125rem;
    margin: .125rem;
    transition: background-color .15s ease-in-out;
    cursor: pointer
}

.deqdY4TS7mStC8qkslV4:hover,
.deqdY4TS7mStC8qkslV4.B4kEjXkw8Sse9g0Xv_OO,
.iEZTJnlmMCct8jJztTx8:hover,
.iEZTJnlmMCct8jJztTx8.B4kEjXkw8Sse9g0Xv_OO {
    background-color: var(--color-background-compact-menu-hover)
}

.d09hp4fxFTuFw1emBUDA {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: .125rem;
    background-color: var(--color-background-compact-menu);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    border-bottom-left-radius: .25rem;
    pointer-events: auto
}

.d09hp4fxFTuFw1emBUDA.We_Wcr7YvkkUM8ICjRAs {
    display: none
}

.code-block {
    white-space: pre-wrap;
    background-color: var(--color-code-bg);
    margin: 0;
    padding: .5rem;
    margin-block: .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: .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)
}

.Transition {
    position: relative
}

.Transition>* {
    width: 100%;
    height: 100%;
    animation-fill-mode: forwards !important;
    transition: background-color .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.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 .4s ease
}

.Transition.mv-slide.animating>.to>div {
    animation: mv-slide-in .4s ease
}

.Transition.mv-slide.backwards>.to>div {
    transform: translateX(-100vw)
}

.Transition.mv-slide.backwards.animating>.from>div {
    animation: mv-slide-in-backwards .4s ease
}

.Transition.mv-slide.backwards.animating>.to>div {
    animation: mv-slide-out-backwards .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 .15s ease
}

.Transition.zoom-fade.animating>.to {
    animation: fade-in-opacity .15s ease, zoom-fade-in-move .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 .1s ease, zoom-fade-in-backwards-move .15s ease
}

.Transition.zoom-fade.backwards.animating>.to {
    animation: fade-out-backwards-opacity .15s ease, zoom-fade-out-backwards-move .15s ease
}

.Transition.fade>.from {
    opacity: 1
}

.Transition.fade>.to {
    opacity: 0
}

.Transition.fade.animating>.from {
    animation: fade-out-opacity .15s ease
}

.Transition.fade.animating>.to {
    animation: fade-in-opacity .15s ease
}

.Transition.slide-layers {
    --background-color: var(--color-background);
    background: #000
}

.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: .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: rgba(0, 0, 0, 0) !important
}

.Transition.push-slide>.from .custom-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0) !important
}

.Transition.push-slide>.to {
    transform: translateX(100%)
}

.Transition.push-slide.animating>.from {
    animation: push-out .25s ease-in-out
}

.Transition.push-slide.animating>.to {
    animation: slide-in-200 .25s ease-in-out
}

.Transition.push-slide.backwards>.to {
    transform: scale(0.7)
}

.Transition.push-slide.backwards.animating>.from {
    animation: slide-in-200-backwards .25s ease-in-out
}

.Transition.push-slide.backwards.animating>.to {
    animation: push-out-backwards .25s ease-in-out
}

.Transition.reveal>.to {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0)
}

.Transition.reveal.animating>.to {
    animation: reveal-in 350ms ease-in
}

.Transition.reveal.backwards>.from {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0)
}

.Transition.reveal.backwards>.to {
    -webkit-clip-path: none;
    clip-path: none
}

.Transition.reveal.backwards.animating>.from {
    animation: reveal-in-backwards 350ms ease-out
}

.Transition.reveal.backwards.animating>.to {
    animation: none
}

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

@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)
    }
}

@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)
    }
}

@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)
    }
}

@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)
    }
}

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

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

@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%)
    }
}

@keyframes reveal-in {
    0% {
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0)
    }
    100% {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0)
    }
}

@keyframes reveal-in-backwards {
    0% {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0)
    }
    100% {
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0)
    }
}

.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: 100%;
    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, .25)
}

.Spinner.with-background.bg-light::before {
    background: rgba(255, 255, 255, .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)
}

@keyframes spin {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg)
    }
}

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

.Button {
    outline: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3.5rem;
    border: 0;
    border-radius: var(--border-radius-default);
    background-color: rgba(0, 0, 0, 0);
    background-size: cover;
    padding: .625rem;
    color: #fff;
    line-height: 1.2;
    cursor: pointer;
    text-transform: uppercase;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    transition: background-color .15s, color .15s;
    text-decoration: none !important;
    --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.disabled {
    opacity: .5 !important;
    cursor: default
}

.Button.disabled:not(.click-allowed) {
    pointer-events: none
}

.Button.round {
    width: 3.5rem;
    border-radius: 50%
}

.Button.round i {
    font-size: 1.5rem
}

.Button.primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    --ripple-color: rgba(0, 0, 0, 0.08)
}

.Button.primary:not(.disabled):not(:disabled):active,
.Button.primary:not(.disabled):not(:disabled).active,
.Button.primary:not(.disabled):not(:disabled):focus {
    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.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:not(.disabled):not(:disabled):active,
.Button.secondary:not(.disabled):not(:disabled).active,
.Button.secondary:not(.disabled):not(:disabled):focus {
    background-color: var(--color-primary);
    color: #fff
}

@media(hover: hover) {
    .Button.secondary:not(.disabled):not(:disabled):hover {
        background-color: var(--color-primary);
        color: #fff
    }
}

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,
.Button.gray:not(.disabled):not(:disabled):focus {
    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.danger {
    background-color: var(--color-background);
    color: var(--color-error);
    --ripple-color: rgba(var(--color-error-rgb), 0.16)
}

.Button.danger:not(.disabled):not(:disabled):active,
.Button.danger:not(.disabled):not(:disabled).active,
.Button.danger:not(.disabled):not(:disabled):focus {
    background-color: var(--color-error);
    color: var(--color-white)
}

@media(hover: hover) {
    .Button.danger:not(.disabled):not(:disabled):hover {
        background-color: var(--color-error);
        color: var(--color-white)
    }
}

body.animation-level-0 .Button.danger:not(.disabled):not(:disabled):active {
    background-color: var(--color-error-shade)
}

.Button.text {
    background-color: rgba(0, 0, 0, 0)
}

.Button.text.primary {
    color: var(--color-primary);
    background-color: rgba(0, 0, 0, 0)
}

.Button.text.primary:not(.disabled):not(:disabled):active,
.Button.text.primary:not(.disabled):not(:disabled).active,
.Button.text.primary:not(.disabled):not(:disabled):focus {
    background-color: rgba(var(--color-primary-shade-rgb), 0.08)
}

@media(hover: hover) {
    .Button.text.primary:not(.disabled):not(:disabled):hover {
        background-color: rgba(var(--color-primary-shade-rgb), 0.08)
    }
}

body.animation-level-0 .Button.text.primary:not(.disabled):not(:disabled):active {
    background-color: rgba(var(--color-primary-shade-rgb), 0.16)
}

.Button.text.secondary {
    background-color: rgba(0, 0, 0, 0);
    color: var(--color-text-secondary)
}

.Button.text.danger:not(.disabled):not(:disabled):active,
.Button.text.danger:not(.disabled):not(:disabled).active,
.Button.text.danger:not(.disabled):not(:disabled):focus {
    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: .8
}

.Button.faded:not(.disabled):not(:disabled):active,
.Button.faded:not(.disabled):not(:disabled).active,
.Button.faded:not(.disabled):not(:disabled):focus {
    opacity: 1
}

@media(hover: hover) {
    .Button.faded:not(.disabled):not(:disabled):hover {
        opacity: 1
    }
}

.Button.faded.activated {
    opacity: 1
}

.Button.translucent {
    background-color: rgba(0, 0, 0, 0);
    color: var(--color-text-secondary);
    --ripple-color: var(--color-interactive-element-hover)
}

.Button.translucent:not(.disabled):not(:disabled):active,
.Button.translucent:not(.disabled):not(:disabled).active,
.Button.translucent:not(.disabled):not(:disabled):focus {
    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-white {
    background-color: rgba(0, 0, 0, 0);
    color: rgba(255, 255, 255, .5);
    --ripple-color: rgba(255, 255, 255, 0.08)
}

.Button.translucent-white:not(.disabled):not(:disabled):active,
.Button.translucent-white:not(.disabled):not(:disabled).active,
.Button.translucent-white:not(.disabled):not(:disabled):focus {
    background-color: rgba(255, 255, 255, .08);
    color: #fff
}

@media(hover: hover) {
    .Button.translucent-white:not(.disabled):not(:disabled):hover {
        background-color: rgba(255, 255, 255, .08);
        color: #fff
    }
}

body.animation-level-0 .Button.translucent-white:not(.disabled):not(:disabled):active {
    background-color: rgba(255, 255, 255, .16)
}

.Button.translucent-black {
    background-color: rgba(0, 0, 0, 0);
    color: rgba(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,
.Button.translucent-black:not(.disabled):not(:disabled):focus {
    background-color: rgba(0, 0, 0, .08)
}

@media(hover: hover) {
    .Button.translucent-black:not(.disabled):not(:disabled):hover {
        background-color: rgba(0, 0, 0, .08)
    }
}

body.animation-level-0 .Button.translucent-black:not(.disabled):not(:disabled):active {
    background-color: rgba(0, 0, 0, .16)
}

.Button.dark {
    background-color: rgba(0, 0, 0, .75);
    color: #fff;
    --ripple-color: rgba(255, 255, 255, 0.08)
}

.Button.dark:not(.disabled):not(:disabled):active,
.Button.dark:not(.disabled):not(:disabled).active,
.Button.dark:not(.disabled):not(:disabled):focus {
    background-color: rgba(0, 0, 0, .85);
    color: #fff
}

@media(hover: hover) {
    .Button.dark:not(.disabled):not(:disabled):hover {
        background-color: rgba(0, 0, 0, .85);
        color: #fff
    }
}

body.animation-level-0 .Button.dark:not(.disabled):not(:disabled):active {
    background-color: rgba(0, 0, 0, .95)
}

.Button.smaller {
    height: 2.75rem;
    padding: .3125rem
}

.Button.smaller.round {
    width: 2.75rem
}

.Button.smaller.pill {
    height: 2.5rem;
    border-radius: 1.25rem;
    padding: .3125rem 1rem
}

.Button.smaller.with-icon {
    padding-left: .75rem;
    padding-right: 1.25rem
}

.Button.smaller.with-icon i {
    font-size: 1.5rem;
    margin-right: .5rem
}

.Button.smaller.with-icon[dir=rtl] {
    padding-left: 1.25rem;
    padding-right: .75rem
}

.Button.smaller.with-icon[dir=rtl] i {
    margin-left: .5rem;
    margin-right: 0
}

@media(max-width: 600px) {
    .Button.smaller {
        height: 2.5rem
    }
    .Button.smaller.round {
        width: 2.5rem
    }
}

.Button.tiny {
    height: 2.25rem;
    padding: .4375rem;
    border-radius: var(--border-radius-default-small);
    font-size: .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: .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: .875rem;
    top: .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)
}

.Checkbox {
    display: block;
    position: relative;
    padding-left: 4.5rem;
    text-align: left;
    margin-bottom: 1.5rem;
    line-height: 1.5rem;
    cursor: pointer
}

.Checkbox.disabled {
    pointer-events: none;
    opacity: .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.loading .Checkbox-main::before,
.Checkbox.loading .Checkbox-main::after {
    opacity: 0 !important
}

.Checkbox.loading .Spinner {
    position: absolute;
    left: .375rem;
    top: .125rem;
    opacity: 0;
    animation: fade-in .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 {
    content: "";
    display: block;
    position: absolute;
    left: 1.1875rem;
    top: .1875rem;
    width: 1.125rem;
    height: 1.125rem
}

.Checkbox .Checkbox-main::before {
    border: 2px solid var(--color-borders-input);
    border-radius: .25rem;
    background-color: var(--color-background);
    transition: border-color .1s ease, background-color .1s ease
}

.Checkbox .Checkbox-main::after {
    background: center no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEzLjkuOEw1LjggOC45IDIuMSA1LjJjLS40LS40LTEuMS0uNC0xLjYgMC0uNC40LS40IDEuMSAwIDEuNkw1IDExLjJjLjQuNCAxLjEuNCAxLjYgMGw4LjktOC45Yy40LS40LjQtMS4xIDAtMS42LS41LS40LTEuMi0uNC0xLjYuMXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPg==);
    background-size: .875rem;
    opacity: 0;
    transition: opacity .1s ease
}

.Checkbox .Checkbox-main .label {
    display: block;
    text-align: initial
}

.Checkbox .Checkbox-main .subLabel {
    display: block;
    font-size: .875rem;
    line-height: 1rem;
    color: var(--color-text-secondary)
}

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

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

.Loading.interactive {
    cursor: pointer
}

.Loading .Spinner {
    --spinner-size: 2.75rem
}

.Menu.fluid .bubble {
    min-width: 13.5rem;
    width: auto
}

.Menu .backdrop {
    position: fixed;
    left: -100vw;
    right: -100vw;
    top: -100vh;
    bottom: -100vh;
    z-index: var(--z-menu-backdrop)
}

.Menu .bubble {
    overflow: hidden;
    display: block;
    list-style: none;
    padding: .5rem 0;
    margin: 0;
    position: absolute;
    background-color: var(--color-background);
    box-shadow: 0 .25rem .5rem .125rem var(--color-default-shadow);
    border-radius: var(--border-radius-default);
    min-width: 13.5rem;
    z-index: var(--z-menu-bubble);
    overscroll-behavior: contain;
    transform: scale(0.5);
    transition: opacity .2s cubic-bezier(0.2, 0, 0.2, 1), transform .2s cubic-bezier(0.2, 0, 0.2, 1) !important;
    --offset-y: calc(100% + 0.5rem);
    --offset-x: 0
}

.Menu .bubble.open {
    transform: scale(1)
}

.Menu .bubble.closing {
    transition: opacity .2s ease-in, transform .2s ease-in !important
}

body.animation-level-0 .Menu .bubble {
    transform: none !important;
    transition: opacity .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-footer {
    padding-bottom: 0
}

body.has-open-dialog .Menu:not(.CustomSendMenu):not(.web-app-more-menu) .bubble {
    transition: none !important
}

.Menu .footer {
    padding: .5rem 0;
    background: var(--color-chat-hover);
    color: var(--color-text-secondary);
    font-size: .8125rem;
    text-align: center
}

.Menu.compact .bubble {
    background: var(--color-background-compact-menu);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: .25rem 0
}

.Menu.compact .footer {
    background: none
}

.Menu.compact.no-blur .bubble {
    background: var(--color-background)
}

.Menu .menu-loading-row {
    margin: .125rem 1rem;
    width: calc(100% - 2rem)
}

.DropdownMenu {
    position: relative
}

.MenuItem {
    width: 100%;
    background: none;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    display: flex;
    align-items: center;
    padding: .75rem 1rem;
    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
}

@media(hover: hover) {
    .MenuItem:hover,
    .MenuItem:focus {
        background-color: var(--color-chat-hover);
        text-decoration: none;
        color: inherit
    }
}

@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;
    margin-right: 2rem;
    color: var(--color-icon-secondary)
}

.MenuItem .menu-item-name {
    margin-right: 2rem
}

.MenuItem .menu-item-name.capitalize {
    text-transform: capitalize
}

.MenuItem.disabled {
    opacity: .5 !important;
    cursor: default !important
}

.MenuItem.destructive {
    color: var(--color-error)
}

.MenuItem.destructive i {
    color: inherit
}

.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: .25rem;
    font-size: .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: .875rem;
    margin: .125rem .25rem;
    padding: .25rem;
    border-radius: .375rem;
    width: auto;
    font-weight: 500;
    transform: scale(1);
    transition: .15s ease-in-out transform
}

.MenuItem.compact i {
    max-width: 1.25rem;
    font-size: 1.25rem;
    margin-left: .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 .25rem;
    padding: .5rem .75rem;
    font-weight: 400;
    font-size: small;
    line-height: 1.125rem
}

.CountryCodeInput .input-group {
    cursor: pointer;
    z-index: var(--z-country-code-input-group)
}

.CountryCodeInput .input-group .Spinner {
    position: absolute;
    top: 1rem;
    right: .75rem;
    opacity: .5;
    --spinner-size: 1.5rem
}

.CountryCodeInput .input-group .css-icon-down {
    position: absolute;
    top: 1.125rem;
    right: 1rem;
    width: .75rem;
    height: .75rem;
    border: 2px solid var(--color-text-secondary);
    border-top: 0;
    border-left: 0;
    transform: scaleY(1) rotate(45deg);
    transition: color .2s ease, transform .2s ease, top .2s ease
}

.CountryCodeInput .input-group .css-icon-down.open {
    border-color: var(--color-primary);
    transform: scaleY(-1) rotate(45deg);
    top: 1.5rem
}

.CountryCodeInput .bubble {
    width: 100%;
    max-height: 23.5rem;
    overflow-y: auto;
    transform-origin: top center !important;
    transform: scale(0.95)
}

.CountryCodeInput .bubble.open {
    transform: scaleY(1)
}

.CountryCodeInput .MenuItem button {
    display: flex;
    align-items: center
}

.CountryCodeInput .MenuItem.no-results button {
    justify-content: center;
    padding: .5rem 1rem
}

.CountryCodeInput .MenuItem.no-results button span {
    font-size: .875rem
}

.CountryCodeInput .country-flag {
    font-size: 2rem;
    margin-right: 1rem
}

.CountryCodeInput .country-flag .emoji {
    width: 2rem;
    height: 2rem;
    display: inline-block;
    vertical-align: 4px;
    margin: -0.5rem .125rem
}

.CountryCodeInput .country-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 1rem;
    text-align: left
}

.CountryCodeInput .country-code {
    margin-left: auto;
    opacity: .5;
    padding-right: .25rem
}

.Auth {
    height: 100%
}

.auth-form {
    width: 100%;
    max-width: 25.5rem;
    margin: 0 auto;
    padding: 6rem 1rem 1rem;
    text-align: center
}

@media(min-width: 600px)and (min-height: 450px) {
    .auth-form {
        padding: 6.8125rem 1.5rem 1.5rem
    }
    .auth-form.qr {
        padding-top: 4rem
    }
}

.auth-form #logo,
.auth-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 {
        width: 10rem;
        height: 10rem;
        margin-bottom: 2.5rem
    }
}

.auth-form #logo {
    background: url(/static/css/telegram-logo.1b2bb5b107f046ea9325.svg) center no-repeat;
    background-size: 100%
}

.auth-form h1 {
    font-size: 1.25rem;
    line-height: 1
}

@media(min-width: 600px) {
    .auth-form h1 {
        font-size: 2rem;
        line-height: 1.5
    }
}

.auth-form .note {
    font-size: .875rem;
    line-height: 1.35;
    margin-bottom: 2.5rem;
    color: var(--color-text-secondary)
}

@media(min-width: 600px) {
    .auth-form .note {
        font-size: 1rem;
        margin-bottom: 3rem
    }
}

#auth-registration-form,
#auth-phone-number-form,
#auth-code-form,
#auth-password-form,
#auth-qr-form {
    height: 100%;
    overflow-y: auto
}

#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 h1,
#auth-password-form h1 {
    display: flex;
    align-items: center;
    justify-content: center
}

.auth-number-edit {
    width: 2.5rem;
    height: 2.5rem;
    padding: .5rem;
    font-size: 1.5rem;
    color: var(--color-text-secondary);
    opacity: .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: 280px;
    position: relative
}

#auth-qr-form .qr-inner,
#auth-qr-form .qr-loading {
    height: 280px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center
}

#auth-qr-form .qr-inner {
    opacity: 1;
    transform: scale(1);
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms
}

#auth-qr-form .qr-inner:not(.open) {
    opacity: .5;
    transform: scale(0.5)
}

#auth-qr-form .qr-inner:not(.shown) {
    display: none
}

#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: #fff;
    border-radius: var(--border-radius-default);
    overflow: hidden
}

#auth-qr-form h1 {
    margin: 1.5rem 0 1rem 0;
    font-size: 1.25rem
}

#auth-qr-form ol {
    list-style: none;
    counter-reset: item;
    padding: 0 1.75rem
}

#auth-qr-form ol li {
    counter-increment: item;
    text-align: left;
    margin: .75rem 0;
    display: flex
}

#auth-qr-form ol li::before {
    content: counter(item);
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0;
    margin: 0 .75rem 0 0;
    background: var(--color-primary);
    border-radius: 50%;
    font-size: smaller;
    color: #fff
}

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

#AppInactive {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

#AppInactive .content {
    max-width: 28rem;
    margin: auto;
    padding: 1.5rem;
    text-align: center;
    background: var(--color-background);
    border-radius: var(--border-radius-default)
}

#AppInactive .title {
    margin-top: 1rem
}

#AppInactive .description {
    color: var(--color-text-secondary);
    font-size: .875rem
}

#AppInactive img {
    width: 100%;
    max-width: 20rem
}

#AppInactive .Button {
    margin-top: 1rem
}

.KD2TsjdEc_LBLsR_ReWT {
    height: 100%;
    background-color: var(--theme-background-color);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%
}

@media(max-width: 600px) {
    .KD2TsjdEc_LBLsR_ReWT {
        height: calc(var(--vh, 1vh)*100)
    }
}

html.theme-light .KD2TsjdEc_LBLsR_ReWT {
    background-image: url(/static/css/chat-bg-br.f34cc96fbfb048812820.png)
}

.KD2TsjdEc_LBLsR_ReWT::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url(/static/css/chat-bg-pattern-light.ee148af944f6580293ae.png);
    background-position: top right;
    background-size: 510px auto;
    background-repeat: repeat;
    mix-blend-mode: overlay
}

html.theme-dark .KD2TsjdEc_LBLsR_ReWT::before {
    background-image: url(/static/css/chat-bg-pattern-dark.ad38368a9e8140d0ac7d.png);
    mix-blend-mode: unset
}

@media(max-width: 600px) {
    .KD2TsjdEc_LBLsR_ReWT::before {
        bottom: auto;
        height: calc(var(--vh, 1vh)*100)
    }
}

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

.jxcLmQWl6IklxyLBcFsv {
    flex: 1
}

@media(min-width: 926px) {
    .jxcLmQWl6IklxyLBcFsv {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: 100%
    }
}

.s_eiw3FJDNGVyMHHEr_w {
    flex: 1;
    background: var(--color-background);
    min-width: 12rem;
    width: 33vw;
    max-width: 26.5rem;
    height: 100%
}

@media(min-width: 926px) {
    .s_eiw3FJDNGVyMHHEr_w {
        max-width: 40vw
    }
}

@media(min-width: 1276px) {
    .s_eiw3FJDNGVyMHHEr_w {
        width: 25vw;
        max-width: 33vw
    }
}

@media(max-width: 1275px) {
    .s_eiw3FJDNGVyMHHEr_w {
        flex: 2
    }
}

@media(max-width: 925px) {
    .s_eiw3FJDNGVyMHHEr_w {
        width: 26.5rem !important
    }
}

@media(max-width: 600px) {
    .s_eiw3FJDNGVyMHHEr_w {
        max-width: none;
        width: 100vw !important
    }
}

.v5WSHYkqrlK9GvmSI1zN {
    flex: 3;
    border-left: 1px solid var(--color-borders);
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-size: cover !important
}

@media(max-width: 1275px) {
    .v5WSHYkqrlK9GvmSI1zN {
        border-right: none
    }
}

@media(max-width: 600px) {
    .v5WSHYkqrlK9GvmSI1zN {
        display: none
    }
}

.BlQSOI0qSg9HDzgQGwdw {
    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)
}

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

/* cyrillic-ext */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Roboto'), local('Roboto-Regular'), url(/static/css/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(/static/css/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(/static/css/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(/static/css/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(/static/css/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(/static/css/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(/static/css/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(/static/css/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(/static/css/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(/static/css/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(/static/css/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(/static/css/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(/static/css/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(/static/css/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(/static/css/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(/static/css/Vazirmatn-NL-Medium.f3b8e058aff7dd59279b.woff) format('woff');
    font-weight: 500;
    font-display: swap;
    unicode-range: U+0600-06FF;
}

*,
*::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: .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: .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]),
a:not([href]):not([tabindex]):hover,
a:not([href]):not([tabindex]):focus {
    color: inherit;
    text-decoration: none
}

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

pre,
code,
kbd,
samp {
    font: .9375rem/1.25 "Courier", "Courier New", "Nimbus Mono L", "Courier 10 Pitch", "FreeMono", sans-serif-monospace, monospace;
    font-size-adjust: .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
}

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

table {
    border-collapse: collapse
}

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

th {
    text-align: inherit
}

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

button {
    border-radius: 0
}

button:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color
}

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: .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 {
    --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: #f4f4f5;
    --color-background-secondary-accent: #e4e4e5;
    --color-background-own: #eeffde;
    --color-background-own-selected: color.adjust($color-light-green, -10%);
    --color-text: #000000;
    --color-text-lighter: #2e3939;
    --color-text-secondary: #707579;
    --color-icon-secondary: #707579;
    --color-text-secondary-rgb: 112, 117, 121;
    --color-text-secondary-apple: #8a8a90;
    --color-text-meta: #686c72;
    --color-text-meta-rgb: 104, 108, 114;
    --color-text-meta-colored: #4fae4e;
    --color-text-meta-apple: #8c8c91;
    --color-text-green: #4fae4e;
    --color-text-green-rgb: 79, 174, 78;
    --color-borders: #dadce0;
    --color-borders-input: #dadce0;
    --color-dividers: #c8c6cc;
    --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: #707579CC;
    --color-voice-transcribe-button: #e8f3ff;
    --color-voice-transcribe-button-own: #cceebf;
    --color-primary: #3390ec;
    --color-primary-shade: #2f84d9;
    --color-primary-shade-darker: #2b79c6;
    --color-primary-shade-rgb: 47, 132, 217;
    --color-primary-opacity: rgba(var(--color-primary), 0.25);
    --color-primary-opacity-hover: rgba(var(--color-primary), 0.15);
    --color-green: #00c73e;
    --color-green-darker: #00a734;
    --color-error: #e53935;
    --color-error-shade: #d33431;
    --color-error-rgb: 229, 57, 53;
    --color-warning: #fb8c00;
    --color-yellow: #fdd764;
    --color-links: #3390ec;
    --color-own-links: #ffffff;
    --color-placeholders: #a2acb4;
    --color-pinned: #ffffff;
    --color-code: #4a729a;
    --color-code-bg: rgba(112, 117, 121, 0.08);
    --color-code-own: #3c7940;
    --color-code-own-bg: rgba(112, 117, 121, 0.08);
    --color-accent-own: #4fae4e;
    --color-message-meta-own: #4fae4e;
    --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(244, 244, 244);
    --color-reply-active: rgb(232, 233, 234);
    --color-reply-own-hover: rgb(219, 245, 205);
    --color-reply-own-active: rgb(200, 236, 187);
    --color-background-own-apple: #dcf8c5;
    --color-reply-own-hover-apple: #cbefb7;
    --color-reply-own-active-apple: #bae6a8;
    --color-white: #ffffff;
    --color-gray: #c4c9cc;
    --color-chat-hover: #f4f4f5;
    --color-chat-active: #3390ec;
    --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-default-shadow: #72727240;
    --color-light-shadow: #7272722b;
    --color-skeleton-background: rgba(33, 33, 33, 0.15);
    --color-skeleton-foreground: rgba(232, 232, 232, 0.2);
    --color-scrollbar: rgba(90, 90, 90, 0.3);
    --color-scrollbar-code: rgba(200, 200, 200, 0.3);
    --color-telegram-blue: #3390ec;
    --vh: 1vh;
    --border-radius-default: 0.75rem;
    --border-radius-default-small: 0.625rem;
    --border-radius-default-tiny: 0.375rem;
    --border-radius-messages: 0.75rem;
    --border-radius-messages-small: 0.375rem;
    --messages-container-width: 45.5rem;
    --right-column-width: 26.5rem;
    --header-height: 3.5rem;
    --custom-emoji-size: 1.25rem;
    --symbol-menu-width: 26.25rem;
    --symbol-menu-height: 23.25rem;
    --symbol-menu-footer-height: 3rem;
    --z-lock-screen: 3000;
    --z-ui-loader-mask: 2000;
    --z-notification: 1700;
    --z-confetti: 1600;
    --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-media-viewer-head: 3;
    --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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTEyIDIzQzUuOSAyMyAxIDE4LjEgMSAxMlM1LjkgMSAxMiAxVjBDNS40IDAgMCA1LjQgMCAxMnM1LjQgMTIgMTIgMTIgMTItNS40IDEyLTEyaC0xYzAgNi4xLTQuOSAxMS0xMSAxMXoiLz48L3N2Zz4=);
    --spinner-blue-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzRlYTRmNiIvPjwvc3ZnPg==);
    --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==);
    --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%23DDDFE0%27 stroke-width=%274%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%2363A2E3%27 stroke-width=%274%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(min-width: 1921px) {
    :root {
        --messages-container-width: 50vw
    }
}

@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: .25rem !important
}

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

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

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

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

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

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

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

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

.ml-2,
.mx-2 {
    margin-left: .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
}

.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: .25rem !important
}

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

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

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

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

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

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

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

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

.pl-2,
.px-2 {
    padding-left: .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
}

.max-length-indicator {
    position: absolute;
    right: .75rem;
    bottom: -0.5625rem;
    padding: 0 .25rem;
    color: var(--color-text-secondary);
    font-size: .75rem;
    background: var(--color-background)
}

.input-group {
    position: relative;
    margin-bottom: 1.5rem
}

.input-group label {
    display: block;
    padding: 0 .25rem;
    position: absolute;
    left: .75rem;
    top: .9375rem;
    background-color: var(--color-background);
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-placeholders);
    transition: transform .15s ease-out, color .15s ease-out;
    cursor: text;
    pointer-events: none;
    transform-origin: left center;
    white-space: nowrap
}

.input-group.with-arrow::after {
    content: "";
    position: absolute;
    height: .75rem;
    width: .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.touched label,
.input-group.error label,
.input-group.success label,
.input-group .form-control:focus+label,
.input-group .form-control.focus+label {
    transform: scale(0.75) translate(-0.5rem, -2.25rem)
}

.input-group input::placeholder,
.input-group .form-control::placeholder {
    color: var(--color-placeholders)
}

.input-group.touched label {
    color: var(--color-text-secondary)
}

.input-group.error label {
    color: var(--color-error) !important
}

.input-group.success label {
    color: var(--color-text-green) !important
}

.input-group.disabled {
    opacity: .5;
    pointer-events: none
}

.input-group[dir=rtl] input {
    text-align: right
}

.input-group[dir=rtl] label {
    left: auto;
    right: .75rem
}

.input-group[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 {
    transform: scale(0.75) translate(1.5rem, -2.25rem)
}

.form-control {
    --border-width: 1px;
    display: block;
    width: 100%;
    height: 3.375rem;
    padding: calc(.75rem - var(--border-width)) calc(.9rem - 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 .15s ease;
    word-break: break-word;
    -webkit-appearance: none;
    font-size: 1rem;
    line-height: 1.25rem
}

.form-control[dir] {
    text-align: initial
}

.form-control:hover {
    border-color: var(--color-primary)
}

.form-control:hover+label {
    color: var(--color-primary)
}

.form-control:focus,
.form-control.focus {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
    caret-color: var(--color-primary)
}

.form-control:focus+label,
.form-control.focus+label {
    color: var(--color-primary)
}

.form-control:disabled {
    background: none !important
}

.error .form-control {
    border-color: var(--color-error);
    box-shadow: inset 0 0 0 1px var(--color-error);
    caret-color: var(--color-error)
}

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

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

textarea.form-control {
    resize: none;
    overflow: hidden;
    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: .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(.9rem - var(--border-width))
}

.input-group.password-input[dir=rtl] .toggle-password {
    left: 0;
    right: auto
}

@font-face {
    font-family: "icomoon";
    src: url(/static/css/icomoon.65ee92b88aaaba8c7f1b.woff2) format("woff2"), url(/static/css/icomoon.892eb17df47f870e8c89.woff) format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: block
}

[class^=icon-],
[class*=" icon-"] {
    font-family: "icomoon" !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -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-loop:before {
    content: ""
}

.icon-skip-next:before {
    content: ""
}

.icon-skip-previous:before {
    content: ""
}

.icon-volume-1:before {
    content: ""
}

.icon-volume-2:before {
    content: ""
}

.icon-volume-3:before {
    content: ""
}

.icon-open-in-new-tab:before {
    content: ""
}

.icon-pip:before {
    content: ""
}

.icon-gift:before {
    content: ""
}

.icon-sort:before {
    content: ""
}

.icon-web:before {
    content: ""
}

.icon-transcribe:before {
    content: ""
}

.icon-add-one-badge:before {
    content: ""
}

.icon-chat-badge:before {
    content: ""
}

.icon-chats-badge:before {
    content: ""
}

.icon-double-badge:before {
    content: ""
}

.icon-file-badge:before {
    content: ""
}

.icon-folder-badge:before {
    content: ""
}

.icon-link-badge:before {
    content: ""
}

.icon-pin-badge:before {
    content: ""
}

.icon-premium:before {
    content: ""
}

.icon-unlock-badge:before {
    content: ""
}

.icon-lock-badge:before {
    content: ""
}

.icon-key:before {
    content: ""
}

.icon-heart-outline:before {
    content: ""
}

.icon-heart:before {
    content: ""
}

.icon-word-wrap:before {
    content: ""
}

.icon-webapp:before {
    content: ""
}

.icon-reload:before {
    content: ""
}

.icon-install:before {
    content: ""
}

.icon-favorite-filled:before {
    content: ""
}

.icon-share-screen:before {
    content: ""
}

.icon-video-outlined:before {
    content: ""
}

.icon-stats:before {
    content: ""
}

.icon-copy-media:before {
    content: ""
}

.icon-sidebar:before {
    content: ""
}

.icon-video-stop:before {
    content: ""
}

.icon-speaker:before {
    content: ""
}

.icon-speaker-outline:before {
    content: ""
}

.icon-phone-discard-outline:before {
    content: ""
}

.icon-allow-speak:before {
    content: ""
}

.icon-stop-raising-hand:before {
    content: ""
}

.icon-share-screen-outlined:before {
    content: ""
}

.icon-voice-chat:before {
    content: ""
}

.icon-video:before {
    content: ""
}

.icon-noise-suppression:before {
    content: ""
}

.icon-phone-discard:before {
    content: ""
}

.icon-bot-commands-filled:before {
    content: ""
}

.icon-reply-filled:before {
    content: ""
}

.icon-bug:before {
    content: ""
}

.icon-data:before {
    content: ""
}

.icon-darkmode:before {
    content: ""
}

.icon-animations:before {
    content: ""
}

.icon-enter:before {
    content: ""
}

.icon-fontsize:before {
    content: ""
}

.icon-permissions:before {
    content: ""
}

.icon-card:before {
    content: ""
}

.icon-truck:before {
    content: ""
}

.icon-share-filled:before {
    content: ""
}

.icon-bold:before {
    content: ""
}

.icon-bot-command:before {
    content: ""
}

.icon-calendar-filter:before {
    content: ""
}

.icon-comments:before {
    content: ""
}

.icon-comments-sticker:before {
    content: ""
}

.icon-arrow-down:before {
    content: ""
}

.icon-email:before {
    content: ""
}

.icon-italic:before {
    content: ""
}

.icon-link:before {
    content: ""
}

.icon-link-broken:before {
    content: ""
}

.icon-mention:before {
    content: ""
}

.icon-monospace:before {
    content: ""
}

.icon-next:before {
    content: ""
}

.icon-password-off:before {
    content: ""
}

.icon-pin-list:before {
    content: ""
}

.icon-previous:before {
    content: ""
}

.icon-replace:before {
    content: ""
}

.icon-schedule:before {
    content: ""
}

.icon-strikethrough:before {
    content: ""
}

.icon-underlined:before {
    content: ""
}

.icon-zoom-in:before {
    content: ""
}

.icon-zoom-out:before {
    content: ""
}

.icon-select:before {
    content: ""
}

.icon-folder:before {
    content: ""
}

.icon-bots:before {
    content: ""
}

.icon-calendar:before {
    content: ""
}

.icon-cloud-download:before {
    content: ""
}

.icon-colorize:before {
    content: ""
}

.icon-forward:before {
    content: ""
}

.icon-reply:before {
    content: ""
}

.icon-help:before {
    content: ""
}

.icon-info:before {
    content: ""
}

.icon-info-filled:before {
    content: ""
}

.icon-delete-filled:before {
    content: ""
}

.icon-delete:before {
    content: ""
}

.icon-edit:before {
    content: ""
}

.icon-new-chat-filled:before {
    content: ""
}

.icon-send:before {
    content: ""
}

.icon-send-outline:before {
    content: ""
}

.icon-add-user-filled:before {
    content: ""
}

.icon-add-user:before {
    content: ""
}

.icon-delete-user:before {
    content: ""
}

.icon-microphone:before {
    content: ""
}

.icon-microphone-alt:before {
    content: ""
}

.icon-poll:before {
    content: ""
}

.icon-revote:before {
    content: ""
}

.icon-photo:before {
    content: ""
}

.icon-document:before {
    content: ""
}

.icon-camera:before {
    content: ""
}

.icon-camera-add:before {
    content: ""
}

.icon-logout:before {
    content: ""
}

.icon-saved-messages:before {
    content: ""
}

.icon-settings:before {
    content: ""
}

.icon-phone:before {
    content: ""
}

.icon-attach:before {
    content: ""
}

.icon-copy:before {
    content: ""
}

.icon-channel:before {
    content: ""
}

.icon-group:before {
    content: ""
}

.icon-user:before {
    content: ""
}

.icon-non-contacts:before {
    content: ""
}

.icon-active-sessions:before {
    content: ""
}

.icon-admin:before {
    content: ""
}

.icon-download:before {
    content: ""
}

.icon-location:before {
    content: ""
}

.icon-stop:before {
    content: ""
}

.icon-archive:before {
    content: ""
}

.icon-unarchive:before {
    content: ""
}

.icon-readchats:before {
    content: ""
}

.icon-unread:before {
    content: ""
}

.icon-message:before {
    content: ""
}

.icon-lock:before {
    content: ""
}

.icon-unlock:before {
    content: ""
}

.icon-mute:before {
    content: ""
}

.icon-unmute:before {
    content: ""
}

.icon-pin:before {
    content: ""
}

.icon-unpin:before {
    content: ""
}

.icon-smallscreen:before {
    content: ""
}

.icon-fullscreen:before {
    content: ""
}

.icon-large-pause:before {
    content: ""
}

.icon-large-play:before {
    content: ""
}

.icon-pause:before {
    content: ""
}

.icon-play:before {
    content: ""
}

.icon-channelviews:before {
    content: ""
}

.icon-message-succeeded:before {
    content: ""
}

.icon-message-read:before {
    content: ""
}

.icon-message-pending:before {
    content: ""
}

.icon-message-failed:before {
    content: ""
}

.icon-favorite:before {
    content: ""
}

.icon-keyboard:before {
    content: ""
}

.icon-delete-left:before {
    content: ""
}

.icon-recent:before {
    content: ""
}

.icon-gifs:before {
    content: ""
}

.icon-stickers:before {
    content: ""
}

.icon-smile:before {
    content: ""
}

.icon-animals:before {
    content: ""
}

.icon-eats:before {
    content: ""
}

.icon-sport:before {
    content: ""
}

.icon-car:before {
    content: ""
}

.icon-lamp:before {
    content: ""
}

.icon-language:before {
    content: ""
}

.icon-flag:before {
    content: ""
}

.icon-more:before {
    content: ""
}

.icon-search:before {
    content: ""
}

.icon-remove:before {
    content: ""
}

.icon-add:before {
    content: ""
}

.icon-check:before {
    content: ""
}

.icon-close:before {
    content: ""
}

.icon-arrow-left:before {
    content: ""
}

.icon-arrow-right:before {
    content: ""
}

.icon-down:before {
    content: ""
}

.icon-up:before {
    content: ""
}

.icon-eye-closed:before {
    content: ""
}

.icon-eye:before {
    content: ""
}

.icon-muted:before {
    content: ""
}

.icon-avatar-archived-chats:before {
    content: ""
}

.icon-avatar-deleted-account:before {
    content: ""
}

.icon-avatar-saved-messages:before {
    content: ""
}

.icon-pinned-chat:before {
    content: ""
}

.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 video {
    background: no-repeat 50% 50%;
    background-size: contain
}

.media-inner .thumbnail {
    position: absolute;
    top: 0;
    left: 0
}

.media-inner .media-loading {
    position: absolute
}

.animated-close-icon {
    position: absolute;
    transform: rotate(-45deg)
}

.animated-close-icon,
.animated-close-icon::before,
.animated-close-icon::after {
    width: 1.125rem;
    height: .125rem;
    border-radius: .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.75) translate(0, -0.375rem)
}

.animated-close-icon.state-back::after {
    transform: rotate(-45deg) scaleX(0.75) translate(0, 0.375rem)
}

.chat-list {
    background: var(--color-background);
    height: 100%;
    padding: .5rem .125rem .5rem .4375rem;
    overflow-y: auto
}

@supports(overflow-y: overlay) {
    body.is-android .chat-list {
        overflow-y: overlay;
        overflow-x: hidden
    }
}

.chat-list .scroll-container {
    position: relative
}

.chat-list .ListItem.chat-item-clickable {
    margin: 0
}

@media(max-width: 600px) {
    .chat-list {
        padding-left: 0;
        padding-right: 0
    }
}

.chat-list .no-results {
    color: var(--color-text-meta);
    margin-top: 2rem;
    text-align: center
}

.Avatar.color-bg-1,
.ProfilePhoto.color-bg-1 {
    --color-user: var(--color-user-1)
}

.Avatar.color-bg-2,
.ProfilePhoto.color-bg-2 {
    --color-user: var(--color-user-2)
}

.Avatar.color-bg-4,
.ProfilePhoto.color-bg-4 {
    --color-user: var(--color-user-4)
}

.Avatar.color-bg-5,
.ProfilePhoto.color-bg-5 {
    --color-user: var(--color-user-5)
}

.Avatar.color-bg-6,
.ProfilePhoto.color-bg-6 {
    --color-user: var(--color-user-6)
}

.Avatar.color-bg-7,
.ProfilePhoto.color-bg-7 {
    --color-user: var(--color-user-7)
}

.Avatar.color-bg-8,
.ProfilePhoto.color-bg-8 {
    --color-user: var(--color-user-8)
}

.Avatar.replies-bot-account,
.Avatar.saved-messages,
.ProfilePhoto.replies-bot-account,
.ProfilePhoto.saved-messages {
    --color-user: var(--color-primary)
}

.Avatar.deleted-account,
.ProfilePhoto.deleted-account {
    --color-user: var(--color-gray)
}

@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: 100%;
    background-color: var(--color-background);
    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;
    top: 0;
    left: 0;
    right: 0;
    height: 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: .25rem;
    z-index: var(--z-resize-handle);
    cursor: ew-resize
}

@media(min-width: 926px) {
    .resize-handle {
        display: block
    }
}

.visually-hidden {
    position: absolute !important;
    width: 0;
    height: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    z-index: -1
}

.not-implemented {
    opacity: .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: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    transition: scrollbar-color .3s ease;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto
}

.custom-scroll::-webkit-scrollbar-thumb,
.custom-scroll-x::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0);
    border-radius: .375rem;
    box-shadow: 0 0 1px rgba(255, 255, 255, .01)
}

.custom-scroll:hover,
.custom-scroll:focus,
.custom-scroll:focus-within,
.custom-scroll-x:hover,
.custom-scroll-x:focus,
.custom-scroll-x:focus-within {
    scrollbar-color: var(--color-scrollbar) rgba(0, 0, 0, 0)
}

.custom-scroll:hover::-webkit-scrollbar-thumb,
.custom-scroll:focus::-webkit-scrollbar-thumb,
.custom-scroll:focus-within::-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 {
    background-color: var(--color-scrollbar)
}

body:not(.is-ios) .custom-scroll::-webkit-scrollbar {
    width: .375rem
}

body:not(.is-ios) .custom-scroll-x::-webkit-scrollbar {
    height: .375rem
}

.no-scrollbar {
    scrollbar-width: none
}

.no-scrollbar::-webkit-scrollbar {
    display: none
}

.emoji-small {
    background: no-repeat;
    background-size: 1.25rem;
    color: rgba(0, 0, 0, 0);
    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: rgba(0, 0, 0, 0)
}

div[role=button] {
    outline: none !important;
    cursor: pointer
}

.opacity-transition {
    opacity: 1;
    transition: opacity .15s ease
}

.opacity-transition:not(.open) {
    opacity: 0
}

.opacity-transition:not(.shown) {
    display: none
}

.opacity-transition.slow {
    transition-duration: .3s
}

.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: .8
    }
    50% {
        transform: scale(1.1);
        opacity: 1
    }
    100% {
        transform: scale(1)
    }
}

@keyframes hide-icon {
    from {
        transform: scale(1);
        opacity: .4
    }
    to {
        transform: scale(0.5);
        opacity: 0
    }
}

.bg-load {
    background: #0000004a;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 33;
}

.load6 .loader {
    color: #ffffff;
    font-size: 60px;
    overflow: hidden;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
    animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}

@-webkit-keyframes load6 {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%,
    95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%,
    59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }
    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }
    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }
    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}

@keyframes load6 {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%,
    95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%,
    59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }
    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }
    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }
    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}

@-webkit-keyframes round {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes round {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}