@charset "UTF-8";
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

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

@font-face {
  font-family: "Lato";
  src: local("Lato Regular"), local("Lato-Regular"), url("/assets/fonts/Lato-Regular-183bf2570509b4588f48227a1799c1bc.woff2?vsn=d") format("woff2"), url("/assets/fonts/Lato-Regular-01f09144fb08c2185c04b46601a6894d.woff?vsn=d") format("woff"), url("/assets/fonts/Lato-Regular-baec1062903ba290a634b03d7a0caba5.ttf?vsn=d") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Lato";
  src: local("Lato Bold Italic"), local("Lato-BoldItalic"), url("/assets/fonts/Lato-BoldItalic-405d0a4b2918e32e8091abaa52351e86.woff2?vsn=d") format("woff2"), url("/assets/fonts/Lato-BoldItalic-d3b517b62bcaaeb19c1df06783778cac.woff?vsn=d") format("woff"), url("/assets/fonts/Lato-BoldItalic-cceb0eb0e715e69c5a677ad24028ea42.ttf?vsn=d") format("truetype");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "Lato";
  src: local("Lato Bold"), local("Lato-Bold"), url("/assets/fonts/Lato-Bold-061b572d02df38e00fc9978034ac09b8.woff2?vsn=d") format("woff2"), url("/assets/fonts/Lato-Bold-d0549ba90a0800d86d585f1e63df52b3.woff?vsn=d") format("woff"), url("/assets/fonts/Lato-Bold-cd5a66f4f219abfb4bbc35c3661d726a.ttf?vsn=d") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Lato";
  src: local("Lato Black Italic"), local("Lato-BlackItalic"), url("/assets/fonts/Lato-BlackItalic-44f72684a0c3a951e23a8b3d7146c5a0.woff2?vsn=d") format("woff2"), url("/assets/fonts/Lato-BlackItalic-5ac8681f3c56d3d451f23fe1e7e7dbdb.woff?vsn=d") format("woff"), url("/assets/fonts/Lato-BlackItalic-242ab22fe67d38c368c6573e9315d787.ttf?vsn=d") format("truetype");
  font-weight: 900;
  font-style: italic;
}
@font-face {
  font-family: "Lato Hairline";
  src: local("Lato-HairlineItalic"), url("/assets/fonts/Lato-HairlineItalic-806a23612855abbc644758fd6515d078.woff2?vsn=d") format("woff2"), url("/assets/fonts/Lato-HairlineItalic-908a5dcc686441e1734969f1299d3ccc.woff?vsn=d") format("woff"), url("/assets/fonts/Lato-HairlineItalic-8e789607dc27b17e872d63265b63012f.ttf?vsn=d") format("truetype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Lato";
  src: local("Lato-Light"), url("/assets/fonts/Lato-Light-430ede9411a6b387ff3bb4b773e8fd97.woff2?vsn=d") format("woff2"), url("/assets/fonts/Lato-Light-ff57e51d77dc76db583c2e6db4a97d81.woff?vsn=d") format("woff"), url("/assets/fonts/Lato-Light-b60339d97bb696503035692171bc71dc.ttf?vsn=d") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Lato";
  src: local("Lato Black"), local("Lato-Black"), url("/assets/fonts/Lato-Black-82a01171d41f40fd25e99422a83498a4.woff2?vsn=d") format("woff2"), url("/assets/fonts/Lato-Black-868e2959f597920bea2b158239416886.woff?vsn=d") format("woff"), url("/assets/fonts/Lato-Black-105525226deeee6696ff95d1fed883b6.ttf?vsn=d") format("truetype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Lato";
  src: local("Lato-LightItalic"), url("/assets/fonts/Lato-LightItalic-756ac246929586ba572356e0181a19ec.woff2?vsn=d") format("woff2"), url("/assets/fonts/Lato-LightItalic-a361e58e00741b26002de366c9245c9c.woff?vsn=d") format("woff"), url("/assets/fonts/Lato-LightItalic-269a8263dd056cd7c9a9a2aa32f99ef5.ttf?vsn=d") format("truetype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Lato";
  src: local("Lato Italic"), local("Lato-Italic"), url("/assets/fonts/Lato-Italic-434e95e4cb4049640d29333d493fcba1.woff2?vsn=d") format("woff2"), url("/assets/fonts/Lato-Italic-e8894044bc84237cb48dc6f8a991200e.woff?vsn=d") format("woff"), url("/assets/fonts/Lato-Italic-aa6c0d9021f3eaaeb63759c177bf933c.ttf?vsn=d") format("truetype");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Lato Hairline";
  src: local("Lato-Hairline"), url("/assets/fonts/Lato-Hairline-b52fc58b419ba041390fc4120bb2943d.woff2?vsn=d") format("woff2"), url("/assets/fonts/Lato-Hairline-8524a9e38cf85e2d12e0c8d2ca54e876.woff?vsn=d") format("woff"), url("/assets/fonts/Lato-Hairline-1f88e1cc70382ac1bff7b6e328c3185d.ttf?vsn=d") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Fira Sans";
  src: local("Fira Sans ExtraBold Italic"), local("FiraSans-ExtraBoldItalic"), url("/assets/fonts/FiraSans-ExtraBoldItalic-834198d6637361332b846949a79237fb.woff2?vsn=d") format("woff2"), url("/assets/fonts/FiraSans-ExtraBoldItalic-c539b4f1ad5b3f2f5034553b3d490364.woff?vsn=d") format("woff"), url("/assets/fonts/FiraSans-ExtraBoldItalic-7329d0502addd7e4009d4c5499827c14.ttf?vsn=d") format("truetype");
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: "Fira Sans";
  src: local("Fira Sans Medium Italic"), local("FiraSans-MediumItalic"), url("/assets/fonts/FiraSans-MediumItalic-717dc02c8a73abcb4a3688ada32dd3ec.woff2?vsn=d") format("woff2"), url("/assets/fonts/FiraSans-MediumItalic-1f856c4762f2f43f7ffe0c334403e8e1.woff?vsn=d") format("woff"), url("/assets/fonts/FiraSans-MediumItalic-eb6204c71ee941151a96f7024e4a9180.ttf?vsn=d") format("truetype");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Fira Sans";
  src: local("Fira Sans SemiBold"), local("FiraSans-SemiBold"), url("/assets/fonts/FiraSans-SemiBold-7cd1c177a920985fd738d6547dba3ec2.woff2?vsn=d") format("woff2"), url("/assets/fonts/FiraSans-SemiBold-7960f02b0df697d517d610dfe154533c.woff?vsn=d") format("woff"), url("/assets/fonts/FiraSans-SemiBold-c0df432e5ff2e12b7770ec4c490343c7.ttf?vsn=d") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Fira Sans";
  src: local("Fira Sans Light Italic"), local("FiraSans-LightItalic"), url("/assets/fonts/FiraSans-LightItalic-38a014e981d64c76679a0136659f7a8b.woff2?vsn=d") format("woff2"), url("/assets/fonts/FiraSans-LightItalic-91f9c3f6c6f0520b7592bce12ecbb7a2.woff?vsn=d") format("woff"), url("/assets/fonts/FiraSans-LightItalic-0b790ca9ab9c64f2c3f12bf45a36799d.ttf?vsn=d") format("truetype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Fira Sans";
  src: local("Fira Sans Bold Italic"), local("FiraSans-BoldItalic"), url("/assets/fonts/FiraSans-BoldItalic-2b0dcb68fdd7c3a050058f8bd0ed7f1a.woff2?vsn=d") format("woff2"), url("/assets/fonts/FiraSans-BoldItalic-0441a119955c7904507af974dab76429.woff?vsn=d") format("woff"), url("/assets/fonts/FiraSans-BoldItalic-4c7053ceb5c32edd1b3a5bea59593e4a.ttf?vsn=d") format("truetype");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "Fira Sans";
  src: local("Fira Sans SemiBold Italic"), local("FiraSans-SemiBoldItalic"), url("/assets/fonts/FiraSans-SemiBoldItalic-92d0f776eecda8b5068e50030e04427e.woff2?vsn=d") format("woff2"), url("/assets/fonts/FiraSans-SemiBoldItalic-0461990dc862da47814a4b5573c23e46.woff?vsn=d") format("woff"), url("/assets/fonts/FiraSans-SemiBoldItalic-d2d60d6c52fb764c1e269f05fce01b3e.ttf?vsn=d") format("truetype");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Fira Sans";
  src: local("Fira Sans ExtraBold"), local("FiraSans-ExtraBold"), url("/assets/fonts/FiraSans-ExtraBold-47544ec8a7efe90a51abbde3ddf3fe7d.woff2?vsn=d") format("woff2"), url("/assets/fonts/FiraSans-ExtraBold-ce26f4bb49e54f5e4f43c406f83a2cea.woff?vsn=d") format("woff"), url("/assets/fonts/FiraSans-ExtraBold-9bb922dcf92d1bb68bc177bdea325984.ttf?vsn=d") format("truetype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Fira Sans";
  src: local("Fira Sans Medium"), local("FiraSans-Medium"), url("/assets/fonts/FiraSans-Medium-aae002dad09b4fdd77953195ebb09719.woff2?vsn=d") format("woff2"), url("/assets/fonts/FiraSans-Medium-b8774755fdbd1f7a46caef83842d8a0e.woff?vsn=d") format("woff"), url("/assets/fonts/FiraSans-Medium-4957e842d0ebfc378c8a46552e98a24e.ttf?vsn=d") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Fira Sans";
  src: local("Fira Sans Thin"), local("FiraSans-Thin"), url("/assets/fonts/FiraSans-Thin-153c17d1e6954734cfa9e492d5067881.woff2?vsn=d") format("woff2"), url("/assets/fonts/FiraSans-Thin-e77cfd279d90a37d537ea80204d1dc60.woff?vsn=d") format("woff"), url("/assets/fonts/FiraSans-Thin-eda5f47ffe05250788abe0a60fd166fd.ttf?vsn=d") format("truetype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Fira Sans";
  src: local("Fira Sans Black Italic"), local("FiraSans-BlackItalic"), url("/assets/fonts/FiraSans-BlackItalic-bb5adaae3d3b79b5daa422f0b6762133.woff2?vsn=d") format("woff2"), url("/assets/fonts/FiraSans-BlackItalic-5b88fe95297070f442626ff715a95655.woff?vsn=d") format("woff"), url("/assets/fonts/FiraSans-BlackItalic-fc86dfe10d1a9e1760f25515dff69706.ttf?vsn=d") format("truetype");
  font-weight: 900;
  font-style: italic;
}
@font-face {
  font-family: "Fira Sans";
  src: local("Fira Sans Bold"), local("FiraSans-Bold"), url("/assets/fonts/FiraSans-Bold-2ea89a9036c725be26bb730c7725ccd4.woff2?vsn=d") format("woff2"), url("/assets/fonts/FiraSans-Bold-a0fcd9db53cd414c879f2b359dc4b5f9.woff?vsn=d") format("woff"), url("/assets/fonts/FiraSans-Bold-f28b3e88aa906f4aad34406cba2f2133.ttf?vsn=d") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Fira Sans";
  src: local("Fira Sans Light"), local("FiraSans-Light"), url("/assets/fonts/FiraSans-Light-7e4d6a70451b70fdd97d28d534dcf5a3.woff2?vsn=d") format("woff2"), url("/assets/fonts/FiraSans-Light-1274d1e5249327482a7e2ecce8fd249a.woff?vsn=d") format("woff"), url("/assets/fonts/FiraSans-Light-a32e5f31c747c924ae89fb87d6afbfd7.ttf?vsn=d") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Fira Sans";
  src: local("Fira Sans Thin Italic"), local("FiraSans-ThinItalic"), url("/assets/fonts/FiraSans-ThinItalic-691d0de930f456536d1e18a9397f03b6.woff2?vsn=d") format("woff2"), url("/assets/fonts/FiraSans-ThinItalic-cce85a485fbfcc9e3d40d5d2d94da9da.woff?vsn=d") format("woff"), url("/assets/fonts/FiraSans-ThinItalic-fbe9416a788a86cfe9fa2c3f30cd6f4d.ttf?vsn=d") format("truetype");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: "Fira Sans";
  src: local("Fira Sans ExtraLight Italic"), local("FiraSans-ExtraLightItalic"), url("/assets/fonts/FiraSans-ExtraLightItalic-93c3788b54bf6a409ba7c9314fbb2eb3.woff2?vsn=d") format("woff2"), url("/assets/fonts/FiraSans-ExtraLightItalic-c65ceafc5551241d61dd122e3fec9952.woff?vsn=d") format("woff"), url("/assets/fonts/FiraSans-ExtraLightItalic-9b49a072c2017cb5281aff5df3f37ea8.ttf?vsn=d") format("truetype");
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: "Fira Sans";
  src: local("Fira Sans Black"), local("FiraSans-Black"), url("/assets/fonts/FiraSans-Black-e0a46599bd15f2e53a5544e1947ccf34.woff2?vsn=d") format("woff2"), url("/assets/fonts/FiraSans-Black-40046011d478388b0ea863b60da1b2ec.woff?vsn=d") format("woff"), url("/assets/fonts/FiraSans-Black-e80c80714b011f8e81ba091f8842a023.ttf?vsn=d") format("truetype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Fira Sans";
  src: local("Fira Sans ExtraLight"), local("FiraSans-ExtraLight"), url("/assets/fonts/FiraSans-ExtraLight-b276abee14c8e1fdd2e95eb87f13b6a8.woff2?vsn=d") format("woff2"), url("/assets/fonts/FiraSans-ExtraLight-7e67d9c47ded7a8c0f8cdf5141c86ddf.woff?vsn=d") format("woff"), url("/assets/fonts/FiraSans-ExtraLight-9c0d2c27c5d4f102b234422955748113.ttf?vsn=d") format("truetype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Fira Sans";
  src: local("Fira Sans Italic"), local("FiraSans-Italic"), url("/assets/fonts/FiraSans-Italic-a6640fab2db689590f73955ee72f7b2a.woff2?vsn=d") format("woff2"), url("/assets/fonts/FiraSans-Italic-9c1bdda4fda94d97d1bdf8176e777f39.woff?vsn=d") format("woff"), url("/assets/fonts/FiraSans-Italic-4469a2912e5e0c5082cf25a4e125d459.ttf?vsn=d") format("truetype");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Fira Sans";
  src: local("Fira Sans Regular"), local("FiraSans-Regular"), url("/assets/fonts/FiraSans-Regular-f0174813bf7aa58b0a25164ebe296f62.woff2?vsn=d") format("woff2"), url("/assets/fonts/FiraSans-Regular-0faa5d859b8e918ed8fbbb38e752a181.woff?vsn=d") format("woff"), url("/assets/fonts/FiraSans-Regular-62b33211e4dbe8a85dd6e88c70076812.ttf?vsn=d") format("truetype");
  font-weight: normal;
  font-style: normal;
}
body {
  background-color: #fff;
  font-family: "Fira Sans", "Arial", sans-serif;
  font-weight: 400;
  line-height: 1.45;
  color: #000;
  font-size: 0.9em;
}
@media (min-width: 480px) {
  body {
    font-size: 0.95em;
  }
}
@media (min-width: 768px) {
  body {
    font-size: 1em;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Lato", "Helvetica", "Arial", sans-serif;
}

p {
  margin-bottom: 1.3em;
}
p:first-child {
  margin-top: 0;
}

h1,
h2,
h3,
h4 {
  margin: 1.414rem 0 0.5em;
  font-weight: inherit;
  line-height: 1.2;
}

h1 {
  font-size: 1.95rem;
}
@media (min-width: 480px) {
  h1 {
    font-size: 2.55rem;
  }
}
@media (min-width: 768px) {
  h1 {
    font-size: 3rem;
  }
}
h1 {
  margin-top: 0.5em;
}

h2 {
  font-size: 1.53985rem;
}
@media (min-width: 480px) {
  h2 {
    font-size: 2.01365rem;
  }
}
@media (min-width: 768px) {
  h2 {
    font-size: 2.369rem;
  }
}

h3 {
  font-size: 1.15505rem;
}
@media (min-width: 480px) {
  h3 {
    font-size: 1.51045rem;
  }
}
@media (min-width: 768px) {
  h3 {
    font-size: 1.777rem;
  }
}

h4 {
  font-size: 1rem;
}
@media (min-width: 480px) {
  h4 {
    font-size: 1.13305rem;
  }
}
@media (min-width: 768px) {
  h4 {
    font-size: 1.333rem;
  }
}

h5 {
  font-size: 1rem;
}
@media (min-width: 480px) {
  h5 {
    font-size: 1.0387rem;
  }
}
@media (min-width: 768px) {
  h5 {
    font-size: 1.222rem;
  }
}

h6 {
  font-size: 1rem;
}
@media (min-width: 480px) {
  h6 {
    font-size: 1rem;
  }
}
@media (min-width: 768px) {
  h6 {
    font-size: 1.111rem;
  }
}

small,
.font-small {
  font-size: 0.75em;
}

.text-center {
  text-align: center;
}

a {
  color: rgb(105.6137931034, 109.0206896552, 141.3862068966);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:visited {
  color: rgb(105.6137931034, 109.0206896552, 141.3862068966);
}

.has-error {
  color: #980000;
}

code {
  color: #000;
  background-color: rgb(221.2275862069, 222.0413793103, 229.7724137931);
  padding: 2px;
  border: 1px solid #3e4053;
  border-radius: 3px;
  white-space: nowrap;
}

pre {
  display: table;
  table-layout: fixed;
  width: 100%;
  background-color: rgb(221.2275862069, 222.0413793103, 229.7724137931);
  padding: 10px;
  border-radius: 5px;
  overflow-x: auto;
}
pre > code,
pre > kbd {
  white-space: pre-wrap;
  word-wrap: break-word;
  border: 0;
  padding: 0;
}

.paragraph-img {
  max-width: 360px;
  margin: 10px;
  margin-right: 0;
  float: right;
}
.paragraph-img.float-left {
  float: left;
  margin-right: 10px;
  margin-left: 0;
}

#ie-warning {
  display: none;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  #ie-warning {
    display: block;
  }
}

img.avatar {
  border-radius: 15%;
}

form:not(.no-form-style) {
  display: grid;
  grid: auto/auto;
}
form:not(.no-form-style) > input,
form:not(.no-form-style) > textarea,
form:not(.no-form-style) > .input {
  margin-bottom: 20px;
}
@media (min-width: 480px) {
  form:not(.no-form-style) {
    grid: auto/1fr 2fr;
    grid-gap: 20px 20px;
  }
  form:not(.no-form-style) > input,
  form:not(.no-form-style) > textarea,
  form:not(.no-form-style) > .input {
    align-self: start;
    justify-self: start;
  }
  form:not(.no-form-style) > input[type=checkbox],
  form:not(.no-form-style) > textarea[type=checkbox],
  form:not(.no-form-style) > .input[type=checkbox] {
    margin-top: 5px;
  }
  form:not(.no-form-style) > .input {
    width: 100%;
  }
  form:not(.no-form-style) > label {
    text-align: right;
    align-self: start;
  }
  form:not(.no-form-style) > .description {
    grid-column-start: span 2;
    text-align: left;
  }
  form:not(.no-form-style) > .submit {
    grid-column-start: 2;
    text-align: left;
    margin-bottom: 40px;
  }
}
form:not(.no-form-style) input[type=text],
form:not(.no-form-style) input[type=password],
form:not(.no-form-style) input[type=tel],
form:not(.no-form-style) input[type=email],
form:not(.no-form-style) input[type=number],
form:not(.no-form-style) input[type=number],
form:not(.no-form-style) input[type=datetime-local],
form:not(.no-form-style) input[type=month],
form:not(.no-form-style) input[type=search],
form:not(.no-form-style) input[type=time],
form:not(.no-form-style) input[type=url],
form:not(.no-form-style) input[type=week],
form:not(.no-form-style) input[type=date],
form:not(.no-form-style) textarea {
  width: 100%;
  max-width: 300px;
}

input[type=text],
input[type=password],
input[type=tel],
input[type=email],
input[type=number],
input[type=number],
input[type=datetime-local],
input[type=month],
input[type=search],
input[type=time],
input[type=url],
input[type=week],
input[type=date],
textarea {
  padding: 5px;
}

button,
a.button {
  padding: 10px 20px;
  color: #fcfcfe;
  background-color: #3e4053;
  border: 1px solid #3e4053;
  box-shadow: 1px 1px 1px #000;
  border-radius: 5px;
}
button:not(:disabled):active,
a.button:not(:disabled):active {
  padding: 11px 19px 9px 21px;
  box-shadow: inset 1px 1px 1px #000;
}
button.button-info,
a.button.button-info {
  background-color: rgb(142.8904109589, 210.8356164384, 243.1095890411);
  color: rgb(12.5616438356, 84.3424657534, 118.4383561644);
  border-color: rgb(142.8904109589, 210.8356164384, 243.1095890411);
}
button.button-warning,
a.button.button-warning {
  background-color: rgb(253.3376623377, 228.4025974026, 128.6623376623);
  color: rgb(125.3506493506, 100.6103896104, 1.6493506494);
  border-color: rgb(253.3376623377, 228.4025974026, 128.6623376623);
}
button.button-danger,
a.button.button-danger {
  background-color: #ff9898;
  color: #980000;
  border-color: #ff9898;
}
button.button-pressed,
a.button.button-pressed {
  box-shadow: inset 1px 1px 1px #000;
}
button.icon-button,
a.button.icon-button {
  background-color: #fff;
  padding: 0;
  color: #000;
  margin-left: 5px;
  line-height: 0;
}
button.icon-button svg,
a.button.icon-button svg {
  width: 32px;
  height: 32px;
}
button:disabled,
a.button:disabled {
  color: #fff;
  background-color: #bbb;
  border-color: #bbb;
  cursor: not-allowed;
}

.stripe.flash-stripe {
  background-color: #bde5f8;
  color: rgb(12.5616438356, 84.3424657534, 118.4383561644);
}
.stripe.flash-stripe::before {
  content: "ℹ️ ";
}
.stripe.flash-stripe {
  grid-area: flash;
  padding-top: 20px;
  padding-bottom: 20px;
}
.stripe.flash-stripe:empty {
  display: none;
}
.stripe.flash-stripe.flash-success {
  background-color: #dff2bf;
  color: rgb(74.2207792208, 105.5584415584, 21.4415584416);
}
.stripe.flash-stripe.flash-success::before {
  content: "✅ ";
}
.stripe.flash-stripe.flash-error {
  background-color: #ffcbcb;
  color: #980000;
}
.stripe.flash-stripe.flash-error::before {
  content: "❌ ";
}

.alert {
  background-color: #bde5f8;
  color: rgb(12.5616438356, 84.3424657534, 118.4383561644);
  border-color: rgb(12.5616438356, 84.3424657534, 118.4383561644);
}
.alert::before {
  content: "ℹ️ ";
}
.alert {
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
  border-width: 1px;
  border-style: dashed;
}
.alert.alert-success {
  background-color: #dff2bf;
  color: rgb(74.2207792208, 105.5584415584, 21.4415584416);
  border-color: rgb(74.2207792208, 105.5584415584, 21.4415584416);
}
.alert.alert-success::before {
  content: "✅ ";
}
.alert.alert-warning {
  background-color: #feefb3;
  color: rgb(125.3506493506, 100.6103896104, 1.6493506494);
  border-color: rgb(125.3506493506, 100.6103896104, 1.6493506494);
}
.alert.alert-warning::before {
  content: "⚠️ ";
}
.alert.alert-error {
  background-color: #ffcbcb;
  color: #980000;
  border-color: #980000;
}
.alert.alert-error::before {
  content: "❌ ";
}
.alert.alert-danger {
  background-color: #ffcbcb;
  color: #980000;
  border-color: #980000;
}
.alert.alert-danger::before {
  content: "🛑 ";
}

ul.tabs {
  list-style-type: none;
  margin: 0;
  padding-left: 0;
}
ul.tabs li {
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}
ul.tabs li.active {
  background-color: #3e4053;
  color: #fcfcfe;
}
ul.tabs li.active a {
  color: #becacd;
}
ul.tabs li.active a:visited {
  color: #becacd;
  text-decoration-style: dashed;
}
ul.tabs li.active h1,
ul.tabs li.active h2,
ul.tabs li.active h3,
ul.tabs li.active h4,
ul.tabs li.active h5,
ul.tabs li.active h6 {
  color: #fcfcfe;
}

#cookie-notice {
  background-color: #3e4053;
  color: #fcfcfe;
}
#cookie-notice a {
  color: #becacd;
}
#cookie-notice a:visited {
  color: #becacd;
  text-decoration-style: dashed;
}
#cookie-notice h1,
#cookie-notice h2,
#cookie-notice h3,
#cookie-notice h4,
#cookie-notice h5,
#cookie-notice h6 {
  color: #fcfcfe;
}
#cookie-notice {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
#cookie-notice button {
  margin-left: 20px;
}

/*
 * Base layout active on all pages.
 */
body {
  display: grid;
  grid: "nav" "flash" "main" "footer"/100%;
}

#nav-stripe {
  grid-area: nav;
  display: grid;
  grid: "logo" 1fr "header-nav" 0.5fr/auto;
}
@media (min-width: 480px) {
  #nav-stripe {
    grid: "logo header-nav"/auto 1fr;
  }
}
#nav-stripe > #header-logo {
  grid-area: logo;
}
#nav-stripe > #header-logo > img {
  display: block;
  max-height: 100px;
  width: auto;
  height: auto;
  margin: 0 auto;
}
#nav-stripe > #header-nav {
  grid-area: header-nav;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-left: 20px;
}
@media (min-width: 480px) {
  #nav-stripe > #header-nav {
    justify-content: flex-end;
  }
}
#nav-stripe > #header-nav > a {
  padding: 0 10px;
}

