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

html {
    /* --scale gets modified by external CSS based on device screen width. */
    --scale: 1;
    
    -webkit-transform: scale(var(--scale));
        -ms-transform: scale(var(--scale));
            transform: scale(var(--scale));

    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
        transform-origin: 0 0;

    /* Scrollable content is in nested elements, so we don't want 
    the html to be movable (this is more of a concern on mobile). */
    position: fixed;

    width: calc(100vw / var(--scale));
    height: calc(100vh / var(--scale));

    /* On mobile, certain browser elements can shrink the html element 
       (vertically), so 100% can be smaller than 100vh. */
    max-height: calc(100% / var(--scale));

    font-size: 25px; /* Root font size */
    font-family: 'Open Sans', sans-serif;
}

body {
    --lighter-cyan-2: #E2FCFF;
    --lighter-cyan-1: #C6E0E6;
    --light-cyan: #BDEFF4;
    --cyan: #9CE7EE;
    --cyan-2: #94DCE3;
    --dark-cyan: #70CDD6;
    --darker-cyan: #5DBDC6;
    --turquoise: #40A2AC;
    --dark-turquoise: #39949E;
    --darker-turquoise: #127B86;
    --navy-blue: #0E2241;
    --dark-navy-blue: #0A162B;
    --off-white-1: #F7FBFC;
    --off-white-2: #E4F5F7;
    --off-white-3: #DFF0F4;
    --off-white-4: #DCE2E8;
    --off-white-5: #EFEFEF;
    --light-orange: #FAB46D;
    --orange: #FF9933;
    --dark-orange: #F78D23;
    --lighter-grey-1: #E7E9EC;
    --lighter-grey-2: #E9EEEF;
    --light-grey: #D7DBE0;
    --grey: #BAC0C9;
    --blue-grey: #8CA2B7;
    --cyan-grey: #8DC1C8;
    --dark-grey: #A8A8A8;
    --red: #E84A4A;
    --dark-red: #D43F3F;
    --amber: #EA7D10;
    --green: #35B130;
    --deep-green: #069300;
    --light-green: #7ADDA4;
    --gold: #D9AE21;

    --placeholder-font-size: 1em;
    --placeholder-font-weight: normal;
    --placeholder-text-transform: none;
    --placeholder-color: var(--dark-grey);

    position: relative;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
            
    height: 100%;
    margin: 0;
    overflow: hidden;

    /* Enable smooth scrolling on touch devices where available. */
    -webkit-overflow-scrolling: touch;
}

::-webkit-input-placeholder {
    font-size: var(--placeholder-font-size);
    font-weight: var(--placeholder-font-weight);
    text-transform: var(--placeholder-text-transform);
    color: var(--placeholder-color);
    -webkit-text-fill-color: var(--placeholder-color);
}
::-moz-placeholder {
    font-size: var(--placeholder-font-size);
    font-weight: var(--placeholder-font-weight);
    text-transform: var(--placeholder-text-transform);
    color: var(--placeholder-color);
    opacity: 1;
}
:-ms-input-placeholder {
    font-size: var(--placeholder-font-size);
    font-weight: var(--placeholder-font-weight);
    text-transform: var(--placeholder-text-transform);
    color: var(--placeholder-color);
}
::-ms-input-placeholder {
    font-size: var(--placeholder-font-size);
    font-weight: var(--placeholder-font-weight);
    text-transform: var(--placeholder-text-transform);
    color: var(--placeholder-color);
}
::placeholder {
    font-size: var(--placeholder-font-size);
    font-weight: var(--placeholder-font-weight);
    text-transform: var(--placeholder-text-transform);
    color: var(--placeholder-color);
    -webkit-text-fill-color: var(--placeholder-color);
}

:disabled {
    cursor: not-allowed !important;
}


/* ——— Cookie banner ——— */

.cookie-banner {
    --child-margin-y: 18px;
    --child-margin-x: 22.5px;
    --box-shadow: 0 -3px 20px rgba(0, 0, 0, 0.16);

    position: absolute;
    right: 0; bottom: 0; left: 0;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;

    padding:
        calc(33px - var(--child-margin-y))
        calc(66px - var(--child-margin-x))
        calc(29px - var(--child-margin-y))
        calc(66px - var(--child-margin-x));

    z-index: 8;

    background-color: rgba(223, 240, 244, 0.83);

    -webkit-box-shadow: var(--box-shadow);
        -moz-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);

    font-size: 1rem;
}

.cookie-banner__text-container {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;

    max-height: 200px;
    min-width: 270px;
    margin:
        var(--child-margin-y)
        var(--child-margin-x);

    overflow: auto;

    font-size: 0.88em;
    color: var(--navy-blue);
}

.cookie-banner__text-container a {
    font-weight: bold;
    color: inherit;
}

.cookie-banner > .button {
    --box-shadow-default: 0 0 20px rgba(101, 99, 99, 0.2);

    padding: 14px 27px;
    margin:
        var(--child-margin-y)
        var(--child-margin-x);
}
.hidden {
    display: none !important;
}
.hidden-before::before {
    display: none !important;
}
.hidden-after::after {
    display: none !important;
}

.invisible {
    position: absolute;
    opacity: 0;
    cursor: unset;
    height: 0;
    width: 0;
}

.transparent {
    opacity: 0;
}

.unselectable {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.no-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

.no-block {
    pointer-events: none;
}

.vertical-center {
    vertical-align: middle;
    line-height: normal;
}

.flex-spacer {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.box-shadow {
    -webkit-box-shadow: var(--box-shadow, none);
        -moz-box-shadow: var(--box-shadow, none);
            box-shadow: var(--box-shadow, none);
}

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
}

.ellipsis-multiline {
    --max-lines: 2;

   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--max-lines);
           line-clamp: var(--max-lines);
}

.draggable {
    cursor: move;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    cursor: grab;
}

.draggable:active {
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.error-log {
    position: absolute;
    top: 0px;
    width: 100%;
    max-height: 25%;
    padding: 10px;

    background-color: rgba(0, 0, 0, 0.9);
    overflow: auto;
    z-index: 9999;

    font-size: 12px;
    color: red;
}

.tip-anchor {
    position: absolute;
}

/* Improve blurring issues on Chrome, for elements in nested scroll areas. */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    .chrome-blur-fix {
        transform: perspective(1px) translateZ(0) !important;
    }
}

@-webkit-keyframes spin { 
    100% {
        -webkit-transform: rotate(360deg);
    } 
}
@-moz-keyframes spin { 
    100% {
        -moz-transform: rotate(360deg);
    } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}


/* ——— Action box ——— */

.action-box {
    --background-color: white;
    --border-radius: 9px;
    --box-shadow: 0 0 20px rgba(100, 100, 100, 0.2);

    -ms-flex-negative: 0;
        flex-shrink: 0;

    position: relative;
    
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    background-color: var(--background-color);
    border-radius: var(--border-radius);

    -webkit-box-shadow: var(--box-shadow);
        -moz-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);

    color: var(--navy-blue);
}

.action-box > .action-box__button,
.action-box > .selector {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}

.action-box__button {
    position: relative;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    height: 58px;
    padding: 0 22px;

    border-radius: var(--border-radius);
    cursor: pointer;
}
.selector--disabled > .action-box__button {
    cursor: not-allowed;
    color: var(--grey);
}
/* Visually join with selector menu when selector menu is visible */
.action-box .selector:not(.selector--up):not(.selector--toggle):focus > .action-box__button,
.action-box .selector:not(.selector--up):not(.selector--toggle):focus-within > .action-box__button,
.action-box .selector--toggle:not(.selector--up) > input:checked ~ .action-box__button {
    --box-shadow: 0 var(--border-radius) 0 var(--background-color);

    background-color: var(--background-color);
    border-radius: var(--border-radius) var(--border-radius) 0 0;

    -webkit-box-shadow: var(--box-shadow);
        -moz-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}
.action-box .selector--up:not(.selector--toggle):focus > .action-box__button,
.action-box .selector--up:not(.selector--toggle):focus-within > .action-box__button,
.action-box .selector--up.selector--toggle > input:checked ~ .action-box__button {
    --box-shadow: 0 calc(-1 * var(--border-radius)) 0 var(--background-color);

    background-color: var(--background-color);
    border-radius: 0 0 var(--border-radius) var(--border-radius);

    -webkit-box-shadow: var(--box-shadow);
        -moz-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}

.action-box__button > *:not(:last-child) {
    margin-right: 10px;
}

a.action-box__button {
    text-decoration: none;
    color: unset;
}


/* ——— Selector ——— */

.selector {
    position: relative;
    cursor: pointer;
}
.selector:not(.selector--toggle) {
    outline: none;
}
/* Move above surroundings when focused and attached to action-box. */
.action-box > .selector:focus,
.action-box > .selector:focus-within {
    z-index: 1;
}

.selector__menu {
    /* Initiate values for border radius */
    --border-radius-tl: 0; /* top-left */
    --border-radius-tr: 0; /* top-right */
    --border-radius-br: 0; /* bottom-right */
    --border-radius-bl: 0; /* bottom-left */

    position: absolute;
    display: none;
    visibility: hidden;
    opacity: 0;
    top: calc(100% - 1px); /* -1px to fix rendering gaps */
    left: 0;
    min-width: 100%;

    cursor: default;
}

