/**********************************************************
**
** Brand colors
**
**********************************************************/
:root {
    --color-brand-black: #222;

    --color-brand-blue: #004b7d;
    --color-brand-blue-medium: #005d89;
    --color-brand-blue-secondary: #637492;
    --color-brand-blue-tertiary: #ccdeec;
    --color-brand-blue-light: #e6f4ff;
    --color-brand-blue-extra-light: #f5fbff;

    --color-brand-orange: #fa6400;
    --color-brand-orange-light: #ffe2b1;

    --color-brand-green: #51b848;
    --color-brand-green-light: #d3fa80;

    /**********************************************************
    **
    ** System colors
    **
    **********************************************************/
    --color-system-white: #fff;
    --color-system-black: #000;
    --color-system-red: #e30000;

    /**********************************************************
    **
    ** Functional colors
    **
    **********************************************************/
    --color-warning: var(--color-system-red);
    --color-success: var(--color-brand-green);
    --color-info: var(--color-brand-blue-secondary);

    --color-text-primary: var(--color-brand-blue);
    --color-text-secondary: var(--color-brand-black);
    --color-text-tertiary: var(--color-brand-orange);
    --color-text-light: var(--color-system-white);
    --color-text-placeholder: var(--color-brand-blue-secondary);

    --color-border-primary: var(--color-brand-blue-tertiary);
    --color-border-light: var(--color-system-white);
    --color-border-focus: var(--color-brand-blue);

    --color-background-primary: var(--color-brand-blue-extra-light);
    --color-background-secondary: var(--color-brand-blue);
    --color-background-subtle: var(--color-brand-blue-light);
    --color-background-extra-subtle: var(--color-brand-blue-extra-light);

    --color-button-background: var(--color-brand-blue);
    --color-button-text: var(--color-system-white);

    --color-secondary-button-background: var(--color-system-white);
    --color-secondary-button-text: var(--color-brand-blue);
    --color-secondary-button-border: var(--color-brand-blue-secondary);

    --color-disabled-button-background: var(--color-brand-blue-secondary);
    --color-disabled-button-text: var(--color-system-white);

    --color-dialog-background: var(--color-system-white);
    --color-dialog-text: var(--color-text-primary);

    --color-gradient-start: var(--color-brand-green-light);
    --color-gradient-end: var(--color-brand-blue-tertiary);

    --color-count-background: var(--color-brand-orange);
    --color-count-text: var(--color-system-white);

    --color-action-icon: var(--color-brand-orange);

    --color-indicator-primary: var(--color-brand-blue-tertiary);
    --color-indicator-focus: var(--color-brand-blue);
    --color-indicator-active: var(--color-brand-orange);

    /**********************************************************
    **
    ** Third party colors
    **
    **********************************************************/

    --color-facebook-blue: #3b5998;
    --color-apple-black: #000;
}
/**********************************************************
**
** Base brand typography
**
**********************************************************/
:root {
    --font-size-extra-large: 6.4rem;
    --font-size-large: 3.6rem;
    --font-size-medium: 2.4rem;
    --font-size-regular: 1.8rem;
    --font-size-small: 1.6rem;
    --font-size-extra-small: 1.1rem;

    --line-height-extra-large: 2em;
    --line-height-large: 1.6em;
    --line-height-increased: 1.4em;
    --line-height-regular: 1.2em;
    --line-height-tiny: 1em;
}

/**********************************************************
**
** Default styles
**
**********************************************************/

p, .p {
    display: block;
    margin-bottom: 2rem;
}
h1, .h1 {
    font-size: var(--font-size-large);
}
h2, .h2 {
    font-size: var(--font-size-medium);
}
h3, .h3 {
    font-size: var(--font-size-regular);
}

.general-description {
    color: var(--color-system-black);
    max-width: 800px;
}

.color-orange {
    color: var(--color-brand-orange);
}
:root {
    /**********************************************************
    **
    ** Layout
    **
    **********************************************************/
    --content-max-width: 60rem;
    --breakpoint-largephone: 368px;
    --breakpoint-tablet: 600px;
    --breakpoint-desktop: 1000px;
    --desktop-content-max-width: 96rem;

    /**********************************************************
    **
    ** Stacking order
    **
    **********************************************************/
    --page-circle-z-index: 10;
    --page-content-z-index: 20;
    --activity-info-z-index: 30;
    --map-overlay-z-index: 40;
    --header-z-index: 50;
    --floating-button-z-index: 60;
    --page-navigation-z-index: 65;
    --dialog-z-index: 70;
    --page-z-index: 100; /* Needs to be above *everything* */

    /**********************************************************
    **
    ** Generic values
    **
    **********************************************************/
    --border-default: 1px solid var(--color-brand-blue-tertiary);
    --border-radius-extra-small: 0.4rem;
    --border-radius-small: 0.8rem;
    --border-radius: 1.1rem;
    --border-radius-rounded: 9999px;
    --easing: cubic-bezier(0.4, 0, 0.2, 1); /* Uniform animation easing */
    --page-padding: 1.5rem; /* Distance from edge of screen */
    --floating-button-bottom-padding: 11.2rem;

    /**********************************************************
    **
    ** Avatar sizes
    **
    **********************************************************/
    --avatar-size-tiny: 3rem;
    --avatar-size-smaller: 3.6rem;
    --avatar-size-small: 5rem;
    --avatar-size-regular: 10rem;
    --avatar-size-large: 15rem;

    /**********************************************************
    **
    ** Header values
    **
    **********************************************************/
    --header-height: 6rem;
    --desktop-header-height: 9.2rem;
    --header-ios-offset: 16px;
    --pagenav-phone-height: 7.1rem;
    --pagenav-tablet-height: 6rem;

    /**********************************************************
    **
    ** Button values
    **
    **********************************************************/
    --button-size-large: 4.8rem;
    --button-size-medium: 4.5rem;
    --button-size-small: 3.6rem;
    --button-side-padding-large: 3.5rem;
    --button-side-padding-medium: 2.5rem;
    --button-side-padding-small: 2rem;
    --button-extra-area: 1.2rem; /* To increase click area */

    /**********************************************************
    **
    ** Label values
    **
    **********************************************************/
    --label-size-medium: 3.6rem;

    /**********************************************************
    **
    ** Input values
    **
    **********************************************************/
    --input-size-large: 4.8rem;
    --input-size-small: 3.6rem;

    /**********************************************************
    **
    ** Icon values
    **
    **********************************************************/
    --icon-size-small: 1.6rem;
    --icon-size-medium: 2.4rem;
    --icon-size-large: 3.6rem;
    --icon-size-extra-large: 4rem;

    /**********************************************************
    **
    ** Shadows
    **
    **********************************************************/
    --shadow-item: 0 0.1rem 0.4rem rgba(0, 75, 125, 0.2);
    --shadow-fixed: 0 0.3rem 1.2rem rgba(0, 75, 125, 0.2);
    --shadow-content: 0 0 2.4rem rgba(0, 75, 125, 0.15);
    --shadow-button: 0 0.4rem 1.2rem -0.2rem rgba(0, 75, 125, 0.3);

    /**********************************************************
    **
    ** Gutter
    **
    **********************************************************/
    --gutter-mobile: 1.5rem;
    --gutter-desktop: 2rem;

    /**********************************************************
    **
    ** Overlay values
    **
    **********************************************************/
    --overlay-background: rgba(var(--color-text-secondary), 0.45);
}
/**********************************************************
**
** Brand colors
**
**********************************************************/
:root {
    --color-brand-black: #222;

    --color-brand-blue: #004b7d;
    --color-brand-blue-medium: #005d89;
    --color-brand-blue-secondary: #637492;
    --color-brand-blue-tertiary: #ccdeec;
    --color-brand-blue-light: #e6f4ff;
    --color-brand-blue-extra-light: #f5fbff;

    --color-brand-orange: #fa6400;
    --color-brand-orange-light: #ffe2b1;

    --color-brand-green: #51b848;
    --color-brand-green-light: #d3fa80;

    /**********************************************************
    **
    ** System colors
    **
    **********************************************************/
    --color-system-white: #fff;
    --color-system-black: #000;
    --color-system-red: #e30000;

    /**********************************************************
    **
    ** Functional colors
    **
    **********************************************************/
    --color-warning: var(--color-system-red);
    --color-success: var(--color-brand-green);
    --color-info: var(--color-brand-blue-secondary);

    --color-text-primary: var(--color-brand-blue);
    --color-text-secondary: var(--color-brand-black);
    --color-text-tertiary: var(--color-brand-orange);
    --color-text-light: var(--color-system-white);
    --color-text-placeholder: var(--color-brand-blue-secondary);

    --color-border-primary: var(--color-brand-blue-tertiary);
    --color-border-light: var(--color-system-white);
    --color-border-focus: var(--color-brand-blue);

    --color-background-primary: var(--color-brand-blue-extra-light);
    --color-background-secondary: var(--color-brand-blue);
    --color-background-subtle: var(--color-brand-blue-light);
    --color-background-extra-subtle: var(--color-brand-blue-extra-light);

    --color-button-background: var(--color-brand-blue);
    --color-button-text: var(--color-system-white);

    --color-secondary-button-background: var(--color-system-white);
    --color-secondary-button-text: var(--color-brand-blue);
    --color-secondary-button-border: var(--color-brand-blue-secondary);

    --color-disabled-button-background: var(--color-brand-blue-secondary);
    --color-disabled-button-text: var(--color-system-white);

    --color-dialog-background: var(--color-system-white);
    --color-dialog-text: var(--color-text-primary);

    --color-gradient-start: var(--color-brand-green-light);
    --color-gradient-end: var(--color-brand-blue-tertiary);

    --color-count-background: var(--color-brand-orange);
    --color-count-text: var(--color-system-white);

    --color-action-icon: var(--color-brand-orange);

    --color-indicator-primary: var(--color-brand-blue-tertiary);
    --color-indicator-focus: var(--color-brand-blue);
    --color-indicator-active: var(--color-brand-orange);

    /**********************************************************
    **
    ** Third party colors
    **
    **********************************************************/

    --color-facebook-blue: #3b5998;
    --color-apple-black: #000;
}
/**********************************************************
**
** Base brand typography
**
**********************************************************/
:root {
    --font-size-extra-large: 6.4rem;
    --font-size-large: 3.6rem;
    --font-size-medium: 2.4rem;
    --font-size-regular: 1.8rem;
    --font-size-small: 1.6rem;
    --font-size-extra-small: 1.1rem;

    --line-height-extra-large: 2em;
    --line-height-large: 1.6em;
    --line-height-increased: 1.4em;
    --line-height-regular: 1.2em;
    --line-height-tiny: 1em;
}

