/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[13].use[5]!./node_modules/react-toastify/dist/ReactToastify.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: hsl(6, 78%, 57%);
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);
  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);
  --toastify-container-width: fit-content;
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-padding: 14px;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;
  /* Used only for colored theme */
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;
  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  /* used to control the opacity of the progress trail */
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  width: var(--toastify-container-width);
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.Toastify__toast-container--top-left {
  top: var(--toastify-toast-top);
  left: var(--toastify-toast-left);
}

.Toastify__toast-container--top-center {
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}

.Toastify__toast-container--top-right {
  top: var(--toastify-toast-top);
  right: var(--toastify-toast-right);
  align-items: end;
}

.Toastify__toast-container--bottom-left {
  bottom: var(--toastify-toast-bottom);
  left: var(--toastify-toast-left);
}

.Toastify__toast-container--bottom-center {
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}

.Toastify__toast-container--bottom-right {
  bottom: var(--toastify-toast-bottom);
  right: var(--toastify-toast-right);
  align-items: end;
}

.Toastify__toast {
  --y: 0;
  position: relative;
  touch-action: none;
  width: var(--toastify-toast-width);
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: var(--toastify-toast-padding);
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: var(--toastify-toast-shadow);
  max-height: var(--toastify-toast-max-height);
  font-family: var(--toastify-font-family);
  /* webkit only issue #791 */
  z-index: 0;
  /* inner swag */
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  word-break: break-word;
}

@media only screen and (max-width: 480px) {
  .Toastify__toast-container {
    width: 100vw;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left,
  .Toastify__toast-container--top-center,
  .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left,
  .Toastify__toast-container--bottom-center,
  .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: initial;
  }
  .Toastify__toast {
    --toastify-toast-width: 100%;
    margin-bottom: 0;
    border-radius: 0;
  }
}
.Toastify__toast-container[data-stacked=true] {
  width: var(--toastify-toast-width);
}

.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}

.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body,
.Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}

.Toastify__toast--stacked[data-collapsed=false] {
  overflow: visible;
}

.Toastify__toast--stacked[data-collapsed=true]:not(:last-child) > * {
  opacity: 0;
}

.Toastify__toast--stacked:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}

.Toastify__toast--stacked[data-pos=top] {
  top: 0;
}

.Toastify__toast--stacked[data-pos=bot] {
  bottom: 0;
}

.Toastify__toast--stacked[data-pos=bot].Toastify__toast--stacked:before {
  transform-origin: top;
}

.Toastify__toast--stacked[data-pos=top].Toastify__toast--stacked:before {
  transform-origin: bottom;
}

.Toastify__toast--stacked:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}

.Toastify__toast--rtl {
  direction: rtl;
}

.Toastify__toast--close-on-click {
  cursor: pointer;
}

.Toastify__toast-icon {
  -webkit-margin-end: 10px;
          margin-inline-end: 10px;
  width: 22px;
  flex-shrink: 0;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

.Toastify__toast-theme--dark {
  background: var(--toastify-color-dark);
  color: var(--toastify-text-color-dark);
}

.Toastify__toast-theme--light {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--default {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--info {
  color: var(--toastify-text-color-info);
  background: var(--toastify-color-info);
}

.Toastify__toast-theme--colored.Toastify__toast--success {
  color: var(--toastify-text-color-success);
  background: var(--toastify-color-success);
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: var(--toastify-text-color-warning);
  background: var(--toastify-color-warning);
}

.Toastify__toast-theme--colored.Toastify__toast--error {
  color: var(--toastify-text-color-error);
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: var(--toastify-color-progress-light);
}

.Toastify__progress-bar-theme--dark {
  background: var(--toastify-color-progress-dark);
}

.Toastify__progress-bar--info {
  background: var(--toastify-color-progress-info);
}

.Toastify__progress-bar--success {
  background: var(--toastify-color-progress-success);
}

.Toastify__progress-bar--warning {
  background: var(--toastify-color-progress-warning);
}

.Toastify__progress-bar--error {
  background: var(--toastify-color-progress-error);
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  z-index: 1;
}

.Toastify__toast--rtl .Toastify__close-button {
  left: 6px;
  right: unset;
}

.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}

.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}

.Toastify__close-button:hover,
.Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.7;
  transform-origin: left;
}

.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}

.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}

.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: initial;
}

.Toastify__progress-bar--wrp {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}

.Toastify__progress-bar--wrp[data-hidden=true] {
  opacity: 0;
}

.Toastify__progress-bar--bg {
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes Toastify__bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.Toastify__bounce-enter--top-left,
.Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}

.Toastify__bounce-enter--top-right,
.Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}

.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}

.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left,
.Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}

.Toastify__bounce-exit--top-right,
.Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}

.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}

.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}
@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}
.Toastify__slide-enter--top-left,
.Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}

.Toastify__slide-enter--top-right,
.Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}

.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}

.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left,
.Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-right,
.Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[13].use[5]!./node_modules/@firstcall-qa/tf-react-components/dist/index.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.avatar.avatar-s {
  width: 24px;
  height: 24px;
}

.avatar.avatar-xs {
  width: 16px;
  height: 16px;
}

.avatar.avatar-m {
  width: 32px;
  height: 32px;
}

.avatar.avatar-l {
  width: 48px;
  height: 48px;
}

.avatar.avatar-profile {
  width: 96px;
  height: 96px;
}

.avatar .container {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  color: var(--color-text-brand-bold);
  background-color: var(--color-bg-brand-subtle-enabled);
  display: grid;
  place-items: center;
}

.avatar.clickable .container {
  cursor: pointer;
}

.avatar.avatar-letter.avatar-s .letter {
  font-family: var(--font-family-heading), serif;
  font-style: normal;
  font-size: var(--typography-size-heading6, 16px);
  font-weight: var(--typography-weight-heading6, 600);
  line-height: var(--typography-lineHeight-heading6, 24px);
}

.avatar.avatar-letter.avatar-xs .letter {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body5, 8px);
  line-height: var(--typography-lineHeight-body5, 12px);
  font-weight: var(--typography-weight-body5-regular, 400);
}

.avatar.avatar-letter.avatar-m .letter {
  font-family: var(--font-family-heading), serif;
  font-style: normal;
  font-size: var(--typography-size-heading5, 20px);
  font-weight: var(--typography-weight-heading5, 600);
  line-height: var(--typography-lineHeight-heading5, 24px);
}

.avatar.avatar-letter.avatar-l .letter {
  font-family: var(--font-family-heading), serif;
  font-style: normal;
  font-size: var(--typography-size-heading4, 24px);
  font-weight: var(--typography-weight-heading4, 600);
  line-height: var(--typography-lineHeight-heading4, 32px);
}

.avatar.avatar-letter.avatar-profile .letter {
  font-family: var(--font-family-heading), serif;
  font-style: normal;
  font-size: var(--typography-size-heading2, 48px);
  font-weight: var(--typography-weight-heading2, 600);
  line-height: var(--typography-lineHeight-heading2, 64px);
}

.avatar.avatar-image .container {
  overflow: clip;
}

:where(.busy-indicator-root) {
  position: relative;
  inset: 0;
  height: 100%;
  width: 100%;
}

:where(.busy-indicator-root > .content) {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

:where(.busy-indicator-cover) {
  background: var(--color-bg-inverseoverlay);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1002;
}

:where(.busy-indicator-cover .animation) {
  display: grid;
}

:where(.busy-indicator-cover .animation) svg path, :where(.busy-indicator-cover .animation) svg rect {
  fill: var(--color-icon-default);
}

.cloud-credits {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  color: var(--color-text-default);
}

.cloud-credits.dark-mode {
  color: var(--color-text-inverse);
}

.cloud-credits.low {
  color: var(--color-text-negative-default);
}

.cloud-credits .amount {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-semibold, 600);
  color: inherit;
}

.cloud-credits .unit {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  color: inherit;
}

:where(.ellipsis-div) {
  overflow: hidden;
  box-sizing: border-box !important;
}

:where(.ellipsis-div > div) {
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: margin 0.25s linear;
}

@font-face {
  font-family: font-icon;
  src: url(/_next/static/media/font-icon-5TVT23U4.eceb3d6e.woff2) format("woff2"), url(/_next/static/media/font-icon-XTPC55V4.bcde2ef6.woff) format("woff"), url(/_next/static/media/font-icon-BXCR2PU5.0dc51d3e.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
.font-icon {
  font-family: font-icon, serif;
  speak: never;
  font-style: normal;
  font-weight: 400;
  font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-icon.clickable {
  cursor: pointer;
}

.font-icon.bottom_panel_close:before {
  content: "\ea01";
}

.font-icon.custom_ai_record:before {
  content: "\ea02";
}

.font-icon.custom_ai_record {
  background: -webkit-linear-gradient(left, #977EFB, #5EACFF);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.font-icon.custom_ai_symbol:before {
  content: "\ea03";
}

.font-icon.custom_auto:before {
  content: "\ea04";
}

.font-icon.custom_automated-test-case:before {
  content: "\ea05";
}

.font-icon.custom_color:before {
  content: "\ea06";
}

.font-icon.custom_cursor_grab:before {
  content: "\ea07";
}

.font-icon.custom_delay:before {
  content: "\ea08";
}

.font-icon.custom_documentation:before {
  content: "\ea09";
}

.font-icon.custom_file-settings:before {
  content: "\ea0a";
}

.font-icon.custom_fill-in:before {
  content: "\ea0b";
}

.font-icon.custom_format_doc:before {
  content: "\ea0c";
}

.font-icon.custom_hand-w-key:before {
  content: "\ea0d";
}

.font-icon.custom_layout_botton:before {
  content: "\ea0e";
}

.font-icon.custom_layout_right:before {
  content: "\ea0f";
}

.font-icon.custom_manager-dashboard:before {
  content: "\ea10";
}

.font-icon.custom_mapping:before {
  content: "\ea11";
}

.font-icon.custom_maximize:before {
  content: "\ea12";
}

.font-icon.custom_mic_alt:before {
  content: "\ea13";
}

.font-icon.custom_new-test-case:before {
  content: "\ea14";
}

.font-icon.custom_organizations:before {
  content: "\ea15";
}

.font-icon.custom_run_current_step_and_move_to_next:before {
  content: "\ea16";
}

.font-icon.custom_run_current_step_and_stay_on_it:before {
  content: "\ea17";
}

.font-icon.custom_run_locally:before {
  content: "\ea18";
}

.font-icon.custom_run_remotely:before {
  content: "\ea19";
}

.font-icon.custom_skip_current_step:before {
  content: "\ea1a";
}

.font-icon.custom_t:before {
  content: "\ea1b";
}

.font-icon.custom_template:before {
  content: "\ea1c";
}

.font-icon.custom_test-run:before {
  content: "\ea1d";
}

.font-icon.custom_tr:before {
  content: "\ea1e";
}

.font-icon.custom-briefcase:before {
  content: "\ea1f";
}

.font-icon.custom-chats-teardrop:before {
  content: "\ea20";
}

.font-icon.custom-coins:before {
  content: "\ea21";
}

.font-icon.custom-file-text:before {
  content: "\ea22";
}

.font-icon.custom-headset:before {
  content: "\ea23";
}

.font-icon.custom-loop:before {
  content: "\ea24";
}

.font-icon.custom-parallelogram:before {
  content: "\ea25";
}

.font-icon.custom-play-circle:before {
  content: "\ea26";
}

.font-icon.custom-star-four:before {
  content: "\ea27";
}

.font-icon.custom-user-check:before {
  content: "\ea28";
}

.font-icon.custom-user-gear:before {
  content: "\ea29";
}

.font-icon.custom-wrench:before {
  content: "\ea2a";
}

.font-icon.empty_state:before {
  content: "\ea2b";
}

.font-icon.empty_state {
  background: #fff;
  background: radial-gradient(circle, #c0c5cc 0% 17%, #ebecee 18% 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.font-icon.file_not_found:before {
  content: "\ea2c";
}

.font-icon.flat_home:before {
  content: "\ea2d";
}

.font-icon.icon_add_card:before {
  content: "\ea2e";
}

.font-icon.icon_add-documents:before {
  content: "\ea2f";
}

.font-icon.icon_add-sub-section:before {
  content: "\ea30";
}

.font-icon.icon_anton_filled:before {
  content: "\ea31";
}

.font-icon.icon_anton_filled {
  color: #1f57a4;
}

.font-icon.icon_arrow_circle_up:before {
  content: "\ea32";
}

.font-icon.icon_bug_filled:before {
  content: "\ea33";
}

.font-icon.icon_bug_filled {
  color: #d22d2d;
}

.font-icon.icon_checkbox-intermediate_filled:before {
  content: "\ea34";
}

.font-icon.icon_cloud_credit:before {
  content: "\ea35";
}

.font-icon.icon_cloud_credit {
  background: -webkit-linear-gradient(#F9C517, #FF7E25);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.font-icon.icon_environment:before {
  content: "\ea36";
}

.font-icon.icon_environment {
  color: #ff7e25;
}

.font-icon.icon_execution_pointer_filled:before {
  content: "\ea37";
}

.font-icon.icon_features_filled:before {
  content: "\ea38";
}

.font-icon.icon_features_filled {
  color: #5dcdb5;
}

.font-icon.icon_project:before {
  content: "\ea39";
}

.font-icon.icon_run:before {
  content: "\ea3a";
}

.font-icon.icon_Sort_Down:before {
  content: "\ea3b";
}

.font-icon.icon_Sort_Up:before {
  content: "\ea3c";
}

.font-icon.icon_suite:before {
  content: "\ea3d";
}

.font-icon.icon_suite {
  color: #5dcdb5;
}

.font-icon.icon_tasks_filled:before {
  content: "\ea3e";
}

.font-icon.icon_tasks_filled {
  color: #3697ff;
}

.font-icon.icon_windows:before {
  content: "\ea3f";
}

.font-icon.icon-giftbox:before {
  content: "\ea40";
}

.font-icon.icon-key:before {
  content: "\ea41";
}

.font-icon.mms_image:before {
  content: "\ea42";
}

.font-icon.ms_3p:before {
  content: "\ea43";
}

.font-icon.ms_account_tree:before {
  content: "\ea44";
}

.font-icon.ms_add:before {
  content: "\ea45";
}

.font-icon.ms_add_circle:before {
  content: "\ea46";
}

.font-icon.ms_add_circle_filled:before {
  content: "\ea47";
}

.font-icon.ms_add_photo_alternate:before {
  content: "\ea48";
}

.font-icon.ms_app_registration:before {
  content: "\ea49";
}

.font-icon.ms_apps:before {
  content: "\ea4a";
}

.font-icon.ms_arrow_drop_down:before {
  content: "\ea4b";
}

.font-icon.ms_arrow_drop_up:before {
  content: "\ea4c";
}

.font-icon.ms_arrow_left_alt:before {
  content: "\ea4d";
}

.font-icon.ms_arrow_right:before {
  content: "\ea4e";
}

.font-icon.ms_arrow_right_alt:before {
  content: "\ea4f";
}

.font-icon.ms_arrow_selector_tool:before {
  content: "\ea50";
}

.font-icon.ms_arrow_upward_alt:before {
  content: "\ea51";
}

.font-icon.ms_assignment:before {
  content: "\ea52";
}

.font-icon.ms_attach_file:before {
  content: "\ea53";
}

.font-icon.ms_auto_read_play:before {
  content: "\ea54";
}

.font-icon.ms_automation:before {
  content: "\ea55";
}

.font-icon.ms_autorenew:before {
  content: "\ea56";
}

.font-icon.ms_bid_landscape:before {
  content: "\ea57";
}

.font-icon.ms_block:before {
  content: "\ea58";
}

.font-icon.ms_bolt:before {
  content: "\ea59";
}

.font-icon.ms_book_2:before {
  content: "\ea5a";
}

.font-icon.ms_bug_report:before {
  content: "\ea5b";
}

.font-icon.ms_build:before {
  content: "\ea5c";
}

.font-icon.ms_calculate:before {
  content: "\ea5d";
}

.font-icon.ms_calendar_month:before {
  content: "\ea5e";
}

.font-icon.ms_calendar_view_week:before {
  content: "\ea5f";
}

.font-icon.ms_cancel:before {
  content: "\ea60";
}

.font-icon.ms_cancel_filled:before {
  content: "\ea61";
}

.font-icon.ms_celebration:before {
  content: "\ea62";
}

.font-icon.ms_chat:before {
  content: "\ea63";
}

.font-icon.ms_check:before {
  content: "\ea64";
}

.font-icon.ms_check_box:before {
  content: "\ea65";
}

.font-icon.ms_check_box_filled:before {
  content: "\ea66";
}

.font-icon.ms_check_box_outline_blank:before {
  content: "\ea67";
}

.font-icon.ms_check_circle:before {
  content: "\ea68";
}

.font-icon.ms_check_circle_filled:before {
  content: "\ea69";
}

.font-icon.ms_checkbook:before {
  content: "\ea6a";
}

.font-icon.ms_chevron_backward:before {
  content: "\ea6b";
}

.font-icon.ms_chevron_forward:before {
  content: "\ea6c";
}

.font-icon.ms_circle:before {
  content: "\ea6d";
}

.font-icon.ms_close:before {
  content: "\ea6e";
}

.font-icon.ms_close_fullscreen:before {
  content: "\ea6f";
}

.font-icon.ms_cloud:before {
  content: "\ea70";
}

.font-icon.ms_cloud_done:before {
  content: "\ea71";
}

.font-icon.ms_code:before {
  content: "\ea72";
}

.font-icon.ms_code_blocks:before {
  content: "\ea73";
}

.font-icon.ms_content_copy:before {
  content: "\ea74";
}

.font-icon.ms_content_copy_filled:before {
  content: "\ea75";
}

.font-icon.ms_content_paste:before {
  content: "\ea76";
}

.font-icon.ms_content_paste-1:before {
  content: "\ea77";
}

.font-icon.ms_contract_edit:before {
  content: "\ea78";
}

.font-icon.ms_corporate_fare:before {
  content: "\ea79";
}

.font-icon.ms_create_new_folder:before {
  content: "\ea7a";
}

.font-icon.ms_crop_3_2:before {
  content: "\ea7b";
}

.font-icon.ms_cut:before {
  content: "\ea7c";
}

.font-icon.ms_database:before {
  content: "\ea7d";
}

.font-icon.ms_delete:before {
  content: "\ea7e";
}

.font-icon.ms_deployed_code:before {
  content: "\ea7f";
}

.font-icon.ms_deployed_code_update:before {
  content: "\ea80";
}

.font-icon.ms_description:before {
  content: "\ea81";
}

.font-icon.ms_desktop_cloud:before {
  content: "\ea82";
}

.font-icon.ms_desktop_window:before {
  content: "\ea83";
}

.font-icon.ms_do_not_disturb_on:before {
  content: "\ea84";
}

.font-icon.ms_do_not_disturb_on_filled:before {
  content: "\ea85";
}

.font-icon.ms_docs:before {
  content: "\ea86";
}

.font-icon.ms_document_search:before {
  content: "\ea87";
}

.font-icon.ms_download:before {
  content: "\ea88";
}

.font-icon.ms_draft:before {
  content: "\ea89";
}

.font-icon.ms_drag_indicator:before {
  content: "\ea8a";
}

.font-icon.ms_drive_file_move:before {
  content: "\ea8b";
}

.font-icon.ms_edit:before {
  content: "\ea8c";
}

.font-icon.ms_edit_note:before {
  content: "\ea8d";
}

.font-icon.ms_electric_bolt_filled:before {
  content: "\ea8e";
}

.font-icon.ms_explore:before {
  content: "\ea8f";
}

.font-icon.ms_extension:before {
  content: "\ea90";
}

.font-icon.ms_fiber_manual_record_filled:before {
  content: "\ea91";
}

.font-icon.ms_fiber_manual_record_filled-1:before {
  content: "\ea92";
}

.font-icon.ms_file_copy:before {
  content: "\ea93";
}

.font-icon.ms_filter:before {
  content: "\ea94";
}

.font-icon.ms_filter_alt_filled:before {
  content: "\ea95";
}

.font-icon.ms_flag_2:before {
  content: "\ea96";
}

.font-icon.ms_flag_2_filled:before {
  content: "\ea97";
}

.font-icon.ms_folder:before {
  content: "\ea98";
}

.font-icon.ms_folder_copy:before {
  content: "\ea99";
}

.font-icon.ms_format_align_center:before {
  content: "\ea9a";
}

.font-icon.ms_format_align_justify:before {
  content: "\ea9b";
}

.font-icon.ms_format_align_left:before {
  content: "\ea9c";
}

.font-icon.ms_format_align_right:before {
  content: "\ea9d";
}

.font-icon.ms_format_bold:before {
  content: "\ea9e";
}

.font-icon.ms_format_bulleted:before {
  content: "\ea9f";
}

.font-icon.ms_format_color_fill:before {
  content: "\eaa0";
}

.font-icon.ms_format_italic:before {
  content: "\eaa1";
}

.font-icon.ms_format_list_numbered:before {
  content: "\eaa2";
}

.font-icon.ms_format_underlined:before {
  content: "\eaa3";
}

.font-icon.ms_forum:before {
  content: "\eaa4";
}

.font-icon.ms_group:before {
  content: "\eaa5";
}

.font-icon.ms_groups:before {
  content: "\eaa6";
}

.font-icon.ms_headphones:before {
  content: "\eaa7";
}

.font-icon.ms_help:before {
  content: "\eaa8";
}

.font-icon.ms_history:before {
  content: "\eaa9";
}

.font-icon.ms_imagesmode:before {
  content: "\eaaa";
}

.font-icon.ms_indeterminate_check_box:before {
  content: "\eaab";
}

.font-icon.ms_info:before {
  content: "\eaac";
}

.font-icon.ms_info_filled:before {
  content: "\eaad";
}

.font-icon.ms_info_i_filled:before {
  content: "\eaae";
}

.font-icon.ms_ink_selection:before {
  content: "\eaaf";
}

.font-icon.ms_instant_mix:before {
  content: "\eab0";
}

.font-icon.ms_integration_instructions:before {
  content: "\eab1";
}

.font-icon.ms_keep:before {
  content: "\eab2";
}

.font-icon.ms_keyboard_arrow_down:before {
  content: "\eab3";
}

.font-icon.ms_keyboard_arrow_up:before {
  content: "\eab4";
}

.font-icon.ms_keyboard_double_arrow_left:before {
  content: "\eab5";
}

.font-icon.ms_keyboard_double_arrow_right:before {
  content: "\eab6";
}

.font-icon.ms_keyboard_tab:before {
  content: "\eab7";
}

.font-icon.ms_keyboard_tab_rtl:before {
  content: "\eab8";
}

.font-icon.ms_lab_profile:before {
  content: "\eab9";
}

.font-icon.ms_labs:before {
  content: "\eaba";
}

.font-icon.ms_language:before {
  content: "\eabb";
}

.font-icon.ms_left_panel_close:before {
  content: "\eabc";
}

.font-icon.ms_library_books:before {
  content: "\eabd";
}

.font-icon.ms_lightbulb_2_filled:before {
  content: "\eabe";
}

.font-icon.ms_lightbulb_2_filled {
  background: -webkit-linear-gradient(#F9C517, #FF7E25);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.font-icon.ms_link:before {
  content: "\eabf";
}

.font-icon.ms_live_tv:before {
  content: "\eac0";
}

.font-icon.ms_lock:before {
  content: "\eac1";
}

.font-icon.ms_lock_filled:before {
  content: "\eac2";
}

.font-icon.ms_logout:before {
  content: "\eac3";
}

.font-icon.ms_manage_accounts:before {
  content: "\eac4";
}

.font-icon.ms_manage_search:before {
  content: "\eac5";
}

.font-icon.ms_match_case:before {
  content: "\eac6";
}

.font-icon.ms_memory:before {
  content: "\eac7";
}

.font-icon.ms_menu:before {
  content: "\eac8";
}

.font-icon.ms_mic:before {
  content: "\eac9";
}

.font-icon.ms_more_horiz:before {
  content: "\eaca";
}

.font-icon.ms_more_vert:before {
  content: "\eacb";
}

.font-icon.ms_mouse:before {
  content: "\eacc";
}

.font-icon.ms_my_location:before {
  content: "\eacd";
}

.font-icon.ms_no_sound:before {
  content: "\eace";
}

.font-icon.ms_note_add:before {
  content: "\eacf";
}

.font-icon.ms_note_stack:before {
  content: "\ead0";
}

.font-icon.ms_open_in_full:before {
  content: "\ead1";
}

.font-icon.ms_open_in_new:before {
  content: "\ead2";
}

.font-icon.ms_pause:before {
  content: "\ead3";
}

.font-icon.ms_pause_circle:before {
  content: "\ead4";
}

.font-icon.ms_pause_circle_filled_filled:before {
  content: "\ead5";
}

.font-icon.ms_pending_actions:before {
  content: "\ead6";
}

.font-icon.ms_person:before {
  content: "\ead7";
}

.font-icon.ms_photo_camera:before {
  content: "\ead8";
}

.font-icon.ms_pie_chart:before {
  content: "\ead9";
}

.font-icon.ms_play_circle:before {
  content: "\eada";
}

.font-icon.ms_play_circle_filled:before {
  content: "\eadb";
}

.font-icon.ms_play_circle-1:before {
  content: "\eadc";
}

.font-icon.ms_play_pause:before {
  content: "\eadd";
}

.font-icon.ms_post_add:before {
  content: "\eade";
}

.font-icon.ms_preview:before {
  content: "\eadf";
}

.font-icon.ms_problem:before {
  content: "\eae0";
}

.font-icon.ms_publish:before {
  content: "\eae1";
}

.font-icon.ms_quote:before {
  content: "\eae2";
}

.font-icon.ms_radio_button_checked:before {
  content: "\eae3";
}

.font-icon.ms_radio_button_unchecked:before {
  content: "\eae4";
}

.font-icon.ms_receipt_long:before {
  content: "\eae5";
}

.font-icon.ms_recordinng_start:before {
  content: "\eae6";
}

.font-icon.ms_recordinng_start {
  color: #d22d2d;
}

.font-icon.ms_redo:before {
  content: "\eae7";
}

.font-icon.ms_refresh:before {
  content: "\eae8";
}

.font-icon.ms_remove:before {
  content: "\eae9";
}

.font-icon.ms_right_panel_close:before {
  content: "\eaea";
}

.font-icon.ms_rocket_launch:before {
  content: "\eaeb";
}

.font-icon.ms_save:before {
  content: "\eaec";
}

.font-icon.ms_screenshot_monitor:before {
  content: "\eaed";
}

.font-icon.ms_search:before {
  content: "\eaee";
}

.font-icon.ms_search_activity:before {
  content: "\eaef";
}

.font-icon.ms_segment:before {
  content: "\eaf0";
}

.font-icon.ms_select_window_2:before {
  content: "\eaf1";
}

.font-icon.ms_send:before {
  content: "\eaf2";
}

.font-icon.ms_sentiment_dissatisfied:before {
  content: "\eaf3";
}

.font-icon.ms_settings:before {
  content: "\eaf4";
}

.font-icon.ms_shapes:before {
  content: "\eaf5";
}

.font-icon.ms_space_dashboard:before {
  content: "\eaf6";
}

.font-icon.ms_speed:before {
  content: "\eaf7";
}

.font-icon.ms_stack_hexagon:before {
  content: "\eaf8";
}

.font-icon.ms_star_shine:before {
  content: "\eaf9";
}

.font-icon.ms_stop_circle:before {
  content: "\eafa";
}

.font-icon.ms_strikethrough_s:before {
  content: "\eafb";
}

.font-icon.ms_stylus_fountain_pen:before {
  content: "\eafc";
}

.font-icon.ms_supervisor_account:before {
  content: "\eafd";
}

.font-icon.ms_swap_horiz:before {
  content: "\eafe";
}

.font-icon.ms_sync_saved_locally:before {
  content: "\eaff";
}

.font-icon.ms_system_update_alt:before {
  content: "\eb00";
}

.font-icon.ms_system_update_alt-1:before {
  content: "\eb01";
}

.font-icon.ms_tab_close:before {
  content: "\eb02";
}

.font-icon.ms_table_edit:before {
  content: "\eb03";
}

.font-icon.ms_tabs:before {
  content: "\eb04";
}

.font-icon.ms_terminal:before {
  content: "\eb05";
}

.font-icon.ms_text_ad:before {
  content: "\eb06";
}

.font-icon.ms_text_decrease:before {
  content: "\eb07";
}

.font-icon.ms_text_fields:before {
  content: "\eb08";
}

.font-icon.ms_text_increase:before {
  content: "\eb09";
}

.font-icon.ms_timelapse:before {
  content: "\eb0a";
}

.font-icon.ms_timer:before {
  content: "\eb0b";
}

.font-icon.ms_title:before {
  content: "\eb0c";
}

.font-icon.ms_top_panel_close:before {
  content: "\eb0d";
}

.font-icon.ms_topic:before {
  content: "\eb0e";
}

.font-icon.ms_undo:before {
  content: "\eb0f";
}

.font-icon.ms_unfold_less:before {
  content: "\eb10";
}

.font-icon.ms_unfold_More:before {
  content: "\eb11";
}

.font-icon.ms_update:before {
  content: "\eb12";
}

.font-icon.ms_upload:before {
  content: "\eb13";
}

.font-icon.ms_video_file:before {
  content: "\eb14";
}

.font-icon.ms_videocam:before {
  content: "\eb15";
}

.font-icon.ms_view_list:before {
  content: "\eb16";
}

.font-icon.ms_view_timeline:before {
  content: "\eb17";
}

.font-icon.ms_visibility:before {
  content: "\eb18";
}

.font-icon.ms_visibility_off:before {
  content: "\eb19";
}

.font-icon.ms_volume_down:before {
  content: "\eb1a";
}

.font-icon.ms_volume_up:before {
  content: "\eb1b";
}

.font-icon.ms_wand_shine:before {
  content: "\eb1c";
}

.font-icon.ms_warning:before {
  content: "\eb1d";
}

.font-icon.ms_warning_filled:before {
  content: "\eb1e";
}

.font-icon.ms_web_traffic:before {
  content: "\eb1f";
}

.font-icon.ms_wifi_off:before {
  content: "\eb20";
}

.font-icon.ms_zoom_in:before {
  content: "\eb21";
}

.font-icon.ms_zoom_out:before {
  content: "\eb22";
}

[class^=sprite-icon-] {
  background-image: url(/_next/static/media/sprite-icons-TN2GAOZP.9b74603b.svg);
  background-repeat: no-repeat;
  display: inline-block;
  width: 24px;
  height: 24px;
}

[class^=sprite-icon-].disabled {
  opacity: 0.5;
  cursor: unset;
}

[class^=sprite-icon-].clickable {
  cursor: pointer;
}

.sprite-icon-ms_add {
  background-position: -24px -24px;
}

.sprite-icon-ms_add_circle {
  background-position: -64px -24px;
}

.sprite-icon-ms_add_photo_alternate {
  background-position: -104px -24px;
}

.sprite-icon-ms_manage_accounts {
  background-position: -144px -24px;
}

.sprite-icon-ms_app_registration {
  background-position: -184px -24px;
}

.sprite-icon-ms_arrow_left_alt {
  background-position: -224px -24px;
}

.sprite-icon-ms_arrow_right_alt {
  background-position: -264px -24px;
}

.sprite-icon-ms_arrow_upward_alt {
  background-position: -304px -24px;
}

.sprite-icon-ms_assignment {
  background-position: -344px -24px;
}

.sprite-icon-ms_attach_file {
  background-position: -384px -24px;
}

.sprite-icon-ms_auto_read_play {
  background-position: -424px -24px;
}

.sprite-icon-ms_automation {
  background-position: -464px -24px;
}

.sprite-icon-ms_autorenew {
  background-position: -504px -24px;
}

.sprite-icon-ms_block {
  background-position: -544px -24px;
}

.sprite-icon-ms_bolt {
  background-position: -584px -24px;
}

.sprite-icon-ms_book_2 {
  background-position: -624px -24px;
}

.sprite-icon-ms_calculate {
  background-position: -664px -24px;
}

.sprite-icon-ms_calendar_month {
  background-position: -704px -24px;
}

.sprite-icon-ms_calendar_view_week {
  background-position: -744px -24px;
}

.sprite-icon-ms_cancel {
  background-position: -24px -64px;
}

.sprite-icon-ms_chat {
  background-position: -64px -64px;
}

.sprite-icon-ms_check {
  background-position: -104px -64px;
}

.sprite-icon-ms_check_box {
  background-position: -144px -64px;
}

.sprite-icon-ms_check_circle {
  background-position: -184px -64px;
}

.sprite-icon-ms_checkbook {
  background-position: -224px -64px;
}

.sprite-icon-ms_check_box_outline_blank {
  background-position: -264px -64px;
}

.sprite-icon-ms_chevron_backward {
  background-position: -304px -64px;
}

.sprite-icon-ms_chevron_forward {
  background-position: -344px -64px;
}

.sprite-icon-ms_close {
  background-position: -384px -64px;
}

.sprite-icon-ms_cloud {
  background-position: -424px -64px;
}

.sprite-icon-ms_cloud_done {
  background-position: -464px -64px;
}

.sprite-icon-ms_code_blocks {
  background-position: -504px -64px;
}

.sprite-icon-ms_content_paste {
  background-position: -544px -64px;
}

.sprite-icon-ms_contract_edit {
  background-position: -584px -64px;
}

.sprite-icon-ms_corporate_fare {
  background-position: -624px -64px;
}

.sprite-icon-ms_create_new_folder {
  background-position: -664px -64px;
}

.sprite-icon-ms_crop_3_2 {
  background-position: -704px -64px;
}

.sprite-icon-ms_database {
  background-position: -744px -64px;
}

.sprite-icon-ms_delete {
  background-position: -24px -104px;
}

.sprite-icon-ms_deployed code {
  background-position: -64px -104px;
}

.sprite-icon-ms_deployed_code_update {
  background-position: -104px -104px;
}

.sprite-icon-ms_description {
  background-position: -144px -104px;
}

.sprite-icon-ms_desktop_cloud {
  background-position: -184px -104px;
}

.sprite-icon-ms_do_not_disturb_on {
  background-position: -224px -104px;
}

.sprite-icon-ms_docs {
  background-position: -264px -104px;
}

.sprite-icon-ms_document_search {
  background-position: -304px -104px;
}

.sprite-icon-ms_download {
  background-position: -344px -104px;
}

.sprite-icon-ms_draft {
  background-position: -384px -104px;
}

.sprite-icon-ms_drag_indicator {
  background-position: -424px -104px;
}

.sprite-icon-ms_drive_file_move {
  background-position: -464px -104px;
}

.sprite-icon-ms_edit {
  background-position: -504px -104px;
}

.sprite-icon-ms_edit_note {
  background-position: -544px -104px;
}

.sprite-icon-ms_filter {
  background-position: -584px -104px;
}

.sprite-icon-ms_flag_2 {
  background-position: -624px -104px;
}

.sprite-icon-ms_folder {
  background-position: -664px -104px;
}

.sprite-icon-ms_folder_copy {
  background-position: -704px -104px;
}

.sprite-icon-ms_groups {
  background-position: -744px -104px;
}

.sprite-icon-ms_help {
  background-position: -24px -144px;
}

.sprite-icon-ms_history {
  background-position: -64px -144px;
}

.sprite-icon-ms_imagesmode {
  background-position: -104px -144px;
}

.sprite-icon-ms_indeterminate_check_box {
  background-position: -144px -144px;
}

.sprite-icon-ms_info {
  background-position: -184px -144px;
}

.sprite-icon-ms_instant_mix {
  background-position: -224px -144px;
}

.sprite-icon-ms_integration_instructions {
  background-position: -264px -144px;
}

.sprite-icon-ms_keep {
  background-position: -304px -144px;
}

.sprite-icon-ms_keyboard_arrow_down {
  background-position: -344px -144px;
}

.sprite-icon-ms_keyboard_arrow_up {
  background-position: -384px -144px;
}

.sprite-icon-ms_keyboard_tab {
  background-position: -424px -144px;
}

.sprite-icon-ms_labs {
  background-position: -464px -144px;
}

.sprite-icon-ms_library_books {
  background-position: -504px -144px;
}

.sprite-icon-ms_link {
  background-position: -544px -144px;
}

.sprite-icon-ms_live_tv {
  background-position: -584px -144px;
}

.sprite-icon-ms_logout {
  background-position: -624px -144px;
}

.sprite-icon-ms_manage_search {
  background-position: -664px -144px;
}

.sprite-icon-ms_menu {
  background-position: -704px -144px;
}

.sprite-icon-ms_mouse {
  background-position: -744px -144px;
}

.sprite-icon-ms_my_location {
  background-position: -24px -184px;
}

.sprite-icon-ms_note_add {
  background-position: -64px -184px;
}

.sprite-icon-ms_note_stack {
  background-position: -104px -184px;
}

.sprite-icon-ms_open_in_new {
  background-position: -144px -184px;
}

.sprite-icon-ms_open_in_new {
  background-position: -184px -184px;
}

.sprite-icon-ms_pending actions {
  background-position: -224px -184px;
}

.sprite-icon-ms_person {
  background-position: -264px -184px;
}

.sprite-icon-ms_photo_camera {
  background-position: -304px -184px;
}

.sprite-icon-ms_post_add {
  background-position: -344px -184px;
}

.sprite-icon-ms_preview {
  background-position: -384px -184px;
}

.sprite-icon-ms_problem {
  background-position: -424px -184px;
}

.sprite-icon-ms_radio_button_checked {
  background-position: -464px -184px;
}

.sprite-icon-ms_radio_button_unchecked {
  background-position: -504px -184px;
}

.sprite-icon-ms_receipt_long {
  background-position: -544px -184px;
}

.sprite-icon-ms_redo {
  background-position: -584px -184px;
}

.sprite-icon-ms_rocket_launch {
  background-position: -624px -184px;
}

.sprite-icon-ms_save {
  background-position: -664px -184px;
}

.sprite-icon-ms_screenshot_monitor {
  background-position: -704px -184px;
}

.sprite-icon-ms_segment {
  background-position: -744px -184px;
}

.sprite-icon-ms_sentiment_dissatisfied {
  background-position: -24px -224px;
}

.sprite-icon-ms_settings {
  background-position: -64px -224px;
}

.sprite-icon-ms_space_dashboard {
  background-position: -104px -224px;
}

.sprite-icon-ms_speed {
  background-position: -144px -224px;
}

.sprite-icon-ms_stack_hexagon {
  background-position: -184px -224px;
}

.sprite-icon-ms_star_shine {
  background-position: -224px -224px;
}

.sprite-icon-ms_stylus_fountain_pen {
  background-position: -264px -224px;
}

.sprite-icon-ms_supervisor_account {
  background-position: -304px -224px;
}

.sprite-icon-ms_swap_horiz {
  background-position: -344px -224px;
}

.sprite-icon-ms_sync_saved_locally {
  background-position: -384px -224px;
}

.sprite-icon-ms_table_edit {
  background-position: -424px -224px;
}

.sprite-icon-ms_tabs {
  background-position: -464px -224px;
}

.sprite-icon-ms_text_ad {
  background-position: -504px -224px;
}

.sprite-icon-ms_text_decrease {
  background-position: -544px -224px;
}

.sprite-icon-ms_text_fields {
  background-position: -584px -224px;
}

.sprite-icon-ms_text_increase {
  background-position: -624px -224px;
}

.sprite-icon-ms_timelapse {
  background-position: -664px -224px;
}

.sprite-icon-ms_title {
  background-position: -704px -224px;
}

.sprite-icon-ms_topic {
  background-position: -744px -224px;
}

.sprite-icon-ms_wifi_off {
  background-position: -24px -264px;
}

.sprite-icon-ms_undo {
  background-position: -64px -264px;
}

.sprite-icon-ms_upload {
  background-position: -104px -264px;
}

.sprite-icon-ms_videocam {
  background-position: -144px -264px;
}

.sprite-icon-ms_view_list {
  background-position: -184px -264px;
}

.sprite-icon-ms_view_timeline {
  background-position: -224px -264px;
}

.sprite-icon-ms_visibility {
  background-position: -264px -264px;
}

.sprite-icon-ms_visibility_off {
  background-position: -304px -264px;
}

.sprite-icon-ms_warning {
  background-position: -344px -264px;
}

.sprite-icon-ms_keyboard_tab_rtl {
  background-position: -384px -264px;
}

.sprite-icon-bottom_panel_close {
  background-position: -424px -264px;
}

.sprite-icon-custom_layout_botton {
  background-position: -464px -264px;
}

.sprite-icon-custom_layout_right {
  background-position: -504px -264px;
}

.sprite-icon-flat_home {
  background-position: -544px -264px;
}

.sprite-icon-icon_add_card {
  background-position: -584px -264px;
}

.sprite-icon-icon_add-documents {
  background-position: -624px -264px;
}

.sprite-icon-icon_add-sub-section {
  background-position: -664px -264px;
}

.sprite-icon-icon_arrow_circle_up {
  background-position: -704px -264px;
}

.sprite-icon-icon_arrow_drop_down {
  background-position: -744px -264px;
}

.sprite-icon-icon_arrow_right {
  background-position: -24px -304px;
}

.sprite-icon-icon_auto {
  background-position: -64px -304px;
}

.sprite-icon-ms_3p {
  background-position: -104px -304px;
}

.sprite-icon-ms_search_activity {
  background-position: -144px -304px;
}

.sprite-icon-ms_refresh {
  background-position: -184px -304px;
}

.sprite-icon-ms_pause_circle {
  background-position: -224px -304px;
}

.sprite-icon-ms_content_copy {
  background-position: -264px -304px;
}

.sprite-icon-ms_language {
  background-position: -304px -304px;
}

.sprite-icon-ms_stop_circle {
  background-position: -344px -304px;
}

.sprite-icon-ms_play_circle {
  background-position: -384px -304px;
}

.sprite-icon-ms_pause {
  background-position: -424px -304px;
}

.sprite-icon-ms_extension {
  background-position: -464px -304px;
}

.sprite-icon-ms_wand_shine {
  background-position: -504px -304px;
}

.sprite-icon-ms_keyboard_double_arrow_right {
  background-position: -544px -304px;
}

.sprite-icon-ms_keyboard_double_arrow_left {
  background-position: -584px -304px;
}

.sprite-icon-icon_bug {
  background-position: -624px -304px;
}

.sprite-icon-icon_celebration {
  background-position: -664px -304px;
}

.sprite-icon-icon_close_fullscreen {
  background-position: -704px -304px;
}

.sprite-icon-icon_code {
  background-position: -744px -304px;
}

.sprite-icon-icon_color {
  background-position: -24px -344px;
}

.sprite-icon-icon_cursor_grab {
  background-position: -64px -344px;
}

.sprite-icon-icon_cut {
  background-position: -104px -344px;
}

.sprite-icon-icon_desktop_windows {
  background-position: -144px -344px;
}

.sprite-icon-icon_documentation {
  background-position: -184px -344px;
}

.sprite-icon-icon_file_copy {
  background-position: -224px -344px;
}

.sprite-icon-icon_file-settings {
  background-position: -264px -344px;
}

.sprite-icon-icon_fill {
  background-position: -304px -344px;
}

.sprite-icon-icon_fill-in {
  background-position: -344px -344px;
}

.sprite-icon-icon_fold {
  background-position: -384px -344px;
}

.sprite-icon-icon_format_align_center {
  background-position: -424px -344px;
}

.sprite-icon-icon_format_align_justify {
  background-position: -464px -344px;
}

.sprite-icon-icon_format_align_left {
  background-position: -504px -344px;
}

.sprite-icon-icon_format_align_right {
  background-position: -544px -344px;
}

.sprite-icon-icon_format_bold {
  background-position: -584px -344px;
}

.sprite-icon-icon_format_doc {
  background-position: -624px -344px;
}

.sprite-icon-icon_format_italic {
  background-position: -664px -344px;
}

.sprite-icon-icon_format_list_bulleted {
  background-position: -704px -344px;
}

.sprite-icon-icon_format_list_numbered {
  background-position: -744px -344px;
}

.sprite-icon-icon_format_underlined {
  background-position: -24px -384px;
}

.sprite-icon-icon_forum {
  background-position: -64px -384px;
}

.sprite-icon-icon_Full_Screen {
  background-position: -104px -384px;
}

.sprite-icon-icon_hand-w-key {
  background-position: -144px -384px;
}

.sprite-icon-icon_Headphones-fill {
  background-position: -184px -384px;
}

.sprite-icon-icon_image {
  background-position: -224px -384px;
}

.sprite-icon-icon_import {
  background-position: -264px -384px;
}

.sprite-icon-icon_lab_profile {
  background-position: -304px -384px;
}

.sprite-icon-icon_lock {
  background-position: -344px -384px;
}

.sprite-icon-icon_manager-dashboard {
  background-position: -384px -384px;
}

.sprite-icon-icon_mapping {
  background-position: -424px -384px;
}

.sprite-icon-icon_maximize {
  background-position: -464px -384px;
}

.sprite-icon-icon_maximize {
  background-position: -504px -384px;
}

.sprite-icon-icon_Mic {
  background-position: -544px -384px;
}

.sprite-icon-icon_Mic-alt {
  background-position: -584px -384px;
}

.sprite-icon-icon_minimize {
  background-position: -624px -384px;
}

.sprite-icon-icon_more_horiz {
  background-position: -664px -384px;
}

.sprite-icon-icon_more-v {
  background-position: -704px -384px;
}

.sprite-icon-icon_organizations {
  background-position: -744px -384px;
}

.sprite-icon-icon_paste {
  background-position: -24px -424px;
}

.sprite-icon-icon_pie-chart {
  background-position: -64px -424px;
}

.sprite-icon-icon_publish {
  background-position: -104px -424px;
}

.sprite-icon-icon_quote {
  background-position: -144px -424px;
}

.sprite-icon-icon_recordinng-start {
  background-position: -184px -424px;
}

.sprite-icon-icon_remove {
  background-position: -224px -424px;
}

.sprite-icon-icon_repository {
  background-position: -264px -424px;
}

.sprite-icon-icon_restore {
  background-position: -304px -424px;
}

.sprite-icon-icon_run {
  background-position: -344px -424px;
}

.sprite-icon-icon_run_current_step_and_move_to_next {
  background-position: -384px -424px;
}

.sprite-icon-icon_run_current_step_and_stay_on_it {
  background-position: -424px -424px;
}

.sprite-icon-icon_skip_current_step {
  background-position: -464px -424px;
}

.sprite-icon-icon_search {
  background-position: -504px -424px;
}

.sprite-icon-icon_send {
  background-position: -544px -424px;
}

.sprite-icon-icon_Sort_Down {
  background-position: -584px -424px;
}

.sprite-icon-icon_Sort_Up {
  background-position: -624px -424px;
}

.sprite-icon-icon_sound_mute {
  background-position: -664px -424px;
}

.sprite-icon-icon_sound-max {
  background-position: -704px -424px;
}

.sprite-icon-icon_sound-min {
  background-position: -744px -424px;
}

.sprite-icon-icon_Stop-andplay_ {
  background-position: -24px -464px;
}

.sprite-icon-icon_strikethrough_s {
  background-position: -64px -464px;
}

.sprite-icon-icon_terminal {
  background-position: -104px -464px;
}

.sprite-icon-icon_unfold {
  background-position: -144px -464px;
}

.sprite-icon-icon_user-metrics {
  background-position: -184px -464px;
}

.sprite-icon-icon_Video {
  background-position: -224px -464px;
}

.sprite-icon-icon_Video_file {
  background-position: -264px -464px;
}

.sprite-icon-icon_wizard {
  background-position: -304px -464px;
}

.sprite-icon-icon_zoom-in {
  background-position: -344px -464px;
}

.sprite-icon-icon_zoom-out {
  background-position: -384px -464px;
}

.sprite-icon-icon-ai-record {
  background-position: -424px -464px;
}

.sprite-icon-icon-click {
  background-position: -464px -464px;
}

.sprite-icon-icon-close-tab {
  background-position: -504px -464px;
}

.sprite-icon-icon-hover {
  background-position: -544px -464px;
}

.sprite-icon-icon-idle {
  background-position: -584px -464px;
}

.sprite-icon-icon-key {
  background-position: -624px -464px;
}

.sprite-icon-icon-match-case {
  background-position: -664px -464px;
}

.sprite-icon-icon-record {
  background-position: -704px -464px;
}

.sprite-icon-icon-wait {
  background-position: -744px -464px;
}

.sprite-icon-icons_apps {
  background-position: -24px -504px;
}

.sprite-icon-right_panel_close {
  background-position: -64px -504px;
}

.sprite-icon-right_panel_open {
  background-position: -104px -504px;
}

.sprite-icon-top_panel_close {
  background-position: -144px -504px;
}

.sprite-icon-233 {
  background-position: -184px -504px;
}

.sprite-icon-234 {
  background-position: -224px -504px;
}

.sprite-icon-235 {
  background-position: -264px -504px;
}

.sprite-icon-236 {
  background-position: -304px -504px;
}

.sprite-icon-237 {
  background-position: -344px -504px;
}

.sprite-icon-238 {
  background-position: -384px -504px;
}

.sprite-icon-239 {
  background-position: -424px -504px;
}

.sprite-icon-240 {
  background-position: -464px -504px;
}

.sprite-icon-241 {
  background-position: -504px -504px;
}

.sprite-icon-242 {
  background-position: -544px -504px;
}

.sprite-icon-243 {
  background-position: -584px -504px;
}

.sprite-icon-244 {
  background-position: -624px -504px;
}

.sprite-icon-245 {
  background-position: -664px -504px;
}

.sprite-icon-246 {
  background-position: -704px -504px;
}

.sprite-icon-247 {
  background-position: -744px -504px;
}

[class^=sprite-filled-] {
  background-image: url(/_next/static/media/sprite-filled-7VRL3LSP.fd62bdae.svg);
  background-repeat: no-repeat;
  display: inline-block;
  width: 24px;
  height: 24px;
}

[class^=sprite-filled-].disabled {
  opacity: 0.5;
  cursor: unset;
}

[class^=sprite-filled-].clickable {
  cursor: pointer;
}

.sprite-filled-ms_content_copy {
  background-position: -24px -24px;
}

.sprite-filled-ms_check_circle {
  background-position: -56px -24px;
}

.sprite-filled-ms_do_not_disturb_on {
  background-position: -88px -24px;
}

.sprite-filled-ms_add_circle {
  background-position: -120px -24px;
}

.sprite-filled-ms_cancel {
  background-position: -152px -24px;
}

.sprite-filled-ms_play_circle {
  background-position: -184px -24px;
}

.sprite-filled-ms_pause_circle_filled {
  background-position: -216px -24px;
}

.sprite-filled-ms_info {
  background-position: -248px -24px;
}

.sprite-filled-ms_info_i {
  background-position: -280px -24px;
}

.sprite-filled-ms_warning {
  background-position: -312px -24px;
}

.sprite-filled-ms_fiber_manual_record {
  background-position: -344px -24px;
}

.sprite-filled-ms_fiber_manual_record {
  background-position: -376px -24px;
}

.sprite-filled-icon_execution_pointer {
  background-position: -408px -24px;
}

.sprite-filled-icon_bug {
  background-position: -440px -24px;
}

.sprite-filled-icon_features {
  background-position: -472px -24px;
}

.sprite-filled-icon_tasks {
  background-position: -504px -24px;
}

.sprite-filled-icon_anton {
  background-position: -536px -24px;
}

.sprite-filled-ms_lightbulb_2 {
  background-position: -568px -24px;
}

.sprite-filled-ms_filter_alt {
  background-position: -600px -24px;
}

.sprite-filled-icon_checkbox-intermediate {
  background-position: -632px -24px;
}

.sprite-filled-ms_check_box {
  background-position: -664px -24px;
}

.sprite-filled-ms_flag_2 {
  background-position: -696px -24px;
}

.sprite-filled-ms_electric_bolt {
  background-position: -728px -24px;
}

[class^=sprite-custom-] {
  background-image: url(/_next/static/media/sprite-custom-BHJIS6WI.09d2897a.svg);
  background-repeat: no-repeat;
  display: inline-block;
  width: 24px;
  height: 24px;
}

[class^=sprite-custom-].disabled {
  opacity: 0.5;
  cursor: unset;
}

[class^=sprite-custom-].clickable {
  cursor: pointer;
}

.sprite-custom-custom_automated-test-case {
  background-position: 0px 0px;
}

.sprite-custom-custom_manual-test-case {
  background-position: -32px 0px;
}

.sprite-custom-custom_test-run {
  background-position: -64px 0px;
}

.sprite-custom-custom_t {
  background-position: -96px 0px;
}

.sprite-custom-custom_tr {
  background-position: -128px 0px;
}

.sprite-custom-custom_new-test-case {
  background-position: -160px 0px;
}

.sprite-custom-custom_delay {
  background-position: -192px 0px;
}

.sprite-custom-custom_template {
  background-position: -224px 0px;
}

.sprite-custom-custom_run_remotely {
  background-position: -256px 0px;
}

.sprite-custom-custom_run_locally {
  background-position: -288px 0px;
}

.sprite-custom-custom_ai_symbol {
  background-position: -320px 0px;
}

.sprite-custom-icon_project {
  background-position: -352px 0px;
}

.sprite-custom-icon_environment {
  background-position: -384px 0px;
}

.sprite-custom-icon_suite {
  background-position: -416px 0px;
}

.sprite-custom-icon_windows {
  background-position: -448px 0px;
}

.sprite-custom-icon_cloud_credit {
  background-position: -480px 0px;
}

.sprite-custom-icon-giftbox {
  background-position: -512px 0px;
}

:where(.input-field) {
  font-family: var(--font-family-body), serif;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  color: var(--color-text-default);
}

:where(.input-field.single-col) {
  flex-direction: column;
}

:where(.input-field:not(.single-col) > label) {
  align-self: flex-start;
  min-height: 40px;
}

:where(.input-field:not(.single-col).small > label) {
  min-height: 32px;
}

:where(.input-field:not(.single-col)) {
  flex-direction: row;
}

:where(.input-field label) {
  font-family: var(--font-family-label), serif;
  font-size: var(--typography-size-label, 12px);
  font-style: normal;
  font-weight: var(--typography-weight-label, 600);
  line-height: var(--typography-lineHeight-label, 16px);
  display: flex;
  min-width: 80px;
  align-items: center;
  gap: 4px;
}

:where(.input-field label .required) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  height: 16px;
  width: 5px;
  color: var(--color-text-negative-default);
}

:where(.input-field .input-area) {
  width: 100%;
  display: flex;
  flex-flow: column;
  gap: 6px;
}

:where(.input-field .input-area .input-wrapper) {
  display: flex;
  flex-flow: row;
  align-items: stretch;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 4px;
  border: 1px solid var(--color-outline-subtlest);
  background: var(--color-bg-inverse);
  outline: none;
  width: 100%;
}

:where(.input-field .input-area .input-wrapper > i) {
  align-self: center;
}

:where(.input-field.small .input-area .input-wrapper) {
  min-height: 32px;
}

:where(.input-field:not(.small) .input-area .input-wrapper) {
  min-height: 40px;
}

:where(.input-field .input-area .input-wrapper:has(input:hover:not(:focus):not(:disabled))), :where(.input-field .input-area .input-wrapper:has(input:focus:not(:disabled))) {
  border-color: var(--color-outline-brand-default);
}

:where(.input-field .input-area .input-wrapper input) {
  color: var(--color-text-default);
  background: none;
  width: 100%;
  border: none;
  outline: none;
  padding: 0;
}

:where(.input-field .input-area .input-wrapper input[type=number]) {
  -moz-appearance: textfield;
}

:where(.input-field .input-area .input-wrapper input[type=number])::-webkit-outer-spin-button, :where(.input-field .input-area .input-wrapper input[type=number])::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

:where(.input-field:not(.small) .input-area .input-wrapper input) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-regular, 400);
  line-height: 1;
}

:where(.input-field.small .input-area .input-wrapper input) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  line-height: 1;
}

:where(.input-field .input-area .input-wrapper input:disabled) {
  color: var(--color-outline-subtle);
}

:where(.input-field .input-area .input-wrapper input::placeholder), :where(.input-field .input-area .input-wrapper input:-ms-input-placeholder) {
  color: var(--color-text-subtlest);
}

:where(.input-field .input-area .input-wrapper .font-icon:hover) {
  color: var(--color-bg-brand-hovered);
}

:where(.input-field .input-area .validation-error) {
  color: var(--color-text-negative-default);
  font-size: 12px;
  font-weight: 600;
  width: 100%;
}

:where(.input-field .input-area .input-hint) {
  color: var(--color-text-subtle);
  font-size: 12px;
  font-weight: 500;
  width: 100%;
}

:where(.input-field .input-area .input-wrapper:has(.input-suffix-text)) {
  padding: 0;
}

:where(.input-field .input-area .input-wrapper:has(.input-suffix-text)) input {
  padding: 0 8px;
}

:where(.input-field .input-area .input-suffix-text) {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  font-size: var(--typography-size-caption1);
  font-weight: var(--typography-weight-caption1);
  line-height: var(--typography-lineHeight-caption1);
  display: flex;
  padding: 0 8px;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color-outline-subtlest);
  border-radius: 4px 0 0 4px;
  background: var(--color-bg-default);
}

:where(.input-field .input-area .input-wrapper:has(input[type=date])) {
  padding-right: 0;
}

:where(.input-field .input-area .input-wrapper:has(input[type=date])):after {
  font-family: font-icon, serif;
  content: "\ea5e";
  position: relative;
  right: 14px;
  top: 12px;
  height: 12px;
  font-size: 12px;
  color: var(--color-icon-subtle);
  pointer-events: none;
}

:where(.input-field .input-area .input-wrapper:has(input[type=date])) input[type=date] {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
}

:where(.input-field .input-area .input-wrapper:has(input[type=date])) input[type=date]::-webkit-calendar-picker-indicator {
  right: 0;
  opacity: 0;
  cursor: pointer;
}

@-moz-document url-prefix() {
  :where(.input-field .input-area .input-wrapper:has(input[type=date])):after {
    display: none;
  }
}
.react-contexify-profile-menu {
  --contexify-menu-radius: 5px;
  --contexify-separator-color: var(--color-outline-subtlest);
  --contexify-menu-padding: 0;
  --contexify-separator-margin: 0;
  --contexify-activeItem-bgColor: var(--color-bg-neutral-subtle-hovered);
  --contexify-activeItem-color: var(--color-text-default);
  --contexify-activeItem-radius: 0;
  --contexify-activeArrow-color: var(--color-text-default);
  --contexify-itemContent-padding: 8px 12px;
  --contexify-menu-minWidth: 150px;
  box-shadow: 0 0 0 0.5px var(--color-outline-subtlest), 0 16px 32px 0 var(--elevation-shadow-level4);
  border: 1px solid var(--color-outline-subtlest);
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  color: var(--color-text-default);
}

.react-contexify-profile-menu .header-item {
  --contexify-item-color: var(--color-text-subtlest);
  opacity: 1;
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body4, 11px);
  line-height: var(--typography-lineHeight-body4, 16px);
  font-weight: var(--typography-weight-body4-medium, 500);
}

.react-contexify-profile-menu .header-item .contexify_itemContent {
  opacity: 1;
}

.react-contexify-profile-menu .contexify_itemContent {
  flex-grow: 1;
}

.react-contexify-profile-menu :where(.ctx-header .contexify_itemContent) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-regular, 400);
  display: flex;
  flex-flow: row;
  gap: 8px;
  padding: 4px 12px;
  max-width: 214px;
}

.react-contexify-profile-menu :where(.ctx-header .contexify_itemContent .ms_check) {
  color: var(--color-icon-brand-bold);
}

.react-contexify-profile-menu :where(.ctx-header .contexify_itemContent > .font-icon.inactive) {
  color: transparent;
}

.react-contexify-profile-menu :where(.contexify_itemContent > .font-icon:first-child) {
  margin-right: 8px;
}

.react-contexify-profile-menu .organization-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-grow: 1;
}

.react-contexify-profile-menu .font-icon.current-org {
  color: var(--color-icon-brand-default);
  font-size: 12px;
  margin-right: 8px;
}

.react-contexify-profile-menu .org-name {
  flex-grow: 1;
  padding-right: 4px;
  width: 150px;
}

.react-contexify-profile-menu .contexify_itemContent:has(.organization-item) .contexify_rightSlot {
  margin-left: 8px;
}

.tf-logo-dark-icon {
  background-image: url(/_next/static/media/dark-icon-l-AEKRI4WQ.01151472.svg);
}

.tf-logo-dark-icon.size-XS {
  width: 15px;
  height: 16px;
}

.tf-logo-dark-icon.size-S {
  width: 22px;
  height: 24px;
}

.tf-logo-dark-icon.size-M {
  width: 30px;
  height: 32px;
}

.tf-logo-dark-icon.size-L {
  width: 44px;
  height: 48px;
}

.tf-logo-dark-icon.size-splash {
  width: 221px;
  height: 224px;
}

.tf-logo-dark-wordmark {
  background-image: url(/_next/static/media/dark-wordmark-l-KDIMUJQK.50d0ca26.svg);
}

.tf-logo-dark-wordmark.size-XS {
  width: 15px;
  height: 16px;
}

.tf-logo-dark-wordmark.size-S {
  width: 62px;
  height: 16px;
}

.tf-logo-dark-wordmark.size-M {
  width: 81px;
  height: 20px;
}

.tf-logo-dark-wordmark.size-L {
  width: 124px;
  height: 32px;
}

.tf-logo-dark-wordmark.size-splash {
  width: 240px;
  height: 56px;
}

.tf-logo-dark-logo {
  background-image: url(/_next/static/media/dark-logo-l-VHXFS67C.a9ee597b.svg);
}

.tf-logo-dark-logo.size-XS {
  width: 15px;
  height: 16px;
}

.tf-logo-dark-logo.size-S {
  width: 84px;
  height: 24px;
}

.tf-logo-dark-logo.size-M {
  width: 111px;
  height: 32px;
}

.tf-logo-dark-logo.size-L {
  width: 165px;
  height: 48px;
}

.tf-logo-dark-logo.size-splash {
  width: 240px;
  height: 56px;
}

.tf-logo-light-icon {
  background-image: url(/_next/static/media/light-icon-l-LO3T4F53.5bb73e17.svg);
}

.tf-logo-light-icon.size-XS {
  width: 15px;
  height: 16px;
}

.tf-logo-light-icon.size-S {
  width: 22px;
  height: 24px;
}

.tf-logo-light-icon.size-M {
  width: 30px;
  height: 32px;
}

.tf-logo-light-icon.size-L {
  width: 44px;
  height: 48px;
}

.tf-logo-light-icon.size-splash {
  width: 221px;
  height: 224px;
}

.tf-logo-light-wordmark {
  background-image: url(/_next/static/media/light-wordmark-l-PFWC52M4.796c2ee9.svg);
}

.tf-logo-light-wordmark.size-XS {
  width: 15px;
  height: 16px;
}

.tf-logo-light-wordmark.size-S {
  width: 62px;
  height: 16px;
}

.tf-logo-light-wordmark.size-M {
  width: 81px;
  height: 20px;
}

.tf-logo-light-wordmark.size-L {
  width: 124px;
  height: 32px;
}

.tf-logo-light-wordmark.size-splash {
  width: 240px;
  height: 56px;
}

.tf-logo-light-logo {
  background-image: url(/_next/static/media/light-logo-l-GHHXT3NP.31cf79ed.svg);
}

.tf-logo-light-logo.size-XS {
  width: 15px;
  height: 16px;
}

.tf-logo-light-logo.size-S {
  width: 84px;
  height: 24px;
}

.tf-logo-light-logo.size-M {
  width: 111px;
  height: 32px;
}

.tf-logo-light-logo.size-L {
  width: 165px;
  height: 48px;
}

.tf-logo-light-logo.size-splash {
  width: 240px;
  height: 56px;
}

[class^=tf-logo-] {
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}

[class^=tf-logo-].disabled {
  opacity: 0.5;
  cursor: unset;
}

[class^=tf-logo-].clickable {
  cursor: pointer;
}

:where(.standard-modal) {
  background: var(--color-bg-inverse);
  border: 1px solid var(--color-outline-subtlest);
  border-radius: 8px;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  min-width: 400px;
  height: -moz-fit-content;
  height: fit-content;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

:where(.standard-modal > .busy-indicator-cover) {
  border-radius: 8px;
}

:where(.standard-modal > .header.with-divider) {
  border-bottom: 1px solid var(--color-outline-subtlest);
}

:where(.standard-modal > .header.default-style) {
  padding: 15px 15px 8px;
  display: flex;
  flex-direction: row;
  gap: 2px;
  align-items: center;
}

:where(.standard-modal > .header.default-style > *) {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
}

:where(.standard-modal > .header.default-style > .right-side) {
  flex-grow: 1;
  flex-shrink: 0;
  justify-content: flex-end;
}

:where(.standard-modal > .header.default-style > .right-side > .close) {
  display: grid;
  place-items: center;
}

:where(.standard-modal > .header.default-style > .right-side > .close .font-icon) {
  font-size: 24px;
  color: var(--color-icon-default);
  cursor: pointer;
}

:where(.standard-modal > .header.default-style > .right-side > .close .font-icon:hover) {
  color: var(--color-icon-subtlest);
}

:where(.standard-modal > .header.default-style > .left-side) {
  overflow: hidden;
}

:where(.standard-modal > .header.default-style > .left-side > .title-block) {
  overflow: hidden;
}

:where(.standard-modal > .header.default-style > .left-side > .title-block > .title) {
  font-family: var(--font-family-heading), serif;
  font-style: normal;
  font-size: var(--typography-size-heading5, 20px);
  font-weight: var(--typography-weight-heading5, 600);
  line-height: var(--typography-lineHeight-heading5, 24px);
  color: var(--color-text-default);
  min-height: 24px;
}

:where(.standard-modal > .header.default-style > .left-side > .title-block > .breadcrumb) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  color: var(--color-text-default);
}

:where(.standard-modal > .body), :where(.standard-modal > form > .body) {
  scrollbar-width: auto;
  scrollbar-color: auto;
  scrollbar-gutter: auto;
  display: grid;
  place-items: center;
  max-height: 65vh;
  overflow: auto;
  padding: 15px;
  flex-grow: 1;
  flex-shrink: 1;
}

:where(.standard-modal > .body)::-webkit-scrollbar, :where(.standard-modal > form > .body)::-webkit-scrollbar {
  background: none;
  width: 6px;
  height: 6px;
}

:where(.standard-modal > .body)::-webkit-scrollbar-button, :where(.standard-modal > form > .body)::-webkit-scrollbar-button {
  display: none;
}

:where(.standard-modal > .body)::-webkit-scrollbar-thumb, :where(.standard-modal > form > .body)::-webkit-scrollbar-thumb {
  background: var(--color-bg-neutral-hovered);
  border-radius: 3px;
  height: 50%;
}

:where(.standard-modal.full-bleed-gray .body) {
  background: var(--color-bg-default);
  padding: 12px 15px;
}

:where(.standard-modal > form) {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
}

:where(.standard-modal > form > .body) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

:where(.standard-modal > .footer), :where(.standard-modal > form > .footer) {
  padding: 15px;
  display: flex;
  flex-direction: row;
  gap: 2px;
}

:where(.standard-modal > .footer.with-divider), :where(.standard-modal > form > .footer.with-divider) {
  border-top: 1px solid var(--color-outline-subtlest);
}

:where(.standard-modal > .footer > *), :where(.standard-modal > form > .footer > *) {
  display: flex;
  flex-direction: row;
  gap: 4px;
  flex-grow: 1;
}

:where(.standard-modal > .footer > .right), :where(.standard-modal > form > .footer > .right) {
  flex-grow: 0;
  flex-shrink: 0;
}

:where(.standard-modal > .footer > .right button), :where(.standard-modal > form > .footer > .right button) {
  min-width: 80px;
}

:where(.standard-modal.standard-message-modal) {
  max-width: 560px;
}

:where(.standard-modal.standard-message-modal > .body) {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

:where(.standard-modal.standard-message-modal > .body > .message) {
  font-family: var(--font-family-heading), serif;
  font-style: normal;
  font-size: var(--typography-size-heading6, 16px);
  font-weight: var(--typography-weight-heading6, 600);
  line-height: var(--typography-lineHeight-heading6, 24px);
  color: var(--color-text-default);
  text-align: center;
}

:where(.standard-modal.standard-message-modal > .body > .message > p) {
  margin: 0;
}

:where(.standard-modal.standard-message-modal > .body > .details) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  color: var(--color-text-subtle);
  text-align: center;
}

:where(.standard-modal.standard-message-modal > .body > .message-danger) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-semibold, 600);
  color: var(--color-text-negative-default);
}

.form-select {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  background-color: var(--color-icon-inverse);
  border: thin solid var(--color-outline-subtlest);
  border-radius: 4px;
  outline: none;
  position: relative;
  height: 32px;
  transition: all 0.3s ease-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 2px;
  padding: 7px 30px 7px 12px;
}

.form-select:focus {
  border-color: var(--color-bg-brand-enabled);
  border-radius: 4px 4px 0 0;
}

.popup-content.filter-menu-content {
  border: unset;
  box-shadow: unset;
  padding: unset;
  margin: unset;
  width: 240px;
}

.column-filter-container {
  transition: all 0.3s ease-out;
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  box-shadow: 0 0 0 0.5px var(--color-outline-subtlest), 0 16px 32px 0 var(--elevation-shadow-level4);
  scrollbar-width: auto;
  scrollbar-color: auto;
  scrollbar-gutter: auto;
  color: var(--color-text-default);
  display: flex;
  flex-flow: column;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 4px;
  gap: 8px;
  pointer-events: all;
  max-height: 70vh;
  overflow: auto;
  background: var(--color-bg-inverse);
}

.column-filter-container::-webkit-scrollbar {
  background: none;
  width: 6px;
  height: 6px;
}

.column-filter-container::-webkit-scrollbar-button {
  display: none;
}

.column-filter-container::-webkit-scrollbar-thumb {
  background: var(--color-bg-neutral-hovered);
  border-radius: 3px;
  height: 50%;
}

.column-filter-container .close-button {
  color: var(--color-icon-default);
  position: absolute;
  right: 6px;
  top: 12px;
  cursor: pointer;
  background: #fff;
}

.column-filter-container .close-button:hover {
  color: var(--color-text-subtle);
}

.column-filter-container .operator-selector, .column-filter-container .number-value-filter, .column-filter-container .composition-operator-selector {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  background-color: var(--color-icon-inverse);
  border: thin solid var(--color-outline-subtlest);
  border-radius: 4px;
  outline: none;
  position: relative;
  height: 32px;
  transition: all 0.3s ease-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 2px;
  padding: 7px 30px 7px 12px;
}

.column-filter-container .operator-selector:focus, .column-filter-container .number-value-filter:focus, .column-filter-container .composition-operator-selector:focus {
  border-color: var(--color-bg-brand-enabled);
  border-radius: 4px 4px 0 0;
}

.column-filter-container .text-value-filter {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-column-gap: 8px;
}

.column-filter-container .text-value-filter > input {
  padding: 8px 10px;
  font-size: 12px;
  line-height: 18px;
  border: thin solid var(--color-outline-subtlest);
  font-family: var(--font-family-body);
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 32px;
  transition: all 0.3s ease-out;
  overflow: hidden;
  box-sizing: border-box;
}

.column-filter-container .text-value-filter > input:focus {
  border-color: var(--color-outline-brand-default);
}

.column-filter-container .text-value-filter > input:disabled {
  pointer-events: none;
  color: #979797;
  background-color: var(--color-outline-subtle);
}

.column-filter-container .text-value-filter > input::placeholder {
  color: var(--color-text-subtlest);
}

.column-filter-container .text-value-filter > a {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-outline-subtlest);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-default);
  transition: all 0.3s ease-out;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.column-filter-container .text-value-filter > a:not(.disabled) {
  cursor: pointer;
}

.column-filter-container .text-value-filter > a.checked {
  background-color: var(--color-bg-brand-enabled);
}

.column-filter-container .text-value-filter > a.disabled {
  pointer-events: none;
  color: var(--color-outline-subtle);
  background-color: #f7f7f7;
}

.column-filter-container .action-buttons {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 8px;
}

.column-filter-container .action-buttons .clear-button {
  border-color: var(--color-outline-subtle);
}

.column-filter-container .distinct-values-section {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}

.column-filter-container .distinct-values-section label.select-all-checkbox {
  font-size: 12px;
  display: inline-grid;
  grid-template-columns: auto 1fr;
  cursor: pointer;
  width: -moz-fit-content;
  width: fit-content;
}

.column-filter-container .distinct-values-section label.select-all-checkbox > input {
  margin-right: 8px;
}

.column-filter-container .distinct-values-section label.select-all-checkbox > span {
  align-self: center;
}

.column-filter-container .distinct-values-section input.search-input {
  padding: 8px 32px 8px 10px;
  font-size: 12px;
  line-height: 18px;
  border: thin solid var(--color-outline-subtlest);
  font-family: var(--font-family-body);
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 32px;
  transition: all 0.3s ease-out;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 4px;
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  background-image: url("data:image/svg+xml;utf8,          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'>          <path d='M9.31581 15.4042C7.60814 15.4042 6.16198 14.812 4.97731 13.6275C3.79281 12.4428 3.20056 10.9966 3.20056 9.28896C3.20056 7.58129 3.79281 6.13512 4.97731 4.95046C6.16198 3.76596 7.60814 3.17371 9.31581 3.17371C11.0235 3.17371 12.4696 3.76596 13.6543 4.95046C14.8388 6.13512 15.4311 7.58129 15.4311 9.28896C15.4311 10.0031 15.3112 10.6852 15.0716 11.3352C14.8317 11.9852 14.5118 12.5505 14.1118 13.0312L19.8658 18.7852C20.0043 18.9235 20.0751 19.0975 20.0783 19.3072C20.0815 19.5169 20.0106 19.6941 19.8658 19.839C19.721 19.9838 19.5453 20.0562 19.3388 20.0562C19.1325 20.0562 18.9569 19.9838 18.8121 19.839L13.0581 14.085C12.5581 14.4978 11.9831 14.8209 11.3331 15.0542C10.6831 15.2875 10.0106 15.4042 9.31581 15.4042ZM9.31581 13.9045C10.6043 13.9045 11.6956 13.4573 12.5898 12.563C13.4841 11.6688 13.9313 10.5775 13.9313 9.28896C13.9313 8.00046 13.4841 6.90912 12.5898 6.01496C11.6956 5.12062 10.6043 4.67346 9.31581 4.67346C8.02731 4.67346 6.93598 5.12062 6.04181 6.01496C5.14748 6.90912 4.70031 8.00046 4.70031 9.28896C4.70031 10.5775 5.14748 11.6688 6.04181 12.563C6.93598 13.4573 8.02731 13.9045 9.31581 13.9045Z' fill='%23a2a9b3ff'/>          </svg>");
}

.column-filter-container .distinct-values-section input.search-input:focus {
  border-color: var(--color-outline-brand-default);
}

.column-filter-container .distinct-values-section input.search-input:disabled {
  pointer-events: none;
  color: #979797;
  background-color: var(--color-outline-subtle);
}

.column-filter-container .distinct-values-section input.search-input::placeholder {
  color: var(--color-text-subtlest);
}

.column-filter-container .distinct-values-section ul.distinct-values {
  scrollbar-width: auto;
  scrollbar-color: auto;
  scrollbar-gutter: auto;
  overflow: auto;
  min-height: 32px;
  max-height: 100px;
  padding: 4px 6px 0;
  border: thin solid var(--color-outline-subtlest);
  border-radius: 4px;
}

.column-filter-container .distinct-values-section ul.distinct-values::-webkit-scrollbar {
  background: none;
  width: 6px;
  height: 6px;
}

.column-filter-container .distinct-values-section ul.distinct-values::-webkit-scrollbar-button {
  display: none;
}

.column-filter-container .distinct-values-section ul.distinct-values::-webkit-scrollbar-thumb {
  background: var(--color-bg-neutral-hovered);
  border-radius: 3px;
  height: 50%;
}

.column-filter-container .distinct-values-section ul.distinct-values:focus, .column-filter-container .distinct-values-section ul.distinct-values:focus-within, .column-filter-container .distinct-values-section ul.distinct-values:active {
  border-color: var(--color-bg-brand-enabled);
}

.column-filter-container .distinct-values-section ul.distinct-values > li {
  overflow-x: hidden;
  white-space: nowrap;
  padding: 6px 0;
}

.column-filter-container .distinct-values-section ul.distinct-values > li > label {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  width: 100%;
  cursor: pointer;
}

.column-filter-container .distinct-values-section ul.distinct-values > li > label > input {
  margin-right: 8px;
}

.column-filter-container .distinct-values-section ul.distinct-values > li > label > .value {
  font-size: 12px;
  align-self: center;
}

.column-filter-container .no-matches-banner {
  border: solid thin var(--color-outline-subtlest);
  font-size: 12px;
  padding-left: 34px;
  height: 32px;
  line-height: 30px;
  border-radius: 4px;
}

.column-filter-container .date-value-filter {
  padding: 5px 8px;
  border: solid thin var(--color-outline-subtlest);
  outline: none;
  position: relative;
  align-items: center;
  display: flex;
}

.column-filter-container .date-value-filter input {
  font-family: var(--font-family-body);
  font-size: 12px;
  border: none;
  outline: none;
  flex-grow: 1;
}

.column-filter-container .date-value-filter input:focus, .column-filter-container .date-value-filter input:focus-within, .column-filter-container .date-value-filter input:active {
  border: none;
  outline: none;
}

.column-filter-container .date-value-filter input::placeholder {
  font-size: 12px;
}

.column-filter-container .date-value-filter input:after {
  content: "\ea5e";
  font-family: font-icon;
  font-size: 16px;
  pointer-events: none;
  position: absolute;
  right: 6px;
  top: 8px;
}

.column-filter-container .date-value-filter input::-webkit-calendar-picker-indicator {
  position: relative;
  height: 16px;
  opacity: 0;
  cursor: pointer;
}

.column-filter-container .date-value-filter:focus, .column-filter-container .date-value-filter:focus-within, .column-filter-container .date-value-filter:active {
  border-color: var(--color-bg-brand-enabled);
}

:where(.not-found-box .standard-modal) {
  width: 90vw;
  max-width: 400px;
  min-width: unset;
}

:where(.not-found-box .standard-modal) .font-icon.empty_state {
  font-size: 136px;
}

:where(.not-found-box .standard-modal.standard-message-modal > .body > .details > p) {
  margin: 0;
}

:where(.network-error-box .standard-modal) {
  width: 90vw;
  max-width: 528px;
  min-width: unset;
}

:where(.network-error-box .standard-modal) .message {
  display: flex;
  flex-flow: column;
  align-items: center;
}

:where(.network-error-box .standard-modal) .message svg {
  margin-bottom: 22px;
}

:where(.network-error-box .standard-modal.standard-message-modal > .body > .details > p) {
  margin: 0;
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
:where(.modal-root) {
  position: absolute;
  z-index: 10;
}

:where(.modal-window) {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template: 1fr/1fr;
  place-items: center;
}

:where(.modal-window).not-showing-yet {
  opacity: 0;
}

:where(.modal-window) > .overlay-part {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  background-color: rgba(52, 68, 90, 0.7490196078);
  text-align: center;
  z-index: unset;
  grid-column: 1/1;
  grid-row: 1/1;
  animation: 0.3s ease-out 0s 1 appear;
  padding: unset;
}

:where(.modal-window) > .overlay-part:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.05em;
}

:where(.modal-window) > .content-part {
  grid-column: 1/1;
  grid-row: 1/1;
  position: relative;
}

:where(.modal-window) > .content-part:not(:where(.modal-window) > .content-part:has(.standard-modal)) {
  background: #fff;
}

:where(.modal-window) > .content-part:not(:where(.modal-window) > .content-part:has(.standard-modal)) > .close-modal-button {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 24px;
  color: var(--color-icon-default);
  cursor: pointer;
}

:where(.modal-window) > .content-part:not(:where(.modal-window) > .content-part:has(.standard-modal)) > .close-modal-button:hover {
  opacity: 1;
}

:where(.modal-window) > .content-part:has(.standard-modal) > .close-modal-button {
  display: none;
}

:where(.modal-wizard-page) {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  background: var(--color-bg-inverse);
}

:where(.modal-wizard-content) {
  position: relative;
  background: var(--color-bg-inverse);
  border: 1px solid var(--color-outline-subtlest);
  border-radius: 8px;
  padding: 32px;
  box-sizing: border-box;
  min-width: min-content;
  width: 560px;
  margin: 16px;
  display: flex;
  flex-direction: column;
}

:where(.modal-wizard-content > .busy-indicator-cover) {
  border-radius: 8px;
}

:where(.modal-wizard-content > .modal-wizard-header) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

:where(.modal-wizard-content > .modal-wizard-header > .modal-wizard-tf-logo) {
  margin: 4px;
}

:where(.modal-wizard-content > .modal-wizard-header > .modal-wizard-title) {
  margin-top: 4px;
  font-family: var(--font-family-heading), serif;
  font-style: normal;
  font-size: var(--typography-size-heading5, 20px);
  font-weight: var(--typography-weight-heading5, 600);
  line-height: var(--typography-lineHeight-heading5, 24px);
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
}

:where(.modal-wizard-content > .modal-wizard-header > .modal-wizard-description) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  color: var(--color-text-subtlest);
}

:where(.modal-wizard-content > .modal-wizard-body) {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}

:where(.modal-wizard-content > .modal-wizard-body > .modal-wizard-text-content) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-regular, 400);
  text-align: center;
}

:where(.modal-wizard-content > .modal-wizard-buttons) {
  margin-top: 16px;
  display: flex;
  flex-direction: row;
}

:where(.modal-wizard-content > .modal-wizard-buttons:not(.modal-style-buttons) > button) {
  flex-grow: 1;
}

:where(.modal-wizard-content > .modal-wizard-buttons:not(.modal-style-buttons) > a) {
  flex-grow: 1;
}

:where(.modal-wizard-content > .modal-wizard-buttons.modal-style-buttons) {
  gap: 4px;
  justify-content: flex-end;
}

:where(.nav-item) {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: var(--color-icon-subtlest);
  border-radius: 4px;
}

:where(.nav-item):not(.non-actionable) {
  cursor: pointer;
}

:where(.nav-item).hidden {
  display: none;
}

:where(.nav-item).menu-collapsed {
  width: 32px;
}

:where(.nav-item).menu-collapsed .icon .font-icon {
  font-size: 24px;
}

:where(.nav-item).menu-collapsed .icon svg {
  width: 24px;
  height: 24px;
}

:where(.nav-item):not(.menu-collapsed) .icon .font-icon {
  font-size: 16px;
}

:where(.nav-item):not(.menu-collapsed) .icon svg {
  width: 16px;
  height: 16px;
}

:where(.nav-item):not(.menu-collapsed).level-1 {
  padding-left: 24px;
}

:where(.nav-item):not(.menu-collapsed).level-2 {
  padding-left: 40px;
}

:where(.nav-item):not(.menu-collapsed).level-3 {
  padding-left: 56px;
}

:where(.nav-item).selected, :where(.nav-item):hover:not(.non-actionable) {
  color: var(--color-text-inverse);
  border-radius: 4px;
}

:where(.nav-item):hover:not(.selected):not(.non-actionable) {
  background: var(--color-bg-neutral-bold-focused);
}

:where(.nav-item).selected {
  background: linear-gradient(92deg, #161d26 -92.71%, #253040 -8.08%, #015c53 93.44%);
}

:where(.nav-item) .label {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-semibold, 600);
  color: inherit;
}

:where(.nav-item) .icon {
  color: inherit;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

:where(.nav-item) .icon .no-icon-but-label {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-semibold, 600);
  color: inherit;
  max-width: 100%;
}

:where(.nav-item) .expander {
  display: grid;
  place-items: center;
  padding-top: 2px;
  flex-grow: 1;
  justify-content: flex-end;
}

:where(.nav-item) .expander.children-expanded svg {
  transform: rotate(90deg);
}

:where(.nav-item) .expander svg {
  margin-right: 16px;
}

.top-navigation {
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  padding: 0 16px 0 4px;
  background: linear-gradient(90deg, #161d26, #253040 71.88%, #015c53 107.12%);
}

.top-navigation .left-side {
  flex-shrink: 0;
}

.top-navigation .middle {
  flex-grow: 1;
  flex-shrink: 2;
}

.top-navigation .right-side {
  flex-shrink: 1;
}

.top-navigation > * {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.side-navigation {
  flex-grow: 1;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: linear-gradient(180deg, #161d26 0.19%, #253040 72.63%, #015c53 116.84%);
  padding: 16px 8px 8px;
}

.side-navigation.collapsed {
  width: -moz-fit-content;
  width: fit-content;
  padding-left: 4px;
  padding-right: 4px;
}

.side-navigation .side-navigation-divider {
  border-top: 1px solid var(--color-outline-subtle);
  border-bottom: 1px solid var(--color-outline-subtle);
  margin: 7px 0;
  opacity: 25%;
}

.side-navigation .top-items, .side-navigation .main-items, .side-navigation .bottom-items {
  display: flex;
  flex-direction: column;
}

.side-navigation .top-items {
  grid-row: 1;
}

.side-navigation .main-items {
  scrollbar-width: auto;
  scrollbar-color: auto;
  scrollbar-gutter: auto;
  grid-row: 2;
  overflow: auto;
}

.side-navigation .main-items::-webkit-scrollbar {
  background: none;
  width: 6px;
  height: 6px;
}

.side-navigation .main-items::-webkit-scrollbar-button {
  display: none;
}

.side-navigation .main-items::-webkit-scrollbar-thumb {
  background: var(--color-bg-neutral-hovered);
  border-radius: 3px;
  height: 50%;
}

.side-navigation .bottom-items {
  grid-row: 3;
}

.upgrade-your-plan-nav-item {
  height: 32px;
  padding: 0 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  transition: background-color 0.3s ease-in-out;
  cursor: pointer;
  margin-bottom: 8px;
}

.upgrade-your-plan-nav-item:hover {
  background: var(--color-bg-neutral-enabled);
}

.upgrade-your-plan-nav-item svg {
  width: 16px;
  height: 16px;
}

.upgrade-your-plan-nav-item span {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-semibold, 600);
  background: linear-gradient(90deg, var(--palette-mint-600, #03DAC5) 0%, var(--palette-blue-600, #3697FF) 94.67%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.upgrade-your-plan-nav-item.collapsed {
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
}

.upgrade-your-plan-nav-item.collapsed span {
  display: none;
}

.upgrade-your-plan-nav-item.collapsed svg {
  width: 24px;
  height: 24px;
}

.button-nav-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 12px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid var(--color-outline-brand-bold);
  cursor: pointer;
  margin-bottom: 8px;
  color: var(--color-text-inverse);
}

.button-nav-item .content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.button-nav-item .background {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: 2px;
  background: var(--color-bg-brand-enabled);
  opacity: 33%;
}

.button-nav-item:hover .background {
  background: var(--color-bg-brand-focused);
  opacity: 1;
}

.button-nav-item .icon-container {
  display: grid;
  place-items: center;
}

.button-nav-item .title {
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
}

.button-nav-item.collapsed {
  width: 32px;
  padding: 0;
}

.button-nav-item.collapsed .title {
  display: none;
}

:where(.page-header) {
  font-family: var(--font-family-body);
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

:where(.page-header:has(.hamburger) + .tf-content) {
  z-index: -1;
}

:where(.page-header .page-title-container) {
  display: flex;
  flex-flow: row;
  align-items: center;
  gap: 8px;
}

:where(.page-header .page-title-container) .title-icon {
  font-size: 24px;
}

:where(.page-header h1) {
  font-size: 24px;
  font-weight: 600;
  padding: 0;
  margin: 0;
  min-width: 0;
}

:where(.page-header h1:has(.icon-left)) {
  display: flex;
  align-items: center;
}

:where(.page-header h1:has(.icon-left)) .icon-left {
  font-size: 24px;
  color: var(--color-text-default, #2F3E52);
  margin-right: 8px;
  cursor: pointer;
}

:where(.page-header h1:has(.icon-left) .icon-left) {
  font-size: 24px;
  color: var(--color-text-default, #2F3E52);
  margin-right: 8px;
  cursor: pointer;
}

:where(.page-header .page-header-right) {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

:where(.page-header .page-header-right) .btn-tf {
  min-width: 32px;
  height: 32px;
}

:where(.page-header .page-header-right) [class^=tf-btn-] {
  height: 32px;
  min-width: 32px;
}

:where(.page-header .page-header-right) .btn-container {
  display: flex;
  align-items: center;
  gap: 16px;
}

:where(.page-header .page-header-right) .hamburgers-btn-container {
  display: none;
}

:where(.page-header .page-header-right) .hamburger-btn {
  display: flex;
  flex-flow: row;
  align-items: center;
}

:where(.page-header .page-header-right) .hamburger-btn .hamburger {
  position: absolute;
  top: 36px;
  right: 0;
  z-index: 1;
  transition: all 0.3s ease-out;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  padding: 20px;
  border: 1px solid #34445A;
  text-align: right;
  background-color: #fff;
  display: flex;
  flex-flow: column wrap;
  gap: 16px;
}

:where(.page-header .page-header-right) .hamburger-btn .hamburger a {
  color: #34445a;
  white-space: nowrap;
  font-weight: 600;
  display: block;
  transition: all 0.3s ease-out;
}

:where(.page-header .page-header-right) .hamburger-btn .hamburger a:hover {
  color: #5dcdb5;
}

:where(.page-header .page-header-right) .hamburger-btn .hamburger.show {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

:where(.segmented-control.tabs-style) {
  display: flex;
  flex-direction: row;
  gap: 4px;
  padding: 4px;
  border-radius: 4px;
  background-color: var(--color-bg-neutral-enabled);
  width: -moz-fit-content;
  width: fit-content;
}

:where(.segmented-control.tabs-style.disabled) {
  opacity: 0.7;
}

:where(.segmented-control.tabs-style .segmented-control-button) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-medium, 500);
  color: var(--color-text-bold);
  border-radius: 4px;
  border: none;
  padding: 8px;
}

:where(.segmented-control.tabs-style .segmented-control-button:not(:disabled):hover) {
  color: var(--color-text-subtle);
}

:where(.segmented-control.tabs-style .segmented-control-button.active) {
  background-color: var(--color-bg-inverse);
}

:where(.segmented-control.tabs-style .segmented-control-button:not(.active)) {
  background: none;
}

:where(.segmented-control.tabs-style .segmented-control-button:focus-visible) {
  outline: 1px dashed var(--color-outline-subtle);
}

:where(.segmented-control.stack-buttons-brand-style) {
  display: flex;
  flex-direction: row;
  border-radius: 4px;
  border: 1px solid var(--color-outline-subtlest);
  overflow: hidden;
}

:where(.segmented-control.stack-buttons-brand-style.disabled) {
  opacity: 0.7;
}

:where(.segmented-control.stack-buttons-brand-style .segmented-control-button) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-medium, 500);
  border: none;
  padding: 7px 12px;
}

:where(.segmented-control.stack-buttons-brand-style .segmented-control-button:not(:disabled)) {
  cursor: pointer;
}

:where(.segmented-control.stack-buttons-brand-style .segmented-control-button:focus-visible) {
  outline: 1px dashed var(--color-outline-subtle);
}

:where(.segmented-control.stack-buttons-brand-style .segmented-control-button.active) {
  background: var(--color-bg-brand-enabled);
  color: var(--color-text-default);
}

:where(.segmented-control.stack-buttons-brand-style .segmented-control-button:not(.active)) {
  background: var(--color-bg-default);
  color: var(--color-text-subtle);
}

:where(.switch) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-medium, 500);
  display: flex;
}

:where(.switch:not(.disabled)) {
  color: var(--color-text-default);
}

:where(.switch.disabled) {
  color: var(--color-text-disabled);
}

:where(.switch > input[type=checkbox]) {
  width: 0;
  margin: 0;
}

:where(.switch > input[type=checkbox]:focus-visible + label > svg) {
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.4));
}

:where(.switch > label) {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

:where(.switch:not(.labelFirst) > label > svg:first-of-type) {
  min-width: 26px;
  min-height: 16px;
  margin-right: 8px;
}

:where(.switch.labelFirst > label > svg:last-of-type) {
  min-width: 26px;
  min-height: 16px;
  margin-left: 8px;
}

:where(.switch:not(.disabled).checked:not(.noSwitchOff) > label > svg) {
  cursor: pointer;
}

:where(.switch:not(.disabled):not(.checked) > label > svg) {
  cursor: pointer;
}

:where(.switch > label > svg > .handle) {
  transition: all 0.2s ease-in-out;
}

:where(.switch:not(.checked) > label > svg > .handle) {
  transform: translate(-10px);
}

:where(.switch:not(.disabled):not(.checked) > label > svg > .background) {
  fill: var(--color-icon-subtle);
}

:where(.switch:not(.disabled):not(.checked) > label > svg > .handle) {
  fill: var(--color-icon-inverse);
}

:where(.switch.disabled:not(.checked) > label > svg > .background) {
  fill: var(--color-bg-neutral-enabled);
}

:where(.switch.disabled:not(.checked) > label > svg > .handle) {
  fill: var(--color-bg-disabled);
}

:where(.switch.disabled.checked > label > svg > .background) {
  fill: var(--color-bg-positive-subtle-disabled);
}

:where(.switch.disabled.checked > label > svg > .handle) {
  fill: #fff;
}

:where(.tab-control) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

:where(.tab-control ul.tabs-pane) {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  padding: 4px 10px 0;
  border-bottom: 2px solid var(--color-outline-subtlest, #EBECEE);
  margin: 0;
}

:where(.tab-control ul.tabs-pane > li.tab-item) {
  flex-shrink: 0;
  cursor: pointer;
  color: var(--color-text-default);
  border: none;
  padding: 1px;
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 2px;
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body4, 11px);
  line-height: var(--typography-lineHeight-body4, 16px);
  font-weight: var(--typography-weight-body4-medium, 500);
}

:where(.tab-control ul.tabs-pane > li.tab-item:focus-visible) {
  outline-width: 1px;
  outline-color: var(--color-outline-subtle);
  outline-style: dotted;
  outline-offset: -1px;
}

:where(.tab-control ul.tabs-pane > li.tab-item):after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  border: none;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease-out;
}

:where(.tab-control ul.tabs-pane > li.tab-item:hover:not(.active)):after {
  border-bottom-color: var(--color-outline-subtle);
}

:where(.tab-control ul.tabs-pane > li.tab-item > img:first-child) {
  margin-left: -2px;
}

:where(.tab-control ul.tabs-pane > li.tab-item.active):after {
  border-bottom-color: var(--color-outline-bold);
}

:where(.tab-control ul.tabs-pane > li.tab-item.hidden) {
  display: none;
}

:where(.tab-control .tab-content-pane) {
  flex-grow: 1;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}

:where(.tab-control .tab-content-pane > .tab-content:not([hidden])) {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

:where(.tab-control .tab-content-pane > .tab-content[hidden]) {
  display: none;
}

:where(.table-ex.table-ex-base) {
  height: 100%;
  position: relative;
  overflow-y: auto;
}

:where(.table-ex.table-ex-base > div > table) {
  table-layout: fixed;
  border-collapse: separate;
  width: 100%;
  min-width: 800px;
}

:where(.table-ex.table-ex-base > div > table > thead > tr > th) {
  box-sizing: border-box;
  vertical-align: middle;
  position: relative;
  display: inline-block;
  height: inherit;
  align-content: center;
}

:where(.table-ex.table-ex-base > div > table > thead > tr > th .col-resizer) {
  position: absolute;
  right: 0;
  top: 0;
  cursor: col-resize;
  height: 100%;
  border: none;
  background: #1f57a4;
  opacity: 0;
  transition: opacity 0.1s ease-out;
  width: 6px;
  z-index: 1;
  transform: translate(3px);
}

:where(.table-ex.table-ex-base > div > table > thead > tr > th .col-resizer).active {
  opacity: 1;
}

:where(.table-ex.table-ex-base > div > table > tbody > tr > td) {
  box-sizing: border-box;
  overflow: hidden;
  vertical-align: middle;
  display: inline-block;
  align-content: center;
  height: inherit;
}

:where(.table-ex.table-ex-base.no-header thead) {
  display: none;
}

:where(.table-ex.table-ex-base.non-virtualized) {
  height: auto;
}

:where(.table-ex.table-ex-base.non-virtualized.no-header > div > table) {
  height: auto;
  min-height: 30px;
}

:where(.table-ex.table-ex-base.non-virtualized:not(.no-header) > div > table) {
  height: auto;
  min-height: 60px;
}

:where(.table-ex.table-ex-base.non-virtualized > div) {
  height: auto;
  position: relative;
  top: unset;
}

:where(.table-ex.table-ex-base.non-virtualized.table-exactly-fits > div > table > tbody > tr:last-child > td) {
  border-bottom: none;
}

:where(.table-ex.table-ex-default) {
  scrollbar-width: auto;
  scrollbar-color: auto;
  scrollbar-gutter: auto;
  overflow: auto;
  outline: none;
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--color-outline-subtlest);
}

:where(.table-ex.table-ex-default)::-webkit-scrollbar {
  background: none;
  width: 6px;
  height: 6px;
}

:where(.table-ex.table-ex-default)::-webkit-scrollbar-button {
  display: none;
}

:where(.table-ex.table-ex-default)::-webkit-scrollbar-thumb {
  background: var(--color-bg-neutral-hovered);
  border-radius: 3px;
  height: 50%;
}

:where(.table-ex.table-ex-default > div > table) {
  table-layout: fixed;
  border-collapse: separate;
  width: 100%;
  min-width: 800px;
  background-color: var(--color-bg-inverse);
}

:where(.table-ex.table-ex-default:not(.small-size) > div > table > thead > tr) {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  font-size: var(--typography-size-caption2);
  font-weight: var(--typography-weight-caption2);
  line-height: var(--typography-lineHeight-caption2);
  height: 32px;
}

:where(.table-ex.table-ex-default.small-size > div > table > thead > tr) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body4, 11px);
  line-height: var(--typography-lineHeight-body4, 16px);
  font-weight: var(--typography-weight-body4-semibold, 600);
  height: 28px;
}

:where(.table-ex.table-ex-default > div > table > thead > tr) {
  background: var(--color-bg-neutral-bold-enabled);
  color: var(--color-text-subtlest);
  text-align: left;
}

:where(.table-ex.table-ex-default > div > table > thead > tr > th) {
  border-right: 1px solid var(--color-outline-subtle);
  padding: 0 12px;
}

:where(.table-ex.table-ex-default > div > table > thead > tr > th):last-child {
  border-right: none;
}

:where(.table-ex.table-ex-default:not(.small-size) > div > table > tbody > tr) {
  height: 40px;
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-regular, 400);
}

:where(.table-ex.table-ex-default.small-size > div > table > tbody > tr) {
  height: 32px;
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
}

:where(.table-ex.table-ex-default > div > table > tbody > tr) {
  color: var(--color-text-default);
  text-align: left;
}

:where(.table-ex.table-ex-default:not(.empty) > div > table > tbody > tr):hover {
  background-color: var(--color-bg-brand-subtle-hovered);
}

:where(.table-ex.table-ex-default:not(.empty) > div > table > tbody > tr).selected {
  background: #8be6d0;
}

:where(.table-ex.table-ex-default:not(.empty) > div > table > tbody > tr).dragging {
  background: rgba(139, 230, 208, 0.2);
}

:where(.table-ex.table-ex-default:not(.empty) > div > table > tbody > tr).drag-before {
  box-shadow: inset 0 2px #388b7b;
}

:where(.table-ex.table-ex-default:not(.empty) > div > table > tbody > tr).drag-before.first-child {
  box-shadow: inset 0 3px #388b7b;
}

:where(.table-ex.table-ex-default:not(.empty) > div > table > tbody > tr).drag-after {
  box-shadow: inset 0 -3px #388b7b;
}

:where(.table-ex.table-ex-default:not(.empty) > div > table > tbody > tr).drag-after:last-child {
  box-shadow: inset 0 -2px #388b7b;
}

:where(.table-ex.table-ex-default > div > table > tbody > tr > td) {
  border-bottom: 1px solid var(--color-outline-subtlest);
  padding: 0 8px;
}

:where(.table-ex.table-ex-default > div > table > tbody > tr > td):last-child {
  border-right: none;
}

:where(.table-ex.table-ex-default > div .empty-table) {
  text-align: center;
  color: var(--color-text-default);
}

:where(.table-ex.table-ex-default > div .empty-table td) {
  padding-top: 30px;
  padding-bottom: 20px;
  border: none;
  font-size: 12px;
  height: auto;
}

:where(.table-ex.table-ex-default .column-header) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

:where(.table-ex.table-ex-default .column-header) .column-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-clip-path: margin-box;
          clip-path: margin-box;
  transition-duration: 1s;
  text-transform: uppercase;
  font-weight: 600;
  max-width: unset;
  cursor: pointer;
}

:where(.table-ex.table-ex-default .column-header) .column-name.scroll-cell {
  transition: all 1s ease-out;
}

:where(.table-ex.table-ex-default .column-header) .filter-icons {
  display: flex;
  flex-flow: row;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

:where(.table-ex.table-ex-default .column-header) .filter-indicator {
  cursor: pointer;
}

:where(.table-ex.table-ex-default .column-header) .filter-indicator.active {
  border-radius: 2px;
  background: var(--color-bg-selected);
  color: var(--color-icon-subtle);
}

:where(.table-ex.table-ex-default .column-header) .sort-direction {
  cursor: pointer;
}

:where(.table-ex.table-ex-default .column-header).center {
  justify-content: center;
}

:where(.table-ex.table-ex-default .column-header).right {
  justify-content: flex-end;
}

:where(.table-ex.table-ex-default.scrollbar-vertical > div > table > tbody > tr:last-child > td) {
  border-bottom: none;
}

:where(.table-ex.borderless) {
  border: none;
  border-radius: 0;
}

.tcl-name-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-regular, 400);
  color: var(--color-text-default);
  height: 100%;
}

:where(.tcl-name-cell.small-size) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
}

.tcl-name-cell :where(.expander) {
  cursor: pointer;
}

.tcl-name-cell :where(.expander.expanded) {
  transform: rotate(90deg);
}

.tcl-name-cell :where(.type-icon.sprite-custom-icon) {
  margin-left: -4px;
  flex-shrink: 0;
}

.tcl-name-cell :where(.type-icon.font-icon) {
  width: 20px;
  flex-shrink: 0;
}

:where(.tcl-name-cell:not(.expandable)).level-0 {
  padding-left: 16px;
}

:where(.tcl-name-cell:not(.expandable)).level-1 {
  padding-left: 32px;
}

:where(.tcl-name-cell:not(.expandable)).level-2 {
  padding-left: 48px;
}

:where(.tcl-name-cell:not(.expandable)).level-3 {
  padding-left: 64px;
}

:where(.tcl-name-cell:not(.expandable)).level-4 {
  padding-left: 80px;
}

:where(.tcl-name-cell:not(.expandable)).level-5 {
  padding-left: 96px;
}

:where(.tcl-name-cell.expandable).level-0 {
  padding-left: 0;
}

:where(.tcl-name-cell.expandable).level-1 {
  padding-left: 16px;
}

:where(.tcl-name-cell.expandable).level-2 {
  padding-left: 32px;
}

:where(.tcl-name-cell.expandable).level-3 {
  padding-left: 48px;
}

:where(.tcl-name-cell.expandable).level-4 {
  padding-left: 96px;
}

:where(.tcl-name-cell.expandable).level-5 {
  padding-left: 120px;
}

.tcl-name-cell :where(.test-case-info) {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 4px;
}

.tcl-name-cell :where(.test-case-status.draft) {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  background: var(--color-bg-warning-subtle-enabled);
  color: var(--color-text-warning-default);
  background: none;
}

.tcl-name-cell :where(.test-case-status.ready) {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  background: var(--color-bg-brand-subtle-enabled);
  color: var(--color-text-brand-bold);
  background: none;
}

.tcl-name-cell :where(.test-case-status) {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  width: 26px;
  padding: 0;
}

.tcl-name-cell :where(.test-case-info .type-icon.sprite-custom-icon) {
  margin-right: -4px;
}

.tcl-name-cell :where(.test-case-info .type-icon.font-icon) {
  width: 15px;
  padding-left: 2px;
  font-size: 12px;
}

.tcl-name-cell :where(.badge) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body5, 8px);
  line-height: var(--typography-lineHeight-body5, 12px);
  font-weight: var(--typography-weight-body5-medium, 500);
  line-height: 1.5;
  padding: 0 4px;
  margin: 0 4px;
  border-radius: 100px;
  transform: translateY(-1px);
  box-sizing: border-box;
  min-width: 14px;
  flex-shrink: 0;
  text-align: center;
  color: var(--color-text-subtle);
  background-color: rgba(37, 48, 64, 0.0509803922);
}

:where(.table-ex.table-ex-default.small-size) .tcl-name-cell {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
}

.move-test-case-modal-form {
  width: 90vw;
  max-width: 800px;
}

.move-test-case-modal-form > .header .left-side {
  padding: 0;
}

.move-test-case-modal-form > .header .left-side .title-block .title {
  font-family: var(--font-family-heading), serif;
  font-style: normal;
  font-size: var(--typography-size-heading5, 20px);
  font-weight: var(--typography-weight-heading5, 600);
  line-height: var(--typography-lineHeight-heading5, 24px);
}

.move-test-case-modal-form > .header .left-side .title-block .breadcrumb {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  color: var(--color-text-subtle);
  margin-top: 4px;
}

.move-test-case-modal-form .table-ex {
  width: 760px;
  height: 380px;
}

.glow {
  box-shadow: 0 0 5px #8be6d0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8be6d0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  to {
    box-shadow: 0 0 8px #8be6d0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1019607843);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5019607843);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #d9d9d9;
}

:where(.test-case-picker) {
  display: flex;
  flex-direction: row;
  gap: 4px;
  min-width: 50px;
  border-radius: 4px;
  border: 1px solid var(--color-bg-success);
  align-items: center;
  box-sizing: content-box;
  background: var(--color-bg-inverse);
}

:where(.test-case-picker:not(.borderless)) {
  border: 1px solid var(--color-outline-subtlest);
  border-radius: 4px;
  padding: 7px 13px;
}

:where(.test-case-picker > .content) {
  overflow: hidden;
  flex-grow: 1;
  flex-shrink: 1;
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-regular, 400);
}

:where(.test-case-picker > .content .name) {
  padding-right: 4px;
  min-width: 50px;
  color: var(--color-text-default);
}

:where(.test-case-picker > .content:hover .name) {
  color: var(--color-text-subtle);
}

:where(.test-case-picker > .content .not-selected-placeholder) {
  color: var(--color-text-subtlest);
}

:where(.test-case-picker:has(> .content:hover) button.test-case-picker-trigger) {
  color: var(--color-text-subtlest);
}

:where(.test-case-picker button.clear-selection), :where(.test-case-picker button.test-case-picker-trigger) {
  height: 20px;
  background: transparent;
  border: none;
  padding: 0;
  width: 16px;
  color: var(--color-text-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
}

:where(.test-case-picker button.clear-selection:hover), :where(.test-case-picker button.test-case-picker-trigger:hover) {
  color: var(--color-text-subtlest);
}

:where(.test-case-picker-popup-content) {
  width: 645px;
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-items: stretch;
}

:where(.test-case-picker-popup-content .standard-modal) {
  width: auto;
  height: auto;
  flex-grow: 1;
  box-shadow: rgba(0, 0, 0, 0.2470588235) 0 0 30px;
}

:where(.test-case-picker-popup-content .standard-modal > .header .title) {
  font-family: var(--font-family-heading), serif;
  font-style: normal;
  font-size: var(--typography-size-heading5, 20px);
  font-weight: var(--typography-weight-heading5, 600);
  line-height: var(--typography-lineHeight-heading5, 24px);
}

:where(.test-case-picker-popup-content .standard-modal > .body) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-items: stretch;
}

:where(.test-case-picker-popup-content .standard-modal > .body > .table-ex) {
  height: auto;
  width: auto;
  flex-grow: 1;
  flex-shrink: 1;
}

:where(.test-case-picker-popup-content .standard-modal > .body > .table-ex td) {
  border: none;
}

:where(.test-case-picker-popup-content .standard-modal > .body > .table-ex.empty table) {
  height: 100%;
  display: grid;
  place-items: center;
}

:where(.text-area-field) {
  font-family: var(--font-family-body), serif;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  color: var(--color-text-default);
}

:where(.text-area-field.single-col) {
  flex-direction: column;
}

:where(.text-area-field:not(.single-col)) {
  flex-direction: row;
}

:where(.text-area-field:not(.single-col) > label) {
  align-self: flex-start;
  min-height: 40px;
}

:where(.text-area-field:not(.single-col).small > label) {
  min-height: 32px;
}

:where(.text-area-field label) {
  font-family: var(--font-family-label), serif;
  font-size: var(--typography-size-label, 12px);
  font-style: normal;
  font-weight: var(--typography-weight-label, 600);
  line-height: var(--typography-lineHeight-label, 16px);
  display: flex;
  min-width: 80px;
  align-items: center;
  gap: 4px;
}

:where(.text-area-field label .required) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  height: 16px;
  width: 5px;
  color: var(--color-text-negative-default);
}

:where(.text-area-field .input-area) {
  width: 100%;
  display: flex;
  flex-flow: column;
  gap: 6px;
}

:where(.text-area-field .input-area .input-wrapper) {
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid var(--color-outline-subtlest);
  background: var(--color-bg-inverse);
  outline: none;
  width: 100%;
}

:where(.text-area-field .input-area .input-wrapper:not(.allow-resize) textarea) {
  resize: none;
}

:where(.text-area-field .input-area .input-wrapper.allow-resize textarea) {
  resize: vertical;
}

:where(.text-area-field .input-area .input-wrapper:has(textarea:hover:not(:focus):not(:disabled))), :where(.text-area-field .input-area .input-wrapper:has(textarea:focus:not(:disabled))) {
  border-color: var(--color-outline-brand-default);
}

:where(.text-area-field .input-area .input-wrapper textarea) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-regular, 400);
  scrollbar-width: auto;
  scrollbar-color: auto;
  scrollbar-gutter: auto;
  color: var(--color-text-default);
  width: 100%;
  min-height: 30px;
  padding: 5px 12px;
  box-sizing: border-box;
  border-radius: 4px;
  border: none;
  outline: none;
}

:where(.text-area-field .input-area .input-wrapper textarea)::-webkit-scrollbar {
  background: none;
  width: 6px;
  height: 6px;
}

:where(.text-area-field .input-area .input-wrapper textarea)::-webkit-scrollbar-button {
  display: none;
}

:where(.text-area-field .input-area .input-wrapper textarea)::-webkit-scrollbar-thumb {
  background: var(--color-bg-neutral-hovered);
  border-radius: 3px;
  height: 50%;
}

:where(.text-area-field .input-area .input-wrapper textarea:disabled) {
  color: var(--color-outline-subtle);
}

:where(.text-area-field .input-area .input-wrapper textarea::placeholder), :where(.text-area-field .input-area .input-wrapper textarea:-ms-input-placeholder) {
  color: var(--color-text-subtlest);
}

:where(.text-area-field .input-area .input-wrapper .font-icon:hover) {
  color: var(--color-bg-brand-hovered);
}

:where(.text-area-field .input-area .validation-error) {
  color: var(--color-text-negative-default);
  font-size: 12px;
  font-weight: 600;
  width: 100%;
}

:where(.text-area-field .input-area .input-hint) {
  color: var(--color-text-subtle);
  font-size: 12px;
  font-weight: 500;
  width: 100%;
}

:where(.tf-select) {
  font-family: var(--font-family-body), serif;
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  color: var(--color-text-default);
}

:where(.tf-select.single-col) {
  flex-direction: column;
}

:where(.tf-select:not(.single-col)) {
  flex-direction: row;
}

:where(.tf-select:not(.single-col) > label) {
  align-self: flex-start;
  min-height: 40px;
}

:where(.tf-select label) {
  font-family: var(--font-family-label), serif;
  font-size: var(--typography-size-label, 12px);
  font-style: normal;
  font-weight: var(--typography-weight-label, 600);
  line-height: var(--typography-lineHeight-label, 16px);
  color: var(--color-text-default);
  display: flex;
  min-width: 80px;
  align-items: center;
  gap: 4px;
}

:where(.tf-select label .required) {
  font-size: 12px;
  height: 16px;
  width: 5px;
  color: var(--color-text-negative-default);
}

:where(.tf-select .input-area) {
  width: 100%;
  display: flex;
  flex-flow: column;
  gap: 6px;
}

.tf-select .input-area :where(.select-control) {
  min-height: 40px;
  box-sizing: border-box;
}

:where(.tf-select .input-area .select-control) {
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
  border: 1px solid var(--color-outline-subtlest);
  width: 100%;
}

:where(.tf-select .input-area .select-control .tf-select__placeholder) {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: nowrap;
  color: var(--color-text-subtlest);
}

:where(.tf-select .input-area .select-control.tf-select__control--menu-is-open), :where(.tf-select .input-area .select-control:has(input:focus)), :where(.tf-select .input-area .select-control:hover) {
  border: 1px solid var(--color-outline-brand-default);
}

:where(.tf-select .input-area .select-control.disabled) {
  color: var(--color-outline-subtle);
}

:where(.tf-select .input-area .select-control.disabled .tf-select__single-value), :where(.tf-select .input-area .select-control.disabled .tf-select__indicators .drop-down-indicator), :where(.tf-select .input-area .select-control.disabled .tf-select__indicators .clear-indicator) {
  color: var(--color-outline-subtle);
  cursor: default;
}

:where(.tf-select .input-area .select-control.disabled .multi-values-container .multi-value-button) {
  opacity: 0;
}

:where(.tf-select .input-area .select-control.disabled .drop-down-indicator) {
  display: none;
}

:where(.tf-select .input-area .select-control .tf-select__input-container) {
  overflow: hidden;
}

:where(.tf-select .input-area .select-control .tf-select__value-container) {
  padding: 1px 8px 1px 12px;
}

:where(.tf-select .input-area .select-control .tf-select__value-container.tf-select__value-container--is-multi) {
  gap: 4px;
  margin-top: 4px;
  margin-bottom: 4px;
}

:where(.tf-select .input-area .select-control .tf-select__indicators .dropdown-indicator), :where(.tf-select .input-area .select-control .tf-select__indicators .clear-indicator) {
  cursor: pointer;
  color: var(--color-icon-subtle);
  margin-right: 10px;
}

:where(.tf-select .input-area .select-control .tf-select__indicators .dropdown-indicator:hover), :where(.tf-select .input-area .select-control .tf-select__indicators .clear-indicator:hover) {
  color: var(--color-outline-brand-default);
}

:where(.tf-select .input-area .select-control .tf-select__indicators .dropdown-indicator) {
  font-size: 24px;
}

:where(.tf-select .input-area .select-control .tf-select__indicators .clear-indicator) {
  margin-right: 4px;
}

:where(.tf-select .multi-values-container) {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  border-radius: 1000px;
  background: var(--color-bg-neutral-subtle-enabled);
}

:where(.tf-select .multi-values-container .multi-value-label) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  max-width: 70px;
}

:where(.tf-select .multi-values-container .multi-value-button) {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

:where(.tf-select .multi-values-container .multi-value-button:hover) {
  color: var(--color-outline-brand-default);
}

:where(.tf-select .validation-error) {
  color: var(--color-text-negative-default);
  font-size: 12px;
  font-weight: 600;
  width: 100%;
}

div.tf-select__menu-portal, div.tf-select__menu {
  z-index: 11;
}

:where(.tf-select__menu-portal), :where(.tf-select__menu) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-regular, 400);
  color: var(--color-text-default);
}

:where(.tf-select__menu-portal .menu), :where(.tf-select__menu.menu) {
  position: absolute;
  margin-top: 2px;
  margin-bottom: 8px;
}

:where(.tf-select__menu-portal .menu.with-modal) {
  display: none;
}

:where(.tf-select__menu-portal .menu .menu-list), :where(.tf-select__menu.menu .menu-list) {
  scrollbar-width: auto;
  scrollbar-color: auto;
  scrollbar-gutter: auto;
  box-shadow: 0 0 0 0.5px var(--color-outline-subtlest), 0 16px 32px 0 var(--elevation-shadow-level4_soft);
  overflow: auto;
  padding-bottom: 0;
  padding-top: 0;
  border-radius: 4px;
  background-color: var(--color-bg-inverse);
}

:where(.tf-select__menu-portal .menu .menu-list)::-webkit-scrollbar, :where(.tf-select__menu.menu .menu-list)::-webkit-scrollbar {
  background: none;
  width: 6px;
  height: 6px;
}

:where(.tf-select__menu-portal .menu .menu-list)::-webkit-scrollbar-button, :where(.tf-select__menu.menu .menu-list)::-webkit-scrollbar-button {
  display: none;
}

:where(.tf-select__menu-portal .menu .menu-list)::-webkit-scrollbar-thumb, :where(.tf-select__menu.menu .menu-list)::-webkit-scrollbar-thumb {
  background: var(--color-bg-neutral-hovered);
  border-radius: 3px;
  height: 50%;
}

:where(.tf-select__menu-portal .menu .menu-list .select-option), :where(.tf-select__menu.menu .menu-list .select-option) {
  padding: 8px 12px 8px 15px;
}

:where(.tf-select__menu-portal .menu .menu-list .tf-select__group-heading), :where(.tf-select__menu.menu .menu-list .tf-select__group-heading) {
  font-weight: 500;
  padding: 8px 12px 8px 8px;
}

:where(.tf-select__menu-portal .menu .menu-list .tf-select__option-separator), :where(.tf-select__menu.menu .menu-list .tf-select__option-separator) {
  border-top: 1px solid var(--color-outline-subtlest);
  margin: 8px 0;
}

:where(.tf-select__menu-portal .menu .menu-list .select-option .tf-select-group-label), :where(.tf-select__menu.menu .menu-list .select-option .tf-select-group-label) {
  color: var(--color-text-default, #2F3E52);
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

:where(.tf-select__menu-portal .menu .menu-list .select-option:has(.tf-select-group-label) > div), :where(.tf-select__menu.menu .menu-list .select-option:has(.tf-select-group-label) > div) {
  padding: 6px 0;
}

:where(.tf-select__menu-portal .no-options-text) {
  color: var(--color-text-subtlest);
  display: flex;
  flex-flow: row;
  gap: 8px;
  align-items: center;
  justify-self: center;
  padding: 8px 4px;
  border-radius: 4px;
  box-sizing: border-box;
  line-height: 1.2;
}

:where(.tf-select__menu-portal .no-options-text .no-options-icon) {
  display: flex;
  flex-flow: row;
  gap: 8px;
  align-items: center;
  justify-self: center;
}

:where(.tf-select__menu-portal .menu .menu-list .select-option.selected), :where(.tf-select__menu.menu .menu-list .select-option.selected) {
  background: var(--color-outline-brand-default);
  color: unset;
}

:where(.tf-select__menu-portal .menu .menu-list .select-option.focused:not(.selected)), :where(.tf-select__menu.menu .menu-list .select-option.focused:not(.selected)) {
  background-color: var(--color-bg-brand-subtle-hovered);
  color: unset;
}

.Toastify__toast {
  min-height: 32px;
}

.Toastify__toast--success .Toastify__toast-icon svg {
  fill: var(--color-icon-brand-default);
}

.Toastify__toast--error .Toastify__toast-icon svg {
  fill: var(--color-icon-negative-default);
}

.Toastify__toast-body {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-regular, 400);
}

.Toastify__toast-body a {
  color: var(--color-text-subtle);
  text-decoration: underline;
}

.Toastify__toast-body a:hover {
  color: var(--color-text-subtlest);
}

.Toastify__toast-body a:focus {
  outline: 0;
}

:where(.radio-field) {
  display: flex;
  flex-flow: row;
  align-items: center;
  gap: 8px;
}

:where(.radio-field .radio) {
  color: var(--color-bg-neutral-bold-enabled);
}

:where(.radio-field .radio:hover) {
  color: var(--color-bg-neutral-bold-hovered);
}

:where(.radio-field label) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  cursor: pointer;
}

:where(.radio-field.disabled .radio), :where(.radio-field.disabled .radio:hover), :where(.radio-field.disabled label) {
  color: var(--color-outline-subtle);
  pointer-events: none;
}

:where(.checkbox-field) {
  display: flex;
  flex-flow: row;
  align-items: center;
  gap: 8px;
}

:where(.checkbox-field.reverse) {
  flex-flow: row-reverse;
  justify-content: flex-end;
}

:where(.checkbox-field input[type=checkbox].checkbox) {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  position: relative;
  margin: 0;
}

:where(.checkbox-field input[type=checkbox].checkbox:not(:disabled)) {
  cursor: pointer;
}

:where(.checkbox-field input[type=checkbox].checkbox:before) {
  content: "";
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.63215 20.0922C5.12699 20.0922 4.6994 19.9172 4.3494 19.5672C3.9994 19.2172 3.8244 18.7896 3.8244 18.2844V4.89991C3.8244 4.39475 3.9994 3.96716 4.3494 3.61716C4.6994 3.26716 5.12699 3.09216 5.63215 3.09216H19.0167C19.5218 3.09216 19.9494 3.26716 20.2994 3.61716C20.6494 3.96716 20.8244 4.39475 20.8244 4.89991V18.2844C20.8244 18.7896 20.6494 19.2172 20.2994 19.5672C19.9494 19.9172 19.5218 20.0922 19.0167 20.0922H5.63215Z" fill="%235d697b" /><path d="M5.63215 18.5922H19.0167C19.0937 18.5922 19.1642 18.5601 19.2282 18.4959C19.2923 18.4319 19.3244 18.3614 19.3244 18.2844V4.89991C19.3244 4.82291 19.2923 4.75241 19.2282 4.68841C19.1642 4.62425 19.0937 4.59216 19.0167 4.59216H5.63215C5.55515 4.59216 5.48465 4.62425 5.42065 4.68841C5.35649 4.75241 5.3244 4.82291 5.3244 4.89991V18.2844C5.3244 18.3614 5.35649 18.4319 5.42065 18.4959C5.48465 18.5601 5.55515 18.5922 5.63215 18.5922Z" fill="%23FFFFFF" /></svg>') center/contain no-repeat;
}

:where(.checkbox-field input[type=checkbox].checkbox:checked:before) {
  background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.63215 20.0922C5.12699 20.0922 4.6994 19.9172 4.3494 19.5672C3.9994 19.2172 3.8244 18.7896 3.8244 18.2844V4.89991C3.8244 4.39475 3.9994 3.96716 4.3494 3.61716C4.6994 3.26716 5.12699 3.09216 5.63215 3.09216H19.0167C19.5218 3.09216 19.9494 3.26716 20.2994 3.61716C20.6494 3.96716 20.8244 4.39475 20.8244 4.89991V18.2844C20.8244 18.7896 20.6494 19.2172 20.2994 19.5672C19.9494 19.9172 19.5218 20.0922 19.0167 20.0922H5.63215Z" fill="%232F3E52" /><path d="M5.63215 18.5922H19.0167C19.0937 18.5922 19.1642 18.5601 19.2282 18.4959C19.2923 18.4319 19.3244 18.3614 19.3244 18.2844V4.89991C19.3244 4.82291 19.2923 4.75241 19.2282 4.68841C19.1642 4.62425 19.0937 4.59216 19.0167 4.59216H5.63215C5.55515 4.59216 5.48465 4.62425 5.42065 4.68841C5.35649 4.75241 5.3244 4.82291 5.3244 4.89991V18.2844C5.3244 18.3614 5.35649 18.4319 5.42065 18.4959C5.48465 18.5601 5.55515 18.5922 5.63215 18.5922Z" fill="%232F3E52" /><path d="M10.9244 13.3384L8.6014 11.0152C8.4629 10.8768 8.28882 10.806 8.07915 10.8027C7.86965 10.7995 7.6924 10.8703 7.5474 11.0152C7.40257 11.1602 7.33015 11.3358 7.33015 11.5422C7.33015 11.7485 7.40257 11.9242 7.5474 12.0692L10.2917 14.8134C10.4725 14.9941 10.6834 15.0844 10.9244 15.0844C11.1654 15.0844 11.3763 14.9941 11.5572 14.8134L17.1207 9.24991C17.259 9.11141 17.3298 8.93733 17.3332 8.72766C17.3363 8.51816 17.2655 8.34091 17.1207 8.19591C16.9757 8.05108 16.8 7.97866 16.5937 7.97866C16.3873 7.97866 16.2117 8.05108 16.0667 8.19591L10.9244 13.3384Z" fill="%23FFFFFF" /></svg>') center/contain no-repeat;
}

:where(.checkbox-field label) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
}

:where(.number-field) {
  font-family: var(--font-family-body), serif;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  color: var(--color-text-default);
}

:where(.number-field.single-col) {
  flex-direction: column;
}

:where(.number-field:not(.single-col) > label) {
  align-self: flex-start;
  min-height: 40px;
}

:where(.number-field:not(.single-col)) {
  flex-direction: row;
}

:where(.number-field label) {
  font-family: var(--font-family-label), serif;
  font-size: var(--typography-size-label, 12px);
  font-style: normal;
  font-weight: var(--typography-weight-label, 600);
  line-height: var(--typography-lineHeight-label, 16px);
  display: flex;
  min-width: 80px;
  align-items: center;
  gap: 4px;
}

:where(.number-field label .required) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  height: 16px;
  width: 5px;
  color: var(--color-text-negative-default);
}

:where(.number-field .input-area) {
  width: 100%;
  display: flex;
  flex-flow: column;
  gap: 6px;
}

:where(.number-field .input-area .input-wrapper) {
  display: flex;
  flex-flow: row;
  align-items: stretch;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid var(--color-outline-subtlest);
  background: var(--color-bg-default);
  outline: none;
  padding: 3px 8px;
  overflow: hidden;
  width: 100%;
  max-width: 90px;
  min-height: 40px;
}

:where(.number-field .input-area .input-wrapper > i) {
  align-self: center;
}

:where(.number-field .input-area .input-wrapper:has(input:hover:not(:focus):not(:disabled))), :where(.number-field .input-area .input-wrapper:has(input:focus:not(:disabled))) {
  border-color: var(--color-outline-brand-default);
}

:where(.number-field .input-area .input-wrapper input) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-medium, 500);
  border-radius: 4px;
  border: 1px solid var(--color-outline-subtlest);
  background: var(--color-bg-inverse);
  text-align: center;
  color: var(--color-text-default);
  padding: 0 8px;
  width: 100%;
  outline: none;
  -moz-appearance: textfield;
}

:where(.number-field .input-area .input-wrapper input)::-webkit-outer-spin-button, :where(.number-field .input-area .input-wrapper input)::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

:where(.number-field .input-area .input-wrapper input):disabled {
  color: var(--color-outline-subtle);
}

:where(.number-field .input-area .input-wrapper .font-icon:hover) {
  color: var(--color-bg-brand-hovered);
}

:where(.number-field .input-area .validation-error) {
  color: var(--color-text-negative-default);
  font-size: 12px;
  font-weight: 600;
  width: 100%;
}

:where(.number-field .input-area .input-hint) {
  color: var(--color-text-subtle);
  font-size: 12px;
  font-weight: 500;
  width: 100%;
}

:where(.number-field .input-area .input-number-container) {
  display: flex;
  flex-flow: row;
  align-items: center;
  gap: 8px;
}

.number-field > .input-area > .input-number-container .tf-btn-s-text-neutral.btn-add-remove {
  padding: 0;
}

:where(.pricing-plan-cards) {
  display: flex;
  align-self: stretch;
  gap: 16px;
  align-items: stretch;
}

:where(.pricing-plan-cards .pricing-plan-card) {
  box-shadow: 0 0 0 0.5px var(--color-outline-subtlest), 0 16px 32px 0 var(--elevation-shadow-level4_soft);
  color: var(--color-text-default);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  overflow: hidden;
  min-width: 268px;
  box-sizing: border-box;
  flex: 1 0;
  padding: 16px;
  gap: 24px;
  border-radius: 8px;
  border: 1px solid var(--color-outline-subtlest);
  background: var(--color-bg-inverse);
}

:where(.pricing-plan-cards .pricing-plan-card .text-content) {
  display: flex;
  padding: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

:where(.pricing-plan-cards .pricing-plan-card .text-content .top-bar) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

:where(.pricing-plan-cards .pricing-plan-card .plan-type.plan-type-free) {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  text-align: center;
  border-radius: 2px;
  padding: 1px 4px;
  border: 1px solid var(--color-outline-brand-bold);
  color: var(--color-text-brand-default);
}

:where(.pricing-plan-cards .pricing-plan-card .plan-type.plan-type-plus) {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  text-align: center;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--palette-mint-600, #03DAC5) 0%, var(--palette-blue-600, #3697FF) 94.67%);
  color: var(--color-text-inverse);
  padding: 2px 4px;
}

:where(.pricing-plan-cards .pricing-plan-card .plan-type.plan-type-pro) {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  text-align: center;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--palette-mint-600, #03DAC5) 0%, var(--palette-blue-600, #3697FF) 94.67%);
  color: var(--color-text-inverse);
  padding: 2px 4px;
}

:where(.pricing-plan-cards .pricing-plan-card .plan-type.plan-type-ultimate) {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  text-align: center;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--palette-neutral-900, #161D26) 0%, var(--palette-neutral-700, #253040) 37.87%, var(--palette-mint-1000, #015C53) 94.67%);
  color: var(--color-text-inverse);
  padding: 2px 4px;
}

:where(.pricing-plan-cards .pricing-plan-card .text-content .top-bar .plan-type) {
  font-family: var(--font-family-heading), serif;
  font-style: normal;
  font-size: var(--typography-size-heading6, 16px);
  font-weight: var(--typography-weight-heading6, 600);
  line-height: var(--typography-lineHeight-heading6, 24px);
  display: flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
}

:where(.pricing-plan-cards .pricing-plan-card .text-content .price-row) {
  display: flex;
  align-items: center;
  gap: 8px;
}

:where(.pricing-plan-cards .pricing-plan-card .text-content .price-row .original) {
  font-family: var(--font-family-heading), serif;
  font-style: normal;
  font-size: var(--typography-size-heading4, 24px);
  font-weight: var(--typography-weight-heading4, 600);
  line-height: var(--typography-lineHeight-heading4, 32px);
  color: var(--color-text-subtlest);
  text-align: center;
}

:where(.pricing-plan-cards .pricing-plan-card .text-content .price-row .discount) {
  font-family: var(--font-family-heading), serif;
  font-style: normal;
  font-size: var(--typography-size-heading3, 32px);
  font-weight: var(--typography-weight-heading3, 600);
  line-height: var(--typography-lineHeight-heading3, 40px);
  color: var(--color-text-bold);
  text-align: center;
}

:where(.pricing-plan-cards .pricing-plan-card .text-content .price-row .description) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-regular, 400);
  color: var(--color-text-subtle);
  text-align: center;
}

:where(.pricing-plan-cards .pricing-plan-card .divider) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-bottom: 1px solid var(--color-outline-subtlest);
}

:where(.pricing-plan-cards .pricing-plan-card .price-detail) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  color: var(--color-text-subtle);
  display: flex;
  min-height: 40px;
  padding: 0;
  align-items: flex-start;
  gap: 0;
  align-self: stretch;
}

:where(.pricing-plan-cards .pricing-plan-card .features) {
  display: flex;
  padding: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

:where(.pricing-plan-cards .pricing-plan-card .features .feature-title) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-semibold, 600);
  display: flex;
  min-height: 20px;
  align-items: center;
  gap: 4px;
  align-self: stretch;
}

:where(.pricing-plan-cards .pricing-plan-card .features .feature-list) {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-medium, 500);
  color: var(--color-text-subtle);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

:where(.pricing-plan-cards .pricing-plan-card .features .feature-list .feature-item) {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

:where(.pricing-plan-cards .pricing-plan-card .features .feature-list .feature-item .font-icon) {
  font-size: 20px;
}

:where(.pricing-plan-cards .pricing-plan-card .features .feature-list .feature-item .feature-item-text) {
  width: 100%;
}

:where(.pricing-plan-cards .pricing-plan-card .features .feature-list .feature-item .feature-tooltip) {
  font-size: 16px;
  color: var(--color-icon-subtle);
}

:where(.pricing-plan-cards .pricing-plan-card .plan-actions-btn) {
  font-weight: 600;
  width: 100%;
}

:where(.pricing-plan-cards .pricing-plan-card.highlight-background) {
  background: linear-gradient(180deg, #8dbfff, #1d1d68 30.44%, #7300c0);
  color: var(--color-text-inverse);
}

:where(.pricing-plan-cards .pricing-plan-card.highlight-background .period-type-switch) {
  color: var(--color-text-inverse);
}

:where(.pricing-plan-cards .pricing-plan-card.highlight-background .divider) {
  border-bottom: 1px solid var(--color-outline-subtle);
}

:where(.pricing-plan-cards .pricing-plan-card.highlight-background .price-row .discount) {
  color: var(--color-text-inverse);
}

:where(.pricing-plan-cards .pricing-plan-card.highlight-background .price-row .description) {
  color: var(--color-text-inverse);
}

:where(.pricing-plan-cards .pricing-plan-card.highlight-background .feature-title) {
  font-weight: 500;
}

:where(.pricing-plan-cards .pricing-plan-card.highlight-background .feature-list) {
  font-weight: 400;
}

:where(.pricing-plan-cards .pricing-plan-card.highlight-background .price-detail) {
  color: var(--color-text-subtlest);
}

:where(.pricing-plan-cards .pricing-plan-card.highlight-background .feature-list) {
  color: var(--color-text-inverse);
}

:where(.pricing-plan-cards .pricing-plan-card.highlight-background .feature-list .font-icon) {
  color: var(--color-text-inverse);
}

:where(.pricing-plan-cards .pricing-plan-card.highlight-background .feature-list .feature-item .feature-tooltip) {
  color: var(--color-text-inverse);
}

:where(.pricing-plan-cards .pricing-plan-card.highlight-border) {
  border: 2px solid var(--color-outline-brand-default);
  background: var(--color-bg-inverse, #FFF);
  box-shadow: 0 0 32px 4px rgba(93, 205, 181, 0.3019607843);
}


/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[13].use[5]!./src/styles/globals.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
@font-face {
  font-family: "Figtree";
  src: url(/_next/static/media/Figtree-VariableFont_wght.5d84fb0e.woff2) format("woff2"), url(/_next/static/media/Figtree-VariableFont_wght.670367ae.woff) format("woff"), url(/_next/static/media/Figtree-VariableFont_wght.84403cbd.ttf) format("truetype");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url(/_next/static/media/Figtree-Italic-VariableFont_wght.fd183e1b.woff2) format("woff2"), url(/_next/static/media/Figtree-Italic-VariableFont_wght.3ee61cfa.woff) format("woff"), url(/_next/static/media/Figtree-Italic-VariableFont_wght.6b42fbc1.ttf) format("truetype");
  font-weight: 200 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url(/_next/static/media/Satoshi-Variable.d9396795.woff2) format("woff2"), url(/_next/static/media/Satoshi-Variable.4c8f7cca.woff) format("woff"), url(/_next/static/media/Satoshi-Variable.867bce6e.ttf) format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url(/_next/static/media/Satoshi-VariableItalic.7c85d340.woff2) format("woff2"), url(/_next/static/media/Satoshi-VariableItalic.8a670193.woff) format("woff"), url(/_next/static/media/Satoshi-VariableItalic.675122d2.ttf) format("truetype");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "clash-display";
  src: url(/_next/static/media/clash-display-variable.5860e2bc.woff2) format("woff2"), url(/_next/static/media/clash-display-variable.1f87593c.woff) format("woff"), url(/_next/static/media/clash-display-variable.4eb01f08.ttf) format("truetype");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --font-family-default: "Figtree", sans-serif;
  --font-clash-display: "clash-display", sans-serif;
  --font-family-body: var(--font-family-default);
  --font-family-heading: var(--font-family-default);
  --font-family-label: var(--font-family-default);
  --font-family-caption: var(--font-family-default);
  /* H1 */
  --typography-size-heading1: 64px;
  --typography-weight-heading1: 600;
  --typography-lineHeight-heading1: 80px;
  --typography-size-heading1-m: 48px;
  --typography-lineHeight-heading1-m: 64px;
  /* H2 */
  --typography-size-heading2: 48px;
  --typography-weight-heading2: 600;
  --typography-lineHeight-heading2: 64px;
  --typography-size-heading2-m: 32px;
  --typography-lineHeight-heading2-m: 40px;
  /* H3 */
  --typography-size-heading3: 32px;
  --typography-weight-heading3: 600;
  --typography-lineHeight-heading3: 40px;
  --typography-size-heading3-m: 24px;
  --typography-lineHeight-heading3-m: 32px;
  /* H4 */
  --typography-size-heading4: 24px;
  --typography-weight-heading4: 600;
  --typography-lineHeight-heading4: 32px;
  --typography-size-heading4-m: 20px;
  --typography-lineHeight-heading4-m: 24px;
  /* H5 */
  --typography-size-heading5: 20px;
  --typography-weight-heading5: 600;
  --typography-lineHeight-heading5: 24px;
  --typography-size-heading5-m: 16px;
  --typography-lineHeight-heading5-m: 20px;
  /* H6 */
  --typography-size-heading6: 16px;
  --typography-weight-heading6: 600;
  --typography-lineHeight-heading6: 24px;
  --typography-size-heading6-m: 14px;
  --typography-lineHeight-heading6-m: 20px;
  /* label */
  --typography-size-label: 12px;
  --typography-weight-label: 500;
  --typography-lineHeight-label: 16px;
  /* body1/medium */
  --typography-weight-body1-medium: 500;
  --typography-weight-body1-regular: 400;
  --typography-lineHeight-body1: 24px;
  --typography-size-body1: 16px;
  --typography-size-body1-m: 14px;
  --typography-lineHeight-body1-m: 20px;
  /* body1/regular */
  --typography-weight-body1-regular: 400;
  /* body1/semibold */
  --typography-weight-body1-semibold: 600;
  /* body2/medium */
  --typography-size-body2: 14px;
  --typography-weight-body2-medium: 500;
  --typography-lineHeight-body2: 20px;
  /* body2/regular */
  --typography-weight-body2-regular: 400;
  /* body2/semibold */
  --typography-weight-body2-semibold: 600;
  /* body3/medium */
  --typography-size-body3: 12px;
  --typography-weight-body3-medium: 500;
  --typography-lineHeight-body3: 16px;
  --typography-lineHeight-body3-m: 12px;
  /* body3/regular */
  --typography-weight-body3-regular: 400;
  /* body3/semibold */
  --typography-weight-body3-semibold: 600;
  /* body4/regular */
  --typography-size-body4: 11px;
  --typography-weight-body4-regular: 400;
  --typography-lineHeight-body4: 16px;
  --typography-lineHeight-body4-m: 12px;
  /* body4/medium */
  --typography-weight-body4-medium: 500;
  /* body4/semibold */
  --typography-weight-body4-semibold: 600;
  /* body5/medium */
  --typography-size-body5: 8px;
  --typography-lineHeight-body5: 12px;
  --typography-weight-body5-medium: 500;
  /* body5/regular */
  --typography-weight-body5-regular: 400;
  /* body5/semibold */
  --typography-weight-body5-semibold: 600;
  /* button/md */
  --typography-size-button-md: 14px;
  --typography-weight-button-md: 600;
  --typography-lineHeight-button-md: 20px;
  /* button/sm */
  --typography-size-button-sm: 12px;
  --typography-weight-button-sm: 600;
  --typography-lineHeight-button-sm: 16px;
  /* caption-1 */
  --typography-size-caption1: 14px;
  --typography-weight-caption1: 600;
  --typography-lineHeight-caption1: 20px;
  /* caption-2 */
  --typography-size-caption2: 12px;
  --typography-weight-caption2: 600;
  --typography-lineHeight-caption2: 16px;
  /* caption-3 */
  --typography-size-caption3: 8px;
  --typography-weight-caption3: 600;
  --typography-lineHeight-caption3: 12px;
}

:root {
  --color-bg-accentAqua-enabled: #1ed3ebff;
  --color-bg-accentAqua-hovered: #4bdcefff;
  --color-bg-accentAqua-subtle-enabled: #e9fbfdff;
  --color-bg-accentAqua-subtle-hovered: #d0f6fbff;
  --color-bg-accentMint-enabled: #03dac5ff;
  --color-bg-accentMint-hovered: #35e1d1ff;
  --color-bg-accentMint-subtle-enabled: #e5fbf9ff;
  --color-bg-accentMint-subtle-hovered: #cef8f4ff;
  --color-bg-accentPink-enabled: #ff47a0ff;
  --color-bg-accentPink-hovered: #ff6cb3ff;
  --color-bg-accentPink-subtle-enabled: #fff5faff;
  --color-bg-accentPink-subtle-hovered: #ffd6eaff;
  --color-bg-attention-enabled: #f9c517ff;
  --color-bg-attention-hovered: #fad145ff;
  --color-bg-attention-subtle-enabled: #fef9e8ff;
  --color-bg-attention-subtle-hovered: #fef3cdff;
  --color-bg-brand-enabled: #5dcdb5ff;
  --color-bg-brand-focused: #92decdff;
  --color-bg-brand-hovered: #92decdff;
  --color-bg-brand-subtle-enabled: #effaf8ff;
  --color-bg-brand-subtle-hovered: #cdf0e8ff;
  --color-bg-default: #f5f6f7ff;
  --color-bg-disabled: #34445a1a;
  --color-bg-hovered: #effaf8ff;
  --color-bg-info-enabled: #3697ffff;
  --color-bg-info-hovered: #5eacffff;
  --color-bg-info-subtle-enabled: #ebf5ffff;
  --color-bg-info-subtle-focused: #cce5ffff;
  --color-bg-info-subtle-hovered: #cce5ffff;
  --color-bg-inverse: #ffffffff;
  --color-bg-inverseoverlay: #ffffffcc;
  --color-bg-negative-enabled: #d22d2dff;
  --color-bg-negative-focused: #952020ff;
  --color-bg-negative-hovered: #db5757ff;
  --color-bg-negative-subtle-enabled: #fbeaeaff;
  --color-bg-negative-subtle-hovered: #f1bebeff;
  --color-bg-neutral-bold-disabled: #34445acc;
  --color-bg-neutral-bold-enabled: #253040ff;
  --color-bg-neutral-bold-focused: #1d2532ff;
  --color-bg-neutral-bold-hovered: #2f3e52ff;
  --color-bg-neutral-enabled: #ebeceeff;
  --color-bg-neutral-hovered: #c0c5ccff;
  --color-bg-neutral-subtle-enabled: #f5f6f7ff;
  --color-bg-neutral-subtle-hovered: #ebeceeff;
  --color-bg-new-enabled: #7d5efaff;
  --color-bg-new-hovered: #977efbff;
  --color-bg-new-subtle-enabled: #eeebffff;
  --color-bg-new-subtle-hovered: #e0d8fdff;
  --color-bg-positive-enabled: #28a745ff;
  --color-bg-positive-focused: #24983fff;
  --color-bg-positive-hovered: #53b96aff;
  --color-bg-positive-subtle-disabled: #9cd7a9ff;
  --color-bg-positive-subtle-enabled: #eaf6ecff;
  --color-bg-positive-subtle-hovered: #dbf0e0ff;
  --color-bg-selected: #ebeceeff;
  --color-bg-warning-enabled: #ff7e25ff;
  --color-bg-warning-hovered: #ff9851ff;
  --color-bg-warning-subtle-enabled: #fff9f5ff;
  --color-bg-warning-subtle-hovered: #ffe1ccff;
  --color-highlighter-activeline: #34445a0d;
  --color-highlighter-matcheshighlight: #34445a1a;
  --color-highlighter-textselection: #007dff33;
  --color-icon-accentAqua-bold: #1596a7ff;
  --color-icon-accentAqua-default: #1ed3ebff;
  --color-icon-accentAqua-subtle: #68e2f2ff;
  --color-icon-accentMint-bold: #029b8cff;
  --color-icon-accentMint-default: #03dac5ff;
  --color-icon-accentMint-subtle: #56e6d8ff;
  --color-icon-accentPink-bold: #b53272ff;
  --color-icon-accentPink-default: #ff47a0ff;
  --color-icon-accentPink-subtle: #ff84bfff;
  --color-icon-attention-bold: #b18c10ff;
  --color-icon-attention-default: #f9c517ff;
  --color-icon-attention-subtle: #fbd864ff;
  --color-icon-bold: #1d2532ff;
  --color-icon-brand-bold: #429281ff;
  --color-icon-brand-default: #5dcdb5ff;
  --color-icon-brand-subtle: #92decdff;
  --color-icon-default: #2f3e52ff;
  --color-icon-disabled: #34445aab;
  --color-icon-info-bold: #266bb5ff;
  --color-icon-info-default: #3697ffff;
  --color-icon-info-subtle: #78b9ffff;
  --color-icon-inverse: #ffffffff;
  --color-icon-negative-bold: #952020ff;
  --color-icon-negative-default: #d22d2dff;
  --color-icon-negative-subtle: #e17272ff;
  --color-icon-new-bold: #5943b2ff;
  --color-icon-new-default: #7d5efaff;
  --color-icon-new-subtle: #a893fcff;
  --color-icon-positive-bold: #1c7731ff;
  --color-icon-positive-default: #28a745ff;
  --color-icon-positive-subtle: #6fc482ff;
  --color-icon-positive-subtlest: #dbf0e0ff;
  --color-icon-subtle: #5d697bff;
  --color-icon-subtlest: #a2a9b3ff;
  --color-icon-warning-bold: #b5591aff;
  --color-icon-warning-default: #ff7e25ff;
  --color-icon-warning-subtle: #ffa96dff;
  --color-outline-accentAqua-bold: #1596a7ff;
  --color-outline-accentAqua-default: #1ed3ebff;
  --color-outline-accentAqua-subtle: #68e2f2ff;
  --color-outline-accentAqua-subtlest: #d0f6fbff;
  --color-outline-accentMint-bold: #029b8cff;
  --color-outline-accentMint-default: #03dac5ff;
  --color-outline-accentMint-subtle: #56e6d8ff;
  --color-outline-accentMint-subtlest: #cef8f4ff;
  --color-outline-accentPink-bold: #b53272ff;
  --color-outline-accentPink-default: #ff47a0ff;
  --color-outline-accentPink-subtle: #ff84bfff;
  --color-outline-accentPink-subtlest: #ffd6eaff;
  --color-outline-attention-bold: #b5591aff;
  --color-outline-attention-default: #ff7e25ff;
  --color-outline-attention-subtle: #ffa96dff;
  --color-outline-attention-subtlest: #ffe1ccff;
  --color-outline-bold: #2f3e52ff;
  --color-outline-brand-bold: #55bba5ff;
  --color-outline-brand-default: #5dcdb5ff;
  --color-outline-brand-subtle: #92decdff;
  --color-outline-brand-subtlest: #cdf0e8ff;
  --color-outline-default: #5d697bff;
  --color-outline-info-bold: #266bb5ff;
  --color-outline-info-default: #3697ffff;
  --color-outline-info-subtle: #78b9ffff;
  --color-outline-info-subtlest: #cce5ffff;
  --color-outline-inverse: #ffffffcc;
  --color-outline-negative-bold: #952020ff;
  --color-outline-negative-default: #d22d2dff;
  --color-outline-negative-subtle: #e17272ff;
  --color-outline-negative-subtlest: #f1bebeff;
  --color-outline-new-bold: #5943b2ff;
  --color-outline-new-default: #7d5efaff;
  --color-outline-new-subtle: #a893fcff;
  --color-outline-new-subtlest: #eeebffff;
  --color-outline-positive-bold: #1c7731ff;
  --color-outline-positive-default: #28a745ff;
  --color-outline-positive-subtle: #6fc482ff;
  --color-outline-positive-subtlest: #dbf0e0ff;
  --color-outline-subtle: #c0c5ccff;
  --color-outline-subtlest: #ebeceeff;
  --color-outline-update-bold: #b18c10ff;
  --color-outline-update-default: #f9c517ff;
  --color-outline-update-subtle: #fbd864ff;
  --color-outline-update-subtlest: #fef3cdff;
  --color-text-accentAqua-bold: #1596a7ff;
  --color-text-accentAqua-default: #1ed3ebff;
  --color-text-accentAqua-subtle: #68e2f2ff;
  --color-text-accentMint-bold: #029b8cff;
  --color-text-accentMint-default: #03dac5ff;
  --color-text-accentMint-subtle: #56e6d8ff;
  --color-text-accentPink-bold: #b53272ff;
  --color-text-accentPink-default: #ff47a0ff;
  --color-text-accentPink-subtle: #ff84bfff;
  --color-text-attention-bold: #b18c10ff;
  --color-text-attention-default: #f9c517ff;
  --color-text-attention-subtle: #fbd864ff;
  --color-text-bold: #1d2532ff;
  --color-text-brand-bold: #429281ff;
  --color-text-brand-default: #5dcdb5ff;
  --color-text-brand-subtle: #92decdff;
  --color-text-brand-subtlest: #b4e8ddff;
  --color-text-default: #2f3e52ff;
  --color-text-disabled: #34445aab;
  --color-text-info-bold: #266bb5ff;
  --color-text-info-default: #3697ffff;
  --color-text-info-subtle: #78b9ffff;
  --color-text-inverse: #ffffffff;
  --color-text-link-enabled: #3697ffff;
  --color-text-link-visited: #7256e4ff;
  --color-text-negative-bold: #952020ff;
  --color-text-negative-default: #d22d2dff;
  --color-text-negative-subtle: #e17272ff;
  --color-text-new-bold: #5943b2ff;
  --color-text-new-default: #7d5efaff;
  --color-text-new-subtle: #a893fcff;
  --color-text-positive-bold: #1c7731ff;
  --color-text-positive-default: #28a745ff;
  --color-text-positive-subtle: #6fc482ff;
  --color-text-subtle: #5d697bff;
  --color-text-subtlest: #a2a9b3ff;
  --color-text-warning-bold: #b5591aff;
  --color-text-warning-default: #ff7e25ff;
  --color-text-warning-subtle: #ffa96dff;
  --Brand-Gradient-Enabled: linear-gradient(90deg, #03DAC5 0%, #3697FF 94.67%);
  --Brand-Gradient-Hovered: linear-gradient(90deg, #35E1D1 0%, #5EACFF 94.67%);
  --Accent-Automation-Context: linear-gradient(90deg, #977EFB 0%, #5EACFF 100%);
  --Premium-Gradient: linear-gradient(180deg, #2F4B84 0%, #814FB0 100%);
}

:root {
  --elevation-shadow-level1: rgba(52, 68, 90, 0.31);
  --elevation-shadow-level2: rgba(52, 68, 90, 0.31);
  --elevation-shadow-level3: rgba(52, 68, 90, 0.31);
  --elevation-shadow-level4: rgba(52, 68, 90, 0.31);
  --elevation-shadow-level4_soft: rgba(52, 68, 90, 0.10);
}

:root {
  --font-lineHeight-none: 0px;
  --font-lineHeight-1: 1px;
  --font-lineHeight-2: 2px;
  --font-lineHeight-4: 4px;
  --font-lineHeight-6: 6px;
  --font-lineHeight-8: 8px;
  --font-lineHeight-10: 10px;
  --font-lineHeight-12: 12px;
  --font-lineHeight-14: 14px;
  --font-lineHeight-16: 16px;
  --font-lineHeight-20: 20px;
  --font-lineHeight-24: 24px;
  --font-lineHeight-32: 32px;
  --font-lineHeight-40: 40px;
  --font-lineHeight-60: 60px;
  --font-lineHeight-64: 64px;
  --font-lineHeight-80: 80px;
  --font-lineHeight-96: 96px;
  --font-lineHeight-100: 100px;
}

:root {
  --Breakpoints-frameWidth: 100vw;
  --Safezone-width: 90vw;
}
:root .d-none {
  display: none !important;
}

.color-bg-accentAqua-enabled {
  background: var(--color-bg-accentAqua-enabled);
}

.color-bg-accentAqua-hovered {
  background: var(--color-bg-accentAqua-hovered);
}

.color-bg-accentAqua-subtle-enabled {
  background: var(--color-bg-accentAqua-subtle-enabled);
}

.color-bg-accentAqua-subtle-hovered {
  background: var(--color-bg-accentAqua-subtle-hovered);
}

.color-bg-accentMint-enabled {
  background: var(--color-bg-accentMint-enabled);
}

.color-bg-accentMint-hovered {
  background: var(--color-bg-accentMint-hovered);
}

.color-bg-accentMint-subtle-enabled {
  background: var(--color-bg-accentMint-subtle-enabled);
}

.color-bg-accentMint-subtle-hovered {
  background: var(--color-bg-accentMint-subtle-hovered);
}

.color-bg-accentPink-enabled {
  background: var(--color-bg-accentPink-enabled);
}

.color-bg-accentPink-hovered {
  background: var(--color-bg-accentPink-hovered);
}

.color-bg-accentPink-subtle-enabled {
  background: var(--color-bg-accentPink-subtle-enabled);
}

.color-bg-accentPink-subtle-hovered {
  background: var(--color-bg-accentPink-subtle-hovered);
}

.color-bg-attention-enabled {
  background: var(--color-bg-attention-enabled);
}

.color-bg-attention-hovered {
  background: var(--color-bg-attention-hovered);
}

.color-bg-attention-subtle-enabled {
  background: var(--color-bg-attention-subtle-enabled);
}

.color-bg-attention-subtle-hovered {
  background: var(--color-bg-attention-subtle-hovered);
}

.color-bg-brand-enabled {
  background: var(--color-bg-brand-enabled);
}

.color-bg-brand-focused {
  background: var(--color-bg-brand-focused);
}

.color-bg-brand-hovered {
  background: var(--color-bg-brand-hovered);
}

.color-bg-brand-subtle-enabled {
  background: var(--color-bg-brand-subtle-enabled);
}

.color-bg-brand-subtle-hovered {
  background: var(--color-bg-brand-subtle-hovered);
}

.color-bg-default {
  background: var(--color-bg-default);
}

.color-bg-disabled {
  background: var(--color-bg-disabled);
}

.color-bg-hovered {
  background: var(--color-bg-hovered);
}

.color-bg-info-enabled {
  background: var(--color-bg-info-enabled);
}

.color-bg-info-hovered {
  background: var(--color-bg-info-hovered);
}

.color-bg-info-subtle-enabled {
  background: var(--color-bg-info-subtle-enabled);
}

.color-bg-info-subtle-focused {
  background: var(--color-bg-info-subtle-focused);
}

.color-bg-info-subtle-hovered {
  background: var(--color-bg-info-subtle-hovered);
}

.color-bg-inverse {
  background: var(--color-bg-inverse);
}

.color-bg-inverseoverlay {
  background: var(--color-bg-inverseoverlay);
}

.color-bg-negative-enabled {
  background: var(--color-bg-negative-enabled);
}

.color-bg-negative-focused {
  background: var(--color-bg-negative-focused);
}

.color-bg-negative-hovered {
  background: var(--color-bg-negative-hovered);
}

.color-bg-negative-subtle-enabled {
  background: var(--color-bg-negative-subtle-enabled);
}

.color-bg-negative-subtle-hovered {
  background: var(--color-bg-negative-subtle-hovered);
}

.color-bg-neutral-bold-disabled {
  background: var(--color-bg-neutral-bold-disabled);
}

.color-bg-neutral-bold-enabled {
  background: var(--color-bg-neutral-bold-enabled);
}

.color-bg-neutral-bold-focused {
  background: var(--color-bg-neutral-bold-focused);
}

.color-bg-neutral-bold-hovered {
  background: var(--color-bg-neutral-bold-hovered);
}

.color-bg-neutral-enabled {
  background: var(--color-bg-neutral-enabled);
}

.color-bg-neutral-hovered {
  background: var(--color-bg-neutral-hovered);
}

.color-bg-neutral-subtle-enabled {
  background: var(--color-bg-neutral-subtle-enabled);
}

.color-bg-neutral-subtle-hovered {
  background: var(--color-bg-neutral-subtle-hovered);
}

.color-bg-new-enabled {
  background: var(--color-bg-new-enabled);
}

.color-bg-new-hovered {
  background: var(--color-bg-new-hovered);
}

.color-bg-new-subtle-enabled {
  background: var(--color-bg-new-subtle-enabled);
}

.color-bg-new-subtle-hovered {
  background: var(--color-bg-new-subtle-hovered);
}

.color-bg-positive-enabled {
  background: var(--color-bg-positive-enabled);
}

.color-bg-positive-focused {
  background: var(--color-bg-positive-focused);
}

.color-bg-positive-hovered {
  background: var(--color-bg-positive-hovered);
}

.color-bg-positive-subtle-disabled {
  background: var(--color-bg-positive-subtle-disabled);
}

.color-bg-positive-subtle-enabled {
  background: var(--color-bg-positive-subtle-enabled);
}

.color-bg-positive-subtle-hovered {
  background: var(--color-bg-positive-subtle-hovered);
}

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

.color-bg-warning-enabled {
  background: var(--color-bg-warning-enabled);
}

.color-bg-warning-hovered {
  background: var(--color-bg-warning-hovered);
}

.color-bg-warning-subtle-enabled {
  background: var(--color-bg-warning-subtle-enabled);
}

.color-bg-warning-subtle-hovered {
  background: var(--color-bg-warning-subtle-hovered);
}

.color-highlighter-activeline {
  color: var(--color-highlighter-activeline);
}

.color-highlighter-matcheshighlight {
  color: var(--color-highlighter-matcheshighlight);
}

.color-highlighter-textselection {
  color: var(--color-highlighter-textselection);
}

.color-icon-accentAqua-bold {
  color: var(--color-icon-accentAqua-bold);
}

.color-icon-accentAqua-default {
  color: var(--color-icon-accentAqua-default);
}

.color-icon-accentAqua-subtle {
  color: var(--color-icon-accentAqua-subtle);
}

.color-icon-accentMint-bold {
  color: var(--color-icon-accentMint-bold);
}

.color-icon-accentMint-default {
  color: var(--color-icon-accentMint-default);
}

.color-icon-accentMint-subtle {
  color: var(--color-icon-accentMint-subtle);
}

.color-icon-accentPink-bold {
  color: var(--color-icon-accentPink-bold);
}

.color-icon-accentPink-default {
  color: var(--color-icon-accentPink-default);
}

.color-icon-accentPink-subtle {
  color: var(--color-icon-accentPink-subtle);
}

.color-icon-attention-bold {
  color: var(--color-icon-attention-bold);
}

.color-icon-attention-default {
  color: var(--color-icon-attention-default);
}

.color-icon-attention-subtle {
  color: var(--color-icon-attention-subtle);
}

.color-icon-bold {
  color: var(--color-icon-bold);
}

.color-icon-brand-bold {
  color: var(--color-icon-brand-bold);
}

.color-icon-brand-default {
  color: var(--color-icon-brand-default);
}

.color-icon-brand-subtle {
  color: var(--color-icon-brand-subtle);
}

.color-icon-default {
  color: var(--color-icon-default);
}

.color-icon-disabled {
  color: var(--color-icon-disabled);
}

.color-icon-info-bold {
  color: var(--color-icon-info-bold);
}

.color-icon-info-default {
  color: var(--color-icon-info-default);
}

.color-icon-info-subtle {
  color: var(--color-icon-info-subtle);
}

.color-icon-inverse {
  color: var(--color-icon-inverse);
}

.color-icon-negative-bold {
  color: var(--color-icon-negative-bold);
}

.color-icon-negative-default {
  color: var(--color-icon-negative-default);
}

.color-icon-negative-subtle {
  color: var(--color-icon-negative-subtle);
}

.color-icon-new-bold {
  color: var(--color-icon-new-bold);
}

.color-icon-new-default {
  color: var(--color-icon-new-default);
}

.color-icon-new-subtle {
  color: var(--color-icon-new-subtle);
}

.color-icon-positive-bold {
  color: var(--color-icon-positive-bold);
}

.color-icon-positive-default {
  color: var(--color-icon-positive-default);
}

.color-icon-positive-subtle {
  color: var(--color-icon-positive-subtle);
}

.color-icon-positive-subtlest {
  color: var(--color-icon-positive-subtlest);
}

.color-icon-subtle {
  color: var(--color-icon-subtle);
}

.color-icon-subtlest {
  color: var(--color-icon-subtlest);
}

.color-icon-warning-bold {
  color: var(--color-icon-warning-bold);
}

.color-icon-warning-default {
  color: var(--color-icon-warning-default);
}

.color-icon-warning-subtle {
  color: var(--color-icon-warning-subtle);
}

.color-outline-accentAqua-bold {
  color: var(--color-outline-accentAqua-bold);
}

.color-outline-accentAqua-default {
  color: var(--color-outline-accentAqua-default);
}

.color-outline-accentAqua-subtle {
  color: var(--color-outline-accentAqua-subtle);
}

.color-outline-accentAqua-subtlest {
  color: var(--color-outline-accentAqua-subtlest);
}

.color-outline-accentMint-bold {
  color: var(--color-outline-accentMint-bold);
}

.color-outline-accentMint-default {
  color: var(--color-outline-accentMint-default);
}

.color-outline-accentMint-subtle {
  color: var(--color-outline-accentMint-subtle);
}

.color-outline-accentMint-subtlest {
  color: var(--color-outline-accentMint-subtlest);
}

.color-outline-accentPink-bold {
  color: var(--color-outline-accentPink-bold);
}

.color-outline-accentPink-default {
  color: var(--color-outline-accentPink-default);
}

.color-outline-accentPink-subtle {
  color: var(--color-outline-accentPink-subtle);
}

.color-outline-accentPink-subtlest {
  color: var(--color-outline-accentPink-subtlest);
}

.color-outline-attention-bold {
  color: var(--color-outline-attention-bold);
}

.color-outline-attention-default {
  color: var(--color-outline-attention-default);
}

.color-outline-attention-subtle {
  color: var(--color-outline-attention-subtle);
}

.color-outline-attention-subtlest {
  color: var(--color-outline-attention-subtlest);
}

.color-outline-bold {
  color: var(--color-outline-bold);
}

.color-outline-brand-bold {
  color: var(--color-outline-brand-bold);
}

.color-outline-brand-default {
  color: var(--color-outline-brand-default);
}

.color-outline-brand-subtle {
  color: var(--color-outline-brand-subtle);
}

.color-outline-brand-subtlest {
  color: var(--color-outline-brand-subtlest);
}

.color-outline-default {
  color: var(--color-outline-default);
}

.color-outline-info-bold {
  color: var(--color-outline-info-bold);
}

.color-outline-info-default {
  color: var(--color-outline-info-default);
}

.color-outline-info-subtle {
  color: var(--color-outline-info-subtle);
}

.color-outline-info-subtlest {
  color: var(--color-outline-info-subtlest);
}

.color-outline-inverse {
  color: var(--color-outline-inverse);
}

.color-outline-negative-bold {
  color: var(--color-outline-negative-bold);
}

.color-outline-negative-default {
  color: var(--color-outline-negative-default);
}

.color-outline-negative-subtle {
  color: var(--color-outline-negative-subtle);
}

.color-outline-negative-subtlest {
  color: var(--color-outline-negative-subtlest);
}

.color-outline-new-bold {
  color: var(--color-outline-new-bold);
}

.color-outline-new-default {
  color: var(--color-outline-new-default);
}

.color-outline-new-subtle {
  color: var(--color-outline-new-subtle);
}

.color-outline-new-subtlest {
  color: var(--color-outline-new-subtlest);
}

.color-outline-positive-bold {
  color: var(--color-outline-positive-bold);
}

.color-outline-positive-default {
  color: var(--color-outline-positive-default);
}

.color-outline-positive-subtle {
  color: var(--color-outline-positive-subtle);
}

.color-outline-positive-subtlest {
  color: var(--color-outline-positive-subtlest);
}

.color-outline-subtle {
  color: var(--color-outline-subtle);
}

.color-outline-subtlest {
  color: var(--color-outline-subtlest);
}

.color-outline-update-bold {
  color: var(--color-outline-update-bold);
}

.color-outline-update-default {
  color: var(--color-outline-update-default);
}

.color-outline-update-subtle {
  color: var(--color-outline-update-subtle);
}

.color-outline-update-subtlest {
  color: var(--color-outline-update-subtlest);
}

.color-text-accentAqua-bold {
  color: var(--color-text-accentAqua-bold);
}

.color-text-accentAqua-default {
  color: var(--color-text-accentAqua-default);
}

.color-text-accentAqua-subtle {
  color: var(--color-text-accentAqua-subtle);
}

.color-text-accentMint-bold {
  color: var(--color-text-accentMint-bold);
}

.color-text-accentMint-default {
  color: var(--color-text-accentMint-default);
}

.color-text-accentMint-subtle {
  color: var(--color-text-accentMint-subtle);
}

.color-text-accentPink-bold {
  color: var(--color-text-accentPink-bold);
}

.color-text-accentPink-default {
  color: var(--color-text-accentPink-default);
}

.color-text-accentPink-subtle {
  color: var(--color-text-accentPink-subtle);
}

.color-text-attention-bold {
  color: var(--color-text-attention-bold);
}

.color-text-attention-default {
  color: var(--color-text-attention-default);
}

.color-text-attention-subtle {
  color: var(--color-text-attention-subtle);
}

.color-text-bold {
  color: var(--color-text-bold);
}

.color-text-brand-bold {
  color: var(--color-text-brand-bold);
}

.color-text-brand-default {
  color: var(--color-text-brand-default);
}

.color-text-brand-subtle {
  color: var(--color-text-brand-subtle);
}

.color-text-brand-subtlest {
  color: var(--color-text-brand-subtlest);
}

.color-text-default {
  color: var(--color-text-default);
}

.color-text-disabled {
  color: var(--color-text-disabled);
}

.color-text-info-bold {
  color: var(--color-text-info-bold);
}

.color-text-info-default {
  color: var(--color-text-info-default);
}

.color-text-info-subtle {
  color: var(--color-text-info-subtle);
}

.color-text-inverse {
  color: var(--color-text-inverse);
}

.color-text-link-enabled {
  color: var(--color-text-link-enabled);
}

.color-text-link-visited {
  color: var(--color-text-link-visited);
}

.color-text-negative-bold {
  color: var(--color-text-negative-bold);
}

.color-text-negative-default {
  color: var(--color-text-negative-default);
}

.color-text-negative-subtle {
  color: var(--color-text-negative-subtle);
}

.color-text-new-bold {
  color: var(--color-text-new-bold);
}

.color-text-new-default {
  color: var(--color-text-new-default);
}

.color-text-new-subtle {
  color: var(--color-text-new-subtle);
}

.color-text-positive-bold {
  color: var(--color-text-positive-bold);
}

.color-text-positive-default {
  color: var(--color-text-positive-default);
}

.color-text-positive-subtle {
  color: var(--color-text-positive-subtle);
}

.color-text-subtle {
  color: var(--color-text-subtle);
}

.color-text-subtlest {
  color: var(--color-text-subtlest);
}

.color-text-warning-bold {
  color: var(--color-text-warning-bold);
}

.color-text-warning-default {
  color: var(--color-text-warning-default);
}

.color-text-warning-subtle {
  color: var(--color-text-warning-subtle);
}

.tf-text-body-1-regular {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body1-.. */
  font-size: var(--typography-size-body1, 16px);
  line-height: var(--typography-lineHeight-body1, 24px);
  font-weight: var(--typography-weight-body1-regular, 400);
}

.tf-text-body-1-medium {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body1-.. */
  font-size: var(--typography-size-body1, 16px);
  line-height: var(--typography-lineHeight-body1, 24px);
  font-weight: var(--typography-weight-body1-medium, 500);
}

.tf-text-body-1-semibold {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body1-.. */
  font-size: var(--typography-size-body1, 16px);
  line-height: var(--typography-lineHeight-body1, 24px);
  font-weight: var(--typography-weight-body1-semibold, 600);
}

.tf-text-body-1-underlined {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body1-.. */
  font-size: var(--typography-size-body1, 16px);
  line-height: var(--typography-lineHeight-body1, 24px);
  font-weight: var(--typography-weight-body1-medium, 500);
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}

.tf-text-body-2-regular {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-regular, 400);
}

.tf-text-body-2-medium {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-medium, 500);
}

.tf-text-body-2-semibold {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-semibold, 600);
}

.tf-text-body-2-underlined {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-medium, 500);
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}

.tf-text-body-3-regular {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
}

.tf-text-body-3-medium {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-medium, 500);
}

.tf-text-body-3-semibold {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-semibold, 600);
}

.tf-text-body-3-underlined {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-medium, 500);
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}

.tf-text-body-4-regular {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body4-.. */
  font-size: var(--typography-size-body4, 11px);
  line-height: var(--typography-lineHeight-body4, 16px);
  font-weight: var(--typography-weight-body4-regular, 400);
}

.tf-text-body-4-medium {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body4-.. */
  font-size: var(--typography-size-body4, 11px);
  line-height: var(--typography-lineHeight-body4, 16px);
  font-weight: var(--typography-weight-body4-medium, 500);
}

.tf-text-body-4-semibold {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body4-.. */
  font-size: var(--typography-size-body4, 11px);
  line-height: var(--typography-lineHeight-body4, 16px);
  font-weight: var(--typography-weight-body4-semibold, 600);
}

.tf-text-body-4-underlined {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body4-.. */
  font-size: var(--typography-size-body4, 11px);
  line-height: var(--typography-lineHeight-body4, 16px);
  font-weight: var(--typography-weight-body4-medium, 500);
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}

.tf-text-body-5-regular {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body5-... */
  font-size: var(--typography-size-body5, 8px);
  line-height: var(--typography-lineHeight-body5, 12px);
  font-weight: var(--typography-weight-body5-regular, 400);
}

.tf-text-body-5-medium {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body5-... */
  font-size: var(--typography-size-body5, 8px);
  line-height: var(--typography-lineHeight-body5, 12px);
  font-weight: var(--typography-weight-body5-medium, 500);
}

.tf-text-body-5-semibold {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body5-... */
  font-size: var(--typography-size-body5, 8px);
  line-height: var(--typography-lineHeight-body5, 12px);
  font-weight: var(--typography-weight-body5-semibold, 600);
}

.tf-text-body-5-underlined {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body5-... */
  font-size: var(--typography-size-body5, 8px);
  line-height: var(--typography-lineHeight-body5, 12px);
  font-weight: var(--typography-weight-body5-medium, 500);
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}

.tf-text-h-1 {
  font-family: var(--font-family-heading), serif;
  font-style: normal;
  /* H1 */
  font-size: var(--typography-size-heading1, 64px);
  font-weight: var(--typography-weight-heading1, 600);
  line-height: var(--typography-lineHeight-heading1, 80px);
}

.tf-text-h-2 {
  font-family: var(--font-family-heading), serif;
  font-style: normal;
  /* H2 */
  font-size: var(--typography-size-heading2, 48px);
  font-weight: var(--typography-weight-heading2, 600);
  line-height: var(--typography-lineHeight-heading2, 64px);
}

.tf-text-h-3 {
  font-family: var(--font-family-heading), serif;
  font-style: normal;
  /* H3 */
  font-size: var(--typography-size-heading3, 32px);
  font-weight: var(--typography-weight-heading3, 600);
  line-height: var(--typography-lineHeight-heading3, 40px);
}

.tf-text-h-4 {
  font-family: var(--font-family-heading), serif;
  font-style: normal;
  /* H4 */
  font-size: var(--typography-size-heading4, 24px);
  font-weight: var(--typography-weight-heading4, 600);
  line-height: var(--typography-lineHeight-heading4, 32px);
}

.tf-text-h-5 {
  font-family: var(--font-family-heading), serif;
  font-style: normal;
  /* H5 */
  font-size: var(--typography-size-heading5, 20px);
  font-weight: var(--typography-weight-heading5, 600);
  line-height: var(--typography-lineHeight-heading5, 24px);
}

.tf-text-h-6 {
  font-family: var(--font-family-heading), serif;
  font-style: normal;
  /* H6 */
  font-size: var(--typography-size-heading6, 16px);
  font-weight: var(--typography-weight-heading6, 600);
  line-height: var(--typography-lineHeight-heading6, 24px);
}

.tf-btn-s-filled-brand,
.tf-btn-s-filled-brand-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-brand-enabled, #5DCDB5);
  color: var(--color-text-bold, #1D2532);
}
.tf-btn-s-filled-brand:focus-visible,
.tf-btn-s-filled-brand-uppercase:focus-visible {
  outline: none;
}
.tf-btn-s-filled-brand:is(a),
.tf-btn-s-filled-brand-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-s-filled-brand:disabled,
.tf-btn-s-filled-brand-uppercase:disabled {
  cursor: default;
}
.tf-btn-s-filled-brand:hover,
.tf-btn-s-filled-brand-uppercase:hover {
  background: var(--color-bg-brand-hovered, #92DECD);
}
.tf-btn-s-filled-brand:disabled,
.tf-btn-s-filled-brand-uppercase:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-filled-brand-uppercase {
  text-transform: uppercase;
}

.tf-btn-s-filled-brand-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  font-weight: 500;
  padding: 4px;
  /* filled bg color */
  background: var(--color-bg-brand-enabled, #5DCDB5);
  color: var(--color-text-bold, #1D2532);
}
.tf-btn-s-filled-brand-icon-only:focus-visible {
  outline: none;
}
.tf-btn-s-filled-brand-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-s-filled-brand-icon-only:disabled {
  cursor: default;
}
.tf-btn-s-filled-brand-icon-only:hover {
  background: var(--color-bg-brand-hovered, #92DECD);
}
.tf-btn-s-filled-brand-icon-only:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-filled-danger,
.tf-btn-s-filled-danger-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-danger-enabled, #D22D2D);
  color: var(--color-text-inverse, #FFF);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-s-filled-danger:focus-visible,
.tf-btn-s-filled-danger-uppercase:focus-visible {
  outline: none;
}
.tf-btn-s-filled-danger:is(a),
.tf-btn-s-filled-danger-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-s-filled-danger:disabled,
.tf-btn-s-filled-danger-uppercase:disabled {
  cursor: default;
}
.tf-btn-s-filled-danger:hover,
.tf-btn-s-filled-danger-uppercase:hover {
  background: var(--color-bg-danger-hovered, #DB5757);
}
.tf-btn-s-filled-danger:disabled,
.tf-btn-s-filled-danger-uppercase:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-filled-danger-uppercase {
  text-transform: uppercase;
}

.tf-btn-s-filled-danger-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  font-weight: 500;
  padding: 4px;
  /* filled bg color */
  background: var(--color-bg-danger-enabled, #D22D2D);
  color: var(--color-text-inverse, #FFF);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-s-filled-danger-icon-only:focus-visible {
  outline: none;
}
.tf-btn-s-filled-danger-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-s-filled-danger-icon-only:disabled {
  cursor: default;
}
.tf-btn-s-filled-danger-icon-only:hover {
  background: var(--color-bg-danger-hovered, #DB5757);
}
.tf-btn-s-filled-danger-icon-only:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-filled-neutral,
.tf-btn-s-filled-neutral-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-neutral-bold-enabled, #253040);
  color: var(--color-text-inverse, #FFF);
}
.tf-btn-s-filled-neutral:focus-visible,
.tf-btn-s-filled-neutral-uppercase:focus-visible {
  outline: none;
}
.tf-btn-s-filled-neutral:is(a),
.tf-btn-s-filled-neutral-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-s-filled-neutral:disabled,
.tf-btn-s-filled-neutral-uppercase:disabled {
  cursor: default;
}
.tf-btn-s-filled-neutral:hover,
.tf-btn-s-filled-neutral-uppercase:hover {
  background: var(--color-bg-neutral-bold-hovered, #2F3E52);
}
.tf-btn-s-filled-neutral:disabled,
.tf-btn-s-filled-neutral-uppercase:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-filled-neutral-uppercase {
  text-transform: uppercase;
}

.tf-btn-s-filled-neutral-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  font-weight: 500;
  padding: 4px;
  /* filled bg color */
  background: var(--color-bg-neutral-bold-enabled, #253040);
  color: var(--color-text-inverse, #FFF);
}
.tf-btn-s-filled-neutral-icon-only:focus-visible {
  outline: none;
}
.tf-btn-s-filled-neutral-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-s-filled-neutral-icon-only:disabled {
  cursor: default;
}
.tf-btn-s-filled-neutral-icon-only:hover {
  background: var(--color-bg-neutral-bold-hovered, #2F3E52);
}
.tf-btn-s-filled-neutral-icon-only:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-filled-success,
.tf-btn-s-filled-success-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-success-enabled, #28A745);
  color: var(--color-text-inverse, #FFF);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-s-filled-success:focus-visible,
.tf-btn-s-filled-success-uppercase:focus-visible {
  outline: none;
}
.tf-btn-s-filled-success:is(a),
.tf-btn-s-filled-success-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-s-filled-success:disabled,
.tf-btn-s-filled-success-uppercase:disabled {
  cursor: default;
}
.tf-btn-s-filled-success:hover,
.tf-btn-s-filled-success-uppercase:hover {
  background: var(--color-bg-success-hovered, #53B96A);
}
.tf-btn-s-filled-success:disabled,
.tf-btn-s-filled-success-uppercase:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-filled-success-uppercase {
  text-transform: uppercase;
}

.tf-btn-s-filled-success-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  font-weight: 500;
  padding: 4px;
  /* filled bg color */
  background: var(--color-bg-success-enabled, #28A745);
  color: var(--color-text-inverse, #FFF);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-s-filled-success-icon-only:focus-visible {
  outline: none;
}
.tf-btn-s-filled-success-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-s-filled-success-icon-only:disabled {
  cursor: default;
}
.tf-btn-s-filled-success-icon-only:hover {
  background: var(--color-bg-success-hovered, #53B96A);
}
.tf-btn-s-filled-success-icon-only:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-filled-upgrade,
.tf-btn-s-filled-upgrade-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--brand-gradient-enabled, linear-gradient(90deg, #03DAC5 0%, #3697FF 94.67%));
  color: var(--color-text-inverse, #FFF);
  text-transform: none;
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-s-filled-upgrade:focus-visible,
.tf-btn-s-filled-upgrade-uppercase:focus-visible {
  outline: none;
}
.tf-btn-s-filled-upgrade:is(a),
.tf-btn-s-filled-upgrade-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-s-filled-upgrade:disabled,
.tf-btn-s-filled-upgrade-uppercase:disabled {
  cursor: default;
}
.tf-btn-s-filled-upgrade:hover,
.tf-btn-s-filled-upgrade-uppercase:hover {
  background: var(--brand-gradient-hovered, linear-gradient(90deg, #35E1D1 0%, #5EACFF 94.67%));
}
.tf-btn-s-filled-upgrade:disabled,
.tf-btn-s-filled-upgrade-uppercase:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-filled-upgrade-uppercase {
  text-transform: uppercase;
}

.tf-btn-s-filled-upgrade-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  font-weight: 500;
  padding: 4px;
  /* filled bg color */
  background: var(--brand-gradient-enabled, linear-gradient(90deg, #03DAC5 0%, #3697FF 94.67%));
  color: var(--color-text-inverse, #FFF);
  text-transform: none;
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-s-filled-upgrade-icon-only:focus-visible {
  outline: none;
}
.tf-btn-s-filled-upgrade-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-s-filled-upgrade-icon-only:disabled {
  cursor: default;
}
.tf-btn-s-filled-upgrade-icon-only:hover {
  background: var(--brand-gradient-hovered, linear-gradient(90deg, #35E1D1 0%, #5EACFF 94.67%));
}
.tf-btn-s-filled-upgrade-icon-only:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-filled-brand,
.tf-btn-sm-filled-brand-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-brand-enabled, #5DCDB5);
  color: var(--color-text-bold, #1D2532);
}
.tf-btn-sm-filled-brand:focus-visible,
.tf-btn-sm-filled-brand-uppercase:focus-visible {
  outline: none;
}
.tf-btn-sm-filled-brand:is(a),
.tf-btn-sm-filled-brand-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-sm-filled-brand:disabled,
.tf-btn-sm-filled-brand-uppercase:disabled {
  cursor: default;
}
.tf-btn-sm-filled-brand:hover,
.tf-btn-sm-filled-brand-uppercase:hover {
  background: var(--color-bg-brand-hovered, #92DECD);
}
.tf-btn-sm-filled-brand:disabled,
.tf-btn-sm-filled-brand-uppercase:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-filled-brand-uppercase {
  text-transform: uppercase;
}

.tf-btn-sm-filled-brand-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  font-weight: 500;
  padding: 4px;
  /* filled bg color */
  background: var(--color-bg-brand-enabled, #5DCDB5);
  color: var(--color-text-bold, #1D2532);
}
.tf-btn-sm-filled-brand-icon-only:focus-visible {
  outline: none;
}
.tf-btn-sm-filled-brand-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-sm-filled-brand-icon-only:disabled {
  cursor: default;
}
.tf-btn-sm-filled-brand-icon-only:hover {
  background: var(--color-bg-brand-hovered, #92DECD);
}
.tf-btn-sm-filled-brand-icon-only:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-filled-danger,
.tf-btn-sm-filled-danger-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-danger-enabled, #D22D2D);
  color: var(--color-text-inverse, #FFF);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-sm-filled-danger:focus-visible,
.tf-btn-sm-filled-danger-uppercase:focus-visible {
  outline: none;
}
.tf-btn-sm-filled-danger:is(a),
.tf-btn-sm-filled-danger-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-sm-filled-danger:disabled,
.tf-btn-sm-filled-danger-uppercase:disabled {
  cursor: default;
}
.tf-btn-sm-filled-danger:hover,
.tf-btn-sm-filled-danger-uppercase:hover {
  background: var(--color-bg-danger-hovered, #DB5757);
}
.tf-btn-sm-filled-danger:disabled,
.tf-btn-sm-filled-danger-uppercase:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-filled-danger-uppercase {
  text-transform: uppercase;
}

.tf-btn-sm-filled-danger-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  font-weight: 500;
  padding: 4px;
  /* filled bg color */
  background: var(--color-bg-danger-enabled, #D22D2D);
  color: var(--color-text-inverse, #FFF);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-sm-filled-danger-icon-only:focus-visible {
  outline: none;
}
.tf-btn-sm-filled-danger-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-sm-filled-danger-icon-only:disabled {
  cursor: default;
}
.tf-btn-sm-filled-danger-icon-only:hover {
  background: var(--color-bg-danger-hovered, #DB5757);
}
.tf-btn-sm-filled-danger-icon-only:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-filled-neutral,
.tf-btn-sm-filled-neutral-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-neutral-bold-enabled, #253040);
  color: var(--color-text-inverse, #FFF);
}
.tf-btn-sm-filled-neutral:focus-visible,
.tf-btn-sm-filled-neutral-uppercase:focus-visible {
  outline: none;
}
.tf-btn-sm-filled-neutral:is(a),
.tf-btn-sm-filled-neutral-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-sm-filled-neutral:disabled,
.tf-btn-sm-filled-neutral-uppercase:disabled {
  cursor: default;
}
.tf-btn-sm-filled-neutral:hover,
.tf-btn-sm-filled-neutral-uppercase:hover {
  background: var(--color-bg-neutral-bold-hovered, #2F3E52);
}
.tf-btn-sm-filled-neutral:disabled,
.tf-btn-sm-filled-neutral-uppercase:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-filled-neutral-uppercase {
  text-transform: uppercase;
}

.tf-btn-sm-filled-neutral-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  font-weight: 500;
  padding: 4px;
  /* filled bg color */
  background: var(--color-bg-neutral-bold-enabled, #253040);
  color: var(--color-text-inverse, #FFF);
}
.tf-btn-sm-filled-neutral-icon-only:focus-visible {
  outline: none;
}
.tf-btn-sm-filled-neutral-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-sm-filled-neutral-icon-only:disabled {
  cursor: default;
}
.tf-btn-sm-filled-neutral-icon-only:hover {
  background: var(--color-bg-neutral-bold-hovered, #2F3E52);
}
.tf-btn-sm-filled-neutral-icon-only:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-filled-success,
.tf-btn-sm-filled-success-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-success-enabled, #28A745);
  color: var(--color-text-inverse, #FFF);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-sm-filled-success:focus-visible,
.tf-btn-sm-filled-success-uppercase:focus-visible {
  outline: none;
}
.tf-btn-sm-filled-success:is(a),
.tf-btn-sm-filled-success-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-sm-filled-success:disabled,
.tf-btn-sm-filled-success-uppercase:disabled {
  cursor: default;
}
.tf-btn-sm-filled-success:hover,
.tf-btn-sm-filled-success-uppercase:hover {
  background: var(--color-bg-success-hovered, #53B96A);
}
.tf-btn-sm-filled-success:disabled,
.tf-btn-sm-filled-success-uppercase:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-filled-success-uppercase {
  text-transform: uppercase;
}

.tf-btn-sm-filled-success-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  font-weight: 500;
  padding: 4px;
  /* filled bg color */
  background: var(--color-bg-success-enabled, #28A745);
  color: var(--color-text-inverse, #FFF);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-sm-filled-success-icon-only:focus-visible {
  outline: none;
}
.tf-btn-sm-filled-success-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-sm-filled-success-icon-only:disabled {
  cursor: default;
}
.tf-btn-sm-filled-success-icon-only:hover {
  background: var(--color-bg-success-hovered, #53B96A);
}
.tf-btn-sm-filled-success-icon-only:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-filled-upgrade,
.tf-btn-sm-filled-upgrade-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--brand-gradient-enabled, linear-gradient(90deg, #03DAC5 0%, #3697FF 94.67%));
  color: var(--color-text-inverse, #FFF);
  text-transform: none;
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-sm-filled-upgrade:focus-visible,
.tf-btn-sm-filled-upgrade-uppercase:focus-visible {
  outline: none;
}
.tf-btn-sm-filled-upgrade:is(a),
.tf-btn-sm-filled-upgrade-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-sm-filled-upgrade:disabled,
.tf-btn-sm-filled-upgrade-uppercase:disabled {
  cursor: default;
}
.tf-btn-sm-filled-upgrade:hover,
.tf-btn-sm-filled-upgrade-uppercase:hover {
  background: var(--brand-gradient-hovered, linear-gradient(90deg, #35E1D1 0%, #5EACFF 94.67%));
}
.tf-btn-sm-filled-upgrade:disabled,
.tf-btn-sm-filled-upgrade-uppercase:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-filled-upgrade-uppercase {
  text-transform: uppercase;
}

.tf-btn-sm-filled-upgrade-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  font-weight: 500;
  padding: 4px;
  /* filled bg color */
  background: var(--brand-gradient-enabled, linear-gradient(90deg, #03DAC5 0%, #3697FF 94.67%));
  color: var(--color-text-inverse, #FFF);
  text-transform: none;
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-sm-filled-upgrade-icon-only:focus-visible {
  outline: none;
}
.tf-btn-sm-filled-upgrade-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-sm-filled-upgrade-icon-only:disabled {
  cursor: default;
}
.tf-btn-sm-filled-upgrade-icon-only:hover {
  background: var(--brand-gradient-hovered, linear-gradient(90deg, #35E1D1 0%, #5EACFF 94.67%));
}
.tf-btn-sm-filled-upgrade-icon-only:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-filled-brand,
.tf-btn-md-filled-brand-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-brand-enabled, #5DCDB5);
  color: var(--color-text-bold, #1D2532);
}
.tf-btn-md-filled-brand:focus-visible,
.tf-btn-md-filled-brand-uppercase:focus-visible {
  outline: none;
}
.tf-btn-md-filled-brand:is(a),
.tf-btn-md-filled-brand-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-md-filled-brand:disabled,
.tf-btn-md-filled-brand-uppercase:disabled {
  cursor: default;
}
.tf-btn-md-filled-brand:hover,
.tf-btn-md-filled-brand-uppercase:hover {
  background: var(--color-bg-brand-hovered, #92DECD);
}
.tf-btn-md-filled-brand:disabled,
.tf-btn-md-filled-brand-uppercase:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-filled-brand-uppercase {
  text-transform: uppercase;
}

.tf-btn-md-filled-brand-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  font-weight: 500;
  padding: 4px;
  /* filled bg color */
  background: var(--color-bg-brand-enabled, #5DCDB5);
  color: var(--color-text-bold, #1D2532);
}
.tf-btn-md-filled-brand-icon-only:focus-visible {
  outline: none;
}
.tf-btn-md-filled-brand-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-md-filled-brand-icon-only:disabled {
  cursor: default;
}
.tf-btn-md-filled-brand-icon-only:hover {
  background: var(--color-bg-brand-hovered, #92DECD);
}
.tf-btn-md-filled-brand-icon-only:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-filled-danger,
.tf-btn-md-filled-danger-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-danger-enabled, #D22D2D);
  color: var(--color-text-inverse, #FFF);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-md-filled-danger:focus-visible,
.tf-btn-md-filled-danger-uppercase:focus-visible {
  outline: none;
}
.tf-btn-md-filled-danger:is(a),
.tf-btn-md-filled-danger-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-md-filled-danger:disabled,
.tf-btn-md-filled-danger-uppercase:disabled {
  cursor: default;
}
.tf-btn-md-filled-danger:hover,
.tf-btn-md-filled-danger-uppercase:hover {
  background: var(--color-bg-danger-hovered, #DB5757);
}
.tf-btn-md-filled-danger:disabled,
.tf-btn-md-filled-danger-uppercase:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-filled-danger-uppercase {
  text-transform: uppercase;
}

.tf-btn-md-filled-danger-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  font-weight: 500;
  padding: 4px;
  /* filled bg color */
  background: var(--color-bg-danger-enabled, #D22D2D);
  color: var(--color-text-inverse, #FFF);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-md-filled-danger-icon-only:focus-visible {
  outline: none;
}
.tf-btn-md-filled-danger-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-md-filled-danger-icon-only:disabled {
  cursor: default;
}
.tf-btn-md-filled-danger-icon-only:hover {
  background: var(--color-bg-danger-hovered, #DB5757);
}
.tf-btn-md-filled-danger-icon-only:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-filled-neutral,
.tf-btn-md-filled-neutral-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-neutral-bold-enabled, #253040);
  color: var(--color-text-inverse, #FFF);
}
.tf-btn-md-filled-neutral:focus-visible,
.tf-btn-md-filled-neutral-uppercase:focus-visible {
  outline: none;
}
.tf-btn-md-filled-neutral:is(a),
.tf-btn-md-filled-neutral-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-md-filled-neutral:disabled,
.tf-btn-md-filled-neutral-uppercase:disabled {
  cursor: default;
}
.tf-btn-md-filled-neutral:hover,
.tf-btn-md-filled-neutral-uppercase:hover {
  background: var(--color-bg-neutral-bold-hovered, #2F3E52);
}
.tf-btn-md-filled-neutral:disabled,
.tf-btn-md-filled-neutral-uppercase:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-filled-neutral-uppercase {
  text-transform: uppercase;
}

.tf-btn-md-filled-neutral-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  font-weight: 500;
  padding: 4px;
  /* filled bg color */
  background: var(--color-bg-neutral-bold-enabled, #253040);
  color: var(--color-text-inverse, #FFF);
}
.tf-btn-md-filled-neutral-icon-only:focus-visible {
  outline: none;
}
.tf-btn-md-filled-neutral-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-md-filled-neutral-icon-only:disabled {
  cursor: default;
}
.tf-btn-md-filled-neutral-icon-only:hover {
  background: var(--color-bg-neutral-bold-hovered, #2F3E52);
}
.tf-btn-md-filled-neutral-icon-only:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-filled-success,
.tf-btn-md-filled-success-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-success-enabled, #28A745);
  color: var(--color-text-inverse, #FFF);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-md-filled-success:focus-visible,
.tf-btn-md-filled-success-uppercase:focus-visible {
  outline: none;
}
.tf-btn-md-filled-success:is(a),
.tf-btn-md-filled-success-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-md-filled-success:disabled,
.tf-btn-md-filled-success-uppercase:disabled {
  cursor: default;
}
.tf-btn-md-filled-success:hover,
.tf-btn-md-filled-success-uppercase:hover {
  background: var(--color-bg-success-hovered, #53B96A);
}
.tf-btn-md-filled-success:disabled,
.tf-btn-md-filled-success-uppercase:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-filled-success-uppercase {
  text-transform: uppercase;
}

.tf-btn-md-filled-success-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  font-weight: 500;
  padding: 4px;
  /* filled bg color */
  background: var(--color-bg-success-enabled, #28A745);
  color: var(--color-text-inverse, #FFF);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-md-filled-success-icon-only:focus-visible {
  outline: none;
}
.tf-btn-md-filled-success-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-md-filled-success-icon-only:disabled {
  cursor: default;
}
.tf-btn-md-filled-success-icon-only:hover {
  background: var(--color-bg-success-hovered, #53B96A);
}
.tf-btn-md-filled-success-icon-only:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-filled-upgrade,
.tf-btn-md-filled-upgrade-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--brand-gradient-enabled, linear-gradient(90deg, #03DAC5 0%, #3697FF 94.67%));
  color: var(--color-text-inverse, #FFF);
  text-transform: none;
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-md-filled-upgrade:focus-visible,
.tf-btn-md-filled-upgrade-uppercase:focus-visible {
  outline: none;
}
.tf-btn-md-filled-upgrade:is(a),
.tf-btn-md-filled-upgrade-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-md-filled-upgrade:disabled,
.tf-btn-md-filled-upgrade-uppercase:disabled {
  cursor: default;
}
.tf-btn-md-filled-upgrade:hover,
.tf-btn-md-filled-upgrade-uppercase:hover {
  background: var(--brand-gradient-hovered, linear-gradient(90deg, #35E1D1 0%, #5EACFF 94.67%));
}
.tf-btn-md-filled-upgrade:disabled,
.tf-btn-md-filled-upgrade-uppercase:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-filled-upgrade-uppercase {
  text-transform: uppercase;
}

.tf-btn-md-filled-upgrade-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  font-weight: 500;
  padding: 4px;
  /* filled bg color */
  background: var(--brand-gradient-enabled, linear-gradient(90deg, #03DAC5 0%, #3697FF 94.67%));
  color: var(--color-text-inverse, #FFF);
  text-transform: none;
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-md-filled-upgrade-icon-only:focus-visible {
  outline: none;
}
.tf-btn-md-filled-upgrade-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-md-filled-upgrade-icon-only:disabled {
  cursor: default;
}
.tf-btn-md-filled-upgrade-icon-only:hover {
  background: var(--brand-gradient-hovered, linear-gradient(90deg, #35E1D1 0%, #5EACFF 94.67%));
}
.tf-btn-md-filled-upgrade-icon-only:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-outlined-brand,
.tf-btn-s-outlined-brand-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  background: none;
  padding: 7px 16px;
  /* outlined border color */
  border: 1px solid var(--color-outline-brand-default, #5DCDB5);
  color: var(--color-text-brand-default, #5DCDB5);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-s-outlined-brand:focus-visible,
.tf-btn-s-outlined-brand-uppercase:focus-visible {
  outline: none;
}
.tf-btn-s-outlined-brand:is(a),
.tf-btn-s-outlined-brand-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-s-outlined-brand:disabled,
.tf-btn-s-outlined-brand-uppercase:disabled {
  cursor: default;
}
.tf-btn-s-outlined-brand:hover,
.tf-btn-s-outlined-brand-uppercase:hover {
  color: var(--color-text-brand-subtle, #92DECD);
}
.tf-btn-s-outlined-brand:disabled,
.tf-btn-s-outlined-brand-uppercase:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-outlined-brand-uppercase {
  text-transform: uppercase;
}

.tf-btn-s-outlined-brand-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  padding: 4px;
  /* outlined border color */
  border: 1px solid var(--color-outline-brand-default, #5DCDB5);
  color: var(--color-text-brand-default, #5DCDB5);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-s-outlined-brand-icon-only:focus-visible {
  outline: none;
}
.tf-btn-s-outlined-brand-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-s-outlined-brand-icon-only:disabled {
  cursor: default;
}
.tf-btn-s-outlined-brand-icon-only:hover {
  color: var(--color-text-brand-subtle, #92DECD);
}
.tf-btn-s-outlined-brand-icon-only:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-outlined-danger,
.tf-btn-s-outlined-danger-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  background: none;
  padding: 7px 16px;
  /* outlined border color */
  border: 1px solid var(--color-outline-danger-default, #D22D2D);
  color: var(--color-text-danger-default, #D22D2D);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-s-outlined-danger:focus-visible,
.tf-btn-s-outlined-danger-uppercase:focus-visible {
  outline: none;
}
.tf-btn-s-outlined-danger:is(a),
.tf-btn-s-outlined-danger-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-s-outlined-danger:disabled,
.tf-btn-s-outlined-danger-uppercase:disabled {
  cursor: default;
}
.tf-btn-s-outlined-danger:hover,
.tf-btn-s-outlined-danger-uppercase:hover {
  border: 1px solid var(--color-outline-danger-subtle, #E17272);
  color: var(--color-text-danger-subtle, #E17272);
}
.tf-btn-s-outlined-danger:disabled,
.tf-btn-s-outlined-danger-uppercase:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-outlined-danger-uppercase {
  text-transform: uppercase;
}

.tf-btn-s-outlined-danger-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  padding: 4px;
  /* outlined border color */
  border: 1px solid var(--color-outline-danger-default, #D22D2D);
  color: var(--color-text-danger-default, #D22D2D);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-s-outlined-danger-icon-only:focus-visible {
  outline: none;
}
.tf-btn-s-outlined-danger-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-s-outlined-danger-icon-only:disabled {
  cursor: default;
}
.tf-btn-s-outlined-danger-icon-only:hover {
  border: 1px solid var(--color-outline-danger-subtle, #E17272);
  color: var(--color-text-danger-subtle, #E17272);
}
.tf-btn-s-outlined-danger-icon-only:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-outlined-neutral,
.tf-btn-s-outlined-neutral-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  background: none;
  padding: 7px 16px;
  /* outlined border color */
  border: 1px solid var(--color-outline-bold, #2F3E52);
  color: var(--color-text-default, #2F3E52);
}
.tf-btn-s-outlined-neutral:focus-visible,
.tf-btn-s-outlined-neutral-uppercase:focus-visible {
  outline: none;
}
.tf-btn-s-outlined-neutral:is(a),
.tf-btn-s-outlined-neutral-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-s-outlined-neutral:disabled,
.tf-btn-s-outlined-neutral-uppercase:disabled {
  cursor: default;
}
.tf-btn-s-outlined-neutral:hover,
.tf-btn-s-outlined-neutral-uppercase:hover {
  border: 1px solid var(--color-outline-default, #5D697B);
  color: var(--color-text-subtle, #5D697B);
}
.tf-btn-s-outlined-neutral:disabled,
.tf-btn-s-outlined-neutral-uppercase:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-outlined-neutral-uppercase {
  text-transform: uppercase;
}

.tf-btn-s-outlined-neutral-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  padding: 4px;
  /* outlined border color */
  border: 1px solid var(--color-outline-bold, #2F3E52);
  color: var(--color-text-default, #2F3E52);
}
.tf-btn-s-outlined-neutral-icon-only:focus-visible {
  outline: none;
}
.tf-btn-s-outlined-neutral-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-s-outlined-neutral-icon-only:disabled {
  cursor: default;
}
.tf-btn-s-outlined-neutral-icon-only:hover {
  border: 1px solid var(--color-outline-default, #5D697B);
  color: var(--color-text-subtle, #5D697B);
}
.tf-btn-s-outlined-neutral-icon-only:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-outlined-success,
.tf-btn-s-outlined-success-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  background: none;
  padding: 7px 16px;
  /* outlined border color */
  border: 1px solid var(--color-outline-positive-default);
  color: var(--color-outline-positive-default);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-s-outlined-success:focus-visible,
.tf-btn-s-outlined-success-uppercase:focus-visible {
  outline: none;
}
.tf-btn-s-outlined-success:is(a),
.tf-btn-s-outlined-success-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-s-outlined-success:disabled,
.tf-btn-s-outlined-success-uppercase:disabled {
  cursor: default;
}
.tf-btn-s-outlined-success:hover,
.tf-btn-s-outlined-success-uppercase:hover {
  border-color: var(--color-outline-positive-subtle);
  color: var(--color-text-positive-subtle);
}
.tf-btn-s-outlined-success:disabled,
.tf-btn-s-outlined-success-uppercase:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-outlined-success-uppercase {
  text-transform: uppercase;
}

.tf-btn-s-outlined-success-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  padding: 4px;
  /* outlined border color */
  border: 1px solid var(--color-outline-positive-default);
  color: var(--color-outline-positive-default);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-s-outlined-success-icon-only:focus-visible {
  outline: none;
}
.tf-btn-s-outlined-success-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-s-outlined-success-icon-only:disabled {
  cursor: default;
}
.tf-btn-s-outlined-success-icon-only:hover {
  border-color: var(--color-outline-positive-subtle);
  color: var(--color-text-positive-subtle);
}
.tf-btn-s-outlined-success-icon-only:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-outlined-brand,
.tf-btn-sm-outlined-brand-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  background: none;
  padding: 7px 16px;
  /* outlined border color */
  border: 1px solid var(--color-outline-brand-default, #5DCDB5);
  color: var(--color-text-brand-default, #5DCDB5);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-sm-outlined-brand:focus-visible,
.tf-btn-sm-outlined-brand-uppercase:focus-visible {
  outline: none;
}
.tf-btn-sm-outlined-brand:is(a),
.tf-btn-sm-outlined-brand-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-sm-outlined-brand:disabled,
.tf-btn-sm-outlined-brand-uppercase:disabled {
  cursor: default;
}
.tf-btn-sm-outlined-brand:hover,
.tf-btn-sm-outlined-brand-uppercase:hover {
  color: var(--color-text-brand-subtle, #92DECD);
}
.tf-btn-sm-outlined-brand:disabled,
.tf-btn-sm-outlined-brand-uppercase:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-outlined-brand-uppercase {
  text-transform: uppercase;
}

.tf-btn-sm-outlined-brand-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  padding: 4px;
  /* outlined border color */
  border: 1px solid var(--color-outline-brand-default, #5DCDB5);
  color: var(--color-text-brand-default, #5DCDB5);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-sm-outlined-brand-icon-only:focus-visible {
  outline: none;
}
.tf-btn-sm-outlined-brand-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-sm-outlined-brand-icon-only:disabled {
  cursor: default;
}
.tf-btn-sm-outlined-brand-icon-only:hover {
  color: var(--color-text-brand-subtle, #92DECD);
}
.tf-btn-sm-outlined-brand-icon-only:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-outlined-danger,
.tf-btn-sm-outlined-danger-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  background: none;
  padding: 7px 16px;
  /* outlined border color */
  border: 1px solid var(--color-outline-danger-default, #D22D2D);
  color: var(--color-text-danger-default, #D22D2D);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-sm-outlined-danger:focus-visible,
.tf-btn-sm-outlined-danger-uppercase:focus-visible {
  outline: none;
}
.tf-btn-sm-outlined-danger:is(a),
.tf-btn-sm-outlined-danger-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-sm-outlined-danger:disabled,
.tf-btn-sm-outlined-danger-uppercase:disabled {
  cursor: default;
}
.tf-btn-sm-outlined-danger:hover,
.tf-btn-sm-outlined-danger-uppercase:hover {
  border: 1px solid var(--color-outline-danger-subtle, #E17272);
  color: var(--color-text-danger-subtle, #E17272);
}
.tf-btn-sm-outlined-danger:disabled,
.tf-btn-sm-outlined-danger-uppercase:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-outlined-danger-uppercase {
  text-transform: uppercase;
}

.tf-btn-sm-outlined-danger-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  padding: 4px;
  /* outlined border color */
  border: 1px solid var(--color-outline-danger-default, #D22D2D);
  color: var(--color-text-danger-default, #D22D2D);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-sm-outlined-danger-icon-only:focus-visible {
  outline: none;
}
.tf-btn-sm-outlined-danger-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-sm-outlined-danger-icon-only:disabled {
  cursor: default;
}
.tf-btn-sm-outlined-danger-icon-only:hover {
  border: 1px solid var(--color-outline-danger-subtle, #E17272);
  color: var(--color-text-danger-subtle, #E17272);
}
.tf-btn-sm-outlined-danger-icon-only:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-outlined-neutral,
.tf-btn-sm-outlined-neutral-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  background: none;
  padding: 7px 16px;
  /* outlined border color */
  border: 1px solid var(--color-outline-bold, #2F3E52);
  color: var(--color-text-default, #2F3E52);
}
.tf-btn-sm-outlined-neutral:focus-visible,
.tf-btn-sm-outlined-neutral-uppercase:focus-visible {
  outline: none;
}
.tf-btn-sm-outlined-neutral:is(a),
.tf-btn-sm-outlined-neutral-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-sm-outlined-neutral:disabled,
.tf-btn-sm-outlined-neutral-uppercase:disabled {
  cursor: default;
}
.tf-btn-sm-outlined-neutral:hover,
.tf-btn-sm-outlined-neutral-uppercase:hover {
  border: 1px solid var(--color-outline-default, #5D697B);
  color: var(--color-text-subtle, #5D697B);
}
.tf-btn-sm-outlined-neutral:disabled,
.tf-btn-sm-outlined-neutral-uppercase:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-outlined-neutral-uppercase {
  text-transform: uppercase;
}

.tf-btn-sm-outlined-neutral-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  padding: 4px;
  /* outlined border color */
  border: 1px solid var(--color-outline-bold, #2F3E52);
  color: var(--color-text-default, #2F3E52);
}
.tf-btn-sm-outlined-neutral-icon-only:focus-visible {
  outline: none;
}
.tf-btn-sm-outlined-neutral-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-sm-outlined-neutral-icon-only:disabled {
  cursor: default;
}
.tf-btn-sm-outlined-neutral-icon-only:hover {
  border: 1px solid var(--color-outline-default, #5D697B);
  color: var(--color-text-subtle, #5D697B);
}
.tf-btn-sm-outlined-neutral-icon-only:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-outlined-success,
.tf-btn-sm-outlined-success-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  background: none;
  padding: 7px 16px;
  /* outlined border color */
  border: 1px solid var(--color-outline-positive-default);
  color: var(--color-outline-positive-default);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-sm-outlined-success:focus-visible,
.tf-btn-sm-outlined-success-uppercase:focus-visible {
  outline: none;
}
.tf-btn-sm-outlined-success:is(a),
.tf-btn-sm-outlined-success-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-sm-outlined-success:disabled,
.tf-btn-sm-outlined-success-uppercase:disabled {
  cursor: default;
}
.tf-btn-sm-outlined-success:hover,
.tf-btn-sm-outlined-success-uppercase:hover {
  border-color: var(--color-outline-positive-subtle);
  color: var(--color-text-positive-subtle);
}
.tf-btn-sm-outlined-success:disabled,
.tf-btn-sm-outlined-success-uppercase:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-outlined-success-uppercase {
  text-transform: uppercase;
}

.tf-btn-sm-outlined-success-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  padding: 4px;
  /* outlined border color */
  border: 1px solid var(--color-outline-positive-default);
  color: var(--color-outline-positive-default);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-sm-outlined-success-icon-only:focus-visible {
  outline: none;
}
.tf-btn-sm-outlined-success-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-sm-outlined-success-icon-only:disabled {
  cursor: default;
}
.tf-btn-sm-outlined-success-icon-only:hover {
  border-color: var(--color-outline-positive-subtle);
  color: var(--color-text-positive-subtle);
}
.tf-btn-sm-outlined-success-icon-only:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-outlined-brand,
.tf-btn-md-outlined-brand-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  background: none;
  padding: 7px 16px;
  /* outlined border color */
  border: 1px solid var(--color-outline-brand-default, #5DCDB5);
  color: var(--color-text-brand-default, #5DCDB5);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-md-outlined-brand:focus-visible,
.tf-btn-md-outlined-brand-uppercase:focus-visible {
  outline: none;
}
.tf-btn-md-outlined-brand:is(a),
.tf-btn-md-outlined-brand-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-md-outlined-brand:disabled,
.tf-btn-md-outlined-brand-uppercase:disabled {
  cursor: default;
}
.tf-btn-md-outlined-brand:hover,
.tf-btn-md-outlined-brand-uppercase:hover {
  color: var(--color-text-brand-subtle, #92DECD);
}
.tf-btn-md-outlined-brand:disabled,
.tf-btn-md-outlined-brand-uppercase:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-outlined-brand-uppercase {
  text-transform: uppercase;
}

.tf-btn-md-outlined-brand-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  padding: 4px;
  /* outlined border color */
  border: 1px solid var(--color-outline-brand-default, #5DCDB5);
  color: var(--color-text-brand-default, #5DCDB5);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-md-outlined-brand-icon-only:focus-visible {
  outline: none;
}
.tf-btn-md-outlined-brand-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-md-outlined-brand-icon-only:disabled {
  cursor: default;
}
.tf-btn-md-outlined-brand-icon-only:hover {
  color: var(--color-text-brand-subtle, #92DECD);
}
.tf-btn-md-outlined-brand-icon-only:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-outlined-danger,
.tf-btn-md-outlined-danger-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  background: none;
  padding: 7px 16px;
  /* outlined border color */
  border: 1px solid var(--color-outline-danger-default, #D22D2D);
  color: var(--color-text-danger-default, #D22D2D);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-md-outlined-danger:focus-visible,
.tf-btn-md-outlined-danger-uppercase:focus-visible {
  outline: none;
}
.tf-btn-md-outlined-danger:is(a),
.tf-btn-md-outlined-danger-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-md-outlined-danger:disabled,
.tf-btn-md-outlined-danger-uppercase:disabled {
  cursor: default;
}
.tf-btn-md-outlined-danger:hover,
.tf-btn-md-outlined-danger-uppercase:hover {
  border: 1px solid var(--color-outline-danger-subtle, #E17272);
  color: var(--color-text-danger-subtle, #E17272);
}
.tf-btn-md-outlined-danger:disabled,
.tf-btn-md-outlined-danger-uppercase:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-outlined-danger-uppercase {
  text-transform: uppercase;
}

.tf-btn-md-outlined-danger-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  padding: 4px;
  /* outlined border color */
  border: 1px solid var(--color-outline-danger-default, #D22D2D);
  color: var(--color-text-danger-default, #D22D2D);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-md-outlined-danger-icon-only:focus-visible {
  outline: none;
}
.tf-btn-md-outlined-danger-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-md-outlined-danger-icon-only:disabled {
  cursor: default;
}
.tf-btn-md-outlined-danger-icon-only:hover {
  border: 1px solid var(--color-outline-danger-subtle, #E17272);
  color: var(--color-text-danger-subtle, #E17272);
}
.tf-btn-md-outlined-danger-icon-only:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-outlined-neutral,
.tf-btn-md-outlined-neutral-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  background: none;
  padding: 7px 16px;
  /* outlined border color */
  border: 1px solid var(--color-outline-bold, #2F3E52);
  color: var(--color-text-default, #2F3E52);
}
.tf-btn-md-outlined-neutral:focus-visible,
.tf-btn-md-outlined-neutral-uppercase:focus-visible {
  outline: none;
}
.tf-btn-md-outlined-neutral:is(a),
.tf-btn-md-outlined-neutral-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-md-outlined-neutral:disabled,
.tf-btn-md-outlined-neutral-uppercase:disabled {
  cursor: default;
}
.tf-btn-md-outlined-neutral:hover,
.tf-btn-md-outlined-neutral-uppercase:hover {
  border: 1px solid var(--color-outline-default, #5D697B);
  color: var(--color-text-subtle, #5D697B);
}
.tf-btn-md-outlined-neutral:disabled,
.tf-btn-md-outlined-neutral-uppercase:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-outlined-neutral-uppercase {
  text-transform: uppercase;
}

.tf-btn-md-outlined-neutral-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  padding: 4px;
  /* outlined border color */
  border: 1px solid var(--color-outline-bold, #2F3E52);
  color: var(--color-text-default, #2F3E52);
}
.tf-btn-md-outlined-neutral-icon-only:focus-visible {
  outline: none;
}
.tf-btn-md-outlined-neutral-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-md-outlined-neutral-icon-only:disabled {
  cursor: default;
}
.tf-btn-md-outlined-neutral-icon-only:hover {
  border: 1px solid var(--color-outline-default, #5D697B);
  color: var(--color-text-subtle, #5D697B);
}
.tf-btn-md-outlined-neutral-icon-only:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-outlined-success,
.tf-btn-md-outlined-success-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  background: none;
  padding: 7px 16px;
  /* outlined border color */
  border: 1px solid var(--color-outline-positive-default);
  color: var(--color-outline-positive-default);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-md-outlined-success:focus-visible,
.tf-btn-md-outlined-success-uppercase:focus-visible {
  outline: none;
}
.tf-btn-md-outlined-success:is(a),
.tf-btn-md-outlined-success-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-md-outlined-success:disabled,
.tf-btn-md-outlined-success-uppercase:disabled {
  cursor: default;
}
.tf-btn-md-outlined-success:hover,
.tf-btn-md-outlined-success-uppercase:hover {
  border-color: var(--color-outline-positive-subtle);
  color: var(--color-text-positive-subtle);
}
.tf-btn-md-outlined-success:disabled,
.tf-btn-md-outlined-success-uppercase:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-outlined-success-uppercase {
  text-transform: uppercase;
}

.tf-btn-md-outlined-success-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  padding: 4px;
  /* outlined border color */
  border: 1px solid var(--color-outline-positive-default);
  color: var(--color-outline-positive-default);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-md-outlined-success-icon-only:focus-visible {
  outline: none;
}
.tf-btn-md-outlined-success-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-md-outlined-success-icon-only:disabled {
  cursor: default;
}
.tf-btn-md-outlined-success-icon-only:hover {
  border-color: var(--color-outline-positive-subtle);
  color: var(--color-text-positive-subtle);
}
.tf-btn-md-outlined-success-icon-only:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-text-brand,
.tf-btn-s-text-brand-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  background: none;
  border: none;
  padding: 8px 16px;
  /* text border color */
  color: var(--color-text-brand-default, #5DCDB5);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-s-text-brand:focus-visible,
.tf-btn-s-text-brand-uppercase:focus-visible {
  outline: none;
}
.tf-btn-s-text-brand:is(a),
.tf-btn-s-text-brand-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-s-text-brand:disabled,
.tf-btn-s-text-brand-uppercase:disabled {
  cursor: default;
}
.tf-btn-s-text-brand:hover,
.tf-btn-s-text-brand-uppercase:hover {
  color: var(--color-text-brand-subtle, #92DECD);
}
.tf-btn-s-text-brand:disabled,
.tf-btn-s-text-brand-uppercase:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-text-brand-uppercase {
  text-transform: uppercase;
}

.tf-btn-s-text-brand-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  border: none;
  padding: 4px;
  /* text border color */
  color: var(--color-text-brand-default, #5DCDB5);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-s-text-brand-icon-only:focus-visible {
  outline: none;
}
.tf-btn-s-text-brand-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-s-text-brand-icon-only:disabled {
  cursor: default;
}
.tf-btn-s-text-brand-icon-only:hover {
  color: var(--color-text-brand-subtle, #92DECD);
}
.tf-btn-s-text-brand-icon-only:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-text-danger,
.tf-btn-s-text-danger-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  background: none;
  border: none;
  padding: 8px 16px;
  /* text border color */
  color: var(--color-text-danger-default, #D22D2D);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-s-text-danger:focus-visible,
.tf-btn-s-text-danger-uppercase:focus-visible {
  outline: none;
}
.tf-btn-s-text-danger:is(a),
.tf-btn-s-text-danger-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-s-text-danger:disabled,
.tf-btn-s-text-danger-uppercase:disabled {
  cursor: default;
}
.tf-btn-s-text-danger:hover,
.tf-btn-s-text-danger-uppercase:hover {
  color: var(--color-text-danger-subtle, #E17272);
}
.tf-btn-s-text-danger:disabled,
.tf-btn-s-text-danger-uppercase:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-text-danger-uppercase {
  text-transform: uppercase;
}

.tf-btn-s-text-danger-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  border: none;
  padding: 4px;
  /* text border color */
  color: var(--color-text-danger-default, #D22D2D);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-s-text-danger-icon-only:focus-visible {
  outline: none;
}
.tf-btn-s-text-danger-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-s-text-danger-icon-only:disabled {
  cursor: default;
}
.tf-btn-s-text-danger-icon-only:hover {
  color: var(--color-text-danger-subtle, #E17272);
}
.tf-btn-s-text-danger-icon-only:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-text-neutral,
.tf-btn-s-text-neutral-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  background: none;
  border: none;
  padding: 8px 16px;
  /* text border color */
  color: var(--color-text-bold, #1D2532);
}
.tf-btn-s-text-neutral:focus-visible,
.tf-btn-s-text-neutral-uppercase:focus-visible {
  outline: none;
}
.tf-btn-s-text-neutral:is(a),
.tf-btn-s-text-neutral-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-s-text-neutral:disabled,
.tf-btn-s-text-neutral-uppercase:disabled {
  cursor: default;
}
.tf-btn-s-text-neutral:hover,
.tf-btn-s-text-neutral-uppercase:hover {
  color: var(--color-text-subtle, #5D697B);
}
.tf-btn-s-text-neutral:disabled,
.tf-btn-s-text-neutral-uppercase:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-text-neutral-uppercase {
  text-transform: uppercase;
}

.tf-btn-s-text-neutral-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  border: none;
  padding: 4px;
  /* text border color */
  color: var(--color-text-bold, #1D2532);
}
.tf-btn-s-text-neutral-icon-only:focus-visible {
  outline: none;
}
.tf-btn-s-text-neutral-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-s-text-neutral-icon-only:disabled {
  cursor: default;
}
.tf-btn-s-text-neutral-icon-only:hover {
  color: var(--color-text-subtle, #5D697B);
}
.tf-btn-s-text-neutral-icon-only:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-text-success,
.tf-btn-s-text-success-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  background: none;
  border: none;
  padding: 8px 16px;
  /* text border color */
  color: var(--color-text-success-default, #28A745);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-s-text-success:focus-visible,
.tf-btn-s-text-success-uppercase:focus-visible {
  outline: none;
}
.tf-btn-s-text-success:is(a),
.tf-btn-s-text-success-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-s-text-success:disabled,
.tf-btn-s-text-success-uppercase:disabled {
  cursor: default;
}
.tf-btn-s-text-success:hover,
.tf-btn-s-text-success-uppercase:hover {
  color: var(--color-text-success-subtle, #6FC482);
}
.tf-btn-s-text-success:disabled,
.tf-btn-s-text-success-uppercase:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-text-success-uppercase {
  text-transform: uppercase;
}

.tf-btn-s-text-success-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  border: none;
  padding: 4px;
  /* text border color */
  color: var(--color-text-success-default, #28A745);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-s-text-success-icon-only:focus-visible {
  outline: none;
}
.tf-btn-s-text-success-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-s-text-success-icon-only:disabled {
  cursor: default;
}
.tf-btn-s-text-success-icon-only:hover {
  color: var(--color-text-success-subtle, #6FC482);
}
.tf-btn-s-text-success-icon-only:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-text-brand,
.tf-btn-sm-text-brand-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  background: none;
  border: none;
  padding: 8px 16px;
  /* text border color */
  color: var(--color-text-brand-default, #5DCDB5);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-sm-text-brand:focus-visible,
.tf-btn-sm-text-brand-uppercase:focus-visible {
  outline: none;
}
.tf-btn-sm-text-brand:is(a),
.tf-btn-sm-text-brand-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-sm-text-brand:disabled,
.tf-btn-sm-text-brand-uppercase:disabled {
  cursor: default;
}
.tf-btn-sm-text-brand:hover,
.tf-btn-sm-text-brand-uppercase:hover {
  color: var(--color-text-brand-subtle, #92DECD);
}
.tf-btn-sm-text-brand:disabled,
.tf-btn-sm-text-brand-uppercase:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-text-brand-uppercase {
  text-transform: uppercase;
}

.tf-btn-sm-text-brand-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  border: none;
  padding: 4px;
  /* text border color */
  color: var(--color-text-brand-default, #5DCDB5);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-sm-text-brand-icon-only:focus-visible {
  outline: none;
}
.tf-btn-sm-text-brand-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-sm-text-brand-icon-only:disabled {
  cursor: default;
}
.tf-btn-sm-text-brand-icon-only:hover {
  color: var(--color-text-brand-subtle, #92DECD);
}
.tf-btn-sm-text-brand-icon-only:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-text-danger,
.tf-btn-sm-text-danger-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  background: none;
  border: none;
  padding: 8px 16px;
  /* text border color */
  color: var(--color-text-danger-default, #D22D2D);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-sm-text-danger:focus-visible,
.tf-btn-sm-text-danger-uppercase:focus-visible {
  outline: none;
}
.tf-btn-sm-text-danger:is(a),
.tf-btn-sm-text-danger-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-sm-text-danger:disabled,
.tf-btn-sm-text-danger-uppercase:disabled {
  cursor: default;
}
.tf-btn-sm-text-danger:hover,
.tf-btn-sm-text-danger-uppercase:hover {
  color: var(--color-text-danger-subtle, #E17272);
}
.tf-btn-sm-text-danger:disabled,
.tf-btn-sm-text-danger-uppercase:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-text-danger-uppercase {
  text-transform: uppercase;
}

.tf-btn-sm-text-danger-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  border: none;
  padding: 4px;
  /* text border color */
  color: var(--color-text-danger-default, #D22D2D);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-sm-text-danger-icon-only:focus-visible {
  outline: none;
}
.tf-btn-sm-text-danger-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-sm-text-danger-icon-only:disabled {
  cursor: default;
}
.tf-btn-sm-text-danger-icon-only:hover {
  color: var(--color-text-danger-subtle, #E17272);
}
.tf-btn-sm-text-danger-icon-only:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-text-neutral,
.tf-btn-sm-text-neutral-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  background: none;
  border: none;
  padding: 8px 16px;
  /* text border color */
  color: var(--color-text-bold, #1D2532);
}
.tf-btn-sm-text-neutral:focus-visible,
.tf-btn-sm-text-neutral-uppercase:focus-visible {
  outline: none;
}
.tf-btn-sm-text-neutral:is(a),
.tf-btn-sm-text-neutral-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-sm-text-neutral:disabled,
.tf-btn-sm-text-neutral-uppercase:disabled {
  cursor: default;
}
.tf-btn-sm-text-neutral:hover,
.tf-btn-sm-text-neutral-uppercase:hover {
  color: var(--color-text-subtle, #5D697B);
}
.tf-btn-sm-text-neutral:disabled,
.tf-btn-sm-text-neutral-uppercase:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-text-neutral-uppercase {
  text-transform: uppercase;
}

.tf-btn-sm-text-neutral-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  border: none;
  padding: 4px;
  /* text border color */
  color: var(--color-text-bold, #1D2532);
}
.tf-btn-sm-text-neutral-icon-only:focus-visible {
  outline: none;
}
.tf-btn-sm-text-neutral-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-sm-text-neutral-icon-only:disabled {
  cursor: default;
}
.tf-btn-sm-text-neutral-icon-only:hover {
  color: var(--color-text-subtle, #5D697B);
}
.tf-btn-sm-text-neutral-icon-only:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-text-success,
.tf-btn-sm-text-success-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  background: none;
  border: none;
  padding: 8px 16px;
  /* text border color */
  color: var(--color-text-success-default, #28A745);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-sm-text-success:focus-visible,
.tf-btn-sm-text-success-uppercase:focus-visible {
  outline: none;
}
.tf-btn-sm-text-success:is(a),
.tf-btn-sm-text-success-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-sm-text-success:disabled,
.tf-btn-sm-text-success-uppercase:disabled {
  cursor: default;
}
.tf-btn-sm-text-success:hover,
.tf-btn-sm-text-success-uppercase:hover {
  color: var(--color-text-success-subtle, #6FC482);
}
.tf-btn-sm-text-success:disabled,
.tf-btn-sm-text-success-uppercase:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-text-success-uppercase {
  text-transform: uppercase;
}

.tf-btn-sm-text-success-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  border: none;
  padding: 4px;
  /* text border color */
  color: var(--color-text-success-default, #28A745);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-sm-text-success-icon-only:focus-visible {
  outline: none;
}
.tf-btn-sm-text-success-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-sm-text-success-icon-only:disabled {
  cursor: default;
}
.tf-btn-sm-text-success-icon-only:hover {
  color: var(--color-text-success-subtle, #6FC482);
}
.tf-btn-sm-text-success-icon-only:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-text-brand,
.tf-btn-md-text-brand-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  background: none;
  border: none;
  padding: 8px 16px;
  /* text border color */
  color: var(--color-text-brand-default, #5DCDB5);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-md-text-brand:focus-visible,
.tf-btn-md-text-brand-uppercase:focus-visible {
  outline: none;
}
.tf-btn-md-text-brand:is(a),
.tf-btn-md-text-brand-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-md-text-brand:disabled,
.tf-btn-md-text-brand-uppercase:disabled {
  cursor: default;
}
.tf-btn-md-text-brand:hover,
.tf-btn-md-text-brand-uppercase:hover {
  color: var(--color-text-brand-subtle, #92DECD);
}
.tf-btn-md-text-brand:disabled,
.tf-btn-md-text-brand-uppercase:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-text-brand-uppercase {
  text-transform: uppercase;
}

.tf-btn-md-text-brand-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  border: none;
  padding: 4px;
  /* text border color */
  color: var(--color-text-brand-default, #5DCDB5);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-md-text-brand-icon-only:focus-visible {
  outline: none;
}
.tf-btn-md-text-brand-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-md-text-brand-icon-only:disabled {
  cursor: default;
}
.tf-btn-md-text-brand-icon-only:hover {
  color: var(--color-text-brand-subtle, #92DECD);
}
.tf-btn-md-text-brand-icon-only:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-text-danger,
.tf-btn-md-text-danger-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  background: none;
  border: none;
  padding: 8px 16px;
  /* text border color */
  color: var(--color-text-danger-default, #D22D2D);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-md-text-danger:focus-visible,
.tf-btn-md-text-danger-uppercase:focus-visible {
  outline: none;
}
.tf-btn-md-text-danger:is(a),
.tf-btn-md-text-danger-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-md-text-danger:disabled,
.tf-btn-md-text-danger-uppercase:disabled {
  cursor: default;
}
.tf-btn-md-text-danger:hover,
.tf-btn-md-text-danger-uppercase:hover {
  color: var(--color-text-danger-subtle, #E17272);
}
.tf-btn-md-text-danger:disabled,
.tf-btn-md-text-danger-uppercase:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-text-danger-uppercase {
  text-transform: uppercase;
}

.tf-btn-md-text-danger-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  border: none;
  padding: 4px;
  /* text border color */
  color: var(--color-text-danger-default, #D22D2D);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-md-text-danger-icon-only:focus-visible {
  outline: none;
}
.tf-btn-md-text-danger-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-md-text-danger-icon-only:disabled {
  cursor: default;
}
.tf-btn-md-text-danger-icon-only:hover {
  color: var(--color-text-danger-subtle, #E17272);
}
.tf-btn-md-text-danger-icon-only:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-text-neutral,
.tf-btn-md-text-neutral-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  background: none;
  border: none;
  padding: 8px 16px;
  /* text border color */
  color: var(--color-text-bold, #1D2532);
}
.tf-btn-md-text-neutral:focus-visible,
.tf-btn-md-text-neutral-uppercase:focus-visible {
  outline: none;
}
.tf-btn-md-text-neutral:is(a),
.tf-btn-md-text-neutral-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-md-text-neutral:disabled,
.tf-btn-md-text-neutral-uppercase:disabled {
  cursor: default;
}
.tf-btn-md-text-neutral:hover,
.tf-btn-md-text-neutral-uppercase:hover {
  color: var(--color-text-subtle, #5D697B);
}
.tf-btn-md-text-neutral:disabled,
.tf-btn-md-text-neutral-uppercase:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-text-neutral-uppercase {
  text-transform: uppercase;
}

.tf-btn-md-text-neutral-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  border: none;
  padding: 4px;
  /* text border color */
  color: var(--color-text-bold, #1D2532);
}
.tf-btn-md-text-neutral-icon-only:focus-visible {
  outline: none;
}
.tf-btn-md-text-neutral-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-md-text-neutral-icon-only:disabled {
  cursor: default;
}
.tf-btn-md-text-neutral-icon-only:hover {
  color: var(--color-text-subtle, #5D697B);
}
.tf-btn-md-text-neutral-icon-only:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-text-success,
.tf-btn-md-text-success-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  background: none;
  border: none;
  padding: 8px 16px;
  /* text border color */
  color: var(--color-text-success-default, #28A745);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-md-text-success:focus-visible,
.tf-btn-md-text-success-uppercase:focus-visible {
  outline: none;
}
.tf-btn-md-text-success:is(a),
.tf-btn-md-text-success-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-md-text-success:disabled,
.tf-btn-md-text-success-uppercase:disabled {
  cursor: default;
}
.tf-btn-md-text-success:hover,
.tf-btn-md-text-success-uppercase:hover {
  color: var(--color-text-success-subtle, #6FC482);
}
.tf-btn-md-text-success:disabled,
.tf-btn-md-text-success-uppercase:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-text-success-uppercase {
  text-transform: uppercase;
}

.tf-btn-md-text-success-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  border: none;
  padding: 4px;
  /* text border color */
  color: var(--color-text-success-default, #28A745);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-md-text-success-icon-only:focus-visible {
  outline: none;
}
.tf-btn-md-text-success-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-md-text-success-icon-only:disabled {
  cursor: default;
}
.tf-btn-md-text-success-icon-only:hover {
  color: var(--color-text-success-subtle, #6FC482);
}
.tf-btn-md-text-success-icon-only:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-standard-brand,
.tf-btn-s-standard-brand-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  border: none;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-brand-subtle-enabled, #EFFAF8);
  color: var(--color-text-brand-default, #5DCDB5);
}
.tf-btn-s-standard-brand:focus-visible,
.tf-btn-s-standard-brand-uppercase:focus-visible {
  outline: none;
}
.tf-btn-s-standard-brand:is(a),
.tf-btn-s-standard-brand-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-s-standard-brand:disabled,
.tf-btn-s-standard-brand-uppercase:disabled {
  cursor: default;
}
.tf-btn-s-standard-brand:hover,
.tf-btn-s-standard-brand-uppercase:hover {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
}
.tf-btn-s-standard-brand:disabled,
.tf-btn-s-standard-brand-uppercase:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-standard-brand-uppercase {
  text-transform: uppercase;
}

.tf-btn-s-standard-brand-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  padding: 4px;
  /* filled bg color */
  background: var(--color-bg-brand-subtle-enabled, #EFFAF8);
  color: var(--color-text-brand-default, #5DCDB5);
}
.tf-btn-s-standard-brand-icon-only:focus-visible {
  outline: none;
}
.tf-btn-s-standard-brand-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-s-standard-brand-icon-only:disabled {
  cursor: default;
}
.tf-btn-s-standard-brand-icon-only:hover {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
}
.tf-btn-s-standard-brand-icon-only:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-standard-danger,
.tf-btn-s-standard-danger-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  border: none;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-danger-subtle-enabled, #FBEAEA);
  color: var(--color-text-danger-default, #D22D2D);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-s-standard-danger:focus-visible,
.tf-btn-s-standard-danger-uppercase:focus-visible {
  outline: none;
}
.tf-btn-s-standard-danger:is(a),
.tf-btn-s-standard-danger-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-s-standard-danger:disabled,
.tf-btn-s-standard-danger-uppercase:disabled {
  cursor: default;
}
.tf-btn-s-standard-danger:hover,
.tf-btn-s-standard-danger-uppercase:hover {
  background: var(--color-bg-danger-subtle-hovered, #F1BEBE);
}
.tf-btn-s-standard-danger:disabled,
.tf-btn-s-standard-danger-uppercase:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-standard-danger-uppercase {
  text-transform: uppercase;
}

.tf-btn-s-standard-danger-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  padding: 4px;
  /* filled bg color */
  background: var(--color-bg-danger-subtle-enabled, #FBEAEA);
  color: var(--color-text-danger-default, #D22D2D);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-s-standard-danger-icon-only:focus-visible {
  outline: none;
}
.tf-btn-s-standard-danger-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-s-standard-danger-icon-only:disabled {
  cursor: default;
}
.tf-btn-s-standard-danger-icon-only:hover {
  background: var(--color-bg-danger-subtle-hovered, #F1BEBE);
}
.tf-btn-s-standard-danger-icon-only:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-standard-neutral,
.tf-btn-s-standard-neutral-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  border: none;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-default, #F5F6F7);
  color: var(--color-text-bold, #1D2532);
}
.tf-btn-s-standard-neutral:focus-visible,
.tf-btn-s-standard-neutral-uppercase:focus-visible {
  outline: none;
}
.tf-btn-s-standard-neutral:is(a),
.tf-btn-s-standard-neutral-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-s-standard-neutral:disabled,
.tf-btn-s-standard-neutral-uppercase:disabled {
  cursor: default;
}
.tf-btn-s-standard-neutral:hover,
.tf-btn-s-standard-neutral-uppercase:hover {
  background: var(--color-bg-neutral-subtle-enabled, #F5F6F7);
}
.tf-btn-s-standard-neutral:disabled,
.tf-btn-s-standard-neutral-uppercase:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-standard-neutral-uppercase {
  text-transform: uppercase;
}

.tf-btn-s-standard-neutral-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  padding: 4px;
  /* filled bg color */
  background: var(--color-bg-default, #F5F6F7);
  color: var(--color-text-bold, #1D2532);
}
.tf-btn-s-standard-neutral-icon-only:focus-visible {
  outline: none;
}
.tf-btn-s-standard-neutral-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-s-standard-neutral-icon-only:disabled {
  cursor: default;
}
.tf-btn-s-standard-neutral-icon-only:hover {
  background: var(--color-bg-neutral-subtle-enabled, #F5F6F7);
}
.tf-btn-s-standard-neutral-icon-only:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-standard-success,
.tf-btn-s-standard-success-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  border: none;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-success-subtle-enabled, #EAF6EC);
  color: var(--color-text-success-default, #28A745);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-s-standard-success:focus-visible,
.tf-btn-s-standard-success-uppercase:focus-visible {
  outline: none;
}
.tf-btn-s-standard-success:is(a),
.tf-btn-s-standard-success-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-s-standard-success:disabled,
.tf-btn-s-standard-success-uppercase:disabled {
  cursor: default;
}
.tf-btn-s-standard-success:hover,
.tf-btn-s-standard-success-uppercase:hover {
  background: var(--color-bg-success-subtle-hovered, #DBF0E0);
}
.tf-btn-s-standard-success:disabled,
.tf-btn-s-standard-success-uppercase:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-standard-success-uppercase {
  text-transform: uppercase;
}

.tf-btn-s-standard-success-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  padding: 4px;
  /* filled bg color */
  background: var(--color-bg-success-subtle-enabled, #EAF6EC);
  color: var(--color-text-success-default, #28A745);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-s-standard-success-icon-only:focus-visible {
  outline: none;
}
.tf-btn-s-standard-success-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-s-standard-success-icon-only:disabled {
  cursor: default;
}
.tf-btn-s-standard-success-icon-only:hover {
  background: var(--color-bg-success-subtle-hovered, #DBF0E0);
}
.tf-btn-s-standard-success-icon-only:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-standard-brand,
.tf-btn-sm-standard-brand-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  border: none;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-brand-subtle-enabled, #EFFAF8);
  color: var(--color-text-brand-default, #5DCDB5);
}
.tf-btn-sm-standard-brand:focus-visible,
.tf-btn-sm-standard-brand-uppercase:focus-visible {
  outline: none;
}
.tf-btn-sm-standard-brand:is(a),
.tf-btn-sm-standard-brand-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-sm-standard-brand:disabled,
.tf-btn-sm-standard-brand-uppercase:disabled {
  cursor: default;
}
.tf-btn-sm-standard-brand:hover,
.tf-btn-sm-standard-brand-uppercase:hover {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
}
.tf-btn-sm-standard-brand:disabled,
.tf-btn-sm-standard-brand-uppercase:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-standard-brand-uppercase {
  text-transform: uppercase;
}

.tf-btn-sm-standard-brand-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  padding: 4px;
  /* filled bg color */
  background: var(--color-bg-brand-subtle-enabled, #EFFAF8);
  color: var(--color-text-brand-default, #5DCDB5);
}
.tf-btn-sm-standard-brand-icon-only:focus-visible {
  outline: none;
}
.tf-btn-sm-standard-brand-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-sm-standard-brand-icon-only:disabled {
  cursor: default;
}
.tf-btn-sm-standard-brand-icon-only:hover {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
}
.tf-btn-sm-standard-brand-icon-only:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-standard-danger,
.tf-btn-sm-standard-danger-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  border: none;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-danger-subtle-enabled, #FBEAEA);
  color: var(--color-text-danger-default, #D22D2D);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-sm-standard-danger:focus-visible,
.tf-btn-sm-standard-danger-uppercase:focus-visible {
  outline: none;
}
.tf-btn-sm-standard-danger:is(a),
.tf-btn-sm-standard-danger-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-sm-standard-danger:disabled,
.tf-btn-sm-standard-danger-uppercase:disabled {
  cursor: default;
}
.tf-btn-sm-standard-danger:hover,
.tf-btn-sm-standard-danger-uppercase:hover {
  background: var(--color-bg-danger-subtle-hovered, #F1BEBE);
}
.tf-btn-sm-standard-danger:disabled,
.tf-btn-sm-standard-danger-uppercase:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-standard-danger-uppercase {
  text-transform: uppercase;
}

.tf-btn-sm-standard-danger-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  padding: 4px;
  /* filled bg color */
  background: var(--color-bg-danger-subtle-enabled, #FBEAEA);
  color: var(--color-text-danger-default, #D22D2D);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-sm-standard-danger-icon-only:focus-visible {
  outline: none;
}
.tf-btn-sm-standard-danger-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-sm-standard-danger-icon-only:disabled {
  cursor: default;
}
.tf-btn-sm-standard-danger-icon-only:hover {
  background: var(--color-bg-danger-subtle-hovered, #F1BEBE);
}
.tf-btn-sm-standard-danger-icon-only:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-standard-neutral,
.tf-btn-sm-standard-neutral-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  border: none;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-default, #F5F6F7);
  color: var(--color-text-bold, #1D2532);
}
.tf-btn-sm-standard-neutral:focus-visible,
.tf-btn-sm-standard-neutral-uppercase:focus-visible {
  outline: none;
}
.tf-btn-sm-standard-neutral:is(a),
.tf-btn-sm-standard-neutral-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-sm-standard-neutral:disabled,
.tf-btn-sm-standard-neutral-uppercase:disabled {
  cursor: default;
}
.tf-btn-sm-standard-neutral:hover,
.tf-btn-sm-standard-neutral-uppercase:hover {
  background: var(--color-bg-neutral-subtle-enabled, #F5F6F7);
}
.tf-btn-sm-standard-neutral:disabled,
.tf-btn-sm-standard-neutral-uppercase:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-standard-neutral-uppercase {
  text-transform: uppercase;
}

.tf-btn-sm-standard-neutral-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  padding: 4px;
  /* filled bg color */
  background: var(--color-bg-default, #F5F6F7);
  color: var(--color-text-bold, #1D2532);
}
.tf-btn-sm-standard-neutral-icon-only:focus-visible {
  outline: none;
}
.tf-btn-sm-standard-neutral-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-sm-standard-neutral-icon-only:disabled {
  cursor: default;
}
.tf-btn-sm-standard-neutral-icon-only:hover {
  background: var(--color-bg-neutral-subtle-enabled, #F5F6F7);
}
.tf-btn-sm-standard-neutral-icon-only:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-standard-success,
.tf-btn-sm-standard-success-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  border: none;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-success-subtle-enabled, #EAF6EC);
  color: var(--color-text-success-default, #28A745);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-sm-standard-success:focus-visible,
.tf-btn-sm-standard-success-uppercase:focus-visible {
  outline: none;
}
.tf-btn-sm-standard-success:is(a),
.tf-btn-sm-standard-success-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-sm-standard-success:disabled,
.tf-btn-sm-standard-success-uppercase:disabled {
  cursor: default;
}
.tf-btn-sm-standard-success:hover,
.tf-btn-sm-standard-success-uppercase:hover {
  background: var(--color-bg-success-subtle-hovered, #DBF0E0);
}
.tf-btn-sm-standard-success:disabled,
.tf-btn-sm-standard-success-uppercase:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-sm-standard-success-uppercase {
  text-transform: uppercase;
}

.tf-btn-sm-standard-success-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  padding: 4px;
  /* filled bg color */
  background: var(--color-bg-success-subtle-enabled, #EAF6EC);
  color: var(--color-text-success-default, #28A745);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-sm-standard-success-icon-only:focus-visible {
  outline: none;
}
.tf-btn-sm-standard-success-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-sm-standard-success-icon-only:disabled {
  cursor: default;
}
.tf-btn-sm-standard-success-icon-only:hover {
  background: var(--color-bg-success-subtle-hovered, #DBF0E0);
}
.tf-btn-sm-standard-success-icon-only:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-standard-brand,
.tf-btn-md-standard-brand-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  border: none;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-brand-subtle-enabled, #EFFAF8);
  color: var(--color-text-brand-default, #5DCDB5);
}
.tf-btn-md-standard-brand:focus-visible,
.tf-btn-md-standard-brand-uppercase:focus-visible {
  outline: none;
}
.tf-btn-md-standard-brand:is(a),
.tf-btn-md-standard-brand-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-md-standard-brand:disabled,
.tf-btn-md-standard-brand-uppercase:disabled {
  cursor: default;
}
.tf-btn-md-standard-brand:hover,
.tf-btn-md-standard-brand-uppercase:hover {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
}
.tf-btn-md-standard-brand:disabled,
.tf-btn-md-standard-brand-uppercase:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-standard-brand-uppercase {
  text-transform: uppercase;
}

.tf-btn-md-standard-brand-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  padding: 4px;
  /* filled bg color */
  background: var(--color-bg-brand-subtle-enabled, #EFFAF8);
  color: var(--color-text-brand-default, #5DCDB5);
}
.tf-btn-md-standard-brand-icon-only:focus-visible {
  outline: none;
}
.tf-btn-md-standard-brand-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-md-standard-brand-icon-only:disabled {
  cursor: default;
}
.tf-btn-md-standard-brand-icon-only:hover {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
}
.tf-btn-md-standard-brand-icon-only:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-standard-danger,
.tf-btn-md-standard-danger-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  border: none;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-danger-subtle-enabled, #FBEAEA);
  color: var(--color-text-danger-default, #D22D2D);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-md-standard-danger:focus-visible,
.tf-btn-md-standard-danger-uppercase:focus-visible {
  outline: none;
}
.tf-btn-md-standard-danger:is(a),
.tf-btn-md-standard-danger-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-md-standard-danger:disabled,
.tf-btn-md-standard-danger-uppercase:disabled {
  cursor: default;
}
.tf-btn-md-standard-danger:hover,
.tf-btn-md-standard-danger-uppercase:hover {
  background: var(--color-bg-danger-subtle-hovered, #F1BEBE);
}
.tf-btn-md-standard-danger:disabled,
.tf-btn-md-standard-danger-uppercase:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-standard-danger-uppercase {
  text-transform: uppercase;
}

.tf-btn-md-standard-danger-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  padding: 4px;
  /* filled bg color */
  background: var(--color-bg-danger-subtle-enabled, #FBEAEA);
  color: var(--color-text-danger-default, #D22D2D);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-md-standard-danger-icon-only:focus-visible {
  outline: none;
}
.tf-btn-md-standard-danger-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-md-standard-danger-icon-only:disabled {
  cursor: default;
}
.tf-btn-md-standard-danger-icon-only:hover {
  background: var(--color-bg-danger-subtle-hovered, #F1BEBE);
}
.tf-btn-md-standard-danger-icon-only:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-standard-neutral,
.tf-btn-md-standard-neutral-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  border: none;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-default, #F5F6F7);
  color: var(--color-text-bold, #1D2532);
}
.tf-btn-md-standard-neutral:focus-visible,
.tf-btn-md-standard-neutral-uppercase:focus-visible {
  outline: none;
}
.tf-btn-md-standard-neutral:is(a),
.tf-btn-md-standard-neutral-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-md-standard-neutral:disabled,
.tf-btn-md-standard-neutral-uppercase:disabled {
  cursor: default;
}
.tf-btn-md-standard-neutral:hover,
.tf-btn-md-standard-neutral-uppercase:hover {
  background: var(--color-bg-neutral-subtle-enabled, #F5F6F7);
}
.tf-btn-md-standard-neutral:disabled,
.tf-btn-md-standard-neutral-uppercase:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-standard-neutral-uppercase {
  text-transform: uppercase;
}

.tf-btn-md-standard-neutral-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  padding: 4px;
  /* filled bg color */
  background: var(--color-bg-default, #F5F6F7);
  color: var(--color-text-bold, #1D2532);
}
.tf-btn-md-standard-neutral-icon-only:focus-visible {
  outline: none;
}
.tf-btn-md-standard-neutral-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-md-standard-neutral-icon-only:disabled {
  cursor: default;
}
.tf-btn-md-standard-neutral-icon-only:hover {
  background: var(--color-bg-neutral-subtle-enabled, #F5F6F7);
}
.tf-btn-md-standard-neutral-icon-only:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-standard-success,
.tf-btn-md-standard-success-uppercase {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  border: none;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-success-subtle-enabled, #EAF6EC);
  color: var(--color-text-success-default, #28A745);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-md-standard-success:focus-visible,
.tf-btn-md-standard-success-uppercase:focus-visible {
  outline: none;
}
.tf-btn-md-standard-success:is(a),
.tf-btn-md-standard-success-uppercase:is(a) {
  text-decoration: none;
}
.tf-btn-md-standard-success:disabled,
.tf-btn-md-standard-success-uppercase:disabled {
  cursor: default;
}
.tf-btn-md-standard-success:hover,
.tf-btn-md-standard-success-uppercase:hover {
  background: var(--color-bg-success-subtle-hovered, #DBF0E0);
}
.tf-btn-md-standard-success:disabled,
.tf-btn-md-standard-success-uppercase:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-md-standard-success-uppercase {
  text-transform: uppercase;
}

.tf-btn-md-standard-success-icon-only {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  padding: 4px;
  /* filled bg color */
  background: var(--color-bg-success-subtle-enabled, #EAF6EC);
  color: var(--color-text-success-default, #28A745);
  /* [TODO] assumption taken as not defined on design */
}
.tf-btn-md-standard-success-icon-only:focus-visible {
  outline: none;
}
.tf-btn-md-standard-success-icon-only:is(a) {
  text-decoration: none;
}
.tf-btn-md-standard-success-icon-only:disabled {
  cursor: default;
}
.tf-btn-md-standard-success-icon-only:hover {
  background: var(--color-bg-success-subtle-hovered, #DBF0E0);
}
.tf-btn-md-standard-success-icon-only:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-btn-s-outlined-automation {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-neutral-bold-enabled, #253040);
  color: var(--color-text-inverse, #FFF);
  margin-left: 4px;
  border: 1px solid transparent;
  background: linear-gradient(#F5F6F7, #F5F6F7) padding-box, linear-gradient(90deg, var(--palette-purple-500, #977EFB) 0%, var(--palette-blue-500, #5EACFF) 100%) border-box;
}
.tf-btn-s-outlined-automation:focus-visible {
  outline: none;
}
.tf-btn-s-outlined-automation:is(a) {
  text-decoration: none;
}
.tf-btn-s-outlined-automation:disabled {
  cursor: default;
}
.tf-btn-s-outlined-automation:hover {
  background: var(--color-bg-neutral-bold-hovered, #2F3E52);
}
.tf-btn-s-outlined-automation:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.tf-btn-s-outlined-automation span {
  background: linear-gradient(90deg, var(--palette-purple-500, #977EFB) 0%, var(--palette-blue-500, #5EACFF) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tf-btn-s-filled-automation {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  padding: 8px 16px;
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  border: none;
  background: linear-gradient(90deg, var(--palette-purple-500, #977EFB) 0%, var(--palette-blue-500, #5EACFF) 100%);
  color: var(--color-text-inverse, #FFF);
}
.tf-btn-s-filled-automation:focus-visible {
  outline: none;
}
.tf-btn-s-filled-automation:is(a) {
  text-decoration: none;
}
.tf-btn-s-filled-automation:disabled {
  cursor: default;
}
.tf-btn-s-filled-automation:hover:not(:disabled) {
  opacity: 0.8;
}
.tf-btn-s-filled-automation:disabled {
  opacity: 0.5;
}

.tf-btn-refresh {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  padding: 4px;
  /* outlined border color */
  border: 1px solid var(--color-outline-bold, #2F3E52);
  color: var(--color-text-default, #2F3E52);
  padding: 3px;
}
.tf-btn-refresh:focus-visible {
  outline: none;
}
.tf-btn-refresh:is(a) {
  text-decoration: none;
}
.tf-btn-refresh:disabled {
  cursor: default;
}
.tf-btn-refresh:hover {
  border: 1px solid var(--color-outline-default, #5D697B);
  color: var(--color-text-subtle, #5D697B);
}
.tf-btn-refresh:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.tf-btn-refresh span {
  font-size: 24px;
}

.tf-btn-tool-icon {
  padding: 3px;
  color: var(--color-icon-default);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tf-btn-tool-icon:is(a) {
  text-decoration: none;
}
.tf-btn-tool-icon:not([class*=color-bg-]) {
  background: none;
}
.tf-btn-tool-icon.danger {
  color: var(--color-icon-negative-default);
}
.tf-btn-tool-icon:disabled {
  cursor: default;
  color: var(--color-icon-disabled);
}
.tf-btn-tool-icon:not(.no-border) {
  border: solid 1px var(--color-outline-subtlest);
  border-radius: 4px;
}
.tf-btn-tool-icon.no-border {
  border: none;
}

.tf-btn-s-filled-top-up {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  padding: 8px 16px;
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  border: none;
  background: var(--Premium-Gradient);
  color: var(--color-text-inverse);
}
.tf-btn-s-filled-top-up:focus-visible {
  outline: none;
}
.tf-btn-s-filled-top-up:is(a) {
  text-decoration: none;
}
.tf-btn-s-filled-top-up:disabled {
  cursor: default;
}
.tf-btn-s-filled-top-up:hover:not(:disabled) {
  opacity: 0.8;
}
.tf-btn-s-filled-top-up:disabled {
  opacity: 0.5;
}

:where(input[type=checkbox].checkbox) {
  font-family: "font-icon", serif;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  position: relative;
  margin: 0;
  flex-shrink: 0;
  flex-grow: 0;
}
:where(input[type=checkbox].checkbox):not(:disabled) {
  cursor: pointer;
}
:where(input[type=checkbox].checkbox)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.63215 20.0922C5.12699 20.0922 4.6994 19.9172 4.3494 19.5672C3.9994 19.2172 3.8244 18.7896 3.8244 18.2844V4.89991C3.8244 4.39475 3.9994 3.96716 4.3494 3.61716C4.6994 3.26716 5.12699 3.09216 5.63215 3.09216H19.0167C19.5218 3.09216 19.9494 3.26716 20.2994 3.61716C20.6494 3.96716 20.8244 4.39475 20.8244 4.89991V18.2844C20.8244 18.7896 20.6494 19.2172 20.2994 19.5672C19.9494 19.9172 19.5218 20.0922 19.0167 20.0922H5.63215Z" fill="%235d697b" /><path d="M5.63215 18.5922H19.0167C19.0937 18.5922 19.1642 18.5601 19.2282 18.4959C19.2923 18.4319 19.3244 18.3614 19.3244 18.2844V4.89991C19.3244 4.82291 19.2923 4.75241 19.2282 4.68841C19.1642 4.62425 19.0937 4.59216 19.0167 4.59216H5.63215C5.55515 4.59216 5.48465 4.62425 5.42065 4.68841C5.35649 4.75241 5.3244 4.82291 5.3244 4.89991V18.2844C5.3244 18.3614 5.35649 18.4319 5.42065 18.4959C5.48465 18.5601 5.55515 18.5922 5.63215 18.5922Z" fill="%23FFFFFF" /></svg>') center/contain no-repeat;
}
:where(input[type=checkbox].checkbox):checked::before {
  background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.63215 20.0922C5.12699 20.0922 4.6994 19.9172 4.3494 19.5672C3.9994 19.2172 3.8244 18.7896 3.8244 18.2844V4.89991C3.8244 4.39475 3.9994 3.96716 4.3494 3.61716C4.6994 3.26716 5.12699 3.09216 5.63215 3.09216H19.0167C19.5218 3.09216 19.9494 3.26716 20.2994 3.61716C20.6494 3.96716 20.8244 4.39475 20.8244 4.89991V18.2844C20.8244 18.7896 20.6494 19.2172 20.2994 19.5672C19.9494 19.9172 19.5218 20.0922 19.0167 20.0922H5.63215Z" fill="%232F3E52" /><path d="M5.63215 18.5922H19.0167C19.0937 18.5922 19.1642 18.5601 19.2282 18.4959C19.2923 18.4319 19.3244 18.3614 19.3244 18.2844V4.89991C19.3244 4.82291 19.2923 4.75241 19.2282 4.68841C19.1642 4.62425 19.0937 4.59216 19.0167 4.59216H5.63215C5.55515 4.59216 5.48465 4.62425 5.42065 4.68841C5.35649 4.75241 5.3244 4.82291 5.3244 4.89991V18.2844C5.3244 18.3614 5.35649 18.4319 5.42065 18.4959C5.48465 18.5601 5.55515 18.5922 5.63215 18.5922Z" fill="%232F3E52" /><path d="M10.9244 13.3384L8.6014 11.0152C8.4629 10.8768 8.28882 10.806 8.07915 10.8027C7.86965 10.7995 7.6924 10.8703 7.5474 11.0152C7.40257 11.1602 7.33015 11.3358 7.33015 11.5422C7.33015 11.7485 7.40257 11.9242 7.5474 12.0692L10.2917 14.8134C10.4725 14.9941 10.6834 15.0844 10.9244 15.0844C11.1654 15.0844 11.3763 14.9941 11.5572 14.8134L17.1207 9.24991C17.259 9.11141 17.3298 8.93733 17.3332 8.72766C17.3363 8.51816 17.2655 8.34091 17.1207 8.19591C16.9757 8.05108 16.8 7.97866 16.5937 7.97866C16.3873 7.97866 16.2117 8.05108 16.0667 8.19591L10.9244 13.3384Z" fill="%23FFFFFF" /></svg>') center/contain no-repeat;
}

.tag-standard-brand {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  background: var(--color-bg-brand-subtle-enabled);
  color: var(--color-text-brand-bold);
}

.tag-standard-neutral {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  background: var(--color-bg-default);
  color: var(--color-text-subtle);
}

.tag-standard-error {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  background: var(--color-bg-negative-subtle-enabled);
  color: var(--color-text-negative-default);
}

.tag-standard-warning {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  background: var(--color-bg-warning-subtle-enabled);
  color: var(--color-text-warning-default);
}

.tag-standard-new {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  background: var(--color-bg-new-subtle-enabled);
  color: var(--color-text-new-default);
}

.tag-standard-info {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  background: var(--color-bg-info-subtle-enabled);
  color: var(--color-text-info-default);
}

.tag-standard-success {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  background: var(--color-bg-positive-subtle-enabled);
  color: var(--color-text-positive-default);
}

.tag-filled-brand {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  color: var(--color-text-inverse);
  background: var(--color-bg-brand-enabled);
}

.tag-filled-neutral {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  color: var(--color-text-inverse);
  background: var(--color-bg-neutral-bold-enabled);
}

.tag-filled-error {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  color: var(--color-text-inverse);
  background: var(--color-bg-negative-enabled);
}

.tag-filled-warning {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  color: var(--color-text-inverse);
  background: var(--color-bg-warning-enabled);
}

.tag-filled-new {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  color: var(--color-text-inverse);
  background: var(--color-bg-new-enabled);
}

.tag-filled-info {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  color: var(--color-text-inverse);
  background: var(--color-bg-info-enabled);
}

.tag-filled-success {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  color: var(--color-text-inverse);
  background: var(--color-bg-positive-enabled);
}

.tag-outlined-brand {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  border: 1px solid var(--color-outline-brand-default);
  color: var(--color-text-brand-bold);
}

.tag-outlined-neutral {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  border: 1px solid var(--color-outline-default);
  color: var(--color-text-subtle);
}

.tag-outlined-error {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  border: 1px solid var(--color-bg-negative-enabled);
  color: var(--color-bg-negative-enabled);
}

.tag-outlined-warning {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  border: 1px solid var(--color-bg-warning-enabled);
  color: var(--color-bg-warning-enabled);
}

.tag-outlined-new {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  border: 1px solid var(--color-outline-new-default);
  color: var(--color-text-new-default);
}

.tag-outlined-info {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  border: 1px solid var(--color-outline-info-default);
  color: var(--color-text-info-default);
}

.tag-outlined-success {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  border: 1px solid var(--color-bg-positive-enabled);
  color: var(--color-text-positive-default);
}

.pricing-plan-tag-free {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  text-align: center;
  border-radius: 2px;
  border-radius: 2px;
  padding: 1px 4px;
  border: 1px solid var(--color-outline-brand-bold);
  color: var(--color-text-brand-default);
}

.pricing-plan-tag-plus {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  text-align: center;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--palette-mint-600, #03DAC5) 0%, var(--palette-blue-600, #3697FF) 94.67%);
  color: var(--color-text-inverse);
  padding: 2px 4px;
}

.pricing-plan-tag-pro {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  text-align: center;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--palette-mint-600, #03DAC5) 0%, var(--palette-blue-600, #3697FF) 94.67%);
  color: var(--color-text-inverse);
  padding: 2px 4px;
}

.pricing-plan-tag-ultimate {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  text-align: center;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--palette-neutral-900, #161D26) 0%, var(--palette-neutral-700, #253040) 37.87%, var(--palette-mint-1000, #015C53) 94.67%);
  color: var(--color-text-inverse);
  padding: 2px 4px;
}

.test-case-status-tag-draft {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  background: var(--color-bg-warning-subtle-enabled);
  color: var(--color-text-warning-default);
}

.test-case-status-tag-ready {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  background: var(--color-bg-positive-subtle-enabled);
  color: var(--color-text-positive-default);
}

:where(body) {
  font-family: var(--font-family-body), sans-serif;
  color: var(--color-text-default);
}

:where(h1) {
  font-family: var(--font-family-heading), serif;
  font-style: normal;
  /* H1 */
  font-size: var(--typography-size-heading1, 64px);
  font-weight: var(--typography-weight-heading1, 600);
  line-height: var(--typography-lineHeight-heading1, 80px);
  margin: unset;
}

:where(h2) {
  font-family: var(--font-family-heading), serif;
  font-style: normal;
  /* H2 */
  font-size: var(--typography-size-heading2, 48px);
  font-weight: var(--typography-weight-heading2, 600);
  line-height: var(--typography-lineHeight-heading2, 64px);
  margin: unset;
}

:where(h3) {
  font-family: var(--font-family-heading), serif;
  font-style: normal;
  /* H3 */
  font-size: var(--typography-size-heading3, 32px);
  font-weight: var(--typography-weight-heading3, 600);
  line-height: var(--typography-lineHeight-heading3, 40px);
  margin: unset;
}

:where(h4) {
  font-family: var(--font-family-heading), serif;
  font-style: normal;
  /* H4 */
  font-size: var(--typography-size-heading4, 24px);
  font-weight: var(--typography-weight-heading4, 600);
  line-height: var(--typography-lineHeight-heading4, 32px);
  margin: unset;
}

:where(h5) {
  font-family: var(--font-family-heading), serif;
  font-style: normal;
  /* H5 */
  font-size: var(--typography-size-heading5, 20px);
  font-weight: var(--typography-weight-heading5, 600);
  line-height: var(--typography-lineHeight-heading5, 24px);
  margin: unset;
}

:where(h6) {
  font-family: var(--font-family-heading), serif;
  font-style: normal;
  /* H6 */
  font-size: var(--typography-size-heading6, 16px);
  font-weight: var(--typography-weight-heading6, 600);
  line-height: var(--typography-lineHeight-heading6, 24px);
  margin: unset;
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.clickable-tf-logo-icon {
  cursor: pointer;
  display: flex;
  padding: var(--spacing-4, 4px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  width: 37px;
  height: 40px;
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.tf-logo-text-registered {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  cursor: pointer;
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.separator-or {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  align-self: stretch;
}
.separator-or .separator-or-line {
  width: calc(50% - 15px);
}
.separator-or .separator-or-text {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  color: var(--color-text-subtlest, #A2A9B3);
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.tf-profile-signup-form {
  display: flex;
  width: var(--safezone-width, 90vw);
  max-width: 480px;
  padding: var(--spacing-32, 32px);
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-16, 16px);
  border-radius: var(--border-radius-8, 8px);
  border: 1px solid var(--color-outline-subtlest, #EBECEE);
  background: var(--color-bg-inverse, #FFF);
}
.tf-profile-signup-form #signupForm {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-16, 16px);
  align-self: stretch;
}
.tf-profile-signup-form #signupForm .tf-signup-field-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.tf-profile-signup-form #signupForm .tf-signup-field-container label {
  font-family: var(--font-family-label), serif;
  font-size: var(--typography-size-label, 12px);
  font-style: normal;
  font-weight: var(--typography-weight-label, 600);
  line-height: var(--typography-lineHeight-label, 16px);
  display: flex;
  min-width: 80px;
  align-items: center;
  gap: var(--spacing-4, 4px);
  color: var(--color-text-default, #2F3E52);
}
.tf-profile-signup-form #signupForm .tf-signup-field-container .field-username, .tf-profile-signup-form #signupForm .tf-signup-field-container .field-email {
  border-color: var(--color-outline-subtlest, #EBECEE);
  font-family: var(--font-family-body), serif;
  border-radius: var(--border-radius-none, 0px);
  border: 1px solid var(--color-outline-subtlest2, #E3E5E8);
  background: #fff;
  display: flex;
  height: var(--font-lineHeight-40, 40px);
  padding: 0 var(--spacing-8, 8px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.tf-profile-signup-form #signupForm .tf-signup-field-container .field-username::placeholder, .tf-profile-signup-form #signupForm .tf-signup-field-container .field-email::placeholder {
  color: var(--color-text-subtlest, #A2A9B3);
}
.tf-profile-signup-form #signupForm .tf-signup-field-container .field-username:focus, .tf-profile-signup-form #signupForm .tf-signup-field-container .field-username:focus-visible, .tf-profile-signup-form #signupForm .tf-signup-field-container .field-email:focus, .tf-profile-signup-form #signupForm .tf-signup-field-container .field-email:focus-visible {
  border: var(--border-width-1, 1px) solid var(--color-outline-brand-default, #5DCDB5);
  outline: none;
}
.tf-profile-signup-form #signupForm .tf-signup-field-container .field-username.error, .tf-profile-signup-form #signupForm .tf-signup-field-container .field-email.error {
  border: 1px solid var(--color-outline-danger-default, #D22D2D);
}
.tf-profile-signup-form #signupForm .tf-signup-field-container .field-username:disabled, .tf-profile-signup-form #signupForm .tf-signup-field-container .field-email:disabled {
  border: var(--border-width-1, 1px) solid var(--color-outline-default, #5D697B);
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
}
.tf-profile-signup-form #signupForm .tf-signup-field-container .field-username:hover:not(:focus):not(:focus-visible), .tf-profile-signup-form #signupForm .tf-signup-field-container .field-email:hover:not(:focus):not(:focus-visible) {
  border: 1px solid var(--color-outline-default, #5D697B);
  background: var(--color-bg-default, #F5F6F7);
}
.tf-profile-signup-form #signupForm .tf-signup-field-container .field-password-container {
  border-color: var(--color-outline-subtlest, #EBECEE);
  border-radius: var(--border-radius-none, 0px);
  border: 1px solid var(--color-outline-subtlest2, #E3E5E8);
  background: #FFF;
  display: flex;
  align-self: stretch;
  flex: 1 0;
  column-gap: var(--spacing-8, 8px);
}
.tf-profile-signup-form #signupForm .tf-signup-field-container .field-password-container:has(input:focus), .tf-profile-signup-form #signupForm .tf-signup-field-container .field-password-container:has(input:focus-visible) {
  border: var(--border-width-1, 1px) solid var(--color-outline-brand-default, #5DCDB5);
}
.tf-profile-signup-form #signupForm .tf-signup-field-container .field-password-container:has(input.error) {
  border: 1px solid var(--color-outline-danger-default, #D22D2D);
}
.tf-profile-signup-form #signupForm .tf-signup-field-container .field-password-container:has(input:disabled) {
  border: var(--border-width-1, 1px) solid var(--color-outline-default, #5D697B);
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
}
.tf-profile-signup-form #signupForm .tf-signup-field-container .field-password-container:hover:has(input:not(:focus):not(:focus-visible):not(.error)) {
  border: 1px solid var(--color-outline-default, #5D697B);
  background: var(--color-bg-default, #F5F6F7);
}
.tf-profile-signup-form #signupForm .tf-signup-field-container .field-password-container .text-fields {
  outline: none;
  border: none;
  background: none;
  display: flex;
  height: var(--font-lineHeight-40, 40px);
  padding: 0 var(--spacing-8, 8px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8, 8px);
  width: calc(100% - 32px);
  align-self: stretch;
}
.tf-profile-signup-form #signupForm .tf-signup-field-container .field-password-container .text-fields::placeholder {
  color: var(--color-text-subtlest, #A2A9B3);
}
.tf-profile-signup-form #signupForm .tf-signup-field-container .field-password-container .text-fields:focus, .tf-profile-signup-form #signupForm .tf-signup-field-container .field-password-container .text-fields:focus-visible, .tf-profile-signup-form #signupForm .tf-signup-field-container .field-password-container .text-fields:disabled, .tf-profile-signup-form #signupForm .tf-signup-field-container .field-password-container .text-fields:hover {
  border: none;
  outline: none;
}
.tf-profile-signup-form #signupForm .tf-signup-field-container .field-password-container .field-password {
  outline: none;
  border: none;
  background: none;
  display: flex;
  height: var(--font-lineHeight-40, 40px);
  padding: 0 var(--spacing-8, 8px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8, 8px);
  width: calc(100% - 32px);
  align-self: stretch;
}
.tf-profile-signup-form #signupForm .tf-signup-field-container .field-password-container .field-password::placeholder {
  color: var(--color-text-subtlest, #A2A9B3);
}
.tf-profile-signup-form #signupForm .tf-signup-field-container .field-password-container .field-password:focus, .tf-profile-signup-form #signupForm .tf-signup-field-container .field-password-container .field-password:focus-visible, .tf-profile-signup-form #signupForm .tf-signup-field-container .field-password-container .field-password:disabled, .tf-profile-signup-form #signupForm .tf-signup-field-container .field-password-container .field-password:hover {
  border: none;
  outline: none;
}
.tf-profile-signup-form #signupForm .tf-signup-field-container .field-error {
  font-family: var(--font-family-label), serif;
  font-size: var(--typography-size-label, 12px);
  font-style: normal;
  font-weight: var(--typography-weight-label, 600);
  line-height: var(--typography-lineHeight-label, 16px);
  color: #B50404;
  margin-top: -4px;
}
.tf-profile-signup-form #signupForm .tf-signup-captcha-container {
  height: 76px;
  align-self: stretch;
  display: flex;
  background: #f9f9f9;
  justify-content: center;
  border: 1px solid #d3d3d3;
}
.tf-profile-signup-form #signupForm .tf-signup-captcha-container .g-recaptcha {
  margin: 0 auto;
  overflow: hidden;
  z-index: 1;
}
.tf-profile-signup-form #signupForm .tf-signup-captcha-container .g-recaptcha iframe {
  position: relative;
  top: -1px;
  left: -1px;
  width: calc(100% - 3px);
}
.tf-profile-signup-form #signupForm #sign-up-email {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-brand-enabled, #5DCDB5);
  color: var(--color-text-bold, #1D2532);
  display: flex;
  padding: var(--spacing-12, 12px) var(--spacing-16, 16px);
  row-gap: var(--spacing-8, 8px);
  column-gap: var(--spacing-4, 4px);
  align-self: stretch;
  flex-flow: wrap;
}
.tf-profile-signup-form #signupForm #sign-up-email:focus-visible {
  outline: none;
}
.tf-profile-signup-form #signupForm #sign-up-email:is(a) {
  text-decoration: none;
}
.tf-profile-signup-form #signupForm #sign-up-email:disabled {
  cursor: default;
}
.tf-profile-signup-form #signupForm #sign-up-email:hover {
  background: var(--color-bg-brand-hovered, #92DECD);
}
.tf-profile-signup-form #signupForm #sign-up-email:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.tf-profile-signup-form #signupForm .tf-signup-consent-container {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body4-.. */
  font-size: var(--typography-size-body4, 11px);
  line-height: var(--typography-lineHeight-body4, 16px);
  font-weight: var(--typography-weight-body4-regular, 400);
  display: flex;
  align-items: center;
  gap: var(--spacing-4, 4px);
  align-self: stretch;
  flex: 1 0;
  color: var(--color-text-default, #2F3E52);
}
.tf-profile-signup-form #signupForm .tf-signup-consent-container a {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body4-.. */
  font-size: var(--typography-size-body4, 11px);
  line-height: var(--typography-lineHeight-body4, 16px);
  font-weight: var(--typography-weight-body4-medium, 500);
  color: var(--color-text-info-default, #3697FF);
  -webkit-text-stroke-width: 0.25px;
}
.tf-profile-signup-form #signupForm #sign-up-google {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  background: none;
  padding: 7px 16px;
  /* outlined border color */
  border: 1px solid var(--color-outline-bold, #2F3E52);
  color: var(--color-text-default, #2F3E52);
  text-transform: uppercase;
  display: flex;
  padding: var(--spacing-12, 12px) var(--spacing-16, 16px);
  gap: var(--spacing-8, 8px);
  align-self: stretch;
  flex-flow: wrap;
  border-radius: var(--border-radius-none, 0px);
  border: 1px solid var(--color-outline-bold, #2F3E52);
  color: var(--color-text-bold, #1D2532);
}
.tf-profile-signup-form #signupForm #sign-up-google:focus-visible {
  outline: none;
}
.tf-profile-signup-form #signupForm #sign-up-google:is(a) {
  text-decoration: none;
}
.tf-profile-signup-form #signupForm #sign-up-google:disabled {
  cursor: default;
}
.tf-profile-signup-form #signupForm #sign-up-google:hover {
  border: 1px solid var(--color-outline-default, #5D697B);
  color: var(--color-text-subtle, #5D697B);
}
.tf-profile-signup-form #signupForm #sign-up-google:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.tf-profile-signup-form #signupForm .have-account-container {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-4, 4px);
  flex-flow: wrap;
  color: var(--color-text-default, #2F3E52);
}
.tf-profile-signup-form #signupForm .have-account-container a {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-medium, 500);
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
  -webkit-text-stroke-width: 0.25px;
  color: var(--color-text-info-default, #3697FF);
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.tf-profile-signup-check-inbox {
  display: flex;
  width: 100vw;
  max-width: 420px;
  padding: var(--spacing-32, 32px);
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24, 24px);
  border-radius: var(--border-radius-8, 8px);
  border: 1px solid var(--color-outline-subtlest, #EBECEE);
  background: var(--color-bg-inverse, #FFF);
}
.tf-profile-signup-check-inbox .tf-signup-inbox-header-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.tf-profile-signup-check-inbox .tf-signup-inbox-header-container .tf-signup-inbox-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  align-self: stretch;
  color: var(--color-text-bold, #1D2532);
}
@media screen and (min-width: 480px) {
  .tf-profile-signup-check-inbox .tf-signup-inbox-header-container .tf-signup-inbox-title {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading6, 16px);
    line-height: var(--typography-lineHeight-heading6, 24px);
  }
}
@media screen and (max-width: 479.98px) {
  .tf-profile-signup-check-inbox .tf-signup-inbox-header-container .tf-signup-inbox-title {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading6-m, 14px);
    line-height: var(--typography-lineHeight-heading6-m, 20px);
  }
}
.tf-profile-signup-check-inbox .tf-signup-inbox-detail {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  display: block;
  text-align: center;
  line-height: 16px;
  color: var(--color-text-default, #2F3E52);
  width: 100%;
  word-wrap: break-word;
}
.tf-profile-signup-check-inbox .tf-signup-inbox-detail strong {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-medium, 500);
  -webkit-text-stroke-width: 0.45px;
}
.tf-profile-signup-check-inbox .tf-signup-inbox-detail a {
  color: var(--color-text-info-default, #3697FF);
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
}
.tf-profile-signup-check-inbox .tf-signup-inbox-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  background: none;
  border: none;
  padding: 8px 16px;
  /* text border color */
  color: var(--color-text-bold, #1D2532);
}
.tf-profile-signup-check-inbox .tf-signup-inbox-btn:focus-visible {
  outline: none;
}
.tf-profile-signup-check-inbox .tf-signup-inbox-btn:is(a) {
  text-decoration: none;
}
.tf-profile-signup-check-inbox .tf-signup-inbox-btn:disabled {
  cursor: default;
}
.tf-profile-signup-check-inbox .tf-signup-inbox-btn:hover {
  color: var(--color-text-subtle, #5D697B);
}
.tf-profile-signup-check-inbox .tf-signup-inbox-btn:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.password-strength-meter {
  display: flex;
  align-items: center;
  gap: var(--spacing-16, 16px);
  align-self: stretch;
}
.password-strength-meter .bar-container {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4, 4px);
  flex: 1 0;
}
.password-strength-meter .bar-container .bar {
  height: 4px;
  flex: 1 0;
  border-radius: var(--border-radius-circle, 1000px);
  background: var(--color-bg-neutral-subtle-enabled, #F5F6F7);
}
.password-strength-meter .bar-container .bar.weak {
  background: var(--color-bg-danger-enabled, #D22D2D);
}
.password-strength-meter .bar-container .bar.medium {
  background: var(--color-bg-update-enabled, #F9C517);
}
.password-strength-meter .bar-container .bar.strong {
  background: var(--color-bg-success-enabled, #28A745);
}
.password-strength-meter .strength-text {
  font-family: var(--font-family-label), serif;
  font-size: var(--typography-size-label, 12px);
  font-style: normal;
  font-weight: var(--typography-weight-label, 600);
  line-height: var(--typography-lineHeight-label, 16px);
  color: var(--color-bg-neutral-subtle-enabled, #F5F6F7);
  text-align: right;
}
.password-strength-meter .strength-text.weak {
  color: var(--color-bg-danger-enabled, #D22D2D);
}
.password-strength-meter .strength-text.medium {
  color: var(--color-bg-update-enabled, #F9C517);
}
.password-strength-meter .strength-text.strong {
  color: var(--color-bg-success-enabled, #28A745);
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.linear-progress-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: #fff;
}
.linear-progress-indicator .backward-arrow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
  padding: 4px;
  /* filled bg color */
  background: var(--color-bg-brand-subtle-enabled, #EFFAF8);
  color: var(--color-text-brand-default, #5DCDB5);
  background: #fff;
  left: 0;
  position: absolute;
}
.linear-progress-indicator .backward-arrow:focus-visible {
  outline: none;
}
.linear-progress-indicator .backward-arrow:is(a) {
  text-decoration: none;
}
.linear-progress-indicator .backward-arrow:disabled {
  cursor: default;
}
.linear-progress-indicator .backward-arrow:hover {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
}
.linear-progress-indicator .backward-arrow:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.linear-progress-indicator .progress-bar {
  display: flex;
  width: var(--safezone-width, 90vw);
  max-width: 480px;
  flex-direction: row;
  align-items: flex-start;
  height: 4px;
  background: var(--color-bg-selected, #EBECEE);
}
.linear-progress-indicator .progress-bar .passed {
  display: flex;
  height: 4px;
  align-items: flex-start;
  min-width: 5px;
  transition: all 3s;
  background: var(--color-bg-brand-enabled, #5DCDB5);
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.tf-profile-signup-user-info {
  width: var(--safezone-width, 90vw);
  max-width: 480px;
}
.tf-profile-signup-user-info #signupConfirmationForm {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: var(--spacing-16, 16px);
  align-self: stretch;
}
.tf-profile-signup-user-info #signupConfirmationForm .form-inputs {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-16, 16px);
  align-self: stretch;
}
.tf-profile-signup-user-info #signupConfirmationForm .form-inputs .form-input-split-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8, 8px);
  flex: 1 0;
  max-width: 100%;
}
.tf-profile-signup-user-info #signupConfirmationForm .form-inputs .form-input-split-container .field-error {
  margin-top: -6px;
}
.tf-profile-signup-user-info #signupConfirmationForm label {
  font-family: var(--font-family-label), serif;
  font-size: var(--typography-size-label, 12px);
  font-style: normal;
  font-weight: var(--typography-weight-label, 600);
  line-height: var(--typography-lineHeight-label, 16px);
  display: flex;
  min-width: 80px;
  align-items: center;
  gap: var(--spacing-4, 4px);
  color: var(--color-text-default, #2F3E52);
}
.tf-profile-signup-user-info #signupConfirmationForm .optional {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  color: var(--color-text-subtlest, #A2A9B3);
}
.tf-profile-signup-user-info #signupConfirmationForm .field-first-name, .tf-profile-signup-user-info #signupConfirmationForm .field-last-name, .tf-profile-signup-user-info #signupConfirmationForm .field-username, .tf-profile-signup-user-info #signupConfirmationForm .field-job-position {
  border-color: var(--color-outline-subtlest, #EBECEE);
  font-family: var(--font-family-body), serif;
  border-radius: var(--border-radius-none, 0px);
  border: 1px solid var(--color-outline-subtlest2, #E3E5E8);
  background: #fff;
  display: flex;
  height: var(--font-lineHeight-40, 40px);
  padding: 0 var(--spacing-8, 8px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.tf-profile-signup-user-info #signupConfirmationForm .field-first-name::placeholder, .tf-profile-signup-user-info #signupConfirmationForm .field-last-name::placeholder, .tf-profile-signup-user-info #signupConfirmationForm .field-username::placeholder, .tf-profile-signup-user-info #signupConfirmationForm .field-job-position::placeholder {
  color: var(--color-text-subtlest, #A2A9B3);
}
.tf-profile-signup-user-info #signupConfirmationForm .field-first-name:focus, .tf-profile-signup-user-info #signupConfirmationForm .field-first-name:focus-visible, .tf-profile-signup-user-info #signupConfirmationForm .field-last-name:focus, .tf-profile-signup-user-info #signupConfirmationForm .field-last-name:focus-visible, .tf-profile-signup-user-info #signupConfirmationForm .field-username:focus, .tf-profile-signup-user-info #signupConfirmationForm .field-username:focus-visible, .tf-profile-signup-user-info #signupConfirmationForm .field-job-position:focus, .tf-profile-signup-user-info #signupConfirmationForm .field-job-position:focus-visible {
  border: var(--border-width-1, 1px) solid var(--color-outline-brand-default, #5DCDB5);
  outline: none;
}
.tf-profile-signup-user-info #signupConfirmationForm .field-first-name.error, .tf-profile-signup-user-info #signupConfirmationForm .field-last-name.error, .tf-profile-signup-user-info #signupConfirmationForm .field-username.error, .tf-profile-signup-user-info #signupConfirmationForm .field-job-position.error {
  border: 1px solid var(--color-outline-danger-default, #D22D2D);
}
.tf-profile-signup-user-info #signupConfirmationForm .field-first-name:disabled, .tf-profile-signup-user-info #signupConfirmationForm .field-last-name:disabled, .tf-profile-signup-user-info #signupConfirmationForm .field-username:disabled, .tf-profile-signup-user-info #signupConfirmationForm .field-job-position:disabled {
  border: var(--border-width-1, 1px) solid var(--color-outline-default, #5D697B);
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
}
.tf-profile-signup-user-info #signupConfirmationForm .field-first-name:hover:not(:focus):not(:focus-visible), .tf-profile-signup-user-info #signupConfirmationForm .field-last-name:hover:not(:focus):not(:focus-visible), .tf-profile-signup-user-info #signupConfirmationForm .field-username:hover:not(:focus):not(:focus-visible), .tf-profile-signup-user-info #signupConfirmationForm .field-job-position:hover:not(:focus):not(:focus-visible) {
  border: 1px solid var(--color-outline-default, #5D697B);
  background: var(--color-bg-default, #F5F6F7);
}
.tf-profile-signup-user-info #signupConfirmationForm .field-error {
  font-family: var(--font-family-label), serif;
  font-size: var(--typography-size-label, 12px);
  font-style: normal;
  font-weight: var(--typography-weight-label, 600);
  line-height: var(--typography-lineHeight-label, 16px);
  color: #B50404;
  width: 100%;
  margin-top: -14px;
}
.tf-profile-signup-user-info #signupConfirmationForm .tf-signup-field-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.tf-profile-signup-user-info #signupConfirmationForm .tf-signup-what-describe-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-2, 2px);
  align-self: stretch;
}
.tf-profile-signup-user-info #signupConfirmationForm .tf-signup-what-describe-container .title {
  font-family: var(--font-family-label), serif;
  font-size: var(--typography-size-label, 12px);
  font-style: normal;
  font-weight: var(--typography-weight-label, 600);
  line-height: var(--typography-lineHeight-label, 16px);
  color: var(--color-text-default, #2F3E52);
}
.tf-profile-signup-user-info #signupConfirmationForm .tf-signup-what-describe-container .notes {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body4-.. */
  font-size: var(--typography-size-body4, 11px);
  line-height: var(--typography-lineHeight-body4, 16px);
  font-weight: var(--typography-weight-body4-regular, 400);
  color: var(--color-text-subtle, #5D697B);
}
.tf-profile-signup-user-info #signupConfirmationForm .tf-signup-descriptions {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  gap: 4px var(--spacing-4, 4px);
  align-self: stretch;
  flex-wrap: wrap;
}
.tf-profile-signup-user-info #signupConfirmationForm .tf-signup-descriptions .chip {
  cursor: pointer;
  display: flex;
  padding: var(--spacing-4, 4px) var(--spacing-8, 8px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-2, 2px);
  border-radius: var(--border-radius-circle, 1000px);
  border: 1px solid var(--color-bg-default, #F5F6F7);
  background: var(--color-bg-default, #F5F6F7);
}
.tf-profile-signup-user-info #signupConfirmationForm .tf-signup-descriptions .chip .text {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  color: var(--color-text-default, #2F3E52);
  text-align: center;
}
.tf-profile-signup-user-info #signupConfirmationForm .tf-signup-descriptions .chip.selected {
  border: 1px solid var(--color-outline-brand-default, #5DCDB5);
  background: var(--color-bg-brand-subtle-enabled, #EFFAF8);
}
.tf-profile-signup-user-info #signupConfirmationForm #sign-up-user-info-next {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-brand-enabled, #5DCDB5);
  color: var(--color-text-bold, #1D2532);
  text-transform: uppercase;
  display: flex;
  padding: var(--spacing-12, 12px) var(--spacing-16, 16px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.tf-profile-signup-user-info #signupConfirmationForm #sign-up-user-info-next:focus-visible {
  outline: none;
}
.tf-profile-signup-user-info #signupConfirmationForm #sign-up-user-info-next:is(a) {
  text-decoration: none;
}
.tf-profile-signup-user-info #signupConfirmationForm #sign-up-user-info-next:disabled {
  cursor: default;
}
.tf-profile-signup-user-info #signupConfirmationForm #sign-up-user-info-next:hover {
  background: var(--color-bg-brand-hovered, #92DECD);
}
.tf-profile-signup-user-info #signupConfirmationForm #sign-up-user-info-next:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.tf-profile-signup-org-info {
  width: var(--safezone-width, 90vw);
  max-width: 480px;
}
.tf-profile-signup-org-info #signupOrgInfoForm {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: var(--spacing-16, 16px);
  align-self: stretch;
}
.tf-profile-signup-org-info #signupOrgInfoForm label {
  font-family: var(--font-family-label), serif;
  font-size: var(--typography-size-label, 12px);
  font-style: normal;
  font-weight: var(--typography-weight-label, 600);
  line-height: var(--typography-lineHeight-label, 16px);
  display: flex;
  min-width: 80px;
  align-items: center;
  gap: var(--spacing-4, 4px);
  color: var(--color-text-default, #2F3E52);
}
.tf-profile-signup-org-info #signupOrgInfoForm .field-org-name {
  border-color: var(--color-outline-subtlest, #EBECEE);
  font-family: var(--font-family-body), serif;
  border-radius: var(--border-radius-none, 0px);
  border: 1px solid var(--color-outline-subtlest2, #E3E5E8);
  background: #fff;
  display: flex;
  height: var(--font-lineHeight-40, 40px);
  padding: 0 var(--spacing-8, 8px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.tf-profile-signup-org-info #signupOrgInfoForm .field-org-name::placeholder {
  color: var(--color-text-subtlest, #A2A9B3);
}
.tf-profile-signup-org-info #signupOrgInfoForm .field-org-name:focus, .tf-profile-signup-org-info #signupOrgInfoForm .field-org-name:focus-visible {
  border: var(--border-width-1, 1px) solid var(--color-outline-brand-default, #5DCDB5);
  outline: none;
}
.tf-profile-signup-org-info #signupOrgInfoForm .field-org-name.error {
  border: 1px solid var(--color-outline-danger-default, #D22D2D);
}
.tf-profile-signup-org-info #signupOrgInfoForm .field-org-name:disabled {
  border: var(--border-width-1, 1px) solid var(--color-outline-default, #5D697B);
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
}
.tf-profile-signup-org-info #signupOrgInfoForm .field-org-name:hover:not(:focus):not(:focus-visible) {
  border: 1px solid var(--color-outline-default, #5D697B);
  background: var(--color-bg-default, #F5F6F7);
}
.tf-profile-signup-org-info #signupOrgInfoForm .field-alias-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
}
.tf-profile-signup-org-info #signupOrgInfoForm .field-alias-container .notes {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body4-.. */
  font-size: var(--typography-size-body4, 11px);
  line-height: var(--typography-lineHeight-body4, 16px);
  font-weight: var(--typography-weight-body4-regular, 400);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4, 4px);
  align-self: stretch;
  width: 97%;
  color: var(--color-text-subtlest, #A2A9B3);
}
.tf-profile-signup-org-info #signupOrgInfoForm .field-alias-container .field-alias {
  font-family: var(--font-family-body), serif;
  border-radius: var(--border-radius-none, 0px);
  border: 1px solid var(--color-outline-subtlest2, #E3E5E8);
  background: #fff;
  display: flex;
  height: var(--font-lineHeight-40, 40px);
  padding: 0 var(--spacing-8, 8px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
  flex-flow: wrap;
  height: unset;
  background: var(--color-bg-default, #F5F6F7);
  border-radius: var(--border-radius-none, 0px);
  border: 1px solid var(--color-outline-subtlest, #EBECEE);
}
.tf-profile-signup-org-info #signupOrgInfoForm .field-alias-container .field-alias::placeholder {
  color: var(--color-text-subtlest, #A2A9B3);
}
.tf-profile-signup-org-info #signupOrgInfoForm .field-alias-container .field-alias:focus, .tf-profile-signup-org-info #signupOrgInfoForm .field-alias-container .field-alias:focus-visible {
  border: var(--border-width-1, 1px) solid var(--color-outline-brand-default, #5DCDB5);
  outline: none;
}
.tf-profile-signup-org-info #signupOrgInfoForm .field-alias-container .field-alias.error {
  border: 1px solid var(--color-outline-danger-default, #D22D2D);
}
.tf-profile-signup-org-info #signupOrgInfoForm .field-alias-container .field-alias:disabled {
  border: var(--border-width-1, 1px) solid var(--color-outline-default, #5D697B);
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
}
.tf-profile-signup-org-info #signupOrgInfoForm .field-alias-container .field-alias:hover:not(:focus):not(:focus-visible) {
  border: 1px solid var(--color-outline-default, #5D697B);
  background: var(--color-bg-default, #F5F6F7);
}
.tf-profile-signup-org-info #signupOrgInfoForm .field-alias-container .prefix {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  height: 38px;
  display: flex;
  padding: 0px var(--spacing-8, 8px);
  align-items: center;
  gap: var(--spacing-4, 4px);
  align-self: stretch;
  color: var(--color-text-default, #2F3E52);
}
.tf-profile-signup-org-info #signupOrgInfoForm .field-alias-container .input {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  height: 38px;
  display: flex;
  padding: 0px var(--spacing-8, 8px);
  justify-content: center;
  align-items: center;
  flex: 1 0;
  align-self: stretch;
  text-align: left;
  border: none;
  outline: none;
  border-right: 0.5px solid var(--color-outline-subtlest, #EBECEE);
  border-left: 0.5px solid var(--color-outline-subtlest, #EBECEE);
  background: var(--color-bg-inverse, #FFF);
  color: var(--color-text-default, #2F3E52);
}
.tf-profile-signup-org-info #signupOrgInfoForm .field-alias-container .suffix {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  height: 38px;
  display: flex;
  padding-left: var(--spacing-4, 4px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
  color: var(--color-text-default, #2F3E52);
}
.tf-profile-signup-org-info #signupOrgInfoForm .field-alias-container .field-error {
  margin-top: -4px;
}
.tf-profile-signup-org-info #signupOrgInfoForm .field-error {
  font-family: var(--font-family-label), serif;
  font-size: var(--typography-size-label, 12px);
  font-style: normal;
  font-weight: var(--typography-weight-label, 600);
  line-height: var(--typography-lineHeight-label, 16px);
  color: #B50404;
  width: 100%;
  margin-top: -14px;
}
.tf-profile-signup-org-info #signupOrgInfoForm .tf-signup-field-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.tf-profile-signup-org-info #signupOrgInfoForm #sign-up-org-info-next {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-brand-enabled, #5DCDB5);
  color: var(--color-text-bold, #1D2532);
  text-transform: uppercase;
  display: flex;
  padding: var(--spacing-12, 12px) var(--spacing-16, 16px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.tf-profile-signup-org-info #signupOrgInfoForm #sign-up-org-info-next:focus-visible {
  outline: none;
}
.tf-profile-signup-org-info #signupOrgInfoForm #sign-up-org-info-next:is(a) {
  text-decoration: none;
}
.tf-profile-signup-org-info #signupOrgInfoForm #sign-up-org-info-next:disabled {
  cursor: default;
}
.tf-profile-signup-org-info #signupOrgInfoForm #sign-up-org-info-next:hover {
  background: var(--color-bg-brand-hovered, #92DECD);
}
.tf-profile-signup-org-info #signupOrgInfoForm #sign-up-org-info-next:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.tf-profile-signup-purpose-info {
  width: var(--safezone-width, 90vw);
  max-width: 480px;
}
.tf-profile-signup-purpose-info #signupPurposeInfoForm {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-16, 16px);
  align-self: stretch;
}
.tf-profile-signup-purpose-info #signupPurposeInfoForm .preferences {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-16, 16px);
  align-self: stretch;
}
.tf-profile-signup-purpose-info #signupPurposeInfoForm .preferences .checkbox {
  cursor: pointer;
  display: flex;
  padding: var(--spacing-16, 16px);
  align-items: center;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
  border-radius: var(--border-radius-none, 0px);
  border: 1px solid var(--color-outline-subtlest, #EBECEE);
  background: var(--color-bg-inverse, #FFF);
}
.tf-profile-signup-purpose-info #signupPurposeInfoForm .preferences .checkbox:hover {
  border: var(--border-width-1, 1px) solid var(--color-outline-brand-subtle, #92DECD);
}
.tf-profile-signup-purpose-info #signupPurposeInfoForm .preferences .checkbox.selected {
  border: 1px solid var(--color-outline-brand-subtle, #92DECD);
  background: var(--color-bg-brand-subtle-enabled, #EFFAF8);
}
.tf-profile-signup-purpose-info #signupPurposeInfoForm .preferences .checkbox .icon-checkbox {
  display: flex;
  width: var(--font-lineHeight-20, 20px);
  height: var(--font-lineHeight-20, 20px);
  justify-content: center;
  align-items: center;
  border-radius: var(--border-radius-2, 2px);
}
.tf-profile-signup-purpose-info #signupPurposeInfoForm .preferences .checkbox .checkbox-text-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-4, 4px);
  flex: 1 0;
}
.tf-profile-signup-purpose-info #signupPurposeInfoForm .preferences .checkbox .checkbox-text-container .text {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-medium, 500);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  flex: 1 0;
  color: var(--color-text-default, #2F3E52);
}
.tf-profile-signup-purpose-info #signupPurposeInfoForm label {
  font-family: var(--font-family-label), serif;
  font-size: var(--typography-size-label, 12px);
  font-style: normal;
  font-weight: var(--typography-weight-label, 600);
  line-height: var(--typography-lineHeight-label, 16px);
  display: flex;
  min-width: 80px;
  align-items: center;
  gap: var(--spacing-4, 4px);
  background: var(--color-bg-default, #F5F6F7);
  color: var(--color-text-default, #2F3E52);
}
.tf-profile-signup-purpose-info #signupPurposeInfoForm .field-org-name {
  border-color: var(--color-outline-subtlest, #EBECEE);
  font-family: var(--font-family-body), serif;
  border-radius: var(--border-radius-none, 0px);
  border: 1px solid var(--color-outline-subtlest2, #E3E5E8);
  background: #fff;
  display: flex;
  height: var(--font-lineHeight-40, 40px);
  padding: 0 var(--spacing-8, 8px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.tf-profile-signup-purpose-info #signupPurposeInfoForm .field-org-name::placeholder {
  color: var(--color-text-subtlest, #A2A9B3);
}
.tf-profile-signup-purpose-info #signupPurposeInfoForm .field-org-name:focus, .tf-profile-signup-purpose-info #signupPurposeInfoForm .field-org-name:focus-visible {
  border: var(--border-width-1, 1px) solid var(--color-outline-brand-default, #5DCDB5);
  outline: none;
}
.tf-profile-signup-purpose-info #signupPurposeInfoForm .field-org-name.error {
  border: 1px solid var(--color-outline-danger-default, #D22D2D);
}
.tf-profile-signup-purpose-info #signupPurposeInfoForm .field-org-name:disabled {
  border: var(--border-width-1, 1px) solid var(--color-outline-default, #5D697B);
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
}
.tf-profile-signup-purpose-info #signupPurposeInfoForm .field-org-name:hover:not(:focus):not(:focus-visible) {
  border: 1px solid var(--color-outline-default, #5D697B);
  background: var(--color-bg-default, #F5F6F7);
}
.tf-profile-signup-purpose-info #signupPurposeInfoForm .field-error {
  font-family: var(--font-family-label), serif;
  font-size: var(--typography-size-label, 12px);
  font-style: normal;
  font-weight: var(--typography-weight-label, 600);
  line-height: var(--typography-lineHeight-label, 16px);
  color: #B50404;
  width: 100%;
  margin-top: -14px;
}
.tf-profile-signup-purpose-info #signupPurposeInfoForm .tf-signup-field-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.tf-profile-signup-purpose-info #signupPurposeInfoForm #sign-up-purpose-info-next {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-brand-enabled, #5DCDB5);
  color: var(--color-text-bold, #1D2532);
  text-transform: uppercase;
  display: flex;
  padding: var(--spacing-12, 12px) var(--spacing-16, 16px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.tf-profile-signup-purpose-info #signupPurposeInfoForm #sign-up-purpose-info-next:focus-visible {
  outline: none;
}
.tf-profile-signup-purpose-info #signupPurposeInfoForm #sign-up-purpose-info-next:is(a) {
  text-decoration: none;
}
.tf-profile-signup-purpose-info #signupPurposeInfoForm #sign-up-purpose-info-next:disabled {
  cursor: default;
}
.tf-profile-signup-purpose-info #signupPurposeInfoForm #sign-up-purpose-info-next:hover {
  background: var(--color-bg-brand-hovered, #92DECD);
}
.tf-profile-signup-purpose-info #signupPurposeInfoForm #sign-up-purpose-info-next:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.tf-profile-signup-greetings {
  width: var(--safezone-width, 90vw);
  max-width: 480px;
}
.tf-profile-signup-greetings .greetings-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.tf-profile-signup-greetings .greetings-container .confetti {
  position: absolute;
  margin-top: -160px;
}
.tf-profile-signup-greetings .greetings-container .text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.tf-profile-signup-greetings .greetings-container .text-container .title-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--spacing-4, 4px);
  align-self: stretch;
  flex-flow: wrap;
}
.tf-profile-signup-greetings .greetings-container .text-container .title-container .title {
  color: var(--color-text-default, #2F3E52);
  text-align: center;
}
@media screen and (min-width: 480px) {
  .tf-profile-signup-greetings .greetings-container .text-container .title-container .title {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading5, 20px);
    line-height: var(--typography-lineHeight-heading5, 24px);
  }
}
@media screen and (max-width: 479.98px) {
  .tf-profile-signup-greetings .greetings-container .text-container .title-container .title {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading5-m, 16px);
    line-height: var(--typography-lineHeight-heading5-m, 20px);
  }
}
.tf-profile-signup-greetings .greetings-container .text-container .text {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  color: var(--color-text-subtle, #5D697B);
  text-align: center;
}
.tf-profile-signup-greetings .modal-wizard-body {
  gap: 24px;
  margin-top: 4px;
}
.tf-profile-signup-greetings #sign-up-greetings-next {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-brand-enabled, #5DCDB5);
  color: var(--color-text-bold, #1D2532);
  text-transform: uppercase;
  display: flex;
  padding: var(--spacing-12, 12px) var(--spacing-16, 16px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.tf-profile-signup-greetings #sign-up-greetings-next:focus-visible {
  outline: none;
}
.tf-profile-signup-greetings #sign-up-greetings-next:is(a) {
  text-decoration: none;
}
.tf-profile-signup-greetings #sign-up-greetings-next:disabled {
  cursor: default;
}
.tf-profile-signup-greetings #sign-up-greetings-next:hover {
  background: var(--color-bg-brand-hovered, #92DECD);
}
.tf-profile-signup-greetings #sign-up-greetings-next:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.home-hero {
  width: 100vw;
  max-width: 1440px;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  border-radius: var(--border-radius-none, 0px);
  background: var(--color-bg-inverse, #FFF);
  padding: 32px 24px 64px 24px;
}
@media screen and (min-width: 960px) {
  .home-hero {
    padding: 32px 160px 64px 160px;
  }
}
@media screen and (min-width: 480px) {
  .home-hero {
    gap: var(--spacing-64, 64px) var(--spacing-64, 64px) 0;
  }
  .home-hero .g2-widget {
    padding-bottom: 64px;
  }
}
.home-hero .landing-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  margin: 0 auto;
}
.home-hero .landing-section .rating-label {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4, 4px);
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: center;
}
.home-hero .landing-section .rating-label .tag {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-2 */
  font-size: var(--typography-size-caption2);
  font-weight: var(--typography-weight-caption2);
  line-height: var(--typography-lineHeight-caption2);
  display: flex;
  padding: var(--spacing-4, 4px) var(--spacing-8, 8px);
  align-items: center;
  gap: var(--spacing-2, 2px);
  border-radius: var(--border-radius-8, 8px);
  background: var(--color-bg-warning-enabled, #FF7E25);
  color: var(--color-text-inverse, #FFF);
  text-align: center;
}
.home-hero .landing-section .rating-label .text-tag {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  background: var(--color-bg-warning-subtle-enabled);
  color: var(--color-text-warning-default);
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-2 */
  font-size: var(--typography-size-caption2);
  font-weight: var(--typography-weight-caption2);
  line-height: var(--typography-lineHeight-caption2);
  max-width: 70vw;
  display: flex;
  padding: var(--spacing-4, 4px) var(--spacing-8, 8px);
  align-items: center;
  gap: var(--spacing-2, 2px);
  border-radius: var(--border-radius-8, 8px);
  background: var(--color-bg-warning-subtle-enabled, #FFF9F5);
  text-align: center;
}
.home-hero .landing-section .rating-label .text-tag .link-tag {
  color: var(--color-text-warning-default, #FF7E25);
  text-decoration: underline;
}
.home-hero .landing-section .rating-label .video-tag {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  text-align: center;
  height: 16px;
  box-sizing: border-box;
  padding: 0 4px;
  background: var(--color-bg-info-subtle-enabled);
  color: var(--color-text-info-default);
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-2 */
  font-size: var(--typography-size-caption2);
  font-weight: var(--typography-weight-caption2);
  line-height: var(--typography-lineHeight-caption2);
  padding: 4px 8px;
  text-transform: none !important;
  border-radius: var(--border-radius-8, 8px);
  line-height: var(--typography-lineHeight-body3, 16px);
  text-decoration: underline;
}
.home-hero .landing-section .heading {
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-12, 12px);
  align-self: stretch;
}
.home-hero .landing-section .heading h1 {
  font-family: var(--font-family-heading);
  font-style: normal;
  font-weight: var(--typography-weight-heading, 600);
  font-size: var(--typography-size-heading3, 32px);
  line-height: var(--typography-lineHeight-heading3, 40px);
  font-family: var(--font-clash-display);
  color: var(--color-text-brand-default, #5DCDB5);
  text-align: center;
  display: inline;
}
.home-hero .landing-section .heading h1 .static-label {
  color: var(--color-text-bold, #1D2532);
  margin-right: 10px;
}
.home-hero .landing-section .heading h1 .rotating-label {
  position: relative;
  display: inline-block;
  overflow: visible;
  vertical-align: bottom;
  text-align: start;
  transition: width 0.7s ease;
}
.home-hero .landing-section .heading h1 .rotating-label .label {
  top: 0;
  opacity: 1;
  transform: translateY(0);
  will-change: transform, opacity;
}
.home-hero .landing-section .heading h1 .rotating-label .label.measure {
  position: absolute;
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;
}
.home-hero .landing-section .heading h1 .rotating-label .label.current {
  position: relative;
  display: inline-block;
}
.home-hero .landing-section .heading h1 .rotating-label .label.next {
  position: absolute;
  left: 0;
}
.home-hero .landing-section .heading h1 .rotating-label .label.enter {
  animation: rotate-label-enter 0.7s ease forwards;
}
.home-hero .landing-section .heading h1 .rotating-label .label.exit {
  animation: rotate-label-exit 0.7s ease forwards;
}
.home-hero .landing-section .heading h2 {
  font-family: var(--font-family-body, "Montserrat");
  font-style: normal;
  font-weight: var(--typography-weight-body-regular, 400);
  font-size: var(--typography-size-body1, 16px);
  line-height: var(--typography-lineHeight-body1, 24px);
  color: var(--color-text-subtle, #5D697B);
  text-align: center;
}
@media screen and (min-width: 480px) and (max-width: 959.98px) {
  .home-hero .landing-section .heading h1 {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading2, 48px);
    line-height: var(--typography-lineHeight-heading2, 64px);
    font-family: var(--font-clash-display);
  }
  .home-hero .landing-section .heading h2 {
    font-family: var(--font-family-body, "Montserrat");
    font-style: normal;
    font-weight: var(--typography-weight-body-regular, 400);
    font-size: var(--typography-size-body2, 14px);
    line-height: var(--typography-lineHeight-body2, 20px);
  }
}
@media screen and (min-width: 960px) {
  .home-hero .landing-section .heading h1 {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading1, 64px);
    line-height: var(--typography-lineHeight-heading1, 80px);
    font-family: var(--font-clash-display);
  }
  .home-hero .landing-section .heading h2 {
    font-family: var(--font-family-body, "Montserrat");
    font-style: normal;
    font-weight: var(--typography-weight-body-regular, 400);
    font-size: var(--typography-size-body1, 16px);
    line-height: var(--typography-lineHeight-body1, 24px);
  }
}
.home-hero .landing-section .button-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-8, 8px);
}
.home-hero .landing-section .button-group .button-start-now {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-neutral-bold-enabled, #253040);
  color: var(--color-text-inverse, #FFF);
  text-decoration: none;
  text-transform: uppercase;
  display: flex;
  padding: var(--spacing-8, 8px) var(--spacing-16, 16px);
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  background: var(--color-bg-neutral-bold-enabled, #253040);
}
.home-hero .landing-section .button-group .button-start-now:focus-visible {
  outline: none;
}
.home-hero .landing-section .button-group .button-start-now:is(a) {
  text-decoration: none;
}
.home-hero .landing-section .button-group .button-start-now:disabled {
  cursor: default;
}
.home-hero .landing-section .button-group .button-start-now:hover {
  background: var(--color-bg-neutral-bold-hovered, #2F3E52);
}
.home-hero .landing-section .button-group .button-start-now:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.home-hero .landing-section .button-group .button-download-apps {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  background: none;
  padding: 7px 16px;
  /* outlined border color */
  border: 1px solid var(--color-outline-bold, #2F3E52);
  color: var(--color-text-default, #2F3E52);
  display: flex;
  border-radius: var(--border-radius-4, 4px);
  padding: var(--spacing-7, 7px) var(--spacing-16, 16px);
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--spacing-4, 4px);
}
.home-hero .landing-section .button-group .button-download-apps:focus-visible {
  outline: none;
}
.home-hero .landing-section .button-group .button-download-apps:is(a) {
  text-decoration: none;
}
.home-hero .landing-section .button-group .button-download-apps:disabled {
  cursor: default;
}
.home-hero .landing-section .button-group .button-download-apps:hover {
  border: 1px solid var(--color-outline-default, #5D697B);
  color: var(--color-text-subtle, #5D697B);
}
.home-hero .landing-section .button-group .button-download-apps:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.home-hero .landing-section .g2-widget {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 16px;
  align-self: stretch;
  flex-wrap: wrap;
}
.home-hero:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: linear-gradient(180deg, rgba(160, 244, 226, 0) 0%, rgba(205, 240, 232, 0.5) 100%);
  height: 96px;
}

@keyframes rotate-label-enter {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  70% {
    transform: translateY(2px);
    opacity: 1;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes rotate-label-exit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.hero-video-poster {
  position: relative;
  aspect-ratio: 16/9;
  align-content: center;
}
.hero-video-poster .composite-poster {
  display: grid;
  grid-template-columns: 1fr 2.24fr 1fr;
  align-items: center;
}
.hero-video-poster .composite-poster .poster {
  z-index: 1;
  position: relative;
  overflow: clip;
  background: lightgray 50%/cover no-repeat;
  box-shadow: 0 0 37.6px 4px rgba(93, 205, 181, 0.12);
}
.hero-video-poster .composite-poster .poster img {
  width: inherit;
  height: auto;
}
.hero-video-poster .composite-poster .poster:not(:first-child) {
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}
.hero-video-poster .composite-poster .poster:not(:last-child) {
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}
@media screen and (min-width: 480px) and (max-width: 959.98px) {
  .hero-video-poster .composite-poster .poster:not(:first-child) {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  .hero-video-poster .composite-poster .poster:not(:last-child) {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }
}
@media screen and (max-width: 479.98px) {
  .hero-video-poster .composite-poster .poster:not(:first-child) {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .hero-video-poster .composite-poster .poster:not(:last-child) {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
}
.hero-video-poster .bg-gradient {
  z-index: 0;
  position: absolute;
  height: 85%;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  border-radius: 23px;
  opacity: 0.6;
  background: linear-gradient(90deg, #5DCDB5 0%, #957FFB 100%);
  filter: blur(80px);
}
.hero-video-poster .video-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.hero-video-poster .video-play-button .video-play-pulse-outer {
  cursor: pointer;
  background: transparent;
  padding: 0;
  outline: 0;
  margin: 0;
  border-radius: var(--border-radius-circle, 1000px);
  -webkit-animation: pulse-outside 2s ease-in-out infinite;
  -moz-animation: pulse-outside 2s ease-in-out infinite;
  -o-animation: pulse-outside 2s ease-in-out infinite;
}
.hero-video-poster .video-play-button .video-play-pulse-outer .video-play-pulse-inner {
  display: flex;
  border-radius: var(--border-radius-circle, 1000px);
  background: #fff;
  -webkit-animation: pulse-inner 2s ease-in-out infinite;
  -moz-animation: pulse-inner 2s ease-in-out infinite;
  -o-animation: pulse-inner 2s ease-in-out infinite;
}
.hero-video-poster .video-play-button .video-play-pulse-outer .video-play-pulse-inner img {
  -webkit-animation: pulse 2s ease-in-out infinite;
  -moz-animation: pulse 2s ease-in-out infinite;
  -o-animation: pulse 2s ease-in-out infinite;
}
.hero-video-poster .hero-video {
  position: relative;
  z-index: 4;
  display: none;
}
.hero-video-poster .hero-video video {
  width: 100%;
}
.hero-video-poster.playing .hero-video {
  display: flex;
}
.hero-video-poster.playing .composite-poster, .hero-video-poster.playing .video-play-button {
  display: none;
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.home-how-it-works {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0 var(--spacing-64, 64px);
  align-self: stretch;
  padding: 0 var(--spacing-32, 32px);
}
.home-how-it-works > * {
  z-index: 1;
}
.home-how-it-works .heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4, 4px);
  align-self: stretch;
  margin-top: 64px;
}
@media screen and (min-width: 480px) {
  .home-how-it-works .heading {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading2, 48px);
    line-height: var(--typography-lineHeight-heading2, 64px);
  }
}
@media screen and (max-width: 479.98px) {
  .home-how-it-works .heading {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading2-m, 32px);
    line-height: var(--typography-lineHeight-heading2-m, 40px);
  }
}
.home-how-it-works .heading h2 {
  color: var(--color-text-bold, #1D2532);
  text-align: center;
  font-family: var(--font-clash-display), sans-serif;
  font-size: 32px;
  line-height: 40px;
  font-weight: 600;
  font-style: normal;
}
.home-how-it-works .heading h2 .heading-green {
  color: var(--color-text-brand-default, #5DCDB5);
  font-family: var(--font-clash-display), sans-serif;
  font-size: 32px;
  line-height: 40px;
  font-weight: 600;
  font-style: normal;
}
@media screen and (min-width: 480px) and (max-width: 959.98px) {
  .home-how-it-works {
    padding: 0 var(--spacing-32, 32px);
  }
}
@media screen and (min-width: 960px) {
  .home-how-it-works {
    padding: 0 160px 32px 160px;
  }
  .home-how-it-works .heading h2 {
    font-size: var(--typography-size-heading2, 48px);
    font-weight: 600;
    line-height: var(--typography-lineHeight-heading2, 64px);
  }
  .home-how-it-works .heading h2 .heading-green {
    font-size: var(--typography-size-heading2, 48px);
    font-weight: 600;
    line-height: var(--typography-lineHeight-heading2, 64px);
  }
}
.home-how-it-works:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: linear-gradient(0deg, rgba(160, 244, 226, 0) 0%, rgba(205, 240, 232, 0.5) 100%);
  height: 96px;
}
.home-how-it-works:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: linear-gradient(180deg, rgba(160, 244, 226, 0) 0%, rgba(205, 240, 232, 0.5) 100%);
  height: 96px;
}
.home-how-it-works .sequence-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  color: var(--color-text-default);
  overflow: hidden;
}
.home-how-it-works .sequence-diagram .sequence-diagram-line {
  transform: rotate(90deg);
  margin: 4px 0 8px 0;
}
@media screen and (min-width: 960px) {
  .home-how-it-works .sequence-diagram {
    flex-direction: row;
    transform: none;
    gap: 0;
  }
  .home-how-it-works .sequence-diagram .sequence-diagram-line {
    transform: rotate(0);
  }
}
.home-how-it-works .sequence-diagram.generate-in-seconds .sequence-diagram-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
  width: 152px;
  height: 116px;
  font-size: 20px;
  font-weight: 700;
}
.home-how-it-works .sequence-diagram.automate-with-one-click {
  gap: 16px;
}
.home-how-it-works .sequence-diagram.automate-with-one-click .sequence-diagram-line {
  color: var(--color-outline-brand-bold);
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.home-why-us {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0 var(--spacing-64, 64px);
  align-self: stretch;
  background: white;
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px 24px 64px 24px;
}
.home-why-us .heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4, 4px);
  align-self: stretch;
  margin-top: 32px;
}
.home-why-us .heading h2 {
  font-family: var(--font-family-heading);
  font-style: normal;
  font-weight: var(--typography-weight-heading, 600);
  font-size: var(--typography-size-heading2-m, 32px);
  line-height: var(--typography-lineHeight-heading2-m, 40px);
  color: var(--color-text-bold, #1D2532);
  text-align: center;
  font-family: var(--font-clash-display);
  line-height: 40px;
  font-weight: 600;
  font-style: normal;
  padding-bottom: 32px;
}
.home-why-us .heading h2 .heading-green {
  color: var(--color-text-brand-default, #5DCDB5);
}
.home-why-us:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: linear-gradient(0deg, rgba(160, 244, 226, 0) 0%, rgba(205, 240, 232, 0.5) 100%);
  height: 96px;
}
@media screen and (min-width: 480px) and (max-width: 959.98px) {
  .home-why-us {
    padding: 0 var(--spacing-32, 32px);
  }
}
@media screen and (min-width: 960px) {
  .home-why-us {
    padding: 0 160px 0 160px;
    gap: 0 var(--spacing-64, 64px);
  }
  .home-why-us .heading h2 {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading2, 48px);
    line-height: var(--typography-lineHeight-heading2, 64px);
    font-family: var(--font-clash-display);
  }
}
.home-why-us .home-why-us-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media screen and (min-width: 960px) {
  .home-why-us .home-why-us-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 16px;
    gap: 16px;
  }
}
.home-why-us .home-why-us-cards .home-why-us-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border-radius: var(--border-radius-8, 8px);
  border: 1px solid var(--color-outline-subtlest, #EBECEE);
  background: var(--color-bg-inverse, #FFF);
}
.home-why-us .home-why-us-cards .home-why-us-card > * {
  position: relative;
  z-index: 1;
}
.home-why-us .home-why-us-cards .home-why-us-card .title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-default, #2F3E52);
  text-align: center;
}
@media screen and (min-width: 960px) {
  .home-why-us .home-why-us-cards .home-why-us-card .title {
    font-size: 24px;
  }
}
.home-why-us .home-why-us-cards .home-why-us-card .description {
  font-size: 14px;
  color: var(--color-text-default, #2F3E52);
  text-align: center;
}
.home-why-us .home-why-us-cards .home-why-us-card .bottom-left-bg, .home-why-us .home-why-us-cards .home-why-us-card .bottom-right-bg, .home-why-us .home-why-us-cards .home-why-us-card .top-left-bg, .home-why-us .home-why-us-cards .home-why-us-card .top-right-bg {
  position: absolute;
  z-index: 0;
  display: flex;
}
.home-why-us .home-why-us-cards .home-why-us-card .bottom-left-bg {
  bottom: 0;
  left: 0;
}
.home-why-us .home-why-us-cards .home-why-us-card .bottom-right-bg {
  bottom: 0;
  right: 0;
}
.home-why-us .home-why-us-cards .home-why-us-card .top-left-bg {
  top: 0;
  left: 0;
}
.home-why-us .home-why-us-cards .home-why-us-card .top-right-bg {
  top: 0;
  right: 0;
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.home-cta {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  position: relative;
  padding: 0 24px;
}
.home-cta > *:not(.wave-styler) {
  position: relative;
  z-index: 1;
}
.home-cta .cta-container {
  display: flex;
  max-width: 1120px;
  padding: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  margin: 0 auto 64px auto;
  width: 100%;
  text-align: center;
  border-radius: 16px;
  background: var(--Brand-Ultimate-Enabled, linear-gradient(90deg, #161D26 0%, #253040 37.87%, #015C53 94.67%));
}
.home-cta .cta-container .heading {
  font-family: var(--font-clash-display);
  font-style: normal;
  font-weight: var(--typography-weight-heading, 600);
  font-size: var(--typography-size-heading2-m, 32px);
  line-height: var(--typography-lineHeight-heading2-m, 40px);
  display: flex;
  padding: var(--spacing-none, 0px) 0px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  text-align: left;
  color: #FFF;
}
.home-cta .cta-container .heading .description {
  font-family: var(--font-family-body);
  font-size: 14px;
  font-weight: normal;
  color: var(--color-text-inverse);
  text-align: left;
  line-height: 20px;
}
.home-cta .cta-container .cta-group {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 8px var(--spacing-8, 8px);
  align-self: stretch;
  flex-wrap: wrap;
}
@media screen and (max-width: 479.98px) {
  .home-cta .cta-container .cta-group {
    flex-direction: column;
    align-items: stretch;
  }
  .home-cta .cta-container .cta-group > * {
    width: 100%;
  }
}
.home-cta .cta-container .cta-group .cta-get-started {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-brand-enabled, #5DCDB5);
  color: var(--color-text-bold, #1D2532);
  text-transform: uppercase;
}
.home-cta .cta-container .cta-group .cta-get-started:focus-visible {
  outline: none;
}
.home-cta .cta-container .cta-group .cta-get-started:is(a) {
  text-decoration: none;
}
.home-cta .cta-container .cta-group .cta-get-started:disabled {
  cursor: default;
}
.home-cta .cta-container .cta-group .cta-get-started:hover {
  background: var(--color-bg-brand-hovered, #92DECD);
}
.home-cta .cta-container .cta-group .cta-get-started:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.home-cta .cta-container .cta-group .cta-download {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  background: none;
  padding: 7px 16px;
  /* outlined border color */
  border: 1px solid var(--color-outline-brand-default, #5DCDB5);
  color: var(--color-text-brand-default, #5DCDB5);
  /* [TODO] assumption taken as not defined on design */
  text-transform: uppercase;
  color: var(--color-text-inverse);
  border-color: var(--color-outline-inverse);
}
.home-cta .cta-container .cta-group .cta-download:focus-visible {
  outline: none;
}
.home-cta .cta-container .cta-group .cta-download:is(a) {
  text-decoration: none;
}
.home-cta .cta-container .cta-group .cta-download:disabled {
  cursor: default;
}
.home-cta .cta-container .cta-group .cta-download:hover {
  color: var(--color-text-brand-subtle, #92DECD);
}
.home-cta .cta-container .cta-group .cta-download:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
@media screen and (min-width: 480px) and (max-width: 959.98px) {
  .home-cta {
    padding: 0 var(--spacing-32, 32px);
    margin: 64px auto 0 auto;
  }
  .home-cta .cta-container .heading {
    font-family: var(--font-clash-display);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading2-m, 32px);
    line-height: var(--typography-lineHeight-heading2-m, 40px);
    text-align: left;
  }
}
@media screen and (min-width: 960px) {
  .home-cta {
    margin: 64px auto 0 auto;
    padding: 0 160px;
  }
  .home-cta:before {
    margin-top: -96px;
  }
  .home-cta .cta-container .heading {
    font-family: var(--font-clash-display);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading2, 48px);
    line-height: var(--typography-lineHeight-heading2, 64px);
    text-align: center;
  }
  .home-cta .cta-container .heading .description {
    font-size: 16px;
  }
  .home-cta .cta-get-started, .home-cta .cta-download {
    max-width: 208px;
    min-width: 185px;
  }
}
.home-cta.default-styler:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: linear-gradient(0deg, var(--color-bg-brand-enabled), rgba(160, 244, 226, 0) 100%);
  height: 400px;
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.home-ultimate-cta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 32px;
  max-width: 1440px;
  margin: 0 auto;
}
.home-ultimate-cta > .content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex-shrink: 1;
  flex-grow: 1;
  margin-bottom: 64px;
}
@media screen and (min-width: 480px) {
  .home-ultimate-cta .heading h2 {
    font-family: var(--font-clash-display);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading2, 48px);
    line-height: var(--typography-lineHeight-heading2, 64px);
  }
}
@media screen and (max-width: 479.98px) {
  .home-ultimate-cta .heading h2 {
    font-family: var(--font-clash-display);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading2-m, 32px);
    line-height: var(--typography-lineHeight-heading2-m, 40px);
  }
}
.home-ultimate-cta .cta-text {
  font-size: 16px;
  font-style: normal;
  line-height: 32px;
}
.home-ultimate-cta .cta-text .pricing-plan-tag-ultimate {
  border-radius: 4px;
  padding: 4px 8px;
}
@media screen and (min-width: 480px) {
  .home-ultimate-cta .cta-text .pricing-plan-tag-ultimate {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading6, 16px);
    line-height: var(--typography-lineHeight-heading6, 24px);
  }
}
@media screen and (max-width: 479.98px) {
  .home-ultimate-cta .cta-text .pricing-plan-tag-ultimate {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading6-m, 14px);
    line-height: var(--typography-lineHeight-heading6-m, 20px);
  }
}
.home-ultimate-cta .cta-text .price {
  font-weight: bold;
}
.home-ultimate-cta ul.info-list {
  font-size: 14px;
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.home-ultimate-cta ul.info-list li {
  background: var(--color-bg-default);
  padding: 8px 12px;
  border-radius: 1000px;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
}
.home-ultimate-cta .buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.home-ultimate-cta .buttons > a {
  font-weight: bold;
}
.home-ultimate-cta .man-with-help-hand {
  position: absolute;
  right: 0;
  bottom: 0;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  flex-shrink: 0;
  align-self: flex-end;
  justify-self: center;
  overflow: hidden;
}
.home-ultimate-cta .man-with-help-hand img {
  height: auto;
}
@media screen and (max-width: 479.98px) {
  .home-ultimate-cta .man-with-help-hand {
    position: relative;
    margin-right: auto;
    margin-left: auto;
  }
  .home-ultimate-cta .man-with-help-hand img {
    width: 312px;
    margin-right: 0;
  }
}
@media screen and (min-width: 480px) and (max-width: 959.98px) {
  .home-ultimate-cta .man-with-help-hand {
    position: relative;
    margin-right: auto;
    margin-left: auto;
  }
  .home-ultimate-cta .man-with-help-hand img {
    width: 312px;
    margin-right: 0;
  }
}
@media screen and (min-width: 960px) {
  .home-ultimate-cta {
    display: grid;
    grid-template-columns: 3fr 2fr;
    padding: 0 90px 0 160px;
  }
  .home-ultimate-cta .heading h2 {
    font-size: var(--typography-size-heading2, 48px);
    font-weight: 600;
    line-height: var(--typography-lineHeight-heading2, 64px);
  }
  .home-ultimate-cta .heading h2 .heading-green {
    font-size: var(--typography-size-heading2, 48px);
    font-weight: 600;
    line-height: var(--typography-lineHeight-heading2, 64px);
  }
  .home-ultimate-cta .buttons {
    flex-direction: row;
    gap: 12px;
    margin-top: 8px;
  }
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.tf-contact {
  display: flex;
  flex-flow: column;
}
.tf-contact .styler {
  z-index: -1;
  margin-top: -64px;
  height: 96px;
  background: linear-gradient(180deg, rgba(160, 244, 226, 0) 0%, rgba(160, 244, 226, 0.25) 100%);
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.tf-contact-header {
  background: var(--color-bg-brand-subtle-enabled, #EFFAF8);
  display: flex;
  padding: var(--spacing-32, 32px) var(--Padding-page, 160px);
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.tf-contact-header .header {
  font-family: var(--font-clash-display);
  font-style: normal;
  font-weight: var(--typography-weight-heading, 600);
  font-size: var(--typography-size-heading2, 48px);
  line-height: var(--typography-lineHeight-heading2, 64px);
  color: var(--color-text-brand-default, #5DCDB5);
  align-self: stretch;
  text-align: center;
}
.tf-contact-header .header strong {
  color: var(--color-text-default, #2F3E52);
}
.tf-contact-header .sub-header {
  font-family: var(--font-family-heading);
  font-style: normal;
  font-weight: var(--typography-weight-heading, 600);
  font-size: var(--typography-size-heading5, 20px);
  line-height: var(--typography-lineHeight-heading5, 24px);
  color: var(--color-text-subtle, #5D697B);
  text-align: center;
  font-weight: var(--font-weight-regular, 400);
}
@media only screen and (max-width: 1024px) {
  .tf-contact-header {
    padding: var(--spacing-32, 32px) var(--spacing-24, 24px);
  }
  .tf-contact-header .header {
    font-family: var(--font-clash-display);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading2-m, 32px);
    line-height: var(--typography-lineHeight-heading2-m, 40px);
  }
  .tf-contact-header .sub-header {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading5-m, 16px);
    line-height: var(--typography-lineHeight-heading5-m, 20px);
  }
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
body > div:has(.tf-contact) {
  scrollbar-gutter: auto;
}

.contact-types {
  display: flex;
  padding: var(--spacing-64, 64px) var(--Padding-page, 160px) 32px;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  gap: 24px var(--spacing-24, 24px);
  min-height: calc(100vh - 625px);
}
.contact-types .card-container {
  display: flex;
  max-width: 357px;
  padding: var(--spacing-16, 16px);
  align-items: center;
  flex: 1 0;
  border-radius: var(--border-radius-8, 8px);
  border: 1px solid var(--color-outline-subtlest, #EBECEE);
  background: var(--color-bg-inverse, #FFF);
}
.contact-types .card-container .card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8, 8px);
  flex: 1 0;
}
.contact-types .card-container .card-body .card-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.contact-types .card-container .card-body .card-text .title {
  font-family: var(--font-family-heading);
  font-style: normal;
  font-weight: var(--typography-weight-heading, 600);
  font-size: var(--typography-size-heading6, 16px);
  line-height: var(--typography-lineHeight-heading6, 24px);
  color: var(--color-text-default, #2F3E52);
}
.contact-types .card-container .card-body .card-text .description {
  font-family: var(--font-family-body, "Montserrat");
  font-style: normal;
  font-weight: var(--typography-weight-body-regular, 400);
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  color: var(--color-text-subtle, #5D697B);
}
.contact-types .card-container .card-body .card-action {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
}
.contact-types .card-container .card-body .card-action a {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  background: none;
  border: none;
  padding: 8px 16px;
  /* text border color */
  color: var(--color-text-bold, #1D2532);
  padding: var(--spacing-8, 8px) 0;
  text-transform: uppercase;
}
.contact-types .card-container .card-body .card-action a:focus-visible {
  outline: none;
}
.contact-types .card-container .card-body .card-action a:is(a) {
  text-decoration: none;
}
.contact-types .card-container .card-body .card-action a:disabled {
  cursor: default;
}
.contact-types .card-container .card-body .card-action a:hover {
  color: var(--color-text-subtle, #5D697B);
}
.contact-types .card-container .card-body .card-action a:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.contact-types .card-container .card-body .card-action a span {
  display: flex;
}
@media only screen and (max-width: 1024px) {
  .contact-types {
    flex-flow: column;
    padding: 32px 24px;
    justify-content: flex-start;
    align-items: center;
  }
  .contact-types .card-container {
    width: 80vw;
  }
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.contact-sales {
  display: flex;
  padding: var(--spacing-64, 64px) 0 32px;
  justify-content: center;
  align-items: flex-start;
  gap: 24px var(--spacing-24, 24px);
  max-width: 1320px;
  margin: 0 auto;
  width: calc(100% - 32px);
  min-height: calc(100vh - 625px);
}
@media only screen and (max-width: 1024px) {
  .contact-sales {
    flex-flow: column;
    padding: 32px 24px;
  }
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.contact-support {
  display: flex;
  padding: var(--spacing-64, 64px) 0 32px;
  justify-content: center;
  align-items: flex-start;
  gap: 24px var(--spacing-24, 24px);
  max-width: 1320px;
  margin: 0 auto;
  width: calc(100% - 32px);
  min-height: calc(100vh - 625px);
}
.contact-support .contact-right {
  display: flex;
  flex-basis: calc(100% - 68px);
}
.contact-support .contact-right .contact-right-content {
  display: flex;
  padding: var(--spacing-32, 32px);
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-16, 16px);
  border-radius: var(--border-radius-8, 8px);
  border: 1px solid var(--color-outline-subtlest, #EBECEE);
  background: var(--color-bg-inverse, #FFF);
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
.contact-support .contact-right .contact-right-content a {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  background: none;
  padding: 7px 16px;
  /* outlined border color */
  border: 1px solid var(--color-outline-brand-default, #5DCDB5);
  color: var(--color-text-brand-default, #5DCDB5);
  /* [TODO] assumption taken as not defined on design */
  text-transform: uppercase;
  padding: 11px var(--spacing-16, 16px);
  color: var(--color-text-brand-default, #5DCDB5);
  width: 100%;
  max-width: 416px;
}
.contact-support .contact-right .contact-right-content a:focus-visible {
  outline: none;
}
.contact-support .contact-right .contact-right-content a:is(a) {
  text-decoration: none;
}
.contact-support .contact-right .contact-right-content a:disabled {
  cursor: default;
}
.contact-support .contact-right .contact-right-content a:hover {
  color: var(--color-text-brand-subtle, #92DECD);
}
.contact-support .contact-right .contact-right-content a:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
@media only screen and (max-width: 1024px) {
  .contact-support {
    flex-flow: column;
    padding: 32px 24px;
  }
  .contact-support .contact-right {
    flex-basis: calc(100% - 52px);
    width: 100%;
    text-align: center;
  }
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.contact-left {
  display: flex;
  flex-basis: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-24, 24px);
  width: 100%;
}
.contact-left .contact-options {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}
.contact-left .contact-options .title {
  font-family: var(--font-family-heading);
  font-style: normal;
  font-weight: var(--typography-weight-heading, 600);
  font-size: var(--typography-size-heading6, 16px);
  line-height: var(--typography-lineHeight-heading6, 24px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-4, 4px);
  color: var(--color-text-default, #2F3E52);
}
.contact-left .contact-options .menu-options {
  display: flex;
  min-width: 180px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-none, 0px);
  align-self: stretch;
}
.contact-left .contact-options .menu-options .option {
  font-family: var(--font-family-body, "Montserrat");
  font-style: normal;
  font-weight: var(--typography-weight-body-regular, 400);
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  display: flex;
  padding: var(--spacing-8, 8px);
  align-items: center;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
  color: var(--color-text-default, #2F3E52);
}
.contact-left .contact-options .notes {
  font-family: var(--font-family-body, "Montserrat");
  font-style: normal;
  font-weight: var(--typography-weight-body-regular, 400);
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  color: var(--color-text-default, #2F3E52);
}
.contact-left .button-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}
.contact-left .button-container .card-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.contact-left .button-container .card-text .title {
  font-family: var(--font-family-body, "Montserrat");
  font-style: normal;
  font-weight: var(--typography-weight-body-regular, 400);
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  color: var(--color-text-default, #2F3E52);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.contact-left .button-container .card-action {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  gap: 8px;
}
.contact-left .button-container .card-action a {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  background: none;
  border: none;
  padding: 8px 16px;
  /* text border color */
  color: var(--color-text-bold, #1D2532);
  padding: var(--spacing-4, 4px);
  text-transform: uppercase;
}
.contact-left .button-container .card-action a:focus-visible {
  outline: none;
}
.contact-left .button-container .card-action a:is(a) {
  text-decoration: none;
}
.contact-left .button-container .card-action a:disabled {
  cursor: default;
}
.contact-left .button-container .card-action a:hover {
  color: var(--color-text-subtle, #5D697B);
}
.contact-left .button-container .card-action a:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.contact-left .button-container .card-action a span {
  display: flex;
}
@media only screen and (max-width: 1024px) {
  .contact-left {
    margin: 0 auto;
  }
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.contact-sales-form {
  display: flex;
  flex-basis: calc(100% - 68px);
  padding: var(--spacing-32, 32px);
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-16, 16px);
  border-radius: var(--border-radius-8, 8px);
  border: 1px solid var(--color-outline-subtlest, #EBECEE);
  background: var(--color-bg-inverse, #FFF);
}
.contact-sales-form .form-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: var(--spacing-16, 16px);
  align-self: stretch;
}
.contact-sales-form .form-section .two-column-inputs {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-16, 16px);
  align-self: stretch;
}
.contact-sales-form .form-section .inputs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-8, 8px);
  flex: 1 0;
  width: 100%;
}
.contact-sales-form .form-section .inputs label {
  font-family: var(--font-family-label), serif;
  font-size: var(--typography-size-label, 12px);
  font-style: normal;
  font-weight: var(--typography-weight-label, 600);
  line-height: var(--typography-lineHeight-label, 16px);
  display: flex;
  min-width: 80px;
  align-items: center;
  gap: var(--spacing-4, 4px);
  color: var(--color-text-default, #2F3E52);
}
.contact-sales-form .form-section .inputs label span {
  font-weight: var(--typography-weight-body3-regular, 400);
}
.contact-sales-form .form-section .inputs input {
  font-family: var(--font-family-body), serif;
  border-radius: var(--border-radius-none, 0px);
  border: 1px solid var(--color-outline-subtlest2, #E3E5E8);
  background: #fff;
  display: flex;
  height: var(--font-lineHeight-40, 40px);
  padding: 0 var(--spacing-8, 8px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
  font-family: var(--font-family-body, "Montserrat");
  font-style: normal;
  font-weight: var(--typography-weight-body-regular, 400);
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  display: flex;
  height: 32px;
  padding: 0px var(--spacing-8, 8px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
  border-radius: var(--border-radius-none, 0px);
  border: 1px solid var(--color-outline-subtlest, #EBECEE);
  background: var(--color-bg-inverse, #FFF);
}
.contact-sales-form .form-section .inputs input::placeholder {
  color: var(--color-text-subtlest, #A2A9B3);
}
.contact-sales-form .form-section .inputs input:focus, .contact-sales-form .form-section .inputs input:focus-visible {
  border: var(--border-width-1, 1px) solid var(--color-outline-brand-default, #5DCDB5);
  outline: none;
}
.contact-sales-form .form-section .inputs input.error {
  border: 1px solid var(--color-outline-danger-default, #D22D2D);
}
.contact-sales-form .form-section .inputs input:disabled {
  border: var(--border-width-1, 1px) solid var(--color-outline-default, #5D697B);
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
}
.contact-sales-form .form-section .inputs input:hover:not(:focus):not(:focus-visible) {
  border: 1px solid var(--color-outline-default, #5D697B);
  background: var(--color-bg-default, #F5F6F7);
}
.contact-sales-form .form-section .inputs select {
  font-family: var(--font-family-body, "Montserrat");
  font-style: normal;
  font-weight: var(--typography-weight-body-regular, 400);
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  cursor: pointer;
  width: 100%;
  border-radius: var(--border-radius-none, 0px);
  background: var(--color-bg-inverse, #FFF);
  border: 1px solid var(--color-outline-subtlest, #EBECEE);
  outline: none;
  position: relative;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("/images/control-center/header/icon-arrow-drop-down.svg");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 6px;
  padding: 7px 30px 7px 9px;
}
.contact-sales-form .form-section .inputs textarea {
  font-family: var(--font-family-body, "Montserrat");
  font-style: normal;
  font-weight: var(--typography-weight-body-regular, 400);
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  width: 100%;
  min-height: 96px;
  border-radius: var(--border-radius-none, 0px);
  background: var(--color-bg-inverse, #FFF);
  border: 1px solid var(--color-outline-subtlest, #EBECEE);
  outline: none;
  position: relative;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  resize: none;
  padding: 8px;
}
.contact-sales-form .form-section .inputs .field-error {
  font-family: var(--font-family-label), serif;
  font-size: var(--typography-size-label, 12px);
  font-style: normal;
  font-weight: var(--typography-weight-label, 600);
  line-height: var(--typography-lineHeight-label, 16px);
  color: #B50404;
  width: 100%;
  margin-top: -4px;
}
.contact-sales-form .form-section .btn-contact {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-brand-enabled, #5DCDB5);
  color: var(--color-text-bold, #1D2532);
  width: 100%;
  padding: 12px;
}
.contact-sales-form .form-section .btn-contact:focus-visible {
  outline: none;
}
.contact-sales-form .form-section .btn-contact:is(a) {
  text-decoration: none;
}
.contact-sales-form .form-section .btn-contact:disabled {
  cursor: default;
}
.contact-sales-form .form-section .btn-contact:hover {
  background: var(--color-bg-brand-hovered, #92DECD);
}
.contact-sales-form .form-section .btn-contact:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
@media only screen and (max-width: 1024px) {
  .contact-sales-form {
    flex-basis: calc(100% - 52px);
    margin: 0 auto;
    width: 100%;
  }
  .contact-sales-form .form-section .two-column-inputs {
    flex-flow: column;
  }
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.accept-invitation-success {
  display: flex;
  width: var(--Breakpoints-frameWidth, 1440px);
  min-height: 100vh;
  padding: var(--spacing-none, 0px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-64, 64px);
  --font-family-default: "Figtree", sans-serif;
  --font-family-label: "Figtree", sans-serif;
  --font-family-caption: "Figtree", sans-serif;
  --font-family-heading: "Figtree", sans-serif;
  --font-family-body: "Figtree", sans-serif;
}
.accept-invitation-success .accept-invitation-success-container {
  display: flex;
  width: var(--safezone-width, 90vw);
  max-width: 480px;
  padding: var(--spacing-32, 32px);
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24, 24px);
  border-radius: var(--border-radius-8, 8px);
  border: 1px solid var(--color-outline-subtlest, #EBECEE);
  background: var(--color-bg-inverse, #FFF);
}
.accept-invitation-success .accept-invitation-success-container .accept-invitation-header-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.accept-invitation-success .accept-invitation-success-container .accept-invitation-header-container .logo {
  display: flex;
  padding: var(--spacing-4, 4px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
}
.accept-invitation-success .accept-invitation-success-container .accept-invitation-header-container .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-4, 4px);
  align-self: stretch;
}
.accept-invitation-success .accept-invitation-success-container .accept-invitation-header-container .content .title-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-4, 4px);
  align-self: stretch;
}
.accept-invitation-success .accept-invitation-success-container .accept-invitation-header-container .content .title-container .title {
  color: var(--color-text-default, #2F3E52);
}
@media screen and (min-width: 480px) {
  .accept-invitation-success .accept-invitation-success-container .accept-invitation-header-container .content .title-container .title {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading5, 20px);
    line-height: var(--typography-lineHeight-heading5, 24px);
  }
}
@media screen and (max-width: 479.98px) {
  .accept-invitation-success .accept-invitation-success-container .accept-invitation-header-container .content .title-container .title {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading5-m, 16px);
    line-height: var(--typography-lineHeight-heading5-m, 20px);
  }
}
.accept-invitation-success .accept-invitation-success-container .accept-invitation-header-container .content .description-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
}
.accept-invitation-success .accept-invitation-success-container .accept-invitation-header-container .content .description-container .description {
  color: var(--color-text-subtlest, #A2A9B3);
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  text-align: unset;
}
.accept-invitation-success .accept-invitation-success-container .accept-invitation-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-16, 16px);
  align-self: stretch;
}
.accept-invitation-success .accept-invitation-success-container .accept-invitation-container .field-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-4, 4px);
  align-self: stretch;
}
.accept-invitation-success .accept-invitation-success-container .accept-invitation-container .field-container .field {
  display: flex;
  align-items: center;
  gap: var(--spacing-4, 4px);
  color: var(--color-text-subtlest, #A2A9B3);
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-2 */
  font-size: var(--typography-size-caption2);
  font-weight: var(--typography-weight-caption2);
  line-height: var(--typography-lineHeight-caption2);
}
.accept-invitation-success .accept-invitation-success-container .accept-invitation-container .field-container .value {
  width: 100%;
  color: var(--color-text-default, #2F3E52);
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-semibold, 600);
  text-align: left;
}
.accept-invitation-success .accept-invitation-success-container .accept-invitation-button-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: var(--spacing-4, 4px);
  align-self: stretch;
}
.accept-invitation-success .accept-invitation-success-container .accept-invitation-button-container button {
  display: flex;
  padding: var(--spacing-12, 12px) var(--spacing-16, 16px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-brand-enabled, #5DCDB5);
  color: var(--color-text-bold, #1D2532);
}
.accept-invitation-success .accept-invitation-success-container .accept-invitation-button-container button:focus-visible {
  outline: none;
}
.accept-invitation-success .accept-invitation-success-container .accept-invitation-button-container button:is(a) {
  text-decoration: none;
}
.accept-invitation-success .accept-invitation-success-container .accept-invitation-button-container button:disabled {
  cursor: default;
}
.accept-invitation-success .accept-invitation-success-container .accept-invitation-button-container button:hover {
  background: var(--color-bg-brand-hovered, #92DECD);
}
.accept-invitation-success .accept-invitation-success-container .accept-invitation-button-container button:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.pricing-page-content {
  display: flex;
  flex-direction: column;
}
.pricing-page-content .header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-8, 8px);
  padding: var(--spacing-32, 32px);
  background: var(--color-bg-brand-subtle-enabled, #EFFAF8);
  margin-bottom: 64px;
}
.pricing-page-content .header .main-phrase {
  color: var(--color-text-default, #2F3E52);
  font-family: var(--font-clash-display);
  font-size: var(--typography-size-heading2, 48px);
  font-style: normal;
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--typography-lineHeight-heading2, 64px);
  text-align: center;
  text-transform: capitalize;
}
@media screen and (max-width: 479.98px) {
  .pricing-page-content .header .main-phrase {
    font-size: var(--typography-size-heading2-m, 32px);
  }
}
.pricing-page-content .header .main-phrase .highlighted {
  color: var(--color-text-brand-default, #5DCDB5);
}
.pricing-page-content .header .slogan {
  color: var(--color-text-subtle, #5D697B);
  font-weight: 400;
  text-align: center;
}
@media screen and (min-width: 480px) {
  .pricing-page-content .header .slogan {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading5, 20px);
    line-height: var(--typography-lineHeight-heading5, 24px);
  }
}
@media screen and (max-width: 479.98px) {
  .pricing-page-content .header .slogan {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading5-m, 16px);
    line-height: var(--typography-lineHeight-heading5-m, 20px);
  }
}
.pricing-page-content .plans-comparison-table-title {
  margin-top: var(--spacing-64, 64px);
}
.pricing-page-content .pricing-plan-cards {
  padding: 0 160px;
  flex-wrap: wrap;
  justify-content: center;
}
@media screen and (max-width: 479.98px) {
  .pricing-page-content .pricing-plan-cards {
    padding: 0 24px;
  }
}
@media screen and (min-width: 480px) and (max-width: 959.98px) {
  .pricing-page-content .pricing-plan-cards {
    padding: 0 64px;
  }
}
.pricing-page-content .pricing-plan-cards .pricing-plan-card {
  width: 268px;
  flex: 0 0;
}
.pricing-page-content .faq-content {
  margin-top: 128px;
}
.pricing-page-content .faq-content > .heading {
  background: none;
  height: auto;
  padding: 0;
}
.pricing-page-content .faq-content > .heading h2 {
  font-family: var(--font-clash-display), sans-serif;
  font-size: 48px;
  line-height: 64px;
  font-weight: 600;
}
@media screen and (max-width: 479.98px) {
  .pricing-page-content .faq-content > .heading h2 {
    font-size: 32px;
    line-height: 40px;
  }
}
.pricing-page-content .faq-content > .content {
  padding-top: 32px;
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.billing-period-selector {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-8, 8px);
  border-radius: var(--border-radius-circle, 1000px);
  border: 2px solid var(--color-outline-brand-default, #5DCDB5);
  background: var(--color-bg-inverse, #FFF);
  padding: var(--spacing-2, 2px);
  align-self: center;
}
.billing-period-selector .period {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-medium, 500);
  padding: var(--spacing-8, 8px) var(--spacing-16, 16px);
  cursor: pointer;
  text-wrap: nowrap;
}
.billing-period-selector .period:hover {
  border-radius: var(--border-radius-circle, 1000px);
  background: var(--color-bg-neutral-subtle-hovered, #EBECEE);
}
.billing-period-selector .period.selected {
  border-radius: var(--border-radius-circle, 1000px);
  background: var(--color-bg-neutral-bold-enabled, #253040);
  color: var(--color-text-inverse, #FFF);
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.pricing-plan-selector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-32, 32px);
  margin: 0 var(--spacing-32, 32px);
}
.pricing-plan-selector .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24, 24px);
  padding: var(--spacing-32, 32px);
  background-color: var(--color-bg-brand-subtle-enabled);
  border-radius: 8px;
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
:root {
  --pricing-plans-table-width-desktop: 1128px;
  --pricing-plans-table-width-tablet: 800px;
  --pricing-plans-table-width-mobile: 640px;
  --pricing-plans-table-width: var(--pricing-plans-table-width-desktop);
}
@media screen and (min-width: 480px) and (max-width: 959.98px) {
  :root {
    --pricing-plans-table-width: var(--pricing-plans-table-width-tablet);
  }
}
@media screen and (max-width: 479.98px) {
  :root {
    --pricing-plans-table-width: var(--pricing-plans-table-width-mobile);
  }
}

.plans-comparison-table-title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 479.98px) {
  .plans-comparison-table-title {
    display: none;
  }
}
.plans-comparison-table-title .title {
  color: var(--color-text-bold, #1D2532);
  font-family: var(--font-clash-display);
  font-size: var(--typography-size-heading2, 48px);
  font-style: normal;
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--typography-lineHeight-heading2, 64px);
  padding: var(--spacing-24, 24px);
  width: min(var(--pricing-plans-table-width) + var(--spacing-24, 24px) + var(--spacing-24, 24px), 100%);
  z-index: 1;
  text-transform: capitalize;
}
@media screen and (min-width: 480px) and (max-width: 959.98px) {
  .plans-comparison-table-title .title {
    color: var(--color-text-bold, #1D2532);
    font-size: var(--typography-size-heading3, 32px);
    line-height: var(--typography-lineHeight-heading3, 40px); /* 125% */
  }
}

.plans-comparison-table {
  display: grid;
  grid-template: auto/1fr auto 1fr;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: var(--spacing-64, 64px);
}
.plans-comparison-table .plans-comparison-table-wrapper {
  margin: 0 var(--spacing-48, 48px);
}
.plans-comparison-table .plans-comparison-table-wrapper table {
  width: var(--pricing-plans-table-width);
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid var(--color-outline-subtlest);
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th:first-child {
  width: 312px;
}
@media screen and (min-width: 480px) and (max-width: 959.98px) {
  .plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th:first-child {
    width: 320px;
  }
}
@media screen and (max-width: 479.98px) {
  .plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th:first-child {
    width: 240px;
  }
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th:not(:first-child) {
  width: 204px;
}
@media screen and (min-width: 480px) and (max-width: 959.98px) {
  .plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th:not(:first-child) {
    width: 120px;
  }
}
@media screen and (max-width: 479.98px) {
  .plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th:not(:first-child) {
    width: 100px;
  }
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th:not(:last-child) {
  border-right: 1px solid var(--color-outline-subtlest);
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th {
  border-bottom: 1px solid var(--color-outline-subtlest);
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-16, 16px);
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-name span {
  text-transform: uppercase;
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-name span:not(.beta) {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-1 */
  font-size: var(--typography-size-caption1);
  font-weight: var(--typography-weight-caption1);
  line-height: var(--typography-lineHeight-caption1);
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-name span.beta {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-price-section {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  margin-top: var(--spacing-16, 16px);
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-price-section .main {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--spacing-4, 4px);
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-price-section .main .price-value {
  color: var(--color-text-bold, #1D2532);
}
@media screen and (min-width: 480px) {
  .plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-price-section .main .price-value {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading3, 32px);
    line-height: var(--typography-lineHeight-heading3, 40px);
  }
}
@media screen and (max-width: 479.98px) {
  .plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-price-section .main .price-value {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading3-m, 24px);
    line-height: var(--typography-lineHeight-heading3-m, 32px);
  }
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-price-section .main .price-per-unit {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-medium, 500);
  color: var(--color-text-subtle, #5D697B);
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-price-section .main .discounted-from-price-value {
  color: var(--color-text-subtlest, #A2A9B3);
  -webkit-text-decoration-line: line-through;
          text-decoration-line: line-through;
}
@media screen and (min-width: 480px) {
  .plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-price-section .main .discounted-from-price-value {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading4, 24px);
    line-height: var(--typography-lineHeight-heading4, 32px);
  }
}
@media screen and (max-width: 479.98px) {
  .plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-price-section .main .discounted-from-price-value {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading4-m, 20px);
    line-height: var(--typography-lineHeight-heading4-m, 24px);
  }
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-price-section .additional {
  grid-column: 1/3;
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body4-.. */
  font-size: var(--typography-size-body4, 11px);
  line-height: var(--typography-lineHeight-body4, 16px);
  font-weight: var(--typography-weight-body4-medium, 500);
  color: var(--color-text-success-default, #28A745);
  min-height: 16px;
}
@media screen and (max-width: 479.98px) {
  .plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-price-section {
    display: none;
  }
}
@media screen and (min-width: 480px) and (max-width: 959.98px) {
  .plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-price-section {
    display: none;
  }
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-price-section .main .price-per-unit {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-medium, 500);
  color: var(--color-text-subtle, #5D697B);
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-price-section .additional {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body5-... */
  font-size: var(--typography-size-body5, 8px);
  line-height: var(--typography-lineHeight-body5, 12px);
  font-weight: var(--typography-weight-body5-regular, 400);
  color: var(--color-text-success-default, #28A745);
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-actions-section {
  display: flex;
  flex-direction: column;
  margin-top: var(--spacing-8, 8px);
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-actions-section button.startNow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  background: none;
  padding: 7px 16px;
  /* outlined border color */
  border: 1px solid var(--color-outline-bold, #2F3E52);
  color: var(--color-text-default, #2F3E52);
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-actions-section button.startNow:focus-visible {
  outline: none;
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-actions-section button.startNow:is(a) {
  text-decoration: none;
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-actions-section button.startNow:disabled {
  cursor: default;
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-actions-section button.startNow:hover {
  border: 1px solid var(--color-outline-default, #5D697B);
  color: var(--color-text-subtle, #5D697B);
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-actions-section button.startNow:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-actions-section button.buyNow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-brand-enabled, #5DCDB5);
  color: var(--color-text-bold, #1D2532);
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-actions-section button.buyNow:focus-visible {
  outline: none;
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-actions-section button.buyNow:is(a) {
  text-decoration: none;
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-actions-section button.buyNow:disabled {
  cursor: default;
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-actions-section button.buyNow:hover {
  background: var(--color-bg-brand-hovered, #92DECD);
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-actions-section button.buyNow:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-actions-section button.contact {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-neutral-bold-enabled, #253040);
  color: var(--color-text-inverse, #FFF);
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-actions-section button.contact:focus-visible {
  outline: none;
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-actions-section button.contact:is(a) {
  text-decoration: none;
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-actions-section button.contact:disabled {
  cursor: default;
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-actions-section button.contact:hover {
  background: var(--color-bg-neutral-bold-hovered, #2F3E52);
}
.plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-actions-section button.contact:disabled {
  background: var(--color-bg-disabled, rgba(52, 68, 90, 0.31));
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
@media screen and (max-width: 479.98px) {
  .plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-actions-section {
    display: none;
  }
}
@media screen and (min-width: 480px) and (max-width: 959.98px) {
  .plans-comparison-table .plans-comparison-table-wrapper table > thead > tr > th > div.header-cell .plan-actions-section {
    display: none;
  }
}
.plans-comparison-table .plans-comparison-table-wrapper table > tbody > tr.hidden {
  display: none;
}
.plans-comparison-table .plans-comparison-table-wrapper table > tbody > tr > td {
  vertical-align: middle;
  height: 56px;
}
.plans-comparison-table .plans-comparison-table-wrapper table > tbody > tr.has-children {
  border-bottom: 1px solid var(--color-outline-subtlest);
  background: var(--color-bg-default);
}
.plans-comparison-table .plans-comparison-table-wrapper table > tbody > tr:not(.has-children) > td {
  border-right: 1px solid var(--color-outline-subtlest);
  border-bottom: 1px solid var(--color-outline-subtlest);
}
.plans-comparison-table .plans-comparison-table-wrapper table > tbody > tr:not(.has-children) > td:first-child .expander {
  display: none;
}
.plans-comparison-table .plans-comparison-table-wrapper table > tbody > tr:not(.has-children) > td:first-child .feature-name {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  overflow: hidden;
  color: var(--color-text-default, #2F3E52);
  text-overflow: ellipsis;
  margin-right: var(--spacing-4, 4px);
}
.plans-comparison-table .plans-comparison-table-wrapper table > tbody > tr.has-children > td:first-child .feature-name {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  overflow: hidden;
  color: var(--color-text-default, #2F3E52);
  text-overflow: ellipsis;
  margin-right: var(--spacing-16, 16px);
}
.plans-comparison-table .plans-comparison-table-wrapper table > tbody > tr > td:first-child > div {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: var(--spacing-8, 8px) 0;
}
.plans-comparison-table .plans-comparison-table-wrapper table > tbody > tr > td:first-child .expander {
  margin-right: var(--spacing-8, 8px);
}
.plans-comparison-table .plans-comparison-table-wrapper table > tbody > tr > td:first-child .expander:not(.expanded) > img {
  transform: rotate(-90deg);
}
.plans-comparison-table .plans-comparison-table-wrapper table > tbody > tr > td:not(:first-child) > div {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-regular, 400);
  color: var(--color-text-default, #2F3E52);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--spacing-4, 4px) var(--spacing-8, 8px);
}
.plans-comparison-table .plans-comparison-table-wrapper table > tbody > tr.level-0 > td:first-child {
  padding-left: 12px;
}
.plans-comparison-table .plans-comparison-table-wrapper table > tbody > tr.level-1 > td:first-child {
  padding-left: 28px;
}
.plans-comparison-table .plans-comparison-table-wrapper table > tbody > tr.level-2 > td:first-child {
  padding-left: 44px;
}
.plans-comparison-table .plans-comparison-table-wrapper table > tbody > tr.level-3 > td:first-child {
  padding-left: 60px;
}
.plans-comparison-table.loading > .plans-comparison-table-wrapper > table > tbody > tr {
  filter: blur(4px);
  animation: fadeInFromNone 1s ease-in-out infinite;
}
@keyframes fadeInFromNone {
  0% {
    opacity: 0.1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
  }
}

.span-with-info {
  display: flex;
  flex-direction: row;
  gap: 4px;
  text-align: center;
  align-items: center;
}
.span-with-info .last-span {
  display: inline-flex;
  flex-direction: row;
}
.span-with-info .tooltip-info {
  color: var(--color-icon-subtle);
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.upgrade-request {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 420px;
  padding: 60px 24px 12px 24px;
}
.upgrade-request .main-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.upgrade-request .main-section img, .upgrade-request .main-section header {
  align-self: center;
}
.upgrade-request .main-section span {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  color: var(--color-text-subtle, #5D697B);
  display: inline-block;
}
.upgrade-request .main-section span + br + span {
  margin-top: 6px;
}
.upgrade-request .main-section input {
  padding: 0 8px;
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  height: 40px;
  border-radius: 0px;
  border: 1px solid var(--color-outline-subtlest);
  outline: none;
  color: var(--color-text-default);
  transition: all 0.3s ease-out;
  margin-top: 8px;
}
.upgrade-request .main-section input::placeholder {
  color: #ADADAD;
}
.upgrade-request .main-section input:-ms-input-placeholder {
  color: #ADADAD;
}
.upgrade-request .main-section input::-ms-input-placeholder {
  color: #ADADAD;
}
.upgrade-request .main-section input:focus {
  background-color: #fff;
  color: #222222;
  border-color: #5DCDB5;
}
.upgrade-request .buttons-section {
  margin-top: 12px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 4px;
}
.upgrade-request .buttons-section .request {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-brand-enabled, #5DCDB5);
  color: var(--color-text-bold, #1D2532);
}
.upgrade-request .buttons-section .request:focus-visible {
  outline: none;
}
.upgrade-request .buttons-section .request:is(a) {
  text-decoration: none;
}
.upgrade-request .buttons-section .request:disabled {
  cursor: default;
}
.upgrade-request .buttons-section .request:hover {
  background: var(--color-bg-brand-hovered, #92DECD);
}
.upgrade-request .buttons-section .request:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.upgrade-request .buttons-section .cancel {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  background: none;
  border: none;
  padding: 8px 16px;
  /* text border color */
  color: var(--color-text-bold, #1D2532);
}
.upgrade-request .buttons-section .cancel:focus-visible {
  outline: none;
}
.upgrade-request .buttons-section .cancel:is(a) {
  text-decoration: none;
}
.upgrade-request .buttons-section .cancel:disabled {
  cursor: default;
}
.upgrade-request .buttons-section .cancel:hover {
  color: var(--color-text-subtle, #5D697B);
}
.upgrade-request .buttons-section .cancel:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.upgrade-request h6 {
  color: var(--color-text-default, #2F3E52);
  margin-top: 4px;
}
@media screen and (min-width: 480px) {
  .upgrade-request h6 {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading6, 16px);
    line-height: var(--typography-lineHeight-heading6, 24px);
  }
}
@media screen and (max-width: 479.98px) {
  .upgrade-request h6 {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading6-m, 14px);
    line-height: var(--typography-lineHeight-heading6-m, 20px);
  }
}

.tf-modal > .content-part:has(> div.upgrade-request) {
  border-radius: 0;
  padding: 0;
}
.tf-modal > .content-part:has(> div.upgrade-request) > div.close-modal-button {
  right: 16px;
  top: 8px;
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.main-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}
.main-header + div, .main-header + section {
  scroll-margin-top: 100px;
}
.main-header .banner-container {
  display: flex;
  align-items: flex-end;
  background: var(--color-bg-neutral-bold-enabled, #253040);
}
.main-header .banner-container .banner-text {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-semibold, 600);
  color: var(--color-text-inverse, #FFF);
  text-align: center;
}
.main-header .banner-container .banner-link {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-medium, 500);
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
  color: var(--color-text-info-default, #3697FF);
  text-align: center;
}
.main-header .banner-container .banner-close {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  background: none;
  border: none;
  padding: 8px 16px;
  /* text border color */
  color: var(--color-text-bold, #1D2532);
  background: none;
  position: absolute;
  right: 24px;
  padding: 0;
  gap: 0;
  height: 26px;
  align-items: flex-start;
}
.main-header .banner-container .banner-close:focus-visible {
  outline: none;
}
.main-header .banner-container .banner-close:is(a) {
  text-decoration: none;
}
.main-header .banner-container .banner-close:disabled {
  cursor: default;
}
.main-header .banner-container .banner-close:hover {
  color: var(--color-text-subtle, #5D697B);
}
.main-header .banner-container .banner-close:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.main-header .banner-container .banner-content {
  padding: var(--spacing-8, 8px) var(--spacing-none, 0px);
  justify-content: center;
  align-items: center;
  gap: 8px var(--spacing-8, 8px);
  align-self: stretch;
  flex-wrap: wrap;
  width: 100%;
  display: flex;
  max-width: calc(100vw - 75px);
  margin: 0 auto;
}
.main-header .header-top-container {
  display: flex;
  height: var(--Padding-section, 64px);
  padding: var(--spacing-none, 0px) var(--spacing-24, 24px);
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
  border-bottom: 1px solid var(--color-outline-subtlest, #EBECEE);
  background: var(--color-bg-inverse, #FFF);
  position: relative;
  z-index: 2;
}
.main-header .header-top-container .header-top-left {
  display: flex;
  min-height: 32px;
  align-items: center;
  gap: var(--spacing-8, 8px);
}
@media only screen and (max-width: 336px) {
  .main-header .header-top-container .header-top-left .logo-container {
    display: none;
  }
}
@media only screen and (min-width: 336px) {
  .main-header .header-top-container .header-top-left .logo-container-mobile {
    display: none;
  }
}
.main-header .header-top-container .header-top-right-mobile {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-16, 16px);
  flex: 1 0;
}
@media only screen and (min-width: 1024px) {
  .main-header .header-top-container .header-top-right-mobile {
    display: none;
  }
}
.main-header .header-top-container .header-top-right-mobile .mobile-hamburger-menu {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  background: none;
  border: none;
  padding: 8px 16px;
  /* text border color */
  color: var(--color-text-bold, #1D2532);
}
.main-header .header-top-container .header-top-right-mobile .mobile-hamburger-menu:focus-visible {
  outline: none;
}
.main-header .header-top-container .header-top-right-mobile .mobile-hamburger-menu:is(a) {
  text-decoration: none;
}
.main-header .header-top-container .header-top-right-mobile .mobile-hamburger-menu:disabled {
  cursor: default;
}
.main-header .header-top-container .header-top-right-mobile .mobile-hamburger-menu:hover {
  color: var(--color-text-subtle, #5D697B);
}
.main-header .header-top-container .header-top-right-mobile .mobile-hamburger-menu:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.main-header .header-top-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-16, 16px);
  flex: 1 0;
}
@media only screen and (max-width: 1024px) {
  .main-header .header-top-right {
    display: none;
  }
}
.main-header .header-top-right .header-menu-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-8, 8px);
}
.main-header .header-top-right .header-menu-container .header-menu {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  background: none;
  border: none;
  padding: 8px 16px;
  /* text border color */
  color: var(--color-text-bold, #1D2532);
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-1 */
  font-size: var(--typography-size-caption1);
  font-weight: var(--typography-weight-caption1);
  line-height: var(--typography-lineHeight-caption1);
  padding: 0 8px;
  text-decoration: none;
  color: var(--color-text-default, #2F3E52);
  border-bottom: none;
  gap: 4px;
  max-width: 14vw;
}
.main-header .header-top-right .header-menu-container .header-menu:focus-visible {
  outline: none;
}
.main-header .header-top-right .header-menu-container .header-menu:is(a) {
  text-decoration: none;
}
.main-header .header-top-right .header-menu-container .header-menu:disabled {
  cursor: default;
}
.main-header .header-top-right .header-menu-container .header-menu:hover {
  color: var(--color-text-subtle, #5D697B);
}
.main-header .header-top-right .header-menu-container .header-menu:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.main-header .header-top-right .header-menu-container .header-menu.active {
  color: var(--color-text-brand-default, #5DCDB5);
}
.main-header .header-top-right .header-menu-container .header-menu.active:hover {
  color: var(--color-text-brand-bold, #429281);
}
.main-header .header-top-right .header-menu-container .header-menu.active:hover .icon-down {
  filter: brightness(0.6);
}
.main-header .header-top-right .header-menu-container .header-menu:hover {
  background: none;
  color: var(--color-text-brand-default, #5DCDB5);
}
.main-header .header-top-right .header-menu-container .header-menu:not(.active):not(:hover) .icon-down {
  filter: brightness(0.5) grayscale(1);
}
.main-header .header-top-right .header-menu-container .header-menu:not(:last-of-type) {
  border-bottom: none;
}
.main-header .header-top-right .header-menu-container .header-menu .header-right-ellipsis {
  transition-duration: 0s;
}
.main-header .header-top-right .header-menu-container .header-menu.active .icon-down {
  transform: rotate(180deg);
}
.main-header .header-top-right .header-menu-container .header-action {
  display: flex;
  padding: var(--spacing-8, 8px);
  align-items: center;
  gap: var(--spacing-8, 8px);
  border-radius: var(--border-radius-8, 8px);
  border: 1px solid var(--color-outline-subtlest, #EBECEE);
  background: var(--color-bg-default, #F5F6F7);
}
.main-header .header-top-right .header-menu-container .header-action .header-action-sign-in {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  background: none;
  border: none;
  padding: 8px 16px;
  /* text border color */
  color: var(--color-text-bold, #1D2532);
  background: none;
  display: flex;
  padding: var(--spacing-4, 4px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-16, 16px);
}
.main-header .header-top-right .header-menu-container .header-action .header-action-sign-in:focus-visible {
  outline: none;
}
.main-header .header-top-right .header-menu-container .header-action .header-action-sign-in:is(a) {
  text-decoration: none;
}
.main-header .header-top-right .header-menu-container .header-action .header-action-sign-in:disabled {
  cursor: default;
}
.main-header .header-top-right .header-menu-container .header-action .header-action-sign-in:hover {
  color: var(--color-text-subtle, #5D697B);
}
.main-header .header-top-right .header-menu-container .header-action .header-action-sign-in:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.main-header .header-top-right .header-menu-container .header-action .header-action-sign-in .disabled {
  pointer-events: none;
}
.main-header .header-top-right .header-menu-container .header-action .header-action-start-now {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-brand-enabled, #5DCDB5);
  color: var(--color-text-bold, #1D2532);
  display: flex;
  padding: var(--spacing-8, 8px) var(--spacing-16, 16px);
  justify-content: center;
  align-items: center;
  gap: var(--Navigation-navSpacing, 16px);
  border-radius: var(--border-radius-4, 4px);
  background: var(--color-bg-brand-enabled, #5DCDB5);
}
.main-header .header-top-right .header-menu-container .header-action .header-action-start-now:focus-visible {
  outline: none;
}
.main-header .header-top-right .header-menu-container .header-action .header-action-start-now:is(a) {
  text-decoration: none;
}
.main-header .header-top-right .header-menu-container .header-action .header-action-start-now:disabled {
  cursor: default;
}
.main-header .header-top-right .header-menu-container .header-action .header-action-start-now:hover {
  background: var(--color-bg-brand-hovered, #92DECD);
}
.main-header .header-top-right .header-menu-container .header-action .header-action-start-now:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.main-header .header-top-right .header-menu-container .header-action .header-action-start-now .disabled {
  pointer-events: none;
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.header-desktop-product-menu {
  box-shadow: 0 0 0 0.5px var(--color-outline-subtlest), 0 16px 32px 0 var(--elevation-shadow-level4_soft);
  scrollbar-width: auto;
  scrollbar-color: auto;
  scrollbar-gutter: auto;
  display: flex;
  width: 100vw;
  padding: var(--spacing-32, 32px);
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-16, 16px);
  background: var(--color-bg-inverse, #FFF);
  position: absolute;
  left: 0;
  max-height: 77vh;
  overflow: auto;
}
.header-desktop-product-menu::-webkit-scrollbar {
  background: none;
  width: 6px;
  height: 6px;
}
.header-desktop-product-menu::-webkit-scrollbar-button {
  display: none;
}
.header-desktop-product-menu::-webkit-scrollbar-thumb {
  background: var(--color-bg-neutral-hovered);
  border-radius: 3px;
  height: 50%;
}
@media only screen and (max-width: 1024px) {
  .header-desktop-product-menu {
    display: none;
  }
}
.header-desktop-product-menu .features {
  display: flex;
  min-width: var(--Comparison-Cell-240, 240px);
  max-width: 800px;
  padding: 0px 0px 0px var(--spacing-none, 0px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8, 8px);
  flex: 1 0;
}
.header-desktop-product-menu .features .features-container {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-none, 0px);
  align-self: stretch;
}
.header-desktop-product-menu .features .features-container .column {
  display: flex;
  max-width: 320px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-16, 16px);
  flex: 1 0;
}
.header-desktop-product-menu .features .features-container .column .column-title {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: flex;
  padding: 0px var(--spacing-8, 8px);
  align-items: center;
  gap: var(--spacing-4, 4px);
  align-self: stretch;
  color: var(--color-text-subtlest, #A2A9B3);
}
.header-desktop-product-menu .features .features-container .column .product-card {
  outline: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  padding: var(--spacing-4, 4px) var(--spacing-8, 8px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
  border-radius: var(--border-radius-8, 8px);
}
.header-desktop-product-menu .features .features-container .column .product-card .product-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-4, 4px);
  align-self: stretch;
}
.header-desktop-product-menu .features .features-container .column .product-card .product-card-content .title {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-semibold, 600);
  gap: var(--spacing-4, 4px);
  text-align: left;
  color: var(--color-text-default, #2F3E52);
}
.header-desktop-product-menu .features .features-container .column .product-card .product-card-content .description {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body4-.. */
  font-size: var(--typography-size-body4, 11px);
  line-height: var(--typography-lineHeight-body4, 16px);
  font-weight: var(--typography-weight-body4-regular, 400);
  text-align: left;
  color: var(--color-text-subtlest, #A2A9B3);
}
.header-desktop-product-menu .features .features-container .column .product-card:hover {
  background-color: var(--color-bg-brand-subtle-enabled, #EFFAF8);
}
.header-desktop-product-menu .y-divider {
  display: flex;
  width: 1px;
  align-items: center;
  gap: var(--spacing-8, 8px);
  flex-shrink: 0;
  align-self: stretch;
  background-color: var(--color-outline-subtlest, #EBECEE);
}

.header-apps-container {
  display: flex;
  min-width: var(--Comparison-Cell-240, 240px);
  max-width: 560px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-16, 16px);
  flex: 1 0;
}
.header-apps-container .apps-title {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: flex;
  padding: 0px var(--spacing-8, 8px);
  align-items: center;
  gap: var(--spacing-4, 4px);
  color: var(--color-text-subtlest, #A2A9B3);
}
.header-apps-container .platform {
  display: flex;
  align-items: center;
  align-content: center;
  gap: 8px var(--spacing-8, 8px);
  align-self: stretch;
  flex-wrap: wrap;
}
.header-apps-container .platform .platform-card {
  display: flex;
  min-width: var(--Comparison-Cell-240, 240px);
  padding: var(--spacing-8, 8px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8, 8px);
  flex: 1 0;
  border-radius: var(--border-radius-8, 8px);
  background-color: transparent;
  outline: none;
  border: none;
  cursor: pointer;
}
@media screen and (min-width: 1073px) {
  .header-apps-container .platform .platform-card {
    max-width: calc(50% - 4px);
  }
}
.header-apps-container .platform .platform-card .platform-card-icon {
  display: flex;
  padding: var(--spacing-4, 4px);
  justify-content: center;
  align-items: center;
  border-radius: var(--border-radius-4, 4px);
  background: var(--color-bg-brand-subtle-enabled, #EFFAF8);
}
.header-apps-container .platform .platform-card .platform-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-4, 4px);
  align-self: stretch;
}
.header-apps-container .platform .platform-card .platform-card-content .title {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-semibold, 600);
  display: flex;
  align-items: center;
  gap: var(--spacing-4, 4px);
  color: var(--color-text-default, #2F3E52);
}
.header-apps-container .platform .platform-card .platform-card-content .description {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body4-.. */
  font-size: var(--typography-size-body4, 11px);
  line-height: var(--typography-lineHeight-body4, 16px);
  font-weight: var(--typography-weight-body4-regular, 400);
  text-align: left;
  color: var(--color-text-subtlest, #A2A9B3);
}
.header-apps-container .platform .platform-card .platform-card-content .description strong {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body4-.. */
  font-size: var(--typography-size-body4, 11px);
  line-height: var(--typography-lineHeight-body4, 16px);
  font-weight: var(--typography-weight-body4-regular, 400);
  color: var(--color-text-subtle, #5D697B);
}
.header-apps-container .platform .platform-card.no-icon {
  border-radius: var(--border-radius-none, 0px);
  border-top: 1px solid var(--color-outline-subtlest, #EBECEE);
  border-bottom: 1px solid var(--color-outline-subtlest, #EBECEE);
}
.header-apps-container .platform .platform-card:hover {
  background-color: var(--color-bg-brand-subtle-enabled, #EFFAF8);
}
.header-apps-container .platform .platform-card:hover .platform-card-icon {
  background: var(--color-bg-inverse, #FFF);
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.header-desktop-resources-menu {
  box-shadow: 0 0 0 0.5px var(--color-outline-subtlest), 0 16px 32px 0 var(--elevation-shadow-level4_soft);
  scrollbar-width: auto;
  scrollbar-color: auto;
  scrollbar-gutter: auto;
  display: flex;
  width: 100vw;
  padding: var(--spacing-32, 32px);
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-16, 16px);
  background: var(--color-bg-inverse, #FFF);
  position: absolute;
  left: 0;
  max-height: 77vh;
  overflow: auto;
}
.header-desktop-resources-menu::-webkit-scrollbar {
  background: none;
  width: 6px;
  height: 6px;
}
.header-desktop-resources-menu::-webkit-scrollbar-button {
  display: none;
}
.header-desktop-resources-menu::-webkit-scrollbar-thumb {
  background: var(--color-bg-neutral-hovered);
  border-radius: 3px;
  height: 50%;
}
@media only screen and (max-width: 1024px) {
  .header-desktop-resources-menu {
    display: none;
  }
}
.header-desktop-resources-menu .column {
  display: flex;
  min-width: 200px;
  max-width: 240px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-16, 16px);
  flex: 1 0;
}
.header-desktop-resources-menu .column .column-title {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-3 */
  font-size: var(--typography-size-caption3);
  font-weight: var(--typography-weight-caption3);
  line-height: var(--typography-lineHeight-caption3);
  display: flex;
  padding: 0px var(--spacing-8, 8px);
  align-items: center;
  gap: var(--spacing-4, 4px);
  align-self: stretch;
  color: var(--color-text-subtlest, #A2A9B3);
}
.header-desktop-resources-menu .column .item-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.header-desktop-resources-menu .column .item-container .item-name {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-semibold, 600);
  display: flex;
  padding: var(--spacing-4, 4px) var(--spacing-8, 8px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
  flex: 1 0;
  color: var(--color-text-default, #2F3E52);
}
.header-desktop-resources-menu .column .item-container .item-name:hover {
  border-radius: var(--border-radius-8, 8px);
  background: var(--color-bg-hovered, #EFFAF8);
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.header-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.header-mobile-menu {
  box-shadow: 0 0 0 0.5px var(--color-outline-subtlest), 0 16px 32px 0 var(--elevation-shadow-level4_soft);
  scrollbar-width: auto;
  scrollbar-color: auto;
  scrollbar-gutter: auto;
  display: flex;
  width: 100vw;
  padding: var(--spacing-24, 24px);
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-16, 16px);
  background: var(--color-bg-inverse, #FFF);
  position: absolute;
  right: 0;
  max-height: 77vh;
}
.header-mobile-menu::-webkit-scrollbar {
  background: none;
  width: 6px;
  height: 6px;
}
.header-mobile-menu::-webkit-scrollbar-button {
  display: none;
}
.header-mobile-menu::-webkit-scrollbar-thumb {
  background: var(--color-bg-neutral-hovered);
  border-radius: 3px;
  height: 50%;
}
.header-mobile-menu .header-mobile-content {
  max-width: 480px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-flow: column;
  gap: var(--spacing-16, 16px);
}
.header-mobile-menu .header-action {
  display: flex;
  padding: var(--spacing-8, 8px);
  align-items: center;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
  border-radius: var(--border-radius-8, 8px);
  border: 1px solid var(--color-outline-subtlest, #EBECEE);
  background: var(--color-bg-default, #F5F6F7);
}
.header-mobile-menu .header-action .header-action-sign-in {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  background: none;
  border: none;
  padding: 8px 16px;
  /* text border color */
  color: var(--color-text-bold, #1D2532);
  padding: var(--spacing-4, 4px);
  gap: var(--spacing-16, 16px);
  flex: 1 0;
  background-color: transparent;
}
.header-mobile-menu .header-action .header-action-sign-in:focus-visible {
  outline: none;
}
.header-mobile-menu .header-action .header-action-sign-in:is(a) {
  text-decoration: none;
}
.header-mobile-menu .header-action .header-action-sign-in:disabled {
  cursor: default;
}
.header-mobile-menu .header-action .header-action-sign-in:hover {
  color: var(--color-text-subtle, #5D697B);
}
.header-mobile-menu .header-action .header-action-sign-in:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.header-mobile-menu .header-action .header-action-sign-in .disabled {
  pointer-events: none;
}
.header-mobile-menu .header-action .header-action-start-now {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-brand-enabled, #5DCDB5);
  color: var(--color-text-bold, #1D2532);
  display: flex;
  flex: 1 0;
  border-radius: var(--border-radius-4, 4px);
}
.header-mobile-menu .header-action .header-action-start-now:focus-visible {
  outline: none;
}
.header-mobile-menu .header-action .header-action-start-now:is(a) {
  text-decoration: none;
}
.header-mobile-menu .header-action .header-action-start-now:disabled {
  cursor: default;
}
.header-mobile-menu .header-action .header-action-start-now:hover {
  background: var(--color-bg-brand-hovered, #92DECD);
}
.header-mobile-menu .header-action .header-action-start-now:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.header-mobile-menu .header-action .header-action-start-now .disabled {
  pointer-events: none;
}
.header-mobile-menu .header-menus {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-none, 0px);
  align-self: stretch;
}
.header-mobile-menu .header-menus .header-menu-container {
  display: flex;
  min-height: 48px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-none, 0px);
  align-self: stretch;
}
.header-mobile-menu .header-menus .header-menu-container .header-menu {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  background: none;
  border: none;
  padding: 8px 16px;
  /* text border color */
  color: var(--color-text-bold, #1D2532);
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-1 */
  font-size: var(--typography-size-caption1);
  font-weight: var(--typography-weight-caption1);
  line-height: var(--typography-lineHeight-caption1);
  max-width: unset;
  justify-content: flex-start;
  text-align: left;
  color: var(--color-text-default, #2F3E52);
  padding: var(--spacing-12, 12px) var(--spacing-8, 8px);
  gap: var(--spacing-4, 4px);
  align-self: stretch;
  border-radius: var(--border-radius-none, 0px);
  border-bottom: 1px solid var(--color-outline-subtlest, #EBECEE) !important;
}
.header-mobile-menu .header-menus .header-menu-container .header-menu:focus-visible {
  outline: none;
}
.header-mobile-menu .header-menus .header-menu-container .header-menu:is(a) {
  text-decoration: none;
}
.header-mobile-menu .header-menus .header-menu-container .header-menu:disabled {
  cursor: default;
}
.header-mobile-menu .header-menus .header-menu-container .header-menu:hover {
  color: var(--color-text-subtle, #5D697B);
}
.header-mobile-menu .header-menus .header-menu-container .header-menu:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.header-mobile-menu .header-menus .header-menu-container .header-menu .text {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-1 */
  font-size: var(--typography-size-caption1);
  font-weight: var(--typography-weight-caption1);
  line-height: var(--typography-lineHeight-caption1);
  flex: 1 0;
}
.header-mobile-menu .header-menus .header-menu-container .header-menu:first-child {
  border-top: 1px solid var(--color-outline-subtlest, #EBECEE);
}
.header-mobile-menu .header-menus .header-menu-container .header-menu.active {
  color: var(--color-text-brand-default, #5DCDB5);
}
.header-mobile-menu .header-menus .header-menu-container .header-menu.active:hover {
  color: var(--color-text-brand-bold, #429281);
}
.header-mobile-menu .header-menus .header-menu-container .header-menu.active:hover .icon-down {
  filter: brightness(0.6);
}
.header-mobile-menu .header-menus .header-menu-container .header-menu:hover {
  background: none;
  color: var(--color-text-brand-default, #5DCDB5);
}
.header-mobile-menu .header-menus .header-menu-container .header-menu:hover .icon-down {
  filter: brightness(0.6);
}
.header-mobile-menu .header-menus .header-menu-container .header-menu:not(.active) .icon-down {
  filter: brightness(0.5) grayscale(1);
}
.header-mobile-menu .header-menus .header-menu-container .header-menu.active .icon-down {
  transform: rotate(180deg);
}
.header-mobile-menu .header-menus .header-menu-container .header-menu .text {
  transition-duration: 0s;
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.header-mobile-sub-menu {
  display: flex;
  min-width: var(--Comparison-Cell-240, 240px);
  max-width: 560px;
  padding: var(--spacing-8, 8px) 0px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-24, 24px);
  align-self: stretch;
}
.header-mobile-sub-menu .column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.header-mobile-sub-menu .column .column-title {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-2 */
  font-size: var(--typography-size-caption2);
  font-weight: var(--typography-weight-caption2);
  line-height: var(--typography-lineHeight-caption2);
  display: flex;
  padding: 0px var(--spacing-8, 8px);
  align-items: center;
  gap: var(--spacing-4, 4px);
  color: var(--color-text-subtlest, #A2A9B3);
}
.header-mobile-sub-menu .column .item {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  background: none;
  border: none;
  padding: 8px 16px;
  /* text border color */
  color: var(--color-text-bold, #1D2532);
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-1 */
  font-size: var(--typography-size-caption1);
  font-weight: var(--typography-weight-caption1);
  line-height: var(--typography-lineHeight-caption1);
  text-transform: capitalize !important;
  display: flex;
  padding: var(--spacing-4, 4px) var(--spacing-8, 8px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.header-mobile-sub-menu .column .item:focus-visible {
  outline: none;
}
.header-mobile-sub-menu .column .item:is(a) {
  text-decoration: none;
}
.header-mobile-sub-menu .column .item:disabled {
  cursor: default;
}
.header-mobile-sub-menu .column .item:hover {
  color: var(--color-text-subtle, #5D697B);
}
.header-mobile-sub-menu .column .item:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.header-mobile-sub-menu .column .item .item-title {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-semibold, 600);
  display: flex;
  align-items: center;
  gap: var(--spacing-4, 4px);
  align-self: stretch;
  flex: 1 0;
  color: var(--color-text-default, #2F3E52);
}
.header-mobile-sub-menu .column .item:hover {
  border-radius: var(--border-radius-8, 8px);
  background: var(--color-bg-hovered, #EFFAF8);
}
.header-mobile-sub-menu .header-apps-container {
  gap: 8px var(--spacing-8, 8px);
}
.header-mobile-sub-menu .header-apps-container .apps-title {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-2 */
  font-size: var(--typography-size-caption2);
  font-weight: var(--typography-weight-caption2);
  line-height: var(--typography-lineHeight-caption2);
}
.header-mobile-sub-menu .header-apps-container .platform .platform-card {
  max-width: unset;
}
.header-mobile-sub-menu .header-apps-container .platform .platform-card .platform-card-content .description {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
}
.header-mobile-sub-menu .header-apps-container .platform .platform-card .platform-card-content .description strong {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.footer {
  display: flex;
  padding: 24px 24px 16px 24px;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-16, 16px);
  align-self: stretch;
  position: relative;
  z-index: 2;
  background: var(--color-bg-neutral-bold-enabled);
}
@media screen and (min-width: 480px) {
  .footer {
    padding: 64px 64px 16px 64px;
  }
}
.footer .footer-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  align-content: flex-start;
  align-self: stretch;
  flex-wrap: wrap;
}
@media screen and (min-width: 480px) {
  .footer .footer-container {
    display: grid;
    grid-template-columns: 630fr 248fr 248fr 248fr;
    grid-gap: 16px;
    gap: 16px;
  }
}
.footer .footer-container .footer-column {
  display: flex;
  max-width: 240px;
  min-width: -moz-fit-content;
  min-width: fit-content;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-16, 16px);
  flex: 1 0;
}
.footer .footer-container .footer-column .footer-list {
  display: flex;
  padding: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.footer .footer-container .footer-column .footer-list .tf-logo {
  display: flex;
  padding: var(--spacing-4, 4px) 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
}
.footer .footer-container .footer-column .footer-list .contact-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-4, 4px);
  padding: 0;
}
.footer .footer-container .footer-column .footer-list .contact-info .text {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-regular, 400);
  color: #F5F6F7;
  align-items: center;
  display: flex;
}
.footer .footer-container .footer-column .footer-list .footer-item {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-semibold, 600);
  display: flex;
  padding: 0;
  align-items: center;
  gap: var(--spacing-4, 4px);
  color: #C0C5CC;
}
.footer .footer-container .footer-column .footer-title {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-2 */
  font-size: var(--typography-size-caption2);
  font-weight: var(--typography-weight-caption2);
  line-height: var(--typography-lineHeight-caption2);
  color: #A2A9B3;
}
.footer .footer-container .footer-column .footer-menus {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-4, 4px);
  align-self: stretch;
}
.footer .footer-container .footer-column .footer-menus .footer-subitem {
  display: flex;
  padding: var(--spacing-4, 4px) 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.footer .footer-container .footer-column .footer-menus .footer-subitem .text {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-semibold, 600);
  text-decoration: none;
  font-weight: 400;
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  align-self: stretch;
  color: var(--color-text-inverse);
}
.footer .footer-container .footer-column .footer-menus .footer-subitem .text.slim {
  font-weight: 300;
}
.footer .footer-trademark {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  align-self: stretch;
  color: #C0C5CC;
  text-align: center;
  padding: 16px 0;
  border-top: 1px solid #2F3E52;
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.product-section-item {
  display: flex;
  width: 100%;
  max-width: 1120px;
  padding: 64px 0;
  align-items: center;
  align-content: center;
  gap: 64px;
  flex-flow: row;
  scroll-margin-top: 140px;
  overflow: hidden;
}
.product-section-item.top-bottom {
  align-items: center;
}
.product-section-item .content-left, .product-section-item .content-right {
  z-index: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 16px;
  flex-basis: 100%;
  align-items: flex-start;
  overflow: hidden;
}
.product-section-item .content-left:has(img), .product-section-item .content-right:has(img) {
  align-items: center;
}
.product-section-item .content-left:has(img) img, .product-section-item .content-right:has(img) img {
  border-radius: var(--border-radius-4, 4px);
  margin: auto;
  max-width: 100%;
  height: auto;
}
.product-section-item .content-left .number, .product-section-item .content-right .number {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-text-default);
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 1000px;
  background: var(--color-bg-neutral-enabled);
  align-content: center;
  text-align: center;
}
.product-section-item .content-text {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4, 4px);
  align-self: stretch;
  flex-flow: column;
}
.product-section-item .content-text .text {
  flex: 1 0;
  color: var(--color-text-brand-default, #5DCDB5);
  font-family: var(--font-family-body, Montserrat);
  font-size: var(--typography-size-heading3, 32px);
  font-style: normal;
  font-weight: 800;
  line-height: var(--typography-lineHeight-heading3, 40px);
}
.product-section-item .content-text .text .text-black {
  color: var(--color-text-bold, #1D2532);
}
.product-section-item .content-text .description {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body1-.. */
  font-size: var(--typography-size-body1, 16px);
  line-height: var(--typography-lineHeight-body1, 24px);
  font-weight: var(--typography-weight-body1-regular, 400);
  line-height: 20px;
  color: var(--color-text-default, #2F3E52);
}
.product-section-item .content-text .description strong {
  font-weight: var(--typography-weight-body2-medium, 700);
}
.product-section-item .content-text ul.feature-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.product-section-item .content-text ul.feature-list > li {
  display: grid;
  grid-template: auto 1fr/auto 1fr;
}
.product-section-item .content-text ul.feature-list > li .feature-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}
.product-section-item .content-text ul.feature-list > li .feature-description {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin-top: 4px;
  color: var(--color-text-subtle);
}
@media screen and (max-width: 479.98px) {
  .product-section-item {
    align-items: stretch;
    gap: 32px;
    padding: 24px 0;
  }
  .product-section-item:not(.top-bottom) {
    display: flex;
    flex-flow: column;
  }
  .product-section-item.top-bottom {
    display: flex;
    flex-flow: column;
  }
  .product-section-item .content-left, .product-section-item .content-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  .product-section-item .content-left:has(img), .product-section-item .content-right:has(img) {
    width: 100%;
  }
  .product-section-item .content-text .text {
    max-width: 80%;
    font-size: var(--typography-size-heading3-m, 32px);
  }
  .product-section-item .content-text .description {
    font-size: 14px;
  }
  .product-section-item .number {
    font-size: 24px;
    width: 48px;
    height: 48px;
  }
}
@media screen and (min-width: 480px) and (max-width: 959.98px) {
  .product-section-item .content-left, .product-section-item .content-right {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
  }
  .product-section-item .content-left:has(img), .product-section-item .content-right:has(img) {
    max-width: unset;
  }
  .product-section-item .content-text .text {
    max-width: 80%;
    font-size: var(--typography-size-heading3-m, 32px);
  }
  .product-section-item .content-text .description {
    font-size: var(--typography-size-body2-m, 12px);
  }
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.image-with-loader {
  display: grid;
  width: 100%;
  min-width: 0;
  height: auto;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
}
.image-with-loader .loader {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1;
  grid-row: 1;
}
.image-with-loader img {
  grid-column: 1;
  grid-row: 1;
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.product-hero {
  width: 100%;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 24px;
  align-self: stretch;
  border-radius: var(--border-radius-none, 0px);
  background: var(--color-bg-inverse, #FFF);
  gap: 32px var(--spacing-64, 32px);
}
.product-hero:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: linear-gradient(180deg, rgba(160, 244, 226, 0) 0%, rgba(205, 240, 232, 0.5) 100%);
  height: 96px;
}
.product-hero .landing-section {
  max-width: 1120px;
  display: flex;
  flex-flow: column;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  margin: 0 auto;
  padding-bottom: 64px;
}
.product-hero .landing-section .section-left {
  flex-basis: 100%;
  display: flex;
  flex-flow: column;
  gap: var(--spacing-16, 16px);
}
.product-hero .landing-section .section-left .tag {
  display: flex;
  align-items: center;
  gap: var(--spacing-2, 2px);
}
.product-hero .landing-section .section-left .tag .text {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-2 */
  font-size: var(--typography-size-caption2);
  font-weight: var(--typography-weight-caption2);
  line-height: var(--typography-lineHeight-caption2);
  padding: var(--spacing-4, 4px) var(--spacing-8, 8px);
  border-radius: var(--border-radius-16, 16px);
  background: var(--color-bg-default, #F5F6F7);
  color: var(--color-text-subtle, #5D697B);
  text-align: center;
}
.product-hero .landing-section .section-left .heading {
  display: flex;
  max-width: 760px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-12, 12px);
  align-self: stretch;
}
.product-hero .landing-section .section-left .heading .text {
  text-transform: capitalize;
  color: var(--color-text-brand-default, #5DCDB5);
  font-style: normal;
  font-weight: 600;
}
@media screen and (min-width: 480px) {
  .product-hero .landing-section .section-left .heading .text {
    font-family: var(--font-clash-display);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading2, 48px);
    line-height: var(--typography-lineHeight-heading2, 64px);
  }
}
@media screen and (max-width: 479.98px) {
  .product-hero .landing-section .section-left .heading .text {
    font-family: var(--font-clash-display);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading2-m, 32px);
    line-height: var(--typography-lineHeight-heading2-m, 40px);
  }
}
.product-hero .landing-section .section-left .heading .text strong {
  color: var(--color-text-bold, #1D2532);
  font-style: normal;
  font-weight: 600;
}
.product-hero .landing-section .section-left .heading .description {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body1-.. */
  font-size: var(--typography-size-body1, 16px);
  line-height: var(--typography-lineHeight-body1, 24px);
  font-weight: var(--typography-weight-body1-regular, 400);
  color: var(--color-text-subtle, #5D697B);
}
.product-hero .landing-section .section-left .cta-container {
  display: flex;
  gap: 17px;
}
.product-hero .landing-section .section-left .cta-container .cta-hero {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-brand-enabled, #5DCDB5);
  color: var(--color-text-bold, #1D2532);
  border-radius: var(--border-radius-4, 4px);
  color: var(--color-text-bold, #1D2532);
}
.product-hero .landing-section .section-left .cta-container .cta-hero:focus-visible {
  outline: none;
}
.product-hero .landing-section .section-left .cta-container .cta-hero:is(a) {
  text-decoration: none;
}
.product-hero .landing-section .section-left .cta-container .cta-hero:disabled {
  cursor: default;
}
.product-hero .landing-section .section-left .cta-container .cta-hero:hover {
  background: var(--color-bg-brand-hovered, #92DECD);
}
.product-hero .landing-section .section-left .cta-container .cta-hero:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.product-hero .landing-section .section-left .cta-container .cta-other {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  background: none;
  padding: 7px 16px;
  /* outlined border color */
  border: 1px solid var(--color-outline-bold, #2F3E52);
  color: var(--color-text-default, #2F3E52);
  border-radius: var(--border-radius-4, 4px);
  background: var(--color-bg-neutral-bold-enabled, #253040);
  color: var(--color-text-inverse, #FFF);
}
.product-hero .landing-section .section-left .cta-container .cta-other:focus-visible {
  outline: none;
}
.product-hero .landing-section .section-left .cta-container .cta-other:is(a) {
  text-decoration: none;
}
.product-hero .landing-section .section-left .cta-container .cta-other:disabled {
  cursor: default;
}
.product-hero .landing-section .section-left .cta-container .cta-other:hover {
  border: 1px solid var(--color-outline-default, #5D697B);
  color: var(--color-text-subtle, #5D697B);
}
.product-hero .landing-section .section-left .cta-container .cta-other:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.product-hero .landing-section .section-right {
  flex-basis: 100%;
}
.product-hero .landing-section .section-right:not(.show-on-mobile) {
  display: none;
}
.product-hero .landing-section .section-right .hero-image {
  display: flex;
  max-width: 1320px;
  padding: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 0;
  border-radius: var(--border-radius-16, 16px);
  background: url("/images/home/home-hero/dot-grid.png") lightgray 0% 0%/400px 400px repeat;
}
.product-hero .landing-section .section-right .hero-image img {
  max-width: 100%;
  height: auto;
}
.product-hero .styler {
  position: absolute;
  bottom: 64px;
  left: 0;
  right: 0;
  height: 96px;
  background: linear-gradient(180deg, rgba(160, 244, 226, 0) 0%, rgba(160, 244, 226, 0.25) 100%);
}
@media screen and (min-width: 960px) {
  .product-hero {
    gap: var(--spacing-64, 64px);
    padding: 64px 160px;
  }
  .product-hero .landing-section {
    flex-flow: row;
    width: 100%;
  }
  .product-hero .landing-section .section-right {
    display: flex;
    align-self: stretch;
  }
  .product-hero .landing-section .section-right:not(.show-on-mobile) {
    display: flex;
  }
  .product-hero .landing-section .section-right .hero-image {
    padding: 32px;
  }
  .product-hero .landing-section .section-left {
    max-width: 528px;
  }
  .product-hero .landing-section .section-left .cta-container .cta-other {
    background: none;
    color: var(--color-text-bold, #1D2532);
  }
}
@media screen and (min-width: 480px) and (max-width: 959.98px) {
  .product-hero {
    padding: 64px 32px;
  }
  .product-hero .landing-section {
    flex-flow: column;
  }
  .product-hero .landing-section .section-left .heading .text {
    font-family: var(--font-clash-display);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading2-m, 32px);
    line-height: var(--typography-lineHeight-heading2-m, 40px);
  }
  .product-hero .landing-section .section-left .heading .description {
    font-family: var(--font-family-body, "Montserrat");
    font-style: normal;
    font-weight: var(--typography-weight-body-regular, 400);
    font-size: var(--typography-size-body1-m, 14px);
    line-height: var(--typography-lineHeight-body1-m, 20px);
  }
  .product-hero .landing-section .section-left .cta-container .cta-other {
    background: var(--color-bg-neutral-bold-enabled, #253040);
    color: var(--color-text-inverse, #FFF);
  }
  .product-hero .landing-section .section-right:not(.show-on-mobile) {
    display: none;
  }
  .product-hero .landing-section .section-right .hero-image {
    padding: var(--spacing-64, 64px);
  }
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.product-hero-without-image {
  background: var(--color-bg-brand-subtle-enabled, #EFFAF8);
  display: flex;
  padding: var(--spacing-32, 32px) var(--Padding-page, 160px);
  flex-direction: column;
  align-items: center;
  gap: 34px;
  align-self: stretch;
}
.product-hero-without-image:not(.no-margin) {
  margin-bottom: 64px;
}
.product-hero-without-image.full-height {
  min-height: calc(100vh - 835px);
}
.product-hero-without-image .hero-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4, 4px);
}
.product-hero-without-image .hero-banner .hero-banner-tag {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-2 */
  font-size: var(--typography-size-caption2);
  font-weight: var(--typography-weight-caption2);
  line-height: var(--typography-lineHeight-caption2);
  border-radius: var(--border-radius-8, 8px);
  background: var(--color-bg-warning-enabled, #FF7E25);
  display: flex;
  padding: var(--spacing-4, 4px) var(--spacing-8, 8px);
  align-items: center;
  gap: var(--spacing-2, 2px);
  color: var(--color-text-inverse, #FFF);
  text-align: center;
  max-width: 20vw;
}
.product-hero-without-image .hero-banner .hero-banner-text {
  font-family: var(--font-family-caption);
  font-style: normal;
  text-transform: uppercase;
  /* caption-1 */
  font-size: var(--typography-size-caption1);
  font-weight: var(--typography-weight-caption1);
  line-height: var(--typography-lineHeight-caption1);
  border-radius: var(--border-radius-8, 8px);
  background: var(--color-bg-warning-subtle-enabled, #FFF9F5);
  display: flex;
  padding: var(--spacing-4, 4px) var(--spacing-8, 8px);
  align-items: center;
  gap: var(--spacing-2, 2px);
  color: var(--color-text-warning-default, #FF7E25);
  text-align: center;
  max-width: 50vw;
}
.product-hero-without-image .header {
  font-family: var(--font-clash-display);
  font-style: normal;
  font-weight: var(--typography-weight-heading, 600);
  font-size: var(--typography-size-heading2, 48px);
  line-height: var(--typography-lineHeight-heading2, 64px);
  color: var(--color-text-brand-default, #5DCDB5);
  align-self: stretch;
  text-align: center;
}
.product-hero-without-image .header strong {
  color: var(--color-text-default, #2F3E52);
}
.product-hero-without-image .sub-header {
  font-family: var(--font-family-heading);
  font-style: normal;
  font-weight: var(--typography-weight-heading, 600);
  font-size: var(--typography-size-heading5, 20px);
  line-height: var(--typography-lineHeight-heading5, 24px);
  color: var(--color-text-subtle, #5D697B);
  text-align: center;
  font-weight: var(--font-weight-regular, 400);
  max-width: 1224px;
}
@media only screen and (max-width: 1024px) {
  .product-hero-without-image {
    gap: var(--spacing-8, 8px);
    padding: var(--spacing-32, 32px) var(--spacing-24, 24px);
  }
  .product-hero-without-image .header {
    font-family: var(--font-clash-display);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading2-m, 32px);
    line-height: var(--typography-lineHeight-heading2-m, 40px);
  }
  .product-hero-without-image .sub-header {
    font-family: var(--font-family-body, "Montserrat");
    font-style: normal;
    font-weight: var(--typography-weight-body-regular, 400);
    font-size: var(--typography-size-body2-m, 12px);
    line-height: var(--typography-lineHeight-body2-m, 16px);
  }
}
.product-hero-without-image ~ .product-section:before {
  background: linear-gradient(180deg, rgb(239, 250, 248) 0%, rgba(160, 244, 226, 0) 100%);
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.product-content .full-styler {
  margin-top: -64px;
  height: 192px;
  background: linear-gradient(180deg, rgba(160, 244, 226, 0) 0%, rgba(160, 244, 226, 0.25) 50%, rgba(160, 244, 226, 0) 100%);
}
.product-content > * {
  position: relative;
}

@media screen and (min-width: 480px) {
  .product-content.qa-page .product-section-item.left-right {
    display: grid;
    grid-template-columns: 688fr 432fr;
    grid-gap: 32px;
    gap: 32px;
  }
}
.product-content.qa-page .product-section-item.left-right .content-left img {
  border-radius: 16px;
  box-shadow: 0 0 37.6px 4px rgba(93, 205, 181, 0.12);
}
.product-content.qa-page .product-section-item.left-right .content-left, .product-content.qa-page .product-section-item.left-right .content-right {
  align-self: center;
}
.product-content.qa-page .home-cta {
  margin-bottom: 0;
  padding-bottom: 64px;
}
.product-content.qa-page .home-cta .cta-container {
  margin-bottom: 0;
}
@media screen and (max-width: 479.98px) {
  .product-content.qa-page .home-ultimate-cta {
    margin-top: 32px;
  }
}
@media screen and (min-width: 480px) {
  .product-content.qa-page .home-ultimate-cta {
    margin-top: 100px;
  }
}
.product-content.qa-page:not(:has(.home-ultimate-cta)):after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: linear-gradient(0deg, var(--color-bg-brand-enabled), rgba(160, 244, 226, 0) 100%);
  height: 400px;
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.product-section {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0 var(--spacing-64, 64px);
  align-self: stretch;
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  border-radius: var(--border-radius-none, 0px);
  padding: 0 24px;
}
.product-section > * {
  z-index: 1;
}
.product-section.start-styler-default:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: linear-gradient(0deg, rgba(160, 244, 226, 0) 0%, rgba(205, 240, 232, 0.5) 100%);
  height: 96px;
}
.product-section.end-styler-default:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: linear-gradient(180deg, rgba(160, 244, 226, 0) 0%, rgba(205, 240, 232, 0.5) 100%);
  height: 96px;
}
.product-section .heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4, 4px);
  margin-bottom: 32px;
  margin-top: 64px;
  text-align: center;
  text-transform: capitalize;
  color: var(--color-text-bold, #1D2532);
}
@media screen and (min-width: 480px) {
  .product-section .heading {
    font-family: var(--font-clash-display);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading2, 48px);
    line-height: var(--typography-lineHeight-heading2, 64px);
  }
}
@media screen and (max-width: 479.98px) {
  .product-section .heading {
    font-family: var(--font-clash-display);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading2-m, 32px);
    line-height: var(--typography-lineHeight-heading2-m, 40px);
  }
}
.product-section .heading strong {
  color: var(--color-text-brand-default, #5DCDB5);
}
.product-section .sub-heading {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}
.product-section .product-section-content {
  align-self: stretch;
}
.product-section .product-section-item {
  gap: 16px;
  padding: var(--spacing-32, 32px) 0px;
}
.product-section .product-section-item:nth-child(1n) {
  flex-flow: column;
}
.product-section .product-section-item:nth-child(2n) {
  flex-flow: column-reverse;
}
.product-section .product-section-item .content-top img, .product-section .product-section-item .content-bottom img {
  max-width: 100%;
  height: auto;
}
.product-section .product-section-item .content-top .description, .product-section .product-section-item .content-bottom .description {
  text-align: center;
}
.product-section .product-section-item .content-left img, .product-section .product-section-item .content-right img {
  transition: all 0.3s ease-out;
  object-fit: contain;
  margin: 24px;
  max-width: calc(100% - 48px);
  height: auto;
}
.product-section .product-section-item .content-left .content-text, .product-section .product-section-item .content-right .content-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-24, 24px);
  flex: 1 0;
}
.product-section .product-section-item .content-left .content-text .text, .product-section .product-section-item .content-right .content-text .text {
  flex-flow: row;
  flex-wrap: wrap;
  color: var(--color-text-bold, #1D2532);
  font-weight: var(--typography-weight-heading3, 600);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-4, 4px);
  align-self: stretch;
  max-width: unset;
}
@media screen and (min-width: 480px) {
  .product-section .product-section-item .content-left .content-text .text, .product-section .product-section-item .content-right .content-text .text {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading3, 32px);
    line-height: var(--typography-lineHeight-heading3, 40px);
  }
}
@media screen and (max-width: 479.98px) {
  .product-section .product-section-item .content-left .content-text .text, .product-section .product-section-item .content-right .content-text .text {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading3-m, 24px);
    line-height: var(--typography-lineHeight-heading3-m, 32px);
  }
}
.product-section .product-section-item .content-left .content-text .text strong, .product-section .product-section-item .content-right .content-text .text strong {
  color: var(--color-text-brand-default, #5DCDB5);
  font-weight: var(--typography-weight-heading3, 600);
}
.product-section .product-section-item .content-left .content-text .description, .product-section .product-section-item .content-left .content-text .sub-title, .product-section .product-section-item .content-right .content-text .description, .product-section .product-section-item .content-right .content-text .sub-title {
  font-family: var(--font-family-body, "Montserrat");
  font-style: normal;
  font-weight: var(--typography-weight-body-regular, 400);
  font-size: var(--typography-size-body3-m, 11px);
  line-height: var(--typography-lineHeight-body3-m, 12px);
  color: var(--color-text-subtle, #5D697B);
}
.product-section .product-section-item .content-left .content-text .description ul, .product-section .product-section-item .content-left .content-text .sub-title ul, .product-section .product-section-item .content-right .content-text .description ul, .product-section .product-section-item .content-right .content-text .sub-title ul {
  list-style: disc;
  padding: 12px 0;
}
.product-section .product-section-item .content-left .content-text .description ul li, .product-section .product-section-item .content-left .content-text .sub-title ul li, .product-section .product-section-item .content-right .content-text .description ul li, .product-section .product-section-item .content-right .content-text .sub-title ul li {
  list-style-position: inside;
  margin: 0 1px;
  padding-left: 16px;
  text-indent: -16px;
}
.product-section .product-section-item .content-left .content-text .description a, .product-section .product-section-item .content-left .content-text .sub-title a, .product-section .product-section-item .content-right .content-text .description a, .product-section .product-section-item .content-right .content-text .sub-title a {
  color: var(--color-text-subtle, #5D697B);
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}
.product-section .product-section-item .content-left:has(img), .product-section .product-section-item .content-right:has(img) {
  display: flex;
  max-width: 1320px;
  padding: 0;
}
.product-section .content-text .tabs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.product-section .content-text .tabs .tab {
  display: flex;
  padding: var(--spacing-8, 8px) 0px;
  align-items: center;
  align-self: stretch;
  border-radius: var(--border-radius-4, 4px);
  background: var(--color-bg-default, #F5F6F7);
}
.product-section .content-text .tabs .tab.active {
  border-radius: var(--border-radius-4, 4px);
  background: var(--color-bg-hovered, #EFFAF8);
  border-left: 4px solid #5DCDB5;
  margin-left: -4px;
}
.product-section .content-text .tabs .tab .tab-container {
  display: flex;
  padding: 0px var(--spacing-8, 8px) 0px var(--spacing-16, 16px);
  gap: var(--spacing-4, 4px);
  flex: 1 0;
  flex-flow: column;
  align-items: flex-start;
}
.product-section .content-text .tabs .tab .tab-container .tab-title {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-medium, 500);
  color: var(--color-text-default, #2F3E52);
}
.product-section .content-text .tabs .tab .tab-container .tab-title strong {
  font-weight: var(--typography-weight-body2-medium, 700);
}
.product-section .content-text .tabs .tab .tab-container .tab-description {
  transition: all 0.3s ease-out;
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  color: var(--color-text-subtle, #5D697B);
}
@media screen and (min-width: 480px) and (max-width: 959.98px) {
  .product-section {
    padding: 0 var(--spacing-32, 32px);
  }
  .product-section .heading {
    font-family: var(--font-clash-display);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading2-m, 32px);
    line-height: var(--typography-lineHeight-heading2-m, 40px);
  }
  .product-section .product-section-item {
    gap: 16px;
  }
  .product-section .product-section-item .content-left .content-text .text, .product-section .product-section-item .content-right .content-text .text {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading3-m, 24px);
    line-height: var(--typography-lineHeight-heading3-m, 32px);
  }
  .product-section .product-section-item .content-left .content-text .description, .product-section .product-section-item .content-left .content-text .sub-title, .product-section .product-section-item .content-right .content-text .description, .product-section .product-section-item .content-right .content-text .sub-title {
    font-family: var(--font-family-body, "Montserrat");
    font-style: normal;
    font-weight: var(--typography-weight-body-regular, 400);
    font-size: var(--typography-size-body3-m, 11px);
    line-height: var(--typography-lineHeight-body3-m, 12px);
    color: var(--color-text-subtle, #5D697B);
  }
  .product-section .product-section-item .content-left .content-text .description ul li, .product-section .product-section-item .content-left .content-text .sub-title ul li, .product-section .product-section-item .content-right .content-text .description ul li, .product-section .product-section-item .content-right .content-text .sub-title ul li {
    padding-left: 16px;
    text-indent: -16px;
  }
}
@media screen and (min-width: 960px) {
  .product-section {
    padding: 0 160px 64px 160px;
    max-width: 1440px;
  }
  .product-section .product-section-item.left-right:nth-child(1n) {
    flex-flow: row;
  }
  .product-section .product-section-item.left-right:nth-child(2n) {
    flex-flow: row;
  }
  .product-section .product-section-item.top-bottom {
    gap: 48px;
  }
  .product-section .product-section-item .content-left .content-text .description, .product-section .product-section-item .content-right .content-text .description {
    font-family: var(--font-family-body, "Montserrat");
    font-style: normal;
    font-weight: var(--typography-weight-body-regular, 400);
    font-size: var(--typography-size-body1, 16px);
    line-height: var(--typography-lineHeight-body1, 24px);
    color: var(--color-text-subtle, #5D697B);
  }
  .product-section .product-section-item .content-left .content-text .description ul li, .product-section .product-section-item .content-right .content-text .description ul li {
    padding-left: 23px;
    text-indent: -23px;
  }
  .product-section .product-section-item .content-left .content-text .sub-title, .product-section .product-section-item .content-right .content-text .sub-title {
    font-family: var(--font-family-body, "Montserrat");
    font-style: normal;
    font-weight: var(--typography-weight-body-regular, 400);
    font-size: var(--typography-size-body3, 12px);
    line-height: var(--typography-lineHeight-body3, 16px);
    color: var(--color-text-subtle, #5D697B);
  }
  .product-section .product-section-item .content-top .description, .product-section .product-section-item .content-bottom .description {
    max-width: 680px;
    text-align: center;
  }
}
.product-section .wave-styler {
  --wave-styler-translate-y: -200px;
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.release .product-hero-without-image:not(.no-margin) {
  margin-bottom: 0;
}
.release .other-releases-container {
  display: flex;
  justify-content: center;
  padding: 24px;
  z-index: 1;
}
.release .other-releases-container .other-releases {
  gap: 32px;
  display: flex;
  flex-flow: column;
}
.release .other-releases-container .other-releases .release-carousel {
  padding: 0px;
}
.release .other-releases-container .other-releases .release-carousel .carousel-container {
  margin: 0;
}
.release .other-releases-container .other-releases .release-carousel .carousel-container .release-text {
  margin-bottom: 0;
}
.release .other-releases-container .other-releases .release-carousel .carousel-container .release-text .release-text-content .columns {
  gap: 12px;
}
@media screen and (min-width: 960px) {
  .release .other-releases-container .other-releases {
    padding-top: 32px;
    display: flex;
    flex-flow: row;
    max-width: 1120px;
    flex-wrap: wrap;
    gap: 64px 32px;
  }
  .release .other-releases-container .other-releases .release-carousel {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    width: calc(50% - 16px);
  }
  .release .other-releases-container .other-releases .release-carousel .carousel-container {
    width: 100%;
  }
  .release .other-releases-container .other-releases .release-carousel .carousel-container .release-text .release-text-content .columns {
    flex-flow: column;
  }
}
@media screen and (min-width: 480px) and (max-width: 959.98px) {
  .release .other-releases-container {
    padding: 32px 64px;
  }
}
@media screen and (min-width: 960px) {
  .release .other-releases-container {
    padding: 32px 160px;
  }
}
.release .product-content > .release-carousel {
  background: var(--color-bg-brand-subtle-enabled, #EFFAF8);
}
.release.whats-new .home-cta.default-styler:after {
  background: linear-gradient(180deg, #EFFAF8 0%, var(--color-bg-brand-hovered, #92DECD) 74.96%, var(--color-bg-brand-enabled, #5DCDB5) 99.95%);
  height: 400px;
}
.release.all-releases .home-cta.default-styler:after {
  background: linear-gradient(0deg, var(--color-bg-brand-enabled), rgba(160, 244, 226, 0) 100%);
  height: 300px;
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.release-carousel {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  padding: 0 24px;
}
.release-carousel .carousel-container {
  display: flex;
  width: 100%;
  max-width: 1120px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-16, 16px);
}
.release-carousel .carousel-container .carousel-content {
  width: 100%;
  max-width: 1448px;
  margin: 24px auto 0;
  overflow: hidden;
}
.release-carousel .carousel-container .carousel-content .slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--border-radius-16, 16px);
}
.release-carousel .carousel-container .carousel-content .slides {
  display: flex;
  width: 100%;
  transition: transform 0.5s ease-in-out;
}
.release-carousel .carousel-container .carousel-content .slides.looping {
  transition: none;
}
.release-carousel .carousel-container .carousel-content .slide-legacy {
  width: 100%;
  position: relative;
  flex: 0 0 100%;
}
.release-carousel .carousel-container .carousel-content .slide-legacy img {
  width: 100%;
  height: auto;
  display: block;
}
.release-carousel .carousel-container .carousel-content .slide:not(.slide-legacy) {
  min-width: 100%;
  background: linear-gradient(180deg, #051C3C 0%, #253F61 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
@media screen and (min-width: 480px) and (max-width: 959.98px) {
  .release-carousel .carousel-container .carousel-content .slide:not(.slide-legacy) {
    padding: 16px 24px;
  }
}
@media screen and (min-width: 960px) {
  .release-carousel .carousel-container .carousel-content .slide:not(.slide-legacy) {
    padding: 24px 40px;
  }
}
.release-carousel .carousel-container .carousel-content .slide:not(.slide-legacy) .visual {
  flex-grow: 1;
  padding: 0 40px;
  margin: 16px 0;
}
@media screen and (max-width: 479.98px) {
  .release-carousel .carousel-container .carousel-content .slide:not(.slide-legacy) .visual {
    margin: 0;
    padding: 0 24px;
  }
}
@media screen and (min-width: 480px) and (max-width: 959.98px) {
  .release-carousel .carousel-container .carousel-content .slide:not(.slide-legacy) .visual {
    margin: 0;
  }
}
.release-carousel .carousel-container .carousel-content .slide:not(.slide-legacy) .visual img {
  max-width: 100%;
  height: auto;
}
.release-carousel .carousel-container .carousel-content .slide:not(.slide-legacy) .title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--color-text-inverse);
}
@media screen and (min-width: 480px) and (max-width: 959.98px) {
  .release-carousel .carousel-container .carousel-content .slide:not(.slide-legacy) .title {
    font-size: 20px;
    line-height: 30px;
  }
}
@media screen and (min-width: 960px) {
  .release-carousel .carousel-container .carousel-content .slide:not(.slide-legacy) .title {
    font-size: 32px;
    line-height: 40px;
  }
  .release-carousel .carousel-container .carousel-content .slide:not(.slide-legacy) .title:after {
    content: "";
    display: block;
    height: 8px;
    width: 70px;
    background: var(--color-bg-brand-enabled);
    margin-top: 12px;
  }
}
.release-carousel .carousel-container .carousel-content .slide:not(.slide-legacy) .description {
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  color: var(--color-text-inverse);
}
@media screen and (max-width: 479.98px) {
  .release-carousel .carousel-container .carousel-content .slide:not(.slide-legacy) .description {
    display: none;
  }
}
@media screen and (min-width: 480px) and (max-width: 959.98px) {
  .release-carousel .carousel-container .carousel-content .slide:not(.slide-legacy) .description {
    font-size: 12px;
    line-height: 16px;
  }
}
.release-carousel .carousel-container .carousel-content .prev, .release-carousel .carousel-container .carousel-content .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color: white;
  border: none;
  padding: 0 12px;
  cursor: pointer;
}
.release-carousel .carousel-container .carousel-content .prev img, .release-carousel .carousel-container .carousel-content .next img {
  width: 16px;
  height: 16px;
}
.release-carousel .carousel-container .carousel-content .prev {
  left: 0px;
}
.release-carousel .carousel-container .carousel-content .next {
  right: 0px;
}
.release-carousel .carousel-container .release-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
  margin-bottom: 18px;
}
.release-carousel .carousel-container .release-text .small-title {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  /* body3-.. */
  font-size: var(--typography-size-body3, 12px);
  line-height: var(--typography-lineHeight-body3, 16px);
  font-weight: var(--typography-weight-body3-regular, 400);
  color: var(--color-text-default, #2F3E52);
}
.release-carousel .carousel-container .release-text .release-text-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
}
.release-carousel .carousel-container .release-text .release-text-content .intro {
  color: var(--color-text-default, #2F3E52);
}
@media screen and (min-width: 480px) {
  .release-carousel .carousel-container .release-text .release-text-content .intro {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading5, 20px);
    line-height: var(--typography-lineHeight-heading5, 24px);
  }
}
@media screen and (max-width: 479.98px) {
  .release-carousel .carousel-container .release-text .release-text-content .intro {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading5-m, 16px);
    line-height: var(--typography-lineHeight-heading5-m, 20px);
  }
}
.release-carousel .carousel-container .release-text .release-text-content .intro-subtitle {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-medium, 500);
  color: var(--color-text-brand-bold, #429281);
}
.release-carousel .carousel-container .release-text .release-text-content .columns {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-flow: column;
  align-self: stretch;
}
.release-carousel .carousel-container .release-text .release-text-content .columns .column-content {
  font-size: 16px;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1 0;
  gap: 4px;
  color: var(--color-text-subtle, #5D697B);
}
.release-carousel .carousel-container .release-text .release-text-content .columns .column-content.features {
  font-size: 16px;
  line-height: 20px;
  gap: 0;
}
.release-carousel .carousel-container .release-text .release-text-content .columns .column-content.features .list {
  color: var(--color-text-subtle, #5D697B);
  display: flex;
  font-weight: 400;
}
.release-carousel .carousel-container .release-text .release-text-content .columns .column-content.features .list .bullet {
  width: 24px;
  height: 16px;
  align-items: center;
  justify-content: center;
  display: flex;
}
.release-carousel .carousel-container .release-text .release-text-content .columns .column-content.features .list .bullet:before {
  content: "•";
  width: 16px;
  text-align: center;
}
.release-carousel .carousel-container .release-text .release-text-content .columns .column-content.features a {
  text-decoration: none;
}
.release-carousel .carousel-container .release-text .release-text-content .columns .column-content.features a:hover {
  color: var(--color-text-brand-default);
}
.release-carousel .carousel-container .release-text .release-text-content .columns .column-content.features div {
  display: flex;
}
.release-carousel .carousel-container .release-text .release-text-content .columns .column-content.features div.title {
  color: var(--color-text-subtle, #5D697B);
  font-weight: 500;
}
.release-carousel .carousel-container .release-text .release-text-content .columns .column-content.features div.title:not(:first-child) {
  margin-top: 12px;
}
.release-carousel .carousel-container .release-text .release-text-content .columns .column-content.features div .see-more {
  font-family: var(--font-family-default), sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text-brand-default);
  cursor: pointer;
  display: flex;
  align-items: center;
  outline: none;
  border: none;
  height: 24px;
  padding: 0;
  margin: 12px 0 0 0;
  background: none;
  gap: 4px;
}
.release-carousel .carousel-container .release-text .release-text-content .columns .column-content.features div .icon-arrow {
  transition: "all" 0.2s ease-out;
}
.release-carousel .carousel-container .release-text .release-text-content .columns .column-content.features div .icon-arrow.expanded {
  transform: rotate(-180deg);
}
.release-carousel .carousel-container .see-releases-container {
  z-index: 1;
  margin-bottom: 32px;
}
.release-carousel .carousel-container .see-releases-container button {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-sm, 12px);
  font-weight: var(--typography-weight-button-sm, 600);
  line-height: var(--typography-lineHeight-button-sm, 16px);
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-brand-enabled, #5DCDB5);
  color: var(--color-text-bold, #1D2532);
  font-weight: 600;
  text-transform: uppercase;
}
.release-carousel .carousel-container .see-releases-container button:focus-visible {
  outline: none;
}
.release-carousel .carousel-container .see-releases-container button:is(a) {
  text-decoration: none;
}
.release-carousel .carousel-container .see-releases-container button:disabled {
  cursor: default;
}
.release-carousel .carousel-container .see-releases-container button:hover {
  background: var(--color-bg-brand-hovered, #92DECD);
}
.release-carousel .carousel-container .see-releases-container button:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.release-carousel .carousel-container .heading {
  font-family: var(--font-clash-display);
  font-style: normal;
  font-weight: var(--typography-weight-heading, 600);
  font-size: var(--typography-size-heading2-m, 32px);
  line-height: var(--typography-lineHeight-heading2-m, 40px);
  display: flex;
  padding: var(--spacing-none, 0px) 0px;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4, 4px);
  align-self: stretch;
  text-align: left;
  color: #FFF;
}
.release-carousel .carousel-container .heading .description {
  font-family: var(--font-family-body, "Montserrat");
  font-style: normal;
  font-weight: var(--typography-weight-body-regular, 400);
  font-size: var(--typography-size-body2-m, 12px);
  line-height: var(--typography-lineHeight-body2-m, 16px);
  color: #C0C5CC;
  text-align: left;
}
.release-carousel .carousel-container .cta-group {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 8px var(--spacing-8, 8px);
  align-self: stretch;
  flex-wrap: wrap;
}
.release-carousel .carousel-container .cta-group .cta-get-started {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-brand-enabled, #5DCDB5);
  color: var(--color-text-bold, #1D2532);
  display: flex;
  flex-basis: 100%;
  padding: var(--spacing-8, 8px) var(--spacing-16, 16px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  background: var(--color-bg-brand-enabled, #5DCDB5);
  color: var(--color-text-inverse, #1D2532);
  text-align: center;
  max-width: 240px;
  width: calc(100vw - 96px);
}
.release-carousel .carousel-container .cta-group .cta-get-started:focus-visible {
  outline: none;
}
.release-carousel .carousel-container .cta-group .cta-get-started:is(a) {
  text-decoration: none;
}
.release-carousel .carousel-container .cta-group .cta-get-started:disabled {
  cursor: default;
}
.release-carousel .carousel-container .cta-group .cta-get-started:hover {
  background: var(--color-bg-brand-hovered, #92DECD);
}
.release-carousel .carousel-container .cta-group .cta-get-started:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.release-carousel .carousel-container .cta-group .cta-download {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  background: none;
  padding: 7px 16px;
  /* outlined border color */
  border: 1px solid var(--color-outline-bold, #2F3E52);
  color: var(--color-text-default, #2F3E52);
  display: flex;
  flex-basis: 100%;
  padding: var(--spacing-8, 8px) var(--spacing-16, 16px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  border: 1px solid #EBECEE;
  background: none;
  color: #FFF;
  text-align: center;
  max-width: 240px;
  width: calc(100vw - 96px);
}
.release-carousel .carousel-container .cta-group .cta-download:focus-visible {
  outline: none;
}
.release-carousel .carousel-container .cta-group .cta-download:is(a) {
  text-decoration: none;
}
.release-carousel .carousel-container .cta-group .cta-download:disabled {
  cursor: default;
}
.release-carousel .carousel-container .cta-group .cta-download:hover {
  border: 1px solid var(--color-outline-default, #5D697B);
  color: var(--color-text-subtle, #5D697B);
}
.release-carousel .carousel-container .cta-group .cta-download:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
@media screen and (min-width: 480px) and (max-width: 959.98px) {
  .release-carousel {
    padding: 0 64px;
  }
  .release-carousel .carousel-container .heading {
    font-family: var(--font-clash-display);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading2-m, 32px);
    line-height: var(--typography-lineHeight-heading2-m, 40px);
    text-align: left;
  }
  .release-carousel .carousel-container .heading .description {
    font-family: var(--font-family-body, "Montserrat");
    font-style: normal;
    font-weight: var(--typography-weight-body-regular, 400);
    font-size: var(--typography-size-body2-m, 12px);
    line-height: var(--typography-lineHeight-body2-m, 16px);
  }
}
@media screen and (min-width: 960px) {
  .release-carousel {
    padding: 0 160px;
  }
  .release-carousel:before {
    margin-top: -96px;
  }
  .release-carousel .carousel-container .heading {
    font-family: var(--font-clash-display);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading2, 48px);
    line-height: var(--typography-lineHeight-heading2, 64px);
    text-align: center;
  }
  .release-carousel .carousel-container .heading .description {
    color: #F5F6F7;
    font-family: var(--font-family-body, "Montserrat");
    font-style: normal;
    font-weight: var(--typography-weight-body-regular, 400);
    font-size: var(--typography-size-body1, 16px);
    line-height: var(--typography-lineHeight-body1, 24px);
  }
  .release-carousel .carousel-container .carousel-content {
    margin: 2px auto 0;
  }
  .release-carousel .carousel-container .release-text .release-text-content .columns {
    flex-flow: row;
    gap: var(--spacing-32, 32px);
  }
  .release-carousel .cta-get-started, .release-carousel .cta-download {
    max-width: 208px;
  }
}
@media screen and (min-width: 480px) {
  .release-carousel .carousel-container .carousel-content .prev, .release-carousel .carousel-container .carousel-content .next {
    padding: 0 20px;
  }
  .release-carousel .carousel-container .carousel-content .prev img, .release-carousel .carousel-container .carousel-content .next img {
    width: 32px;
    height: 32px;
  }
}
.release-carousel .ai-tag {
  font-size: 8px;
  font-weight: 500;
  line-height: 12px;
  align-self: center;
  padding: 0 4px;
  color: var(--color-text-inverse);
  border-radius: var(--border-radius-circle, 1000px);
  background: var(--Accent-Automation-Context, linear-gradient(90deg, var(--palette-purple-500, #977EFB) 0%, var(--palette-blue-500, #5EACFF) 100%));
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.faq-content .heading {
  display: flex;
  padding: var(--spacing-32, 32px) var(--spacing-none, 0px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8, 8px);
  background: var(--color-bg-brand-subtle-enabled, #EFFAF8);
}
@media screen and (min-width: 480px) {
  .faq-content .heading h2 {
    font-family: var(--font-clash-display);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading2, 48px);
    line-height: var(--typography-lineHeight-heading2, 64px);
  }
}
@media screen and (max-width: 479.98px) {
  .faq-content .heading h2 {
    font-family: var(--font-clash-display);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading2-m, 32px);
    line-height: var(--typography-lineHeight-heading2-m, 40px);
  }
}
.faq-content .content {
  display: flex;
  padding: 64px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-32, 32px);
  align-self: stretch;
}
.faq-content .content .category-container {
  display: flex;
  width: 100%;
  max-width: 1320px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 48px;
  align-self: stretch;
}
.faq-content .content .category-container .category {
  display: flex;
  align-items: center;
  align-content: center;
  gap: 24px;
  align-self: stretch;
  flex-wrap: wrap;
}
.faq-content .content .category-container .category .category-heading {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: var(--color-text-bold, #1D2532);
  display: flex;
  align-items: center;
  position: relative;
}
.faq-content .content .category-container .category .category-heading:not(:hover) .icon-copy {
  display: none;
}
.faq-content .content .category-container .category .category-heading:has(.icon-copy):hover .icon-copy {
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  display: flex;
}
.faq-content .content .category-container .category .question-set {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
  width: 100%;
}
.faq-content .content .category-container .category .question-set .accordion-item {
  margin: 0;
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--color-outline-bold, #2F3E52);
}
.faq-content .content .category-container .category .question-set .accordion-item .accordion-itemBtn {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  background: var(--color-bg-inverse);
  text-align: left;
  padding: 12px 40px 12px 16px;
  gap: var(--spacing-8, 8px);
  align-self: stretch;
  color: var(--color-text-default, #2F3E52);
  border: none;
  border-radius: 4px;
}
.faq-content .content .category-container .category .question-set .accordion-item .accordion-itemBtn .accordion-chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease-in-out;
}
.faq-content .content .category-container .category .question-set .accordion-item .accordion-itemBtn:has(.icon-copy) {
  padding-left: 20px;
}
.faq-content .content .category-container .category .question-set .accordion-item .accordion-itemBtn:not(:hover) .icon-copy {
  display: none;
}
.faq-content .content .category-container .category .question-set .accordion-item .accordion-itemBtn:hover .icon-copy {
  cursor: pointer;
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
}
.faq-content .content .category-container .category .question-set .accordion-item .accordion-itemBtnExpanded {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  border-radius: 4px 4px 0 0;
}
.faq-content .content .category-container .category .question-set .accordion-item .accordion-itemBtnExpanded .accordion-chevron {
  transform: translateY(-50%) rotate(90deg);
}
.faq-content .content .category-container .category .question-set .accordion-item .accordion-itemContent {
  transition: height 0.2s ease-in-out;
  border-top: 1px solid var(--color-outline-bold);
}
.faq-content .content .category-container .category .question-set .accordion-item .accordion-itemContent .accordion-itemPanel {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-regular, 400);
  color: var(--color-text-default, #2F3E52);
  padding: 16px;
}
.faq-content .content .category-container .category .question-set .accordion-item .accordion-itemContent .accordion-itemPanel ul {
  list-style-type: disc;
  -webkit-padding-start: 18px;
          padding-inline-start: 18px;
}
.faq-content .content .category-container .category .question-set .accordion-item .accordion-itemContent .accordion-itemPanel ul li {
  padding: 6px 0;
}
.faq-content .content .category-container .category .question-set .accordion-item .accordion-itemContent .accordion-itemPanel a {
  color: var(--color-text-info-default, #3697FF);
  text-decoration: underline;
}
.faq-content .content .category-container .category .question-set .accordion-item .accordion-itemContent .accordion-itemPanel p:not(:last-child) {
  margin-bottom: unset;
}
.faq-content .content .category-container .category .question-set .accordion-item .accordion-itemContent .accordion-itemPanel blockquote {
  font-family: var(--font-family-body), serif;
  font-style: normal;
  font-size: var(--typography-size-body2, 14px);
  line-height: var(--typography-lineHeight-body2, 20px);
  font-weight: var(--typography-weight-body2-regular, 400);
  font-style: italic;
  border-left: 1px solid #ddd;
  padding: 0 15px;
  display: block;
  -webkit-margin-before: 1em;
          margin-block-start: 1em;
  -webkit-margin-after: 1em;
          margin-block-end: 1em;
  -webkit-margin-start: 40px;
          margin-inline-start: 40px;
  -webkit-margin-end: 40px;
          margin-inline-end: 40px;
  unicode-bidi: -webkit-isolate;
  unicode-bidi: isolate;
  z-index: 0;
}
.faq-content .content .category-container .category .question-set .accordion-item .accordion-itemContent .accordion-itemPanel blockquote:before {
  display: none;
}
.faq-content .content .category-container .category .question-set .accordion-item .accordion-itemContent .accordion-itemPanel table {
  table-layout: fixed;
}
.faq-content .content .category-container .category .question-set .accordion-item .accordion-itemContent .accordion-itemPanel table thead tr:hover {
  background: unset;
}
.faq-content .content .category-container .category .question-set .accordion-item .accordion-itemContent .accordion-itemPanel table thead tr th {
  border: 1px solid #D9D9D9;
  background: #F7F7F7;
  padding: 8px;
  font-weight: 600;
  overflow-wrap: break-word;
}
.faq-content .content .category-container .category .question-set .accordion-item .accordion-itemContent .accordion-itemPanel table tbody tr:hover {
  background: none;
}
.faq-content .content .category-container .category .question-set .accordion-item .accordion-itemContent .accordion-itemPanel table tbody tr:not(:last-child) {
  border-bottom: unset;
}
.faq-content .content .category-container .category .question-set .accordion-item .accordion-itemContent .accordion-itemPanel table tbody tr td {
  border: 1px solid #D9D9D9;
  padding: 8px;
  overflow-wrap: break-word;
}
.faq-content .content .category-container .category .question-set .accordion-item .accordion-itemContent .accordion-itemPanel table tbody tr td:first-child {
  background: #F7F7F7;
  font-weight: 600;
}
.faq-content .content .category-container .category .question-set .accordion-item .accordion-itemContent .accordion-itemPanel span.footnote {
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: var(--color-text-subtle);
}
@media screen and (min-width: 480px) and (max-width: 959.98px) {
  .faq-content .content {
    padding: var(--spacing-64, 64px) 32px;
  }
  .faq-content .content .category-container {
    gap: var(--spacing-48, 48px);
  }
  .faq-content .content .category-container .category {
    gap: var(--spacing-24, 24px);
  }
}
@media screen and (min-width: 960px) {
  .faq-content .heading {
    height: 181px;
  }
}
@media screen and (min-width: 960px) and (min-width: 480px) {
  .faq-content .heading h2 {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading2, 48px);
    line-height: var(--typography-lineHeight-heading2, 64px);
  }
}
@media screen and (min-width: 960px) and (max-width: 479.98px) {
  .faq-content .heading h2 {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading2-m, 32px);
    line-height: var(--typography-lineHeight-heading2-m, 40px);
  }
}
@media screen and (min-width: 960px) {
  .faq-content .content {
    padding: var(--spacing-64, 64px) 160px;
  }
  .faq-content .content .category-container {
    gap: var(--spacing-48, 48px);
    margin: 0 auto;
    max-width: 1120px;
  }
  .faq-content .content .category-container .category {
    flex-direction: column;
    align-items: stretch;
  }
  .faq-content .content .category-container .category .question-set {
    min-width: 640px;
  }
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.tf-modal-root {
  position: absolute;
  z-index: 10;
}

.tf-modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template: 1fr/1fr;
  place-items: center;
}
.tf-modal.hidden {
  display: none;
}
.tf-modal.not-showing-yet {
  opacity: 0;
}
.tf-modal > .overlay-part {
  z-index: unset;
  grid-column: 1/1;
  grid-row: 1/1;
  animation: 0.3s ease-out 0s 1 appear;
  padding: unset;
}
.tf-modal > .content-part {
  position: relative;
  z-index: 1;
  display: flex;
  padding: var(--spacing-32, 32px);
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24, 24px);
  border-radius: var(--border-radius-8, 8px);
  border: 1px solid var(--color-outline-subtlest, #EBECEE);
  background: var(--color-bg-inverse, #FFF);
  max-width: 95vw;
  font-size: 14px;
}
.tf-modal > .content-part .close-modal-button {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  aspect-ratio: 1/1;
  height: -moz-fit-content;
  height: fit-content;
  background: none;
  border: none;
  padding: 4px;
  /* text border color */
  color: var(--color-text-bold, #1D2532);
  display: flex;
  position: absolute;
  right: 24px;
  top: 16px;
}
.tf-modal > .content-part .close-modal-button:focus-visible {
  outline: none;
}
.tf-modal > .content-part .close-modal-button:is(a) {
  text-decoration: none;
}
.tf-modal > .content-part .close-modal-button:disabled {
  cursor: default;
}
.tf-modal > .content-part .close-modal-button:hover {
  color: var(--color-text-subtle, #5D697B);
}
.tf-modal > .content-part .close-modal-button:disabled {
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-modal.message-box .content-part > .busy-indicator-root > .content {
  padding-top: 24px;
}
.tf-modal.message-box .content-part > .busy-indicator-root > .content .message {
  margin-right: 24px;
}
.tf-modal.message-box .content-part .dialog-root {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}
.tf-modal.message-box .content-part .dialog-root > h1.caption {
  font-size: 20px;
  font-weight: 600;
}
.tf-modal.message-box .content-part .dialog-root.with-caption > .message {
  margin-top: 8px;
}
.tf-modal.message-box .content-part .dialog-root .message p {
  word-break: break-word;
}
.tf-modal.message-box .content-part .dialog-root .buttons {
  display: flex;
  flex-direction: row;
  align-self: flex-end;
  column-gap: 10px;
}
.tf-modal.message-box .content-part .dialog-root .buttons button {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  border: none;
  font-weight: 500;
  padding: 8px 16px;
  /* filled bg color */
  background: var(--color-bg-brand-enabled, #5DCDB5);
  color: var(--color-text-bold, #1D2532);
  min-width: 72px;
  justify-content: center;
}
.tf-modal.message-box .content-part .dialog-root .buttons button:focus-visible {
  outline: none;
}
.tf-modal.message-box .content-part .dialog-root .buttons button:is(a) {
  text-decoration: none;
}
.tf-modal.message-box .content-part .dialog-root .buttons button:disabled {
  cursor: default;
}
.tf-modal.message-box .content-part .dialog-root .buttons button:hover {
  background: var(--color-bg-brand-hovered, #92DECD);
}
.tf-modal.message-box .content-part .dialog-root .buttons button:disabled {
  background: var(--color-bg-brand-subtle-hovered, #CDF0E8);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}
.tf-modal.message-box .content-part .dialog-root .buttons button.cancel {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4, 4px);
  border-radius: var(--border-radius-4, 4px);
  font-family: var(--font-family-body), serif;
  font-size: var(--typography-size-button-md, 14px);
  font-style: normal;
  font-weight: var(--typography-weight-button-md, 600);
  line-height: var(--typography-lineHeight-button-md, 20px); /* 142.857% */
  background: none;
  padding: 7px 16px;
  /* outlined border color */
  border: 1px solid var(--color-outline-brand-default, #5DCDB5);
  color: var(--color-text-brand-default, #5DCDB5);
  /* [TODO] assumption taken as not defined on design */
}
.tf-modal.message-box .content-part .dialog-root .buttons button.cancel:focus-visible {
  outline: none;
}
.tf-modal.message-box .content-part .dialog-root .buttons button.cancel:is(a) {
  text-decoration: none;
}
.tf-modal.message-box .content-part .dialog-root .buttons button.cancel:disabled {
  cursor: default;
}
.tf-modal.message-box .content-part .dialog-root .buttons button.cancel:hover {
  color: var(--color-text-brand-subtle, #92DECD);
}
.tf-modal.message-box .content-part .dialog-root .buttons button.cancel:disabled {
  border: 1px solid var(--color-outline-subtle, #C0C5CC);
  color: var(--color-text-disabled, rgba(52, 68, 90, 0.67));
}

.tf-modal.error-box .error-icon, .tf-modal.error-box .error-message {
  margin-top: 12px;
  text-align: center;
  word-break: break-word;
}
.tf-modal.error-box p:not(:last-child) {
  margin-bottom: 0;
}

.tf-modal.custom-field .content-part {
  width: unset;
}
.tf-modal.custom-field p:not(:last-child) {
  margin-bottom: 0.5rem;
}

.tf-modal.test-launcher .content-part {
  min-width: 300px;
  min-height: 100px;
  display: grid;
  justify-content: center;
  align-content: center;
}
.tf-modal.test-launcher .content-part .busy-indicator-root {
  opacity: 0.3;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.tf-modal.test-launcher .content-part .busy-indicator-root .tf-loading, .tf-modal.test-launcher .content-part .busy-indicator-root .loader-wrapper {
  background: none;
}
.tf-modal.test-launcher .content-part:has(.desktop-app-fail-launch) {
  width: 95vw;
  max-width: 480px;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.mandatory-mark:after {
  content: "*";
  color: #B50404;
  margin-left: 2px;
}

@keyframes fade {
  from {
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}
.global-error-form {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 8px;
  grid-row-gap: 4px;
  max-width: 500px;
  width: 100vw;
}
.global-error-form > .error-icon {
  grid-column: 1;
  display: flex;
}
.global-error-form > h1 {
  grid-column: 2;
  align-self: center;
}
@media screen and (min-width: 480px) {
  .global-error-form > h1 {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading4, 24px);
    line-height: var(--typography-lineHeight-heading4, 32px);
  }
}
@media screen and (max-width: 479.98px) {
  .global-error-form > h1 {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--typography-weight-heading, 600);
    font-size: var(--typography-size-heading4-m, 20px);
    line-height: var(--typography-lineHeight-heading4-m, 24px);
  }
}
.global-error-form > span {
  grid-column: 1/span 2;
}
.global-error-form > span.generic-message {
  margin-top: 8px;
}
.global-error-form > span.details {
  font-size: 12px;
}
.global-error-form > .details-section {
  grid-column: 1/span 2;
  border: thin solid #D9D9D9;
  background: white;
  font-size: 12px;
  font-family: "Figtree", sans-serif;
  outline: none;
  padding: 10px;
  position: relative;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: all 0.3s ease-out;
  height: 100px;
  resize: none;
  padding: 4px 8px;
}

.custom-error-message {
  row-gap: 0;
}
.custom-error-message .error-icon {
  text-align: center;
}
.custom-error-message .error-message {
  text-align: center;
  margin-bottom: 16px;
  margin-top: 16px;
}
.custom-error-message .error-message p:not(:last-child) {
  margin-bottom: 0;
}
.custom-error-message .error-message.mandatory-value {
  text-align: left;
}
.custom-error-message .error-message.mandatory-value p:not(:last-child) {
  margin-bottom: 8px;
}
.custom-error-message .btn-container {
  text-align: right;
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.header-context-menu-container {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
}
@media only screen and (max-width: 1024px) {
  .header-context-menu-container.desktop-version {
    display: none;
  }
}
@media only screen and (min-width: 1024px) {
  .header-context-menu-container.mobile-version {
    display: none;
  }
}
.header-context-menu-container .menu-content {
  position: relative;
  z-index: 1;
  background: var(--color-bg-inverse);
  box-shadow: 0 var(--spacing-16, 16px) var(--spacing-32, 32px) 0 var(--elevation-shadow-level4_soft, rgba(52, 68, 90, 0.1));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 32px;
  overflow: hidden;
}
.header-context-menu-container .menu-content .header-desktop-menu-level.depth-1 {
  display: flex;
  flex-direction: row;
  align-content: center;
  overflow: hidden;
}
.header-context-menu-container .menu-content .header-desktop-menu-level.depth-1 > .header-desktop-menu-node {
  flex: 1 1;
}
.header-context-menu-container .menu-content .header-desktop-menu-level.depth-1 > .menu-splitter {
  flex: 0 1;
  border-right: 1px solid var(--color-outline-subtlest);
  margin: 0 24px;
}
.header-context-menu-container .menu-content .header-desktop-menu-level.depth-2 {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  gap: 8px;
}
.header-context-menu-container .menu-content .header-desktop-menu-level.depth-2 > .header-desktop-menu-node {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 266px;
}
.header-context-menu-container .menu-content .header-desktop-menu-level.depth-2 > .header-desktop-menu-node > .header-desktop-menu-title {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  line-height: 1;
  font-family: var(--font-family-satoshi), sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--color-text-subtlest);
}
.header-context-menu-container .menu-content .header-desktop-menu-level.depth-2 > .menu-splitter {
  display: none;
}
.header-context-menu-container .menu-content .header-desktop-menu-level.depth-3 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.header-context-menu-container .menu-content .header-desktop-menu-level.depth-3 > .header-desktop-menu-node {
  padding: 3px 8px;
}
.header-context-menu-container .menu-content .header-desktop-menu-level.depth-3 > .header-desktop-menu-node > .header-desktop-menu-title > * {
  font-family: var(--font-family-satoshi), sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--color-text-default);
}
.header-context-menu-container .menu-content .header-desktop-menu-level.depth-3 > .menu-splitter {
  display: none;
}
.header-context-menu-container .menu-content .header-desktop-menu-node {
  overflow: hidden;
}
.header-context-menu-container .menu-content .header-desktop-menu-node > a {
  text-decoration: none;
}
.header-context-menu-container .menu-content .menu-icon {
  display: flex;
}
.header-context-menu-container .menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}
.header-context-menu-container.mobile-version .header-desktop-menu-level.depth-0 {
  flex-direction: column;
  border-bottom: 1px solid var(--color-outline-subtlest);
}
.header-context-menu-container.mobile-version .header-desktop-menu-level.depth-0 > .header-desktop-menu-node:not(.active) > .header-desktop-menu-level {
  display: none;
}
.header-context-menu-container.mobile-version .header-desktop-menu-level.depth-0 > .header-desktop-menu-node > .header-desktop-menu-title {
  color: var(--color-text-brand-default);
  text-transform: uppercase;
  font-family: var(--font-family-satoshi), sans-serif;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  height: 44px;
  align-items: center;
  margin-left: 8px;
}
.header-context-menu-container.mobile-version .header-desktop-menu-level.depth-0 > .header-desktop-menu-node > .header-desktop-menu-title > span {
  flex-grow: 1;
}
.header-context-menu-container.mobile-version .header-desktop-menu-level.depth-0 > .header-desktop-menu-node.active > .header-desktop-menu-title > i {
  transform: rotate(180deg);
}
.header-context-menu-container.mobile-version .header-desktop-menu-level.depth-0 > .header-desktop-menu-node:not(.has-children) > .header-desktop-menu-title {
  color: var(--color-text-default);
}
.header-context-menu-container.mobile-version .header-desktop-menu-level.depth-0 > .menu-splitter {
  height: 8px;
  display: flex;
  flex-direction: column;
}
.header-context-menu-container.mobile-version .header-desktop-menu-level.depth-0 > .menu-splitter:before {
  content: "";
  border-bottom: 1px solid var(--color-outline-subtlest);
  margin-top: 4px;
}
.header-context-menu-container.mobile-version .header-desktop-menu-level.depth-1 {
  padding-top: 10spx;
}
.header-context-menu-container.mobile-version .header-desktop-menu-level.depth-2 {
  flex-direction: column;
  justify-content: start;
  gap: 24px;
}
.header-context-menu-container.mobile-version .header-desktop-menu-level.depth-2 > .header-desktop-menu-node {
  gap: 8px;
}
.header-context-menu-container.mobile-version .header-desktop-menu-level.depth-3 {
  gap: 8px;
  padding-top: 15px;
}

.modal-wizard-page {
  --font-family-default: "Figtree", sans-serif;
  --font-family-label: "Figtree", sans-serif;
  --font-family-caption: "Figtree", sans-serif;
  --font-family-heading: "Figtree", sans-serif;
  --font-family-body: "Figtree", sans-serif;
}

.set-new-password-form form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-google-error {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: grid;
  place-items: center;
}

/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* legacy colors */
/* end of legacy colors */
/* this folder contains scss to be forwarded into dist/_variables.scss */
/* which then can be used by @use '...' as variables, */
/* and callable by variables.$var-name */
/* but if its within :root then callable using var(--var.name) directly */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
.glow {
  box-shadow: 0 0 5px #8BE6D0, 0 0 10px rgba(139, 230, 208, 0.6);
  animation: glow-animation 1s infinite alternate;
}

@keyframes glow-animation {
  0% {
    box-shadow: 0 0 3px #8BE6D0, 0 0 6px rgba(139, 230, 208, 0.6);
  }
  100% {
    box-shadow: 0 0 8px #8BE6D0, 0 0 12px rgba(139, 230, 208, 0.6);
  }
}
.tf-custom-scroll {
  scrollbar-color: #D9D9D9 #F7F7F7;
  scrollbar-width: thin;
  overflow-y: auto;
}

.tf-custom-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.1);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 217, 217, 0.5);
  border-radius: 100px;
}

.tf-custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #D9D9D9;
}

/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/* this folder contains scss to be forwarded into dist/_mixins.scss */
/* which then can be used by @use '...' as mixins , and callable by mixins.mixin-name  */
/*
To use react-contexify on the consumer side, please inject react-contexify's styles on the consumer's SCSS file:
@use '../../node_modules/react-contexify/scss/main.scss';
Consider correct relative path to node_modules.
 */
.root-layout {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  scrollbar-width: auto;
  scrollbar-color: auto;
  scrollbar-gutter: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
.root-layout::-webkit-scrollbar {
  background: none;
  width: 6px;
  height: 6px;
}
.root-layout::-webkit-scrollbar-button {
  display: none;
}
.root-layout::-webkit-scrollbar-thumb {
  background: var(--color-bg-neutral-hovered);
  border-radius: 3px;
  height: 50%;
}
.root-layout:has(.header-overlay) {
  overflow: hidden;
}
.root-layout .root-busy-indicator.content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  height: 100%;
}

:where(.root-layout > *:not(.modal-wizard-page)) {
  position: relative;
  z-index: 0;
}

:where(.root-layout .Toastify) {
  z-index: 3;
}

.open-testfirst {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: auto;
  min-height: 100vh;
  gap: 24px;
  width: 100vw;
  padding: 32px;
}
.open-testfirst .text {
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  color: #172B4D;
  gap: 10px;
  display: flex;
  flex-flow: column;
}
.open-testfirst .btn-open-testfirst {
  padding: 16px 32px;
  background: #5DCDB5;
  border-radius: 3px;
  border: #5DCDB5;
}
.open-testfirst .btn-open-testfirst:hover {
  background: #34445A;
  color: #FFFFFF;
  cursor: pointer;
}
.open-testfirst .btn-open-testfirst:hover span {
  color: #FFFFFF;
}
.open-testfirst .btn-open-testfirst:focus {
  outline: none !important;
  box-shadow: none;
}
.open-testfirst .btn-open-testfirst .btn-text {
  height: 20px;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  /* identical to box height */
  text-align: center;
  /* color-white */
  color: #1E2A3C;
  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 0;
}
.open-testfirst .not-installed-text {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: #172B4D;
  column-gap: 8px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.open-testfirst .not-installed-text a {
  font-weight: 600;
  color: #1F57A4;
  text-decoration: underline;
}
.open-testfirst .note {
  height: 16px;
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  text-align: center;
  color: #42526E;
}
.open-testfirst .error-message {
  background-color: #f8d7da;
  border: 1px solid #f5c2c7;
  border-radius: 0.375rem;
  color: #842029;
  padding: 16px 32px;
}

.tf-cookie-notice-container {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000000;
  overflow: auto;
  display: flex;
  align-items: center;
  gap: 10px 0;
  height: auto;
  flex-flow: column wrap;
  width: 90vw;
  text-align: center;
  background-color: var(--color-bg-inverse);
  border-radius: 8px 8px 0 0;
  padding: 15px 28px;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.15);
}
@media screen and (min-width: 960px) {
  .tf-cookie-notice-container {
    flex-flow: row;
    width: auto;
    text-align: left;
  }
}

.tf-cookie-content {
  display: flex;
  flex-flow: row;
  gap: 10px;
  align-items: center;
  text-wrap-mode: wrap;
  flex-flow: column wrap;
  text-align: center;
  font-size: 14px;
  font-weight: normal;
}
@media screen and (min-width: 960px) {
  .tf-cookie-content {
    flex-flow: row;
    text-align: left;
    text-wrap-mode: nowrap;
  }
}
.tf-cookie-content .bold {
  font-weight: bold;
  font-size: 16px;
}

.tf-cookie-buttons {
  display: flex;
  flex-flow: row;
}

@keyframes pulse {
  0% {
    filter: opacity(1);
    -webkit-filter: opacity(1);
  }
  100% {
    filter: opacity(0);
    -webkit-filter: opacity(0);
  }
}
@keyframes pulse-inner {
  0% {
    border: 10px solid rgba(160, 244, 226, 0);
  }
  25% {
    border: 10px solid rgba(160, 244, 226, 0.35);
  }
  55% {
    border: 10px solid rgba(160, 244, 226, 0.35);
  }
  75% {
    border: 10px solid rgba(160, 244, 226, 0);
  }
  100% {
    border: 10px solid rgba(160, 244, 226, 0);
  }
}
@keyframes pulse-outside {
  0% {
    border: 10px solid rgba(160, 244, 226, 0);
  }
  25% {
    border: 20px solid rgba(160, 244, 226, 0);
  }
  45% {
    border: 20px solid rgba(160, 244, 226, 0.4);
  }
  55% {
    border: 20px solid rgba(160, 244, 226, 0.4);
  }
  75% {
    border: 20px solid rgba(160, 244, 226, 0);
  }
  100% {
    border: 10px solid rgba(160, 244, 226, 0);
  }
}
:where(.wave-styler) {
  position: absolute;
  overflow: hidden;
  z-index: 0;
  left: 50%;
  width: 100vw;
}
:where(.wave-styler):not(.at-start) {
  bottom: 0;
  transform: translateX(-50%) translateY(var(--wave-styler-translate-y, 130px));
}
:where(.wave-styler).at-start {
  top: 0;
  transform: translateX(-50%) translateY(var(--wave-styler-translate-y, -130px));
}
@media screen and (max-width: 479.98px) {
  :where(.wave-styler):not(.at-start) {
    transform: translateX(-50%) translateY(var(--wave-styler-translate-y, 230px));
  }
}
:where(.wave-styler) > svg {
  width: 100%;
}

body {
  --font-family-default: "Satoshi", sans-serif;
  --font-family-label: "Satoshi", sans-serif;
  --font-family-caption: "Satoshi", sans-serif;
  --font-family-heading: "Satoshi", sans-serif;
  --font-family-body: "Satoshi", sans-serif;
  font-family: var(--font-family-default), sans-serif;
  margin: 0;
}
body * {
  box-sizing: border-box;
}
body .react-tooltip {
  max-width: 100vw;
}