/* ==========================================================================
   Design tokens (MOSC-424). Named values only; introducing this layer
   changed no computed value. Names follow the Linear document "Design token
   schema, for the Figma variable pass"; where that document and this file
   disagreed, this file's values won and the document was corrected.
   --legacy-* tokens are stylesheet values the schema does not name yet; the
   restyle pass renames or merges them. Tokens marked "unreferenced" are
   declared from the schema for the restyle and are not used by any rule.
   ========================================================================== */
:root {
    /* greys */
    --grey-000: #FFFFFF;
    --grey-050: #F6F7F9;
    --grey-100: #EBEEF4;
    --grey-100-a40: rgba(235, 238, 244, 0.4);
    --grey-100-a75: rgba(235, 238, 244, 0.75);
    --grey-300: #C5CFDE;
    --grey-500: #B1B9C9;
    --grey-700: #545F71;
    --grey-900: #111827;

    /* ink */
    --text-primary: var(--grey-900);
    --surface-inverse: #141417; /* unreferenced */

    /* accent */
    --accent-primary: #6E56CF;
    --accent-subtle: #F2EFFE; /* unreferenced */

    /* status (member pair is live; the rest unreferenced) */
    --status-member-bg: #FEF3C7;
    --status-member-text: #92400E;
    --status-pending-bg: #F2EFFE; /* unreferenced */
    --status-pending-text: #6E56CF; /* unreferenced */
    --status-associate-bg: #F4F6F9; /* unreferenced */
    --status-associate-text: #545E70; /* unreferenced */
    --status-suspended-bg: #FEECEC; /* unreferenced */
    --status-suspended-text: #992E2E; /* unreferenced */

    /* seal */
    --seal-creator: #FFC607; /* unreferenced */
    --seal-brand: var(--accent-primary); /* unreferenced */

    /* type */
    --font-display: "PP Writer", serif;
    --font-body: "Inter", sans-serif;

    /* legacy values the schema does not name; restyle merges or renames */
    --legacy-f9f9fa: #F9F9FA;
    --legacy-fcfcfd: #FCFCFD;
    --legacy-35455a: #35455A;
    --legacy-545e70: #545e70; /* one use; near-duplicate of --grey-700 */
    --legacy-c4cfde: #c4cfde; /* one use; probable typo of --grey-300 */
    --legacy-6366f1: #6366F1;
    --legacy-ece7fd: #ECE7FD;
    --legacy-c0b0fa: #c0b0fa;
    --legacy-a2cbaa: #a2cbaa;
    --legacy-c6deca: #C6DECA;
    --legacy-ffd1a7: #FFD1A7;
    --legacy-ffbd81: #ffbd81;
    --legacy-ffc2c2: #FFC2C2;
    --legacy-ff9c9c: #ff9c9c;
    --legacy-ff6868: #FF6868;
    --legacy-d7373f: #d7373f;
    --legacy-f3f4f6: #F3F4F6;
    --legacy-e5e7eb: #E5E7EB;
    --legacy-9ca3af: #9CA3AF;
    --legacy-374151: #374151;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */


/* stylelint-disable */


/* Document
========================================================================== */


/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/

* {
    box-sizing: border-box;
}

html {
    line-height: 1.15;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}


/* Sections
========================================================================== */


/**
* Remove the margin in all browsers.
*/

body {
    margin: 0;
}


/**
* Render the `main` element consistently in IE.
*/

main {
    display: block;
}


/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/

h1 {
    margin: 0.67em 0;
    font-size: 2em;
}


/* Grouping content
========================================================================== */


/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/

hr {
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */
    box-sizing: content-box;
    /* 1 */
}


/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/

pre {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}


/* Text-level semantics
========================================================================== */


/**
* Remove the gray background on active links in IE 10.
*/

a {
    background-color: transparent;
}


/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/

abbr[title] {
    border-bottom: 0;
    /* 1 */
    text-decoration: underline;
    /* 2 */
    text-decoration: underline dotted;
    /* 2 */
}


/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/

b,
strong {
    font-weight: bolder;
}


/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}


/**
* Add the correct font size in all browsers.
*/

small {
    font-size: 80%;
}


/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/

sub,
sup {
    position: relative;
    vertical-align: baseline;
    line-height: 0;
    font-size: 75%;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}


/* Embedded content
========================================================================== */


/**
* Remove the border on images inside links in IE 10.
*/

img {
    border-style: none;
}


/* Forms
========================================================================== */


/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/

button,
.btn,
input,
optgroup,
select,
textarea {
    margin: 0;
    /* 2 */
    line-height: 1.15;
    /* 1 */
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
}


/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/

button,
.btn,
input {
    overflow: visible;
    /* 1 */
}


/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/

button,
.btn,
select {
    text-transform: none;
    /* 1 */
}


/**
* Correct the inability to style clickable types in iOS and Safari.
*/

button,
.btn,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}


/**
* Remove the inner border and padding in Firefox.
*/

button::-moz-focus-inner,
.btn::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}


/**
* Restore the focus styles unset by the previous rule.
*/

button:-moz-focusring,
.btn:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}


/**
* Correct the padding in Firefox.
*/

fieldset {
    padding: 0.35em 0.75em 0.625em;
}


/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
*    `fieldset` elements in all browsers.
*/

legend {
    display: table;
    /* 1 */
    padding: 0;
    /* 3 */
    max-width: 100%;
    /* 1 */
    white-space: normal;
    /* 1 */
    color: inherit;
    /* 2 */
    box-sizing: border-box;
    /* 1 */
}


/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/

progress {
    vertical-align: baseline;
}


/**
* Remove the default vertical scrollbar in IE 10+.
*/

textarea {
    overflow: auto;
}


/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/

[type="checkbox"],
[type="radio"] {
    padding: 0;
    /* 2 */
    margin-right: 10px;
    box-sizing: border-box;
    /* 1 */
}


/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}


/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/

[type="search"] {
    outline-offset: -2px;
    /* 2 */
    -webkit-appearance: textfield;
    /* 1 */
}


/**
* Remove the inner padding in Chrome and Safari on macOS.
*/

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}


/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
    font: inherit;
    /* 2 */
    -webkit-appearance: button;
    /* 1 */
}


/* Interactive
========================================================================== */


/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/

details {
    display: block;
}


/*
* Add the correct display in all browsers.
*/

summary {
    display: list-item;
}


/* Misc
========================================================================== */


/**
* Add the correct display in IE 10+.
*/

template {
    display: none;
}


/**
* Add the correct display in IE 10.
*/

[hidden] {
    display: none;
}


/* stylelint-enable */

.display--block {
    display: block;
}

.display--inline {
    display: inline;
}

.display--inline-block {
    display: inline-block;
}

.display--none {
    display: none;
}

.hidden {
    display: none !important;
}

@media (max-width: 768px) {
    .hidden--mobile {
        display: none !important;
    }
}

.hoverable:hover,
.page-banner .cancel-icon:hover,
.block:hover {
    cursor: pointer;
}

.not-allowed:hover {
    cursor: not-allowed;
}

.flex {
    display: flex;
}

@media (max-width: 767px) {
    .flex {
        flex-wrap: wrap;
    }
}

.flex--column {
    flex-direction: column;
}

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

@media (max-width: 767px) {
    .flex--column-mobile {
        flex-direction: column;
    }
}

.flex--wrap {
    flex-wrap: wrap;
}

.flex--no-wrap {
    flex-wrap: nowrap;
}

.flex--grow {
    flex-grow: 2 !important;
}

.flex--full-width {
    width: 100%;
}

.flex--full-height {
    height: 100%;
}

.justify--start {
    justify-content: flex-start;
}