/**********************************************************
**
** Default styles
**
**********************************************************/

p, .p {
    display: block;
    margin-bottom: 2rem;
}
h1, .h1 {
    font-size: var(--font-size-large);
}
h2, .h2 {
    font-size: var(--font-size-medium);
}
h3, .h3 {
    font-size: var(--font-size-regular);
}

.general-description {
    color: var(--color-system-black);
    max-width: 800px;
}

.color-orange {
    color: var(--color-brand-orange);
}
:root {
    /**********************************************************
    **
    ** Layout
    **
    **********************************************************/
    --content-max-width: 60rem;
    --breakpoint-largephone: 368px;
    --breakpoint-tablet: 600px;
    --breakpoint-desktop: 1000px;
    --desktop-content-max-width: 96rem;

    /**********************************************************
    **
    ** Stacking order
    **
    **********************************************************/
    --page-circle-z-index: 10;
    --page-content-z-index: 20;
    --activity-info-z-index: 30;
    --map-overlay-z-index: 40;
    --header-z-index: 50;
    --floating-button-z-index: 60;
    --page-navigation-z-index: 65;
    --dialog-z-index: 70;
    --page-z-index: 100; /* Needs to be above *everything* */

    /**********************************************************
    **
    ** Generic values
    **
    **********************************************************/
    --border-default: 1px solid var(--color-brand-blue-tertiary);
    --border-radius-extra-small: 0.4rem;
    --border-radius-small: 0.8rem;
    --border-radius: 1.1rem;
    --border-radius-rounded: 9999px;
    --easing: cubic-bezier(0.4, 0, 0.2, 1); /* Uniform animation easing */
    --page-padding: 1.5rem; /* Distance from edge of screen */
    --floating-button-bottom-padding: 11.2rem;

    /**********************************************************
    **
    ** Avatar sizes
    **
    **********************************************************/
    --avatar-size-tiny: 3rem;
    --avatar-size-smaller: 3.6rem;
    --avatar-size-small: 5rem;
    --avatar-size-regular: 10rem;
    --avatar-size-large: 15rem;

    /**********************************************************
    **
    ** Header values
    **
    **********************************************************/
    --header-height: 6rem;
    --desktop-header-height: 9.2rem;
    --header-ios-offset: 16px;
    --pagenav-phone-height: 7.1rem;
    --pagenav-tablet-height: 6rem;

    /**********************************************************
    **
    ** Button values
    **
    **********************************************************/
    --button-size-large: 4.8rem;
    --button-size-medium: 4.5rem;
    --button-size-small: 3.6rem;
    --button-side-padding-large: 3.5rem;
    --button-side-padding-medium: 2.5rem;
    --button-side-padding-small: 2rem;
    --button-extra-area: 1.2rem; /* To increase click area */

    /**********************************************************
    **
    ** Label values
    **
    **********************************************************/
    --label-size-medium: 3.6rem;

    /**********************************************************
    **
    ** Input values
    **
    **********************************************************/
    --input-size-large: 4.8rem;
    --input-size-small: 3.6rem;

    /**********************************************************
    **
    ** Icon values
    **
    **********************************************************/
    --icon-size-small: 1.6rem;
    --icon-size-medium: 2.4rem;
    --icon-size-large: 3.6rem;
    --icon-size-extra-large: 4rem;

    /**********************************************************
    **
    ** Shadows
    **
    **********************************************************/
    --shadow-item: 0 0.1rem 0.4rem rgba(0, 75, 125, 0.2);
    --shadow-fixed: 0 0.3rem 1.2rem rgba(0, 75, 125, 0.2);
    --shadow-content: 0 0 2.4rem rgba(0, 75, 125, 0.15);
    --shadow-button: 0 0.4rem 1.2rem -0.2rem rgba(0, 75, 125, 0.3);

    /**********************************************************
    **
    ** Gutter
    **
    **********************************************************/
    --gutter-mobile: 1.5rem;
    --gutter-desktop: 2rem;

    /**********************************************************
    **
    ** Overlay values
    **
    **********************************************************/
    --overlay-background: rgba(var(--color-text-secondary), 0.45);
}
:root {
    --gradient-angle: 45deg;
    --default-font-stack: "Montserrat-web", sans-serif;
    --display-font-stack: "Swiss721-web", sans-serif;
    --safe-area-inset-top: 0;
    --safe-area-inset-right: 0;
    --safe-area-inset-bottom: 0;
    --safe-area-inset-left: 0;
    --header-offset: 0rem;

    /* --gutter: var(--gutter-mobile); */
    --gutter: var(--gutter-desktop);
}
@font-face {
    font-family: "Montserrat-app";
    src: url(/static/647f0e61af3a76a138c3.ttf);
    font-weight: normal;
}

@font-face {
    font-family: "Montserrat-app";
    src: url(/static/0915f0a8c3367a6d05ec.ttf);
    font-weight: bold;
}

@font-face {
    font-family: "Swiss721-app";
    src: url(/static/2b391906aa82f5652b18.ttf); /* explicit use of bold file at normal font-weight */
    font-weight: normal;
}

@font-face {
    font-family: "Swiss721-app";
    src: url(/static/2b391906aa82f5652b18.ttf);
    font-weight: bold;
}

@font-face {
    font-family: "Montserrat-web";
    src: url(/static/3cd786652b8a2e9d41f2.ttf) format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Montserrat-web";
    src: url(/static/2a458742d8dae0c7f452.woff2) format("woff2");
    font-weight: 500;
}

@font-face {
    font-family: "Montserrat-web";
    src:
        url(/static/8edf7a81e52301020167.woff2) format("woff2"),
        url(/static/0915f0a8c3367a6d05ec.ttf) format("truetype");
    font-weight: bold;
}

@font-face {
    font-family: "Swiss721-web";
    src:
        url(/static/dafe376747afb7772367.woff2) format("woff2"),
        url(/static/2b391906aa82f5652b18.ttf) format("truetype"); /* explicit use of bold files at normal font-weight */
    font-weight: normal;
}

@font-face {
    font-family: "Swiss721-web";
    src:
        url(/static/dafe376747afb7772367.woff2) format("woff2"),
        url(/static/2b391906aa82f5652b18.ttf) format("truetype");
    font-weight: bold;
}

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

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

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: var(--line-height-tiny);
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

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

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

/* apply a natural box layout model to all elements, but allowing components to change */
html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}
/**********************************************************
**
** Base styles
**
**********************************************************/

html {
    font-size: 10px;
    background: var(--color-background-primary);
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* Avoid horizontal squeeze under minimum mobile screen width */
    min-width: 320px;
}

html,
body {
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;
    color: var(--color-text-primary);
}

body {
    font-family: sans-serif; /* Fallback for when CSS custom properties are not supported */
    font-family: var(--default-font-stack);
    font-size: var(--font-size-regular);
}

button,
a {
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    user-select: none;
    outline: none;
}

button {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    background: none;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    cursor: pointer;
    color: inherit;
    line-height: var(--line-height-tiny);
}

a {
    color: inherit;
}

strong {
    font-weight: bold;
}

em,
i {
    font-style: italic;
}

input,
textarea {
    font-family: inherit;
    font-size: inherit;
    resize: none;
    font-weight: inherit;
    outline: none;
    padding: 0;
    border: 0;
    /* appearance: none; */
    color: inherit;
    border-radius: 0;
    margin: 0;
}

select,
code,
pre {
    font-family: inherit;
    font-size: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--display-font-stack);
    font-weight: normal;
    line-height: normal;
}

::placeholder {
    color: var(--color-text-placeholder);
    text-transform: lowercase;
    font-size: var(--font-size-regular);
}

:focus::placeholder {
    color: transparent;
}

small {
    font-size: var(--font-size-extra-small);
}


.semi-transparent {
    opacity: 0.5;
}

/* For alpine.js: */
[x-cloak] { display: none !important; }

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

.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
@font-face {
    font-family: "Montserrat-app";
    src: url(/static/647f0e61af3a76a138c3.ttf);
    font-weight: normal;
}

@font-face {
    font-family: "Montserrat-app";
    src: url(/static/0915f0a8c3367a6d05ec.ttf);
    font-weight: bold;
}

@font-face {
    font-family: "Swiss721-app";
    src: url(/static/2b391906aa82f5652b18.ttf); /* explicit use of bold file at normal font-weight */
    font-weight: normal;
}

@font-face {
    font-family: "Swiss721-app";
    src: url(/static/2b391906aa82f5652b18.ttf);
    font-weight: bold;
}

@font-face {
    font-family: "Montserrat-web";
    src: url(/static/3cd786652b8a2e9d41f2.ttf) format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Montserrat-web";
    src: url(/static/2a458742d8dae0c7f452.woff2) format("woff2");
    font-weight: 500;
}

@font-face {
    font-family: "Montserrat-web";
    src:
        url(/static/8edf7a81e52301020167.woff2) format("woff2"),
        url(/static/0915f0a8c3367a6d05ec.ttf) format("truetype");
    font-weight: bold;
}

@font-face {
    font-family: "Swiss721-web";
    src:
        url(/static/dafe376747afb7772367.woff2) format("woff2"),
        url(/static/2b391906aa82f5652b18.ttf) format("truetype"); /* explicit use of bold files at normal font-weight */
    font-weight: normal;
}

