/* global rules */

@font-face {

font-family: "Source Sans Pro";
src: url("fonts/Source Sans Pro/SourceSansPro-Regular.otf");
font-weight: 400;

}

@font-face {

font-family: "Source Sans Pro";
src: url("fonts/Source Sans Pro/SourceSansPro-Bold.otf");
font-weight: 800;

}

@font-face {

font-family: "Source Sans Pro";
src: url("fonts/Source Sans Pro/SourceSansPro-It.otf");
font-style: italic;

}

@font-face {

font-family: "Evolventa";
src: url("fonts/Evolventa/Evolventa-Regular.ttf");
font-weight: 400;

}

@font-face {

font-family: "Evolventa";
src: url("fonts/Evolventa/Evolventa-Bold.ttf");
font-weight: 800;

}

/* Variables definition */ :root {

/* Colors */
--blue: #0053b3;
--light-blue: #006be6;
--dark-blue: #003b80;
--darker-blue: #00234d;
--lighter-blue: #b4e1fa;
--white: #fff;
--lightest-grey: #fafbfc;
--lighter-grey: #ebeff3;
--light-grey: #c9d3df;
--grey: #adb9c9;
--dark-grey: #8393a7;
--darker-grey: #53657d;
--darkest-grey: #26353f;
--black: #1c1c1c;
--green: #03bd5b;
--light-green: #daf5e7;
--orange: #ff9947;
--dark-orange: #cc5c00;
--light-orange: #fff0e4;
--red: #d63626;
--dark-red: #ab2b1e;
--light-red: rgba(239,172,166,0.45882);

/* Breakpoints */
--mobile-min: 400px;
--mobile-max: 549px;
--phablet-min: 550px;
--phablet-max: 749px;
--tablet-min: 750px;
--tablet-max: 999px;
--desktop-min: 1000px;

/* Spaces */
--space-xxs: 0.25em;
--space-xs: 0.5em;
--space-s: 1em;
--space-m: 1.5em;
--space-l: 2em;
--space-xl: 3em;

/* Theme */
--theme-primary: var(--blue);
--theme-primary-light: var(--light-blue);
--theme-primary-dark: var(--dark-blue);
--theme-secondary: var(--blue);
--theme-secondary-darken: var(--dark-blue);
--theme-border: var(--grey);
--theme-border-lighter: var(--light-grey);
--theme-border-active: var(--light-blue);
--theme-border-radius: 3px;
--theme-background-white: var(--white);
--theme-background-grey: var(--lighter-grey);
--theme-background-color: var(--blue);
--theme-background-color-dark: var(--darker-blue);
--theme-background-gradient: linear-gradient(to left, var(--blue), var(--dark-blue));
--theme-background-dark: var(--black);
--theme-box-shadow: 0 1px 2px rgba(201, 211, 223, 0.2);
--theme-label-text: var(--darker-grey);
--theme-light-text: var(--white);
--theme-dark-text: var(--darkest-grey);
--theme-success-border: var(--green);
--theme-success-bg: var(--light-green);
--theme-warning-border: var(--orange);
--theme-warning-bg: var(--light-orange);
--theme-error-border: var(--red);
--theme-error-bg: var(--light-red);
--theme-info-border: var(--light-blue);
--theme-info-bg: var(--lighter-blue);

}

body {

font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

}

h1, h2, h3, h4, h5, h6 {

font-family: "Evolventa", "Trebuchet MS", sans-serif;

}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {

margin-top: 0;

}

h1 {

font-size: 2em;
line-height: 1.125em;

}

h2 {

font-size: 1.75em;
line-height: 1.25em;

}

h3 {

font-size: 1.5em;
line-height: 1.5em;

}

h4 {

font-size: 1.25em;

}

h5 {

font-size: 1.125em;

}

h6 {

font-size: 1em;

}

.subtitle {

font-weight: 400;
font-family: "Source Sans Pro", Arial, sans-serif;
color: #53657d;
color: var(--darker-grey);

}

.lead-text {

font-size: 1.25em;

}

.subtitle {

color: #8393a7;
color: var(--dark-grey);

}

.text-quote {

background-color: #ebeff3;
background-color: var(--theme-background-grey);
border-left: 8px solid #c9d3df;
border-left: 8px solid var(--theme-border-lighter);
padding: 4px 0 4px 25px;

}

pre {

display: block;
margin-top: 1em;

}

code {

background: #fafbfc;
background: var(--lightest-grey);
border-radius: 3px;
border-radius: var(--theme-border-radius);
padding: 0 0.5em;
font-family: 'Courier New';
font-size: 0.9em;
word-wrap: break-word;
white-space: pre-wrap;
vertical-align: middle;
display: inline-block;
max-width: 100%;
overflow-x: auto;

}

pre code {

padding: 1em;

}

}

html, body {

height: 100%;
position: relative;

}

body {

color: #26353f;
color: var(--theme-dark-text);
padding: 0;
margin: 0;
overflow: auto;

}

a, button {

cursor: pointer;

}

a, a:focus, a:visited, a:active {

text-decoration: underline;
color: #0053b3;
color: var(--theme-primary);

}

a:hover {

border-radius: 3px;
border-radius: var(--theme-border-radius);
color: #003b80;
color: var(--dark-blue);
background-color: #ebeff3;
background-color: var(--lighter-grey);
text-decoration: none;

}

small {

font-size: 0.875em;

}

hr {

border-top: 0;
border-bottom: #c9d3df;
border-bottom: var(--theme-border-lighter);
margin: 2em 0;
margin: var(--space-l) 0;

}

dt {

display: block;
color: #53657d;
color: var(--darker-grey);

}

dd {

margin: 0;

}

