/*
  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
  2. Remove default margins and padding
  3. Reset all borders.
*/

*,
::after,
::before,
::backdrop,
::file-selector-button {
  box-sizing: border-box; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
  border: 0 solid; /* 3 */
}

/*
  1. Use a consistent sensible line-height in all browsers.
  2. Prevent adjustments of font size after orientation changes in iOS.
  3. Use a more readable tab size.
  4. Use the user's configured `sans` font-family by default.
  5. Use the user's configured `sans` font-feature-settings by default.
  6. Use the user's configured `sans` font-variation-settings by default.
  7. Disable tap highlights on iOS.
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  tab-size: 4; /* 3 */
  font-family: --theme(
    --default-font-family,
    ui-sans-serif,
    system-ui,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji'
  ); /* 4 */
  font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */
  font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
  1. Add the correct height in Firefox.
  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
  3. Reset the default border style to a 1px solid border.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
  Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/*
  Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
  Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

/*
  Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
  1. Use the user's configured `mono` font-family by default.
  2. Use the user's configured `mono` font-feature-settings by default.
  3. Use the user's configured `mono` font-variation-settings by default.
  4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: --theme(
    --default-mono-font-family,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    'Liberation Mono',
    'Courier New',
    monospace
  ); /* 1 */
  font-feature-settings: --theme(--default-mono-font-feature-settings, normal); /* 2 */
  font-variation-settings: --theme(--default-mono-font-variation-settings, normal); /* 3 */
  font-size: 1em; /* 4 */
}

/*
  Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
  3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
  Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
  Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
  Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
  Make lists unstyled by default.
*/

ol,
ul,
menu {
  list-style: none;
}

/*
  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
      This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/*
  1. Inherit font styles in all browsers.
  2. Remove border radius in all browsers.
  3. Remove background color in all browsers.
  4. Ensure consistent opacity for disabled states in all browsers.
*/

button,
input,
select,
optgroup,
textarea,
::file-selector-button {
  font: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  border-radius: 0; /* 2 */
  background-color: transparent; /* 3 */
  opacity: 1; /* 4 */
}

/*
  Restore default font weight.
*/

:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}

/*
  Restore indentation.
*/

:where(select:is([multiple], [size])) optgroup option {
  padding-inline-start: 20px;
}

/*
  Restore space after button.
*/

::file-selector-button {
  margin-inline-end: 4px;
}

/*
  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
*/

::placeholder {
  opacity: 1;
}

/*
  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
*/

@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
  (contain-intrinsic-size: 1px) /* Safari 17+ */ {
  ::placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
}

/*
  Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
  Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
  1. Ensure date/time inputs have the same height when empty in iOS Safari.
  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
*/

::-webkit-date-and-time-value {
  min-height: 1lh; /* 1 */
  text-align: inherit; /* 2 */
}

/*
  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
*/

::-webkit-datetime-edit {
  display: inline-flex;
}

/*
  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
*/

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

::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}

/*
  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
  Correct the inability to style the border radius in iOS Safari.
*/

button,
input:where([type='button'], [type='reset'], [type='submit']),
::file-selector-button {
  appearance: button;
}

/*
  Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
  Make elements with the HTML hidden attribute stay hidden by default.
*/

[hidden]:where(:not([hidden='until-found'])) {
  display: none !important;
}
@charset "utf-8";

::placeholder {
    color: var(--color-light);
}

/* ************************************************************************************* */
/* Система колонок и строк FLEX */
/* ************************************************************************************* */
.row {
    display: flex;
    flex-direction: row;
    gap: .7rem;
}

/* columns */
.column {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.gap-0 {
    gap: 0;
}

.gap-xs {
    gap: .2rem;
}

.gap-s {
    gap: .5rem;
}

.gap-m {
    gap: .9rem;
}

.gap-l {
    gap: 1.2rem;
}

.gap-xl {
    gap: 1.5rem;
}

.gap-2xl {
    gap: 2rem;
}


/* ************************************************************************************* */
/* overflow классы */
/* ************************************************************************************* */
.overflow-hidden {
    overflow: hidden;
}


/* ************************************************************************************* */
/* items классы */
/* ************************************************************************************* */
.items-start {
    align-items: start;
}

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

.items-end {
    align-items: end;
}

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


/* ************************************************************************************* */
/* self классы */
/* ************************************************************************************* */
.self-start {
    align-self: start;
}

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

.self-end {
    align-self: end;
}


/* ************************************************************************************* */
/* justify классы */
/* ************************************************************************************* */
.justify-left {
    justify-content: left;
}

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

.justify-right {
    justify-content: right;
}

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


/* ************************************************************************************* */
/* text классы */
/* ************************************************************************************* */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-xs {
    font-size: var(--text-xs);
    line-height: var(--text-xs-lh);
}

.text-xs-lh {
    line-height: var(--text-xs-lh);
}

.text-sm {
    font-size: var(--text-sm);
    line-height: var(--text-sm-lh);
}

.text-sm-lh {
    line-height: var(--text-sm-lh);
}

.text-base {
    font-size: var(--text-base);
}

.text-base-lh {
    line-height: var(--text-base-lh);
}

.text-lg {
    font-size: var(--text-lg);
}

.text-lg-lh {
    line-height: var(--text-lg-lh);
}

.text-xl {
    font-size: var(--text-xl);
}

.text-xl-lh {
    line-height: var(--text-xl-lh);
}

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

.text-2xl-lh {
    line-height: var(--text-2xl-lh);
}

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

.text-3xl-lh {
    line-height: var(--text-3xl-lh);
}

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

.text-4xl-lh {
    line-height: var(--text-4xl-lh);
}

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

.text-5xl-lh {
    line-height: var(--text-5xl-lh);
}

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

.text-6xl-lh {
    line-height: var(--text-6xl-lh);
}

.text-7xl {
    font-size: var(--text-7xl);
}

.text-7xl-lh {
    line-height: var(--text-7xl-lh);
}

.text-8xl {
    font-size: var(--text-8xl);
}

.text-8xl-lh {
    line-height: var(--text-8xl-lh);
}

.text-9xl {
    font-size: var(--text-9xl);
}

.text-9xl-lh {
    line-height: var(--text-9xl-lh);
}


/* ************************************************************************************* */
/* font классы */
/* ************************************************************************************* */
.font-weight-thin {
    font-weight: var(--font-weight-thin);
}

.font-weight-extralight {
    font-weight: var(--font-weight-extralight);
}

.font-weight-light {
    font-weight: var(--font-weight-light);
}

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

.font-weight-medium {
    font-weight: var(--font-weight-medium);
}

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

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

.font-weight-extrabold {
    font-weight: var(--font-weight-extrabold);
}

.font-weight-black {
    font-weight: var(--font-weight-black);
}

.font-monospace {
    font-family: var(--font-mono);
}


/* ************************************************************************************* */
/* none класс */
/* ************************************************************************************* */
.none {
    display: none !important;
}

/* ************************************************************************************* */
/* fluid классы */
/* ************************************************************************************* */
.fluid {
    width: 100%;
}

.fluid-h {
    height: 100%;
}


/* ************************************************************************************* */
/* padding классы */
/* ************************************************************************************* */
.pd-0 {
    padding: 0;
}

.pd-m {
    padding: var(--padding-m);
}

.pd-l {
    padding: var(--padding-l);
}

.pd-xl {
    padding: var(--padding-xl);
}

.pd-l-0 {
    padding-left: 0;
}

.pd-t-0 {
    padding-top: 0;
}

.pd-r-0 {
    padding-right: 0;
}

.pd-b-0 {
    padding-bottom: 0;
}

.pd-l-m {
    padding-left: var(--padding-m);
}

.pd-t-m {
    padding-top: var(--padding-m);
}

.pd-r-m {
    padding-right: var(--padding-m);
}

.pd-b-m {
    padding-bottom: var(--padding-m);
}

.pd-l-l {
    padding-left: var(--padding-l);
}

.pd-t-l {
    padding-top: var(--padding-l);
}

.pd-r-l {
    padding-right: var(--padding-l);
}

.pd-b-l {
    padding-bottom: var(--padding-l);
}

.pd-l-xl {
    padding-left: var(--padding-xl);
}

.pd-t-xl {
    padding-top: var(--padding-xl);
}

.pd-r-xl {
    padding-right: var(--padding-xl);
}

.pd-b-xl {
    padding-bottom: var(--padding-xl);
}


/* ************************************************************************************* */
/* max-width классы */
/* ************************************************************************************* */
.mw-3 {
    max-width: 3rem;
}

/* ************************************************************************************* */
/* borders классы */
/* ************************************************************************************* */
.bt-1 {
    border-top: 1px solid var(--border-color);
}

.bb-1 {
    border-bottom: 1px solid var(--border-color);
}


/* ************************************************************************************* */
/* colors классы */
/* ************************************************************************************* */
.color-black {
    color: #000;
}

.color-white {
    color: #fff;
}

.color-base {
    color: var(--color-base);
}

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

.color-gray {
    color: var(--color-gray);
}

.color-light {
    color: var(--color-light);
}

.color-red {
    color: rgb(var(--red));
}

.color-yellow {
    color: rgb(var(--yellow));
}

.color-green {
    color: rgb(var(--green));
}

.color-blue {
    color: rgb(var(--blue));
}

/* ************************************************************************************* */
/* shadow классы */
/* ************************************************************************************* */
.shadow-xs {
    box-shadow: var(--shadow-xs);
}

/* ************************************************************************************* */
/* background классы */
/* ************************************************************************************* */
.bg-second {
    background-color: var(--bg-second);
}
::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent;
}

::-webkit-scrollbar {
    width: .6rem;
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgb(var(--black) / .4);
}
/* ************************************************************************************* */
/* modal */
/* ************************************************************************************* */
:root {
    --modal-overlay-bg: rgb(var(--black) / .2);
    --modal-content-bg: rgb(var(--white) / .8);
    --modal-shadow: 0 0 0 1px rgb(var(--black) / .05), 0 0px 1px 3px rgb(var(--black) / .03);
}

.cm-modal {
    position: absolute;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
    height: 100%;

    >.cm-modal-overlay {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        width: 100%;
        height: 100%;
        background-color: var(--modal-overlay-bg);
        background-image: url(/img/noisy.png);
    }

    >.cm-modal-content {
        z-index: 1;
        overflow: hidden;
        border-radius: var(--radius-3xl);
        background-color: var(--modal-content-bg);
        min-width: 23rem;
        box-shadow: var(--modal-shadow);
        transition: background-color var(--animation-time);
        backdrop-filter: blur(var(--backdrop-blur-m));

        >.header {}

        >.content {
            overflow: hidden;
        }

        >.footer {}
    }

}

@media only screen and (max-width: 600px) {

    .cm-modal {
        >.cm-modal-content {
            width: 100%;
            min-width: 100%;
            position: absolute;
            bottom: 0;
        }
    }

}
/* ************************************************************************************* */
/* form */
/* ************************************************************************************* */
:root {
    --form-min-width: 23rem;
    --form-overlay-bg: rgb(var(--black) / .2);
    --form-content-bg: rgb(var(--white));
    --form-shadow: 0px 4px 15px 0px var(--shadow-color);
}

.cm-form {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;

    .cm-form-overlay {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        width: 100%;
        height: 100%;
        background-color: var(--form-overlay-bg);
        background-image: url(/img/noisy.png);
    }

    .cm-form-content {
        position: relative;
        height: 100%;
        width: 100%;
        min-width: var(--form-min-width);
        display: flex;
        background-color: var(--form-content-bg);
        overflow: hidden;
        transition: transform var(--animation-time), background-color var(--animation-time);

        >.header {
            width: 100%;
            padding: .3rem 1rem;
            height: 3.8rem;
            min-height: 3.8rem;
            max-height: 3.8rem;
            align-items: center;
        }

        >.content {
            padding: 0;
            overflow-y: auto;
            height: 100%;
        }

        >.footer {
            width: 100%;
            align-items: center;
            justify-content: flex-start;
        }

    }

}

@media only screen and (max-width: 600px) {

    .cm-form {
        .cm-form-content {
            min-width: auto;
        }
    }

}
/* ************************************************************************************* */
/* messages */
/* ************************************************************************************* */
:root {
    --messages-bg: rgb(var(--white));
    --messages-error-bg: rgb(var(--red));
    --messages-warning-bg: rgb(var(--yellow));
    --messages-shadow: 0px 4px 15px 0px var(--shadow-color);
}

.cm-message {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    overflow: hidden;
    background-color: var(--messages-bg);
    padding: .6rem;
    cursor: pointer;
    border-radius: .6rem;

    &.error {
        background-color: var(--messages-error-bg);
        color: rgb(var(--white));
    }

    &.warning {
        background-color: var(--messages-warning-bg);
        color: rgb(var(--white));
    }
}
:root {
    --context-menu-overlay-bg: rgb(var(--black) / .2);
    --context-menu-content-bg: rgb(var(--white) / .8);
    --context-menu-shadow: 0 0 0 1px rgb(var(--black) / .05), 0 0px 1px 3px rgb(var(--black) / .03);
    --context-menu-reactions-bg: rgb(var(--black) / .05);
}

.cm-context-menu {
    position: absolute;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
    height: 100%;

    .cm-context-menu-overlay {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        width: 100%;
        height: 100%;
        background-color: var(--context-menu-overlay-bg);
        background-image: url(/img/noisy.png);
    }

    .cm-context-menu-content {
        overflow: hidden;
        border-radius: var(--radius-3xl);
        background-color: var(--context-menu-content-bg);
        min-width: 15rem;
        box-shadow: var(--context-menu-shadow);
        padding: .5rem;
        width: fit-content;
        max-width: 20rem;
        backdrop-filter: blur(var(--backdrop-blur-m));

        >.item {
            padding: .6rem;
            cursor: pointer;
            border-radius: var(--radius-2xl);

            &:hover {
                background: var(--list-item-hover-bg);
            }

            &.red {
                color: rgb(var(--red));

                .cm-icon {
                    stroke: rgb(var(--red));
                }

                &:hover {
                    background: rgb(var(--red) / .1);
                }
            }

            span {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 100%;
                display: block;
            }
        }

        [data-reactions] {
            background-color: var(--context-menu-reactions-bg);
            display: grid;
            padding: .2rem;
            grid-template-columns: repeat(6, minmax(auto, 1fr));
            border-radius: var(--radius-2xl);
            margin-bottom: .3rem;
            overflow: hidden;
            align-items: center;
            max-height: 4rem;
            transition: all var(--animation-time);

            &.active {
                max-height: 10rem;
                margin-bottom: 0rem;
            }

            >.item {
                flex: 0;
                padding: 0rem;
                font-size: var(--text-2xl);
                text-align: center;
                aspect-ratio: 1 / 1;
                border-radius: 50%;
            }

            [action-show-all-reactions] {
                padding: 0;
                width: auto;
                height: auto;
                min-width: auto;
                min-height: auto;
                aspect-ratio: 1 / 1;
            }
        }

    }
}
/* ************************************************************************************* */
/* block */
/* ************************************************************************************* */
.block {
    box-shadow: 0px 1px 5px 0px var(--shadow-color);
}
/* ************************************************************************************* */
/* Inputs for label */
/* ************************************************************************************* */
:root {
    --input-color: var(--color-base);
    --input-bg: transparent;
    --input-padding: 1rem 0 .3rem 0;
    --input-border: 2px solid var(--border-color);
    --input-hover-border: 2px solid var(--color-light);
    --input-focus-border: 2px solid rgb(var(--primary));
    --input-placeholder-color: var(--color-light);
}

input,
select,
textarea,
[contenteditable] {
    display: block;
    width: 100%;
    outline: 0;
    border-radius: 0;
    border: 0;
    border-bottom: var(--input-border);
    padding: var(--input-padding);
    font-size: 1rem;
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.5;
    color: var(--input-color);
    background-color: var(--input-bg);
    background-clip: padding-box;
    transition: all var(--animation-time) cubic-bezier(0.2, 0, 0.2, 1);
    resize: none;
    box-sizing: border-box;

    &:hover {
        border-bottom: var(--input-hover-border);
    }

    &:focus {
        border-bottom: var(--input-focus-border);
    }

    &.error {
        border-bottom: 2px solid rgb(var(--red));
    }

    &.warning {
        border-bottom: 2px solid rgb(var(--yellow));
    }

    &.success {
        border-bottom: 2px solid rgb(var(--green));
    }

    &.primary {
        border-bottom: 2px solid rgb(var(--primary));
    }

    &.transparent {
        border: 0 solid transparent;
        padding: 0.3rem;

        &:hover {
            border: 0 solid transparent;
        }

        &:focus {
            border: 0 solid transparent;
        }

    }
}

.input-placeholder {
    position: relative;
    width: 100%;

    >span {
        pointer-events: none;
        position: absolute;
        top: 1.2rem;
        left: 0rem;
        background-color: var(--input-placeholder-bg);
        color: var(--input-placeholder-color);
        line-height: 1rem;
        transition: all var(--animation-time) cubic-bezier(0.2, 0, 0.2, 1);
    }

    >input:focus+span,
    >input:not(:placeholder-shown)+span,
    >textarea:focus+span,
    >textarea:not(:placeholder-shown)+span {
        top: 0rem;
        left: 0;
        color: rgb(var(--primary) / .8);
        font-size: var(--text-sm);
    }

    >input.error+span,
    >textarea.error+span {
        color: rgb(var(--red));
    }

    >input.warning+span,
    >textarea.warning+span {
        color: rgb(var(--yellow));
    }

    >input.success+span,
    >textarea.success+span {
        color: rgb(var(--green));
    }

    >input.primary+span,
    >textarea.primary+span {
        color: rgb(var(--primary));
    }

}
/* ************************************************************************************* */
/* buttons */
/* ************************************************************************************* */
:root {
    --button-bg: rgb(var(--black) / .05);
    --button-color: var(--color-base);
    --button-shadow: none;
    --button-hover-bg: var(--bg-hover);
    --button-focus-bg: var(--bg-focus);
    --button-focus-shadow: 0 0 0 0.2rem rgb(var(--black) / .03);
}

button,
[type=button],
[type=reset],
[type=submit] {
    display: flex;
    cursor: pointer;
    appearance: button;
    outline: 0;
    padding: 0.62rem 0.75rem;
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    font-family: var(--font-sans);
    line-height: 1.5;
    justify-content: center;
    color: var(--button-color);
    background-color: var(--button-bg);
    background-clip: padding-box;
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--button-shadow);
    transition: all var(--animation-time) cubic-bezier(0.2, 0, 0.2, 1);
}

button:hover,
[type=button]:hover,
[type=reset]:hover,
[type=submit]:hover {
    color: var(--color-base);
    background-color: var(--button-hover-bg);
}

button:focus,
[type=button]:focus,
[type=reset]:focus,
[type=submit]:focus {
    color: var(--color-base);
    background-color: var(--button-focus-bg);
    box-shadow: var(--button-focus-shadow);
}

/* ************************************************************************************* */
/* icon button */
/* ************************************************************************************* */
button.icon,
[type=button].icon,
[type=reset].icon,
[type=submit].icon {
    padding: 0;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    border-radius: 50%;
    background-color: transparent;
    box-shadow: none;
    align-items: center;
    justify-content: center;

    &.fill.red {
        background-color: rgb(var(--red));

        .cm-icon {
            stroke: rgb(var(--white));
        }
    }

    &.fill.green {
        background-color: rgb(var(--green));

        .cm-icon {
            stroke: rgb(var(--white));
        }
    }

    &.xs {
        width: 1.5rem;
        height: 1.5rem;
        min-width: 1.5rem;
        min-height: 1.5rem;
    }

    &.s {
        width: 2rem;
        height: 2rem;
        min-width: 2rem;
        min-height: 2rem;
    }
}

button.icon:hover,
[type=button].icon:hover,
[type=reset].icon:hover,
[type=submit].icon:hover {
    background-color: var(--button-hover-bg);
}