@font-face {
    font-family: "Swiss721-web";
    src:
        url(/static/dafe376747afb7772367.woff2) format("woff2"),
        url(/static/2b391906aa82f5652b18.ttf) format("truetype");
    font-weight: bold;
}

/**********************************************************
**
** Brand colors
**
**********************************************************/
:root {
    --color-brand-black: #222;

    --color-brand-blue: #004b7d;
    --color-brand-blue-medium: #005d89;
    --color-brand-blue-secondary: #637492;
    --color-brand-blue-tertiary: #ccdeec;
    --color-brand-blue-light: #e6f4ff;
    --color-brand-blue-extra-light: #f5fbff;

    --color-brand-orange: #fa6400;
    --color-brand-orange-light: #ffe2b1;

    --color-brand-green: #51b848;
    --color-brand-green-light: #d3fa80;

    /**********************************************************
    **
    ** System colors
    **
    **********************************************************/
    --color-system-white: #fff;
    --color-system-black: #000;
    --color-system-red: #e30000;

    /**********************************************************
    **
    ** Functional colors
    **
    **********************************************************/
    --color-warning: var(--color-system-red);
    --color-success: var(--color-brand-green);
    --color-info: var(--color-brand-blue-secondary);

    --color-text-primary: var(--color-brand-blue);
    --color-text-secondary: var(--color-brand-black);
    --color-text-tertiary: var(--color-brand-orange);
    --color-text-light: var(--color-system-white);
    --color-text-placeholder: var(--color-brand-blue-secondary);

    --color-border-primary: var(--color-brand-blue-tertiary);
    --color-border-light: var(--color-system-white);
    --color-border-focus: var(--color-brand-blue);

    --color-background-primary: var(--color-brand-blue-extra-light);
    --color-background-secondary: var(--color-brand-blue);
    --color-background-subtle: var(--color-brand-blue-light);
    --color-background-extra-subtle: var(--color-brand-blue-extra-light);

    --color-button-background: var(--color-brand-blue);
    --color-button-text: var(--color-system-white);

    --color-secondary-button-background: var(--color-system-white);
    --color-secondary-button-text: var(--color-brand-blue);
    --color-secondary-button-border: var(--color-brand-blue-secondary);

    --color-disabled-button-background: var(--color-brand-blue-secondary);
    --color-disabled-button-text: var(--color-system-white);

    --color-dialog-background: var(--color-system-white);
    --color-dialog-text: var(--color-text-primary);

    --color-gradient-start: var(--color-brand-green-light);
    --color-gradient-end: var(--color-brand-blue-tertiary);

    --color-count-background: var(--color-brand-orange);
    --color-count-text: var(--color-system-white);

    --color-action-icon: var(--color-brand-orange);

    --color-indicator-primary: var(--color-brand-blue-tertiary);
    --color-indicator-focus: var(--color-brand-blue);
    --color-indicator-active: var(--color-brand-orange);

    /**********************************************************
    **
    ** Third party colors
    **
    **********************************************************/

    --color-facebook-blue: #3b5998;
    --color-apple-black: #000;
}
/**********************************************************
**
** Base brand typography
**
**********************************************************/
:root {
    --font-size-extra-large: 6.4rem;
    --font-size-large: 3.6rem;
    --font-size-medium: 2.4rem;
    --font-size-regular: 1.8rem;
    --font-size-small: 1.6rem;
    --font-size-extra-small: 1.1rem;

    --line-height-extra-large: 2em;
    --line-height-large: 1.6em;
    --line-height-increased: 1.4em;
    --line-height-regular: 1.2em;
    --line-height-tiny: 1em;
}

/**********************************************************
**
** Default styles
**
**********************************************************/

p, .p {
    display: block;
    margin-bottom: 2rem;
}
h1, .h1 {
    font-size: var(--font-size-large);
}
h2, .h2 {
    font-size: var(--font-size-medium);
}
h3, .h3 {
    font-size: var(--font-size-regular);
}

.general-description {
    color: var(--color-system-black);
    max-width: 800px;
}

.color-orange {
    color: var(--color-brand-orange);
}
:root {
    /**********************************************************
    **
    ** Layout
    **
    **********************************************************/
    --content-max-width: 60rem;
    --breakpoint-largephone: 368px;
    --breakpoint-tablet: 600px;
    --breakpoint-desktop: 1000px;
    --desktop-content-max-width: 96rem;

    /**********************************************************
    **
    ** Stacking order
    **
    **********************************************************/
    --page-circle-z-index: 10;
    --page-content-z-index: 20;
    --activity-info-z-index: 30;
    --map-overlay-z-index: 40;
    --header-z-index: 50;
    --floating-button-z-index: 60;
    --page-navigation-z-index: 65;
    --dialog-z-index: 70;
    --page-z-index: 100; /* Needs to be above *everything* */

    /**********************************************************
    **
    ** Generic values
    **
    **********************************************************/
    --border-default: 1px solid var(--color-brand-blue-tertiary);
    --border-radius-extra-small: 0.4rem;
    --border-radius-small: 0.8rem;
    --border-radius: 1.1rem;
    --border-radius-rounded: 9999px;
    --easing: cubic-bezier(0.4, 0, 0.2, 1); /* Uniform animation easing */
    --page-padding: 1.5rem; /* Distance from edge of screen */
    --floating-button-bottom-padding: 11.2rem;

    /**********************************************************
    **
    ** Avatar sizes
    **
    **********************************************************/
    --avatar-size-tiny: 3rem;
    --avatar-size-smaller: 3.6rem;
    --avatar-size-small: 5rem;
    --avatar-size-regular: 10rem;
    --avatar-size-large: 15rem;

    /**********************************************************
    **
    ** Header values
    **
    **********************************************************/
    --header-height: 6rem;
    --desktop-header-height: 9.2rem;
    --header-ios-offset: 16px;
    --pagenav-phone-height: 7.1rem;
    --pagenav-tablet-height: 6rem;

    /**********************************************************
    **
    ** Button values
    **
    **********************************************************/
    --button-size-large: 4.8rem;
    --button-size-medium: 4.5rem;
    --button-size-small: 3.6rem;
    --button-side-padding-large: 3.5rem;
    --button-side-padding-medium: 2.5rem;
    --button-side-padding-small: 2rem;
    --button-extra-area: 1.2rem; /* To increase click area */

    /**********************************************************
    **
    ** Label values
    **
    **********************************************************/
    --label-size-medium: 3.6rem;

    /**********************************************************
    **
    ** Input values
    **
    **********************************************************/
    --input-size-large: 4.8rem;
    --input-size-small: 3.6rem;

    /**********************************************************
    **
    ** Icon values
    **
    **********************************************************/
    --icon-size-small: 1.6rem;
    --icon-size-medium: 2.4rem;
    --icon-size-large: 3.6rem;
    --icon-size-extra-large: 4rem;

    /**********************************************************
    **
    ** Shadows
    **
    **********************************************************/
    --shadow-item: 0 0.1rem 0.4rem rgba(0, 75, 125, 0.2);
    --shadow-fixed: 0 0.3rem 1.2rem rgba(0, 75, 125, 0.2);
    --shadow-content: 0 0 2.4rem rgba(0, 75, 125, 0.15);
    --shadow-button: 0 0.4rem 1.2rem -0.2rem rgba(0, 75, 125, 0.3);

    /**********************************************************
    **
    ** Gutter
    **
    **********************************************************/
    --gutter-mobile: 1.5rem;
    --gutter-desktop: 2rem;

    /**********************************************************
    **
    ** Overlay values
    **
    **********************************************************/
    --overlay-background: rgba(var(--color-text-secondary), 0.45);
}
.form {
    width: 100%;
    max-width: 888px;
}
.form p, .form .p {
    margin: 3rem 1rem 0 0;
}
.form .form-center {
    margin: 0 auto;
}
.form.col-2 p {
    display: inline-block;
    width: 100%;
    max-width: 399px;
    margin-right: 42px;
}
.form.col-2 p.full-width {
    max-width: unset;
    width: 100%;
    margin-right: 42px;
}
.form.col-2 p.free-width {
    max-width: unset;
    width: unset;
    display: block;
}

.form-half-width p {
    max-width: 500px;
}
.form-half-width.col-2 p.block {
    display: block;
}

.form.col-2 p.full-width input, .form.col-2 p.full-width textarea {
    max-width: unset;
}

.form .row.col-2 > * {
    width: calc(50% - 2rem);
    margin: 0;
}

.form label {
    font-weight: bold;
    line-height: var(--line-height-large);
    margin-bottom: 0.8rem;
    color: var(--color-brand-blue);
    display: block;
    text-transform: lowercase;
}

.form label.required:after {
    content: ' *';
    color: var(--color-brand-orange);
}

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

.form .helptext {
    display: block;
    margin: 1rem 0 1rem 0rem;
    color: var(--color-system-black);
}

.form input, .form textarea {
    background: transparent;
    width: 100%;
    max-width: 420px;
    border: var(--border-default);
    border-radius: var(--border-radius);
    padding: 1rem 2.4rem;
    color: var(--color-text-secondary);
    background-color: var(--color-brand-blue-extra-light);
}

.form input.wide, .form.wide textarea, .form textarea.wide {
    max-width: unset;
}

.form input:focus, .form textarea:focus {
    background-color: var(--color-system-white);
}
.form input::placeholder, .form textarea::placeholder {
    color: var(--color-text-placeholder);
}

.form input {
    height: var(--input-size-large);
}

.form textarea {
    border-radius: var(--border-radius);
}

.form .errorlist li {
    border-color: var(--color-warning);
}

.form input + .form input {
    margin-top: 1.4rem;
}
.form input + .form label {
    margin-top: 0.7rem;
}
.form input{
    width: calc(100% + 0.6rem);
}

/* disabled fields */
input:disabled, select:disabled, textarea:disabled {
    opacity: 0.7;
}