#flash-stripe {
  grid-area: flash;
}

main {
  grid-area: main;
}
main > section:last-of-type {
  padding-bottom: 20px;
}
main > section:last-of-type.last-section-no-padding {
  padding-bottom: 0;
}

#footer-stripe {
  grid-area: footer;
  padding-top: 20px;
  padding-bottom: 20px;
  display: grid;
  grid: auto auto auto/auto;
  grid-row-gap: 20px;
}
@media (min-width: 480px) {
  #footer-stripe {
    grid: auto/1fr 1fr 1fr;
    grid-column-gap: 20px;
  }
}
#footer-stripe > section {
  display: flex;
  flex-direction: column;
  align-items: left;
}

.stripe {
  background-color: #fff;
  padding: 0 10px;
}
.stripe.stripe-accent {
  background-color: #3e4053;
  color: #fcfcfe;
}
.stripe.stripe-accent a {
  color: #becacd;
}
.stripe.stripe-accent a:visited {
  color: #becacd;
  text-decoration-style: dashed;
}
.stripe.stripe-accent h1,
.stripe.stripe-accent h2,
.stripe.stripe-accent h3,
.stripe.stripe-accent h4,
.stripe.stripe-accent h5,
.stripe.stripe-accent h6 {
  color: #fcfcfe;
}
.stripe.stripe-warning {
  background-color: #feefb3;
  border-top: 1px dashed rgb(125.3506493506, 100.6103896104, 1.6493506494);
  border-bottom: 1px dashed rgb(125.3506493506, 100.6103896104, 1.6493506494);
}
.stripe.stripe-info {
  background-color: #bde5f8;
}
.stripe.stripe-content-padded {
  padding-top: 20px;
  padding-bottom: 20px;
}
.stripe.stripe-padded {
  padding-bottom: 40px;
}
.stripe.stripe-just-heading {
  padding-top: 20px;
  padding-bottom: 20px;
}
.stripe.stripe-just-heading h1,
.stripe.stripe-just-heading h2,
.stripe.stripe-just-heading h3,
.stripe.stripe-just-heading h4,
.stripe.stripe-just-heading h5,
.stripe.stripe-just-heading h6 {
  margin: 0;
}
@media (min-width: 1050px) {
  .stripe {
    padding: 0 calc((100% - 1000px) / 2);
  }
}