button.icon:focus,
[type=button].icon:focus,
[type=reset].icon:focus,
[type=submit].icon:focus {
    background-color: var(--button-focus-bg);
    box-shadow: none;
}

/* ************************************************************************************* */
/* transparent button */
/* ************************************************************************************* */
button.transparent,
[type=button].transparent,
[type=reset].transparent,
[type=submit].transparent {
    background-color: transparent;
    box-shadow: none;
}

button.transparent:hover,
[type=button].transparent:hover,
[type=reset].transparent:hover,
[type=submit].transparent:hover {
    background-color: transparent;
}

button.transparent:focus,
[type=button].transparent:focus,
[type=reset].transparent:focus,
[type=submit].transparent:focus {
    background-color: transparent;
    box-shadow: none;
}

/* ************************************************************************************* */
/* primary button */
/* ************************************************************************************* */
button.primary,
[type=button].primary,
[type=reset].primary,
[type=submit].primary {
    color: rgb(var(--white));
    background-color: rgb(var(--primary));

}

button.primary:hover,
[type=button].primary:hover,
[type=reset].primary:hover,
[type=submit].primary:hover {
    background-color: rgb(var(--primary) / .9);
}

button.primary:focus,
[type=button].primary:focus,
[type=reset].primary:focus,
[type=submit].primary:focus {
    background-color: rgb(var(--primary) / .8);
    box-shadow: 0 0 0 0.2rem rgb(var(--primary) / .15);
}

/* ************************************************************************************* */
/* red button */
/* ************************************************************************************* */
button.red,
[type=button].red,
[type=reset].red,
[type=submit].red {
    color: rgb(var(--white));
    background-color: rgb(var(--red));
    box-shadow: none;

}

button.red:hover,
[type=button].red:hover,
[type=reset].red:hover,
[type=submit].red:hover {
    background-color: rgb(var(--red) / .9);
}

button.red:focus,
[type=button].red:focus,
[type=reset].red:focus,
[type=submit].red:focus {
    background-color: rgb(var(--red) / .8);
    box-shadow: 0 0 0 0.2rem rgb(var(--red) / .15);
}

/* ************************************************************************************* */
/* green button */
/* ************************************************************************************* */
button.green,
[type=button].green,
[type=reset].green,
[type=submit].green {
    color: rgb(var(--white));
    background-color: rgb(var(--green));
    box-shadow: 0 1px 2px 0 rgb(var(--green) / .2);

}

button.green:hover,
[type=button].green:hover,
[type=reset].green:hover,
[type=submit].green:hover {
    background-color: rgb(var(--green) / .9);
}

button.green:focus,
[type=button].green:focus,
[type=reset].green:focus,
[type=submit].green:focus {
    background-color: rgb(var(--green) / .8);
    box-shadow: 0 0 0 0.2rem rgb(var(--green) / .15);
}
/* ************************************************************************************* */
/* tabs */
/* ************************************************************************************* */
:root {
    --tab-label-color: var(--color-base);
    --tab-label-hover-border: 3px solid var(--color-light);
    --tab-label-active-border: 3px solid var(--color-gray);
}

.cm-tabs {

    >ul.labels {
        padding: 0rem;
        margin: 0;
        background-color: transparent;
        list-style: none;
        overflow-x: auto;
        scroll-behavior: smooth;

        &::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

        &::-webkit-scrollbar-button {
            width: 0;
            height: 0;
        }

        li.label {
            color: var(--tab-label-color);
            cursor: pointer;
            appearance: button;
            padding: .6rem 1rem;
            text-align: center;
            white-space: nowrap;
            border-bottom: 3px solid transparent;
            transition: all var(--animation-time) cubic-bezier(0.2, 0, 0.2, 1);
            border-radius: 0;
            width: 100%;

            &:hover {
                border-bottom: var(--tab-label-hover-border);
            }

            &.active {
                border-bottom: var(--tab-label-active-border);
            }
        }
    }
}

.cm-tabs-contents {
    height: 100%;

    .tab-content {}

    .tab-content:not(.active) {
        position: absolute;
        display: none;
    }
}
/* ************************************************************************************* */
/* toggle классы */
/* ************************************************************************************* */
:root {
    --toggle-bg: rgb(var(--black) / .1);
    --toggle-checked-bg: rgb(var(--primary));
    --toggle-before-bg: rgb(var(--white));
    --toggle-checked-before-bg: rgb(var(--white));
}

.cm-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;

    &>.switch {
        display: flex;
        background: var(--toggle-bg);
        border-radius: var(--radius-2xl);
        width: 2.5em;
        height: 1.5em;
        position: relative;
        vertical-align: middle;
        transition: all var(--animation-time);

        &:before {
            content: "";
            display: block;
            background: var(--toggle-before-bg);
            border-radius: 50%;
            border: 1px solid var(--toggle-bg);
            aspect-ratio: 1 / 1;
            position: relative;
            transform: none;
            transition: all var(--animation-time);
        }
    }

    &>input {
        position: absolute;
        visibility: hidden;
    }

    &>input:checked+.switch {
        background-color: var(--toggle-checked-bg);

        &:before {
            border: 1px solid rgb(var(--primary));
            transform: translateX(calc(100% / 1.5));
        }
    }

    &>.label {
        position: relative;
    }
}
/* ************************************************************************************* */
/* checkbox классы */
/* ************************************************************************************* */
:root {
    --checkbox-border: inset 0 0 0 3px rgb(var(--black) / .1);
    --checkbox-checked-border: inset 0 0 0 1rem rgb(var(--primary));
}

.cm-checkbox {
    display: inline-flex;
    position: relative;
    overflow: hidden;
    width: 100%;
    cursor: pointer;

    input[type="checkbox"],
    input[type="radio"] {
        opacity: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 10;
        cursor: pointer;

        &:checked+span.switch:after {
            box-shadow: var(--checkbox-checked-border);
        }
    }

    >span.switch {
        pointer-events: none;
        display: flex;
        align-items: center;
        justify-content: center;

        &:before {
            display: flex;
            flex-shrink: 0;
            content: "";
            width: 1.8rem;
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            box-shadow: var(--checkbox-border);
        }

        &:after {
            position: absolute;
            display: flex;
            flex-shrink: 0;
            content: "";
            width: .95rem;
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            box-shadow: none;
        }
    }

    &.def {

        input[type="checkbox"],
        input[type="radio"] {
            opacity: 1;
            width: auto;
            position: relative;
            cursor: default;
        }
    }
}
/* ************************************************************************************* */
/* lists */
/* ************************************************************************************* */
:root {
    --list-item-bg: var(--bg-hover);
    --list-item-hover-bg: var(--bg-hover);
    --list-item-focus-bg: var(--bg-focus);
}

