:root {
    --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
    --color-light-status-info: #2288fa;
    --color-light-text-primary: rgba(3, 3, 6, 0.88);
    --color-light-text-secondary: rgba(4, 4, 19, 0.55);
    --color-light-text-tertiary: rgba(5, 8, 29, 0.38);
}
:root {
    --border-radius-circle: 50%;
    --border-radius-6: 6px;
}
:root {
    --gap-s: 12px;
    --gap-m: 16px;
    --gap-l: 20px;
    --gap-xl: 24px;
    --gap-0: 0px;
    --gap-6: 6px;
    --gap-12: var(--gap-s);
    --gap-16: var(--gap-m);
    --gap-20: var(--gap-l);
    --gap-24: var(--gap-xl);
}
:root {
    --font-family-system:
        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
}
:root {
    --focus-color: var(--color-light-status-info);
    --disabled-cursor: not-allowed;
    --size-xs-height: 40px;
    --size-s-height: 48px;
    --size-m-height: 56px;
    --size-l-height: 64px;
    --size-xl-height: 72px;
}
:root {
    --form-control-40-min-height: var(--size-xs-height);
    --form-control-s-min-height: var(--size-s-height);
    --form-control-m-min-height: var(--size-m-height);
    --form-control-l-min-height: var(--size-l-height);
    --form-control-xl-min-height: var(--size-xl-height);
    --form-control-sub-paddings: var(--gap-0);
}
:root {
    --input-color: var(--color-light-text-primary);
}
:root {
    --textarea-40-min-height: var(--form-control-40-min-height);
    --textarea-s-min-height: var(--form-control-s-min-height);
    --textarea-m-min-height: var(--form-control-m-min-height);
    --textarea-l-min-height: var(--form-control-l-min-height);
    --textarea-xl-min-height: var(--form-control-xl-min-height);
    --textarea-spacer-style: solid transparent;
    --textarea-40-spacer: 11px;
    --textarea-s-spacer: 14px;
    --textarea-m-spacer: 18px;
    --textarea-l-spacer: 22px;
    --textarea-xl-spacer: 24px;
    --textarea-40-filled-spacer-top: 19px;
    --textarea-s-filled-spacer-top: 24px;
    --textarea-m-filled-spacer-top: 24px;
    --textarea-l-filled-spacer-top: 32px;
    --textarea-xl-filled-spacer-top: 34px;
    --textarea-40-filled-spacer-bottom: 3px;
    --textarea-s-filled-spacer-bottom: 4px;
    --textarea-m-filled-spacer-bottom: 8px;
    --textarea-l-filled-spacer-bottom: 12px;
    --textarea-xl-filled-spacer-bottom: 14px;
    --textarea-40-filled-min-height: calc(
        var(--textarea-40-min-height) - var(--textarea-40-filled-spacer-top) -
            var(--textarea-40-filled-spacer-bottom)
    );
    --textarea-s-filled-min-height: calc(
        var(--textarea-s-min-height) - var(--textarea-s-filled-spacer-top) -
            var(--textarea-s-filled-spacer-bottom)
    );
    --textarea-m-filled-min-height: calc(
        var(--textarea-m-min-height) - var(--textarea-m-filled-spacer-top) -
            var(--textarea-m-filled-spacer-bottom)
    );
    --textarea-l-filled-min-height: calc(
        var(--textarea-l-min-height) - var(--textarea-l-filled-spacer-top) -
            var(--textarea-l-filled-spacer-bottom)
    );
    --textarea-xl-filled-min-height: calc(
        var(--textarea-xl-min-height) - var(--textarea-xl-filled-spacer-top) -
            var(--textarea-xl-filled-spacer-bottom)
    );
}
.textarea {
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    font-family: var(--font-family-system);
    position: relative;
    display: block;
    width: 100%;
    min-height: 100%;
    background: none;
    border: none;
    margin: var(--gap-0);
    outline: none;
    box-sizing: border-box;
    resize: none;
    -webkit-appearance: none;
    height: inherit;
}
.textarea.overflow {
        color: transparent;
        caret-color: var(--input-color);
    }
.textarea.size-40 {
        font-size: 14px;
        line-height: 18px;
        font-weight: 400;
        font-family: var(--font-family-system);
    }
