/*
Qbit all - includes IE11 fallbacks (hence it's quite heavy)
*/
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");
:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-footer-contain, .q-page-contain {
  margin: 0 auto;
  min-width: 300px;
  max-width: 1328px; }
  @media screen and (max-width: 599px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 8px; } }
  @media screen and (min-width: 600px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 64px; } }

/*
text() sets the type scale and aligns to the basline grid
text-inline() just sets the type scale, leaving alignment for a block-level element
(see https://medium.com/@razvanonofrei/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b for background)
*/
@media screen and (max-width: 599px) {
  [data-qtheme] h1 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h1 {
    font-size: 2.25rem;
    line-height: 1.222;
    font-weight: 300;
    padding-top: 0.576rem;
    margin-top: 0;
    margin-bottom: 1.424rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h1 {
    font-size: 2.625rem;
    line-height: 1.19;
    font-weight: 300;
    padding-top: 0.63rem;
    margin-top: 0;
    margin-bottom: 1.37rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h2 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h2 {
    font-size: 2rem;
    line-height: 1.25;
    font-weight: 300;
    padding-top: 0.54rem;
    margin-top: 0;
    margin-bottom: 1.46rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h2 {
    font-size: 2.25rem;
    line-height: 1.222;
    font-weight: 300;
    padding-top: 0.576rem;
    margin-top: 0;
    margin-bottom: 1.424rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h3 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h3 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h3 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h4 {
    font-size: 1.125rem;
    line-height: 1.333;
    font-weight: 400;
    padding-top: 0.35044rem;
    margin-top: 0;
    margin-bottom: 1.14956rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h4 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h4 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h5 {
    font-size: 1.125rem;
    line-height: 1.333;
    font-weight: 400;
    padding-top: 0.35044rem;
    margin-top: 0;
    margin-bottom: 1.14956rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h5 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 400;
    padding-top: 0.36875rem;
    margin-top: 0;
    margin-bottom: 1.63125rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h5 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 400;
    padding-top: 0.36875rem;
    margin-top: 0;
    margin-bottom: 1.63125rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

[data-qtheme] strong {
  font-weight: 500; }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-footer-contain, .q-page-contain {
  margin: 0 auto;
  min-width: 300px;
  max-width: 1328px; }
  @media screen and (max-width: 599px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 8px; } }
  @media screen and (min-width: 600px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 64px; } }

[data-qtheme] {
  font-family: "Roboto", sans-serif;
  color: #333333;
  background: #ffffff; }
  @media screen and (max-width: 599px) {
    [data-qtheme] {
      font-size: 1rem;
      line-height: 1.25;
      font-weight: 400; } }
  @media screen and (min-width: 600px) {
    [data-qtheme] {
      font-size: 1rem;
      line-height: 1.25;
      font-weight: 400; } }
  @media screen and (min-width: 1200px) {
    [data-qtheme] {
      font-size: 1rem;
      line-height: 1.25;
      font-weight: 400; } }
  @media screen and (max-width: 599px) {
    [data-qtheme] h1 {
      font-size: 1.75rem;
      line-height: 1.285;
      font-weight: 400;
      padding-top: 0.50312rem;
      margin-top: 0;
      margin-bottom: 1.49688rem; } }
  @media screen and (min-width: 600px) {
    [data-qtheme] h1 {
      font-size: 2.25rem;
      line-height: 1.222;
      font-weight: 300;
      padding-top: 0.576rem;
      margin-top: 0;
      margin-bottom: 1.424rem; } }
  @media screen and (min-width: 1200px) {
    [data-qtheme] h1 {
      font-size: 2.625rem;
      line-height: 1.19;
      font-weight: 300;
      padding-top: 0.63rem;
      margin-top: 0;
      margin-bottom: 1.37rem; } }
  @media screen and (max-width: 599px) {
    [data-qtheme] h2 {
      font-size: 1.75rem;
      line-height: 1.285;
      font-weight: 400;
      padding-top: 0.50312rem;
      margin-top: 0;
      margin-bottom: 1.49688rem; } }
  @media screen and (min-width: 600px) {
    [data-qtheme] h2 {
      font-size: 2rem;
      line-height: 1.25;
      font-weight: 300;
      padding-top: 0.54rem;
      margin-top: 0;
      margin-bottom: 1.46rem; } }
  @media screen and (min-width: 1200px) {
    [data-qtheme] h2 {
      font-size: 2.25rem;
      line-height: 1.222;
      font-weight: 300;
      padding-top: 0.576rem;
      margin-top: 0;
      margin-bottom: 1.424rem; } }
  @media screen and (max-width: 599px) {
    [data-qtheme] h3 {
      font-size: 1.5rem;
      line-height: 1.25;
      font-weight: 400;
      padding-top: 0.405rem;
      margin-top: 0;
      margin-bottom: 1.595rem; } }
  @media screen and (min-width: 600px) {
    [data-qtheme] h3 {
      font-size: 1.5rem;
      line-height: 1.25;
      font-weight: 400;
      padding-top: 0.405rem;
      margin-top: 0;
      margin-bottom: 1.595rem; } }
  @media screen and (min-width: 1200px) {
    [data-qtheme] h3 {
      font-size: 1.75rem;
      line-height: 1.285;
      font-weight: 400;
      padding-top: 0.50312rem;
      margin-top: 0;
      margin-bottom: 1.49688rem; } }
  @media screen and (max-width: 599px) {
    [data-qtheme] h4 {
      font-size: 1.125rem;
      line-height: 1.333;
      font-weight: 400;
      padding-top: 0.35044rem;
      margin-top: 0;
      margin-bottom: 1.14956rem; } }
  @media screen and (min-width: 600px) {
    [data-qtheme] h4 {
      font-size: 1.5rem;
      line-height: 1.25;
      font-weight: 400;
      padding-top: 0.405rem;
      margin-top: 0;
      margin-bottom: 1.595rem; } }
  @media screen and (min-width: 1200px) {
    [data-qtheme] h4 {
      font-size: 1.5rem;
      line-height: 1.25;
      font-weight: 400;
      padding-top: 0.405rem;
      margin-top: 0;
      margin-bottom: 1.595rem; } }
  @media screen and (max-width: 599px) {
    [data-qtheme] h5 {
      font-size: 1.125rem;
      line-height: 1.333;
      font-weight: 400;
      padding-top: 0.35044rem;
      margin-top: 0;
      margin-bottom: 1.14956rem; } }
  @media screen and (min-width: 600px) {
    [data-qtheme] h5 {
      font-size: 1.25rem;
      line-height: 1.3;
      font-weight: 400;
      padding-top: 0.36875rem;
      margin-top: 0;
      margin-bottom: 1.63125rem; } }
  @media screen and (min-width: 1200px) {
    [data-qtheme] h5 {
      font-size: 1.25rem;
      line-height: 1.3;
      font-weight: 400;
      padding-top: 0.36875rem;
      margin-top: 0;
      margin-bottom: 1.63125rem; } }
  @media screen and (max-width: 599px) {
    [data-qtheme] h6 {
      font-size: 1rem;
      line-height: 1.25;
      font-weight: 400;
      padding-top: 0.27rem;
      margin-top: 0;
      margin-bottom: 0.98rem; } }
  @media screen and (min-width: 600px) {
    [data-qtheme] h6 {
      font-size: 1rem;
      line-height: 1.25;
      font-weight: 400;
      padding-top: 0.27rem;
      margin-top: 0;
      margin-bottom: 0.98rem; } }
  @media screen and (min-width: 1200px) {
    [data-qtheme] h6 {
      font-size: 1rem;
      line-height: 1.25;
      font-weight: 400;
      padding-top: 0.27rem;
      margin-top: 0;
      margin-bottom: 0.98rem; } }
  @media screen and (max-width: 599px) {
    [data-qtheme] p {
      font-size: 1rem;
      line-height: 1.25;
      font-weight: 400;
      padding-top: 0.27rem;
      margin-top: 0;
      margin-bottom: 0.98rem; } }
  @media screen and (min-width: 600px) {
    [data-qtheme] p {
      font-size: 1rem;
      line-height: 1.25;
      font-weight: 400;
      padding-top: 0.27rem;
      margin-top: 0;
      margin-bottom: 0.98rem; } }
  @media screen and (min-width: 1200px) {
    [data-qtheme] p {
      font-size: 1rem;
      line-height: 1.25;
      font-weight: 400;
      padding-top: 0.27rem;
      margin-top: 0;
      margin-bottom: 0.98rem; } }
  @media screen and (max-width: 599px) {
    [data-qtheme] small {
      font-size: 0.75rem;
      line-height: 1.333;
      letter-spacing: 0.02rem;
      font-weight: 400;
      padding-top: 0.23362rem;
      margin-top: 0;
      margin-bottom: 0.76638rem; } }
  @media screen and (min-width: 600px) {
    [data-qtheme] small {
      font-size: 0.75rem;
      line-height: 1.333;
      letter-spacing: 0.02rem;
      font-weight: 400;
      padding-top: 0.23362rem;
      margin-top: 0;
      margin-bottom: 0.76638rem; } }
  @media screen and (min-width: 1200px) {
    [data-qtheme] small {
      font-size: 0.75rem;
      line-height: 1.333;
      letter-spacing: 0.02rem;
      font-weight: 400;
      padding-top: 0.23362rem;
      margin-top: 0;
      margin-bottom: 0.76638rem; } }
  [data-qtheme] strong {
    font-weight: 500; }
  [data-qtheme] a {
    color: var(--text-primary);
    color: var(--text-primary);
    text-decoration: underline; }
    [data-qtheme] a:link, [data-qtheme] a:visited {
      color: var(--text-primary);
      color: var(--text-primary); }
    [data-qtheme] a:focus, [data-qtheme] a:hover, [data-qtheme] a:active {
      color: var(--text-primary-hover);
      color: var(--text-primary-hover); }

[data-qtheme] body,
body[data-qtheme] {
  margin: 0; }

.q-assistive {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.q-hidden {
  display: none; }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-footer-contain, .q-page-contain {
  margin: 0 auto;
  min-width: 300px;
  max-width: 1328px; }
  @media screen and (max-width: 599px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 8px; } }
  @media screen and (min-width: 600px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 64px; } }

/*
text() sets the type scale and aligns to the basline grid
text-inline() just sets the type scale, leaving alignment for a block-level element
(see https://medium.com/@razvanonofrei/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b for background)
*/
@media screen and (max-width: 599px) {
  [data-qtheme] h1 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h1 {
    font-size: 2.25rem;
    line-height: 1.222;
    font-weight: 300;
    padding-top: 0.576rem;
    margin-top: 0;
    margin-bottom: 1.424rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h1 {
    font-size: 2.625rem;
    line-height: 1.19;
    font-weight: 300;
    padding-top: 0.63rem;
    margin-top: 0;
    margin-bottom: 1.37rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h2 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h2 {
    font-size: 2rem;
    line-height: 1.25;
    font-weight: 300;
    padding-top: 0.54rem;
    margin-top: 0;
    margin-bottom: 1.46rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h2 {
    font-size: 2.25rem;
    line-height: 1.222;
    font-weight: 300;
    padding-top: 0.576rem;
    margin-top: 0;
    margin-bottom: 1.424rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h3 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h3 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h3 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h4 {
    font-size: 1.125rem;
    line-height: 1.333;
    font-weight: 400;
    padding-top: 0.35044rem;
    margin-top: 0;
    margin-bottom: 1.14956rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h4 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h4 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h5 {
    font-size: 1.125rem;
    line-height: 1.333;
    font-weight: 400;
    padding-top: 0.35044rem;
    margin-top: 0;
    margin-bottom: 1.14956rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h5 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 400;
    padding-top: 0.36875rem;
    margin-top: 0;
    margin-bottom: 1.63125rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h5 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 400;
    padding-top: 0.36875rem;
    margin-top: 0;
    margin-bottom: 1.63125rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

[data-qtheme] strong {
  font-weight: 500; }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-time {
  color: #838c91;
  color: var(--colour-text-secondary); }
  @media screen and (max-width: 599px) {
    .q-time {
      font-size: 0.75rem;
      line-height: 1.333;
      letter-spacing: 0.02rem;
      font-weight: 400; } }
  @media screen and (min-width: 600px) {
    .q-time {
      font-size: 0.75rem;
      line-height: 1.333;
      letter-spacing: 0.02rem;
      font-weight: 400; } }
  @media screen and (min-width: 1200px) {
    .q-time {
      font-size: 0.75rem;
      line-height: 1.333;
      letter-spacing: 0.02rem;
      font-weight: 400; } }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-footer-contain, .q-page-contain {
  margin: 0 auto;
  min-width: 300px;
  max-width: 1328px; }
  @media screen and (max-width: 599px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 8px; } }
  @media screen and (min-width: 600px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 64px; } }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-footer-contain, .q-page-contain {
  margin: 0 auto;
  min-width: 300px;
  max-width: 1328px; }
  @media screen and (max-width: 599px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 8px; } }
  @media screen and (min-width: 600px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 64px; } }

/*
text() sets the type scale and aligns to the basline grid
text-inline() just sets the type scale, leaving alignment for a block-level element
(see https://medium.com/@razvanonofrei/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b for background)
*/
@media screen and (max-width: 599px) {
  [data-qtheme] h1 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h1 {
    font-size: 2.25rem;
    line-height: 1.222;
    font-weight: 300;
    padding-top: 0.576rem;
    margin-top: 0;
    margin-bottom: 1.424rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h1 {
    font-size: 2.625rem;
    line-height: 1.19;
    font-weight: 300;
    padding-top: 0.63rem;
    margin-top: 0;
    margin-bottom: 1.37rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h2 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h2 {
    font-size: 2rem;
    line-height: 1.25;
    font-weight: 300;
    padding-top: 0.54rem;
    margin-top: 0;
    margin-bottom: 1.46rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h2 {
    font-size: 2.25rem;
    line-height: 1.222;
    font-weight: 300;
    padding-top: 0.576rem;
    margin-top: 0;
    margin-bottom: 1.424rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h3 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h3 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h3 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h4 {
    font-size: 1.125rem;
    line-height: 1.333;
    font-weight: 400;
    padding-top: 0.35044rem;
    margin-top: 0;
    margin-bottom: 1.14956rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h4 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h4 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h5 {
    font-size: 1.125rem;
    line-height: 1.333;
    font-weight: 400;
    padding-top: 0.35044rem;
    margin-top: 0;
    margin-bottom: 1.14956rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h5 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 400;
    padding-top: 0.36875rem;
    margin-top: 0;
    margin-bottom: 1.63125rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h5 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 400;
    padding-top: 0.36875rem;
    margin-top: 0;
    margin-bottom: 1.63125rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

[data-qtheme] strong {
  font-weight: 500; }

/* Shared
-------------------------------------------------- */
/*


NOTE - this variable proxy system has proved to be overkill and will be refactored out.
See https://jira.quantium.com.au/browse/QDS-70 for details; but in the meantime do not
follow the precedent of this file. Instead, just use CSS vars directly from the core
token vars.


*/
/* Light grey theme (default)
-------------------------------------------------- */
:root {
  /*
  Source SVGs in styles\src_images - see readme for details about this encoding.
  Passing this through SCSS vars and mixins also seems to mess up the encoding, so assigning directly.
  Spinner uses the dark SVG; Primary uses the light SVG
  */
  --spinner-url: url("data:image/svg+xml,%3Csvg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 17a8 8 0 1 0-8-8' stroke='%23333' stroke-width='2' stroke-linecap='round' /%3E%3C/svg%3E");
  --spinner-url-primary: url("data:image/svg+xml,%3Csvg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 17a8 8 0 1 0-8-8' stroke='%23fff' stroke-width='2' stroke-linecap='round' /%3E%3C/svg%3E");
  --button-bg:                      #e0e0e0;
  --button-border:                  2px solid #e0e0e0;
  --button-colour:                  #333333;
  --button-bg-hover:                #c3c3c3;
  --button-border-hover:            2px solid #c3c3c3;
  --button-shadow-hover:            0px 2px 7px rgba(0, 0, 0, 0.25);
  --button-bg-focus:                #c3c3c3;
  --button-border-focus:            2px solid #8baaff;
  --button-colour-focus:            #333333;
  --button-bg-pressed:              #8c8c8c;
  --button-border-pressed:          2px solid #8c8c8c;
  --button-colour-pressed:          #ffffff;
  --button-bg-inactive:             #efefef;
  --button-border-inactive:         2px solid #efefef;
  --button-colour-inactive:         #a7a7a7;
  --button-primary-bg:              #3f69ae;
  --button-primary-border:          2px solid #3f69ae;
  --button-primary-colour:          #fff;
  --button-primary-bg-hover:        #31569d;
  --button-primary-border-hover:    2px solid #31569d;
  --button-primary-bg-focus:        #31569d;
  --button-primary-border-focus:    2px solid #8baaff;
  --button-primary-colour-focus:    #fff;
  --button-primary-bg-pressed:      #1b3b84;
  --button-primary-border-pressed:  2px solid #1b3b84;
  --icon-size-xsmall-half:          12px;
  --icon-size-xsmall-half:          calc(var(--icon-size-xsmall) / 2);
  --icon-size-small-half:           16px;
  --icon-size-small-half:           calc(var(--icon-size-small) / 2);
  --icon-size-medium-half:          20px;
  --icon-size-medium-half:          calc(var(--icon-size-medium) / 2);
  --icon-size-large-half:           24px;
  --icon-size-large-half:           calc(var(--icon-size-large) / 2); }

/* Black theme
This is pulled out of the core colours so doesn't
follow the exact pattern as the others
-------------------------------------------------- */
[data-qtheme="black"] {
  --button-primary-bg-focus:          #272727;
  --button-primary-bg-hover:          #272727;
  --button-primary-bg-pressed:        #000000;
  --button-primary-bg:                #333333;
  --button-primary-border-hover:      2px solid #272727;
  --button-primary-border-pressed:    2px solid #000000;
  --button-primary-border:            2px solid #333333;
  --button-primary-colour:            #ffffff; }

/* Blue theme
-------------------------------------------------- */
[data-qtheme="blue"] {
  --button-primary-bg-focus:          #31569d;
  --button-primary-bg-hover:          #31569d;
  --button-primary-bg-pressed:        #1b3b84;
  --button-primary-bg:                #3f69ae;
  --button-primary-border-hover:      2px solid #31569d;
  --button-primary-border-pressed:    2px solid #1b3b84;
  --button-primary-border:            2px solid #3f69ae;
  --button-primary-colour:            #ffffff; }

/* Burgundy theme
-------------------------------------------------- */
[data-qtheme="burgundy"] {
  --button-primary-bg-focus:          #bc5265;
  --button-primary-bg-hover:          #bc5265;
  --button-primary-bg-pressed:        #a93648;
  --button-primary-bg:                #c96478;
  --button-primary-border-hover:      2px solid #bc5265;
  --button-primary-border-pressed:    2px solid #a93648;
  --button-primary-border:            2px solid #c96478;
  --button-primary-colour:            #ffffff; }

/* Coral theme
-------------------------------------------------- */
[data-qtheme="coral"] {
  --button-primary-bg-focus:          #eb5138;
  --button-primary-bg-hover:          #eb5138;
  --button-primary-bg-pressed:        #e43521;
  --button-primary-bg:                #ef6348;
  --button-primary-border-hover:      2px solid #eb5138;
  --button-primary-border-pressed:    2px solid #e43521;
  --button-primary-border:            2px solid #ef6348;
  --button-primary-colour:            #ffffff; }

/* Cyan theme
-------------------------------------------------- */
[data-qtheme="cyan"] {
  --button-primary-bg-focus:          #35a6b8;
  --button-primary-bg-hover:          #35a6b8;
  --button-primary-bg-pressed:        #1f8ea3;
  --button-primary-bg:                #44b6c5;
  --button-primary-border-hover:      2px solid #35a6b8;
  --button-primary-border-pressed:    2px solid #1f8ea3;
  --button-primary-border:            2px solid #44b6c5;
  --button-primary-colour:            #ffffff; }

/* Green theme
-------------------------------------------------- */
[data-qtheme="green"] {
  --spinner-url-primary:              url("data:image/svg+xml,%3Csvg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 17a8 8 0 1 0-8-8' stroke='%23333' stroke-width='2' stroke-linecap='round' /%3E%3C/svg%3E");
  --spinner-url-primary:              var(--spinner-url);
  --button-primary-bg-focus:          #6dd769;
  --button-primary-bg-hover:          #6dd769;
  --button-primary-bg-pressed:        #50ca4c;
  --button-primary-bg:                #80df7c;
  --button-primary-border-hover:      2px solid #6dd769;
  --button-primary-border-pressed:    2px solid #50ca4c;
  --button-primary-border:            2px solid #80df7c;
  --button-primary-colour:            #333333; }

/* Orange theme
-------------------------------------------------- */
[data-qtheme="orange"] {
  --button-primary-bg-focus:          #eb8a38;
  --button-primary-bg-hover:          #eb8a38;
  --button-primary-bg-pressed:        #e46e21;
  --button-primary-bg:                #ef9c48;
  --button-primary-border-hover:      2px solid #eb8a38;
  --button-primary-border-pressed:    2px solid #e46e21;
  --button-primary-border:            2px solid #ef9c48;
  --button-primary-colour:            #ffffff; }

/* Turquoise theme
-------------------------------------------------- */
[data-qtheme="turquoise"] {
  --spinner-url-primary:                  url("data:image/svg+xml,%3Csvg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 17a8 8 0 1 0-8-8' stroke='%23333' stroke-width='2' stroke-linecap='round' /%3E%3C/svg%3E");
  --spinner-url-primary:                  var(--spinner-url);
  --button-primary-bg-focus:              #35ca91;
  --button-primary-bg-hover:              #35ca91;
  --button-primary-bg-pressed:            #1fba77;
  --button-primary-bg:                    #44d5a3;
  --button-primary-border-hover:          2px solid #35ca91;
  --button-primary-border-pressed:        2px solid #1fba77;
  --button-primary-border:                2px solid #44d5a3;
  --button-primary-colour:                #333333; }

/* Violet theme
-------------------------------------------------- */
[data-qtheme="violet"] {
  --button-primary-bg-focus:          #7c60af;
  --button-primary-bg-hover:          #7c60af;
  --button-primary-bg-pressed:        #604399;
  --button-primary-bg:                #8f73be;
  --button-primary-border-hover:      2px solid #7c60af;
  --button-primary-border-pressed:    2px solid #604399;
  --button-primary-border:            2px solid #8f73be;
  --button-primary-colour:            #ffffff; }

/* Yellow theme
-------------------------------------------------- */
[data-qtheme="yellow"] {
  --spinner-url-primary:              url("data:image/svg+xml,%3Csvg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 17a8 8 0 1 0-8-8' stroke='%23333' stroke-width='2' stroke-linecap='round' /%3E%3C/svg%3E");
  --spinner-url-primary:              var(--spinner-url);
  --button-primary-bg-focus:          #e4be66;
  --button-primary-bg-hover:          #e4be66;
  --button-primary-bg-pressed:        #dbac49;
  --button-primary-bg:                #eacb79;
  --button-primary-border-hover:      2px solid #e4be66;
  --button-primary-border-pressed:    2px solid #dbac49;
  --button-primary-border:            2px solid #eacb79;
  --button-primary-colour:            #333333; }

/* Button styles
-------------------------------------------------- */
a.q-button:not(.q-button-primary) {
  color: #333333;
  color: var(--button-colour); }
  a.q-button:not(.q-button-primary):focus {
    color: #333333;
    color: var(--button-colour-focus); }
  a.q-button:not(.q-button-primary)[aria-disabled="true"] {
    color: #a7a7a7;
    color: var(--button-colour-inactive); }
  a.q-button:not(.q-button-primary)[aria-pressed="true"] {
    color: #ffffff;
    color: var(--button-colour-pressed); }
    a.q-button:not(.q-button-primary)[aria-pressed="true"]:focus {
      color: #ffffff;
      color: var(--button-colour-pressed); }

.q-button.q-button {
  appearance: none;
  display: inline-block;
  font-family: inherit;
  font-weight: normal;
  position: relative;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background-color: #e0e0e0;
  background-color: var(--button-bg);
  border-radius: 3px;
  border-radius: var(--border-radius);
  border: 2px solid #e0e0e0;
  border: var(--button-border);
  color: #333333;
  color: var(--button-colour);
  margin: 0 16px 0 0;
  margin: 0 var(--space-m) 0 0;
  padding: 0;
  white-space: nowrap;
  vertical-align: middle; }
  .q-button.q-button::-moz-focus-inner {
    border: 0;
    padding: 0; }
  .q-button.q-button[aria-pressed="true"] {
    background-color: #8c8c8c;
    background-color: var(--button-bg-pressed);
    border: 2px solid #8c8c8c;
    border: var(--button-border-pressed);
    color: #ffffff;
    color: var(--button-colour-pressed); }
    .q-button.q-button[aria-pressed="true"]:focus {
      color: #ffffff;
      color: var(--button-colour-pressed); }
  .q-button.q-button:focus {
    border: 2px solid #8baaff;
    border: var(--button-border-focus);
    color: #333333;
    color: var(--button-colour-focus);
    outline: none; }
  .q-button.q-button:hover {
    background-color: #c3c3c3;
    background-color: var(--button-bg-hover);
    border: 2px solid #c3c3c3;
    border: var(--button-border-hover);
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.25); }

@keyframes buttonloading {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
  .q-button.q-button[role="progressbar"] > .q-button-loading {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 17a8 8 0 1 0-8-8' stroke='%23333' stroke-width='2' stroke-linecap='round' /%3E%3C/svg%3E");
    background-image: var(--spinner-url);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    animation: buttonloading .75s linear infinite;
    position: absolute;
    left: 50%;
    top: 50%; }
  .q-button.q-button[role="progressbar"] > *:not(.q-button-loading) {
    opacity: 0; }
  .q-button.q-button[aria-disabled="true"] {
    background-color: #efefef;
    background-color: var(--button-bg-inactive);
    border: 2px solid #efefef;
    border: var(--button-border-inactive);
    color: #a7a7a7;
    color: var(--button-colour-inactive);
    cursor: default; }
    .q-button.q-button[aria-disabled="true"]:hover {
      box-shadow: none; }
  .q-button.q-button.q-button-width-xsmall {
    min-width: 100px; }
  .q-button.q-button.q-button-width-small {
    min-width: 200px; }
  .q-button.q-button.q-button-width-medium {
    min-width: 300px; }
  .q-button.q-button.q-button-width-large {
    min-width: 400px; }
  .q-button.q-button.q-button-width-fill {
    min-width: 100%; }
  .q-button.q-button .q-text,
  .q-button.q-button .q-icon {
    display: inline-block;
    vertical-align: middle; }
  .q-button.q-button .q-icon + .q-text {
    padding-left: 0; }
  .q-button.q-button .q-icon {
    margin: 2px; }

.q-button .q-text,
.q-button-height-small .q-text {
  padding: 8px 16px;
  padding: var(--space-s) var(--space-m); }
  @media screen and (max-width: 599px) {
    .q-button .q-text,
    .q-button-height-small .q-text {
      font-size: 1rem;
      line-height: 1.25;
      font-weight: 400; } }
  @media screen and (min-width: 600px) {
    .q-button .q-text,
    .q-button-height-small .q-text {
      font-size: 1rem;
      line-height: 1.25;
      font-weight: 400; } }
  @media screen and (min-width: 1200px) {
    .q-button .q-text,
    .q-button-height-small .q-text {
      font-size: 1rem;
      line-height: 1.25;
      font-weight: 400; } }

.q-button .q-icon,
.q-button .q-button-loading,
.q-button-height-small .q-icon,
.q-button-height-small .q-button-loading {
  height: 32px;
  height: var(--icon-size-small);
  width: 32px;
  width: var(--icon-size-small); }

.q-button .q-button-loading,
.q-button-height-small .q-button-loading {
  background-size: 16px;
  background-size: var(--icon-size-small-half);
  margin-left: -16px;
  margin-left: calc(-1 * var(--icon-size-small-half));
  margin-top: -16px;
  margin-top: calc(-1 * var(--icon-size-small-half));
  transform-origin: 16px 16px 16px;
  transform-origin: var(--icon-size-small-half) var(--icon-size-small-half) var(--icon-size-small-half); }

.q-button-height-xsmall .q-text {
  font-size: 14px;
  padding: 4px 16px;
  padding: var(--space-xs) var(--space-m); }

.q-button-height-xsmall .q-icon,
.q-button-height-xsmall .q-button-loading {
  height: 24px;
  height: var(--icon-size-xsmall);
  width: 24px;
  width: var(--icon-size-xsmall); }

.q-button-height-xsmall .q-button-loading {
  background-size: 12px;
  background-size: var(--icon-size-xsmall-half);
  margin-left: -12px;
  margin-left: calc(-1 * var(--icon-size-xsmall-half));
  margin-top: -12px;
  margin-top: calc(-1 * var(--icon-size-xsmall-half));
  transform-origin: 12px 12px 12px;
  transform-origin: var(--icon-size-xsmall-half) var(--icon-size-xsmall-half) var(--icon-size-xsmall-half); }

.q-button-height-medium .q-text {
  padding: 12px 16px;
  padding: calc(var(--space-s) * 1.5) var(--space-m); }

.q-button-height-medium .q-icon,
.q-button-height-medium .q-button-loading {
  height: 40px;
  height: var(--icon-size-medium);
  width: 40px;
  width: var(--icon-size-medium); }

.q-button-height-medium .q-button-loading {
  background-size: 20px;
  background-size: var(--icon-size-medium-half);
  margin-left: -20px;
  margin-left: calc(-1 * var(--icon-size-medium-half));
  margin-top: -20px;
  margin-top: calc(-1 * var(--icon-size-medium-half));
  transform-origin: 20px 20px 20px;
  transform-origin: var(--icon-size-medium-half) var(--icon-size-medium-half) var(--icon-size-medium-half); }

.q-button-height-large .q-text {
  font-size: 20px;
  padding: 12px 16px 11px 16px;
  padding: 12px var(--space-m) 11px var(--space-m); }

.q-button-height-large .q-icon,
.q-button-height-large .q-button-loading {
  height: 48px;
  height: var(--icon-size-large);
  width: 48px;
  width: var(--icon-size-large); }

.q-button-height-large .q-button-loading {
  background-size: 24px;
  background-size: var(--icon-size-large-half);
  margin-left: -24px;
  margin-left: calc(-1 * var(--icon-size-large-half));
  margin-top: -24px;
  margin-top: calc(-1 * var(--icon-size-large-half));
  transform-origin: 24px 24px 24px;
  transform-origin: var(--icon-size-large-half) var(--icon-size-large-half) var(--icon-size-large-half); }

.q-button-width-xsmall {
  min-width: 100px; }

.q-button-width-small {
  min-width: 200px; }

.q-button-width-medium {
  min-width: 300px; }

.q-button-width-large {
  min-width: 400px; }

.q-button-width-fill {
  min-width: 100%; }

.q-button.q-button-stealth {
  background: transparent;
  border-color: transparent; }
  .q-button.q-button-stealth:hover {
    box-shadow: none; }

.q-button.q-button-primary {
  background-color: #3f69ae;
  background-color: var(--button-primary-bg);
  border: 2px solid #3f69ae;
  border: var(--button-primary-border);
  color: #fff;
  color: var(--button-primary-colour); }
  .q-button.q-button-primary .q-icon svg {
    fill: #fff;
    fill: var(--button-primary-colour); }
  .q-button.q-button-primary:link, .q-button.q-button-primary:visited {
    color: #fff;
    color: var(--button-primary-colour); }
  .q-button.q-button-primary:focus:not([aria-disabled="true"]) {
    background-color: #31569d;
    background-color: var(--button-primary-bg-focus);
    border: 2px solid #8baaff;
    border: var(--button-primary-border-focus);
    color: #fff;
    color: var(--button-primary-colour-focus); }
  .q-button.q-button-primary:hover:not([aria-disabled="true"]) {
    background-color: #31569d;
    background-color: var(--button-primary-bg-hover);
    border: 2px solid #31569d;
    border: var(--button-primary-border-hover); }
  .q-button.q-button-primary[aria-pressed="true"] {
    background-color: #1b3b84;
    background-color: var(--button-primary-bg-pressed);
    border: 2px solid #1b3b84;
    border: var(--button-primary-border-pressed);
    color: #ffffff;
    color: var(--button-colour-pressed); }
  .q-button.q-button-primary[role="progressbar"] .q-button-loading {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 17a8 8 0 1 0-8-8' stroke='%23fff' stroke-width='2' stroke-linecap='round' /%3E%3C/svg%3E");
    background-image: var(--spinner-url-primary); }
  .q-button.q-button-primary[aria-disabled="true"] {
    color: #a7a7a7;
    color: var(--button-colour-inactive); }

.q-button-group {
  display: flex;
  align-items: center; }
  .q-button-group .q-button {
    margin-bottom: 16px;
    margin-bottom: var(--space-m); }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-footer-contain, .q-page-contain {
  margin: 0 auto;
  min-width: 300px;
  max-width: 1328px; }
  @media screen and (max-width: 599px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 8px; } }
  @media screen and (min-width: 600px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 64px; } }

/*
text() sets the type scale and aligns to the basline grid
text-inline() just sets the type scale, leaving alignment for a block-level element
(see https://medium.com/@razvanonofrei/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b for background)
*/
@media screen and (max-width: 599px) {
  [data-qtheme] h1 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h1 {
    font-size: 2.25rem;
    line-height: 1.222;
    font-weight: 300;
    padding-top: 0.576rem;
    margin-top: 0;
    margin-bottom: 1.424rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h1 {
    font-size: 2.625rem;
    line-height: 1.19;
    font-weight: 300;
    padding-top: 0.63rem;
    margin-top: 0;
    margin-bottom: 1.37rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h2 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h2 {
    font-size: 2rem;
    line-height: 1.25;
    font-weight: 300;
    padding-top: 0.54rem;
    margin-top: 0;
    margin-bottom: 1.46rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h2 {
    font-size: 2.25rem;
    line-height: 1.222;
    font-weight: 300;
    padding-top: 0.576rem;
    margin-top: 0;
    margin-bottom: 1.424rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h3 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h3 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h3 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h4 {
    font-size: 1.125rem;
    line-height: 1.333;
    font-weight: 400;
    padding-top: 0.35044rem;
    margin-top: 0;
    margin-bottom: 1.14956rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h4 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h4 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h5 {
    font-size: 1.125rem;
    line-height: 1.333;
    font-weight: 400;
    padding-top: 0.35044rem;
    margin-top: 0;
    margin-bottom: 1.14956rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h5 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 400;
    padding-top: 0.36875rem;
    margin-top: 0;
    margin-bottom: 1.63125rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h5 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 400;
    padding-top: 0.36875rem;
    margin-top: 0;
    margin-bottom: 1.63125rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

[data-qtheme] strong {
  font-weight: 500; }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-footer-contain, .q-page-contain {
  margin: 0 auto;
  min-width: 300px;
  max-width: 1328px; }
  @media screen and (max-width: 599px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 8px; } }
  @media screen and (min-width: 600px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 64px; } }

:root {
  --datepicker-focus-width: 2px;
  --datepicker-nav-button-width: 32px;
  --datepicker-focus-colour: #8baaff;
  --datepicker-background: #ffffff;
  --datepicker-label-colour: #838c91;
  --datepicker-day-hover-background: #e8edf5;
  --datepicker-day-hover-colour: #333333;
  --datepicker-day-selected-colour: #ffffff;
  --datepicker-day-selected-background: #3f69ae;
  --datepicker-day-selected-background-disabled: #efefef;
  --datepicker-day-disabled-colour: #b5b5b5; }

.q-datepicker {
  display: inline-block; }
  .q-datepicker .DayPicker-wrapper {
    padding: 15px;
    padding: calc(var(--space-m) - 1px);
    border: 1px solid #d3d3d3;
    border: 1px solid var(--colour-secondary-highlight);
    border-radius: 3px;
    border-radius: var(--border-radius);
    background: #ffffff;
    background: var(--datepicker-background); }
  .q-datepicker .DayPicker-Month {
    display: table; }
  .q-datepicker .DayPicker-Caption {
    display: table-caption; }
    @media screen and (max-width: 599px) {
      .q-datepicker .DayPicker-Caption > div {
        font-size: 1.125rem;
        line-height: 1.333;
        font-weight: 400;
        padding-top: 0.35044rem;
        margin-top: 0;
        margin-bottom: 1.14956rem; } }
    @media screen and (min-width: 600px) {
      .q-datepicker .DayPicker-Caption > div {
        font-size: 1.25rem;
        line-height: 1.3;
        font-weight: 400;
        padding-top: 0.36875rem;
        margin-top: 0;
        margin-bottom: 1.63125rem; } }
    @media screen and (min-width: 1200px) {
      .q-datepicker .DayPicker-Caption > div {
        font-size: 1.25rem;
        line-height: 1.3;
        font-weight: 400;
        padding-top: 0.36875rem;
        margin-top: 0;
        margin-bottom: 1.63125rem; } }
  .q-datepicker .DayPicker-Weekdays,
  .q-datepicker .DayPicker-Body {
    display: table-row-group; }
  .q-datepicker .DayPicker-WeekdaysRow,
  .q-datepicker .DayPicker-Week {
    display: table-row; }
  .q-datepicker .DayPicker-Weekday,
  .q-datepicker .DayPicker-Day {
    display: table-cell;
    text-align: center;
    vertical-align: middle; }
  .q-datepicker .DayPicker-Weekday > abbr[title] {
    text-decoration: none;
    border-bottom: none;
    color: #838c91;
    color: var(--datepicker-label-colour); }
    @media screen and (max-width: 599px) {
      .q-datepicker .DayPicker-Weekday > abbr[title] {
        font-size: 0.875rem;
        line-height: 1.428;
        letter-spacing: 0.01rem;
        font-weight: 400;
        padding-top: 0.31412rem;
        margin-top: 0;
        margin-bottom: 0.93588rem; } }
    @media screen and (min-width: 600px) {
      .q-datepicker .DayPicker-Weekday > abbr[title] {
        font-size: 0.875rem;
        line-height: 1.428;
        letter-spacing: 0.01rem;
        font-weight: 400;
        padding-top: 0.31412rem;
        margin-top: 0;
        margin-bottom: 0.93588rem; } }
    @media screen and (min-width: 1200px) {
      .q-datepicker .DayPicker-Weekday > abbr[title] {
        font-size: 0.875rem;
        line-height: 1.428;
        letter-spacing: 0.01rem;
        font-weight: 400;
        padding-top: 0.31412rem;
        margin-top: 0;
        margin-bottom: 0.93588rem; } }
  .q-datepicker .DayPicker-Day {
    padding: 8px;
    padding: var(--space-s); }
    .q-datepicker .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
      cursor: pointer; }
      .q-datepicker .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside):hover, .q-datepicker .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside):focus {
        background: #e8edf5;
        background: var(--datepicker-day-hover-background);
        border-radius: 3px;
        border-radius: var(--border-radius);
        color: #333333;
        color: var(--datepicker-day-hover-colour); }
  .q-datepicker .DayPicker-Day--before {
    border-top-left-radius: 3px;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: 3px;
    border-bottom-left-radius: var(--border-radius); }
  .q-datepicker .DayPicker-Day--after {
    border-top-right-radius: 3px;
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: 3px;
    border-bottom-right-radius: var(--border-radius); }
  .q-datepicker .DayPicker-Day--selected:not(.DayPicker-Day--disabled) {
    color: #ffffff;
    color: var(--datepicker-day-selected-colour);
    background: #3f69ae;
    background: var(--datepicker-day-selected-background); }
  .q-datepicker .DayPicker-Day--today {
    font-weight: 700;
    font-weight: var(--font-weight-bold); }
  .q-datepicker .DayPicker-Day--outside {
    color: #838c91;
    color: var(--datepicker-label-colour); }
  .q-datepicker .DayPicker-Day--disabled {
    color: #b5b5b5;
    color: var(--datepicker-day-disabled-colour);
    cursor: default; }
    .q-datepicker .DayPicker-Day--disabled.DayPicker-Day--selected {
      background: #efefef;
      background: var(--datepicker-day-selected-background-disabled); }
  .q-datepicker .DayPicker-NavBar {
    position: relative; }
  .q-datepicker .DayPicker-NavButton {
    width: 32px;
    width: var(--datepicker-nav-button-width);
    height: 32px;
    height: var(--datepicker-nav-button-width);
    display: block;
    position: absolute;
    top: 4px;
    top: var(--grid-unit);
    right: 0;
    cursor: pointer;
    border-radius: 3px;
    border-radius: var(--border-radius); }
  .q-datepicker .DayPicker-NavButton--prev {
    background: url("data:image/svg+xml,%3Csvg width='8' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.4 1.4L6 0 0 6l6 6 1.4-1.4L2.8 6l4.6-4.6z' fill='%239E9E9E'/%3E%3C/svg%3E") center center no-repeat;
    margin-right: 32px;
    margin-right: var(--datepicker-nav-button-width); }
    .q-datepicker .DayPicker-NavButton--prev:hover, .q-datepicker .DayPicker-NavButton--prev:focus {
      background: url("data:image/svg+xml,%3Csvg width='8' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.4 1.4L6 0 0 6l6 6 1.4-1.4L2.8 6l4.6-4.6z' fill='%238c8c8c'/%3E%3C/svg%3E") center center no-repeat; }
  .q-datepicker .DayPicker-NavButton--next {
    background: url("data:image/svg+xml,%3Csvg width='8' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.4 0L0 1.4 4.6 6 0 10.6 1.4 12l6-6-6-6z' fill='%239E9E9E'/%3E%3C/svg%3E") center center no-repeat; }
    .q-datepicker .DayPicker-NavButton--next:hover, .q-datepicker .DayPicker-NavButton--next:focus {
      background: url("data:image/svg+xml,%3Csvg width='8' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.4 0L0 1.4 4.6 6 0 10.6 1.4 12l6-6-6-6z' fill='%238c8c8c'/%3E%3C/svg%3E") center center no-repeat; }
  .q-datepicker .DayPicker-NavButton:focus,
  .q-datepicker .DayPicker-wrapper:focus,
  .q-datepicker .DayPicker-Day:focus {
    outline: none;
    box-shadow: 0 0 0 2px #8baaff;
    box-shadow: 0 0 0 var(--datepicker-focus-width) var(--datepicker-focus-colour); }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-footer-contain, .q-page-contain {
  margin: 0 auto;
  min-width: 300px;
  max-width: 1328px; }
  @media screen and (max-width: 599px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 8px; } }
  @media screen and (min-width: 600px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 64px; } }

:root {
  --dialog-max-width: 1400px; }

.q-dialog-wrapper .q-modal-contain {
  position: relative;
  height: 100vh; }

.q-dialog {
  background-color: #ffffff;
  background-color: var(--colour-text-inverse);
  box-sizing: border-box;
  left: 50%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  padding: var(--space-m);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%); }
  @media screen and (max-width: 599px) {
    .q-dialog {
      height: 100vh;
      width: 100vw; } }
  @media screen and (min-width: 600px) {
    .q-dialog {
      max-height: 80vh;
      max-width: 1400px;
      max-width: var(--dialog-max-width);
      width: 40vw; } }

@media screen and (min-width: 600px) {
  .q-dialog-xxs {
    width: 10vw; }
  .q-dialog-xs {
    width: 20vw; }
  .q-dialog-s {
    width: 30vw; }
  .q-dialog-l {
    width: 50vw; }
  .q-dialog-xl {
    width: 60vw; }
  .q-dialog-xxl {
    width: 70vw; } }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-footer-contain, .q-page-contain {
  margin: 0 auto;
  min-width: 300px;
  max-width: 1328px; }
  @media screen and (max-width: 599px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 8px; } }
  @media screen and (min-width: 600px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 64px; } }

/*
text() sets the type scale and aligns to the basline grid
text-inline() just sets the type scale, leaving alignment for a block-level element
(see https://medium.com/@razvanonofrei/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b for background)
*/
@media screen and (max-width: 599px) {
  [data-qtheme] h1 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h1 {
    font-size: 2.25rem;
    line-height: 1.222;
    font-weight: 300;
    padding-top: 0.576rem;
    margin-top: 0;
    margin-bottom: 1.424rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h1 {
    font-size: 2.625rem;
    line-height: 1.19;
    font-weight: 300;
    padding-top: 0.63rem;
    margin-top: 0;
    margin-bottom: 1.37rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h2 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h2 {
    font-size: 2rem;
    line-height: 1.25;
    font-weight: 300;
    padding-top: 0.54rem;
    margin-top: 0;
    margin-bottom: 1.46rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h2 {
    font-size: 2.25rem;
    line-height: 1.222;
    font-weight: 300;
    padding-top: 0.576rem;
    margin-top: 0;
    margin-bottom: 1.424rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h3 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h3 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h3 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h4 {
    font-size: 1.125rem;
    line-height: 1.333;
    font-weight: 400;
    padding-top: 0.35044rem;
    margin-top: 0;
    margin-bottom: 1.14956rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h4 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h4 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h5 {
    font-size: 1.125rem;
    line-height: 1.333;
    font-weight: 400;
    padding-top: 0.35044rem;
    margin-top: 0;
    margin-bottom: 1.14956rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h5 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 400;
    padding-top: 0.36875rem;
    margin-top: 0;
    margin-bottom: 1.63125rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h5 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 400;
    padding-top: 0.36875rem;
    margin-top: 0;
    margin-bottom: 1.63125rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

[data-qtheme] strong {
  font-weight: 500; }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-footer-contain, .q-page-contain {
  margin: 0 auto;
  min-width: 300px;
  max-width: 1328px; }
  @media screen and (max-width: 599px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 8px; } }
  @media screen and (min-width: 600px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 64px; } }

.q-footer {
  background: #000000;
  background: var(--colour-chrome-header);
  color: #ffffff;
  color: var(--colour-text-inverse);
  border-bottom: 16px solid #3f69ae;
  border-bottom: var(--space-m) solid var(--colour-primary); }
  @media screen and (max-width: 599px) {
    .q-footer {
      font-size: 0.875rem;
      line-height: 1.428;
      letter-spacing: 0.01rem;
      font-weight: 400; } }
  @media screen and (min-width: 600px) {
    .q-footer {
      font-size: 0.875rem;
      line-height: 1.428;
      letter-spacing: 0.01rem;
      font-weight: 400; } }
  @media screen and (min-width: 1200px) {
    .q-footer {
      font-size: 0.875rem;
      line-height: 1.428;
      letter-spacing: 0.01rem;
      font-weight: 400; } }
  @media screen and (max-width: 599px) {
    .q-footer {
      padding: 32px 0;
      padding: var(--space-l) 0; } }
  @media screen and (min-width: 600px) {
    .q-footer {
      padding: 64px 0;
      padding: var(--space-xl) 0; } }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-footer-contain, .q-page-contain {
  margin: 0 auto;
  min-width: 300px;
  max-width: 1328px; }
  @media screen and (max-width: 599px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 8px; } }
  @media screen and (min-width: 600px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 64px; } }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-footer-contain, .q-page-contain {
  margin: 0 auto;
  min-width: 300px;
  max-width: 1328px; }
  @media screen and (max-width: 599px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 8px; } }
  @media screen and (min-width: 600px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 64px; } }

/*
text() sets the type scale and aligns to the basline grid
text-inline() just sets the type scale, leaving alignment for a block-level element
(see https://medium.com/@razvanonofrei/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b for background)
*/
@media screen and (max-width: 599px) {
  [data-qtheme] h1 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h1 {
    font-size: 2.25rem;
    line-height: 1.222;
    font-weight: 300;
    padding-top: 0.576rem;
    margin-top: 0;
    margin-bottom: 1.424rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h1 {
    font-size: 2.625rem;
    line-height: 1.19;
    font-weight: 300;
    padding-top: 0.63rem;
    margin-top: 0;
    margin-bottom: 1.37rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h2 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h2 {
    font-size: 2rem;
    line-height: 1.25;
    font-weight: 300;
    padding-top: 0.54rem;
    margin-top: 0;
    margin-bottom: 1.46rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h2 {
    font-size: 2.25rem;
    line-height: 1.222;
    font-weight: 300;
    padding-top: 0.576rem;
    margin-top: 0;
    margin-bottom: 1.424rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h3 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h3 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h3 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h4 {
    font-size: 1.125rem;
    line-height: 1.333;
    font-weight: 400;
    padding-top: 0.35044rem;
    margin-top: 0;
    margin-bottom: 1.14956rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h4 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h4 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h5 {
    font-size: 1.125rem;
    line-height: 1.333;
    font-weight: 400;
    padding-top: 0.35044rem;
    margin-top: 0;
    margin-bottom: 1.14956rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h5 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 400;
    padding-top: 0.36875rem;
    margin-top: 0;
    margin-bottom: 1.63125rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h5 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 400;
    padding-top: 0.36875rem;
    margin-top: 0;
    margin-bottom: 1.63125rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

[data-qtheme] strong {
  font-weight: 500; }

:root {
  --form-input-bg-colour:           #e0e0e0;
  --form-input-border:              2px solid #e0e0e0;
  --form-input-border-width:        2px;
  --form-input-border-focus:        2px solid #8baaff;
  --form-input-bg-disabled:         #efefef;
  --form-label-colour-disabled:     #a7a7a7;
  --form-input-border-disabled:     2px solid #efefef;
  --form-input-border-error:        2px solid #dd4b39;
  --form-input-height:              20px;
  --form-input-width-xxs:           10%;
  --form-input-width-xs:            20%;
  --form-input-width-s:             30%;
  --form-input-width-m:             40%;
  --form-input-width-l:             50%;
  --form-input-width-xl:            60%;
  --form-input-width-xxl:           70%;
  --form-input-width-fill:          100%;
  --form-label-width-xxs:           10%;
  --form-label-width-xs:            20%;
  --form-label-width-s:             30%;
  --form-label-width-m:             40%;
  --form-label-width-l:             50%;
  --form-label-width-xl:            60%;
  --form-label-width-xxl:           70%;
  --form-textarea-height-xxs:       40px;
  --form-textarea-height-xs:        60px;
  --form-textarea-height-s:         80px;
  --form-textarea-height-m:         100px;
  --form-textarea-height-l:         120px;
  --form-textarea-height-xl:        160px;
  --form-textarea-height-xxl:       200px; }

.q-form-label {
  color: #333333;
  color: var(--colour-text);
  display: block;
  font-size: 14px;
  font-weight: 700;
  font-weight: var(--font-weight-bold);
  padding: 4px 0;
  padding: var(--space-xs) 0; }

.q-form-label-required {
  text-decoration: none; }

.q-form-block + .q-form-block {
  margin-top: 40px;
  margin-top: calc(var(--space-l) * 1.25); }

.q-form-block + .q-form-block:last-of-type {
  margin-bottom: 16px;
  margin-bottom: var(--space-m); }

.q-form fieldset {
  border: 0;
  padding: 0;
  margin-bottom: 32px;
  margin-bottom: var(--space-l); }

.q-form fieldset > legend {
  margin: 0;
  padding: 0; }
  .q-form fieldset > legend > span {
    display: block; }
    @media screen and (max-width: 599px) {
      .q-form fieldset > legend > span {
        font-size: 1.5rem;
        line-height: 1.25;
        font-weight: 400;
        padding-top: 0.405rem;
        margin-top: 0;
        margin-bottom: 1.595rem; } }
    @media screen and (min-width: 600px) {
      .q-form fieldset > legend > span {
        font-size: 1.5rem;
        line-height: 1.25;
        font-weight: 400;
        padding-top: 0.405rem;
        margin-top: 0;
        margin-bottom: 1.595rem; } }
    @media screen and (min-width: 1200px) {
      .q-form fieldset > legend > span {
        font-size: 1.75rem;
        line-height: 1.285;
        font-weight: 400;
        padding-top: 0.50312rem;
        margin-top: 0;
        margin-bottom: 1.49688rem; } }

.q-form-input input:invalid,
.q-form-input select:invalid,
.q-form-input textarea:invalid {
  box-shadow: none; }

.q-form-input ::-webkit-input-placeholder {
  color: #838c91;
  color: var(--colour-text-secondary); }

.q-form-input ::-moz-placeholder {
  color: #838c91;
  color: var(--colour-text-secondary); }

.q-form-input :-ms-input-placeholder {
  color: #838c91;
  color: var(--colour-text-secondary); }

.q-form-input :-moz-placeholder {
  color: #838c91;
  color: var(--colour-text-secondary); }

.q-form-input ::placeholder {
  color: #838c91;
  color: var(--colour-text-secondary); }

.q-form-input input[type="search"]::-webkit-search-cancel-button {
  display: none; }

.q-form-input {
  display: flex; }
  @media screen and (max-width: 599px) {
    .q-form-input {
      font-size: 1rem;
      line-height: 1.25;
      font-weight: 400; } }
  @media screen and (min-width: 600px) {
    .q-form-input {
      font-size: 1rem;
      line-height: 1.25;
      font-weight: 400; } }
  @media screen and (min-width: 1200px) {
    .q-form-input {
      font-size: 1rem;
      line-height: 1.25;
      font-weight: 400; } }
  .q-form-input input,
  .q-form-input textarea,
  .q-form-input select,
  .q-form-input button,
  .q-form-input .q-form-input-addon {
    background-color: #e0e0e0;
    background-color: var(--form-input-bg-colour);
    display: flex;
    align-items: center; }
  .q-form-input .q-form-input-addon .q-text {
    font-family: "Roboto", sans-serif;
    margin: 0 8px;
    margin: 0 var(--space-s); }
    @media screen and (max-width: 599px) {
      .q-form-input .q-form-input-addon .q-text {
        font-size: 1rem;
        line-height: 1.25;
        font-weight: 400; } }
    @media screen and (min-width: 600px) {
      .q-form-input .q-form-input-addon .q-text {
        font-size: 1rem;
        line-height: 1.25;
        font-weight: 400; } }
    @media screen and (min-width: 1200px) {
      .q-form-input .q-form-input-addon .q-text {
        font-size: 1rem;
        line-height: 1.25;
        font-weight: 400; } }
  .q-form-input .q-form-input-addon-icon {
    display: flex;
    align-items: center; }
  .q-form-input :first-child {
    border-bottom-left-radius: 3px;
    border-bottom-left-radius: var(--border-radius);
    border-top-left-radius: 3px;
    border-top-left-radius: var(--border-radius); }
  .q-form-input :last-child {
    border-bottom-right-radius: 3px;
    border-bottom-right-radius: var(--border-radius);
    border-top-right-radius: 3px;
    border-top-right-radius: var(--border-radius); }
  .q-form-input input[type="color"],
  .q-form-input input[type="email"],
  .q-form-input input[type="number"],
  .q-form-input input[type="text"] {
    height: 20px;
    height: var(--form-input-height); }
  .q-form-input input,
  .q-form-input select,
  .q-form-input textarea {
    background: #e0e0e0;
    background: var(--form-input-bg-colour);
    border: 2px solid #e0e0e0;
    border: var(--form-input-border);
    flex: 1;
    padding: 8px 16px;
    padding: var(--space-s) var(--space-m);
    width: 100%; }
  .q-form-input select[multiple] {
    padding: 0;
    width: 100%; }
  .q-form-input option {
    padding: 8px 16px;
    padding: var(--space-s) var(--space-m); }
  .q-form-input :focus {
    border: 2px solid #8baaff;
    border: var(--form-input-border-focus); }
  .q-form-input button {
    border: 2px solid #e0e0e0;
    border: var(--form-input-border);
    background-color: inherit; }
  .q-form-input input[type="password"] {
    padding-top: 10px;
    padding-top: calc(var(--space-s) + var(--form-input-border-width));
    padding-bottom: 6px;
    padding-bottom: calc(var(--space-s) - var(--form-input-border-width));
    letter-spacing: 0.3rem; }
  .q-form-input input[type="color"] {
    padding: 3px 16px;
    padding: calc(var(--space-s) - var(--form-input-height) * 0.25) var(--space-m);
    height: 40px;
    height: calc(var(--form-input-height) * 2); }
  .q-form-input input[type="password"] {
    padding: 10px;
    padding: calc(var(--space-s) + var(--form-input-border-width));
    padding-bottom: 6px;
    padding-bottom: calc(var(--space-s) - var(--form-input-border-width));
    letter-spacing: 0.3rem; }
  .q-form-input[class*="q-form-input-width"] input {
    min-width: 0; }
  .q-form-input.q-form-input-width-xxs {
    width: 10%;
    width: var(--form-input-width-xxs); }
  .q-form-input.q-form-input-width-xs {
    width: 20%;
    width: var(--form-input-width-xs); }
  .q-form-input.q-form-input-width-s {
    width: 30%;
    width: var(--form-input-width-s); }
  .q-form-input.q-form-input-width-m {
    width: 40%;
    width: var(--form-input-width-m); }
  .q-form-input.q-form-input-width-l {
    width: 50%;
    width: var(--form-input-width-l); }
  .q-form-input.q-form-input-width-xl {
    width: 60%;
    width: var(--form-input-width-xl); }
  .q-form-input.q-form-input-width-xxl {
    width: 70%;
    width: var(--form-input-width-xxl); }
  .q-form-input.q-form-input-height-xxs textarea {
    height: 40px;
    height: var(--form-textarea-height-xxs); }
  .q-form-input.q-form-input-height-xs textarea {
    height: 60px;
    height: var(--form-textarea-height-xs); }
  .q-form-input.q-form-input-height-s textarea {
    height: 80px;
    height: var(--form-textarea-height-s); }
  .q-form-input.q-form-input-height-m textarea {
    height: 100px;
    height: var(--form-textarea-height-m); }
  .q-form-input.q-form-input-height-l textarea {
    height: 120px;
    height: var(--form-textarea-height-l); }
  .q-form-input.q-form-input-height-xl textarea {
    height: 160px;
    height: var(--form-textarea-height-xl); }
  .q-form-input.q-form-input-height-xxl textarea {
    height: 200px;
    height: var(--form-textarea-height-xxl); }

.q-form-block-disabled .q-form-label,
.q-form-block-disabled .q-form-input-info {
  color: #a7a7a7;
  color: var(--form-label-colour-disabled); }

.q-form-input input[disabled],
.q-form-input select[disabled],
.q-form-input textarea[disabled] {
  background: #efefef;
  background: var(--form-input-bg-disabled);
  border: 2px solid #efefef;
  border: var(--form-input-border-disabled);
  cursor: default; }
  .q-form-input input[disabled]::placeholder,
  .q-form-input select[disabled]::placeholder,
  .q-form-input textarea[disabled]::placeholder {
    color: #a7a7a7;
    color: var(--form-label-colour-disabled); }

.q-form-block-error .q-form-input input,
.q-form-block-error .q-form-input select,
.q-form-block-error .q-form-input textarea,
.q-form-block-error .q-form-input button,
.q-form-block-error .q-form-input .q-form-input-addon {
  border-bottom: 2px solid #dd4b39;
  border-bottom: var(--form-input-border-error);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

.q-form-block-error input:focus,
.q-form-block-error select:focus,
.q-form-block-error textarea:focus {
  border: 2px solid #dd4b39;
  border: var(--form-input-border-error); }

.q-form-block-error button:last-child {
  border-right: 2px solid #e0e0e0;
  border-right: var(--form-input-border); }

.q-form-block-error .q-form-input-status {
  font-weight: bold;
  color: #dd4b39;
  color: var(--colour-bad); }

.q-form-input-status,
.q-form-input-info {
  padding-top: 8px;
  padding-top: var(--space-s); }
  @media screen and (max-width: 599px) {
    .q-form-input-status,
    .q-form-input-info {
      font-size: 0.75rem;
      line-height: 1.333;
      letter-spacing: 0.02rem;
      font-weight: 400; } }
  @media screen and (min-width: 600px) {
    .q-form-input-status,
    .q-form-input-info {
      font-size: 0.75rem;
      line-height: 1.333;
      letter-spacing: 0.02rem;
      font-weight: 400; } }
  @media screen and (min-width: 1200px) {
    .q-form-input-status,
    .q-form-input-info {
      font-size: 0.75rem;
      line-height: 1.333;
      letter-spacing: 0.02rem;
      font-weight: 400; } }
  .q-form-input-status > *:focus, .q-form-input-status:focus,
  .q-form-input-info > *:focus,
  .q-form-input-info:focus {
    outline: none; }
  @media screen and (max-width: 599px) {
    .q-form-input-status > .q-text,
    .q-form-input-info > .q-text {
      font-size: 0.75rem;
      line-height: 1.333;
      letter-spacing: 0.02rem;
      font-weight: 400; } }
  @media screen and (min-width: 600px) {
    .q-form-input-status > .q-text,
    .q-form-input-info > .q-text {
      font-size: 0.75rem;
      line-height: 1.333;
      letter-spacing: 0.02rem;
      font-weight: 400; } }
  @media screen and (min-width: 1200px) {
    .q-form-input-status > .q-text,
    .q-form-input-info > .q-text {
      font-size: 0.75rem;
      line-height: 1.333;
      letter-spacing: 0.02rem;
      font-weight: 400; } }

@media screen and (min-width: 600px) {
  .q-form-input.q-form-input-width-xxs {
    width: 10%;
    width: var(--form-input-width-xxs); }
  .q-form-input.q-form-input-width-xs {
    width: 20%;
    width: var(--form-input-width-xs); }
  .q-form-input.q-form-input-width-s {
    width: 30%;
    width: var(--form-input-width-s); }
  .q-form-input.q-form-input-width-m {
    width: 40%;
    width: var(--form-input-width-m); }
  .q-form-input.q-form-input-width-l {
    width: 50%;
    width: var(--form-input-width-l); }
  .q-form-input.q-form-input-width-xl {
    width: 60%;
    width: var(--form-input-width-xl); }
  .q-form-input.q-form-input-width-xxl {
    width: 70%;
    width: var(--form-input-width-xxl); }
  .q-form-input.q-form-input-height-xxs textarea {
    height: 40px;
    height: var(--form-textarea-height-xxs); }
  .q-form-input.q-form-input-height-xs textarea {
    height: 60px;
    height: var(--form-textarea-height-xs); }
  .q-form-input.q-form-input-height-s textarea {
    height: 80px;
    height: var(--form-textarea-height-s); }
  .q-form-input.q-form-input-height-m textarea {
    height: 100px;
    height: var(--form-textarea-height-m); }
  .q-form-input.q-form-input-height-l textarea {
    height: 120px;
    height: var(--form-textarea-height-l); }
  .q-form-input.q-form-input-height-xl textarea {
    height: 160px;
    height: var(--form-textarea-height-xl); }
  .q-form-input.q-form-input-height-xxl textarea {
    height: 200px;
    height: var(--form-textarea-height-xxl); }
  .q-form-leftlabel .q-form-block,
  .q-form-block-leftlabel {
    display: flex; }
    .q-form-leftlabel .q-form-block .q-form-label,
    .q-form-block-leftlabel .q-form-label {
      width: 20%;
      font-size: 16px;
      padding-top: 11px;
      padding-right: 16px;
      padding-right: var(--space-m); }
      .q-form-leftlabel .q-form-block .q-form-label.q-form-label-width-xxs,
      .q-form-block-leftlabel .q-form-label.q-form-label-width-xxs {
        width: 10%;
        width: var(--form-label-width-xxs); }
      .q-form-leftlabel .q-form-block .q-form-label.q-form-label-width-xs,
      .q-form-block-leftlabel .q-form-label.q-form-label-width-xs {
        width: 20%;
        width: var(--form-label-width-xs); }
      .q-form-leftlabel .q-form-block .q-form-label.q-form-label-width-s,
      .q-form-block-leftlabel .q-form-label.q-form-label-width-s {
        width: 30%;
        width: var(--form-label-width-s); }
      .q-form-leftlabel .q-form-block .q-form-label.q-form-label-width-m,
      .q-form-block-leftlabel .q-form-label.q-form-label-width-m {
        width: 40%;
        width: var(--form-label-width-m); }
      .q-form-leftlabel .q-form-block .q-form-label.q-form-label-width-l,
      .q-form-block-leftlabel .q-form-label.q-form-label-width-l {
        width: 50%;
        width: var(--form-label-width-l); }
      .q-form-leftlabel .q-form-block .q-form-label.q-form-label-width-xl,
      .q-form-block-leftlabel .q-form-label.q-form-label-width-xl {
        width: 60%;
        width: var(--form-label-width-xl); }
      .q-form-leftlabel .q-form-block .q-form-label.q-form-label-width-xxl,
      .q-form-block-leftlabel .q-form-label.q-form-label-width-xxl {
        width: 70%;
        width: var(--form-label-width-xxl); }
    .q-form-leftlabel .q-form-block .q-form-input-set,
    .q-form-block-leftlabel .q-form-input-set {
      width: 80%; }
    .q-form-leftlabel .q-form-block .q-form-label-width-xxs + .q-form-input-set,
    .q-form-leftlabel .q-form-block .q-form-label-width-xxs + .q-form-input:last-child,
    .q-form-leftlabel .q-form-block .q-form-label-width-xs + .q-form-input-set,
    .q-form-leftlabel .q-form-block .q-form-label-width-xs + .q-form-input:last-child,
    .q-form-leftlabel .q-form-block .q-form-label-width-s + .q-form-input-set,
    .q-form-leftlabel .q-form-block .q-form-label-width-s + .q-form-input:last-child,
    .q-form-leftlabel .q-form-block .q-form-label-width-m + .q-form-input-set,
    .q-form-leftlabel .q-form-block .q-form-label-width-m + .q-form-input:last-child,
    .q-form-leftlabel .q-form-block .q-form-label-width-l + .q-form-input-set,
    .q-form-leftlabel .q-form-block .q-form-label-width-l + .q-form-input:last-child,
    .q-form-leftlabel .q-form-block .q-form-label-width-xl + .q-form-input-set,
    .q-form-leftlabel .q-form-block .q-form-label-width-xl + .q-form-input:last-child,
    .q-form-leftlabel .q-form-block .q-form-label-width-xxl + .q-form-input-set,
    .q-form-leftlabel .q-form-block .q-form-label-width-xxl + .q-form-input:last-child,
    .q-form-block-leftlabel .q-form-label-width-xxs + .q-form-input-set,
    .q-form-block-leftlabel .q-form-label-width-xxs + .q-form-input:last-child,
    .q-form-block-leftlabel .q-form-label-width-xs + .q-form-input-set,
    .q-form-block-leftlabel .q-form-label-width-xs + .q-form-input:last-child,
    .q-form-block-leftlabel .q-form-label-width-s + .q-form-input-set,
    .q-form-block-leftlabel .q-form-label-width-s + .q-form-input:last-child,
    .q-form-block-leftlabel .q-form-label-width-m + .q-form-input-set,
    .q-form-block-leftlabel .q-form-label-width-m + .q-form-input:last-child,
    .q-form-block-leftlabel .q-form-label-width-l + .q-form-input-set,
    .q-form-block-leftlabel .q-form-label-width-l + .q-form-input:last-child,
    .q-form-block-leftlabel .q-form-label-width-xl + .q-form-input-set,
    .q-form-block-leftlabel .q-form-label-width-xl + .q-form-input:last-child,
    .q-form-block-leftlabel .q-form-label-width-xxl + .q-form-input-set,
    .q-form-block-leftlabel .q-form-label-width-xxl + .q-form-input:last-child {
      flex-grow: 1;
      flex-shrink: 0;
      min-width: 0;
      width: auto; } }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-header {
  height: 48px;
  height: calc(var(--grid-unit) * 12);
  background: #000000;
  background: var(--colour-chrome-header);
  color: #ffffff;
  color: var(--colour-text-inverse);
  display: flex;
  align-items: center;
  padding: 0 8px;
  padding: 0 var(--space-s); }
  @media screen and (min-width: 1000px) {
    .q-header {
      padding-left: 32px;
      padding-left: var(--space-l);
      padding-right: 32px;
      padding-right: var(--space-l); } }

.q-header-logo {
  display: block;
  height: 24px;
  height: calc(var(--grid-unit) * 6);
  flex-basis: 0;
  flex-shrink: 0; }

.q-header-actions {
  flex-grow: 1;
  flex-basis: 0;
  justify-content: flex-end;
  align-items: center;
  display: flex; }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-footer-contain, .q-page-contain {
  margin: 0 auto;
  min-width: 300px;
  max-width: 1328px; }
  @media screen and (max-width: 599px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 8px; } }
  @media screen and (min-width: 600px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 64px; } }

/*
text() sets the type scale and aligns to the basline grid
text-inline() just sets the type scale, leaving alignment for a block-level element
(see https://medium.com/@razvanonofrei/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b for background)
*/
@media screen and (max-width: 599px) {
  [data-qtheme] h1 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h1 {
    font-size: 2.25rem;
    line-height: 1.222;
    font-weight: 300;
    padding-top: 0.576rem;
    margin-top: 0;
    margin-bottom: 1.424rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h1 {
    font-size: 2.625rem;
    line-height: 1.19;
    font-weight: 300;
    padding-top: 0.63rem;
    margin-top: 0;
    margin-bottom: 1.37rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h2 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h2 {
    font-size: 2rem;
    line-height: 1.25;
    font-weight: 300;
    padding-top: 0.54rem;
    margin-top: 0;
    margin-bottom: 1.46rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h2 {
    font-size: 2.25rem;
    line-height: 1.222;
    font-weight: 300;
    padding-top: 0.576rem;
    margin-top: 0;
    margin-bottom: 1.424rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h3 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h3 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h3 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h4 {
    font-size: 1.125rem;
    line-height: 1.333;
    font-weight: 400;
    padding-top: 0.35044rem;
    margin-top: 0;
    margin-bottom: 1.14956rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h4 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h4 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h5 {
    font-size: 1.125rem;
    line-height: 1.333;
    font-weight: 400;
    padding-top: 0.35044rem;
    margin-top: 0;
    margin-bottom: 1.14956rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h5 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 400;
    padding-top: 0.36875rem;
    margin-top: 0;
    margin-bottom: 1.63125rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h5 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 400;
    padding-top: 0.36875rem;
    margin-top: 0;
    margin-bottom: 1.63125rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

[data-qtheme] strong {
  font-weight: 500; }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-footer-contain, .q-page-contain {
  margin: 0 auto;
  min-width: 300px;
  max-width: 1328px; }
  @media screen and (max-width: 599px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 8px; } }
  @media screen and (min-width: 600px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 64px; } }

/*
  Mapping
  Small = 32
  Medium = 40
  Large = 48
  XLarge = 56
*/
:root {
  --q-icon-color:             #838c91;
  --q-icon-color:             var(--colour-text-secondary);
  --q-icon-color-inverse:     #fff;
  --q-icon-badge-small:       14px;
  --q-icon-badge-small-text:  10px;
  --q-icon-badge-medium:      18px;
  --q-icon-badge-medium-text: 12px;
  --q-icon-badge-large:       18px;
  --q-icon-badge-large-text:  12px;
  --q-icon-badge-xlarge:      18px;
  --q-icon-badge-xlarge-text: 12px; }

.q-icon {
  color: #838c91;
  color: var(--q-icon-color);
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0;
  height: var(--q-icon-medium);
  height: var(--q-icon-medium);
  width: var(--q-icon-medium);
  width: var(--q-icon-medium); }
  .q-icon svg {
    fill: currentColor; }
  .q-icon.q-icon-inverse {
    color: #fff;
    color: var(--q-icon-color-inverse); }

button.q-icon {
  border: none;
  background: transparent;
  font-family: Roboto, sans-serif;
  font-family: var(--font-family); }
  button.q-icon :focus {
    outline: #8baaff;
    outline: var(--colour-focus); }

.q-icon-small {
  height: 32px;
  height: var(--icon-size-small);
  width: 32px;
  width: var(--icon-size-small);
  flex-grow: 0;
  flex-shrink: 0; }

.q-icon-medium {
  height: 40px;
  height: var(--icon-size-medium);
  width: 40px;
  width: var(--icon-size-medium);
  flex-grow: 0;
  flex-shrink: 0; }

.q-icon-large {
  height: 48px;
  height: var(--icon-size-large);
  width: 48px;
  width: var(--icon-size-large);
  flex-grow: 0;
  flex-shrink: 0; }

.q-icon-xlarge {
  height: 56px;
  height: var(--icon-size-xlarge);
  width: 56px;
  width: var(--icon-size-xlarge);
  flex-grow: 0;
  flex-shrink: 0; }

/*
Icon badge
Position tweaked so the badge appears over the notifications bell
without obscuring or melding with the bell's peak.
*/
.q-icon-badge {
  background: #dd4b39;
  background: var(--colour-badge);
  border-radius: 18px;
  border-radius: var(--q-icon-badge-medium);
  color: #ffffff;
  color: var(--colour-badge-inverse);
  font-size: 12px;
  font-size: var(--q-icon-badge-medium-text);
  font-weight: bold;
  width: 18px;
  width: var(--q-icon-badge-medium);
  height: 18px;
  height: var(--q-icon-badge-medium);
  line-height: 18px;
  line-height: var(--q-icon-badge-medium);
  position: absolute;
  top: 0;
  right: 0;
  text-align: center; }

.q-icon-small .q-icon-badge {
  border-radius: 14px;
  border-radius: var(--q-icon-badge-small);
  font-size: 10px;
  font-size: var(--q-icon-badge-small-text);
  width: 14px;
  width: var(--q-icon-badge-small);
  height: 14px;
  height: var(--q-icon-badge-small);
  line-height: 14px;
  line-height: var(--q-icon-badge-small); }

.q-icon-large .q-icon-badge {
  font-size: 12px;
  font-size: var(--q-icon-badge-large-text);
  top: 7%;
  right: 7%; }

.q-icon-xlarge .q-icon-badge {
  font-size: 12px;
  font-size: var(--q-icon-badge-xlarge-text);
  top: 12%;
  right: 12%; }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-footer-contain, .q-page-contain {
  margin: 0 auto;
  min-width: 300px;
  max-width: 1328px; }
  @media screen and (max-width: 599px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 8px; } }
  @media screen and (min-width: 600px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 64px; } }

@media screen and (min-width: 600px) {
  .q-group {
    box-sizing: border-box;
    display: flex;
    width: 100%; }
    .q-group .q-item {
      box-sizing: border-box;
      flex-grow: 1; }
    .q-group > .q-item-equal {
      flex-basis: 0;
      flex-grow: 1; }
    .q-group > .q-item-fit {
      flex: 1 1 auto;
      flex-grow: 0;
      width: auto; }
    .q-group > .q-item-fill {
      flex-grow: 1;
      width: auto; }
    .q-group .q-item-left {
      text-align: left; }
    .q-group .q-item-right {
      text-align: right; }
    .q-group .q-item-centre {
      text-align: center; }
    .q-group .q-item-nowrap {
      white-space: nowrap; }
    .q-group .q-item-top {
      align-self: flex-start; }
    .q-group .q-item-bottom {
      align-self: flex-end; }
    .q-group .q-item-middle {
      align-self: center; }
    .q-group .q-item-baseline {
      align-self: baseline; }
    .q-group.q-group-layout-equal > .q-item {
      flex-basis: 0;
      flex-grow: 1; }
    .q-group.q-group-gutters-xxsmall > .q-item:not(:first-child) {
      margin-left: 2px;
      margin-left: var(--space-xxs); }
    .q-group.q-group-gutters-xsmall > .q-item:not(:first-child) {
      margin-left: 4px;
      margin-left: var(--space-xs); }
    .q-group.q-group-gutters-small > .q-item:not(:first-child) {
      margin-left: 8px;
      margin-left: var(--space-s); }
    .q-group.q-group-gutters-default > .q-item:not(:first-child), .q-group.q-group-gutters-medium > .q-item:not(:first-child) {
      margin-left: 16px;
      margin-left: var(--space-m); }
    .q-group.q-group-gutters-large > .q-item:not(:first-child) {
      margin-left: 32px;
      margin-left: var(--space-l); }
    .q-group.q-group-gutters-xlarge > .q-item:not(:first-child) {
      margin-left: 64px;
      margin-left: var(--space-xl); }
    .q-group.q-group-gutters-xxlarge > .q-item:not(:first-child) {
      margin-left: 128px;
      margin-left: var(--space-xxl); }
  .q-layout-equal {
    display: flex;
    flex-wrap: wrap; }
    .q-layout-equal > * {
      flex-basis: 0;
      flex-grow: 1; }
  .q-layout-has-gutters > *:not(:first-child) {
    margin-left: 16px;
    margin-left: var(--space-m); } }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-footer-contain, .q-page-contain {
  margin: 0 auto;
  min-width: 300px;
  max-width: 1328px; }
  @media screen and (max-width: 599px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 8px; } }
  @media screen and (min-width: 600px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 64px; } }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-footer-contain, .q-page-contain {
  margin: 0 auto;
  min-width: 300px;
  max-width: 1328px; }
  @media screen and (max-width: 599px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 8px; } }
  @media screen and (min-width: 600px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 64px; } }

/*
text() sets the type scale and aligns to the basline grid
text-inline() just sets the type scale, leaving alignment for a block-level element
(see https://medium.com/@razvanonofrei/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b for background)
*/
@media screen and (max-width: 599px) {
  [data-qtheme] h1 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h1 {
    font-size: 2.25rem;
    line-height: 1.222;
    font-weight: 300;
    padding-top: 0.576rem;
    margin-top: 0;
    margin-bottom: 1.424rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h1 {
    font-size: 2.625rem;
    line-height: 1.19;
    font-weight: 300;
    padding-top: 0.63rem;
    margin-top: 0;
    margin-bottom: 1.37rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h2 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h2 {
    font-size: 2rem;
    line-height: 1.25;
    font-weight: 300;
    padding-top: 0.54rem;
    margin-top: 0;
    margin-bottom: 1.46rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h2 {
    font-size: 2.25rem;
    line-height: 1.222;
    font-weight: 300;
    padding-top: 0.576rem;
    margin-top: 0;
    margin-bottom: 1.424rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h3 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h3 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h3 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h4 {
    font-size: 1.125rem;
    line-height: 1.333;
    font-weight: 400;
    padding-top: 0.35044rem;
    margin-top: 0;
    margin-bottom: 1.14956rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h4 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h4 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h5 {
    font-size: 1.125rem;
    line-height: 1.333;
    font-weight: 400;
    padding-top: 0.35044rem;
    margin-top: 0;
    margin-bottom: 1.14956rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h5 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 400;
    padding-top: 0.36875rem;
    margin-top: 0;
    margin-bottom: 1.63125rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h5 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 400;
    padding-top: 0.36875rem;
    margin-top: 0;
    margin-bottom: 1.63125rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

[data-qtheme] strong {
  font-weight: 500; }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

:root {
  --menu-space-unit: 3px; }

.q-menu-section .q-menu-section-heading {
  display: block;
  font-weight: bold;
  padding: 16px 16px 8px 16px;
  padding: var(--space-m) var(--space-m) var(--space-s) var(--space-m);
  border-left: 3px solid transparent;
  border-left: var(--menu-space-unit) solid transparent;
  outline: none; }

.q-menu-section > ul {
  list-style-type: none;
  margin: 0;
  padding: 0; }

.q-menu-section + .q-menu-section {
  border-top: 1px solid #e0e0e0;
  border-top: 1px solid var(--colour-chrome-border);
  margin-top: 3px;
  margin-top: var(--menu-space-unit);
  padding-top: 3px;
  padding-top: var(--menu-space-unit); }

.q-menu-item.q-menu-item {
  list-style-type: none;
  margin: 0;
  padding: 0; }
  .q-menu-item.q-menu-item > a {
    display: flex;
    align-items: top;
    text-decoration: none; }
    .q-menu-item.q-menu-item > a:link, .q-menu-item.q-menu-item > a:visited {
      border-left: 3px solid transparent;
      border-left: var(--menu-space-unit) solid transparent;
      color: #333333;
      color: var(--colour-text); }
    .q-menu-item.q-menu-item > a:focus, .q-menu-item.q-menu-item > a:hover {
      background: #e8edf5;
      background: var(--colour-primary-background);
      border-left: 3px solid #1b3b84;
      border-left: var(--menu-space-unit) solid var(--colour-primary-dark);
      color: #333333;
      color: var(--colour-text);
      outline: none; }
    .q-menu-item.q-menu-item > a:active {
      background: #1b3b84;
      background: var(--colour-primary-dark);
      border-left: 3px solid #1b3b84;
      border-left: var(--menu-space-unit) solid var(--colour-primary-dark);
      color: #ffffff;
      color: var(--colour-text-inverse);
      outline: none; }
      .q-menu-item.q-menu-item > a:active .q-icon {
        color: #ffffff;
        color: var(--colour-text-inverse); }
        .q-menu-item.q-menu-item > a:active .q-icon svg {
          fill: #ffffff;
          fill: var(--colour-text-inverse); }
    .q-menu-item.q-menu-item > a .q-text {
      padding: 8px 16px;
      padding: var(--space-s) var(--space-m); }
      @media screen and (max-width: 599px) {
        .q-menu-item.q-menu-item > a .q-text {
          font-size: 0.875rem;
          line-height: 1.428;
          letter-spacing: 0.01rem;
          font-weight: 400; } }
      @media screen and (min-width: 600px) {
        .q-menu-item.q-menu-item > a .q-text {
          font-size: 0.875rem;
          line-height: 1.428;
          letter-spacing: 0.01rem;
          font-weight: 400; } }
      @media screen and (min-width: 1200px) {
        .q-menu-item.q-menu-item > a .q-text {
          font-size: 0.875rem;
          line-height: 1.428;
          letter-spacing: 0.01rem;
          font-weight: 400; } }
    .q-menu-item.q-menu-item > a .q-icon {
      padding-left: 8px;
      padding-left: var(--space-s); }
    .q-menu-item.q-menu-item > a .q-icon + .q-text {
      padding-left: 0;
      padding-top: 12px;
      padding-top: calc(var(--space-s) * 1.5); }

.q-module-menu {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px; }
  .q-module-menu > .q-module-header {
    border-bottom: 1px solid #e0e0e0;
    border-bottom: 1px solid var(--colour-chrome-border);
    padding: 16px;
    padding: var(--space-m); }
  .q-module-menu > .q-module-content {
    padding-bottom: 6px;
    padding-bottom: calc(var(--menu-space-unit) * 2); }
  .q-module-menu > .q-module-footer {
    border-top: 1px solid #e0e0e0;
    border-top: 1px solid var(--colour-chrome-border);
    padding: 16px;
    padding: var(--space-m); }
  .q-module-menu.q-module-menu-xxsmall {
    width: 10%; }
  .q-module-menu.q-module-menu-xsmall {
    width: 20%; }
  .q-module-menu.q-module-menu-small {
    width: 30%; }
  .q-module-menu.q-module-menu-medium {
    width: 40%; }
  .q-module-menu.q-module-menu-large {
    width: 50%; }
  .q-module-menu.q-module-menu-xlarge {
    width: 60%; }
  .q-module-menu.q-module-menu-xxlarge {
    width: 70%; }
  .q-module-menu.q-module-menu-fill {
    width: 100%; }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-footer-contain, .q-page-contain {
  margin: 0 auto;
  min-width: 300px;
  max-width: 1328px; }
  @media screen and (max-width: 599px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 8px; } }
  @media screen and (min-width: 600px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 64px; } }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-footer-contain, .q-page-contain {
  margin: 0 auto;
  min-width: 300px;
  max-width: 1328px; }
  @media screen and (max-width: 599px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 8px; } }
  @media screen and (min-width: 600px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 64px; } }

/*
text() sets the type scale and aligns to the basline grid
text-inline() just sets the type scale, leaving alignment for a block-level element
(see https://medium.com/@razvanonofrei/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b for background)
*/
@media screen and (max-width: 599px) {
  [data-qtheme] h1 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h1 {
    font-size: 2.25rem;
    line-height: 1.222;
    font-weight: 300;
    padding-top: 0.576rem;
    margin-top: 0;
    margin-bottom: 1.424rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h1 {
    font-size: 2.625rem;
    line-height: 1.19;
    font-weight: 300;
    padding-top: 0.63rem;
    margin-top: 0;
    margin-bottom: 1.37rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h2 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h2 {
    font-size: 2rem;
    line-height: 1.25;
    font-weight: 300;
    padding-top: 0.54rem;
    margin-top: 0;
    margin-bottom: 1.46rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h2 {
    font-size: 2.25rem;
    line-height: 1.222;
    font-weight: 300;
    padding-top: 0.576rem;
    margin-top: 0;
    margin-bottom: 1.424rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h3 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h3 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h3 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h4 {
    font-size: 1.125rem;
    line-height: 1.333;
    font-weight: 400;
    padding-top: 0.35044rem;
    margin-top: 0;
    margin-bottom: 1.14956rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h4 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h4 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h5 {
    font-size: 1.125rem;
    line-height: 1.333;
    font-weight: 400;
    padding-top: 0.35044rem;
    margin-top: 0;
    margin-bottom: 1.14956rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h5 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 400;
    padding-top: 0.36875rem;
    margin-top: 0;
    margin-bottom: 1.63125rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h5 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 400;
    padding-top: 0.36875rem;
    margin-top: 0;
    margin-bottom: 1.63125rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

[data-qtheme] strong {
  font-weight: 500; }

:root {
  --q-message-highlight-border-width: 8px;
  --q-message-border-width: 1px;
  --q-message-border-width-negative: -1px; }

.q-message {
  border-left: 8px solid #e0e0e0;
  border-left: var(--q-message-highlight-border-width) solid var(--colour-chrome-border);
  box-shadow: inset 0 1px 0 0 #e0e0e0, inset -1px 0 0 #e0e0e0, inset 0 -1px 0 0 #e0e0e0;
  box-shadow: inset 0 var(--q-message-border-width) 0 0 var(--colour-chrome-border), inset var(--q-message-border-width-negative) 0 0 var(--colour-chrome-border), inset 0 var(--q-message-border-width-negative) 0 0 var(--colour-chrome-border);
  padding: 16px;
  padding: var(--space-m);
  margin-bottom: 16px;
  margin-bottom: var(--space-m); }
  .q-message .q-module-header h1, .q-message .q-module-header h2, .q-message .q-module-header h3, .q-message .q-module-header h4, .q-message .q-module-header h5, .q-message .q-module-header h6 {
    margin: 0;
    padding: 0;
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    font-size: 16px; }
  .q-message .q-module-header,
  .q-message .q-module-content,
  .q-message .q-module-footer {
    margin: 0;
    padding: 0;
    margin-bottom: 8px;
    margin-bottom: var(--space-s); }
    .q-message .q-module-header:first-child,
    .q-message .q-module-content:first-child,
    .q-message .q-module-footer:first-child {
      padding-top: 0; }
    .q-message .q-module-header > :last-child, .q-message .q-module-header:last-child,
    .q-message .q-module-content > :last-child,
    .q-message .q-module-content:last-child,
    .q-message .q-module-footer > :last-child,
    .q-message .q-module-footer:last-child {
      margin-bottom: 0; }

.q-message-stack {
  margin-bottom: 16px;
  margin-bottom: var(--space-m); }

.q-message-stack .q-message {
  margin-bottom: 0; }

.q-message-notification {
  border-left-color: #3f69ae;
  border-left-color: var(--colour-notification); }

.q-message-warning {
  border-left-color: #eacB79;
  border-left-color: var(--colour-warning); }

.q-message-danger {
  border-left-color: #dd4b39;
  border-left-color: var(--colour-bad); }

.q-message-success {
  border-left-color: #3d9400;
  border-left-color: var(--colour-good); }

.q-module-message-stack {
  border: 1px solid #efefef;
  border: 1px solid var(--colour-chrome-background);
  border-radius: 3px;
  border-radius: var(--border-radius); }
  .q-module-message-stack .q-message-stack,
  .q-module-message-stack .q-message-stack .q-message {
    margin-bottom: 0;
    margin-top: 0; }
  .q-module-message-stack > .q-module-header,
  .q-module-message-stack > .q-module-footer {
    background: #e0e0e0;
    background: var(--colour-chrome-border);
    padding: 16px;
    padding: var(--space-m); }
    .q-module-message-stack > .q-module-header a:link, .q-module-message-stack > .q-module-header a:visited,
    .q-module-message-stack > .q-module-footer a:link,
    .q-module-message-stack > .q-module-footer a:visited {
      color: var(--text-primary);
      color: var(--text-primary);
      text-decoration: none; }
    .q-module-message-stack > .q-module-header a:focus, .q-module-message-stack > .q-module-header a:hover, .q-module-message-stack > .q-module-header a:active,
    .q-module-message-stack > .q-module-footer a:focus,
    .q-module-message-stack > .q-module-footer a:hover,
    .q-module-message-stack > .q-module-footer a:active {
      color: var(--text-primary-hover);
      color: var(--text-primary-hover);
      text-decoration: underline; }

.q-modal-scroll-disabled {
  overflow: hidden;
  max-width: 100%;
  max-height: 100%; }

.q-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000; }

.q-modal-background {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background: transparent;
  border: none;
  width: 100%;
  height: 100%;
  padding: 0;
  z-index: 1; }
  .q-modal-background:focus {
    outline: none; }

.q-modal-background-fade {
  background-color: rgba(0, 0, 0, 0.6); }

.q-modal-contain {
  position: absolute;
  z-index: 2; }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-footer-contain, .q-page-contain {
  margin: 0 auto;
  min-width: 300px;
  max-width: 1328px; }
  @media screen and (max-width: 599px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 8px; } }
  @media screen and (min-width: 600px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 64px; } }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-footer-contain, .q-page-contain {
  margin: 0 auto;
  min-width: 300px;
  max-width: 1328px; }
  @media screen and (max-width: 599px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 8px; } }
  @media screen and (min-width: 600px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 64px; } }

/*
text() sets the type scale and aligns to the basline grid
text-inline() just sets the type scale, leaving alignment for a block-level element
(see https://medium.com/@razvanonofrei/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b for background)
*/
@media screen and (max-width: 599px) {
  [data-qtheme] h1 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h1 {
    font-size: 2.25rem;
    line-height: 1.222;
    font-weight: 300;
    padding-top: 0.576rem;
    margin-top: 0;
    margin-bottom: 1.424rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h1 {
    font-size: 2.625rem;
    line-height: 1.19;
    font-weight: 300;
    padding-top: 0.63rem;
    margin-top: 0;
    margin-bottom: 1.37rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h2 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h2 {
    font-size: 2rem;
    line-height: 1.25;
    font-weight: 300;
    padding-top: 0.54rem;
    margin-top: 0;
    margin-bottom: 1.46rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h2 {
    font-size: 2.25rem;
    line-height: 1.222;
    font-weight: 300;
    padding-top: 0.576rem;
    margin-top: 0;
    margin-bottom: 1.424rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h3 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h3 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h3 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h4 {
    font-size: 1.125rem;
    line-height: 1.333;
    font-weight: 400;
    padding-top: 0.35044rem;
    margin-top: 0;
    margin-bottom: 1.14956rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h4 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h4 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h5 {
    font-size: 1.125rem;
    line-height: 1.333;
    font-weight: 400;
    padding-top: 0.35044rem;
    margin-top: 0;
    margin-bottom: 1.14956rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h5 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 400;
    padding-top: 0.36875rem;
    margin-top: 0;
    margin-bottom: 1.63125rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h5 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 400;
    padding-top: 0.36875rem;
    margin-top: 0;
    margin-bottom: 1.63125rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

[data-qtheme] strong {
  font-weight: 500; }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-module-header h1 {
  margin: 0; }
  @media screen and (max-width: 599px) {
    .q-module-header h1 {
      font-size: 1.75rem;
      line-height: 1.285;
      font-weight: 400; } }
  @media screen and (min-width: 600px) {
    .q-module-header h1 {
      font-size: 2.25rem;
      line-height: 1.222;
      font-weight: 300; } }
  @media screen and (min-width: 1200px) {
    .q-module-header h1 {
      font-size: 2.625rem;
      line-height: 1.19;
      font-weight: 300; } }

.q-module-header h2 {
  margin: 0; }
  @media screen and (max-width: 599px) {
    .q-module-header h2 {
      font-size: 1.75rem;
      line-height: 1.285;
      font-weight: 400; } }
  @media screen and (min-width: 600px) {
    .q-module-header h2 {
      font-size: 2rem;
      line-height: 1.25;
      font-weight: 300; } }
  @media screen and (min-width: 1200px) {
    .q-module-header h2 {
      font-size: 2.25rem;
      line-height: 1.222;
      font-weight: 300; } }

.q-module-header h3 {
  margin: 0; }
  @media screen and (max-width: 599px) {
    .q-module-header h3 {
      font-size: 1.5rem;
      line-height: 1.25;
      font-weight: 400; } }
  @media screen and (min-width: 600px) {
    .q-module-header h3 {
      font-size: 1.5rem;
      line-height: 1.25;
      font-weight: 400; } }
  @media screen and (min-width: 1200px) {
    .q-module-header h3 {
      font-size: 1.75rem;
      line-height: 1.285;
      font-weight: 400; } }

.q-module-header h4 {
  margin: 0; }
  @media screen and (max-width: 599px) {
    .q-module-header h4 {
      font-size: 1.125rem;
      line-height: 1.333;
      font-weight: 400; } }
  @media screen and (min-width: 600px) {
    .q-module-header h4 {
      font-size: 1.5rem;
      line-height: 1.25;
      font-weight: 400; } }
  @media screen and (min-width: 1200px) {
    .q-module-header h4 {
      font-size: 1.5rem;
      line-height: 1.25;
      font-weight: 400; } }

.q-module-header h5 {
  margin: 0; }
  @media screen and (max-width: 599px) {
    .q-module-header h5 {
      font-size: 1.125rem;
      line-height: 1.333;
      font-weight: 400; } }
  @media screen and (min-width: 600px) {
    .q-module-header h5 {
      font-size: 1.25rem;
      line-height: 1.3;
      font-weight: 400; } }
  @media screen and (min-width: 1200px) {
    .q-module-header h5 {
      font-size: 1.25rem;
      line-height: 1.3;
      font-weight: 400; } }

.q-module-header h6 {
  margin: 0; }
  @media screen and (max-width: 599px) {
    .q-module-header h6 {
      font-size: 1rem;
      line-height: 1.25;
      font-weight: 400; } }
  @media screen and (min-width: 600px) {
    .q-module-header h6 {
      font-size: 1rem;
      line-height: 1.25;
      font-weight: 400; } }
  @media screen and (min-width: 1200px) {
    .q-module-header h6 {
      font-size: 1rem;
      line-height: 1.25;
      font-weight: 400; } }

.q-module-content > div:last-child,
.q-module-content > p:last-child,
.q-module-footer > div:last-child,
.q-module-footer > p:last-child {
  margin-bottom: 0;
  padding-bottom: 0; }

.q-module {
  background-color: #ffffff;
  background-color: var(--colour-text-inverse); }

/*
Sequential: primary (1), secondary (2), tertiary (3), quaternary (4). Styled as a set, matching horizontal content spacing.
Supporting but non-sequential: ancillary (subordinate, but not numbered). Styled referencing the sequential set, with full-bleed spacing.
Since quaternary and ancillary are not visually bound at the sides, they run together when used in sequence (avoiding a double-thick border effect).
*/
.q-module-primary,
.q-module-secondary,
.q-module-tertiary,
.q-module-quaternary,
.q-module-ancillary {
  border-radius: 3px;
  border-radius: var(--border-radius);
  margin: 0 0 16px 0;
  margin: 0 0 var(--space-m) 0;
  padding: 16px;
  padding: var(--space-m); }
  .q-module-primary .q-module-header h1, .q-module-primary .q-module-header h2, .q-module-primary .q-module-header h3, .q-module-primary .q-module-header h4, .q-module-primary .q-module-header h5, .q-module-primary .q-module-header h6,
  .q-module-secondary .q-module-header h1,
  .q-module-secondary .q-module-header h2,
  .q-module-secondary .q-module-header h3,
  .q-module-secondary .q-module-header h4,
  .q-module-secondary .q-module-header h5,
  .q-module-secondary .q-module-header h6,
  .q-module-tertiary .q-module-header h1,
  .q-module-tertiary .q-module-header h2,
  .q-module-tertiary .q-module-header h3,
  .q-module-tertiary .q-module-header h4,
  .q-module-tertiary .q-module-header h5,
  .q-module-tertiary .q-module-header h6,
  .q-module-quaternary .q-module-header h1,
  .q-module-quaternary .q-module-header h2,
  .q-module-quaternary .q-module-header h3,
  .q-module-quaternary .q-module-header h4,
  .q-module-quaternary .q-module-header h5,
  .q-module-quaternary .q-module-header h6,
  .q-module-ancillary .q-module-header h1,
  .q-module-ancillary .q-module-header h2,
  .q-module-ancillary .q-module-header h3,
  .q-module-ancillary .q-module-header h4,
  .q-module-ancillary .q-module-header h5,
  .q-module-ancillary .q-module-header h6 {
    margin: 0;
    padding: 0; }
  .q-module-primary .q-module-header .q-image-banner:first-child + *,
  .q-module-secondary .q-module-header .q-image-banner:first-child + *,
  .q-module-tertiary .q-module-header .q-image-banner:first-child + *,
  .q-module-quaternary .q-module-header .q-image-banner:first-child + *,
  .q-module-ancillary .q-module-header .q-image-banner:first-child + * {
    margin-top: 32px;
    margin-top: var(--space-l); }
  .q-module-primary .q-module-header,
  .q-module-primary .q-module-content,
  .q-module-primary .q-module-footer,
  .q-module-secondary .q-module-header,
  .q-module-secondary .q-module-content,
  .q-module-secondary .q-module-footer,
  .q-module-tertiary .q-module-header,
  .q-module-tertiary .q-module-content,
  .q-module-tertiary .q-module-footer,
  .q-module-quaternary .q-module-header,
  .q-module-quaternary .q-module-content,
  .q-module-quaternary .q-module-footer,
  .q-module-ancillary .q-module-header,
  .q-module-ancillary .q-module-content,
  .q-module-ancillary .q-module-footer {
    padding: 16px 0;
    padding: var(--space-m) 0; }
  .q-module-primary + .q-module,
  .q-module-secondary + .q-module,
  .q-module-tertiary + .q-module,
  .q-module-quaternary + .q-module,
  .q-module-ancillary + .q-module {
    margin-top: 16px;
    margin-top: var(--space-m); }

.q-module-primary {
  border: 1px solid #3f69ae;
  border: 1px solid var(--colour-primary); }
  .q-module-primary .q-module-header + .q-module-content,
  .q-module-primary .q-module-content + .q-module-footer {
    border-top: 1px solid #3f69ae;
    border-top: 1px solid var(--colour-primary); }

.q-module-secondary,
.q-module-tertiary {
  border: 1px solid #e0e0e0;
  border: 1px solid var(--colour-secondary); }
  .q-module-secondary .q-module-header + .q-module-content,
  .q-module-secondary .q-module-content + .q-module-footer,
  .q-module-tertiary .q-module-header + .q-module-content,
  .q-module-tertiary .q-module-content + .q-module-footer {
    border-top: 1px solid #e0e0e0;
    border-top: 1px solid var(--colour-secondary); }

.q-module-tertiary {
  background-color: #efefef;
  background-color: var(--colour-secondary-background);
  border-color: #efefef;
  border-color: var(--colour-secondary-background); }

.q-module-quaternary,
.q-module-ancillary {
  border-radius: 0;
  border-left-color: transparent;
  border-right-color: transparent;
  margin: 0 0 16px 0;
  margin: 0 0 var(--space-m) 0; }

.q-module-quaternary {
  border-top: 1px solid #e0e0e0;
  border-top: 1px solid var(--colour-secondary);
  border-bottom: 1px solid #e0e0e0;
  border-bottom: 1px solid var(--colour-secondary);
  padding: 32px 0;
  padding: var(--space-l) 0; }

.q-module-quaternary + .q-module-quaternary {
  border-top: none;
  margin-top: 0;
  padding-top: 8px;
  padding-top: var(--space-s); }

.q-module-ancillary {
  padding: 16px 0;
  padding: var(--space-m) 0; }

.q-module-ancillary + .q-module-ancillary {
  border-top: 1px solid #e0e0e0;
  border-top: 1px solid var(--colour-secondary);
  padding-top: 32px;
  padding-top: var(--space-l); }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-footer-contain, .q-page-contain {
  margin: 0 auto;
  min-width: 300px;
  max-width: 1328px; }
  @media screen and (max-width: 599px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 8px; } }
  @media screen and (min-width: 600px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 64px; } }

.q-nav {
  padding: 0;
  list-style: none;
  margin: 0; }
  @media screen and (min-width: 600px) {
    .q-nav {
      display: flex; } }

@media screen and (min-width: 600px) {
  .q-nav-item:not(:first-child),
  .q-nav > *:not(:first-child) .q-nav-item {
    margin-left: 32px;
    margin-left: var(--space-l); } }

.q-nav-item-button {
  border: none;
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-align: left; }

.q-nav-item-link.q-nav-item-link,
.q-nav-item-button.q-nav-item-button,
.q-nav-item-text.q-nav-item-text {
  color: #838c91;
  color: var(--colour-text-secondary);
  display: inline-block;
  text-decoration: none; }
  @media screen and (max-width: 599px) {
    .q-nav-item-link.q-nav-item-link,
    .q-nav-item-button.q-nav-item-button,
    .q-nav-item-text.q-nav-item-text {
      border-left: 2px solid transparent;
      border-left: var(--space-xxs) solid transparent;
      padding: 8px 16px;
      padding: var(--space-s) var(--space-m); } }
  @media screen and (min-width: 600px) {
    .q-nav-item-link.q-nav-item-link,
    .q-nav-item-button.q-nav-item-button,
    .q-nav-item-text.q-nav-item-text {
      border-bottom: 2px solid transparent;
      border-bottom: var(--space-xxs) solid transparent;
      padding: 16px 0 14px 0;
      padding: var(--space-m) 0 calc(var(--space-m) - var(--space-xxs)) 0; } }

.q-nav-item-control.q-nav-item-link,
.q-nav-item-control.q-nav-item-button {
  color: #333333;
  color: var(--colour-text);
  text-decoration: none; }
  .q-nav-item-control.q-nav-item-link:link, .q-nav-item-control.q-nav-item-link:visited,
  .q-nav-item-control.q-nav-item-button:link,
  .q-nav-item-control.q-nav-item-button:visited {
    color: #333333;
    color: var(--colour-text);
    text-decoration: none; }
  .q-nav-item-control.q-nav-item-link:hover, .q-nav-item-control.q-nav-item-link:focus,
  .q-nav-item-control.q-nav-item-button:hover,
  .q-nav-item-control.q-nav-item-button:focus {
    color: #333333;
    color: var(--colour-text); }
  .q-nav-item-control.q-nav-item-link:focus,
  .q-nav-item-control.q-nav-item-button:focus {
    outline: none;
    border-radius: 3px;
    border-radius: var(--border-radius);
    box-shadow: 0 0 0 2px #8baaff;
    box-shadow: 0 0 0 var(--space-xxs) var(--colour-focus); }
  .q-nav-item-control.q-nav-item-link::-moz-focus-inner,
  .q-nav-item-control.q-nav-item-button::-moz-focus-inner {
    border: none; }

.q-nav-item-active .q-nav-item-link,
.q-nav-item-active .q-nav-item-button,
.q-nav-item-active .q-nav-item-text {
  border-color: #3f69ae;
  border-color: var(--colour-primary);
  color: #333333;
  color: var(--colour-text); }

.q-nav-tabs {
  border-bottom: 1px solid #e0e0e0;
  border-bottom: 1px solid var(--colour-chrome-border); }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-footer-contain, .q-page-contain {
  margin: 0 auto;
  min-width: 300px;
  max-width: 1328px; }
  @media screen and (max-width: 599px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 8px; } }
  @media screen and (min-width: 600px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 64px; } }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-panel {
  background: #efefef;
  background: var(--colour-chrome-background);
  padding: 16px;
  padding: var(--space-m); }
  .q-panel > *:first-child {
    padding-top: 0; }
  .q-panel > *:last-child {
    margin-bottom: 0; }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-footer-contain, .q-page-contain {
  margin: 0 auto;
  min-width: 300px;
  max-width: 1328px; }
  @media screen and (max-width: 599px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 8px; } }
  @media screen and (min-width: 600px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 64px; } }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

:root {
  --grid-unit:                    4px;
  --space-xxs:                    2px;
  --space-xs:                     4px;
  --space-s:                      8px;
  --space-m:                      16px;
  --space-l:                      32px;
  --space-xl:                     64px;
  --space-xxl:                    128px;
  --icon-size-xsmall:             24px;
  --icon-size-small:              32px;
  --icon-size-medium:             40px;
  --icon-size-large:              48px;
  --icon-size-xlarge:             56px;
  --colour-primary:               #3f69ae;
  --colour-primary-dark:          #1b3b84;
  --colour-primary-background:    #e8edf5;
  --colour-primary-highlight:     #c5d2e7;
  --colour-primary-lowlight:      #31569d;
  --colour-secondary:             #e0e0e0;
  --colour-secondary-dark:        #8c8c8c;
  --colour-secondary-background:  #efefef;
  --colour-secondary-highlight:   #d3d3d3;
  --colour-secondary-lowlight:    #c3c3c3;
  --colour-chrome-background:     #efefef;
  --colour-chrome-border:         #e0e0e0;
  --colour-chrome-header:         #000000;
  --colour-focus:                 #8baaff;
  --colour-good:                  #3d9400;
  --colour-bad:                   #dd4b39;
  --colour-warning:               #eacB79;
  --colour-notification:          #3f69ae;
  --colour-badge:                 #dd4b39;
  --colour-badge-inverse:         #ffffff;
  --colour-text:                  #333333;
  --colour-text-primary:          #333333;
  --colour-text-hover:            #333333;
  --colour-text-inverse:          #ffffff;
  --colour-text-secondary:        #838c91;
  --font-family:                  Roboto, sans-serif;
  --font-weight-light:            300;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-bold:             700;
  --font-weight-black:            900;
  --border-radius:                3px; }

.q-footer-contain, .q-page-contain {
  margin: 0 auto;
  min-width: 300px;
  max-width: 1328px; }
  @media screen and (max-width: 599px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 8px; } }
  @media screen and (min-width: 600px) {
    .q-footer-contain, .q-page-contain {
      padding: 0 64px; } }

/*
text() sets the type scale and aligns to the basline grid
text-inline() just sets the type scale, leaving alignment for a block-level element
(see https://medium.com/@razvanonofrei/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b for background)
*/
@media screen and (max-width: 599px) {
  [data-qtheme] h1 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h1 {
    font-size: 2.25rem;
    line-height: 1.222;
    font-weight: 300;
    padding-top: 0.576rem;
    margin-top: 0;
    margin-bottom: 1.424rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h1 {
    font-size: 2.625rem;
    line-height: 1.19;
    font-weight: 300;
    padding-top: 0.63rem;
    margin-top: 0;
    margin-bottom: 1.37rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h2 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h2 {
    font-size: 2rem;
    line-height: 1.25;
    font-weight: 300;
    padding-top: 0.54rem;
    margin-top: 0;
    margin-bottom: 1.46rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h2 {
    font-size: 2.25rem;
    line-height: 1.222;
    font-weight: 300;
    padding-top: 0.576rem;
    margin-top: 0;
    margin-bottom: 1.424rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h3 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h3 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h3 {
    font-size: 1.75rem;
    line-height: 1.285;
    font-weight: 400;
    padding-top: 0.50312rem;
    margin-top: 0;
    margin-bottom: 1.49688rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h4 {
    font-size: 1.125rem;
    line-height: 1.333;
    font-weight: 400;
    padding-top: 0.35044rem;
    margin-top: 0;
    margin-bottom: 1.14956rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h4 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h4 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.405rem;
    margin-top: 0;
    margin-bottom: 1.595rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h5 {
    font-size: 1.125rem;
    line-height: 1.333;
    font-weight: 400;
    padding-top: 0.35044rem;
    margin-top: 0;
    margin-bottom: 1.14956rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h5 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 400;
    padding-top: 0.36875rem;
    margin-top: 0;
    margin-bottom: 1.63125rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h5 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 400;
    padding-top: 0.36875rem;
    margin-top: 0;
    margin-bottom: 1.63125rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] h6 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] p {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 0.27rem;
    margin-top: 0;
    margin-bottom: 0.98rem; } }

@media screen and (max-width: 599px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

@media screen and (min-width: 600px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

@media screen and (min-width: 1200px) {
  [data-qtheme] small {
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.02rem;
    font-weight: 400;
    padding-top: 0.23362rem;
    margin-top: 0;
    margin-bottom: 0.76638rem; } }

[data-qtheme] strong {
  font-weight: 500; }

.q-table {
  border-collapse: collapse;
  margin: 0 0 16px 0;
  margin: 0 0 var(--space-m) 0; }
  .q-table > caption {
    padding: 8px;
    padding: var(--space-s);
    font-style: italic; }
  .q-table > thead > tr th, .q-table > thead > tr td,
  .q-table > tbody > tr th,
  .q-table > tbody > tr td,
  .q-table > tfoot > tr th,
  .q-table > tfoot > tr td {
    border-top: 1px solid #e0e0e0;
    border-top: 1px solid var(--colour-chrome-border);
    border-bottom: 1px solid #e0e0e0;
    border-bottom: 1px solid var(--colour-chrome-border);
    padding: 14px;
    text-align: left;
    vertical-align: top; }
    .q-table > thead > tr th:first-child, .q-table > thead > tr td:first-child,
    .q-table > tbody > tr th:first-child,
    .q-table > tbody > tr td:first-child,
    .q-table > tfoot > tr th:first-child,
    .q-table > tfoot > tr td:first-child {
      padding-left: 0; }
    .q-table > thead > tr th:last-child, .q-table > thead > tr td:last-child,
    .q-table > tbody > tr th:last-child,
    .q-table > tbody > tr td:last-child,
    .q-table > tfoot > tr th:last-child,
    .q-table > tfoot > tr td:last-child {
      padding-right: 0; }
    .q-table > thead > tr th.q-table-nowrap, .q-table > thead > tr td.q-table-nowrap,
    .q-table > tbody > tr th.q-table-nowrap,
    .q-table > tbody > tr td.q-table-nowrap,
    .q-table > tfoot > tr th.q-table-nowrap,
    .q-table > tfoot > tr td.q-table-nowrap {
      white-space: nowrap; }
    .q-table > thead > tr th.q-table-centre, .q-table > thead > tr td.q-table-centre,
    .q-table > tbody > tr th.q-table-centre,
    .q-table > tbody > tr td.q-table-centre,
    .q-table > tfoot > tr th.q-table-centre,
    .q-table > tfoot > tr td.q-table-centre {
      text-align: center; }
    .q-table > thead > tr th.q-table-left, .q-table > thead > tr td.q-table-left,
    .q-table > tbody > tr th.q-table-left,
    .q-table > tbody > tr td.q-table-left,
    .q-table > tfoot > tr th.q-table-left,
    .q-table > tfoot > tr td.q-table-left {
      text-align: left; }
    .q-table > thead > tr th.q-table-right, .q-table > thead > tr td.q-table-right,
    .q-table > tbody > tr th.q-table-right,
    .q-table > tbody > tr td.q-table-right,
    .q-table > tfoot > tr th.q-table-right,
    .q-table > tfoot > tr td.q-table-right {
      text-align: right; }
    .q-table > thead > tr th.q-table-baseline, .q-table > thead > tr td.q-table-baseline,
    .q-table > tbody > tr th.q-table-baseline,
    .q-table > tbody > tr td.q-table-baseline,
    .q-table > tfoot > tr th.q-table-baseline,
    .q-table > tfoot > tr td.q-table-baseline {
      vertical-align: baseline; }
    .q-table > thead > tr th.q-table-bottom, .q-table > thead > tr td.q-table-bottom,
    .q-table > tbody > tr th.q-table-bottom,
    .q-table > tbody > tr td.q-table-bottom,
    .q-table > tfoot > tr th.q-table-bottom,
    .q-table > tfoot > tr td.q-table-bottom {
      vertical-align: bottom; }
    .q-table > thead > tr th.q-table-middle, .q-table > thead > tr td.q-table-middle,
    .q-table > tbody > tr th.q-table-middle,
    .q-table > tbody > tr td.q-table-middle,
    .q-table > tfoot > tr th.q-table-middle,
    .q-table > tfoot > tr td.q-table-middle {
      vertical-align: middle; }
    .q-table > thead > tr th.q-table-top, .q-table > thead > tr td.q-table-top,
    .q-table > tbody > tr th.q-table-top,
    .q-table > tbody > tr td.q-table-top,
    .q-table > tfoot > tr th.q-table-top,
    .q-table > tfoot > tr td.q-table-top {
      vertical-align: top; }
  .q-table.q-table-fill {
    width: 100%; }
  .q-table .q-table-caption-top {
    caption-side: top; }
  .q-table .q-table-caption-bottom {
    caption-side: bottom; }