dd + dt {

margin-top: 0.5em;
margin-top: var(--space-xs);

}

/* basic elements */ input, textarea, select {

width: 100%;
outline: none;
padding: 0.5em 0.875em;
font: inherit;
line-height: 1.6;
color: #1c1c1c;
color: var(--black);
border-radius: 3px;
border-radius: var(--theme-border-radius);
border: 1px solid #adb9c9;
border: 1px solid var(--theme-border);
background: #fff;
background: var(--theme-background-white);
vertical-align: middle;
position: relative;

}

input:focus, textarea:focus, select:focus {

border-color: #006be6;
border-color: var(--theme-border-active);
-webkit-transition: border-color 0.2s ease-out;
transition: border-color 0.2s ease-out;

}

input:disabled, select:disabled {

background-color: #ebeff3;
background-color: var(--theme-background-grey);

}

input, input {

margin: 0;
margin-right: 0.5em;
margin-right: var(--space-xs);

}

input {

height: 1.25em;
width: 1.25em;
border-radius: 50%;
display: inline-block;
-webkit-appearance: none;
   -moz-appearance: none;
        appearance: none;
padding: 0;

}

input::before {

content: '';
border-color: #0053b3;
border-color: var(--theme-primary);
border-radius: 50%;
position: absolute;
top: 0.35em;
left: 0.3em;
width: 0.5em;
height: 0.5em;
-webkit-transform: scale(0);
        transform: scale(0);

}

input:checked {

background-color: #fff;
background-color: var(--theme-background-white);
border-color: #0053b3;
border-color: var(--theme-primary);
opacity: 1;

}

input:checked::before {

background-color: #0053b3;
background-color: var(--theme-primary);
-webkit-transform: scale(1);
        transform: scale(1);
-webkit-transition: -webkit-transform 0.2s ease-out;
transition: -webkit-transform 0.2s ease-out;
transition: transform 0.2s ease-out;
transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;

}

input {

-webkit-appearance: none;
   -moz-appearance: none;
        appearance: none;
height: 1.4em;
width: 1.5em;
padding: 0;

}

input:checked {

background-color: #0053b3;
background-color: var(--theme-primary);
border-color: #0053b3;
border-color: var(--theme-primary);
opacity: 1;
-webkit-transition: border-color 0.2s ease-in, background-color 0.2s ease-out;
transition: border-color 0.2s ease-in, background-color 0.2s ease-out;

}

input::before {

-webkit-transform: scale(0);
        transform: scale(0);
content: '';
position: absolute;
top: 0.2em;
left: 0.15em;
height: 1em;
width: 1em;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path d="M14.23 1.304L6.112 9.501 2.767 6.117a1.029 1.029 0 0 0-1.464 0 1.054 1.054 0 0 0 0 1.479l4.055 4.101c.208.21.481.31.754.305.272.005.545-.095.753-.305l8.829-8.915a1.053 1.053 0 0 0 0-1.478 1.027 1.027 0 0 0-1.464 0z" fill="white" /></svg>') center center no-repeat;

}

input:checked::before {

color: #fff;
color: var(--white);
display: block;
-webkit-transform: scale(1);
        transform: scale(1);
-webkit-transition: -webkit-transform 0.2s ease-out;
transition: -webkit-transform 0.2s ease-out;
transition: transform 0.2s ease-out;
transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;

}

select {

-webkit-appearance: none;
   -moz-appearance: none;
        appearance: none;
background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path d="M1.254 2.518a.904.904 0 0 1 0-1.257.85.85 0 0 1 1.225 0l4.512 4.632 4.511-4.632a.85.85 0 0 1 1.225 0 .904.904 0 0 1 0 1.257L7.621 7.761a.848.848 0 0 1-.63.259.849.849 0 0 1-.631-.259L1.254 2.518z" fill="gray"/></svg>') no-repeat;
background: var(--theme-background-white) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path d="M1.254 2.518a.904.904 0 0 1 0-1.257.85.85 0 0 1 1.225 0l4.512 4.632 4.511-4.632a.85.85 0 0 1 1.225 0 .904.904 0 0 1 0 1.257L7.621 7.761a.848.848 0 0 1-.63.259.849.849 0 0 1-.631-.259L1.254 2.518z" fill="gray"/></svg>') no-repeat;
background-position: top 1em right 0;
background-size: 1.7em;
padding-right: 2.8em;
border-radius: 3px;
border-radius: var(--theme-border-radius);
width: auto;

}

@-moz-document url-prefix() {

select {
  padding-top: 0.438em;
  padding-bottom: 0.438em;
}

}

select:focus {

outline: none;

}

select:-moz-focusring {

color: transparent;
text-shadow: 0 0 0 #000;

}

label.required::before {

content: '✱';
color: #d63626;
color: var(--red);
font-weight: 700;
padding-right: 0.5em;
padding-right: var(--space-xs);
position: absolute;
left: 0;
-webkit-transform: translateX(-100%);
        transform: translateX(-100%);

}

a.button, a.button:focus, a.button:active, a.button:visited, button.button, button.button:focus, button.button:active, button.button:visited, input, input:focus, input:active, input:visited, input, input:focus, input:active, input:visited {

display: inline-block;
padding: 0.5em 2em;
padding: var(--space-xs) var(--space-l);
color: #fff;
color: var(--theme-light-text);
background-color: #0053b3;
background-color: var(--theme-primary);
border-radius: 3px;
border-radius: var(--theme-border-radius);
border: 0;
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 1em;
font-size: var(--space-s);
position: relative;
top: 0;
overflow: hidden;
text-decoration: none;
cursor: pointer;
width: auto;

}

a.button:hover, button.button:hover, input:hover, input:hover {

background: #003b80;
background: var(--theme-secondary-darken);

}