.justify--center {
    justify-content: center;
}

.justify--end {
    justify-content: flex-end;
}

.justify--around {
    justify-content: space-around;
}

.justify--between {
    justify-content: space-between;
}

.align--start {
    align-items: flex-start;
}

.align--center {
    align-items: center;
}

.align--end {
    align-items: flex-end;
}

.align--stretch {
    align-items: stretch;
}

.align--baseline {
    align-items: baseline;
}

.align-self--start {
    align-self: flex-start;
}

.align-self--center {
    align-self: center;
}

.align-self--end {
    align-self: flex-end;
}

.align-self--stretch {
    align-self: stretch;
}

.grid {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr;
}

.margin-0 {
    margin: 0rem !important;
}

.margin-top-0 {
    margin-top: 0rem !important;
}

.margin-right-0 {
    margin-right: 0rem !important;
}

.margin-bottom-0 {
    margin-bottom: 0rem !important;
}

.margin-left-0 {
    margin-left: 0rem !important;
}

.margin-1 {
    margin: 0.25rem !important;
}

.margin-top-1 {
    margin-top: 0.25rem !important;
}

.margin-right-1 {
    margin-right: 0.25rem !important;
}

.margin-bottom-1 {
    margin-bottom: 0.25rem !important;
}

.margin-left-1 {
    margin-left: 0.25rem !important;
}

.margin-2 {
    margin: 0.5rem !important;
}

.margin-top-2 {
    margin-top: 0.5rem !important;
}

.margin-right-2 {
    margin-right: 0.5rem !important;
}

.margin-bottom-2 {
    margin-bottom: 0.5rem !important;
}

.margin-left-2 {
    margin-left: 0.5rem !important;
}

.margin-3 {
    margin: 0.75rem !important;
}

.margin-top-3 {
    margin-top: 0.75rem !important;
}

.margin-right-3 {
    margin-right: 0.75rem !important;
}

.margin-bottom-3 {
    margin-bottom: 0.75rem !important;
}

.margin-left-3 {
    margin-left: 0.75rem !important;
}

.margin-4 {
    margin: 1rem !important;
}

.margin-top-4 {
    margin-top: 1rem !important;
}

.margin-right-4 {
    margin-right: 1rem !important;
}

.margin-bottom-4 {
    margin-bottom: 1rem !important;
}

.margin-left-4 {
    margin-left: 1rem !important;
}

.margin-5 {
    margin: 1.25rem !important;
}

.margin-top-5 {
    margin-top: 1.25rem !important;
}

.margin-right-5 {
    margin-right: 1.25rem !important;
}

.margin-bottom-5 {
    margin-bottom: 1.25rem !important;
}

.margin-left-5 {
    margin-left: 1.25rem !important;
}

.margin-6 {
    margin: 1.5rem !important;
}

.margin-top-6 {
    margin-top: 1.5rem !important;
}

.margin-right-6 {
    margin-right: 1.5rem !important;
}

.margin-bottom-6 {
    margin-bottom: 1.5rem !important;
}

.margin-left-6 {
    margin-left: 1.5rem !important;
}

.margin-7 {
    margin: 1.75rem !important;
}

.margin-top-7 {
    margin-top: 1.75rem !important;
}

.margin-right-7 {
    margin-right: 1.75rem !important;
}

.margin-bottom-7 {
    margin-bottom: 1.75rem !important;
}

.margin-left-7 {
    margin-left: 1.75rem !important;
}

.margin-8 {
    margin: 2rem !important;
}

.margin-top-8 {
    margin-top: 2rem !important;
}

.margin-right-8 {
    margin-right: 2rem !important;
}

.margin-bottom-8 {
    margin-bottom: 2rem !important;
}

.margin-left-8 {
    margin-left: 2rem !important;
}

.margin-9 {
    margin: 2.25rem !important;
}

.margin-top-9 {
    margin-top: 2.25rem !important;
}

.margin-right-9 {
    margin-right: 2.25rem !important;
}

.margin-bottom-9 {
    margin-bottom: 2.25rem !important;
}

.margin-left-9 {
    margin-left: 2.25rem !important;
}

.margin-10 {
    margin: 2.5rem !important;
}

.margin-top-10 {
    margin-top: 2.5rem !important;
}

.margin-right-10 {
    margin-right: 2.5rem !important;
}

.margin-bottom-10 {
    margin-bottom: 2.5rem !important;
}

.margin-left-10 {
    margin-left: 2.5rem !important;
}

.margin-11 {
    margin: 2.75rem !important;
}

.margin-top-11 {
    margin-top: 2.75rem !important;
}

.margin-right-11 {
    margin-right: 2.75rem !important;
}

.margin-bottom-11 {
    margin-bottom: 2.75rem !important;
}

.margin-left-11 {
    margin-left: 2.75rem !important;
}

.margin-12 {
    margin: 3rem !important;
}

.margin-top-12 {
    margin-top: 3rem !important;
}

.margin-right-12 {
    margin-right: 3rem !important;
}

.margin-bottom-12 {
    margin-bottom: 3rem !important;
}

.margin-left-12 {
    margin-left: 3rem !important;
}

.margin-13 {
    margin: 3.25rem !important;
}

.margin-top-13 {
    margin-top: 3.25rem !important;
}

.margin-right-13 {
    margin-right: 3.25rem !important;
}

.margin-bottom-13 {
    margin-bottom: 3.25rem !important;
}

.margin-left-13 {
    margin-left: 3.25rem !important;
}

.margin-14 {
    margin: 3.5rem !important;
}

.margin-top-14 {
    margin-top: 3.5rem !important;
}

.margin-right-14 {
    margin-right: 3.5rem !important;
}

.margin-bottom-14 {
    margin-bottom: 3.5rem !important;
}

.margin-left-14 {
    margin-left: 3.5rem !important;
}

.margin-15 {
    margin: 3.75rem !important;
}

.margin-top-15 {
    margin-top: 3.75rem !important;
}

.margin-right-15 {
    margin-right: 3.75rem !important;
}

.margin-bottom-15 {
    margin-bottom: 3.75rem !important;
}

.margin-left-15 {
    margin-left: 3.75rem !important;
}

.margin-16 {
    margin: 4rem !important;
}

.margin-top-16 {
    margin-top: 4rem !important;
}

.margin-right-16 {
    margin-right: 4rem !important;
}

.margin-bottom-16,
#page-header-container {
    margin-bottom: 4rem !important;
}

.margin-left-16 {
    margin-left: 4rem !important;
}

.margin-17 {
    margin: 4.25rem !important;
}

.margin-top-17 {
    margin-top: 4.25rem !important;
}

.margin-right-17 {
    margin-right: 4.25rem !important;
}

.margin-bottom-17 {
    margin-bottom: 4.25rem !important;
}

.margin-left-17 {
    margin-left: 4.25rem !important;
}

.margin-18 {
    margin: 4.5rem !important;
}

.margin-top-18 {
    margin-top: 4.5rem !important;
}

.margin-right-18 {
    margin-right: 4.5rem !important;
}

.margin-bottom-18 {
    margin-bottom: 4.5rem !important;
}

.margin-left-18 {
    margin-left: 4.5rem !important;
}

.margin-19 {
    margin: 4.75rem !important;
}

.margin-top-19 {
    margin-top: 4.75rem !important;
}

.margin-right-19 {
    margin-right: 4.75rem !important;
}

.margin-bottom-19 {
    margin-bottom: 4.75rem !important;
}

.margin-left-19 {
    margin-left: 4.75rem !important;
}

.margin-20 {
    margin: 5rem !important;
}

.margin-top-20 {
    margin-top: 5rem !important;
}