.overflowHidden.overflowHidden {
    overflow: hidden;
}
.customScrollbar {
    overflow: auto;
    cursor: auto;
}
.customScrollbar::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }
.customScrollbar::-webkit-scrollbar-track {
        background-color: transparent;
    }
.customScrollbar::-webkit-scrollbar-track-piece {
        background-color: transparent;
    }
.customScrollbar::-webkit-scrollbar-thumb {
        background-color: var(--color-light-neutral-translucent-500);
        border-color: transparent;
        border-style: solid;
        border-width: 4px;
        background-clip: padding-box;
    }
.customScrollbar::-webkit-scrollbar-thumb:vertical {
        border-radius: var(--border-radius-circle) / var(--border-radius-6);
        min-height: 40px;
    }
.customScrollbar::-webkit-scrollbar-thumb:vertical:hover {
        border-radius: var(--border-radius-circle) / 7px;
        border-width: 4px 3px;
    }
.customScrollbar::-webkit-scrollbar-thumb:horizontal {
        border-radius: var(--border-radius-6) / var(--border-radius-circle);
        min-width: 40px;
    }
.customScrollbar::-webkit-scrollbar-thumb:horizontal:hover {
        border-radius: 7px / var(--border-radius-circle);
        border-width: 3px 4px;
    }
.customScrollbar::-webkit-scrollbar-thumb:active {
        background-color: var(--color-light-text-secondary);
    }
.customScrollbar::-webkit-resizer {
        background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="%2386868a" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 0.646447C8.84171 0.841709 8.84171 1.15829 8.64645 1.35355L1.35355 8.64645C1.15829 8.84171 0.841709 8.84171 0.646447 8.64645C0.451184 8.45118 0.451184 8.1346 0.646447 7.93934L7.93934 0.646447C8.1346 0.451184 8.45118 0.451184 8.64645 0.646447ZM8.64645 3.64645C8.84171 3.84171 8.84171 4.15829 8.64645 4.35355L4.35355 8.64645C4.15829 8.84171 3.84171 8.84171 3.64645 8.64645C3.45118 8.45118 3.45118 8.1346 3.64645 7.93934L7.93934 3.64645C8.1346 3.45118 8.45118 3.45118 8.64645 3.64645Z" /></svg>')
            no-repeat right bottom;
    }
.customScrollbar::-webkit-scrollbar-button,
    .customScrollbar::-webkit-scrollbar-corner {
        display: none;
    }
.textarea::-moz-placeholder {
    -moz-transition:
        opacity 0.2s ease,
        color 0.2s ease;
    transition:
        opacity 0.2s ease,
        color 0.2s ease;
}
.textarea::placeholder {
    transition:
        opacity 0.2s ease,
        color 0.2s ease;
}
.hasInnerLabel::-moz-placeholder {
    opacity: 0;
}
.hasInnerLabel::placeholder {
    opacity: 0;
}
.pseudoTextarea {
    position: absolute;
    top: var(--gap-0);
    left: var(--gap-0);
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    white-space: pre-wrap;
    z-index: -1;
    overflow: auto;
    max-height: 100%;
}
.pseudoTextarea span {
        color: var(--input-color);
    }
.pseudoTextarea .overflow {
        color: var(--color-light-text-tertiary);
    }
.pseudoTextarea::-webkit-scrollbar-thumb {
        background-color: transparent;
    }
.sub {
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    font-family: var(--font-family-system);
    display: block;
    margin-top: var(--gap-6);
    padding: var(--form-control-sub-paddings);
}
.textarea.textarea.hasInnerLabel.hasInnerLabel {
    padding-top: var(--gap-0);
    padding-bottom: var(--gap-0);
}
.textarea:disabled {
    cursor: var(--disabled-cursor);
    opacity: 1;
}
.textarea:-moz-read-only {
    cursor: var(--disabled-cursor);
}
.textarea:read-only {
    cursor: var(--disabled-cursor);
}
.textarea:focus.hasInnerLabel::-moz-placeholder {
    opacity: 1;
}
.textarea:focus.hasInnerLabel::placeholder {
    opacity: 1;
}
.focusVisible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}
.textarea.filled.hasInnerLabel {
    padding-top: var(--gap-0);
}
.textarea.filled.hasInnerLabel.size-40 {
        min-height: var(--textarea-40-filled-min-height);
    }