.no-margin {
  margin: 0;
}

.clear-both {
  clear: both;
}

/*
 * Layout for the frontpage.
 */
#frontpage-history-graph {
  position: relative;
  height: 160px;
  width: 100%;
}

#frontpage-ads {
  display: grid;
  grid: auto auto auto/auto;
  grid-row-gap: 20px;
}
@media (min-width: 480px) {
  #frontpage-ads {
    grid: auto/1fr 1fr 1fr;
    grid-column-gap: 20px;
  }
}

#global-user-map-graph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#global-user-map-graph #world-map-graph {
  flex: 3 1;
}
@media (min-width: 768px) {
  #global-user-map-graph {
    flex-direction: row;
  }
}

.plugin-icon-list {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
  align-items: center;
  text-align: center;
}
@media (min-width: 480px) {
  .plugin-icon-list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 768px) {
  .plugin-icon-list {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}
.plugin-icon-list picture, .plugin-icon-list img {
  max-width: 120px;
}

.plugin {
  margin: 40px 0;
  display: grid;
  grid: "title" "img" "desc"/1fr;
}
@media (min-width: 480px) {
  .plugin {
    grid: "img title" "img desc "/120px auto;
    grid-column-gap: 20px;
  }
  .plugin:nth-child(2n+1) {
    grid: "title img" "desc  img"/auto 120px;
    grid-column-gap: 20px;
  }
  .plugin:nth-child(2n+1) pre {
    text-align: left;
  }
}
.plugin > h2 {
  grid-area: title;
  margin-top: 0;
}
.plugin .plugin-description {
  grid-area: desc;
}
.plugin .plugin-image {
  grid-area: img;
  max-width: 120px;
}
.plugin .plugin-image > img {
  width: 100%;
}

.machine-list {
  margin-bottom: 40px;
}
.machine-list > .machine {
  display: grid;
  grid-template: "name" "key" "copy" "regen" "edit" "deact" "delete"/1fr;
  grid-gap: 20px;
}
@media (min-width: 480px) {
  .machine-list > .machine {
    grid-template: "name   name   name   name  " "key    key    key    copy  " "regen  edit   deact  delete"/1fr 1fr 1fr 1fr;
  }
}
.machine-list > .machine > h2 {
  grid-area: name;
}
.machine-list > .machine > .api-key-text {
  grid-area: key;
  display: grid;
  grid-template: auto/auto 1fr;
  grid-column-gap: 20px;
  align-items: center;
}
.machine-list > .machine > .api-key-text > input.api-key {
  font-family: monospace;
}
.machine-list > .machine > .copy-button {
  grid-area: copy;
}
.machine-list > .machine > .edit-form {
  grid-area: edit;
}
.machine-list > .machine > .regenerate-form {
  grid-area: regen;
}
.machine-list > .machine > .deactivate-form {
  grid-area: deact;
}
.machine-list > .machine > .delete-form {
  grid-area: delete;
}
.machine-list > .machine > form {
  grid-template: auto/auto;
}

.inactive-machine-list > .machine {
  display: grid;
  grid-template-columns: 1fr auto;
  margin-bottom: 1rem;
  align-items: center;
}

.aliases {
  display: grid;
  grid: auto/1fr 1fr 1fr;
}

#profile-user-info {
  display: grid;
  grid-template: "username" "total-progress" "profile-details"/auto;
  row-gap: 0;
  column-gap: 40px;
}
@media (min-width: 768px) {
  #profile-user-info {
    grid-template: "username         total-progress" "profile-details  total-progress"/auto 1fr;
    align-items: center;
  }
}
#profile-user-info > #profile-username {
  grid-area: username;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 0;
  margin-top: 5px;
}
#profile-user-info > #profile-username > img {
  height: 3rem;
  margin-right: 10px;
}
#profile-user-info > #profile-detail-list {
  grid-area: profile-details;
  list-style-type: none;
  padding-left: 0;
}
#profile-user-info > #total-progress {
  grid-area: total-progress;
}
#profile-user-info > #total-progress h2 {
  margin-top: 0;
}