.margin-right-20 {
    margin-right: 5rem !important;
}

.margin-bottom-20 {
    margin-bottom: 5rem !important;
}

.margin-left-20 {
    margin-left: 5rem !important;
}

.margin-21 {
    margin: 5.25rem !important;
}

.margin-top-21 {
    margin-top: 5.25rem !important;
}

.margin-right-21 {
    margin-right: 5.25rem !important;
}

.margin-bottom-21 {
    margin-bottom: 5.25rem !important;
}

.margin-left-21 {
    margin-left: 5.25rem !important;
}

.margin-22 {
    margin: 5.5rem !important;
}

.margin-top-22 {
    margin-top: 5.5rem !important;
}

.margin-right-22 {
    margin-right: 5.5rem !important;
}

.margin-bottom-22 {
    margin-bottom: 5.5rem !important;
}

.margin-left-22 {
    margin-left: 5.5rem !important;
}

.margin-23 {
    margin: 5.75rem !important;
}

.margin-top-23 {
    margin-top: 5.75rem !important;
}

.margin-right-23 {
    margin-right: 5.75rem !important;
}

.margin-bottom-23 {
    margin-bottom: 5.75rem !important;
}

.margin-left-23 {
    margin-left: 5.75rem !important;
}

.margin-24 {
    margin: 6rem !important;
}

.margin-top-24 {
    margin-top: 6rem !important;
}

.margin-right-24 {
    margin-right: 6rem !important;
}

.margin-bottom-24 {
    margin-bottom: 6rem !important;
}

.margin-left-24 {
    margin-left: 6rem !important;
}

.margin-25 {
    margin: 6.25rem !important;
}

.margin-top-25 {
    margin-top: 6.25rem !important;
}

.margin-right-25 {
    margin-right: 6.25rem !important;
}

.margin-bottom-25 {
    margin-bottom: 6.25rem !important;
}

.margin-left-25 {
    margin-left: 6.25rem !important;
}

.margin-26 {
    margin: 6.5rem !important;
}

.margin-top-26 {
    margin-top: 6.5rem !important;
}

.margin-right-26 {
    margin-right: 6.5rem !important;
}

.margin-bottom-26 {
    margin-bottom: 6.5rem !important;
}

.margin-left-26 {
    margin-left: 6.5rem !important;
}

.margin-27 {
    margin: 6.75rem !important;
}

.margin-top-27 {
    margin-top: 6.75rem !important;
}

.margin-right-27 {
    margin-right: 6.75rem !important;
}

.margin-bottom-27 {
    margin-bottom: 6.75rem !important;
}

.margin-left-27 {
    margin-left: 6.75rem !important;
}

.margin-28 {
    margin: 7rem !important;
}

.margin-top-28 {
    margin-top: 7rem !important;
}

.margin-right-28 {
    margin-right: 7rem !important;
}

.margin-bottom-28 {
    margin-bottom: 7rem !important;
}

.margin-left-28 {
    margin-left: 7rem !important;
}

.margin-29 {
    margin: 7.25rem !important;
}

.margin-top-29 {
    margin-top: 7.25rem !important;
}

.margin-right-29 {
    margin-right: 7.25rem !important;
}

.margin-bottom-29 {
    margin-bottom: 7.25rem !important;
}

.margin-left-29 {
    margin-left: 7.25rem !important;
}

.margin-30 {
    margin: 7.5rem !important;
}

.margin-top-30 {
    margin-top: 7.5rem !important;
}

.margin-right-30 {
    margin-right: 7.5rem !important;
}

.margin-bottom-30 {
    margin-bottom: 7.5rem !important;
}

.margin-left-30 {
    margin-left: 7.5rem !important;
}

.margin-31 {
    margin: 7.75rem !important;
}

.margin-top-31 {
    margin-top: 7.75rem !important;
}

.margin-right-31 {
    margin-right: 7.75rem !important;
}

.margin-bottom-31 {
    margin-bottom: 7.75rem !important;
}

.margin-left-31 {
    margin-left: 7.75rem !important;
}

.margin-32 {
    margin: 8rem !important;
}

.margin-top-32 {
    margin-top: 8rem !important;
}

.margin-right-32 {
    margin-right: 8rem !important;
}

.margin-bottom-32 {
    margin-bottom: 8rem !important;
}

.margin-left-32 {
    margin-left: 8rem !important;
}

.padding-0 {
    padding: 0rem !important;
}

.padding-top-0 {
    padding-top: 0rem !important;
}

.padding-right-0 {
    padding-right: 0rem !important;
}

.padding-bottom-0 {
    padding-bottom: 0rem !important;
}

.padding-left-0 {
    padding-left: 0rem !important;
}

.padding-all-0 {
    padding: 0rem !important;
}

.padding-1 {
    padding: 0.25rem !important;
}

.padding-top-1 {
    padding-top: 0.25rem !important;
}

.padding-right-1 {
    padding-right: 0.25rem !important;
}

.padding-bottom-1 {
    padding-bottom: 0.25rem !important;
}

.padding-left-1 {
    padding-left: 0.25rem !important;
}

.padding-all-1 {
    padding: 0.25rem !important;
}

.padding-2 {
    padding: 0.5rem !important;
}

.padding-top-2 {
    padding-top: 0.5rem !important;
}

.padding-right-2 {
    padding-right: 0.5rem !important;
}

.padding-bottom-2 {
    padding-bottom: 0.5rem !important;
}

.padding-left-2 {
    padding-left: 0.5rem !important;
}

.padding-all-2 {
    padding: 0.5rem !important;
}

.padding-3 {
    padding: 0.75rem !important;
}

.padding-top-3 {
    padding-top: 0.75rem !important;
}

.padding-right-3 {
    padding-right: 0.75rem !important;
}

.padding-bottom-3 {
    padding-bottom: 0.75rem !important;
}

.padding-left-3 {
    padding-left: 0.75rem !important;
}

.padding-all-3 {
    padding: 0.75rem !important;
}

.padding-4 {
    padding: 1rem !important;
}

.padding-top-4 {
    padding-top: 1rem !important;
}

.padding-right-4 {
    padding-right: 1rem !important;
}

.padding-bottom-4 {
    padding-bottom: 1rem !important;
}

.padding-left-4 {
    padding-left: 1rem !important;
}

.padding-all-4 {
    padding: 1rem !important;
}

.padding-5 {
    padding: 1.25rem !important;
}

.padding-top-5 {
    padding-top: 1.25rem !important;
}

.padding-right-5 {
    padding-right: 1.25rem !important;
}

.padding-bottom-5 {
    padding-bottom: 1.25rem !important;
}

.padding-left-5 {
    padding-left: 1.25rem !important;
}

.padding-all-5 {
    padding: 1.25rem !important;
}

.padding-6 {
    padding: 1.5rem !important;
}

.padding-top-6 {
    padding-top: 1.5rem !important;
}

.padding-right-6 {
    padding-right: 1.5rem !important;
}

.padding-bottom-6 {
    padding-bottom: 1.5rem !important;
}

.padding-left-6 {
    padding-left: 1.5rem !important;
}

.padding-all-6 {
    padding: 1.5rem !important;
}

.padding-7 {
    padding: 1.75rem !important;
}

.padding-top-7 {
    padding-top: 1.75rem !important;
}

.padding-right-7 {
    padding-right: 1.75rem !important;
}

.padding-bottom-7 {
    padding-bottom: 1.75rem !important;
}

.padding-left-7 {
    padding-left: 1.75rem !important;
}

.padding-all-7 {
    padding: 1.75rem !important;
}

.padding-8 {
    padding: 2rem !important;
}

.padding-top-8 {
    padding-top: 2rem !important;
}