.selector--left > .selector__menu {
    right: 0;
    left: auto;
}

.selector--up > .selector__menu {
    bottom: calc(100% - 1px);
    top: auto;
}

/* Add a box shadow on a layer behind the surroundings */
.selector__menu::before {
    --box-shadow: 0 0 20px rgba(0, 26, 38, 0.3137);

    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    
    border-radius: 
        var(--border-radius-tl)
        var(--border-radius-tr)
        var(--border-radius-br)
        var(--border-radius-bl);

    -webkit-box-shadow: var(--box-shadow);
        -moz-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
            
    pointer-events: none;
}

/* Make the menu visible */
.selector:not(.selector--toggle):focus > .selector__menu,
.selector:not(.selector--toggle):focus-within > .selector__menu,
.selector--toggle > input:checked ~ .selector__menu,
.selector--force-open > .selector__menu,
.selector__menu:focus {
    display: block;
    visibility: visible;
    opacity: 1;
}

/* Enable/disable border radius on different corners depending on selector direction. */
.selector:not(.selector--up) > .selector__menu {
    --border-radius-tr: var(--border-radius);
    --border-radius-br: var(--border-radius);
    --border-radius-bl: var(--border-radius);
}
.selector--left:not(.selector--up) > .selector__menu {
    --border-radius-tr: 0;
    --border-radius-tl: var(--border-radius);
}
.selector--up > .selector__menu {
    --border-radius-tl: var(--border-radius);
    --border-radius-tr: var(--border-radius);
    --border-radius-br: var(--border-radius);
}
.selector--up.selector--left > .selector__menu {
    --border-radius-br: 0;
    --border-radius-bl: var(--border-radius);
}

/* Additional element for actual menu contents, so we can hide overflow without hiding any box shadows on the menu. */
.selector__menu__inner {
    background-color: var(--background-color);
    border-radius: 
        var(--border-radius-tl)
        var(--border-radius-tr)
        var(--border-radius-br)
        var(--border-radius-bl);
}

.selector__menu__inner__option {
    --padding-right: 21px;
    --padding-left: 23px;
    --background-color-hover: #D0E7EA;
    --border-color: rgba(13, 26, 64, 0.0784);

    /* Use box-shadows to simulate semi-transparent horizontal separator lines */
    --box-shadow:
        inset 0 1px 0 var(--border-color),
        inset 0 -1px 0 var(--border-color);

    all: unset;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    padding: 8px var(--padding-right) 8px var(--padding-left);

    outline: none;

    -webkit-box-shadow: var(--box-shadow);
        -moz-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);

    text-decoration: none;
    white-space: nowrap;

    color: inherit;
    -webkit-text-fill-color: inherit;
}
button.selector__menu__inner__option,
input.selector__menu__inner__option {
    width: calc(100% - var(--padding-right) - var(--padding-left));
}
/* Adjust box-shadow (separator lines) and border radius on first and last menu options */
.selector__menu__inner > .selector__menu__inner__option:first-child,
form:first-child > .selector__menu__inner__option {
    --box-shadow: inset 0 -1px 0 var(--border-color);

    border-radius: var(--border-radius-tl) var(--border-radius-tr) 0 0;
}
.selector__menu__inner > .selector__menu__inner__option:last-child,
form:last-child > .selector__menu__inner__option {
    --box-shadow: inset 0 1px 0 var(--border-color);

    border-radius: 0 0 var(--border-radius-br) var(--border-radius-bl);
}
.selector__menu__inner > .selector__menu__inner__option:only-child,
form:only-child > .selector__menu__inner__option {
    --box-shadow: none;

    border-radius:
        var(--border-radius-tl)
        var(--border-radius-tr)
        var(--border-radius-br)
        var(--border-radius-bl);
}

/* Default hover state */
.selector__menu__inner__option:hover,
.selector__menu__inner__option:focus {
    background-color: var(--background-color-hover);
}

/* Add same spacing to the contents of menu options and the contents of nested objects. */
.selector__menu__inner__option > *:not(:last-child),
.selector--nested > div:not(.selector__menu) > *:not(:last-child) {
    margin-right: 22px;
}
.selector__menu__inner__option > .svg-icon-direction {
    margin-right: 8px;
}

.selector__menu__inner__option__checkbox {
    --size: 27px;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

    width: var(--size);
    height: var(--size);
    margin-right: 11.5px !important;

    border: 2.4px solid white;
    border-radius: 5px;
}
.selector__menu__inner__option__checkbox > input:not(:checked) ~ svg {
    display: none;
}

.selector__menu__inner__option > span {
    /* Generally, the span (containing text) should fill unused space */
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    
    word-break: break-word;
}


/* ——— Button ——— */

.button {
    --box-shadow-default: 0 0 20px rgba(101, 99, 99, 0.13);
    --box-shadow-hover: 2px 3px 20px rgba(75, 75, 75, 0.66);
    --box-shadow-active: inset 3px 3px 20px black;
    --box-shadow: var(--box-shadow-default);

    --background-color-default: var(--navy-blue);
    --background-color-hover: var(--dark-navy-blue);
    --background-color-active: var(--navy-blue);
    --background-color: var(--background-color-default);

    --color: white;
    --transition: 0.1s;

    all: unset;

    -ms-flex-negative: 0;
        flex-shrink: 0;

    position: relative;
    padding: 14px 33px;
    min-width: 107px;

    background-color: var(--background-color);
    border-radius: 9px;
    cursor: pointer;

    -webkit-box-shadow: var(--box-shadow);
        -moz-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);

    font-size: 0.88em;
    font-weight: bold;

    text-align: center;
    text-transform: uppercase;

    color: var(--color);
    -webkit-text-fill-color: var(--color);

    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
}
.button.action-box {
    padding: unset;
    min-width: unset;
}
.button--orange {
    --background-color-default: var(--orange);
    --background-color-hover: var(--dark-orange);
    --background-color-active: var(--dark-orange);

    --box-shadow-hover: 2px 3px 20px rgba(72, 72, 72, 0.36);
    --box-shadow-active: inset 3px 3px 15px rgba(0, 0, 0, 0.18);
}
.button--turquoise {
    --background-color-default: var(--turquoise);
    --background-color-hover: var(--dark-turquoise);
    --background-color-active: var(--dark-turquoise);

    --box-shadow-hover: 2px 3px 20px rgba(75, 75, 75, 0.36);
    --box-shadow-active: inset 3px 3px 10px rgba(0, 0, 0, 0.16);
}
.button--dark-cyan {
    --background-color-default: var(--dark-cyan);
    --background-color-hover: var(--darker-cyan);
    --background-color-active: var(--darker-cyan);

    --box-shadow-hover: 2px 3px 20px rgba(75, 75, 75, 0.36);
    --box-shadow-active: inset 3px 3px 10px rgba(0, 0, 0, 0.16);
}
.button--cyan {
    --background-color-default: var(--cyan);
    --background-color-hover: var(--cyan-2);
    --background-color-active: var(--cyan-2);

    --box-shadow-hover: 2px 3px 20px rgba(75, 75, 75, 0.26);
    --box-shadow-active: inset 3px 3px 12px rgba(0, 0, 0, 0.12);
    --color: var(--navy-blue);
}
.button--white {
    --background-color-default: white;
    --background-color-hover: white;
    --background-color-active: white;

    --box-shadow-hover: 2px 3px 20px rgba(75, 75, 75, 0.27);
    --box-shadow-active: inset 3px 3px 13px rgba(0, 0, 0, 0.13);
    --color: var(--navy-blue);
}
.button--red {
    --background-color-default: var(--red);
    --background-color-hover: var(--dark-red);
    --background-color-active: var(--dark-red);

    --box-shadow-hover: 2px 3px 20px rgba(72, 72, 72, 0.46);
    --box-shadow-active: inset 3px 3px 18px rgba(0, 0, 0, 0.32);
}
.button--grey {
    --background-color-default: var(--grey);
    --background-color-hover: var(--dark-grey);
    --background-color-active: var(--dark-grey);

    --box-shadow-hover: 2px 3px 20px rgba(75, 75, 75, 0.26);
    --box-shadow-active: inset 3px 3px 12px rgba(0, 0, 0, 0.12);
    --color: var(--navy-blue);
}
.button:hover {
    --background-color: var(--background-color-hover);
    --box-shadow: var(--box-shadow-hover);
}
.button:active,
input:checked ~ .button--checkbox {
    --background-color: var(--background-color-active);
    --box-shadow: var(--box-shadow-active);
}
.button:disabled,
*:disabled > .button {
    --background-color: var(--grey);
    --box-shadow: var(--box-shadow-default);
    --color: white;

    cursor: not-allowed;

    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}


/* ——— Checkbox ——— */

.checkbox {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    
    position: relative;
    display: inline-block;

    line-height: 0;
    cursor: pointer;
}

/* The actual box of the checkbox */
.checkbox > div {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    
    height: 30px;
    width: 30px;
    margin-right: 14px;

    border-radius: 5px;
    border: 1px solid var(--navy-blue);
}
.checkbox--bold > div {
    border: 2px solid var(--navy-blue);
}
/* When checked, make the border bolder and show the checkmark. */
.checkbox > input:checked ~ div {
    border: 3px solid var(--orange);
}

