@import url("./vars.css?v=5122");
@import url("./reset.css?v=4122");
@import url("./fonts.css?v=4122");
@import url("./buttons.css?v=8123");
@import url("./inputs.css?v=7122");
@import url("./tabs.css?v=4122");
@import url("./checkbox.css?v=5122");
@import url("./modal.css");
@import url("./countries.css");
@import url("./card.css?v=1");

#detach-button-host {
    display: none !important;
}

:root {
    --innerOffset: 32px;
    font-size: 1px;
}

body {
    font-size: 16px;
}

@media (min-width: 768px) {
    :root {
        --innerOffset: 64px;
    }

    .inner {
        max-width: 1440px;
        margin: 0 auto;
    }
}

*,
:before,
:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

::-moz-selection {
    color: rgba(var(--white), 1);
    background: rgba(var(--black), 1);
}

::selection {
    color: rgba(var(--white), 1);
    background: rgba(var(--black), 1);
}

.hidden {
    display: none !important;
}
html,
body,
input,
textarea {
    font-size: 22px;
    font-family:
        "Roboto",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        "Open Sans",
        "Helvetica Neue",
        sans-serif;
    color: rgb(var(--fontColor));
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}
html,
body,
.content,
#wrapper {
    background: rgb(var(--bgColor));
}

svg,
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: block;
}
#wrapper {
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: start;
    flex-direction: column;
    min-height: 100vh;
}

#wrapper > * {
    width: 100%;
}

.inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-grow: 1;
    padding: 0 var(--innerOffset);
    margin: 0 auto;
}

.content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-grow: 1;
    padding-block: var(--innerOffset);
}

@media (min-height: 768px) and (max-height: 1200px) and (min-width: 768px) {
    .content {
        padding-block: calc(var(--innerOffset) / 6);
    }
}

.formCard {
    display: flex;
    margin-block: auto;
    align-items: stretch;
    flex-grow: 1;
    gap: var(--cardPx);
}

@media (min-height: 768px) and (max-height: 1200px) and (min-width: 768px) {
    .formCard {
        --cardPy: 20px;
    }
}

@media (min-width: 768px) {
    .formCard {
        flex-grow: 0;
        min-height: 660px;
    }
}

@media (max-width: 767px) {
    .formCard {
        padding: 0;
    }
}

.formVideoWrapper {
    display: none;
    max-width: 642px;
    width: 100%;
    background: rgba(236, 240, 245, 1)
        linear-gradient(to bottom, #edf0f6, #edf0f6);
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
    border-top-right-radius: 64px;
    border-bottom-right-radius: 64px;
    margin-inline-start: calc(var(--cardPx) * -1);
    margin-block: calc(var(--cardPy) * -1);
    overflow: hidden;
    position: relative;
}

.formVideoWrapper:has(video[data-variant-shuffle]) {
    border-radius: 34px;
    background: #a6aed4 linear-gradient(to bottom, #a6aed4, #222448);
}

@media (min-width: 768px) {
    .formVideoWrapper {
        display: block;
    }
}

.formVideoWrapper .video {
    object-fit: cover;
    position: absolute;
    width: 100%;
    height: 100%;
}

.formWrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    border-radius: inherit;
}

@media (min-height: 768px) {
    .formWrapper:not(:has(.languageButton)) {
        padding-block-start: 58px;
    }
}

.formWrapper .languageButton {
    --languageButtonOffset: 12px;
    padding-inline: var(--languageButtonOffset);
    display: flex;
    align-items: center;
    gap: var(--languageButtonOffset);
    height: 48px;
    background: #fff;
    border: 1px solid #e1e8f1;
    border-radius: 8px;
    cursor: pointer;
    max-width: 100%;
    width: max-content;
    margin-inline-start: auto;
    margin-block-end: 88px;
    min-width: 250px;
}