/* Specific types of input */
.form input[type='color'] {
    border: none;
    padding: 0;
    margin: 0 1rem;
    width: 6rem;
    height: 4rem;
    vertical-align: middle;
}
.form input[type="date"] {
    margin: 0 2rem 1rem 0;
}

.submit {
    margin-top: 2rem;
}

.form .errorlist {
    margin-top: 2rem;
    color: var(--color-brand-orange);
}

.form input.date-range {
    width: 20rem;
}
.form input.date-range[name="date_after"] {
    margin: 0 0.5rem 0 0;
}
.form input.date-range[name="date_before"] {
    margin: 0 0rem 0 1rem;
}
.form .divider {
    border-bottom: 2px solid var(--color-brand-blue-tertiary);
    margin: 3rem 0;
}
div.input-note {
    font-style: italic;
    margin: -1rem 0 1rem;
}

/* select */
.form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: var(--input-size-large);
    width: 420px;
    max-width: 420px;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border-primary);
    padding: 1.3rem 5rem 1.3rem 2rem;
    color: var(--color-text-secondary);
    background-color: var(--color-brand-blue-extra-light);
    background-image: url(/static/c4382dadd932d2cd2d74.svg);
    background-repeat: no-repeat;
    background-size: 3rem;
    background-position: calc(100% - 1rem) center;
}

.form select:focus, .form select:focus-visible {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: 0 0 4px 2px var(--color-brand-blue-light);
}

.form select[multiple] {
    appearance: unset;
    height: unset;
    border-radius: var(--border-radius);
    overflow: auto;
    padding: 1.5rem;
    vertical-align: top;
    background-image: none;
}
.form .select-multiple-holder {
    margin-bottom: 1rem;
    margin-top: 1rem;
    position: absolute;
}

/* file input */
.file-input-container {
    margin-top: 1rem; 
}

.file-input input[type="file"] {
    position: fixed;
    right: 100%;
    bottom: 100%;
}
.file-input-current {
    width: 220px;
    border: var(--border-default);
    border-radius: var(--border-radius);
}
.file-input-clear {
    margin: -1rem 0 1rem;
}
input.file-input-clear-checkbox {
    width: 2rem;
    height: 2rem;
    margin: 2rem 0 0rem;
}
label.file-input-clear-label {
    display: inline-block;
    color: var(--color-system-black);
    vertical-align: middle;
    margin: -1rem 0 0 0.5rem;
}
span.file-input-label {
    margin-bottom: 0;
}
.file-input-selected-filename {
    margin: -1rem 1rem 1rem 0;
}
.file-input-filesize-message {
    margin: -1rem 1rem 1rem 0;
    color: var(--color-brand-orange);
}

/* Slider checkbox */
/* The toggle - the box around the slider */
.toggle {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

/* Hide default HTML checkbox */
.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.toggle .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-brand-blue-secondary);
    -webkit-transition: .4s;
    transition: .4s;
}

.toggle .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 5px;
    bottom: 5px;
    background-color: var(--color-system-white);
    -webkit-transition: .4s;
    transition: .4s;
}

.toggle input:checked + .slider {
    background-color: var(--color-brand-green);
}
.toggle input:checked + .slider.blue {
    background-color: var(--color-brand-blue);
}
.toggle input:checked + .slider.orange {
    background-color: var(--color-brand-orange);
}

.toggle input:checked + .slider:before {
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
}

table tr.excluded .toggle .slider {
    opacity: 0.3;
}
table tr.excluded .toggle .slider.exclude {
    opacity: 1;
}


/* Rounded sliders */
.toggle .slider.round {
    border-radius: 30px;
}

.toggle .slider.round:before {
    border-radius: 50%;
}

/* toggle label */
.toggle-label {
    font-size: var(--font-size-small);
    color: var(--color-brand-blue-secondary);
    font-weight: bold;
    display: block;
    width: 200px;
    margin: -25px 70px;
    -webkit-transition: .4s;
    transition: .4s;
}
.toggle input:checked ~ .toggle-label {
    color: var(--color-system-black);
    -webkit-transition: .4s;
    transition: .4s;
}

/* search input field */
.form input.search {
    background-image: url(/static/f61fa87ce471d7d7b360.svg);
    background-repeat: no-repeat;
    background-size: 3rem;
    background-position: calc(100% - 1rem) center;
    width: 25rem;
}

/* filter form */
.filter-form-field {
    display: inline-block;
    margin: 0 1rem 1rem 0;
}
.filter-form-field input {
    width: 220px;
}

/* .form-inline is a form with elements stacked inline */
.form-inline {
    width: unset;
    max-width: unset;
}
.form-inline > * {
    display: inline-block;
    margin-right: 1rem;
}
.form-inline input, .form-inline select {
    width: unset;
    max-width: 220px;
}
.form-inline input[type=date], .filter-form-inline input[type=date] {
    width: 20rem;
}

/* website link picker */
.website-link-picker input {
    margin-top: 1rem;
    max-width: unset;
}

.form .rich-text-preview {
    border: var(--border-default);
    border-radius: var(--border-radius);
    padding: 1rem 2.4rem;
    color: var(--color-text-secondary);
    background-color: var(--color-brand-blue-extra-light);
    opacity: 0.7;
}

@media screen and (max-width: 1446px) {
    .form .row.col-2 > * {
        width: 100%;
        margin: 0 0 2rem;
    }
}

@media screen and (min-width: 1380px) {
    .form.col-2 .info-right {
        margin-right: 0;
        margin-top: 4rem;
        float: right;
        text-align: right;
    }
}

input.planning-date-part {
    max-width: 130px;
}

.help {
	font-size: var(--font-size-small);
	display: block;
}

.help-naam-van-jullie-website {
	display: flex;
	gap: 1rem;
	flex-direction: column;
}

.help-naam-van-jullie-website .help {
	order: 2;
}

.description {
	font-size: var(--font-size-small);
}
.container {
    margin: 0 auto;
    width: 100%;
    max-width: 96rem;
    padding: 0 var(--gutter);
}

.container.wide {
    width: 130rem;
    max-width: unset;
}
#sidebar-structure-main #messages {
    margin: 40px 141px -30px 122px;
}

.message {
    padding: 1.5rem 5rem 1.5rem 6rem;
    background-size: 3rem;
    background-repeat: no-repeat;
    background-position: 2rem 0.9rem;
    border-radius: 9999px;
    margin-bottom: 1rem;
}

.message .link {
    text-decoration: underline;
}

.message.message-success {
    background-color: var(--color-brand-green);
    color: var(--color-system-white);
    background-image: url(/static/65f574b575f262ca3256.svg);

}
.message.message-warning {
    background-color: var(--color-brand-orange-light);
    color: var(--color-brand-blue);
    background-image: url(/static/1d5bbd7fa8e2334d1c9b.svg);
}
.message.message-error {
    background-color: var(--color-brand-orange);
    color: var(--color-system-white);
    background-image: url(/static/8ddbc8f23e3c289f0fa8.svg);
}

.messages-membership #messages {
    margin: 0 0 2rem;
}

@media screen and (max-width: 1200px) {
    #sidebar-structure-main #messages {
        margin: 3rem 6rem -30px 6rem;
    }
}

@media screen and (max-width: 600px) {
    #sidebar-structure-main #messages {
        margin: 3rem 3rem -30px 3rem;
    }
}
/* This is by default a three-column container */
.cards, .cards-col {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 2rem 2rem;
}
.cards-col {
	grid-template-columns: 1fr;
}

.cards:not(:first-child) {
	margin-top: 1rem;
}

.cards[data-count="1"] {
	grid-template-columns: 1fr;
}

.cards[data-count="2"] {
	grid-template-columns: 1fr 1fr;
}
.cards[data-count="3"] {
	grid-template-columns: 1fr 1fr 1fr;
}