.checkbox > div > svg {
    position: absolute;
}

.checkbox > input:checked ~ div > .svg-checkmark {
    visibility: visible;
}
.checkbox > input:indeterminate ~ div > .svg-indeterminate {
    visibility: visible;
}


/* ——— Hover-scale ——— */

.hover-scale {
    --hover-scale: 1.1;
}

.hover-scale-target {
    --transition: transform 0.16s ease-in-out;

    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
}

.hover-scale:hover .hover-scale-target,
.hover-scale:focus .hover-scale-target,
.hover-scale:focus-within .hover-scale-target {
    -webkit-transform: scale(var(--hover-scale));
        -ms-transform: scale(var(--hover-scale));
            transform: scale(var(--hover-scale));
}


/* ——— Add selector ——— */

.add-selector {
    --background-color: white;
    --border-radius: 9px;
    --box-shadow-default: 0 0 20px rgba(101, 99, 99, 0.2);
    --box-shadow-focus: 0 0 20px var(--cyan);
}

.add-selector__inner {
    /* Prevent shrinking on Safari */
    -ms-flex-negative: 0;
        flex-shrink: 0;

    position: relative;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    background-color: var(--background-color);
    border-radius: var(--border-radius);
}

.add-selector__inner > input {
    -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;

    padding: 8px 13px 10px 25px;
    min-width: 0; /* Allow the input field to shrink. */

    background-color: unset;
    border: none;
    outline: none;

    font: inherit;
    font-size: 1em;
    font-weight: bold;
    
    color: var(--navy-blue);
}

.add-selector__inner__plus-button {
    all: unset;

    padding: 14px 16px 14px 13px;

    line-height: 0;
}

/* Use a separate element for the box-shadow so it 
   can respond (via CSS) to the input being focused. */
.add-selector__inner__shadow {
    --box-shadow: var(--box-shadow-default);

    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;

    border-radius: inherit;

    -webkit-box-shadow: var(--box-shadow);
        -moz-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    
    pointer-events: none;
}
input:focus ~ .add-selector__inner__shadow {
    --box-shadow: var(--box-shadow-focus);
}

.add-selector__inner > .tip-anchor {
    bottom: 0;
    left: 50%;
}

.add-selector > .selector__menu {
    --border-radius-tr: 0 !important; /* Because this menu should not exceed the width of its parent. */
    --box-shadow: 0 -9px 0 var(--background-color);

    top: 100%;

    -webkit-box-shadow: var(--box-shadow);
        -moz-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}
.add-selector > .selector__menu::before {
    --box-shadow: var(--box-shadow-default);
}

.add-selector .selector__menu__inner__option {
    padding: 13.5px 19px 13.5px 25px !important;

    white-space: normal;
    word-break: break-word;
}
/* Modify standard hover behaviour. */
.add-selector .selector__menu__inner__option:hover,
.add-selector .selector__menu__inner__option:focus {
    background-color: inherit;
}
.add-selector .selector__menu__inner__option--highlighted {
    background-color: var(--background-color-hover) !important;
}

.add-selector .selector__menu__inner__option > :first-child {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}

.add-selector .selector__menu__inner__option > .button {
    padding: 6px 18px 5px 12px;
    min-width: unset;

    font-size: 0.68em;
    text-transform: none;
    white-space: nowrap;

    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}
.add-selector .selector__menu__inner__option:not(.selector__menu__inner__option--highlighted) > .button {
    --background-color-default: white;
    --color: var(--navy-blue);
}


/* ——— Custom select ——— */

.custom-select {
    --text-padding: 21px;
    --chevron-size: 22.18px;
    --padding-right: 17.7px;
    --color: white;

    all: unset;

    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    height: 72px;
    margin: 0;
    padding:
        0 calc(var(--text-padding) + var(--chevron-size) + var(--padding-right))
        0 var(--text-padding);

    outline: none;
    -moz-appearance: none;
    -webkit-appearance: none;
            appearance: none;

    vertical-align: middle;
    color: var(--color);
    -webkit-text-fill-color: var(--color);

    /* Style the chevron — URL reference: https://yoksel.github.io/url-encoder/ */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.18 13.09'%3E%3Cpath d='M2.83 2.83l8.26 8.26 8.26-8.26' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'/%3E%3C/svg%3E");
    background-repeat: no-repeat, repeat;
    background-position: right var(--padding-right) top 50%;
    background-size: var(--chevron-size);
}
*[dir="rtl"] .custom-select,
:root:lang(ar) .custom-select,
:root:lang(iw) .custom-select {
    /* Mirror horizontally to support right-to-left text, Arabic and Hebrew. */
    padding:
    0 var(--text-padding)
    0 calc(var(--text-padding) + var(--chevron-size) + var(--padding-right));

    background-position: left var(--padding-right) top 50%;
}
.custom-select::-ms-expand {
    /* Hide arrow icon in IE */
    display: none;
}

.custom-select > option {
    font-size: initial;
    font-weight: normal;
}


/* ——— Activity ——— */

/* Some activity CSS is put here because it spans a number of 
   activity related pages, and there is no clear place where it 
   should go (at time of writing). */

.activity-count-down-timer {
    --shake-movement: 3px;
    --shake-rotation: 1deg;
    --shake-delay: calc(var(--delay) + var(--duration) - min(0.25 * var(--duration), 10s));

    -webkit-animation-name: activity-count-down-timer-colour-animation, activity-count-down-timer-shake-animation;
            animation-name: activity-count-down-timer-colour-animation, activity-count-down-timer-shake-animation;
    -webkit-animation-timing-function: linear, linear;
            animation-timing-function: linear, linear;
    -webkit-animation-iteration-count: 1, infinite;
            animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards, none;
            animation-fill-mode: forwards, none;
    -webkit-animation-duration: var(--duration), 0.5s;
            animation-duration: var(--duration), 0.5s;
    -webkit-animation-delay: var(--delay), var(--shake-delay);
            animation-delay: var(--delay), var(--shake-delay);

    line-height: 0;
}
@-webkit-keyframes activity-count-down-timer-colour-animation {
    0% { background-color: var(--green); }
    50% { background-color: var(--amber); }
    100% { background-color: var(--red); }
}
@keyframes activity-count-down-timer-colour-animation {
    0% { background-color: var(--green); }
    50% { background-color: var(--amber); }
    100% { background-color: var(--red); }
}
@-webkit-keyframes activity-count-down-timer-shake-animation {
    0% { transform: translate(calc(0.33 * var(--shake-movement)), calc(0.33 * var(--shake-movement))) rotate(0deg); }
    10% { transform: translate(calc(-0.33 * var(--shake-movement)), calc(-0.66 * var(--shake-movement))) rotate(calc(-1 * var(--shake-rotation))); }
    20% { transform: translate(calc(-1 * var(--shake-movement)), 0px) rotate(var(--shake-rotation)); }
    30% { transform: translate(var(--shake-movement), calc(0.66 * var(--shake-movement))) rotate(0deg); }
    40% { transform: translate(calc(0.33 * var(--shake-movement)), calc(-0.33 * var(--shake-movement))) rotate(var(--shake-rotation)); }
    50% { transform: translate(calc(-0.33 * var(--shake-movement)), calc(0.66 * var(--shake-movement))) rotate(calc(-1 * var(--shake-rotation))); }
    60% { transform: translate(calc(-1 * var(--shake-movement)), calc(0.33 * var(--shake-movement))) rotate(0deg); }
    70% { transform: translate(var(--shake-movement), calc(0.33 * var(--shake-movement))) rotate(calc(-1 * var(--shake-rotation))); }
    80% { transform: translate(calc(-0.33 * var(--shake-movement)), calc(-0.33 * var(--shake-movement))) rotate(var(--shake-rotation)); }
    90% { transform: translate(calc(0.33 * var(--shake-movement)), calc(0.66 * var(--shake-movement))) rotate(0deg); }
    100% { transform: translate(calc(0.33 * var(--shake-movement)), calc(-0.66 * var(--shake-movement))) rotate(calc(-1 * var(--shake-rotation))); }
}
@keyframes activity-count-down-timer-shake-animation {
    0% { transform: translate(calc(0.33 * var(--shake-movement)), calc(0.33 * var(--shake-movement))) rotate(0deg); }
    10% { transform: translate(calc(-0.33 * var(--shake-movement)), calc(-0.66 * var(--shake-movement))) rotate(calc(-1 * var(--shake-rotation))); }
    20% { transform: translate(calc(-1 * var(--shake-movement)), 0px) rotate(var(--shake-rotation)); }
    30% { transform: translate(var(--shake-movement), calc(0.66 * var(--shake-movement))) rotate(0deg); }
    40% { transform: translate(calc(0.33 * var(--shake-movement)), calc(-0.33 * var(--shake-movement))) rotate(var(--shake-rotation)); }
    50% { transform: translate(calc(-0.33 * var(--shake-movement)), calc(0.66 * var(--shake-movement))) rotate(calc(-1 * var(--shake-rotation))); }
    60% { transform: translate(calc(-1 * var(--shake-movement)), calc(0.33 * var(--shake-movement))) rotate(0deg); }
    70% { transform: translate(var(--shake-movement), calc(0.33 * var(--shake-movement))) rotate(calc(-1 * var(--shake-rotation))); }
    80% { transform: translate(calc(-0.33 * var(--shake-movement)), calc(-0.33 * var(--shake-movement))) rotate(var(--shake-rotation)); }
    90% { transform: translate(calc(0.33 * var(--shake-movement)), calc(0.66 * var(--shake-movement))) rotate(0deg); }
    100% { transform: translate(calc(0.33 * var(--shake-movement)), calc(-0.66 * var(--shake-movement))) rotate(calc(-1 * var(--shake-rotation))); }
}

