.picker-container {
    z-index: 10001;
    width: 100%
}

.picker-container,
.picker-container *,
.picker-container :after,
.picker-container :before {
    box-sizing: border-box
}

.picker-container .picker-inner {
    position: relative;
    display: flex;
    justify-content: center;
    height: 100%;
    padding: 0 20px;
    font-size: 1.2em;
    -webkit-mask-box-image: linear-gradient(0deg, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent)
}

.picker-container .picker-column {
    flex: 1 1;
    position: relative;
    max-height: 100%;
    overflow: hidden;
    text-align: center
}

.picker-container .picker-column .picker-scroller {
    transition: .3s;
    transition-timing-function: ease-out
}

.picker-container .picker-column .picker-item {
    position: relative;
    padding: 0 10px;
    white-space: nowrap;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis
}

.picker-container .picker-column .picker-item.picker-item-selected {
    color: #222
}

.picker-container .picker-highlight {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    pointer-events: none
}

.picker-container .picker-highlight:after,
.picker-container .picker-highlight:before {
    content: " ";
    position: absolute;
    left: 0;
    right: auto;
    display: block;
    width: 100%;
    height: 1px;
    background-color: #d9d9d9;
    transform: scaleY(.5)
}

.picker-container .picker-highlight:before {
    top: 0;
    bottom: auto
}

.picker-container .picker-highlight:after {
    bottom: 0;
    top: auto
}

.rdp {
    --rdp-cell-size: 46px;
    --rdp-caption-font-size: 20px;
    --rdp-accent-color: var(--color-200);
    --rdp-background-color: #e7edff;
    --rdp-accent-color-dark: #3003e1;
    --rdp-background-color-dark: #180270;
    --rdp-outline: 2px solid var(--rdp-accent-color);
    --rdp-outline-selected: 3px solid var(--rdp-accent-color);
    font-family: Open Sans
}

.rdp-vhidden {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    position: absolute !important;
    top: 0;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    border: 0 !important
}

.rdp-button_reset {
    appearance: none;
    position: relative;
    margin: 0;
    padding: 0;
    cursor: default;
    color: inherit;
    background: none;
    font: inherit;
    -moz-appearance: none;
    -webkit-appearance: none
}

.rdp-button_reset:focus-visible {
    outline: none
}

.rdp-button {
    border: 2px solid transparent
}

.rdp-button[disabled]:not(.rdp-day_selected) {
    opacity: .25
}

.rdp-button:not([disabled]) {
    cursor: pointer
}

.rdp-button:focus-visible:not([disabled]) {
    color: inherit;
    background-color: var(--rdp-background-color);
    border: var(--rdp-outline)
}

.rdp-months {
    display: flex;
    justify-content: center
}

.rdp-month {
    margin: 0 1em
}

.rdp-month:first-child {
    margin-left: 0
}

.rdp-month:last-child {
    margin-right: 0
}

.rdp-table {
    margin: 0;
    max-width: calc(var(--rdp-cell-size) * 7);
    border-collapse: collapse
}

.rdp-with_weeknumber .rdp-table {
    max-width: calc(var(--rdp-cell-size) * 8);
    border-collapse: collapse
}

.rdp-caption {
    color: var(--b100-text-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    text-align: left;
    margin-bottom: 16px
}

.rdp-multiple_months .rdp-caption {
    position: relative;
    display: block;
    text-align: center
}

.rdp-caption_dropdowns,
.rdp-caption_label {
    position: relative;
    display: inline-flex
}

.rdp-caption_label {
    z-index: 1;
    align-items: center;
    margin: 0;
    padding: 0 .25em;
    white-space: nowrap;
    color: currentColor;
    border: 2px solid transparent;
    font-family: inherit;
    font-size: var(--rdp-caption-font-size);
    font-weight: 700
}

.rdp-nav {
    white-space: nowrap;
    display: flex;
    gap: 6px
}

.rdp-multiple_months .rdp-caption_start .rdp-nav {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%)
}

.rdp-multiple_months .rdp-caption_end .rdp-nav {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%)
}

.rdp-nav_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25em;
    border-radius: 100%
}

.rdp-dropdown_month,
.rdp-dropdown_year {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 20px
}

.rdp-dropdown {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    cursor: inherit;
    opacity: 0;
    border: none;
    background-color: transparent;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

.rdp-dropdown[disabled] {
    opacity: unset;
    color: unset
}

.rdp-dropdown:focus-visible:not([disabled])+.rdp-caption_label {
    background-color: var(--rdp-background-color);
    border: var(--rdp-outline);
    border-radius: 6px
}

.rdp-dropdown_icon {
    margin: 0 0 0 5px
}

.rdp-head {
    border: 0
}

.rdp-head_row,
.rdp-row {
    height: 100%
}

.rdp-head_cell {
    vertical-align: middle;
    font-size: .75em;
    font-weight: 700;
    text-align: center;
    height: 100%;
    height: var(--rdp-cell-size);
    padding: 0;
    text-transform: uppercase;
    color: rgba(106, 124, 139, .5)
}

.rdp-tbody {
    border: 0
}

.rdp-tfoot {
    margin: .5em
}

.rdp-cell {
    width: var(--rdp-cell-size);
    height: 100%;
    height: var(--rdp-cell-size);
    padding-bottom: 5px;
    text-align: center
}

.rdp-weeknumber {
    font-size: .75em
}

.rdp-day,
.rdp-weeknumber {
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--rdp-cell-size);
    max-width: var(--rdp-cell-size);
    height: var(--rdp-cell-size);
    margin: 0;
    border: 2px solid transparent;
    border-radius: 100%;
    color: var(--b300-text-color);
    font-size: 18px
}

.rdp-day_today:not(.rdp-day_outside) {
    font-weight: 700
}

.rdp-day_selected,
.rdp-day_selected:focus-visible,
.rdp-day_selected:hover {
    color: #fff;
    opacity: 1;
    background-color: var(--rdp-accent-color)
}

.rdp-day_outside {
    opacity: .5
}

.rdp-day_selected:focus-visible {
    outline: var(--rdp-outline);
    outline-offset: 2px;
    z-index: 1
}

.rdp:not([dir=rtl]) .rdp-day_range_start:not(.rdp-day_range_end) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.rdp:not([dir=rtl]) .rdp-day_range_end:not(.rdp-day_range_start),
.rdp[dir=rtl] .rdp-day_range_start:not(.rdp-day_range_end) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.rdp[dir=rtl] .rdp-day_range_end:not(.rdp-day_range_start) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.rdp-day_range_end.rdp-day_range_start {
    border-radius: 100%
}

.rdp-day_range_middle {
    border-radius: 0
}

#__next {
    position: relative
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