#main-stats-container {
  margin-top: 40px;
  margin-bottom: 40px;
  width: 100%;
  display: grid;
  grid-template: "week-l" "top-l" "hour-x" "top-fl" "day-i" "top-f" "other-l" "top-m" "year-x" "expl"/auto;
  row-gap: 30px;
  column-gap: 20px;
}
@media (min-width: 768px) {
  #main-stats-container {
    grid-template: "week-l  week-l" "top-l   top-l" "hour-x  hour-x" "day-i   top-f" "top-fl  top-fl" "top-m   other-l" "year-x  year-x" "expl    expl"/1fr 1fr;
  }
  #main-stats-container section.top-flows + section.day-info {
    border-right: 1px solid #3e4053;
  }
}
#main-stats-container.show-ad {
  grid-template: "week-l" "ad" "top-l" "hour-x" "top-fl" "day-i" "top-f" "other-l" "top-m" "year-x" "expl"/auto;
}
@media (min-width: 768px) {
  #main-stats-container.show-ad {
    grid-template: "week-l  week-l  week-l  ad" "top-l   top-l   top-l   top-l" "hour-x  hour-x  hour-x  hour-x" "day-i   day-i   top-f   top-f" "top-fl  top-fl  top-fl  top-fl" "top-m   top-m   other-l other-l" "year-x  year-x  year-x  year-x" "expl    expl    expl    expl"/1fr 1fr 1fr auto;
  }
}
#main-stats-container h4 {
  margin-top: 0;
}
#main-stats-container .no-data {
  display: none;
}
#main-stats-container #main-stats-explainer {
  grid-area: expl;
  border-top: 1px solid #3e4053;
}

