.off-screen {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}

/**
 * responsive-value
 * Scale a property with viewport width, but constrained with a min/max size and viewport width, e.g.

    // Scale font from 12px -> 18px between 1000px and 2000px viewport width
    body {
        @include responsive-value(
            $size-min: 12px,
            $size-max: 18px,
            $width-min: 768px,
            $width-max: 2000px
        );

        // Shorthand
        @include responsive-value(12px, 18px, 768px, 2000px);

        // Other properties (as it defaults to font-size)
        @include responsive-value(12px, 18px, 768px, 2000px, 'margin-bottom');
     }
 * NOTE: Must all be pixel values!
 */
/**
 * fa
 * Font-awesome icon - inject as a ::before or ::after pseudo element
 *
 * @param  string   $char      Font-awesome character (e.g. $fa-var-envelope)
 * @param  string   $position  [before/after] (default: before)
 * @param  content  {}         Styles that apply to the icon
 *
 * List of font-awesome variables (although they're guessable):
 * https://github.com/FortAwesome/Font-Awesome/blob/master/scss/_variables.scss

    // Simple example - an envelope icon before start of element:
    @include fa($fa-var-envelope);

    // Icon after element:
    @include fa($fa-var-envelope, after);

    // Styled icon:
    @include fa($fa-var-envelope, after) {
        display: inline-block;
        margin-left: 5px;
        color: #55f;
    }
*/

.flex {
  display: flex;
}

.flex-break {
  width: 100% !important;
  max-width: none !important;
}

.scrollable-x {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 24em);
  margin-bottom: 1em;
  overflow: auto;
}

.scrollable-shadow {
  position: relative;
}

.scrollable-shadow::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2em;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  content: "";
  z-index: 0;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

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

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

body {
  margin: 0;
}

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

main {
  display: block;
}

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

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

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

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

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

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

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

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