img,
video {
    max-width: 100%
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
video {
    display: block
}

body {
    line-height: 1;
    transition: var(--transition-ease)
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: "";
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

:root {
    --font-size-100: 12px;
    --font-size-200: 14px;
    --font-size-300: 16px;
    --font-size-400: 18px;
    --font-size-500: 20px;
    --font-size-600: 22px;
    --font-size-700: 24px;
    --font-size-800: 26px;
    --blue-device-background: #0f4570;
    --blue-device-logo: #2196f3;
    --red-device-background: #ff7581;
    --red-device-logo: #c24c54;
    --green-device-background: #003b34;
    --green-device-logo: #008071;
    --black-device-background: #333;
    --black-device-logo: #181818;
    --white-device-background: #fff;
    --white-device-logo: #c0bfbf;
    --yellow-device-background: #f9f06e;
    --yellow-device-logo: #f3cd45;
    --mint-device-background: #bfdea9;
    --mint-device-logo: #659e5a;
    --purple-device-background: #e6d5e8;
    --purple-device-logo: #8e88c1;
    --bright-50: #fff;
    --bright-100: #f7f9f9;
    --bright-200: #b9cad3;
    --dim-50: #6a7c8b;
    --dim-75: #2d3c49;
    --dim-100: #192734;
    --dim-200: #15202b;
    --dark-50: #3d4145;
    --dark-100: #15181c;
    --dark-200: #000;
    --ui-50: var(--bright-50);
    --ui-100: var(--bright-100);
    --ui-200: var(--bright-200);
    --r-50: #ffd4d8;
    --r-100: #ee8a94;
    --r-200: #e23b4d;
    --r-300: #b42635;
    --r-400: #f19ea7;
    --r-500: #5e000b;
    --r-200-rgb: 226, 59, 77;
    --y-50: #ffefa1;
    --y-100: #f9e29c;
    --y-200: #ffc107;
    --y-300: #c99a0d;
    --y-400: #ffe083;
    --y-500: #644b01;
    --y-200-rgb: 255, 193, 7;
    --g-50: #d8f0d8;
    --g-100: #ace6ac;
    --g-200: #74d674;
    --g-300: #63ba63;
    --g-400: #baebba;
    --g-500: #005e00;
    --g-200-rgb: 116, 214, 116;
    --b-50: #d4ecff;
    --b-100: #95cbf4;
    --b-200: #4fa8ed;
    --b-300: #3a87c2;
    --b-400: #a7d4f6;
    --b-500: #00365f;
    --b-200-rgb: 79, 168, 237;
    --p-50: #e1dbf8;
    --p-100: #b0a0ff;
    --p-200: #7b61ff;
    --p-300: #634cda;
    --p-400: #d8d0ff;
    --p-500: #130074;
    --p-200-rgb: 123, 97, 255;
    --bg-50: #d3e8e6;
    --bg-100: #96e0d7;
    --bg-200: #50ccbd;
    --bg-300: #3d9d92;
    --bg-400: #a8e6de;
    --bg-500: #00493f;
    --bg-200-rgb: 80, 204, 189;
    --w-50: #eef2f8;
    --w-100: #9ea5af;
    --w-200: #414141;
    --w-300: #000;
    --w-400: #000;
    --w-500: #000;
    --w-200-rgb: 65, 65, 65;
    --bl-50: #eef2f8;
    --bl-100: #b8bfca;
    --bl-200: #3b3c3f;
    --bl-300: #474747;
    --bl-400: #fff;
    --bl-500: #000;
    --bl-200-rgb: 59, 60, 63;
    --ltle-50: #f2ede8;
    --ltle-100: #d9c9bb;
    --ltle-200: #bfa58d;
    --ltle-300: #917a64;
    --ltle-200-rgb: 191, 165, 141;
    --pkle-50: #fde5d4;
    --pkle-100: #f8b17d;
    --pkle-200: #f37d27;
    --pkle-300: #c1570b;
    --pkle-200-rgb: 243, 125, 39;
    --cble-50: #fadcdd;
    --cble-100: #ed8c91;
    --cble-200: #cf2029;
    --cble-300: #ac1b22;
    --cble-200-rgb: 207, 33, 42;
    --arle-50: #dae7fb;
    --arle-100: #95baf3;
    --arle-200: #6fa0ef;
    --arle-300: #1966e1;
    --arle-200-rgb: 113, 161, 239;
    --color-50: var(--w-50);
    --color-100: var(--w-100);
    --color-200: var(--w-200);
    --color-300: var(--w-300);
    --color-400: var(--w-400);
    --icon-theme: var(--color-200);
    --main-bg-color: var(--bright-50);
    --secondary-bg-color: var(--bright-50);
    --main-bg-color-70: hsla(0, 0%, 100%, .7);
    --b100-text-color: #000;
    --b200-text-color: #192734;
    --b300-text-color: #6a7c8b;
    --grey-25: #eef2f8;
    --grey-100: #cccfd3;
    --grey-200: #9ea5af;
    --grey-400: #d4dbe6;
    --error-red: #ec4242;
    --valid-green: #6bfa8b;
    --a50-accent-color: rgba(184, 191, 202, .3);
    --a100-accent-color: var(--color-50);
    --a200-accent-color: var(--bright-400);
    --toggle-on: #b9cad3;
    --toggle-off: #6a7c8b;
    --enabled-text-box: ;
    --light-accent-color: var(--grey-25);
    --icon-shadow: #6e87ab80;
    --icon-color: var(--color-200);
    --DateMet: rgba(80, 204, 189, .2);
    --LocationMet: rgba(79, 168, 237, .2);
    --Headline: rgba(123, 97, 255, .2);
    --Work: rgba(79, 168, 237, .2);
    --Location: rgba(116, 214, 116, .2);
    --Education: rgba(80, 204, 189, .2);
    --Website: var(--bright-50);
    --Email: linear-gradient(180deg, #1d61ee, #1ad3ff);
    --Phone: linear-gradient(148.8deg, #61fb7c 4.26%, #0fbe2c 86.09%);
    --Phone_text: linear-gradient(148.8deg, #61fb7c 4.26%, #0fbe2c 86.09%);
    --WhatsApp: linear-gradient(158.26deg, #5efc7b 7.47%, #09b927 84.33%);
    --Address: var(--bright-50);
    --Alipay: #1677ff;
    --Tiktok: #000000;
    --Signal: #3a76f0;
    --Discord: #5865f2;
    --Telegram: var(--bright-50);
    --WeChat: linear-gradient(134.49deg, #03e172 6.84%, #06c462 93.24%);
    --Spotify: #181413;
    --SoundCloud: #ff5419;
    --AppleMusic: linear-gradient(180deg, #fc5c79, #fc243d);
    --iTunes: var(--bright-50);
    --Beatport: var(--dark-200);
    --Deezer: var(--dark-200);
    --Tidal: linear-gradient(144.51deg, #403f45 18.49%, #000 90.92%);
    --YoutubeMusic: var(--bright-50);
    --YouTubeMusic: var(--bright-50);
    --Bandcamp: #f2f2f2;
    --AmazonMusic: var(--bright-50);
    --ApplePodcasts: linear-gradient(180deg, #f452ff, #832bc1), #006aff;
    --Calendly: var(--bright-50);
    --Notion: var(--bright-50);
    --GoogleDrive: var(--bright-50);
    --Dribbble: var(--bright-50);
    --Github: linear-gradient(180deg, #3a3a3a, #000);
    --GitHub: linear-gradient(180deg, #3a3a3a, #000);
    --Behance: #000322;
    --Medium: var(--dark-200);
    --Booksy: #02cfa7;
    --Etsy: #f45800;
    --AppStore: linear-gradient(180deg, #18bffb, #2072f3);
    --Zillow: #006aff;
    --GoogleReviews: #fff;
    --GooglePlay: #fff;
    --Instagram: radial-gradient(94.08% 94.08% at 27.22% 112.68%, #fff7ad 1.04%, #f7ac3e 25.52%, rgba(241, 90, 48, .39) 64.06%, rgba(189, 68, 177, 0) 100%), linear-gradient(160.39deg, #4c68d6 9.9%, rgba(212, 53, 133, 0) 83.73%), #ff0080;
    --Threads: var(--dark-200);
    --Twitter: #000;
    --Facebook: #1877f2;
    --LinkedIn: #225982;
    --YouTube: red;
    --Snapchat: #fffd01;
    --TikTok: var(--dark-200);
    --Twitch: #9146ff;
    --Pinterest: var(--bright-50);
    --Vimeo: var(--bright-50);
    --Clubhouse: var(--bright-50);
    --Yelp: radial-gradient(67.99% 67.99% at 45.97% 25.67%, #e3738e 0%, #ff0411 100%);
    --Venmo: linear-gradient(341.2deg, #368ec6 14.18%, #5ec2f3 83.08%);
    --CashApp: #00d632;
    --PayPal: linear-gradient(135deg, #002a6f, #0093d5);
    --Zelle: linear-gradient(180deg, #701cca, #9a3fdf);
    --sketelon-grey: #e5e8ec;
    --b-device-background: #0f4570;
    --b-device-logo: #2196f3;
    --r-device-background: #ff7581;
    --r-device-logo: #c24c54;
    --bg-device-background: #003b34;
    --bg-device-logo: #008071;
    --bl-device-background: #333;
    --bl-device-logo: #181818;
    --w-device-background: #fff;
    --w-device-logo: #c0bfbf;
    --y-device-background: #f9f06e;
    --y-device-logo: #f3cd45;
    --g-device-background: #bfdea9;
    --g-device-logo: #659e5a;
    --p-device-background: #e6d5e8;
    --p-device-logo: #8e88c1;
    --icon-box-shadow: 0px 0px 20px rgba(110, 135, 171, .5);
    --icon-border-radius: 50%;
    --disabled-border: rgba(0, 0, 10, .2);
    --disabled-background: rgba(0, 0, 10, .1);
    --background-overlay: rgba(0, 0, 0, .2);
    --container-box-shadow: 0px 0px 20px rgba(110, 135, 171, .15);
    --button-shadow-cap: 0px 2px 0px var(--color-300);
    --button-shadow-500: var(--button-shadow-cap), 0px 61px 111px rgba(47, 50, 69, .15), 0px 39.0082px 46.3731px rgba(47, 50, 69, .12), 0px 23.3274px 24.7933px rgba(47, 50, 69, .103), 0px 12.9302px 13.8989px rgba(47, 50, 69, .088);
    --menu-shadow: 0px -56px 80px rgba(110, 135, 171, .07), 0px -28.0273px 40.0391px rgba(110, 135, 171, .053), 0px -16.8824px 24.1177px rgba(110, 135, 171, .046), 0px -10.8191px 15.4559px rgba(110, 135, 171, .04), 0px -7.01207px 10.0172px rgba(110, 135, 171, .035), 0px -4.41402px 6.30574px rgba(110, 135, 171, .03), 0px -2.53613px 3.62304px rgba(110, 135, 171, .024), 0px -1.11622px 1.59459px rgba(110, 135, 171, .017);
    --lightweight-menu-shadow: 0px -56px 20px rgba(110, 135, 171, .07);
    --banner-icon-box-shadow-bright: 0px 0px 16.6667px rgba(110, 135, 171, .15);
    --banner-icon-box-shadow-dim: none;
    --banner-icon-box-shadow-dark: none;
    --banner-icon-box-shadow: var(--banner-icon-box-shadow-bright);
    --banner-background-bright: var(--bright-50);
    --banner-background-dim: #213445;
    --banner-background-dark: #22262a;
    --banner-background: var(--banner-background-bright);
    --announcement-banner-background: hsla(0, 0%, 100%, .9);
    --color-200-rgb: #fff;
    --container-background: var(--ui-50);
    --transition-ease: all 0.3s ease;
    --header-icon-shadow-bright-100: 0px 0px 20px rgba(110, 135, 171, .15);
    --header-icon-shadow-bright-200: 0px 0px 20px rgba(110, 135, 171, .15);
    --header-icon-shadow-dim-100: 0px 0px 10px rgba(1, 2, 3, .33);
    --header-icon-shadow-dim-200: 0px 0px 15px rgba(241, 244, 247, .1);
    --header-icon-shadow-dark-100: 0px 0px 6px hsla(0, 0%, 100%, .08);
    --header-icon-shadow-dark-200: 0px 0px 15px rgba(241, 244, 247, .25);
    --header-icon-shadow-100: var(--header-icon-shadow-bright-100);
    --header-icon-shadow-200: var(--header-icon-shadow-bright-200);
    --header-border-bright: #ededf3;
    --header-border-dim: #2d3c49;
    --header-border-dark: var(--bl-200);
    --header-border-color: var(--header-border-bright);
    --header-bg-bright: var(--bright-50);
    --header-bg-dim: var(--ui-100);
    --header-bg-dark: var(--ui-100);
    --header-bg-color: var(--header-bg-bright);
    --trash-icon-bright: var(--dim-50);
    --trash-icon-dim: var(--bright-50);
    --trash-icon-dark: var(--bright-200);
    --trash-icon-color: var(--trash-icon-bright);
    --edit-icon-bright: var(--dim-50);
    --edit-icon-dim: var(--color-200);
    --edit-icon-dark: var(--bl-100);
    --edit-icon-color: var(--trash-icon-bright);
    --quick-action-shadow-bright: 0px 0px 20px rgba(110, 135, 171, .14);
    --quick-action-shadow-dim: none;
    --quick-action-shadow-dark: none;
    --quick-action-shadow: var(--quick-action-shadow-bright);
    --icon-bg-blue: rgba(79, 168, 237, .2);
    --icon-bg-purple: rgba(123, 97, 255, .2);
    --icon-bg-green: rgba(80, 204, 189, .2);
    --icon-bg-yellow: rgba(255, 193, 7, .2);
    --icon-bg-mint: rgba(var(--g-200-rgb), 0.2);
    --icon-bg-black: rgba(var(--bl-200-rgb), 0.2);
    --checkbox-bg-bright: var(--dark-50);
    --checkbox-bg-dim: var(--bright-50);
    --checkbox-bg-dark: var(--bright-50);
    --checkbox-bg-color: var(--checkbox-bg-bright);
    --search-bar-bg-bright: #f9fafb;
    --search-bar-bg-dim: #2d3c49;
    --search-bar-bg-dark: #000;
    --search-bar-bg: var(--search-bar-bg-bright);
    --search-bar-text-bright: #15202b;
    --search-bar-text-dim: #fff;
    --search-bar-text-dark: #fff;
    --search-bar-text: var(--search-bar-bg-bright);
    --search-clear-bg-bright: #6a7c8b;
    --search-clear-bg-dim: #fff;
    --search-clear-bg-dark: #fff;
    --search-clear-bg: var(--search-bar-bg-bright);
    --text-bg-bright: #f5f7fa;
    --text-bg-dim: #2d3c49;
    --text-bg-dark: #3b3c3f;
    --text-bg-color: var(--text-bg-bright);
    --icon-ui-bright: var(--dim-50);
    --icon-ui-dim: var(--bright-200);
    --icon-ui-dark: var(--grey-200);
    --icon-ui-color: var(--icon-ui-bright);
    --round-btn-shadow-bright: 0px 0px 20px rgba(110, 135, 171, .15);
    --round-btn-shadow-dim: 0px 0px 10px rgba(1, 2, 3, .33);
    --round-btn-shadow-dark: 0px 0px 10px hsla(0, 0%, 100%, .2);
    --round-btn-shadow: var(--round-btn-shadow-bright);
    --selected-text: var(--bright-50);
    --text-link: var(--dim-200);
    --filter-inactive-bright: var(--bright-50);
    --filter-inactive-dim: #2d3c49;
    --filter-inactive-dark: var(--dark-50);
    --filter-inactive-color: var(--bright-50);
    --filter-active-bright: var(--dark-200);
    --filter-active-dim: var(--bright-50);
    --filter-active-dark: var(--bright-50);
    --filter-active-color: var(--dark-200);
    --filter-button-pressed-bright: var(--dark-50);
    --filter-button-pressed-dim: var(--bright-200);
    --filter-button-pressed-dark: var(--grey-100);
    --filter-button-pressed-color: var(--filter-button-pressed-bright);
    --quick-tip-shadow-bright: 0px 0px 20px rgba(110, 135, 171, .15);
    --quick-tip-shadow-dim: none;
    --quick-tip-shadow-dark: none;
    --quick-tip-shadow: var(--quick-tip-shadow-bright);
    --quick-tip-preset-1-bright: #eff5fa;
    --quick-tip-preset-1-dim: var(--container-background);
    --quick-tip-preset-1-dark: var(--container-background);
    --quick-tip-preset-1-bg: var(--quick-tip-preset-1-bright);
    --progress-bar-bright: #f0f2f5;
    --progress-bar-dim: var(--grey-200);
    --progress-bar-dark: var(--grey-200);
    --progress-bar-bg: var(--progress-bar-bright);
    --activate-page-heading-text-bright: var(--dark-50);
    --activate-page-heading-text-dim: var(--bright-100);
    --activate-page-heading-text-dark: var(--bright-100);
    --activate-page-heading-text-color: var(--activate-page-heading-text-bright);
    --enable-nfc-image-bright: rgba(185, 202, 211, .2);
    --enable-nfc-image-dim: var(--container-background);
    --enable-nfc-image-dark: var(--container-background);
    --enable-nfc-image-bg: var(--enable-nfc-image-bright);
    --bright-theme-grey: var(--dim-50);
    --dim-theme-grey: var(--grey-200);
    --dark-theme-grey: var(--grey-200);
    --theme-grey: var(--bright-theme-grey);
    --unselected-device-bright: #f5f5f5;
    --unselected-device-dim: hsla(214, 7%, 81%, .7);
    --unselected-device-dark: hsla(214, 7%, 81%, .7);
    --unselected-device-color: var(--unselected-device-bright);
    --page-bright: #f9fafb;
    --page-dim: var(--main-bg-color);
    --page-dark: var(--main-bg-color);
    --page-bg: var(--page-bright);
    --checklist-icon-bright: #50ccbd;
    --checklist-icon-dim: #419e93;
    --checklist-icon-dark: #419e93;
    --checklist-icon-bg: var(--checklist-icon-bright);
    --section-heading-bright: var(--dim-50);
    --section-heading-dim: var(--bright-200);
    --section-heading-dark: var(--bright-200);
    --section-heading-color: var(--section-heading-bright);
    --empty-contacts-icon-bright: rgba(0, 0, 0, .05);
    --empty-contacts-icon-dim: hsla(0, 0%, 100%, .2);
    --empty-contacts-icon-dark: hsla(0, 0%, 100%, .25);
    --empty-contacts-icon-color: var(--empty-contacts-icon-bright);
    --empty-contacts-text-bright: #bbb;
    --empty-contacts-text-dim: var(--bright-50);
    --empty-contacts-text-dark: var(--bright-50);
    --empty-contacts-text-color: var(--empty-contacts-text-bright);
    --round-btn-icon-color: var(--dark-50);
    --modal-overlay-bright: rgba(0, 0, 0, .149);
    --modal-overlay-dim: rgba(55, 56, 56, .6);
    --modal-overlay-dark: rgba(55, 56, 56, .6);
    --modal-overlay-bg: var(--modal-overlay-bright);
    --notification-banner-shadow-bright: 0px 5px 20px 10px rgba(0, 0, 0, .1);
    --notification-banner-shadow-dim: 0px 1.132200002670288px 3.2154479026794435px 0px rgba(158, 165, 175, .015), 0px 3.130388021469116px 8.890301704406738px 0px rgba(158, 165, 175, .02), 0px 7.536768436431885px 21.404420852661133px 0px rgba(158, 165, 175, .035), 0px 25px 71px 0px rgba(158, 165, 175, .05);
    --notification-banner-shadow-dark: 0px 2.264400005340576px 6.430895805358887px 0px rgba(158, 165, 175, .04), 0px 6.260776042938232px 17.780603408813477px 0px rgba(158, 165, 175, .07), 0px 15.07353687286377px 42.808841705322266px 0px rgba(158, 165, 175, .1), 0px 50px 142px 0px rgba(158, 165, 175, .15);
    --notification-banner-shadow: var(--notification-banner-shadow-bright);
    --exchange-modal-text-bright: var(--w200);
    --exchange-modal-text-dim: var(--bright-50);
    --exchange-modal-text-dark: var(--bright-50);
    --exchange-modal-text-color: var(--exchange-modal-text-bright);
    --bottom-menu-shadow-bright: 0px -1.1162155866622925px 1.5945937633514404px rgba(110, 135, 171, .02), 0px -2.536127805709839px 3.623039960861206px rgba(110, 135, 171, .02), 0px -4.414018154144287px 6.3057403564453125px rgba(110, 135, 171, .03), 0px -7.012069225311279px 10.017241477966309px rgba(110, 135, 171, .04), 0px -10.819101333618164px 15.455859184265137px rgba(110, 135, 171, .04), 0px -16.882360458374023px 24.117658615112305px rgba(110, 135, 171, .05), 0px -28.027345657348633px 40.0390625px rgba(110, 135, 171, .05), 0px -56px 80px rgba(110, 135, 171, .07);
    --bottom-menu-shadow-dim: 0px -0.7813509108638048px 1.1162156345458083px rgba(158, 165, 175, .014), 0px -1.7752894641968873px 2.536127972602444px rgba(158, 165, 175, .014), 0px -2.8px 4.414018249511719px rgba(158, 165, 175, .021), 0px -4.9px 7px rgba(158, 165, 175, .021), 0px -7.7px 11.2px rgba(158, 165, 175, .042), 0px -11.2px 16.8px rgba(158, 165, 175, .028);
    --bottom-menu-shadow-dark: 0px -1.1162155866622925px 1.1162156345458083px rgba(158, 165, 175, .02), 0px -2.536127805709839px 2.536127972602444px rgba(158, 165, 175, .02), 0px -4.414018154144287px 4.414018249511719px rgba(158, 165, 175, .03), 0px -7.012069225311279px 7.012069234976016px rgba(158, 165, 175, .04), 0px -10.819101333618164px 10.819101228985596px rgba(158, 165, 175, .04), 0px -16.882360458374023px 16.882360429278614px rgba(158, 165, 175, .05), 0px -28.027345657348633px 14.019141459743643px rgba(158, 165, 175, .05), 0px -56px 56px rgba(158, 165, 175, .05);
    --bottom-menu-shadow: var(--bottom-menu-shadow-bright);
    --input-border-color: #333;
    --box-shadow-bright: 0px 0px 20px 0px rgba(110, 135, 171, .15);
    --box-shadow-dim: none;
    --box-shadow-dark: none;
    --box-shadow: var(--box-shadow-bright);
    --modal-header-btn-bright: var(--bright-50);
    --modal-header-btn-dim: var(--dark-100);
    --modal-header-btn-dark: var(--dark-100);
    --modal-header-btn-bg: var(--modal-header-btn-bright);
    --header-btn-bg-bright: var(--bright-50);
    --header-btn-bg-dim: var(--dim-75);
    --header-btn-bg-dark: var(--dark-200);
    --header-btn-bg: var(--header-btn-bg-bright);
    --link-count-bg-bright: var(--bright-50);
    --link-count-bg-dim: #15202b;
    --link-count-bg-dark: #15181c;
    --link-count-bg: var(--link-count-bg-bright);
    --link-count-text-bright: #6a7c8b;
    --link-count-text-dim: #b9cad3;
    --link-count-text-dark: #b9cad3;
    --link-count-text: var(--link-count-text-bright);
    --image-modal-bg-bright: var(--bright-50);
    --image-modal-bg-dim: var(--dim-200);
    --image-modal-bg-dark: var(--dark-100);
    --image-modal-bg: var(--image-modal-bg-bright);
    --image-modal-box-bg-bright: var(--bright-50);
    --image-modal-box-bg-dim: var(--dim-100);
    --image-modal-box-bg-dark: var(--dark-200);
    --image-modal-box-bg: var(--image-modal-box-bright);
    --image-modal-header-btn-bg-bright: var(--bright-50);
    --image-modal-header-btn-bg-dim: var(--dark-100);
    --image-modal-header-btn-bg-dark: ;
    --image-modal-header-btn-bg: var(--dark-200);
    --modal-bg-bright: var(--bright-50);
    --modal-bg-dim: var(--dim-200);
    --modal-bg-dark: var(--dark-200);
    --modal-bg: var(--modal-bg-bright);
    --info-bright: var(--w-100);
    --info-dim: var(--dim-75);
    --info-dark: var(--bl-200);
    --info: var(--info-bright);
    --info-text-bright: #6a7c8b;
    --info-text-dim: #b9cad3;
    --info-text-dark: #b9cad3;
    --info-text: var(--info-text-bright);
    --info-text-bold-bright: #6a7c8b;
    --info-text-bold-dim: var(--bright-50);
    --info-text-bold-dark: var(--bright-50);
    --info-text-bold: var(--info-text-bold-bright);
    --info-hover-bg-bright: #6a7c8b;
    --info-hover-bg-dim: #b9cad3;
    --info-hover-bg-dark: #b9cad3;
    --info-hover-bg: var(--info-hover-bg-bright);
    --info-bg-bright: var(--bright-50);
    --info-bg-dim: var(--dim-200);
    --info-bg-dark: var(--bl-200);
    --info-bg: var(--info-bg-bright);
    --info-shadow-bright: 0px 2px 6px rgba(0, 0, 0, .04), 0px 6px 17px rgba(0, 0, 0, .07), 0px 15px 42px rgba(0, 0, 0, .1), 0px 50px 142px rgba(0, 0, 0, .15);
    --info-shadow-dim: 0px 2px 6px rgba(158, 165, 175, .04), 0px 6px 17px rgba(158, 165, 175, .07), 0px 15px 42px rgba(158, 165, 175, .1), 0px 50px 142px rgba(158, 165, 175, .15);
    --info-shadow-dark: 0px 2px 6px rgba(0, 0, 0, .04), 0px 6px 17px rgba(0, 0, 0, .07), 0px 15px 42px rgba(0, 0, 0, .1), 0px 50px 142px rgba(0, 0, 0, .15);
    --info-shadow: var(--info-shadow-bright);
    --tos-pp-text-bright: var(--dark-50);
    --tos-pp-text-dim: var(--bright-200);
    --tos-pp-text-dark: var(--bright-200);
    --tos-pp-text: var(--tos-pp-text-bright);
    --walkthrough-overlay-bright: rgba(47, 47, 47, .45);
    --walkthrough-overlay-dim: rgba(55, 56, 56, .6);
    --walkthrough-overlay-dark: rgba(55, 56, 56, .6);
    --walkthrough-overlay-bg: var(--walkthrough-overlay-bright)
}

#root,
:root {
    transition: var(--transition-ease);
    background: var(--main-bg-color)
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

:root {
    --doc-height: 100%
}

body,
html {
    height: 100vh;
    height: var(--doc-height)
}

body {
    max-width: 500px;
    margin: auto
}

#__next {
    height: 100%;
    display: flex;
    flex-direction: column
}

h1 {
    font-weight: 800;
    color: var(--main-bg-color);
    line-height: 24px;
    font-size: 20px;
    flex: none;
    order: 0;
    flex-grow: 0;
    transition: var(--transition-ease);
    letter-spacing: -.7px
}

.pos-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0
}

.main-Body-20 {
    margin-left: 20px;
    margin-right: 20px
}

.main-Body-25 {
    margin-left: 25px;
    margin-right: 25px
}

.big-button {
    height: 100%;
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 13px 16px;
    border-radius: 9px;
    border: none;
    transition: box-shadow 1s ease, transform .2s cubic-bezier(.48, -.03, .41, .97), background .3s ease, all .3s ease;
    gap: 6px
}

.big-button.color-theme {
    background: var(--color-200) !important;
    box-shadow: var(--button-shadow-500);
    color: var(--bright-50)
}

.big-button.color-theme:hover {
    box-shadow: none;
    transform: scale(.97);
    box-shadow: var(--button-shadow-500)
}

.big-button.color-theme:active {
    transform: scale(.88);
    box-shadow: var(--button-shadow-cap)
}

.big-button.color-theme:disabled {
    pointer-events: none;
    box-shadow: 0 2px 0 var(--color-100);
    background: var(--color-100) !important
}

.i100-input {
    font-weight: 700;
    font-size: var(--i100-input-font-size, 16px);
    line-height: 21px;
    color: var(--b100-text-color)
}

.i100-input.placeholder {
    color: var(--grey-200) !important
}

.big-button.ui-theme {
    height: 55px;
    background: var(--main-bg-color);
    transition: var(--transition-ease);
    box-shadow: 0 2px 0 var(--ui-100), 0 1px 2px rgba(0, 0, 0, .03), 0 2px 4px rgba(0, 0, 0, .03), 0 4px 8px rgba(0, 0, 0, .03), 0 8px 16px rgba(0, 0, 0, .03), 0 16px 32px rgba(0, 0, 0, .03)
}

.big-button.ui-theme:hover {
    box-shadow: none;
    transform: scale(.97);
    box-shadow: 0 2px 0 var(--ui-100)
}

.big-button.ui-theme:active {
    transform: scale(.88);
    box-shadow: 0 2px 0 var(--ui-100)
}

.big-button.ui-theme:disabled {
    pointer-events: none;
    box-shadow: 0 2px 0 var(--ui-100);
    background: var(--ui-200)
}

.big-button.bw-theme {
    background: var(--b100-text-color);
    color: var(--container-background);
    transition: var(--transition-ease)
}

.big-button.bw-theme:hover {
    transform: scale(.97)
}

.big-button.bw-theme:active {
    transform: scale(.88)
}

.big-button.bw-theme:disabled {
    pointer-events: none;
    background: #b9babb
}

.big-button.bw-inverted-theme {
    background: var(--container-background);
    color: var(--b100-text-color);
    box-shadow: var(--container-box-shadow);
    transition: var(--transition-ease)
}

.big-button.bw-inverted-theme:hover {
    transform: scale(.97)
}

.big-button.bw-inverted-theme:active {
    transform: scale(.88)
}

.big-button.bw-inverted-theme:disabled {
    pointer-events: none;
    background: #b9babb;
    color: var(--container-background)
}

button.big-button.outline-theme {
    color: var(--color-200);
    box-shadow: none;
    border: 1px solid var(--icon-color);
    background: transparent
}

.big-button.outline-theme p {
    color: var(--icon-color)
}

.big-button.outline-theme:hover {
    transform: scale(.97)
}

.big-button.outline-theme:active {
    transform: scale(.88)
}

.big-button.outline-theme:disabled {
    pointer-events: none;
    color: var(--color-100)
}

.svg-bigbutton {
    margin: 0 4px
}

.svg-bigbutton,
.svg-right-icon {
    fill: var(--main-bg-color);
    flex: none;
    order: 1;
    flex-grow: 0;
    transition: var(--transition-ease)
}

.svg-right-icon {
    width: 20px;
    position: absolute;
    right: 16px
}

.svg-absolute-icon {
    right: 10%
}

.svg-absolute-icon,
.svg-left-icon {
    flex: none;
    order: 1;
    flex-grow: 0;
    position: absolute
}

.svg-left-icon {
    left: 16px
}

.big-button-pos {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 70px;
    padding-left: 20px;
    padding-right: 20px
}

.transition-text {
    display: flex;
    opacity: 1;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
    transition: all .3s ease-out
}

.edit-mode-text-hide {
    opacity: 0;
    top: 15%
}

.preview-mode-text-hide {
    opacity: 0;
    top: 90%
}

.banner-onboarding {
    width: 100%;
    height: 200px
}

.banner-onboarding img {
    object-fit: cover
}

.big-Text-Area {
    margin-top: 20px;
    margin-bottom: 5px;
    transition: all .25s ease
}

.bta-Large-Text {
    letter-spacing: 0;
    font-weight: 800;
    font-size: 36px;
    line-height: 44px
}

.bta-Large-Text,
.bta-Sub-Text {
    font-style: normal;
    color: var(--b100-text-color)
}

.bta-Sub-Text {
    font-weight: 300;
    font-size: 23px;
    line-height: 28px
}

.onboarding-area.colored {
    border: 2px solid var(--color-200) !important;
    background-color: var(--main-bg-color)
}

.onboarding-area {
    border: 1.2px solid var(--input-border-color);
    border-radius: 5px;
    align-items: center;
    padding: 0 16px;
    height: 45px
}

.onboarding-area,
.onboarding-textarea-container {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row
}

.onboarding-textarea-container {
    border: 2px solid var(--b100-text-color);
    border-radius: 5px;
    height: 100px;
    align-items: flex-start;
    justify-content: flex-start;
    padding-left: 16px
}

.onboarding-area-div {
    display: flex;
    align-items: center
}

.onboarding-textarea-div {
    height: 100%;
    display: flex;
    align-items: flex-start;
    padding-top: 13.5px;
    padding-bottom: 13.5px
}

.width-100 {
    width: 100%
}

.onboarding-text-area::placeholder,
.onboarding-text-felid::placeholder {
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    color: var(--grey-200)
}

.onboarding-text-felid.with-password-toggle[type=password] {
    letter-spacing: 1.5px
}

.onboarding-text-felid.with-password-toggle::placeholder {
    letter-spacing: 0
}

.onboarding-text-felid:-webkit-autofill {
    -webkit-transition: var(--transition-ease);
    transition: var(--transition-ease);
    background-color: var(--main-bg-color) !important;
    background-image: none !important;
    -webkit-box-shadow: 0 0 0 1000px var(--main-bg-color) inset !important;
    -webkit-text-fill-color: var(--b100-text-color) !important
}

.onboarding-text-felid {
    width: 100%;
    margin-left: 3px;
    border: none;
    background: transparent;
    font-family: Open Sans;
    font-size: 16px;
    line-height: 22px;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    transition: var(--transition-ease);
    color: var(--b100-text-color);
    height: 42px;
    letter-spacing: -.25px
}

.text-lowercase-style {
    text-transform: lowercase
}

.background-container {
    background: var(--container-background) !important
}

.onboarding-text-area {
    width: 100%;
    height: 100%;
    margin-left: 3px;
    margin-right: 40px;
    border: none;
    background: var(--main-bg-color);
    font-weight: 700;
    font-size: 16px;
    line-height: 21px;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    resize: none;
    transition: var(--transition-ease)
}

.onboarding-text-area:focus {
    outline: none
}

.onboarding-text-felid:invalid+.onboarding-area {
    border: 2px solid var(--error-red)
}

.onboarding-text-felid:invalid+.input-label-small {
    color: var(--error-red)
}

.onboarding-area.text-field-error {
    border: 1.2px solid var(--r-200)
}

.onboarding-text-felid:focus {
    outline: 0
}

.onboarding-text-felid:disabled {
    opacity: .2
}

.link-label {
    font-size: 16px;
    line-height: 21px;
    display: flex;
    align-items: center;
    letter-spacing: -.055em;
    color: var(--grey-200)
}

.input-label-small {
    font-weight: 700;
    font-style: normal;
    font-size: 13px;
    line-height: 17px;
    color: var(--grey-200);
    padding: 2px 5px !important;
    top: -12px;
    z-index: 0;
    letter-spacing: -1px
}

.input-label-large,
.input-label-small {
    background-color: var(--main-bg-color);
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 16px;
    transform: translateY(6px);
    opacity: 0;
    transition: opacity .2s ease, transform .3s cubic-bezier(.24, -.04, 0, .61)
}

.input-label-large {
    padding: 2px 5px;
    width: -moz-fit-content;
    width: fit-content;
    top: -16px;
    transition: var(--transition-ease)
}

.address-form .onboarding-text-area:not(:placeholder-shown)+.input-label-small:not(.show-label-focus),
.address-form .onboarding-text-felid:focus+.input-label-small,
.address-form .onboarding-text-felid:not(:placeholder-shown)+.input-label-large:not(.show-label-focus),
.address-form .onboarding-text-felid:not(:placeholder-shown)+.input-label-small:not(.show-label-focus),
form:not(.address-form) .onboarding-text-area:not(:placeholder-shown)+.input-label-small,
form:not(.address-form) .onboarding-text-felid:not(:placeholder-shown)+.input-label-large,
form:not(.address-form) .onboarding-text-felid:not(:placeholder-shown)+.input-label-small {
    opacity: 1;
    transform: translateY(0)
}

.show-label {
    opacity: 1;
    transform: translateY(0)
}

.input-loader,
.input-loader:after {
    border-radius: 50%;
    width: 23px;
    height: 23px
}

.input-loader {
    position: absolute;
    right: 13px;
    font-size: 1.65px;
    border: 2.5em solid hsla(0, 0%, 100%, .2);
    border-left: 2.5em solid var(--grey-200);
    transform: translateZ(0);
    animation: load8 .75s cubic-bezier(.44, .16, .63, .86) infinite;
    transition: opacity .2s ease
}

.input-loader.profile-picture,
.input-loader.setup-arrow {
    position: relative !important;
    right: 0 !important;
    top: 0 !important;
    border-top: 2.5em solid #fff;
    border-right: 2.5em solid #fff;
    border-bottom: 2.5em solid hsla(0, 0%, 100%, .25)
}

.settings-input-loader,
.settings-input-loader:after {
    border-radius: 50%;
    width: 23px;
    height: 23px
}

.settings-input-loader {
    margin-left: 90px;
    top: 13px;
    font-size: 1.65px;
    border: 2.5em solid hsla(0, 0%, 100%, .2);
    border-left: 2.5em solid var(--grey-200);
    transform: translateZ(0);
    animation: load8 .75s cubic-bezier(.44, .16, .63, .86) infinite;
    transition: opacity .2s ease
}

@keyframes load8 {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

.input-check {
    display: flex;
    position: absolute;
    top: 13px;
    pointer-events: none
}

.input-check,
.settings-input-check {
    right: 13px;
    transform: scale(1.1);
    opacity: 1;
    transition: all .2s cubic-bezier(.61, .58, 0, .85)
}

.settings-input-check {
    left: 2px;
    top: 14.5px;
    margin-left: 95px
}

.disabled-chip {
    padding-top: 6px;
    padding-bottom: 6px
}

.disabled-chip,
.disabled-chip-username {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-left: 10px;
    width: -moz-fit-content;
    width: fit-content;
    background: var(--color-50);
    border-radius: 72px;
    border: 1.5px solid var(--main-bg-color);
    transition: all .2s ease;
    cursor: pointer;
    transition: var(--transition-ease)
}

.disabled-chip-username {
    padding-top: 3px;
    padding-bottom: 3px
}

.disabled-chip-profile {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    width: -moz-fit-content;
    width: fit-content;
    background: var(--a50-accent-color);
    border-radius: 72px;
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 15px;
    color: var(--b100-text-color);
    transition: var(--transition-ease);
    height: 31px;
    gap: 8px
}

.disabled-chip-profile.selected {
    background-color: var(--error-red);
    color: #fff
}

.disabled-chip-profile.selected .skill-chip-icon {
    display: flex
}

.chip-area-profile {
    display: flex;
    flex-direction: row;
    column-gap: 12px;
    row-gap: 8px;
    flex-wrap: wrap
}

.chip-area-profile-grid {
    display: grid;
    grid-auto-flow: row;
    grid-gap: 3px;
    gap: 3px
}

.chip-area-overflow {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, var(--main-bg-color) 50%, transparent);
    mask-image: linear-gradient(to bottom, var(--main-bg-color) 50%, transparent);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: -webkit-mask-size .3s ease, -webkit-mask-position .3s ease, mask-size .3s ease, mask-position .3s ease
}

.chip-area-overflow.clicked {
    -webkit-mask-size: 100% 200%;
    -webkit-mask-position: 0 0;
    mask-size: 100% 200%;
    mask-position: 0 0
}

.disabled-chip-text {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.disabled-chip.selected {
    border: 1.5px solid var(--color-200)
}

.chip-icon {
    height: 9px;
    width: 9px;
    border-radius: 50%;
    background-color: var(--valid-green);
    margin: 0;
    opacity: 0;
    transition: var(--transition-ease);
    flex: auto;
    display: flex;
    align-items: center;
    justify-content: center
}

.s25-label.selected+.chip-icon {
    height: 14px;
    width: 14px;
    margin-left: 4px;
    margin-right: 6px;
    opacity: 1
}

.s25-label,
.s25-label.selected {
    color: var(--b100-text-color)
}

.s25-label {
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 17px;
    transition: var(--transition-ease)
}

.chip-grid-onboarding {
    margin-top: 15px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px 4px
}

.signup-input {
    display: grid;
    grid-gap: 15px;
    gap: 15px
}

.line-divider {
    position: relative;
    width: 80%;
    height: 13px;
    border-bottom: 1.5px solid var(--b100-text-color);
    text-align: center
}

.s200-label {
    position: relative;
    background-color: var(--main-bg-color);
    font-style: normal;
    font-weight: 800;
    font-size: 24px;
    transition: var(--transition-ease)
}

.center-flex-100 {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.center-grid-gap-20 {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-row-gap: 20px;
    row-gap: 20px
}

.select-dropdown-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: grid;
    align-items: center;
    border-radius: 5px
}

.select-dropdown-chevron {
    width: 15px;
    top: 16px
}

.select-dropdown-100 {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    width: 100%;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    line-height: 21px;
    outline: none;
    box-shadow: none;
    border: none
}

.select-dropdown-100,
option[value=""][hidden] {
    color: var(--grey-200)
}

option {
    color: var(--b100-text-color) !important
}

.select-dropdown-50 {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    width: 50%;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    line-height: 21px;
    outline: none;
    box-shadow: none;
    border: none
}

.onboarding-area-50 {
    width: 45%
}

.onboarding-area-25,
.onboarding-area-50 {
    position: relative;
    border: 2px solid var(--b100-text-color);
    border-radius: 5px;
    height: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 16px
}

.onboarding-area-25 {
    width: 27.5%
}

.onboarding-area-25.year-error {
    width: 27.5%;
    position: relative;
    border: 2px solid var(--error-red);
    border-radius: 5px;
    height: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 16px
}

.birthday-flex {
    display: flex;
    flex-direction: row;
    gap: 10px
}

.select-dropdown-100:active,
.select-dropdown-100:focus {
    outline: none;
    box-shadow: none
}

.select-dropdown-100:disabled {
    color: var(--grey-200)
}

option[value=""][disabled] {
    display: none
}

.select-dropdown-100:invalid {
    color: var(--grey-200)
}

.nav-container {
    height: 75px;
    width: 100%;
    flex-direction: row;
    justify-content: space-between
}

.nav-container,
.round-outline {
    display: flex;
    align-items: center
}

.round-outline {
    height: 35px;
    width: 35px;
    border-radius: 50%;
    border: 2px solid var(--b100-text-color);
    justify-content: center
}

.round-outline.plus-icon {
    position: absolute;
    left: 17px;
    border: 1px solid var(--grey-100);
    height: 20px;
    width: 20px
}

.ui-light {
    color: var(--grey-25) !important
}

.left-triangle {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid var(--grey-25);
    transform: rotate(225deg) translateY(6px)
}

.nav-left-text {
    display: flex;
    flex-direction: row;
    align-items: flex-end
}

.device-toggle-container {
    display: flex;
    align-items: center
}

.toggle-switch-input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden
}

.toggle-switch-label {
    cursor: pointer;
    text-indent: -9999px;
    width: 42px;
    height: 25px;
    background: var(--toggle-off);
    display: block;
    border-radius: 42px;
    position: relative
}

.toggle-switch-label:after {
    --width: 21.5px;
    --gap: 2.5px;
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: var(--gap);
    width: var(--width);
    aspect-ratio: 1;
    background: #fff;
    border-radius: 21.5px;
    transition: .2s ease
}

.toggle-switch-input:checked+.toggle-switch-label {
    background: var(--toggle-on)
}

.toggle-switch-input:checked+.toggle-switch-label:after {
    left: calc(100% - var(--width) - var(--gap))
}

.i50-input {
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: -.03em;
    color: var(--b100-text-color)
}

.s300-label {
    font-size: 16px;
    line-height: 20px
}

.s300-label,
.s400-label {
    font-weight: 700;
    font-style: normal;
    letter-spacing: -.04em
}

.s400-label {
    font-size: 13px;
    line-height: 16px
}

.device-icon-container {
    min-width: 82px;
    width: 82px;
    display: flex;
    justify-content: center;
    align-items: center
}

.device-link-container {
    width: 35px;
    height: 35px;
    background: var(--light-accent-color);
    box-shadow: 0 0 10px rgba(110, 135, 171, .25)
}

.device-link-container,
.device-linked-profile {
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center
}

.device-linked-profile {
    position: absolute;
    right: 0;
    width: 25px;
    height: 25px;
    background: var(--green-200);
    overflow: hidden;
    box-shadow: var(--container-box-shadow)
}

.inline-flex {
    display: flex;
    flex-direction: row
}

.username-chip-icon {
    width: 25px;
    height: 25px;
    background: var(--green-200);
    border-radius: 50%;
    margin-left: 5px;
    margin-right: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.device-container {
    position: relative;
    display: flex;
    justify-content: start;
    align-items: center;
    height: 50px
}

.device-title-container {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    position: relative;
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, var(--main-bg-color) 65%, transparent 83%);
    mask-image: linear-gradient(90deg, var(--main-bg-color) 65%, transparent 83%)
}

.device-icon-title-container {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    overflow-y: hidden
}

.card {
    width: 40px;
    height: 25px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s ease-out;
    box-shadow: var(--container-box-shadow);
    background: var(--device-background, #333);
    background-size: cover;
    background-position: 50%
}

.logoSVG1 {
    height: 25%;
    fill: var(--device-logo, #000)
}

.logoSVG1,
.logoSVG2 {
    width: auto;
    transition: .4s
}

.logoSVG2 {
    height: 40%;
    fill: var(--device-logo);
    margin-bottom: 1.5px
}

.ball {
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--container-box-shadow);
    background: var(--device-background, #333);
    background-size: cover;
    background-position: 50%
}

.ball1:before,
.ball:before {
    content: "";
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 0, #fff, hsla(0, 0%, 100%, 0) 58%);
    filter: blur(3px);
    z-index: 2
}

.stage {
    display: inline-block;
    -ms-perspective: 1200px;
    -o-perspective: 1200px;
    perspective: 1200px;
    -ms-perspective-origin: 50% 50%;
    -o-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%
}

.flat,
.stage {
    width: 35px;
    height: 35px
}

.flat {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--container-box-shadow);
    background: var(--device-background, #333);
    background-size: cover;
    background-position: 50%
}

.setup-page {
    position: relative
}

.setup-page-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1 !important
}

.preset-container {
    width: 100%;
    border-radius: 40px 40px 0 0;
    transition: var(--transition-ease);
    background-color: var(--main-bg-color);
    position: relative;
    z-index: 99 !important;
    margin-top: 15px
}

.preset-container:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    border-radius: inherit;
    box-shadow: var(--lightweight-menu-shadow)
}

@media (min-width:1024px) {
    .preset-container:before {
        box-shadow: var(--menu-shadow)
    }
}

.blur-background {
    height: 60px;
    width: 100%;
    z-index: 2;
    transform: translateY(-55px)
}

.preset-Selector-Container {
    width: 100%;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: row;
    gap: 8px
}

.preset-image-container {
    width: 35px;
    height: 35px;
    border-radius: 100%;
    transition: var(--transition-ease);
    margin-bottom: 4px;
    overflow: hidden
}

.preset-image-container.selected {
    width: 60px;
    height: 60px;
    margin-bottom: 0
}

.preset-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    display: block
}

.preset-image-container-icon {
    width: 47px;
    border-radius: 50%;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-100)
}

.right-preset {
    justify-content: left
}

.left-preset,
.right-preset {
    flex: 1 1;
    display: flex;
    gap: 8px
}

.left-preset {
    justify-content: right
}

.centered-preset {
    display: flex;
    justify-content: center;
    gap: 8px
}

.s50-label {
    font-weight: 700;
    font-size: 13px;
    line-height: 17px
}

.s100-label {
    font-weight: 800;
    font-size: 18px;
    line-height: 128.51%;
    letter-spacing: -.05em;
    color: var(--color-400)
}

.preset-input {
    font-family: Roboto;
    font-size: 24px;
    line-height: 28px;
    margin-right: 5px;
    padding: 1px 3px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--b100-text-color);
    border: 1.5px solid var(--container-background) !important;
    transition: all .2s ease;
    border-radius: 3px;
    background: var(--main-bg-color);
    transition: var(--transition-ease)
}

.preset-input:focus {
    border: 1.5px solid var(--b100-text-color) !important;
    outline: none;
    -webkit-mask-image: none;
    mask-image: none
}

.preset-input-div {
    border: 1.5px solid var(--container-background) !important;
    border-radius: 3px;
    transition: var(--transition-ease);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.preset-input-div:focus {
    border: 1.5px solid var(--b100-text-color) !important;
    outline: none;
    border-radius: 3px
}

.t200-label {
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 28px;
    color: var(--b100-text-color)
}

.preset-title {
    height: 46px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center
}

.image-upload-section {
    margin-bottom: 60px
}

.image-profile-section,
.image-upload-section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative
}

.image-profile-section {
    background-color: var(--container-background);
    border-radius: 15px;
    transition: var(--transition-ease)
}

.banner-upload {
    width: 100%;
    /* 修改banner高度 初始137px */
    height: 200px;
    border-radius: 15px;
    border: 2px solid var(--color-200);
    background: linear-gradient(180deg, var(--main-bg-color) 0, var(--a100-accent-color) 100%);
    overflow: hidden;
    position: relative
}

.banner-upload-skeleton {
    width: 100%;
    height: 137px;
    border-radius: 15px;
    border: 2px solid var(--sketelon-grey);
    background: linear-gradient(180deg, var(--sketelon-grey) 0, #d8dcdf 100%);
    margin: 0;
    padding: 0
}

.banner-image {
    object-fit: cover;
    width: 101%;
    height: 101%
}

.banner-profile {
    border-radius: 15px 15px 0 0;
    border: 2px solid var(--color-300);
    background: linear-gradient(180deg, var(--main-bg-color) 0, var(--a100-accent-color) 100%)
}

.profile-upload {
    bottom: -4px;
    background-color: var(--color-100)
}

.profile-upload,
.profile-upload-profile {
    width: 120px;
    height: 120px;
    position: absolute;
    border: 2px solid var(--color-200);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 15px
}

.profile-upload-profile {
    /* 初始25px */
    top: 88px
}

.profile-temp {
    opacity: 1;
    transition: all 1.5s linear
}

.temp-uploading {
    opacity: 0;
    filter: grayscale(100%)
}

.upload-icon {
    display: none;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--icon-background);
    box-shadow: var(--icon-box-shadow)
}

.banner-icon {
    right: 6px
}

.banner-icon,
.banner-icon-left {
    position: absolute;
    top: 105px;
    box-shadow: var(--icon-box-shadow)
}

.banner-icon-left {
    left: 6px
}

.profile-icon-right {
    left: 95px;
    right: 0
}

.profile-icon-left,
.profile-icon-right {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    bottom: -33px
}

.profile-icon-left {
    left: 0;
    right: 95px
}

.setup-contain {
    margin-top: 20px;
    background-color: var(--main-bg-color)
}

.setup-contain,
.setup-contain-style {
    margin-bottom: 20px;
    position: relative;
    width: 100%;
    border: 2px solid var(--color-200);
    padding: 20px 16px;
    border-radius: 15px;
    transition: var(--transition-ease)
}

.setup-contain-style {
    margin-top: 15px
}

.setup-label {
    position: absolute;
    top: -20px;
    background: var(--main-bg-color);
    padding: 6px;
    z-index: 1;
    transition: var(--transition-ease);
    border-radius: 10px
}

.expanding-input {
    border-radius: 103px;
    padding: 10px;
    height: 100%;
    border: none;
    background: var(--main-bg-color);
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    line-height: 21px;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none
}

.bio-container,
.expanding-input {
    width: 100%;
    transition: all .3s ease
}

.bio-container {
    display: flex;
    flex-direction: row;
    gap: 15px 8px;
    flex-wrap: wrap
}

.expanding-input:focus-visible {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none
}

.input-label-small-bio:after {
    content: attr(title);
    padding: 5px;
    background: var(--main-bg-color);
    height: 10px;
    transition: var(--transition-ease);
    z-index: -1
}

.input-label-small-bio,
.input-label-small-bio:after {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute
}

.input-label-small-bio {
    font-weight: 700;
    font-style: normal;
    font-size: 13px;
    line-height: 17px;
    color: var(--grey-200);
    z-index: 2;
    border-radius: 10px;
    width: 100px;
    flex-direction: row;
    top: -4px;
    left: 0;
    transform: translateY(5px);
    opacity: 0;
    transition: opacity .2s ease, transform .3s cubic-bezier(.24, -.04, 0, .61)
}

.onboarding-area-bio {
    transition: all .3s ease .3s;
    position: relative;
    border-radius: 103px;
    border: 1.5px solid #7b61ff;
    padding: auto;
    width: 100px
}

.onboarding-area-bio:hover {
    width: 100%
}

.expanding-input:not(:placeholder-shown)+.input-label-small-bio {
    opacity: 1;
    transform: translateY(0)
}

.chip-input-area {
    display: flex;
    flex-direction: row;
    gap: 8px 15px;
    flex-wrap: wrap
}

.link-outer-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 70px);
    justify-content: space-between;
    grid-gap: 5px;
    align-items: flex-start
}

.link-card,
.link-outer-container {
    transition: var(--transition-ease)
}

.link-card {
    width: 70px;
    height: 82px;
    display: flex;
    flex-direction: column;
    gap: 6.5px;
    box-shadow: var(--container-box-shadow);
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    z-index: 2;
    position: relative;
    background: var(--container-background)
}

.plus-card {
    transition: all .25s ease;
    transition-delay: .15s;
    fill: var(--icon-color)
}

.plus-card.close {
    transform: rotate(45deg);
    fill: var(--error-red)
}

.link-icon {
    width: 45px;
    height: 45px;
    border-radius: 100%;
    overflow: hidden;
    box-shadow: var(--container-box-shadow)
}

.color-row {
    display: flex;
    flex-direction: row
}

.color-row,
.color-row-grid {
    gap: 8px;
    box-shadow: var(--container-box-shadow);
    border-radius: 9px;
    width: 100%;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 10px 8px;
    background: var(--container-background);
    transition: var(--transition-ease)
}

.color-row-grid {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 8px
}

.theme-row-grid {
    grid-template-columns: repeat(3, 1fr)
}

.iconStyle-row-grid,
.theme-row-grid {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 8px;
    gap: 8px;
    box-shadow: var(--container-box-shadow);
    border-radius: 9px;
    width: 100%;
    align-items: center;
    position: relative;
    padding: 10px 8px;
    background: var(--container-background);
    transition: var(--transition-ease)
}

.iconStyle-row-grid {
    justify-content: center
}

.color-circle {
    width: 24px;
    height: 24px;
    background: var(--color-circle);
    transition: all .3s;
    position: relative;
    border-radius: 50%
}

.add-border.selected {
    border: 1px solid var(--color-300);
    transition: all .3s
}

.add-border {
    padding: 2px;
    border: 1px solid transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.add-border,
.icon-circle {
    transition: var(--transition-ease)
}

.icon-circle {
    border: 1.5px solid var(--main-bg-color)
}

.icon-circle:hover {
    border: 1.5px solid var(--b100-text-color)
}

.outer-radio-container {
    height: 35px;
    display: flex;
    flex-grow: 1;
    flex-basis: 50%;
    align-items: center;
    justify-content: center;
    border-style: solid;
    border-width: 1.5px;
    border-color: var(--radio-border);
    background: var(--radio-background);
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    padding: 5px 11px;
    transition: var(--transition-ease)
}

.outer-radio-container.selected,
.outer-radio-container:hover {
    border-color: var(--color-200)
}

.checkmark-theme {
    width: 12px;
    height: 12px;
    background-color: var(--check-color);
    border-width: 1.5px;
    border-style: solid;
    border-color: var(--radio-check-border);
    border-radius: 50%;
    margin-right: auto;
    transition: var(--transition-ease);
    display: flex;
    justify-content: center;
    align-items: center;
    fill-opacity: 0
}

.outer-radio-container.selected .checkmark-theme,
.outer-radio-container:hover .checkmark-theme {
    background-color: var(--color-200);
    border-color: var(--color-200);
    fill-opacity: 1
}

.checkmark-theme:after {
    content: "";
    display: none
}

.outer-radio-container .radio-btn {
    position: absolute;
    opacity: 0;
    cursor: pointer
}

.align-label {
    margin-right: auto;
    color: var(--radio-text)
}

.icon-color-style {
    display: flex;
    flex-direction: row
}

.icon-color-style,
.icon-color-style-grid {
    align-items: center;
    justify-content: center;
    gap: 5px
}

.icon-color-style-grid {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 5px
}

.style-divider {
    height: 12px;
    width: 1.5px;
    background: var(--color-200)
}

.slide-up-menu {
    max-width: 500px;
    z-index: 20;
    width: 100%;
    position: fixed;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    background: var(--main-bg-color);
    transition: var(--transition-ease);
    border-radius: 35px 35px 0 0;
    overflow-y: hidden
}

.background-blur {
    width: 100vw;
    height: 100vh;
    z-index: 7;
    position: fixed;
    top: 0;
    left: 0;
    background: var(--background-overlay);
    -webkit-backdrop-filter: blur(2.5px);
    backdrop-filter: blur(2.5px);
    transition: var(--transition-ease) !important
}

.slide-nib {
    width: 40px;
    height: 5px;
    background-color: var(--grey-100);
    position: absolute;
    text-align: center;
    border-radius: 30px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 15px;
    z-index: 10
}

.slide-up-inner {
    width: 100%;
    top: 0;
    height: 100%;
    overflow: scroll
}

.slide-up-inner,
.slide-up-inner-2 {
    position: relative;
    z-index: 5;
    touch-action: none
}

.slide-up-inner-2 {
    padding: 15px 20px 85px;
    overflow-y: hidden
}

.contact-card-inner {
    position: relative;
    padding: 15px 20px
}

.social-link-card {
    display: flex;
    flex-direction: column
}

.social-link-card,
.social-link-card-grid {
    z-index: 7;
    position: relative;
    box-shadow: var(--container-box-shadow);
    background: var(--container-background);
    border-radius: 15px;
    padding: 15px;
    gap: 15px;
    transition: var(--transition-ease);
    width: 100%
}

.social-link-card-grid {
    display: grid;
    grid-gap: 15px
}

.image-button-area {
    display: flex;
    align-items: flex-start;
    flex-direction: row
}

.button-area {
    display: flex;
    gap: 10px;
    width: 100%
}

.button-area-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    gap: 10px;
    width: 100%
}

.button-title-area {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 80px;
    padding-left: 15px;
    gap: 3px
}

.s500-label {
    font-weight: 700;
    font-style: normal;
    font-size: 22px;
    line-height: 27px;
    color: var(--b100-text-color);
    letter-spacing: -1px
}

.icon-80 {
    width: 80px;
    height: 80px
}

.icon-80,
.icon-80>svg {
    transition: var(--transition-ease)
}

.icon-80>svg {
    transform: scale(1.333)
}

.icon-80>.icon-mini {
    transform: scale(calc(1.333 * .65))
}

.icon-45,
.icon-80>.icon-mini {
    transition: var(--transition-ease)
}

.icon-45 {
    width: 45px;
    height: 45px
}

.icon-45>svg {
    transform: scale(.75)
}

.icon-45>.icon-mini,
.icon-45>svg {
    transition: var(--transition-ease)
}

.icon-45>.icon-mini {
    transform: scale(calc(.75 * .65))
}

.icon-50 {
    width: 50px;
    height: 50px
}

.icon-50,
.icon-50>svg {
    transition: var(--transition-ease)
}

.icon-50>svg {
    transform: scale(.83333)
}

.icon-50>.icon-mini {
    transform: scale(calc(.83333 * .65))
}

.icon-25,
.icon-50>.icon-mini {
    transition: var(--transition-ease)
}

.icon-25 {
    width: 25px;
    height: 25px
}

.icon-25>svg {
    transform: scale(.416)
}

.icon-25>.icon-mini,
.icon-25>svg {
    transition: var(--transition-ease)
}

.icon-25>.icon-mini {
    transform: scale(calc(.416 * .65))
}

.icon-36 {
    width: 36px;
    height: 36px
}

.icon-36,
.icon-36>svg {
    transition: var(--transition-ease)
}

.icon-36>svg {
    transform: scale(.598)
}

.icon-36>.icon-mini {
    transform: scale(calc(.598 * .65))
}

.icon-32,
.icon-36>.icon-mini {
    transition: var(--transition-ease)
}

.icon-32 {
    width: 36px;
    height: 36px
}

.icon-32>svg {
    transform: scale(.531)
}

.icon-32>.icon-mini,
.icon-32>svg {
    transition: var(--transition-ease)
}

.icon-32>.icon-mini {
    transform: scale(calc(.531 * .65))
}

.icon-background {
    box-shadow: var(--container-box-shadow);
    background: var(--icon-background);
    position: relative
}

.icon-background,
.icon-shape {
    transition: var(--transition-ease)
}

.icon-shape {
    border-radius: var(--icon-border-radius)
}

.icon-round {
    border-radius: 50%
}

.icon-round,
.icon-square {
    transition: var(--transition-ease)
}

.icon-square {
    border-radius: 20%
}

.svg-center {
    display: flex;
    justify-content: center;
    align-items: center
}

.delete-link {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 7px;
    border: 1.5px solid var(--error-red);
    padding: 10px 8px 10px 10px;
    background: none;
    transition: var(--transition-ease) !important;
    width: 100%;
    color: var(--error-red);
    box-shadow: none !important
}

button:disabled>svg>circle,
button:disabled>svg>path {
    stroke: var(--disabled-border)
}

button:disabled>div>div {
    opacity: .4
}

.delete-link:disabled {
    color: var(--disabled-border);
    background: var(--disabled-background);
    border: 1.5px solid var(--disabled-border)
}

.confirm {
    background: var(--error-red)
}

.confirm p {
    color: #fff
}

.success {
    background: var(--g-300)
}

.success p {
    color: #fff
}

.s500-label::placeholder {
    color: var(--b100-text-color) !important
}

.test-link {
    border-radius: 7px;
    border: 1.5px solid hsla(0, 0%, 100%, 0);
    padding: 10px 8px 10px 10px;
    background: var(--w-100) !important;
    box-shadow: none !important;
    width: 100%;
    color: var(--bright-50);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    transition: var(--transition-ease) !important
}

.test-link:disabled {
    color: var(--disabled-border);
    background: var(--disabled-background);
    border: 1.5px solid var(--disabled-border)
}

.confirm-crop {
    background: var(--bright-50);
    color: var(--dark-50);
    font-style: normal;
    font-weight: 800;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -.7px
}

.confirm-crop:hover {
    box-shadow: none;
    transform: scale(.97);
    box-shadow: var(--button-shadow-500)
}

.confirm-crop:active {
    transform: scale(.88);
    box-shadow: var(--button-shadow-cap)
}

.social-upload-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--icon-background);
    position: absolute;
    z-index: 8;
    left: 76px;
    top: 65px;
    box-shadow: var(--icon-shadow)
}

.social-link-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px
}

.social-link-container-grid {
    display: grid;
    width: 100%;
    margin-bottom: 40px
}

.contact-enabled-container {
    height: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px
}

.contact-enabled-container-grid {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(320px, 1fr);
    grid-gap: 10px;
    gap: 10px;
    margin-top: 20px
}

.contact-exchange-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 17px;
    margin-top: 20px
}

.s350-label {
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    line-height: 24px;
    color: var(--grey-100)
}

.add-link-container {
    width: 75%;
    margin: 0 auto;
    left: 0;
    right: 0;
    box-shadow: 0 0 20px rgba(110, 135, 171, .25);
    padding: 18px 30px;
    background: var(--main-bg-color);
    transition: var(--transition-ease);
    position: absolute;
    bottom: 40px;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 8
}

.link-indicator {
    position: absolute;
    height: 10px;
    width: 10px;
    background: var(--valid-green);
    border-radius: 50%;
    right: 4px;
    top: 4px;
    box-shadow: 0 0 5px var(--valid-green);
    z-index: 8
}

.svg-round-container {
    height: 18px;
    width: 18px;
    background: var(--svg-round-container);
    border-radius: 50%
}

.svg-round-container,
.top-nav {
    display: flex;
    align-items: center;
    justify-content: center
}

.top-nav {
    height: 50px;
    width: 100%;
    position: relative;
    transition: var(--transition-ease)
}

.toggle-area {
    position: absolute;
    right: 15px;
    top: 120px;
    display: flex;
    flex-direction: row;
    width: 125px;
    height: 30px;
    z-index: 5;
    box-shadow: var(--icon-box-shadow);
    border-radius: 7px
}

.toggle-left {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 7px 0 0 7px;
    width: 50%;
    color: var(--grey-200);
    will-change: outline, background, color;
    z-index: 5;
    position: relative;
    box-shadow: inset 0 -2px 0 var(--main-bg-color);
    background: var(--main-bg-color-70);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    cursor: default;
    overflow: hidden
}

.toggle-left:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--color-200);
    position: absolute;
    transition: all .1s linear;
    top: 0;
    left: 62.5px;
    box-shadow: inset 0 -2px 0 var(--color-300)
}

.toggle-left.selected:before {
    left: 0
}

.toggle-left p,
.toggle-right p {
    transition: all .1s linear
}

.toggle-left.selected p,
.toggle-right.selected p {
    color: #fff;
    z-index: 5
}

.toggle-right {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    border-radius: 0 7px 7px 0;
    color: var(--grey-200);
    transition: all .1s linear;
    will-change: outline, background, color;
    z-index: 5;
    position: relative;
    box-shadow: inset 0 -2px 0 var(--main-bg-color);
    background: var(--main-bg-color-70);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    cursor: default;
    overflow: hidden
}

.toggle-right:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--color-200);
    position: absolute;
    transition: all .1s linear;
    top: 0;
    right: 62.5px;
    box-shadow: inset 0 -2px 0 var(--color-300)
}

.toggle-right.selected:before {
    right: 0
}

.h300-label {
    font-weight: 800;
    font-size: var(--h300-label-font-size, 22px);
    line-height: 30px;
    color: var(--b100-text-color)
}

.h300-label.profile-fade {
    -webkit-mask-image: linear-gradient(90deg, var(--main-bg-color) 87%, transparent 100%);
    mask-image: linear-gradient(90deg, var(--main-bg-color) 87%, transparent 100%)
}

.h100-label {
    font-style: normal;
    font-weight: 600;
    line-height: 21px;
    letter-spacing: -.01em;
    color: var(--b200-text-color)
}

.h100-label.profile-fade {
    -webkit-mask-image: linear-gradient(90deg, var(--main-bg-color) 87%, transparent 100%);
    mask-image: linear-gradient(90deg, var(--main-bg-color) 87%, transparent 100%)
}

.h50-label {
    font-weight: 400;
    font-size: 13px;
    color: var(--b300-text-color);
    line-height: 121.51%
}

.text-area-profile {
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 5px 15px 12px;
    z-index: 2
}

.text-area-profile:before {
    content: "";
    box-shadow: var(--container-box-shadow);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    border-radius: 15px
}

.sub-bio-profile {
    padding: 3px 12px;
    margin-bottom: 10px;
    height: -moz-fit-content;
    height: fit-content;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, var(--main-bg-color) 87%, transparent 100%);
    mask-image: linear-gradient(90deg, var(--main-bg-color) 87%, transparent 100%)
}

.sub-bio-profile:before {
    content: "";
    width: 2px;
    height: 70%;
    top: 50%;
    transform: translateY(-50%);
    left: 5px;
    background: var(--color-100);
    position: absolute;
    border-radius: 50px
}

.button-bar-profile {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 0 15px;
    margin: 15px 0
}

.button-bar-profile-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 8px;
    gap: 8px;
    padding: 0 15px;
    margin: 15px 0
}

.button-bar-share-grid {
    width: 260px;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: 1fr auto;
    gap: 8px
}

.s600-label {
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: var(--bright-50);
    letter-spacing: -.7px
}

.s250-label {
    font-weight: 600;
    font-size: 13px;
    line-height: 172.01%
}

.outer-link-container {
    display: flex;
    flex-direction: row;
    height: 60px;
    width: 100%;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    padding-right: 20px;
    transition: var(--transition-ease)
}

.outer-link-container:before {
    content: "";
    background: var(--container-background);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 25px;
    right: 0;
    z-index: -1;
    border-radius: 10px;
    box-shadow: var(--container-box-shadow)
}

.outer-link-container-skeleton {
    display: flex;
    flex-direction: row;
    height: 60px;
    width: 100%;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    padding-right: 20px
}

.outer-link-container-skeleton:before {
    content: "";
    background: #e5e8ec;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 25px;
    right: 0;
    z-index: -1;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(110, 135, 171, .2)
}

.link-text-area {
    padding-left: 13px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, var(--main-bg-color) 65%, transparent 83%);
    mask-image: linear-gradient(90deg, var(--main-bg-color) 65%, transparent 83%)
}

.link-tile-drag {
    width: 25%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.link-arrow {
    margin-left: auto
}

.link-list-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 1;
    transition: var(--transition-ease)
}

.link-list-stack.setup-page {
    gap: 8px
}

.link-list-stack-grid {
    display: grid;
    grid-template-columns: minmax(100px, 1fr);
    grid-gap: 10px;
    gap: 10px;
    opacity: 1;
    transition: var(--transition-ease)
}

.link-list-stack-direct :nth-child(n+2) .outer-link-container {
    opacity: .5;
    transition: var(--transition-ease)
}

.link-list-stack-direct :first-child .outer-link-container:before,
.outer-link-container.direct-first:before {
    border: 3px solid var(--b-200);
    border-radius: 16px
}

.outer-link-container.direct-first:before {
    transition: all .2s ease-in
}

.outer-link-container.direct-rest {
    opacity: .5;
    transition: var(--transition-ease)
}

.m100-label {
    font-family: Arial;
    font-style: normal;
    font-weight: 900;
    font-size: 11px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--color-100)
}