.padding-right-8 {
    padding-right: 2rem !important;
}

.padding-bottom-8 {
    padding-bottom: 2rem !important;
}

.padding-left-8 {
    padding-left: 2rem !important;
}

.padding-all-8 {
    padding: 2rem !important;
}

.padding-9 {
    padding: 2.25rem !important;
}

.padding-top-9 {
    padding-top: 2.25rem !important;
}

.padding-right-9 {
    padding-right: 2.25rem !important;
}

.padding-bottom-9 {
    padding-bottom: 2.25rem !important;
}

.padding-left-9 {
    padding-left: 2.25rem !important;
}

.padding-all-9 {
    padding: 2.25rem !important;
}

.padding-10 {
    padding: 2.5rem !important;
}

.padding-top-10 {
    padding-top: 2.5rem !important;
}

.padding-right-10 {
    padding-right: 2.5rem !important;
}

.padding-bottom-10 {
    padding-bottom: 2.5rem !important;
}

.padding-left-10 {
    padding-left: 2.5rem !important;
}

.padding-all-10 {
    padding: 2.5rem !important;
}

.padding-11 {
    padding: 2.75rem !important;
}

.padding-top-11 {
    padding-top: 2.75rem !important;
}

.padding-right-11 {
    padding-right: 2.75rem !important;
}

.padding-bottom-11 {
    padding-bottom: 2.75rem !important;
}

.padding-left-11 {
    padding-left: 2.75rem !important;
}

.padding-all-11 {
    padding: 2.75rem !important;
}

.padding-12 {
    padding: 3rem !important;
}

.padding-top-12 {
    padding-top: 3rem !important;
}

.padding-right-12 {
    padding-right: 3rem !important;
}

.padding-bottom-12 {
    padding-bottom: 3rem !important;
}

.padding-left-12 {
    padding-left: 3rem !important;
}

.padding-all-12 {
    padding: 3rem !important;
}

.padding-13 {
    padding: 3.25rem !important;
}

.padding-top-13 {
    padding-top: 3.25rem !important;
}

.padding-right-13 {
    padding-right: 3.25rem !important;
}

.padding-bottom-13 {
    padding-bottom: 3.25rem !important;
}

.padding-left-13 {
    padding-left: 3.25rem !important;
}

.padding-all-13 {
    padding: 3.25rem !important;
}

.padding-14 {
    padding: 3.5rem !important;
}

.padding-top-14 {
    padding-top: 3.5rem !important;
}

.padding-right-14 {
    padding-right: 3.5rem !important;
}

.padding-bottom-14 {
    padding-bottom: 3.5rem !important;
}

.padding-left-14 {
    padding-left: 3.5rem !important;
}

.padding-all-14 {
    padding: 3.5rem !important;
}

.padding-15 {
    padding: 3.75rem !important;
}

.padding-top-15 {
    padding-top: 3.75rem !important;
}

.padding-right-15 {
    padding-right: 3.75rem !important;
}

.padding-bottom-15 {
    padding-bottom: 3.75rem !important;
}

.padding-left-15 {
    padding-left: 3.75rem !important;
}

.padding-all-15 {
    padding: 3.75rem !important;
}

.padding-16 {
    padding: 4rem !important;
}

.padding-top-16 {
    padding-top: 4rem !important;
}

.padding-right-16 {
    padding-right: 4rem !important;
}

.padding-bottom-16 {
    padding-bottom: 4rem !important;
}

.padding-left-16 {
    padding-left: 4rem !important;
}

.padding-all-16 {
    padding: 4rem !important;
}

.padding-17 {
    padding: 4.25rem !important;
}

.padding-top-17 {
    padding-top: 4.25rem !important;
}

.padding-right-17 {
    padding-right: 4.25rem !important;
}

.padding-bottom-17 {
    padding-bottom: 4.25rem !important;
}

.padding-left-17 {
    padding-left: 4.25rem !important;
}

.padding-all-17 {
    padding: 4.25rem !important;
}

.padding-18 {
    padding: 4.5rem !important;
}

.padding-top-18 {
    padding-top: 4.5rem !important;
}

.padding-right-18 {
    padding-right: 4.5rem !important;
}

.padding-bottom-18 {
    padding-bottom: 4.5rem !important;
}

.padding-left-18 {
    padding-left: 4.5rem !important;
}

.padding-all-18 {
    padding: 4.5rem !important;
}

.padding-19 {
    padding: 4.75rem !important;
}

.padding-top-19 {
    padding-top: 4.75rem !important;
}

.padding-right-19 {
    padding-right: 4.75rem !important;
}

.padding-bottom-19 {
    padding-bottom: 4.75rem !important;
}

.padding-left-19 {
    padding-left: 4.75rem !important;
}

.padding-all-19 {
    padding: 4.75rem !important;
}

.padding-20 {
    padding: 5rem !important;
}

.padding-top-20 {
    padding-top: 5rem !important;
}

.padding-right-20 {
    padding-right: 5rem !important;
}

.padding-bottom-20 {
    padding-bottom: 5rem !important;
}

.padding-left-20 {
    padding-left: 5rem !important;
}

.padding-all-20 {
    padding: 5rem !important;
}

.padding-21 {
    padding: 5.25rem !important;
}

.padding-top-21 {
    padding-top: 5.25rem !important;
}

.padding-right-21 {
    padding-right: 5.25rem !important;
}

.padding-bottom-21 {
    padding-bottom: 5.25rem !important;
}

.padding-left-21 {
    padding-left: 5.25rem !important;
}

.padding-all-21 {
    padding: 5.25rem !important;
}

.padding-22 {
    padding: 5.5rem !important;
}

.padding-top-22 {
    padding-top: 5.5rem !important;
}

.padding-right-22 {
    padding-right: 5.5rem !important;
}

.padding-bottom-22 {
    padding-bottom: 5.5rem !important;
}

.padding-left-22 {
    padding-left: 5.5rem !important;
}

.padding-all-22 {
    padding: 5.5rem !important;
}

.padding-23 {
    padding: 5.75rem !important;
}

.padding-top-23 {
    padding-top: 5.75rem !important;
}

.padding-right-23 {
    padding-right: 5.75rem !important;
}

.padding-bottom-23 {
    padding-bottom: 5.75rem !important;
}

.padding-left-23 {
    padding-left: 5.75rem !important;
}

.padding-all-23 {
    padding: 5.75rem !important;
}

.padding-24 {
    padding: 6rem !important;
}

.padding-top-24 {
    padding-top: 6rem !important;
}

.padding-right-24 {
    padding-right: 6rem !important;
}

.padding-bottom-24 {
    padding-bottom: 6rem !important;
}

.padding-left-24 {
    padding-left: 6rem !important;
}

.padding-all-24 {
    padding: 6rem !important;
}

.padding-25 {
    padding: 6.25rem !important;
}

.padding-top-25 {
    padding-top: 6.25rem !important;
}

.padding-right-25 {
    padding-right: 6.25rem !important;
}

.padding-bottom-25 {
    padding-bottom: 6.25rem !important;
}

.padding-left-25 {
    padding-left: 6.25rem !important;
}

.padding-all-25 {
    padding: 6.25rem !important;
}

.padding-26 {
    padding: 6.5rem !important;
}

.padding-top-26 {
    padding-top: 6.5rem !important;
}

.padding-right-26 {
    padding-right: 6.5rem !important;
}

.padding-bottom-26 {
    padding-bottom: 6.5rem !important;
}

.padding-left-26 {
    padding-left: 6.5rem !important;
}

.padding-all-26 {
    padding: 6.5rem !important;
}

.padding-27 {
    padding: 6.75rem !important;
}