@media (min-height: 768px) and (max-height: 1200px) and (min-width: 768px),
    (max-width: 767px) and (max-height: 600px) {
    .formWrapper .languageButton {
        margin-block-end: 16px;
        margin-inline-end: calc(var(--cardPx) * -1);
        margin-block-start: calc(var(--cardPy) * -1);
        border-top-left-radius: 0;
        border-top-right-radius: inherit;
        border-bottom-right-radius: 0;
        border-top: none;
        border-right: none;
    }
}

@media (max-width: 767px) and (max-height: 800px) {
    .formWrapper .languageButton {
        margin-block-end: 24px;
    }
}

@media (max-width: 767px) and (max-height: 600px) {
    .formWrapper .languageButton {
        margin-block-start: calc(var(--innerOffset) * -1);
    }
}

.formWrapper .languageButton .flag {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 7px;
    padding-block: 4px;
    border-radius: 4px;
    background: #ecf0f5;
}

.formWrapper .languageButton .flag .img {
    border-radius: inherit;
    width: 34px;
    height: auto;
}

.formWrapper .languageButton .text {
    color: #303345;
    white-space: nowrap;
    font-size: 14px;
    line-height: 125%;
    font-weight: 500;
    padding-inline-end: var(--languageButtonOffset);
}

.formWrapper .languageButton .chevron {
    flex-shrink: 0;
    margin-inline-start: auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    aspect-ratio: 1/1;
    background: #ecf0f5;
}

.formWrapper .languageButton .chevron .icon {
    color: #303345;
    width: 8px;
    transition: rotate 0.25s ease;
}

.formContent {
    width: 100%;
    max-width: 326px;
    margin-inline: auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .formContent {
        max-width: 100%;
        width: 406px;
    }
}

@media (min-height: 768px) and (max-height: 1200px) and (min-width: 768px) {
    .formContent {
        width: 446px;
    }
}

.logoLink {
    display: block;
    max-width: 108px;
    margin-inline: auto;
    margin-block-end: 24px;
    width: 100%;
}

.logoLink img {
    width: 100%;
}

@media (min-width: 768px) {
    .logoLink {
        margin-inline: 0;
        margin-block-end: 32px;
    }
}

@media (min-height: 768px) and (max-height: 1200px) and (min-width: 768px) {
    .logoLink {
        margin-block-end: 16px;
    }
}