.bottom-menu {
    width: 100%;
    max-width: 500px;
    padding: 10px 0;
    transition: var(--transition-ease);
    background: var(--container-background);
    border-radius: 25px 25px 0 0;
    z-index: 20;
    position: fixed;
    bottom: env(safe-area-inset-bottom);
    box-shadow: var(--bottom-menu-shadow)
}

.bottom-menu.hide-bottom-menu {
    transform: translateY(100%);
    opacity: 0
}

.bottom-menu-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Arial, Open Sans;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-100);
    max-width: 400px;
    margin: 0 auto;
    width: 85%
}

.bottom-menu-link {
    border-radius: 11px;
    text-decoration: none;
    color: inherit
}

.bottom-menu-icon {
    width: 64px;
    height: 64px;
    background: var(--container-background);
    border-radius: 11px;
    display: grid;
    justify-items: center;
    align-content: center;
    grid-gap: 8px;
    gap: 8px;
    position: relative;
    cursor: default
}

.bottom-menu-profile-icon-container {
    position: relative;
    overflow: unset
}

.bottom-menu-profile-icon-container img {
    border-radius: 50%;
    width: 47px;
    height: 47px;
    background: var(--color-100)
}

.bottom-menu-profile-icon-container:after {
    --border-width: 2px;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + var(--border-width) * 4);
    height: calc(100% + var(--border-width) * 4);
    border: var(--border-width) solid var(--icon-color);
    display: block;
    border-radius: 50%;
    transition: all .1s cubic-bezier(.46, .03, .52, .96)
}