.padding-top-27 {
    padding-top: 6.75rem !important;
}

.padding-right-27 {
    padding-right: 6.75rem !important;
}

.padding-bottom-27 {
    padding-bottom: 6.75rem !important;
}

.padding-left-27 {
    padding-left: 6.75rem !important;
}

.padding-all-27 {
    padding: 6.75rem !important;
}

.padding-28 {
    padding: 7rem !important;
}

.padding-top-28 {
    padding-top: 7rem !important;
}

.padding-right-28 {
    padding-right: 7rem !important;
}

.padding-bottom-28 {
    padding-bottom: 7rem !important;
}

.padding-left-28 {
    padding-left: 7rem !important;
}

.padding-all-28 {
    padding: 7rem !important;
}

.padding-29 {
    padding: 7.25rem !important;
}

.padding-top-29 {
    padding-top: 7.25rem !important;
}

.padding-right-29 {
    padding-right: 7.25rem !important;
}

.padding-bottom-29 {
    padding-bottom: 7.25rem !important;
}

.padding-left-29 {
    padding-left: 7.25rem !important;
}

.padding-all-29 {
    padding: 7.25rem !important;
}

.padding-30 {
    padding: 7.5rem !important;
}

.padding-top-30 {
    padding-top: 7.5rem !important;
}

.padding-right-30 {
    padding-right: 7.5rem !important;
}

.padding-bottom-30 {
    padding-bottom: 7.5rem !important;
}

.padding-left-30 {
    padding-left: 7.5rem !important;
}

.padding-all-30 {
    padding: 7.5rem !important;
}

.padding-31 {
    padding: 7.75rem !important;
}

.padding-top-31 {
    padding-top: 7.75rem !important;
}

.padding-right-31 {
    padding-right: 7.75rem !important;
}

.padding-bottom-31 {
    padding-bottom: 7.75rem !important;
}

.padding-left-31 {
    padding-left: 7.75rem !important;
}

.padding-all-31 {
    padding: 7.75rem !important;
}

.padding-32 {
    padding: 8rem !important;
}

.padding-top-32 {
    padding-top: 8rem !important;
}

.padding-right-32 {
    padding-right: 8rem !important;
}

.padding-bottom-32 {
    padding-bottom: 8rem !important;
}

.padding-left-32 {
    padding-left: 8rem !important;
}

.padding-all-32 {
    padding: 8rem !important;
}

.height-0 {
    height: 0rem !important;
}

.height-1 {
    height: 1rem !important;
}

.height-2 {
    height: 2rem !important;
}

.height-3 {
    height: 3rem !important;
}

.height-4 {
    height: 4rem !important;
}

.height-5 {
    height: 5rem !important;
}

.height-6 {
    height: 6rem !important;
}

.height-7 {
    height: 7rem !important;
}

.height-8 {
    height: 8rem !important;
}

.height-9 {
    height: 9rem !important;
}

.height-10 {
    height: 10rem !important;
}

.no-pad {
    padding-left: 0;
    padding-right: 0;
}

.no-pad-l {
    padding-left: 0;
}

.no-pad-r {
    padding-right: 0;
}

.center {
    margin: 0 auto;
}

.text-align--left {
    text-align: left;
}

.text-align--right {
    text-align: right;
}

.text-align--center {
    text-align: center;
}

.text-align--justify {
    text-align: justify;
}

@font-face {
    font-family: "PP Writer";
    src: local("PPWriter-Thin"), url("/font/PPWriter-Thin.woff2") format("woff2"), url("/font/PPWriter-Thin.woff") format("woff");
    font-weight: 100;
    font-style: normal;
    font-stretch: normal;
}

body {
    font-family: "Inter";
    font-size: 16px;
    color: var(--grey-900);
    line-height: 24px;
}

h1 {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 100;
    margin: 0;
    color: var(--grey-900);
}

p {
    font-family: "Inter", "sans-serif";
    font-size: 1rem;
    font-weight: normal;
    line-height: 24px;
    color: var(--grey-900);
}

a,
.link {
    text-decoration: none;
    color: var(--accent-primary);
}

a:hover,
.link:hover {
    cursor: pointer;
}

label {
    font-family: "Inter", "sans-serif";
    font-size: 1rem;
    line-height: 24px;
    font-weight: 500;
    line-height: 24px;
    color: var(--grey-900);
}

.heading-01 {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 100;
    font-size: 48px;
    line-height: 67px;
    color: var(--grey-900);
    margin-bottom: 24px;
    padding-top: 32px;
}

.heading-02 {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 100;
    font-size: 32px;
    line-height: 44px;
    color: var(--grey-900);
}

.heading-03 {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    letter-spacing: -0.02em;
    color: var(--grey-900);
}

.text-m-01,
.user-profile__name {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}

.text-m-02,
a,
.link,
button,
.btn,
form label,
.navtab .tab,
#loading div div {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
}

.text-r-01,
.block__title {
    font-family: "Inter";
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0em;
    text-align: left;
}

.text-r-02,
form label:has(input[type="radio"]),
form label:has(input[type="checkbox"]),
label.error,
input[name="email"].form-error+.error-message,
.block__inner,
.block-status__pill,
.user-profile__username,
.user-profile__role,
.user-profile__bio {
    font-family: "Inter";
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0em;
    text-align: left;
}

.text-r-03 {
    font-family: "Inter";
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: left;
}

.text-light,
form label:has(input[type="radio"]),
form label:has(input[type="checkbox"]) {
    color: var(--grey-700);
}

.text-extra-light {
    color: var(--grey-500);
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    padding: 0;
    vertical-align: top;
    background-color: var(--grey-000);
}

a {
    color: var(--accent-primary);
}

input,
textarea,
select {
    outline: none;
    color: var(--grey-900);
}

input::placeholder,
textarea::placeholder,
select::placeholder {
    color: var(--grey-500);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

input[type="text"],
input[type="password"] {
    width: 100%;
    height: 32px;
    padding: 0px 12px;
    border: 1px solid var(--grey-300);
    border-radius: 6px;
    box-shadow: 0px 4px 4px -4px var(--grey-100-a40), 0px 2px 10px -2px var(--grey-100-a40);
    background-color: var(--grey-000);
    font-family: var(--font-body);
    line-height: 24px;
    font-size: 16px;
}

@media (min-width: 1024px) {
    input[type="text"],
    input[type="password"] {
        font-size: 14px !important;
    }
    input[type="text"]::placeholder,
    input[type="password"]::placeholder {
        font-size: 14px !important;
    }
}

input[type="checkbox"] {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background-color: var(--legacy-f9f9fa);
    border: 1px solid var(--grey-300);
}

input[type="checkbox"]:checked {
    background-color: var(--grey-900);
}

input[type="radio"] {
    background-color: var(--legacy-f9f9fa);
    border: 1px solid var(--grey-300);
}

input[type="radio"]:checked {
    background-color: var(--grey-900);
}

input[type="radio"]:focus {
    outline: none;
}

textarea {
    width: 100%;
    height: 124px;
    border: 1px solid var(--grey-300);
    border-radius: 6px;
    box-shadow: 0px 4px 4px -4px var(--grey-100-a40), 0px 2px 10px -2px var(--grey-100-a40);
    padding: 8px 12px;
    background-color: var(--grey-000);
    font-family: var(--font-body);
    line-height: 24px;
}

@media (min-width: 1024px) {
    textarea {
        font-size: 14px !important;
    }
    textarea::placeholder {
        font-size: 14px !important;
    }
}

select {
    display: block;
    width: 100%;
    height: 32px;
    border: 1px solid var(--grey-300);
    border-radius: 6px;
    box-shadow: 0px 4px 4px -4px var(--grey-100-a40), 0px 2px 10px -2px var(--grey-100-a40);
    padding: 0px 12px;
    font-size: 14px;
    font-family: var(--font-body);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(/img/dropdown-arrow.svg) no-repeat 96% center;
}

ul,
li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

button,
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 6px;
    border: none;
    line-height: 24px;
}