.btns {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.loginButton .staticIcon,
.loginButton .icon {
    flex-shrink: 0;
}

.loginButton .icon {
    width: 16px;
}

.textContainer {
    --clipTextPercent: calc(var(--clipTextVal) * 1%);
    position: relative;
    z-index: 1;
    white-space: nowrap;
    display: grid;
}

.textContainer::before,
.textContainer::after {
    content: "";
    grid-area: 1/1;
    padding-block: 0.25ex;
}

.roundedLoginButton .textContainer::before {
    content: attr(data-text-default);
}

.roundedLoginButton.success .textContainer::after {
    content: attr(data-text-success);
}

.roundedLoginButton.success .textContainer::before {
    clip-path: polygon(
        var(--clipTextPercent) 0,
        100% 0,
        100% 100%,
        var(--clipTextPercent) 100%
    );
}

.roundedLoginButton.success .textContainer::after {
    max-width: calc(2px * var(--clipTextVal));
    overflow: hidden;
}

.roundedLoginButton {
    --roundSize: 5px;
    --animationDuration: 2s;
    --trailDefaultColor: #ffffff;
    --trailAccentColor: var(--trailDefaultColor);
    position: relative;
    animation-duration: var(--animationDuration);
    animation-timing-function: ease;
    animation-iteration-count: 1;
    transition: scale 0.15s ease;
}

.roundedLoginButton:not(:is(:disabled, .outline, .social)):is(
        :active,
        :focus-visible
    ) {
    scale: 0.97 0.97;
}

@media (hover: hover) {
    .roundedLoginButton:not(:is(:disabled, .outline, .social)):is(
            :active,
            :focus-visible,
            :hover
        ) {
        --bgColor: rgba(var(--dark), 1) !important;
    }
}

.roundedLoginButton.start {
    animation-name: buttonParentAni;
}

.roundedLoginButton.start .trail .t {
    animation-name: trailAni;
}

.roundedLoginButton.success {
    --trailAccentColor: #02f73b;
}

.roundedLoginButton.success,
.roundedLoginButton.success .trail .t {
    animation-fill-mode: forwards;
}

.roundedLoginButton.error {
    --trailAccentColor: red;
    animation-fill-mode: backwards;
}

.roundedLoginButton.error,
.roundedLoginButton.error .trail .t {
    animation-fill-mode: backwards;
}

.roundedLoginButton .trail {
    --border: 5px;
    --startDistanse: 14.5%;
    --lineOffset: 2%;
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    width: calc(100% + var(--border));
    height: calc(100% + var(--border));
    translate: -50% -50%;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    padding: var(--border);
    overflow: hidden;
    filter: drop-shadow(0px 2px 10px hsl(from var(--trailColor) h s l / 30%));
}

.roundedLoginButton .trail .t {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    width: 50px;
    height: var(--border);
    background: var(--trailColor);
    offset-path: rect(0 100% 100% 0 round var(--buttonRadius));
    offset-anchor: 50% 0%;
    animation-duration: var(--animationDuration);
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: calc(var(--acc) * 0.01s);
    animation-composition: accumulate;
    offset-distance: calc(
        var(--lineOffset) + var(--startDistanse) + var(--distance)
    );
    border-radius: 4px;
    clip-path: polygon(
        var(--clipStart) 0%,
        var(--clipEnd) 0,
        var(--clipEnd) 100%,
        var(--clipStart) 100%
    );
    transform-origin: 0% 50%;
}

.roundedLoginButton .iconArea {
    width: 24px;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    justify-content: center;
    justify-items: flex-end;
}

.roundedLoginButton .logoWrapper {
    grid-area: 1/1;
}

.roundedLoginButton .logoWrapper svg {
    stroke-width: 1px;
    stroke-dasharray: 500;
    stroke-dashoffset: var(--logoOffset);
    max-width: 100%;
    width: auto;
    height: auto;
}

.roundedLoginButton .logoWrapper svg [stroke] {
    stroke: var(--trailColor);
}

.roundedLoginButton .logoWrapper:has([fill]) svg {
    stroke: hsl(from var(--trailColor) h s l / var(--logoStrokeOpacity));
    fill: hsl(from var(--trailColor) h s l / var(--logoFillOpacity));
}

.roundedLoginButton .logoWrapper:has([fill]) svg * {
    fill: inherit;
}

.roundedLoginButton .roundLoginIcon {
    grid-area: 1/1;
    width: 19px;
    flex-shrink: 0;
    transition: none;
    transform-origin: 0% 0%;
    rotate: var(--iconRotate);
    opacity: var(--iconOpacity);
}

@keyframes buttonParentAni {
    20% {
        --trailColor: var(--trailDefaultColor);
    }

    30%,
    to {
        --trailColor: var(--trailAccentColor);
    }

    from,
    30% {
        --iconRotate: 0deg;
        --iconOpacity: 1;
    }

    50%,
    to {
        --iconRotate: -85deg;
        --iconOpacity: 0;
    }

    from,
    40% {
        --logoStrokeOpacity: 100%;
        --logoFillOpacity: 0%;
        --logoOffset: 500;
    }

    90%,
    to {
        --logoStrokeOpacity: 0%;
        --logoFillOpacity: 100%;
        --logoOffset: 0;
    }

    60% {
        --clipTextVal: 0;
    }

    70%,
    to {
        --clipTextVal: 100;
    }
}

@keyframes trailAni {
    from {
        --clipStart: 100%;
        --clipEnd: 100%;
    }

    from,
    5% {
        --distance: 0%;
    }

    10%,
    30% {
        --clipStart: 100%;
        --clipEnd: 0%;
    }

    35%,
    to {
        transform-origin: 100% 50%;
        --distance: -95%;
        --clipStart: 0%;
        --clipEnd: 0%;
    }
}

@property --iconRotate {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: true;
}

@property --iconOpacity {
    syntax: "<number>";
    initial-value: 1;
    inherits: true;
}

@property --logoStrokeOpacity {
    syntax: "<percentage>";
    initial-value: 0%;
    inherits: true;
}

@property --logoFillOpacity {
    syntax: "<percentage>";
    initial-value: 0%;
    inherits: true;
}

@property --logoOffset {
    syntax: "<number>";
    initial-value: 500;
    inherits: true;
}

@property --clipTextVal {
    syntax: "<number>";
    initial-value: 0;
    inherits: true;
}

@property --clipStart {
    syntax: "<percentage>";
    initial-value: 0%;
    inherits: true;
}

@property --clipEnd {
    syntax: "<percentage>";
    initial-value: 0%;
    inherits: true;
}

@property --distance {
    syntax: "<percentage>";
    initial-value: 0%;
    inherits: true;
}

@property --trailColor {
    syntax: "<color>";
    initial-value: #fff;
    inherits: true;
}

.logoutButton .icon,
.registrationButton .icon {
    width: 18px;
    flex-shrink: 0;
}

.logoutButton .icon,
.loginButton .icon,
.registrationButton .icon {
    opacity: 0;
    animation: showIcons 0.5s ease 1 forwards;
    animation-delay: 1s;
}

.logoutButton .icon [fill],
.loginButton .icon [fill],
.registrationButton .icon [fill] {
    fill: currentColor;
}

.logoutButton .icon [stroke],
.loginButton .icon [stroke],
.registrationButton .icon [stroke] {
    stroke: currentColor;
}

.cancelInviteButton .icon {
    width: 20px;
    flex-shrink: 0;
    transition: transform 0.5s ease;
}

.cancelInviteButton:focus-within .icon {
    transform: rotateY(360deg);
}

@keyframes showIcons {
    to {
        opacity: 1;
    }
}

.loginButton .icon svg,
.registrationButton .icon svg {
    transform: none !important;
}

.loginButton .icon svg path[fill],
.registrationButton .icon svg path[fill] {
    fill: currentColor !important;
}

.loginButton .icon svg path[stroke],
.registrationButton .icon svg path[stroke] {
    stroke: currentColor !important;
}

.link {
    color: rgba(var(--baseColor));
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    line-height: 129%;
}

.link:hover {
    text-decoration: underline;
}

.formInputs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (max-width: 767px) {
    .formInputs .input__wrapper + :not(.input__wrapper) {
        margin-block-start: 18px;
    }
}

@media (min-width: 768px) {
    .formInputs {
        gap: 20px;
    }
}

@media (min-height: 768px) and (max-height: 1200px) and (min-width: 768px) {
    .formInputs {
        gap: 12px;
    }
}

.formInputsBottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-height: 768px) and (max-height: 1200px) and (min-width: 768px) {
    .formInputsBottom {
        margin-block-start: 8px;
    }
}

.formInputsBottomRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: inherit;
}

.captchaRow {
    margin-block-start: 12px;
}

.formBottom:not(:first-child) {
    margin-block-start: 24px;
}

.socialAuth {
    margin-block-start: 16px;
}

@media (min-width: 768px) {
    .socialAuth {
        margin-block-start: 34px;
    }
}

@media (min-height: 768px) and (max-height: 1200px) and (min-width: 768px) {
    .socialAuth {
        margin-block-start: 24px;
    }
}

.socialAuthSplit {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    position: relative;
    color: color-mix(in srgb, rgb(var(--dark)) 50%, rgb(var(--white)) 100%);
    font-size: 14px;
    line-height: 1;
    text-transform: lowercase;
    margin-block-end: 16px;
}

@media (min-width: 768px) {
    .socialAuthSplit {
        margin-block-end: 34px;
    }
}

@media (min-height: 768px) and (max-height: 1200px) and (min-width: 768px) {
    .socialAuthSplit {
        margin-block-end: 24px;
    }
}

.socialAuthSplit::before,
.socialAuthSplit::after {
    content: "";
    height: 2px;
    width: 100%;
    background: currentColor;
    display: block;
    opacity: 0.25;
}

.formCredits {
    color: rgb(var(--slate));
    font-size: 12px;
    line-height: 125%;
    text-align: center;
    font-weight: 500;
    margin-inline: auto;
    margin-block-start: auto;
    padding-block-start: 64px;
}