.bottom-menu-profile-icon-container:hover:after {
    width: calc(100%);
    height: calc(100%)
}

.count-badge {
    position: absolute;
    background-color: var(--color-100);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 10px;
    left: calc(50% - 3px);
    transform: translateY(-40%);
    border: 1px solid var(--main-bg-color);
    color: var(--bright-50);
    transition: var(--transition-ease);
    font-weight: 600
}

.count-badge-visible {
    opacity: 1
}

.count-badge-hidden {
    opacity: 0
}

.image-border-switch {
    width: 60px;
    height: 60px;
    padding: 4px;
    border: 2.5px solid var(--color-200);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .1s cubic-bezier(.46, .03, .52, .96);
    will-change: width, height, padding;
    overflow: hidden
}

.image-border-switch:hover {
    padding: 0;
    width: 52px;
    height: 52px
}

.round-icon {
    position: absolute;
    background: var(--container-background);
    box-shadow: var(--container-box-shadow)
}

.crop-close-icon,
.round-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%
}

.crop-close-icon {
    z-index: 50;
    top: 30px;
    left: 24px;
    background-color: #fff
}

.modal-round-icon {
    position: absolute;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--container-background);
    box-shadow: var(--container-box-shadow);
    border-radius: 50%
}

.round-icon.modal-right {
    top: 12px;
    right: 12px;
    z-index: 6
}