a.button:active, button.button:active, input:hover, input:hover {

-webkit-transform: translateY(1px);
        transform: translateY(1px);

}

button::-moz-focus-inner {

border: 0;

}

a.button-outline, a.button-outline:focus, a.button-outline:active, a.button-outline:visited, button.button-outline, button.button-outline:focus, button.button-outline:active, button.button-outline:visited {

display: inline-block;
padding: 0.5em 2em;
padding: var(--space-xs) var(--space-l);
border-radius: 3px;
border-radius: var(--theme-border-radius);
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 1em;
font-size: var(--space-s);
position: relative;
top: 0;
overflow: hidden;
text-decoration: none;
background: transparent;
border: 1px solid #fff;
border: 1px solid var(--white);
color: #fff;
color: var(--white);

}

a.button-outline:hover, button.button-outline:hover, input.button-outline:hover, input.button-outline:hover {

border-color: #c9d3df;
border-color: var(--light-grey);
color: #c9d3df;
color: var(--light-grey);

}

.button-outline.primary, a.button-outline.primary {

border-color: #0053b3;
border-color: var(--blue);
color: #0053b3;
color: var(--blue);

}

.button-outline.primary:hover, .button-outline.primary:active {

border-color: #003b80;
border-color: var(--dark-blue);
color: #003b80;
color: var(--dark-blue);

}

.button-outline.warning, a.button-outline.warning {

border-color: #d63626;
border-color: var(--red);
color: #d63626;
color: var(--red);

}

.button-outline.warning:hover, .button-outline.warning:active {

border-color: #ab2b1e;
border-color: var(--dark-red);
color: #ab2b1e;
color: var(--dark-red);

}

.button-outline.secondary, a.button-outline.secondary {

border-color: #53657d;
border-color: var(--darker-grey);
color: #53657d;
color: var(--darker-grey);

}

.button-outline.secondary:hover, .button-outline.secondary:active {

border-color: #26353f;
border-color: var(--darkest-grey);
color: #26353f;
color: var(--theme-dark-text);

}

a.button.small, button.button.small, input.small, input.small, a.button-outline.small, button.button-outline.small {

font-size: 0.825em;
padding: 0.25em 1em;

}

a.button.large, button.button.large, input.large, input.large, a.button-outline.large, button.button-outline.large {

font-size: 1.25em;

}

.button.warning, a.button.warning {

background-color: #d63626;
background-color: var(--red);

}

.button.warning:hover, .button.warning:active {

background-color: #ab2b1e;
background-color: var(--dark-red);

}

.button.warning-light, a.button.warning-light {

background-color: #ff9947;
background-color: var(--orange);

}

.button.warning-light:hover, .button.warning-light:active {

background-color: #cc5c00;
background-color: var(--dark-orange);

}

.button.secondary, a.button.secondary {

background-color: #53657d;
background-color: var(--darker-grey);

}

.button.secondary:hover, .button.secondary:active {

background-color: #26353f;
background-color: var(--darkest-grey);

}

.button + .button, .button-outline + .button-outline {

margin-left: 1em;

}

@media (max-width: 399px) {

a.button,
button.button,
input[type="submit"],
input[type="button"] {
  width: 100%;
}

.button + .button,
.button-outline + .button-outline {
  margin-top: 1em;
  margin-left: 0;
}

}

.table {

background: #fff;
background: var(--theme-background-white);
border: 1px solid #c9d3df;
border: 1px solid var(--theme-border-lighter);
border-left: 0;
border-right: 0;
border-radius: 2px;
position: relative;
width: 100%;
border-collapse: collapse;

}

.table td, .table th {

padding: 1em;
padding: var(--space-s);
text-align: left;

}

.table td {

border-top: 1px solid #ebeff3;
border-top: 1px solid var(--lighter-grey);

}

.table thead th {

background: #fafbfc;
background: var(--lightest-grey);
border-bottom: 1px solid #c9d3df;
border-bottom: 1px solid var(--theme-border-lighter);
font-size: 0.875em;
font-weight: 700;
text-transform: uppercase;

}

.table thead th.ascending::after {

font-size: 0.75em;
content: '▲';
margin-left: 0.5em;
margin-left: var(--space-xs);

}

.table thead th.descending::after {

font-size: 0.75em;
content: '▼';
margin-left: 0.5em;
margin-left: var(--space-xs);

}

.table tr:hover {

background: #fafbfc;
background: var(--lightest-grey);

}

.table__filter {

margin-bottom: 1em;
margin-bottom: var(--space-s);
max-width: 20em;
float: right;

}

.icon {

display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
font-size: 16px;

}

icon-search {

fill: #adb9c9;
fill: var(--grey);

}

.label-list {

padding: 0;
margin: 0;

}

.label {

background-color: #ebeff3;
background-color: var(--lighter-grey);
border-radius: 3px;
border-radius: var(--theme-border-radius);
display: inline-block;
padding: 0.3em 0.8em;
margin: 0.25em;
font-size: 0.875em;

}

.label a {

text-decoration: none;
color: #26353f;
color: var(--theme-dark-text);

}

.label–active {

background-color: #0053b3;
background-color: var(--theme-primary);
color: #fff;
color: var(--white);

}

.label–inactive {

background-color: #fff;
background-color: var(--white);
border: 1px solid #adb9c9;
border: 1px solid var(--theme-border);
color: #53657d;
color: var(--darker-grey);

}

.label–inactive a {

color: #53657d;
color: var(--darker-grey);
background: 0;

}

/* recurring components */ form {

max-width: 35em;
margin: 0 auto;

}

label, legend {

display: block;
color: #26353f;
color: var(--theme-dark-text);

}