.textarea.filled.hasInnerLabel.size-48 {
        min-height: var(--textarea-s-filled-min-height);
    }
.textarea.filled.hasInnerLabel.size-56 {
        min-height: var(--textarea-m-filled-min-height);
    }
.textarea.filled.hasInnerLabel.size-64 {
        min-height: var(--textarea-l-filled-min-height);
    }
.textarea.filled.hasInnerLabel.size-72 {
        min-height: var(--textarea-xl-filled-min-height);
    }
.pseudoTextarea.filled.hasInnerLabel.size-40 {
        min-height: calc(100% - var(--textarea-40-filled-spacer-top));
    }
.pseudoTextarea.filled.hasInnerLabel.size-48 {
        min-height: calc(100% - var(--textarea-s-filled-spacer-top));
    }
.pseudoTextarea.filled.hasInnerLabel.size-56 {
        min-height: calc(100% - var(--textarea-m-filled-spacer-top));
    }
.pseudoTextarea.filled.hasInnerLabel.size-64 {
        min-height: calc(100% - var(--textarea-l-filled-spacer-top));
    }
.pseudoTextarea.filled.hasInnerLabel.size-72 {
        min-height: calc(100% - var(--textarea-xl-filled-spacer-top));
    }
.wrapper.resizeVertical {
        resize: vertical;
        min-height: 48px;
    }
.wrapper.resizeVertical.size-40 {
            min-height: 40px;
        }
.textarea.textarea.size-40 {
        border-top: var(--textarea-40-spacer) var(--textarea-spacer-style);
        border-bottom: var(--textarea-40-spacer) var(--textarea-spacer-style);
    }
.textarea.textarea.size-48 {
        border-top: var(--textarea-s-spacer) var(--textarea-spacer-style);
        border-bottom: var(--textarea-s-spacer) var(--textarea-spacer-style);
    }
.textarea.textarea.size-56 {
        border-top: var(--textarea-m-spacer) var(--textarea-spacer-style);
        border-bottom: var(--textarea-m-spacer) var(--textarea-spacer-style);
    }
.textarea.textarea.size-64 {
        border-top: var(--textarea-l-spacer) var(--textarea-spacer-style);
        border-bottom: var(--textarea-l-spacer) var(--textarea-spacer-style);
    }
.textarea.textarea.size-72 {
        border-top: var(--textarea-xl-spacer) var(--textarea-spacer-style);
        border-bottom: var(--textarea-xl-spacer) var(--textarea-spacer-style);
    }
.textarea.textarea.hasInnerLabel.size-40 {
            border-top: var(--textarea-40-filled-spacer-top) var(--textarea-spacer-style);
            border-bottom: var(--textarea-40-filled-spacer-bottom) var(--textarea-spacer-style);
        }
.textarea.textarea.hasInnerLabel.size-48 {
            border-top: var(--textarea-s-filled-spacer-top) var(--textarea-spacer-style);
            border-bottom: var(--textarea-s-filled-spacer-bottom) var(--textarea-spacer-style);
        }
.textarea.textarea.hasInnerLabel.size-56 {
            border-top: var(--textarea-m-filled-spacer-top) var(--textarea-spacer-style);
            border-bottom: var(--textarea-m-filled-spacer-bottom) var(--textarea-spacer-style);
        }
.textarea.textarea.hasInnerLabel.size-64 {
            border-top: var(--textarea-l-filled-spacer-top) var(--textarea-spacer-style);
            border-bottom: var(--textarea-l-filled-spacer-bottom) var(--textarea-spacer-style);
        }
.textarea.textarea.hasInnerLabel.size-72 {
            border-top: var(--textarea-xl-filled-spacer-top) var(--textarea-spacer-style);
            border-bottom: var(--textarea-xl-filled-spacer-bottom) var(--textarea-spacer-style);
        }
.resizable-40.resizable-40 {
    padding-right: 0;
}
.rightAddonsClassName {
    align-self: flex-start;
}
.rightAddonsClassName.size-40,
    .rightAddonsClassName.size-48 {
        padding-top: var(--gap-12);
    }
.rightAddonsClassName.size-56 {
        padding-top: var(--gap-16);
    }
.rightAddonsClassName.size-64 {
        padding-top: var(--gap-20);
    }
.rightAddonsClassName.size-72 {
        padding-top: var(--gap-24);
    }