.stripe.contributors {
  padding-top: 30px;
  padding-bottom: 30px;
}
.stripe.contributors > h2 {
  grid-area: title;
  margin-top: 0;
}
.stripe.contributors > .contributors-list {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
}
@media (min-width: 480px) {
  .stripe.contributors > .contributors-list {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 768px) {
  .stripe.contributors > .contributors-list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.stripe.contributors > .contributors-list > div {
  text-align: center;
}
.stripe.contributors > .contributors-list > div img {
  width: 100%;
  max-width: 128px;
  height: auto;
  background-color: #fff;
}
.stripe.contributors > .contributors-list > div h3 {
  margin-top: 10px;
}
.stripe.contributors > .contributors-list > div > .subtitle {
  font-style: italic;
}
.stripe.contributors > .contributors-list > div p {
  margin: 5px 0;
}

div#export-data-processing {
  margin-top: 20px;
}

#preferences-stripe {
  display: grid;
  margin-bottom: 40px;
  grid-row-gap: 20px;
  grid-template: "title" "tabs" "prefs";
}
@media (min-width: 480px) {
  #preferences-stripe {
    grid-template: "title title" "tabs prefs"/1fr 3fr;
    grid-column-gap: 40px;
  }
}
#preferences-stripe h1 {
  grid-area: title;
}
#preferences-stripe #tab-container {
  grid-area: tabs;
}
#preferences-stripe #preferences-container {
  grid-area: prefs;
}
#preferences-stripe #preferences-container h2 {
  margin-top: 0;
}