.activity-participant-background {
    background: -webkit-gradient(
        linear,
        left top, left bottom,
        from(var(--dark-cyan)),
        color-stop(22.457142857%, var(--cyan)),
        color-stop(43.861607142%, var(--light-cyan)),
        color-stop(55.245535714%, var(--light-cyan)),
        color-stop(77.085714285%, var(--cyan)),
        to(var(--dark-cyan)));
    background: -o-linear-gradient(
        top,
        var(--dark-cyan),
        var(--cyan) 22.457142857%,
        var(--light-cyan) 43.861607142%,
        var(--light-cyan) 55.245535714%,
        var(--cyan) 77.085714285%,
        var(--dark-cyan));
    background: linear-gradient(
        180deg,
        var(--dark-cyan),
        var(--cyan) 22.457142857%,
        var(--light-cyan) 43.861607142%,
        var(--light-cyan) 55.245535714%,
        var(--cyan) 77.085714285%,
        var(--dark-cyan));
}


/* ——— Misc ——— */

.loading-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    z-index: 1;
}
.loading-overlay--with-bg {
    background-color: rgba(247, 251, 252, 0.83);
}

.warning-icon {
    position: relative;
    padding: 5px;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.warning-icon > span {
    position: absolute;

    font-size: 24px;
    font-weight: bold;

    color: white;
    -webkit-text-fill-color: white;
}
.warning-icon--small > span {
    font-size: 21px;
}
.warning-icon--smaller > span {
    font-size: 18px;
}

.info-button {
    --size: 22px;
    --color: var(--navy-blue);

    all: unset;

    width: var(--size);
    height: var(--size);

    border: 1px solid var(--color);
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;

    font-size: 18px;
    font-weight: bold;
    line-height: var(--size);
    text-align: center;

    color: var(--color);
    -webkit-text-fill-color: var(--color);
}
svg {
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible; /* Firefox seems to round svg height/width properties and then clip them, so prevent clipping here. */
}

.svg-logo,
.svg-logo-w {
    max-width: 100%;
}

.svg-landing-page-record,
.svg-landing-page-play-host,
.svg-landing-page-play-participant {
    --box-shadow-color: rgba(77, 173, 205, 0.21);
    --box-shadow: -19.7434px 59.2302px 78.9736px var(--box-shadow-color);

    max-width: 100%;

    -webkit-box-shadow: var(--box-shadow);
        -moz-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}
.svg-landing-page-record {
    --box-shadow-color: #8CC6D9;
    
    border-radius: 24px;
}
.svg-landing-page-play-host {
    border-radius: 23.6921px;
}
.svg-landing-page-play-participant {
    border-radius: 21.7178px;
}

.svg-icon-bell {
    width: 27.534px;
    height: 30.189px;
    fill: none;
    stroke: var(--navy-blue);
    stroke-width: 3.6px;
}

.svg-icon-edit {
    width: 4px;
    height: 16.945px;
    fill: var(--navy-blue);
}
.svg-icon-edit--grey {
    fill: var(--grey);
}

.svg-icon-edit-large {
    width: 6.5px;
    height: 28.085px;
    fill: var(--navy-blue);
}

.svg-icon-pencil-edit {
    width: 24.83px;
    fill: none;
    stroke: var(--navy-blue);
    stroke-width: 3px;
}

.svg-chevron-vertical-large {
    width: 18px;
    fill: none;
    stroke: var(--navy-blue);
    stroke-width: 2.7px;
}
.svg-chevron-vertical-large--white {
    stroke: white;
}

.svg-chevron-vertical-small {
    width: 11.8px;
    fill: none;
    stroke: var(--navy-blue);
    stroke-width: 2.5px;
}
.svg-chevron-vertical-small--grey {
    stroke: var(--grey);
}
.svg-chevron-vertical-small--white {
    stroke: white;
}
.selector--disabled .svg-chevron-vertical-small {
    stroke: var(--grey);
}

.svg-chevron-horizontal {
    width: 13.09px;
    height: 22.18;
    fill: none;
    stroke: var(--navy-blue);
    stroke-width: 4px;
}

.svg-double-chevron-vertical {
    width: 24.144px;
    height: 26.628px;
    fill: none;
    stroke: var(--navy-blue);
    stroke-width: 4px;
}

.svg-separator-vertical {
    height: 35.52px;
    fill: none;
    stroke: var(--navy-blue);
    stroke-width: 2px;
    opacity: 0.29;
}
.svg-separator-vertical--white {
    stroke: white;
}
.svg-separator-vertical--large {
    height: 67px;
    stroke-width: 2.5px;
}

.svg-separator-horizontal {
    width: 100%;
    height: 2px;
    fill: none;
    stroke: var(--lighter-grey-2);
    stroke-width: 2px;
}

.svg-separator-legal {
    width: 1px;
    height: 22px;
    fill: none;
    stroke: var(--darker-turquoise);
    stroke-width: 1px;
}

.svg-icon-increment {
    width: 16.7px;
    fill: none;
    stroke: var(--grey);
    stroke-width: 2.7px;
    vertical-align: middle;
}

.svg-icon-plus {
    width: 24px;
    fill: none;
    stroke: var(--navy-blue);
    stroke-width: 4px;
}
.svg-icon-plus--white {
    stroke: var(--off-white-1);
}

.svg-checkmark {
    visibility: hidden; /* Hide initially, as controlled by other CSS */
    width: 20.2px;
    fill: none;
    stroke: var(--orange);
    stroke-width: 3px;
}
.svg-checkmark--blue {
    stroke: var(--navy-blue);
}

.svg-indeterminate {
    visibility: hidden;
    width: 14.5px;
    height: 2px;
    fill: none;
    stroke: var(--navy-blue);
    stroke-width: 2px;
}

.svg-icon-audio {
    width: 44.7px;
    fill: none;
    stroke: var(--navy-blue);
    stroke-width: 4px;
}
.svg-icon-audio:not(.svg-icon-audio--playing) {
    margin-right: -22.42px;
}
.svg-icon-audio:not(.svg-icon-audio--playing) > path:not(:first-child) {
    display: none;
}

.svg-icon-priority {
    width: 20px;
    height: 20px;
}
.svg-icon-priority--low {
    fill: #0DCC83;
}
.svg-icon-priority--medium {
    fill: #E8D600;
}
.svg-icon-priority--high {
    fill: #CC0D0D;
}

.svg-icon-visibility {
    width: 30.492px;
    height: 22.912px;
    fill: none;
    stroke: var(--navy-blue);
    stroke-width: 2.7px;
}
.selector--disabled .svg-icon-visibility {
    stroke: var(--grey);
}

.svg-icon-members {
    width: 32.55px;
    height: 24.5px;
    fill: var(--navy-blue);
    stroke: var(--navy-blue);
    stroke-width: 3px;
}

.svg-icon-members-light {
    width: 24.4px;
    fill: none;
    stroke: white;
    stroke-width: 2.4px;
}

.svg-icon-player {
    width: 29.4px;
    fill: var(--navy-blue);
}

.svg-icon-copy {
    width: 20.7px;
    fill: none;
    stroke: var(--grey);
    stroke-width: 2.7px;
}
.svg-icon-copy--large {
    width: 36px;
    stroke-width: 4px;
}
.svg-icon-copy--blue {
    stroke: var(--navy-blue);
}

.svg-icon-flag {
    height: 22.4px;
    fill: none;
    stroke: var(--grey);
    stroke-width: 2.4px;
}
input:checked ~ .svg-icon-flag {
    stroke: var(--orange);
}

.svg-icon-large-flag {
    width: 23.27px;
    fill: none;
    stroke: white;
    stroke-width: 4px;
}

.svg-icon-flagged {
    height: 22.4px;
    fill: var(--light-orange);
    stroke: var(--light-orange);
    stroke-width: 2.4px;
}

.svg-icon-visibility {
    height: 20.3px;
    fill: none;
    stroke: var(--navy-blue);
    stroke-width: 2.3px;
}
.svg-icon-visibility--grey {
    stroke: var(--grey);
}

.svg-icon-trash {
    width: 20.7px;
    fill: none;
    stroke: var(--navy-blue);
    stroke-width: 2.7px;
}
.svg-icon-trash--small {
    width: 20.4px;
    stroke-width: 2.4px;
}
.svg-icon-trash--red {
    stroke: var(--red);
}

.svg-carousel-node {
    width: 10px;
    height: 10px;
    fill: #CBCBCB;
}
.svg-carousel-node--active {
    fill: var(--navy-blue);
}

.svg-icon-cross {
    width: 13.8px;
    fill: none;
    stroke: var(--navy-blue);
    stroke-width: 2.7px;
}
.svg-icon-cross--white {
    stroke: var(--off-white-1);
}

.svg-icon-hint {
    width: 35.688px;
    fill: var(--navy-blue);
}

.svg-icon-eye {
    width: 30.49px;
    fill: none;
    stroke: white;
    stroke-width: 2.7px;
}
.svg-icon-eye--large {
    width: 36px;
    stroke: var(--grey);
    stroke-width: 3px;
}

.svg-icon-send {
    width: 26.5px;
    fill: none;
    stroke: var(--navy-blue);
    stroke-width: 2.4px;
}

.svg-icon-shuffle {
    width: 22.2px;
    fill: none;
    stroke: var(--navy-blue);
    stroke-width: 3px;
}

.svg-icon-tick-large {
    width: 35.7px;
    fill: none;
    stroke: var(--light-green);
    stroke-width: 5px;
}

.svg-icon-tick-small {
    width: 21.14px;
    fill: none;
    stroke: var(--green);
    stroke-width: 3px;
}

.svg-icon-tick-smaller {
    width: 16.67px;
    fill: none;
    stroke: white;
    stroke-width: 2.4px;
}
.svg-icon-tick-smaller--nested {
    stroke: var(--orange);
    stroke-width: 2.3px;
}

.svg-icon-circle-tick {
    width: 1.03em;
    fill: none;
    stroke: var(--navy-blue);
    stroke-width: 0.0944em;
}

.svg-icon-cross-large {
    width: 24.75px;
    fill: none;
    stroke: var(--red);
    stroke-width: 5px;
}

.svg-icon-cross-medium {
    width: 21.5px;
    fill: none;
    stroke: var(--red);
    stroke-width: 4px;
}

.svg-icon-cross-small {
    width: 21px;
    fill: none;
    stroke: var(--red);
    stroke-width: 3px;
}

.svg-icon-dash-large {
    width: 32px;
    fill: none;
    stroke: var(--light-grey);
    stroke-width: 5px;
}

.svg-score-line {
    width: var(--width);
    height: 100vh;
    fill: none;
    stroke: var(--cyan);
    stroke-width: var(--width);
    stroke-dasharray: 10px;
    stroke-linecap: butt;
}

.svg-trophy {
    width: 65px;
    fill: #FED9A8;
}

.svg-icon-mute {
    width: 55.74px;
    fill: none;
    stroke: white;
    stroke-width: 4px;
}

.svg-icon-fullscreen {
    width: 35.7px;
    fill: white;
    stroke: white;
    stroke-width: 4px;
    stroke-linejoin: miter;
}

.svg-icon-cloud {
    fill: none;
    stroke: var(--cyan-grey);
    stroke-width: 2.4px;
}
.svg-icon-cloud--connected {
    width: 25px;
    fill: var(--cyan-grey);
}
.svg-icon-cloud--saving {
    width: 24.63px;
}
.svg-icon-cloud--disconnected {
    width: 25.39px;
}

.svg-notification-badge {
    width: 11px;
    fill: var(--orange);
}

.svg-info-circle {
    width: 24px;
    fill: none;
    stroke: var(--navy-blue);
}

.svg-info-circle-alt {
    width: 17px;
    fill: var(--grey);
}

.svg-circle {
    width: 32px;
    fill: var(--red);
}
.svg-circle--small {
    width: 26px;
}
.svg-circle--smaller {
    width: 24px;
}

.svg-circle-large {
    width: 40px;
    fill: var(--navy-blue);
}

.svg-icon-drag {
    width: 13px;
    fill: var(--navy-blue);
}

.svg-icon-backspace {
    width: 30.53px;
    fill: none;
    stroke: var(--navy-blue);
    stroke-width: 3px;
}

.svg-icon-undo {
    width: 26.5px;
    fill: none;
    stroke: var(--navy-blue);
    stroke-width: 2.4px;
}

.svg-price-strikethrough {
    width: 113px;
    height: 3px;
    fill: none;
    stroke: var(--red);
    stroke-width: 4px;
    stroke-linecap: square;
}

.svg-auth-checkbox {
    width: 30px;
    fill: none;
    stroke: var(--navy-blue);
    stroke-width: 2px;
}

/* Checkmark */
.svg-auth-checkbox > path {
    display: none;
}
input:checked ~ .svg-auth-checkbox > path {
    display: unset;
}

.svg-icon-envelope {
    width: 23.34px;
    fill: none;
    stroke: white;
    stroke-width: 2.4px;
}

.svg-icon-map-pin {
    width: 20px;
    fill: none;
    stroke: var(--navy-blue);
    stroke-width: 2px;
}

.svg-icon-direction {
    width: 22.4px;
    fill: none;
    stroke: white;
    stroke-width: 2.4px;
}


/* ——— Loading spinner ——— */

.svg-loading-spinner {
    width: 68px;
    transform: rotate(-90deg);
}
.svg-loading-spinner--large {
    width: 90px;
}
.svg-loading-spinner--small {
    width: 27px;
}

.svg-loading-spinner > circle {
    fill: none;
    stroke-width: 8px;
}
/* Track */
.svg-loading-spinner > circle:first-child {
    stroke: var(--lighter-grey-2);
}
.svg-loading-spinner--dark > circle:first-child {
    stroke: var(--grey);
}
/* Spinner */
.svg-loading-spinner > circle:last-child {
    --circumference: 188.495559215px; /* =2*PI*r */
    --length: 35px;
    
    stroke: var(--turquoise);
    stroke-dasharray:
      var(--length)
      calc(var(--circumference) - var(--length));
    
    -webkit-transition-property: stroke-dashoffset;
    -o-transition-property: stroke-dashoffset;
    transition-property: stroke-dashoffset;
    
    -webkit-animation-name: svg-loading-spinner-keyframes;
            animation-name: svg-loading-spinner-keyframes; 
    -webkit-animation-duration: 0.8s; 
            animation-duration: 0.8s; 
    -webkit-animation-iteration-count: infinite; 
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
}
.svg-loading-spinner--dark > circle:last-child {
    stroke: var(--navy-blue);
}

@-webkit-keyframes svg-loading-spinner-keyframes {
    to { stroke-dashoffset: calc(-1 * var(--circumference)); }
}
@keyframes svg-loading-spinner-keyframes {
    to { stroke-dashoffset: calc(-1 * var(--circumference)); }
}


/* ——— Pie timer ——— */

.svg-pie-timer {
    --diameter: 32.59px;
    --radius: 16.295px; /* [0.5 * diameter] */
    --half-circumference: 51.1922522902px; /* [PI * radius] */

    width: var(--diameter);
    height: var(--diameter);

    -webkit-transform: scale(-1, 1) rotate(-90deg);
    -ms-transform: scale(-1, 1) rotate(-90deg);
        transform: scale(-1, 1) rotate(-90deg);

    fill: none;
    stroke: white;
    stroke-width: var(--radius);
    stroke-dasharray: var(--half-circumference);
    stroke-linecap: unset;

    -webkit-animation-name: svg-pie-timer-keyframes;
            animation-name: svg-pie-timer-keyframes;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-duration: var(--duration);
            animation-duration: var(--duration);
    -webkit-animation-delay: var(--delay);
            animation-delay: var(--delay);
}
.svg-pie-timer--large {
    --diameter: 47px;
}
@-webkit-keyframes svg-pie-timer-keyframes
{
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: var(--half-circumference); }
}
@keyframes svg-pie-timer-keyframes
{
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: var(--half-circumference); }
}
.modals {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 6;
    pointer-events: none;
}