@media (min-height: 768px) and (max-height: 1200px) and (min-width: 768px) {
    .formCredits {
        padding-block-start: 32px;
    }
}

.formTitle {
    font-size: 36px;
    line-height: 125%;
    font-weight: 700;
    margin-block-end: 12px;
}

.formTitle:has(+ .inviteDescription),
.formTitle:not(:has(+ .formDescription)) {
    margin-block-end: 24px;
}

.titleEmoji {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    vertical-align: middle;
    margin-inline-start: 6px;
    font-size: 0.88em;
    transform: translateY(-2px);
}

.formTitle:has(.titleEmoji) {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.resetPasswordInput .input__block {
    height: 52px;
}

.resetPassword__sentImage {
    display: flex;
    justify-content: center;
    width: 115px;
    height: 118px;
    position: relative;
    margin: -32px auto 0;
}

.resetPassword__sentImage svg {
    width: 115px;
    height: 118px;
    opacity: 1;
}

.resetPassword__sentImage_lottie {
    width: 115px;
    height: 118px;
    position: absolute;
    inset: 0;
    opacity: 0;
}

.resetPassword__sentImage_lottie.is-visible {
    opacity: 1;
}

.resetPassword__resendLabel {
    margin: 0 0 14px;
    border-radius: 10px;
    background-color: #ecf0f5;
    color: #303345;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    text-align: center;
    padding: 0 12px;
    width: 100%;
    border: 0;
    min-height: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #303345;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
}

.resetPassword__resendLabel:not([disabled]) {
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .resetPassword__resendLabel:hover:not(:disabled) {
        background-color: #e0e4e9;
    }
}

.resetPassword__resendLabel:active,
.resetPassword__resendLabel:focus-visible {
    background-color: #ccd0d5;
}

.resetPassword__resendLabel:disabled {
    color: #a4a5b1;
    cursor: not-allowed;
}

.helloHandImg {
    display: inline-block;
    width: 28px;
    transform-origin: 80% 80%;
    animation: helloAni 2.5s ease 1 forwards;
}

@media (min-width: 768px) {
    .helloHandImg {
        width: 40px;
    }
}

@keyframes helloAni {
    25% {
        rotate: 20deg;
    }
    50% {
        rotate: -10deg;
    }
    75% {
        rotate: 5deg;
    }
}

.formDescription {
    color: #a4a5b1;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    margin-block-end: 24px;
}

.formDescription.telegram {
    margin-block-end: 0;
    font-size: 14px;
    margin-block-start: 12px;
}

@media (min-width: 768px) {
    .formDescription.telegram {
        margin-block-start: 0;
    }
}

.formDescription:has(+ .inviteDescription) {
    margin-block-end: 16px;
    color: rgba(var(--fontColor), 0.5);
}

.inviteDescription .link,
.formDescription .link {
    font-size: inherit;
}

.teamInviteLabel,
.teamInviteFrom {
    font-weight: 500;
    color: rgb(var(--fontColor));
}

.inviteDescription {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    line-height: 125%;
    margin-block-end: 24px;
}

@media (min-width: 768px) {
    .inviteDescription {
        font-size: 14px;
    }
}

.inviteDescription a {
    font-weight: bold;
}

.teamInviteFrom {
    margin-block-start: 2px;
    font-size: 14px;
}

@media (min-width: 768px) {
    .teamInviteFrom {
        font-size: 16px;
    }
}

.resetPassword__notify:empty {
    display: none;
}

img,
#formVideo {
    opacity: 0;
    transition: opacity 0.5s ease;
}

#formVideo {
    transition-duration: 0.75s;
}

img.active,
#formVideo[src],
#formVideo[poster] {
    opacity: 1;
}

.button__resend[disabled] .button__resend_text {
    display: none;
}

.button__resend:not([disabled]) .button__resend_timer_text {
    display: none;
}