.component--2aljY {
    margin: 20px;
}

/*
Shared base styles

Projects consuming react-components are expected to include this early
as a shared artifact, any breaking changes to these styles should come
with a major version bump!
*/

/* Based on Whereby styleguide 1.0 */

/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */

:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}

:host,
:root {
    /* only use in video controls */
    --theme-color-video-controls-mute: var(--color-meeting-red);
    --theme-color-video-controls-mute-hover: var(--color-red);
    --theme-color-video-controls-mute-active: var(--color-red-dark);

    /* only use in base icon */
    --theme-color-icon-meeting-red: var(--color-meeting-red);
}

/* Shared reset */

html {
    color: var(--color-main-text);
    font-size: var(--font-size-normal);
    line-height: var(--font-line-height-normal);
}

html,
body {
    margin: 0;
    min-height: 100%;
    padding: 0;
    width: 100%;
}

body {
    font-family: "Inter", system-ui, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

strong,
h1,
h2,
h3,
h4,
h5,
h6 {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: var(--font-weight-bold);
}

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

button {
    cursor: pointer;
    font: inherit;
}

label {
    text-align: left;
}

/* --color-green @ opacity 0.12 */
/* --color-blue @ opacity 0.2 */
* {
    box-sizing: border-box;
}
body {
    font-family: var(--font-family-text);
    font-size: var(--font-size-normal);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}
@media (min-width: 1024px) {
body {
        overflow-y: scroll
}
    }
a {
    color: var(--color-primary);
}
img {
    max-width: 100%;
}
a img {
    border: none;
}
figure {
    margin: 0;
}
h1 {
    font-family: var(--font-family-headline);
    font-size: var(--font-size-headline-normal);
    font-weight: var(--font-weight-normal);
    line-height: var(--font-line-height-headline-normal);
}
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-sub-headline);
    font-weight: var(--font-weight-normal);
}
.app {
        min-height: 100vh;
        position: relative;
        z-index: 1;
    }
textarea {
        font-family: monospace;
    }
select, input {
        font-family: var(--font-family-text);
    }
input[type="range"] {
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
        margin: 18px 0;
        width: 100%;
    }
input[type="range"]::-moz-focus-outer {
        border: 0;
    }
input[type="range"]:focus {
        outline: none;
    }
input[type="range"]::-webkit-slider-runnable-track {
        background-color: var(--color-grey-extra-light);
        border-radius: var(--border-radius-small);
        cursor: pointer;
        height: 4px;
        width: 100%;
    }
input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
                appearance: none;
        background-color: var(--color-blue);
        border: 0;
        border-radius: 50%;
        cursor: pointer;
        height: 32px;
        margin-top: -14px;
        width: 32px;
    }
input[type="range"]:focus::-webkit-slider-thumb {
        background-color: var(--color-blue-dark);
    }
input[type="range"]::-moz-range-track {
        background-color: var(--color-grey-extra-light);
        border-radius: var(--border-radius-small);
        cursor: pointer;
        height: 4px;
        width: 100%;
    }
input[type="range"]::-moz-range-thumb {
        -moz-appearance: none;
             appearance: none;
        background-color: var(--color-blue);
        border: 0;
        border-radius: 50%;
        cursor: pointer;
        height: 32px;
        margin-top: -14px;
        width: 32px;
    }
input[type="range"]:focus::-moz-range-thumb {
        background-color: var(--color-blue-dark);
    }
/**
 * Spacing
 *
 * first letter = margin | padding
 * second letter = vertical | horizontal | left | right | top | bottom
 * third letter = small | medium | large
 * example: mrl = margin right large
 */
/* mv* */
.mvm {
        margin-bottom: var(--spacing-2);
        margin-top: var(--spacing-2);
    }
.mvs {
        margin-bottom: var(--spacing-4);
        margin-top: var(--spacing-4);
    }
.mvl {
        margin-bottom: var(--spacing-5);
        margin-top: var(--spacing-5);
    }
/* mh* */
.mhm {
        margin-left: var(--spacing-2);
        margin-right: var(--spacing-2);
    }
.mhs {
        margin-left: var(--spacing-4);
        margin-right: var(--spacing-4);
    }
.mhl {
        margin-left: var(--spacing-5);
        margin-right: var(--spacing-5);
    }
/* ml* */
.mls {
        margin-left: var(--spacing-2);
    }
.mlm {
        margin-left: var(--spacing-4);
    }
.mll {
        margin-left: var(--spacing-5);
    }
/* mr* */
.mrs {
        margin-right: var(--spacing-2);
    }
.mrm {
        margin-right: var(--spacing-4);
    }
.mrl {
        margin-right: var(--spacing-5);
    }
/* mt* */
.mts {
        margin-top: var(--spacing-2);
    }
.mtm {
        margin-top: var(--spacing-4);
    }
.mtl {
        margin-top: var(--spacing-5);
    }
/* mb* */
.mbs {
        margin-bottom: var(--spacing-2);
    }
.mbm {
        margin-bottom: var(--spacing-4);
    }
.mbl {
        margin-bottom: var(--spacing-5);
    }
/* pv* */
.pvm {
        padding-bottom: var(--spacing-2);
        padding-top: var(--spacing-2);
    }
.pvs {
        padding-bottom: var(--spacing-4);
        padding-top: var(--spacing-4);
    }
.pvl {
        padding-bottom: var(--spacing-5);
        padding-top: var(--spacing-5);
    }
/* ph* */
.phm {
        padding-left: var(--spacing-2);
        padding-right: var(--spacing-2);
    }
.phs {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }
.phl {
        padding-left: var(--spacing-5);
        padding-right: var(--spacing-5);
    }
/* pl* */
.pls {
        padding-left: var(--spacing-2);
    }
.plm {
        padding-left: var(--spacing-4);
    }
.pll {
        padding-left: var(--spacing-5);
    }
/* pr* */
.prs {
        padding-right: var(--spacing-2);
    }
.prm {
        padding-right: var(--spacing-4);
    }
.prl {
        padding-right: var(--spacing-5);
    }
/* pt* */
.pts {
        padding-top: var(--spacing-2);
    }
.ptm {
        padding-top: var(--spacing-4);
    }
.ptl {
        padding-top: var(--spacing-5);
    }
/* pb* */
.pbs {
        padding-bottom: var(--spacing-2);
    }
.pbm {
        padding-bottom: var(--spacing-4);
    }
.pbl {
        padding-bottom: var(--spacing-5);
    }
/**
    * Layout specific classes
    * Prefix of `l-` signifies a layout helper class
    */
.l-container {
        margin: 0 auto;
        max-width: 1200px;
        padding-left: 16px;
        padding-right: 16px;
        width: 100%;
    }
.l-container-xs {
        margin: 0 auto;
        max-width: 450px;
        padding-left: 16px;
        padding-right: 16px;
        width: 100%;
    }
.l-container-sm {
        margin: 0 auto;
        max-width: 650px;
        padding-left: 16px;
        padding-right: 16px;
        width: 100%;
    }
.l-grid {
        display: block;
    }
/* Grid does not have an effect on mobile */
@media (min-width: 768px) {
.l-grid {
            display: flex
    }
        }
/* .l-grid-cell must be direct child of .l-grid */
.l-grid > .l-grid-cell {
        flex: 1;
        /* Needed to maintain equal column width */
        overflow: hidden;
        padding: 10px;
    }
.l-grid > .l-grid-cell--no-padding {
            padding: 0;
        }
.l-grid--noWrap {
        align-items: flex-start;
    }
.l-grid--fill {
        justify-content: space-between;
    }
.l-grid--center {
        justify-content: center;
    }
.leftify {
        text-align: left;
    }
.no-wrap {
        white-space: nowrap;
    }

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.BaseIcon--nykwo {
    /* By default:
    - icon is responsive (100% wh SVG)
    - inherits the current color
    */
    fill: currentColor;

    /* - Size */
}
/* - Color */
.BaseIcon--dark--10BAW {
        fill: var(--color-black);
    }
.BaseIcon--light--32miK {
        fill: #fff;
    }
.BaseIcon--primary--1x9yJ {
        fill: var(--color-primary);
    }
.BaseIcon--secondary--1Wp05 {
        fill: var(--color-secondary);
    }
.BaseIcon--negative--1fOAD {
        fill: var(--color-negative);
    }
/* Special meeting red - used in room only */
.BaseIcon--meetingRed--3dxBd {
        fill: var(--theme-color-icon-meeting-red);
    }
/* Icons are designed to render as 24x24px square
       The 'sized' modifier sets the common icon size for convenience */
.BaseIcon--sized--2HpVD {
        height: 24px;
        width: 24px;
    }
/* Some special icons we render in a 16px container */
.BaseIcon--sizedSmall--2iLgZ {
        height: 16px;
        width: 16px;
    }

.Ellipsis--vertical--2znFF {
        transform: rotate(90deg);
    }
    .Ellipsis--light--2-KQ_ {
        -webkit-filter: drop-shadow(var(--drop-shadow-small));
                filter: drop-shadow(var(--drop-shadow-small));
    }

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.AnchorLink--14Ys5 {
    color: var(--color-primary);
    cursor: pointer;
}
.AnchorLink--disabled--1mIIB {
    color: var(--color-main-text);
    cursor: auto;
}

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
/* Base */
.Button--1SaIW {
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: var(--font-weight-medium);
    max-width: 100%;
    outline: none;
    overflow: hidden;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    transition: background-color var(--transition-button-hover);
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    white-space: nowrap;

    /* State */

    /* - disabled extraSmall, small, large filled button */

    /* stylelint-disable selector-max-specificity */
    /* stylelint-enable selector-max-specificity */
}
/* Size */
.Button--extraSmall--2BlAM {
        border-radius: 8px;
        font-size: var(--font-size-normal);
        line-height: 38px !important; /* 40 total including borders */
        padding: 0 16px;
    }
.Button--small--3wnJj {
        border-radius: 12px;
        font-size: var(--font-size-normal);
        line-height: 46px !important; /* 48 total including borders */
        padding: 0 16px;
    }
.Button--large--3zYYF {
        border-radius: 27px;
        font-size: var(--font-size-large);
        line-height: 54px !important; /* 56 total including borders */
        padding: 0 24px;
    }
.Button--extraLarge--30pGS {
        border-radius: 31px;
        font-size: var(--font-size-sub-headline-small);
        line-height: 62px !important; /* 64 total including borders */
        padding: 0 32px;
    }