button:hover,
.btn:hover {
    cursor: pointer;
}

form label+* {
    margin-top: 8px;
}

form label:has(input[type="radio"]),
form label:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
}

form label:has(input[type="radio"]) {
    margin-bottom: 10px;
}

form input {
    margin-bottom: 24px;
    border-radius: 6px;
    border: var(--grey-300);
    box-shadow: 0px 4px 4px -4px var(--grey-100-a40), 0px 2px 10px -2px var(--grey-100-a40);
}

form input:focus {
    border-radius: 8px;
    outline: 1px solid var(--grey-900);
    outline-offset: 1px;
}

form input[disabled] {
    background-color: var(--legacy-f9f9fa);
    color: var(--grey-500);
}

form input[type="radio"] {
    margin-bottom: 14px;
}

form input[type="radio"]:focus,
form input[type="checkbox"]:focus {
    outline: none;
}

form textarea {
    margin-bottom: 24px;
    border-radius: 6px;
    box-shadow: 0px 4px 4px -4px var(--grey-100-a40), 0px 2px 10px -2px var(--grey-100-a40);
}

form textarea:focus {
    border-radius: 8px;
    outline: 1px solid var(--grey-900);
    outline-offset: 1px;
}

form textarea[disabled] {
    background-color: var(--legacy-f9f9fa);
    color: var(--grey-500);
}

#page-wrapper {
    margin: 0;
    width: 100%;
    padding-top: 64px;
}

body.has-banner #page-wrapper {
    padding-top: 128px;
}

#header-wrapper {
    position: fixed;
    width: 100%;
    z-index: 2;
    top: 0;
}

header {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    padding: 20px 24px;
    border-bottom: 1px solid var(--grey-050);
    background-color: var(--grey-000);
}

header p,
header a {
    font-size: 14px;
    font-weight: 500;
    color: var(--grey-900);
}

header a {
    display: flex;
    align-items: center;
}

header .header__item {
    display: flex;
    align-items: center;
}

header #site-logo {
    display: flex;
    align-items: center;
}

header #menu-icon {
    margin-right: 12px;
}

header .logo-icon {
    margin-right: 8px;
}

header #header__right button:not(:first-child),
header #header__right .btn:not(:first-child) {
    margin-left: 8px;
}

header.navtab {
    justify-content: flex-start;
    border-radius: 0;
    border-top: 1px solid var(--grey-050);
    border-bottom: 1px solid var(--grey-050);
}

header.navtab .tab {
    border-radius: 34px;
    padding: 0 8px;
    background-color: var(--grey-000);
    color: var(--grey-300);
    font-weight: 500;
    margin-right: 40px;
}

header.navtab .tab--active {
    background-color: var(--grey-900);
    color: var(--grey-000);
}

#content-wrapper {
    overflow-x: hidden;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    position: relative;
}

#content-inner {
    position: relative;
}

aside {
    min-width: 428px;
    padding: 40px 24px;
    height: 100%;
    margin-left: -428px;
    list-style-type: none;
    border-right: 1px solid var(--grey-050);
    box-sizing: border-box;
    position: relative;
    transition: margin 0.4s;
}

aside.visible {
    margin-left: 0;
}

aside ul:not(#menu-login-register) {
    padding: 64px 0;
}

aside ul#menu-links__main {
    border-bottom: 1px solid var(--grey-050);
}

aside ul li a,
aside ul span {
    font-size: 24px;
    font-weight: 400;
    line-height: 24px;
    display: inline-block;
    margin-bottom: 24px;
    color: var(--grey-300);
}

aside ul li a.active,
aside ul span.active {
    color: var(--grey-900);
}


/* Become a Member button in sidebar */

aside .become-member-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

aside .btn--become-member {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--grey-900);
    background-color: transparent;
    color: var(--grey-900);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    margin-bottom: 0;
}

aside .btn--become-member:hover {
    background-color: var(--grey-900);
    color: var(--grey-000);
}

aside .become-member-item .verification-badge {
    width: 20px;
    height: 20px;
}

main {
    width: calc(100% - (2 * 24px));
    max-width: 100%;
    margin: 64px 24px;
}

@media (min-width: 768px) {
    main {
        margin: 64px 40px;
        width: calc(100% - (2 * 40px));
    }
}

#breadcrumb-bar {
    width: 100%;
    height: 64px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--grey-050);
}

#breadcrumb-bar a {
    color: var(--grey-900);
}

#breadcrumb-bar .breadcrumb__divider {
    color: var(--grey-300);
}

.max-content-width,
#page-header-container {
    max-width: 380px;
    width: 100%;
}

.max-content-width-3,
.block__problem-banner {
    max-width: 840px;
    width: 100%;
}

@media (max-width: 767px) {
    .breakpoint-margin {
        margin-bottom: 40px;
    }
}

@media (min-width: 768px) {
    .breakpoint-margin {
        margin-right: 80px;
    }
}

body#users-aboutyou #content-wrapper {
    overflow-x: hidden;
    position: relative;
    min-height: calc(100vh - 120px);
}

.btn:hover {
    box-shadow: 0px 8px 14px -8px var(--grey-100-a75), 0px 14px 32px 8px var(--grey-100-a75);
}

.btn--dark {
    background-color: var(--grey-900);
    color: var(--grey-000);
}

.btn--dark[disabled] {
    background-color: var(--grey-500);
    color: var(--legacy-f9f9fa);
    border: none;
}

.btn--light {
    background-color: var(--grey-000);
    color: var(--legacy-35455a);
    border: 1px solid var(--grey-300);
    box-shadow: 0px 4px 4px -4px var(--grey-100-a40), 0px 2px 10px -2px var(--grey-100-a40);
}

.btn--light[disabled] {
    background-color: var(--grey-050);
    color: var(--grey-500);
    border: none;
}

.input input {
    margin-top: 8px;
    margin-bottom: 24px;
}

.divider {
    border-bottom: 1px solid var(--grey-050);
}

.full-bleed-2 {
    margin-left: -24px;
    margin-right: -24px;
}

.footer {
    color: var(--grey-300);
}


/* mobile first */

#profile-widget {
    display: grid;
    grid-template-columns: 100%;
    column-gap: 80px;
    row-gap: 64px;
}

@media (min-width: 922px) {
    #profile-widget {
        display: grid;
        grid-template-columns: 380px 380px;
        column-gap: 80px;
        row-gap: 64px;
    }
}

.embedded-input-text {
    position: absolute;
    display: inline-block;
    top: 36px;
    right: 20px;
    margin: 0;
    color: var(--grey-500);
}

.input-prefix {
    position: absolute;
    margin-left: 12px;
    margin-top: 4px;
    color: var(--grey-500);
    font-size: 16px;
}

.input-prefix+input[type="text"] {
    padding-left: 108px;
}

@media (min-width: 1024px) {
    .input-prefix {
        font-size: 14px !important;
    }
    .input-prefix+input[type="text"] {
        padding-left: 96px;
    }
}

#frmselect {
    margin-bottom: 24px;
}

#person-control-email {
    position: relative;
}

label.error {
    position: relative;
    left: 0;
    top: -20px;
    display: block;
    color: var(--legacy-ff6868);
}

form .label-row+input {
    margin-top: 8px;
}

input[name="email"].form-error {
    margin-bottom: 0px;
}