.cm-list {
    .item {
        padding: .5rem;
        cursor: pointer;
        border-radius: var(--radius-lg);
        transition: all var(--animation-time);

        &.selected {
            background-color: var(--list-item-focus-bg);
        }
    }

    &.hover {
        .item:hover {
            background-color: var(--list-item-hover-bg);
        }
    }
}
/* ************************************************************************************* */
/* avatars */
/* ************************************************************************************* */
:root {
    --avatar-red: linear-gradient(#FF845E, #D45246);
    --avatar-orange: linear-gradient(#FEBB5B, #F68136);
    --avatar-violet: linear-gradient(#B694F9, #6C61DF);
    --avatar-green: linear-gradient(#9AD164, #46BA43);
    --avatar-cyan: linear-gradient(#53edd6, #28c9b7);
    --avatar-blue: linear-gradient(rgb(56, 185, 250), rgb(0 136 204));
    --avatar-pink: linear-gradient(#FF8AAC, #D95574);
    --avatar-archive: linear-gradient(#B8C2CC, #9EAAB5);
    --avatar-saved: linear-gradient(#b2a6eb, #8774e1);
    --avatar-color: rgb(var(--white));
    --avatar-xxs: 1.5rem;
    --avatar-xs: 2rem;
    --avatar-s: 2.5rem;
    --avatar-m: 3.3rem;
    --avatar-l: 4rem;
    --avatar-xl: 4.5rem;
    --avatar-2xl: 5rem;
    --avatar-3xl: 6rem;
}

.cm-avatar {
    position: relative;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    width: var(--avatar-m);
    min-width: var(--avatar-m);
    color: var(--avatar-color);
    text-transform: uppercase;
    font-weight: var(--font-weight-semibold);
    transition: all var(--animation-time) cubic-bezier(0.2, 0, 0.2, 1);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    &.xxs {
        width: var(--avatar-xxs);
        min-width: var(--avatar-xxs);
        font-size: var(--text-xs);
    }

    &.xs {
        width: var(--avatar-xs);
        min-width: var(--avatar-xs);
        font-size: var(--text-sm);
    }

    &.s {
        width: var(--avatar-s);
        height: var(--avatar-s);
        min-width: var(--avatar-s);
        min-height: var(--avatar-s);
        font-size: var(--text-m);
    }

    &.m {
        width: var(--avatar-m);
        min-width: var(--avatar-m);
        font-size: var(--text-xl);
    }

    &.l {
        width: var(--avatar-l);
    }

    &.xl {
        width: var(--avatar-xl);
        font-size: var(--text-xl);
    }

    &.xxl {
        width: var(--avatar-2xl);
    }

    &.xxxl {
        width: var(--avatar-3xl);
        font-size: var(--text-3xl);
    }

    &.cube {
        border-radius: var(--radius-xl);
    }

    &.online:after {
        content: "";
        position: absolute;
        bottom: 1px;
        right: 2px;
        width: .7rem;
        height: .7rem;
        border-radius: 50%;
        background-color: var(--badge-green);
        box-shadow: 0 0 0 2px var(--form-content-bg);
    }

    >.cm-progress {
        border-radius: 50%;
    }

}
/* ************************************************************************************* */
/* icons */
/* ************************************************************************************* */
:root {
    --icon-width-height: 1.6rem;
    --icon-stroke: var(--color-base);
}

.cm-icon {
    position: relative;
    display: flex;
    transition: all var(--animation-time);
    width: var(--icon-width-height);
    height: var(--icon-width-height);
    min-width: var(--icon-width-height);
    min-height: var(--icon-width-height);
    stroke: var(--icon-stroke);

    &.red {
        stroke: rgb(var(--red)) !IMPORTANT;
    }

    &.yellow {
        stroke: rgb(var(--yellow)) !IMPORTANT;
    }

    &.green {
        stroke: rgb(var(--green)) !IMPORTANT;
    }

    &.blue {
        stroke: rgb(var(--blue)) !IMPORTANT;
    }

}
/* ************************************************************************************* */
/* block */
/* ************************************************************************************* */
:root {
    --badge-green: rgb(var(--green));
    --badge-blue: rgb(var(--blue));
    --badge-red: rgb(var(--red));
    --badge-yellow: rgb(var(--yellow));
    --badge-gray: var(--color-gray);
}

.cm-badge {
    display: flex;
    min-height: 1.5rem;
    min-width: 1.5rem;
    padding: 0 .45rem;
    background-color: var(--badge-blue);
    border-radius: 1rem;
    align-items: center;
    justify-content: center;

    &.red {
        background-color: var(--badge-red);
    }

    &.blue {
        background-color: var(--badge-blue);
    }

    &.yellow {
        background-color: var(--badge-yellow);
    }

    &.gray {
        background-color: var(--badge-gray);
    }
}
/* ************************************************************************************* */
/* progress */
/* ************************************************************************************* */
:root {
    --progress-overlay-bg: rgb(var(--black) / .3);
    --progress-line-bg: rgb(var(--black) / .05);
    --progress-value-bg: var(--color-base);
}

.cm-progress {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--progress-overlay-bg);
    transition: all var(--animation-time);

    .cm-circle {
        position: relative;
        width: 4rem;
        height: 4rem;
        transition: all var(--animation-time);

        circle.circle {}

        circle.status {}
    }

    &.error {
        circle.status {
            stroke: rgb(var(--red));
        }
    }

}

.cm-progress.line {
    position: relative;
    height: .5rem;
    border-radius: 1rem;
    overflow: hidden;
    border: 0;

    &::-webkit-progress-bar {
        background-color: var(--progress-line-bg);
    }

    &::-webkit-progress-value {
        background-color: var(--progress-value-bg);
        border-radius: 1rem;
    }
}
.cropper-container {
    direction: ltr;
    font-size: 0;
    line-height: 0;
    position: relative;
    -ms-touch-action: none;
        touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  
  .cropper-container img {
      backface-visibility: hidden;
      display: block;
      height: 100%;
      image-orientation: 0deg;
      max-height: none !important;
      max-width: none !important;
      min-height: 0 !important;
      min-width: 0 !important;
      width: 100%;
    }
  
  .cropper-wrap-box,
  .cropper-canvas,
  .cropper-drag-box,
  .cropper-crop-box,
  .cropper-modal {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .cropper-wrap-box,
  .cropper-canvas {
    overflow: hidden;
  }
  
  .cropper-drag-box {
    background-color: #fff;
    opacity: 0;
  }
  
  .cropper-modal {
    background-color: #000;
    opacity: 0.5;
  }
  
  .cropper-view-box {
    display: block;
    height: 100%;
    outline: 1px solid #39f;
    outline-color: rgba(51, 153, 255, 0.75);
    overflow: hidden;
    width: 100%;
    border-radius: 50%;
  }
  
  .cropper-dashed {
    border: 0 dashed #eee;
    display: block;
    opacity: 0.5;
    position: absolute;
  }
  
  .cropper-dashed.dashed-h {
      border-bottom-width: 1px;
      border-top-width: 1px;
      height: calc(100% / 3);
      left: 0;
      top: calc(100% / 3);
      width: 100%;
    }
  
  .cropper-dashed.dashed-v {
      border-left-width: 1px;
      border-right-width: 1px;
      height: 100%;
      left: calc(100% / 3);
      top: 0;
      width: calc(100% / 3);
    }
  
  .cropper-center {
    display: block;
    height: 0;
    left: 50%;
    opacity: 0.75;
    position: absolute;
    top: 50%;
    width: 0;
  }
  
  .cropper-center::before,
    .cropper-center::after {
      background-color: #eee;
      content: ' ';
      display: block;
      position: absolute;
    }
  
  .cropper-center::before {
      height: 1px;
      left: -3px;
      top: 0;
      width: 7px;
    }
  
  .cropper-center::after {
      height: 7px;
      left: 0;
      top: -3px;
      width: 1px;
    }
  
  .cropper-face,
  .cropper-line,
  .cropper-point {
    display: block;
    height: 100%;
    opacity: 0.1;
    position: absolute;
    width: 100%;
  }
  
  .cropper-face {
    border-radius: 50%;
    background-color: #fff;
    left: 0;
    top: 0;
  }
  
  .cropper-line {
    background-color: #39f;
  }
  
  .cropper-line.line-e {
      cursor: ew-resize;
      right: -3px;
      top: 0;
      width: 5px;
    }
  
  .cropper-line.line-n {
      cursor: ns-resize;
      height: 5px;
      left: 0;
      top: -3px;
    }
  
  .cropper-line.line-w {
      cursor: ew-resize;
      left: -3px;
      top: 0;
      width: 5px;
    }
  
  .cropper-line.line-s {
      bottom: -3px;
      cursor: ns-resize;
      height: 5px;
      left: 0;
    }
  
  .cropper-point {
    background-color: #39f;
    height: 5px;
    opacity: 0.75;
    width: 5px;
  }
  
  .cropper-point.point-e {
      cursor: ew-resize;
      margin-top: -3px;
      right: -3px;
      top: 50%;
    }
  
  .cropper-point.point-n {
      cursor: ns-resize;
      left: 50%;
      margin-left: -3px;
      top: -3px;
    }
  
  .cropper-point.point-w {
      cursor: ew-resize;
      left: -3px;
      margin-top: -3px;
      top: 50%;
    }
  
  .cropper-point.point-s {
      bottom: -3px;
      cursor: s-resize;
      left: 50%;
      margin-left: -3px;
    }
  
  .cropper-point.point-ne {
      cursor: nesw-resize;
      right: -3px;
      top: -3px;
    }
  
  .cropper-point.point-nw {
      cursor: nwse-resize;
      left: -3px;
      top: -3px;
    }
  
  .cropper-point.point-sw {
      bottom: -3px;
      cursor: nesw-resize;
      left: -3px;
    }
  
  .cropper-point.point-se {
      bottom: -3px;
      cursor: nwse-resize;
      height: 20px;
      opacity: 1;
      right: -3px;
      width: 20px;
    }
  
  @media (min-width: 768px) {
  
  .cropper-point.point-se {
        height: 15px;
        width: 15px;
    }
      }
  
  @media (min-width: 992px) {
  
  .cropper-point.point-se {
        height: 10px;
        width: 10px;
    }
      }
  
  @media (min-width: 1200px) {
  
  .cropper-point.point-se {
        height: 5px;
        opacity: 0.75;
        width: 5px;
    }
      }
  
  .cropper-point.point-se::before {
      background-color: #39f;
      bottom: -50%;
      content: ' ';
      display: block;
      height: 200%;
      opacity: 0;
      position: absolute;
      right: -50%;
      width: 200%;
    }
  
  .cropper-invisible {
    opacity: 0;
  }
  
  .cropper-bg {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
  }
  
  .cropper-hide {
    display: block;
    height: 0;
    position: absolute;
    width: 0;
  }
  
  .cropper-hidden {
    display: none !important;
  }
  
  .cropper-move {
    cursor: move;
  }
  
  .cropper-crop {
    cursor: crosshair;
  }
  
  .cropper-disabled .cropper-drag-box,
  .cropper-disabled .cropper-face,
  .cropper-disabled .cropper-line,
  .cropper-disabled .cropper-point {
    cursor: not-allowed;
  }
.cm-loader {
    display: flex;
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    min-height: 1.5rem;
    aspect-ratio: 1 / 1;
    border: 3px solid var(--color-base);
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: rotation 1s linear infinite;
    align-items: center;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/* ************************************************************************************* */
/* range */
/* ************************************************************************************* */
input[type="range"] {
    -webkit-appearance: none;
    height: .6rem;
    border-radius: 1rem;
    background-color: rgb(var(--primary) / .2);
    border: 0;
    overflow: hidden;
}

/* Input Thumb */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: .6rem;
    width: .6rem;
    border-radius: 50%;
    background: rgb(var(--primary));
    box-shadow: -100px 0 0 100px rgb(var(--primary));
    border: 0;
}

input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    height: .6rem;
    width: .6rem;
    border-radius: 50%;
    background: rgb(var(--primary));
    box-shadow: -100px 0 0 100px rgb(var(--primary));
    border: 0;
}

input[type="range"]::-ms-thumb {
    -webkit-appearance: none;
    height: .6rem;
    width: .6rem;
    border-radius: 50%;
    background: rgb(var(--primary));
    box-shadow: -100px 0 0 100px rgb(var(--primary));
    border: 0;
}

input[type="range"]::-webkit-slider-thumb:hover {
    background: rgb(var(--primary));
}

input[type="range"]::-moz-range-thumb:hover {
    background: rgb(var(--primary));
}

input[type="range"]::-ms-thumb:hover {
    background: rgb(var(--primary));
}

/* Input Track */
input[type=range]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
}

input[type=range]::-moz-range-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
}

input[type="range"]::-ms-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
}
/* ************************************************************************************* */
/* Tables */
/* ************************************************************************************* */
:root {
    --table-th-background: rgb(var(--black) / .08);
    --table-odd-background: rgb(var(--black) / .03);
}

table {
    width: 100%;
    border-radius: 1em;

    tr th:first-child {
        border-radius: .3em;
    }

    tr th:last-child {
        border-radius: .3em;
    }

    th {
        font-weight: bold;
        padding: .3em .6em;
        border-radius: .3em;
        background: var(--table-th-background);
        text-align: left;
    }

    tr {
        border-radius: .3em;
    }

    td {
        padding: .3em .6em;
        text-align: left;
        border-radius: .3em;
    }

    &.odd {
        tr:nth-child(even) {
            background: var(--table-odd-background);
        }
    }
}
:root {
    --precode-bg: rgb(var(--black) / .05);
    --precode-border: 1px solid rgb(var(--black) / .05);
}

/* ************************************************************************************* */
/* pre code классы */
/* ************************************************************************************* */
pre {
    margin: 0;
    overflow: hidden;
    border-radius: .6em;
    padding: 0;
    background-color: var(--precode-bg);
    font-family: var(--font-mono);
    font-size: var(--text-sm);

    code {
        display: block;
        overflow: hidden;
        overflow-x: auto;
        padding: 0.6rem ! Important;
        border-bottom: var(--precode-border);
    }

    button {
        border-radius: 0;
        color: var(--post-code-color);
        width: 100%;

        >.cm-icon {
            --icon-width-height: 1.3rem;
        }
    }
}
/* ************************************************************************************* */
/* blockquote */
/* ************************************************************************************* */
:root {
    --blockquote-bg: var(--post-reply-bg);
    --blockquote-border: var(--post-reply-border);
}

blockquote {
    position: relative;
    background-color: var(--blockquote-bg);
    padding: .3rem;
    padding-right: 1.5rem;
    border-radius: var(--radius-sm);
    border-left: var(--blockquote-border);
    color: var(--color-gray);
    width: 100%;
    margin: 3px 0;

    &:after {
        content: "”";
        position: absolute;
        top: 0;
        right: .3rem;
        font-size: 2rem;
        font-family: serif;
    }
}
/*!
  Theme: GitHub
  Description: Light theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-light
  Current colors taken from GitHub's CSS
*/
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  color: #d73a49
}

.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
  color: #6f42c1
}

.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id,
.hljs-variable {
  color: #005cc5
}

.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-string {
  color: #032f62
}

.hljs-built_in,
.hljs-symbol {
  color: #e36209
}

.hljs-code,
.hljs-comment,
.hljs-formula {
  color: #6a737d
}

.hljs-name,
.hljs-quote,
.hljs-selector-pseudo,
.hljs-selector-tag {
  color: #22863a
}

.hljs-subst {
  color: #24292e
}

.hljs-section {
  color: #005cc5;
  font-weight: 700
}

.hljs-bullet {
  color: #735c0f
}

.hljs-emphasis {
  color: #24292e;
  font-style: italic
}

.hljs-strong {
  color: #24292e;
  font-weight: 700
}

.hljs-addition {
  color: #22863a;
  background-color: #f0fff4
}

.hljs-deletion {
  color: #b31d28;
  background-color: #ffeef0
}


/*!
  Theme: GitHub Dark Dimmed
  Description: Dark dimmed theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Colors taken from GitHub's CSS
*/
html[theme=dark] {

  .hljs-doctag,
  .hljs-keyword,
  .hljs-meta .hljs-keyword,
  .hljs-template-tag,
  .hljs-template-variable,
  .hljs-type,
  .hljs-variable.language_ {
    color: #f47067
  }

  .hljs-title,
  .hljs-title.class_,
  .hljs-title.class_.inherited__,
  .hljs-title.function_ {
    color: #dcbdfb
  }

  .hljs-attr,
  .hljs-attribute,
  .hljs-literal,
  .hljs-meta,
  .hljs-number,
  .hljs-operator,
  .hljs-selector-attr,
  .hljs-selector-class,
  .hljs-selector-id,
  .hljs-variable {
    color: #6cb6ff
  }

  .hljs-meta .hljs-string,
  .hljs-regexp,
  .hljs-string {
    color: #96d0ff
  }

  .hljs-built_in,
  .hljs-symbol {
    color: #f69d50
  }

  .hljs-code,
  .hljs-comment,
  .hljs-formula {
    color: #768390
  }

  .hljs-name,
  .hljs-quote,
  .hljs-selector-pseudo,
  .hljs-selector-tag {
    color: #8ddb8c
  }

  .hljs-subst {
    color: #adbac7
  }

  .hljs-section {
    color: #316dca;
    font-weight: 700
  }

  .hljs-bullet {
    color: #eac55f
  }

  .hljs-emphasis {
    color: #adbac7;
    font-style: italic
  }

  .hljs-strong {
    color: #adbac7;
    font-weight: 700
  }

  .hljs-addition {
    color: #b4f1b4;
    background-color: #1b4721
  }

  .hljs-deletion {
    color: #ffd8d3;
    background-color: #78191b
  }
}
li {
    display: inline-block;

    &.list-type {
        &:before {
            content: "";
            display: inline-flex;
            width: .5rem;
            min-width: .5rem;
            aspect-ratio: 1 / 1;
            background-color: rgb(var(--primary));
            border-radius: 50%;
            margin-right: .6rem;
            vertical-align: middle;
        }
    }

}
:root {
    --gragndrop-bg: rgb(var(--white) / .5);
}

.cm-dragndrop {
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 1;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: var(--gragndrop-bg);
    backdrop-filter: blur(3px);
    border: 2px dashed var(--color-light);
    border-radius: 1rem;
    pointer-events: none;
}
@charset "utf-8";

@font-face {
    font-family: "Inter";
    font-optical-sizing: auto;
    font-weight: 400 500 600;
    font-display: swap;
    src: url("fonts/Inter-VariableFont_opsz,wght.ttf");
}

@font-face {
    font-family: "Adwaita Sans";
    font-optical-sizing: auto;
    font-weight: 400 500 600;
    font-display: swap;
    src: url("fonts/AdwaitaSans-Regular.ttf");
}

@font-face {
    font-family: "JetBrains Mono";
    font-optical-sizing: auto;
    font-weight: 400 500 600;
    font-display: swap;
    src: url("fonts/JetBrainsMono.ttf");
}
/* ************************************************************************************* */
/* Диалог: Login */
/* ************************************************************************************* */
.cm-modal-content.login {
    max-width: 20rem;
    min-width: auto;
    position: absolute;
    box-shadow: none;
    background-color: var(--body-bg);

    .cm-list {
        .item {
            border-radius: var(--radius-2xl);
            cursor: pointer;
            padding: .8rem;
            background-color: var(--list-item-hover-bg);

            &:hover {
                background-color: var(--list-item-focus-bg);
            }
        }
    }

}

@media only screen and (max-width: 600px) {

    .cm-modal-content.login {
        border-radius: 0;
        width: 100%;
        bottom: auto;
    }

}
/* ************************************************************************************* */
/* Диалог: registration */
/* ************************************************************************************* */
.cm-modal-content.registration {
    max-width: 20rem;
    min-width: auto;
    position: absolute;
    box-shadow: none;
    background-color: var(--body-bg);

}

@media only screen and (max-width: 600px) {

    .cm-modal-content.registration {
        border-radius: 0;
        width: 100%;
        bottom: auto;
    }

}
/* ************************************************************************************* */
/* Диалог: confirm */
/* ************************************************************************************* */
.cm-modal-content.confirm {
    max-width: 20rem;
    min-width: auto;
    position: absolute;
    box-shadow: none;
    background-color: var(--body-bg);

}

@media only screen and (max-width: 600px) {

    .cm-modal-content.confirm {
        border-radius: 0;
        width: 100%;
        bottom: auto;
    }

}
/* ************************************************************************************* */
/* Диалог: forgot-password */
/* ************************************************************************************* */
.cm-modal-content.forgot-password {
    max-width: 20rem;
    min-width: auto;
    position: absolute;
    box-shadow: none;
    background-color: var(--body-bg);

}

@media only screen and (max-width: 600px) {

    .cm-modal-content.forgot-password {
        border-radius: 0;
        width: 100%;
        bottom: auto;
    }

}

/* ************************************************************************************* */
/* Диалог: send-post-error */
/* ************************************************************************************* */
.cm-modal-content.send-post-error {
    max-width: 23rem;
    position: absolute;

}
/* ************************************************************************************* */
/* Диалог: delete-chat-post */
/* ************************************************************************************* */
.cm-modal-content.delete-chat-post {
    max-width: 23rem;
    position: absolute;

}
/* ************************************************************************************* */
/* Диалог: photo-crop */
/* ************************************************************************************* */
:root {
    --photo-crop-overlay-bg: rgb(var(--black) / .3);
}

.cm-modal-content.photo-crop {
    width: 100%;
    height: 100%;
    border-radius: 0;

    >.content {
        padding: 0;
        max-height: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative;

        >img {
            position: absolute;
            max-width: 100%;
            max-height: 100%;
            border-radius: 1rem;
        }

        .overlay-image {
            z-index: 10;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--photo-crop-overlay-bg);
        }

        .circle {
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            z-index: 999;
            overflow: hidden;
            box-sizing: content-box;

            >img {
                max-width: 100%;
                position: absolute;
                display: block;
                width: auto;
                height: auto;
                display: block;
                object-fit: contain;
                object-position: center;
            }
        }

    }

}
.cm-modal-content.sharing-files {
    max-width: 30rem;
    max-height: 90vh;
    min-width: 25rem;

    .cm-tabs {
        .labels {
            .label {
                position: relative;

                [data-counter] {
                    scale: 1;
                    position: absolute;
                    right: .6rem;
                    transition: all var(--animation-time);

                    &:empty {
                        scale: 0;
                    }
                }
            }
        }
    }

    .content {
        height: 100%;
        overflow: hidden;

        .cm-tabs-contents {
            border: 2px dashed var(--border-color);
            border-radius: var(--radius-lg);
            overflow: auto;

            .tab-content {
                overflow: hidden;
            }
        }

        .cm-list {
            height: 100%;
            min-height: 22vh;
            overflow: hidden;

            .item {
                padding: .3rem .3rem;

                >.icon-document {
                    position: relative;
                    overflow: hidden;
                    display: flex;
                    width: var(--avatar-s);
                    height: var(--avatar-s);
                    min-width: var(--avatar-s);
                    min-height: var(--avatar-s);
                    background-color: var(--post-document-icon-bg);
                    border-radius: 50%;
                    justify-content: center;
                    align-items: center;
                    box-shadow: var(--post-document-icon-shadow);

                    .cm-icon {
                        stroke: var(--post-document-icon-stroke);
                        width: 1.2rem;
                        height: 1.2rem;
                        min-width: 1.2rem;
                        min-height: 1.2rem;
                    }
                }

                [data-title] {
                    overflow: hidden;
                    white-space: nowrap;
                    width: 100%;

                    [data-name] {
                        color: var(--post-document-name-color);
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        display: block;
                    }

                    [data-size] {
                        color: var(--post-document-size-color);
                    }
                }
            }

            &[data-sending] {
                >.item {
                    [action-save] {
                        display: none;
                    }
                }
            }

            &[data-received] {
                >.item:not(.loaded) {
                    [action-save] {
                        display: none;
                    }
                }
            }

        }

    }

}

@media only screen and (max-width: 600px) {

    .cm-modal-content.sharing-files {
        position: absolute;
        bottom: 0;
        min-width: 100%;
        width: 100%;
    }

}
/* ************************************************************************************* */
/* Диалог: conference-device-select */
/* ************************************************************************************* */
.cm-modal-content.conference-device-select {
    max-width: 25rem;
}
/* ************************************************************************************* */
/* Диалог: invite-channel */
/* ************************************************************************************* */
.cm-modal-content.invite-channel {
    max-width: 25rem;
}
/* ************************************************************************************* */
/* Диалог: invite-group */
/* ************************************************************************************* */
.cm-modal-content.invite-group {
    max-width: 25rem;
}
/* ************************************************************************************* */
/* Диалог: invite-conference */
/* ************************************************************************************* */
.cm-modal-content.invite-conference {
    max-width: 25rem;

    .content {
        [data-preview] {
            position: relative;
            width: 100%;
            height: 100%;
            aspect-ratio: 16 / 9;
            border-radius: var(--radius-xl);
            overflow: hidden;

            [data-thumbnail] {
                object-fit: cover;
                width: 100%;
                height: 100%;
            }
        }

        &:has([data-thumbnail][src=""]) [data-preview] {
            display: none;
        }
    }

}
/* ************************************************************************************* */
/* Диалог: invite-broadcast */
/* ************************************************************************************* */
.cm-modal-content.invite-broadcast {
    max-width: 25rem;

    .content {
        [data-preview] {
            position: relative;
            width: 100%;
            height: 100%;
            aspect-ratio: 16 / 9;
            border-radius: var(--radius-xl);
            overflow: hidden;

            [data-thumbnail] {
                object-fit: cover;
                width: 100%;
                height: 100%;
            }
        }

        &:has([data-thumbnail][src=""]) [data-preview] {
            display: none;
        }
    }

}
.cm-modal-content.stickerpaks-subscribed {
    height: 25rem;
    max-height: 25rem;
    max-width: 23rem;

    .content {

        >.cm-list {
            overflow-y: auto;

            .item.pak {
                padding: 0;
                cursor: default;

                >.cm-list.stickers {
                    overflow: hidden;
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 2px;

                    .item.sticker {
                        padding: .5rem;
                        position: relative;
                        overflow: hidden;
                        border-radius: .2rem;
                        background-color: var(--sceleton-bg);

                        img {
                            width: 100%;
                            aspect-ratio: 1 / 1;
                            transform: translatez(1em);
                        }

                    }
                }
            }

        }

    }

}

@media only screen and (max-width: 600px) {

    .cm-modal-content.stickerpaks-subscribed {
        .content {
            >.cm-list {
                
            }
        }
    }

}
/* ************************************************************************************* */
/* Диалог: broadcasts-settings */
/* ************************************************************************************* */
.cm-modal-content.broadcasts-settings {
    max-width: 25rem;

    .content {}

}
:root {
    --bot-settings-path-item-bg: var(--list-item-bg);
}

.cm-modal-content.bot-menu {
    max-width: 23rem;
    border-radius: var(--radius-xl);

    >.header {

        .cm-list[data-path] {
            flex-wrap: wrap;
            gap: 3px;

            .item {
                position: relative;
                cursor: pointer;
                background-color: var(--bot-settings-path-item-bg);
                padding: .1rem .3rem;
            }

            &:empty {
                display: none;
            }
        }
    }

    >.content {
        .cm-list[data-menu] {
            .item {
                padding: .3rem;

                .cm-icon {
                    --icon-width-height: 1.2rem;
                }
            }
        }
    }

}
.cm-modal-content.group-add-moderator {
    max-width: 23rem;

    >.content {
        .cm-list[data-menu] {
            .item {
                padding: .3rem;

                .cm-icon {
                    --icon-width-height: 1.2rem;
                }
            }
        }
    }

}

:root {
    --home-left-width: 25rem;
    --home-middle-width: 100%;
    --home-middle-min-width: 43rem;
    --home-right-width: 25rem;
}

.cm-form:has(.cm-form-content.home) {
    padding: 0;
}

.cm-form-content.home {
    width: 100%;
    height: 100%;
    transition: background-color var(--animation-time);

    >.left {
        position: relative;
        z-index: 1;
        overflow: hidden;
        width: var(--home-left-width);
        min-width: var(--home-left-width);
        max-width: var(--home-left-width);
        border-right: 1px solid var(--border-color);

        .cm-form:not(:last-child)>.cm-form-content:not(.main):not(.menu):not(.group-topics) {
            transform: translate3d(-10%, 0, 0) !important;
        }

        &:has(.cm-form:last-child>.cm-form-content.slide-out-right) {
            .cm-form:nth-last-child(2)>.cm-form-content {
                transform: translate3d(0, 0, 0) !important;
            }
        }

    }

    >.middle {
        z-index: 2;
        position: relative;
        overflow: hidden;
        width: var(--home-middle-width);
        min-width: var(--home-middle-min-width);
        max-width: var(--home-middle-width);
        transition: width var(--animation-time), max-width var(--animation-time), min-width var(--animation-time);
    }

    >.right {
        z-index: 1;
        position: relative;
        overflow: hidden;
        width: var(--home-right-width);
        min-width: var(--home-right-width);
        max-width: var(--home-right-width);
        border-left: 1px solid var(--border-color);
        transition: width var(--animation-time), max-width var(--animation-time), min-width var(--animation-time);

        .cm-form:not(:last-child)>.cm-form-content {
            transform: translate3d(-10%, 0, 0) !important;
        }

        &:has(.cm-form:last-child>.cm-form-content.slide-out-right) {
            .cm-form:nth-last-child(2)>.cm-form-content {
                transform: translate3d(0, 0, 0) !important;
            }
        }

        &:empty {
            width: 0;
            min-width: 0;
            max-width: 0;
            border-left: 0px;
        }
    }

    /* Если правый контейнер в моменте закрыти */
    &:has(>.right .cm-form:only-child>.cm-form-content.slide-out-right) {
        >.right {
            width: 0;
            min-width: 0;
            max-width: 0;
        }
    }

}

@media only screen and (max-width: 600px) {

    .cm-form:has(.cm-form-content.home) {
        padding: 0;
    }

    .cm-form-content.home {
        position: relative;
        top: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;

        >.left {
            width: 100%;
            min-width: 100%;
            max-width: 100%;
            border-right: 0;
        }

        >.middle {
            display: none;
        }

        >.right {
            display: none;
            border-left: 0;
        }

    }

}

@media only screen and (max-width: 1250px) {
    .cm-form-content.home {
        >.right {
            position: absolute;
            right: 0;
            z-index: 3;
            top: 0;
            bottom: 0;
            box-shadow: var(--shadow-l);
        }
    }
}

@media only screen and (min-width: 1681px) {
    .cm-form:has(.cm-form-content.home) {
        justify-content: center;
    }

    .cm-form-content.home {
        max-width: 1680px;
        box-shadow: var(--shadow-xs);
    }
}

@media all and (display-mode: standalone) {}
:root {
    --channel-list-item-unread-count-bg: var(--badge-blue);
    --channel-list-item-mute-unread-count-bg: var(--badge-gray);
    --channel-list-item-unread-count-color: rgb(var(--white));
    --channel-list-item-topic-bg: rgb(var(--black) / .1);
    --channel-list-item-selected-bg: rgb(var(--black) / .1);
}

.cm-form-content.home:has(.cm-form-content.group-topics) {
    .cm-form-content.main {
        .cm-list {
            .item {
                [data-unread-count] {
                    position: absolute;
                    left: 2.1rem;
                }
            }
        }
    }
}

.cm-form-content.main {

    .cm-list {
        .item {
            position: relative;

            >.title {
                overflow: hidden;

                [data-name-wrap] {
                    [data-display-name] {
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    [data-time] {
                        white-space: nowrap;

                        .cm-icon {
                            --icon-width-height: 1.4rem;
                        }

                        &:empty {
                            display: none;
                        }
                    }
                }

                [data-last-post] {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    width: 100%;

                    [data-text] {
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        width: 100%;
                        display: block;
                    }

                    [data-attaches] {
                        gap: 2px;

                        .topic {
                            background-color: var(--channel-list-item-topic-bg);
                            border-radius: .3rem;
                            padding: .1rem .3rem;
                            line-height: 1.2;
                        }

                        &:empty {
                            display: none;
                        }

                        img {
                            width: 1.2rem;
                            height: 1.2rem;
                            border-radius: .3rem;
                        }
                    }

                    [data-unread-count] {
                        transition: all var(--animation-time);
                        display: flex;
                        flex: 0 0 auto;
                        justify-content: center;
                        align-items: center;
                        transform: scale(1);
                        background-color: var(--channel-list-item-unread-count-bg);
                        color: var(--channel-list-item-unread-count-color);
                        font-weight: var(--font-weight-bold);
                        border-radius: 2rem;
                        line-height: 1;
                        min-width: 1.3rem;
                        height: 1.3rem;
                        padding: .4rem;

                        &:empty {
                            transform: scale(0);
                        }
                    }
                }
            }

            &.mute {
                [data-unread-count] {
                    background-color: var(--channel-list-item-mute-unread-count-bg) !important;
                }
            }

        }
    }
}
.cm-form-content.home-wallpapers {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 4rem;
    min-width: 4rem;
    height: auto;
    border-radius: var(--radius-4xl);

    >.content {
        >.cm-list {
            padding: .3rem;

            .item {
                cursor: pointer;
                border-radius: 50%;

                [data-image] {
                    border-radius: 50%;
                    aspect-ratio: 1 / 1;
                }
            }
        }
    }

}
.cm-form-content.menu {
    width: 75%;
    min-width: 75%;
    box-shadow: var(--form-shadow);

    .content {

        >[action-profile] {
            cursor: pointer;
        }

        [data-link]:empty {
            display: none;
        }

        [data-bio]:empty {
            display: none;
        }

    }

    [data-sessions].cm-list {
        &:empty {
            display: none;
        }

        .item {
            [data-name] {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                display: block;
            }
        }

        &.active:after {
            position: absolute;
            content: "";
        }
    }
}
:root {
    --post-form-bg: rgb(var(--black) / .03);
    --post-wrap-max-width: 400px;
    --post-images-max-height: 400px;
    --post-images-min-width: 250px;

    --post-padding: 0;
    --post-bg: rgb(255 255 255);
    --post-unread-line-bg: rgb(var(--white) / .02);
    --post-text-line-height: var(--text-xs-lh);
    --post-border-radius: var(--radius-xl);
    --post-box-shadow: 0 0px 0px 1px rgb(var(--black) / .03), 0 2px 3px 0px rgb(var(--black) / .05);
    --post-forwarded-name-color: var(--color-gray);
    --post-reply-bg: rgb(var(--black) / .05);
    --post-reply-border: 3px solid rgb(var(--black) / .3);
    --post-reply-name-color: var(--color-base);
    --post-reply-text-color: var(--color-gray);
    --post-documents-bg: rgb(var(--color-second) / .03);
    --post-document-name-color: var(--color-base);
    --post-document-size-color: var(--color-gray);
    --post-document-icon-bg: rgb(var(--black) / .1);
    --post-document-icon-stroke: rgb(var(--black));
    --post-text-link-color: rgb(var(--primary));
    --post-text-link-underline: rgb(var(--primary) / .3);
    --post-precode-bg: var(--precode-bg);
    --post-status-stroke: var(--color-gray);
    --post-status-time-color: var(--color-gray);
    --post-status-time-bg: rgb(var(--black) / .7);
    --post-reactions-item-bg: rgb(var(--black) / .1);
    --post-reactions-item-active-bg: rgb(var(--primary));
    --post-reactions-item-count-color: var(--color-gray);
    --post-reactions-item-active-count-color: rgb(var(--white));
    --post-comments-hover-bg: rgb(var(--color-second) / .03);
    --post-selected-bg: rgb(var(--blue) / .1);
    --post-backlight-bg: rgb(var(--blue) / .1);
    --post-backlight-animation-time: 1s;
    --post-error-bg: rgb(var(--red) / .1);
    --post-edited-bg: rgb(var(--yellow) / .1);

    --post-second-bg: rgb(255 255 255);
    --post-second-forwarded-name-color: var(--color-gray);
    --post-second-reply-bg: rgb(var(--primary) / .03);
    --post-second-box-shadow: 0 0px 0px 1px rgb(var(--black) / .03), 0 2px 3px 0px rgb(var(--black) / .05);
    --post-second-reply-bg: rgb(var(--black) / .05);
    --post-second-reply-border: 3px solid rgb(var(--black) / .3);
    --post-second-reply-name-color: var(--color-base);
    --post-second-reply-text-color: var(--color-gray);
    --post-second-document-name-color: var(--color-base);
    --post-second-document-size-color: var(--color-gray);
    --post-second-document-icon-bg: rgb(var(--black) / .1);
    --post-second-document-icon-stroke: rgb(var(--black));
    --post-second-text-link-color: rgb(var(--primary));
    --post-second-text-link-underline: rgb(var(--primary) / .3);
    --post-second-precode-bg: var(--precode-bg);
    --post-second-status-time-color: var(--color-gray);
    --post-second-status-time-bg: rgb(var(--black) / .7);
    --post-second-status-stroke: var(--color-gray);
    --post-second-reactions-item-bg: rgb(var(--black) / .1);
    --post-second-reactions-item-active-bg: rgb(var(--primary));
    --post-second-reactions-item-count-color: var(--color-gray);
    --post-second-reactions-item-active-count-color: rgb(var(--white));

}

.cm-form-content.posts {

    .header {
        [action-profile-channel] {
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            [data-display-name] {
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }

    .content-wrapper {
        height: 100%;
        max-height: 100%;
        overflow: hidden;
        position: relative;
    }

    .content {
        background-color: var(--post-form-bg);
        position: relative;
        height: 100%;
        overflow-y: auto;

        >.cm-list {
            padding: 1rem 0;

            >[data-unread-post-separator] {
                margin: 1rem 0;
                padding: .3rem;
                background-color: var(--post-unread-line-bg);
            }

            >.item {
                position: relative;
                border-radius: 0;
                padding: .2rem;
                padding-left: 3rem;
                padding-right: 3rem;
                width: 100%;
                transition: all var(--animation-time);



                &.error {
                    background-color: var(--post-error-bg);

                    &.selected {
                        background-color: var(--post-error-bg);
                    }
                }

                &.selected {
                    background-color: var(--post-selected-bg);
                }

                &.edited {
                    background-color: var(--post-edited-bg);

                    >.wrap {
                        >attaches {
                            [action-delete] {
                                display: flex;
                            }
                        }
                    }
                }

                &.backlight {
                    animation: post-backlight var(--post-backlight-animation-time);
                    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
                    animation-iteration-count: 2;
                }

                &.sticker {
                    >.wrap {
                        background-color: transparent;
                        box-shadow: none;
                    }
                }

                >.cm-avatar {
                    margin-top: .15rem;
                }

                >.wrap {
                    padding: var(--post-padding);
                    background-color: var(--post-bg);
                    border-radius: var(--post-border-radius);
                    box-shadow: var(--post-box-shadow);
                    max-width: var(--post-wrap-max-width);
                    overflow: hidden;

                    >[data-display-name] {
                        padding: .6rem .6rem 0 .6rem;
                    }

                    &:has(>[data-display-name]:not(.none)) {
                        >[data-reply-wrap] {
                            padding: .3rem .6rem .3rem;
                        }
                    }

                    >forwarded {

                        &:empty {
                            display: none;
                        }

                        [data-forwarded] {
                            padding: .6rem .6rem .3rem .6rem;
                            line-height: 1;
                            cursor: pointer;

                            [data-display-name] {
                                color: var(--post-forwarded-name-color);
                            }
                        }
                    }

                    >[data-reply-wrap] {
                        padding: .6rem .6rem .3rem;

                        &:empty {
                            display: none;
                        }

                        [data-reply] {
                            padding: 0.3rem;
                            width: 100%;
                            max-width: 100%;
                            cursor: pointer;
                            border-radius: var(--radius-md);
                            background-color: var(--post-reply-bg);
                            border-left: var(--post-reply-border);
                            line-height: 1;

                            [data-title] {
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                width: 100%;
                            }

                            [data-display-name] {
                                white-space: nowrap;
                                color: var(--post-reply-name-color);
                            }

                            [data-text] {
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                width: 100%;
                                display: block;
                                color: var(--post-reply-text-color);
                            }

                            [data-image] {
                                height: 1rem;
                                width: 1rem;
                                min-width: 1rem;
                                min-height: 1rem;
                                border-radius: 0.3rem;
                                overflow: hidden;
                                aspect-ratio: 1 / 1;

                                >img {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }
                            }

                        }
                    }

                    >[data-text-wrap] {
                        padding: .4rem .6rem .4rem .6rem;
                        line-height: var(--post-text-line-height);

                        &:has([data-text]:empty) {
                            display: none;
                        }

                        [data-text] {
                            overflow-wrap: break-word;
                            display: inline;
                            white-space-collapse: break-spaces;
                            unicode-bidi: isolate;

                            a {
                                color: var(--post-text-link-color);
                                text-decoration: underline;
                                text-decoration-color: var(--post-text-link-underline);
                            }

                            pre {
                                background-color: var(--post-precode-bg);
                            }
                        }

                        [data-time] {
                            display: flex;
                            margin-left: .6rem;
                            color: var(--color-gray);
                            font-size: var(--text-xs);
                            float: right;
                            gap: 0.4rem;
                            align-items: center;
                            min-height: 1.4rem;

                            [data-status] {
                                stroke: var(--post-status-stroke);
                                width: 1.2rem;
                                height: 1.2rem;
                                min-width: 1.2rem;
                                min-height: 1.2rem;
                            }
                        }
                    }

                    &:has([data-display-name]:not(.none)):has([data-documents]:empty):has([data-images]:empty) {
                        >[data-text-wrap] {
                            padding: 0 .6rem .6rem .6rem;
                        }
                    }

                    &:has([data-documents]:not(:empty)),
                    &:has([data-images]:not(:empty)) {
                        >[data-display-name] {
                            padding: .3rem .6rem .3rem .6rem;
                        }
                    }

                    &:has([data-documents]:not(:empty)),
                    &:has([data-images]:not(:empty)) {
                        >attaches {
                            padding: 0;
                        }

                        >[data-text-wrap] {
                            padding: .4rem .6rem .4rem .6rem;
                        }
                    }

                    &:has([data-text]:empty) reactions {
                        padding: .3rem;
                    }

                    >sticker {
                        position: relative;

                        &:empty {
                            display: none;
                        }

                        img {
                            width: 128px;
                            height: 128px;
                        }

                        [data-time] {
                            position: absolute;
                            pointer-events: none;
                            bottom: 5px;
                            right: 5px;
                            display: flex;
                            padding: .2rem .5rem;
                            background-color: var(--post-status-time-bg);
                            border-radius: 1rem;
                            color: rgb(var(--white)) !Important;
                            font-size: var(--text-xs);
                            gap: 0.4rem;
                            align-items: center;
                            transition: all var(--animation-time);

                            [data-status] {
                                width: 1.2rem;
                                height: 1.2rem;
                                min-width: 1.2rem;
                                min-height: 1.2rem;
                                stroke: rgb(var(--white));
                            }
                        }

                        &:hover {
                            [data-time] {
                                opacity: 0;
                            }
                        }

                    }

                    >attaches {
                        position: relative;
                        padding: 0 0 .6rem 0;

                        [action-delete] {
                            transition: all var(--animation-time);
                            display: none;
                        }

                        &:has([data-documents]:not(:empty) .item:last-child:hover) {
                            [data-time] {
                                opacity: 0;
                            }
                        }

                        &:has([data-images]:not(:empty) .item:last-child:hover) {
                            [data-time] {
                                opacity: 0;
                            }
                        }

                        [data-images] {
                            padding: 0;
                            gap: 2px;

                            .item {
                                position: relative;
                                padding: 0;
                                border-radius: 0.2rem;
                                width: 100%;
                                height: 100%;
                                aspect-ratio: 1 / 1;
                                background-color: rgb(255 255 255 / .2);

                                img {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                    border-radius: .2rem;
                                    aspect-ratio: 1 / 1;
                                    background-color: rgb(255 255 255 / .2);
                                    transform: translatez(1em);
                                }

                                [action-delete] {
                                    position: absolute;
                                    top: .5rem;
                                    right: .5rem;
                                }
                            }

                            &:empty {
                                display: none;
                            }

                        }

                        /* Если 2 картинки */
                        [data-images]:has(> :last-child:nth-child(2)) {
                            grid-template-columns: repeat(2, calc(var(--post-wrap-max-width) / 2));
                            display: grid;
                        }

                        /* Если 3 картинки */
                        [data-images]:has(> :last-child:nth-child(3)) {
                            grid-template-columns: repeat(3, calc(var(--post-wrap-max-width) / 3));
                            display: grid;
                        }

                        /* Если 4 картинки */
                        [data-images]:has(> :last-child:nth-child(4)) {
                            grid-template-columns: repeat(2, calc(var(--post-wrap-max-width) / 2));
                            display: grid;

                            .item {
                                grid-column: span 1;
                                grid-row: span 1;
                            }
                        }

                        /* Если 5 картинок */
                        [data-images]:has(> :last-child:nth-child(5)) {
                            grid-template-columns: repeat(3, calc(var(--post-wrap-max-width) / 3));
                            display: grid;

                            .item:last-child {
                                grid-column: span 2;
                                grid-row: span 1;
                            }
                        }

                        /* Если 6 картинок */
                        [data-images]:has(> :last-child:nth-child(6)) {
                            grid-template-columns: repeat(3, calc(var(--post-wrap-max-width) / 3));
                            display: grid;

                            .item:nth-of-type(3n + 2) {
                                grid-column: span 2;
                                grid-row: span 2;
                            }
                        }

                        /* Если 7 картинок */
                        [data-images]:has(> :last-child:nth-child(7)) {
                            grid-template-columns: repeat(3, calc(var(--post-wrap-max-width) / 3));
                            display: grid;

                            .item:nth-of-type(4n+1) {
                                grid-column: span 2;
                                grid-row: span 2;
                            }

                            .item:last-child {
                                grid-column: span 3;
                                grid-row: span 2;
                            }
                        }

                        /* Если 8 картинок */
                        [data-images]:has(> :last-child:nth-child(8)) {
                            grid-template-columns: repeat(3, calc(var(--post-wrap-max-width) / 3));
                            display: grid;

                            .item:nth-of-type(4n+1) {
                                grid-column: span 2;
                                grid-row: span 2;
                            }

                            .item:last-child {
                                grid-column: span 2;
                                grid-row: span 1;
                            }
                        }

                        /* Если 9 картинок */
                        [data-images]:has(> :last-child:nth-child(9)) {
                            grid-template-columns: repeat(3, calc(var(--post-wrap-max-width) / 3));
                            display: grid;

                            .item:nth-of-type(5n) {
                                grid-column: span 2;
                                grid-row: span 2;
                            }

                            .item:last-child {
                                grid-column: span 1;
                                grid-row: span 1;
                            }
                        }

                        /* Если 10 картинок */
                        [data-images]:has(> :last-child:nth-child(10)) {
                            grid-template-columns: repeat(3, calc(var(--post-wrap-max-width) / 3));
                            display: grid;

                            .item:nth-child(5n) {
                                grid-column: span 2;
                                grid-row: span 1;
                            }
                        }

                        [data-documents] {
                            background-color: var(--post-documents-bg);
                            padding: 0.3rem;
                            margin: 1px;

                            .item.document {
                                padding: .3rem .3rem;

                                >.icon-document {
                                    position: relative;
                                    overflow: hidden;
                                    display: flex;
                                    width: var(--avatar-s);
                                    height: var(--avatar-s);
                                    min-width: var(--avatar-s);
                                    min-height: var(--avatar-s);
                                    background-color: var(--post-document-icon-bg);
                                    border-radius: 50%;
                                    justify-content: center;
                                    align-items: center;

                                    .cm-icon {
                                        stroke: var(--post-document-icon-stroke);
                                    }
                                }

                                [data-title] {
                                    overflow: hidden;
                                    white-space: nowrap;
                                    width: 100%;

                                    [data-name] {
                                        color: var(--post-document-name-color);
                                        overflow: hidden;
                                        white-space: nowrap;
                                        text-overflow: ellipsis;
                                        display: block;
                                    }

                                    [data-size] {
                                        color: var(--post-document-size-color);
                                    }
                                }
                            }

                            .item.audio {
                                [data-range] {
                                    padding: 0;
                                    width: 10rem;
                                }

                                [action-play] {
                                    background-color: rgb(var(--primary));

                                    svg {
                                        stroke: rgb(var(--white));
                                        fill: rgb(var(--white));
                                        width: 1.2rem;
                                        height: 1.2rem;
                                        min-width: 1.2rem;
                                        min-height: 1.2rem;
                                    }
                                }
                            }

                            &:empty {
                                display: none;
                            }
                        }

                        [data-time] {
                            position: absolute;
                            pointer-events: none;
                            bottom: 5px;
                            right: 5px;
                            display: flex;
                            padding: .2rem .5rem;
                            background-color: var(--post-status-time-bg);
                            border-radius: 1rem;
                            color: rgb(var(--white)) !Important;
                            font-size: var(--text-xs);
                            gap: 0.4rem;
                            align-items: center;
                            transition: all var(--animation-time);

                            [data-status] {
                                width: 1.2rem;
                                height: 1.2rem;
                                min-width: 1.2rem;
                                min-height: 1.2rem;
                                stroke: rgb(var(--white));
                            }
                        }

                        &:has([data-images]:empty):has([data-documents]:empty) {
                            display: none;
                        }

                    }

                    >reactions {
                        padding: 0 .6rem .6rem;

                        >.item {
                            padding: 0.1rem .5rem;
                            background-color: var(--post-reactions-item-bg);
                            border-radius: var(--radius-2xl);

                            [data-reaction] {
                                font-size: 1rem;
                            }

                            [data-count] {
                                color: var(--post-reactions-item-count-color);
                            }

                            &.active {
                                background-color: var(--post-reactions-item-active-bg);

                                [data-count] {
                                    color: var(--post-reactions-item-active-count-color);
                                }
                            }
                        }

                        &:empty {
                            display: none;
                        }
                    }

                    >comments {
                        padding: .4rem .6rem;
                        border-top: 1px solid var(--border-color);

                        &:hover {
                            background-color: var(--post-comments-hover-bg);
                        }

                        [data-avatars] {
                            .cm-avatar:not(:first-child) {
                                margin-left: -.6rem;
                            }

                            &:empty {
                                display: none;
                            }
                        }

                    }

                    >buttons {
                        display: flex;
                        flex-wrap: wrap;
                        padding: .6rem .6rem .6rem;
                        gap: .3rem;
                        border-top: 1px solid var(--border-color);

                        &:empty {
                            display: none;
                        }
                    }

                }

                &.second {
                    flex-direction: row-reverse;

                    >.wrap {
                        background: var(--post-second-bg);
                        box-shadow: var(--post-second-box-shadow);

                        >forwarded {
                            [data-forwarded] {
                                [data-display-name] {
                                    color: var(--post-second-forwarded-name-color);
                                }
                            }
                        }

                        >[data-reply-wrap] {
                            [data-reply] {
                                background-color: var(--post-second-reply-bg);
                                border-left: var(--post-second-reply-border);

                                [data-display-name] {
                                    color: var(--post-second-reply-name-color);
                                }

                                [data-text] {
                                    color: var(--post-second-reply-text-color);
                                }
                            }
                        }

                        >[data-text-wrap] {
                            [data-text] {
                                a {
                                    color: var(--post-second-text-link-color);
                                    text-decoration-color: var(--post-second-text-link-underline);
                                }

                                pre {
                                    background-color: var(--post-second-precode-bg);
                                }
                            }
                        }

                        [data-time] {
                            color: var(--post-second-status-time-color);

                            [data-status] {
                                stroke: var(--post-second-status-stroke);
                            }
                        }

                        >reactions {
                            >.item {
                                background-color: var(--post-second-reactions-item-bg);

                                [data-count] {
                                    color: var(--post-second-reactions-item-count-color);
                                }

                                &.active {
                                    background-color: var(--post-second-reactions-item-active-bg);

                                    [data-count] {
                                        color: var(--post-second-reactions-item-active-count-color);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .footer {
        [data-post-settings] {
            width: 100%;
            border-radius: 1rem;

            [data-reply-to] {
                width: 100%;

                &:empty {
                    display: none;
                }

                [data-reply] {
                    width: 100%;
                    max-width: 100%;
                    padding: .6rem;

                    [data-title] {
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        width: 100%;
                    }

                    [data-display-name] {
                        white-space: nowrap;
                    }

                    [data-text] {
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        width: 100%;
                        display: block;
                    }

                    [data-image] {
                        height: 2.5rem;
                        width: 2.5rem;
                        min-width: 2.5rem;
                        min-height: 2.5rem;
                        border-radius: 0.3em;
                        overflow: hidden;
                        aspect-ratio: 1 / 1;

                        >img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }

                }

                &:empty {
                    display: none;
                }
            }

            [data-temp-post] {
                [data-panel] {
                    width: 100%;
                    max-width: 100%;
                    padding: .6rem;

                    [data-title] {
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        width: 100%;
                    }

                    [data-title] {
                        white-space: nowrap;
                    }

                    [data-text] {
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        width: 100%;
                        display: block;
                    }

                    [data-image] {
                        height: 2.5rem;
                        width: 2.5rem;
                        min-width: 2.5rem;
                        min-height: 2.5rem;
                        border-radius: 0.3em;
                        overflow: hidden;
                        aspect-ratio: 1 / 1;

                        >img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                }

                &:empty {
                    display: none;
                }
            }

        }

        [data-text-settings] {
            width: 100%;
            padding: .3em .3em;
            height: auto;
            min-height: 3.5rem;

            [name=text] {
                overflow-y: auto;
                overflow-x: hidden;
                display: inline-block;
                white-space: pre-wrap;
                tab-size: 3;
                padding: .6em .3em;
                transition: height .1s;
                max-height: 12rem;
                line-height: var(--post-text-line-height);
            }

            [data-voice-timer] {
                min-height: 2.5rem;

                [data-indicator] {
                    width: .6rem;
                    height: .6rem;
                    border-radius: 50%;
                    background-color: rgb(var(--red));
                    box-shadow: 0 0 10px 0px rgb(var(--red));
                }
            }

        }

    }

}

.cm-form-content.home .right .cm-form-content.posts {

    :root {
        --post-wrap-max-width: 280px;
        --post-images-max-height: 400px;
    }

    .content {
        >.cm-list {
            >.item {
                padding-left: .6rem !important;
                padding-right: .6rem !important;

                >.wrap {
                    [data-text-wrap] {
                        line-height: 1.3;
                    }
                }

            }
        }
    }

}

@media only screen and (max-width: 600px) {

    :root {
        --post-wrap-max-width: 280px;
        --post-images-max-height: 400px;
    }

    .cm-form-content.posts {
        .content {
            >.cm-list {
                >.item {
                    padding-left: .6rem !important;
                    padding-right: .6rem !important;

                    >.wrap {
                        [data-text-wrap] {
                            line-height: 1.3;
                        }
                    }

                }
            }
        }
    }

}

@media only screen and (min-width: 1200px) {

    .cm-form-content.posts {
        .content {
            >.cm-list {
                >.item {

                    &.second {
                        flex-direction: row;
                    }

                }
            }
        }

        &[type=dialog],
        &[type=group],
        &[type=topic],
        &[type=conference],
        &[type=broadcast],
        &[type=bot] {
            .content {
                >.cm-list {
                    >.item {
                        .cm-avatar {
                            display: flex !important;
                        }
                    }
                }
            }
        }
    }

}

@keyframes post-backlight {
    0% {
        background-color: inherit;
    }

    50% {
        background-color: var(--post-backlight-bg);
    }

    100% {
        background-color: inherit;
    }
}
.cm-form-content.posts-search {
    .content {
        >.cm-list {
            .item {
                [data-text] {
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                }
            }
        }
    }
}
.cm-form-content.comments {

    [action-profile-channel] {
        cursor: pointer;
    }

    .content {

        >.cm-list {
            padding: 1rem 0;

            >[data-unread-comment-separator] {
                margin: 1rem 0;
                padding: .3rem;
            }

            >.item {
                position: relative;
                border-radius: 0;
                padding: .2rem;
                padding-left: 3rem;
                padding-right: 3rem;
                width: 100%;
                transition: all var(--animation-time);

                &.second {
                    flex-direction: row-reverse;

                    >.wrap {
                        background-color: var(--post-second-bg);
                        box-shadow: var(--post-second-box-shadow);
                    }
                }

                &.error {
                    background-color: var(--post-error-bg);

                    &.selected {
                        background-color: var(--post-error-bg);
                    }
                }

                &.selected {
                    background-color: var(--post-selected-bg);
                    padding-top: 1rem;
                    padding-bottom: 1rem;
                }

                &.edited {
                    background-color: var(--post-edited-bg);
                    padding-top: 1rem;
                    padding-bottom: 1rem;

                    >.wrap {
                        >attaches {
                            [action-delete] {
                                display: flex;
                            }
                        }
                    }
                }

                &.backlight {
                    padding-top: 1rem;
                    padding-bottom: 1rem;
                    animation: post-backlight var(--post-backlight-animation-time);
                    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
                    animation-iteration-count: 2;
                }

                >.cm-avatar {
                    margin-top: .3rem;
                }

                >.wrap {
                    padding: var(--post-padding);
                    background-color: var(--post-bg);
                    border-radius: var(--post-border-radius);
                    box-shadow: var(--post-box-shadow);
                    max-width: var(--post-wrap-max-width);
                    overflow: hidden;

                    >[data-display-name] {
                        padding: .3rem .6rem 0 .6rem;
                    }

                    &:has(>[data-display-name]:not(.none)) {
                        >[data-reply-wrap] {
                            padding: .3rem .6rem .3rem;
                        }
                    }

                    >[data-reply-wrap] {
                        padding: .6rem .6rem .3rem;

                        &:empty {
                            display: none;
                        }

                        [data-reply] {
                            padding: 0.3rem;
                            width: 100%;
                            max-width: 100%;
                            cursor: pointer;
                            border-radius: var(--radius-md);
                            background-color: var(--post-reply-bg);
                            border-left: 3px solid var(--color-base);
                            line-height: 1;

                            [data-title] {
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                width: 100%;
                            }

                            [data-display-name] {
                                white-space: nowrap;
                            }

                            [data-text] {
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                width: 100%;
                                display: block;
                            }

                            [data-image] {
                                height: 3rem;
                                width: 3rem;
                                min-width: 3rem;
                                min-height: 3rem;
                                border-radius: 0.3rem;
                                overflow: hidden;
                                aspect-ratio: 1 / 1;

                                >img {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }
                            }

                        }
                    }

                    >[data-text-wrap] {
                        padding: .4rem .6rem .4rem .6rem;
                        line-height: var(--post-text-line-height);

                        &:has([data-text]:empty) {
                            display: none;
                        }

                        [data-text] {
                            overflow-wrap: break-word;
                            display: inline;
                            white-space-collapse: break-spaces;
                        }

                        [data-time] {
                            display: flex;
                            margin-left: .6rem;
                            color: var(--color-gray);
                            font-size: var(--text-xs);
                            float: right;
                            gap: 0.4rem;
                            align-items: center;
                            min-height: 1.4rem;

                            [data-status] {
                                stroke: var(--color-gray);
                                min-width: 1rem;
                                min-height: 1rem;
                            }
                        }
                    }

                    &:has([data-display-name]:not(.none)):has([data-documents]:empty):has([data-images]:empty) {
                        >[data-text-wrap] {
                            padding: 0 .6rem .6rem .6rem;
                        }
                    }

                    &:has([data-documents]:not(:empty)),
                    &:has([data-images]:not(:empty)) {
                        >[data-display-name] {
                            padding: .3rem .6rem .3rem .6rem;
                        }
                    }

                    &:has([data-documents]:not(:empty)),
                    &:has([data-images]:not(:empty)) {
                        >attaches {
                            padding: 0;
                        }

                        >[data-text-wrap] {
                            padding: .4rem .6rem .4rem .6rem;
                        }
                    }

                    >attaches {
                        position: relative;
                        padding: 0 0 .6rem 0;

                        [action-delete] {
                            transition: all var(--animation-time);
                            display: none;
                        }

                        &:has([data-documents]:not(:empty) .item:last-child:hover) {
                            [data-time] {
                                opacity: 0;
                            }
                        }

                        &:has([data-images]:not(:empty) .item:last-child:hover) {
                            [data-time] {
                                opacity: 0;
                            }
                        }

                        [data-images] {
                            padding: 0;
                            gap: 2px;

                            .item {
                                position: relative;
                                padding: 0;
                                border-radius: 0;

                                img {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                    border-radius: .2rem;
                                    aspect-ratio: 1 / 1;
                                    background-color: rgb(255 255 255 / .2);
                                    transform: translatez(1em);
                                }

                                [action-delete] {
                                    position: absolute;
                                    top: .5rem;
                                    right: .5rem;
                                }
                            }

                            &:empty {
                                display: none;
                            }

                        }

                        /* Если 2 картинки */
                        [data-images]:has(> :last-child:nth-child(2)) {
                            grid-template-columns: repeat(2, calc(var(--post-wrap-max-width) / 2));
                            display: grid;
                        }

                        /* Если 3 картинки */
                        [data-images]:has(> :last-child:nth-child(3)) {
                            grid-template-columns: repeat(3, calc(var(--post-wrap-max-width) / 3));
                            display: grid;
                        }

                        /* Если 4 картинки */
                        [data-images]:has(> :last-child:nth-child(4)) {
                            grid-template-columns: repeat(2, calc(var(--post-wrap-max-width) / 2));
                            display: grid;

                            .item {
                                grid-column: span 1;
                                grid-row: span 1;
                            }
                        }

                        /* Если 5 картинок */
                        [data-images]:has(> :last-child:nth-child(5)) {
                            grid-template-columns: repeat(3, calc(var(--post-wrap-max-width) / 3));
                            display: grid;

                            .item:last-child {
                                grid-column: span 2;
                                grid-row: span 1;
                            }
                        }

                        /* Если 6 картинок */
                        [data-images]:has(> :last-child:nth-child(6)) {
                            grid-template-columns: repeat(3, calc(var(--post-wrap-max-width) / 3));
                            display: grid;

                            .item:nth-of-type(3n + 2) {
                                grid-column: span 2;
                                grid-row: span 2;
                            }
                        }

                        /* Если 7 картинок */
                        [data-images]:has(> :last-child:nth-child(7)) {
                            grid-template-columns: repeat(3, calc(var(--post-wrap-max-width) / 3));
                            display: grid;

                            .item:nth-of-type(4n+1) {
                                grid-column: span 2;
                                grid-row: span 2;
                            }

                            .item:last-child {
                                grid-column: span 3;
                                grid-row: span 2;
                            }
                        }

                        /* Если 8 картинок */
                        [data-images]:has(> :last-child:nth-child(8)) {
                            grid-template-columns: repeat(3, calc(var(--post-wrap-max-width) / 3));
                            display: grid;

                            .item:nth-of-type(4n+1) {
                                grid-column: span 2;
                                grid-row: span 2;
                            }

                            .item:last-child {
                                grid-column: span 2;
                                grid-row: span 1;
                            }
                        }

                        /* Если 9 картинок */
                        [data-images]:has(> :last-child:nth-child(9)) {
                            grid-template-columns: repeat(3, calc(var(--post-wrap-max-width) / 3));
                            display: grid;

                            .item:nth-of-type(5n) {
                                grid-column: span 2;
                                grid-row: span 2;
                            }

                            .item:last-child {
                                grid-column: span 1;
                                grid-row: span 1;
                            }
                        }

                        /* Если 10 картинок */
                        [data-images]:has(> :last-child:nth-child(10)) {
                            grid-template-columns: repeat(3, calc(var(--post-wrap-max-width) / 3));
                            display: grid;

                            .item:nth-child(5n) {
                                grid-column: span 2;
                                grid-row: span 1;
                            }
                        }

                        [data-documents] {
                            background-color: var(--post-documents-bg);
                            padding: 0.3rem;
                            margin: 1px;

                            .item {
                                padding: .3rem .3rem;

                                >.icon-document {
                                    position: relative;
                                    overflow: hidden;
                                    display: flex;
                                    width: var(--avatar-s);
                                    height: var(--avatar-s);
                                    min-width: var(--avatar-s);
                                    min-height: var(--avatar-s);
                                    background-color: var(--post-document-icon-bg);
                                    border-radius: 50%;
                                    justify-content: center;
                                    align-items: center;
                                    box-shadow: var(--post-document-icon-shadow);

                                    .cm-icon {
                                        stroke: var(--post-document-icon-stroke);
                                        width: 1.2rem;
                                        height: 1.2rem;
                                        min-width: 1.2rem;
                                        min-height: 1.2rem;
                                    }
                                }

                                [data-title] {
                                    overflow: hidden;
                                    white-space: nowrap;
                                    width: 100%;

                                    [data-name] {
                                        color: var(--post-document-name-color);
                                        overflow: hidden;
                                        white-space: nowrap;
                                        text-overflow: ellipsis;
                                        display: block;
                                    }

                                    [data-size] {
                                        color: var(--post-document-size-color);
                                    }
                                }
                            }

                            &:empty {
                                display: none;
                            }
                        }

                        [data-time] {
                            position: absolute;
                            pointer-events: none;
                            bottom: 5px;
                            right: 5px;
                            display: flex;
                            padding: .2rem .5rem;
                            background-color: rgb(var(--black) / .7);
                            border-radius: 1rem;
                            color: rgb(var(--white));
                            font-size: var(--text-xs);
                            gap: 0.4rem;
                            align-items: center;
                            transition: all var(--animation-time);

                            [data-status] {
                                stroke: rgb(var(--white));
                                min-width: 1rem;
                                min-height: 1rem;
                            }
                        }

                        &:has([data-images]:empty):has([data-documents]:empty) {
                            display: none;
                        }

                    }

                    >reactions {
                        &:empty {
                            display: none;
                        }
                    }

                }
            }
        }
    }

    .footer {
        [data-post-settings] {
            width: 100%;
            border-radius: 1rem;

            [data-reply-to] {
                width: 100%;

                &:empty {
                    display: none;
                }

                [data-reply] {
                    width: 100%;
                    max-width: 100%;
                    padding: .6rem;

                    [data-title] {
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        width: 100%;
                    }

                    [data-display-name] {
                        white-space: nowrap;
                    }

                    [data-text] {
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        width: 100%;
                        display: block;
                    }

                    [data-image] {
                        height: 2.5rem;
                        width: 2.5rem;
                        min-width: 2.5rem;
                        min-height: 2.5rem;
                        border-radius: 0.3em;
                        overflow: hidden;
                        aspect-ratio: 1 / 1;

                        >img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }

                }

                &:empty {
                    display: none;
                }
            }

            [data-temp-post] {
                [data-panel] {
                    width: 100%;
                    max-width: 100%;
                    padding: .6rem;

                    [data-title] {
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        width: 100%;
                    }

                    [data-title] {
                        white-space: nowrap;
                    }

                    [data-text] {
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        width: 100%;
                        display: block;
                    }

                    [data-image] {
                        height: 2.5rem;
                        width: 2.5rem;
                        min-width: 2.5rem;
                        min-height: 2.5rem;
                        border-radius: 0.3em;
                        overflow: hidden;
                        aspect-ratio: 1 / 1;

                        >img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                }

                &:empty {
                    display: none;
                }
            }

        }

        [data-text-settings] {
            width: 100%;
            padding: .3em .3em;
            height: auto;
            min-height: 3.5rem;

            [name=text] {
                padding: .6em .3em;
                transition: height .1s;
                max-height: 12rem;
                line-height: var(--post-text-line-height);
            }
        }

    }

}

@keyframes post-backlight {
    0% {
        background-color: inherit;
    }

    50% {
        background-color: var(--post-backlight-bg);
    }

    100% {
        background-color: inherit;
    }
}

@media only screen and (max-width: 600px) {

    .cm-form-content.comments {
        .content {
            >.cm-list {
                >.item {
                    padding-left: .6rem !important;
                    padding-right: .6rem !important;

                    >.wrap {
                        [data-text-wrap] {
                            line-height: 1.3;
                        }
                    }

                }
            }
        }
    }

}
.cm-form-content.secret-dialog {

    [action-profile-user] {
        cursor: pointer;

        [data-display-name] {
            .cm-icon {
                width: 1.3rem;
                min-width: 1.3rem;
            }
        }

        [data-subtitle] {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 100%;
            display: block;
        }
    }

    .content {

        >.cm-list {
            padding: 1rem 0;

            >[data-unread-post-separator] {
                margin: 1rem 0;
                padding: .3rem;
            }

            >.item {
                position: relative;
                border-radius: 0;
                padding: .25rem;
                padding-left: 3rem;
                padding-right: 3rem;
                width: 100%;
                transition: all var(--animation-time);

                &.second {
                    flex-direction: row-reverse;

                    >.wrap {
                        background-color: var(--post-second-bg);
                        box-shadow: var(--post-second-box-shadow);
                    }
                }

                &.error {
                    background-color: var(--post-error-bg);

                    &.selected {
                        background-color: var(--post-error-bg);
                    }
                }

                &.selected {
                    background-color: var(--post-selected-bg);
                    padding-top: 1rem;
                    padding-bottom: 1rem;
                }

                &.edited {
                    background-color: var(--post-edited-bg);
                    padding-top: 1rem;
                    padding-bottom: 1rem;

                    >.wrap {
                        >attaches {
                            [action-delete] {
                                display: flex;
                            }
                        }
                    }
                }

                &.backlight {
                    padding-top: 1rem;
                    padding-bottom: 1rem;
                    animation: post-backlight var(--post-backlight-animation-time);
                    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
                    animation-iteration-count: 2;
                }

                >.cm-avatar {
                    margin-top: .3rem;
                }

                >.wrap {
                    padding: var(--post-padding);
                    background-color: var(--post-bg);
                    border-radius: var(--post-border-radius);
                    box-shadow: var(--post-box-shadow);
                    max-width: var(--post-wrap-max-width);
                    overflow: hidden;

                    >[data-display-name] {
                        padding: .3rem .6rem 0 .6rem;
                    }

                    &:has(>[data-display-name]:not(.none)) {
                        >[data-reply-wrap] {
                            padding: .3rem .6rem .3rem;
                        }
                    }

                    >forwarded {

                        &:empty {
                            display: none;
                        }

                        [data-forwarded] {
                            padding: .6rem .6rem .3rem .6rem;
                            line-height: 1;
                            cursor: pointer;
                        }
                    }

                    >[data-reply-wrap] {
                        padding: .6rem .6rem .3rem;

                        &:empty {
                            display: none;
                        }

                        [data-reply] {
                            padding: 0.3rem;
                            width: 100%;
                            max-width: 100%;
                            cursor: pointer;
                            border-radius: var(--radius-md);
                            background-color: var(--post-reply-bg);
                            border-left: 3px solid var(--color-base);
                            line-height: 1;

                            [data-title] {
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                width: 100%;
                            }

                            [data-display-name] {
                                white-space: nowrap;
                            }

                            [data-text] {
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                width: 100%;
                                display: block;
                            }

                            [data-image] {
                                height: 3rem;
                                width: 3rem;
                                min-width: 3rem;
                                min-height: 3rem;
                                border-radius: 0.3rem;
                                overflow: hidden;
                                aspect-ratio: 1 / 1;

                                >img {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }
                            }

                        }
                    }

                    >[data-text-wrap] {
                        padding: .4rem .6rem .4rem .6rem;
                        line-height: var(--post-text-line-height);

                        &:has([data-text]:empty) {
                            display: none;
                        }

                        [data-text] {
                            overflow-wrap: break-word;
                            display: inline;
                            white-space-collapse: break-spaces;
                        }

                        [data-time] {
                            display: flex;
                            margin-left: .6rem;
                            color: var(--color-gray);
                            font-size: var(--text-xs);
                            float: right;
                            gap: 0.4rem;
                            align-items: center;
                            min-height: 1.4rem;

                            [data-status] {
                                stroke: var(--color-gray);
                                min-width: 1rem;
                                min-height: 1rem;
                            }
                        }
                    }

                    &:has([data-display-name]:not(.none)):has([data-documents]:empty):has([data-images]:empty) {
                        >[data-text-wrap] {
                            padding: 0 .6rem .6rem .6rem;
                        }
                    }

                    &:has([data-documents]:not(:empty)),
                    &:has([data-images]:not(:empty)) {
                        >[data-display-name] {
                            padding: .3rem .6rem .3rem .6rem;
                        }
                    }

                    &:has([data-documents]:not(:empty)),
                    &:has([data-images]:not(:empty)) {
                        >attaches {
                            padding: 0;
                        }

                        >[data-text-wrap] {
                            padding: .4rem .6rem .4rem .6rem;
                        }
                    }

                    >attaches {
                        position: relative;
                        padding: 0 0 .6rem 0;

                        [action-delete] {
                            transition: all var(--animation-time);
                            scale: 0;
                        }

                        [action-save] {
                            transition: all var(--animation-time);
                            scale: 0;
                        }

                        [action-delete] {
                            transition: all var(--animation-time);
                            display: none;
                        }

                        &:has([data-documents]:not(:empty) .item:last-child:hover) {
                            [data-time] {
                                opacity: 0;
                            }
                        }

                        &:has([data-images]:not(:empty) .item:last-child:hover) {
                            [data-time] {
                                opacity: 0;
                            }
                        }

                        [data-images] {
                            padding: 0;
                            gap: 2px;

                            .item {
                                position: relative;
                                padding: 0;
                                border-radius: 0;

                                img {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                    border-radius: .2rem;
                                    aspect-ratio: 1 / 1;
                                    background-color: rgb(255 255 255 / .2);
                                    transform: translatez(1em);
                                }

                                [action-delete] {
                                    position: absolute;
                                    top: .5rem;
                                    right: .5rem;
                                }
                            }

                            &:empty {
                                display: none;
                            }

                        }

                        /* Если 2 картинки */
                        [data-images]:has(> :last-child:nth-child(2)) {
                            grid-template-columns: repeat(2, calc(var(--post-wrap-max-width) / 2));
                            display: grid;
                        }

                        /* Если 3 картинки */
                        [data-images]:has(> :last-child:nth-child(3)) {
                            grid-template-columns: repeat(3, calc(var(--post-wrap-max-width) / 3));
                            display: grid;
                        }

                        /* Если 4 картинки */
                        [data-images]:has(> :last-child:nth-child(4)) {
                            grid-template-columns: repeat(2, calc(var(--post-wrap-max-width) / 2));
                            display: grid;

                            .item {
                                grid-column: span 1;
                                grid-row: span 1;
                            }
                        }

                        /* Если 5 картинок */
                        [data-images]:has(> :last-child:nth-child(5)) {
                            grid-template-columns: repeat(3, calc(var(--post-wrap-max-width) / 3));
                            display: grid;

                            .item:last-child {
                                grid-column: span 2;
                                grid-row: span 1;
                            }
                        }

                        /* Если 6 картинок */
                        [data-images]:has(> :last-child:nth-child(6)) {
                            grid-template-columns: repeat(3, calc(var(--post-wrap-max-width) / 3));
                            display: grid;

                            .item:nth-of-type(3n + 2) {
                                grid-column: span 2;
                                grid-row: span 2;
                            }
                        }

                        /* Если 7 картинок */
                        [data-images]:has(> :last-child:nth-child(7)) {
                            grid-template-columns: repeat(3, calc(var(--post-wrap-max-width) / 3));
                            display: grid;

                            .item:nth-of-type(4n+1) {
                                grid-column: span 2;
                                grid-row: span 2;
                            }

                            .item:last-child {
                                grid-column: span 3;
                                grid-row: span 2;
                            }
                        }

                        /* Если 8 картинок */
                        [data-images]:has(> :last-child:nth-child(8)) {
                            grid-template-columns: repeat(3, calc(var(--post-wrap-max-width) / 3));
                            display: grid;

                            .item:nth-of-type(4n+1) {
                                grid-column: span 2;
                                grid-row: span 2;
                            }

                            .item:last-child {
                                grid-column: span 2;
                                grid-row: span 1;
                            }
                        }

                        /* Если 9 картинок */
                        [data-images]:has(> :last-child:nth-child(9)) {
                            grid-template-columns: repeat(3, calc(var(--post-wrap-max-width) / 3));
                            display: grid;

                            .item:nth-of-type(5n) {
                                grid-column: span 2;
                                grid-row: span 2;
                            }

                            .item:last-child {
                                grid-column: span 1;
                                grid-row: span 1;
                            }
                        }

                        /* Если 10 картинок */
                        [data-images]:has(> :last-child:nth-child(10)) {
                            grid-template-columns: repeat(3, calc(var(--post-wrap-max-width) / 3));
                            display: grid;

                            .item:nth-child(5n) {
                                grid-column: span 2;
                                grid-row: span 1;
                            }
                        }

                        [data-documents] {
                            background-color: var(--post-documents-bg);
                            padding: 0.3rem;
                            margin: 1px;

                            .item {
                                padding: .3rem .3rem;

                                >.icon-document {
                                    position: relative;
                                    overflow: hidden;
                                    display: flex;
                                    width: var(--avatar-s);
                                    height: var(--avatar-s);
                                    min-width: var(--avatar-s);
                                    min-height: var(--avatar-s);
                                    background-color: var(--post-document-icon-bg);
                                    border-radius: 50%;
                                    justify-content: center;
                                    align-items: center;
                                    box-shadow: var(--post-document-icon-shadow);

                                    .cm-icon {
                                        stroke: var(--post-document-icon-stroke);
                                        width: 1.2rem;
                                        height: 1.2rem;
                                        min-width: 1.2rem;
                                        min-height: 1.2rem;
                                    }
                                }

                                [data-title] {
                                    overflow: hidden;
                                    white-space: nowrap;
                                    width: 100%;

                                    [data-name] {
                                        color: var(--post-document-name-color);
                                        overflow: hidden;
                                        white-space: nowrap;
                                        text-overflow: ellipsis;
                                        display: block;
                                    }

                                    [data-size] {
                                        color: var(--post-document-size-color);
                                    }
                                }

                                &.loaded [action-save] {
                                    scale: 1;
                                }

                            }

                            &:empty {
                                display: none;
                            }
                        }

                        [data-time] {
                            position: absolute;
                            pointer-events: none;
                            bottom: 5px;
                            right: 5px;
                            display: flex;
                            padding: .2rem .5rem;
                            background-color: rgb(var(--black) / .7);
                            border-radius: 1rem;
                            color: rgb(var(--white));
                            font-size: var(--text-xs);
                            gap: 0.4rem;
                            align-items: center;
                            transition: all var(--animation-time);

                            [data-status] {
                                stroke: rgb(var(--white));
                                min-width: 1rem;
                                min-height: 1rem;
                            }
                        }

                        &:has([data-images]:empty):has([data-documents]:empty) {
                            display: none;
                        }

                    }

                    >reactions {
                        &:empty {
                            display: none;
                        }
                    }

                    >comments {
                        padding: .6rem .6rem .6rem;
                        border-top: 1px solid var(--border-color);

                        &:hover {
                            background-color: var(--post-comments-hover-bg);
                        }

                        [data-avatars] {
                            &:empty {
                                display: none;
                            }
                        }

                    }

                }
            }
        }
    }

    .footer {
        [data-post-settings] {
            width: 100%;
            border-radius: 1rem;

            [data-reply-to] {
                width: 100%;

                &:empty {
                    display: none;
                }

                [data-reply] {
                    width: 100%;
                    max-width: 100%;
                    padding: .6rem;

                    [data-title] {
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        width: 100%;
                    }

                    [data-display-name] {
                        white-space: nowrap;
                    }

                    [data-text] {
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        width: 100%;
                        display: block;
                    }

                }

                &:empty {
                    display: none;
                }
            }

            [data-temp-post] {
                [data-panel] {
                    width: 100%;
                    max-width: 100%;
                    padding: .6rem;

                    [data-title] {
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        width: 100%;
                    }

                    [data-title] {
                        white-space: nowrap;
                    }

                    [data-text] {
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        width: 100%;
                        display: block;
                    }

                    [data-image] {
                        height: 2.5rem;
                        width: 2.5rem;
                        min-width: 2.5rem;
                        min-height: 2.5rem;
                        border-radius: 0.3em;
                        overflow: hidden;
                        aspect-ratio: 1 / 1;

                        >img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                }

                &:empty {
                    display: none;
                }
            }

        }

        [data-text-settings] {
            width: 100%;
            padding: .3em .3em;
            height: auto;
            min-height: 3.5rem;

            [name=text] {
                padding: .6em .3em;
                transition: height .1s;
                max-height: 12rem;
                line-height: var(--post-text-line-height);
            }
        }

    }

}

@media only screen and (max-width: 600px) {

    .cm-form-content.secret-dialog {
        .content {
            >.cm-list {
                >.item {
                    padding-left: .6rem !important;
                    padding-right: .6rem !important;

                    >.wrap {
                        [data-text-wrap] {
                            line-height: 1.3;
                        }
                    }

                }
            }
        }
    }

}
:root {
    --caller-content-bg: radial-gradient(circle, var(--form-content-bg) -50%, rgb(var(--black) 79%));
    --caller-footer-height: 4rem;
}

.cm-form-content.caller {

    .header {
        position: absolute;
        top: 1rem;
        width: 100%;
        padding: .3rem 1rem;
        min-height: 4rem;
        max-height: 4rem;
        align-items: center;
        justify-content: center;
        z-index: 2;
        transition: transform var(--animation-time);
        transform: translateY(-5rem);
        text-shadow: 0px 0px 3px black;
        color: rgb(var(--white));

        &.active {
            transform: translateY(0);
        }
    }

    .content {
        position: relative;
        background: var(--caller-content-bg);

        .video-container {
            position: absolute;
            z-index: 1;
            height: 100%;
            width: 100%;
            overflow: hidden;

            &.contain {
                video {
                    object-fit: cover;
                }
            }

            &.switch {
                cursor: pointer;
                position: absolute;
                right: 1rem;
                bottom: calc(2rem + var(--caller-footer-height));
                width: 40%;
                height: auto;
                z-index: 2;
                border-radius: 0.5rem;
                overflow: hidden;
                transition: bottom var(--animation-time);

                video {
                    object-fit: cover;
                }

                [action-size] {
                    display: none;
                }
            }

            video {
                height: 100%;
                width: 100%;
                background: var(--caller-content-bg);
            }

            [action-size] {
                position: absolute;
                top: calc(1rem + var(--caller-footer-height));
                left: 1rem;
                z-index: 5;
                background-color: rgb(var(--black) / .8);
                transition: top var(--animation-time);

                .cm-icon {
                    stroke: rgb(var(--white));
                }

            }
        }

        [data-video-container-local] {
            [action-switch-camera] {
                position: absolute;
                top: calc(1rem + var(--caller-footer-height));
                right: 1rem;
                z-index: 5;
                background-color: rgb(var(--black) / .8);
                transition: top var(--animation-time);

                .cm-icon {
                    stroke: rgb(var(--white));
                }
            }

            &.switch {
                [action-switch-camera] {
                    top: 1rem;
                }
            }
        }
    }

    .footer {
        position: absolute;
        bottom: 1rem;
        width: 100%;
        padding: .3rem 1rem;
        min-height: 4rem;
        max-height: 4rem;
        align-items: center;
        justify-content: center;
        z-index: 2;
        transition: transform var(--animation-time);
        transform: translateY(5rem);

        buttons {
            width: 100%;
            height: var(--caller-footer-height);
            background-color: rgb(var(--black) / .8);
            border-radius: var(--radius-xl);

            button {
                min-width: 3rem;
                min-height: 3rem;
                background-color: rgb(var(--white) / .05);

                .cm-icon {
                    stroke: rgb(var(--white));
                }

                &.active {
                    background-color: rgb(var(--white));

                    .cm-icon {
                        stroke: rgb(var(--black))
                    }
                }
            }

        }

        &.active {
            transform: translateY(0);
        }

    }

    &:has(.footer:not(.active)) {
        .video-container.switch {
            bottom: 1rem;
        }

        [action-size] {
            top: 1rem;
        }

        [data-video-container-local] {
            [action-switch-camera] {
                top: 1rem;
            }
        }
    }

}
.cm-form-content.channel-profile {

    .cm-tabs-contents {
        [data-tab-content="media"] {

            .cm-list {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 2px;

                >.item {
                    padding: 0;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        border-radius: .2rem;
                        aspect-ratio: 1 / 1;
                        background-color: var(--sceleton-bg);
                        transform: translatez(1em);
                    }
                }
            }

        }

        [data-tab-content="albums"] {

            &:has([action-create-album]:not(.none)) {
                padding-top: .5rem;
            }

            [action-create-album] {
                .cm-icon {
                    width: 1.2rem;
                    height: 1.2rem;
                    min-width: 1.2rem;
                    min-height: 1.2rem;
                }
            }

            .cm-list {
                >.item {
                    position: relative;
                    padding: 0;
                    overflow: hidden;

                    .image-wrap {

                        .image {
                            width: 100%;
                            height: 100%;
                            border-radius: .6rem;
                            aspect-ratio: 16 / 12;
                            background-color: var(--sceleton-bg);
                            background-position: center;
                            background-repeat: no-repeat;
                            background-size: cover;
                            transform: translatez(1em);
                        }
                    }

                    .title {
                        position: absolute;
                        bottom: 0rem;
                        background: linear-gradient(0deg, rgb(var(--black) / .7), transparent);
                    }
                }
            }
        }

        [data-tab-content="documents"] {

            .cm-list {

                >.item {
                    padding: .3rem .3rem;

                    >.icon-document {
                        position: relative;
                        overflow: hidden;
                        display: flex;
                        width: var(--avatar-s);
                        height: var(--avatar-s);
                        min-width: var(--avatar-s);
                        min-height: var(--avatar-s);
                        background-color: var(--post-document-icon-bg);
                        border-radius: 50%;
                        justify-content: center;
                        align-items: center;

                        .cm-icon {
                            stroke: var(--post-document-icon-stroke);
                            width: 1.2rem;
                            height: 1.2rem;
                            min-width: 1.2rem;
                            min-height: 1.2rem;
                        }
                    }

                    [data-title] {
                        overflow: hidden;
                        white-space: nowrap;
                        width: 100%;

                        [data-name] {
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            display: block;
                        }

                        [data-size] {
                            color: var(--post-document-size-color);
                        }
                    }
                }
            }
        }
    }

}
.cm-form-content.channel-settings {
    .content {
        .avatar-wrap {
            position: relative;
            cursor: pointer;
            border-radius: 50%;

            .icon-wrap {
                pointer-events: none;
                background-color: var(--form-content-bg);
                padding: .3rem;
                border-radius: 50%;
                position: absolute;
                bottom: 0;
                right: 0;
            }
        }
    }
}
.cm-form-content.group-topics {
    position: absolute;
    width: 75%;
    min-width: 75%;
    right: 0;
    box-shadow: var(--form-shadow);

    .header {
        [data-name] {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 100%;
        }
    }

    .cm-list {
        .item {

            >.title {
                overflow: hidden;

                [data-name-wrap] {
                    [data-time] {

                        &:empty {
                            display: none;
                        }
                    }
                }

                [data-last-post] {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    width: 100%;

                    [data-text] {
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        width: 100%;
                        display: block;
                    }

                    [data-attaches] {
                        gap: 2px;

                        &:empty {
                            display: none;
                        }

                        img {
                            width: 1.2rem;
                            height: 1.2rem;
                            border-radius: .3rem;
                        }
                    }

                    [data-unread-count] {
                        transition: all var(--animation-time);
                        display: flex;
                        flex: 0 0 auto;
                        justify-content: center;
                        align-items: center;
                        transform: scale(1);
                        background-color: var(--channel-list-item-unread-count-bg);
                        color: var(--channel-list-item-unread-count-color);
                        font-weight: var(--font-weight-bold);
                        border-radius: 2rem;
                        line-height: 1;
                        min-width: 1.3rem;
                        height: 1.3rem;
                        padding: .4rem;

                        &:empty {
                            transform: scale(0);
                        }
                    }
                }
            }
        }
    }
}
.cm-form-content.group-profile {

    .cm-tabs-contents {
        [data-tab-content="media"] {

            .cm-list {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 2px;

                >.item {
                    padding: 0;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        border-radius: .2rem;
                        aspect-ratio: 1 / 1;
                        background-color: var(--sceleton-bg);
                        transform: translatez(1em);
                    }
                }
            }

        }

        [data-tab-content="albums"] {

            &:has([action-create-album]:not(.none)) {
                padding-top: .5rem;
            }

            [action-create-album] {
                .cm-icon {
                    width: 1.2rem;
                    height: 1.2rem;
                    min-width: 1.2rem;
                    min-height: 1.2rem;
                }
            }

            .cm-list {
                >.item {
                    position: relative;
                    padding: 0;
                    overflow: hidden;

                    .image-wrap {

                        .image {
                            width: 100%;
                            height: 100%;
                            border-radius: .6rem;
                            aspect-ratio: 16 / 12;
                            background-color: var(--sceleton-bg);
                            background-position: center;
                            background-repeat: no-repeat;
                            background-size: cover;
                            transform: translatez(1em);
                        }
                    }

                    .title {
                        position: absolute;
                        bottom: 0rem;
                        background: linear-gradient(0deg, rgb(var(--black) / .7), transparent);
                    }
                }
            }
        }

        [data-tab-content="documents"] {

            .cm-list {

                >.item {
                    padding: .3rem .3rem;

                    >.icon-document {
                        position: relative;
                        overflow: hidden;
                        display: flex;
                        width: var(--avatar-s);
                        height: var(--avatar-s);
                        min-width: var(--avatar-s);
                        min-height: var(--avatar-s);
                        background-color: var(--post-document-icon-bg);
                        border-radius: 50%;
                        justify-content: center;
                        align-items: center;

                        .cm-icon {
                            stroke: var(--post-document-icon-stroke);
                            width: 1.2rem;
                            height: 1.2rem;
                            min-width: 1.2rem;
                            min-height: 1.2rem;
                        }
                    }

                    [data-title] {
                        overflow: hidden;
                        white-space: nowrap;
                        width: 100%;

                        [data-name] {
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            display: block;
                        }

                        [data-size] {
                            color: var(--post-document-size-color);
                        }
                    }
                }
            }
        }
    }

}
.cm-form-content.group-settings {
    .content {
        .avatar-wrap {
            position: relative;
            cursor: pointer;
            border-radius: 50%;

            .icon-wrap {
                pointer-events: none;
                background-color: var(--form-content-bg);
                padding: .3rem;
                border-radius: 50%;
                position: absolute;
                bottom: -5px;
                right: -10px;
            }
        }
    }
}
.cm-form-content.topic-profile {

    .cm-tabs-contents {
        [data-tab-content="media"] {

            .cm-list {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 2px;

                >.item {
                    padding: 0;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        border-radius: .2rem;
                        aspect-ratio: 1 / 1;
                        background-color: var(--sceleton-bg);
                        transform: translatez(1em);
                    }
                }
            }

        }

        [data-tab-content="albums"] {

            &:has([action-create-album]:not(.none)) {
                padding-top: .5rem;
            }

            [action-create-album] {
                .cm-icon {
                    width: 1.2rem;
                    height: 1.2rem;
                    min-width: 1.2rem;
                    min-height: 1.2rem;
                }
            }

            .cm-list {
                >.item {
                    position: relative;
                    padding: 0;
                    overflow: hidden;

                    .image-wrap {

                        .image {
                            width: 100%;
                            height: 100%;
                            border-radius: .6rem;
                            aspect-ratio: 16 / 12;
                            background-color: var(--sceleton-bg);
                            background-position: center;
                            background-repeat: no-repeat;
                            background-size: cover;
                            transform: translatez(1em);
                        }
                    }

                    .title {
                        position: absolute;
                        bottom: 0rem;
                        background: linear-gradient(0deg, rgb(var(--black) / .7), transparent);
                    }
                }
            }
        }

        [data-tab-content="documents"] {

            .cm-list {

                >.item {
                    padding: .3rem .3rem;

                    >.icon-document {
                        position: relative;
                        overflow: hidden;
                        display: flex;
                        width: var(--avatar-s);
                        height: var(--avatar-s);
                        min-width: var(--avatar-s);
                        min-height: var(--avatar-s);
                        background-color: var(--post-document-icon-bg);
                        border-radius: 50%;
                        justify-content: center;
                        align-items: center;

                        .cm-icon {
                            stroke: var(--post-document-icon-stroke);
                            width: 1.2rem;
                            height: 1.2rem;
                            min-width: 1.2rem;
                            min-height: 1.2rem;
                        }
                    }

                    [data-title] {
                        overflow: hidden;
                        white-space: nowrap;
                        width: 100%;

                        [data-name] {
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            display: block;
                        }

                        [data-size] {
                            color: var(--post-document-size-color);
                        }
                    }
                }
            }
        }
    }

}
.cm-form-content.dialog-profile {

    [action-profile] {
        cursor: pointer;
    }

    .cm-tabs-contents {
        [data-tab-content="media"] {

            .cm-list {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 2px;
                padding: 0;

                >.item {
                    padding: 0;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        border-radius: .2rem;
                        aspect-ratio: 1 / 1;
                        background-color: var(--sceleton-bg);
                        transform: translatez(1em);
                    }
                }
            }

        }

        [data-tab-content="documents"] {

            .cm-list {

                >.item {
                    padding: .3rem .3rem;

                    >.icon-document {
                        position: relative;
                        overflow: hidden;
                        display: flex;
                        width: var(--avatar-s);
                        height: var(--avatar-s);
                        min-width: var(--avatar-s);
                        min-height: var(--avatar-s);
                        background-color: var(--post-document-icon-bg);
                        border-radius: 50%;
                        justify-content: center;
                        align-items: center;

                        .cm-icon {
                            stroke: var(--post-document-icon-stroke);
                            width: 1.2rem;
                            height: 1.2rem;
                            min-width: 1.2rem;
                            min-height: 1.2rem;
                        }
                    }

                    [data-title] {
                        overflow: hidden;
                        white-space: nowrap;
                        width: 100%;

                        [data-name] {
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            display: block;
                        }

                        [data-size] {
                            color: var(--post-document-size-color);
                        }
                    }
                }
            }
        }
    }

}
:root {
    --forward-post-to-icon-stroke: rgb(var(--white));
}

.cm-form-content.forward-post-to {
    .cm-list {
        .item {
            position: relative;

            [data-selected] {
                transition: all var(--animation-time);
                transform: scale(0);
                position: absolute;
                bottom: .4rem;
                left: .4rem;
                background-color: var(--channel-list-item-unread-count-bg);
                color: var(--channel-list-item-unread-count-color);
                border-radius: 50%;
                line-height: 1;
                box-shadow: 0 0 0 2px var(--form-content-bg);

                .cm-icon {
                    stroke: var(--forward-post-to-icon-stroke);
                    width: 1.2rem;
                    height: 1.2rem;
                    min-width: 1.2rem;
                    min-height: 1.2rem;
                }
            }

            &.selected {
                [data-selected] {
                    transform: scale(1);
                }
            }
        }
    }

    [action-forward].hidden {
        visibility: hidden;
        opacity: 0;
        transform: scale(0);
    }

    [action-forward] {
        transition: all var(--animation-time);
        visibility: visible;
        opacity: 1;
        transform: scale(1);
        position: absolute;
        bottom: 1rem;
        right: 1rem;
        background-color: rgb(var(--primary));
        width: 3rem;
        height: 3rem;
        min-width: 3rem;
        min-height: 3rem;
    }
}
.cm-form-content.user-settings {
    .content {
        .avatar-wrap {
            position: relative;
            cursor: pointer;
            border-radius: 50%;

            .icon-wrap {
                pointer-events: none;
                background-color: var(--form-content-bg);
                padding: .3rem;
                border-radius: 50%;
                position: absolute;
                bottom: 0;
                right: 0;
            }
        }
    }
}
.cm-form-content.user-profile {

    >.content {

        [data-link]:empty {
            display: none;
        }

        [data-bio]:empty {
            display: none;
        }

        [data-tab-content="feed"] {
            .cm-list {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 2px;

                >.item {
                    padding: 0;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        border-radius: .2rem;
                        aspect-ratio: 1 / 1;
                        background-color: var(--sceleton-bg);
                        transform: translatez(1em);
                    }
                }
            }
        }

        [data-tab-content="albums"] {

            &:has([action-create-album]:not(.none)) {
                padding-top: .5rem;
            }

            [action-create-album] {
                .cm-icon {
                    width: 1.2rem;
                    height: 1.2rem;
                    min-width: 1.2rem;
                    min-height: 1.2rem;
                }
            }

            .cm-list {
                >.item {
                    position: relative;
                    padding: 0;
                    overflow: hidden;

                    .image-wrap {

                        .image {
                            width: 100%;
                            height: 100%;
                            border-radius: .6rem;
                            aspect-ratio: 16 / 12;
                            background-color: var(--sceleton-bg);
                            background-position: center;
                            background-repeat: no-repeat;
                            background-size: cover;
                            transform: translatez(1em);
                        }
                    }

                    .title {
                        position: absolute;
                        bottom: 0rem;
                        background: linear-gradient(0deg, rgb(var(--black) / .7), transparent);
                    }
                }
            }
        }

    }

}
:root {
    --bot-settings-path-item-bg: var(--list-item-bg);
}

.cm-form-content.user-manage-sessions {

    >.content {
        .cm-list {
            .item {
                .cm-icon {
                    width: 1.3rem;
                    height: 1.3rem;
                    max-width: 1.3rem;
                    max-height: 1.3rem;
                    min-width: 1.3rem;
                    min-height: 1.3rem;
                }
            }

            &[data-list-current] {
                [action-remove] {
                    display: none;
                }
            }
        }
    }

}
:root {
    --photoalbum-item-select-bg: rgb(var(--black) / .3);
}

.cm-form-content.user-photoalbum {

    .content {

        [data-about] {
            &:empty {
                display: none;
            }
        }

        >.cm-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2px;

            >.item {
                padding: 0;
                position: relative;
                overflow: hidden;
                border-radius: .2rem;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    aspect-ratio: 1 / 1;
                    background-color: var(--sceleton-bg);
                    transform: translatez(1em);
                }

                .cm-checkbox {
                    opacity: 0;
                    pointer-events: none;
                    top: 0;
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    transition: all var(--animation-time);
                    background-color: var(--photoalbum-item-select-bg);

                    input {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        z-index: 10;
                    }

                    span {
                        width: 100%;
                        height: 100%;
                        pointer-events: none;

                        &:before {
                            position: absolute;
                            top: .5rem;
                            right: .5rem;
                        }
                    }
                }
            }

            &.selected {
                >.item {
                    .cm-checkbox {
                        opacity: 1;
                        z-index: 1;
                        pointer-events: all;

                        &:has(input:checked) {
                            background-color: transparent;
                        }
                    }
                }
            }

        }

    }

    [data-selected-actions] {
        display: none;
    }

}

.cm-form-content.user-photoalbum {
    &:has(.cm-list.selected) {
        [data-selected-actions] {
            display: flex;
        }
    }
}

@media only screen and (max-width: 600px) {

    .cm-form-content.user-photoalbum {
        .content {
            >.cm-list {
                padding: 0;
            }
        }
    }

}
:root {
    --photoalbum-item-select-bg: rgb(var(--black) / .3);
}

.cm-form-content.channel-photoalbum {

    .content {

        [data-about] {
            &:empty {
                display: none;
            }
        }

        >.cm-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2px;

            >.item {
                padding: 0;
                position: relative;
                overflow: hidden;
                border-radius: .2rem;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    aspect-ratio: 1 / 1;
                    background-color: var(--sceleton-bg);
                    transform: translatez(1em);
                }

                .cm-checkbox {
                    opacity: 0;
                    pointer-events: none;
                    top: 0;
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    transition: all var(--animation-time);
                    background-color: var(--photoalbum-item-select-bg);

                    input {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        z-index: 10;
                    }

                    span {
                        width: 100%;
                        height: 100%;
                        pointer-events: none;

                        &:before {
                            position: absolute;
                            top: .5rem;
                            right: .5rem;
                        }
                    }
                }
            }

            &.selected {
                >.item {
                    .cm-checkbox {
                        opacity: 1;
                        z-index: 1;
                        pointer-events: all;

                        &:has(input:checked) {
                            background-color: transparent;
                        }
                    }
                }
            }

        }

    }

    [data-selected-actions] {
        display: none;
    }

}

.cm-form-content.channel-photoalbum {
    &:has(.cm-list.selected) {
        [data-selected-actions] {
            display: flex;
        }
    }
}

@media only screen and (max-width: 600px) {

    .cm-form-content.channel-photoalbum {
        .content {
            >.cm-list {
                padding: 0;
            }
        }
    }

}
.cm-form-content.move-user-photo-to {

    .cm-list {
        >.item {
            position: relative;
            padding: 0;
            overflow: hidden;

            .image-wrap {

                .image {
                    width: 100%;
                    height: 100%;
                    border-radius: .6rem;
                    aspect-ratio: 16 / 12;
                    background-color: var(--sceleton-bg);
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    transform: translatez(1em);
                }
            }

            .title {
                position: absolute;
                bottom: 0rem;
                background: linear-gradient(0deg, rgb(var(--black) / .7), transparent);
            }
        }
    }

}
.cm-form-content.move-channel-photo-to {

    .cm-list {
        >.item {
            position: relative;
            padding: 0;
            overflow: hidden;

            .image-wrap {

                .image {
                    width: 100%;
                    height: 100%;
                    border-radius: .6rem;
                    aspect-ratio: 16 / 12;
                    background-color: var(--sceleton-bg);
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    transform: translatez(1em);
                }
            }

            .title {
                position: absolute;
                bottom: 0rem;
                background: linear-gradient(0deg, rgb(var(--black) / .7), transparent);
            }
        }
    }

}
:root {
    --photo-viewer-overlay-bg: rgb(var(--black) / .95);
    --photo-viewer-header-bg: rgb(var(--black) / .65);
    --photo-viewer-zoom-animation-time: 100ms;
    --photo-viewer-slide-animation-time: 150ms;
}

.cm-modal:has(.cm-modal-content.photo-viewer) {
    align-items: flex-start;
}

.cm-modal:has(.cm-modal-content.photo-viewer) .cm-modal-overlay {
    background-color: var(--photo-viewer-overlay-bg);
}

.cm-modal-content.photo-viewer {
    max-width: 100%;
    width: 100%;
    height: 100%;
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;

    .header {
        position: relative;
        transition: transform var(--animation-time);
        transform: translateY(-5rem);

        &.active {
            transform: translateY(0);
        }

        button {
            .cm-icon {
                stroke: rgb(var(--white));
            }
        }
    }

    .content {
        position: relative;
        overflow: hidden;
        height: 100%;
        z-index: 2;

        [action-gestures] {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: transparent;
            z-index: 8;
        }

        [action-back] {
            position: absolute;
            left: 0;
            height: 100%;
            width: 40%;
            z-index: 10;
            cursor: pointer;
        }

        [action-next] {
            position: absolute;
            right: 0;
            height: 100%;
            width: 60%;
            z-index: 10;
            cursor: pointer;
        }

        .image-container {
            overflow: hidden;
            position: relative;
            width: 100%;
            height: 100%;

            [data-image] {
                will-change: transform;
                backface-visibility: hidden;
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;

                &.prev {
                    transform: translateX(-100vw);
                    position: absolute;
                    opacity: 1;
                    z-index: 3;
                }

                &.curr {
                    transform: scale(1);
                    position: absolute;
                    opacity: 1;
                    z-index: 2;
                }

                &.next {
                    transform: scale(.5);
                    position: absolute;
                    opacity: 0;
                    z-index: 1;
                }
            }

        }
    }

    .footer {
        position: relative;
        min-height: 4rem;
        transition: transform var(--animation-time);
        transform: translateY(5rem);

        &.active {
            transform: translateY(0);
        }
    }

}

@media only screen and (max-width: 600px) {

    .cm-modal-content.photo-viewer {

        .header {
            position: absolute;
            top: 0;
            z-index: 5;
            background-color: var(--photo-viewer-header-bg);
        }

        .content {
            padding: 0;

            [action-back] {
                display: none;
            }

            [action-next] {
                display: none;
            }

            .image-container {
                padding: 4rem 0 4rem 0;
            }

        }

        .footer {
            position: absolute;
            bottom: 0;
            z-index: 5;
            background-color: var(--photo-viewer-header-bg);
        }

    }

}
:root {
    --conference-item-bg: var(--list-item-bg);
    --conference-item-title-bg: var(--list-item-bg);
}

.cm-form-content.conferences {

    >.content {

        >.cm-list {
            display: grid;
            gap: .6em;
            grid-template-columns: repeat(auto-fit, 22rem);
            grid-template-rows: min-content;
            height: 100%;
            width: auto;
            justify-content: start;

            .item {
                position: relative;
                width: 100%;
                height: min-content;
                overflow: hidden;
                border-radius: var(--radius-xl);
                cursor: pointer;
                transition: all var(--animation-time);
                justify-content: flex-end;
                padding: 0;
                background-color: var(--broadcast-item-bg);

                [data-preview] {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    aspect-ratio: 16 / 9;

                    [data-thumbnail] {
                        position: absolute;
                        width: -webkit-fill-available;
                        height: auto;
                        object-fit: cover;
                        z-index: 1;
                        width: 100%;
                        height: 100%;
                    }

                    [data-thumbnail][src=""] {
                        display: none;
                    }

                }

                [data-title] {
                    background-color: var(--conference-item-title-bg);
                }

            }
        }

    }

}
:root {
    --conference-view-title-bg: transparent;
    --conference-view-item-outline: rgb(var(--black) / .8);
    --conference-view-footer-bg: rgb(var(--black) / .8);
}

.cm-form-content.conference-view {

    .header {

        [data-title-wrap] {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            display: block;

            [data-subtitle] {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                display: block;
            }
        }
    }

    >.content {
        overflow: hidden;
        padding: 1rem;

        [data-video-wrap] {
            height: 100%;

            /* главное видео */
            [data-main-video] {
                height: 100%;
                background-color: var(--conference-view-grid-bg);

                &:empty {
                    display: none;
                }

                .item {
                    height: 100%;
                    position: relative;
                    overflow: hidden;
                    border-radius: var(--radius-xl);

                    [data-video] {
                        width: 100%;
                        height: -webkit-fill-available;
                        background-color: rgb(var(--black));
                    }

                    [data-name] {
                        position: absolute;
                        background-color: rgb(var(--black) / .5);
                        padding: .2rem .6rem;
                        border-radius: 2rem;
                        bottom: auto;
                        left: .5rem;
                        top: .5rem;
                    }

                    [action-close-main-video] {
                        display: flex;
                        position: absolute;
                        right: .5rem;
                        top: .5rem;
                        background-color: var(--conference-view-footer-bg);

                        svg {
                            stroke: rgb(var(--white));
                        }
                    }
                }

            }

            /* видео сетка */
            [data-video-grid] {
                grid-template-columns: repeat(3, 1fr);
                align-items: start;
                display: grid;
                min-height: 8rem;
                overflow: hidden;
                overflow-y: auto;

                .item {
                    aspect-ratio: 1.5 / 1;
                    width: 100%;
                    min-height: 8rem;
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                    border-radius: var(--radius-xl);

                    [data-video] {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        background-color: rgb(var(--black));
                    }

                    [data-name] {
                        position: absolute;
                        background-color: rgb(var(--black) / .5);
                        padding: .2rem .6rem;
                        border-radius: 2rem;
                        bottom: .5rem;
                        left: .5rem;
                    }

                    [action-close-main-video] {
                        display: none;
                    }
                }
            }

        }

        [data-title] {
            background-color: var(--conference-view-title-bg);
        }

    }

    >.content:has([data-main-video]:not(:empty)) {
        [data-video-grid] {
            display: none;
        }
    }

    .footer {
        padding: 1rem;

        [data-actions] {
            background-color: var(--conference-view-footer-bg);
            border-radius: 1rem;

            button {
                min-width: 3rem;
                min-height: 3rem;
                background-color: rgb(var(--white) / .05);

                .cm-icon {
                    stroke: rgb(var(--white));
                }

                &.active {
                    background-color: rgb(var(--white));

                    .cm-icon {
                        stroke: rgb(var(--black))
                    }
                }
            }

            [action-chat-form] {
                position: relative;

                [data-unread-posts] {
                    transition: all var(--animation-time);
                    display: flex;
                    flex: 0 0 auto;
                    justify-content: center;
                    align-items: center;
                    transform: scale(1);
                    background-color: var(--channel-list-item-unread-count-bg);
                    color: var(--channel-list-item-unread-count-color);
                    font-weight: var(--font-weight-bold);
                    border-radius: 2rem;
                    line-height: 1;
                    min-width: 1.3rem;
                    height: 1.3rem;
                    padding: .4rem;
                    position: absolute;
                    left: -0.3rem;
                    top: 0.1rem;

                    &:empty {
                        transform: scale(0);
                    }
                }
            }
        }

    }

}

@media only screen and (max-width: 600px) {

    .cm-form-content.conference-view {

        >.content {
            padding: .5rem;

            [data-video-grid] {
                grid-template-columns: repeat(2, 1fr) !important;

                .item {
                    aspect-ratio: 1.2 / 1;
                }
            }

        }

    }

}
.cm-form-content.conference-users {

    >.content {
        .cm-list {
            >.item {
                [data-audio] {
                    scale: 0;
                    opacity: 0;

                    &.active {
                        scale: 1;
                        opacity: 1;
                    }
                }

                [data-video] {
                    scale: 0;
                    opacity: 0;

                    &.active {
                        scale: 1;
                        opacity: 1;
                    }
                }
            }
        }
    }


}
:root {
    --conference-settings-thumbnail-border: 2px dashed var(--border-color);
}

.cm-form-content.conference-settings {

    >.content {

        .thumbnail-wrap {
            width: 100%;
            height: 100%;
            aspect-ratio: 16 / 9;
            border-radius: var(--radius-xl);
            border: var(--broadcast-settings-thumbnail-border);
            overflow: hidden;
            position: relative;
        }

        [data-thumbnail] {
            width: 100%;
            height: 100%;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            display: none;
        }

        [data-thumbnail]:not([src=""]) {
            display: flex;
        }

    }

}
.cm-form-content.conference-manage-invites {

    >.content {
        .cm-list {
            >.item {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                display: block;

                [data-name] {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    display: block;
                }

                [data-link] {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    display: block;
                }
            }
        }
    }


}
:root {
    --broadcast-item-bg: var(--list-item-bg);
    --broadcast-item-title-bg: var(--list-item-bg);
}

.cm-form-content.broadcasts {

    >.content {

        >.cm-list {
            display: grid;
            gap: .6em;
            grid-template-columns: repeat(auto-fit, 22rem);
            grid-template-rows: min-content;
            height: 100%;
            width: auto;
            justify-content: start;

            .item {
                position: relative;
                width: 100%;
                height: min-content;
                overflow: hidden;
                border-radius: var(--radius-xl);
                cursor: pointer;
                transition: all var(--animation-time);
                justify-content: flex-end;
                padding: 0;
                background-color: var(--broadcast-item-bg);

                &:not(.live) {
                    [data-info] {
                        display: none;
                    }
                }

                [data-overlay] {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                }

                [data-preview] {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    aspect-ratio: 16 / 9;

                    [data-info] {
                        position: absolute;
                        bottom: 1rem;
                        right: 1rem;

                        [data-status] {
                            padding: 0 .5rem;
                            border-radius: var(--radius-md);
                            background-color: rgb(var(--red));
                        }

                        [data-watching] {
                            padding: 0 .5rem;
                            border-radius: var(--radius-md);
                            background-color: rgb(var(--yellow));
                        }

                    }

                    [data-thumbnail] {
                        width: -webkit-fill-available;
                        height: auto;
                        object-fit: cover;
                        width: 100%;
                        height: 100%;
                    }

                    [data-thumbnail][src=""] {
                        display: none;
                    }

                    [data-video] {
                        position: absolute;
                        width: -webkit-fill-available;
                        height: auto;
                    }
                }

                [data-title] {
                    background-color: var(--broadcast-item-title-bg);

                    [data-name] {
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }

                }

            }
        }
    }

}

@media only screen and (max-width: 600px) {

    .cm-form-content.broadcasts {
        >.content {

            >.cm-list {
                grid-template-columns: repeat(1, 1fr);
            }

        }
    }

}
:root {
    --broadcast-view-preview-bg: rgb(var(--black));
    --broadcast-view-title-bg: rgb(var(--black) / .05);
}

.cm-form-content.broadcast-view {

    >.header {
        [action-chat-form] {
            position: relative;

            [data-unread-posts] {
                transition: all var(--animation-time);
                display: flex;
                flex: 0 0 auto;
                justify-content: center;
                align-items: center;
                transform: scale(1);
                background-color: var(--channel-list-item-unread-count-bg);
                color: var(--channel-list-item-unread-count-color);
                font-weight: var(--font-weight-bold);
                border-radius: 2rem;
                line-height: 1;
                min-width: 1.3rem;
                height: 1.3rem;
                padding: .4rem;
                position: absolute;
                left: -0.3rem;
                top: 0.1rem;

                &:empty {
                    transform: scale(0);
                }
            }
        }
    }

    >.content {

        [data-video-stream] {
            max-height: 100%;
            aspect-ratio: 16 / 9;
            background-color: var(--broadcast-view-preview-bg);

            [data-thumbnail] {
                width: 100%;
                height: 100%;
                aspect-ratio: 16 / 9;
                object-fit: cover;
                display: flex;
            }

            [data-thumbnail][src=""] {
                display: none;
            }

            &:has([data-video].live) {
                [data-thumbnail] {
                    display: none;
                }
            }

            [data-video] {
                max-height: 100%;
                height: 100%;
            }

            [data-video]:not(.live) {
                display: none;
            }

        }

        [data-title] {
            background-color: var(--broadcast-view-title-bg);

            [data-about]:empty {
                display: none;
            }

            [data-cast-info] {
                [data-watching] {
                    padding: 0 .5rem;
                    border-radius: var(--radius-md);
                    background-color: rgb(var(--yellow));

                    &:empty {
                        display: none;
                    }
                }

                [data-timing] {
                    padding: 0 .5rem;
                    border-radius: var(--radius-md);
                    background-color: rgb(var(--red));
                }

                [data-quality] {
                    padding: 0 .5rem;
                    border-radius: var(--radius-md);
                    background-color: rgb(var(--primary));
                }

                [data-codec] {
                    padding: 0 .5rem;
                    border-radius: var(--radius-md);
                    background-color: var(--bg-second);
                }
            }
        }

    }

}
:root {
    --broadcast-settings-thumbnail-border: 2px dashed var(--border-color);
}

.cm-form-content.broadcast-settings {

    >.content {

        .thumbnail-wrap {
            width: 100%;
            height: 100%;
            aspect-ratio: 16 / 9;
            border-radius: var(--radius-xl);
            border: var(--broadcast-settings-thumbnail-border);
            overflow: hidden;
            position: relative;
        }

        [data-thumbnail] {
            width: 100%;
            height: 100%;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            display: none;
        }

        [data-thumbnail]:not([src=""]) {
            display: flex;
        }

    }

}
:root {
    --stickerpak-edit-item-select-bg: rgb(var(--black) / .3);
}

.cm-form-content.stickerpak-edit {

    .content {

        >.cm-list {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2px;

            >.item {
                padding: .5rem;
                position: relative;
                overflow: hidden;
                border-radius: .2rem;
                background-color: var(--sceleton-bg);

                img {
                    width: 100%;
                    aspect-ratio: 1 / 1;
                    transform: translatez(1em);
                }

                .cm-checkbox {
                    opacity: 0;
                    pointer-events: none;
                    top: 0;
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    transition: all var(--animation-time);
                    background-color: var(--stickerpak-edit-item-select-bg);

                    input {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        z-index: 10;
                    }

                    span {
                        width: 100%;
                        height: 100%;
                        pointer-events: none;

                        &:before {
                            position: absolute;
                            top: .5rem;
                            right: .5rem;
                        }
                    }
                }
            }

            &.selected {
                >.item {
                    .cm-checkbox {
                        opacity: 1;
                        z-index: 1;
                        pointer-events: all;

                        &:has(input:checked) {
                            background-color: transparent;
                        }
                    }
                }
            }

        }

    }

    [data-selected-actions] {
        display: none;
    }

}

.cm-form-content.stickerpak-edit {
    &:has(.cm-list.selected) {
        [data-selected-actions] {
            display: flex;
        }
    }
}

@media only screen and (max-width: 600px) {

    .cm-form-content.stickerpak-edit {
        .content {
            >.cm-list {
                grid-template-columns: repeat(3, 1fr);
                padding: 0;
            }
        }
    }

}
.cm-form-content.stickerpak-preview {

    .content {

        [data-about]:empty {
            display: none;
        }

        >.cm-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2px;

            >.item {
                padding: .5rem;
                position: relative;
                overflow: hidden;
                border-radius: .2rem;
                background-color: var(--sceleton-bg);

                img {
                    width: 100%;
                    aspect-ratio: 1 / 1;
                    transform: translatez(1em);
                }

            }

        }

    }

}

@media only screen and (max-width: 600px) {

    .cm-form-content.stickerpak-preview {
        .content {
            >.cm-list {
                padding: 0;
            }
        }
    }

}
:root {
    --bot-settings-path-item-bg: var(--list-item-bg);
}

.cm-form-content.bot-settings {

    >.content {

        .cm-list[data-path] {
            flex-wrap: wrap;
            gap: 3px;

            .item {
                position: relative;
                cursor: pointer;
                background-color: var(--bot-settings-path-item-bg);
                padding: .1rem .3rem;
            }
        }

        .cm-list[data-menu] {
            .item {
                padding: .3rem;

                .cm-icon {
                    --icon-width-height: 1.2rem;
                }
            }
        }
    }

}
.cm-modal-content.bot-export-menu-to-json {
    max-width: 23rem;
    height: 30rem;
    max-height: 100%;

    >.content {
        height: 100%;

        [data-code] {
            height: 100%;
            white-space: break-spaces;
            font-family: var(--font-mono);
        }
    }

}

:root {
    --bot-settings-path-item-bg: var(--list-item-bg);
}

.cm-form-content.admin-storages {

    >.content {
        .cm-list {
            .item {
                box-shadow: 0 0 0 1px rgb(var(--primary) / .3);
                background-color: rgb(var(--primary) / .05);

                .cm-icon {
                    min-height: 1.4rem;
                    min-width: 1.4rem;
                    width: 1.4rem;
                }

                [data-title] {
                    width: 100%;

                    [data-name] {
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }

                [data-host] {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

            }
        }
    }

}

@charset "utf-8";

/* ************************************************************************************* */
/* Root свойства светлая тема */
/* ************************************************************************************* */
:root {

    --primary: 51 144 236;
    --red: 212 82 70;
    --yellow: 227 165 42;
    --green: 140 179 105;
    --blue: 51 144 236;
    --black: 10 28 40;
    --white: 255 255 255;

    --color-base: rgb(10 28 40);
    --color-gray: rgb(106 117 136);
    --color-light: rgb(163 171 183);
    --color-primary: rgb(var(--primary));

    --bg-hover: rgb(var(--black) / .03);
    --bg-focus: rgb(var(--black) / .05);
    --bg-second: rgb(var(--black) / .03);

    --font-sans: "Inter", "Adwaita Sans", sans-serif, system-ui;
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: "JetBrains Mono", monospace;

    --text-xs: .85rem;
    --text-xs-lh: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm-lh: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base-lh: 1.5;
    --text-lg: 1.125rem;
    --text-lg-lh: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl-lh: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl-lh: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl-lh: 1.2;
    --text-4xl: 2.25rem;
    --text-4xl-lh: calc(2.5 / 2.25);
    --text-5xl: 3rem;

    --font-weight-thin: 100;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --border-color: rgb(var(--black) / .05);
    --border-width-1: 1px;
    --border-width-2: 2px;
    --border-solid: solid;
    --border-dashed: dashed;

    --radius-xs: .125rem;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-4xl: 2rem;

    --shadow-color: rgb(var(--black) / .1);
    --shadow-xs: 0 0 0 1px rgb(var(--black) / .05), 0 0px 1px 3px rgb(var(--black) / .03);
    --shadow-s: 0 0 5px 2px var(--shadow-color);
    --shadow-m: 0 0 3px 2px var(--shadow-color), 0 0 5px 0 var(--shadow-color);
    --shadow-l: 0 0 3px 2px var(--shadow-color), 0 0 15px 0 var(--shadow-color);

    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --cubic-bezier: (0.2, 0, 0.2, 1) cubic-bezier(0, 0, .2, 1);
    --cubic-bezier: (0.2, 0, 0.2, 1) cubic-bezier(.4, 0, .2, 1);

    --backdrop-blur-xs: 20px;
    --backdrop-blur-s: 30px;
    --backdrop-blur-m: 40px;
    --backdrop-blur-l: 50px;
    --backdrop-blur-xl: 60px;

    --animate-spin: spin 1s linear infinite;
    --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1)infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1)infinite;
    --animate-bounce: bounce 1s infinite;

    --padding-m: 0.5rem;
    --padding-l: 1rem;
    --padding-xl: 1.5rem;

    --blur-xs: 4px;
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-lg: 16px;
    --blur-xl: 24px;
    --blur-2xl: 40px;

    --sceleton-bg: rgb(0 0 0 / .05);

}

/* ************************************************************************************* */
/* Root свойства темная тема */
/* ************************************************************************************* */
:root[theme="dark"] {

    --primary: 63 150 208;
    --red: 212 82 70;
    --yellow: 227 165 42;
    --green: 140 179 105;
    --blue: 63 150 208;
    --black: 3 4 5;
    --white: 255 255 255;

    --body-bg: rgb(23 33 43);

    --color-base: rgb(208 213 219);
    --color-gray: rgb(106 117 136);
    --color-light: rgb(64 73 88);
    --color-primary: rgb(var(--primary));

    --bg-hover: rgb(var(--white) / .03);
    --bg-focus: rgb(var(--white) / .05);
    --bg-second: rgb(var(--black) / .1);

    --border-color: rgb(var(--black) / .15);
    --border-width-1: 1px;
    --border-width-2: 2px;
    --border-solid: solid;
    --border-dashed: dashed;

    --shadow-color: rgb(var(--black) / .4);
    --shadow-xs: 0 0 3px 2px var(--shadow-color);
    --shadow-s: 0 0 5px 2px var(--shadow-color);
    --shadow-m: 0 0 3px 2px var(--shadow-color), 0 0 5px 0 var(--shadow-color);
    --shadow-l: 0 0 3px 2px var(--shadow-color), 0 0 15px 0 var(--shadow-color);

    --sceleton-bg: rgb(255 255 255 / .05);

    --form-overlay-bg: rgb(var(--black) / .5);
    --form-content-bg: rgb(23 33 43);

    --modal-overlay-bg: rgb(var(--black) / .5);
    --modal-content-bg: rgb(23 33 43 / .8);
    --modal-shadow: 0 0 0 1px rgb(var(--black) / .2), 0 0px 1px 3px rgb(var(--black) / .1);

    --context-menu-overlay-bg: rgb(var(--black) / .5);
    --context-menu-content-bg: rgb(23 33 43 / .8);
    --context-menu-shadow: 0 0 0 1px rgb(var(--black) / .2), 0 0px 1px 3px rgb(var(--black) / .1);
    --context-menu-reactions-bg: rgb(var(--black) / .5);

    --input-border: 2px solid var(--color-light);
    --input-hover-border: 2px solid var(--color-gray);
    --input-focus-border: 2px solid rgb(var(--primary));

    --button-bg: rgb(var(--white) / .03);

    --toggle-bg: rgb(var(--white) / .1);

    --checkbox-border: inset 0 0 0 3px rgb(var(--white) / .1);

    --post-form-bg: rgb(var(--black) / .3);
    --post-bg: rgb(24 37 51);
    --post-document-icon-bg: rgb(var(--white) / .1);
    --post-document-icon-stroke: rgb(var(--white));
    --post-text-link-underline: rgb(var(--primary) / .3);
    --post-status-time-bg: rgb(var(--black) / .3);

    --post-second-bg: rgb(32 54 72);
    --post-second-forwarded-name-color: rgb(var(--white) / .5);
    --post-second-reply-bg: rgb(var(--white) / .1);
    --post-second-reply-border: 2px solid rgb(var(--primary) / .6);
    --post-second-reply-name-color: rgb(var(--white) / .7);
    --post-second-reply-text-color: rgb(var(--white) / 1);
    --post-second-document-name-color: var(--color-base);
    --post-second-document-size-color: var(--color-gray);
    --post-second-document-icon-bg: rgb(var(--black) / .1);
    --post-second-document-icon-stroke: rgb(var(--black));
    --post-second-text-link-color: rgb(var(--white));
    --post-second-text-link-underline: rgb(var(--white) / .3);
    --post-second-precode-bg: rgb(var(--black) / .5);
    --post-second-status-time-color: rgb(var(--white) / .5);
    --post-second-status-time-bg: rgb(var(--black) / .7);
    --post-second-status-stroke: rgb(var(--white) / .7);
    --post-second-reactions-item-bg: rgb(var(--primary) / .2);
    --post-second-reactions-item-active-bg: rgb(var(--primary));
    --post-second-reactions-item-count-color: rgb(var(--primary));
    --post-second-reactions-item-active-count-color: rgb(var(--white));

    --gragndrop-bg: rgb(var(--white) / .02);

    --conference-view-footer-bg: rgb(var(--black) / .5);

    --broadcast-view-title-bg: rgb(var(--black) / .2);

    --table-th-background: rgb(var(--black) / .05);
    --table-odd-background: rgb(var(--white) / .05);

}

@media only screen and (max-width: 600px) {}
:root {
    --animation-time: 250ms;
}

/**************************************************************************************
zoom  
**************************************************************************************/
.zoom-fade-in {
    -webkit-animation: zoom-fade-in var(--animation-time);
    animation: zoom-fade-in var(--animation-time);
    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

@keyframes zoom-fade-in {
    0% {
        transform: scale3d(0.98, 0.98, 0.98);
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

.zoom-fade-out {
    -webkit-animation: zoom-fade-out var(--animation-time);
    animation: zoom-fade-out var(--animation-time);
    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

@keyframes zoom-fade-out {
    0% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }

    100% {
        transform: scale3d(0.98, 0.98, 0.98);
        opacity: 0;
    }
}







/**************************************************************************************
fade  
**************************************************************************************/
.fade-in {
    -webkit-animation: fade-in var(--animation-time);
    animation: fade-in var(--animation-time);
    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fade-out {
    -webkit-animation: fade-out var(--animation-time);
    animation: fade-out var(--animation-time);
    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.fade-in-top {
    -webkit-animation: fade-in-top var(--animation-time);
    animation: fade-in-top var(--animation-time);
    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

@keyframes fade-in-top {
    0% {
        -webkit-transform: translateY(-.3rem);
        transform: translateY(-.3rem);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

.fade-out-top {
    -webkit-animation: fade-out-top var(--animation-time);
    animation: fade-out-top var(--animation-time);
    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

@keyframes fade-out-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-.3rem);
        transform: translateY(-.3rem);
        opacity: 0;
    }
}


.fade-in-bottom {
    -webkit-animation: fade-in-bottom var(--animation-time);
    animation: fade-in-bottom var(--animation-time);
    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

@keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(.3rem);
        transform: translateY(.3rem);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

.fade-out-bottom {
    -webkit-animation: fade-out-bottom var(--animation-time);
    animation: fade-out-bottom var(--animation-time);
    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

@keyframes fade-out-bottom {
    0% {
        -webkit-transform: translateY(inherit);
        transform: translateY(inherit);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(.3rem);
        transform: translateY(.3rem);
        opacity: 0;
    }
}

.fade-in-left {
    -webkit-animation: fade-in-left var(--animation-time);
    animation: fade-in-left var(--animation-time);
    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

@keyframes fade-in-left {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

.fade-in-right {
    -webkit-animation: fade-in-right var(--animation-time);
    animation: fade-in-right var(--animation-time);
    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

@keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

.fade-out-right {
    -webkit-animation: fade-out-right var(--animation-time);
    animation: fade-out-right var(--animation-time);
    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

@keyframes fade-out-right {
    0% {
        -webkit-transform: translateX(inherit);
        transform: translateX(inherit);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 0;
    }
}

.fade-out-left {
    -webkit-animation: fade-out-left var(--animation-time);
    animation: fade-out-left var(--animation-time);
    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

@keyframes fade-out-left {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0;
    }
}






/**************************************************************************************
slide 
**************************************************************************************/
.slide-in-left {
    -webkit-animation: slide-in-left var(--animation-time);
    animation: slide-in-left var(--animation-time);
    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

@keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}


.slide-out-left {
    -webkit-animation: slide-out-left var(--animation-time);
    animation: slide-out-left var(--animation-time);
    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

@keyframes slide-out-left {
    0% {
        -webkit-transform: translateX(inherit);
        transform: translateX(inherit);
    }

    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

.slide-in-right {
    -webkit-animation: slide-in-right var(--animation-time);
    animation: slide-in-right var(--animation-time);
    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

@keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}


.slide-out-right {
    -webkit-animation: slide-out-right var(--animation-time);
    animation: slide-out-right var(--animation-time);
    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

@keyframes slide-out-right {
    0% {
        -webkit-transform: translateX(inherit);
        transform: translateX(inherit);
    }

    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}


.slide-in-bottom {
    -webkit-animation: slide-in-bottom var(--animation-time);
    animation: slide-in-bottom var(--animation-time);
    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

@keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.slide-out-bottom {
    -webkit-animation: slide-out-bottom var(--animation-time);
    animation: slide-out-bottom var(--animation-time);
    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

@keyframes slide-out-bottom {
    0% {
        -webkit-transform: translateY(inherit);
        transform: translateY(inherit);
    }

    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}





/**************************************************************************************
Анимация реакций сообщения
**************************************************************************************/
.post-reaction {
    -webkit-animation: scaleRotate45 .8s;
    animation: scaleRotate45 .8s;
    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
    animation-iteration-count: 1;
}

@keyframes scaleRotate45 {
    0% {
        opacity: 1;
        transform: rotate(0deg) scale(0);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: rotate(360deg) scale(5);
    }
}





/**************************************************************************************
loader pulsation
**************************************************************************************/
.loader {
    -webkit-animation: loader-pulse var(--animation-pulse-time);
    animation: loader-pulse var(--animation-pulse-time);
    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
    animation-iteration-count: infinite;
}

@keyframes loader-pulse {
    0% {
        background-color: var(--loader-background);
    }

    50% {
        background-color: inherit;
    }

    100% {
        background-color: var(--loader-background);
    }
}




/**************************************************************************************
Анимация троеточия
**************************************************************************************/
@keyframes dotty {
    0% {
        content: '';
    }

    25% {
        content: '.';
    }

    50% {
        content: '..';
    }

    75% {
        content: '...';
    }

    100% {
        content: '';
    }
}
@charset "utf-8";

:root {
    --body-bg: white;
}

html {
    font-size: 16px;
    height: 100%;
}

body {
    overflow: hidden;
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: var(--font-weight-normal);
    line-height: var(--text-base-lh);
    color: var(--color-base);
    background-color: var(--body-bg);
    background-position: center;
    background-size: cover;
    transition: background-color var(--animation-time), background-image var(--animation-time);
    user-select: none;
    -webkit-tap-highlight-color: transparent;

    .notifications {
        position: absolute;
        width: 100%;
        padding: .3rem;
        gap: 2px;
        display: flex;
        align-items: center;
        z-index: 101;
    }
}

@media only screen and (max-width: 600px) {

    html {
        font-size: 16px;
    }

    body {
        font-size: 1rem;
    }

}