.round-icon.right {
    right: -7.5px
}

.round-icon.left {
    left: -7.5px
}

.fade-icon {
    opacity: 1;
    transition: opacity .15s linear
}

.hide-round-icon {
    opacity: 0;
    pointer-events: none
}

.h150-label {
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 17px;
    color: var(--b100-text-color)
}

.logo-header-popup {
    margin-bottom: 3px;
    padding-top: 15px
}

.terms-serve {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px 12.5%;
    text-align: center
}

.s450-label {
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 21px
}

.preset-container-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    box-shadow: var(--container-box-shadow);
    border-radius: 11px;
    height: 90px;
    padding: 15px
}

.preset-image-container {
    width: 60px;
    height: 60px
}

.prest-text-button-area {
    display: flex;
    flex-direction: column;
    padding-left: 15px;
    gap: 5px;
    justify-content: center;
    align-items: flex-start
}

.textarea-preset {
    display: flex;
    flex-direction: row;
    gap: 3px;
    align-items: baseline
}

.button-bar-preset {
    display: flex;
    flex-direction: row;
    gap: 5px;
    width: 100%;
    justify-content: space-between
}

.direct-mode-button {
    transition: var(--transition-ease);
    opacity: 1
}

.direct-mode-button.visible {
    transition: var(--transition-ease);
    position: absolute
}

.direct-mode-button.invisible {
    transition: var(--transition-ease);
    opacity: 0 !important
}

.spacerD {
    width: 100%;
    min-height: 150px;
    position: relative;
    display: flex
}

.skeleton-flash {
    width: 100%;
    height: 100vh;
    position: fixed;
    background-color: var(--main-bg-color);
    z-index: 50;
    top: 0;
    animation-duration: 1.5s;
    transition: var(--transition-ease);
    animation-name: fadeIn;
    animation-iteration-count: infinite;
    animation-direction: alternate
}

.stacked-text-box {
    display: flex;
    flex-direction: column;
    gap: 13px
}

.stacked-text-box-grid {
    display: grid;
    grid-gap: 13px;
    gap: 13px
}

.text-check-circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.text-check-circle.green {
    background: var(--valid-green)
}

.skeleton-fadeout {
    width: 100%;
    height: 100vh;
    position: fixed;
    background-color: var(--main-bg-color);
    z-index: 50;
    top: 0;
    animation-name: fadeOut;
    animation-duration: .3s;
    animation-fill-mode: forwards
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.skills-submit {
    border: none;
    margin-right: 6px;
    min-height: 32px;
    min-width: 78px;
    border-radius: 5px;
    background: var(--ui-50);
    color: var(--b100-text-color);
    box-shadow: 0 0 20px 0 rgba(110, 135, 171, .15);
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    gap: 8px;
    right: 0
}

.settings-card,
.skills-submit {
    display: flex;
    align-items: center;
    position: absolute
}

.settings-card {
    flex-direction: row;
    padding: 12px 0 12px 15px;
    width: 325px;
    height: 59px;
    left: calc(50% - 325px / 2 + .92px);
    top: 107.96px;
    background: #fff;
    box-shadow: var(--container-box-shadow);
    border-radius: 14px
}

.setting-button-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 35px
}

.setting-button-list-grid {
    display: grid;
    flex-direction: column;
    grid-gap: 15px;
    gap: 15px;
    margin-top: 35px
}

.setting-button {
    position: relative;
    width: 100%;
    height: 60px;
    padding: 12px 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 14px;
    background: var(--container-background);
    box-shadow: var(--container-box-shadow)
}

.setting-button .device-toggle-container {
    position: absolute;
    right: 17px
}

.setting-button.logout {
    justify-content: center;
    margin-bottom: 10px
}

.icon-container-round {
    background: var(--disabled-border);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-right: 20px;
    display: flex;
    justify-content: center;
    align-items: center
}

.logout-position {
    position: fixed;
    width: 75%;
    bottom: 15%;
    margin: auto;
    left: 0;
    right: 0;
    text-align: center
}

.h300-label.sub-heading {
    letter-spacing: -.02em;
    font-size: 28px
}

.h300-label.heading {
    letter-spacing: -.02em;
    font-size: 35px
}

.username-edit-row {
    margin-top: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 53px
}

.username-edit-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47%;
    background: var(--container-background);
    box-shadow: var(--container-box-shadow);
    height: 100%;
    border-radius: 10px;
    gap: 3px
}

.activate-fixed-button {
    position: fixed;
    bottom: 100px;
    margin: 5% auto;
    width: 85%;
    max-width: 500px;
    left: 0;
    right: 0
}

.device-modal-fixed-button {
    position: fixed;
    bottom: 35px;
    margin: 5% auto;
    width: 90%;
    left: 0;
    right: 0;
    z-index: 20;
    max-width: 480px
}

.setup-subpage-fixed-container {
    position: fixed;
    margin: 0 auto;
    padding: 15px 0 50px;
    width: 90%;
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--main-bg-color-70);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    max-width: 500px;
    bottom: 0
}

.activate-fixed-loader {
    top: 500px
}

.activate-fixed-loader,
.activate-fixed-loader-modal {
    position: relative;
    margin: 0 50%;
    max-width: 500px;
    transition: var(--transition-ease)
}

.activate-fixed-loader-modal {
    bottom: 55px
}

.dot-flashing {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--color-200);
    color: var(--color-200);
    animation: dotFlashing 1s linear infinite alternate;
    animation-delay: .5s;
    transition: var(--transition-ease)
}

.dot-flashing:after,
.dot-flashing:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0
}

.dot-flashing:before {
    left: -15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--color-200);
    color: var(--color-200);
    animation: dotFlashing 1s infinite alternate;
    animation-delay: 0s
}

.dot-flashing:after {
    left: 15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    animation: dotFlashing 1s infinite alternate;
    animation-delay: 1s
}

@keyframes dotFlashing {
    0% {
        background-color: var(--color-200)
    }
    50%,
    to {
        background-color: #d3d3d3
    }
}

.qr-section {
    display: flex;
    flex-direction: column;
    margin: 15px auto;
    width: 260px;
    padding: 15px 15px 10px
}

.qr-section,
.qr-section-grid {
    gap: 10px;
    box-shadow: var(--container-box-shadow);
    border-radius: 12px;
    background-color: #fff;
    position: relative
}