.cards.small {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* This will stretch card children to fill this container's height */
.cards-stretched {
	display: flex;
	flex-direction: column;
}

.cards-stretched > * + * {
	margin-top: var(--small-spacing);
}

.card {
	display: block;
    border: var(--border-default);
	background: var(--color-background-extra-subtle);
	border-radius: var(--border-radius);
	overflow: hidden;
}

.card-blue, .card-blue .card-image {
	background: var(--color-brand-blue);
	color: var(--color-system-white);
}
.card-blue-medium, .card-blue-medium .card-image {
	background: var(--color-brand-blue-medium);
	color: var(--color-system-white);
}
.card-white, .card-white .card-image {
	background: var(--color-system-white);
}

.cards.small .card {
	max-width: 300px;
}

.card.selected {
    border: 1px solid var(--color-brand-blue);
}

.content-container-shade .card, .content-container-dark .card {
	background: var(--color-background-white);
}

.cards-stretched .card {
	flex: auto;
}

.card-image {
	background: var(--color-system-white);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
.card-image.height-10 {
	height: 10rem;
}
.card-image.height-15 {
	height: 15rem;
}

.card-image.padding {
	padding: 2rem;
}

.cards.small .card-image {
	height: 150px;
	background-size: 100px;
}

.card-aspect-ratio-image {
	width: 100%;
}

.card.large .card-image {
	height: 15rem;
}

.card-text {
	display: flex;
	padding: 1rem;
}
.card-text.padding {
	padding: 0 2rem 2rem;
}

.card-text h3 {
	flex: auto;
}

.card-text h3, .card-text-content h3 {
	font-size: var(--font-size-medium);
}

.card-text-content {
	flex: auto;
}
.card-text-content > *:not(:first-child) {
	margin-top: 1rem;
}
.card-text-content p {
	color: var(--color-system-black);
}

.card-button {
	flex: none;
	align-self: flex-end;
	/* TODO: review when actual icons are in use */
	color: var(--color-text-tertiary);
	font-size: var(--font-size-medium);
}

.card-date {
	color: var(--color-text-tertiary);
}
.card-date-icon {
	height: 2rem;
    vertical-align: text-top;
    padding-right: 0.2rem;
}

@media screen and (max-width: 1300px) {
	.cards {
		grid-template-columns: 1fr 1fr 1fr !important;
		max-width: calc(100vw - 6rem);
	}
}


@media screen and (max-width: 800px) {
	.cards {
		grid-template-columns: 1fr 1fr !important;
	}
	.cards.large {
		grid-template-columns: 1fr !important;
	}
}

.content-box {
	background-color: var(--color-system-white);
	padding: 6rem 6rem;
	border-radius: 1.1rem;
	box-shadow: var(--shadow-content);
	margin-bottom: 4rem;
}

.content-box-sm {
	padding: 3rem 5rem;
}

.content-spaced > * {
	margin-bottom: 2rem;
}

.content-spaced > h2 {
	margin-top: 5rem;
}

@media screen and (max-width: 600px) {
	.content-box {
		padding: 3rem 3rem;
	}
}

button, .button {
    background-color: var(--color-brand-blue);
    color: var(--color-system-white);
    font-size: 1.8rem;
    padding: 1rem 3.5rem;
    display: inline-block;
    width: fit-content;
    min-width: 220px;
    text-transform: lowercase;
    font-family: var(--display-font-stack);
    line-height: 2.2rem;
    text-align: center;
    border-radius: 9999px;
    /* box-shadow: var(--shadow-button); */
    margin: 0 1rem 2rem 0;
    cursor: pointer;
}

.button.button-static {
    cursor: initial;
}

button.outline, .button.outline {
    background-color: var(--color-system-white);
    color: var(--color-brand-blue);
    border: 1px solid var(--color-brand-blue);
}

.button-sm {
    display: inline-block;
    background-color: var(--color-brand-blue-secondary);
    color: var(--color-system-white);
    font-size: 1.25rem;
    padding: 0rem 1rem;
    text-transform: lowercase;
    font-family: var(--display-font-stack);
    line-height: 2rem;
    text-align: center;
    border-radius: 9999px;
    box-sizing: border-box;
    margin: 0rem 1rem 0 0;
}
button.button-small, .button.button-small {
    min-width: unset;
    padding: 0.5rem 1.5rem;
}

button.bg-orange, .button.bg-orange, .button-sm.bg-orange {
    background-color: var(--color-brand-orange);
}

a.color-orange {
    color: var(--color-brand-orange);
}


a.color-secondary {
    color: var(--color-brand-blue-secondary);
}

button.delete, .button.delete {
    background-color: unset;
    background-image: url(/static/f84b9a806ec6df70c4a4.svg);
    background-size: contain;
    background-repeat: no-repeat;
    color: var(--color-brand-blue);
    padding: 0.25rem 0 0 3.5rem;
    margin: 0.5rem 0;
    width: fit-content;
    border-radius: 0;
    min-width: unset;
}

button.copy, .button.copy {
    background-color: unset;
    background-image: url(/static/d2fae5414f99ed911385.svg);
    background-size: contain;
    background-repeat: no-repeat;
    color: var(--color-brand-blue);
    padding: 0.25rem 0 0 3.5rem;
    margin: 0.5rem 0;
    width: fit-content;
    border-radius: 0;
    min-width: unset;
}

button.forward, .button.forward {
    background-color: unset;    
    background-image: url(/static/9a80f2b6fb53c976bb3b.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    color: var(--color-brand-blue);
    padding: 0.25rem 3.25rem 0 0;
    margin: 0.5rem 0;
    width: fit-content;
    border-radius: 0;
    min-width: unset;
}

/* labels */
.label {
    background-color: var(--color-brand-blue-tertiary);
    color: var(--color-brand-blue);
    font-size: 1.8rem;
    padding: 1rem 2rem;
    display: inline-block;
    width: fit-content;
    text-transform: lowercase;
    font-family: var(--display-font-stack);
    line-height: 2.2rem;
    text-align: center;
    border-radius: 9999px;
    /* box-shadow: var(--shadow-button); */
    margin: 0 0.5rem 0.5rem 0;
    cursor: pointer;
}
.label.selected {
    background-color: var(--color-brand-green);
    color: var(--color-system-white);
}
.label-icon {
    height: 2rem;
    vertical-align: middle;
    display: none;
}
.label.selected .label-icon {
    display: inline;
}

/* collective choice */
.collective-button {
    display: block;
    width: 100%;
    max-width: 540px;
}
.collective-button:hover {
    background-color: var(--color-brand-blue);
    color: var(--color-system-white);
}

.link-display {
    font-family: var(--display-font-stack);
}
.link-display-icon {
    height: var(--font-size-medium);
    vertical-align: bottom;
}
/**********************************************************
**
** Sidebar structure for dashboard
**
**********************************************************/

/* Structure */
#sidebar-structure {
    display: flex;
    min-height: 100%;
}

#sidebar-structure-sidebar {
    flex: 0 0 280px;
    background-color: #00486B; /* var(--color-brand-blue); */
}

.sidebar-collapse-icon {
    display: none;
}

#sidebar-structure-main {
    flex: 1;
    padding: 0;
    background-color: var(--color-system-white);
}

/* Sidebar contents */
#sidebar-header {
    display: flex;
    background-color: var(--color-brand-blue-medium);
    padding: 0 2.7rem;
    height: 122px;
}
.sidebar-user {
    font-size: 1.8rem;
    font-family: var(--display-font-stack);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sidebar-user-icon {
    width: var(--avatar-size-smaller);
}
.sidebar-user-text {
    color: var(--color-system-white);
}

#sidebar-links {
    margin: 1.2rem 0 0;
}
.sidebar-link {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 1.2rem 2.8rem 1.2rem 2.4rem;
}
.sidebar-link:hover {
    background-color: var(--color-brand-blue-medium);
}
.sidebar-link.active {
    background-color: var(--color-brand-green);
}

.sidebar-link-icon {
    width: var(--icon-size-medium);
}
.sidebar-link-text {
    margin-left: 2.4rem;
    font-size: var(--font-size-regular);
    font-family: var(--display-font-stack);
    color: var(--color-system-white);
    text-transform: lowercase;
}
.sidebar-divider {
    margin: 1.2rem 2.8rem 1.2rem 2.4rem;
    border-bottom: var(--border-default);
}
.sidebar-link.sub-header .sidebar-link-text {
    margin-left: 4.8rem;
    color: var(--color-brand-blue-light);
    opacity: 0.5;
    line-height: 24px;
}

/* collapsible sidebar sections */
.sidebar-section .sidebar-link.sub-header {
    cursor: pointer;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.sidebar-section.collapsed .sidebar-link.sub-header .sidebar-link-text {
    opacity: 1;
    margin-left: 2.4rem;
}

/* main contents */
#sidebar-structure-main-header {
    height: 124px;
    border-bottom: 2px solid var(--color-brand-blue-light);
    background-color: var(--color-brand-blue-extra-light);
    padding: 58px 141px 0 122px;
    position: relative;
    z-index: 10;
}
#sidebar-structure-main-header.large {
    height: unset;
}
.header-description {
    font-size: var(--font-size-small);
    color: var(--color-system-black);
    max-width: 470px;
    margin: 3rem 0 4.5rem;
}
.header-button {
    position: absolute;
    right: 141px;
    bottom: 2.5rem;
    margin-bottom: 0;
}
#sidebar-structure-main-header.large .header-button {
    bottom: 4.5rem;
    min-width: 230px;
}
.header-back {
    position: absolute;
    top: 24px;
    left: 122px;
}
.header-back-icon {
    width: 18px;
    margin-right: 10px;
    vertical-align: bottom;
}

#sidebar-structure-main-content {
    padding: 60px 141px 60px 122px;
}

#sidebar-structure-main-header .header-logo {
    height: 8rem;
    position: absolute;
    top: 4.5rem;
    right: 151px;
    z-index: -1;
}

#sidebar-structure-main-header .header-logo-text {
    font-family: var(--display-font-stack);
    font-size: var(--font-size-medium);
    color: var(--color-brand-blue-tertiary);
    line-height: 1em;
    margin-top: 1.2rem;
}

#sidebar-structure-main-header .header-logo img {
    height: 100%;
    display: none;
}
#sidebar-structure-main-header.large .header-logo img {
    display: block;
}

@media screen and (max-width: 1200px) {
    #sidebar-structure-main-header {
        padding: 3rem 6rem 0 6rem;
        height: unset;
    }
    #sidebar-structure-main-header h1 {
        margin-bottom: 2rem;
    }
    #sidebar-structure-main-header .header-logo {
        display: none;
    }
    #sidebar-structure-main-content {
        padding: 3rem 6rem 0 6rem;
    }
    .header-button {
        position: relative;
        left: 0;
        margin-top: 2rem;
    }
    .header-back {
        position: relative;
        top: unset;
        left: unset;
        display: block;
        margin: -1rem 0 4rem;
    }
}

@media screen and (max-width: 600px) {
    #sidebar-structure.collapsed #sidebar-structure-sidebar {
        flex: none;
        width: 0px;
    }
    .sidebar-collapse-icon {
        display: block;
        position: absolute;
        z-index: 50;
        top: 3.7rem;
    }
    .sidebar-collapse-icon.close {
        left: 228px;
    }
    .sidebar-collapse-icon.open {
        left: 2rem;
    }
    .sidebar-collapse-icon img {
        width: 3rem;
    }

    #sidebar-structure-main-header {
        padding: 3rem 3rem 0 3rem;
    }
    #sidebar-structure-main-content {
        padding: 3rem;
    }
    h1.header-title {
        padding-left: 3rem;
    }

}

.dashboard-tiles {
    margin: 8rem 0 5.5rem;
}