/* Type */
.Button--primary--2uYEJ {
        background-color: var(--color-blue);
        border-color: var(--color-blue);
        color: var(--color-blue);
    }
.Button--primary--2uYEJ:hover,
        .Button--primary--2uYEJ:focus {
            background-color: var(--color-blue-dark);
            border-color: var(--color-blue-dark);
        }
.Button--primary--2uYEJ:active {
            background-color: var(--color-blue-extra-dark);
            border-color: var(--color-blue-extra-dark);
            color: var(--color-blue-extra-dark);
        }
.Button--secondary--28tue {
        background-color: var(--color-green);
        border-color: var(--color-green);
        color: var(--color-green);
    }
.Button--secondary--28tue:hover,
        .Button--secondary--28tue:focus {
            background-color: var(--color-green-dark);
            border-color: var(--color-green-dark);
            color: var(--color-green-dark);
        }
.Button--secondary--28tue:active {
            background-color: var(--color-green-extra-dark);
            border-color: var(--color-green-extra-dark);
            color: var(--color-green-extra-dark);
        }
.Button--negative--1Sx_2 {
        background-color: var(--color-red);
        border-color: var(--color-red);
        color: var(--color-red);
    }
.Button--negative--1Sx_2:hover,
        .Button--negative--1Sx_2:focus {
            background-color: var(--color-red-dark);
            border-color: var(--color-red-dark);
            color: var(--color-red-dark);
        }
.Button--negative--1Sx_2:active {
            background-color: var(--color-red-extra-dark);
            border-color: var(--color-red-extra-dark);
            color: var(--color-red-extra-dark);
        }
.Button--meetingRed--3jjyx {
        background-color: var(--color-meeting-red);
        border-color: var(--color-meeting-red);
        color: var(--color-meeting-red);
    }
/* Note: intentionally using regular red shades 1 stop removed:
            enabled for hover, hover for active.
            This works because special meeting red is just one stop
            brighter than regular red.
        */
.Button--meetingRed--3jjyx:hover,
        .Button--meetingRed--3jjyx:focus {
            background-color: var(--color-red);
            border-color: var(--color-red);
            color: var(--color-red);
        }
.Button--meetingRed--3jjyx:active {
            background-color: var(--color-red-dark);
            border-color: var(--color-red-dark);
            color: var(--color-red-dark);
        }
.Button--grey--1hpx_ {
        background-color: var(--color-grey);
        border-color: var(--color-grey);
        color: var(--color-grey);
    }
.Button--grey--1hpx_:hover,
        .Button--grey--1hpx_:focus {
            background-color: var(--color-grey-dark);
            border-color: var(--color-grey-dark);
            color: var(--color-grey-dark);
        }
.Button--grey--1hpx_:active {
            background-color: var(--color-grey-extra-dark);
            border-color: var(--color-grey-extra-dark);
            color: var(--color-grey-extra-dark);
        }
/* Scaling */
.Button--full--2OGKL {
        display: block;
        width: 100%;
    }
/* Fill */
.Button--filled--2Hlyo,
    .Button--filled--2Hlyo:hover,
    .Button--filled--2Hlyo:focus {
        border: 1px solid transparent;
        color: #fff;
    }
.Button--outlined--OfuEv,
    .Button--outlined--OfuEv:hover,
    .Button--outlined--OfuEv:focus {
        background-color: transparent;
    }
.Button--invisible--3urEL {
        border-color: transparent;
    }
.Button--invisible--3urEL,
    .Button--invisible--3urEL:hover,
    .Button--invisible--3urEL:focus {
        background-color: transparent;
    }
.Button--link--9VD1c {
        background: transparent;
        border: 0;
        color: inherit;
        font-size: inherit;
        -webkit-font-smoothing: unset;
        -moz-osx-font-smoothing: unset;
        font-weight: inherit;
        line-height: inherit;
        padding: 0;
        text-decoration: underline;
        -webkit-user-select: unset;
           -moz-user-select: unset;
            -ms-user-select: unset;
                user-select: unset;
    }
.Button--link--9VD1c:focus {
        outline: auto;
    }
/* State: disabled*/
.Button--disabled--3Igin {
        cursor: default;
    }
/* this concatenated set of various selectors is required since the .Button class is complex */
.Button--filled--2Hlyo.Button--large--3zYYF.Button--disabled--3Igin,
    .Button--filled--2Hlyo.Button--large--3zYYF.Button--disabled--3Igin:hover,
    .Button--filled--2Hlyo.Button--large--3zYYF.Button--disabled--3Igin:focus,
    .Button--filled--2Hlyo.Button--small--3wnJj.Button--disabled--3Igin,
    .Button--filled--2Hlyo.Button--small--3wnJj.Button--disabled--3Igin:hover,
    .Button--filled--2Hlyo.Button--small--3wnJj.Button--disabled--3Igin:focus,
    .Button--filled--2Hlyo.Button--extraSmall--2BlAM.Button--disabled--3Igin,
    .Button--filled--2Hlyo.Button--extraSmall--2BlAM.Button--disabled--3Igin:hover,
    .Button--filled--2Hlyo.Button--extraSmall--2BlAM.Button--disabled--3Igin:focus {
        background-color: var(--color-grey-extra-light);
        border-color: transparent;
        color: var(--color-grey);
    }
/* - disabled outlined button */
.Button--outlined--OfuEv.Button--disabled--3Igin,
    .Button--outlined--OfuEv.Button--disabled--3Igin:hover,
    .Button--outlined--OfuEv.Button--disabled--3Igin:focus {
        background-color: var(--color-grey-extra-light);
        border-color: var(--color-grey-dark);
        color: var(--color-grey);
    }
/* -disabled invisible button */
.Button--invisible--3urEL.Button--disabled--3Igin,
    .Button--invisible--3urEL.Button--disabled--3Igin:hover,
    .Button--invisible--3urEL.Button--disabled--3Igin:focus {
        border-color: transparent;
        color: var(--color-grey-dark);
    }
/* State: loading*/
.Button--loading--2kcxk {
        cursor: default;
        pointer-events: none;
    }
/* State: pulsating */
.Button--pulsating--1DhL- {
        -webkit-animation: pulsating--2HHU7 2s ease-out;
                animation: pulsating--2HHU7 2s ease-out;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
    }