#aliases-editor .alias-row {
  display: grid;
  grid-template-columns: 1fr min-content 1fr min-content;
  grid-template-rows: repeat(auto-fill, minmax(32px, auto));
  column-gap: 5px;
  row-gap: 5px;
  align-items: center;
  margin-top: 10px;
}
#aliases-editor .alias-row:first-child {
  margin-top: 0;
}
#aliases-editor .alias-row input {
  min-width: 0;
}
#aliases-editor .alias-row * {
  margin: 0;
  height: 32px;
  line-height: 32px;
}
#aliases-editor .alias-row p.has-error {
  grid-column: 1/span 4;
  line-height: unset;
  height: unset;
}
#aliases-editor #aliases-languages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  column-gap: 10px;
}
#aliases-editor #aliases-languages table {
  align-self: start;
}
#aliases-editor #aliases-languages table > thead > tr:last-child, #aliases-editor #aliases-languages table > tfoot {
  text-align: left;
}
#aliases-editor #aliases-languages td.language-name:hover {
  background-color: #3e4053;
  color: #fcfcfe;
  cursor: copy;
}
#aliases-editor #aliases-add {
  margin: 10px 0;
}
#aliases-editor #aliases-submit {
  margin: 10px 0 20px;
}

#consent-stripe {
  display: grid;
  grid-gap: 20px;
  grid-template: "tabs" "content" "accept";
}
@media (min-width: 768px) {
  #consent-stripe {
    grid-template: "tabs   content" "accept accept"/1fr 3fr;
  }
}
#consent-stripe #terms-tabs {
  grid-area: tabs;
}
#consent-stripe #current-terms, #consent-stripe #old-terms-diff {
  grid-area: content;
}
#consent-stripe #current-terms h2:first-of-type {
  margin-top: 0;
}
#consent-stripe #old-terms-diff {
  white-space: pre-wrap;
  font-family: monospace;
}
#consent-stripe #old-terms-diff p {
  margin: 0;
}
#consent-stripe #old-terms-diff .diff-added {
  background-color: #dff2bf;
}
#consent-stripe #old-terms-diff .diff-removed {
  background-color: #ffcbcb;
}
#consent-stripe #consent-form {
  grid-area: accept;
}

