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

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

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

:root:has(#language-modal.active) .formWrapper .languageButton .chevron .icon {
  rotate: 180deg;
}

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

.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: rgb(var(--gray2));
  font-size: 16px;
  line-height: 125%;
  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;
}