.dashboard-tile {
    position: relative;
    width: 20rem;
    height: 15rem;
    margin: 0 2rem 2rem 0;
    padding: 3rem 0;
    border-radius: 13px;
    box-shadow: 0 2px 16px 0 rgba(0, 72, 107, 0.26);
    background-color: var(--color-system-white);
    display: inline-block;
    vertical-align: top;
}
.dashboard-tile-title {
    font-family: var(--display-font-stack);
    color: var(--color-brand-blue);
    font-size: var(--font-size-medium);
    line-height: 1em;
    text-align: center;
}
.dashboard-tile-icon {
    position: absolute;
    height: var(--font-size-medium);
    left: 3rem;
    top: 3rem;
    display: none;
}
.dashboard-tile-number {
    font-family: var(--display-font-stack);
    color: var(--color-brand-orange);
    font-size: var(--font-size-extra-large);
    line-height: 1em;
    margin-top: 1rem;
    text-align: center;
}
.list-item-name, .collective-link-name {
    font-family: var(--display-font-stack);
    font-size: 1.6rem;
    color: var(--color-brand-orange);
    margin-top: 2rem;
}
.list-item-tagline, .collective-link-tagline {
    margin-bottom: 0.5rem;
}

table {
    margin-top: 1rem;
    margin-bottom: 2rem;
    width: 100%;

    position: relative;
    border-collapse: separate; /* Don't collapse */
    border-spacing: 0;
}

table th {
    padding: 0.5rem 2rem 0.5rem 0;
}
table th {
    text-align: left;
    font-size: var(--font-size-regular);
    text-transform: lowercase;
    font-family: var(--display-font-stack);
    line-height: 1em;
    padding: 2rem 1rem 1rem 0;
    position: sticky;
    z-index: 10;
    top: 0;
    background-color: var(--color-system-white);
    border-bottom: 1px solid var(--color-brand-blue-tertiary);
}
table td {
    font-size: var(--font-size-small);
    font-family: var(--default-font-stack);
    font-weight: normal;
    color: var(--color-system-black);
    line-height: 3.6rem;
    border-bottom: 1px solid var(--color-brand-blue-light);
    padding-right: 0.5rem;
}

table tfoot {
    border-top: 1px solid var(--color-brand-blue-tertiary);
}
table tfoot td {
    color: var(--color-brand-blue-secondary);

}

table th.desc.orderable,
table th.asc.orderable {
    color: var(--color-brand-orange);
}


tbody > tr:hover {
    background-color: var(--color-brand-blue-light);
}

table tr.excluded td {
    color: rgba(0, 0, 0, 0.33);
}

table tr[data-row-type="edit"] {
    cursor: pointer;
}

table tr[data-row-type="edit"] > td:last-child {
    padding-right: 4rem;
}

table tr[data-row-type="edit"]:hover > td:last-child {
    background-image: url(/static/9a80f2b6fb53c976bb3b.svg);
    background-size: 2rem;
    background-repeat: no-repeat;
    background-position: calc(100% - 1rem) center;
}

/* striped table */
.table-striped tr.even td {
    background-color: var(--color-brand-blue-extra-light);
}
.table-striped tbody > tr.even:hover td {
    background-color: var(--color-brand-blue-light);
}
.table-striped td, .table-striped th {
    padding: 0.7rem 1rem;
}

/* header-description-table */
table.header-description-table {
    margin: -10px 0 -10px 0;
}
table.description-table {
    max-width: 500px;
}

table.header-description-table tbody > tr:hover, table.description-table tbody > tr:hover{
    background-color: unset;
}
table.header-description-table td, table.description-table td{
    border-bottom: none;
}
table.header-description-table td.name, table.description-table td.name{
    font-family: var(--display-font-stack);
    color: var(--color-brand-blue);
    font-size: var(--font-size-regular);
}

table.header-description-table td.name.color-black, table.description-table td.name.color-black{
    color: var(--color-system-black);
}

/* checkmark in table cell */
td.check:after {
    margin-left: 1rem;
    content: '\2713';
    display: inline-block;
    color: var(--color-brand-green);
    padding: 0 6px 0 0;
}

/* indicator column */
table .indicator:before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 4px;
    display: inline-block;
    margin-right: 8px;
}
table .indicator.green:before {
    background-color: var(--color-brand-green);
}
table .indicator.orange:before {
    background-color: var(--color-brand-orange);
}
table .indicator.blue:before {
    background-color: var(--color-brand-blue-medium);
}
table .indicator.red:before {
    background-color: var(--color-system-red);
}
.tox-tinymce {
    border: 1px solid var(--color-border-primary) !important;
    border-radius: 15px 15px 0 15px !important;
}

.tox .tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active),
.tox .tox-mbtn:focus:not(:disabled) {
    background: var(--color-brand-blue-extra-light) !important;
    border-radius: 10px !important;
}

.tox .tox-mbtn--active {
    background: var(--color-brand-blue-light) !important;
    border-radius: 10px !important;
}

.tox button {
    min-width: unset;
}
.tox .tox-statusbar__text-container {
    display: none !important;
}

.img-50 {
	width: 50%;
}

.img-75 {
	width: 75%;
}

.img-100 {
	width: 100%;
}

.preview {
    width: calc(100vw - 400px);
    max-width: 600px;
    height: 80vh;
}
.preview > iframe {
    margin-top: 1rem;
    border: 1px solid var(--color-brand-blue-tertiary);
    border-radius: var(--border-radius);
}
.preview > iframe {
    width: 100%;
    height: 100%;
}
@media screen and (min-width: 1500px) {
    .preview {
        position: absolute;
        right: 50px;
        top: 6rem;
        width: calc(100vw - 1250px);
        max-width: unset;
    }
}
.public-header {
    margin: 8.5rem 0 5.5rem;
}
.public-header #header-logo {
    width: 250px;
}

.section {
    margin: 2rem 0 3rem;
    position: relative;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

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

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}
.column-50 {
    flex: 1 0 50%;
}

.max-height-80vh {
    max-height: 80vh
}
.max-height-50vh {
    max-height: 50vh
}

.scroll-y {
    overflow-y: scroll;
}

.mar-right-1 {
    margin-right: 1rem;
}
.mar-right-2 {
    margin-right: 2rem;
}
.mar-0 {
    margin: 0;
}
.mar-top-0 {
    margin-top: 0 !important;
}
.mar-bottom-0 {
    margin-bottom: 0 !important;
}
.mar-top-1 {
    margin-top: 1rem;
}
.mar-bottom-1 {
    margin-bottom: 1rem;
}
.mar-top-2 {
    margin-top: 2rem;
}
.mar-top-3 {
    margin-top: 3rem;
}
.mar-top-4 {
    margin-top: 4rem;
}
.mar-bottom-2 {
    margin-bottom: 2rem;
}
.mar-bottom-3 {
    margin-bottom: 3rem;
}
.mar-bottom-4 {
    margin-bottom: 4rem;
}
.mar-bottom-5 {
    margin-bottom: 5rem;
}
.pad-1 {
    padding: 1rem;
}
.pad-top-1 {
    padding-top: 1rem;
}
.pad-right-4 {
    padding-right: 4rem;
}
.float-right {
    float: right;;
}
.position-relative {
    position: relative;
}

.color-black {
    color: var(--color-system-black);
}

.link-bold {
    font-family: var(--default-font-stack);
    font-weight: bold;
}
.link-bold.orange, .link.orange {
    color: var(--color-brand-orange)
}

.link-forward-icon {
    width: 18px;
    margin-right: 16px;
    margin-left: 10px;
    vertical-align: bottom;
}

.space-v-4 {
    height: 4rem;
}
.clearfix {
    width: 100%;
    overflow: auto;
}
.cursor-pointer {
    cursor: pointer;
}

@media screen and (max-width: 600px) {
    .public-header {
        margin: 4rem 0 3rem;
    }
}