.spinnerWrapper--1c-It {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.hiddenContent--1H8O4 {
    visibility: hidden;
}
@-webkit-keyframes pulsating--2HHU7 {
    0% {
        box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px;
    }

    25% {
        box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 0px 4px;
    }

    50% {
        box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 6px;
    }

    75% {
        box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px;
    }

    100% {
        box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px;
    }
}
@keyframes pulsating--2HHU7 {
    0% {
        box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px;
    }

    25% {
        box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 0px 4px;
    }

    50% {
        box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 6px;
    }

    75% {
        box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px;
    }

    100% {
        box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px;
    }
}

.InlineSpinner--3DJje {
    /* stylelint-disable unit-allowed-list */
    /* Since this is an _inline_ spinner it is important that it scales on font-size change */
    display: inline-block;
    height: 1em;
    line-height: 1em;
    vertical-align: sub;
    width: 1em;
    /* stylelint-enable unit-allowed-list */
}

.dot--3ei2p {
    -webkit-animation: spin-animation--1VXgt 1s infinite;
            animation: spin-animation--1VXgt 1s infinite;
    fill: var(--color-grey);
    fill-opacity: 0.3;
}

.dot--light--1XAuc {
        fill: #fff;
    }

.dot1--2LpIZ {
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
    fill-opacity: 0.9;
}

.dot2--OnnWB {
    -webkit-animation-delay: 0.125s;
            animation-delay: 0.125s;
}

.dot3--3ljqZ {
    -webkit-animation-delay: 0.25s;
            animation-delay: 0.25s;
}

.dot4--1rYIp {
    -webkit-animation-delay: 0.375s;
            animation-delay: 0.375s;
}

.dot5--2HxQ0 {
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
}

.dot6--1Qo_m {
    -webkit-animation-delay: 0.625s;
            animation-delay: 0.625s;
}

.dot7--Ngpvs {
    -webkit-animation-delay: 0.75s;
            animation-delay: 0.75s;
}

.dot8--1HD6G {
    -webkit-animation-delay: 0.875s;
            animation-delay: 0.875s;
}

@-webkit-keyframes spin-animation--1VXgt {
    0%,
    100% {
        fill-opacity: 0.3;
    }

    62.5% {
        fill-opacity: 0.3;
    }

    75% {
        fill-opacity: 0.9;
    }

    87.5% {
        fill-opacity: 0.65;
    }
}

@keyframes spin-animation--1VXgt {
    0%,
    100% {
        fill-opacity: 0.3;
    }

    62.5% {
        fill-opacity: 0.3;
    }

    75% {
        fill-opacity: 0.9;
    }

    87.5% {
        fill-opacity: 0.65;
    }
}

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.Avatar--LHGDe {
    background-color: var(--color-background-yellow);
    overflow: hidden;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.Avatar--round--1baYV {
        border-radius: 50%;
    }
.Avatar--square--1Vg6x {
        border-radius: var(--border-radius-small);
    }
.avatarImage--1RQju {
    height: 100%;
    max-width: none;
    max-width: initial;
    object-fit: cover;
    width: 100%;
}
.initials--3FX9H {
    height: 100%;
    pointer-events: none;
    width: 100%;
}
.initials--3FX9H text {
    fill: var(--color-main-text);
    font-weight: var(--font-weight-medium);
}

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.BackButton--2fVBm {
    align-items: center;
    background-color: transparent;
    border: none;
    border-radius: var(--border-radius-large);
    cursor: pointer;
    display: flex;
    height: 40px;
    justify-content: center;
    padding: 0;
    transition: background-color var(--transition-button-hover);
    width: 40px;
}
.BackButton--2fVBm:hover {
        background-color: var(--color-grey-extra-light);
    }
.BackButton--2fVBm:focus {
        background-color: var(--color-grey-light);
        outline: none;
    }

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.Callout--1Phjg {
    background: var(--color-background-info-blue);
    border: 1px solid var(--color-grey-extra-light);
    border-radius: var(--border-radius-small);
    font-size: var(--font-size-large);
    line-height: var(--font-line-height-large);
    padding: var(--spacing-5);
}
.Callout--warning--2Wntz {
        background: var(--color-background-warning-yellow);
    }
.Callout--error--1UHW0 {
        background: var(--color-background-error-red);
    }

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.Card--onWVv {
    background-color: #fff;
    border-radius: var(--border-radius-large);
    box-shadow: var(--drop-shadow-large);
    padding: var(--spacing-3);
}
@media (min-width: 768px) {
.Card--onWVv {
        padding: var(--spacing-5)
}
    }
.Card--small--2Y-ad {
    border-radius: var(--border-radius-small);
    box-shadow: var(--drop-shadow-small);
}
.Card--tight--3tP_c {
    padding: 0;
}

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.Checkbox--2JOe7 {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background-color: transparent;
    border: 2px solid var(--color-grey-light);
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    flex-shrink: 0;
    height: 24px;
    margin-right: var(--spacing-2);
    outline: none;
    width: 24px;
}
.Checkbox--2JOe7:focus {
    border-color: var(--color-primary);
}
/* Style the checbox checkmark */
.Checkbox--2JOe7:checked {
    /* stylelint-disable-next-line declaration-block-no-shorthand-property-overrides  */
    background: var(--color-blue)
        url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACCSURBVHgB7dRBCsAgDETRuam5uUfwCGmlWZSiqKWYUOaB4G7+QgSIiIiIolDVdJ5ynlzviMTi7gqiaMRVGRF04irBV96+nS1xNpQfA8PIbXE2VhpDCRHibFA6g8k9biXSLW4m0j1uItI/bjFS4GkQKYigEymIxCKzXn+lgIiIiH7lACzmFVMfpE2UAAAAAElFTkSuQmCC")
        center center no-repeat;
    background-color: var(--color-blue);
    background-size: 20px 20px;
    border-color: transparent;
}
.Checkbox--2JOe7:disabled {
    background-color: var(--color-grey-extra-light);
    border-color: transparent;
}
.Checkbox--2JOe7:checked:disabled {
    background-color: var(--color-grey-light);
    border-color: transparent;
}
.Checkbox--small--xjSl8 {
    height: 20px;
    width: 20px;
}
.CheckboxWrapper--NXU55 {
    display: flex;
}
.Checkbox--2JOe7 + .Label--20H8B {
    padding-top: 3px;
}
.Checkbox--small--xjSl8 + .Label--20H8B {
    padding-top: 2px;
}

.CircleBadge--IPF5E {
    background: var(--color-red);
    border-radius: 50%;
    box-shadow: var(--drop-shadow-small);
    color: #ffffff;
    font-family: var(--font-family-headline);
    font-size: 20px;
    height: 52px;
    line-height: var(--font-line-height-extra-small);
    margin: 0;
    padding-top: var(--spacing-1);
    text-align: center;
    width: 52px;
}

    @media (min-width: 768px) {.CircleBadge--IPF5E {
        font-size: var(--font-line-height-large);
        height: 64px;
        line-height: var(--font-line-height-small);
        width: 64px
}
    }

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.CloseButton--XcyHB {
    align-items: center;
    background-color: transparent;
    border: none;
    border-radius: var(--border-radius-large);
    cursor: pointer;
    display: flex;
    height: 40px;
    justify-content: center;
    padding: 0;
    transition: background-color var(--transition-button-hover);
    width: 40px;
}
.CloseButton--XcyHB:hover {
        background-color: var(--color-grey-extra-light);
    }
.CloseButton--XcyHB:focus {
        background-color: var(--color-grey-light);
        outline: none;
    }
.CloseButton--small--1TSHs {
        border-radius: var(--border-radius-small);
        height: 24px;
        margin: 8px;
        width: 24px;
    }

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.Container--QyYzt {
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}
.Container--medium--z3FYH,
.Container--sm--1FiRG {
    max-width: 400px;
}
.Container--large--3SGae,
.Container--md--27K0z {
    max-width: 560px;
}
.Container--lg--3UQZI {
    max-width: 800px;
}
.Container--xl--3N_xY {
    max-width: 960px;
}
.Container--page--EbU-k {
    max-width: var(--max-app-width);
    padding: 0 var(--spacing-3);
    width: 100%;
}
@media (min-width: 768px) {
.Container--page--EbU-k {
        padding: 0 var(--spacing-4)
}
    }
.Container--full--1jDq2 {
    padding: 0 var(--spacing-3);
    width: 100%;
}
@media (min-width: 768px) {
.Container--full--1jDq2 {
        padding: 0 var(--spacing-4)
}
    }

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.ContextualMenu--3MO9I {
    --z-index: 1;
    font-size: var(--font-size-small);

    height: 40px;
    position: relative;
    width: 40px;
    z-index: var(--z-index);
}
.ContextualMenu--open--33P2g {
    z-index: calc(var(--z-index) + 1);
}
.ContextualMenu--open--33P2g::after {
        background-color: rgba(0, 0, 0, 0.12);
        bottom: 0;
        content: "";
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
    }
.container--1DQZu {
    border: 1px solid transparent;
    border-radius: 3px;
    display: grid;
    grid-template-columns: [context-menu-buttons] auto [toggle-button] 40px;
    grid-template-rows: [main] auto;
    position: absolute;
    right: 0;
    top: 0;
    z-index: var(--z-index);
}
.ContextualMenu--open--33P2g .container--1DQZu {
        background-color: #fff;
        border-color: rgba(0, 0, 0, 0.12);
        box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
    }
.toggleButton--1SbG6 {
    align-items: center;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    grid-column: toggle-button;
    grid-row: main;
    height: 34px;
    justify-content: center;
    margin: 3px;
    position: relative;
    width: 34px;
}
.toggleButton--1SbG6:hover {
        background-color: rgba(255, 255, 255, 0.8);
    }
.ContextualMenu--noHover--2PK2Z .toggleButton--1SbG6:hover,
    .ContextualMenu--light--3zjGt .toggleButton--1SbG6:hover {
        background: none;
    }
.menu--1aY-l {
    grid-column: context-menu-buttons;
    grid-row: main;
}

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.Dialog--36Zd1 {
    --body-height: auto;
    --dialog-min-height: 0;
    --dialog-max-width: 424px;
    --dialog-text-align: center;
    --dialog-body-padding: var(--dialog-body-padding-v) var(--dialog-body-padding-h);
    --dialog-body-padding-h: var(--spacing-4);
    --dialog-body-padding-v: 20px;
    --dialog-footer-padding: var(--dialog-body-padding-v) var(--dialog-body-padding-h);

    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    padding: var(--spacing-2);

    position: fixed;
    right: 0;
    top: 0;
}
.Dialog--36Zd1:not(.overlayDisabled--Jszp5) {
        background: rgba(0, 0, 0, 0.3);
    }
.Dialog--36Zd1.fullscreen--2mD6i {
        --dialog-body-padding-h: 12px;
        --dialog-footer-padding: 12px;
        --dialog-max-width: 100%;

        padding: 0;
    }
.content--27a9F {
    background: #fff;
    border-radius: var(--border-radius-large);
    box-shadow: var(--drop-shadow-large);
    display: flex;
    flex-direction: column;
    max-height: 100%;
    max-width: var(--dialog-max-width);
    min-height: var(--dialog-min-height);
    overflow: hidden;
    position: relative;
    width: 100%;
}
.fullscreen--2mD6i .content--27a9F {
        border-radius: 0;
        box-shadow: unset;
        height: 100%;
    }
.closeButton--3mOr8 {
    position: absolute;
    right: var(--spacing-2);
    top: var(--spacing-2);
}
.Header--2SYFU {
    text-align: var(--dialog-text-align);
}
.Body--1Zg3j {
    flex-grow: 1;
    font-size: var(--font-size-normal);
    height: var(--body-height);
    margin: auto;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    padding: var(--dialog-body-padding);
    position: relative;
    text-align: var(--dialog-text-align);
    width: 100%;
}
.Footer--3_qNg {
    border-top: 1px solid var(--color-grey-light);
    max-width: var(--dialog-max-width);
    padding: var(--dialog-footer-padding);
    text-align: var(--dialog-text-align);
    width: 100%;
}

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.Footer--2Z5N8 {
    margin-top: var(--spacing-4);
    padding-bottom: var(--spacing-6);
    text-align: center;
}
@media (min-width: 768px) {
.Footer--2Z5N8 {
        text-align: left
}
    }
@media (min-width: 768px) {
.container--2KjR3 {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr
}
    }
.nav--qqhlR {
    margin-bottom: var(--spacing-7);
}
@media (min-width: 768px) {
.nav--qqhlR {
        margin-bottom: 0
}
    }
.nav--qqhlR:last-child {
        margin-bottom: 0;
    }
.navList--1S_KH {
    list-style: none;
    margin: 0;
    padding: 0;
}
.navTitle--2m0U1 {
    color: var(--color-grey-extra-dark);
    font-family: var(--font-family-sub-headline);
    font-size: var(--font-size-sub-headline-small);
    font-weight: var(--font-weight-normal);
    line-height: var(--font-line-height-sub-headline-small);
    margin: 0 0 var(--spacing-4);
}
.navItem--OWy2G {
    font-size: var(--font-size-normal);
    line-height: var(--font-line-height-normal);
    margin: var(--spacing-3) 0;
}
.navItem--OWy2G:first-child {
        margin-top: 0;
    }
.navItem--OWy2G:last-child {
        margin-bottom: 0;
    }
.navItemLink--34g0L {
    color: var(--color-black);
    display: block;
    text-decoration: none;
}
.navItemLink--34g0L:hover {
        text-decoration: underline;
    }
.button--1wORV {
    margin: 0 auto;
    max-width: 212px;
}
@media (min-width: 768px) {
.button--1wORV {
        margin: 0 0 var(--spacing-3)
}
    }

.iframe--3SfQN {
    border: 0;
    height: 100%;
    width: 100%;
}

.iframeWrapper--3f4sf {
    height: 100%;
    width: 100%;
}

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.IntrusiveTopbar--3PO9r {
    background: var(--color-background-info-blue);
    color: var(--color-black);
    padding: 8px 52px;
    position: relative;
    text-align: center;
    width: 100%;
}
.IntrusiveTopbar--error--1rq0r {
        background: var(--color-background-error-red);
    }
.IntrusiveTopbar--warning--1577F {
        background: var(--color-background-warning-yellow);
    }
.content--2GsGC {
    align-items: center;
    display: flex;
    font-size: var(--font-size-small);
    justify-content: center;
    line-height: var(--font-line-height-small);
    min-height: 40px;
}
.closeButton--1ThzC {
    position: absolute;
    right: 8px;
    top: 8px;
}

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.Logo--1kOGe {
    fill: var(--color-black);
}
.Logo--light--1VJ6d {
        fill: #fff;
    }
.Wordmark--2UzHn {
    height: 22px;
    width: 86px;
}
.Wordmark--2UzHn.Logo--large--1oiy4 {
        height: 34px;
        width: auto;
    }
.Monogram--1sc3N {
    height: 22px;
    width: 26px;
}

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.Menu--2jORr {
    background-color: #fff;
    border-radius: var(--border-radius-small);
    box-shadow: var(--drop-shadow-small);
    display: inline-flex;
    flex-direction: column;

    font-size: var(--font-size-small);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: var(--font-weight-medium);
    overflow: hidden;
}

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.MenuDivider--2TKdR {
    background: var(--color-grey-extra-light);
    height: 1px;
    width: 100%;
}

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.itemLink--3-mxC {
    color: var(--color-main-text);
    text-decoration: none;
}
.itemButton--mYgC6 {
    background-color: transparent;
    border: none;
}
.itemLink--3-mxC,
.itemButton--mYgC6 {
    align-items: stretch;

    cursor: pointer;
    display: flex;
    height: 40px;
    line-height: 40px;
    min-width: 140px;
    padding: 0 12px;
    text-align: left;
    white-space: nowrap;
    width: 100%;
}
.itemLink--3-mxC:hover, .itemButton--mYgC6:hover {
        background-color: var(--color-background-grey);
    }
.itemLink--3-mxC:focus, .itemButton--mYgC6:focus {
        background-color: var(--color-grey-extra-light);
        outline: none;
    }
.itemLink--3-mxC.disabled--3flt2, .itemButton--mYgC6.disabled--3flt2 {
        color: var(--color-grey);
        pointer-events: none;
    }
.iconWrapper--cDhnU {
    align-items: center;

    display: flex;
    flex-shrink: 0;
    height: var(--spacing-3);
    justify-content: center;
    margin: 12px 12px 12px 0;
    width: var(--spacing-3);
}
.contentWrapper--PrRpr {
    flex-grow: 1;
}
.accessoryWrapper--1tWEu {
    align-items: center;

    display: flex;
    flex-shrink: 0;
    justify-content: center;

    margin-left: 12px;
    min-width: var(--spacing-3);
}

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.PageNav--3Nz5H {
    font-size: var(--font-size-large);
    line-height: var(--font-line-height-large);
    margin-bottom: var(--spacing-3);
    padding-top: var(--spacing-4); /* Padding instead of marging b/c custom background not applied to body */
    position: relative;
}
@media (min-width: 768px) {
.PageNav--3Nz5H {
        align-items: center;
        display: flex;
        justify-content: space-between
}
    }
.container--2Z-rM {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 56px;
}
.logoContainer--8txGz {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-width: 235px;
}
.logoLink--2PXIC {
    align-items: center;

    display: flex;
    height: 100%;
    justify-content: center;
    margin: 0;
    padding: 0;
    text-decoration: none;
}
.logoLarge--TDey_ {
    height: 30px;
    width: 117px;
}
.logoImg--2vlSS {
    display: none;
    flex: 0 1;
    height: 40px;
    margin-right: var(--spacing-2);
    position: relative;
    width: auto;
}
@media (min-width: 768px) {
.logoImg--2vlSS {
        display: block
}
    }
.logoText--2-d_R {
    align-self: center;
    color: var(--color-black);
}
@media (min-width: 768px) {
.logoText--2-d_R {
        font-size: var(--font-size-large);
        line-height: var(--font-line-height-large)
}
    }
.nav--m_mHK {
    align-items: center;
    display: flex;
    /* reset ul */
    list-style: none;
    margin: var(--spacing-2) 0 0;
    max-height: 0;
    overflow: hidden;

    /* Make room for sub menu shadow */
    padding: 0 var(--spacing-1);
    transition: max-height 0.3s ease;
    width: calc(100% + var(--spacing-1));
}
@media (min-width: 768px) {
.nav--m_mHK {
        flex-direction: row;

        margin: 0;
        max-height: 1000px; /* Some obscure high number for animation purposes */
        padding: 0;
        width: auto
}
    }
.nav--isOpen--3NOMA {
        flex-direction: column;
        max-height: 1000px; /* Some obscure high number for animation purposes */
        text-align: right;
    }
/*
         * For the case when the mobile nav is opened and the user
         * returns to desktop mode
         */
@media (min-width: 768px) {
.nav--isOpen--3NOMA {
            flex-direction: row;
            text-align: left
    }
        }
.nav--isClosing--OFV4q {
        max-height: 0;
    }
.navItem--2KZEL {
    width: 100%;
}
@media (min-width: 768px) {
.navItem--2KZEL {
        display: flex;
        margin-bottom: 0;
        margin-left: var(--spacing-4);
        width: auto
}
    }
@media (min-width: 1024px) {
.navItem--2KZEL {
        margin-left: var(--spacing-6)
}
    }
@media (min-width: 768px) {
.navItem--small-spacing--1ndh9 {
            margin-left: var(--spacing-3)
    }
        }
@media (min-width: 1024px) {
.navItem--small-spacing--1ndh9 {
            margin-left: var(--spacing-5)
    }
        }
@media (min-width: 768px) {
.navItem--mobile--2B9ze {
        display: none
}
    }
.navLink--VVqDz {
    color: var(--color-black);
    display: block;
    padding: var(--spacing-3);
    text-decoration: none;
    width: 100%;
}
@media (min-width: 768px) {
.navLink--VVqDz {
        padding: 0;
        width: auto
}
    }
.navLink--login--3gBSi {
        color: var(--color-blue);
    }
.navLink--avatar--33ck0 {
    display: none;
}
@media (min-width: 768px) {
.navLink--avatar--33ck0 {
        align-items: center;
        display: flex;
        justify-content: normal
}
    }
.avatarTitle--4uAG9 {
    margin-right: var(--spacing-3);
}
.avatarOutlined--3M7ps {
    border: 1px solid var(--color-grey-extra-light);
}
.DropdownNavItem--2tv_a {
    border: 1px solid var(--dropdown-nav-item-border-color);
    border-radius: var(--border-radius-small);
    box-sizing: border-box;
    color: var(--dropdown-nav-item-color);
    font-size: var(--font-size-large);
    line-height: 46px;
    padding: 0 var(--spacing-3);
}
.DropdownNavItem-buttonArrow--259tI {
        fill: var(--dropdown-nav-item-button-arrow-fill);
        margin-left: var(--spacing-3);
        position: relative;
        top: 2px;
        transform: rotate(270deg);
    }
.ListItemWithSubMenu--22fET {
    --dropdown-nav-item-border-color: transparent;
    --dropdown-nav-item-color: var(--color-black);
    --dropdown-nav-item-button-arrow-fill: var(--color-grey);
}
.ListItemWithSubMenu--desktop--3x7n5 {
        display: none;
    }
@media (min-width: 768px) {
.ListItemWithSubMenu--desktop--3x7n5 {
            display: block
    }
        }
.ListItemWithSubMenu--desktop--3x7n5:hover {
            --dropdown-nav-item-border-color: var(--color-grey-extra-dark);
            --dropdown-nav-item-color: var(--color-grey-extra-dark);
            --dropdown-nav-item-button-arrow-fill: var(--color-grey-extra-dark);
        }
.ListItemWithSubMenu--mobile--1pgxK {
        width: 100%;
    }
@media (min-width: 768px) {
.ListItemWithSubMenu--mobile--1pgxK {
            display: none
    }
        }
@media (min-width: 768px) {
.dropdown--3eQY3 {
        padding-top: var(--spacing-2);
        position: absolute;
        /*
            Logo (and therefore pagenav) = 56px
            Menu items height = 48px
            We need to move the menu up 8px/2
        */
        top: calc(100% - 4px);
        transform: translate3d(calc(-1 * var(--spacing-2)), 0, 0);
        z-index: 2
}
    }
.ListItemWithSubMenu--desktop--3x7n5 .dropdown--3eQY3 {
        display: none;
    }
.ListItemWithSubMenu--desktop--3x7n5:hover .dropdown--3eQY3 {
        display: block;
    }
.SubMenu--2Zxcu {
    background-color: #fff;
    border-radius: var(--border-radius-small);
    box-shadow: var(--drop-shadow-small);
    display: flex;
    min-width: 220px;
    padding: 0 var(--spacing-3);
    text-align: left;
}
.SubMenu-wrapper--1oKGE {
    list-style: none;
    padding: 0;
    text-align: right;
    width: 100%;
}
@media (min-width: 768px) {
.SubMenu-wrapper--1oKGE {
        text-align: left
}
    }
.SubMenu-item--3tkfD {
    padding: var(--spacing-3) 0;
    width: 100%;
}
@media (min-width: 768px) {
.SubMenu-item--3tkfD:hover {
            font-weight: var(--font-weight-medium)
    }
        }
@media (min-width: 768px) {
.SubMenu-item--3tkfD:hover:before {
                content: "→";
                margin-right: var(--spacing-1)
        }
            }
.SubMenu-label--C3xnF {
    color: var(--color-grey);
    flex-grow: 1;
    font-size: var(--font-size-large);
    padding: var(--spacing-3) 0;
}
@media (min-width: 768px) {
.SubMenu-label--C3xnF {
        display: none
}
    }

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.hamburgerButton--1GNRu {
    --size: 40px;
    align-items: center;
    background: transparent;
    border: none;

    border-radius: 4px;

    display: flex;

    height: calc(var(--size) + var(--spacing-2));
    justify-content: center;
    margin-right: calc(var(--spacing-2) * -1); /* Allow icon to light up with container */

    /* Reset */
    padding: 0;
    transition: background var(--transition-button-hover);
    width: calc(var(--size) + var(--spacing-2));
}
@media (min-width: 768px) {
.hamburgerButton--1GNRu {
        display: none
}
    }
.hamburgerButton--1GNRu:hover {
        background-color: var(--color-grey-extra-light);
    }
.hamburgerButton--1GNRu:focus {
        background-color: var(--color-grey-light);
        outline: none;
    }
.hamburgerIcon--36Z4K {
    cursor: pointer;
    height: 21px;
    position: relative;
    transform: rotate(0deg);
    transition: 0.5s ease-in-out;
    width: 32px;
}
.hamburgerIcon--36Z4K span {
        background: var(--color-black);
        border-radius: 3px;
        display: block;
        height: 3px;
        left: 0;
        opacity: 1;
        position: absolute;
        transform: rotate(0deg);
        transition: 0.25s ease-in-out;
        width: 100%;
    }
.hamburgerIcon--36Z4K span:nth-child(1) {
        top: 0px;
    }
.hamburgerIcon--36Z4K span:nth-child(2),
    .hamburgerIcon--36Z4K span:nth-child(3) {
        top: 9px;
    }
.hamburgerIcon--36Z4K span:nth-child(4) {
        top: 18px;
    }
.hamburgerIcon--open--1Aow1 span:nth-child(1) {
        left: 50%;
        top: 9px;
        width: 0%;
    }
.hamburgerIcon--open--1Aow1 span:nth-child(2) {
        transform: rotate(45deg);
    }
.hamburgerIcon--open--1Aow1 span:nth-child(3) {
        transform: rotate(-45deg);
    }
.hamburgerIcon--open--1Aow1 span:nth-child(4) {
        left: 50%;
        top: 9px;
        width: 0%;
    }

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.PhoneInput--sQ1Yt {
    background-color: #fff;
    border: 1px solid var(--color-grey-extra-light);
    border-radius: var(--border-radius-large);
    box-shadow: inset 0 0 0 1px transparent;
    box-sizing: border-box;
    color: var(--color-main-text);

    display: flex;
    flex-flow: row nowrap;

    /* Defaults to large variant */
    font-size: var(--font-size-large);
    line-height: var(--font-line-height-large);
    padding: 6px var(--spacing-3); /* intentional non-standard spacing */
    width: 100%;
}
.PhoneInput--sQ1Yt:hover {
        border: 1px solid var(--color-grey-light);
    }
.PhoneInput--sQ1Yt:focus-within {
        border: 1px solid var(--color-primary);
        box-shadow: inset 0 0 0 1px var(--color-primary);
    }
/* Size  */
.PhoneInput--small--XRt-g {
        font-size: var(--font-size-normal);
        line-height: var(--font-line-height-normal);
        padding: 2px 20px; /* intentional non-standard spacing */
    }
/* State */
.PhoneInput--disabled--1R3fP,
    .PhoneInput--disabled--1R3fP:hover,
    .PhoneInput--disabled--1R3fP:focus-within {
        background-color: var(--color-background-grey);
        border-color: var(--color-grey-extra-light);
        box-shadow: none;
        color: var(--color-grey);
        cursor: default;
    }
.PhoneInput--error--193Kv,
    .PhoneInput--error--193Kv:hover,
    .PhoneInput--error--193Kv:focus-within {
        border: 1px solid var(--color-red);
        box-shadow: inset 0 0 0 1px var(--color-red);
        color: var(--color-red);
    }
.input--odfz2 {
    background-color: inherit;
    border: 0;
    color: inherit;
    flex: 1 1;

    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    outline: none;
    padding: 0;
    width: 100%;
}
.input--odfz2::-moz-placeholder {
        box-shadow: none;
        color: var(--color-grey);
        font-size: var(--font-size-large);
        font-weight: inherit;
    }
.input--odfz2::-ms-input-placeholder {
        box-shadow: none;
        color: var(--color-grey);
        font-size: var(--font-size-large);
        font-weight: inherit;
    }
&::-webkit-input-placeholder {
        box-shadow: none;
        color: var(--color-grey);
        font-size: var(--font-size-large);
        font-weight: inherit;
    }
&::-moz-placeholder {
        box-shadow: none;
        color: var(--color-grey);
        font-size: var(--font-size-large);
        font-weight: inherit;
    }
&::-ms-input-placeholder {
        box-shadow: none;
        color: var(--color-grey);
        font-size: var(--font-size-large);
        font-weight: inherit;
    }
.input--odfz2::placeholder {
        box-shadow: none;
        color: var(--color-grey);
        font-size: var(--font-size-large);
        font-weight: inherit;
    }
.PhoneInput--small--XRt-g .input--odfz2::-moz-placeholder {
        font-size: var(--font-size-normal);
    }
.PhoneInput--small--XRt-g .input--odfz2::-ms-input-placeholder {
        font-size: var(--font-size-normal);
    }
.PhoneInput--small--XRt-g &::-webkit-input-placeholder {
        font-size: var(--font-size-normal);
    }
.PhoneInput--small--XRt-g &::-moz-placeholder {
        font-size: var(--font-size-normal);
    }
.PhoneInput--small--XRt-g &::-ms-input-placeholder {
        font-size: var(--font-size-normal);
    }
.PhoneInput--small--XRt-g .input--odfz2::placeholder {
        font-size: var(--font-size-normal);
    }
.dropdown--1L5-Y {
    --chevron-size: var(--spacing-4);
    background-image: url(https://d32wid4gq0d4kh.cloudfront.net/93bb7c6a5aba65109047f42ca51f9d95.svg);
    background-position: 100% 50%;
    background-repeat: no-repeat;
    background-size: var(--chevron-size);
    border: none;
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    height: 44px;
    margin-right: var(--spacing-3);
    padding-right: calc(var(--chevron-size) + var(--spacing-2));
    position: relative;
}
.select--2iCZZ {
    /* Reset <select> appearance to be able to resize it in Safari */
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    cursor: inherit;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.callingCode--2rsL2 {
    align-items: center;
    display: flex;
    pointer-events: none;
}

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.InputWrapper--2GZ7G {
    --helptext-color: var(--color-grey);
    --label-color: var(--color-main-text);
    color: var(--color-main-text);

    cursor: text;
    display: block;
    font-family: inherit;
    font-size: var(--font-size-normal);
    line-height: var(--font-line-height-normal);
    max-width: 100%;
    position: relative;
}
.InputWrapper--error--zGdf_ {
        --helptext-color: var(--color-red);
    }
.InputWrapper--disabled--3G3PP {
        --label-color: var(--color-grey);
    }
.helpText--2n27y {
    color: var(--helptext-color);
    cursor: inherit;
    display: block;
    font-size: var(--font-size-normal);
    line-height: 22px; /* intentional non-standard spacing */
    margin: var(--spacing-2) 0 0 0;
}
.labelText--1dfAn {
    color: var(--label-color);
    cursor: inherit;
    font-weight: var(--font-weight-medium);
    margin-bottom: 10px; /* intentional non-standard spacing */
}

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.PlanContainer--3qSsg {
    display: grid;
    grid-row-gap: var(--spacing-7);
    grid-template-columns: 1fr;
    margin-bottom: var(--spacing-9);
    position: relative;
    z-index: 1;
}
@media (min-width: 1024px) {
.PlanContainer--3qSsg {
        grid-column-gap: var(--spacing-5);
        grid-row-gap: 0;
        grid-template-columns: repeat(3, 1fr);
        margin-bottom: var(--spacing-6)
}
    }
@media (min-width: 1024px) {
.PlanContainer--size1--3-X6f {
        grid-template-columns: repeat(1, 1fr)
}
    }
@media (min-width: 1024px) {
.PlanContainer--size2--3ZWu3 {
        grid-template-columns: repeat(2, 1fr)
}
    }

.content--3CLQ2 {
    border-radius: inherit;
    padding: var(--spacing-5) var(--spacing-4);
}

.priceContainer--2lYsx {
    display: grid;
    grid-row-gap: var(--spacing-2);
    grid-template-columns: auto;
    grid-template-rows:
        [from] var(--font-line-height-small)
        [price] var(--font-line-height-headline-small);
    padding: var(--spacing-2);
}

@media (min-width: 768px) {

.priceContainer--2lYsx {
        grid-template-rows:
            [from] var(--font-line-height-normal)
            [price] var(--font-size-headline-normal)
}
    }

.smallLabel--3ga4l {
    font-size: var(--font-size-small);
    grid-row: from;
    line-height: var(--font-line-height-small);
    text-align: center;
}

@media (min-width: 768px) {

.smallLabel--3ga4l {
        font-size: var(--font-size-normal);
        line-height: var(--font-line-height-normal)
}
    }

.priceRow--1QARY {
    align-items: center;
    display: flex;
    grid-row: price;
    justify-content: center;
}

.currency--15b7h {
    font-weight: var(--font-weight-normal);
    margin-right: var(--spacing-2);
}

.cost--2RGwt {
    font-family: var(--font-family-headline);
    font-size: var(--font-size-headline-small);
    font-weight: var(--font-weight-normal);
    line-height: var(--font-line-height-headline-small);
    margin-right: var(--spacing-2);
}

@media (min-width: 768px) {

.cost--2RGwt {
        font-size: var(--font-size-headline-normal);
        line-height: var(--font-line-height-headline-normal)
}
    }

.title--ALa7a {
    font-family: var(--font-family-headline);
    font-size: var(--font-size-headline-small);
    font-weight: var(--font-weight-normal);
    line-height: var(--font-line-height-headline-small);
    margin: 0 0 var(--spacing-6);
    text-align: center;
}

.Plan--free--1BZ7P .title--ALa7a {
        color: var(--color-red);
    }

.Plan--pro--2EP5T .title--ALa7a {
        color: var(--color-blue);
    }

.Plan--business--2WPD0 .title--ALa7a {
        color: var(--color-green);
    }

.mainPoint--3pQaM {
    margin-bottom: var(--spacing-6);
}

.Plan--free--1BZ7P .mainPoint--3pQaM {
        margin-bottom: var(--spacing-4);
    }

.features--3bHKx {
    border-top-left-radius: unset;
    border-top-right-radius: unset;
}

.Plan--pro--2EP5T .features--3bHKx {
        background-color: var(--color-background-yellow);
    }

.Plan--business--2WPD0 .features--3bHKx {
        background-color: var(--color-background-grey);
    }

.featureList--1xfHV {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.featureListItem--3tHeu {
    font-family: var(--font-family-sub-headline);
    font-size: var(--font-size-large);
    line-height: var(--font-line-height-sub-headline-small);
    margin-bottom: var(--spacing-4);
}

@media (min-width: 768px) {

.featureListItem--3tHeu {
        font-size: var(--font-size-sub-headline-small)
}
    }

.featureListItem--3tHeu:last-of-type {
        margin-bottom: 0;
    }

.featureDescription--3jOgA {
    color: var(--color-grey);
    font-family: var(--font-family-text);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-normal);
    line-height: var(--font-line-height-small);
    margin-top: var(--spacing-2);
}

@media (min-width: 768px) {

.featureDescription--3jOgA {
        font-size: var(--font-size-normal);
        line-height: var(--font-line-height-normal)
}
    }

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.ProgressBar--3ucDW {
    height: 8px;
    overflow: hidden;

    position: relative;
    width: 100%;
}
.background--29UIp {
    background-color: var(--color-secondary);
    bottom: 0;
    left: 0;
    opacity: 0.2;
    position: absolute;
    right: 0;
    top: 0;
}
.indicator--3z2AK {
    background-color: var(--color-secondary);
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
}
.indicator--3z2AK:not(.full--v6Md0) {
        border-bottom-right-radius: 4px;
        border-top-right-radius: 4px;
    }

.trackContainer--17vE8 {
    display: flex;
    height: 36px;
    width: 100%;
}

.track--3s0JG {
    --background-filled: var(--color-green);
    --background-empty: var(--color-grey-extra-light);

    align-self: center;
    border-radius: var(--border-radius-small);
    height: 5px;
    width: 100%;
}

.track--disabled--2QPgj {
        --background-filled: var(--color-grey);
    }

.draggableThumb--X-A9J {
    align-items: center;
    background-color: #ffffff;
    border: 1px solid var(--color-green);
    border-radius: 50px;
    box-shadow: var(--drop-shadow-small);
    display: flex;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.draggableThumb--disabled--3M4_J {
        border-color: var(--color-grey);
    }

.bubble--2gLCP {
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
    color: var(--color-green);
    font-size: 14px;
    font-weight: bold;
    height: 28px;
    left: 50%;
    line-height: 24px;
    padding: 3px 0 0;
    position: absolute;
    text-align: center;
    top: -38px;
    transform: translate(-50%, 0);
    width: 30px;
}

.bubble--disabled--TIwI5 {
        color: var(--color-grey);
    }

.bubble--2gLCP:before {
    border-color: transparent #fff #fff transparent;
    border-style: solid;
    border-width: 5px;
    bottom: -4px;
    box-shadow: rgba(0, 0, 0, 0.08) 2px 2px 2px;
    content: "";
    left: 10px;
    position: absolute;
    transform: rotate(45deg);
}

.minMax--1v7w0 {
    display: flex;
    justify-content: space-between;
    margin: 0 var(--spacing-3) calc(var(--spacing-5) * -1) var(--spacing-3);
}

.min--MGdI_,
.max--1vNw8 {
    color: var(--color-grey);
    font-size: var(--font-size-normal);
    margin: 0;
    visibility: visible;
}

.min--MGdI_.isHidden--_BwiV, .max--1vNw8.isHidden--_BwiV {
        visibility: hidden;
    }

.rangeContainer--2Jyiw {
    background: var(--color-background-grey);
    border-radius: var(--border-radius-large);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: var(--spacing-3) var(--spacing-3) var(--spacing-2);
}

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.RadioButton--2vavE {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: var(--font-size-normal);
    line-height: var(--font-line-height-normal);
    padding: 0 var(--spacing-2);
}
.RadioButton--2vavE:focus {
        border-color: var(--color-blue);
        border-style: solid;
        border-width: 1px;
    }
.RadioButton--checked--29Mep:focus {
        border-color: var(--color-blue-dark);
    }
.radioInput--39pbd {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background: none;
    border: none;
    margin: 0;
    outline: none;
    padding: 0;
}
.radioMirror--31ra9 {
    background-color: #fff;
    border: 2px solid var(--color-grey-light);
    border-radius: 50%;
    box-sizing: border-box;
    height: 24px;
    margin-right: var(--spacing-3);
    width: 24px;
}
.radioInput--39pbd:checked + .radioMirror--31ra9 {
    border: 8px solid var(--color-primary);
}

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.Select--3lK8G {
    /* Override select styling: https://github.com/filamentgroup/select-css */
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;

    background-color: #fff;

    background-image: url(https://d32wid4gq0d4kh.cloudfront.net/93bb7c6a5aba65109047f42ca51f9d95.svg);
    /* Defaults to large variant */
    background-position: right 12px center;
    background-repeat: no-repeat;
    border: 1px solid var(--color-grey-extra-light);
    border-radius: var(--border-radius-large);
    box-shadow: inset 0 0 0 1px transparent;
    box-sizing: border-box;
    color: var(--color-main-text);
    cursor: pointer;
    font-size: var(--font-size-large);
    line-height: var(--font-line-height-large);
    outline: none;
    /* 44px right margin: h padding + 24px icon + 8px divider */
    padding: 15px 44px 15px 20px; /* intentional non-standard spacing */
    width: 100%;
}
.Select--3lK8G:hover {
        border: 1px solid var(--color-grey-light);
    }
.Select--3lK8G:focus {
        background-color: #fff;
        border: 1px solid var(--color-primary);
        box-shadow: inset 0 0 0 1px var(--color-primary);
    }
.Select--error--1Xup_,
    .Select--error--1Xup_:hover,
    .Select--error--1Xup_:focus {
        border: 1px solid var(--color-red);
        box-shadow: inset 0 0 0 1px var(--color-red);
    }
.Select--disabled--2ZrOL,
    .Select--disabled--2ZrOL:hover,
    .Select--disabled--2ZrOL:focus,
    .Select--3lK8G:disabled,
    .Select--3lK8G:disabled:hover,
    .Select--3lK8G:disabled:focus {
        background-color: var(--color-background-grey);
        border-color: var(--color-grey-extra-light);
        box-shadow: none;
        color: var(--color-grey);
        cursor: default;
    }
/* Size  */
.Select--small--qPQmR {
        background-position: right 12px center;
        font-size: var(--font-size-normal);
        line-height: var(--font-line-height-normal);
        padding: 12px 44px 12px var(--spacing-3);
    }
/* Overlay */
.relativeWrapper--35L8a {
    position: relative;
}
/* Allows injecting arbritary content above the select. Meant to be used to add
icons. Expected the parent component will also pass in custom style overrides
for the select using selectClassName prop to adjust paddings based on content!
*/
.overlayWrapper--k5BYH {
    background: transparent;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
}
/* hack to prevent it from being selectable, but still visible in it's intial state */
.placeholder--2BsBA {
    display: none;
}

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.SliderWrapper--oWODB {
    --slider-max-width: 400px;
    --slider-thumb-size: 14px;
    --slider-thumb-color: var(--color-primary);
    --slider-focus-ring-color: var(--color-grey-extra-light);
    --slider-height: 28px; /* 32 px with the 2px outline */
    --slider-track-height: 6px;
    --slider-track-border-radius: 6px;
    --slider-track-color: var(--slider-thumb-color);
    --slider-track-disabled-color: var(--color-grey-light);
    border-radius: var(--border-radius-extra-small);
    height: var(--slider-height);
    margin: 2px;
    max-width: var(--slider-max-width);
    padding: 0 var(--spacing-1);

    position: relative;
}
.SliderWrapper--oWODB:focus-within {
        box-shadow: 0px 0px 0px 2px var(--slider-focus-ring-color);
    }
.tracksWrapper--1WGH7 {
    left: 0;

    padding: 0 var(--spacing-1);
    position: absolute;
    top: 0;
    width: 100%;
}
.tracks--26JaM {
    height: var(--slider-height);
    position: relative;
    width: 100%;
}
.track--1oJ6B {
    background: var(--color-grey-extra-light);
    border-radius: var(--slider-track-border-radius);
    height: var(--slider-track-height);
    left: 0;
    position: absolute;
    top: calc((var(--slider-height) - var(--slider-track-height)) / 2);
    width: 100%;
}
.lower--2H2xQ {
    background: var(--slider-track-color);
}
.range--3aDFr {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    height: var(--slider-height);
    left: 0;
    margin: 0;
    outline: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
.range--3aDFr::-webkit-slider-thumb {
        -webkit-appearance: none;
                appearance: none;
        background: var(--slider-thumb-color);
        border: 0;
        border-radius: 50%;
        height: var(--slider-thumb-size);

        width: var(--slider-thumb-size);
    }
.range--3aDFr::-moz-range-thumb {
        background: var(--slider-thumb-color);
        border: 0;
        border-radius: 50%;
        height: var(--slider-thumb-size);
        width: var(--slider-thumb-size);
    }
.range--3aDFr::-moz-focus-outer {
        border: 0;
    }
.range--3aDFr:focus {
        outline: none;
    }
.SliderWrapper--oWODB.disabled--3CaCN .range--3aDFr {
        cursor: unset;
    }
.SliderWrapper--oWODB.disabled--3CaCN .range--3aDFr::-webkit-slider-thumb {
            background: transparent;
        }
.SliderWrapper--oWODB.disabled--3CaCN .range--3aDFr::-moz-range-thumb {
            background: transparent;
        }
.SliderWrapper--oWODB.disabled--3CaCN .lower--2H2xQ {
        background: var(--slider-track-disabled-color);
    }

.Spinner--1nm_v {
    align-items: center;
    display: flex;
    font-size: 50px;
    height: 210px;
    justify-content: center;
    width: 100%;
}

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.TextInput--30Xq9 {
    background-color: #fff;
    border: 1px solid var(--color-grey-extra-light);
    border-radius: var(--border-radius-large);
    box-shadow: inset 0 0 0 1px transparent;
    box-sizing: border-box;
    color: var(--color-main-text);

    display: flex;
    flex-flow: row nowrap;

    /* Defaults to large variant */
    font-size: var(--font-size-large);
    line-height: var(--font-line-height-large);
    padding: 15px var(--spacing-3); /* intentional non-standard spacing */
    width: 100%;
}
.TextInput--30Xq9:hover {
        border: 1px solid var(--color-grey-light);
    }
.TextInput--30Xq9:focus-within {
        border: 1px solid var(--color-primary);
        box-shadow: inset 0 0 0 1px var(--color-primary);
    }
/* Size  */
.TextInput--small--1yR_c {
        font-size: var(--font-size-normal);
        line-height: var(--font-line-height-normal);
        padding: 12px 20px; /* intentional non-standard spacing */
    }
/* Variants */
.TextInput--withIcon--11LfQ.TextInput--small--1yR_c {
        padding: 12px;
    }
/* State */
.TextInput--disabled--HZAt5,
    .TextInput--disabled--HZAt5:hover,
    .TextInput--disabled--HZAt5:focus-within {
        background-color: var(--color-background-grey);
        border-color: var(--color-grey-extra-light);
        box-shadow: none;
        color: var(--color-grey);
        cursor: default;
    }
.TextInput--error--2CudN,
    .TextInput--error--2CudN:hover,
    .TextInput--error--2CudN:focus-within {
        border: 1px solid var(--color-red);
        box-shadow: inset 0 0 0 1px var(--color-red);
        color: var(--color-red);
    }
.TextInput--filled--379xb,
    .TextInput--filled--379xb:hover,
    .TextInput--filled--379xb:focus-within {
        border: 1px solid var(--color-green);
        box-shadow: inset 0 0 0 1px var(--color-green);
        color: var(--color-green);
    }
.iconWrapper--3e_kM {
    flex: 0 0 auto;
    height: 24px;
    margin: 1px 12px 1px 0; /* intentional non-standard spacing */
    width: 24px;
}
.TextInput--withIcon--11LfQ.TextInput--small--1yR_c .iconWrapper--3e_kM {
        /* Undo inherited top and bottom icon wrapper paddings */
        margin: 0 12px 0 0;
    }
.input--TDG3H {
    background-color: inherit;
    border: 0;
    color: inherit;
    flex: 1 1 auto;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    outline: none;
    padding: 0;
    width: 100%;
}
.input--TDG3H::-moz-placeholder {
        box-shadow: none;
        color: var(--color-grey);
        font-size: var(--font-size-large);
        font-weight: inherit;
    }
.input--TDG3H::-ms-input-placeholder {
        box-shadow: none;
        color: var(--color-grey);
        font-size: var(--font-size-large);
        font-weight: inherit;
    }
&::-webkit-input-placeholder {
        box-shadow: none;
        color: var(--color-grey);
        font-size: var(--font-size-large);
        font-weight: inherit;
    }
&::-moz-placeholder {
        box-shadow: none;
        color: var(--color-grey);
        font-size: var(--font-size-large);
        font-weight: inherit;
    }
&::-ms-input-placeholder {
        box-shadow: none;
        color: var(--color-grey);
        font-size: var(--font-size-large);
        font-weight: inherit;
    }
.input--TDG3H::placeholder {
        box-shadow: none;
        color: var(--color-grey);
        font-size: var(--font-size-large);
        font-weight: inherit;
    }
.TextInput--small--1yR_c .input--TDG3H::-moz-placeholder {
        font-size: var(--font-size-normal);
    }
.TextInput--small--1yR_c .input--TDG3H::-ms-input-placeholder {
        font-size: var(--font-size-normal);
    }
.TextInput--small--1yR_c &::-webkit-input-placeholder {
        font-size: var(--font-size-normal);
    }
.TextInput--small--1yR_c &::-moz-placeholder {
        font-size: var(--font-size-normal);
    }
.TextInput--small--1yR_c &::-ms-input-placeholder {
        font-size: var(--font-size-normal);
    }
.TextInput--small--1yR_c .input--TDG3H::placeholder {
        font-size: var(--font-size-normal);
    }

.ToggleSwitch--2y3KS {
    background-color: var(--color-grey);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 15px;
    height: 30px;
    outline: 0;
    position: relative;
    transition: background-color var(--transition-button-hover);
    width: 52px;
}

    .ToggleSwitch--2y3KS:hover,
    .ToggleSwitch--2y3KS:focus {
        background-color: var(--color-grey-dark);
    }

    .ToggleSwitch--2y3KS:active {
        background-color: var(--color-grey-extra-dark);
    }

    .ToggleSwitch--active--3AFXM {
        background-color: var(--color-green);
    }

    .ToggleSwitch--active--3AFXM:hover,
        .ToggleSwitch--active--3AFXM:focus {
            background-color: var(--color-green-dark);
        }

    .ToggleSwitch--active--3AFXM:active {
            background-color: var(--color-green-extra-dark);
        }

    .ToggleSwitch--disabled--3HH3X {
        opacity: 0.5;
        pointer-events: none;
    }

.ball--2bKjj {
    background-color: #fff;
    border-radius: 50%;
    box-shadow: var(--drop-shadow-small);
    height: 26px;
    left: 1px;
    position: absolute;
    top: 1px;
    transition: transform 0.3s;
    width: 26px;
}

.ToggleSwitch--active--3AFXM .ball--2bKjj {
        transform: translateX(22px);
    }

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.UpsellBanner--2cmDe {
    --banner-bg-color: #1e2631;
    --banner-fg-color: #fff;

    background-color: var(--banner-bg-color);
    color: var(--banner-fg-color);
    padding: 0 30px 20px 30px;
}
.buttonWrapper--3YDx0 {
    margin-bottom: 30px;
    text-align: center;
}
.title--ylpJr {
    font-weight: var(--font-weight-normal);
    text-align: center;
    text-transform: uppercase;
}
.savings--3csQY {
    color: var(--color-secondary);
}
.pricingFeatureContainer--2CLIP {
    display: flex;
}
.pricingContainer--2gduD {
    margin-right: 20px;
}
.price--2OULd {
    font-size: 30px;
}
.lightText--XdonT {
    color: #bfbfbf;
    font-size: 14px;
}
.featureList--2iqmC {
    list-style: none;
    margin: 0;
    padding: 0;
}
.featureItem--10doD {
    margin-bottom: 10px;
}
.featureItemImg--3p2hu {
    margin-right: 10px;
}

.footerButtonRow--1aYtX {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    grid-gap: 8px;
}

/* Based on Whereby styleguide 1.0 */
/* Reference: https://www.figma.com/file/kMGWcWNEtQXiGwAd1ybUC5/Whereby-Styleguide-1.0?node-id=938%3A19738 */
:host,
:root {
    /* Colors */

    /* - Base Scales --color-[name]-[shade] */
    --color-blue: #2b189b;
    --color-blue-dark: #211375;
    --color-blue-extra-dark: #190f57;

    --color-green: #006654;
    --color-green-dark: #0c5b4c;
    --color-green-extra-dark: #0a5345;

    --color-red-light: #f26b4d;
    --color-red: #c35037;
    --color-red-dark: #b5432b;
    --color-red-extra-dark: #a03620;

    --color-grey-extra-light: rgba(0, 0, 0, 0.12);
    --color-grey-light: rgba(0, 0, 0, 0.24);
    --color-grey: rgba(0, 0, 0, 0.56);
    --color-grey-dark: rgba(0, 0, 0, 0.6);
    --color-grey-extra-dark: rgba(0, 0, 0, 0.72);

    --color-black: #000;

    /* - Special */
    --color-background-grey: #f4f4f4;
    --color-background-yellow: #f8e3c8;
    --color-background-pink: #f8dbd5;
    --color-background-info-blue: #ace5f6;
    --color-background-error-red: #fb9782;
    --color-background-warning-yellow: #fcde6d;
    --color-illustration-blue: #6a6feb;
    --color-illustration-green: #1b9c84;
    --color-illustration-red: #ff7e6c;

    /* - Shared Theme Colors --color-[context name] */
    /* These are conceptual colors we'd like to keep in sync: */
    --color-main-text: var(--color-black);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-green);
    --color-negative: var(--color-red);
    --color-meeting-red: var(--color-red-light);

    /* - Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* - Font Scale */
    /* Inter */
    --font-family-text: "Inter", sans-serif;

    --font-size-extra-small: 12px;
    --font-line-height-extra-small: 18px;

    --font-size-small: 14px;
    --font-line-height-small: 20px;

    --font-size-normal: 16px;
    --font-line-height-normal: 24px;

    --font-size-large: 18px;
    --font-line-height-large: 26px;

    /* Whereby Roslindale Text */
    --font-family-sub-headline: "Whereby Text", Georgia, serif;
    --font-size-sub-headline-small: 24px;
    --font-line-height-sub-headline-small: 32px;

    --font-size-sub-headline-normal: 28px;
    --font-line-height-sub-headline-normal: 38px;

    --font-size-sub-headline-large: 32px;
    --font-line-height-sub-headline-large: 46px;

    /* Whereby Roslindale Display Condensed */
    --font-family-headline: "Whereby Condensed", Georgia, serif;
    --font-size-headline-small: 40px;
    --font-line-height-headline-small: 52px;

    --font-size-headline-normal: 80px;
    --font-line-height-headline-normal: 90px;

    --font-size-headline-large: 120px;
    --font-line-height-headline-large: 124px;

    /* - Border Radius */
    --border-radius-extra-small: 4px;
    --border-radius-small: 8px;
    --border-radius-large: 12px;

    /* - Drop Shadow */
    --drop-shadow-small: 0px 1px 4px rgba(0, 0, 0, 0.16);
    --drop-shadow-large: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 1px 4px rgba(0, 0, 0, 0.16);

    /* - Spacing Scale */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --spacing-6: 40px;
    --spacing-7: 64px;
    --spacing-8: 96px;
    --spacing-9: 128px;
    --spacing-10: 192px;

    /* Transitions */
    --transition-button-hover: 100ms linear;

    /* Widths */
    --max-app-width: 1200px;
}
.themeBluetest--2AQdJ {
    --theme-color-video-controls-mute: #006fcf;
    --theme-color-video-controls-mute-hover: #5593c8;
    --theme-color-video-controls-mute-active: #002fcf;

    --theme-color-icon-meeting-red: #006fcf;
}

.techDetails--1kZwz {
    font-size: var(--spacing-2);
}

    .techDetails--1kZwz summary {
        cursor: pointer;
    }

.content--1pGsP {
    margin: 0 auto;
    max-width: 800px;
}

.AccountMessage--XD0az {
    grid-area: messages;
}

    .AccountMessage--XD0az p {
        margin: 0 0 var(--spacing-5);
    }

    .AccountMessage--XD0az p:last-child {
            margin-bottom: 0;
        }

.list--21P8- {
    list-style: none;
    margin: 0 0 0 calc(-1 * var(--spacing-3));
    max-width: 210px;
    padding: 0;
}

.item--2ToFo {
    height: 40px;
}

.item--2ToFo:last-child {
        margin-top: var(--spacing-3);
    }

.link-title--2RLqq {
    align-items: center;
    border: 2px solid transparent;
    display: inline-flex;
    height: 30px;
    /* Make room for border in the padding */
    padding: var(--spacing-1) calc(var(--spacing-2) - 2px);
}

.link--3gS3w:focus .link-title--2RLqq {
        border-color: var(--color-blue);
        border-radius: var(--border-radius-extra-small);
    }

.link--log-out--19fKl .link-title--2RLqq:before {
            content: "← ";
            margin-right: var(--spacing-2);
        }

.link-content--29NfM {
    align-items: center;
    background-color: transparent;
    border-radius: var(--border-radius-small);
    display: inline-flex;
    height: 100%;
    padding: 0 var(--spacing-2);
    transition: background-color 0.15s ease-in;
}

.link--3gS3w {
    align-items: center;
    color: var(--color-black);
    display: flex;
    height: 100%;
    text-decoration: none;
}

.link--3gS3w:hover .link-content--29NfM {
        background-color: var(--color-grey-extra-light);
    }

.link--3gS3w:focus {
        outline: none;
    }

.link--log-out--19fKl {
    color: var(--color-red);
}

.link--log-out--19fKl:hover .link--log-out-content--3Lipi {
        background-color: transparent;
    }

.link--active--13nay {
    font-weight: var(--font-weight-bold);
}

.itemNotification--20dZO {
    background-color: var(--color-red);
    border-radius: var(--border-radius-small);
    color: #fff;
    font-size: 14px;
    margin-left: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-2);
}

/* --color-green @ opacity 0.12 */
/* --color-blue @ opacity 0.2 */
.Link--button--2q4Lm {
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: var(--font-weight-medium);
    max-width: 100%;
    outline: none;
    overflow: hidden;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    transition: background-color var(--transition-button-hover);
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    white-space: nowrap;
}
/* Button type */
.Link--button-primary--3u_Qj {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
    color: var(--color-blue);
}
.Link--button-primary--3u_Qj:hover,
    .Link--button-primary--3u_Qj:focus {
        background-color: var(--color-blue-dark);
        border-color: var(--color-blue-dark);
    }
.Link--button-primary--3u_Qj:active {
        background-color: var(--color-blue-extra-dark);
        border-color: var(--color-blue-extra-dark);
        color: var(--color-blue-extra-dark);
    }
.Link--button-secondary--1Bk6F {
    background-color: var(--color-green);
    border-color: var(--color-green);
    color: var(--color-green);
}
.Link--button-secondary--1Bk6F:hover,
    .Link--button-secondary--1Bk6F:focus {
        background-color: var(--color-green-dark);
        border-color: var(--color-green-dark);
        color: var(--color-green-dark);
    }
.Link--button-secondary--1Bk6F:active {
        background-color: var(--color-green-extra-dark);
        border-color: var(--color-green-extra-dark);
        color: var(--color-green-extra-dark);
    }

/* --color-green @ opacity 0.12 */
/* --color-blue @ opacity 0.2 */
.PageWrapper--eydGo {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    overflow: hidden;
}
@media (min-width: 768px) {
.PageWrapper--eydGo {
        display: grid;
        grid-auto-columns: 1fr;
        grid-template-areas:
            "header"
            "content";
        grid-template-rows: 100px auto -webkit-max-content auto;
        grid-template-rows: 100px auto max-content auto;
        min-height: 100vh
}
    }
.PageWrapper--free--18gqm {
        background-color: var(--color-background-pink);
    }
.PageWrapper--pro--34yUO {
        background-color: var(--color-background-yellow);
    }
.PageWrapper--business--2yQdG {
        background-color: var(--color-background-grey);
    }
.PageWrapper--embedded--Cvm1u {
    display: flex;
    justify-content: center;
    min-height: 100vh;
}
@media (min-width: 768px) {
.pageElement--2oM3t {
        max-width: calc(var(--max-app-width) + 420px)
}
    }
.header--3nI_4 {
    grid-area: header;
}
.content--181dV {
    grid-area: content;

    grid-template-rows: auto 1fr;
}
@media (min-width: 768px) {
.content--181dV {
        display: grid;
        grid-column-gap: var(--spacing-6);
        grid-template-areas:
            ". messages"
            "menu main";
        grid-template-columns: 210px auto
}
    }
@media (min-width: 1200px) {
.content--181dV {
        grid-template-areas:
            ". messages ."
            "menu main .";
        grid-template-columns: 210px auto 210px
}
    }
@media (min-width: 768px) {
.content--withoutMenu--1mCxH {
        grid-template-areas:
            "messages"
            "main";
        grid-template-columns: 1fr
}
    }
.content--fullWidth--3oa07 {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}
.menu--PjQh7 {
    display: none;
}
@media (min-width: 768px) {
.menu--PjQh7 {
        display: block;
        grid-area: menu;
        padding-top: var(--spacing-2)
}
    }
.main--1iJ_b {
    grid-area: main;
}
.footer--ltDNR {
    margin-top: var(--spacing-6);
}

/* --color-green @ opacity 0.12 */
/* --color-blue @ opacity 0.2 */
.pageNavLimited--fzquT > :not(:first-child) {
    pointer-events: none;
}
.children--2U0HY {
    flex-grow: 1;
}
.trialBadge--3_v8l {
    border-radius: var(--border-radius-large);
    cursor: default;
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-medium);
    line-height: 46px;
    padding: 0 var(--spacing-3);
}
.trialButton--3UsdL,
.trialButton--3UsdL:hover {
    background-color: var(--color-background-warning-yellow);
    color: var(--color-black);
}
.trialButton--warning--1QtGE,
.trialButton--warning--1QtGE:hover {
    background-color: var(--color-background-error-red);
}
.logoText--3Q9HP {
    display: block;
    max-width: 134px;
    overflow: hidden;
    padding-right: var(--spacing-1);
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (min-width: 375px) {
.logoText--3Q9HP {
        margin-right: var(--spacing-3)
}
    }
@media (min-width: 1024px) {
.logoText--3Q9HP {
        max-width: 200px
}
    }

/* --color-green @ opacity 0.12 */
/* --color-blue @ opacity 0.2 */
.organizationsListContainer--13Ow3 {
    list-style: none;
    padding: 0 var(--spacing-3);
}
.organizationsListContainer-item--1jE96 {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--border-radius-large);
    color: var(--color-black);
    display: flex;
    flex-flow: wrap;
    margin-bottom: var(--spacing-2);
    padding: var(--spacing-2);
    text-decoration: none;
    transition: border 0.35s;
    width: 100%;
}
.organizationsListContainer-item--1jE96:hover {
        border: 1px solid var(--color-grey-extra-dark);
        color: var(--color-black);
    }
.organizationsListContainer-item--current--3NoDD {
        background: var(--color-background-grey);
        color: var(--color-grey);
        cursor: default;
    }
.organizationsListContainer-item--current--3NoDD:hover {
            border: 1px solid transparent;
            color: var(--color-grey);
        }
.organizationsListContainer-org--3vPyu {
    flex: 1 1;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.organizationsListContainer-subdomain--CyRZ_ {
    display: block;
    font-size: var(--font-size-small);
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 180px;
}
@media (min-width: 768px) {
.organizationsListContainer-subdomain--CyRZ_ {
        width: 190px
}
    }
.organizationsListContainer-logo--2CYEv {
    margin-right: var(--spacing-3);
}
.upselling--3RCKU {
    text-align: center;
}
.upselling-cta--6a6uH {
    margin-top: var(--spacing-3);
}
.upselling-needMoreText--1i2L3 {
    font-family: var(--font-family-sub-headline);
    font-size: var(--font-size-sub-headline-small);
    margin-bottom: 0;
}

/* --color-green @ opacity 0.12 */
/* --color-blue @ opacity 0.2 */
.AccountSwitcher--oYgb_ {
    font-size: var(--font-size-normal);
    margin: 0 auto var(--spacing-6);
    max-width: 560px;
    width: 100%;
}
.switcherContainer--2u4Ad {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
}
.switcherContainer-trigger--19EE8 {
    align-items: center;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--border-radius-large);
    box-shadow: none;
    box-sizing: border-box;
    color: var(--color-main-text);
    cursor: pointer;
    display: flex;
    font-size: var(--font-size-large);
    justify-content: space-between;
    margin: 0 auto;
    outline: none;
    padding: 12px var(--spacing-2);
    transition: border 0.25s;
    width: auto;
}
.switcherContainer-trigger--19EE8:focus,
    .switcherContainer-trigger--19EE8:hover {
        border: 1px solid var(--color-grey-extra-dark);
    }
.switcherContainer-dropdown--E-EHn {
    background: #ffffff;
    border-radius: var(--border-radius-large);
    box-shadow: var(--drop-shadow-large);
    left: 0;
    margin-left: auto;
    margin-right: auto;
    min-width: 288px;
    opacity: 0;
    position: absolute;
    top: 54px;
    transform: translate(-43%, -20px);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
    visibility: hidden;
    z-index: 111;
}
@media (min-width: 375px) {
.switcherContainer-dropdown--E-EHn {
        left: 10%;
        min-width: 343px
}
    }
@media (min-width: 768px) {
.switcherContainer-dropdown--E-EHn {
        top: 44px
}
    }
.switcherContainer-dropdown--active--UziT9 {
        opacity: 1;
        transform: translate(-43%, 0);
        visibility: visible;
    }
@media (min-width: 375px) {
.switcherContainer-dropdown--active--UziT9 {
            transform: translateX(-46%, 0)
    }
        }
.accountInfo--yUyJV {
    display: flex;
    justify-content: space-between;
    padding: 0 var(--spacing-3);
}
.accountInfo-text--1e2eP {
    font-size: var(--font-size-normal);
    margin-bottom: 0;
}
.accountInfo-email--gH3pA {
    color: var(--color-grey);
    font-size: var(--font-size-small);
    margin-top: 0;
}
.accountInfo-closeBtn--2S02_ {
    cursor: pointer;
    height: 24px;
    margin: var(--spacing-3) 0;
    width: 24px;
}
.orgName--1AT-v {
    font-size: var(--font-size-normal);
    margin: 0 var(--spacing-1) 0 0;
    max-width: 110px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (min-width: 768px) {
.orgName--1AT-v {
        font-size: var(--font-size-large);
        margin-right: var(--spacing-2);
        max-width: 140px
}
    }
.dropdownSvg--VR0SH {
    padding: 2px;
    transform: rotate(-90deg);
    transition: all 0.35s ease-out;
}
.dropdownSvg--active--2_tAg {
    transform: rotate(-270deg);
}


/*# sourceMappingURL=main.16d7e464.css.map*/