.gumroad-link {
  display: inline-block;
  padding: 20px;
  font-size: 1.2rem;
}
.gumroad-link .gumroad-name {
  font-size: 1.5rem;
  color: #ff90e8;
  font-variant-caps: small-caps;
}

div.loading-indicator {
  display: grid;
  grid-template: "loading  " "copy     " "indicator" 480px / auto;
  align-items: center;
  grid-gap: 10px;
}
div.loading-indicator .canvas-wrapper {
  grid-area: indicator;
  max-height: 480px;
  overflow-y: hidden;
}
div.loading-indicator .canvas-wrapper canvas#loading-profile {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}
div.loading-indicator .loading-text {
  grid-area: loading;
  text-align: center;
}
div.loading-indicator .loading-author {
  grid-area: copy;
  text-align: center;
}

#main-stats-container section button {
  background-color: #fff;
  padding: 0;
  color: #000;
  margin-left: 5px;
  line-height: 0;
}
#main-stats-container section button svg {
  width: 32px;
  height: 32px;
}

.circle-progress .circle-progress-bar {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.highlight-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 5px;
}
.highlight-row .highlight-row-heading {
  grid-column: 1/-1;
  text-align: left;
}
.highlight-row .highlight-row-item {
  display: grid;
  grid-template-areas: "desc" "val" "time";
}
.highlight-row .highlight-row-item > * {
  margin: 0;
}
.highlight-row .highlight-row-item-val {
  grid-area: val;
  font-size: 1.3rem;
}
@media (min-width: 480px) {
  .highlight-row .highlight-row-item-val {
    font-size: 1.7rem;
  }
}
@media (min-width: 768px) {
  .highlight-row .highlight-row-item-val {
    font-size: 2rem;
  }
}
.highlight-row .highlight-row-item-description {
  grid-area: desc;
}
.highlight-row .highlight-item-time {
  grid-area: time;
}