.mailing-preview, .mailing-preview > * {
    line-height: initial;
}
.modal {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(29,29,27,0.28);
    z-index: 20;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.modal-content {
    background: var(--color-system-white);
    padding: 5rem 6rem;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 12px 0 rgba(0, 72, 107, 0.36);
    width: calc(100% - 2rem);
    max-width: 800px;
    position: relative;
}
.modal-header {
    margin-bottom: 0.5em;
    margin-right: 3rem;
}
.modal-close-icon {
    height: 1em;
    float: right;
    margin-top: 0.1em;
    cursor: pointer;
    position: absolute;
    top: 5rem;
    right: 5rem;
}
.modal-description {
    color: var(--color-system-black);
    font-size: var(--font-size-small);
}


@media screen and (max-width: 750px) {
    .modal-content {
        padding: 4rem;
        height: calc(100% - 4rem);
        overflow: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .modal-content::-webkit-scrollbar {
        display: none;
    }
}
.header-tabs {
    background-color: var(--color-brand-blue-extra-light);
    border-bottom: 2px solid var(--color-brand-blue-light);
    transform: translateY(-2px);
    z-index: 20;
    position: relative;
    padding-left: calc(122px - 3rem);
}

.header-tabs .tab {
    display: inline-block;
    padding: 2rem 3rem;
    font-family: var(--display-font-stack);
    font-size: var(--font-size-medium);
    color: var(--color-brand-orange);
    z-index: 21;
    position: relative;
    transform: translateY(2px);
}
.header-tabs .tab.active {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    border: 2px solid var(--color-brand-blue-light);
    border-bottom: none;
    background-color: var(--color-system-white);
    color: var(--color-brand-blue);
    z-index: 30;
}

@media screen and (max-width: 1200px) {

    .header-tabs {
        padding-left: 3rem;
        min-width: 700px;
    }
}

.my-membership-header {
    height: 150px;
}

.my-membership-header .header-logo {
    font-family: var(--display-font-stack);
    font-size: var(--font-size-large);
}

.my-membership-header .header-logo img {
    max-width: calc(100% - 10rem);
    max-height: 100px;
    margin-left: 5rem;
    margin-top: 25px;
}

.my-membership-header .header-logo span {
    display: block;
    position: absolute;
    margin-left: 5rem;
    margin-top: 5rem;
    color: var(--color-brand-blue-secondary);
}

.my-membership .container {
    max-width: 550px;
}

.my-membership.header-tabs .container {
    max-width: 630px;
}

.my-membership.header-tabs {
    background-color: var(--color-brand-blue-extra-light);
    border-bottom: 2px solid var(--color-brand-blue-light);
    transform: translateY(2px);
    z-index: 20;
    position: relative;
    padding-left: 0;
}

.my-membership.header-tabs .tab {
    display: inline-block;
    padding: 2rem 3rem;
    font-family: var(--display-font-stack);
    font-size: var(--font-size-medium);
    color: var(--color-brand-orange);
    z-index: 21;
    position: relative;
    transform: translateY(2px);
}
.my-membership.header-tabs .tab.active {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    border: 2px solid var(--color-brand-blue-light);
    border-bottom: none;
    background-color: var(--color-system-white);
    color: var(--color-brand-blue);
    z-index: 30;
}

.my-membership-content {
    background-color: var(--color-system-white);
    padding: 5rem 0;
    min-height: calc(100vh - 212px);
}

.membership-subscription-messages {
    color: var(--color-system-black);
    font-size: var(--font-size-small);
    margin: 2rem 0 4rem;
}


.dashboard-content-main {
    width: 66%;
    display: inline-block;
    vertical-align: top;
    padding-right: 4.6rem;
    margin-bottom: 6rem;
}

.dashboard-content-side {
    width: 33%;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 6rem;
}

@media screen and (max-width: 1200px) {
    .dashboard-content-main, .dashboard-content-side {
        width: 100%;
        display: block;
        padding-right: 0;
    }
}

@media screen and (max-width: 600px) {
    .dashboard-tiles {
        margin: 3rem 0 0;
    }
    .dashboard-tile {
        width: 13rem;
        height: 13rem;
    }
    .dashboard-tile-title {
        font-size: var(--font-size-small);
    }
    .dashboard-tile-number {
        font-size: 4rem;
    }

    .dashboard-content-side h2 {
        margin: 6rem 0 2rem;
    }
}    
.print-page {
    position: relative;
    min-height: 420px;
}

.print-preview-container {
    min-height: 300px;
}

.print-preview {
    position: absolute;
    top: 0;
    right: 0;
}
.print-preview-image {
    display: table-cell;
    position: relative;
}
.print-preview-image img {
    max-width: 400px;
    max-height: 400px;
    border-radius: var(--border-radius);
    border: var(--border-default);
}
.print-preview-modal-image img {
    max-width: 225px;
    margin-top: 36px;
    border-radius: var(--border-radius);
    border: var(--border-default);
}

.print-preview-link {
    text-align: center;
    margin-top: 1rem;
}

.print-preview-update-notice {
    position: absolute;
    top: calc(50% - 60px);
    width: 140px;
    left: calc(50% - 70px);
    text-align: center;
    padding: 1rem;
    border: var(--border-default);
    border-radius: var(--border-radius);
    color: var(--color-text-secondary);
    background-color: var(--color-brand-blue-extra-light);
    opacity: 0.7;
}

@media screen and (max-width: 1380px) {
    .print-preview {
        position: relative;
        margin-top: 3rem;
    }
    .print-preview-link {
        text-align: left;
    }

    .modal .print-preview {
        display: none;
    }
}

.document-list-category {
    color: var(--color-system-black);
    /* font-weight: bold; */
    margin-bottom: 2rem;
}
.document-list-category-name {
    margin-top: 4rem;
}

.document-list {
    margin-top: 4rem;
}
.document-list.mar-top-sm {
    margin-top: 2.5rem;
}
.document-list-category .document-list {
    margin-top: 2rem;
}

.document-list li {
    margin: 0 0 2rem;
    color: var(--color-brand-orange);
}

.document-list .icon {
    height: 3.5rem;
    display: inline-block;
    padding-right: 1rem;
    vertical-align: middle;
}
.contact-icon {
    max-width: 100px;
    margin: 0 auto 2rem;
}

.community-top-bar {
    height: 5rem;
    padding: 1rem;
    background-color: var(--color-brand-blue);
    color: var(--color-system-white);
}

.community-header-back .header-back-icon {
    height: 2.5rem;
    width: 2.5rem;
}

.community-top-bar .top-bar-user-text {
    float: right;
    line-height: 3rem;
}

.community-header {
    height: 150px;
    background-color: var(--color-system-white);
    border-bottom: 2px solid var(--color-brand-blue-tertiary);
}
.community-header .container {
    position: relative;
    height: 150px;
}

.community-header .header-logo {
    font-family: var(--display-font-stack);
    font-size: var(--font-size-large);
    position: absolute;
    left: 2rem;
    bottom: 3rem;
}

.community-header .header-logo .logo-sub {
    color: var(--color-brand-orange);
    font-size: 2rem;
    text-align: right;
    width: 196px;
    margin-top: 1rem;
}


.community-header-tabs {
    position: absolute;
    right: 2rem;
    bottom: 3rem;
}

.community-header-tab {
    display: inline-block;
    font-family: var(--display-font-stack);
    font-size: 2rem;
}
.community-header-tab:not(:first-child) {
    padding-left: 3rem;

}
.community-header-tab.active {
    color: var(--color-brand-orange);
}

.messages-community .message {
    margin-bottom: 3rem;
}

.community-content {
    background-color: var(--color-system-white);
    padding: 5rem 0;
    min-height: calc(100vh - 212px);
}

.community-content .container {
    position: relative;
}

.community.header-buttons {
    float: right;
}
.community.header-buttons .button {
    margin: 0;
}

.community-page-title {
    display: inline-block;
}

/* sidebar structure */
.community-sidebar-side {
    grid-area: sidebar;
    position: relative;
}
.community-sidebar-main {
    grid-area: content;
    position: relative;
}
.community-sidebar-structure {
    display: grid;
    gap: 20px;
    grid-template-areas:
      "content"
      "sidebar";
}
.community-map-image {
    max-height: 200px;
    margin: 0 auto;
    display: block;
}

.community-sidebar-side .card {
    max-width: 250px;
}

.community-home-text > p {
    margin-top: 0;
}

/* questions */
.question {
    padding: 3rem;
    margin-bottom: 2rem;
}
.question-question {
    display: flex;
    padding-bottom: 3rem;
}
.question-question-logo {
    width: 50%;
    max-width: 120px;
    margin-right: 2rem;
}
.question-question-logo img {
    width: 100%;
    margin-bottom: 2rem;
}
.question-answer {
    padding-top: 3rem;
    border-top: 1px solid var(--color-brand-blue-tertiary);
}
.question-answer-header {
    display: inline-block;
}
.question-answer-count {
    float: right;
    margin: -1rem;
}
.question-answer-form {
    margin-top: 2rem;
}
.question-answer-form input {
    width: calc(100% - 7.5rem);
    max-width: unset;
}
.question-answer-form button {
    display: inline-block;
    margin: 0 0 0 1rem;
    vertical-align: bottom;
}
.question-answer-form button img {
    height: 3rem;
    margin: 3px 0 -3px;
}
.question-answer-answer {
    padding: 2rem 2rem 0;
    margin-top: 2rem;
}
.question-answer-answer h3 {
    margin-bottom: 1rem;
}

/* collectives */
.community-collectives {
    margin-right: 2rem;
}
.collective-quickview table.description-table {
    max-width: 300px;
}
.collective-quickview-logo {
    width: 90%;
    min-width: 150px;
}
.collective-quickview-info p {
    color: var(--color-system-black);
    font-weight: 500;
    margin-bottom: 0;
    line-height: 3rem;
}

.session-quickview .left-side {
    width: 50%;
}
.session-quickview .left-side .modal-close-icon { 
    display: none;
}
.session-quickview .right-side {
    background-color: var(--color-brand-blue-light);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    padding: 5rem 6rem;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.session-quickview .right-side::-webkit-scrollbar {
    display: none;
}
.session-quickview .left-side .session-image {
    width: calc(100% - 6rem);
    height: 200px;
    border-radius: var(--border-radius)
}
.session-quickview .top-side .session-image {
    width: calc(100% - 2rem);
    margin-left: 2rem;
    height: 200px;
    border-radius: var(--border-radius)
}
.session-quickview .bottom-side {
    background-color: var(--color-brand-blue-light);
    position: relative;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    padding: 4rem 6rem;
}

.community-sessions .modal-content , .upcoming-session-modal .modal-content{
    max-height: calc(100vh - 6rem);
    overflow: hidden;
}

.upcoming-session-modal .modal-content {
    padding: 0;
}

.upcoming-session-modal .top-side, .upcoming-session-modal .bottom-side {
    padding: 5rem 6rem;
}

.session-quickview .bottom-side {
    padding-bottom: 9rem;
}

.upcoming-session-modal .session-quickview {
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    max-height: calc(100vh - 6rem);
    overflow-y: scroll;
}
.upcoming-session-modal .session-quickview::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

.community-sessions .modal-content .left-side, 
.community-sessions .modal-content .right-side {
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll; 
    max-height: calc(100vh - 6rem);
    padding-bottom: 6rem;
}
.community-sessions .modal-content .left-side::-webkit-scrollbar, 
.community-sessions .modal-content .right-side::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

/* responsive */
@media (min-width: 1100px) {
    .community-sidebar-structure {
      grid-template-columns: 3fr 1fr;
      grid-template-areas:
        "content  sidebar";
    }
}

@media screen and (max-width: 750px) {
    .session-quickview .left-side {
        width: 100%;
    }
    .session-quickview .right-side {
        position: relative;
        left: 0;
        margin: 5rem -6rem -5rem;
        border-radius: 0 0 var(--border-radius) var(--border-radius);
        padding: 5rem 6rem;
    }
    .session-quickview .right-side .modal-close-icon { 
        display: none;
    }
    .session-quickview .left-side .modal-close-icon { 
        display: initial;
    }
    .session-quickview .top-side {
        margin-bottom: 0;
    }
    .session-quickview .bottom-side {
        background: none;
        position: relative;
        left: unset;
        right: unset;
        bottom: unset;
        padding: 2rem 0 5rem;
    }
}

@media screen and (max-width: 670px) {
    .community-top-bar .top-bar-user-text {
        display: none;
    }

    .community-header .header-logo {
        position: relative;
        bottom: unset;
        left: unset;
        margin-top: 2rem;
    }

    .community-header-tabs {
        position: relative;
        bottom: unset;
        right: unset;
        margin: 2rem;
    }
    .community-header-tab {
        margin-top: 2rem;
        display: block;
        padding-left: 0 !important;
        text-align: right;
    }

    .community-header, .community-header .container {
        height: unset;
    }
    .community.header-buttons {
        float: unset;
        margin-top: 1rem;
    }

    .question-question {
        flex-direction: column;
    }
    .question-answer-count {
        float: none;
        margin: 1rem 0 -2rem;
    }
}
.pagination {
    margin-top: 1rem;
}
.pagination .step-links>* {
    margin-right: 1rem;
}
.pagination .step-links>a {
    color: var(--color-brand-orange);
}
.pagination li {
    display: inline-block;
    vertical-align: middle;
}
.pagination li a {
    display: inline-block;
    font-family: var(--default-font-stack);
    color: var(--color-system-black);
    font-size: 1.4rem;
    width: 32px;
    height: 32px;
    margin: 0 8px 0 0;
    text-align: center;
    padding: 5px 0 0;
    border-radius: 4px;
    border: var(--border-default);
}
.pagination li.active a {
    color: var(--color-brand-blue);
    background-color: var(--color-brand-blue-light);
    border-color:  var(--color-brand-blue-light);
}
.pagination img {
    height: 2rem;
    width: 2rem;
    vertical-align: sub;
}
.pagination .table-info, .pagination .pagination-info {
    margin-left: 2rem;
    color: var(--color-brand-blue-secondary);
    font-family: var(--default-font-stack);
    font-size: var(--font-size-extra-small);
}
.bg-image {
    background-size: cover;
    background-position: center center;
}

.bg-image-1 {
    background-image: url(/static/030421330237e3b40264.jpg);
    background-image: -webkit-image-set(
        url(/static/20276b01a370a7d71e91.jpg) 1x,
        url(/static/030421330237e3b40264.jpg) 2x,
        url(/static/a16a0bed6fbe1711c924.jpg) 3x
    );
    background-image: image-set(
        url(/static/20276b01a370a7d71e91.jpg) 1x,
        url(/static/030421330237e3b40264.jpg) 2x,
        url(/static/a16a0bed6fbe1711c924.jpg) 3x
    );
}

.bg-image-2 {
    background-image: url(/static/cf2c288895413415fb6d.jpg);
    background-image: -webkit-image-set(
        url(/static/d7335fe4b4c0be065ec6.jpg) 1x,
        url(/static/cf2c288895413415fb6d.jpg) 2x,
        url(/static/f502b2238defcb4c60e8.jpg) 3x
    );
    background-image: image-set(
        url(/static/d7335fe4b4c0be065ec6.jpg) 1x,
        url(/static/cf2c288895413415fb6d.jpg) 2x,
        url(/static/f502b2238defcb4c60e8.jpg) 3x
    );
}

.bg-image-3 {
    background-image: url(/static/1dcd7a539d5e4b58321c.jpg);
    background-image: -webkit-image-set(
        url(/static/18c471549f3e1993e2d8.jpg) 1x,
        url(/static/1dcd7a539d5e4b58321c.jpg) 2x,
        url(/static/fa35a6c53da4abdba740.jpg) 3x
    );
    background-image: image-set(
        url(/static/18c471549f3e1993e2d8.jpg) 1x,
        url(/static/1dcd7a539d5e4b58321c.jpg) 2x,
        url(/static/fa35a6c53da4abdba740.jpg) 3x
    );
}

.bg-image-4 {
    background-image: url(/static/ca210bc2b57e1139ef7e.jpg);
    background-image: -webkit-image-set(
        url(/static/db1a4a646328a1ea52a2.jpg) 1x,
        url(/static/ca210bc2b57e1139ef7e.jpg) 2x,
        url(/static/94a65652fd0d61801fd6.jpg) 3x
    );
    background-image: image-set(
        url(/static/db1a4a646328a1ea52a2.jpg) 1x,
        url(/static/ca210bc2b57e1139ef7e.jpg) 2x,
        url(/static/94a65652fd0d61801fd6.jpg) 3x
    );
}

.bg-image-5 {
    background-image: url(/static/7e96e6f7d83e30d62023.jpg);
    background-image: -webkit-image-set(
        url(/static/0bf3452a2af85ee2dd31.jpg) 1x,
        url(/static/7e96e6f7d83e30d62023.jpg) 2x,
        url(/static/471262e6f9ef3be8c73c.jpg) 3x
    );
    background-image: image-set(
        url(/static/0bf3452a2af85ee2dd31.jpg) 1x,
        url(/static/7e96e6f7d83e30d62023.jpg) 2x,
        url(/static/471262e6f9ef3be8c73c.jpg) 3x
    );
}

.bg-image-6 {
    background-image: url(/static/5f9ffc52651975fe0d02.jpg);
    background-image: -webkit-image-set(
        url(/static/38c6a9ecf3b3768c6956.jpg) 1x,
        url(/static/5f9ffc52651975fe0d02.jpg) 2x,
        url(/static/c96f6f844d8b91686cb4.jpg) 3x
    );
    background-image: image-set(
        url(/static/38c6a9ecf3b3768c6956.jpg) 1x,
        url(/static/5f9ffc52651975fe0d02.jpg) 2x,
        url(/static/c96f6f844d8b91686cb4.jpg) 3x
    );
}

.bg-image-7 {
    background-image: url(/static/8810f6858e8636b76740.jpg);
    background-image: -webkit-image-set(
        url(/static/2c04d3b3c8aed4f95f18.jpg) 1x,
        url(/static/8810f6858e8636b76740.jpg) 2x,
        url(/static/ae66df0db6f7d27174e6.jpg) 3x
    );
    background-image: image-set(
        url(/static/2c04d3b3c8aed4f95f18.jpg) 1x,
        url(/static/8810f6858e8636b76740.jpg) 2x,
        url(/static/ae66df0db6f7d27174e6.jpg) 3x
    );
}

.bg-image-8 {
    background-image: url(/static/ceee6971758051463803.jpg);
    background-image: -webkit-image-set(
        url(/static/7b26db6dba53b73bd710.jpg) 1x,
        url(/static/ceee6971758051463803.jpg) 2x,
        url(/static/7f969571f73dbb203983.jpg) 3x
    );
    background-image: image-set(
        url(/static/7b26db6dba53b73bd710.jpg) 1x,
        url(/static/ceee6971758051463803.jpg) 2x,
        url(/static/7f969571f73dbb203983.jpg) 3x
    );
}

.bg-image-9 {
    background-image: url(/static/560a55afd0f1f82951b2.jpg);
    background-image: -webkit-image-set(
        url(/static/c5a62eb10b810cfdcf61.jpg) 1x,
        url(/static/560a55afd0f1f82951b2.jpg) 2x,
        url(/static/37d5affa0673a37a0ee7.jpg) 3x
    );
    background-image: image-set(
        url(/static/c5a62eb10b810cfdcf61.jpg) 1x,
        url(/static/560a55afd0f1f82951b2.jpg) 2x,
        url(/static/37d5affa0673a37a0ee7.jpg) 3x
    );
}

.bg-image-10 {
    background-image: url(/static/f40bea64fb6889ece99c.jpg);
    background-image: -webkit-image-set(
        url(/static/787d6f7b1eecafab2cc9.jpg) 1x,
        url(/static/f40bea64fb6889ece99c.jpg) 2x,
        url(/static/ae819d711188591ac907.jpg) 3x
    );
    background-image: image-set(
        url(/static/787d6f7b1eecafab2cc9.jpg) 1x,
        url(/static/f40bea64fb6889ece99c.jpg) 2x,
        url(/static/ae819d711188591ac907.jpg) 3x
    );
}

.month-name {
    margin-top: 2rem;
    text-align: center;
}
.month-name > * {
    display: inline-block;
}
.month-name > h3 {

    width: 150px;
}
.month-arrow {
    cursor: pointer;
    margin: 0 2rem;
    vertical-align: bottom;
}

.service-calendar th {
    text-align: center;
}

.day-number {
    color: var(--color-brand-blue-secondary);
    font-weight: bold;
    font-family: var(--display-font-stack);
    display: block;
    text-align: center;
    padding-top: 3px;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    margin: 0.5rem auto;
    cursor: pointer;
}
.day-number.selected {
    color: var(--color-brand-blue);
}
.day-number.available {
    color: var(--color-system-white);
    font-weight: bold;
    background-color: var(--color-brand-blue);
}
.day-number.available.selected {
    background-color: var(--color-brand-green);
}


.selected-day {
    margin-top: 4rem;
}
.selected-day > h3 {
    text-align: center;
}

.selected-day > h3 {
    margin-bottom: 1rem;
}

.slot.button {
    margin-bottom: 1rem;
}
.slot.button.selected {
    background-color: var(--color-brand-green);
}
.app-connection {
    margin-top: 2rem;
    padding: 3rem;
    max-width: 720px;
}

.app-connection-title {
    margin-bottom: 2rem;
}

.app-connection-profile {
    text-align: center;
    margin: 2rem;
}

.app-user-profile-image {
    width: 150px;
    height: 150px;
    background-size: cover;
    background-position: center;
    border-radius: 9999px;
    margin: 2rem auto;
}
.app-connection-profile-button {
    margin-top: 2rem;
}

.app-participants {
    margin-top: 2rem;
}

.app-participants table th {
    background: none;
}
/**********************************************************
**
** Styles for buurkracht-buureau dashboard environment
** 
** [JB 2021/07/30]: Adapted from the buurkracht social-app styles
** - de-sassified
** - removed what didn't seem necessary
** - renamed shell to index
** - imported form component in index
**
**********************************************************/

/**********************************************************
**
** Global settings for the project
**
**********************************************************/

/**********************************************************
**
** Generic high-level styles
**
**********************************************************/

/**********************************************************
**
** Components
**
**********************************************************/


/*# sourceMappingURL=main.css.map*/