.qr-section-grid {
    display: grid;
    grid-gap: 10px;
    margin: 0 auto;
    padding: 10px 15px
}

.qr-image-pos {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    background: var(--color-200);
    transform: scale(1);
    border: 3.75px solid #fff;
    width: 60px;
    height: 60px;
    top: 60px
}

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

.lottie-center {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100vh;
    overflow-y: hidden;
    overflow-x: hidden;
    touch-action: none;
    z-index: 99;
    background: var(--main-bg-color)
}

.lottie-center,
.outerLinkBox {
    display: flex;
    justify-content: center;
    align-items: center
}

.outerLinkBox {
    z-index: 0;
    position: relative;
    margin-top: 25px;
    margin-bottom: 15px
}

.LinksBox2 {
    background-color: v;
    width: 95%;
    border-radius: 20px;
    display: flex;
    text-align: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 10px;
    padding: 10px
}

.footerText {
    margin-bottom: 0;
    font-size: 12px;
    text-align: left;
    width: 236px
}

.footerText,
.inline-Flex {
    font-weight: 400;
    color: var(--b100-text-color)
}

.inline-Flex {
    font-size: 13px;
    line-height: 17px;
    align-items: baseline;
    display: flex;
    flex-direction: row
}

.SVG_Icon {
    margin-left: 5px;
    fill: var(--b100-text-color);
    width: 110px
}

.body-lock {
    height: 100%;
    overflow: hidden;
    touch-action: none
}

.error-page-message-position {
    position: absolute;
    text-align: center;
    margin: auto 20px;
    left: 0;
    right: 0;
    top: 40%
}

.notification-container {
    padding-block: 10px;
    position: fixed;
    top: 0;
    width: calc(100% - 20px);
    max-width: 480px;
    margin: 0 10px;
    z-index: 111;
    display: grid;
    grid-gap: 10px;
    gap: 10px
}

.notification-banner {
    box-shadow: var(--notification-banner-shadow);
    line-height: 20px;
    font-size: 14px;
    color: var(--grey-200);
    background: var(--banner-background);
    padding: 12px;
    display: grid;
    grid-gap: 10px;
    gap: 10px;
    border-radius: 10px;
    grid-template-columns: auto 1fr auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: var(--transition-ease)
}

.notification-banner.announcement {
    color: #737a83;
    background: var(--announcement-banner-background);
    -webkit-backdrop-filter: blur(2.5px);
    backdrop-filter: blur(2.5px);
    display: flex;
    flex-direction: column;
    padding: 9px 10px 15px
}

.notification-banner-content {
    display: grid;
    grid-gap: 5px;
    gap: 5px
}

.notification-banner.announcement .notification-banner-content {
    gap: 4px
}

.notification-banner-heading {
    color: var(--b100-text-color);
    align-self: center;
    font-weight: 700;
    font-size: 15px
}

.notification-banner.announcement .notification-banner-heading {
    font-size: 16px
}

.notification-banner-content>p {
    align-self: center;
    line-height: 142%;
    letter-spacing: -.3px
}

.notification-banner.announcement .notification-banner-content>p {
    font-size: 13px;
    width: 90%
}

.notification-banner strong {
    font-weight: 700;
    color: var(--b100-text-color)
}

.notification-banner.announcement strong {
    color: inherit
}

.notification-banner-icon-container {
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center
}

.notification-banner.announcement .notification-banner-icon-container {
    margin-left: 3px;
    min-width: 27px;
    min-height: 25px;
    background: #414141;
    border-radius: 5px;
    box-shadow: 0 7.349551200866699px 11.368075370788574px 0 rgba(110, 135, 171, .15), 0 1.1368075609207153px 0 0 #222
}

.notification-banner-close {
    height: 25px;
    width: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--banner-icon-box-shadow);
    background: var(--container-background);
    border-radius: 50%;
    border: none;
    cursor: pointer
}

.announcement-banner-header {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.announcement-banner-content-container {
    display: flex;
    gap: 14px
}

.textbox-overflow-fade-mask {
    -webkit-mask-image: linear-gradient(90deg, var(--main-bg-color) 85%, transparent 99%);
    mask-image: linear-gradient(90deg, var(--main-bg-color) 85%, transparent 99%)
}

.textbox-overflow-fade-mask:focus {
    -webkit-mask-image: none;
    mask-image: none
}

.modal-container {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    align-items: center;
    z-index: 110;
    transition: all .2s linear !important;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.modal-container::-webkit-scrollbar {
    display: none
}

.modal .header {
    padding: 0;
    background: var(--container-background)
}

.modal .header-content {
    margin: 0
}

.btn-group {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.btn-group.row {
    flex-direction: row
}

.two-col-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    height: 53px;
    margin-top: 10px
}

.two-col-grid-item {
    width: 100%;
    border-radius: 10px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: var(--container-background);
    box-shadow: var(--container-box-shadow)
}

.MainDevice-logo {
    height: 40vmin;
    pointer-events: none
}

@media (prefers-reduced-motion:no-preference) {
    .MainDevice-logo {
        animation: MainDevice-logo-spin 20s linear infinite
    }
}

.MainDevice-header {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: #fff;
    flex: 1 1
}

.MainDevice-link {
    color: #61dafb
}

#canvas-container {
    width: 100%;
    height: 50vh;
    overflow-y: hidden
}

@keyframes MainDevice-logo-spin {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

#upload-black {
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 1;
    transition: all .5s ease
}

.address-suggestions-ul {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    transition: var(--transition-ease);
    position: absolute;
    width: 100%;
    max-width: 500px;
    z-index: 100;
    padding: 10px;
    box-shadow: var(--container-box-shadow)
}

.address-suggestion {
    padding: 15px;
    border: 10px solid #fff;
    border-radius: 3%;
    cursor: default
}

.address-suggestion:hover {
    border: 10px solid var(--valid-green) !important;
    border-radius: 3%
}

.address-modal {
    position: absolute;
    top: 100px;
    background-color: var(--main-bg-color);
    width: 90%;
    max-width: 500px;
    border-radius: 15px;
    text-align: center
}

.modal-container-2 {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    align-items: center;
    z-index: 1100 !important;
    transition: background-color .2s linear 0s;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.modal-container-2::-webkit-scrollbar {
    display: none
}

.address-suggestion-input {
    transition: all .2s ease
}

.address-suggestion-input:focus-within {
    border-radius: 5px 5px 0 0
}

.address-suggestion-input .onboarding-text-felid {
    background: var(--container-background)
}

.banner-overlay {
    position: absolute;
    width: 120px;
    height: 120px;
    background-color: rgba(0, 0, 0, .2);
    z-index: 150;
    left: 35px;
    top: 50%;
    transform: translateY(-40px);
    border-radius: 50%;
    border: 2px solid #fff;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.slider-container {
    display: flex;
    position: relative;
    height: 6px
}

.slider {
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 100%;
    background: #f9fafb;
    outline: none;
    border-radius: 50em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    transform: scale(2);
    background: var(--color-200);
    border-radius: 50%
}

.slider::-moz-range-thumb {
    border: 0;
    width: 10px;
    height: 10px;
    transform: scale(2);
    background: var(--color-200);
    border-radius: 50%
}

.slider-fill {
    position: absolute;
    top: 0;
    left: -1px;
    height: 100%;
    background: var(--color-200);
    border-top-left-radius: 50em;
    border-bottom-left-radius: 50em;
    pointer-events: none
}

.backdrop {
    width: 100%;
    background: rgba(0, 0, 0, .7);
    z-index: 199
}

.backdrop,
.popup-container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center
}

.popup-container {
    right: 0;
    bottom: 0;
    z-index: 200
}

.popup {
    width: min(460px, 90%);
    height: 400px;
    opacity: 0;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.popup-content-container {
    height: 100%;
    border-radius: 15px;
    overflow: hidden
}

.popup-content {
    width: 100%;
    height: 100%;
    border: none;
    overflow: scroll;
    background: #fff
}

.popup-content .lottie-center {
    height: 100%
}

.dialog-container {
    position: relative;
    z-index: 110;
    width: 100%
}

.dialog-backdrop-blur {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--modal-overlay-bg);
    -webkit-backdrop-filter: blur(5.5px);
    backdrop-filter: blur(5.5px);
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1
}

.dialog {
    position: absolute;
    background: var(--main-bg-color);
    border-radius: 10px;
    width: 325px;
    display: flex;
    flex-direction: column;
    padding: 24px 16px;
    z-index: 1;
    box-shadow: 0 2.264400005340576px 6.430895805358887px 0 rgba(0, 0, 0, .04), 0 6.260776042938232px 17.780603408813477px 0 rgba(0, 0, 0, .07), 0 15.07353687286377px 42.808841705322266px 0 rgba(0, 0, 0, .1), 0 50px 142px 0 rgba(0, 0, 0, .15)
}

.dialog.pointer-top {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 16px
}

.dialog.pointer-bottom {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 16px
}

.dialog.pointer-left {
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: 16px
}

.dialog.pointer-right {
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    margin-right: 16px
}

.dialog.pointer-top .pointer {
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom: 10px solid var(--main-bg-color);
    border-top: 0;
    margin-left: -10px;
    margin-top: -9px
}

.checkbox-hide {
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

.checkbox-wrapper {
    width: 100%
}

.checkbox-label {
    width: 100%;
    display: grid;
    grid-gap: 14px;
    gap: 14px;
    grid-template-columns: auto 1fr;
    line-height: 20px;
    cursor: pointer;
    --webkit-tap-highlight-color: transparent
}

.checkbox-label-bold {
    font-weight: 700
}

.checkbox-custom {
    display: inline-block;
    height: 20px;
    width: 20px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #a8b7cd
}

.checkbox-custom.checked {
    border-color: var(--checkbox-bg-color);
    background: var(--checkbox-bg-color)
}

.dialog.pointer-bottom .pointer {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top: 10px solid var(--main-bg-color);
    border-bottom: 0;
    margin-left: -10px;
    margin-bottom: -9px
}

.dialog.pointer-left .pointer {
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right: 10px solid var(--main-bg-color);
    border-left: 0;
    margin-top: -10px;
    margin-left: -9px
}

.dialog.pointer-right .pointer {
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-left: 10px solid var(--main-bg-color);
    border-right: 0;
    margin-top: -10px;
    margin-right: -9px
}

.dialog-content {
    display: flex;
    flex-direction: column
}

.dialog-title {
    font-weight: 700;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: -.25px;
    color: var(--b100-text-color);
    margin: 0
}

.dialog-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    color: var(--dialog-text-content);
    margin-top: 8px;
    margin-bottom: 20px
}

.dialog-text strong {
    font-weight: 700;
    color: var(--b100-text-color)
}

.dialog-content button {
    align-self: center
}

.skill-chip {
    overflow: hidden
}

.skill-chip-text {
    font-size: 11px
}

.address-container,
.link-container {
    transform: translateZ(0)
}

.contact-card {
    width: 100%;
    border-radius: 10px;
    background-color: var(--secondary-bg-color);
    padding: 20px 15px;
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent
}

.contact-card-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.contact-card-name {
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -.01em;
    font-weight: 600;
    color: var(--b100-text-color);
    text-transform: capitalize
}

.contact-card-info {
    font-size: 12px;
    line-height: 16px;
    color: #9ea5af;
    margin-top: 9px
}

.contact-card-message-container {
    width: 99.9%;
    height: 40px;
    background-color: var(--text-bg-color);
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    margin-top: 11px
}

.contact-card-message {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    font-size: 12px;
    line-height: 16px;
    color: var(--b100-text-color);
    width: 100%
}

.chip-outer {
    border-radius: 10px;
    height: 20px;
    display: flex;
    width: max-content;
    align-items: center;
    padding: 0 8px
}

.chip-text {
    font-size: 10px;
    margin-left: 4px
}

.header {
    padding-block: 20px;
    background: var(--container-background);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%
}

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

.header-transparent {
    background: transparent
}

.header-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10
}

.header-content {
    display: grid;
    grid-gap: 20px;
    gap: 20px
}

.header-logo {
    display: flex;
    justify-content: center;
    background: transparent;
    border: 0;
    justify-self: center;
    cursor: pointer
}

.header-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-items: center;
    grid-gap: 15px;
    gap: 15px
}

.header-title {
    color: var(--b100-text-color);
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    letter-spacing: -.2px
}

.modal .header-title {
    letter-spacing: -.44px
}

.header-button {
    box-shadow: var(--box-shadow);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 0;
    background: var(--main-bg-color);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.header-transparent .header-button {
    box-shadow: var(--header-icon-shadow-200)
}

.header-button.hidden {
    pointer-events: none;
    opacity: 0
}

.map-switch-btn {
    height: 40px;
    width: 103px;
    background-color: #000;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
    border: none;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px
}

.map-switch-btn div {
    margin-left: 8px;
    line-height: 16px
}

.round-button-nav {
    height: 36px;
    width: 36px
}

.round-button-nav,
.round-button-popup {
    border: none;
    border-radius: 50%;
    background-color: var(--secondary-bg-color);
    box-shadow: var(--round-btn-shadow)
}

.round-button-popup {
    height: 30px;
    width: 30px
}

.round-button-popup svg {
    width: 12px
}

.selector-button {
    height: 36px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 600;
    background-color: var(--secondary-bg-color);
    box-shadow: var(--round-btn-shadow);
    color: var(--round-btn-icon-color)
}

.selector-button.selected-option {
    background-color: var(--b100-text-color);
    color: var(--selected-text);
    box-shadow: none
}

.selector-button svg {
    margin-right: 8px;
    width: 13px
}

.filter-chip {
    height: 28px;
    background-color: var(--b100-text-color);
    display: flex;
    color: var(--selected-text);
    width: -moz-fit-content;
    width: fit-content;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
    align-items: center;
    border-radius: 14px
}

.filter-chip span {
    margin-right: 8px
}

.text-link {
    font-weight: 600;
    font-size: 12px;
    color: var(--text-link);
    line-height: normal
}

.text-link svg {
    margin-left: 8px
}

.filter-button {
    height: 28px;
    background-color: var(--filter-inactive-color);
    box-shadow: var(--round-btn-shadow);
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 14px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
    align-items: center;
    color: var(--round-btn-icon-color);
    transition: all .2s linear
}

.filter-button span {
    margin-right: 8px
}

.filter-button svg path {
    fill: var(--round-btn-icon-color)
}

.filter-button.filter-button-active {
    background-color: var(--filter-active-color);
    color: var(--selected-text);
    box-shadow: none
}

.filter-button.filter-button-active svg path {
    fill: var(--selected-text)
}

.filter-button:active {
    background-color: var(--filter-button-pressed-color);
    color: var(--selected-text)
}

.filter-button:active svg path {
    fill: var(--selected-text)
}

.filter-svg-container {
    transition: all .2s linear
}

.filter-button.filter-button-active .filter-svg-container,
.filter-button:active .filter-svg-container {
    transform: rotate(180deg)
}

.dropdown-container {
    box-shadow: 0 0 20px 0 rgba(110, 135, 171, .15);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: -moz-fit-content;
    width: fit-content;
    width: 150px;
    background-color: var(--dropdown-background)
}

.dropdown-item {
    height: 52px;
    display: flex;
    align-items: center;
    padding-left: 18px;
    border-bottom: 1px solid var(--header-border-color);
    font-size: 14px;
    font-weight: 600;
    color: var(--b100-text-color)
}

.dropdown-item:last-of-type {
    border-bottom: none
}

.dropdown-item.highlight,
.dropdown-item:active {
    background-color: var(--color-200);
    color: var(--bright-50)
}

.dropdown-item-icon {
    margin-right: 18px
}

.dropdown-item.highlight .dropdown-item-icon path,
.dropdown-item:active .dropdown-item-icon path {
    fill: var(--bright-50)
}

.backdrop-blur {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px)
}

textarea.onboarding-text-felid {
    padding: 12px 0;
    resize: none;
    overflow: hidden;
    min-height: 46px
}

.onboarding-area.autosize {
    height: 100%;
    min-height: 50px
}

.picker-heading {
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -.02em
}

.picker-wrapper {
    margin-top: 30px
}

.picker-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 35px
}

.modal-header .header-button {
    width: 30px;
    height: 30px;
    background: var(--main-bg-color);
    box-shadow: var(--container-box-shadow)
}

.modal-divider {
    height: 2px;
    width: 100%;
    background: var(--contact-ui-divider);
    margin: 30px 0
}

.picker-container {
    font-family: SF Pro Display
}

.picker-container .picker-highlight {
    background: #f9fafb;
    z-index: -1;
    border-radius: 9px
}

.picker-container .picker-highlight:after,
.picker-container .picker-highlight:before {
    height: 0 !important
}

.picker-item {
    letter-spacing: 2.25px;
    font-size: 22px
}