input[name="email"].form-error+.error-message {
    margin: 8px 0;
    color: var(--legacy-ff6868);
}

.project-thumbnail-image {
    border: 1px solid var(--grey-050);
    border-radius: 6px;
    object-fit: cover;
}

.page-banner {
    width: 100%;
    align-items: center;
    justify-content: space-between;
    background-color: var(--grey-050);
}

.page-banner .message {
    display: flex;
    padding: 20px 24px;
    width: 100%;
    justify-content: space-between;
    font-size: 14px;
}

#block-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 24px;
    margin-top: 40px;
    justify-content: center;
}

@media (min-width: 500px) {
    #block-container {
        justify-content: flex-start;
    }
}

.block {
    position: relative;
    background-color: var(--legacy-fcfcfd);
    padding: 40px;
    width: 438px;
    line-height: 24px;
}

@media (min-width: 500px) {
    .block {
        width: 437px;
    }
}

@media (max-width: 499px) {
    .block {
        width: 100%;
        max-width: 438px;
        margin: 0 auto;
    }
    .block__image img {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
    .block__inner {
        width: 100% !important;
    }
}

.block a {
    color: var(--grey-900);
}

.block__image img {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 6px 6px 0 0;
    width: 438px;
    height: 180px;
    object-fit: cover;
}

.block__inner {
    margin-top: 180px;
    width: 358px;
    height: 356px;
}

.block__row {
    margin-bottom: 24px;
}

.block__header {
    display: flex;
}

.block__status {
    align-self: flex-end;
}

.block__title {
    width: calc(100% - 20px);
}

.block__link-icon {
    background: url(/img/link-arrow.svg) no-repeat center;
    width: 24px;
    height: 12px;
    display: inline-block;
}

.block__description {
    color: var(--grey-700);
}

.block__label {
    color: var(--grey-900);
    margin-bottom: 8px;
}

.block__label--light {
    color: var(--grey-500);
    margin-bottom: 4px;
}

.block__problem-banner {
    padding: 24px;
    border-radius: 6px;
}

.block__problem-banner--issue {
    background-color: var(--legacy-ffd1a7);
}

.block__problem-banner--rejected {
    background-color: var(--legacy-ffc2c2);
}

.block__status {
    width: 20px;
    height: 20px;
}

.block__status--collaboration {
    background-color: var(--legacy-c0b0fa);
}

.block__status--approved {
    background-color: var(--legacy-a2cbaa);
}

.block__status--denied {
    background-color: var(--legacy-ff9c9c);
}

.block__status--rejected {
    background-color: var(--legacy-ff9c9c);
}

.block__status--issue {
    background-color: var(--legacy-ffbd81);
}

.block__status--pending {
    background-color: var(--grey-300);
}

.block__status--all {
    background: url(/img/mosaic-logo.svg) no-repeat center;
    width: 28px;
    height: 28px;
}

.collaborator-profile-images {
    height: 24px;
    padding-left: 8px;
    display: flex;
    max-width: 300px;
}

.collaborator-profile-images__item {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    margin-left: -10px;
}

.block_summary_box {
    width: 100%;
}

.block_summary_box__inner {
    background-color: var(--legacy-fcfcfd);
    height: 206px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.block_summary_box__title {
    margin-top: 12px;
}

.block_summary_box .block__status {
    align-self: auto;
}

@media (min-width: 650px) {
    .block_summary_box {
        width: 48%;
    }
    .block_summary_box__inner {
        width: 100%;
    }
}

@media (min-width: 922px) {
    .block_summary_box {
        width: 260px;
    }
}

.block_summary__all {
    height: 260px;
}

#page-header-container {
    font-size: 1rem;
    color: var(--grey-700);
}

#no-results {
    color: var(--grey-700);
}

#add-new-block-widget {
    width: 259px;
    height: 259px;
    background: url(/img/plus.svg) no-repeat center;
    background-color: var(--legacy-f9f9fa);
    display: inline-block;
}

.block-status__pill {
    height: 24px;
    border-radius: 100px;
    padding: 0px 8px 0px 25px;
    display: inline-block;
}

.block-status__pill--pending {
    background: url(/img/pending-icon.svg) no-repeat 5px;
    background-color: var(--grey-100);
}

.block-status__pill--collaboration {
    background: url(/img/collaborator-icon.svg) no-repeat 5px;
    background-color: var(--legacy-ece7fd);
}

.block-status__pill--approved {
    background: url(/img/approved-icon.svg) no-repeat 5px;
    background-color: var(--legacy-c6deca);
}

.block-status__pill--rejected {
    background: url(/img/rejected-icon.svg) no-repeat 5px;
    background-color: var(--legacy-ffc2c2);
}

.block-status__pill--issue {
    background: url(/img/issue-icon.svg) no-repeat 5px;
    background-color: var(--legacy-ffd1a7);
}

.modal {
    display: none;
    z-index: 2;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: black;
    background-color: rgba(17, 24, 39, 0.8);
    justify-content: center;
}

.modal--content {
    background-color: var(--grey-000);
    padding: 40px;
    margin: 128px 24px 0 24px;
    max-width: 536px;
    width: 536px;
    height: fit-content;
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.05), 0px 0px 1px rgba(66, 71, 76, 0.45);
}

.modal--content p {
    margin-bottom: 40px;
}

.modal--content .buttons {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.modal--content .buttons:first-child {
    margin-bottom: 8px;
}

#global-search-bar {
    height: 100%;
    width: 100%;
    background-color: var(--grey-000);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    position: absolute;
    z-index: 10;
}

#global-search-bar .search-icon {
    height: 24px;
    width: 24px;
    margin-right: 12px;
}

#discover-search-bar {
    margin-top: 48px;
}

#discover-search-bar .search-icon {
    height: 24px;
    width: 24px;
    margin-right: 32px;
}

#discover-search-bar #search-input-wrapper {
    padding: 20px 0;
    height: 64px;
    border-bottom: 1px solid var(--grey-050);
    align-items: center;
}

#discover-search-bar input {
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0;
    height: 24px;
    flex: 1;
}

#discover-search-bar #search-clear-text {
    margin-left: 12px;
}

#global-search-bar #search-input-wrapper {
    padding: 20px 24px;
    height: 64px;
    border-bottom: 1px solid var(--grey-050);
}

#global-search-bar #search-results-wrapper {
    padding: 40px 24px;
}

#global-search-bar input {
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0;
    height: 24px;
}

#search-controls {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

#search-controls input {
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0;
    height: 24px;
    width: 200px;
    margin-left: 12px;
}

@media (min-width: 768px) {
    #search-controls {
        flex-direction: row;
    }
}

@media (max-width: 467px) {
    #search-controls {
        max-width: 100%;
    }
}

#search-controls__input {
    margin-bottom: 40px;
}

@media (min-width: 768px) {
    #search-controls__input {
        margin-bottom: 0;
    }
}

#search-controls__filters {
    display: flex;
    gap: 12px;
    flex-direction: column;
}

@media (min-width: 768px) {
    #search-controls__filters {
        flex-direction: row;
    }
}

#search-controls__filters select {
    width: 100%;
}

@media (min-width: 898px) {
    #search-controls__filters select {
        width: 200px;
        min-width: 200px;
    }
}

#paginator {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
}

#totals .totals__divider {
    color: var(--grey-300);
}

#nav {
    display: flex;
}

.navtab {
    display: flex;
    flex-direction: row;
    padding: 20px 20px;
    height: 64px;
    border-bottom: 1px solid var(--grey-050);
}

.navtab .tab {
    display: flex;
    align-items: center;
    color: var(--grey-300);
    height: 24px;
    text-decoration: none;
}

