/* ==========================================================================
  Styles for Routify Docs Website 2020
   ========================================================================== */
/* ==========================================================================
  Reset
   ========================================================================== */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

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

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

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

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

/* ==========================================================================
  s-fonts
   ========================================================================== */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter-Regular.woff2?v=3.11") format("woff2"), url("../fonts/Inter-Regular.woff?v=3.11") format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter-Italic.woff2?v=3.11") format("woff2"), url("../fonts/Inter-Italic.woff?v=3.11") format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Inter-Medium.woff2?v=3.11") format("woff2"), url("../fonts/Inter-Medium.woff?v=3.11") format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Inter-MediumItalic.woff2?v=3.11") format("woff2"), url("../fonts/Inter-MediumItalic.woff?v=3.11") format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Inter-SemiBold.woff2?v=3.11") format("woff2"), url("../fonts/Inter-SemiBold.woff?v=3.11") format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Inter-SemiBoldItalic.woff2?v=3.11") format("woff2"), url("../fonts/Inter-SemiBoldItalic.woff?v=3.11") format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Inter-Bold.woff2?v=3.11") format("woff2"), url("../fonts/Inter-Bold.woff?v=3.11") format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Inter-BoldItalic.woff2?v=3.11") format("woff2"), url("../fonts/Inter-BoldItalic.woff?v=3.11") format("woff");
}
/* overpass-regular - latin */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/overpass-v4-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local("Overpass Regular"), local("Overpass-Regular"), url("../fonts/overpass-v4-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/overpass-v4-latin-regular.woff2") format("woff2"), url("../fonts/overpass-v4-latin-regular.woff") format("woff"), url("../fonts/overpass-v4-latin-regular.ttf") format("truetype"), url("../fonts/overpass-v4-latin-regular.svg#Overpass") format("svg");
  /* Legacy iOS */
}
/* overpass-700 - latin */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/overpass-v4-latin-700.eot");
  /* IE9 Compat Modes */
  src: local("Overpass Bold"), local("Overpass-Bold"), url("../fonts/overpass-v4-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/overpass-v4-latin-700.woff2") format("woff2"), url("../fonts/overpass-v4-latin-700.woff") format("woff"), url("../fonts/overpass-v4-latin-700.ttf") format("truetype"), url("../fonts/overpass-v4-latin-700.svg#Overpass") format("svg");
  /* Legacy iOS */
}
/* ==========================================================================
   s-variables
   Prefixed with $g-
   ========================================================================== */
/* Semantic links to colors
   ========================================================================== */
/* Type
   ========================================================================== */
/* Breakpoints
   ========================================================================== */
/* Components
   =========================================================================== */
/* ==========================================================================
  e-base
  ---
  Only base element styling
   ========================================================================== */
*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

html {
  scroll-behavior: smooth;
  font-size: 50%;
}
@media (min-width: 900px) {
  html {
    font-size: 62.5%;
  }
}

body {
  border-top: 0.4rem solid #E938C2;
  background: #FFF;
  color: #4C5567;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.7;
  font-size: 1.6rem;
}