/* On Safari, setting position fixed (on modals) seems to default pointer-events to 'none', so revert that for all children here. */
.modals > * {
    pointer-events: auto;
}

.modal-overlay {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;

    background-color: rgba(181, 181, 181, 0.6);
}


/* ——— Modal ——— */

.modal {
    --box-shadow: 0 0 15px rgba(135, 180, 195, 0.2);

    position: absolute;

    max-height: 100%;
    max-width: 100%;
    
    background-color: white;
    border-radius: 14px;

    -webkit-box-shadow: var(--box-shadow);
        -moz-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);

    border: 2px solid var(--lighter-grey-2);

    font-size: 1rem;
}

.modal__inner {
    --width: 580px;
    --modal-padding-horizontal: 63.5px;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    width: var(--width);

    /* Using 100% in either of these seems to break scrolling of the modal. */
    max-width: calc(100vw / var(--scale));
    max-height: calc(100vh / var(--scale));

    padding:
        97px
        var(--modal-padding-horizontal)
        20px
        var(--modal-padding-horizontal);

    overflow: auto;
}

.modal__inner__title {
    margin-bottom: 31px;

    font-size: 1.6em;
    font-weight: bold;
    line-height: 55px;
    color: var(--navy-blue);
}

.modal__inner__content {
    margin-top: -11px;
    
    font-size: 0.88em;
    font-weight: normal;
    line-height: 30px;
    color: var(--navy-blue);
}

.modal__inner__content b {
    color: var(--orange);
}

.modal__inner__content a {
    color: var(--darker-turquoise);
}

.modal__inner__content > :first-child,
.modal__inner__content > :only-child {
    margin-top: 0;
}
.modal__inner__content > :last-child,
.modal__inner__content > :only-child {
    margin-bottom: 0;
}

.modal__inner__content li:not(:last-child) { 
    margin-bottom: 10px;  
 }

.modal__inner > hr {
    height: 2px;
    margin:
        46px
        calc(-1 * var(--modal-padding-horizontal))
        0;
    
    background-color: var(--lighter-grey-2);
    border: none;
}