abbr[title] {
  border-bottom: none;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

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

b,
strong {
  font-weight: bolder;
}

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

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

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

img {
  border-style: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

progress {
  vertical-align: baseline;
}

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

textarea {
  overflow: auto;
}

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

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

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

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

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

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

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

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

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

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

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

details {
  display: block;
}

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

summary {
  display: list-item;
}

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

template {
  display: none;
}

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

[hidden] {
  display: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
mark,
nav,
section,
summary,
time {
  display: block;
}

button {
  border-width: 0;
  border-radius: 0;
}

input,
select,
textarea {
  font-family: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

svg {
  max-height: 100%;
}

svg:not(:root) {
  overflow: visible;
}

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

input[type="date"] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
}

th,
td {
  vertical-align: top;
}

address {
  font-style: inherit;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  font-size: 62.5%;
}

body {
  min-height: 100%;
  font: 400 1.8rem/1.5 "Montserrat", sans-serif;
}

@supports (display: grid) {
  body {
    display: grid;
    grid-template: auto 1fr auto / 100%;
  }
}

main {
  padding-top: 7em;
  padding-bottom: 3em;
}

app-root {
  overflow-x: hidden;
}

body {
  color: #111;
  font-size: 12px;
}

@media screen and (min-width: 768px) {
  body {
    font-size: calc(12px + 6 * ((100vw - 768px) / 672));
  }
}

@media screen and (min-width: 1440px) {
  body {
    font-size: 18px;
  }
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
  margin-bottom: 10px;
}

@media screen and (min-width: 768px) {

  h1,
  h2,
  h3,
  h4,
  p {
    margin-bottom: calc(10px + 10 * ((100vw - 768px) / 672));
  }
}

@media screen and (min-width: 1440px) {

  h1,
  h2,
  h3,
  h4,
  p {
    margin-bottom: 20px;
  }
}

h1 {
  font-size: 22px;
}

@media screen and (min-width: 768px) {
  h1 {
    font-size: calc(22px + 14 * ((100vw - 768px) / 672));
  }
}

@media screen and (min-width: 1440px) {
  h1 {
    font-size: 36px;
  }
}

.child h1 {
  font-size: 24px;
  font-weight: 900;
  color: #111;
}

@media screen and (min-width: 768px) {
  .child h1 {
    font-size: calc(24px + 24 * ((100vw - 768px) / 672));
  }
}

@media screen and (min-width: 1440px) {
  .child h1 {
    font-size: 48px;
  }
}

h2 {
  font-size: 20px;
}

@media screen and (min-width: 768px) {
  h2 {
    font-size: calc(20px + 7 * ((100vw - 768px) / 672));
  }
}

@media screen and (min-width: 1440px) {
  h2 {
    font-size: 27px;
  }
}

.child h2 {
  font-size: 18px;
  font-weight: 900;
  color: #888;
  line-height: 1.2;
}

@media screen and (min-width: 768px) {
  .child h2 {
    font-size: calc(18px + 18 * ((100vw - 768px) / 672));
  }
}

@media screen and (min-width: 1440px) {
  .child h2 {
    font-size: 36px;
  }
}

.child h2 strong {
  color: #0071ad;
}

h3 {
  font-size: 19px;
}

@media screen and (min-width: 768px) {
  h3 {
    font-size: calc(19px + 2 * ((100vw - 768px) / 672));
  }
}

@media screen and (min-width: 1440px) {
  h3 {
    font-size: 21px;
  }
}

.child h3 {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
}

@media screen and (min-width: 768px) {
  .child h3 {
    font-size: calc(16px + 16 * ((100vw - 768px) / 672));
  }
}

@media screen and (min-width: 1440px) {
  .child h3 {
    font-size: 32px;
  }
}

h4 {
  font-size: 14px;
  margin-bottom: 0.5em;
  font-weight: 500;
}

@media screen and (min-width: 768px) {
  h4 {
    font-size: calc(14px + 4 * ((100vw - 768px) / 672));
  }
}

@media screen and (min-width: 1440px) {
  h4 {
    font-size: 18px;
  }
}

a {
  color: #0071ad;
  -webkit-text-decoration-skip: leading-spaces trailing-spaces;
  text-decoration-skip: leading-spaces trailing-spaces;
}

p a {
  color: #0071ad;
}

.uppercase {
  text-transform: uppercase;
}

.wrap--nl {
  white-space: pre-wrap;
}

.cost strong {
  font-size: 1.6em;
  font-weight: 600;
}

.contact-person h4 {
  margin-bottom: 0;
  text-transform: uppercase;
}

.contact-person small {
  font-size: inherit;
  font-style: italic;
  font-weight: 700;
  text-transform: none;
}

.contact-person a {
  color: inherit;
}

.header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 0 33px 0 #d6dde9;
  background: white;
  height: 5em;
}

.header:not(.page--dashboard) {
  margin-bottom: 3vw;
}

.header .inner {
  height: 100%;
  padding: 0.75vh 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .header .inner {
    padding: 0.5em 0;
  }
}

.header .inner>* {
  display: block;
}

.header .inner>*:first-child {
  padding-left: 0;
  position: relative;
  z-index: 100;
}

@media (min-width: 768px) {
  .header .inner>* {
    padding: 0 2%;
  }

  .header .inner>*:last-child {
    padding-right: 0;
  }
}

.header__logo {
  display: block;
  width: 10em;
  margin: 0 auto 0.25em;
}

@media (min-width: 1200px) {
  .header__logo {
    width: 11em;
    margin: 0.5em 0;
  }
}

.header h1 {
  flex-grow: 1;
  margin: 0;
  text-align: center;
}

@media (min-width: 768px) {
  .header h1 {
    text-align: left;
  }
}

.titlebar {
  background: #000000;
  background: rgba(0, 0, 0, 0.2);
}

.titlebar a {
  font-weight: 600;
  color: #fdd800;
  text-decoration: underline;
  text-transform: uppercase;
  font-size: 0.8em;
}

footer[role="contentinfo"] {
  padding: 1em;
}

.wrapper {
  width: 95%;
  max-width: 1440px;
  margin-right: auto;
  margin-left: auto;
}

.form-grouping {
  width: 100%;
}

@media (min-width: 768px) {
  .form-grouping {
    display: flex;
    flex-wrap: wrap;
  }
}

.form-input {
  margin-bottom: 1em;
  padding-right: 1em;
  display: flex;
  flex-flow: wrap;
  /*
  // the following aligns appear to keep things vertical-top aligned between rows,
  // but still vertical-centred within a row (best example is on Activity Create page:
  // the 'who is it for' and 'pick a school' are label/select boxes are aligned with
  // each other, but the tooltip by the first select box is still centre-aligned with the select
  */
  align-content: flex-start;
  align-items: center;
}

.form-input>.form-input__icon-container {
  position: relative;
  width: 100%;
}

.form-input__icon-container>.form-input__icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1rem;
  cursor: help;
  z-index: 5;
}




@media (min-width: 768px) {
  .form-input {
    width: 100%;
    max-width: 470px;
    min-width: 100px;
  }
}

@media (min-width: 768px) {
  .form-input--half {
    max-width: 235px;
  }
}

@media (min-width: 768px) {
  .form-input--double {
    max-width: 940px;
  }
}

.form-input--inline {
  display: flex;
  flex-flow: wrap;
  /*
    // the following aligns appear to keep things vertical-top aligned between rows,
    // but still vertical-centred within a row (best example is on Activity Create page:
    // the 'who is it for' and 'pick a school' are label/select boxes are aligned with
    // each other, but the tooltip by the first select box is still centre-aligned with the select
    */
  align-content: flex-start;
  align-items: center;
}

.form-input--inline label {
  flex-shrink: 0;
  width: 100%;
}

.form-input--inline input:not([type="checkbox"]):not([type="radio"]),
.form-input--inline select,
.form-input--inline textarea {
  flex-basis: 0;
  flex-grow: 1;
}

.form-input--inline small {
  display: inline-block;
  align-self: center;
  padding-left: 1em;
}

.form-help {
  color: #2b2a2a;
  font-size: 80%;
  margin-bottom: 0.5em;
  border: 1px #888 solid;
  border-radius: 10px;
  padding: 0.5em 1em;
  background: #ade3ff;
  width: 100%;
}

.autocomplete--inline {
  width: 100%;
}

.form-buttons {
  margin: 0 0 2em;
}

.form-buttons [class^="button"],
.form-buttons [role="button"],
.form-buttons button {
  margin-bottom: 1em;
}

.form-buttons a {
  display: inline-block;
}

.indented {
  margin-bottom: 1em;
  margin-left: 3em;
}

.form--login {
  max-width: 400px;
  margin: 0 auto;
}

form h1,
form h2,
form h3 {
  display: block;
  clear: both;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  width: 100%;
}

label,
legend {
  display: block;
  width: 100%;
  padding: 0 0 2px;
  margin: 0;
  clear: both;
  font-weight: normal;
}

label h2,
legend h2 {
  margin-bottom: 0;
}

label {
  font-weight: 700;
  margin-bottom: 0.2em;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  flex-basis: 0;
  flex-grow: 1;
  width: 100%;
  padding: 0.7em;
  border-radius: 0.5em;
  line-height: 1;
  background: white;
  border: 1px solid #ccc;
  transition: all 0.1s ease-out;
  color: inherit;
  box-shadow: inset -2px 2px 4px 0 #000000;
  box-shadow: inset -2px 2px 4px 0 rgba(0, 0, 0, 0.1);
}

input:not([type="checkbox"]):not([type="radio"]):active,
input:not([type="checkbox"]):not([type="radio"]):focus,
select:active,
select:focus,
textarea:active,
textarea:focus {
  border-color: #0071ad;
  outline: none;
  box-shadow: inset -2px 2px 4px 0 #000000;
  box-shadow: inset -2px 2px 4px 0 rgba(0, 0, 0, 0.2);
}

input:not([type="checkbox"]):not([type="radio"]):disabled,
select:disabled,
textarea:disabled {
  background-color: #ccc;
}

.ng-submitted input:not([type="checkbox"]):not([type="radio"]).ng-invalid:not(:disabled),
.ng-submitted input:not([type="checkbox"]):not([type="radio"]).ng-invalid:active:not(:disabled),
.ng-submitted input:not([type="checkbox"]):not([type="radio"]).ng-invalid:focus:not(:disabled),
input:not([type="checkbox"]):not([type="radio"]).ng-touched.ng-invalid:not(:disabled),
input:not([type="checkbox"]):not([type="radio"]).ng-touched.ng-invalid:active:not(:disabled),
input:not([type="checkbox"]):not([type="radio"]).ng-touched.ng-invalid:focus:not(:disabled),
.ng-submitted select.ng-invalid:not(:disabled),
.ng-submitted select.ng-invalid:active:not(:disabled),
.ng-submitted select.ng-invalid:focus:not(:disabled),
select.ng-touched.ng-invalid:not(:disabled),
select.ng-touched.ng-invalid:active:not(:disabled),
select.ng-touched.ng-invalid:focus:not(:disabled),
.ng-submitted textarea.ng-invalid:not(:disabled),
.ng-submitted textarea.ng-invalid:active:not(:disabled),
.ng-submitted textarea.ng-invalid:focus:not(:disabled),
textarea.ng-touched.ng-invalid:not(:disabled),
textarea.ng-touched.ng-invalid:active:not(:disabled),
textarea.ng-touched.ng-invalid:focus:not(:disabled) {
  background: #ff0000;
  background: rgba(255, 0, 0, 0.2);
  border-color: #c00;
  outline: none;
  box-shadow: inset -2px 2px 4px 0 #ff0000;
  box-shadow: inset -2px 2px 4px 0 rgba(255, 0, 0, 0.2);
}

select {
  padding: 0.63em 0.7em;
  height: 2.7em;
}

select[multiple] {
  height: initial;
}

textarea {
  min-height: 10em;
  max-width: 940px;
}

lib-checkbox-group {
  margin-bottom: 1em;
}

@media (min-width: 768px) {
  [role="group"] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    min-width: 100px;
    max-width: 470px;
  }

  [role="group"]:not(.form-input--typical) {
    width: 33.33%;
  }

  [role="group"].group--fullwidth {
    max-width: none;
    width: 100%;
  }
}

@media (min-width: 768px) {
  [role="group"].no-wrap {
    display: block;
  }
}