button, input {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* ==========================================================================
  Object: svg icon
   ========================================================================== */
.o-svg-icon--size-16,
.o-svg-icon--size-16 svg {
  width: 1.6rem;
  height: 1.6rem;
}

.o-svg-icon--size-18,
.o-svg-icon--size-18 svg {
  width: 1.8rem;
  height: 1.8rem;
}

.o-svg-icon--size-20,
.o-svg-icon--size-20 svg {
  width: 2rem;
  height: 2rem;
}

.o-svg-icon--size-24,
.o-svg-icon--size-24 svg {
  width: 2.4rem;
  height: 2.4rem;
}

/* ==========================================================================
  c-button
   ========================================================================== */
/* Variables
   ========================================================================== */
/* Component
   ========================================================================== */
.c-button {
  padding: 0.8rem 1.2rem;
  display: inline-flex;
  border-radius: 0.2rem;
  border: none;
  appearance: none;
  border-radius: 0.6rem;
  font-size: 1.6rem;
  align-items: center;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
a.c-button {
  text-decoration: none;
}

.c-button .o-svg-icon * {
  fill: currentColor;
}
.c-button .c-button__icon-wrap:first-child {
  margin-right: 0.4rem;
}
.c-button .c-button__icon-wrap:last-child {
  margin-left: 0.4rem;
}

/* Skin variants
 ========================================================================== */
.c-button--primary {
  background: #e938c2;
  color: #fff;
}
.c-button--primary:hover, .c-button--primary:focus {
  background: #ee66d0;
}
.c-button--primary:active {
  background: #d618ac;
}

.c-button--outline {
  padding: 0.7rem 1.1rem;
  border: 0.1rem solid #B2BACC;
  color: #4C5567;
}
.c-button--outline .svg-icon {
  margin: 0.2rem 0.6rem 0 0;
}
.c-button--outline .svg-icon * {
  fill: #4C5567;
}
.c-button--outline:hover {
  border-color: #4C5567;
}

/* Size variants
 ========================================================================== */
.c-button--large {
  padding: 1.2rem 2.4rem;
}

.c-button--small {
  font-size: 1.4rem;
  padding: 0.6rem 1rem;
}

/* ==========================================================================
  Button toolbar
  ========================================================================== */
.c-button-toolbar {
  list-style: none;
  padding: 0;
  display: flex;
}
.c-button-toolbar .c-button {
  margin-right: 0.4rem;
}

.c-button-toolbar .c-button:last-child {
  margin-right: 0;
}

.c-blogpost > header h1, .c-blogpost > header h2 {
  font-size: 4.8rem;
  font-weight: 700;
  font-family: "Overpass", sans-serif;
}
.c-blogpost > header h1 a, .c-blogpost > header h2 a {
  text-decoration: none;
  color: #1D2C48;
}
.c-blogpost-list .c-blogpost > header h1, .c-blogpost-list .c-blogpost > header h2 {
  font-size: 3.2rem;
}

.c-blogpost > header p {
  color: #8D97AA;
}

.c-blogpost > header {
  margin-bottom: 2.4rem;
}

.c-blogpost.c-content h1, .c-blogpost.c-content h2, .c-blogpost.c-content h3 {
  margin-top: 4.8rem;
}
.c-blogpost.c-content h4 {
  margin-top: 3.2rem;
}
.c-blogpost.c-content h5 {
  margin-top: 2.8rem;
}

/* ==========================================================================
  c-blogpost-layout  
   ========================================================================== */
.c-blogpost-layout {
  max-width: 80vw;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .c-blogpost-layout {
    max-width: 80rem;
  }
}

.c-blogpost-list {
  max-width: 80rem;
  margin: 0 auto;
}

.c-blogpost-list__item {
  margin-bottom: 6.4rem;
  padding-bottom: 6.4rem;
  border-bottom: 0.1rem solid #D1D7E2;
}
.c-blogpost-list__item:last-child {
  margin: 0;
  border: none;
}

/* ==========================================================================
  c-blogpost-author
   ========================================================================== */
.c-blogpost-author {
  display: flex;
  background: #F3F6FA;
  padding: 2.4rem;
  margin-top: 3.2rem;
}

.c-blogpost-author__img {
  border-radius: 100%;
  width: 7.2rem;
  height: 7.2rem;
  margin-right: 2.4rem;
  flex: 0 0 auto;
}

.c-blogpost-author__name.c-blogpost-author__name.c-blogpost-author__name {
  /* override c-content */
  /* dirty but just a quick fix before launch, to actually fix, please don't let .c-blogpost-author be a child of .c-content*/
  margin: 0 0 1.2rem;
}

.c-blogpost-author .c-horizontal-list {
  /* override c-content */
  margin: 0;
}
.c-blogpost-author .c-horizontal-list li {
  list-style: none;
}

/* ==========================================================================
  c-container-horizontal
   ========================================================================== */
.c-container-horizontal {
  width: 100%;
  max-width: 124.8rem;
  margin: 0 auto;
  padding: 0 2.4rem;
}
@media (min-width: 900px) {
  .c-container-horizontal {
    padding: 0 4.8rem;
  }
}

/* ==========================================================================
  c-container-vertical
   ========================================================================== */
.c-container-vertical {
  padding: 2.4rem 0;
}
@media (min-width: 900px) {
  .c-container-vertical {
    padding: 3.2rem 0;
  }
}

.c-container-vertical--small {
  padding: 1.6rem;
}
@media (min-width: 900px) {
  .c-container-vertical--small {
    padding: 2.4rem 0;
  }
}

/* ==========================================================================
  c-content
   ========================================================================== */
/* Headings
   ========================================================================== */
.c-h1, .c-content h1 {
  font-weight: 600;
  color: #1D2C48;
  line-height: 1.25;
  font-family: "Overpass", sans-serif;
  margin: 0 0 1.6rem;
  font-size: 3.2rem;
}
@media (min-width: 900px) {
  .c-h1, .c-content h1 {
    font-size: 4rem;
  }
}

.c-h2, .c-content h2 {
  font-weight: 600;
  line-height: 1.25;
  color: #1D2C48;
  font-family: "Overpass", sans-serif;
  margin: 0 0 1.6rem;
  font-size: 2.4rem;
}
@media (min-width: 900px) {
  .c-h2, .c-content h2 {
    font-size: 3.2rem;
  }
}

.c-h3, .c-content h3 {
  font-size: 1.8rem;
  font-weight: 600;
  color: #1D2C48;
  margin: 0 0 1.6rem;
}

.c-h4, .c-content h4 {
  font-size: 1.6rem;
  font-weight: 600;
  color: #1D2C48;
  margin: 0 0 1.6rem;
}

/* Regular text
   ========================================================================== */
.c-p, .c-content p {
  margin-bottom: 1.6rem;
}

.c-p--small, .c-content p small {
  font-size: 1.4rem;
  margin-bottom: 1.4rem;
}

/* Quotes
   ========================================================================== */
.c-blockquote, .c-content blockquote {
  font-style: italic;
  padding: 0 0 0 1.6rem;
  margin: 0 0 1.6rem;
  border-left: 0.4rem solid #D1D7E2;
}

/* Lists
   ========================================================================== */
.c-ul, .c-content ul,
.c-ol, .c-content ol {
  margin: 0 0 1.6rem 2.4rem;
}

.c-ul, .c-content ul ul,
.c-ol, .c-content ol ol {
  margin: 0 0 0 2.4rem;
}

.c-ul > li,
.c-content ul > li {
  list-style: disc;
}

.c-ol > li,
.c-content ol > li {
  list-style: decimal;
}

.c-content pre, .c-pre {
  background: #250032;
  padding: 1.6rem;
  margin: 0 0 1.6rem;
}
.c-content pre .c-code, .c-content pre code, .c-pre .c-code, .c-pre code {
  color: #FFF;
  background: none;
}

.c-code,
.c-content code {
  font-size: 85%;
  padding: 0;
  border-radius: 0.2rem;
  font-family: Monaco, Menlo, monospace;
  background: #FFF6FF;
}

.c-content table {
  border: 0.1rem solid #D1D7E2;
  border-radius: 0.3rem;
  border-collapse: separate;
  width: 100%;
  margin: 0 0 2.4rem;
}
.c-content table th, .c-content table td {
  text-align: left;
}
.c-content table td,
.c-content table th {
  text-align: left;
  vertical-align: top;
  position: relative;
  padding: 1.6rem;
  position: relative;
}
.c-content table th {
  font-weight: 500;
  border-bottom: 0.2rem solid #D1D7E2;
  vertical-align: top;
}
.c-content table td {
  border-bottom: 0.1rem solid #D1D7E2;
}
.c-content table tr:last-child td {
  border: none;
}

.c-content a:link {
  color: #3F5EAA;
  text-decoration: none;
  border-bottom: 0.1rem solid rgba(63, 94, 170, 0.33);
}
.c-content a:visited {
  color: #AD62BF;
  border-color: rgba(173, 98, 191, 0.33);
}
.c-content a:hover,
.c-content a:focus,
.c-content a:active {
  color: #BD239B;
  text-decoration: none;
  border-bottom: 0.1rem solid rgba(189, 35, 155, 0.33);
}

.c-content strong, .c-content b {
  font-weight: 600;
  color: #1D2C48;
}
.c-content em, .c-content i {
  font-style: italic;
}

.c-hr, .c-content hr {
  margin: 1.6rem 0;
  border: none;
  padding: 1.6rem 0;
  border-bottom: 0.1rem solid #B2BACC;
}

.c-hr--big {
  margin: 3.2rem 0;
  padding: 3.2rem 0;
}

/* ==========================================================================
  c-contributors
  ---
  List of contributors on home page
   ========================================================================== */
.c-contributors {
  border-top: 0.1rem solid #D1D7E2;
  border-bottom: 0.1rem solid #D1D7E2;
  padding: 6.4rem 0;
  text-align: center;
}

.c-contributors__list {
  margin: 3.2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
}

.c-contributors__list-item {
  flex: 0 0 auto;
  padding: 1.6rem 2.4rem;
}
.c-contributors__list-item a {
  display: block;
  text-decoration: none;
}

/* ==========================================================================
  contributor
   ========================================================================== */
.c-contributor__img {
  border-radius: 100%;
  width: 3.2rem;
  height: 3.2rem;
}
@media (min-width: 900px) {
  .c-contributor__img {
    width: 4.8rem;
    height: 4.8rem;
  }
}

.c-contributor__name {
  display: block;
  color: #4C5567;
  padding: 0.8rem 0 0;
}

/* ==========================================================================
  c-footer
   ========================================================================== */
.c-footer {
  border-top: 0.1rem solid #D1D7E2;
  padding: 1.6rem 0;
  margin-top: 2.4rem;
}
@media (min-width: 900px) {
  .c-footer {
    margin-top: 4.8rem;
    padding: 1.6rem 3.2rem;
  }
}

/* ==========================================================================
  File tree
  ---
  Illustration on home page in HTML
   ========================================================================== */
.c-file-tree .c-file-tree {
  padding-left: 3.2rem;
}

.c-file-tree li {
  margin: 0.4rem 0;
}

.c-file-tree__icon-wrap {
  margin-right: 1.2rem;
}

.c-file-tree__filename {
  width: 14rem;
}

/* ==========================================================================
  c-function-doc
   ========================================================================== */
/* Hash link */
.c-function-doc__header a {
  color: #0DA5CC;
  text-decoration: none;
  display: inline-block;
  height: 2.4rem;
  width: 2.4rem;
  text-align: center;
  line-height: 2.4rem;
  border-radius: 0.3rem;
  font-size: 90%;
}

.c-function-doc__header a:hover {
  color: #0DA5CC;
  background: #D7F7FF;
  text-decoration: none;
  transition: 0.18s background ease-in-out;
}

.c-function-doc__content {
  padding-left: 1.6rem;
}

.c-function-doc__heading {
  font-size: 2.4rem;
  margin: 0 0 1.6rem;
}

/* ==========================================================================
  c-header
  ---
  The general header
   ========================================================================== */
.c-header {
  padding: 2.4rem 0;
}
.c-header > .c-container-horizontal {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

/* ==========================================================================
  c-hero
  ---
  The intro on the home page
   ========================================================================== */
.c-hero {
  background: linear-gradient(0deg, white 0%, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 75%, white 100%), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" opacity="0.05"><pattern id="r" width="340" height="260" patternUnits="userSpaceOnUse"><path  transform="scale(.35,.35) translate(0,0)" d=" M 107.05 356.88 L 171.45 237.943 L 270.41 237.878 C 345.625 237.878 345.375 126.937 270.41 126.937 L 14.65 126.937 L 81.29 8 L 271.41 8 L 271.41 8 C 367.686 8 445.85 86.164 445.85 182.44 C 445.85 278.716 367.686 356.88 271.41 356.88 L 271.41 356.88 L 271.41 356.88 L 107.05 356.88 L 107.05 356.88 Z  M 300.94 362.49 L 336.38 397.94 L 363.71 367.95 L 415.93 573.63 L 207.43 526.65 L 239.48 495.25 L 97.11 358.43 L 166.68 229.94 Q 235.849 229.875 270.41 229.875 C 335.5 229.875 335 134.94 270.41 134.94 Q 205.82 134.94 1 134.94 L 76.6 0 L 271.41 0 C 369.829 -0.081 450.359 80.317 453.815 177.871 C 456.998 267.692 389.017 348.079 300.94 362.49 L 300.94 362.49 L 300.94 362.49 Z  M 290.972 363.842 L 336.65 409.52 L 359.61 384.32 L 404.97 562.96 L 223.53 522.08 L 250.97 495.2 L 115.374 364.88 L 271.41 364.88 C 277.949 364.885 284.47 364.539 290.972 363.842 L 290.972 363.842 Z " fill-rule="evenodd" fill="rgb(0,0,0)"/></pattern><pattern id="r2" width="340" height="260" patternUnits="userSpaceOnUse"><g transform="scale(-.35,.35) translate(-460 0)"><path d=" M 107.05 356.88 L 171.45 237.943 L 270.41 237.878 C 345.625 237.878 345.375 126.937 270.41 126.937 L 14.65 126.937 L 81.29 8 L 271.41 8 L 271.41 8 C 367.686 8 445.85 86.164 445.85 182.44 C 445.85 278.716 367.686 356.88 271.41 356.88 L 271.41 356.88 L 271.41 356.88 L 107.05 356.88 L 107.05 356.88 Z  M 300.94 362.49 L 336.38 397.94 L 363.71 367.95 L 415.93 573.63 L 207.43 526.65 L 239.48 495.25 L 97.11 358.43 L 166.68 229.94 Q 235.849 229.875 270.41 229.875 C 335.5 229.875 335 134.94 270.41 134.94 Q 205.82 134.94 1 134.94 L 76.6 0 L 271.41 0 C 369.829 -0.081 450.359 80.317 453.815 177.871 C 456.998 267.692 389.017 348.079 300.94 362.49 L 300.94 362.49 L 300.94 362.49 Z  M 290.972 363.842 L 336.65 409.52 L 359.61 384.32 L 404.97 562.96 L 223.53 522.08 L 250.97 495.2 L 115.374 364.88 L 271.41 364.88 C 277.949 364.885 284.47 364.539 290.972 363.842 L 290.972 363.842 Z " fill-rule="evenodd" fill="rgb(0,0,0)"/></g></pattern><rect transform="translate(150, 130)" x="0" y="0" width="100%" height="100%" fill="url(%23r)"></rect><rect x="0" y="0" width="100%" height="100%" fill="url(%23r2)"></rect></svg>');
  display: flex;
  flex-direction: column-reverse;
}
@media (min-width: 900px) {
  .c-hero {
    padding: 9.6rem 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.c-hero__content {
  width: 100%;
}
@media (min-width: 900px) {
  .c-hero__content {
    width: 50%;
    margin-right: 4rem;
    margin-bottom: 0;
  }
}

.c-hero__para {
  padding: 0 0 1.6rem 0;
}
@media (min-width: 900px) {
  .c-hero__para {
    font-size: 2rem;
  }
}

.c-hero__title {
  font-weight: 600;
  color: #1D2C48;
  line-height: 1.25;
  font-family: "Overpass", sans-serif;
  margin: 0 0 1.6rem;
  font-size: 2.8rem;
}
@media (min-width: 900px) {
  .c-hero__title {
    font-size: 4rem;
  }
}

.c-hero__illustration {
  background-color: #fff6ff;
  border-radius: 0.8rem;
  width: 100%;
  margin-bottom: 3.2rem;
  padding: 1.6rem;
}
@media (min-width: 900px) {
  .c-hero__illustration {
    padding: 3.2rem 4rem;
    width: 50%;
    border: 0.1rem solid #fd8af7;
    background-color: #fff;
    margin-bottom: 0;
  }
}

.c-hero__illustration img {
  max-width: 100%;
}

.c-help-request {
  margin-top: 4.8rem;
}

/* ==========================================================================
  c-horizontal-list
   ========================================================================== */
.c-horizontal-list {
  display: flex;
}
.c-horizontal-list > li {
  list-style: none;
  margin-right: 0.8rem;
}
.c-horizontal-list > li a:link {
  color: #3F5EAA;
  text-decoration: none;
}
.c-horizontal-list > li a:visited {
  color: #AD62BF;
  border-color: rgba(173, 98, 191, 0.33);
}
.c-horizontal-list > li a:hover,
.c-horizontal-list > li a:focus,
.c-horizontal-list > li a:active {
  color: #BD239B;
  text-decoration: none;
}

.c-horizontal-list--bordered > li {
  padding-right: 0.8rem;
  border-right: 0.1rem solid #B2BACC;
}
.c-horizontal-list--bordered > li:last-child {
  border-right: none;
}

.c-horizontal-list--icons > li a {
  display: flex;
}
.c-horizontal-list--icons > li a:link, .c-horizontal-list--icons > li a:visited {
  border: none;
  color: #4C5567;
}
.c-horizontal-list--icons > li a:hover, .c-horizontal-list--icons > li a:active {
  border-bottom: 0.1rem solid #B2BACC;
  color: #1D2C48;
}
.c-horizontal-list--icons > li a:hover .o-svg-icon, .c-horizontal-list--icons > li a:active .o-svg-icon {
  opacity: 0.7;
}
.c-horizontal-list--icons > li a .o-svg-icon {
  opacity: 0.5;
  position: relative;
  top: 0.3rem;
  margin-right: 0.4rem;
}

/* ==========================================================================
  c-logo
   ========================================================================== */
.c-logo {
  display: flex;
  width: 12rem;
}
.c-logo img {
  width: 100%;
}
@media (min-width: 900px) {
  .c-logo {
    width: 17.2rem;
  }
}

/* ==========================================================================
   c-navigation
   ========================================================================== */
.c-navigation ul {
  display: flex;
  align-items: center;
}

.c-navigation ul li {
  list-style: none;
}

.c-navigation .o-svg-icon path, .c-navigation .o-svg-icon circle {
  opacity: 0.5;
}
.c-navigation li {
  margin-right: 0.8rem;
}
.c-navigation li:nth-last-child(4) {
  margin-right: 2.4rem;
}
.c-navigation li:nth-last-child(2),
.c-navigation li:nth-last-child(3) {
  margin-right: 0.2rem;
}
.c-navigation a {
  display: block;
  text-decoration: none;
  color: #1D2C48;
  padding: 1rem 1.2rem;
  border-radius: 0.8rem;
}
.c-navigation a::first-letter {
  text-transform: capitalize;
}
.c-navigation a:hover, .c-navigation a:focus {
  color: #BD239B;
  background: #FFF6FF;
}
.c-navigation a:hover .o-svg-icon path, .c-navigation a:hover .o-svg-icon circle, .c-navigation a:focus .o-svg-icon path, .c-navigation a:focus .o-svg-icon circle {
  opacity: 1;
}

.c-navigation__item--selected a {
  background-color: #FFE3FF;
  color: #BD239B;
}

@media (max-width: 900px) {
  .c-navigation {
    display: none;
  }
}
/* ==========================================================================
  c-navigation-mobile
   ========================================================================== */
.c-navigation-mobile__links li ul {
  padding-left: 2.4rem;
}

.c-navigation-mobile__item a {
  font-size: 2rem;
  text-decoration: none;
  display: block;
  padding: 1.6rem;
  color: #1D2C48;
}
.c-navigation-mobile__item a::first-letter {
  text-transform: capitalize;
}
.c-navigation-mobile__item .svg-icon {
  margin-right: 1.2rem;
}

.c-navigation-mobile__item--active a,
.c-navigation-mobile__item-child--active a {
  background-color: #FFE3FF;
  border-radius: 0.8rem;
  color: #3F5EAA;
}

.c-navigation-mobile__item ul {
  margin: 1.2rem 0 1.2rem 2.4rem;
  border-left: 0.2rem solid #E938C2;
  padding-left: 2.4rem;
}

.c-navigation-mobile__section-header {
  background: none;
  border: none;
  width: 100%;
  font-size: 2rem;
  color: #1D2C48;
  display: flex;
  padding: 1.6rem;
  justify-content: space-between;
}
.c-navigation-mobile__section-header svg {
  opacity: 0.5;
}
.c-navigation-mobile__section-header > span::first-letter {
  text-transform: capitalize;
}

/* ==========================================================================
   c-navigation-mobile-holder
   ---
   The frame in which the mobile nav lives
   ========================================================================== */
.c-navigation-mobile-holder {
  display: none;
  background: #FFF;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
  height: 100%;
  overflow: auto;
}
@media (min-width: 900px) {
  .c-navigation-mobile-holder {
    display: none !important;
  }
}

.c-navigation-mobile-holder--active {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.c-navigation-mobile-holder--active > nav {
  padding: 9.6rem 2.4rem 4.8rem;
}

.c-navigation-toggle {
  display: none;
  text-decoration: none;
  border: none;
  padding: 0;
  appearance: none;
  background: none;
  margin-right: 0.8rem;
}

@media (max-width: 900px) {
  .c-navigation-toggle {
    display: flex;
  }
}
.c-navigation-toggle {
  cursor: pointer;
  align-items: center;
  z-index: 11;
}
.c-navigation-toggle svg {
  display: block;
}

.c-navigation-toggle__label {
  color: #1D2C48;
  margin-right: 0;
  display: inline-flex;
}

.c-navigation-toggle__line1,
.c-navigation-toggle__line2,
.c-navigation-toggle__line3 {
  transform-origin: 20px 20px;
  transition: all 0.2s ease-in-out;
}

.c-navigation-toggle__line1 {
  transform: translateY(-0.7rem);
}

.c-navigation-toggle__line3 {
  transform: translateY(0.7rem);
}

.c-navigation-toggle--active {
  background: #DEE3EC;
  border-radius: 100%;
}
.c-navigation-toggle--active svg * {
  fill: #1D2C48;
}
.c-navigation-toggle--active .c-navigation-toggle__label {
  color: #1D2C48;
}
.c-navigation-toggle--active .c-navigation-toggle__line1 {
  transform: rotate(-45deg);
}
.c-navigation-toggle--active .c-navigation-toggle__line2 {
  opacity: 0;
  transform: scaleX(0);
}
.c-navigation-toggle--active .c-navigation-toggle__line3 {
  transform: rotate(45deg);
}

/* ==========================================================================
  c-note
   ========================================================================== */
.c-note {
  margin: 1.6rem 0;
  background: #FBE4FD;
  padding: 2.4rem;
  position: relative;
  display: flex;
  color: #1D2C48;
}
.c-note p:last-child {
  margin: 0;
}

.c-note__icon {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: middle;
  margin-top: 0.2rem;
  margin-right: 0.8rem;
  opacity: 0.5;
}
.c-note__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
@media (min-width: 900px) {
  .c-note__icon {
    width: 2.4rem;
    height: 2.4rem;
    margin-right: 1.2rem;
  }
}

.c-note__text {
  width: 95%;
}

.c-note:after {
  content: " ";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 2rem 2rem 0;
  border-color: transparent #F7D1FA transparent transparent;
  position: absolute;
  top: 0;
  right: 0;
}

.c-note > *:last-child {
  margin-bottom: 0;
}

.c-note code {
  background: #F9D5FC;
}

.c-note--alternate {
  background: #E2F9FF;
}
.c-note--alternate:after {
  border-color: transparent #B7E4EF transparent transparent;
}

.c-note--warning {
  background: #FFD7D7;
}
.c-note--warning svg path {
  fill: #BE1515;
}
.c-note--warning:after {
  border-color: transparent #F1C4C4 transparent transparent;
}
.c-note--warning code {
  background: #FFCCCC;
}

/* ==========================================================================
  c-sidebar-layout
   ========================================================================== */
.c-sidebar-layout {
  margin: 3.6rem 0;
}

.c-sidebar-layout__side {
  margin: 0 0 2.4rem;
}

@media (max-width: 900px) {
  .c-sidebar-layout__side {
    display: none;
  }
}
@media (min-width: 900px) {
  .c-sidebar-layout {
    display: flex;
  }

  .c-sidebar-layout__side {
    flex: 0 0 20%;
    margin-right: 6.4rem;
  }

  .c-sidebar-layout__main {
    flex: 1 1 auto;
    overflow-x: auto;
  }
  .c-sidebar-layout__main > .c-container-vertical:first-child {
    padding: 0;
  }
}
/* ==========================================================================
   c-sidebar-nav
   ========================================================================== */
.c-sidebar-nav li {
  list-style: none;
  margin: 0 0 0.6rem;
}
.c-sidebar-nav li:last-child {
  margin: 0;
}

.c-sidebar-layout__side nav {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 2rem;
  overflow-y: auto;
}

.c-sidebar-nav a {
  text-decoration: none;
  display: block;
  padding: 1rem 1.6rem;
}
.c-sidebar-nav a:link, .c-sidebar-nav a:visited {
  color: #1D2C48;
}
.c-sidebar-nav a:hover, .c-sidebar-nav a:active, .c-sidebar-nav a:focus {
  color: #3F5EAA;
}

.c-sidebar-nav__item a {
  border-radius: 0.8rem;
}
.c-sidebar-nav__item a:hover, .c-sidebar-nav__item a:focus {
  color: #BD239B;
  background: #FFF6FF;
}
.c-sidebar-nav__item a::first-letter {
  text-transform: capitalize;
}

.c-sidebar-nav .c-sidebar-nav__item--selected > a {
  background: #FFE3FF;
}
.c-sidebar-nav .c-sidebar-nav__item--selected > a:link, .c-sidebar-nav .c-sidebar-nav__item--selected > a:visited {
  color: #BD239B;
}

/* ==========================================================================
   c-sidebar-nav-child
   2nd level
   ========================================================================== */
.c-sidebar-nav-child {
  margin: 0.6rem 0 0.6rem 1.6rem;
  padding-left: 1.6rem;
  border-left: 0.2rem solid #E938C2;
}

.c-sidebar-nav-child li {
  list-style: none;
  margin: 0 0 0.6rem;
}
.c-sidebar-nav-child li:last-child {
  margin: 0;
}

.c-sidebar-nav-child a {
  text-decoration: none;
  display: block;
  color: #BD239B;
  padding: 0.8rem 1.6rem;
}
.c-sidebar-nav-child a:hover, .c-sidebar-nav-child a:focus {
  color: #E938C2;
}

.c-sidebar-nav-child__item a {
  border-radius: 0.8rem;
}
.c-sidebar-nav-child__item a:hover, .c-sidebar-nav-child__item a:focus {
  color: #BD239B;
  background: #FFF6FF;
}

.c-sidebar-nav-child .c-sidebar-nav-child__item--selected > a {
  background: #FFF0FF;
  color: #BD239B;
}

/* ==========================================================================
  Pagination
   ========================================================================== */
.c-pagination {
  margin-top: 4.8rem;
  display: flex;
  justify-content: space-between;
}

/* ==========================================================================
  Component: table
  ---
  Table styling
   ========================================================================== */
/* Variables
   ========================================================================== */
/* Component
   ========================================================================== */
.c-table {
  width: 100%;
}
.c-table th, .c-table td {
  text-align: left;
}
.c-table td,
.c-table th {
  text-align: left;
  padding: 0.8rem 0;
  vertical-align: top;
  position: relative;
}
.c-table th {
  font-weight: 500;
}

.c-table__row--alt td {
  background: #FFF4FF;
}

.c-table--styled {
  margin: 0 0 2.4rem;
}
.c-table--styled th {
  font-weight: 500;
}
.c-table--styled th {
  border-bottom: 0.2rem solid #D1D7E2;
  vertical-align: top;
}
.c-table--styled td {
  border-bottom: 0.1rem solid #D1D7E2;
}
.c-table--styled tr:last-child td {
  border: none;
}
.c-table--styled td,
.c-table--styled th {
  text-align: left;
  padding: 1.6rem;
  position: relative;
}
.c-table--styled td .c-button,
.c-table--styled th .c-button {
  margin-bottom: -0.8rem;
  margin-top: -0.8rem;
}
.c-table--styled td input[type=checkbox] {
  margin: 0 auto;
}

.c-table--bordered {
  border: 0.1rem solid #D1D7E2;
  border-radius: 0.3rem;
  border-collapse: separate;
}

.c-table--nowrap th,
.c-table--nowrap td {
  white-space: nowrap;
}

.c-table--align-middle td {
  vertical-align: middle;
}

.c-table--striped tbody tr:nth-child(even) {
  background: #EEE;
}

.c-table--no-margin {
  margin: 0;
}

.c-table--align-middle td {
  vertical-align: middle;
}

.c-table.c-table--horizontal th {
  width: 18rem;
  border-width: 0.1rem;
}
.c-table.c-table--horizontal tr:last-child th {
  border: none;
}

/* Invisible table structure
   ========================================================================== */
.c-table.c-table--invisible {
  border: 0;
  width: 100%;
}
.c-table.c-table--invisible tr th,
.c-table.c-table--invisible tr td {
  border: 0;
  padding-left: 0;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

/* Untable a table
   ========================================================================== */
.c-table--untable tr {
  display: block;
}
.c-table--untable tr th {
  display: block;
}
.c-table--untable tr td {
  display: block;
}
@media (min-width: 900px) {
  .c-table--untable tr {
    display: table-row;
  }
  .c-table--untable tr th {
    display: table-cell;
  }
  .c-table--untable tr td {
    display: table-cell;
  }
}

/* Responsive table
   Adapted from Bootstrap 4
   ========================================================================== */
.c-table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
.c-table-responsive > .c-table--bordered {
  border: 0;
}

/* ==========================================================================
  c-tabs
   ========================================================================== */
.c-tabs {
  border-bottom: 0.1rem solid #D1D7E2;
}

.c-tabs button {
  padding: 0.8rem 1.6rem;
  background: #FFF;
  color: #E938C2;
  border: none;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1.6rem;
  font-weight: 500;
  position: relative;
  top: 0.1rem;
}
.c-tabs button:hover, .c-tabs button:focus {
  border-bottom: 0.2rem solid #E938C2;
  color: #4C5567;
  outline-style: none;
}

.c-tabs .selected {
  border-bottom: 0.2rem solid #E938C2;
  color: #4C5567;
}

/* ==========================================================================
  c-tabs-pages
   ========================================================================== */
.c-tabs-pages {
  margin-top: 0.8rem;
  margin-bottom: 1.6rem;
}

/* ==========================================================================
  c-usps
   ========================================================================== */
.c-usps__item {
  margin: 0 0 3.2rem;
}
@media (min-width: 900px) {
  .c-usps__item {
    flex: 1 0 29%;
    padding-right: 4.8rem;
  }
}

@media (min-width: 900px) {
  .c-usps {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
}
/* ==========================================================================
  u-flex
   ========================================================================== */
.u-flex {
  display: flex;
}

/* ==========================================================================
  Utilities: generic (no category)
  ========================================================================== */
.u-sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
  u-spacer
   ========================================================================== */
.u-spacer {
  padding: 1.6rem;
}

.u-spacer-bottom--small {
  padding-bottom: 0.8rem;
}

/* PrismJS 1.17.1
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */
/* Regular code blocks
   ========================================================================== */
code {
  padding: 0.2rem;
  color: #CE2F55;
  background: #FFF6FF;
  font-size: 1.4rem;
  font-family: "Source Code Pro", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
}

code[class*=language-],
pre[class*=language-] {
  color: #FFF;
  background: none;
  border-radius: 0.3rem;
  font-family: "Source Code Pro", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  font-weight: 500;
  font-size: 1.4rem;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.6;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

pre[class*=language-]::-moz-selection, pre[class*=language-] ::-moz-selection,
code[class*=language-]::-moz-selection, code[class*=language-] ::-moz-selection {
  text-shadow: none;
  background: #B750B9;
  color: #FFF;
}

pre[class*=language-]::selection, pre[class*=language-] ::selection,
code[class*=language-]::selection, code[class*=language-] ::selection {
  text-shadow: none;
  background: #B750B9;
  color: #FFF;
}

@media print {
  code[class*=language-],
pre[class*=language-] {
    text-shadow: none;
  }
}
/* Code blocks
   ========================================================================== */
pre[class*=language-] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
}

:not(pre) > code[class*=language-],
pre[class*=language-] {
  background: #310541;
}

/* Inline code
   ========================================================================== */
:not(pre) > code[class*=language-] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  font-style: italic;
  font-weight: 400;
  color: #BDC4FF;
}

.token.punctuation {
  color: #C872E7;
}

.namespace {
  opacity: 0.7;
}

.token.property,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: #F4B4E0;
}

.token.tag .token.tag {
  color: #F4B4E0;
}

.token.selector,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #7AC04E;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #F4B4E0;
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: white;
}

.token.class-name,
.token.attr-name {
  color: #F4B4E0;
}

.token.regex,
.token.important,
.token.variable,
.token.function {
  color: #CC556A;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

/* Command line
   ========================================================================== */
.command-line-prompt {
  border-right: 1px solid #999;
  display: block;
  float: left;
  font-size: 100%;
  letter-spacing: -1px;
  margin-right: 1em;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.command-line-prompt > span:before {
  color: #999;
  content: " ";
  display: block;
  padding-right: 0.8em;
}

.command-line-prompt > span[data-user]:before {
  content: "[" attr(data-user) "@" attr(data-host) "] $";
}

.command-line-prompt > span[data-user=root]:before {
  content: "[" attr(data-user) "@" attr(data-host) "] #";
}

.command-line-prompt > span[data-prompt]:before {
  content: attr(data-prompt);
}

/* ==========================================================================
  Swatch (for styleguide)
  ========================================================================== */
.c-styleguide-color-swatch {
  flex: 0 0 auto;
  text-align: center;
  min-width: 12rem;
  margin: 2.4rem;
}

.c-styleguide-color-swatch__line2 {
  font-size: 1.3rem;
  color: #8D97AA;
}
@media (prefers-color-scheme: dark) {
  .c-styleguide-color-swatch__line2 {
    color: #4C5567;
  }
}

.c-styleguide-color-swatch__self {
  background: #666;
  margin: 0 auto 1.6rem;
  height: 4.8rem;
  width: 4.8rem;
  border-radius: 100%;
}

/* ==========================================================================
  Swatch list (for styleguide)
  ========================================================================== */
.c-styleguide-color-swatch-list {
  display: flex;
  flex-wrap: wrap;
}

/* ==========================================================================
  c-styleguide-icon-list
   ========================================================================== */
.c-styleguide-icon-list {
  columns: 3;
}

/* ==========================================================================
  c-styleguide-icon  
   ========================================================================== */
.c-styleguide-icon {
  display: flex;
  margin: 0.4rem 0;
}

.c-styleguide-icon__wrap {
  min-width: 4rem;
}

/* ==========================================================================
  Styleguide component
   ========================================================================== */
.c-styleguide-component__inner {
  padding: 3.2rem;
  border: 0.1rem solid #DEE3EC;
  margin: 1.6rem 0;
}

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