.navtab .tab.hoverable {
    color: var(--grey-900);
}

.navtab .tab.hoverable:hover {
    opacity: 0.7;
}

.navtab .tab--active,
.navtab .tab--active.hoverable {
    color: var(--grey-000);
    background-color: var(--grey-900);
    border-radius: 34px;
    padding: 0 8px;
}

.navtab .tab:not(:last-child) {
    margin-right: 40px;
}

.nav-icon {
    width: 24px;
    height: 24px;
    cursor: pointer;
    filter: brightness(0) saturate(100%) invert(8%) sepia(29%) saturate(933%) hue-rotate(181deg) brightness(96%) contrast(98%);
}

.nav-icon:hover {
    color: var(--legacy-35455a);
    filter: brightness(0) saturate(100%) invert(24%) sepia(10%) saturate(1693%) hue-rotate(175deg) brightness(93%) contrast(87%);
}

.nav-icon--left {
    background: url(/img/nav-icon-left.svg) no-repeat center;
}

.nav-icon--right {
    margin-left: 20px;
    background: url(/img/nav-icon-right.svg) no-repeat center;
}

.nav-icon.disabled {
    cursor: not-allowed;
    filter: none;
}

.user-profile__header {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.user-profile__picture {
    border-radius: 50%;
    width: 64px;
    height: 64px;
    margin-right: 20px;
}

.user-profile__picture--small {
    width: 48px;
    height: 48px;
}

.user-profile__current-context {
    background: url(/img/visible-black.svg) no-repeat center;
    width: 18px;
    height: 18px;
    margin-top: 35px;
    margin-left: 35px;
    position: absolute;
}

.user-profile__name {
    color: var(--grey-900);
}

.user-profile__username {
    color: var(--grey-500);
}

.user-profile__role {
    color: var(--grey-900);
}

.user-profile__bio {
    color: var(--grey-700);
    max-width: 380px;
}

#loading {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background-color: var(--grey-000);
}

#loading div {
    width: 380px;
    height: 72px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#loading div img {
    width: 24px;
    height: 24px;
}

#loading div div {
    margin-top: 24px;
    padding-top: 24px;
    color: var(--grey-900);
}

fancy-select {
    --footer-link-color: var(--accent-primary);
    z-index: 1;
}

.verification-badge {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.verification-badge-inline {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.verification-badge-icon-small {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}


/* Plans & Billing Page */

.plans-billing-page {
    max-width: 900px;
}

.plans-billing-page .heading-01 {
    margin-bottom: 32px;
}

.current-plan-info {
    margin-bottom: 40px;
}

.current-plan-info .text-r-02:first-child {
    margin-bottom: 4px;
}

.manage-plan-link {
    color: var(--grey-900);
    text-decoration: none;
}

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

.plans-container {
    display: flex;
    gap: 60px;
    margin-bottom: 48px;
}

.plan-card {
    flex: 1;
    padding: 0;
}

.plan-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.plan-card__name {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    color: var(--grey-900);
    line-height: 24px;
}

.plan-card__tier-badge {
    display: inline-block;
    border-radius: 4px;
    padding: 2px 8px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
}

.plan-card__tier-badge--basic {
    background-color: var(--legacy-f3f4f6);
    color: var(--legacy-374151);
}

.plan-card__tier-badge--professional {
    background-color: var(--status-member-bg);
    color: var(--status-member-text);
}

.plan-card__features {
    list-style: none;
    padding: 0;
    margin: 24px 0 32px 0;
}

.plan-card__features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--grey-900);
    padding: 8px 0;
    line-height: 24px;
}

.feature-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z' fill='%23111827'/%3E%3Cpath d='M10 14.17L7.83 12L6.41 13.41L10 17L18 9L16.59 7.59L10 14.17Z' fill='%23111827'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.plan-card__price {
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 400;
    color: var(--grey-900);
    margin: 0 0 20px 0;
    line-height: 29px;
}

.plan-card__cta {
    display: inline-block;
}

.plans-footer {
    border-top: 1px solid var(--legacy-e5e7eb);
    padding-top: 32px;
    margin-top: 32px;
}

.plans-footer__text {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--grey-500);
    line-height: 24px;
    margin: 0 0 16px 0;
    max-width: 500px;
}

.plans-footer__support-link {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--legacy-6366f1);
    text-decoration: none;
    line-height: 24px;
}

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

@media (max-width: 768px) {
    .plans-container {
        flex-direction: column;
        gap: 32px;
    }
}


/* Benefits Page */

.benefits-page {
    max-width: 900px;
}

.benefits-page .heading-01 {
    padding-bottom: 30px;
}

.benefits-intro {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--grey-900);
    line-height: 24px;
    margin: 0 0 32px 0;
    max-width: 600px;
}

.benefits-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 48px;
}

.benefit-card {
    padding-bottom: 32px;
}

.benefit-card:last-child {
    padding-bottom: 0;
}

.benefit-card__title {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--grey-500);
    margin: 0 0 8px 0;
    line-height: 24px;
}

.benefit-card__description {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--grey-900);
    line-height: 24px;
    margin: 0 0 12px 0;
    max-width: 500px;
}

.benefit-card__action {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.benefit-card__link-text {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--grey-900);
    line-height: 24px;
}

.benefit-card__link {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--legacy-6366f1);
    text-decoration: none;
    cursor: pointer;
    line-height: 24px;
}

.benefit-card__link:hover {
    text-decoration: underline;
}

.benefit-card__coming-soon {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--legacy-9ca3af);
    line-height: 24px;
}

.benefits-footer {
    padding-top: 24px;
    margin-top: 24px;
}

.benefits-footer__text {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--grey-500);
    line-height: 24px;
    margin: 0 0 16px 0;
    max-width: 400px;
}

.benefits-footer__support-link {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--legacy-6366f1);
    text-decoration: none;
    line-height: 24px;
}

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

/* Roles multi-select. MOSC-393, Figma M10 / M12 node 108:68.
   Values are taken from the design and are not approximated. The design
   carries no disabled or dimmed pill state, so none is defined here: at
   three selections the remaining pills are drawn as any other unselected
   pill. Focus follows the existing form convention above rather than
   inventing something for this component. */
.roles-multi-select {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.roles-multi-select__heading {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 11px;
    color: var(--legacy-545e70);
    margin: 0 0 8px 0;
}

.roles-multi-select__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.roles-pill {
    display: inline-flex;
    align-items: center;
    background-color: var(--grey-000);
    border: 1px solid var(--legacy-c4cfde);
    border-radius: 16px;
    padding: 7px 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    color: var(--grey-900);
    white-space: nowrap;
    cursor: pointer;
}

/* Selected pills measure 32px against the unselected 30px, because the
   18px badge is taller than the 16px text line. That difference is in the
   design; it is not a defect. */
.roles-pill--selected {
    background-color: var(--accent-primary);
    border: none;
    padding: 7px 8px 7px 12px;
    font-weight: 500;
    color: var(--grey-000);
    gap: 7px;
}

.roles-pill__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background-color: var(--grey-000);
    border-radius: 9px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 10px;
    color: var(--accent-primary);
}

/* The badge is hidden with the `hidden` attribute. `[hidden]{display:none}`
   is a user-agent rule, so the author `display: inline-flex` above beats it
   and the badge would keep its 18px of width on every unselected pill,
   invisibly, white on white. This rule is what actually hides it. */
.roles-pill__badge[hidden] {
    display: none;
}

.roles-pill:focus {
    outline: 1px solid var(--grey-900);
    outline-offset: 1px;
}

.roles-multi-select__error {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--legacy-d7373f);
    margin: 8px 0 0 0;
}