/* ——— 'OR' separator ——— */

.modal__inner__or-separator {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.modal__inner__or-separator > hr {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;

    height: 2px;
    margin: 0;

    background-color: var(--lighter-grey-2);
    border: none;
}

.modal__inner__or-separator > span {
    margin: 0 11px;

    font-size: 25px;
    font-weight: bold;
    color: var(--grey);
}


/* ——— Variable table ——— */

.modal__inner__variable-table {
    --cell-padding-vertical: 9px;
    --cell-padding-horizontal: 13px;

    margin: /* offset cell padding */
        calc(-1 * var(--cell-padding-vertical))
        calc(-1 * var(--cell-padding-horizontal));
    margin-top: calc(34px - var(--cell-padding-vertical));
    
    border-collapse: collapse;

    color: var(--navy-blue);
    -webkit-text-fill-color: var(--navy-blue);
}

.modal__inner__variable-table tr {
    vertical-align: baseline;
}

.modal__inner__variable-table td {
    padding:
        var(--cell-padding-vertical)
        var(--cell-padding-horizontal);
}


/* ——— Modal > Variable ——— */

/* ——— Modal > Variable > Label ——— */

.modal-variable__label {
    font-size: 0.88em;
}

.modal-variable__label > .info-button {
    margin: 0 0.56ch;
}


/* ——— Modal > Variable > Select ——— */

.modal-variable__select > .custom-select {
    --text-padding: 14px;
    --chevron-size: 15.63px;
    --padding-right: var(--text-padding);
    --color: inherit;

    height: 41px;

    background-color: white;
    border: 1px solid var(--navy-blue);
    border-radius: 9px;
    
    font-size: 0.88em;
    font-weight: bold;

    /* URL reference: https://yoksel.github.io/url-encoder/ */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.63 9.16'%3E%3Cpath d='M1.9 1.9l5.9 5.9 5.9-5.9' fill='none' stroke='%23BAC0C9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.7'/%3E%3C/svg%3E");
}
.modal-variable__select > .custom-select:disabled {
    opacity: 0.48;
}


/* ——— Modal > Variable > Range ——— */

.modal-variable__range__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.modal-variable__range__inner > input {
    --thumb-height: 34px;
    --thumb-width: 9px;
    --thumb-border-radius: 7px;
    --thumb-color: var(--dark-cyan);
    --thumb-cursor: pointer;
    
    --track-height: 9px;
    --track-width: 274px;
    --track-max-width: 100%;
    --track-border-radius: 5px;
    --track-color: var(--off-white-3);
    --track-cursor: pointer;
    
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    width: var(--track-width);
    max-width: 100%; /* Specific width is required for Firefox. */
    margin: 0 14px 0 0;
    background: transparent; /* Otherwise white in Chrome */
}
.modal-variable__range__inner > input:disabled,
.modal-variable__range__inner > input:disabled ~ span {
    --thumb-cursor: not-allowed;
    --track-cursor: not-allowed;

    opacity: 0.48;
    cursor: not-allowed;
}

.modal-variable__range__inner > input::-webkit-slider-thumb {
    -webkit-appearance: none;
}

.modal-variable__range__inner > input:focus {
    outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

.modal-variable__range__inner > input::-ms-track {
    width: 100%;
    cursor: var(--track-cursor);

    /* Hides the slider so custom styles can be added */
    background: transparent; 
    border-color: transparent;
    color: transparent;
}


/* ——— Modal > Variable > Range > Thumb ——— */

/* Special styling for WebKit/Blink */
.modal-variable__range__inner > input::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: var(--thumb-height);
    width: var(--thumb-width);
    border-radius: var(--thumb-border-radius);
    background: var(--thumb-color);
    cursor: var(--thumb-cursor);
    margin-top: calc(-0.5 * (var(--thumb-height) - var(--track-height)));; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}
/* All the same stuff for Firefox */
.modal-variable__range__inner > input::-moz-range-thumb {
    height: var(--thumb-height);
    width: var(--thumb-width);
    border-radius: var(--thumb-border-radius);
    background: var(--thumb-color);
    cursor: var(--thumb-cursor);
}
/* All the same stuff for IE */
.modal-variable__range__inner > input::-ms-thumb {
    height: var(--thumb-height);
    width: var(--thumb-width);
    border-radius: var(--thumb-border-radius);
    background: var(--thumb-color);
    cursor: var(--thumb-cursor);
}


/* ——— Modal > Variable > Range > Track ——— */

.modal-variable__range__inner > input::-webkit-slider-runnable-track {
    height: var(--track-height);
    width: var(--track-width);
    max-width: var(--track-max-width);
    cursor: var(--track-cursor);
    background: var(--track-color);
    border-radius: var(--track-border-radius);
}

.modal-variable__range__inner > input::-moz-range-track {
    height: var(--track-height);
    width: var(--track-width);
    max-width: var(--track-max-width);
    cursor: var(--track-cursor);
    background: var(--track-color);
    border-radius: var(--track-border-radius);
}

.modal-variable__range__inner > input::-ms-track {
    height: var(--track-height);
    width: var(--track-width);
    max-width: var(--track-max-width);
    cursor: var(--track-cursor);
    background: transparent;
    border-color: transparent;
    color: transparent;
}
.modal-variable__range__inner > input::-ms-fill-lower {
    background: var(--track-color);
    border-radius: calc(2 * var(--track-border-radius));
}
.modal-variable__range__inner > input::-ms-fill-upper {
    background: var(--track-color);
    border-radius: calc(2 * var(--track-border-radius));
}

.modal-variable__range__inner > span {
    font-size: 1em;
    font-weight: bold;
    line-height: normal;
}


/* ——— Modal > Variable > Counter ——— */

.modal-variable__counter__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.modal-variable__counter__inner > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    background-color: white;
    border: 1px solid var(--navy-blue);
    border-radius: 9px;
}

.modal-variable__counter__inner > div > button {
    all: unset;
    padding: 0 10px;
    cursor: pointer;

    background-color: transparent;
    line-height: 0;
}

.modal-variable__counter__inner > div > button:enabled:hover > .svg-icon-increment {
    stroke: var(--navy-blue);
}

.modal-variable__counter__inner > div > span {
    --border: 2px solid var(--grey);

    padding: 6px 11.5px;
    min-width: 65px;

    border-left: var(--border);
    border-right: var(--border);

    font-size: 0.88em;
    font-weight: bold;
    text-align: center;
}

.modal-variable__counter__inner > span {
    margin-left: 10px;
    
    font-size: 1em;
    font-weight: bold;
}


/* ——— Modal > Variable > Checkbox ——— */

.modal-variable__checkbox {
    line-height: 0;
}

.modal-variable__checkbox__inner {
    --size: 35px;
    --box-shadow: 0 0 20px rgba(101, 99, 99, 0.2);

    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

    width: var(--size);
    height: var(--size);

    background-color: white;
    border: 1px solid var(--navy-blue);
    border-radius: 9px;
    cursor: pointer;

    -webkit-box-shadow: var(--box-shadow);
        -moz-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}
.modal-variable__checkbox__inner:hover {
    --box-shadow: 1px 1px 20px rgba(101, 99, 99, 0.36);
}

input:checked ~ .modal-variable__checkbox__inner > svg {
    visibility: visible;
}


/* ——— Modal > Variable > Slider ——— */

.modal-variable__slider {
    --knob-size: 28px;
    
    line-height: 0;
}

.modal-variable__slider > label {
    position: relative;

    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;

    cursor: pointer;
}

.modal-variable__slider__rail {
    --height: 16px;
    --border-radius: min(8px, calc(0.5 * var(--height)));

    height: var(--height);
    width: 43px;
    margin: calc(0.5 * var(--knob-size) - var(--border-radius));

    border: 2.4px solid var(--grey);
    border-radius: var(--border-radius);
}
input:checked ~ .modal-variable__slider__rail {
    background-color: var(--grey);
}

.modal-variable__slider__knob {
    position: absolute;
    top: 0; bottom: 0; left: 0;

    height: var(--knob-size);
    width: var(--knob-size);

    background-color: var(--grey);
    border-radius: 50%;
}
input:checked ~ .modal-variable__slider__knob {
    left: unset; right: 0;

    background-color: var(--navy-blue);
}


/* ——— Modal > Variable > Flags ——— */

.modal-variable__flags__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;

    max-width: 440px;
    margin: -3px -5px; /* offset child margin */
}

.modal-variable__flags__inner > * {
    margin: 3px 5px;
}

.modal-variable__flags__inner__toggle {
    --box-shadow: none;
    
    padding: 5px 14px 6px;

    background-color: var(--light-grey);
    border-radius: 9px;
    cursor: pointer;

    -webkit-box-shadow: var(--box-shadow);
        -moz-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);

    font-size: 0.68em;
    font-weight: bold;
    text-transform: lowercase;

    color: white;
    -webkit-text-fill-color: white;
}
input:not(:checked) ~ .modal-variable__flags__inner__toggle:hover {
    --box-shadow: 2px 3px 20px rgba(101, 99, 99, 0.27);
}
input:not(:checked) ~ .modal-variable__flags__inner__toggle:active {
    --box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.16);
}
input:checked ~ .modal-variable__flags__inner__toggle {
    background-color: var(--orange);
}
input:checked ~ .modal-variable__flags__inner__toggle:hover {
    --box-shadow: 2px 3px 20px rgba(101, 99, 99, 0.36);
}
input:checked ~ .modal-variable__flags__inner__toggle:active {
    --box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.25);
}
input:disabled ~ .modal-variable__flags__inner__toggle {
    --box-shadow: none !important;

    opacity: 0.48;
    cursor: not-allowed;
}