.picker-container .picker-column {
    flex: none !important;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.picker-container .picker-column:nth-child(2) {
    margin-left: 20px;
    margin-right: 10px
}

.verify-age-form {
    display: grid;
    grid-gap: 15px;
    gap: 15px;
    margin-block: 10px
}

.verify-age-inputs {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr;
    grid-gap: 10px;
    gap: 10px
}

.verify-age-inputs .select-dropdown-container {
    background: var(--bright-50);
    border: 2px solid var(--b100-text-color)
}

.verify-age-inputs .select-dropdown-chevron {
    display: flex;
    top: 50%;
    transform: translateY(-50%);
    background: inherit;
    width: 20px;
    padding: 2.5px;
    right: 2.5px
}

.verify-age-inputs select {
    padding-left: 10px;
    padding-right: 10px
}

.verify-age-inputs option {
    color: var(--dark-200) !important
}

.verify-age-input-container {
    padding: 0;
    border: 0;
    height: auto
}

.verify-age-input {
    margin: 0;
    padding-left: 10px;
    padding-right: 5px;
    background: var(--bright-50);
    border-radius: 5px;
    border: 2px solid var(--b100-text-color);
    color: var(--bl-500)
}

.verify-age-input.input-error {
    border-color: var(--error-red)
}

.verify-age-form .error-text {
    color: var(--b100-text-color);
    font-weight: 700;
    margin-top: -5px;
    margin-bottom: -5px
}

.verify-email-content {
    display: grid;
    grid-gap: 15px;
    gap: 15px
}

.verify-email-link-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px
}

.verify-email-link {
    font-weight: 700;
    color: var(--b100-text-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: inherit
}

.auth-login-button {
    font-weight: 700;
    color: var(--color-200);
    text-align: center;
    font-size: 14px;
    padding: 13px 16px;
    cursor: pointer
}

.map-container {
    position: relative
}

.map-locate-me {
    top: 25px;
    right: 25px;
    position: absolute;
    z-index: 1;
    background: #fff;
    box-shadow: 0 0 20px rgba(110, 135, 171, .15);
    width: 35px;
    height: 35px;
    border-radius: 50%
}

.quick-action {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 90px;
    justify-content: center;
    align-items: center;
    background: var(--container-background);
    box-shadow: var(--quick-action-shadow);
    border-radius: 10px;
    color: var(--b100-text-color);
    font-size: 13px;
    position: relative;
    border: none;
    flex: 1 1;
    cursor: pointer;
    transition: all .3s ease
}

.quick-action:active {
    transform: scale(.92)
}

.quick-action-large {
    flex-direction: row;
    text-align: left;
    width: 100%;
    max-width: unset;
    padding: 16px;
    justify-content: start;
    align-items: start
}

.quick-action-icon {
    border-radius: 50%;
    min-width: 30px;
    min-height: 30px;
    max-width: 30px;
    max-height: 30px
}

.map-marker,
.quick-action-icon {
    display: flex;
    justify-content: center;
    align-items: center
}

.map-marker {
    width: 28px;
    height: 28px;
    background: #6a7c8b;
    border: 1px solid #fff;
    border-radius: 50%;
    color: #fff
}

.quick-action-content {
    display: flex;
    flex-direction: column;
    gap: 7px
}

.quick-action-heading {
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: -.13px
}

.quick-action-text,
.quick-action-text p {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: var(--b300-text-color)
}

.quick-action-text strong {
    font-weight: 600;
    color: var(--b100-text-color)
}

.quick-action-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(auto, 120px));
    grid-gap: 15px;
    gap: 15px;
    justify-content: space-between
}

.toggle-input {
    --input-width: 36px;
    --input-height: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: var(--input-width);
    height: var(--input-height);
    border-radius: var(--input-height);
    background: #e9e9eb;
    position: relative;
    cursor: pointer;
    transition: var(--transition-ease)
}

.toggle-input:checked {
    background: var(--color-200)
}

.toggle-input:disabled {
    opacity: .6
}

.toggle-input:before {
    --gap: 1px;
    --size: calc(var(--input-height) - 2 * (var(--gap)));
    content: "";
    background: #fff;
    box-shadow: 0 0 7px rgba(168, 183, 205, .65);
    border-radius: 50%;
    width: var(--size);
    height: var(--size);
    position: absolute;
    top: var(--gap);
    left: var(--gap);
    transition: var(--transition-ease)
}

.toggle-input:checked:before {
    left: calc(100% - var(--size) - var(--gap))
}

.contact-page .radio-input {
    margin-right: 20px
}

.radio-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border: 1px solid #a8b7cd;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: var(--transition-ease)
}

.radio-input:checked,
.radio-input:hover {
    border-color: var(--color-200)
}

.radio-input:before {
    content: "";
    background: var(--color-200);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    opacity: 0
}

.radio-input:checked:before {
    opacity: 1
}

.quick-tip {
    display: grid;
    grid-gap: 10px;
    gap: 10px;
    background: var(--container-background);
    box-shadow: var(--quick-tip-shadow);
    padding: 20px;
    border-radius: 10px;
    color: var(--b100-text-color);
    font-size: 12px;
    position: relative
}

.quick-tip-heading-container {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.quick-tip .header-button {
    position: absolute;
    right: 10px;
    top: 10px
}

.quick-tip-icon {
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center
}

.quick-tip-heading {
    font-weight: 700;
    font-size: 14px
}

.quick-tip-text,
.quick-tip-text p {
    line-height: normal;
    color: var(--b300-text-color)
}

.quick-tip-text strong {
    font-weight: 700;
    color: var(--b100-text-color)
}

.quick-tip-text-small {
    width: 70%
}

.quick-tip-image {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    height: 60%;
    max-height: 70px;
    display: flex
}

.quick-tip-read-more {
    text-decoration: none;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    color: inherit
}

.swiper-container {
    cursor: default;
    border-radius: 10px;
    max-width: 100%;
    position: relative;
    display: grid;
    grid-gap: 10px;
    gap: 10px
}

.swiper-container .swiper {
    padding: 20px;
    margin: -20px
}

.swiper-container-pagination {
    display: flex;
    justify-content: center;
    z-index: 2
}

.pagination-dot {
    width: 7.5px;
    height: 7.5px;
    margin: 2px 3px;
    border-radius: 50%;
    background: var(--grey-200)
}

.pagination-dot-active {
    background: var(--dark-50)
}

.textbox-container {
    background: var(--container-background);
    padding: 16px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden
}

.textbox-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 25px;
    margin-bottom: 20px
}

.textbox-heading {
    font-size: 14px;
    color: var(--b100-text-color);
    font-weight: 700
}

.textbox-edit-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--contact-ui-textbox-delete-btn);
    box-shadow: 0 0 20px rgba(110, 135, 171, .15);
    cursor: pointer
}

.activate-page {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    color: var(--b100-text-color);
    position: relative
}

.contact-settings-main {
    background-color: var(--page-bg);
    height: 100vh
}

.contact-settings-tiles-container {
    padding-top: 15px
}

.toggle-tile {
    display: flex;
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--container-box-shadow);
    padding: 16px 20px;
    justify-content: space-between;
    margin: 15px 25px;
    background: var(--secondary-bg-color)
}

.toggle-tile-info {
    width: 70%
}

.toggle-tile-title {
    color: var(--b100-text-color);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -.14px;
    margin-bottom: 4px
}

.toggle-tile-description {
    color: var(--grey-2009-ea-5-af-primary-text, #9ea5af);
    font-size: 12px;
    line-height: 133%
}

.activate-page-lottie-container {
    margin-top: 10px;
    margin-bottom: -2px;
    position: relative
}

.activate-page-lottie-container video {
    width: 100%;
    aspect-ratio: 1
}

.activate-page-lottie-container:after,
.activate-page-lottie-container:before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%
}

.activate-page-lottie-container:before {
    top: 0;
    height: 24px;
    background: linear-gradient(180deg, var(--main-bg-color) 0, hsla(0, 0%, 100%, 0) 100%);
    z-index: 2;
    transform: translateY(-20%)
}

.activate-page-lottie-container:after {
    bottom: 0;
    height: 98px;
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 55.26%, var(--main-bg-color) 83.65%);
    transform: translateY(20%)
}

.activate-page-heading {
    display: grid;
    grid-gap: 20px;
    gap: 20px;
    font-size: 14px
}

.activate-page-heading-title {
    color: var(--b100-text-color);
    font-weight: 700;
    font-size: 25px;
    line-height: 130%;
    letter-spacing: -.2px;
    margin: 0
}

.activate-page-heading-title-small {
    font-size: 18px;
    margin-bottom: -5px
}

.activate-page-heading .activate-page-heading-subtitle {
    color: var(--grey-200);
    font-size: 16px;
    line-height: 150%;
    margin-top: -15px
}

.activate-page-heading strong {
    color: var(--b100-text-color);
    font-weight: 700
}

.activate-page-heading p {
    line-height: 140%;
    color: var(--activate-page-heading-text-color)
}

.progress-bar-container {
    background: var(--progress-bar-bg);
    width: 100%;
    height: 7px;
    border-radius: 20px
}

.progress-bar-fill {
    background: var(--b100-text-color);
    width: 0;
    height: 100%;
    border-radius: inherit;
    transition: .4s ease;
    transition-delay: .1s
}

.activate-page-footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
    gap: 20px;
    align-items: center;
    justify-items: center;
    padding: 15px 20px 17px;
    border-top: 1px solid var(--header-border-color);
    background: var(--container-background)
}

.activate-page-footer-link {
    color: var(--b100-text-color);
    font-weight: 700;
    text-decoration: none;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer
}

.select-dot-device {
    display: grid;
    grid-gap: 40px;
    gap: 40px;
    padding-top: 25px;
    padding-bottom: 50px
}

.dot-device-image {
    height: 40px;
    object-fit: contain;
    justify-self: center
}

.select-dot-device-cards {
    display: grid;
    grid-gap: 10px;
    gap: 10px
}

.select-dot-device-card {
    height: 84px
}

.select-card {
    padding: 20px;
    box-shadow: var(--container-box-shadow);
    border-radius: 10px;
    display: grid;
    grid-template-columns: 50px 1fr auto;
    align-items: center;
    grid-gap: 20px;
    gap: 20px;
    border: 2px solid transparent;
    cursor: pointer;
    background: var(--container-background);
    -webkit-tap-highlight-color: transparent
}

.select-card-active {
    border-color: var(--b100-text-color)
}

.select-card-icon-container {
    display: flex;
    justify-content: center
}

.select-card-info {
    display: grid;
    grid-gap: 10px;
    gap: 10px
}

.select-card-title {
    color: var(--b100-text-color);
    font-weight: 600;
    font-size: 14px
}

.select-card-details {
    color: var(--grey-200);
    font-size: 12px
}

.select-card-check-container {
    opacity: 0;
    pointer-events: none
}

.select-card-check-active {
    opacity: 1
}

.walkthrough-welcome {
    display: grid;
    grid-gap: 30px;
    gap: 30px;
    padding-top: 25px;
    padding-bottom: 50px
}

.walkthrough-welcome-image {
    height: 275px;
    justify-self: center;
    object-fit: contain
}

.walkthrough-welcome-button-container {
    margin-top: 20px;
    display: grid;
    grid-gap: 15px;
    gap: 15px;
    text-align: center
}

.walkthrough-welcome-button-subtext {
    color: var(--theme-grey);
    font-size: 13px
}

.select-mobile-device {
    display: grid;
    grid-gap: 40px;
    gap: 40px;
    padding-bottom: 30px
}

.select-mobile-device-buttons {
    display: flex;
    justify-content: space-around
}

.select-button-container {
    display: grid;
    justify-items: center;
    grid-gap: 15px;
    gap: 15px
}