legend {

margin-bottom: 0.5em;
margin-bottom: var(--space-xs);

}

label.label-inline {

display: inline;
color: #1c1c1c;
color: var(--black);

}

.label-inline + input, .label-inline + input {

margin-left: 1.5em;
margin-left: var(--space-m);
-ms-flex-negative: 0;
    flex-shrink: 0;

}

.form__group {

position: relative;
display: block;

}

.form__group + .form__group {

margin-top: 2em;
margin-top: var(--space-l);

}

fieldset {

border: none;
margin: 0;
padding: 0;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;

}

.overlay-button {

position: absolute;
right: 2em;
right: var(--space-l);
top: calc(1px + 0.8rem);
background: 0;
border: 0;
width: 1rem;
height: 1rem;

}

.search__group {

position: relative;

}

.overlayed-button .icon-search {

height: 15px;
width: 15px;

}

.input__group {

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;

}

.input__group .icon-button, .input__group .icon-button:active {

margin-left: 1em;
margin-left: var(--space-s);
padding: 0 0.8em;

}

.input__group .icon-button .icon {

width: 16px;
height: 16px;

}

.input__group .button {

-ms-flex-negative: 0;
    flex-shrink: 0;
margin-left: 1em;
margin-left: var(--space-s);

}

@media (max-width: 399px) {

.input__group {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.input__group .button {
  margin-left: 0;
  margin-top: 1em;
  margin-top: var(--space-s);
}

}

.card {

background: #fff;
background: var(--theme-background-white);
border-radius: 2px;
-webkit-box-shadow: 0 1px 2px rgba(201, 211, 223, 0.2);
        box-shadow: 0 1px 2px rgba(201, 211, 223, 0.2);
-webkit-box-shadow: var(--theme-box-shadow);
        box-shadow: var(--theme-box-shadow);
position: relative;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
    -ms-flex: 1;
        flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
width: 100%;
border: 1px solid #c9d3df;
border: 1px solid var(--theme-border-lighter);

}

.row .card + .card {

margin-left: 1.5em;
margin-left: var(--space-m);

}

@media (max-width: 749px) {

.row > .card {
  margin: 0;
}

.row > .card + .card {
  margin-left: 0;
  margin-top: 1.5em;
  margin-top: var(--space-m);
}

}

.card__cover {

height: 250px;
width: 100%;
overflow: hidden;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
background-color: #0053b3;
background-color: var(--theme-background-color);

}

.card__cover img {

-o-object-fit: cover;
   object-fit: cover; /* will not work on IE and Edge < 16 */
height: 100%;
width: 100%;

}

.card__content {

padding: 1.5em;
padding: var(--space-m);
-webkit-box-flex: 1;
    -ms-flex-positive: 1;
        flex-grow: 1;

}

.card__content h3 {

margin: 0;

}

.card__content .card__meta {

color: #53657d;
color: var(--darker-grey);

}

.card__content .card__meta time::after {

content: " • ";

}

.card__content :last-child {

margin-bottom: 0;

}

.card__extra {

border-top: 1px solid #adb9c9;
border-top: 1px solid var(--theme-border);
padding: 1em;
padding: var(--space-s);

}

.panel {

background: #fff;
background: var(--theme-background-white);
border-radius: 3px;
border-radius: var(--theme-border-radius);
-webkit-box-shadow: 0 1px 2px rgba(201, 211, 223, 0.2);
        box-shadow: 0 1px 2px rgba(201, 211, 223, 0.2);
-webkit-box-shadow: var(--theme-box-shadow);
        box-shadow: var(--theme-box-shadow);
padding: 1.5em;
padding: var(--space-m);
position: relative;
border: 1px solid #c9d3df;
border: 1px solid var(--theme-border-lighter);

}

.panel + * {

margin-top: 1.5em;
margin-top: var(--space-m);

}

.panel > :last-child {

margin-bottom: 0;

}

.panel__header::after {

content: '';
display: block;
width: calc(100% + 1.5em * 2);
width: calc(100% + var(--space-m) * 2);
position: relative;
left: -1.5em;
border-bottom: 1px solid #c9d3df;
border-bottom: 1px solid var(--theme-border-lighter);
margin: 1em 0 1.5em;
margin: var(--space-s) 0 var(--space-m);

}

.panel__header h3 {

display: inline-block;
margin: 0;

}

.panel__header-extra {

margin-left: 1em;
margin-left: var(--space-s);
color: #53657d;
color: var(--theme-label-text);
display: inline-block;

}

@media (max-width: 549px) {

.panel__header-extra {
  margin: 0;
}

}

.dropdown {

position: relative;
display: inline-block;

}

.dropdown-content {

display: none;
position: absolute;
background-color: #fff;
background-color: var(--white);
min-width: 110px;
text-align: center;
top: 2em;
top: var(--space-l);
right: 0;
-webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
z-index: 1;

}

.dropdown-content a {

color: black;
padding: 12px 16px;
text-decoration: none;
display: block;

}

.dropdown-content a:hover {

background-color: #c9d3df;
background-color: var(--light-grey);

}

.dropdown:hover .dropdown-content {

display: block;

}

.modal__backdrop {

position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
height: 100%;
width: 100%;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
display: none;
z-index: 10;

}

/* no js modal */ .modal__backdrop:target {

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

}

.modal {

border-radius: 3px;
border-radius: var(--theme-border-radius);
-webkit-box-shadow: 0 1px 2px rgba(201, 211, 223, 0.2);
        box-shadow: 0 1px 2px rgba(201, 211, 223, 0.2);
-webkit-box-shadow: var(--theme-box-shadow);
        box-shadow: var(--theme-box-shadow);
background: #fff;
background: var(--white);
padding: 1.5em;
padding: var(--space-m);
max-width: 32em;

}

.modal > :first-child {

margin-top: 0;

}

.modal .button__group {

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
margin-top: 1.5em;
margin-top: var(--space-m);

}

.modal .button__group .button {

margin: 0;

}

.modal .button__group .button + .button {

margin-left: 1em;

}

.notification {

background: #b4e1fa;
background: var(--theme-info-bg);
border: 1px solid #006be6;
border: 1px solid var(--theme-info-border);
border-radius: 3px;
border-radius: var(--theme-border-radius);
padding: 1em;
padding: var(--space-s);
margin-bottom: 1em;
position: relative;

}

.notification .close {

border: 0;
background: 0;
color: currentColor;
position: absolute;
right: 1em;
right: var(--space-s);

}

.notification .icon {

fill: currentColor;
width: 20px;
height: 20px;

}

.notification.closable {

padding-right: 3em;
padding-right: var(--space-xl);

}

.notification.full-width {

width: 100%;
margin-bottom: 0;
text-align: center;
border: 0;

}

.notification.full-width.closable .close {

right: unset;

}

.notification.success {

background: #daf5e7;
background: var(--theme-success-bg);
border-color: #03bd5b;
border-color: var(--theme-success-border);

}

.notification.warning {

background: #fff0e4;
background: var(--theme-warning-bg);
border-color: #ff9947;
border-color: var(--theme-warning-border);

}

.notification.error {

background: rgba(239,172,166,0.45882);
background: var(--theme-error-bg);
border-color: #d63626;
border-color: var(--theme-error-border);

}

.tile {

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
background-color: #fff;
background-color: var(--theme-background-white);
width: 100%;
padding: 1em;
padding: var(--space-s);
-webkit-transform: none;
        transform: none;
-webkit-transition: all 0.1s ease-in;
transition: all 0.1s ease-in;

}

.tile:hover {

-webkit-transform: scale(1.03);
        transform: scale(1.03);

}

.tile-colored {

background-color: #0053b3;
background-color: var(--theme-background-color);
color: #fff;
color: var(--theme-light-text);

}

.tile h3 {

margin: 0;

}

.tile__icon {

height: 2em;
height: var(--space-l);

} /* stylelint-disable declaration-block-no-redundant-longhand-properties */ .pagination {

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-pack: end;
    -ms-flex-pack: end;
        justify-content: end;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
margin-top: 1.5em;
margin-top: var(--space-m);

} /* stylelint-enable declaration-block-no-redundant-longhand-properties */ .pagination__display-group {

margin-left: 1.5em;
margin-left: var(--space-m);

}

.pagination__display-label {

display: inline;

}

select.pagination__display {

margin-left: 0.5em;
margin-left: var(--space-xs);
padding-top: 0.25em;
padding-top: var(--space-xxs);
padding-bottom: 0.25em;
padding-bottom: var(--space-xxs);

}

.pagination__count {

margin-left: 1.5em;
margin-left: var(--space-m);

}

.pagination__pages {

list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
    -ms-flex-pack: end;
        justify-content: end;
margin-left: 1.5em;
margin-left: var(--space-m);

}

.pagination__pages li a {

color: #0053b3;
color: var(--theme-primary);
background-color: #fff;
background-color: var(--theme-background-white);
margin: 0 0.25em;
margin: 0 var(--space-xxs);
padding: 0.25em 0.5em;
padding: var(--space-xxs) var(--space-xs);
border-radius: 3px;
border-radius: var(--theme-border-radius);
font-weight: 700;
pointer-events: inherit;
text-decoration: none;
display: block;

}

.pagination__pages li a:hover {

background-color: #b4e1fa;
background-color: var(--lighter-blue);

}

.pagination__pages li.active a {

color: #fff;
color: var(--theme-light-text);
background-color: #0053b3;
background-color: var(--theme-background-color);

}

.pagination__pages li.disabled a {

color: #8393a7;
color: var(--dark-grey);
background-color: #fafbfc;
background-color: var(--lightest-grey);
pointer-events: none;

}

/* larger components */ .container {

position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;

}

.container.container-medium {

max-width: 750px;

}

.container.container-small {

max-width: 550px;

}

.container.container-full {

max-width: none;

}

.article__container {

max-width: 35em;

}

@media (min-width: 400px) {

.container {
  width: 85%;
  padding: 0;
}

}

@media (min-width: 550px) {

.container {
  width: 80%;
}

}

.navbar {

width: 100%;
background: #fff;
background: var(--theme-background-white);
z-index: 100;

}

.nav-fixed {

position: fixed;
top: 0;

}

.navbar__container {

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
padding: 1em;
padding: var(--space-s);

}

.navbar__home {

height: 40px;

}

.navbar__logo {

height: 100%;

}

.nav__links {

display: inline-block;
margin: 0;
padding: 0;
list-style-type: none;

}

.nav__item {

padding: 0;
display: inline-block;

}

.nav__item a, .nav__item .dropdown {

text-decoration: none;
color: #1c1c1c;
color: var(--black);
padding: 0.4em 0.8em;
border-radius: 3px;

}

.nav__links a::after {

content: none;

}

.nav__item a:hover, .nav__item .dropdown:hover {

background: #ebeff3;
background: var(--lighter-grey);

}

.nav__item a.active {

background: #0053b3;
background: var(--theme-primary);
color: #fff;
color: var(--white);

}

a.navbar__home {

font-family: 'Evolventa';
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
color: #26353f;
color: var(--theme-dark-text);
letter-spacing: 0.05em;
text-decoration: none;

}

.navbar__home img {

vertical-align: middle;

}

.navbar__logo {

margin-right: 0.8em;

}

.navbar__gouvfr {

height: 100%;

}

span.navbar__domain {

font-weight: 400;
color: #26353f;
color: var(--theme-dark-text);
-webkit-padding-after: 3px; /* fix the broken line-height in logo */

}

@media (max-width: 749px) {

.navbar__container {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.nav__links {
  padding-top: 1em;
  padding-top: var(--space-s);
}

}

.hero {

width: 100%;
background: #fff;
background: var(--theme-background-white);

}

.hero-color {

background: #0053b3;
background: var(--theme-background-color);

}

.hero__container {

min-height: 25em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
padding: 2em;
padding: var(--space-l);
max-width: 1200px;
margin: 0 auto;

}

.hero h1 {

margin-bottom: 0;

}

.hero-color h1 {

color: #fff;
color: var(--theme-light-text);

}

.hero p {

margin: 1em auto;
margin: var(--space-s) auto;
color: #26353f;
color: var(--theme-dark-text);
font-size: 1.5em;

}

.hero-color p {

color: #fff;
color: var(--theme-light-text);

}

.footer {

background: #1c1c1c;
background: var(--theme-background-dark);
color: #fff;
color: var(--white);
padding: 2em 0;
padding: var(--space-l) 0;

}

.footer a:hover {

background: 0;

}

.footer .container {

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;

}

.footer ul {

list-style-type: none;
padding: 0;

}

.footer__social {

margin-top: 1em;
margin-top: var(--space-s);

}

.footer__social li {

display: inline;
margin-right: 1em;
margin-right: var(--space-s);

}

.footer__social .icon {

width: 35px;
height: 35px;
fill: #fff;
fill: var(--white);

}

.footer__links {

margin: 0;
line-height: 2em;
line-height: var(--space-l);

}

.footer__links h2 {

margin-top: 0;
margin-bottom: 0.5em;
margin-bottom: var(--space-xs);

}

.footer__links a {

color: #fff;
color: var(--white);
text-decoration: none;

}

.footer__links a:hover {

background: #53657d;
background: var(--darker-grey);

}

.footer__logo {

width: 300px;
height: auto;

}

.footer__logo img {

max-height: 60px;

}

@media (max-width: 999px) {

.footer .container {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

}

.section {

padding: 5em 0;

}

.section-white {

background-color: #fff;
background-color: var(--theme-background-white);

}

.section-grey {

background-color: #ebeff3;
background-color: var(--theme-background-grey);

}

.section-dark {

background-color: #1c1c1c;
background-color: var(--theme-background-dark);
color: #fff;

}

.section-color {

background-image: -webkit-gradient(linear, right top, left top, from(#0053b3), to(#003b80));
background-image: linear-gradient(to left, #0053b3, #003b80);
background-image: var(--theme-background-gradient);
color: #fff;

}

.section-color-dark {

background-color: #00234d;
background-color: var(--theme-background-color-dark);
color: #fff;

}

.section__title:first-child {

margin-top: 0;
margin-bottom: 0.5em;
margin-bottom: var(--space-xs);

}

.section__subtitle {

margin: 0 auto;
font-weight: 400;
font-size: 1.25em;
font-family: "Source Sans Pro", Arial, sans-serif;
color: #53657d;
color: var(--darker-grey);

}

.section-dark .section__subtitle, .section-color .section__subtitle, .section-dark a, .section-color a {

color: currentColor;

}

.section-dark a:hover, .section-color a:hover {

background: #53657d;
background: var(--darker-grey);

}

.section__title + .row, .section__subtitle + .row {

margin-top: 3em;
margin-top: var(--space-xl);

}

.section__title, .section__subtitle {

text-align: center;

}

.section__title + .section__subtitle {

margin-top: -var(--space-s);

}

.article {

text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: "liga" on;
padding: 0;
background: #fff;
background: var(--white);
color: #26353f;
color: var(--theme-dark-text);
line-height: 1.5;
margin: 0 auto;

}

.article__hero {

height: 38vh;
width: 100%;
overflow: hidden;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;

}

.article__hero img {

width: 100%;
-webkit-filter: brightness(0.5);
        filter: brightness(0.5);
position: absolute;
z-index: 0;

}

.article__hero .article__container {

z-index: 10;
-webkit-box-align: start;
    -ms-flex-align: start;
        align-items: start;
width: 100%;

}

.article__content {

margin: 0;

}

.article__content .article__container {

margin: 0 auto;
padding: 2em 0 calc(2em * 2);
padding: var(--space-l) 0 calc(var(--space-l) * 2);

}

.richtext + .article__author {

margin-top: 1em;
margin-top: var(--space-s);

}

.article__author-list {

padding-top: 1em;
padding-top: var(--space-s);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;

}

.article__author {

display: inline-block;
max-width: 270px;
padding: 1em;
padding: var(--space-s);
font-size: 15px;

}

.article__author + .article__author {

margin-left: 1em;
margin-left: var(--space-s);
margin-top: 0;

}

.article__author img {

height: 32px;
width: 32px;
border-radius: 50%;
display: inline-block;
float: right;

}

.article__author-info {

display: inline-block;

}

.article__author-name {

font-weight: 700;

}

.article__author-role {

color: #53657d;
color: var(--darker-grey);
font-size: 0.9em;
line-height: 0.8em;

}

.article__author-description p:last-child {

margin-bottom: 0;

}

/* article list for blog and alike */ .article__preview {

margin: 0 auto;
padding: 1.5em;
padding: var(--space-m);

}

.article__preview + .article__preview {

margin-top: 2em;

}

.article__preview .article__author {

width: auto;
padding: 0;
margin-bottom: 1em;
margin-bottom: var(--space-s);

}

.article__preview .article__author img {

float: none;
vertical-align: middle;

}

.article__preview img + .article__author-name {

margin-left: 0.5em;
margin-left: var(--space-xs);

}

a.article__link {

color: #26353f;
color: var(--theme-dark-text);
text-decoration: none;

}

.article__title {

margin-bottom: 0;

}

.article__full .article__title, .article__full .article__meta {

color: #fff;
color: var(--theme-light-text);

}

.article__thumbnail {

width: 100%;
height: 200px;
overflow: hidden;
position: relative;
margin-top: 1em;
margin-top: var(--space-s);

}

.article__thumbnail img {

width: 100%;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
        transform: translateY(-50%);

}

@media (max-width: 549px) {

.article__container,
.article__hero .article__container {
  width: 85%;
  padding: 0;
}

.article__author-list {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.article__author-list .article__author {
  width: 100%;
  margin-left: 0;
}

.article__author-list .article__author + .article__author {
  margin-top: 1em;
  margin-top: var(--space-s);
  margin-left: 0;
}

}

.dashboard {

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
min-height: calc(100vh - 73px);

}

.dashboard .side-menu {

-webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
background: #fff;
background: var(--white);

}

.dashboard .side-menu ul {

margin-top: 0;
padding: 0;
list-style-type: none;

}

.dashboard .side-menu a {

padding: 1em 2em;
padding: var(--space-s) var(--space-l);
display: block;
width: 100%;
color: #26353f;
color: var(--theme-dark-text);
text-decoration: none;

}

.dashboard .side-menu a.active {

background: linear-gradient(to right, #0053b3, #0053b3 5px, #ebeff3 5px, #ebeff3);
background: linear-gradient(to right, var(--theme-primary), var(--theme-primary) 5px, var(--lighter-grey) 5px, var(--lighter-grey));

}

.dashboard .side-menu a:hover {

color: #0053b3;
color: var(--theme-primary);

}

.dashboard .main {

padding: 2em;
padding: var(--space-l);
-webkit-box-flex: 1;
    -ms-flex: 1 1 75%;
        flex: 1 1 75%;
background: #ebeff3;
background: var(--lighter-grey);

}

.dashboard .main > :first-child {

margin-top: 0;

}

@media (max-width: 749px) {

.dashboard {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

}

.documentation {

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

}

.side-pane {

padding: 2em 0;
padding: var(--space-l) 0;
-webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
        flex: 0 0 25%;
font-size: 14px;

}

.side-pane li {

list-style-type: none;

}

.side-pane h2 {

margin-top: 0;
padding: 0.5em;
padding: var(--space-xs);

}

.side-pane .side-pane__menu {

list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
float: right;

}

.side-pane__title h3 {

font-family: 'Source Sans Pro';
text-transform: uppercase;
padding-bottom: 1em;
padding-bottom: var(--space-s);
border-bottom: 1px solid #adb9c9;
border-bottom: 1px solid var(--theme-border);
font-weight: 400;
font-size: 1em;

}

.side-pane a {

padding: 0.5em 0;
padding: var(--space-xs) 0;
display: block;
width: 100%;
border-radius: 3px;
border-radius: var(--theme-border-radius);
color: #26353f;
color: var(--theme-dark-text);
text-decoration: none;

}

.side-pane a:hover {

text-decoration: underline;
background: 0;

}

.side-pane li.side-pane__dropdown > a {

background: url("images/icons/external/arrow-right.svg") no-repeat;
background-position: center right 1em;
background-position: center right var(--space-s);
background-size: 15px 15px;

}

.side-pane li.side-pane__dropdown > a:hover {

background: url("images/icons/external/arrow-right.svg") no-repeat;
background-position: center right 1em;
background-position: center right var(--space-s);
background-size: 15px 15px;
text-decoration: underline;

}

.side-pane li.unfolded.side-pane__dropdown > a, .side-pane li.unfolded.side-pane__dropdown > a:hover {

background-image: url("images/icons/external/arrow-down.svg");

}

.side-pane li.active.side-pane__dropdown a {

font-weight: 700;

}

.side-pane__dropdown.unfolded .side-pane__submenu {

display: block;

}

.side-pane__submenu {

padding-left: 1em;
padding-left: var(--space-s);
display: none;

}

.side-pane__submenu a, .side-pane__submenu a:visited {

padding: 0.5em;
padding: var(--space-xs);
list-style-type: none;
color: #53657d;
color: var(--darker-grey);
border-radius: 3px;
border-radius: var(--theme-border-radius);
text-decoration: none;
display: inline-block;

}

.side-pane__submenu li.active {

color: #0053b3;
color: var(--theme-primary);

}

.side-pane__submenu li.active a {

font-weight: 700;
color: #0053b3;
color: var(--theme-primary);

}

.main-pane {

padding: 3em;
padding: var(--space-xl);
background: #fff;
background: var(--white);
-webkit-box-flex: 1;
    -ms-flex: 1;
        flex: 1;

}

.main-pane h1:first-child {

margin-top: 0;

}

@media (max-width: 749px) {

.documentation {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.side-pane {
  border-right: none;
  border-bottom: 1px solid #c9d3df;
  border-bottom: 1px solid var(--theme-border-lighter);
  -webkit-box-flex: 1;
      -ms-flex: auto;
          flex: auto;
}

.side-pane .side-pane__menu {
  max-width: unset;
  float: none;
}

.main-pane,
.side-pane {
  padding-left: 0;
  padding-right: 0;
}

}

@media (min-width: 1000px) {

.main-pane .markdown {
  width: 80%;
}

.side-pane {
  padding: 3em 0;
  padding: var(--space-xl) 0;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 20rem;
          flex: 0 0 20rem;
}

}

/* helpers for evertyhing else */ .text-left {

text-align: left;

}

.text-center {

text-align: center;

}

.text-right {

text-align: right;

}

.text-blue {

color: #0053b3;
color: var(--blue);

}

.text-grey-lightest {

color: #fafbfc;
color: var(--lightest-grey);

}

.text-grey-lighter {

color: #ebeff3;
color: var(--lighter-grey);

}

.text-grey-light {

color: #c9d3df;
color: var(--light-grey);

}

.text-grey {

color: #adb9c9;
color: var(--grey);

}

.text-grey-dark {

color: #8393a7;
color: var(--dark-grey);

}

.text-grey-darker {

color: #53657d;
color: var(--darker-grey);

}

.text-grey-darkest {

color: #26353f;
color: var(--darkest-grey);

}

.text-black {

color: #1c1c1c;
color: var(--black);

}

.text-green {

color: #03bd5b;
color: var(--green);

}

.text-orange {

color: #ff9947;
color: var(--orange);

}

.text-red {

color: #d63626;
color: var(--red);

}

.row {

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
-webkit-box-align: stretch;
    -ms-flex-align: stretch;
        align-items: stretch;
margin-left: -var(--space-s);
margin-right: -var(--space-s);
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;

}

.row > * {

max-width: 50em;

}

.row > * + * {

margin-left: 1.5em;
margin-left: var(--space-m);

}

@media (max-width: 749px) {

.row {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.row > * + * {
  margin-left: 0;
  margin-top: 1.5em;
  margin-top: var(--space-m);
}

}

.grid {

display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 1em;
grid-gap: var(--space-s);
margin-top: 1em;
margin-top: var(--space-s);
justify-items: center;
-webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
        justify-content: space-evenly;

}

.grid .panel + .panel, .grid .card + .card {

margin: 0;

}

.typography__sample {

margin-top: 2em;
margin-top: var(--space-l);

}

.typography__sample > * {

display: inline;
margin: 0;

}

.typography__caption {

margin-left: 1em;
margin-left: var(--space-s);

}

.text-quote {

display: block;

}

.color-panel {

display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
margin-bottom: 2em;
margin-bottom: var(--space-l);

}

.color-panel__block {

margin-bottom: 1em;
margin-bottom: var(--space-s);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;

}

.color-panel__sample {

margin-right: 1em;
margin-right: var(--space-s);
width: 50px;
height: 50px;
border-radius: 2px;
vertical-align: middle;

}

.color-panel__description {

padding: 0.5em 0;
padding: var(--space-xs) 0;
vertical-align: middle;

}

.color-panel__name {

font-family: 'Evolventa';
font-weight: 700;
margin: 0;

}

.color-panel__sample-double {

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
border-radius: 2px;
overflow: hidden;
margin-right: 1em;

}

.color-panel__sample-double .color-panel__sample {

border-radius: 0;
margin-right: 0;

}

/* color blocks */ .color-panel__sample.primary-medium {

background: #0053b3;
background: var(--blue);

}

.color-panel__sample.primary-light {

background: #006be6;
background: var(--light-blue);

}

.color-panel__sample.primary-dark {

background: #003b80;
background: var(--dark-blue);

}

.color-panel__sample.primary-darker {

background: #00234d;
background: var(--darker-blue);

}

.color-panel__sample.white {

background: #fff;
background: var(--white);
border: 1px solid #c9d3df;
border: 1px solid var(--theme-border-lighter);

}

.color-panel__sample.lighter-grey {

background: #ebeff3;
background: var(--lighter-grey);

}

.color-panel__sample.light-grey {

background: #c9d3df;
background: var(--light-grey);

}

.color-panel__sample.grey {

background: #adb9c9;
background: var(--grey);

}

.color-panel__sample.dark-grey {

background: #8393a7;
background: var(--dark-grey);

}

.color-panel__sample.darker-grey {

background: #53657d;
background: var(--darker-grey);

}

.color-panel__sample.almost-black {

background: #26353f;
background: var(--darkest-grey);

}

.color-panel__sample.black {

background: #1c1c1c;
background: var(--black);

}

.color-panel__sample.green {

background: #03bd5b;
background: var(--green);

}

.color-panel__sample.light-green {

background: #daf5e7;
background: var(--light-green);

}

.color-panel__sample.orange {

background: #ff9947;
background: var(--orange);

}

.color-panel__sample.light-orange {

background: #fff0e4;
background: var(--light-orange);

}

.color-panel__sample.red {

background: #d63626;
background: var(--red);

}

.color-panel__sample.light-red {

background: rgba(239,172,166,0.45882);
background: var(--light-red);

}

.color-panel__sample.blue {

background: #0053b3;
background: var(--blue);

}

.color-panel__sample.light-blue {

background: #b4e1fa;
background: var(--lighter-blue);

}

documentation {

border-top: 1px solid #c9d3df;
border-top: 1px solid var(--theme-border-lighter);
border-bottom: 1px solid #c9d3df;
border-bottom: 1px solid var(--theme-border-lighter);

}

@media (max-width: 749px) {

.color-panel {
  grid-template-columns: 1fr;
}

}

.dashboard {

border-top: 1px solid #adb9c9;
border-top: 1px solid var(--theme-border);
border-bottom: 1px solid #adb9c9;
border-bottom: 1px solid var(--theme-border);

}

.cards {

margin-top: 3em;
margin-top: var(--space-xl);

}

.form__group + .button {

margin-top: 1em;
margin-top: var(--space-s);

}

.light-background {

background-color: #fff;
background-color: var(--white);
padding: 0 1em;
padding: 0 var(--space-s);

}

.dark-background {

background-color: #00234d;
background-color: var(--darker-blue);
padding: 1em;
padding: var(--space-s);

}

form {

margin-top: 2em;
margin-top: var(--space-l);

}