[role="group"] input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}

[role="group"] input+label {
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

[role="group"] input+label::before {
  content: "";
  flex-shrink: 0;
  align-self: flex-start;
  width: 1.8em;
  height: 1.8em;
  margin-right: 0.5em;
  background-color: white;
  border: 2px solid #ccc;
  line-height: 1.8;
  font-family: "Font Awesome 5 Free";
  text-align: center;
  color: #0071ad;
}

[role="group"] input:checked+label:before {
  content: "\f00c";
}

[role="group"] input:checked+label:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

[role="group"] input:checked+label:before {
  text-decoration: none;
}

[role="group"] input:disabled+label {
  color: #888;
}

[role="group"] input:disabled+label::before {
  opacity: 0.7;
  background-image: none;
  background-color: #ccc;
}

.ng-submitted [role="group"] input.ng-invalid+label::before,
[role="group"] input.ng-touched.ng-invalid+label::before {
  border-color: red;
}

[role="group"] span:not(.tooltip) {
  margin-top: 0.3em;
  margin-right: 1em;
}

@media (min-width: 768px) {
  [role="group"] label {
    width: 100%;
  }
}

[role="group"] label[for] {
  font-weight: 400;
}

[role="group"] .form-help {
  margin: 0 0 0 3em;
}

app-radio-group {
  margin-bottom: 1em;
}

@media (min-width: 768px) {
  [role="radiogroup"] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

@media (min-width: 768px) {
  [role="radiogroup"].no-wrap {
    display: block;
  }
}

@media (min-width: 768px) {
  [role="radiogroup"] .form-input--inline {
    min-width: 0;
    width: auto;
  }
}

[role="radiogroup"] input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}

[role="radiogroup"] input+label {
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

[role="radiogroup"] input+label::before {
  width: 1.8em;
  height: 1.8em;
  margin-right: 0.5em;
  background-color: white;
  border: 2px solid #ccc;
  content: "";
  border-radius: 50%;
  background-image: radial-gradient(#0071ad 0, #fff 0);
  transition: background-image 0.3s;
}

[role="radiogroup"] input:checked+label::before {
  content: "";
  background-image: radial-gradient(#0071ad 33%, #fff 39%);
}

[role="radiogroup"] input:disabled+label {
  color: #888;
}

[role="radiogroup"] input:disabled+label::before {
  opacity: 0.7;
  background-image: none;
  background-color: #ccc;
}

.ng-submitted [role="radiogroup"] input.ng-invalid+label::before,
[role="radiogroup"] input.ng-touched.ng-invalid+label::before {
  border-color: red;
}

[role="radiogroup"] span:not(.tooltip) {
  margin-top: 0.3em;
  margin-right: 1em;
}

@media (min-width: 768px) {
  [role="radiogroup"] label {
    width: 100%;
  }
}

[role="radiogroup"] label[for] {
  font-weight: 400;
}

@media (min-width: 768px) {
  .form--with-title {
    display: flex;
    align-items: center;
  }

  .form--with-title>h1,
  .form--with-title>h2 {
    flex-grow: 0;
    padding-right: 1em;
  }

  .form--with-title fieldset {
    width: auto;
    flex-grow: 1;
    padding-bottom: 1.5em;
  }

  .form--with-title .form-buttons {
    align-self: center;
    justify-self: flex-start;
  }
}

.styleguide form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

@media (min-width: 700px) {
  .styleguide form p {
    width: 49%;
  }
}

.section {
  padding-top: 4em;
  padding-bottom: 4em;
}

.dashboard__items+.section {
  padding-top: 0;
}

.section--badges {
  padding-bottom: 0;
}

/**
 * Loading Spinner
 *
 * Usage:
 *   <div class="loading" *ngIf="!foo"></div>
 *
 */

.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

.fa-pulse {
  -webkit-animation: fa-spin 1s infinite steps(8);
  animation: fa-spin 1s infinite steps(8);
}

@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.fa-fw,
.loading:after,
.button--loading:after {
  text-align: center;
  width: 1.25em;
}

.loading {
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
}

.loading:after {
  content: "\f110";
}

.loading:after {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

.loading:after {
  text-decoration: none;
  color: black;
  -webkit-animation: fa-spin 1s infinite steps(8);
  animation: fa-spin 1s infinite steps(8);
}

.logo {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  max-width: 18rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.logo svg,
.logo img {
  width: 100%;
  height: 100%;
  float: left;
}

.logo--small {
  max-width: 6rem;
}

.logo--tiny {
  max-width: 3rem;
}

[class^="icon--"]::before,
[class^="icon--"]::after {
  font-size: 0.75em;
  vertical-align: middle;
}

[class^="icon--"]::before {
  margin-right: 0.25em;
}

[class^="icon--"]::after {
  margin-left: 0.25em;
}

.icon--email:before {
  content: "\f1fa";
}

.icon--email:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

.icon--email:before {
  text-decoration: none;
}

.icon--university:before {
  content: "\f19c";
}

.icon--university:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

.icon--university:before {
  text-decoration: none;
}

.icon--school:before {
  content: "\f549";
}

.icon--school:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

.icon--school:before {
  text-decoration: none;
  font-size: 0.5em;
}

.icon--graduate:before {
  content: "\f501";
}

.icon--graduate:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

.icon--graduate:before {
  text-decoration: none;
}

.icon--staff:before {
  content: "\f508";
}

.icon--staff:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

.icon--staff:before {
  text-decoration: none;
}

.icon--children:before {
  content: "\f1ae";
}

.icon--children:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

.icon--children:before {
  text-decoration: none;
}

.icon--activity:before {
  content: "\f559";
}

.icon--activity:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

.icon--activity:before {
  text-decoration: none;
}

.icon--admin:before {
  content: "\f502";
}

.icon--admin:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

.icon--admin:before {
  text-decoration: none;
}

.icon--child:before {
  content: "\f1ae";
}

.icon--child:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

.icon--child:before {
  text-decoration: none;
}

.icon--stamp:before {
  content: "\f5bf";
}

.icon--stamp:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

.icon--stamp:before {
  text-decoration: none;
}

.icon--archived:before {
  content: "\f187";
}

.icon--archived:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

.icon--archived:before {
  text-decoration: none;
}

.icon--close::before {
  content: url("data:image/svg+xml,%3Csvg version='1.1' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg' width='100%25' viewBox='0 0 54 52' xml:space='preserve'%3E %3Cpath d='M37.8,26l7.9,7.9c2.9,2.9,2.9,7.6,0,10.5s-7.6,2.9-10.5,0l-7.9-7.9l-7.9,7.9c-2.9,2.9-7.6,2.9-10.4,0 s-2.9-7.6,0-10.4l7.9-7.9L9,18.1c-2.9-2.9-2.9-7.6,0-10.5s7.6-2.9,10.5,0l7.9,7.9l7.9-7.9c2.9-2.9,7.6-2.9,10.4,0s2.9,7.6,0,10.4 L37.8,26z'/%3E %3C/svg%3E");
}

[class*="icon--"][class*="--plus"]::before {
  content: url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' width='100%25' viewBox='0 0 49 49'%3E %3Cpath d='M42,31.5H31.5V42c0,3.9-3.1,7-7,7c-3.9,0-7-3.1-7-7V31.5H7c-3.9,0-7-3.1-7-7c0-3.9,3.1-7,7-7h10.5V7 c0-3.9,3.1-7,7-7c3.9,0,7,3.1,7,7v10.5H42c3.9,0,7,3.1,7,7C49,28.4,45.9,31.5,42,31.5z'/%3E %3C/svg%3E");
  background-color: #fdd800;
}

[class*="icon--"][class*="--thumbs-up"]::before {
  content: url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' width='100%25' viewBox='0 0 100 97'%3E %3Cpath d='M25.7,41.7H12.9c-2.1,0-3.9,1.7-3.9,3.9v38.6c0,2.1,1.7,3.9,3.9,3.9h12.9c2.1,0,3.9-1.7,3.9-3.9V45.6 C29.6,43.4,27.9,41.7,25.7,41.7z M19.3,81.6c-2.1,0-3.9-1.7-3.9-3.9s1.7-3.9,3.9-3.9s3.9,1.7,3.9,3.9S21.4,81.6,19.3,81.6z M70.8,18.8c0,6.8-4.2,10.6-5.4,15.2h16.4c5.4,0,9.6,4.5,9.6,9.3c0,2.9-1.2,6-3.1,7.9l0,0c1.6,3.7,1.3,9-1.5,12.8 c1.4,4.2,0,9.3-2.6,12c0.7,2.8,0.4,5.2-1,7.2c-3.3,4.7-11.4,4.8-18.3,4.8h-0.5c-7.8,0-14.1-2.8-19.2-5.1c-2.6-1.1-5.9-2.6-8.5-2.6 c-1,0-1.9-0.9-1.9-1.9V44c0-0.5,0.2-1,0.6-1.4c6.4-6.3,9.1-13,14.3-18.2c2.4-2.4,3.2-6,4.1-9.5c0.7-3,2.2-9.3,5.5-9.3 C63.1,5.7,70.8,7,70.8,18.8z'/%3E %3C/svg%3E ");
  background-color: #009640;
}

[class*="icon--"][class*="--star"]::before {
  content: url("data:image/svg+xml,%3Csvg fill='rgba(0, 0, 0, 0.3)' xmlns='http://www.w3.org/2000/svg' width='100%25' viewBox='0 0 535 512.1'%3E %3Cpath d='M238.8,17.8l-65.3,132.4L27.4,171.5c-26.2,3.8-36.7,36.1-17.7,54.6l105.7,103l-25,145.5c-4.5,26.3,23.2,46,46.4,33.7 l130.7-68.7l130.7,68.7c23.2,12.2,50.9-7.4,46.4-33.7l-25-145.5l105.7-103c19-18.5,8.5-50.8-17.7-54.6l-146.1-21.3L296.2,17.8 C284.5-5.8,250.6-6.1,238.8,17.8L238.8,17.8z'/%3E %3C/svg%3E");
  background-color: #9447b9;
}

[class*="icon--"][class*="--up-arrow"]::before {
  content: url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' width='100%25' viewBox='0 0 311 311'%3E %3Cpath d='M206.3,293.4H104.7c-10.9,0-19.7-8.8-19.7-19.7V123.1c0-10.9,8.8-19.7,19.7-19.7h101.5c10.9,0,19.7,8.8,19.7,19.7v150.5 C226,284.5,217.2,293.4,206.3,293.4z'/%3E %3Cpath d='M36.2,124.8L142.8,18.2c7-7,18.4-7,25.5,0l106.5,106.5c11.3,11.3,3.3,30.7-12.7,30.7H49C32.9,155.5,24.9,136.1,36.2,124.8z' /%3E%3C/svg%3E");
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0.5;
}

[class*="icon--"][class*="--categories"]::before {
  content: url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' width='100%25' viewBox='-20 -50 650 572'%3E %3Cpath d='M497.9,225.9L286.1,14.1c-9-9-21.2-14.1-33.9-14.1H48C21.5,0,0,21.5,0,48v204.1c0,12.7,5.1,24.9,14.1,33.9l211.9,211.9 c18.7,18.7,49.1,18.7,67.9,0l204.1-204.1C516.7,275.1,516.7,244.7,497.9,225.9L497.9,225.9z M112,160c-26.5,0-48-21.5-48-48 s21.5-48,48-48s48,21.5,48,48S138.5,160,112,160z M625.9,293.8L421.8,497.9c-18.7,18.7-49.1,18.7-67.9,0l-0.4-0.4l174.1-174.1 c17-17,26.4-39.6,26.4-63.6s-9.4-46.6-26.4-63.6L331.4,0h48.7c12.7,0,24.9,5.1,33.9,14.1l211.9,211.9 C644.7,244.7,644.7,275.1,625.9,293.8L625.9,293.8z'/%3E %3C/svg%3E");
  background-color: #fdd800;
}

[class*="icon--"][class*="--badges"]::before {
  content: url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' width='100%25' viewBox='0 -50 595.3 688'%3E %3Cpath d='M113.4,284.3V75.5c0,0-1-66.5,65.1-66.3c105.9,0.2,137.6,0.9,238.2,0.4c66.4-0.4,65.3,63,65.3,63v221.9 c0,0-6.5,176.3-184.3,176.3C119.7,470.7,113.4,284.3,113.4,284.3z'/%3E %3C/svg%3E");
  background-color: #009640;
}

[class*="icon--"][class*="--top"]::before,
[class*="icon--"][class*="--members-only"]::before {
  content: url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' width='100%25' viewBox='0 0 293.5 293.2'%3E %3Cpath d='M263,146.6l26.4,25.7c3.8,3.8,5,8.3,3.4,13.4c-1.5,5.1-4.8,8.3-9.7,9.4l-36.1,9.1l10.3,35.4 c1.5,5.3,0.4,9.9-3.4,13.7c-3.8,3.8-8.4,5-13.7,3.4l-35.5-10.3l-9.2,36c-1.1,5.3-4.4,8.7-9.7,10c-5.3,1.3-9.7,0.1-13.2-3.7 l-25.8-26.3l-25.8,26.3c-3.8,3.8-8.3,5-13.5,3.7c-5.2-1.3-8.3-4.7-9.5-10l-9.2-36l-35.5,10.3c-5.3,1.5-9.9,0.4-13.7-3.4 c-3.8-3.8-5-8.4-3.4-13.7l10.3-35.4l-36.1-9.1c-5-1.1-8.2-4.3-9.7-9.4c-1.5-5.1-0.4-9.6,3.4-13.4l26.3-25.7L4.1,120.9 c-3.8-3.8-5-8.3-3.4-13.4c1.5-5.1,4.8-8.3,9.7-9.4l36.1-9.1L36.2,53.4c-1.5-5.3-0.4-9.9,3.4-13.7c3.8-3.8,8.4-5,13.7-3.4l35.5,10.3 l9.2-36c1.1-5.3,4.4-8.7,9.7-10c5.3-1.3,9.7-0.1,13.2,3.7l25.8,26.9l25.8-26.9c3.8-3.8,8.3-5,13.5-3.4c5.2,1.5,8.3,4.8,9.5,9.7 l9.2,36l35.5-10.3c5.3-1.5,9.9-0.4,13.7,3.4c3.8,3.8,5,8.4,3.4,13.7L247,88.8l36.1,9.1c5,1.1,8.2,4.3,9.7,9.4 c1.5,5.1,0.4,9.6-3.4,13.4L263,146.6z'/%3E %3C/svg%3E");
  background-color: #9447b9;
}

[class*="icon--"][class*="--members-only"]::before {
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.1);
}

[class*="icon--"][class*="--activities"]::before {
  content: url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' width='100%25' viewBox='0 0 55 55'%3E %3Cpath d='M48.3,13.4c0,0.3-0.1,0.6-0.3,0.8c-0.2,0.2-0.5,0.3-0.8,0.3H7.5c-0.3,0-0.6-0.1-0.8-0.3 c-0.2-0.2-0.3-0.5-0.3-0.8v-3.2c0-1.2,0.5-2.3,1.3-3.1c0.8-0.8,2-1.3,3.2-1.3h4.5V1.1c0-0.3,0.1-0.6,0.3-0.8 c0.2-0.2,0.5-0.3,0.8-0.3h3.7c0.3,0,0.6,0.1,0.8,0.3c0.2,0.2,0.3,0.5,0.3,0.8v4.7h12V1.1c0-0.3,0.1-0.6,0.3-0.8 c0.2-0.2,0.5-0.3,0.8-0.3h3.7c0.3,0,0.6,0.1,0.8,0.3c0.2,0.2,0.3,0.5,0.3,0.8v4.7h4.5c1.2,0,2.3,0.4,3.2,1.3 c0.9,0.8,1.3,1.9,1.3,3.1L48.3,13.4L48.3,13.4z M7.5,17.3c-0.3,0-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8v23.4 c0,1.2,0.5,2.3,1.3,3.1c0.8,0.8,2,1.3,3.2,1.3h32.9c1.2,0,2.3-0.4,3.2-1.3c0.9-0.8,1.3-1.9,1.3-3.1V18.4c0-0.3-0.1-0.6-0.3-0.8 c-0.2-0.2-0.5-0.3-0.8-0.3H7.5z'/%3E %3C/svg%3E");
  background-color: #a61f23;
}

[class*="icon--"][class*="--cost"]::before {
  content: url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' width='100%25' viewBox='0 0 37.4 37'%3E %3Cpath d='M35.5,7.1c0.5,0,0.9,0.2,1.3,0.5c0.4,0.4,0.5,0.8,0.5,1.3v18.3c0,0.5-0.2,0.9-0.5,1.3c-0.4,0.4-0.8,0.5-1.3,0.5 H2.2c-0.5,0-0.9-0.2-1.3-0.5c-0.4-0.4-0.5-0.8-0.5-1.3V8.9c0-0.5,0.2-0.9,0.5-1.3c0.4-0.4,0.8-0.5,1.3-0.5H35.5z M3.1,13.5 c1,0,1.9-0.4,2.6-1.1c0.7-0.7,1.1-1.6,1.1-2.6H3.1V13.5z M3.1,26.3h3.7c0-1-0.4-1.9-1.1-2.6c-0.7-0.7-1.6-1.1-2.6-1.1V26.3z M18.9,23.6c1.3,0,2.4-0.5,3.3-1.6c0.9-1.1,1.4-2.4,1.4-3.9s-0.5-2.8-1.4-3.9c-0.9-1.1-2-1.6-3.3-1.6s-2.4,0.5-3.3,1.6 c-0.9,1.1-1.4,2.4-1.4,3.9s0.5,2.8,1.4,3.9C16.5,23,17.6,23.6,18.9,23.6z M34.6,13.5V9.8h-3.7c0,1,0.4,1.9,1.1,2.6 C32.7,13.1,33.5,13.5,34.6,13.5z M34.6,26.3v-3.7c-1,0-1.9,0.4-2.6,1.1c-0.7,0.7-1.1,1.6-1.1,2.6H34.6z'/%3E %3C/svg%3E");
  background-color: #fdd800;
}

[class*="icon--"][class*="--location"]::before {
  content: url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' width='100%25' viewBox='0 0 37 37'%3E %3Cpath d='M30.8,16.1c0.4,0,0.7,0.1,1,0.4c0.3,0.3,0.4,0.6,0.4,1v4.8c0,0.4-0.1,0.7-0.4,1c-0.3,0.3-0.6,0.4-1,0.4H9 c-0.4,0-0.7-0.1-1-0.4l-2.9-3c-0.1-0.1-0.2-0.3-0.2-0.5s0.1-0.4,0.2-0.5l2.9-3c0.3-0.3,0.6-0.4,1-0.4h7.5v-2.9h4.8v2.9H30.8z M32.7,8.9c0.1-0.1,0.2-0.3,0.2-0.5S32.8,8,32.7,7.9l-2.9-3c-0.3-0.3-0.6-0.4-1-0.4h-7.5V4c0-0.4-0.1-0.7-0.4-1 c-0.3-0.3-0.6-0.4-1-0.4h-1.9c-0.4,0-0.7,0.1-1,0.4c-0.3,0.3-0.4,0.6-0.4,1v0.5H6.9c-0.4,0-0.7,0.1-1,0.4c-0.3,0.3-0.4,0.6-0.4,1 v4.8c0,0.4,0.1,0.7,0.4,1c0.3,0.3,0.6,0.4,1,0.4h21.8c0.4,0,0.7-0.1,1-0.4L32.7,8.9z M16.5,24.8h4.8v7.3c0,0.4-0.1,0.7-0.4,1 c-0.3,0.3-0.6,0.4-1,0.4h-1.9c-0.4,0-0.7-0.1-1-0.4c-0.3-0.3-0.4-0.6-0.4-1V24.8z'/%3E %3C/svg%3E");
  background-color: #fdd800;
}

[class*="icon--"][class*="--skills"]::before {
  content: url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' width='100%25' viewBox='0 0 37 37'%3E %3Cpath d='M6.7,8.1C6.3,8,6.1,7.8,5.9,7.6C5.8,7.3,5.8,7,5.9,6.8c0.1-0.3,0.4-0.4,0.7-0.5l11-2.6c0.8-0.2,1.5-0.2,2.3,0 l11,2.6c0.3,0.1,0.6,0.2,0.7,0.5c0.1,0.3,0.1,0.5,0,0.8C31.6,7.8,31.4,8,31,8.1l-5.6,1.3c0.5,1.1,0.8,2.1,0.8,3.2 c0,1.3-0.3,2.5-1,3.7c-0.7,1.1-1.6,2-2.7,2.6c-1.1,0.6-2.4,1-3.7,1s-2.6-0.3-3.7-1c-1.1-0.6-2-1.5-2.7-2.6c-0.7-1.1-1-2.3-1-3.7 c0-1.1,0.3-2.2,0.8-3.2L8.4,8.5v3c0.5,0.3,0.7,0.6,0.7,1.1c0,0.5-0.2,0.9-0.6,1.2l0.9,3.5c0.1,0.2,0.1,0.4,0,0.5 c-0.1,0.2-0.2,0.3-0.4,0.3H6.5c-0.2,0-0.3-0.1-0.4-0.3c-0.1-0.2-0.1-0.3,0-0.5L7,13.7c-0.4-0.3-0.6-0.7-0.6-1.2 c0-0.5,0.2-0.8,0.7-1.1V8.1L6.7,8.1z M24.4,21.7c1.4,0,2.7,0.4,3.8,1.1c1.1,0.7,2,1.6,2.7,2.7c0.7,1.1,1,2.4,1,3.7v0.6 c0,0.8-0.3,1.4-0.8,1.9c-0.5,0.5-1.2,0.8-2,0.8H8.6c-0.8,0-1.4-0.3-2-0.8c-0.5-0.5-0.8-1.2-0.8-1.9v-0.6c0-1.3,0.3-2.5,1-3.7 c0.7-1.1,1.6-2,2.7-2.7c1.1-0.7,2.4-1.1,3.8-1.1l5.5,5.4L24.4,21.7z'/%3E %3C/svg%3E");
  background-color: #009640;
}

[class*="icon--"][class*="--questions"]::before {
  content: url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' width='100%25' viewBox='0 0 33 32'%3E %3Cpath d='M16.9,4.6c2.6,0,4.9,0.5,7,1.5s3.8,2.3,5.1,4c1.3,1.7,1.9,3.6,1.9,5.6c0,2-0.6,3.9-1.9,5.6c-1.3,1.7-3,3-5.1,4 s-4.5,1.5-7,1.5c-2,0-4-0.3-5.9-1c-0.9,0.7-1.9,1.3-3,1.8c-1.5,0.6-3.1,1-4.7,1c-0.2,0-0.3-0.1-0.4-0.3c-0.1-0.2-0.1-0.3,0.1-0.5 c0.3-0.3,0.7-0.8,1.3-1.6C5.1,25,5.7,23.8,6,22.7c-1-1-1.8-2.1-2.3-3.3c-0.5-1.2-0.8-2.4-0.8-3.8c0-2,0.6-3.9,1.9-5.6 c1.3-1.7,3-3,5.1-4C12,5.1,14.3,4.6,16.9,4.6z'/%3E %3C/svg%3E");
  background-color: #9447b9;
}

.tags {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.tags li {
  flex-shrink: 0;
}

.tags li:not(:first-child) {
  margin-left: 0.5em;
}

.tag {
  color: #0071ad;
  background-color: #7ad1ff;
  border-radius: 0.2em 0 0 0.2em;
  text-align: center;
  font-size: 0.9em;
  padding: 0 1.1em 0 0.7em;
  position: relative;
  white-space: nowrap;
  line-height: 2;
  display: inline-block;
  margin: 0 1.2em 0.2em 0;
}

.tag:not(:hover) {
  text-decoration: none;
}

.tag::before,
.tag::after {
  content: "";
  display: block;
  position: absolute;
  margin: 0;
}

.tag::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
  width: 1em;
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.5 200.08" height="100%" preserveAspectRatio="none"><path d="M0,.08a41.2,41.2,0,0,1,33,14c7.36,8.42,39.76,49.47,56.26,72,11.74,16,.09,27.53.09,27.53L33,185.08s-11,15-33,15" fill="%237ad1ff"/></svg>') left center/100% auto no-repeat;
}

.tag::after {
  width: 0.3em;
  height: 0.3em;
  top: calc(50% - 0.3em / 2);
  right: -0.3em;
  background-color: #fff;
  border-radius: 50%;
}

[class^="button"],
[role="button"],
button {
  cursor: pointer;
  text-decoration: none;
  padding: 0.82em 1.2em;
  margin-right: 0.5em;
  display: inline-block;
  border: 1px solid;
  border-radius: 1.35em;
  line-height: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
  text-align: center;
  transition: all 0.1s ease-out;
  color: white;
  background-color: #0071ad;
  border-color: #0071ad;
}

[class^="button"]::before,
[class^="button"]::after,
[role="button"]::before,
[role="button"]::after,
button::before,
button::after {
  font-size: 0.75em;
  vertical-align: middle;
}

[class^="button"]::before,
[role="button"]::before,
button::before {
  margin-right: 0.25em;
}

[class^="button"]::after,
[role="button"]::after,
button::after {
  margin-left: 0.25em;
}

[class^="button"][disabled],
[class^="button"][disabled]:hover,
[class^="button"][disabled]:focus,
[role="button"][disabled],
[role="button"][disabled]:hover,
[role="button"][disabled]:focus,
button[disabled],
button[disabled]:hover,
button[disabled]:focus {
  color: #888;
  cursor: not-allowed;
  background-color: #ccc;
  border-color: #ccc;
}

[class^="button"]:hover,
[class^="button"]:active,
[class^="button"]:focus,
[role="button"]:hover,
[role="button"]:active,
[role="button"]:focus,
button:hover,
button:active,
button:focus {
  background-color: #00507a;
  border-color: #00507a;
}

.button--small {
  padding: 0.6em 0.8em;
}

.button--large {
  padding: 1em 1.6em;
  border-radius: 1.5em;
}

.button--1 {
  color: white;
  background-color: #009640;
  border-color: #009640;
}

.button--1:hover,
.button--1:active,
.button--1:focus {
  background-color: #00632a;
  border-color: #00632a;
}

.button--1--light {
  color: #0071ad;
  background-color: #7ad1ff;
  border-color: #7ad1ff;
}

.button--1--light:hover,
.button--1--light:active,
.button--1--light:focus {
  background-color: #47bfff;
  border-color: #47bfff;
}

.button--2 {
  color: white;
  background-color: #a61f23;
  border-color: #a61f23;
}

.button--2:hover,
.button--2:active,
.button--2:focus {
  background-color: #7b171a;
  border-color: #7b171a;
}

.button--3 {
  color: #222;
  background-color: #fdd800;
  border-color: #fdd800;
}

.button--3:hover,
.button--3:active,
.button--3:focus {
  background-color: #caac00;
  border-color: #caac00;
}

.button--grey {
  color: black;
  background-color: #bababa;
  border-color: #bababa;
}

.button--grey:hover,
.button--grey:active,
.button--grey:focus {
  background-color: #a1a0a0;
  border-color: #a1a0a0;
}

.button--ghost {
  color: black;
  background-color: #fafafa;
  border-color: #fafafa;
}

.button--ghost:hover,
.button--ghost:active,
.button--ghost:focus {
  background-color: #e1e0e0;
  border-color: #e1e0e0;
}

.button--text {
  color: black;
  background-color: transparent;
  border-color: transparent;
  box-shadow: none !important;
  text-decoration: underline;
}

.button--text:hover,
.button--text:active,
.button--text:focus {
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0);
  border-color: #000000;
  border-color: rgba(0, 0, 0, 0);
}

.button--list:before {
  content: "\f0ca";
}

.button--list:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

.button--list:before {
  text-decoration: none;
}

.button--list-alt:before {
  content: "\f022";
}

.button--list-alt:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

.button--list-alt:before {
  text-decoration: none;
  font-weight: 400;
}

.button--search:before {
  content: "\f002";
}

.button--search:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

.button--search:before {
  text-decoration: none;
}

.button--tag {
  color: #0071ad;
  background-color: #7ad1ff;
  border-radius: 0.2em 0 0 0.2em;
  text-align: center;
  font-size: 0.9em;
  padding: 0 1.1em 0 0.7em;
  position: relative;
  white-space: nowrap;
  line-height: 2;
  display: inline-block;
  margin: 0 1.2em 0.2em 0;
  border-color: #7ad1ff;
  color: #0071ad;
  background-color: #7ad1ff;
  border-color: #7ad1ff;
}

.button--tag:not(:hover) {
  text-decoration: none;
}

.button--tag::before,
.button--tag::after {
  content: "";
  display: block;
  position: absolute;
  margin: 0;
}

.button--tag::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
  width: 1em;
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.5 200.08" height="100%" preserveAspectRatio="none"><path d="M0,.08a41.2,41.2,0,0,1,33,14c7.36,8.42,39.76,49.47,56.26,72,11.74,16,.09,27.53.09,27.53L33,185.08s-11,15-33,15" fill="%237ad1ff"/></svg>') left center/100% auto no-repeat;
}

.button--tag::after {
  width: 0.3em;
  height: 0.3em;
  top: calc(50% - 0.3em / 2);
  right: -0.3em;
  background-color: #fff;
  border-radius: 50%;
}

.button--tag:hover,
.button--tag:active,
.button--tag:focus {
  background-color: #47bfff;
  border-color: #47bfff;
}

.button--tag::before {
  top: -1px;
  left: calc(100% + 1px);
  width: 1em;
  height: calc(100% + 2px);
}

.button--tag:hover::before,
.button--tag:active::before,
.button--tag:focus::before {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.5 200.08" height="100%" preserveAspectRatio="none"><path d="M0,.08a41.2,41.2,0,0,1,33,14c7.36,8.42,39.76,49.47,56.26,72,11.74,16,.09,27.53.09,27.53L33,185.08s-11,15-33,15" fill="%2347bfff"/></svg>') left center/100% auto no-repeat;
}

.button--add:before {
  content: "\f067";
}

.button--add:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

.button--add:before {
  text-decoration: none;
}

.button--save:before {
  content: "\f0c7";
}

.button--save:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

.button--save:before {
  text-decoration: none;
  font-size: 1.2em;
  font-weight: 700;
}

.button--edit {
  min-width: 5em;
}

.button--edit:before {
  content: "\f303";
}

.button--edit:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

.button--edit:before {
  text-decoration: none;
}

.button--clone:before {
  content: "\f24d";
}

.button--clone:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

.button--clone:before {
  text-decoration: none;
}

.button--filters:before {
  content: "\f1de";
}

.button--filters:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

.button--filters:before {
  text-decoration: none;
}

.button--validate {
  color: white;
  background-color: #009640;
  border-color: #009640;
}

.button--validate:before {
  content: "\f00c";
}

.button--validate:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

.button--validate:before {
  text-decoration: none;
}

.button--validate:hover,
.button--validate:active,
.button--validate:focus {
  background-color: #00632a;
  border-color: #00632a;
}

.button--logout {
  color: white;
  background-color: #bababa;
  border-color: #bababa;
}

.button--logout:hover,
.button--logout:active,
.button--logout:focus {
  background-color: #a1a0a0;
  border-color: #a1a0a0;
}

.button--loading:after {
  content: "\f110";
}

.button--loading:after {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

.button--loading:after {
  text-decoration: none;
  color: white;
  -webkit-animation: fa-spin 1s infinite steps(8);
  animation: fa-spin 1s infinite steps(8);
}

.button--stamp:before {
  content: "\f5bf";
}

.button--stamp:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

.button--stamp:before {
  text-decoration: none;
}

.button--staff:before {
  content: "\f508";
}

.button--staff:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

.button--staff:before {
  text-decoration: none;
}

.button--children:before {
  content: "\f1ae";
}

.button--children:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

.button--children:before {
  text-decoration: none;
}

.button--flat-underline {
  padding: 1em 1.6em;
  font-size: 0.9em;
  text-decoration: underline;
  box-shadow: none;
}

.action-count {
  position: relative;
}

.action-count i {
  background-color: #a61f23;
  color: white;
  padding: 0.5em 0.8em;
  border-radius: 1em;
  position: absolute;
  top: 0;
  right: 0;
  -webkit-transform: translate(40%, -50%);
  transform: translate(40%, -50%);
  font-size: 65%;
}

.button--blue {
  color: white;
  background-color: #0071ad;
  border-color: #0071ad;
}

.button--blue:hover,
.button--blue:active,
.button--blue:focus {
  background-color: #00507a;
  border-color: #00507a;
}

.button--green {
  color: white;
  background-color: #009640;
  border-color: #009640;
}

.button--green:hover,
.button--green:active,
.button--green:focus {
  background-color: #00632a;
  border-color: #00632a;
}

.button--red {
  color: white;
  background-color: #a61f23;
  border-color: #a61f23;
}

.button--red:hover,
.button--red:active,
.button--red:focus {
  background-color: #7b171a;
  border-color: #7b171a;
}

.button--yellow {
  color: black;
  background-color: #fdd800;
  border-color: #fdd800;
}

.button--yellow:hover,
.button--yellow:active,
.button--yellow:focus {
  background-color: #caac00;
  border-color: #caac00;
}

.button--orange {
  color: white;
  background-color: #e0672f;
  border-color: #e0672f;
}

.button--orange:hover,
.button--orange:active,
.button--orange:focus {
  background-color: #bf501d;
  border-color: #bf501d;
}

.button--purple {
  color: white;
  background-color: #5c22c8;
  border-color: #5c22c8;
}

.button--purple:hover,
.button--purple:active,
.button--purple:focus {
  background-color: #481b9c;
  border-color: #481b9c;
}

.button--cy,
.button--en {
  display: inline-flex;
  align-items: stretch;
  box-shadow: inset 0 0 0 1px currentColor;
  padding-left: 1em;
  color: #0071ad;
  background-color: white;
  border-color: white;
}

.button--cy:focus,
.button--cy:hover,
.button--cy:active,
.button--en:focus,
.button--en:hover,
.button--en:active {
  background-color: #e6e6e6;
  border-color: #e6e6e6;
}

.button--cy::before,
.button--en::before {
  width: 2em;
  height: 0.9em;
  margin-left: 0.3em;
}

.datepicker-wrapper {
  position: relative;
  width: 100%;
}

.mat-datepicker-toggle {
  position: absolute;
  right: 0;
}

.mat-calendar button,
.mat-calendar button:hover,
.mat-calendar button:focus,
.mat-datepicker-toggle button,
.mat-datepicker-toggle button:hover,
.mat-datepicker-toggle button:focus {
  background: none;
}

.mat-datepicker-toggle {
  width: 2.5em;
  height: 2.5em;
}

.mat-datepicker-toggle .mat-icon-button {
  width: inherit;
  height: inherit;
}

.mat-datepicker-toggle-default-icon {
  width: 50%;
  height: 100%;
  margin: auto;
}

.mat-calendar-body-selected {
  background-color: #0071ad;
}

.mat-datepicker-toggle-active {
  color: #0071ad;
}

.mat-dialog-actions {
  justify-content: flex-end;
}

[data-validate] .error {
  background: #a61f23;
  background: rgba(166, 31, 35, 0.5);
}

[data-validate] .error-message {
  color: #a61f23;
}

.validation-errors {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.archived {
  color: #5c22c8;
}

span.archived:before {
  content: "\f187";
}

span.archived:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

span.archived:before {
  text-decoration: none;
}

span.archived::before,
span.archived::after {
  font-size: 0.75em;
  vertical-align: middle;
}

span.archived::before {
  margin-right: 0.25em;
}

span.archived::after {
  margin-left: 0.25em;
}

.breadcrumb {
  margin-bottom: 1.5%;
  font-size: 0.8em;
  text-transform: uppercase;
}

.breadcrumb a {
  display: inline-block;
  line-height: 0.9;
}

.breadcrumb a:not(:first-child) {
  margin-left: 0.5em;
}

.breadcrumb a:not(:last-child) {
  font-weight: 700;
}

.breadcrumb a:not(:last-child):after {
  content: "\f105";
}

.breadcrumb a:not(:last-child):after {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  text-decoration: underline;
}

.breadcrumb a:not(:last-child):after {
  text-decoration: none;
  margin-left: 0.5em;
}

.breadcrumb a:last-child {
  color: #888;
  text-decoration: none;
  cursor: default;
}

.color_list {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
}

.color_list [class^="color"] {
  width: 50%;
  line-height: 1;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-bottom: 0.5em;
}

.color_list [class^="color"]::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: calc(100% - 0.5em);
}

.color_list .color--1 {
  background-color: #0071ad;
}

.color_list .color--2 {
  background-color: #009640;
}

.color_list .color--3 {
  background-color: #a61f23;
}

.color_list .color--4 {
  background-color: #fdd800;
}

.color_list .color--5 {
  background-color: #f6f6f6;
}

.color_list .color--6 {
  background-color: #ccc;
}

.color_list .color--7 {
  background-color: #bababa;
}

.color_list .color--8 {
  background-color: #888;
}

@media (min-width: 400px) {
  .color_list [class^="color"] {
    width: 33.33%;
  }
}

@media (min-width: 500px) {
  .color_list [class^="color"] {
    width: 25%;
  }
}

@media (min-width: 1024px) {
  .color_list {
    flex-wrap: nowrap;
  }

  .color_list [class^="color"] {
    width: 16.66%;
  }
}

.tabs {
  margin-bottom: 1em;
}

.tabs [aria-hidden="true"] {
  display: none;
}

[role="tablist"] {
  list-style: none;
  padding-left: 0;
  display: flex;
  align-items: flex-end;
  margin-bottom: 0;
  color: #888;
  font-size: 0.9em;
  font-weight: 700;
  position: relative;
  white-space: nowrap;
}

[role="tab"] {
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
  flex-shrink: 0;
  border-radius: 0.3em 0.3em 0 0;
  padding: 0 1em;
  line-height: 2.5;
  text-align: center;
  cursor: pointer;
}

[role="tab"]:not(:first-child) {
  margin-left: 0.5em;
}

[role="tab"]:not(:hover) {
  text-decoration: none;
}

[role="tab"][aria-selected="true"] {
  cursor: default;
  background-color: #f6f6f6;
  border: 1px solid #ccc;
  border-top: 3px solid #0071ad;
  border-bottom-width: 0;
}

[role="tabpanel"] {
  background-color: #f6f6f6;
  border: 1px solid #ccc;
  padding: 1em;
}

.alert {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1em;
  padding: 1em 1em 1em 4em;
  border-radius: 0.3em;
  background-color: #0071ad;
}

.alert,
.alert p a {
  color: #fff;
}

.alert::before {
  content: "\f12a";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  flex-shrink: 0;
  color: inherit;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  position: absolute;
  left: 1em;
  line-height: 2;
  width: 2em;
  text-align: center;
}

.alert>* {
  width: 100%;
}

.alert h1,
.alert h2,
.alert h3,
.alert h4,
.alert p {
  margin-bottom: 0;
}

.alert p {
  margin-top: 0.3em;
}

.alert ul,
.alert ol {
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  list-style: none;
}

.alert--subtle {
  color: #000;
  background-color: transparent;
}

.alert--danger,
.alert--error {
  background-color: #a61f23;
}

.alert--danger::before,
.alert--error::before {
  content: "\f12a";
}

.alert--warning {
  background-color: #fdd800;
  color: #312a00;
}

.alert--warning::before {
  color: #7e6b00;
  content: "\f12a";
}

.alert--success {
  background-color: #009640;
}

.alert--success::before {
  content: "\f00c";
}

progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  width: 100%;
  max-width: 20em;
  height: 1em;
  background-color: #f6f6f6;
  border-radius: 1em;
  box-shadow: 0 2px 3px #000000 inset;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5) inset;
}

progress::-webkit-progress-bar {
  background-color: #f6f6f6;
  border-radius: 1em;
  border: 1px solid #ccc;
}

progress::-webkit-progress-value {
  background-color: #0071ad;
  background-image: -webkit-linear-gradient(135deg,
      transparent,
      transparent 33%,
      rgba(255, 255, 255, 0.1) 33%,
      rgba(255, 255, 255, 0.1) 66%,
      transparent 66%);
  background-size: 35px 20px, 100% 100%, 100% 100%;
  border-radius: 1em;
  -webkit-animation: animate-stripes 5s linear infinite forwards;
  animation: animate-stripes 5s linear infinite forwards;
}

progress::-moz-progress-bar {
  background-color: #f6f6f6;
}

@-webkit-keyframes animate-stripes {
  100% {
    background-position: -100px 0;
  }
}

@keyframes animate-stripes {
  100% {
    background-position: -100px 0;
  }
}

.progress--hours {
  position: relative;
  display: flex;
  margin-bottom: 1em;
  font-size: 1em;
  font-weight: 700;
  text-transform: uppercase;
}

.progress--hours span {
  position: relative;
}

.bar,
.fill {
  border-radius: 1em;
}

.bar {
  margin-bottom: 3em;
  flex-grow: 1;
  margin-left: 0.5em;
  font-size: 0.9em;
  text-transform: none;
  color: white;
  text-align: center;
  background: #773895;
}

.fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: #9447b9;
  min-width: 1.5em;
}

.drop-clicker-wrapper {
  position: relative;
  display: inline-block;
  margin-right: 0.5em;
}

.drop-clicker__button {
  display: inline-block;
  padding: 1em;
  color: inherit;
  text-decoration: none;
  border: 1px solid transparent;
  transition: border 0.3s ease-out, background 0.3s ease-out;
}

.drop-clicker__button strong {
  text-transform: uppercase;
}

.drop-clicker__button:focus {
  background-color: #f6f6f6;
  border: 1px solid #ccc;
  border-bottom-color: transparent;
  border-radius: 0.2em 0.2em 0 0;
}

.scrollbar {
  overflow-y: auto;
}

.scrollbar::-webkit-scrollbar {
  width: 1em;
}