.select-button {
    border: 0;
    background: transparent;
    display: flex;
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.select-button-check {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.select-button-label {
    color: var(--grey-200);
    font-weight: 700;
    font-size: 14px
}

.select-button-label-active {
    color: var(--b100-text-color)
}

.select-iphone-version {
    display: grid;
    grid-gap: 40px;
    gap: 40px;
    padding-bottom: 30px
}

.select-iphone-version-cards {
    display: grid;
    grid-gap: 10px;
    gap: 10px;
    margin-bottom: 10px
}

.select-iphone-version-card {
    padding: 13px 20px 13px 10px
}

.enable-nfc {
    display: grid;
    grid-gap: 30px;
    gap: 30px;
    padding-bottom: 30px
}

.enable-nfc-icon-container {
    display: inline-flex;
    align-items: center;
    gap: 5px
}

.enable-nfc-image-container {
    background: var(--enable-nfc-image-bg);
    padding: 15px;
    border-radius: 20px
}

.enable-nfc-image {
    width: 100%;
    aspect-ratio: 1.4;
    object-fit: contain
}

.enable-nfc-buttons {
    display: grid;
    grid-gap: 10px;
    gap: 10px
}

.how-to-activate {
    display: grid;
    padding-bottom: 10px
}

.how-to-activate-buttons {
    display: grid;
    grid-gap: 10px;
    gap: 10px
}

.how-to-activate-band-image {
    margin-top: 25px;
    max-height: 400px
}

.activating {
    display: grid;
    grid-gap: 20px;
    gap: 20px;
    font-size: 14px;
    line-height: 20px;
    padding-bottom: 30px
}

.activating-top-android {
    display: grid;
    grid-gap: 25px;
    gap: 25px;
    justify-items: center
}

.activating-device-container-iphone {
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    display: grid;
    grid-gap: 40px;
    gap: 40px;
    justify-items: center;
    pointer-events: none
}

.activating-device-container-iphone svg {
    width: 100%;
    height: auto
}

.activating-device-label {
    display: grid;
    grid-template-columns: 18px auto;
    align-items: center;
    grid-gap: 8px;
    gap: 8px;
    white-space: nowrap;
    color: var(--grey-200);
    font-weight: 600
}

.activating-separator {
    height: 1px;
    width: 100%;
    background: var(--header-border-color)
}

.activating-bottom {
    display: grid;
    grid-gap: 15px;
    gap: 15px;
    position: relative
}

.activating-bottom-heading {
    text-transform: uppercase;
    color: var(--theme-grey);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    margin-top: 10px;
    margin-bottom: 10px
}

.troubleshoot-tapping {
    display: grid;
    grid-gap: 30px;
    gap: 30px;
    padding-top: 25px;
    padding-bottom: 30px
}

.troubleshoot-tapping-checklist-heading {
    font-size: 14px
}

.troubleshoot-tapping-checklist {
    display: grid;
    box-shadow: var(--container-box-shadow);
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--container-background)
}

.troubleshoot-tapping-checklist-item {
    padding-top: 14px;
    padding-bottom: 14px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 8px;
    gap: 8px;
    align-items: center;
    font-size: 14px;
    line-height: 18px
}

.troubleshoot-tapping-checklist-item:not(:first-of-type) {
    border-top: 1px solid var(--header-border-color)
}

.troubleshoot-tapping-buttons {
    display: grid;
    grid-gap: 10px;
    gap: 10px
}

.troubleshoot-tapping-link {
    text-decoration: none
}

.watch-tutorial {
    display: grid;
    grid-gap: 20px;
    gap: 20px;
    padding-top: 25px;
    padding-bottom: 30px
}

.watch-tutorial-video-container {
    position: relative;
    margin-top: -25px
}

.watch-tutorial-video {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9
}

.watch-tutorial-video iframe {
    height: calc(100% - .25px);
    -webkit-mask-image: radial-gradient(#fff, #000);
    mask-image: radial-gradient(#fff, #000);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.watch-tutorial-thumbnail-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--dark-200);
    z-index: 2;
    opacity: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition-delay: .2s
}

.watch-tutorial-thumbnail-visible {
    opacity: 1;
    transition-delay: 0s
}

.watch-tutorial-play-icon {
    width: 64px;
    height: 64px;
    position: absolute
}

.watch-tutorial-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.watch-tutorial-timestamps-container {
    display: grid;
    grid-gap: 15px;
    gap: 15px
}

.watch-tutorial-timestamps-heading {
    font-size: 14px;
    font-weight: 700
}

.watch-tutorial-timestamps {
    display: grid;
    grid-gap: 10px;
    gap: 10px;
    margin-bottom: 65px
}

.watch-tutorial-timestamp {
    display: grid;
    grid-template-columns: 45px 1fr;
    align-items: center;
    padding: 16px;
    border: 0;
    border-radius: 10px;
    background-color: var(--container-background);
    box-shadow: var(--container-box-shadow);
    color: var(--theme-grey);
    font-size: 14px;
    line-height: 24px;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.watch-tutorial-timestamp-active,
.watch-tutorial-timestamp-time {
    color: var(--b100-text-color);
    font-weight: 700
}

.fade-in-video {
    -webkit-mask-image: radial-gradient(#fff, #000);
    mask-image: radial-gradient(#fff, #000);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: opacity .5s ease-in-out
}

.search-input-container {
    position: relative
}

.search-input {
    width: 100%;
    outline: none;
    border: 1px solid hsla(0, 0%, 100%, 0);
    background-color: var(--search-bar-bg);
    border-radius: 10px;
    height: 45px;
    padding-left: 35px;
    display: flex;
    align-items: center;
    font-weight: 700;
    color: var(--search-bar-text);
    transition: all .1s linear;
    font-size: 16px
}

.search-input:not([value=""]) {
    padding-left: 14px
}

.search-input::placeholder {
    color: #9ea5af;
    font-size: 14px;
    font-weight: 400
}

.search-input:focus {
    border: 1px solid var(--b100-text-color);
    padding-left: 14px
}

.search-input-icon {
    left: 12px
}

.search-clear-icon,
.search-input-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex
}

.search-clear-icon {
    right: 10px;
    background-color: var(--search-clear-bg);
    width: 25px;
    height: 25px;
    border-radius: 50%;
    justify-content: center;
    align-items: center
}

.search-input-container:focus-within .search-input-icon {
    display: none
}

.redirect-page-text {
    position: absolute;
    top: 0;
    left: 0
}

.contact-page {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--contact-ui-bg);
    flex: 1 1
}

.contact-page input,
.contact-page textarea,
.modal input,
.modal textarea {
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -.25px;
    font-size: 16px;
    background: transparent;
    margin-right: 16px
}

.contact-page .input-label-small {
    background: var(--container-background)
}

.contact-page .onboarding-area,
.modal .onboarding-area {
    border-color: var(--b100-text-color)
}

.contact-page .header-right-button {
    background: var(--contact-ui-more-btn)
}

.contact-page-container {
    margin: 0 25px 25px
}

.reminder-page .contact-page-container {
    margin-top: 30px
}

.dropdown-wrapper {
    position: absolute;
    top: 80px;
    right: 20px;
    z-index: 1
}

.contact-section {
    padding: 25px 0 0;
    background: var(--contact-ui-bg);
    width: 100%;
    display: flex;
    flex-direction: column
}

.contact-page-notes .contact-section {
    padding: 25px 25px 0
}

.contact-page-notes .header-right-button {
    background: var();
    color: var()
}

.contact-page-edit .contact-section {
    margin-bottom: 15px
}

.contact-section-heading {
    color: var(--b100-text-color);
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: -.25px;
    margin-bottom: 20px
}

.contact-notes {
    display: flex;
    flex-direction: column;
    gap: 25px
}

.contact-note-header {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.contact-header-name {
    color: var(--b100-text-color);
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: -.2px;
    margin: 0 0 15px
}

.contact-page-notes .contact-header-name {
    text-align: left
}

.contact-header-date,
.contact-note-date {
    color: var(--contact-ui-section-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase
}

.contact-header>.contact-header-date {
    margin-bottom: 15px
}

.contact-note-content {
    display: flex;
    width: 100%;
    padding: 12px;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background: var(--contact-ui-note-bg);
    line-height: 16px;
    color: var(--contact-ui-note-text);
    text-align: center;
    font-size: 12px;
    margin-bottom: 15px
}

.contact-note-content:empty {
    display: none
}

.contact-note-edit-status {
    color: var(--contact-ui-section-heading);
    text-align: right;
    font-size: 12px;
    font-weight: 600
}

.contact-note-container {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.contact-note-container:last-child {
    margin-bottom: 14px
}

.contact-note-wrapper {
    background: #fff;
    padding: 16px;
    border-radius: 10px
}

.contact-page .contact-section:last-child,
.contact-page .contact-section:last-child .contact-fields {
    margin-bottom: 19px
}

.contact-fields {
    display: flex;
    padding: 15px;
    flex-direction: column;
    border-radius: 10px;
    background: var(--contact-ui-container-bg)
}

.contact-fields-group {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.contact-field-divider {
    height: 1px;
    background: var(--contact-ui-divider);
    width: 100%;
    margin: 10px 0
}

.contact-section:last-child .contact-field-divider {
    margin: 15px 0
}

.quick-action-columns {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    grid-column-gap: 9px;
    column-gap: 9px;
    margin-bottom: 14px
}

.quick-action-columns .quick-action:only-child {
    flex-direction: row;
    justify-content: start;
    padding-left: 16px;
    height: 62px
}

.quick-action-rows {
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 11px;
    row-gap: 11px;
    margin-bottom: 14px
}

.contact-page .big-button,
.modal .big-button {
    height: 44px;
    background: var(--contact-ui-add-note-btn);
    box-shadow: 0 2px 0 var(--ui-100), 0 1px 2px rgba(0, 0, 0, .03), 0 2px 4px rgba(0, 0, 0, .03), 0 4px 8px rgba(0, 0, 0, .03), 0 8px 16px rgba(0, 0, 0, .03), 0 16px 32px rgba(0, 0, 0, .03)
}

.contact-page .big-button.color-theme,
.modal .big-button.color-theme {
    box-shadow: var(--button-shadow-cap)
}

.contact-page .big-button h1,
.reminder-preview-section .big-button h1 {
    color: var(--b100-text-color);
    font-size: 14px;
    font-weight: 700;
    line-height: 16px
}

.contact-page .big-button.color-theme h1 {
    color: #fff
}

.save-note-button {
    position: -webkit-sticky;
    position: sticky;
    bottom: 35px;
    left: 0;
    margin-top: 25px;
    margin-bottom: 16px
}

.contact-page-edit .save-note-button {
    bottom: 15px
}

.save-note-button-text {
    color: #fff
}

.contact-page .text-link {
    margin-top: 16px;
    margin-left: auto
}

.autosize {
    height: auto
}

.modal-heading {
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 18px;
    color: var(--b100-text-color)
}

.modal-prompt {
    color: var(--contact-ui-text);
    font-size: 14px;
    margin: 15px 0 32px
}

.modal-prompt.center {
    text-align: center
}

.modal-prompt strong {
    font-weight: 700;
    color: var(--b200-text-color)
}

.reminder-note-modal .modal-prompt {
    text-align: left;
    line-height: 20px
}

.reminder-note-modal .btn-group {
    flex-direction: row
}

.big-button.outline {
    background: none;
    box-shadow: none;
    border: 1px solid #6a7c8b;
    height: 48px
}

.big-button.outline h1 {
    color: #6a7c8b
}

.meeting-time-field-group {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.meeting-time-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    padding: 10px 15px;
    border-radius: 5px;
    border: 1px solid var(--b100-text-color);
    background: transparent;
    color: var(--b100-text-color);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -.25px;
    width: 100%
}

.meeting-time-field>div>span:nth-child(2) {
    color: #6a7c8b;
    font-weight: 400
}

.meeting-time-field-group:nth-child(2) {
    margin-top: 46px;
    margin-bottom: 35px
}

.meeting-time-field-group:nth-child(3) {
    margin-bottom: 30px
}

.meeting-time-field-group label {
    text-align: left;
    color: var(--contact-ui-section-heading);
    font-size: 14px;
    font-weight: 700
}

.location-input-group {
    display: flex;
    flex-direction: column;
    gap: 25px
}

.location-input-group-row {
    display: flex;
    gap: 25px
}

.contact-field {
    display: flex;
    justify-content: space-between
}

.contact-field-label {
    color: var(--b100-text-color);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.14px
}

.contact-field-button,
.contact-field-value {
    width: 50%;
    color: var(--contact-ui-text);
    font-size: 12px
}

.contact-field-button {
    color: var(--b100-text-color);
    font-weight: 600;
    cursor: pointer
}

.personal-note {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px
}

.personal-note-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: var(--contact-ui-note-label);
    font-size: 12px;
    font-weight: 600
}

.personal-note-value {
    width: 100%;
    color: var(--contact-ui-personal-note-text);
    font-size: 14px;
    overflow-wrap: break-word
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px
}

.section-heading {
    color: var(--contact-ui-section-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    text-align: left
}

.modal .section-heading {
    margin-top: 30px
}

.reminder-page .header {
    padding-bottom: 36px
}

.reminder-page .quick-tip {
    margin-bottom: 30px
}

.reminder-page .contact-section:first-of-type {
    padding-top: 0
}

.reminder-page .contact-section:last-of-type {
    padding-top: 30px
}

.reminder-page .contact-fields {
    padding: 16px
}

.reminder-page .contact-field-divider {
    margin: 12px 0
}

.radio-field {
    display: flex;
    align-items: center
}

.radio-field-group {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.radio-field-icon {
    margin-right: 20px;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 193, 7, .2)
}

.radio-field-label {
    color: var(--b100-text-color);
    font-size: 14px;
    font-weight: 700
}

.radio-field-value {
    color: var(--contact-ui-text);
    font-size: 12px;
    font-weight: 400
}

.radio-field-chevron {
    margin-left: auto
}

.contact-fields.reminder-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    color: var(--contact-ui-text);
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 40px
}

.timezone {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 600px;
    margin-top: 11px;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.timezone::-webkit-scrollbar {
    display: none
}

.timezone+.modal-divider {
    margin-top: 0
}

.timezone-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-radius: 9px;
    color: #6a7c8b;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.timezone-item.selected {
    background: #f9fafb;
    color: #3d4145;
    font-weight: 700
}

.timezone-item input[type=radio] {
    visibility: hidden
}

.reminder-preview-section:nth-child(3) {
    margin-bottom: 26px
}

.reminder-preview-section:nth-child(3) .section-header {
    margin-bottom: 20px
}

.reminder-preview-section .contact-fields {
    border-radius: 8px;
    border: 1px solid #e3eaed
}

.reminder-preview-section .reminder-field {
    display: flex;
    align-items: center;
    font-size: 12px;
    text-align: left;
    line-height: normal
}

.reminder-preview-section .reminder-field span:first-child {
    color: var(--b100-text-color);
    font-weight: 700;
    letter-spacing: -.12px;
    width: 50%
}

.reminder-preview-section .reminder-field span:last-child {
    color: var(--contact-ui-text);
    font-weight: 400;
    width: 50%
}

.reminder-preview-section .reminder-field span:only-child {
    width: 100%
}

.reminder-preview-section .contact-field-divider {
    margin: 16px 0
}

.scheduled {
    display: flex;
    height: 73px;
    padding: 16px;
    border-radius: 10px;
    background: var(--container-background)
}

.scheduled-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 193, 7, .2);
    height: 30px;
    width: 30px;
    margin-right: 12px
}

.scheduled-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: center
}

.scheduled-text h3 {
    color: var(--b100-text-color);
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: -.13px
}

.scheduled-text span {
    color: var(--contact-ui-text);
    font-size: 12px;
    font-weight: 400
}

.scheduled-chevron {
    margin-left: auto;
    align-self: center
}

.contacts-page {
    display: grid;
    grid-template-rows: auto 1fr;
    background: var(--page-bg);
    flex: 1 1
}

.contacts-page-content {
    display: grid;
    grid-gap: 30px;
    gap: 30px;
    padding-top: 25px;
    padding-bottom: 50px;
    align-content: flex-start
}

.contacts-page-empty {
    display: grid;
    grid-gap: 25px;
    gap: 25px;
    justify-items: center;
    padding: 114px 20px 20px
}

.contacts-page-empty-content {
    display: grid;
    grid-gap: 20px;
    gap: 20px
}

.contacts-page-empty-text {
    color: var(--empty-contacts-text-color);
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    max-width: 300px
}

.contacts-page-link {
    justify-self: right
}

.page-section {
    display: grid;
    grid-gap: 12px;
    gap: 12px
}

.page-section-heading {
    color: var(--section-heading-color);
    font-size: 12px;
    font-weight: 600
}

.page-section-heading-light {
    font-weight: 300;
    margin-left: 3px
}

.page-section-cards {
    display: grid;
    grid-gap: 10px;
    gap: 10px
}

.arrow-link {
    font-weight: 700;
    font-size: 12px;
    color: var(--b100-text-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px
}

.recent-contacts-page {
    display: grid;
    min-height: 100vh;
    grid-template-rows: auto 1fr;
    background: var(--page-bg)
}

.recent-contacts-page-content {
    display: grid;
    grid-gap: 30px;
    gap: 30px;
    padding-top: 25px;
    padding-bottom: 50px;
    align-content: flex-start
}

.exchange-contact-form {
    display: grid;
    grid-gap: 32px;
    gap: 32px;
    margin-top: 20px;
    margin-bottom: 20px
}

.exchange-contact-prompt {
    margin-bottom: 5px
}

.exchange-contact-input-group {
    display: grid;
    grid-gap: 35px;
    gap: 35px
}

.exchange-contact-form .exchange-contact-input {
    font-weight: 700;
    font-size: 16px
}

.exchange-contact-input+label {
    letter-spacing: unset
}

.exchange-contact-submit-container {
    display: grid;
    grid-gap: 25px;
    gap: 25px
}

.exchange-contact-checkbox-label {
    font-size: 13px
}

.exchange-contact-checkbox-label strong {
    color: inherit
}

@media (min-width:423px) {
    .exchange-contact-checkbox-label {
        align-self: center
    }
}

.save-contact-tip-modal .header-row {
    align-items: flex-end
}

.save-contact-tip-highlight {
    color: #007aff
}

.save-contact-tip-image {
    width: 100%;
    aspect-ratio: 1.675;
    background: var(--w-50);
    border-radius: 20px
}

.save-contact-tip-button {
    gap: 6px
}

.exchange-location-heading {
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 22px
}

.exchange-location-prompt {
    margin-bottom: 35px
}

.exchange-modal {
    color: var(--exchange-modal-text-color);
    font-size: 14px;
    line-height: 20px
}

.exchange-modal strong {
    font-weight: 700;
    color: var(--b100-text-color)
}

.modal .exchange-modal-btn {
    height: 50px
}

.exchange-modal-btn:disabled {
    box-shadow: none !important
}

.textbox-container .onboarding-text-felid:disabled {
    opacity: 1
}

.textbox-container.disabled .onboarding-text-felid::placeholder {
    color: transparent
}

.textbox-container .button-group {
    display: flex;
    gap: 17px;
    margin-top: 20px
}

.add-note-button {
    z-index: 0
}

.add-note-button-text {
    letter-spacing: 0
}

.auth-profile-header {
    padding-top: 12px;
    padding-bottom: 12px
}

.auth-profile-header .header-button {
    box-shadow: var(--container-box-shadow);
    background: var(--container-background)
}

.show-password-toggle {
    cursor: pointer
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 400;
    src: local(OpenSans-Regular), url(/static/fonts/OpenSans-Regular.ttf) format("truetype");
    font-display: fallback
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 300;
    src: local(OpenSans-Light), url(/static/fonts/OpenSans-Light.ttf) format("truetype");
    font-display: fallback
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 500;
    src: local(OpenSans-Medium), url(/static/fonts/OpenSans-Medium.ttf) format("truetype");
    font-display: fallback
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 600;
    src: local(OpenSans-SemiBold), url(/static/fonts/OpenSans-SemiBold.ttf) format("truetype");
    font-display: fallback
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 700;
    src: local(OpenSans-Bold), url(/static/fonts/OpenSans-Bold.ttf) format("truetype");
    font-display: fallback
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 800;
    src: local(OpenSans-ExtraBold), url(/static/fonts/OpenSans-ExtraBold.ttf) format("truetype");
    font-display: fallback
}

@font-face {
    font-family: Open Sans Light;
    font-style: normal;
    font-weight: 300;
    src: local(OpenSans-Light), url(/static/fonts/OpenSans-Light.ttf) format("truetype");
    font-display: fallback
}

@font-face {
    font-family: Open Sans Medium;
    font-style: normal;
    font-weight: 500;
    src: local(OpenSans-Medium), url(/static/fonts/OpenSans-Medium.ttf) format("truetype");
    font-display: fallback
}

@font-face {
    font-family: Open Sans SemiBold;
    font-style: normal;
    font-weight: 600;
    src: local(OpenSans-SemiBold), url(/static/fonts/OpenSans-SemiBold.ttf) format("truetype");
    font-display: fallback
}

@font-face {
    font-family: Open Sans Bold;
    font-style: normal;
    font-weight: 700;
    src: local(OpenSans-Bold), url(/static/fonts/OpenSans-Bold.ttf) format("truetype");
    font-display: fallback
}

@font-face {
    font-family: Open Sans ExtraBold;
    font-style: normal;
    font-weight: 800;
    src: local(OpenSans-ExtraBold), url(/static/fonts/OpenSans-ExtraBold.ttf) format("truetype");
    font-display: fallback
}

@font-face {
    font-family: SF Pro Display;
    font-style: normal;
    font-weight: 400;
    src: local(SFProDisplay-Regular), url(/static/fonts/SFProDisplay-Regular.ttf) format("truetype");
    font-display: fallback
}

@font-face {
    font-family: Erbos Draco\ 1st Open NBP;
    font-style: normal;
    font-weight: 400;
    src: local(Erbos Draco 1st Open NBP), url(/static/fonts/Erbos.otf) format("opentype");
    font-display: fallback
}

html {
    font-family: Open Sans, Arial;
    margin-left: calc(100vw - 100%);
    margin-right: 0
}

input {
    font-family: inherit
}

button {
    background-color: transparent;
    border: none;
    margin: 0;
    padding: 0;
    text-align: inherit;
    font: inherit;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer
}

a {
    text-decoration: none
}

.st0 {
    fill: #a6a6a6
}

.st1 {
    fill: #dedbce
}

.st1,
.st2 {
    -webkit-clip-path: url(#SVGID_2_);
    clip-path: url(#SVGID_2_)
}

.st2 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #40a5d9
}

.st3 {
    -webkit-clip-path: url(#SVGID_2_);
    clip-path: url(#SVGID_2_)
}

.st4 {
    fill-rule: evenodd;
    fill: #ffb003
}

.st4,
.st5 {
    clip-rule: evenodd
}

.st5 {
    fill-rule: evenodd;
    fill: #40c740
}

.st6 {
    fill-rule: evenodd;
    fill: #f26d5f
}

.st6,
.st7 {
    clip-rule: evenodd
}

.st7 {
    -webkit-clip-path: url(#SVGID_2_);
    clip-path: url(#SVGID_2_);
    fill-rule: evenodd;
    fill: #d9d6cc
}

.st8 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #dedbce
}

.st9 {
    fill: #fff
}