/* ——— Modal > Variable > Warning ——— */

.modal-variable__warning {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    margin-left: 10px;
}

.modal-variable__warning > span {
    margin-left: 3px;

    font-size: 0.6em;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;

    color: var(--red);
    -webkit-text-fill-color: var(--red);
}


/* ——— Buttons ——— */

.modal .button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

    min-width: 66px;
    padding: 15.5px 23px;

    font-size: 0.8em;
}

.modal-close-button {
    --box-shadow: 0 0 25px rgba(0, 0, 0, 0.16);

    all: unset;

    position: absolute;
    top: 15.5px;
    left: 15.5px;
    padding: 12.5px;
    
    background-color: var(--red);
    border-radius: 50%;

    -webkit-box-shadow: var(--box-shadow);
        -moz-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    
    line-height: 0;
    cursor: pointer;
}
.modal-close-button:hover {
    --box-shadow: 2px 3px 25px rgba(72, 72, 72, 0.46);

    background-color: var(--dark-red);
}
.modal-close-button:active {
    --box-shadow: inset 3px 3px 18px rgba(0, 0, 0, 0.32);

    background-color: var(--dark-red);
}
.modal-close-button:disabled {
    --box-shadow: 0 0 25px rgba(0, 0, 0, 0.16);

    background-color: var(--off-white-4);
}.modal--info {
    font-size: 1rem;
    color: var(--navy-blue);
}

.modal--info > .modal__inner {
    width: unset;
    max-width: var(--width);
    margin-bottom: 65.6px;
}

.modal--info__inner__title__icon {
    position: relative;
    
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.modal--info__inner__title__icon > span {
    position: absolute;

    font-size: 0.675em;
    font-weight: bold;
    color: white;
}
.modal--upgrade {
    font-size: 1rem;
    font-weight: bold;
    color: var(--navy-blue);
}

.modal--upgrade > .modal__inner {
    --footer-horizontal-margin: 20px;

    position: relative;
    padding-top: 105px;

    width: unset;
    min-width: var(--width);
}

.modal__inner__current-plan {
    position: absolute;
    top: var(--footer-horizontal-margin);
    right: var(--footer-horizontal-margin);

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

/* 'Current plan:' */
.modal__inner__current-plan > :first-child {
    font-size: 0.68em;
}

/* Plan name */
.modal__inner__current-plan > :last-child {
    --box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);

    padding: 4px 16px 7px;
    margin-left: 9px;

    background-color: white;
    border-radius: 9px;

    font-size: 0.88em;
}

.modal--upgrade .modal__inner__title {
    margin-bottom: 60px;
}

.modal__inner__features {
    --feature-vertical-margin: 5px;
    
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    margin-top: calc(0px - var(--feature-vertical-margin));
    margin-bottom: calc(56px - var(--feature-vertical-margin));

    font-size: 0.88em;
    font-weight: normal;
}

.modal__inner__feature {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    margin: var(--feature-vertical-margin) 0;
}

.modal__inner__feature > svg {
    margin-right: 20px;
}

.modal__inner__footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;

    margin:
        0
        calc(var(--footer-horizontal-margin) - var(--modal-padding-horizontal))
        0
        calc(var(--footer-horizontal-margin) - var(--modal-padding-horizontal));
}

/* Starting price */
.modal__inner__footer > span {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;

    padding: 0 9px;

    font-size: 0.88em;
    font-weight: normal;
}

/* Starting price > price */
.modal__inner__footer > span > span {
    font-size: 0.91em;
    font-weight: bold;
}

/* CTA button */
.modal__inner__footer > input {
    --box-shadow: 0 0 20px rgba(101, 99, 99, 0.2);

    all: unset;

    padding: 14px 21px;

    background-color: var(--gold);
    border-radius: 9px;
    cursor: pointer;

    font-size: 0.88em;
    text-transform: uppercase;

    color: white;
    -webkit-text-fill-color: white;
}
.modal__inner__footer > input:disabled {
    background-color: var(--grey);
}
.modal--pool {
    font-size: 1rem;
}

.modal--pool > .modal__inner {
    --width: 665px;
}

.modal--pool__inner__name-input {
    --box-shadow: 0 0 20px rgba(101, 99, 99, 0.2);

    all: unset;

    padding: 18px 24px;

    background-color: white;
    border-radius: 9px;
    cursor: text;

    -webkit-box-shadow: var(--box-shadow);
        -moz-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
            
    font-size: 1em;
    font-weight: bold;

    color: var(--navy-blue);
    -webkit-text-fill-color: var(--navy-blue);
}
.modal--pool__inner__name-input:focus {
    --box-shadow: 0 0 20px var(--cyan);
}
.modal--pool__inner__name-input:disabled {
    background-color: var(--off-white-1);
}

.modal--pool__inner__footer {
    --child-margin: 6px;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;

    /* Offset child margin. */
    margin:
        calc(76px - var(--child-margin))
        calc(27px - var(--child-margin) - var(--modal-padding-horizontal))
        calc(9px - var(--child-margin))
        calc(27px - var(--child-margin) - var(--modal-padding-horizontal));
}

.modal--pool__inner__footer > .pool-page-invite-members-button > .button {
    margin: var(--child-margin);
    padding: 15.5px 22px;
}

.modal--pool__inner__footer > .button {
    margin: var(--child-margin);
    margin-left: auto;
}
.modal--feedback {
    font-size: 1rem;
}

.modal--feedback > .modal__inner {
    width: unset;
}

.modal--feedback__inner__question {
    font-size: 0.88em;
    color: var(--navy-blue);
}

.modal--feedback__inner__opinion {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;

    margin-bottom: 64px;
}

.modal--feedback__inner__opinion__option {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    width: 121px;
    margin-top: 34px;

    cursor: pointer;
}

.modal--feedback__inner__opinion__option__radio-button {
    --size: 35px;

    position: relative;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.modal--feedback__inner__opinion__option__radio-button > input {
    all: unset;
}

.modal--feedback__inner__opinion__option__radio-button > * {
    height: var(--size) !important;
    width: var(--size) !important;
}

/* dot container and dot */
.modal--feedback__inner__opinion__option__radio-button > div {
    position: absolute;

    border-radius: 50%;

    -webkit-box-shadow: var(--box-shadow);
        -moz-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}

/* dot container */
.modal--feedback__inner__opinion__option__radio-button > div:first-of-type {
    --box-shadow: 0 0 10px rgba(128, 128, 128, 0.16);

    background-color: white;
    border: 2px solid var(--lighter-grey-2);
}
.modal--feedback__inner__opinion__option:hover div:first-of-type {
    border-color: var(--light-grey);
}

/* dot */
.modal--feedback__inner__opinion__option__radio-button > div:last-of-type {
    --size: 15px;
    --box-shadow:
        inset 0 0 10px var(--dark-cyan),
        0 0 10px rgba(0, 0, 0, 0.16);

    background-color: var(--turquoise);
}
.modal--feedback__inner__opinion__option__radio-button > 
input:not(:checked) ~ div:last-of-type {
    display: none;
}

/* label */
.modal--feedback__inner__opinion__option > span {
    margin-top: 14px;

    font-size: 0.68em;
    text-align: center;
    color: var(--navy-blue);
}

.modal--feedback__inner__comment {
    --box-shadow: 0 0 20px rgba(101, 99, 99, 0.2);

    all: unset;

    -ms-flex-negative: 0;
        flex-shrink: 0;

    height: 166px;
    padding: 16px 21px;
    margin-bottom: 58px;

    background-color: white;
    border-radius: 9px;
    cursor: text;

    -webkit-box-shadow: var(--box-shadow);
        -moz-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);

    font-size: 0.88em;

    color: var(--navy-blue);
    -webkit-text-fill-color: var(--navy-blue);
}
.modal--feedback__inner__comment:focus {
    --box-shadow: 0 0 20px var(--cyan);
}
.modal--feedback__inner__comment:disabled {
    opacity: 0.48;
}

.modal--feedback .button {
    -ms-flex-item-align: end;
        align-self: flex-end;

    margin-right: calc(25px - var(--modal-padding-horizontal));
}
.wordpool-page__top-banner {
    --box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);

    padding: 10.5px 14.5px 14.5px;
    z-index: 6;

    background-color: var(--navy-blue);

    -webkit-box-shadow: var(--box-shadow);
        -moz-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);

    font-size: 0.88rem;
    font-weight: bold;
    text-align: center;
    color: var(--grey);
}
.wordpool-page__top-banner--important {
    background-color: var(--orange);
    color: white;
}

.wordpool-page__top-banner > a {
    color: white;
}


/* ——— Nav bar ——— */