.hidden-fadeout {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.world-map {
  position: relative;
}
.world-map > .hero-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}
.world-map > .hero-title > h2 {
  font-style: italic;
}
.world-map > img {
  display: block;
  max-width: 100%;
}
.world-map > .pulses > .pulse-indicator {
  position: absolute;
  border-radius: 50%;
  background-color: #fff;
}

div.progress-bar {
  position: relative;
  width: 100%;
  height: 20px;
  background-color: #ddd;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
}
div.progress-bar > span.progress {
  display: block;
  height: 100%;
}
div.progress-bar > span.progress.progress-old {
  background-color: rgb(109.7628205128, 191.7371794872, 109.7628205128);
  border-radius: 5px 0 0 5px;
}
div.progress-bar > span.progress.progress-recent {
  background-color: rgb(241.9921875, 183.890625, 101.5078125);
  border-radius: 0 5px 5px 0;
}
div.progress-bar > span.progress {
  transition: width 0.2s ease-out;
}
div.progress-bar:not(.stacked) > span.progress {
  border-radius: 5px;
}
div.progress-bar > span.total-progress {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
}

.top-languages {
  grid-area: top-l;
  display: grid;
  grid-column-gap: 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .top-languages {
    grid-template-columns: 1fr 1fr;
  }
}
.top-languages .level-counter {
  margin-top: 1.414rem !important;
}

.other-languages {
  grid-area: other-l;
}

.top-machines {
  grid-area: top-m;
}
.top-machines .combined-level-progress {
  margin-bottom: 10px;
}
.top-machines .combined-level-progress .level-counter {
  margin-bottom: 0;
}

.year-xps {
  max-width: 100%;
  overflow-x: hidden;
  grid-area: year-x;
}
.year-xps div.table-container {
  max-width: 100%;
  overflow-x: auto;
}
.year-xps div.table-container table {
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: collapse;
  width: 972px;
}
.year-xps div.table-container table th, .year-xps div.table-container table td {
  width: 30px;
  text-align: center;
}
.year-xps div.table-container table th.small, .year-xps div.table-container table td.small {
  font-size: 0.8rem;
}
.year-xps div.table-container table th.today, .year-xps div.table-container table td.today {
  font-weight: bold;
  text-decoration: underline;
}
.year-xps div.table-container table th:first-child, .year-xps div.table-container table td:first-child {
  font-weight: bold;
  text-align: right;
  width: 42px;
  padding-right: 2px;
}

.week-languages {
  overflow: hidden;
  grid-area: week-l;
  height: 300px;
}
.week-languages #week-languages-dataset {
  display: none;
}
.week-languages #week-languages-chart {
  position: relative;
  height: 300px;
}
.week-languages #week-languages-chart > canvas {
  height: 300px !important;
}

.top-hours {
  grid-area: hour-x;
}
.top-hours h4 {
  text-align: center;
}
.top-hours #top-hours-dataset {
  display: none;
}
.top-hours .graph-container {
  position: relative;
}

.other-languages {
  grid-area: other-l;
}
.other-languages .show-all-link {
  display: block;
  margin: 10px auto 0 !important;
}
.other-languages ul {
  margin: 0;
  padding: 0;
  list-style-position: inside;
}

section.top-flows {
  grid-area: top-f;
}

section.day-info {
  grid-area: day-i;
}

section.top-flow-languages {
  grid-area: top-fl;
}
section.top-flow-languages .top-flow-languages-datalist {
  width: 100%;
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
section.top-flow-languages .top-flow-languages-datalist * {
  margin: 0;
}
section.top-flow-languages .top-flow-language {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  padding: 0;
  width: 100%;
  height: 60px;
}
section.top-flow-languages .top-flow-language .circle-progress {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
}
section.top-flow-languages .top-flow-language .circle-progress-content {
  flex: 0 0 65px;
  text-align: center;
}
section.top-flow-languages .top-flow-language .circle-progress-content p {
  font-size: 1rem;
}
@media (min-width: 480px) {
  section.top-flow-languages .top-flow-language .circle-progress-content p {
    font-size: 1.275rem;
  }
}
@media (min-width: 768px) {
  section.top-flow-languages .top-flow-language .circle-progress-content p {
    font-size: 1.5rem;
  }
}
section.top-flow-languages .top-flow-language .circle-progress-content p {
  height: 60px;
  line-height: 60px;
}
section.top-flow-languages .top-flow-language .top-flow-language-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
section.top-flow-languages .top-flow-language-amount {
  font-size: 1rem;
}
@media (min-width: 480px) {
  section.top-flow-languages .top-flow-language-amount {
    font-size: 1.02rem;
  }
}
@media (min-width: 768px) {
  section.top-flow-languages .top-flow-language-amount {
    font-size: 1.2rem;
  }
}

#profile-ad {
  grid-area: ad;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

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