.wordpool-page__nav-bar {
    --item-padding: 32px;
    --background-color: var(--cyan);
    --box-shadow: 0 0 20px rgba(0, 0, 0, 0.22);

    -ms-flex-negative: 0;
        flex-shrink: 0;

    position: relative;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
        
    padding-right: 35.5px;
    min-height: 116px;
    z-index: 5;

    background-color: var(--background-color);

    -webkit-box-shadow: var(--box-shadow);
        -moz-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);

    font-size: 1rem;
}

/* Logo container */
.wordpool-page__nav-bar > :first-child {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    
    line-height: 0;
}

.wordpool-page__nav-bar__logo {
    display: inline-block;
    padding: 15px var(--item-padding);
}

.wordpool-page__nav-bar__home-toggle {
    margin: 0 var(--item-padding);
}

.wordpool-page__nav-bar__home-toggle > .button {
    --background-color-hover: var(--dark-cyan);
    --background-color-active: var(--dark-cyan);

    --box-shadow-default: none;
    --box-shadow-hover: none;
    --box-shadow-active: inset 0 0 10px rgba(25, 65, 69, 0.3);

    padding: 14px 24.5px;
}

.wordpool-page__nav-bar > .selector,
.wordpool-page__nav-bar > a {
    --border-radius: 9px;
    --box-shadow-focus: 0 9px 0 var(--background-color);

    font-size: 0.88em;
    font-weight: bold;
    color: var(--navy-blue);
}
.wordpool-page__nav-bar > .selector:focus,
.wordpool-page__nav-bar > .selector:focus-within {
    z-index: 1;

    -webkit-box-shadow: var(--box-shadow-focus);
        -moz-box-shadow: var(--box-shadow-focus);
            box-shadow: var(--box-shadow-focus);
}

/* Selector buttons */
.wordpool-page__nav-bar > .selector > div:not(.selector__menu),
.wordpool-page__nav-bar > a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    
    padding: var(--item-padding);

    background-color: var(--background-color);
}
.wordpool-page__nav-bar > .selector > div:not(.selector__menu) > span {
    margin-right: 14px;
    text-transform: uppercase;
}

.wordpool-page__nav-bar .selector__menu {
    top: calc(100% - 12px);
}

.wordpool-page__nav-bar .selector__menu__inner {
    max-height: 560px;
    overflow-y: scroll;
}

.wordpool-page__nav-bar .selector__menu__inner__option {
    color: var(--navy-blue);
}
.wordpool-page__nav-bar .selector__menu__inner__option:hover,
.wordpool-page__nav-bar .selector__menu__inner__option:focus {
    background-color: var(--dark-cyan);
}

.wordpool-page__nav-bar > a {
    text-decoration: none;
    text-transform: uppercase;
}


/* ——— Nav bar > Notifications ——— */

.wordpool-page__nav-bar__notifications-selector .svg-notification-badge {
    position: absolute;
    left: calc(50% + 11.5px);
    bottom: calc(50% + 12.5px);
}

.wordpool-page__nav-bar__notifications-selector .selector__menu__inner {
    --background-color: white;
}

.nav-bar-notification {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;

    padding: 15px 21px;
    width: 424px;

    background-color: var(--light-cyan);
}
.nav-bar-notification--opened {
    background-color: transparent;
}
.nav-bar-notification:hover,
.nav-bar-notification:focus {
    background-color: var(--cyan) !important;
}
.nav-bar-notification--opened:hover,
.nav-bar-notification--opened:focus {
    background-color: var(--lighter-cyan-2) !important;
}

/* Primary content container */
.nav-bar-notification > div {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;

    margin: 0 4px !important;
    overflow: hidden;

    color: var(--navy-blue);
}

.nav-bar-notification__content {
    display: -webkit-box;
    -webkit-box-orient: vertical;  

     /* Allow 2 lines of text before ellipsis. */
    -webkit-line-clamp: 2;
            line-clamp: 2;

    max-width: 100%;
    overflow: hidden;

    font-size: 0.88em;
    font-weight: normal;
    line-height: 30px;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    white-space: normal;
}

.nav-bar-notification__meta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    margin-top: 26px;
}

.nav-bar-notification__meta__icon {
    margin-right: 11px;

    line-height: 0;
}

.nav-bar-notification__meta__time {
    font-size: 0.68em;
    font-weight: bold;
    text-transform: uppercase;
}
.nav-bar-notification--opened .nav-bar-notification__meta__time {
    color: var(--dark-cyan);
}

.nav-bar-notification > img {
    --size: 104px;

    width: var(--size);
    height: var(--size);

    -o-object-fit: cover;
       object-fit: cover; /* Center the image in the square */

    margin: 3px 0 3px 27px;
}

/* ——— Tip ——— */

.wordpool-page__tip {
    --top: 0;
    --left: 0;

    --tip-background-color: var(--dark-turquoise);
    --box-shadow: 0 0 10px rgba(0, 0, 0, 0.29);

    position: fixed;
    top: var(--top);
    left: var(--left);

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    max-width: 261px;
    max-height: calc(100% - var(--top));

    min-width: 60px;
    min-height: 60px;

    background-color: var(--tip-background-color);
    border-radius: 9px;

    -webkit-box-shadow: var(--box-shadow);
        -moz-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);

    z-index: 6;
}
.wordpool-page__tip--on-modal {
    z-index: 7;
}

.wordpool-page__tip__close-button {
    position: absolute;
    top: 9px;
    right: 10px;

    min-width: unset;
    padding: 6px;

    border-radius: 50%;

    line-height: 0;
}
.wordpool-page__tip__close-button > svg {
    stroke: var(--tip-background-color);
}

.wordpool-page__tip__body {
    padding: 25px 16.5px 16px;
    overflow: auto;

    color: white;
}

/* Title */
.wordpool-page__tip__body > div {
    margin-bottom: 15.5px;

    /* Prevent title from ever overlapping close button. */
    margin-right: 25.5px;

    font-size: 0.68em;
    font-weight: bold;
    text-transform: uppercase;
}

.wordpool-page__tip__body > p {
    margin: 0;

    font-size: 0.68em;
}
/* When not expanded, clip description after 3 lines. */
:not(.wordpool-page__tip--expanded) > .wordpool-page__tip__body > p {
    display: -webkit-box;
    -webkit-box-orient: vertical;

    overflow: hidden;

    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;

    -webkit-line-clamp: 4;
            line-clamp: 4;
}

.wordpool-page__tip__expand-toggle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    padding: 10px 14px;

    /* Move slightly closer to above element. */
    margin-top: -3px;

    border-top: 1px solid white;
    cursor: pointer;
}
/* If not expandable, hide the expand toggle. */
:not(.wordpool-page__tip--expandable) > .wordpool-page__tip__expand-toggle {
    display: none;
}

.wordpool-page__tip__expand-toggle__variant {
    --color: white;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
input:checked ~ .wordpool-page__tip__expand-toggle__variant:first-of-type,
input:not(:checked) ~ .wordpool-page__tip__expand-toggle__variant:last-of-type {
    display: none;
}

.wordpool-page__tip__expand-toggle__variant > span {
    font-size: 0.6em;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color);
}

.wordpool-page__tip__expand-toggle__variant > svg {
    margin-left: 9px;

    stroke: var(--color);
}

.wordpool-page__tip__pointer {
    --height: 59px;
    --width: 34px;
    --rotate: 0deg;
    --rotate-offset: 12.5px; /* calc(0.5 * (var(--height) - var(--width))); */
    --overlap: 1px;

    position: absolute;
    width: var(--width);
    height: var(--height);
    overflow: hidden;
    pointer-events: none;

    -webkit-transform: rotate(var(--rotate));
        -ms-transform: rotate(var(--rotate));
            transform: rotate(var(--rotate));

    fill: var(--tip-background-color);
}
/* Point */
.wordpool-page__tip--dir-left > .wordpool-page__tip__pointer {
    --rotate: 180deg;

    right: calc(100% - var(--overlap));
}
.wordpool-page__tip--dir-right > .wordpool-page__tip__pointer {
    left: calc(100% - var(--overlap));
}
.wordpool-page__tip--dir-up > .wordpool-page__tip__pointer {
    --rotate: -90deg;

    bottom: calc(100% - var(--rotate-offset) - var(--overlap));
}
.wordpool-page__tip--dir-down > .wordpool-page__tip__pointer {
    --rotate: 90deg;

    top: calc(100% - var(--rotate-offset) - var(--overlap));
}
/* Align */
.wordpool-page__tip--align-left > .wordpool-page__tip__pointer {
    left: var(--rotate-offset);
}
.wordpool-page__tip--align-right > .wordpool-page__tip__pointer {
    right: var(--rotate-offset);
}
.wordpool-page__tip--align-top > .wordpool-page__tip__pointer {
    top: 0;
}
.wordpool-page__tip--align-bottom > .wordpool-page__tip__pointer {
    bottom: 0;
}
/* Align center */
.wordpool-page__tip--dir-left.wordpool-page__tip--align-center > .wordpool-page__tip__pointer,
.wordpool-page__tip--dir-right.wordpool-page__tip--align-center > .wordpool-page__tip__pointer {
    top: calc(50% - 0.5 * var(--height));
}
.wordpool-page__tip--dir-up.wordpool-page__tip--align-center > .wordpool-page__tip__pointer,
.wordpool-page__tip--dir-down.wordpool-page__tip--align-center > .wordpool-page__tip__pointer {
    left: calc(50% - 0.5 * var(--width));
}