/**
* This file contains the font-face definitions for the fonts used across the site
*
* Web Fonts from colophon-foundry.org
*
* The fonts included in this stylesheet are subject to the End User License you purchased
* from Colophon Foundry. The fonts are protected under domestic and international trademark and
* copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
* distributing this font software.
*
* (c) 2022 Colophon Foundry
*
* Licenced to Matthew Derrick Kodeco Inc

*
*  1. Relative
*
*/
/* ==========================================================================
  0. Variable definitions
  ========================================================================== */
/* ==========================================================================
   1. Relative
   ========================================================================== */
/* relative-book */
@font-face {
  font-family: "Relative";
  font-style: normal;
  font-weight: 400;
  src: url(/assets/relative-book-pro-b7bfc78df53a6103abfdccc4f18a0e919172076cc7dd5c5309a0a94d64f19615.woff2) format("woff2"), url(/assets/relative-book-pro-d1079bfa99a0cab9ef8465a629feddad450f13b5b7f7b495f2717b2788b5428f.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* relative-italic */
@font-face {
  font-family: "Relative";
  font-style: italic;
  font-weight: 400;
  src: url(/assets/relative-italic-pro-46b2f83e0335d2ee38e8ead7854143fc4642a914ef19d165b7c40027bc649202.woff2) format("woff2"), url(/assets/relative-italic-pro-cbc583d872bfd3462fa990ac1d595cf7d5f6f8a1bc16f70f9f43d12d2f9cb186.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* relative-medium */
@font-face {
  font-family: "Relative";
  font-style: normal;
  font-weight: 500;
  src: url(/assets/relative-medium-pro-efff202b230c17039474726cd59259a03b75292b1a63068ab73f55dbf6a25dcb.woff2) format("woff2"), url(/assets/relative-medium-pro-16f66e32ff5195a3e52ad1f851b3559c20d2fb56508ed215cf319f2a59cf7abf.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* relative-medium-italic */
@font-face {
  font-family: "Relative";
  font-style: italic;
  font-weight: 500;
  src: url(/assets/relative-medium-italic-pro-78c16e218cb3c8571907fe11721c5701644595e0c27b839dbc8a71053ac64d21.woff2) format("woff2"), url(/assets/relative-medium-italic-pro-ec9d2644d301a4cd59c1233b2a99af84d75f908d6d60e9e82105643ab841ee1e.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* relative-bold */
@font-face {
  font-family: "Relative";
  font-style: normal;
  font-weight: 700;
  src: url(/assets/relative-bold-pro-27260fd4e75322220c790f98dd68c0a32a0c0d87bed151a3732089964da11a84.woff2) format("woff2"), url(/assets/relative-bold-pro-5b61cb4c881c1b1713838dbe2b50a7aa601508d74e54551a5bae022d4c7c0c84.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* relative-bold-italic */
@font-face {
  font-family: "Relative";
  font-style: italic;
  font-weight: 700;
  src: url(/assets/relative-bold-italic-pro-9f0cd55a979f577d9982fa929066340f88f483707128ebc6829136d15ac79ee8.woff2) format("woff2"), url(/assets/relative-bold-italic-pro-c35f296845bfcf8e5da688c8c0fd79c93307872766e0398fce78f46ef00736af.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* relative-mono-10 */
@font-face {
  font-family: "Relative Mono";
  font-style: normal;
  font-weight: 400;
  src: url(/assets/relative-mono-10-pitch-pro-b82594bbdaa88ed3eb167db83ce1e51421fe27906d887c2224bd7f3134d7a9cf.woff2) format("woff2"), url(/assets/relative-mono-10-pitch-pro-d954d74c5298b0cde17bd4d03342ed4974193ad7e5a78e9ebf10d8799ad883ce.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/*! normalize.css v7.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
 *    IE on Windows Phone and in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}

/**
 * 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-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 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 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}

/**
 * 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 style in Android 4.3-.
 */
dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}

/**
 * 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
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

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

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1; /* 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;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button; /* 2 */
}

/**
 * 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 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
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 and cancel buttons in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-cancel-button,
[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 IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
  display: block;
}

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

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */
template {
  display: none;
}

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

/*
 * Sets some base rules for typography
 */
/**
 * This file contains all colour definitions.
 *
 * 1. Colours
 * 2. Highlighter Colours
 *
 */
/* ==========================================================================
  1. Colours
========================================================================== */
/* Black */
/* Dark mode input */
/* Dark mode hover */
/* Dark mode borders */
/* Grey */
/* Main Brand Grey */
/*Main Brand Grey at 20% opacity */
/*Main Brand Grey at 50% opacity */
/* Brand Light Grey */
/* Light Multi-platform Colour */
/* Dark Multi-platform Colour */
/* Red */
/* Pink */
/* Light Server-Side Swift Colour */
/* Dark Server-Side Swift Colour */
/* Light AI Colour */
/* Dark AI Colour */
/* Orange */
/* Main Brand Colour */
/* Brand Light Orange */
/* Brand Light Orange with 20% opacity */
/* Brand Dark Orange */
/* Yellow */
/* Light Pro-Gro Colour */
/* Dark Pro-Gro Colour */
/* Green */
/* Light Android Colour */
/* Light Android 50% opacity */
/* Light Android colour equivalent for 50% opacity on dark background */
/* Dark Android Colour */
/* Blue */
/* Light Flutter Colour */
/* Light Flutter 50% opacity */
/* Light Flutter colour equivalent for 50% opacity on dark background */
/* Dark Flutter Colour */
/* Purple */
/* Light iOS Colour */
/* Light iOS 50% opacity */
/* Light iOS colour equivalent for 50% opacity on dark background */
/* Dark iOS Colour */
/* Light Game Tech Colour */
/* Dark Game Tech Colour */
/* White */
/* Transparent */
/* ==========================================================================
  2. Highlighter Colours
========================================================================== */
/* Function to convert pixel font sizes to rem */
body {
  font-family: "Relative", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #14161E;
  text-shadow: 0 -1px 1px rgba(255, 255, 255, 0.01);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "Relative", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: unset !important;
}

button {
  line-height: 1;
}

a {
  color: #14161E;
}

/* RW OVERRIDES
 *
 * We shouldn't need these, but whilst we keep the RW styles in at the top, we might
 * need to override them.
 */
p {
  font-size: 1rem;
}

/**
 * A thin layer on top of normalize.css
 */
html {
  box-sizing: border-box;
  font-family: "Relative";
}

body {
  margin: 0;
}

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

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
p,
pre {
  margin: 0;
}

a,
button,
details,
summary {
  transition: all 0.5s ease-out;
  cursor: pointer;
}

button {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: "Relative";
}

/* Hide arrow glyph */
details > summary {
  list-style: none;
  cursor: pointer;
}

/* Hide arrow glyph in Safari */
details > summary::-webkit-details-marker {
  display: none;
}

input:focus,
button:focus,
li:focus,
a:focus,
span:focus {
  outline: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

iframe {
  border: 0;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: "Relative";
}

ol {
  list-style: decimal;
}
ol li {
  margin-top: 10px;
}
ol li:first-child {
  margin-top: 0;
}

input,
textarea,
select {
  font-family: "Relative";
  -webkit-appearance: none;
}

/**
 * Suppress the focus outline on elements that cannot be accessed via keyboard.
 * This prevents an unwanted focus outline from appearing around elements that
 * might still respond to pointer events.
 */
[tabindex="-1"]:focus {
  outline: none !important;
}

/**
 * Standardise SVG rendering
 */
svg g,
svg path {
  fill: inherit;
}

svg.icon {
  width: 32px;
  height: 32px;
}

/**
 * This file contains variables for controlling layout.
 *
 * 1. Page layout
 * 2. Responsiveness
 *
 */
/* ==========================================================================
    1. Page layout
   ========================================================================== */
/* ==========================================================================
    2. Responsiveness
   ========================================================================== */
/* Controlling column layouts */
/* ==========================================================================
    Responsiveness
   ========================================================================== */
/* ==========================================================================
    Truncation
   ========================================================================== */
/* ==========================================================================
    Flexed spacing
   ========================================================================== */
/* ==========================================================================
    Aspect Ratio
   ========================================================================== */
/* ==========================================================================
  Hide Scrollbar
========================================================================== */
/* Containers
 *
 * This creates containers for every different column width, i.e. 1 through 16 columns wide.
 * They are named in terms of their pixel widths. This assumes that the actual page max-width
 * is perfectly divisible by the number of columns.
 *
 * With the current settings, this includes creating the following classes:
 * container-990, container-1188, container-1386, container-1584
 */
.container-99 {
  margin: 0 auto;
  max-width: 99px;
}
@media screen and (max-width: 146px) {
  .container-99 {
    margin: 0 24px;
  }
}

.max-w-99 {
  max-width: 99px;
}

.w-99 {
  width: 99px;
}

.container-198 {
  margin: 0 auto;
  max-width: 198px;
}
@media screen and (max-width: 245px) {
  .container-198 {
    margin: 0 24px;
  }
}

.max-w-198 {
  max-width: 198px;
}

.w-198 {
  width: 198px;
}

.container-297 {
  margin: 0 auto;
  max-width: 297px;
}
@media screen and (max-width: 344px) {
  .container-297 {
    margin: 0 24px;
  }
}

.max-w-297 {
  max-width: 297px;
}

.w-297 {
  width: 297px;
}

.container-396 {
  margin: 0 auto;
  max-width: 396px;
}
@media screen and (max-width: 443px) {
  .container-396 {
    margin: 0 24px;
  }
}

.max-w-396 {
  max-width: 396px;
}

.w-396 {
  width: 396px;
}

.container-495 {
  margin: 0 auto;
  max-width: 495px;
}
@media screen and (max-width: 542px) {
  .container-495 {
    margin: 0 24px;
  }
}

.max-w-495 {
  max-width: 495px;
}

.w-495 {
  width: 495px;
}

.container-594 {
  margin: 0 auto;
  max-width: 594px;
}
@media screen and (max-width: 641px) {
  .container-594 {
    margin: 0 24px;
  }
}

.max-w-594 {
  max-width: 594px;
}

.w-594 {
  width: 594px;
}

.container-693 {
  margin: 0 auto;
  max-width: 693px;
}
@media screen and (max-width: 740px) {
  .container-693 {
    margin: 0 24px;
  }
}

.max-w-693 {
  max-width: 693px;
}

.w-693 {
  width: 693px;
}

.container-792 {
  margin: 0 auto;
  max-width: 792px;
}
@media screen and (max-width: 839px) {
  .container-792 {
    margin: 0 24px;
  }
}

.max-w-792 {
  max-width: 792px;
}

.w-792 {
  width: 792px;
}

.container-891 {
  margin: 0 auto;
  max-width: 891px;
}
@media screen and (max-width: 938px) {
  .container-891 {
    margin: 0 24px;
  }
}

.max-w-891 {
  max-width: 891px;
}

.w-891 {
  width: 891px;
}

.container-990 {
  margin: 0 auto;
  max-width: 990px;
}
@media screen and (max-width: 1037px) {
  .container-990 {
    margin: 0 24px;
  }
}

.max-w-990 {
  max-width: 990px;
}

.w-990 {
  width: 990px;
}

.container-1089 {
  margin: 0 auto;
  max-width: 1089px;
}
@media screen and (max-width: 1136px) {
  .container-1089 {
    margin: 0 24px;
  }
}

.max-w-1089 {
  max-width: 1089px;
}

.w-1089 {
  width: 1089px;
}

.container-1188 {
  margin: 0 auto;
  max-width: 1188px;
}
@media screen and (max-width: 1235px) {
  .container-1188 {
    margin: 0 24px;
  }
}

.max-w-1188 {
  max-width: 1188px;
}

.w-1188 {
  width: 1188px;
}

.container-1287 {
  margin: 0 auto;
  max-width: 1287px;
}
@media screen and (max-width: 1334px) {
  .container-1287 {
    margin: 0 24px;
  }
}

.max-w-1287 {
  max-width: 1287px;
}

.w-1287 {
  width: 1287px;
}

.container-1386 {
  margin: 0 auto;
  max-width: 1386px;
}
@media screen and (max-width: 1433px) {
  .container-1386 {
    margin: 0 24px;
  }
}

.max-w-1386 {
  max-width: 1386px;
}

.w-1386 {
  width: 1386px;
}

.container-1485 {
  margin: 0 auto;
  max-width: 1485px;
}
@media screen and (max-width: 1532px) {
  .container-1485 {
    margin: 0 24px;
  }
}

.max-w-1485 {
  max-width: 1485px;
}

.w-1485 {
  width: 1485px;
}

.container-1584 {
  margin: 0 auto;
  max-width: 1584px;
}
@media screen and (max-width: 1631px) {
  .container-1584 {
    margin: 0 24px;
  }
}

.max-w-1584 {
  max-width: 1584px;
}

.w-1584 {
  width: 1584px;
}

.container-1680 {
  margin: 0 auto;
  max-width: 1680px;
}
@media screen and (max-width: 1727px) {
  .container-1680 {
    margin: 0 24px;
  }
}

.max-w-1680 {
  max-width: 1680px;
}

.w-1680 {
  width: 1680px;
}

.w-max-content {
  width: max-content;
}

/* Using flexbox to make header and footer work as expected */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}
body .content {
  flex: 1 0 auto;
  align-self: center;
}
body > footer.footer {
  flex-shrink: 0;
}

.columns {
  display: flex;
  flex-wrap: wrap;
}

.column {
  display: block;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
}
.column.column-0 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-0 {
    width: 0%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-0 {
    width: 0%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-0 {
    width: 0%;
  }
}
.column.column-0.column-fixed {
  width: 0px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-0 {
    margin-left: 0%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-0 {
    margin-left: 0%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-0 {
    margin-left: 0%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-0 {
    margin-left: 0%;
  }
}
.column.column-1 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-1 {
    width: 25%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-1 {
    width: 12.5%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-1 {
    width: 6.25%;
  }
}
.column.column-1.column-fixed {
  width: 99px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-1 {
    margin-left: 25%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-1 {
    margin-left: 12.5%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-1 {
    margin-left: 6.25%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-1 {
    margin-left: 6.25%;
  }
}
.column.column-2 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-2 {
    width: 50%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-2 {
    width: 25%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-2 {
    width: 12.5%;
  }
}
.column.column-2.column-fixed {
  width: 198px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-2 {
    margin-left: 50%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-2 {
    margin-left: 25%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-2 {
    margin-left: 12.5%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-2 {
    margin-left: 12.5%;
  }
}
.column.column-3 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-3 {
    width: 75%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-3 {
    width: 37.5%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-3 {
    width: 18.75%;
  }
}
.column.column-3.column-fixed {
  width: 297px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-3 {
    margin-left: 75%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-3 {
    margin-left: 37.5%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-3 {
    margin-left: 18.75%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-3 {
    margin-left: 18.75%;
  }
}
.column.column-4 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-4 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-4 {
    width: 50%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-4 {
    width: 25%;
  }
}
.column.column-4.column-fixed {
  width: 396px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-4 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-4 {
    margin-left: 50%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-4 {
    margin-left: 25%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-4 {
    margin-left: 25%;
  }
}
.column.column-5 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-5 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-5 {
    width: 62.5%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-5 {
    width: 31.25%;
  }
}
.column.column-5.column-fixed {
  width: 495px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-5 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-5 {
    margin-left: 62.5%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-5 {
    margin-left: 31.25%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-5 {
    margin-left: 31.25%;
  }
}
.column.column-6 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-6 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-6 {
    width: 75%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-6 {
    width: 37.5%;
  }
}
.column.column-6.column-fixed {
  width: 594px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-6 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-6 {
    margin-left: 75%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-6 {
    margin-left: 37.5%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-6 {
    margin-left: 37.5%;
  }
}
.column.column-7 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-7 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-7 {
    width: 87.5%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-7 {
    width: 43.75%;
  }
}
.column.column-7.column-fixed {
  width: 693px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-7 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-7 {
    margin-left: 87.5%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-7 {
    margin-left: 43.75%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-7 {
    margin-left: 43.75%;
  }
}
.column.column-8 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-8 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-8 {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-8 {
    width: 50%;
  }
}
.column.column-8.column-fixed {
  width: 792px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-8 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-8 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-8 {
    margin-left: 50%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-8 {
    margin-left: 50%;
  }
}
.column.column-9 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-9 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-9 {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-9 {
    width: 56.25%;
  }
}
.column.column-9.column-fixed {
  width: 891px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-9 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-9 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-9 {
    margin-left: 56.25%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-9 {
    margin-left: 56.25%;
  }
}
.column.column-10 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-10 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-10 {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-10 {
    width: 62.5%;
  }
}
.column.column-10.column-fixed {
  width: 990px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-10 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-10 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-10 {
    margin-left: 62.5%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-10 {
    margin-left: 62.5%;
  }
}
.column.column-11 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-11 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-11 {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-11 {
    width: 68.75%;
  }
}
.column.column-11.column-fixed {
  width: 1089px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-11 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-11 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-11 {
    margin-left: 68.75%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-11 {
    margin-left: 68.75%;
  }
}
.column.column-12 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-12 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-12 {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-12 {
    width: 75%;
  }
}
.column.column-12.column-fixed {
  width: 1188px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-12 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-12 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-12 {
    margin-left: 75%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-12 {
    margin-left: 75%;
  }
}
.column.column-13 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-13 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-13 {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-13 {
    width: 81.25%;
  }
}
.column.column-13.column-fixed {
  width: 1287px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-13 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-13 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-13 {
    margin-left: 81.25%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-13 {
    margin-left: 81.25%;
  }
}
.column.column-14 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-14 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-14 {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-14 {
    width: 87.5%;
  }
}
.column.column-14.column-fixed {
  width: 1386px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-14 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-14 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-14 {
    margin-left: 87.5%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-14 {
    margin-left: 87.5%;
  }
}
.column.column-15 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-15 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-15 {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-15 {
    width: 93.75%;
  }
}
.column.column-15.column-fixed {
  width: 1485px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-15 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-15 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-15 {
    margin-left: 93.75%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-15 {
    margin-left: 93.75%;
  }
}
.column.column-16 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-16 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-16 {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-16 {
    width: 100%;
  }
}
.column.column-16.column-fixed {
  width: 1584px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-16 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-16 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-16 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-16 {
    margin-left: 100%;
  }
}

/**
 * .written_content is a wrapper class that will format standard things like
 * p, h1, h2, blockquote etc. Used in things like articles.
 *
 */
.written-content h1,
.written-content h2,
.written-content h3,
.written-content h4,
.written-content h5,
.written-content h6 {
  margin-top: 48px;
  word-break: break-word;
}
.written-content h1,
.written-content h2 {
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
  .written-content h1,
  .written-content h2 {
    font-size: 1.75rem;
  }
}
.written-content h3 {
  font-size: 1.5rem;
}
.written-content h4 {
  font-size: 1.25rem;
}
.written-content h5,
.written-content h6 {
  font-size: 1rem;
}
.written-content p, .written-content ul, .written-content ol, .written-content .note {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  line-height: 1.66;
  word-break: break-word;
}
.written-content p {
  margin-top: 20px;
}
.written-content a {
  color: #CE3F00;
}
.written-content em {
  font-weight: 700;
  font-style: normal;
}
.written-content code {
  background-color: rgba(215, 215, 215, 0.25);
  border: 1px solid #D7D7D7;
  padding: 1px 8px;
  font-size: 0.9375rem;
  border-radius: 8px;
}
.written-content pre {
  margin-top: 24px;
}
.written-content pre code {
  padding: 24px;
}
.written-content pre + p, .written-content pre + ul, .written-content pre + ol {
  margin-top: 24px;
}
.written-content .note,
.written-content blockquote {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid #FF5A00;
  background-color: #FFFFFF;
  border-radius: 16px;
}
.written-content ul {
  margin-top: 4px;
  list-style: none;
}
.written-content ul li {
  position: relative;
  margin-top: 16px;
  padding-left: 40px;
  line-height: 1.66;
}
.written-content ul li::before {
  content: "​";
  background-color: #FF8847;
  display: inline-block;
  height: 8px;
  width: 8px;
  border-radius: 2px;
  position: absolute;
  top: 9px;
  left: 16px;
}
.written-content ol {
  margin-top: 20px;
  padding-left: 20px;
  list-style: number;
}
.written-content ol li {
  position: relative;
  margin-top: 12px;
  padding-top: 4px;
  line-height: 1.66;
}
.written-content img {
  padding: 8px;
  border-radius: 16px;
  margin: 40px auto;
  max-width: 100%;
  height: auto;
  display: block;
}
.written-content img.bordered {
  border: 1px solid #14161E;
}

/**
 * Badges are pretty little rounded rectangles that include a small icon or some text
 * used to highlight new content, pro or the different platforms. They can be used
 * together in a group.
 *
 * 1. Elementary
 *
 */
/* ==========================================================================
    1. Elementary
   ========================================================================== */
.badge, .badge-number {
  /* Appearance */
  width: 56px;
  height: 56px;
  border-radius: 12px;
  /* Display */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Content */
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 2px;
}
.badge-number {
  /* Content */
  font-weight: 400;
  font-size: 1.125rem;
}
.badge svg, .badge-number svg {
  max-width: 24px;
  max-height: 24px;
}
.badge.pulse, .pulse.badge-number {
  position: relative;
  z-index: 0;
}
.badge.pulse.bg-purple-almost-fuchsia:before, .pulse.bg-purple-almost-fuchsia.badge-number:before {
  box-shadow: 0px 0px 0px 4px rgba(180, 78, 91, 0.2);
}
.badge.pulse:before, .pulse.badge-number:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  box-shadow: 0px 0px 0px 4px rgba(255, 90, 0, 0.2);
  transform: scale(1);
  animation: button-pulse-small 1.25s infinite;
  z-index: -1;
}

nav.breadcrumbs > * {
  display: inline-block;
}
nav.breadcrumbs a {
  color: #14161E;
  text-decoration: underline;
}
nav.breadcrumbs a.disabled {
  cursor: default;
  text-decoration: none;
  pointer-events: none;
}
nav.breadcrumbs .trigger-text {
  text-decoration: underline;
}
nav.breadcrumbs .icon {
  vertical-align: baseline;
  width: 6px;
  height: 12px;
  margin: 0 8px;
}
nav.breadcrumbs .dropdown-line {
  white-space: nowrap;
}

/**
 * Buttons come in 6 sizes: small, normal-tight, normal-wide, large-tight,large-wide extra-large
 *
 * 1. Sizes
 * 2. Specifics (Hover states etc)
 * 3. Icon Buttons
 *
 */
/* ==========================================================================
    1. Sizes
   ========================================================================== */
/* Small Button */
.btn-small, .btn-header-signin {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  font-size: 0.875rem;
  border-radius: 12px;
  text-decoration: none;
}

/* Normal-Tight Button */
.btn-normalt {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 16px;
  font-size: 1rem;
  border-radius: 12px;
  text-decoration: none;
}

/* Normal-Wide Button */
.btn-normalw, .content-switcher .scroll-box .btn-switch {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  font-size: 1rem;
  border-radius: 12px;
  text-decoration: none;
}

/* Large-Tight Button */
.btn-larget, .btn-article {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 24px;
  font-size: 1.125rem;
  border-radius: 16px;
  text-decoration: none;
}

/* Large-Wide Button */
.btn-largew {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 32px;
  font-size: 1.125rem;
  border-radius: 16px;
  text-decoration: none;
}

/* Extra Large Button */
.btn-xlarge {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 0 32px;
  font-size: 1.25rem;
  border-radius: 16px;
  text-decoration: none;
}

/* ==========================================================================
    2. Specifics per Colour
   ========================================================================== */
/* Black Button */
.btn-larget.bg-black-night.fc-white:hover, .bg-black-night.fc-white.btn-article:hover, .btn-larget.bg-black-night.fc-white:focus, .bg-black-night.fc-white.btn-article:focus,
.btn-largew.bg-black-night.fc-white:hover,
.btn-largew.bg-black-night.fc-white:focus,
.btn-normalt.bg-black-night.fc-white:hover,
.btn-normalt.bg-black-night.fc-white:focus,
.btn-normalw.bg-black-night.fc-white:hover,
.content-switcher .scroll-box .bg-black-night.fc-white.btn-switch:hover,
.btn-normalw.bg-black-night.fc-white:focus,
.content-switcher .scroll-box .bg-black-night.fc-white.btn-switch:focus,
.btn-small.bg-black-night.fc-white:hover,
.bg-black-night.fc-white.btn-header-signin:hover,
.btn-small.bg-black-night.fc-white:focus,
.bg-black-night.fc-white.btn-header-signin:focus,
.btn-xlarge.bg-black-night.fc-white:hover,
.btn-xlarge.bg-black-night.fc-white:focus {
  background-color: #43454B;
}

/* Orange Determination Button */
.btn-larget.bg-orange-determination.fc-white:hover, .bg-orange-determination.fc-white.btn-article:hover, .btn-larget.bg-orange-determination.fc-white:focus, .bg-orange-determination.fc-white.btn-article:focus,
.btn-largew.bg-orange-determination.fc-white:hover,
.btn-largew.bg-orange-determination.fc-white:focus,
.btn-normalt.bg-orange-determination.fc-white:hover,
.btn-normalt.bg-orange-determination.fc-white:focus,
.btn-normalw.bg-orange-determination.fc-white:hover,
.content-switcher .scroll-box .bg-orange-determination.fc-white.btn-switch:hover,
.btn-normalw.bg-orange-determination.fc-white:focus,
.content-switcher .scroll-box .bg-orange-determination.fc-white.btn-switch:focus,
.btn-small.bg-orange-determination.fc-white:hover,
.bg-orange-determination.fc-white.btn-header-signin:hover,
.btn-small.bg-orange-determination.fc-white:focus,
.bg-orange-determination.fc-white.btn-header-signin:focus,
.btn-xlarge.bg-orange-determination.fc-white:hover,
.btn-xlarge.bg-orange-determination.fc-white:focus {
  background-color: rgb(185.4, 56.7, 0);
}

/* White Button with Black Outline */
.btn-larget.bg-white, .bg-white.btn-article,
.btn-largew.bg-white,
.btn-normalt.bg-white,
.btn-normalw.bg-white,
.content-switcher .scroll-box .bg-white.btn-switch,
.btn-small.bg-white,
.bg-white.btn-header-signin,
.btn-xlarge.bg-white {
  border: solid 1px #14161E;
}
.btn-larget.bg-white:hover, .bg-white.btn-article:hover, .btn-larget.bg-white:focus, .bg-white.btn-article:focus,
.btn-largew.bg-white:hover,
.btn-largew.bg-white:focus,
.btn-normalt.bg-white:hover,
.btn-normalt.bg-white:focus,
.btn-normalw.bg-white:hover,
.content-switcher .scroll-box .bg-white.btn-switch:hover,
.btn-normalw.bg-white:focus,
.content-switcher .scroll-box .bg-white.btn-switch:focus,
.btn-small.bg-white:hover,
.bg-white.btn-header-signin:hover,
.btn-small.bg-white:focus,
.bg-white.btn-header-signin:focus,
.btn-xlarge.bg-white:hover,
.btn-xlarge.bg-white:focus {
  background-color: rgba(215, 215, 215, 0.4980392157);
}

/* Black Button with White Outline */
.btn-larget.bg-black-night.fc-white.bc-white:hover, .bg-black-night.fc-white.bc-white.btn-article:hover, .btn-larget.bg-black-night.fc-white.bc-white:focus, .bg-black-night.fc-white.bc-white.btn-article:focus,
.btn-largew.bg-black-night.fc-white.bc-white:hover,
.btn-largew.bg-black-night.fc-white.bc-white:focus,
.btn-normalt.bg-black-night.fc-white.bc-white:hover,
.btn-normalt.bg-black-night.fc-white.bc-white:focus,
.btn-normalw.bg-black-night.fc-white.bc-white:hover,
.content-switcher .scroll-box .bg-black-night.fc-white.bc-white.btn-switch:hover,
.btn-normalw.bg-black-night.fc-white.bc-white:focus,
.content-switcher .scroll-box .bg-black-night.fc-white.bc-white.btn-switch:focus,
.btn-small.bg-black-night.fc-white.bc-white:hover,
.bg-black-night.fc-white.bc-white.btn-header-signin:hover,
.btn-small.bg-black-night.fc-white.bc-white:focus,
.bg-black-night.fc-white.bc-white.btn-header-signin:focus,
.btn-xlarge.bg-black-night.fc-white.bc-white:hover,
.btn-xlarge.bg-black-night.fc-white.bc-white:focus {
  background-color: rgba(215, 215, 215, 0.5);
  box-shadow: none;
}

/* Header Sign-In Button */
.btn-header-signin {
  border: none;
  background-color: #FFFFFF;
  font-size: 1rem;
  color: #14161E;
}
.btn-header-signin:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}

/* ==========================================================================
    3. Icon Buttons
   ========================================================================== */
.btn-icon {
  width: 40px;
  height: 40px;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  text-decoration: none;
  justify-content: center;
  align-items: center;
}
.btn-icon svg {
  display: block;
}
.btn-icon:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.btn-icon svg {
  max-height: 20px;
  max-width: 20px;
  fill: #14161E;
}

.btn-iconsm {
  width: 32px;
  height: 32px;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  text-decoration: none;
  justify-content: center;
  align-items: center;
}
.btn-iconsm svg {
  display: block;
}
.btn-iconsm:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.btn-iconsm svg {
  max-width: 16px;
  max-height: 16px;
}

.btn-iconxsm {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  text-decoration: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  text-decoration: none;
  justify-content: center;
  align-items: center;
}
.btn-iconxsm svg {
  display: block;
}
.btn-iconxsm:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.btn-iconxsm svg {
  max-width: 12px;
  max-height: 12px;
}

/* ==========================================================================
    3. Icon with Links
   ========================================================================== */
.btn-label {
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn-label .btn-icon:hover,
.btn-label .btn-iconsm:hover,
.btn-label .btn-iconxsm:hover {
  background-color: transparent;
}
.btn-label a,
.btn-label span,
.btn-label p {
  padding-left: 8px;
  justify-content: center;
}
.btn-label a:hover,
.btn-label span:hover,
.btn-label p:hover {
  color: #CE3F00;
}

/* ==========================================================================
  4. Article  Buttons (usually used for promotions)
========================================================================== */
.btn-article {
  background-color: #14161E;
  color: #FFFFFF;
}

/* ==========================================================================
  5. Common Properties for all buttons
========================================================================== */
button:disabled,
.btn-small:disabled,
.btn-header-signin:disabled,
.btn-normalt:disabled,
.btn-normalw:disabled,
.content-switcher .scroll-box .btn-switch:disabled,
.btn-larget:disabled,
.btn-article:disabled,
.btn-largew:disabled,
.btn-xlarge:disabled {
  cursor: not-allowed;
}

.loading {
  max-width: 396px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.loading .loading-icon {
  padding-bottom: 24px;
}
.loading .loading-icon svg {
  max-width: 40px;
  max-height: 40px;
}
.loading .loading-progress {
  width: 100%;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(20, 22, 30, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: scroll;
  z-index: 99999999;
}
.modal-wrapper {
  max-width: 792px;
  max-height: 100%;
  overflow-y: auto;
  padding: 24px 24px 32px;
  border-radius: 1rem;
  border: 1px solid #14161E;
  background-color: #FFFFFF;
  margin-left: 24px;
  margin-right: 24px;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-name: zoom-in;
}
.modal > .btn-icon {
  min-height: 40px;
}
.modal .btn-icon svg {
  max-width: 12px;
  max-height: 12px;
}
.modal .modal-title {
  font-size: 1.5rem;
  min-height: 64px;
  padding-top: 22px;
}
.modal p {
  font-size: 1rem;
  margin-top: 16px;
}
.modal .modal-table {
  height: 80px;
  min-height: 80px;
  display: inline-flex;
  width: 100%;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid #14161E;
}
.modal .modal-table:last-child {
  border-bottom: none;
}
.modal .modal-table h4 {
  font-size: 1.125rem;
}
.modal .modal-table p,
.modal .modal-table span {
  font-size: 0.875rem;
}
.modal .modal-table button,
.modal .modal-table a {
  padding: 0 16px;
}

/* ==========================================================================
  Modal Sticky
========================================================================== */
.modal-sticky {
  overflow: hidden;
}
.modal-sticky .modal-wrapper {
  height: 80vh;
  overflow: hidden !important;
  padding: 0;
}
.modal-sticky .modal-wrapper .modal-wrapper {
  margin-left: 0;
  margin-right: 0;
  border: none !important;
}
.modal-sticky-fill {
  height: 80px;
  width: 100%;
}
.modal-sticky-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: inherit;
  z-index: 1;
}
.modal-sticky-header .btn-icon {
  position: relative;
  top: 20px;
  left: 24px;
}
.modal-sticky-content {
  overflow-y: auto;
  height: 100%;
  padding: 0 24px 184px;
}
.modal-sticky-content-controls {
  overflow-y: auto;
  height: 100%;
  padding: 0 24px 176px;
}
.modal-sticky-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  padding: 0 24px;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  border-top: 1px solid #D7D7D7;
}

/* ==========================================================================
  Modal Tight
========================================================================== */
.modal-tight {
  max-width: 396px;
}
.modal-tight .modal-action {
  margin-top: 32px;
  margin-bottom: 16px;
  display: flex;
  max-width: 100% !important;
  justify-content: center;
}
.modal-tight p a,
.modal-tight span a {
  display: inline;
}

/* ==========================================================================
  Modal Normal Tight
========================================================================== */
.modal .modal-wrapper.modal-normalt {
  max-width: 594px;
}

/* ==========================================================================
  Full Screen
========================================================================== */
.modal-wrapper__full-screen {
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  width: 100%;
  border-radius: 0;
  background-color: #F7F7F7;
  animation: move-up 250ms ease-in-out forwards;
  transform-origin: top;
}
.modal-wrapper__full-screen header {
  display: grid;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  width: 100%;
  font-size: 1.125rem;
  padding: 0 24px;
  text-align: center;
  white-space: nowrap;
}
@media screen and (min-width: 768px), print {
  .modal-wrapper__full-screen header {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 767px) {
  .modal-wrapper__full-screen header {
    display: flex;
    flex-direction: column;
    justify-content: center !important;
  }
}
.modal-wrapper__full-screen header .title {
  justify-self: center;
}
@media screen and (max-width: 767px) {
  .modal-wrapper__full-screen header .title {
    font-size: 1.125rem;
    font-weight: 500;
    max-width: 200px;
  }
}
.modal-wrapper__full-screen header .info {
  justify-self: end;
}
@media screen and (max-width: 767px) {
  .modal-wrapper__full-screen header .info {
    font-size: 0.875rem;
  }
}
@media screen and (max-width: 767px) {
  .modal-wrapper__full-screen header .btn-icon {
    position: absolute;
    top: 20px;
    left: 24px;
  }
}
.modal-wrapper__full-screen .main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% - 80px);
}
.modal-wrapper__full-screen .main .progress__bar {
  position: absolute;
  z-index: 1;
  height: 2px;
  background-color: #00B87E;
}
.modal-wrapper__full-screen .main > section {
  width: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding: 0 24px;
}
.modal-wrapper__full-screen .main > section > .quiz-ui {
  width: 100%;
  max-width: 594px;
  margin: 0 auto;
  padding-top: 80px;
  padding-bottom: 160px;
}
@media screen and (max-width: 767px) {
  .modal-wrapper__full-screen .main > section > .quiz-ui {
    padding-top: 40px;
  }
}
@media screen and (max-width: 767px) {
  .modal-wrapper__full-screen .main > section .quiz-result {
    border: none;
    background-color: transparent;
  }
}
.modal-wrapper__full-screen .main > section .title {
  width: 100%;
}
.modal-wrapper__full-screen .main > section .title > p {
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .modal-wrapper__full-screen .main > section .title > p {
    font-size: 1.125rem;
  }
}
.modal-wrapper__full-screen .main > section .title pre {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 24px;
  margin-bottom: 24px;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
}
.modal-wrapper__full-screen .main footer {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80px;
  height: 80px;
  width: 100%;
  padding: 0 24px;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.2);
}
.modal-wrapper__full-screen .main footer > section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 594px;
  margin: 0 auto;
}
.modal-wrapper__full-screen .main footer > section button[disabled] {
  cursor: default;
  background-color: rgba(20, 22, 30, 0.2);
}
.modal-wrapper__full-screen .main footer > section button[disabled]:hover {
  background-color: rgba(20, 22, 30, 0.2);
}
.modal-wrapper__full-screen .main footer > section .submission {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.125rem;
  line-height: 1;
  animation: fade-in-up 0.5s ease-in-out forwards;
}
.modal-wrapper__full-screen .main footer > section .submission-icon {
  background-color: #FF5A00;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-wrapper__full-screen .main footer > section .submission-icon.correct {
  background-color: #00B87E;
}
.modal-wrapper__full-screen .main footer > section .submission-icon.incorrect {
  background-color: #E34A4C;
}
.modal-wrapper__full-screen .main footer > section .submission-icon svg {
  width: 12px;
  aspect-ratio: 1/1;
  fill: #FFFFFF;
}
.modal-wrapper__full-screen .main .written-content code {
  font-size: 1rem;
  line-height: 1;
  font-weight: 400;
}
.modal-wrapper__full-screen .main .written-content pre {
  font-size: 0.8125rem;
  line-height: 1.5;
  font-weight: 400;
}
.modal-wrapper__full-screen .main .written-content pre code {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  border: none;
}

/**
 * Progress bars and meters are part of semantic HTML.
 *
 * 1. Progress bars
 * 2. Indeterminate Progress bars
 *
 */
/**
 * This file contains animation utility classes
 *
 * 1. Button pulse
 * 2. Dot loading animation
* 3. Zoom In
 *
 */
/* ==========================================================================
    1. Button pulse
   ========================================================================== */
@keyframes button-pulse {
  0% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.95);
  }
}
@keyframes button-pulse-small {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}
/* ==========================================================================
    2. Dot loading animation
   ========================================================================== */
@keyframes a-dot-loader {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.dot-loader .a-dot-loader--1 {
  animation: a-dot-loader 1.5s infinite;
}
.dot-loader .a-dot-loader--2 {
  animation: a-dot-loader 1.5s infinite;
  animation-delay: 0.1s;
}
.dot-loader .a-dot-loader--3 {
  animation: a-dot-loader 1.5s infinite;
  animation-delay: 0.2s;
}

/* ==========================================================================
  3. Zoom In
========================================================================== */
@keyframes zoom-in {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
/* ==========================================================================
  4. Indeterminate Progress bars
========================================================================== */
@keyframes indeterminate-progress {
  0% {
    margin-left: 0px;
    width: 0%;
  }
  50% {
    margin-left: 25%;
    width: 50%;
  }
  100% {
    margin-left: 100%;
    width: 0%;
  }
}
/* ==========================================================================
  4. Scale Down
========================================================================== */
@keyframes scale-down {
  0% {
    transform: scaleY(0);
  }
  80% {
    transform: scaleY(1.1);
  }
  100% {
    transform: scaleY(1);
  }
}
/* ==========================================================================
  5. Move up
========================================================================== */
@keyframes move-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0%);
  }
}
/* ==========================================================================
  6. Fade in and up
========================================================================== */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(1%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
.fade-in-up {
  animation: fade-in-up 0.5s ease-in-out forwards;
}

/* ==========================================================================
  7. Shake
========================================================================== */
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-5px);
  }
  80% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}
/* ==========================================================================
    1. Progress bars
   ========================================================================== */
.progress {
  width: 100%;
  height: 2px;
  border: none;
  border-radius: 2px;
  background-color: rgba(215, 215, 215, 0.5);
  -webkit-appearance: none;
  overflow: hidden;
}
.progress::-moz-progress-bar {
  background-color: #00B87E;
  border-radius: 2px;
}
.progress::-webkit-progress-value {
  background-color: #00B87E;
  border-radius: 2px;
}
.progress::-webkit-progress-bar {
  border: none;
  border-radius: 2px;
  background-color: rgba(215, 215, 215, 0.5);
}

/* ==========================================================================
    2. Interderminate Progress bars
   ========================================================================== */
progress.progress:indeterminate {
  animation: indeterminate-progress 1s linear infinite;
  background-color: #00B87E;
  /* Firefox */
}
progress.progress:indeterminate::-moz-progress-bar {
  animation: indeterminate-progress 1s linear infinite;
  background-color: #00B87E;
}
progress.progress:indeterminate {
  /* Webkit */
}
progress.progress:indeterminate::-webkit-progress-value {
  animation: indeterminate-progress 1s linear infinite;
  background-color: #00B87E;
}

/**
 * Search come in 2 variants: default (48px) and dynamic height (x-height)
 *
 * 1. Sizes
 * 2. Specifics
 *
 */
/* Object/Input/Text */
label.search {
  position: relative;
}
label.search svg[role=presentation] {
  position: absolute;
  visibility: visible;
  width: 16px;
  height: 16px;
  top: calc(50% - 8px);
  left: 16px;
}

input.search-normal {
  height: 48px;
  font-size: 1rem;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid #14161E;
  font-weight: 400;
  padding: 0px 48px 0 48px;
}
input.search-normal + svg {
  position: absolute;
  visibility: visible;
  width: 24px;
  height: 24px;
  top: calc(50% - 12px);
  right: 16px;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
}
input.search-normal + svg:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
input.search-normal:placeholder-shown + svg {
  visibility: hidden;
}
input.search-normal::placeholder {
  color: #8C8C8C;
  line-height: 1;
}
input.search-normal:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
  transition: background 0.3s ease-in;
}
input.search-normal:focus {
  border-color: #FF5A00;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
  background: #FFFFFF;
  transition: background 0.3s ease-out;
}
input.search-small {
  height: 40px;
  font-size: 1rem;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid #14161E;
  font-weight: 400;
  padding: 0px 48px 0 48px;
}
input.search-small + svg {
  position: absolute;
  visibility: visible;
  width: 24px;
  height: 24px;
  top: calc(50% - 12px);
  right: 16px;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
}
input.search-small + svg:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
input.search-small:placeholder-shown + svg {
  visibility: hidden;
}
input.search-small::placeholder {
  color: #8C8C8C;
  line-height: 1;
}
input.search-small:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
  transition: background 0.3s ease-in;
}
input.search-small:focus {
  border-color: #FF5A00;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
  background: #FFFFFF;
  transition: background 0.3s ease-out;
}

/**
 * Pagination
 */
ul.pagination {
  display: inline-flex;
}
ul.pagination li.page.prev .page-link,
ul.pagination li.page.next .page-link {
  text-decoration: none;
  line-height: 40px;
  border-radius: 8px;
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  height: 40px;
  width: 40px;
  padding: 8px 0px;
  margin-left: 8px;
  background: unset;
  color: #14161E;
  line-height: 24px;
}
ul.pagination li.page.prev .page-link svg,
ul.pagination li.page.next .page-link svg {
  width: 24px;
  height: 12px;
  fill: currentColor;
}
ul.pagination li.page {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tile ul.pagination li.page::before {
  content: none;
}
ul.pagination li.page.prev .page-link:hover {
  background: rgba(215, 215, 215, 0.4980392157) !important;
  color: #14161E !important;
}
ul.pagination li.page.next .page-link:hover {
  background: rgba(215, 215, 215, 0.4980392157) !important;
  color: #14161E !important;
}
ul.pagination li.page .page-link {
  text-decoration: none;
  line-height: 40px;
  border-radius: 8px;
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  height: 40px;
  width: 40px;
  margin-left: 8px;
  background: #14161E;
  color: #FFFFFF;
}
ul.pagination li.page .page-link:not(.active):hover {
  background: #43454B;
  color: #FFFFFF;
}
ul.pagination li.page .page-link.active {
  background: #D7D7D7;
  color: #14161E;
}
ul.pagination li.page.current {
  text-decoration: none;
  line-height: 40px;
  border-radius: 8px;
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  height: 40px;
  width: 40px;
  margin-left: 8px;
  background: #D7D7D7;
  color: #14161E;
}

/* Wrapper class that indicates what gets a tooltip */
.tooltip {
  position: relative;
  display: inline-block;
  /* Actual style of the tooltip */
}
.tooltip .tooltip-text {
  opacity: 0;
  max-width: 320px;
  width: max-content;
  overflow-wrap: break-word;
  display: none;
  align-items: center;
  background-color: #14161E;
  color: #FFFFFF;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: left;
  padding: 10px 16px;
  border-radius: 8px;
  text-transform: none !important;
  /* Different location of tooltips */
}
.tooltip .tooltip-text.tooltip-bottom {
  position: absolute;
  z-index: 9999;
  top: calc(100% + 8px);
}
.tooltip .tooltip-text.tooltip-bottom-align-right {
  position: absolute;
  z-index: 9999;
  top: calc(100% + 8px);
  right: 0;
}
.tooltip .tooltip-text.tooltip-bottom-align-center {
  position: absolute;
  z-index: 9999;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}
.tooltip .tooltip-text.tooltip-top {
  position: absolute;
  z-index: 9999;
  bottom: calc(100% + 8px);
}
.tooltip .tooltip-text.tooltip-top-align-right {
  position: absolute;
  z-index: 9999;
  bottom: calc(100% + 8px);
  right: 0;
}
.tooltip .tooltip-text.tooltip-top-align-center {
  position: absolute;
  z-index: 9999;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}
.tooltip .tooltip-text.tooltip-right {
  position: absolute;
  z-index: 9999;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}
.tooltip .tooltip-text.tooltip-left {
  position: absolute;
  z-index: 9999;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}
.tooltip {
  /* If you hover the element with class .tooltip, it becomes visible */
}
.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  display: flex;
}
@media screen and (max-width: 1023px) {
  .tooltip:hover .tooltip-text {
    display: none;
    opacity: 0;
    visibility: hidden;
  }
}

/**
 * Tiles
 *
 * 1. Base
 *
 */
/* ==========================================================================
    1. Base
   ========================================================================== */
.tile {
  padding: 24px;
  border-radius: 1rem;
}
.tile .tile-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}
.tile .tile-header h2 {
  font-size: 1.25rem;
}
.tile .tile-header svg {
  max-width: 24px;
  max-height: 24px;
  margin-right: 0.8em;
  display: block;
}
.tile ul,
.tile ol,
.tile p {
  font-size: 1rem;
  margin-top: 8px;
}
.tile ul {
  margin-top: 1em;
  padding-left: 0.5em;
}
.tile ul li {
  list-style: none;
  font-size: 1rem;
}
.tile ul li::before {
  content: "•";
  font-size: 1rem;
  line-height: 2;
  margin-right: 0.625em;
}
.tile.bullet-list ul {
  padding-left: 20px !important;
}
.tile.bullet-list ul li {
  list-style: disc;
  margin-bottom: 16px;
}
.tile.bullet-list ul li:before {
  display: none;
}
.tile.bullet-list ul li:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
1. Elementary Table
========================================================================== */
.elementary-table {
  background: #FFFFFF;
  border: 1px solid #14161E;
  border-spacing: 0px;
  border-radius: 16px;
}
.elementary-table thead tr:first-of-type th:first-of-type,
.elementary-table tbody tr:first-of-type th:first-of-type {
  border-top-left-radius: 16px;
}
.elementary-table thead tr:first-of-type th:last-of-type,
.elementary-table tbody tr:first-of-type th:last-of-type {
  border-top-right-radius: 16px;
}
.elementary-table thead th,
.elementary-table tbody th {
  background: #F7F7F7;
}
.elementary-table thead th,
.elementary-table thead td,
.elementary-table tbody th,
.elementary-table tbody td {
  height: 64px;
  font-size: 1rem;
  font-weight: 400;
  padding: 24px;
}
.elementary-table {
  /* ==========================================================================
  2. longtables Table
  ========================================================================== */
}
.elementary-table.long-labels-table {
  line-height: 1.25;
}
.elementary-table.long-labels-table tr {
  padding: 24px 0px;
}
.elementary-table {
  /* ==========================================================================
  3. Zebra rows Table
  ========================================================================== */
}
.elementary-table.zebra-rows-table tr:nth-child(even) {
  background: #F7F7F7;
}
.elementary-table.zebra-rows-table tr:last-child td:first-child {
  border-bottom-left-radius: 16px;
}
.elementary-table.zebra-rows-table tr:last-child td:last-child {
  border-bottom-right-radius: 16px;
}
.elementary-table {
  /* ==========================================================================
  4. Row height small Table
  ========================================================================== */
}
.elementary-table.rh-small th,
.elementary-table.rh-small td {
  height: 56px !important;
  padding: 20px 24px;
}
.elementary-table {
  /* ==========================================================================
  5. Row height extra small Table
  ========================================================================== */
}
.elementary-table.rh-extra-small th,
.elementary-table.rh-extra-small td {
  height: 48px !important;
  padding: 16px 24px;
}
.elementary-table {
  /* ==========================================================================
  6. Data Table—Selectable, Sortable, Controls + Pagination Table
  ========================================================================== */
}
@media only screen and (max-width: 600px) {
  .elementary-table.is-responsive {
    background: linear-gradient(90deg, rgba(215, 215, 215, 0) 0%, #D7D7D7 100%);
  }
}
.elementary-table {
  /* ==========================================================================
  7. Data Table—Selectable, Sortable, Controls + Pagination Table
  ========================================================================== */
}
.elementary-table.is-controls th:nth-child(1),
.elementary-table.is-controls td:nth-child(1) {
  padding: 20px 24px;
}
.elementary-table.is-controls th:nth-child(1) .checkbox .checkbox-tick,
.elementary-table.is-controls td:nth-child(1) .checkbox .checkbox-tick {
  right: calc(100% - 20px) !important;
  vertical-align: middle;
}
.elementary-table.is-controls .btn-normalw {
  padding: 12px 16px;
  border-radius: 8px;
}
.elementary-table.is-controls .btn-normalw:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.elementary-table.is-controls .btn-normalw .arrow-icon {
  display: inherit;
  padding-left: 20px;
}
.elementary-table.is-controls .btn-normalw .arrow-icon svg {
  width: 9.41px;
  height: 14px;
}
.elementary-table.is-controls tfoot tr td {
  padding: 23px 25px 25px;
}
.elementary-table {
  /* ==========================================================================
  8. Data Table—Selectable, Sortable, Controls + Pagination Table
  ========================================================================== */
}
.elementary-table.is-tabs-search thead tr:nth-of-type(1) th {
  text-align: left;
  padding-left: 17px;
}
.elementary-table.is-tabs-search thead tr:nth-of-type(2) th {
  text-align: left;
  padding: 24px 24px 8px;
}
.elementary-table.is-tabs-search .search-normal {
  width: 100%;
}

.selection-results {
  display: flex;
  margin-top: 24px;
  max-width: 100%;
  background-color: #14161E;
  border-radius: 16px;
}
.selection-results .results-text {
  padding: 20px 24px 20px;
}
.selection-results .results-text p {
  color: #FFFFFF;
}
.selection-results .button-container {
  padding: 20px 24px 20px;
  flex: 50%;
  gap: 8px;
  display: flex;
  align-items: center;
  justify-content: end;
}
.selection-results .button-container .badge.bg-black-night {
  width: 40px;
  height: 40px;
}
.selection-results .button-container .badge.bg-black-night:hover, .selection-results .button-container .badge.bg-black-night:focus {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.selection-results .button-container .btn-small:hover, .selection-results .button-container .btn-small:focus {
  background-color: rgba(215, 215, 215, 0.4980392157);
}

/**
* Badges are pretty little rounded rectangles that include a small icon or some text
* used to highlight new content, pro or the different platforms. They can be used
* together in a group.
*
* 1. Actions — Single Row
* 2. Actions — Small
* 3. Navigation
* 4. Navigation subtitles
* 5. Navigation sections
* 6. Navigation split
*
*/
/* ==========================================================================
1. Actions — Single Row
========================================================================== */
.dropdown {
  position: relative;
  line-height: 1;
  /* Wrapper to make text and button appear on same line */
}
.dropdown .dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* Might break everything if there is nothing after the text.. */
}
.dropdown .dropdown-trigger .trigger-text img {
  max-width: 40px;
  max-height: 40px;
  border-radius: 12px;
}
.dropdown {
  /* When details is open, keep the highlight on it */
}
.dropdown details[open] .btn-iconxsm {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.dropdown {
  /* Positions the dropdown (can be used also without summary-details nonsense) */
}
.dropdown .dropdown-menu {
  display: block;
  position: absolute;
  overflow: visible;
  margin-top: 8px;
  min-width: 200px;
  left: 0;
  z-index: 99999;
  box-sizing: border-box;
}
.dropdown .dropdown-menu.dropdown-align-center {
  left: 50%;
  transform: translateX(-50%);
}
.dropdown .dropdown-menu.dropdown-align-right {
  left: auto;
  right: 0;
}
@media screen and (max-width: 767px) {
  .dropdown .dropdown-menu.dropdown-align-left-mobile {
    left: 0 !important;
    right: auto !important;
  }
}
.dropdown .dropdown-menu.dropdown-align-left {
  transform: translateX(25%);
}
.dropdown .dropdown-menu {
  /* Styles the dropdown container*/
}
.dropdown .dropdown-menu .dropdown-content {
  background-color: #FFFFFF;
  border: 1px solid #14161E;
  border-radius: 12px;
  padding: 0;
  /* Styles each line */
}
.dropdown .dropdown-menu .dropdown-content a.dropdown-line,
.dropdown .dropdown-menu .dropdown-content button.dropdown-line,
.dropdown .dropdown-menu .dropdown-content p.dropdown-line {
  display: block;
  margin: 8px;
  padding: 12px 16px;
  text-decoration: none !important;
  list-style: none;
  text-align: left;
  justify-content: center;
  border-radius: 8px;
  width: calc(100% - 16px);
}
.dropdown .dropdown-menu .dropdown-content a.dropdown-line:hover,
.dropdown .dropdown-menu .dropdown-content button.dropdown-line:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.dropdown .dropdown-menu .dropdown-content {
  /* Nasty hack */
}
.dropdown .dropdown-menu .dropdown-content hr.dropdown-line-spacer-hack {
  height: 0;
  visibility: hidden;
}

/* ==========================================================================
2. Actions - Small
========================================================================== */
.dropdown .dropdown-menu.dropdown-small {
  left: calc(100% - 24px);
  min-width: 48px;
  /* Styles the dropdown container*/
}
.dropdown .dropdown-menu.dropdown-small .dropdown-content {
  overflow: hidden;
  /* Styles each line */
}
.dropdown .dropdown-menu.dropdown-small .dropdown-content a.dropdown-line {
  margin: 0;
}
.dropdown .dropdown-menu.dropdown-small .dropdown-content a.dropdown-line:hover {
  border-radius: 0;
}

/* ==========================================================================
3. Navigation — Single Row
========================================================================== */
.dropdown.dropdown-navigation .dropdown-trigger {
  padding: 12px 16px;
  border-radius: 12px;
}
.dropdown.dropdown-navigation .dropdown-trigger:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.dropdown.dropdown-navigation .dropdown-trigger .btn-iconxsm {
  width: 8px;
  height: 8px;
  position: relative;
  top: 2px;
}
.dropdown.dropdown-navigation .dropdown-trigger .btn-iconxsm:hover {
  background-color: unset;
}
.dropdown.dropdown-navigation {
  /* When details is open, keep the highlight on it */
}
.dropdown.dropdown-navigation details[open] .dropdown-trigger {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.dropdown.dropdown-navigation details[open] .dropdown-trigger .btn-iconxsm {
  background-color: unset;
}

/* ==========================================================================
4. Navigation — Subtitles
========================================================================== */
.dropdown .dropdown-line .dropdown-subtitle {
  display: block;
  min-width: 100%;
  font-size: 0.875rem;
  margin-top: 8px;
}

/* ==========================================================================
5. Navigation — Sections
========================================================================== */
.dropdown .dropdown-content hr.dropdown-line {
  border: none;
  border-top: 1px solid #D7D7D7;
  padding: none;
  margin: 0 16px;
}

/* ==========================================================================
6. Navigation — Split
========================================================================== */
.dropdown .dropdown-menu .dropdown-content .dropdown-expandable {
  min-width: 248px;
}
.dropdown .dropdown-menu .dropdown-content .dropdown-expandable:hover {
  background-color: #F7F7F7;
}
.dropdown .dropdown-menu .dropdown-content .dropdown-expandable:hover .dropdown-submenu {
  display: flex;
}
.dropdown .dropdown-menu .dropdown-content .dropdown-expandable:first-child {
  border-radius: 12px 0 0 0;
}
.dropdown .dropdown-menu .dropdown-content .dropdown-expandable:last-child {
  border-radius: 0 0 0 12px;
}
.dropdown .dropdown-menu .dropdown-content .dropdown-expandable p.dropdown-line {
  margin: 0;
  padding: 20px 24px;
  display: flex;
  justify-items: left;
}
.dropdown .dropdown-menu .dropdown-content .dropdown-expandable p.dropdown-line .text {
  flex-grow: 1;
}
.dropdown .dropdown-menu .dropdown-content .dropdown-expandable p.dropdown-line .icon {
  flex-grow: 0;
}
.dropdown .dropdown-menu .dropdown-content .dropdown-expandable p.dropdown-line .icon svg {
  max-width: 8px;
  max-height: 8px;
  rotate: 270deg;
}
.dropdown .dropdown-menu .dropdown-content .dropdown-expandable .dropdown-submenu {
  position: absolute;
  left: calc(100% - 12px);
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  background-color: #F7F7F7;
  border-top: 1px solid #14161E;
  border-right: 1px solid #14161E;
  border-bottom: 1px solid #14161E;
  border-radius: 0 12px 12px 0;
}

/* ==========================================================================
7. Navigation — Team library
========================================================================== */
.dropdown.team-library-dropdown details[open] .dropdown-trigger,
.dropdown.team-library-dropdown .dropdown-trigger {
  background-color: #14161E;
}
.dropdown.team-library-dropdown details[open] .dropdown-trigger:hover,
.dropdown.team-library-dropdown .dropdown-trigger:hover {
  background-color: #43454B;
}
.dropdown.team-library-dropdown .dropdown-menu {
  min-width: 200px;
}

.header-enterprise .dropdown.team-library-dropdown details[open] .dropdown-trigger,
.header-enterprise .dropdown.team-library-dropdown .dropdown-trigger {
  background-color: #CE3F00;
}
.header-enterprise .dropdown.team-library-dropdown details[open] .dropdown-trigger:hover,
.header-enterprise .dropdown.team-library-dropdown .dropdown-trigger:hover {
  background-color: #CE3F00;
}

/* ==========================================================================
8. Tabs (Content)
========================================================================== */
.tabs {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tabs li {
  display: block;
  font-size: 1rem;
  border-bottom: 2px solid transparent;
  padding-bottom: 10px;
}
.tabs li a:not(.btn-icon, .dropdown) {
  display: inline-block;
  padding: 0.75rem 1rem;
  border-radius: 8px;
}
.tabs li a:not(.btn-icon, .dropdown):hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.tabs li.tabs-active {
  border-bottom-color: #CE3F00;
}
.tabs li.tabs-active a:not(.btn-icon, .dropdown) {
  color: #CE3F00;
  cursor: default;
  font-weight: 700;
}
.tabs li.tabs-active a:not(.btn-icon, .dropdown):hover {
  background-color: unset;
}
.tabs .dropdown-content li {
  border-bottom: unset;
  padding: unset;
}
.tabs-content {
  padding: 1.5rem;
}

/**
 *  Forms
 *
 * 1. Checkbox
 * 2. Radio
 * 3. Select
 * 4. Text Input
 * 5. Password Input
 * 6. Textarea
 * 7. Slider
 * 8. Toggle Button
 * 9. Switch
 *
 */
/* ==========================================================================
    0. Common
   ========================================================================== */
/* Adding this as a div wrapper makes sure that different input elements are spaced correctly */
.control:nth-child(n+1) {
  margin-bottom: 24px;
}

/* This does sizing and spacing for input types where label is above the input field */
.input-label {
  margin-left: 8px;
  display: block;
  line-height: 1;
  padding-bottom: 16px;
}
.input-label .input-error {
  display: block;
  margin-top: 8px;
  color: #962224;
  font-size: 0.875rem;
}
.input-label .form-validation-error {
  display: none;
}

/* ==========================================================================
    1. Checkbox
   ========================================================================== */
.checkbox {
  display: block;
  position: relative;
  cursor: pointer;
  padding-left: 34px;
}
.checkbox:nth-child(n+2) {
  margin-top: 16px;
}
.checkbox .checkbox-tick {
  position: absolute;
  height: 24px;
  width: 24px;
  background-color: #FFFFFF;
  border: 1px solid #14161E;
  border-radius: 8px;
  left: 0;
  /* Style the checkmark/indicator */
}
.checkbox .checkbox-tick svg {
  display: none;
  position: absolute;
  top: 7px;
  left: 5.5px;
  fill: #FFFFFF;
  width: 10px;
  height: 8.33px;
}
.checkbox {
  /* On mouse-over, change  background color */
}
.checkbox:hover input ~ .checkbox-tick {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.checkbox {
  /* On tab focus, change border */
}
.checkbox:focus input ~ .checkbox-tick {
  border-color: #FF5A00;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
}
.checkbox {
  /* Show the checkmark when checked */
}
.checkbox input:checked ~ span.checkbox-tick {
  background-color: #14161E;
}
.checkbox input:checked ~ span.checkbox-tick svg {
  display: block;
}

/* ==========================================================================
    2. Radio
========================================================================== */
.radio {
  display: flex;
  position: relative;
  cursor: pointer;
  padding-left: 34px;
}
.radio:nth-child(n+1) {
  margin-bottom: 16px;
}
.radio {
  /* Radio input container looks like this */
}
.radio .radio-tick {
  position: absolute;
  height: 24px;
  width: 24px;
  background-color: #FFFFFF;
  border: 1px solid #14161E;
  border-radius: 50%;
  left: 0;
  /* The dot looks like this */
}
.radio .radio-tick:after {
  content: "";
  position: absolute;
  display: none;
  top: -1px;
  left: -1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 10px solid #14161E;
  background: #FFFFFF;
}
.radio {
  /* On mouse-over, change  background color */
}
.radio:hover input ~ .radio-tick {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.radio {
  /* On tab focus, change border */
}
.radio:focus input ~ .radio-tick {
  border-color: #FF5A00;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
}
.radio {
  /* Show the checkmark when checked */
}
.radio input:checked ~ .radio-tick {
  background-color: #FFFFFF;
}
.radio input:checked ~ .radio-tick:after {
  display: block;
}

/* ==========================================================================
    3. Select
========================================================================== */
.select {
  position: relative;
}
.select-wrapper {
  position: relative;
}
.select.disabled select.select-native,
.select.disabled .select-custom .select-custom-trigger {
  background-color: rgba(215, 215, 215, 0.4980392157);
  cursor: not-allowed;
  pointer-events: none;
}
.select select.select-native,
.select .select-custom {
  position: relative;
  width: 100%;
  height: 48px;
  border-radius: 12px;
  border: 1px solid #14161E;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  background-repeat: no-repeat;
  background-size: 8px;
  background-position: right 23px top 55%;
  font-size: 1rem;
  line-height: 1rem;
}
.select .select-custom {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}
@media (hover: hover) {
  .select .select-custom {
    display: block;
  }
  .select select.select-native:focus + .select-custom {
    display: none;
  }
}
.select {
  /* Add the focus states too, They matter, always! */
}
.select select.select-native:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
  border-color: #FF5A00 !important;
}
.select .select-custom.active {
  border-color: #FF5A00 !important;
}
.select .select-custom.active .select-custom-trigger {
  border-color: #FF5A00 !important;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
}
.select select.select-native {
  padding: 0 24px 0 16px;
}
.select .select-custom-trigger {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: inherit;
  cursor: pointer;
  border-radius: 12px;
  padding: 16px;
  padding-right: 24px;
  display: flex;
  justify-content: space-between;
}
.select .select-custom-trigger:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.select .select-custom-trigger svg {
  width: 12px;
  height: 12px;
}
.select .select-custom.active .select-custom-trigger:hover {
  background-color: inherit;
}
.select .select-custom.active .select-custom-options {
  display: block;
  animation: scale-down 150ms ease-in-out forwards;
  transform-origin: top;
}
.select .select-custom-options {
  position: absolute;
  top: 56px;
  left: 0;
  width: 100%;
  border: 1px solid #14161E;
  border-radius: 12px;
  background-color: inherit;
  z-index: 1;
  display: none;
}
.select .select-custom-options .select-custom-option {
  position: relative;
  padding: 16px;
  margin: 8px;
  border-radius: 12px;
}
.select .select-custom-options .select-custom-option:hover,
.select .select-custom-options .select-custom-option .hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
  cursor: pointer;
}

/* ==========================================================================
    4. Text Input
========================================================================== */
.with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}
.with-icon svg.label {
  display: block;
  max-height: 16px;
  max-width: 16px;
}

.text-input {
  height: 48px;
  display: block;
  padding: 0 16px;
  background-color: #FFFFFF;
  border: 1px solid #14161E;
  border-radius: 12px;
}
.text-input:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.text-input:focus {
  border-color: #FF5A00;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
}
.text-input:invalid {
  border-color: #E34A4C;
}
.text-input:disabled {
  color: #8C8C8C;
  background-color: rgba(215, 215, 215, 0.4980392157);
  border-color: #D7D7D7;
}

/* ==========================================================================
    5. Password Input
========================================================================== */
.input-icon {
  display: flex;
  position: relative;
}
.input-icon .input-right {
  position: absolute;
  top: 4px;
  right: 8px;
}
.input-icon {
  /* This currently only works if you swap the icon before the input.. Probs to do with paddings and stuff */
}
.input-icon .input-left {
  position: absolute;
  top: 4px;
  left: 8px;
}

/* ==========================================================================
    6. Textarea
========================================================================== */
.text-area {
  min-height: 96px;
  width: 100%;
  padding: 16px;
  resize: none;
  outline: none;
  line-height: 1.5;
  display: block;
  padding: 0 16px;
  background-color: #FFFFFF;
  border: 1px solid #14161E;
  border-radius: 12px;
}
.text-area:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.text-area:focus {
  border-color: #FF5A00;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
}
.text-area:invalid {
  border-color: #E34A4C;
}
.text-area:disabled {
  color: #8C8C8C;
  background-color: rgba(215, 215, 215, 0.4980392157);
  border-color: #D7D7D7;
}

/* ==========================================================================
  7. Slider
========================================================================== */
.range {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 1px;
  background: #FF5A00;
  align-self: center;
  cursor: pointer;
}

/* ==========================================================================
  7.a Slider Cross browser range track styles
========================================================================== */
.range::-webkit-slider-runnable-track {
  background: #FF5A00;
  height: 1px;
}
.range:focus::-webkit-slider-runnable-track {
  background: #FF5A00;
  height: 1px;
  box-shadow: none;
  outline: none;
  border: none;
}
.range::-moz-range-track {
  background: #FF5A00;
  height: 1px;
}
.range::-ms-track {
  background: #FF5A00;
  height: 1px;
}

/* ==========================================================================
  7.b Slider Cross browser range thumb styles
========================================================================== */
.range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  background: #FF5A00;
  border: 2px solid #FFFFFF;
  box-shadow: 0px 0px 0px 4px #ffdecc;
  border-radius: 50%;
  cursor: pointer;
}
.range::-moz-range-thumb {
  appearance: none;
  -moz-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  background: #FF5A00;
  border: 2px solid #FFFFFF;
  box-shadow: 0px 0px 0px 4px #ffdecc;
  border-radius: 50%;
  cursor: pointer;
}
.range::-ms-thumb {
  width: 24px;
  height: 24px;
  margin-top: -12px;
  background: #FF5A00;
  border-radius: 100%;
  border: 2px solid #FFFFFF;
  box-shadow: 0px 0px 0px 4px #ffdecc;
  cursor: pointer;
}

/* ==========================================================================
  8. Toggle button
========================================================================== */
.toggle-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 64px;
  padding: 16px;
  background-color: #FFFFFF;
  border-radius: 12px;
  cursor: pointer;
  z-index: 0;
}
.toggle-button:nth-child(n+1) {
  margin-bottom: 16px;
}
.toggle-button__label {
  display: flex;
  align-items: start;
  flex-wrap: wrap;
  gap: 16px;
  cursor: pointer;
  width: 100%;
}
.toggle-button__label .toggle-button__text {
  padding-right: 24px;
  margin-top: 3px;
  flex-basis: calc(100% - 48px);
  max-width: calc(100% - 48px);
}
.toggle-button__label .toggle-button__text > p {
  font-size: 1.125rem;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .toggle-button__label .toggle-button__text > p {
    font-size: 1rem;
  }
}
.toggle-button__label .toggle-button__description {
  font-size: 0.875rem;
  line-height: 1.5;
  margin-top: -10px;
  flex-basis: 100%;
  margin-left: 48px;
}
.toggle-button__label pre {
  font-size: 0.8125rem;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  margin-top: 16px;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 16px;
}
.toggle-button__icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 8px;
  background-color: rgba(215, 215, 215, 0.5);
  position: relative;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 0.875rem;
  text-align: center;
}
.toggle-button__icon::after {
  content: attr(data-value);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  aspect-ratio: 1/1;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
  line-height: 0.66;
}
.toggle-button__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: 2px solid #FFFFFF;
  border-radius: 12px;
  z-index: 1;
}
.toggle-button__input:hover {
  border: 2px solid #FF5A00;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
}
.toggle-button__input:checked {
  border-color: #FF5A00 !important;
}
.toggle-button__input:checked + .toggle-button__label .toggle-button__icon {
  border-radius: 50%;
  background-color: #FF5A00;
}
.toggle-button__input:checked + .toggle-button__label .toggle-button__icon::after {
  content: "";
  mask-image: url(/assets/murakami/sprites/kodeco-icons/checkmark-b11a0141c8804718d4976466cd51aeccc33e7a4cb27a0210e077120cfddc69d0.svg);
  -webkit-mask-image: url(/assets/murakami/sprites/kodeco-icons/checkmark-b11a0141c8804718d4976466cd51aeccc33e7a4cb27a0210e077120cfddc69d0.svg);
  background: #FFFFFF;
}
.toggle-button__input.correct {
  border-color: #00B87E !important;
}
.toggle-button__input.correct + .toggle-button__label .toggle-button__icon {
  border-radius: 50%;
  background-color: #00B87E;
}
.toggle-button__input.correct + .toggle-button__label .toggle-button__icon::after {
  content: "";
  mask-image: url(/assets/murakami/sprites/kodeco-icons/checkmark-b11a0141c8804718d4976466cd51aeccc33e7a4cb27a0210e077120cfddc69d0.svg);
  -webkit-mask-image: url(/assets/murakami/sprites/kodeco-icons/checkmark-b11a0141c8804718d4976466cd51aeccc33e7a4cb27a0210e077120cfddc69d0.svg);
  background: #FFFFFF;
}
.toggle-button__input.incorrect {
  border-color: #E34A4C !important;
  animation: shake 0.75s ease-in-out forwards;
}
.toggle-button__input.incorrect + .toggle-button__label {
  animation: shake 0.75s ease-in-out forwards;
}
.toggle-button__input.incorrect + .toggle-button__label .toggle-button__icon {
  border-radius: 50%;
  background-color: #E34A4C;
  animation: shake 0.75s ease-in-out forwards;
}
.toggle-button__input.incorrect + .toggle-button__label .toggle-button__icon::after {
  content: "";
  mask-image: url(/assets/murakami/sprites/kodeco-icons/cross-close-78def72d27e4b70333f8a700ac8f084f60bbb829d3580c78ac39f12af44839b8.svg);
  -webkit-mask-image: url(/assets/murakami/sprites/kodeco-icons/cross-close-78def72d27e4b70333f8a700ac8f084f60bbb829d3580c78ac39f12af44839b8.svg);
  background: #FFFFFF;
}
.toggle-button__input:disabled {
  cursor: default;
}
.toggle-button__input:disabled:hover {
  border: 2px solid #FFFFFF;
  box-shadow: none;
}

/* ==========================================================================
  9. Switch
========================================================================== */
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
  /* Hide default HTML checkbox */
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch {
  /* The slider */
}
.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #14161E;
  -webkit-transition: transform 0.4s;
  transition: transform 0.4s;
  border-radius: 24px;
}
.switch .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: #FFFFFF;
  -webkit-transition: transform 0.4s;
  transition: transform 0.4s;
  border-radius: 50%;
}
.switch input:checked + .slider {
  background-color: #FF5A00;
}
.switch input:checked + .slider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
  transition: transform 0.4s;
}
.switch input:focus + .slider {
  box-shadow: 0 0 1px #FF5A00;
}
.switch {
  /* Rounded sliders */
}
.switch .slider.round {
  border-radius: 24px;
}
.switch .slider.round:before {
  border-radius: 50%;
}

.error {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 120px;
  max-width: 990px;
  margin: 120px 24px 0;
}
@media screen and (max-width: 989px) {
  .error {
    margin: 80px 24px 0;
  }
}
@media screen and (max-width: 767px) {
  .error {
    flex-direction: column;
    max-width: 320px;
    gap: 80px;
  }
}
.error h1 {
  font-size: 10rem;
  line-height: 10rem;
  margin-bottom: 24px;
}
@media screen and (max-width: 767px) {
  .error h1 {
    font-size: 5rem;
    line-height: 5rem;
  }
}
.error p {
  font-size: 1.125rem;
  line-height: 1.6875rem;
  margin-bottom: 32px;
}
@media screen and (max-width: 767px) {
  .error p {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}
@media screen and (max-width: 767px) {
  .error-artwork img {
    width: 160px;
  }
}
.error-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .error-info {
    align-items: center;
    text-align: center;
  }
}

/*
 * Notifications are pills or banners with a cross to dismiss
 *
 * 1. Base
 * 2. Top banner
 * 3. Toast
 * 4. Notification with actions
 *
 */
/* ==========================================================================
    1. Base
   ========================================================================== */
.notification {
  background: #14161E;
  border-radius: 16px;
  padding: 12px 24px;
  font-size: 1rem;
  line-height: 1.5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.notification p {
  color: #FFFFFF;
}
.notification a {
  color: #FFFFFF;
  text-decoration: underline;
}
.notification .notification--delete {
  display: flex;
  justify-content: center;
  position: relative;
  right: -8px;
  min-width: 32px;
}
.notification .notification--delete:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.notification .notification--delete svg {
  width: 10px;
  height: 10px;
  max-width: 10px;
  max-height: 10px;
  fill: #FFFFFF;
}

.notification + .notification {
  margin-top: 20px;
}

/* ==========================================================================
    2. Top banner
   ========================================================================== */
.notification.notification-banner {
  border-radius: 0;
}
.notification.notification-banner p {
  flex-grow: 1;
  text-align: center;
}

/* ==========================================================================
    3. Toast
   ========================================================================== */
.notification.toast {
  position: fixed;
  width: calc(100% - 48px);
  max-width: 1680px;
  left: 0;
  right: 0;
  bottom: 24px;
  z-index: 999999;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
    4. Notification with actions
   ========================================================================== */
.notification.toast.notification--actions {
  background-color: #CE3F00;
}
.notification.toast.notification--actions > span:nth-child(2) {
  display: flex;
  align-items: center;
}
.notification.toast.notification--actions > span:nth-child(2) a {
  display: flex;
  align-items: center;
  margin-right: 1rem;
}
.notification.toast.notification--actions > span:nth-child(2) a > svg {
  height: 20px;
  width: 20px;
}
.notification.toast.notification--actions > span:nth-child(2) > button {
  border: 1px solid #FFFFFF;
  white-space: nowrap;
  margin-left: 1rem;
  text-decoration: none;
}

/*
 * HTML lists allow web developers to group a set of related items in lists.
 *
 * 1. Ordered List
 *
 * 2. Episodes/Chapters List
 *
 */
/* ==========================================================================
    1. Ordered List
   ========================================================================== */
.ol-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: ol-counter;
}
.ol-list li {
  position: relative;
  font-size: 1rem;
  line-height: 1.5;
  counter-increment: ol-counter;
  padding-top: 16px;
  max-width: 622px;
}
.ol-list li::before {
  content: counter(ol-counter);
  position: absolute;
  left: -2.5em;
  top: 1.3em;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2em;
  height: 2em;
  border: 1px solid #000;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1;
  margin-right: 0.5em;
}

/* ==========================================================================
    2. Episodes/Chapters List
   ========================================================================== */
.section-list .section-list-header--wrapper {
  display: flex;
  align-items: flex-start;
  padding: 24px 0;
}
.section-list .section-list-header--wrapper .section-list-header {
  flex-grow: 1;
}
.section-list .section-list-header--wrapper .section-list-header h4 {
  font-size: 1.25rem;
  line-height: 1.25;
}
.section-list .section-list-header--wrapper .section-list-header p {
  font-size: 0.875rem;
  padding-top: 4px;
}
.section-list ul.content-list {
  display: none;
  list-style: none;
  margin: 0;
}
.section-list ul.content-list li {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
}
.section-list ul.content-list li::before {
  content: none;
}
.section-list ul.content-list li .content-list--icon {
  flex-grow: 0;
  flex-shrink: 0;
  padding-top: 4px;
  display: flex;
  justify-items: flex-start;
}
.section-list ul.content-list li .content-list--icon svg {
  max-width: 20px;
  max-height: 20px;
}
.section-list ul.content-list li .content-list--icon .content-list--icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
  border: 2px solid #14161E;
  border-radius: 10px;
}
.section-list ul.content-list li .content-list--icon .content-list--icon-circle svg {
  display: none;
  max-width: 10px;
  max-height: 10px;
  fill: #FFFFFF;
}
.section-list ul.content-list li .content-list--icon .content-list--icon-dot {
  width: 4px;
  height: 4px;
  background-color: #14161E;
  border-radius: 2px;
}
.section-list ul.content-list li.content-list--completed .content-list--icon-circle {
  background-color: #00B87E;
  border: none;
}
.section-list ul.content-list li.content-list--completed .content-list--icon-circle svg {
  display: block;
}
.section-list ul.content-list li a.content-list--title {
  flex-grow: 1;
  flex-shrink: 1;
  text-decoration: none;
}
.section-list ul.content-list li a.content-list--title:hover {
  text-decoration: underline;
}
.section-list ul.content-list li .content-list--duration {
  flex-grow: 0;
  flex-shrink: 0;
}
.section-list .content-list.c-video-player__lesson-list--open {
  display: block;
}
.section-list .section-list-header--wrapper .section-list-header--button .tooltip--show {
  display: flex;
}
.section-list .section-list-header--wrapper .section-list-header--button .tooltip--hide {
  display: none;
}
.section-list .section-list-header--wrapper .section-list-header--button svg {
  rotate: 180deg;
}
.section-list .section-list-header--wrapper .section-list-header--button.c-video-player__lessons-header--open .tooltip--show {
  display: none;
}
.section-list .section-list-header--wrapper .section-list-header--button.c-video-player__lessons-header--open .tooltip--hide {
  display: flex;
}
.section-list .section-list-header--wrapper .section-list-header--button.c-video-player__lessons-header--open svg {
  rotate: 0deg;
}

/* ==========================================================================
 Content Switcher
========================================================================== */
.content-switcher {
  display: flex;
  align-items: center;
  min-height: 80px;
  width: 100%;
  overflow: hidden;
}
.content-switcher .btn-iconsm {
  display: flex;
  flex-shrink: 0;
}
.content-switcher .btn-iconsm svg {
  height: 8px;
}
.content-switcher .scroll-box {
  display: flex;
  padding: 16px 8px;
  margin-right: 8px;
  margin-left: 8px;
  scroll-behavior: smooth;
  column-gap: 8px;
  overflow-y: hidden;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.content-switcher .scroll-box::-webkit-scrollbar {
  display: none;
}
.content-switcher .scroll-box .btn-switch {
  background-color: #D7D7D7;
  color: #14161E;
}
.content-switcher .scroll-box .btn-switch.active {
  background-color: #14161E;
  color: #FFFFFF;
}

/**
*  Accordions
*
*
* Displays collapsible content panels for presenting information in a limited amount of space.
*
* 1. Elementary
* 2. Episodes/Chapters
*
*/
/* ==========================================================================
    1. Elementary
   ========================================================================== */
.accordion {
  position: relative;
  min-width: 330px;
}
.accordion details {
  width: 100%;
}
.accordion details summary {
  display: flex;
}
.accordion details[open] .accordion-trigger i .open {
  transform: rotate(180deg);
}
.accordion .accordion-trigger {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  min-height: 56px;
  width: 100%;
  padding: 16px 24px;
}
.accordion .accordion-trigger .trigger-text {
  padding-right: 24px;
}
.accordion .accordion-menu {
  align-items: flex-start;
  width: 100%;
  padding-left: 24px;
  display: block;
  padding-top: 8px;
  padding-bottom: 24px;
  box-sizing: border-box;
}

/* ==========================================================================
    2. Episodes/Chapters
   ======================================================================== */
.accordion-content {
  position: relative;
  min-width: 100%;
  border: 1px solid #14161E;
  border-radius: 8px;
  background-color: #FFFFFF;
}
.accordion-content details {
  width: 100%;
  /* This ensures that there is no dbl border at the bottom*/
}
.accordion-content details:not(:last-child) {
  border-bottom: 1px solid #14161E;
}
.accordion-content details {
  /* If it is open the arrow flips */
}
.accordion-content details[open] .accordion-trigger .accordion-opener i .open {
  transform: rotate(180deg);
  max-width: 12px;
}
.accordion-content .accordion-trigger {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 16px 24px;
}
.accordion-content .accordion-trigger .accordion-number,
.accordion-content .accordion-trigger .accordion-number--locked {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  background-color: #D7D7D7;
  border-radius: 8px;
  margin-right: 24px;
  font-size: 1.125rem;
}
.accordion-content .accordion-trigger .accordion-number svg,
.accordion-content .accordion-trigger .accordion-number--locked svg {
  max-width: 24px;
  max-height: 24px;
}
.accordion-content .accordion-trigger {
  /* Header is the text bits of the trigger */
}
.accordion-content .accordion-trigger .accordion-header {
  display: flex;
  flex-direction: column;
}
.accordion-content .accordion-trigger .accordion-header .accordion-title {
  font-size: 1.25rem;
  padding-right: 24px;
}
.accordion-content .accordion-trigger .accordion-header .accordion-subheader {
  font-size: 1rem;
}
.accordion-content .accordion-trigger {
  /* This is the "button" */
}
.accordion-content .accordion-trigger .accordion-opener {
  margin-left: auto;
}
.accordion-content .accordion-trigger .accordion-opener svg {
  max-width: 12px;
}
.accordion-content .content-description {
  /* These are widths of "icons" + padding either side of it (if applicable) */
  padding-left: 104px;
  padding-right: 64px;
  padding-bottom: 24px;
}

/*
 * Icon prefixes allow icons followed by text in lines. Can be used as a link if needed
 *
 * 1. Base
 *
 */
/* ==========================================================================
   1. Base
  ========================================================================== */
.icon-prefix {
  display: flex;
  align-items: center;
  gap: 4px;
}
.icon-prefix svg {
  max-width: 20px;
  max-height: 20px;
  margin-right: 12px;
}

.overlay-box {
  position: fixed;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  max-width: 396px;
  padding: 24px 24px 32px;
  border-radius: 16px;
  border: 1px solid #14161E;
  background-color: #FFFFFF;
  bottom: 0;
  right: 0;
  margin: 24px;
}
@media screen and (max-width: 767px) {
  .overlay-box {
    margin: 12px;
  }
}
.overlay-box .btn-icon svg {
  max-width: 12px;
  max-height: 12px;
}
.overlay-box .overlay-box-title {
  font-size: 1.5rem;
  min-height: 64px;
  padding-top: 22px;
}
.overlay-box p {
  font-size: 1rem;
  margin-top: 16px;
}
.overlay-box .overlay-box-action {
  margin-top: 32px;
  display: flex;
  max-width: 100% !important;
  justify-content: center;
}

.message {
  min-height: 56px;
  border-radius: 16px;
  border: 1px solid #14161E;
  padding: 20px 24px;
  font-size: 16px;
  line-height: 1.5;
}
.message a {
  text-decoration: underline;
}

/**
 * drapers
 *
 * Floating card drapers containing title, paragraph, graphic and link
 *
 * 1. Admin drapers
 *
 * 2. Custom layout classes
 *
 * 3. Banner draper - Base component for common drapers
 *
 * 4. Banner draper - Pillar variations
 *
 * 5. Banner draper - User variations (create account, newsletter)
 *
 * 6. Related - Products at the end of tutorials
 *
 * 7. Bottom Sticky - A banner that's fixed to bottom of the page
 *
 * 8. Pricing cards
 *
 * 9. Single Line Banner
 *
 * 10. Sales promotions
 *
 */
/**
 * This file contains the map between domains and their colours
 *
 *
 */
/* ==========================================================================
  1. Base
 ========================================================================== */
.banner {
  border: 1px solid #14161E;
  padding: 19px 24px;
  background-color: #FF8847;
  border-radius: 16px;
}

.banner.content-top {
  display: block;
  margin-top: 40px;
  margin-bottom: -40px;
}

.banner.bg-transparent {
  background-color: transparent !important;
}

/* ==========================================================================
  5. Banner draper - Base component for common drapers
========================================================================== */
.banner-draper {
  align-items: center;
  position: relative;
  width: 100%;
  height: 640px;
  overflow: hidden;
  margin: 144px auto;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .banner-draper {
    min-height: 640px;
    height: auto;
  }
}
.banner-draper.banner {
  display: flex;
  border: none;
  border-radius: 48px;
}
@media screen and (max-width: 1379px) {
  .banner-draper.banner {
    padding-bottom: 40px;
  }
}
.banner-draper:before {
  animation: a-triad 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 320px;
  height: 824px;
  position: absolute;
  top: 0px;
  left: 0px;
  background-image: url(/assets/murakami/backgrounds/advert-hero-left-6fc0e72993842d7238f1422385d6cb9bf3eaa423b55cbebe74d5735488eed108.svg);
  background-position-x: 0px;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: -1;
}
@media screen and (max-width: 1279px) {
  .banner-draper:before {
    left: -80px;
  }
}
@media screen and (max-width: 1079px) {
  .banner-draper:before {
    left: -160px;
  }
}
@media screen and (max-width: 879px) {
  .banner-draper:before {
    left: -210px;
  }
}
@media screen and (max-width: 767px) {
  .banner-draper:before {
    display: none;
  }
}
.banner-draper:after {
  animation: a-triad 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 320px;
  height: 824px;
  position: absolute;
  top: 0px;
  right: 0px;
  background-image: url(/assets/murakami/backgrounds/advert-hero-right-9edd22d9e7349d744f3c9d8c76058c1bc8ddcb66e2003115b145c934a149d8f1.svg);
  background-position-x: 12px;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: -1;
}
@media screen and (max-width: 1279px) {
  .banner-draper:after {
    right: -80px;
  }
}
@media screen and (max-width: 1079px) {
  .banner-draper:after {
    right: -160px;
  }
}
@media screen and (max-width: 879px) {
  .banner-draper:after {
    right: -210px;
  }
}
@media screen and (max-width: 767px) {
  .banner-draper:after {
    display: none;
  }
}
.banner-draper__wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 384px;
  max-width: 792px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
@media screen and (max-width: 1379px) {
  .banner-draper__wrapper {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
@media screen and (max-width: 767px) {
  .banner-draper__wrapper {
    padding: 0 16px;
    align-items: start;
    text-align: left;
  }
}
.banner-draper__wrapper .banner-draper__headline {
  width: 100%;
  font-size: 3rem;
  line-height: 1.125;
}
@media screen and (max-width: 767px) {
  .banner-draper__wrapper .banner-draper__headline {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}
.banner-draper__wrapper .banner-draper__description {
  max-width: 592px;
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 24px auto 32px auto;
}
@media screen and (max-width: 1079px) {
  .banner-draper__wrapper .banner-draper__description {
    font-size: 1.125rem;
  }
}
.banner-draper__wrapper .banner-draper__description.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
 7. Bottom banner
 ========================================================================== */
.banner-draper-sticky {
  background: #FF8847;
  width: 80%;
  margin: 0 10%;
  z-index: 99;
  box-shadow: unset;
  border: 1px solid #14161E;
  border-radius: 16px;
}

.banner-draper-sticky--obfuscate .obfuscated-text {
  background: #14161E;
  color: #FFFFFF;
}

/**
 * Cards
 *
 * 1. Variables
 * 2. Size mixin
 * 3. Base
 * 4. Domains
 * 5. Typography
 * 6. Actions
 * 7. Content + Locked
 * 8. Minimal Card
 *
 */
/* ==========================================================================
     1. Variables
    ========================================================================== */
/* ==========================================================================
     2. Mixin
    ========================================================================== */
/* ==========================================================================
     3. Base
    ========================================================================== */
.card {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr 112px;
  grid-template-rows: 112px 1fr;
}
.card .card-topright::before {
  width: 96px;
  height: 16px;
}
.card .card-topright .card-artwork {
  width: 96px;
  height: 96px;
}
.card > div {
  padding: 24px;
  background-color: #FFFFFF;
}
.card .card-topleft {
  border: 1px #14161E;
  border-style: solid solid none solid;
  border-radius: 16px 16px 0 0;
  display: flex;
  align-items: center;
  column-gap: 8px;
}
.card .card-topright {
  background: none;
  position: relative;
  /* This pseudo element creates the internal curved corner for the cut-out. It creates an
    absolutely positioned element, with the correct border radius, and strokes the border.
    To fill in the missing "background" it uses box shadow to fill in the gap. It is placed
    above the pseudo element added below */
}
.card .card-topright::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -1px;
  border-radius: 0 0 0 16px;
  border: 1px #14161E;
  border-style: none none solid solid;
  box-shadow: -4px 4px 0 4px #FFFFFF;
  z-index: 3;
}
.card .card-topright .card-artwork {
  border-radius: 16px;
  position: absolute;
  right: 0;
  top: 0;
  /* Display */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.card .card-topright .card-artwork > img {
  max-width: 60px;
  max-height: 60px;
}
.card .card-bottom {
  grid-column-start: 1;
  grid-column-end: 3;
  position: relative;
  border: 1px #14161E;
  border-style: none solid solid solid;
  border-radius: 0 16px 16px 16px;
  display: flex;
  flex-direction: column;
}
.card .card-bottom::before {
  content: "";
  position: absolute;
  right: -1px;
  top: 0;
  width: 17px;
  height: 16px;
  border-radius: 0 16px 0 0;
  border: 1px #14161E;
  border-style: solid solid none none;
}

.card-artwork-56 {
  grid-template-columns: 1fr 72px;
  grid-template-rows: 72px 1fr;
}
.card-artwork-56 .card-topright::before {
  width: 56px;
  height: 16px;
}
.card-artwork-56 .card-topright .card-artwork {
  width: 56px;
  height: 56px;
}

/* ==========================================================================
     3. Domains
    ========================================================================== */
.card .card-topright .card-artwork-article {
  background-color: rgba(21, 120, 87, 0.2);
}
.card .card-topright .card-artwork-android {
  background-color: rgba(0, 184, 126, 0.2);
}
.card .card-topright .card-artwork-flutter {
  background-color: rgba(46, 164, 221, 0.2);
}
.card .card-topright .card-artwork-gametech {
  background-color: rgba(180, 78, 191, 0.2);
}
.card .card-topright .card-artwork-ios {
  background-color: rgba(135, 99, 210, 0.2);
}
.card .card-topright .card-artwork-server-side-swift {
  background-color: rgba(242, 111, 170, 0.2);
}
.card .card-topright .card-artwork-professional-growth {
  background-color: rgba(227, 169, 61, 0.2);
}
.card .card-topright .card-artwork-multi-domain {
  background-color: rgba(172, 159, 171, 0.2);
}
.card .card-topright .card-artwork-learning-path {
  background-color: rgba(89, 124, 238, 0.2);
}
.card .card-topright .card-artwork-video-course {
  background-color: rgba(227, 74, 76, 0.2);
}
.card .card-topright .card-artwork-book {
  background-color: rgba(255, 136, 71, 0.2);
}
.card .card-topright .card-artwork-ai {
  background-color: rgba(230, 151, 138, 0.2);
}

/* ==========================================================================
     4. Typography
    ========================================================================== */
.card .card-bottom .card-title {
  font-size: 1.5rem;
  display: block;
  margin-bottom: auto;
  line-height: 1.25;
}
.card .card-bottom .card-metadata {
  font-size: 1rem;
  margin-top: 16px;
  display: flex;
  align-items: center;
  column-gap: 8px;
  line-height: 20px;
}
.card .card-bottom .card-metadata svg {
  max-width: 20px;
  max-height: 20px;
}
.card .card-bottom .card-metadata > span {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card .card-bottom .card-description {
  font-size: 1rem;
  line-height: 1.5;
  margin-top: 16px;
}
.card .card-bottom .card-description .card-text {
  font-size: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
     4. Actions
    ========================================================================== */
.card .card-bottom .card-description {
  display: flex;
  align-items: center;
  column-gap: 16px;
  align-items: flex-end;
}
.card .card-bottom .card-description .card-text {
  flex-grow: 1;
}
.card .card-bottom .card-description .progress-control {
  flex-grow: 1;
}
.card .card-bottom .card-description .progress-control .dropdown .dropdown-menu .dropdown-line {
  white-space: nowrap;
}

/* ==========================================================================
     7. Content + Locked
    ========================================================================== */
.card.obscure-banner {
  grid-template-columns: 1fr 72px;
  grid-template-rows: 72px 1fr;
  background: inherit;
  padding: unset;
  border: unset;
  border-radius: unset;
}
.card.obscure-banner .obfuscated-text {
  background: #14161E;
  color: #FFFFFF;
  display: inline-block;
  padding: 0 10px;
  text-align: center;
}
.card.obscure-banner .card-topleft {
  display: flex;
  background-color: #FF8847;
}
@media screen and (min-width: 1024px) {
  .card.obscure-banner .card-topleft {
    padding-bottom: 0;
  }
}
.card.obscure-banner .card-topright::before {
  box-shadow: -4px 4px 0 4px #FF8847;
  width: 56px;
}
.card.obscure-banner .card-topright .card-artwork {
  width: 56px;
  height: 56px;
}
.card.obscure-banner .card-topright .card-artwork > svg {
  width: 16px;
  fill: #FFFFFF;
}
.card.obscure-banner .card-bottom {
  background-color: #FF8847;
}
@media screen and (min-width: 1024px) {
  .card.obscure-banner .card-bottom {
    padding-top: 0;
  }
}
@media screen and (min-width: 1024px) {
  .card.obscure-banner .card-bottom > P {
    padding-right: 43px;
  }
}
.card.obscure-banner .card-bottom .card-description .btn-normalw {
  color: #FFFFFF;
}
.card.obscure-banner p {
  font-size: 1rem;
  font-family: "Relative";
  line-height: 1.5rem;
  padding: unset;
  margin: unset;
}

/* ==========================================================================
     8. Minimal Card
    ========================================================================== */
.card-minimal {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 1rem;
  border: 1px solid #14161E;
  background-color: #FFFFFF;
  padding: 24px;
  width: 100%;
}
.card-minimal .card-title {
  font-size: 1.25rem;
  margin: 24px 0;
}

/* ==========================================================================
     9. Card Glow
    ========================================================================== */
.card-glow {
  position: relative;
}
.card-glow:before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(255, 90, 0, 0.2);
  filter: blur(100px);
  transform: translate3d(0, 0, 0);
  opacity: 0;
  transition: opacity 0.25s;
}
.card-glow .card-topleft .tooltip {
  z-index: 2;
}
.card-glow .card-topright img {
  transition: transform 0.3s;
}
.card-glow:hover {
  z-index: 99999;
}
.card-glow:hover .card-topright img {
  transform: scale(1.1);
}
.card-glow:hover:before {
  opacity: 1;
}

/**
 * Code blocks
 *
 * 1. Formatting
 * 2. Buttons
 * 3. highlight.js theme
 *
 */
/* ==========================================================================
    1. Formatting
   ========================================================================== */
code {
  font-family: "Relative Mono";
  font-variant-ligatures: no-contextual;
}

pre {
  background: #14161E;
  color: #D7D7D7;
  border-radius: 1rem;
  padding: 24px;
  font-size: 0.8125rem;
  position: relative;
  font-family: "Relative Mono", monospace;
  font-variant-ligatures: no-contextual;
}

/* ==========================================================================
    2. Buttons
   ========================================================================== */
.code-button-copy {
  right: 52px;
  font-family: "Relative";
  position: absolute;
  top: 16px;
  cursor: pointer;
}
.code-button-copy button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: none;
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: center;
  filter: invert(100%);
}
.code-button-copy button:hover {
  background-color: rgba(40, 40, 40, 0.5);
}
.code-button-copy button {
  background-image: url(/assets/murakami/sprites/kodeco-icons/clipboard-367acaf8e11750ae2bbabb6c97f1ddc40b84cf868e7b51585e5152ef1e266886.svg);
}

.code-button-theme {
  right: 16px;
  font-family: "Relative";
  position: absolute;
  top: 16px;
  cursor: pointer;
}
.code-button-theme button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: none;
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: center;
  filter: invert(100%);
}
.code-button-theme button:hover {
  background-color: rgba(40, 40, 40, 0.5);
}
.code-button-theme button {
  background-image: url(/assets/murakami/sprites/kodeco-icons/colour-split-circle-1bd74aee86fe4b325634dcfe60a969709080512b65a1fdc7a6cbf547bb46bbe6.svg);
}

/* ==========================================================================
    3. highlight.js theme
   ========================================================================== */
pre code.hljs,
pre.hljs {
  display: block;
  overflow-x: auto;
  padding: 24px;
  background: #14161E;
  color: #D7D7D7;
  font-family: "Relative Mono", monospace;
  font-variant-ligatures: no-contextual;
}

/* end baseline CSS */
/* Bright Version (default) */
.hljs {
  background: #14161E;
  color: #D7D7D7;
  font-family: "Relative Mono", monospace;
}

.hljs-comment {
  color: #999999;
  font-family: "Relative Mono", monospace;
}

.hljs-tag,
.hljs-punctuation,
.hljs-tag .hljs-name,
.hljs-tag .hljs-attr,
.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta .hljs-keyword,
.hljs-doctag,
.hljs-name {
  color: #CC99CD;
  font-family: "Relative Mono", monospace;
}

.hljs-formula,
.hljs-attr,
.hljs-property,
.hljs-params,
.hljs-type,
.hljs-number,
.hljs-selector-id,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
  color: #F08D49;
  font-family: "Relative Mono", monospace;
}

.hljs-string,
.hljs-bullet,
.hljs-addition {
  color: #7EC699;
  font-family: "Relative Mono", monospace;
}

.hljs-selector-class,
.hljs-title,
.hljs-section {
  color: #F8C555;
  font-family: "Relative Mono", monospace;
}
.hljs-selector-class.function_,
.hljs-title.function_,
.hljs-section.function_ {
  color: #70A2FF;
  font-family: "Relative Mono", monospace;
}

.hljs-subst,
.hljs-regexp,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-operator,
.hljs-selector-pseudo {
  color: #F64E1A;
  font-family: "Relative Mono", monospace;
}

/* Language color: hue: 90; */
.hljs-literal,
.hljs-symbol {
  color: #18B5AB;
  font-family: "Relative Mono", monospace;
}

.hljs-built_in,
.hljs-code {
  color: #FFFFFF;
  font-family: "Relative Mono", monospace;
}

/* Meta color: hue: 200 */
.hljs-meta {
  color: #18B5AB;
  font-family: "Relative Mono", monospace;
}

.hljs-meta .hljs-string {
  color: #38a;
  font-family: "Relative Mono", monospace;
}

/* Misc effects */
.hljs-emphasis {
  font-style: italic;
  font-family: "Relative Mono", monospace;
}

.hljs-strong {
  font-weight: bold;
  font-family: "Relative Mono", monospace;
}

/* Pastel Version */
.pastel-code .hljs {
  background: #14161E;
  color: #D7D7D7;
}
.pastel-code .hljs-comment {
  color: #9FA4B1;
}
.pastel-code .hljs-tag,
.pastel-code .hljs-punctuation,
.pastel-code .hljs-tag .hljs-name,
.pastel-code .hljs-tag .hljs-attr,
.pastel-code .hljs-keyword,
.pastel-code .hljs-attribute,
.pastel-code .hljs-selector-tag,
.pastel-code .hljs-meta .hljs-keyword,
.pastel-code .hljs-doctag,
.pastel-code .hljs-name {
  color: #C192C1;
}
.pastel-code .hljs-formula,
.pastel-code .hljs-attr,
.pastel-code .hljs-property,
.pastel-code .hljs-params,
.pastel-code .hljs-type,
.pastel-code .hljs-number,
.pastel-code .hljs-selector-id,
.pastel-code .hljs-quote,
.pastel-code .hljs-template-tag,
.pastel-code .hljs-deletion {
  color: #F5AB57;
}
.pastel-code .hljs-string,
.pastel-code .hljs-bullet,
.pastel-code .hljs-addition {
  color: #86AD85;
}
.pastel-code .hljs-selector-class,
.pastel-code .hljs-title,
.pastel-code .hljs-section {
  color: #F8C555;
}
.pastel-code .hljs-selector-class.function_,
.pastel-code .hljs-title.function_,
.pastel-code .hljs-section.function_ {
  color: #6293C3;
}
.pastel-code .hljs-subst,
.pastel-code .hljs-regexp,
.pastel-code .hljs-variable,
.pastel-code .hljs-template-variable,
.pastel-code .hljs-link,
.pastel-code .hljs-selector-attr,
.pastel-code .hljs-operator,
.pastel-code .hljs-selector-pseudo {
  color: #F37957;
}
.pastel-code {
  /* Language color: hue: 90; */
}
.pastel-code .hljs-literal,
.pastel-code .hljs-symbol {
  color: #5FB3B3;
}
.pastel-code .hljs-built_in,
.pastel-code .hljs-code {
  color: #397300;
}
.pastel-code {
  /* Meta color: hue: 200 */
}
.pastel-code .hljs-meta {
  color: #5FB3B3;
}
.pastel-code .hljs-meta .hljs-string {
  color: #38a;
}
.pastel-code {
  /* Misc effects */
}
.pastel-code .hljs-emphasis {
  font-style: italic;
}
.pastel-code .hljs-strong {
  font-weight: bold;
}

/**
 * Cards
 *
 * 1. Base
 * 2. Domains
 *
 */
/* ==========================================================================
  1. Base
========================================================================== */
.triad.dyad .triad-square .triad-grid {
  grid-template-columns: 64% 36%;
  grid-template-rows: 36% 64%;
}
.triad.dyad .triad-square .triad-grid .triad-top-right svg {
  width: 100%;
  height: 100%;
  padding: 35px;
}

/* ==========================================================================
    2. Domains
  ========================================================================== */
.dyad.triad.triad-article .triad-square .triad-background svg {
  fill: rgba(21, 120, 87, 0.6);
}
.dyad.triad.triad-article .triad-square .triad-grid svg {
  fill: #157857;
}
.dyad.triad.triad-article.overlay .triad-background svg {
  fill: transparent;
  stroke: #157857;
  stroke-width: 3;
}

.dyad.triad.triad-android .triad-square .triad-background svg {
  fill: rgba(0, 184, 126, 0.6);
}
.dyad.triad.triad-android .triad-square .triad-grid svg {
  fill: #00b87e;
}
.dyad.triad.triad-android.overlay .triad-background svg {
  fill: transparent;
  stroke: #00b87e;
  stroke-width: 3;
}

.dyad.triad.triad-flutter .triad-square .triad-background svg {
  fill: rgba(46, 164, 221, 0.6);
}
.dyad.triad.triad-flutter .triad-square .triad-grid svg {
  fill: #2ea4dd;
}
.dyad.triad.triad-flutter.overlay .triad-background svg {
  fill: transparent;
  stroke: #2ea4dd;
  stroke-width: 3;
}

.dyad.triad.triad-gametech .triad-square .triad-background svg {
  fill: rgba(180, 78, 191, 0.6);
}
.dyad.triad.triad-gametech .triad-square .triad-grid svg {
  fill: #b44ebf;
}
.dyad.triad.triad-gametech.overlay .triad-background svg {
  fill: transparent;
  stroke: #b44ebf;
  stroke-width: 3;
}

.dyad.triad.triad-ios .triad-square .triad-background svg {
  fill: rgba(135, 99, 210, 0.6);
}
.dyad.triad.triad-ios .triad-square .triad-grid svg {
  fill: #8763d2;
}
.dyad.triad.triad-ios.overlay .triad-background svg {
  fill: transparent;
  stroke: #8763d2;
  stroke-width: 3;
}

.dyad.triad.triad-server-side-swift .triad-square .triad-background svg {
  fill: rgba(242, 111, 170, 0.6);
}
.dyad.triad.triad-server-side-swift .triad-square .triad-grid svg {
  fill: #f26faa;
}
.dyad.triad.triad-server-side-swift.overlay .triad-background svg {
  fill: transparent;
  stroke: #f26faa;
  stroke-width: 3;
}

.dyad.triad.triad-professional-growth .triad-square .triad-background svg {
  fill: rgba(227, 169, 61, 0.6);
}
.dyad.triad.triad-professional-growth .triad-square .triad-grid svg {
  fill: #e3a93d;
}
.dyad.triad.triad-professional-growth.overlay .triad-background svg {
  fill: transparent;
  stroke: #e3a93d;
  stroke-width: 3;
}

.dyad.triad.triad-multi-domain .triad-square .triad-background svg {
  fill: rgba(172, 159, 171, 0.6);
}
.dyad.triad.triad-multi-domain .triad-square .triad-grid svg {
  fill: #ac9fab;
}
.dyad.triad.triad-multi-domain.overlay .triad-background svg {
  fill: transparent;
  stroke: #ac9fab;
  stroke-width: 3;
}

.dyad.triad.triad-learning-path .triad-square .triad-background svg {
  fill: rgba(89, 124, 238, 0.6);
}
.dyad.triad.triad-learning-path .triad-square .triad-grid svg {
  fill: #597cee;
}
.dyad.triad.triad-learning-path.overlay .triad-background svg {
  fill: transparent;
  stroke: #597cee;
  stroke-width: 3;
}

.dyad.triad.triad-video-course .triad-square .triad-background svg {
  fill: rgba(227, 74, 76, 0.6);
}
.dyad.triad.triad-video-course .triad-square .triad-grid svg {
  fill: #e34a4c;
}
.dyad.triad.triad-video-course.overlay .triad-background svg {
  fill: transparent;
  stroke: #e34a4c;
  stroke-width: 3;
}

.dyad.triad.triad-book .triad-square .triad-background svg {
  fill: rgba(255, 136, 71, 0.6);
}
.dyad.triad.triad-book .triad-square .triad-grid svg {
  fill: #ff8847;
}
.dyad.triad.triad-book.overlay .triad-background svg {
  fill: transparent;
  stroke: #ff8847;
  stroke-width: 3;
}

.dyad.triad.triad-ai .triad-square .triad-background svg {
  fill: rgba(230, 151, 138, 0.6);
}
.dyad.triad.triad-ai .triad-square .triad-grid svg {
  fill: #e6978a;
}
.dyad.triad.triad-ai.overlay .triad-background svg {
  fill: transparent;
  stroke: #e6978a;
  stroke-width: 3;
}

/* ==========================================================================
    1. Variables
   ========================================================================== */
/* ==========================================================================
    2. Styling
   ========================================================================== */
.footer {
  color: #FFFFFF;
  margin-top: 80px;
}
.footer .footer-top {
  display: grid;
  grid-template-columns: 1fr 240px;
  grid-template-rows: 1fr 160px;
}
@media screen and (max-width: 767px) {
  .footer .footer-top {
    display: none;
  }
}
.footer .footer-top .footer-top-logo {
  position: relative;
  grid-row-start: span 2;
}
.footer .footer-top .footer-top-logo svg {
  max-width: 120px;
  max-height: 120px;
  margin: 60px;
}
.footer .footer-top .footer-top-logo {
  /* This pseudo element creates the internal curved corner for the cut-out. It creates an
  absolutely positioned element, with the correct border radius.
  To fill in the missing "background" it uses box shadow to fill in the gap */
}
.footer .footer-top .footer-top-logo::before {
  content: "";
  width: 192px;
  height: 48px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0 0 0 48px;
  box-shadow: -12px 12px 0 12px #14161E;
}
.footer .footer-top .footer-top-left {
  background-color: #14161E;
  border-radius: 48px 48px 0 0;
}
.footer .footer-bottom {
  background-color: #14161E;
  border-radius: 0 48px 0 0;
  padding-bottom: 90px;
}
@media screen and (max-width: 767px) {
  .footer .footer-bottom {
    border-radius: 48px 48px 0 0;
  }
}
.footer .footer-bottom .columns {
  padding: 24px;
  max-width: 1584px;
  margin: 0 auto;
}
.footer .footer-bottom .columns .column {
  padding: 0;
}
.footer .footer-links-title {
  font-weight: 700;
  font-size: 1rem;
  padding-top: 32px;
  padding-bottom: 24px;
}
.footer ul.footer-links li {
  margin-bottom: 8px;
}
.footer .footer-link {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 1rem;
}
.footer .footer-link:hover {
  text-decoration: underline;
}
.footer .footer-cta {
  padding-top: 120px;
}
@media screen and (max-width: 767px) {
  .footer .footer-cta {
    padding-top: 80px;
  }
}
.footer .footer-cta-header {
  font-size: 2rem;
  line-height: 1.25;
  margin-bottom: 16px;
}
.footer .footer-cta-text {
  line-height: 1.5;
}
.footer .footer-cta-button {
  margin: 24px 0;
}
@media screen and (max-width: 767px) {
  .footer .footer-cta-button {
    margin-bottom: 80px;
  }
}
.footer .footer-icons {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 24px;
  margin-bottom: 32px;
}
.footer .footer-icons a.footer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid #FFFFFF;
  border-radius: 12px;
}
.footer .footer-icons a.footer-icon:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.footer .footer-icons svg {
  fill: #FFFFFF;
  max-width: 20px;
  max-height: 20px;
}

header.header {
  display: flex;
  min-height: 80px;
  background-color: #FFFFFF;
  padding: 0;
  position: relative;
  z-index: 99999;
}
header.header .header-container {
  max-width: 1584px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: auto;
}
@media screen and (max-width: 1631px) {
  header.header .header-container {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media screen and (max-width: 767px) {
  header.header .header-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}
header.header .header-container.header-container-open .menu-toggle button > div > div:nth-of-type(1) {
  visibility: hidden;
}
header.header .header-container.header-container-open .menu-toggle button > div > div:nth-of-type(2) {
  transform: rotate(45deg);
}
header.header .header-container.header-container-open .menu-toggle button > div > div:nth-of-type(3) {
  transform: rotate(-45deg);
}
header.header .header-container.header-container-open .menu-toggle button > div > div:nth-of-type(4) {
  visibility: hidden;
}
header.header .header-container.header-container-open .header-left-menus {
  display: flex;
}
@media screen and (max-width: 859px) {
  header.header .search-mobile {
    display: inline-flex;
    position: absolute;
    right: 24px;
  }
}
header.header .menu-toggle {
  margin-right: 16px;
}
@media screen and (max-width: 859px) {
  header.header .menu-toggle {
    display: inline-flex;
  }
}
header.header .menu-toggle button {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
header.header .menu-toggle button > div {
  width: 20px;
  height: 14px;
  position: relative;
}
header.header .menu-toggle button > div > div {
  width: 100%;
  height: 2px;
  background-color: #14161E;
  border-radius: 2px;
  transition: transform 0.2s;
}
header.header .menu-toggle button > div > div:nth-of-type(1) {
  position: absolute;
  top: 0;
}
header.header .menu-toggle button > div > div:nth-of-type(2) {
  position: absolute;
  top: 50%;
  margin-top: -1px;
}
header.header .menu-toggle button > div > div:nth-of-type(3) {
  position: absolute;
  top: 50%;
  margin-top: -1px;
}
header.header .menu-toggle button > div > div:nth-of-type(4) {
  position: absolute;
  bottom: 0;
}
header.header .header-left {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  align-items: center;
  gap: 4px;
}
header.header .header-left .header-left-menus {
  display: flex;
  column-gap: 4px;
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus {
    position: fixed;
    z-index: 9999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    flex-direction: column;
    overflow-y: scroll;
    display: none;
  }
}
header.header .header-left .header-left-menus .header-left-mobile {
  display: none;
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus .header-left-mobile {
    display: flex;
    align-items: center;
    padding: 0 24px;
    min-height: 80px;
  }
}
@media screen and (max-width: 767px) {
  header.header .header-left .header-left-menus .header-left-mobile {
    padding: 0 16px;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus .header-left-mobile .header-logo {
    display: block;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav {
    position: relative;
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media screen and (max-width: 767px) {
  header.header .header-left .header-left-menus > nav {
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav:last-of-type:before {
    display: none;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown > details > summary .dropdown-trigger {
    height: 48px;
    padding-left: 24px;
    width: calc(100% - 48px);
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown > details > summary .dropdown-trigger .btn-iconxsm {
    width: 10px;
    height: 10px;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown > details > summary .dropdown-trigger svg {
    max-width: 10px;
    max-height: 10px;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown > details > summary .trigger-text {
    font-size: 20px;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown details[open] .dropdown-trigger {
    background-color: transparent;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-trigger {
    width: 100%;
    padding: 0;
    border-radius: 0;
    justify-content: space-between;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-trigger:hover {
    background-color: transparent;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu {
    position: relative;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 8px;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content {
    border: 0;
    border-radius: 0;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable {
    position: relative;
    border-radius: 16px;
    padding-bottom: 8px;
    margin-top: 8px;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable:before {
    content: "";
    position: absolute;
    bottom: 0;
    height: 1px;
    left: 16px;
    width: calc(100% - 32px);
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable > .dropdown-line {
    padding-bottom: 8px;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable > .dropdown-line + .dropdown-submenu {
    border-radius: 16px;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-ios {
    background: #E7E0F6;
  }
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-ios:hover {
  background: #E7E0F6;
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-ios:hover .dropdown-submenu {
  background: #E7E0F6;
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-ios .dropdown-submenu {
    background: #E7E0F6;
  }
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-ios .dropdown-submenu .dropdown-line:hover {
  background: rgba(135, 99, 210, 0.5);
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-android {
    background: #CCF1E5;
  }
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-android:hover {
  background: #CCF1E5;
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-android:hover .dropdown-submenu {
  background: #CCF1E5;
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-android .dropdown-submenu {
    background: #CCF1E5;
  }
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-android .dropdown-submenu .dropdown-line:hover {
  background: rgba(0, 184, 126, 0.5);
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-flutter {
    background: #D5EDF8;
  }
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-flutter:hover {
  background: #D5EDF8;
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-flutter:hover .dropdown-submenu {
  background: #D5EDF8;
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-flutter .dropdown-submenu {
    background: #D5EDF8;
  }
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-flutter .dropdown-submenu .dropdown-line:hover {
  background: rgba(46, 164, 221, 0.5);
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line {
  position: relative;
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line svg {
    transform: rotate(90deg);
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line:hover svg {
    transform: rotate(270deg);
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line:hover .dropdown-submenu {
    display: block;
  }
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line.dropdown-line-sss:hover {
  background: rgba(242, 111, 170, 0.5);
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line.dropdown-line-gametech:hover {
  background: rgba(180, 78, 191, 0.5);
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line .text {
    font-size: 1.125rem;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line .icon {
    display: none;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-submenu {
    position: relative;
    left: 0;
    border: 0;
    display: block;
  }
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-submenu a {
    display: block;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable-expanded .dropdown-submenu {
    display: block;
  }
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable-expanded svg {
    transform: rotate(270deg);
  }
}
@media screen and (max-width: 1379px) {
  header.header .header-left .header-domain-menu {
    display: none;
  }
}
header.header .header-left .header-left-sign-in {
  display: none;
  margin-top: 32px;
  flex-direction: column;
  row-gap: 16px;
  align-items: center;
}
header.header .header-left .header-left-sign-in a {
  width: fit-content;
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-sign-in {
    display: flex;
  }
}
header.header .header-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-left: 24px;
}
@media screen and (max-width: 767px) {
  header.header .header-right {
    margin-left: 0;
  }
}
@media screen and (max-width: 1439px) {
  header.header .header-right .search {
    display: none;
  }
}
header.header .header-right .search .search-small {
  min-width: 320px;
}
@media screen and (max-width: 1319px) {
  header.header .header-right .search .search-small {
    max-width: 240px;
    width: 100%;
    min-width: auto;
  }
}
@media screen and (max-width: 1439px) {
  header.header .header-right .search-touch {
    display: inline-block;
    margin-right: -8px;
  }
}
header.header .header-right .search-touch svg {
  max-width: 18px;
  max-height: 18px;
}
header.header .header-right .header-right-menus {
  display: flex;
  column-gap: 16px;
}
@media screen and (max-width: 979px) {
  header.header .header-right .header-right-menus > nav {
    margin-left: 8px;
  }
}
@media screen and (max-width: 349px) {
  header.header .header-right .header-right-menus > nav .dropdown-trigger .btn-iconxsm {
    display: none;
  }
}
header.header .header-right .header-right-menus > nav .dropdown .dropdown-line {
  position: relative;
}
header.header .header-right .header-right-menus > nav .dropdown .dropdown-line .badge {
  width: 48px;
  height: 24px;
  font-size: 10px;
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}
header.header .header-right .header-right-menus .header-right-sign-in {
  display: flex;
  column-gap: 8px;
}
@media screen and (max-width: 859px) {
  header.header .header-right .header-right-menus .header-right-sign-in {
    display: none;
  }
}
header.header .header-right .header-right-menus .header-right-sign-in > a {
  white-space: nowrap;
}
@media screen and (max-width: 979px) {
  header.header .header-right .header-right-menus .bookmarks-link {
    display: none;
  }
}
header.header .header-right .header-right-menus .night-mode-switch {
  margin-left: 8px;
  margin-right: -8px;
}
@media screen and (max-width: 859px) {
  header.header .header-right .header-right-menus .night-mode-switch {
    margin-right: 0;
  }
}
@media screen and (max-width: 399px) {
  header.header .header-right .header-right-menus .night-mode-switch {
    margin-left: 0;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-right .header-right-menus nav.user-menu {
    margin-left: 0;
  }
}
@media screen and (max-width: 399px) {
  header.header .header-right .header-right-menus nav.user-menu {
    margin-left: -8px;
  }
  header.header .header-right .header-right-menus nav.user-menu .dropdown-trigger {
    gap: 0;
  }
  header.header .header-right .header-right-menus nav.user-menu .btn-iconxsm {
    display: none;
  }
}
@media screen and (max-width: 359px) {
  header.header .header-right .header-right-menus nav.user-menu {
    display: flex;
    align-items: center;
  }
}
@media screen and (max-width: 359px) {
  header.header .header-right .header-right-menus nav.user-menu .trigger-text img {
    width: 24px;
    height: 24px;
  }
}
header.header .header-logo {
  margin-right: 56px;
  flex-shrink: 0;
}
@media screen and (max-width: 1279px) {
  header.header .header-logo {
    margin-right: 24px;
  }
}
@media screen and (max-width: 767px) {
  header.header .header-logo {
    margin-right: 0;
  }
}
header.header .header-logo a {
  min-width: 115px;
}
header.header .header-logo svg {
  max-height: 24px;
  max-width: 115px;
}
header.header .header-logo .header-tagline {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
  margin-top: 4px;
}
@media screen and (max-width: 1023px) {
  header.header .header-logo .header-tagline {
    display: none;
  }
}
header.header .header-logo {
  /* separating the classes and isolating them with this approach is the only way the letter-spacing changes apply*/
}
header.header .header-logo .header-tagline-enterprise {
  font-size: 0.6875rem;
  text-transform: uppercase;
  /* identical to box height, or 91% */
  letter-spacing: 5.5px;
  font-weight: 500;
  margin-top: 4px;
}
@media screen and (max-width: 1023px) {
  header.header .header-logo .header-tagline-enterprise {
    display: block !important;
  }
}
header.header .btn-small {
  max-width: none;
}
header.header .dropdown-menu {
  min-width: 298px;
}

.notification-banner {
  z-index: 2;
}

.header-container-open {
  z-index: 1;
}
.header-container-open .header-logo {
  z-index: 1;
}
.header-container-open .header-right {
  z-index: 1;
}
.header-container-open .menu-toggle {
  z-index: 1;
}

/* ==========================================================================
  Minimal Header
========================================================================== */
.minimal-header .header-container .header-logo {
  margin-right: 0;
}

/* ==========================================================================
  -. Enterprise Header
========================================================================== */
header.header-enterprise {
  background-color: #14161E;
  color: #FFFFFF;
  fill: #FFFFFF;
  position: relative;
}
header.header-enterprise .header-logo .header-tagline {
  font-weight: 500;
  font-size: 11px;
  line-height: 10px;
  /* identical to box height, or 91% */
  letter-spacing: 5.5px;
  text-transform: uppercase;
  color: #FFFFFF;
}
@media screen and (max-width: 1023px) {
  header.header-enterprise .header-logo .header-tagline {
    display: block !important;
  }
}
header.header-enterprise .header-left-menus a {
  position: relative;
  z-index: 1;
  text-decoration: none;
}
header.header-enterprise .header-left-menus a:before {
  content: "";
  background-color: #3B3D43;
  position: absolute;
  left: -12px;
  top: -8px;
  width: calc(100% + 24px);
  height: calc(100% + 16px);
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: 8px;
  z-index: -1;
}
header.header-enterprise .header-left-menus a:hover:before {
  opacity: 1;
}
header.header-enterprise nav a {
  color: inherit;
  position: relative;
}
header.header-enterprise nav a.header-enterprise__link--active:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -30px;
  top: auto !important;
  left: 0;
  background-color: #FFFFFF;
  opacity: 1;
}
header.header-enterprise .dropdown .dropdown-menu .dropdown-content {
  background-color: #14161E;
  border: 1px solid #FFFFFF;
}
header.header-enterprise .btn-icon:hover {
  background-color: #3B3D43;
}
header.header-enterprise svg {
  fill: #FFFFFF;
}

/**
* Hero image page header
*
* 1a. Base
*
* 1b. Pattern Variations
*
*/
/* ==========================================================================
1a. Base
========================================================================== */
.hero-page-header {
  width: 100%;
  height: 480px;
  background-color: #14161E;
  border-radius: 0 0 48px 0;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.hero-page-header:before {
  content: "";
  height: 240px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #F7F7F7;
  border-radius: 0 48px 0 0;
}
.hero-page-header video {
  position: absolute;
  width: 100%;
  z-index: -1;
}
.hero-page-header .hero-page-header-round-top {
  width: 240px;
  height: 240px;
  position: relative;
}
.hero-page-header .hero-page-header-round-top:before {
  content: "";
  width: 120px;
  height: 48px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0 0 0 48px;
  box-shadow: -12px 12px 0 12px #F7F7F7;
}
.hero-page-header .hero-page-header-round-bottom {
  width: 240px;
  height: 240px;
  bottom: 0;
  left: 100%;
  position: relative;
}
.hero-page-header .hero-page-header-round-bottom:before {
  content: "";
  width: 120px;
  height: 48px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0 0 0 48px;
  box-shadow: -12px 12px 0 12px #F7F7F7;
}

/* ==========================================================================
1b. Pattern Variations
========================================================================== */
.hero-page-header-yellow {
  background-image: url(/assets/murakami/kodeco-brand/hero-page-header-yellow@1.5x-a226a061de6efb99f4331ce9b5a9fe4e7b302fdc99017c0aa90eac39b6d72294.jpg);
  background-size: 100%;
}

.hero-page-header-purple {
  background-image: url(/assets/murakami/kodeco-brand/hero-page-header-purple@1.5x-2270d1e4cae0f1f24ae8ad76cb751e58d72bbb94eadb76e728638ed73e8bb5ef.jpg);
  background-size: 100%;
}

/**
 * A progress control includes a progress element and a drop-down list with
 * actions relating to that progress control
 *
 *
 */
.progress-control {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  align-items: start;
}

/**
 * Cards
 *
 * 1. Base
 * 2. Domains
 *
 */
/* ==========================================================================
    1. Base
   ========================================================================== */
@keyframes a-triad {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.triad {
  padding: 0 !important;
  display: block;
  position: relative;
  z-index: 0;
}
.triad .triad-square {
  position: relative;
  width: 100%;
  height: unset;
}
.triad .triad-square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.triad .triad-square .triad-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  animation: a-triad 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
}
.triad .triad-square .triad-background svg {
  height: 100%;
  width: 100%;
}
.triad .triad-square .triad-grid {
  position: absolute;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  z-index: 2;
}
.triad .triad-square .triad-grid .triad-cell, .triad .triad-square .triad-grid .triad-bottom-left, .triad .triad-square .triad-grid .triad-top-right, .triad .triad-square .triad-grid .triad-top-left {
  display: flex;
  opacity: 0;
  animation: a-triad 1s;
  animation-fill-mode: forwards;
}
.triad .triad-square .triad-grid .triad-cell > img, .triad .triad-square .triad-grid .triad-bottom-left > img, .triad .triad-square .triad-grid .triad-top-right > img, .triad .triad-square .triad-grid .triad-top-left > img {
  padding: 10%;
  width: 100%;
  height: 100%;
  border-radius: 20%;
  aspect-ratio: 1/1;
}
.triad .triad-square .triad-grid .triad-top-left {
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 10% 10% 0;
  animation-delay: 0.25s;
}
.triad .triad-square .triad-grid .triad-top-left .badge {
  width: 100%;
  height: 100%;
  border-radius: 15%;
}
.triad .triad-square .triad-grid .triad-top-left .badge img {
  width: 40%;
  height: 40%;
  max-width: unset;
  max-height: unset;
}
.triad .triad-square .triad-grid .triad-top-right {
  align-items: flex-end;
  justify-content: flex-start;
  animation-delay: 1s;
}
.triad .triad-square .triad-grid .triad-top-right img {
  padding: 35px;
}
.triad .triad-square .triad-grid .triad-bottom-left {
  align-items: flex-start;
  justify-content: flex-end;
  animation-delay: 0.75s;
}
.triad .triad-square .triad-grid .triad-bottom-left img {
  border-radius: 0;
  padding: 35px;
}

/* ==========================================================================
    2. Domains
  ========================================================================== */
.triad.triad-article .triad-square .triad-background svg {
  fill: rgba(21, 120, 87, 0.2);
}
.triad.triad-article .triad-square .triad-grid .triad-top-left .badge {
  background-color: #157857;
}

.triad.triad-android .triad-square .triad-background svg {
  fill: rgba(0, 184, 126, 0.2);
}
.triad.triad-android .triad-square .triad-grid .triad-top-left .badge {
  background-color: #00B87E;
}

.triad.triad-flutter .triad-square .triad-background svg {
  fill: rgba(46, 164, 221, 0.2);
}
.triad.triad-flutter .triad-square .triad-grid .triad-top-left .badge {
  background-color: #2EA4DD;
}

.triad.triad-gametech .triad-square .triad-background svg {
  fill: rgba(180, 78, 191, 0.2);
}
.triad.triad-gametech .triad-square .triad-grid .triad-top-left .badge {
  background-color: #B44EBF;
}

.triad.triad-ios .triad-square .triad-background svg {
  fill: rgba(135, 99, 210, 0.2);
}
.triad.triad-ios .triad-square .triad-grid .triad-top-left .badge {
  background-color: #8763D2;
}

.triad.triad-server-side-swift .triad-square .triad-background svg {
  fill: rgba(242, 111, 170, 0.2);
}
.triad.triad-server-side-swift .triad-square .triad-grid .triad-top-left .badge {
  background-color: #F26FAA;
}

.triad.triad-professional-growth .triad-square .triad-background svg {
  fill: rgba(227, 169, 61, 0.2);
}
.triad.triad-professional-growth .triad-square .triad-grid .triad-top-left .badge {
  background-color: #E3A93D;
}

.triad.triad-multi-domain .triad-square .triad-background svg {
  fill: rgba(172, 159, 171, 0.2);
}
.triad.triad-multi-domain .triad-square .triad-grid .triad-top-left .badge {
  background-color: #AC9FAB;
}

.triad.triad-learning-path .triad-square .triad-background svg {
  fill: rgba(89, 124, 238, 0.2);
}
.triad.triad-learning-path .triad-square .triad-grid .triad-top-left .badge {
  background-color: #597CEE;
}

.triad.triad-video-course .triad-square .triad-background svg {
  fill: rgba(227, 74, 76, 0.2);
}
.triad.triad-video-course .triad-square .triad-grid .triad-top-left .badge {
  background-color: #E34A4C;
}

.triad.triad-book .triad-square .triad-background svg {
  fill: rgba(255, 136, 71, 0.2);
}
.triad.triad-book .triad-square .triad-grid .triad-top-left .badge {
  background-color: #FF8847;
}

.triad.triad-ai .triad-square .triad-background svg {
  fill: rgba(230, 151, 138, 0.2);
}
.triad.triad-ai .triad-square .triad-grid .triad-top-left .badge {
  background-color: #E6978A;
}

/**
 * Turbo Progress Bar
 *
 */
.turbo-progress-bar {
  z-index: 99999999;
  height: 2px;
  border-radius: 1px;
  background-color: #FF5A00;
}

/**
* Night mode
*
* 1. Global
* 2a. Header
* 2b. Header — Mobile
* 3. Tooltips
* 4. Card
* 5. Buttons
* 6. Modals
* 7a. Input — Search
* 7b. Input — Checkbox
* 7c. Input — Radio
* 7d. Input — Select Options
* 7e. Input — Text Area
* 8. Dropdown
* 9. Loading
* 10. Breadcrumbs
* 11. Notifications
* 12. Tabs
* 13. Data Table
* 14. Written Content
* 15. Pagination
* 16. Tiles
* 17. End of Page Adverts
* 18. Hero
* 19. Lists
*/
/* ==========================================================================
1. Dark styles as a placeholder to use for JS and OS with single stylesheet
========================================================================== */
/* ==========================================================================
Apply to CSS with class
========================================================================== */
.prefers-color-scheme--dark h1,
.prefers-color-scheme--dark h2,
.prefers-color-scheme--dark h3,
.prefers-color-scheme--dark h4,
.prefers-color-scheme--dark h5,
.prefers-color-scheme--dark span,
.prefers-color-scheme--dark p,
.prefers-color-scheme--dark a {
  color: #FFFFFF !important;
}
.prefers-color-scheme--dark .dark-fc-black {
  color: #14161E !important;
}
.prefers-color-scheme--dark .dark-fc-black span {
  color: #14161E !important;
}
.prefers-color-scheme--dark .dark-fc-orange-glow {
  color: #FF5A00 !important;
}
@media screen and (max-width: 767px) {
  .prefers-color-scheme--dark .mobile-dark-fc-white {
    color: #FFFFFF !important;
  }
}
.prefers-color-scheme--dark .dark-bc-white {
  border: 1px solid #FFFFFF !important;
}
.prefers-color-scheme--dark .dark-bc-black-plaza {
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .dark-bc-clear {
  border: none !important;
}
.prefers-color-scheme--dark .dark-bg-clear {
  background-color: transparent !important;
}
.prefers-color-scheme--dark .dark-bg-clear:hover {
  background-color: #3B3D43 !important;
}
.prefers-color-scheme--dark .dark-bg-orange-determination {
  background-color: #CE3F00 !important;
}
.prefers-color-scheme--dark .dark-bg-black-night {
  background-color: #14161E;
}
.prefers-color-scheme--dark .dark-bg-black-phantom {
  background-color: #0E0F14;
}
.prefers-color-scheme--dark .dark-bg-inherit {
  background-color: inherit;
}
@media screen and (max-width: 767px) {
  .prefers-color-scheme--dark .btn-largew.bg-black-night.dark-bg-orange-determination:hover {
    background-color: #ff4f02 !important;
  }
}
.prefers-color-scheme--dark .btn-larget.dark-bg-orange-determination,
.prefers-color-scheme--dark .btn-largew.dark-bg-orange-determination,
.prefers-color-scheme--dark .btn-normalt.dark-bg-orange-determination,
.prefers-color-scheme--dark .btn-normalw.dark-bg-orange-determination,
.prefers-color-scheme--dark .btn-small.dark-bg-orange-determination,
.prefers-color-scheme--dark .btn-xlarge.dark-bg-orange-determination {
  background-color: #CE3F00 !important;
}
.prefers-color-scheme--dark .btn-larget.dark-bg-orange-determination:hover,
.prefers-color-scheme--dark .btn-largew.dark-bg-orange-determination:hover,
.prefers-color-scheme--dark .btn-normalt.dark-bg-orange-determination:hover,
.prefers-color-scheme--dark .btn-normalw.dark-bg-orange-determination:hover,
.prefers-color-scheme--dark .btn-small.dark-bg-orange-determination:hover,
.prefers-color-scheme--dark .btn-xlarge.dark-bg-orange-determination:hover {
  background-color: #ff4f02 !important;
}
.prefers-color-scheme--dark .dark-bg-white {
  background-color: #FFFFFF !important;
}
.prefers-color-scheme--dark .dark-bg-white:hover {
  background-color: #D7D7D7 !important;
}
.prefers-color-scheme--dark .btn-larget.dark-bg-red-lipstick,
.prefers-color-scheme--dark .btn-largew.dark-bg-red-lipstick,
.prefers-color-scheme--dark .btn-normalt.dark-bg-red-lipstick,
.prefers-color-scheme--dark .btn-normalw.dark-bg-red-lipstick,
.prefers-color-scheme--dark .btn-small.dark-bg-red-lipstick,
.prefers-color-scheme--dark .btn-xlarge.dark-bg-red-lipstick {
  background-color: #962224 !important;
}
.prefers-color-scheme--dark .btn-larget.dark-bg-red-lipstick:hover,
.prefers-color-scheme--dark .btn-largew.dark-bg-red-lipstick:hover,
.prefers-color-scheme--dark .btn-normalt.dark-bg-red-lipstick:hover,
.prefers-color-scheme--dark .btn-normalw.dark-bg-red-lipstick:hover,
.prefers-color-scheme--dark .btn-small.dark-bg-red-lipstick:hover,
.prefers-color-scheme--dark .btn-xlarge.dark-bg-red-lipstick:hover {
  background-color: rgb(135, 30.6, 32.4) !important;
}
.prefers-color-scheme--dark .dark-sc-white {
  fill: #FFFFFF !important;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  2a. Header
  ========================================================================== */
}
.prefers-color-scheme--dark header.header {
  background-color: #14161E;
  color: #FFFFFF;
}
.prefers-color-scheme--dark header.header svg {
  fill: #FFFFFF;
}
@media screen and (min-width: 860px) {
  .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown-trigger:hover, .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown-trigger:active, .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown-trigger:focus, .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown-trigger:target {
    background-color: #3B3D43;
  }
}
@media screen and (min-width: 860px) {
  .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav details[open] .dropdown-trigger {
    background-color: #3B3D43;
  }
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content {
  background-color: #14161E;
  border: 1px solid #FFFFFF;
}
@media screen and (max-width: 859px) {
  .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-ios {
    background: #3C2C64;
  }
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-ios:hover {
  background: #3C2C64;
}
@media screen and (min-width: 860px) {
  .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-ios:hover .dropdown-submenu {
    background: #3C2C64;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
  }
}
@media screen and (max-width: 859px) {
  .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-ios .dropdown-submenu {
    background: #3C2C64;
  }
}
@media screen and (max-width: 859px) {
  .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-android {
    background: #0F553E;
  }
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-android:hover {
  background: #0F553E;
}
@media screen and (min-width: 860px) {
  .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-android:hover .dropdown-submenu {
    background: #0F553E;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
  }
}
@media screen and (max-width: 859px) {
  .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-android .dropdown-submenu {
    background: #0F553E;
  }
}
@media screen and (max-width: 859px) {
  .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-flutter {
    background: #1B4A6B;
  }
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-flutter:hover {
  background: #1B4A6B;
}
@media screen and (min-width: 860px) {
  .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-flutter:hover .dropdown-submenu {
    background: #1B4A6B;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
  }
}
@media screen and (max-width: 859px) {
  .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-flutter .dropdown-submenu {
    background: #1B4A6B;
  }
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content a.dropdown-line {
  color: #FFFFFF;
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content a.dropdown-line:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content a.dropdown-line.dropdown-line-sss:hover {
  background: rgba(242, 111, 170, 0.5);
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content a.dropdown-line.dropdown-line-gametech:hover {
  background: rgba(180, 78, 191, 0.5);
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus .header-domain-menu > nav .dropdown-trigger:hover, .prefers-color-scheme--dark header.header .header-left .header-left-menus .header-domain-menu > nav .dropdown-trigger:active, .prefers-color-scheme--dark header.header .header-left .header-left-menus .header-domain-menu > nav .dropdown-trigger:focus, .prefers-color-scheme--dark header.header .header-left .header-left-menus .header-domain-menu > nav .dropdown-trigger:target {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus .header-domain-menu > nav details[open] .dropdown-trigger {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus .header-domain-menu > nav .dropdown .dropdown-menu .dropdown-content {
  background-color: #14161E;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus .header-domain-menu > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line {
  color: #FFFFFF;
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus .header-domain-menu > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark header.header .header-right .search svg {
  fill: #FFFFFF;
  background: unset;
}
.prefers-color-scheme--dark header.header .header-right .search svg[role=clear]:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark header.header .header-right .search input {
  background-color: #07080A;
  color: #FFFFFF;
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark header.header .header-right .search input:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark header.header .header-right .search input:focus {
  background-color: #07080A;
  border-color: #FF5A00 !important;
  box-shadow: 0px 0px 0px 4px rgba(255, 136, 71, 0.2);
}
.prefers-color-scheme--dark header.header .header-right .header-right-menus .btn-icon:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark header.header .header-right .header-right-menus > nav .dropdown-trigger .btn-iconxsm:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark header.header .header-right .header-right-menus > nav details[open] .dropdown-trigger {
  background-color: #14161E;
}
.prefers-color-scheme--dark header.header .header-right .header-right-menus > nav .dropdown .dropdown-menu .dropdown-content {
  background-color: #14161E;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark header.header .header-right .header-right-menus > nav .dropdown .dropdown-menu .dropdown-content hr.dropdown-line {
  border-top: 1px solid #30363D;
}
.prefers-color-scheme--dark header.header .header-right .header-right-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line {
  color: #FFFFFF;
}
.prefers-color-scheme--dark header.header .header-right .header-right-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark header.header .header-right .header-right-menus {
  /* When not logged in, the sign in button appears */
}
.prefers-color-scheme--dark header.header .header-right .header-right-menus .header-right-sign-in .btn-header-signin {
  background-color: #14161E;
}
.prefers-color-scheme--dark header.header .header-right .header-right-menus .header-right-sign-in .btn-header-signin:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  2b. Header Mobile
  ========================================================================== */
}
.prefers-color-scheme--dark .menu-toggle button > div > div {
  background-color: #FFFFFF !important;
}
@media screen and (max-width: 859px) {
  .prefers-color-scheme--dark header.header .header-left .header-left-menus {
    background-color: #14161E;
  }
  .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content {
    border: unset;
  }
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  3. Tooltips
  ========================================================================== */
}
.prefers-color-scheme--dark .tooltip .tooltip-text {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  4. Card
  ========================================================================== */
}
.prefers-color-scheme--dark .card > div {
  background-color: #14161E;
}
.prefers-color-scheme--dark .card > div .card-title {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .card > div .card-text {
  -webkit-line-clamp: unset;
  color: #D7D7D7;
}
.prefers-color-scheme--dark .card .card-topright {
  background-color: transparent;
}
.prefers-color-scheme--dark .card .card-topright::before {
  border: 1px #30363D;
  border-style: none none solid solid;
  box-shadow: -4px 4px 0 4px #14161E;
}
.prefers-color-scheme--dark .card .card-topleft {
  border: 1px #30363D;
  border-style: solid solid none solid;
}
.prefers-color-scheme--dark .card .card-topleft .badge svg {
  fill: #14161E;
}
.prefers-color-scheme--dark .card .card-bottom {
  border: 1px #30363D;
  border-style: none solid solid solid;
}
.prefers-color-scheme--dark .card .card-bottom::before {
  border: 1px #30363D;
  border-style: solid solid none none;
}
.prefers-color-scheme--dark .card .card-bottom .card-description .modal .modal-wrapper {
  background-color: #14161E !important;
  border-color: #FFFFFF;
}
.prefers-color-scheme--dark .card.obscure-banner .card-topright::before {
  border: 1px #30363D;
  border-style: none none solid solid;
  box-shadow: -4px 4px 0 4px #FF8847;
}
.prefers-color-scheme--dark .card.obscure-banner .card-topright .card-artwork {
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .card-minimal {
  background-color: #14161E;
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  5. Buttons
  ========================================================================== */
}
.prefers-color-scheme--dark .btn-larget,
.prefers-color-scheme--dark .btn-largew,
.prefers-color-scheme--dark .btn-normalt,
.prefers-color-scheme--dark .btn-normalw,
.prefers-color-scheme--dark .btn-small,
.prefers-color-scheme--dark .btn-xlarge {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .btn-icon:hover,
.prefers-color-scheme--dark .btn-iconxsm:hover {
  background-color: #3B3D43 !important;
}
.prefers-color-scheme--dark .btn-icon svg,
.prefers-color-scheme--dark .btn-iconxsm svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark a.btn-larget,
.prefers-color-scheme--dark a.btn-largew,
.prefers-color-scheme--dark a.btn-normalt,
.prefers-color-scheme--dark a.btn-normalw,
.prefers-color-scheme--dark a.btn-small,
.prefers-color-scheme--dark a.btn-xlarge {
  color: #FFFFFF;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  6. Modals
  ========================================================================== */
}
.prefers-color-scheme--dark .modal .modal-wrapper {
  background-color: #14161E;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .modal .modal-wrapper svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .modal .modal-wrapper .btn-icon:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .modal .modal-wrapper__full-screen {
  background-color: #0E0F14;
}
.prefers-color-scheme--dark .modal .modal-wrapper__full-screen footer {
  background-color: #14161E;
}
.prefers-color-scheme--dark .modal .modal-table {
  border-color: rgba(215, 215, 215, 0.2);
}
.prefers-color-scheme--dark .modal-sticky .modal-sticky-footer {
  background-color: #14161E;
  border-top: 1px solid #3B3D43;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  7a. Input — Search
  ========================================================================== */
}
.prefers-color-scheme--dark input.search-normal,
.prefers-color-scheme--dark input.search-small {
  background-color: #07080A;
  border: 1px solid #FFFFFF !important;
  color: #FFFFFF;
}
.prefers-color-scheme--dark input.search-normal:hover,
.prefers-color-scheme--dark input.search-small:hover {
  background-color: rgba(59, 61, 67, 0.5) !important;
}
.prefers-color-scheme--dark input.search-normal:focus,
.prefers-color-scheme--dark input.search-small:focus {
  background-color: #07080A;
  border-color: #FF5A00 !important;
  box-shadow: 0px 0px 0px 4px rgba(255, 136, 71, 0.2);
}
.prefers-color-scheme--dark input.search-normal + svg[role=clear],
.prefers-color-scheme--dark input.search-small + svg[role=clear] {
  fill: #FFFFFF;
  background: unset;
}
.prefers-color-scheme--dark input.search-normal + svg[role=clear]:hover,
.prefers-color-scheme--dark input.search-small + svg[role=clear]:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark input.search-normal + svg[role=clear]:focus, .prefers-color-scheme--dark input.search-normal + svg[role=clear]:target, .prefers-color-scheme--dark input.search-normal + svg[role=clear]:active,
.prefers-color-scheme--dark input.search-small + svg[role=clear]:focus,
.prefers-color-scheme--dark input.search-small + svg[role=clear]:target,
.prefers-color-scheme--dark input.search-small + svg[role=clear]:active {
  background-color: unset;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  7b. Input — Checkbox
  ========================================================================== */
}
.prefers-color-scheme--dark .checkbox .checkbox-tick {
  background-color: #07080A;
  border: 1px solid #FFFFFF;
  /* On mouse-over, change  background color */
}
.prefers-color-scheme--dark .checkbox .checkbox-tick:hover input ~ .checkbox-tick {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .checkbox .checkbox-tick {
  /* On tab focus, change border */
}
.prefers-color-scheme--dark .checkbox .checkbox-tick:focus input ~ .checkbox-tick {
  border-color: #FF5A00;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
}
.prefers-color-scheme--dark .checkbox {
  /* Show the checkmark when checked */
}
.prefers-color-scheme--dark .checkbox input:checked ~ span.checkbox-tick {
  background-color: #00B87E;
  border-color: #00B87E;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  7c. Input — Radio
  ========================================================================== */
}
.prefers-color-scheme--dark .radio .radio-tick {
  background-color: #07080A;
  border: 1px solid #FFFFFF;
  /* The dot looks like this */
}
.prefers-color-scheme--dark .radio .radio-tick:after {
  border: 10px solid #30363D;
  background: #FFFFFF;
}
.prefers-color-scheme--dark .radio {
  /* On mouse-over, change  background color */
}
.prefers-color-scheme--dark .radio:hover input ~ .radio-tick {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .radio {
  /* On tab focus, change border */
}
.prefers-color-scheme--dark .radio:focus input ~ .radio-tick {
  border-color: #FF5A00;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
}
.prefers-color-scheme--dark {
  /* Show the checkmark when checked */
}
.prefers-color-scheme--dark input:checked ~ .radio-tick {
  background-color: #00B87E;
  border-color: #00B87E;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  7d. Input — Select Options
  ========================================================================== */
}
.prefers-color-scheme--dark select,
.prefers-color-scheme--dark .select select.select-native,
.prefers-color-scheme--dark .select .select-custom {
  border-color: #FFFFFF;
  background-color: #14161E;
  color: #FFFFFF;
}
.prefers-color-scheme--dark select:hover,
.prefers-color-scheme--dark .select select.select-native:hover,
.prefers-color-scheme--dark .select .select-custom:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .select-custom .select-custom-trigger {
  background-color: #14161E;
}
.prefers-color-scheme--dark .select-custom .select-custom-options {
  background-color: #14161E;
  border-color: #FFFFFF;
}
.prefers-color-scheme--dark .select-custom .select-custom-options .select-custom-option:hover,
.prefers-color-scheme--dark .select-custom .select-custom-options .select-custom-option .hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  7e. Input — Text Area
  ========================================================================== */
}
.prefers-color-scheme--dark .text-input {
  border: 1px solid #FFFFFF;
  background-color: #07080A;
  color: #FFFFFF;
}
.prefers-color-scheme--dark .text-input:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .text-input:focus {
  border-color: #FF5A00;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
}
.prefers-color-scheme--dark .text-input:disabled {
  color: #D7D7D7;
  background-color: #4A4A4B;
  border-color: #FFFFFF;
}
.prefers-color-scheme--dark .text-input:invalid {
  border: 1px solid #E34A4C;
}
.prefers-color-scheme--dark .control .text-area {
  background-color: #07080A;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
}
.prefers-color-scheme--dark .control span.input-error {
  color: #E34A4C !important;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  7f. Input — Range
  ========================================================================== */
}
.prefers-color-scheme--dark .range::-webkit-slider-thumb {
  border: 2px solid #0E0F14;
  box-shadow: 0px 0px 0px 4px rgba(255, 90, 0, 0.2);
}
.prefers-color-scheme--dark .range::-moz-range-thumb {
  border: 2px solid #0E0F14;
  box-shadow: 0px 0px 0px 4px rgba(255, 90, 0, 0.2);
}
.prefers-color-scheme--dark .range::-ms-thumb {
  border: 2px solid #0E0F14;
  box-shadow: 0px 0px 0px 4px rgba(255, 90, 0, 0.2);
}
.prefers-color-scheme--dark {
  /* ==========================================================================
    7g. Input — Toggle button
  ========================================================================== */
}
.prefers-color-scheme--dark .toggle-button {
  background-color: #14161E;
}
.prefers-color-scheme--dark .toggle-button__input {
  border-width: 1px;
  border-color: #30363D;
}
.prefers-color-scheme--dark .toggle-button__input:hover {
  border-color: #FF5A00;
  border-width: 1px;
}
.prefers-color-scheme--dark .toggle-button__input:hover:disabled {
  border-color: #30363D;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  8. Dropdown
  ========================================================================== */
}
.prefers-color-scheme--dark .dropdown details[open] .btn-iconxsm {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .dropdown .dropdown-menu .dropdown-content {
  background-color: #14161E;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .dropdown .dropdown-menu .dropdown-content .dropdown-line {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .dropdown .dropdown-menu .dropdown-content hr.dropdown-line {
  border-top: 1px solid #30363D;
}
.prefers-color-scheme--dark .dropdown .dropdown-menu .dropdown-content a.dropdown-line:hover,
.prefers-color-scheme--dark .dropdown .dropdown-menu .dropdown-content button.dropdown-line:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  9. Loading
  ========================================================================== */
}
.prefers-color-scheme--dark .loading .loading-icon svg {
  fill: #FFFFFF;
  -webkit-filter: invert(1);
  /* safari 6.0 - 9.0 */
  filter: invert(1);
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  10. Breadcrumbs
  ========================================================================== */
}
.prefers-color-scheme--dark nav.breadcrumbs svg.icon {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  11. Notifications
  ========================================================================== */
}
.prefers-color-scheme--dark .notification {
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .notification .notification--delete .btn-iconsm svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .notification .notification--delete .btn-iconsm:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  12. Tabs
  ========================================================================== */
}
.prefers-color-scheme--dark .tabs li a:not(.btn-icon, .dropdown):hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .tabs li.tabs-active {
  border-bottom-color: #FFFFFF;
}
.prefers-color-scheme--dark .tabs li.tabs-active a:not(.btn-icon, .dropdown) {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .tabs li.tabs-active a:not(.btn-icon, .dropdown):hover {
  background-color: unset;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  13. Data Table
  ========================================================================== */
}
.prefers-color-scheme--dark .elementary-table {
  background-color: #0E0F14;
  border: 1px solid #30363D;
  color: #FFFFFF;
}
.prefers-color-scheme--dark .elementary-table thead th,
.prefers-color-scheme--dark .elementary-table tbody th {
  background-color: #07080A;
}
.prefers-color-scheme--dark .elementary-table thead th .btn-normalw,
.prefers-color-scheme--dark .elementary-table tbody th .btn-normalw {
  border: unset !important;
  background-color: unset !important;
}
.prefers-color-scheme--dark .elementary-table thead label.search svg,
.prefers-color-scheme--dark .elementary-table tbody label.search svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .elementary-table.zebra-rows-table tr:nth-child(odd) {
  background-color: #14161E;
}
.prefers-color-scheme--dark .elementary-table.zebra-rows-table tr:nth-child(even) {
  background-color: rgba(7, 8, 10, 0.5);
}
@media only screen and (max-width: 600px) {
  .prefers-color-scheme--dark .elementary-table.is-responsive {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #323232 100%);
  }
}
.prefers-color-scheme--dark .elementary-table.is-controls .btn-normalw:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .selection-results {
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .selection-results .button-container .badge.bg-black-night:hover, .prefers-color-scheme--dark .selection-results .button-container .badge.bg-black-night:focus {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .selection-results .button-container .btn-small:hover, .prefers-color-scheme--dark .selection-results .button-container .btn-small:focus {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  14. Written Content
  ========================================================================== */
}
.prefers-color-scheme--dark .written-content .note {
  background-color: #0E0F14;
}
.prefers-color-scheme--dark .written-content img.bordered {
  border-color: #FFFFFF;
}
.prefers-color-scheme--dark .written-content pre {
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .btn-mark-complete {
  border-color: #30363D;
}
.prefers-color-scheme--dark .btn-mark-complete:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  15. Pagination
  ========================================================================== */
}
.prefers-color-scheme--dark ul.pagination li.page .page-link {
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark ul.pagination li.page .page-link:hover {
  background-color: #3B3D43 !important;
}
.prefers-color-scheme--dark ul.pagination li.page .page-link:not(.current):hover {
  background-color: #3B3D43 !important;
}
.prefers-color-scheme--dark ul.pagination li.page .page-link:not(.current):hover svg {
  fill: white;
}
.prefers-color-scheme--dark ul.pagination li.page a.page-link.active {
  background-color: #FFFFFF !important;
  color: #0E0F14 !important;
}
.prefers-color-scheme--dark ul.pagination li.page a.page-link.active:hover {
  background-color: #D7D7D7 !important;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  16. Tiles
  ========================================================================== */
  /* ==========================================================================
    17. End of Page Adverts
  ========================================================================== */
}
.prefers-color-scheme--dark .banner-draper-end-of-page {
  background-color: #CE3F00;
}
.prefers-color-scheme--dark .banner-draper-end-of-page:before {
  filter: invert(100%);
}
.prefers-color-scheme--dark .banner-draper-end-of-page:after {
  filter: invert(100%);
}
.prefers-color-scheme--dark .banner-draper-end-of-page .banner-draper__headline,
.prefers-color-scheme--dark .banner-draper-end-of-page .banner-draper__description {
  color: #FFFFFF !important;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
    18. Hero
  ========================================================================== */
}
.prefers-color-scheme--dark .hero-page-header::before {
  background-color: #0E0F14;
}
.prefers-color-scheme--dark .hero-page-header .hero-page-header-round-top:before {
  box-shadow: -12px 12px 0 12px #0E0F14;
}
.prefers-color-scheme--dark .hero-page-header .hero-page-header-round-bottom:before {
  box-shadow: -12px 12px 0 12px #0E0F14;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  19. Lists
  ========================================================================== */
}
.prefers-color-scheme--dark .ol-list li::before {
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .section-list ul.content-list .content-list--icon .content-list--icon-circle {
  border-color: #FFFFFF;
}
.prefers-color-scheme--dark .section-list ul.content-list .content-list--icon .content-list--icon-dot {
  background-color: #FFFFFF;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  20. Lists
  ========================================================================== */
}
.prefers-color-scheme--dark .accordion-trigger .accordion-number,
.prefers-color-scheme--dark .accordion-trigger .accordion-number--locked {
  background-color: #14161E;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  21. Progress
  ========================================================================== */
}
.prefers-color-scheme--dark .progress {
  background-color: rgba(215, 215, 215, 0.05);
}

.hidden {
  display: none;
}

.hidden-force {
  display: none !important;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

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

.center-justify {
  justify-content: center;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/**
 * This file contains rotation utility methods
 *
 * 1. Angles
 *
 */
/* ==========================================================================
    1. Angles
   ========================================================================== */
.rot-45 {
  rotate: 45deg;
}

.rot-90 {
  rotate: 90deg;
}

.rot-135 {
  rotate: 135deg;
}

.rot-180 {
  rotate: 180deg;
}

.rot-225 {
  rotate: 225deg;
}

.rot-270 {
  rotate: 270deg;
}

.rot-315 {
  rotate: 315deg;
}

/* If you've defined your colours as ("color-name",$color-variable)
*  in the colour list in the settings folder
*  Then you can use them as background and font colours... and others if added */
/* Font color */
.fc-black-night {
  color: #14161E;
}

/* Background color */
.bg-black-night {
  background-color: #14161E;
}

/* Border color */
.bc-black-night {
  border: 1px solid #14161E;
}

/* SVG Colour */
.sc-black-night {
  fill: #14161E;
}

/* Font color */
.fc-black-night-hover {
  color: #43454B;
}

/* Background color */
.bg-black-night-hover {
  background-color: #43454B;
}

/* Border color */
.bc-black-night-hover {
  border: 1px solid #43454B;
}

/* SVG Colour */
.sc-black-night-hover {
  fill: #43454B;
}

/* Font color */
.fc-black-phantom {
  color: #0E0F14;
}

/* Background color */
.bg-black-phantom {
  background-color: #0E0F14;
}

/* Border color */
.bc-black-phantom {
  border: 1px solid #0E0F14;
}

/* SVG Colour */
.sc-black-phantom {
  fill: #0E0F14;
}

/* Font color */
.fc-black-jaguar {
  color: #07080A;
}

/* Background color */
.bg-black-jaguar {
  background-color: #07080A;
}

/* Border color */
.bc-black-jaguar {
  border: 1px solid #07080A;
}

/* SVG Colour */
.sc-black-jaguar {
  fill: #07080A;
}

/* Font color */
.fc-black-iridium {
  color: #3B3D43;
}

/* Background color */
.bg-black-iridium {
  background-color: #3B3D43;
}

/* Border color */
.bc-black-iridium {
  border: 1px solid #3B3D43;
}

/* SVG Colour */
.sc-black-iridium {
  fill: #3B3D43;
}

/* Font color */
.fc-black-plaza {
  color: #30363D;
}

/* Background color */
.bg-black-plaza {
  background-color: #30363D;
}

/* Border color */
.bc-black-plaza {
  border: 1px solid #30363D;
}

/* SVG Colour */
.sc-black-plaza {
  fill: #30363D;
}

/* Font color */
.fc-grey-thought {
  color: #D7D7D7;
}

/* Background color */
.bg-grey-thought {
  background-color: #D7D7D7;
}

/* Border color */
.bc-grey-thought {
  border: 1px solid #D7D7D7;
}

/* SVG Colour */
.sc-grey-thought {
  fill: #D7D7D7;
}

/* Font color */
.fc-grey-thought-20 {
  color: rgba(215, 215, 215, 0.2);
}

/* Background color */
.bg-grey-thought-20 {
  background-color: rgba(215, 215, 215, 0.2);
}

/* Border color */
.bc-grey-thought-20 {
  border: 1px solid rgba(215, 215, 215, 0.2);
}

/* SVG Colour */
.sc-grey-thought-20 {
  fill: rgba(215, 215, 215, 0.2);
}

/* Font color */
.fc-grey-thought-50 {
  color: rgba(215, 215, 215, 0.4980392157);
}

/* Background color */
.bg-grey-thought-50 {
  background-color: rgba(215, 215, 215, 0.4980392157);
}

/* Border color */
.bc-grey-thought-50 {
  border: 1px solid rgba(215, 215, 215, 0.4980392157);
}

/* SVG Colour */
.sc-grey-thought-50 {
  fill: rgba(215, 215, 215, 0.4980392157);
}

/* Font color */
.fc-grey-wisp {
  color: #F7F7F7;
}

/* Background color */
.bg-grey-wisp {
  background-color: #F7F7F7;
}

/* Border color */
.bc-grey-wisp {
  border: 1px solid #F7F7F7;
}

/* SVG Colour */
.sc-grey-wisp {
  fill: #F7F7F7;
}

/* Font color */
.fc-grey-london {
  color: #AC9FAB;
}

/* Background color */
.bg-grey-london {
  background-color: #AC9FAB;
}

/* Border color */
.bc-grey-london {
  border: 1px solid #AC9FAB;
}

/* SVG Colour */
.sc-grey-london {
  fill: #AC9FAB;
}

/* Font color */
.fc-grey-taupe {
  color: #5F4F5E;
}

/* Background color */
.bg-grey-taupe {
  background-color: #5F4F5E;
}

/* Border color */
.bc-grey-taupe {
  border: 1px solid #5F4F5E;
}

/* SVG Colour */
.sc-grey-taupe {
  fill: #5F4F5E;
}

/* Font color */
.fc-red-lychee {
  color: #E34A4C;
}

/* Background color */
.bg-red-lychee {
  background-color: #E34A4C;
}

/* Border color */
.bc-red-lychee {
  border: 1px solid #E34A4C;
}

/* SVG Colour */
.sc-red-lychee {
  fill: #E34A4C;
}

/* Font color */
.fc-red-lipstick {
  color: #962224;
}

/* Background color */
.bg-red-lipstick {
  background-color: #962224;
}

/* Border color */
.bc-red-lipstick {
  border: 1px solid #962224;
}

/* SVG Colour */
.sc-red-lipstick {
  fill: #962224;
}

/* Font color */
.fc-pink-doll {
  color: #F26FAA;
}

/* Background color */
.bg-pink-doll {
  background-color: #F26FAA;
}

/* Border color */
.bc-pink-doll {
  border: 1px solid #F26FAA;
}

/* SVG Colour */
.sc-pink-doll {
  fill: #F26FAA;
}

/* Font color */
.fc-pink-peony {
  color: #A53B6B;
}

/* Background color */
.bg-pink-peony {
  background-color: #A53B6B;
}

/* Border color */
.bc-pink-peony {
  border: 1px solid #A53B6B;
}

/* SVG Colour */
.sc-pink-peony {
  fill: #A53B6B;
}

/* Font color */
.fc-pink-peach {
  color: #E6978A;
}

/* Background color */
.bg-pink-peach {
  background-color: #E6978A;
}

/* Border color */
.bc-pink-peach {
  border: 1px solid #E6978A;
}

/* SVG Colour */
.sc-pink-peach {
  fill: #E6978A;
}

/* Font color */
.fc-pink-incense {
  color: #99584D;
}

/* Background color */
.bg-pink-incense {
  background-color: #99584D;
}

/* Border color */
.bc-pink-incense {
  border: 1px solid #99584D;
}

/* SVG Colour */
.sc-pink-incense {
  fill: #99584D;
}

/* Font color */
.fc-orange-glow {
  color: #FF5A00;
}

/* Background color */
.bg-orange-glow {
  background-color: #FF5A00;
}

/* Border color */
.bc-orange-glow {
  border: 1px solid #FF5A00;
}

/* SVG Colour */
.sc-orange-glow {
  fill: #FF5A00;
}

/* Font color */
.fc-orange-enthusiasm {
  color: #FF8847;
}

/* Background color */
.bg-orange-enthusiasm {
  background-color: #FF8847;
}

/* Border color */
.bc-orange-enthusiasm {
  border: 1px solid #FF8847;
}

/* SVG Colour */
.sc-orange-enthusiasm {
  fill: #FF8847;
}

/* Font color */
.fc-orange-enthusiasm-20 {
  color: rgba(255, 136, 71, 0.2);
}

/* Background color */
.bg-orange-enthusiasm-20 {
  background-color: rgba(255, 136, 71, 0.2);
}

/* Border color */
.bc-orange-enthusiasm-20 {
  border: 1px solid rgba(255, 136, 71, 0.2);
}

/* SVG Colour */
.sc-orange-enthusiasm-20 {
  fill: rgba(255, 136, 71, 0.2);
}

/* Font color */
.fc-orange-determination {
  color: #CE3F00;
}

/* Background color */
.bg-orange-determination {
  background-color: #CE3F00;
}

/* Border color */
.bc-orange-determination {
  border: 1px solid #CE3F00;
}

/* SVG Colour */
.sc-orange-determination {
  fill: #CE3F00;
}

/* Font color */
.fc-orange-raw-sienna {
  color: #CF7F42;
}

/* Background color */
.bg-orange-raw-sienna {
  background-color: #CF7F42;
}

/* Border color */
.bc-orange-raw-sienna {
  border: 1px solid #CF7F42;
}

/* SVG Colour */
.sc-orange-raw-sienna {
  fill: #CF7F42;
}

/* Font color */
.fc-orange-burnt {
  color: #82491D;
}

/* Background color */
.bg-orange-burnt {
  background-color: #82491D;
}

/* Border color */
.bc-orange-burnt {
  border: 1px solid #82491D;
}

/* SVG Colour */
.sc-orange-burnt {
  fill: #82491D;
}

/* Font color */
.fc-yellow-autumn {
  color: #E3A93D;
}

/* Background color */
.bg-yellow-autumn {
  background-color: #E3A93D;
}

/* Border color */
.bc-yellow-autumn {
  border: 1px solid #E3A93D;
}

/* SVG Colour */
.sc-yellow-autumn {
  fill: #E3A93D;
}

/* Font color */
.fc-yellow-curry {
  color: #966B19;
}

/* Background color */
.bg-yellow-curry {
  background-color: #966B19;
}

/* Border color */
.bc-yellow-curry {
  border: 1px solid #966B19;
}

/* SVG Colour */
.sc-yellow-curry {
  fill: #966B19;
}

/* Font color */
.fc-green-meadow {
  color: #00B87E;
}

/* Background color */
.bg-green-meadow {
  background-color: #00B87E;
}

/* Border color */
.bc-green-meadow {
  border: 1px solid #00B87E;
}

/* SVG Colour */
.sc-green-meadow {
  fill: #00B87E;
}

/* Font color */
.fc-green-meadow-50 {
  color: rgba(0, 184, 126, 0.5019607843);
}

/* Background color */
.bg-green-meadow-50 {
  background-color: rgba(0, 184, 126, 0.5019607843);
}

/* Border color */
.bc-green-meadow-50 {
  border: 1px solid rgba(0, 184, 126, 0.5019607843);
}

/* SVG Colour */
.sc-green-meadow-50 {
  fill: rgba(0, 184, 126, 0.5019607843);
}

/* Font color */
.fc-green-meadow-dark {
  color: #0F553E;
}

/* Background color */
.bg-green-meadow-dark {
  background-color: #0F553E;
}

/* Border color */
.bc-green-meadow-dark {
  border: 1px solid #0F553E;
}

/* SVG Colour */
.sc-green-meadow-dark {
  fill: #0F553E;
}

/* Font color */
.fc-green-rainforest {
  color: #157857;
}

/* Background color */
.bg-green-rainforest {
  background-color: #157857;
}

/* Border color */
.bc-green-rainforest {
  border: 1px solid #157857;
}

/* SVG Colour */
.sc-green-rainforest {
  fill: #157857;
}

/* Font color */
.fc-green-celery {
  color: #AEB740;
}

/* Background color */
.bg-green-celery {
  background-color: #AEB740;
}

/* Border color */
.bc-green-celery {
  border: 1px solid #AEB740;
}

/* SVG Colour */
.sc-green-celery {
  fill: #AEB740;
}

/* Font color */
.fc-green-cypress {
  color: #575C20;
}

/* Background color */
.bg-green-cypress {
  background-color: #575C20;
}

/* Border color */
.bc-green-cypress {
  border: 1px solid #575C20;
}

/* SVG Colour */
.sc-green-cypress {
  fill: #575C20;
}

/* Font color */
.fc-green-olive {
  color: #778749;
}

/* Background color */
.bg-green-olive {
  background-color: #778749;
}

/* Border color */
.bc-green-olive {
  border: 1px solid #778749;
}

/* SVG Colour */
.sc-green-olive {
  fill: #778749;
}

/* Font color */
.fc-green-kelp {
  color: #3C4425;
}

/* Background color */
.bg-green-kelp {
  background-color: #3C4425;
}

/* Border color */
.bc-green-kelp {
  border: 1px solid #3C4425;
}

/* SVG Colour */
.sc-green-kelp {
  fill: #3C4425;
}

/* Font color */
.fc-blue-sky {
  color: #2EA4DD;
}

/* Background color */
.bg-blue-sky {
  background-color: #2EA4DD;
}

/* Border color */
.bc-blue-sky {
  border: 1px solid #2EA4DD;
}

/* SVG Colour */
.sc-blue-sky {
  fill: #2EA4DD;
}

/* Font color */
.fc-blue-sky-50 {
  color: rgba(46, 164, 221, 0.5019607843);
}

/* Background color */
.bg-blue-sky-50 {
  background-color: rgba(46, 164, 221, 0.5019607843);
}

/* Border color */
.bc-blue-sky-50 {
  border: 1px solid rgba(46, 164, 221, 0.5019607843);
}

/* SVG Colour */
.sc-blue-sky-50 {
  fill: rgba(46, 164, 221, 0.5019607843);
}

/* Font color */
.fc-blue-sky-dark {
  color: #1B4A6B;
}

/* Background color */
.bg-blue-sky-dark {
  background-color: #1B4A6B;
}

/* Border color */
.bc-blue-sky-dark {
  border: 1px solid #1B4A6B;
}

/* SVG Colour */
.sc-blue-sky-dark {
  fill: #1B4A6B;
}

/* Font color */
.fc-blue-sea {
  color: #106790;
}

/* Background color */
.bg-blue-sea {
  background-color: #106790;
}

/* Border color */
.bc-blue-sea {
  border: 1px solid #106790;
}

/* SVG Colour */
.sc-blue-sea {
  fill: #106790;
}

/* Font color */
.fc-blue-cornflower {
  color: #597CEE;
}

/* Background color */
.bg-blue-cornflower {
  background-color: #597CEE;
}

/* Border color */
.bc-blue-cornflower {
  border: 1px solid #597CEE;
}

/* SVG Colour */
.sc-blue-cornflower {
  fill: #597CEE;
}

/* Font color */
.fc-blue-denim {
  color: #2C48A1;
}

/* Background color */
.bg-blue-denim {
  background-color: #2C48A1;
}

/* Border color */
.bc-blue-denim {
  border: 1px solid #2C48A1;
}

/* SVG Colour */
.sc-blue-denim {
  fill: #2C48A1;
}

/* Font color */
.fc-purple-iolite {
  color: #8763D2;
}

/* Background color */
.bg-purple-iolite {
  background-color: #8763D2;
}

/* Border color */
.bc-purple-iolite {
  border: 1px solid #8763D2;
}

/* SVG Colour */
.sc-purple-iolite {
  fill: #8763D2;
}

/* Font color */
.fc-purple-iolite-50 {
  color: rgba(135, 99, 210, 0.5019607843);
}

/* Background color */
.bg-purple-iolite-50 {
  background-color: rgba(135, 99, 210, 0.5019607843);
}

/* Border color */
.bc-purple-iolite-50 {
  border: 1px solid rgba(135, 99, 210, 0.5019607843);
}

/* SVG Colour */
.sc-purple-iolite-50 {
  fill: rgba(135, 99, 210, 0.5019607843);
}

/* Font color */
.fc-purple-iolite-dark {
  color: #3C2C64;
}

/* Background color */
.bg-purple-iolite-dark {
  background-color: #3C2C64;
}

/* Border color */
.bc-purple-iolite-dark {
  border: 1px solid #3C2C64;
}

/* SVG Colour */
.sc-purple-iolite-dark {
  fill: #3C2C64;
}

/* Font color */
.fc-purple-amethyst {
  color: #4D3285;
}

/* Background color */
.bg-purple-amethyst {
  background-color: #4D3285;
}

/* Border color */
.bc-purple-amethyst {
  border: 1px solid #4D3285;
}

/* SVG Colour */
.sc-purple-amethyst {
  fill: #4D3285;
}

/* Font color */
.fc-purple-almost-fuchsia {
  color: #B44EBF;
}

/* Background color */
.bg-purple-almost-fuchsia {
  background-color: #B44EBF;
}

/* Border color */
.bc-purple-almost-fuchsia {
  border: 1px solid #B44EBF;
}

/* SVG Colour */
.sc-purple-almost-fuchsia {
  fill: #B44EBF;
}

/* Font color */
.fc-purple-regal {
  color: #6B2372;
}

/* Background color */
.bg-purple-regal {
  background-color: #6B2372;
}

/* Border color */
.bc-purple-regal {
  border: 1px solid #6B2372;
}

/* SVG Colour */
.sc-purple-regal {
  fill: #6B2372;
}

/* Font color */
.fc-white {
  color: #FFFFFF;
}

/* Background color */
.bg-white {
  background-color: #FFFFFF;
}

/* Border color */
.bc-white {
  border: 1px solid #FFFFFF;
}

/* SVG Colour */
.sc-white {
  fill: #FFFFFF;
}

/* Font color */
.fc-transparent {
  color: transparent;
}

/* Background color */
.bg-transparent {
  background-color: transparent;
}

/* Border color */
.bc-transparent {
  border: 1px solid transparent;
}

/* SVG Colour */
.sc-transparent {
  fill: transparent;
}

/* Font color */
.fc-hljs-bright-grey {
  color: #999999;
}

/* Background color */
.bg-hljs-bright-grey {
  background-color: #999999;
}

/* Border color */
.bc-hljs-bright-grey {
  border: 1px solid #999999;
}

/* SVG Colour */
.sc-hljs-bright-grey {
  fill: #999999;
}

/* Font color */
.fc-hljs-bright-red {
  color: #F64E1A;
}

/* Background color */
.bg-hljs-bright-red {
  background-color: #F64E1A;
}

/* Border color */
.bc-hljs-bright-red {
  border: 1px solid #F64E1A;
}

/* SVG Colour */
.sc-hljs-bright-red {
  fill: #F64E1A;
}

/* Font color */
.fc-hljs-bright-orange {
  color: #F08D49;
}

/* Background color */
.bg-hljs-bright-orange {
  background-color: #F08D49;
}

/* Border color */
.bc-hljs-bright-orange {
  border: 1px solid #F08D49;
}

/* SVG Colour */
.sc-hljs-bright-orange {
  fill: #F08D49;
}

/* Font color */
.fc-hljs-bright-yellow {
  color: #F8C555;
}

/* Background color */
.bg-hljs-bright-yellow {
  background-color: #F8C555;
}

/* Border color */
.bc-hljs-bright-yellow {
  border: 1px solid #F8C555;
}

/* SVG Colour */
.sc-hljs-bright-yellow {
  fill: #F8C555;
}

/* Font color */
.fc-hljs-bright-green {
  color: #7EC699;
}

/* Background color */
.bg-hljs-bright-green {
  background-color: #7EC699;
}

/* Border color */
.bc-hljs-bright-green {
  border: 1px solid #7EC699;
}

/* SVG Colour */
.sc-hljs-bright-green {
  fill: #7EC699;
}

/* Font color */
.fc-hljs-bright-aqua {
  color: #18B5AB;
}

/* Background color */
.bg-hljs-bright-aqua {
  background-color: #18B5AB;
}

/* Border color */
.bc-hljs-bright-aqua {
  border: 1px solid #18B5AB;
}

/* SVG Colour */
.sc-hljs-bright-aqua {
  fill: #18B5AB;
}

/* Font color */
.fc-hljs-bright-blue {
  color: #70A2FF;
}

/* Background color */
.bg-hljs-bright-blue {
  background-color: #70A2FF;
}

/* Border color */
.bc-hljs-bright-blue {
  border: 1px solid #70A2FF;
}

/* SVG Colour */
.sc-hljs-bright-blue {
  fill: #70A2FF;
}

/* Font color */
.fc-hljs-bright-purple {
  color: #CC99CD;
}

/* Background color */
.bg-hljs-bright-purple {
  background-color: #CC99CD;
}

/* Border color */
.bc-hljs-bright-purple {
  border: 1px solid #CC99CD;
}

/* SVG Colour */
.sc-hljs-bright-purple {
  fill: #CC99CD;
}

/* Font color */
.fc-hljs-pastel-grey {
  color: #9FA4B1;
}

/* Background color */
.bg-hljs-pastel-grey {
  background-color: #9FA4B1;
}

/* Border color */
.bc-hljs-pastel-grey {
  border: 1px solid #9FA4B1;
}

/* SVG Colour */
.sc-hljs-pastel-grey {
  fill: #9FA4B1;
}

/* Font color */
.fc-hljs-pastel-red {
  color: #F37957;
}

/* Background color */
.bg-hljs-pastel-red {
  background-color: #F37957;
}

/* Border color */
.bc-hljs-pastel-red {
  border: 1px solid #F37957;
}

/* SVG Colour */
.sc-hljs-pastel-red {
  fill: #F37957;
}

/* Font color */
.fc-hljs-pastel-orange {
  color: #F5AB57;
}

/* Background color */
.bg-hljs-pastel-orange {
  background-color: #F5AB57;
}

/* Border color */
.bc-hljs-pastel-orange {
  border: 1px solid #F5AB57;
}

/* SVG Colour */
.sc-hljs-pastel-orange {
  fill: #F5AB57;
}

/* Font color */
.fc-hljs-pastel-yellow {
  color: #F8C555;
}

/* Background color */
.bg-hljs-pastel-yellow {
  background-color: #F8C555;
}

/* Border color */
.bc-hljs-pastel-yellow {
  border: 1px solid #F8C555;
}

/* SVG Colour */
.sc-hljs-pastel-yellow {
  fill: #F8C555;
}

/* Font color */
.fc-hljs-pastel-green {
  color: #86AD85;
}

/* Background color */
.bg-hljs-pastel-green {
  background-color: #86AD85;
}

/* Border color */
.bc-hljs-pastel-green {
  border: 1px solid #86AD85;
}

/* SVG Colour */
.sc-hljs-pastel-green {
  fill: #86AD85;
}

/* Font color */
.fc-hljs-pastel-aqua {
  color: #5FB3B3;
}

/* Background color */
.bg-hljs-pastel-aqua {
  background-color: #5FB3B3;
}

/* Border color */
.bc-hljs-pastel-aqua {
  border: 1px solid #5FB3B3;
}

/* SVG Colour */
.sc-hljs-pastel-aqua {
  fill: #5FB3B3;
}

/* Font color */
.fc-hljs-pastel-blue {
  color: #6293C3;
}

/* Background color */
.bg-hljs-pastel-blue {
  background-color: #6293C3;
}

/* Border color */
.bc-hljs-pastel-blue {
  border: 1px solid #6293C3;
}

/* SVG Colour */
.sc-hljs-pastel-blue {
  fill: #6293C3;
}

/* Font color */
.fc-hljs-pastel-purple {
  color: #C192C1;
}

/* Background color */
.bg-hljs-pastel-purple {
  background-color: #C192C1;
}

/* Border color */
.bc-hljs-pastel-purple {
  border: 1px solid #C192C1;
}

/* SVG Colour */
.sc-hljs-pastel-purple {
  fill: #C192C1;
}

/* Font color */
.fc-hljs-light-grey {
  color: #918791;
}

/* Background color */
.bg-hljs-light-grey {
  background-color: #918791;
}

/* Border color */
.bc-hljs-light-grey {
  border: 1px solid #918791;
}

/* SVG Colour */
.sc-hljs-light-grey {
  fill: #918791;
}

/* Font color */
.fc-hljs-light-red {
  color: #E34A4C;
}

/* Background color */
.bg-hljs-light-red {
  background-color: #E34A4C;
}

/* Border color */
.bc-hljs-light-red {
  border: 1px solid #E34A4C;
}

/* SVG Colour */
.sc-hljs-light-red {
  fill: #E34A4C;
}

/* Font color */
.fc-hljs-light-orange {
  color: #FF5A00;
}

/* Background color */
.bg-hljs-light-orange {
  background-color: #FF5A00;
}

/* Border color */
.bc-hljs-light-orange {
  border: 1px solid #FF5A00;
}

/* SVG Colour */
.sc-hljs-light-orange {
  fill: #FF5A00;
}

/* Font color */
.fc-hljs-light-yellow {
  color: #966B19;
}

/* Background color */
.bg-hljs-light-yellow {
  background-color: #966B19;
}

/* Border color */
.bc-hljs-light-yellow {
  border: 1px solid #966B19;
}

/* SVG Colour */
.sc-hljs-light-yellow {
  fill: #966B19;
}

/* Font color */
.fc-hljs-light-green {
  color: #157857;
}

/* Background color */
.bg-hljs-light-green {
  background-color: #157857;
}

/* Border color */
.bc-hljs-light-green {
  border: 1px solid #157857;
}

/* SVG Colour */
.sc-hljs-light-green {
  fill: #157857;
}

/* Font color */
.fc-hljs-light-aqua {
  color: #1D7EAF;
}

/* Background color */
.bg-hljs-light-aqua {
  background-color: #1D7EAF;
}

/* Border color */
.bc-hljs-light-aqua {
  border: 1px solid #1D7EAF;
}

/* SVG Colour */
.sc-hljs-light-aqua {
  fill: #1D7EAF;
}

/* Font color */
.fc-hljs-light-blue {
  color: #2E5FFF;
}

/* Background color */
.bg-hljs-light-blue {
  background-color: #2E5FFF;
}

/* Border color */
.bc-hljs-light-blue {
  border: 1px solid #2E5FFF;
}

/* SVG Colour */
.sc-hljs-light-blue {
  fill: #2E5FFF;
}

/* Font color */
.fc-hljs-light-purple {
  color: #6B2372;
}

/* Background color */
.bg-hljs-light-purple {
  background-color: #6B2372;
}

/* Border color */
.bc-hljs-light-purple {
  border: 1px solid #6B2372;
}

/* SVG Colour */
.sc-hljs-light-purple {
  fill: #6B2372;
}

.bg-light-article {
  background-color: #157857;
}

.bg-light-android {
  background-color: #00B87E;
}

.bg-light-flutter {
  background-color: #2EA4DD;
}

.bg-light-gametech {
  background-color: #B44EBF;
}

.bg-light-ios {
  background-color: #8763D2;
}

.bg-light-server-side-swift {
  background-color: #F26FAA;
}

.bg-light-professional-growth {
  background-color: #E3A93D;
}

.bg-light-multi-domain {
  background-color: #AC9FAB;
}

.bg-light-learning-path {
  background-color: #597CEE;
}

.bg-light-video-course {
  background-color: #E34A4C;
}

.bg-light-book {
  background-color: #FF8847;
}

.bg-light-ai {
  background-color: #E6978A;
}

.bg-dark-android {
  background-color: #157857;
}

.bg-dark-flutter {
  background-color: #106790;
}

.bg-dark-gametech {
  background-color: #6B2372;
}

.bg-dark-ios {
  background-color: #4D3285;
}

.bg-dark-server-side-swift {
  background-color: #A53B6B;
}

.bg-dark-multi-domain {
  background-color: #5F4F5E;
}

.bg-dark-professional-growth {
  background-color: #966B19;
}

.bg-dark-ai {
  background-color: #99584D;
}

.display-inline {
  display: inline;
}

.display-inline-block {
  display: inline-block;
}

.display-block {
  display: block;
}

.display-grid {
  display: grid;
}

.display-table {
  display: table;
}

.display-table-row {
  display: table-row;
}

.display-table-cell {
  display: table-cell;
}

.display-flex {
  display: flex;
}

.display-inline-flex {
  display: inline-flex;
}

.display-none {
  display: none;
}

.position-static {
  position: static;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.position-sticky {
  position: sticky;
}

.text-decoration-none {
  text-decoration: none;
}

.text-decoration-underline {
  text-decoration: underline;
}

.text-decoration-line-through {
  text-decoration: line-through;
}

.text-wrap-wrap {
  white-space: wrap;
}

.text-wrap-nowrap {
  white-space: nowrap;
}

.white-space-normal {
  white-space: normal;
}

.white-space-nowrap {
  white-space: nowrap;
}

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

.white-space-pre-line {
  white-space: pre-line;
}

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

.cursor-auto {
  cursor: auto;
}

.cursor-default {
  cursor: default;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-move {
  cursor: move;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

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

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

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

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

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

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

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

.w-25 {
  width: 25%;
}

.w-50 {
  width: 50%;
}

.w-75 {
  width: 75%;
}

.w-100 {
  width: 100%;
}

.w-auto {
  width: auto;
}

.mw-100 {
  max-width: 100%;
}

.h-25 {
  height: 25%;
}

.h-50 {
  height: 50%;
}

.h-75 {
  height: 75%;
}

.h-100 {
  height: 100%;
}

.h-auto {
  height: auto;
}

.mh-100 {
  max-height: 100%;
}

.justify-content-start {
  justify-content: flex-start;
}

.justify-content-end {
  justify-content: flex-end;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-around {
  justify-content: space-around;
}

.justify-content-evenly {
  justify-content: space-evenly;
}

.align-items-start {
  align-items: flex-start;
}

.align-items-end {
  align-items: flex-end;
}

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

.align-items-baseline {
  align-items: baseline;
}

.align-items-stretch {
  align-items: stretch;
}

.align-self-start {
  align-self: flex-start;
}

.align-self-end {
  align-self: flex-end;
}

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

.align-self-baseline {
  align-self: baseline;
}

.align-self-stretch {
  align-self: stretch;
}

.flex-direction-row {
  flex-direction: row;
}

.flex-direction-row-reverse {
  flex-direction: row-reverse;
}

.flex-direction-column {
  flex-direction: column;
}

.flex-direction-column-reverse {
  flex-direction: column-reverse;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.float-none {
  float: none;
}

/* Creates quick margins and paddings */
/* If you want new margins add to the list below */
.m-0 {
  margin: 0px !important;
}

.mt-0 {
  margin-top: 0px !important;
}

.mr-0 {
  margin-right: 0px !important;
}

.mb-0 {
  margin-bottom: 0px !important;
}

.ml-0 {
  margin-left: 0px !important;
}

.mx-0 {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.my-0 {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.m-4 {
  margin: 4px !important;
}

.mt-4 {
  margin-top: 4px !important;
}

.mr-4 {
  margin-right: 4px !important;
}

.mb-4 {
  margin-bottom: 4px !important;
}

.ml-4 {
  margin-left: 4px !important;
}

.mx-4 {
  margin-left: 4px !important;
  margin-right: 4px !important;
}

.my-4 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.m-6 {
  margin: 6px !important;
}

.mt-6 {
  margin-top: 6px !important;
}

.mr-6 {
  margin-right: 6px !important;
}

.mb-6 {
  margin-bottom: 6px !important;
}

.ml-6 {
  margin-left: 6px !important;
}

.mx-6 {
  margin-left: 6px !important;
  margin-right: 6px !important;
}

.my-6 {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}

.m-8 {
  margin: 8px !important;
}

.mt-8 {
  margin-top: 8px !important;
}

.mr-8 {
  margin-right: 8px !important;
}

.mb-8 {
  margin-bottom: 8px !important;
}

.ml-8 {
  margin-left: 8px !important;
}

.mx-8 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.my-8 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.m-12 {
  margin: 12px !important;
}

.mt-12 {
  margin-top: 12px !important;
}

.mr-12 {
  margin-right: 12px !important;
}

.mb-12 {
  margin-bottom: 12px !important;
}

.ml-12 {
  margin-left: 12px !important;
}

.mx-12 {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

.my-12 {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.m-16 {
  margin: 16px !important;
}

.mt-16 {
  margin-top: 16px !important;
}

.mr-16 {
  margin-right: 16px !important;
}

.mb-16 {
  margin-bottom: 16px !important;
}

.ml-16 {
  margin-left: 16px !important;
}

.mx-16 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.my-16 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.m-24 {
  margin: 24px !important;
}

.mt-24 {
  margin-top: 24px !important;
}

.mr-24 {
  margin-right: 24px !important;
}

.mb-24 {
  margin-bottom: 24px !important;
}

.ml-24 {
  margin-left: 24px !important;
}

.mx-24 {
  margin-left: 24px !important;
  margin-right: 24px !important;
}

.my-24 {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.m-32 {
  margin: 32px !important;
}

.mt-32 {
  margin-top: 32px !important;
}

.mr-32 {
  margin-right: 32px !important;
}

.mb-32 {
  margin-bottom: 32px !important;
}

.ml-32 {
  margin-left: 32px !important;
}

.mx-32 {
  margin-left: 32px !important;
  margin-right: 32px !important;
}

.my-32 {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}

.m-36 {
  margin: 36px !important;
}

.mt-36 {
  margin-top: 36px !important;
}

.mr-36 {
  margin-right: 36px !important;
}

.mb-36 {
  margin-bottom: 36px !important;
}

.ml-36 {
  margin-left: 36px !important;
}

.mx-36 {
  margin-left: 36px !important;
  margin-right: 36px !important;
}

.my-36 {
  margin-top: 36px !important;
  margin-bottom: 36px !important;
}

.m-40 {
  margin: 40px !important;
}

.mt-40 {
  margin-top: 40px !important;
}

.mr-40 {
  margin-right: 40px !important;
}

.mb-40 {
  margin-bottom: 40px !important;
}

.ml-40 {
  margin-left: 40px !important;
}

.mx-40 {
  margin-left: 40px !important;
  margin-right: 40px !important;
}

.my-40 {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

.m-48 {
  margin: 48px !important;
}

.mt-48 {
  margin-top: 48px !important;
}

.mr-48 {
  margin-right: 48px !important;
}

.mb-48 {
  margin-bottom: 48px !important;
}

.ml-48 {
  margin-left: 48px !important;
}

.mx-48 {
  margin-left: 48px !important;
  margin-right: 48px !important;
}

.my-48 {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}

.m-60 {
  margin: 60px !important;
}

.mt-60 {
  margin-top: 60px !important;
}

.mr-60 {
  margin-right: 60px !important;
}

.mb-60 {
  margin-bottom: 60px !important;
}

.ml-60 {
  margin-left: 60px !important;
}

.mx-60 {
  margin-left: 60px !important;
  margin-right: 60px !important;
}

.my-60 {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}

.m-64 {
  margin: 64px !important;
}

.mt-64 {
  margin-top: 64px !important;
}

.mr-64 {
  margin-right: 64px !important;
}

.mb-64 {
  margin-bottom: 64px !important;
}

.ml-64 {
  margin-left: 64px !important;
}

.mx-64 {
  margin-left: 64px !important;
  margin-right: 64px !important;
}

.my-64 {
  margin-top: 64px !important;
  margin-bottom: 64px !important;
}

.m-80 {
  margin: 80px !important;
}

.mt-80 {
  margin-top: 80px !important;
}

.mr-80 {
  margin-right: 80px !important;
}

.mb-80 {
  margin-bottom: 80px !important;
}

.ml-80 {
  margin-left: 80px !important;
}

.mx-80 {
  margin-left: 80px !important;
  margin-right: 80px !important;
}

.my-80 {
  margin-top: 80px !important;
  margin-bottom: 80px !important;
}

.m-96 {
  margin: 96px !important;
}

.mt-96 {
  margin-top: 96px !important;
}

.mr-96 {
  margin-right: 96px !important;
}

.mb-96 {
  margin-bottom: 96px !important;
}

.ml-96 {
  margin-left: 96px !important;
}

.mx-96 {
  margin-left: 96px !important;
  margin-right: 96px !important;
}

.my-96 {
  margin-top: 96px !important;
  margin-bottom: 96px !important;
}

.m-120 {
  margin: 120px !important;
}

.mt-120 {
  margin-top: 120px !important;
}

.mr-120 {
  margin-right: 120px !important;
}

.mb-120 {
  margin-bottom: 120px !important;
}

.ml-120 {
  margin-left: 120px !important;
}

.mx-120 {
  margin-left: 120px !important;
  margin-right: 120px !important;
}

.my-120 {
  margin-top: 120px !important;
  margin-bottom: 120px !important;
}

.m-144 {
  margin: 144px !important;
}

.mt-144 {
  margin-top: 144px !important;
}

.mr-144 {
  margin-right: 144px !important;
}

.mb-144 {
  margin-bottom: 144px !important;
}

.ml-144 {
  margin-left: 144px !important;
}

.mx-144 {
  margin-left: 144px !important;
  margin-right: 144px !important;
}

.my-144 {
  margin-top: 144px !important;
  margin-bottom: 144px !important;
}

.m-160 {
  margin: 160px !important;
}

.mt-160 {
  margin-top: 160px !important;
}

.mr-160 {
  margin-right: 160px !important;
}

.mb-160 {
  margin-bottom: 160px !important;
}

.ml-160 {
  margin-left: 160px !important;
}

.mx-160 {
  margin-left: 160px !important;
  margin-right: 160px !important;
}

.my-160 {
  margin-top: 160px !important;
  margin-bottom: 160px !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto {
  margin-top: auto !important;
}

.mr-auto {
  margin-right: auto !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ml-auto {
  margin-left: auto !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

@media screen and (max-width: 767px) {
  .mobile-m-0 {
    margin: 0px !important;
  }
  .mobile-mt-0 {
    margin-top: 0px !important;
  }
  .mobile-mr-0 {
    margin-right: 0px !important;
  }
  .mobile-mb-0 {
    margin-bottom: 0px !important;
  }
  .mobile-ml-0 {
    margin-left: 0px !important;
  }
  .mobile-mx-0 {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .mobile-my-0 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  .mobile-m-4 {
    margin: 4px !important;
  }
  .mobile-mt-4 {
    margin-top: 4px !important;
  }
  .mobile-mr-4 {
    margin-right: 4px !important;
  }
  .mobile-mb-4 {
    margin-bottom: 4px !important;
  }
  .mobile-ml-4 {
    margin-left: 4px !important;
  }
  .mobile-mx-4 {
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
  .mobile-my-4 {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
  .mobile-m-6 {
    margin: 6px !important;
  }
  .mobile-mt-6 {
    margin-top: 6px !important;
  }
  .mobile-mr-6 {
    margin-right: 6px !important;
  }
  .mobile-mb-6 {
    margin-bottom: 6px !important;
  }
  .mobile-ml-6 {
    margin-left: 6px !important;
  }
  .mobile-mx-6 {
    margin-left: 6px !important;
    margin-right: 6px !important;
  }
  .mobile-my-6 {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }
  .mobile-m-8 {
    margin: 8px !important;
  }
  .mobile-mt-8 {
    margin-top: 8px !important;
  }
  .mobile-mr-8 {
    margin-right: 8px !important;
  }
  .mobile-mb-8 {
    margin-bottom: 8px !important;
  }
  .mobile-ml-8 {
    margin-left: 8px !important;
  }
  .mobile-mx-8 {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  .mobile-my-8 {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
  .mobile-m-12 {
    margin: 12px !important;
  }
  .mobile-mt-12 {
    margin-top: 12px !important;
  }
  .mobile-mr-12 {
    margin-right: 12px !important;
  }
  .mobile-mb-12 {
    margin-bottom: 12px !important;
  }
  .mobile-ml-12 {
    margin-left: 12px !important;
  }
  .mobile-mx-12 {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
  .mobile-my-12 {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }
  .mobile-m-16 {
    margin: 16px !important;
  }
  .mobile-mt-16 {
    margin-top: 16px !important;
  }
  .mobile-mr-16 {
    margin-right: 16px !important;
  }
  .mobile-mb-16 {
    margin-bottom: 16px !important;
  }
  .mobile-ml-16 {
    margin-left: 16px !important;
  }
  .mobile-mx-16 {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  .mobile-my-16 {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
  .mobile-m-24 {
    margin: 24px !important;
  }
  .mobile-mt-24 {
    margin-top: 24px !important;
  }
  .mobile-mr-24 {
    margin-right: 24px !important;
  }
  .mobile-mb-24 {
    margin-bottom: 24px !important;
  }
  .mobile-ml-24 {
    margin-left: 24px !important;
  }
  .mobile-mx-24 {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
  .mobile-my-24 {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
  .mobile-m-32 {
    margin: 32px !important;
  }
  .mobile-mt-32 {
    margin-top: 32px !important;
  }
  .mobile-mr-32 {
    margin-right: 32px !important;
  }
  .mobile-mb-32 {
    margin-bottom: 32px !important;
  }
  .mobile-ml-32 {
    margin-left: 32px !important;
  }
  .mobile-mx-32 {
    margin-left: 32px !important;
    margin-right: 32px !important;
  }
  .mobile-my-32 {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }
  .mobile-m-36 {
    margin: 36px !important;
  }
  .mobile-mt-36 {
    margin-top: 36px !important;
  }
  .mobile-mr-36 {
    margin-right: 36px !important;
  }
  .mobile-mb-36 {
    margin-bottom: 36px !important;
  }
  .mobile-ml-36 {
    margin-left: 36px !important;
  }
  .mobile-mx-36 {
    margin-left: 36px !important;
    margin-right: 36px !important;
  }
  .mobile-my-36 {
    margin-top: 36px !important;
    margin-bottom: 36px !important;
  }
  .mobile-m-40 {
    margin: 40px !important;
  }
  .mobile-mt-40 {
    margin-top: 40px !important;
  }
  .mobile-mr-40 {
    margin-right: 40px !important;
  }
  .mobile-mb-40 {
    margin-bottom: 40px !important;
  }
  .mobile-ml-40 {
    margin-left: 40px !important;
  }
  .mobile-mx-40 {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  .mobile-my-40 {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  .mobile-m-48 {
    margin: 48px !important;
  }
  .mobile-mt-48 {
    margin-top: 48px !important;
  }
  .mobile-mr-48 {
    margin-right: 48px !important;
  }
  .mobile-mb-48 {
    margin-bottom: 48px !important;
  }
  .mobile-ml-48 {
    margin-left: 48px !important;
  }
  .mobile-mx-48 {
    margin-left: 48px !important;
    margin-right: 48px !important;
  }
  .mobile-my-48 {
    margin-top: 48px !important;
    margin-bottom: 48px !important;
  }
  .mobile-m-60 {
    margin: 60px !important;
  }
  .mobile-mt-60 {
    margin-top: 60px !important;
  }
  .mobile-mr-60 {
    margin-right: 60px !important;
  }
  .mobile-mb-60 {
    margin-bottom: 60px !important;
  }
  .mobile-ml-60 {
    margin-left: 60px !important;
  }
  .mobile-mx-60 {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }
  .mobile-my-60 {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  .mobile-m-64 {
    margin: 64px !important;
  }
  .mobile-mt-64 {
    margin-top: 64px !important;
  }
  .mobile-mr-64 {
    margin-right: 64px !important;
  }
  .mobile-mb-64 {
    margin-bottom: 64px !important;
  }
  .mobile-ml-64 {
    margin-left: 64px !important;
  }
  .mobile-mx-64 {
    margin-left: 64px !important;
    margin-right: 64px !important;
  }
  .mobile-my-64 {
    margin-top: 64px !important;
    margin-bottom: 64px !important;
  }
  .mobile-m-80 {
    margin: 80px !important;
  }
  .mobile-mt-80 {
    margin-top: 80px !important;
  }
  .mobile-mr-80 {
    margin-right: 80px !important;
  }
  .mobile-mb-80 {
    margin-bottom: 80px !important;
  }
  .mobile-ml-80 {
    margin-left: 80px !important;
  }
  .mobile-mx-80 {
    margin-left: 80px !important;
    margin-right: 80px !important;
  }
  .mobile-my-80 {
    margin-top: 80px !important;
    margin-bottom: 80px !important;
  }
  .mobile-m-96 {
    margin: 96px !important;
  }
  .mobile-mt-96 {
    margin-top: 96px !important;
  }
  .mobile-mr-96 {
    margin-right: 96px !important;
  }
  .mobile-mb-96 {
    margin-bottom: 96px !important;
  }
  .mobile-ml-96 {
    margin-left: 96px !important;
  }
  .mobile-mx-96 {
    margin-left: 96px !important;
    margin-right: 96px !important;
  }
  .mobile-my-96 {
    margin-top: 96px !important;
    margin-bottom: 96px !important;
  }
  .mobile-m-120 {
    margin: 120px !important;
  }
  .mobile-mt-120 {
    margin-top: 120px !important;
  }
  .mobile-mr-120 {
    margin-right: 120px !important;
  }
  .mobile-mb-120 {
    margin-bottom: 120px !important;
  }
  .mobile-ml-120 {
    margin-left: 120px !important;
  }
  .mobile-mx-120 {
    margin-left: 120px !important;
    margin-right: 120px !important;
  }
  .mobile-my-120 {
    margin-top: 120px !important;
    margin-bottom: 120px !important;
  }
  .mobile-m-144 {
    margin: 144px !important;
  }
  .mobile-mt-144 {
    margin-top: 144px !important;
  }
  .mobile-mr-144 {
    margin-right: 144px !important;
  }
  .mobile-mb-144 {
    margin-bottom: 144px !important;
  }
  .mobile-ml-144 {
    margin-left: 144px !important;
  }
  .mobile-mx-144 {
    margin-left: 144px !important;
    margin-right: 144px !important;
  }
  .mobile-my-144 {
    margin-top: 144px !important;
    margin-bottom: 144px !important;
  }
  .mobile-m-160 {
    margin: 160px !important;
  }
  .mobile-mt-160 {
    margin-top: 160px !important;
  }
  .mobile-mr-160 {
    margin-right: 160px !important;
  }
  .mobile-mb-160 {
    margin-bottom: 160px !important;
  }
  .mobile-ml-160 {
    margin-left: 160px !important;
  }
  .mobile-mx-160 {
    margin-left: 160px !important;
    margin-right: 160px !important;
  }
  .mobile-my-160 {
    margin-top: 160px !important;
    margin-bottom: 160px !important;
  }
  .mobile-m-auto {
    margin: auto !important;
  }
  .mobile-mt-auto {
    margin-top: auto !important;
  }
  .mobile-mr-auto {
    margin-right: auto !important;
  }
  .mobile-mb-auto {
    margin-bottom: auto !important;
  }
  .mobile-ml-auto {
    margin-left: auto !important;
  }
  .mobile-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .mobile-my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
}
@media screen and (min-width: 768px) {
  .tablet-m-0 {
    margin: 0px !important;
  }
  .tablet-mt-0 {
    margin-top: 0px !important;
  }
  .tablet-mr-0 {
    margin-right: 0px !important;
  }
  .tablet-mb-0 {
    margin-bottom: 0px !important;
  }
  .tablet-ml-0 {
    margin-left: 0px !important;
  }
  .tablet-mx-0 {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .tablet-my-0 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  .tablet-m-4 {
    margin: 4px !important;
  }
  .tablet-mt-4 {
    margin-top: 4px !important;
  }
  .tablet-mr-4 {
    margin-right: 4px !important;
  }
  .tablet-mb-4 {
    margin-bottom: 4px !important;
  }
  .tablet-ml-4 {
    margin-left: 4px !important;
  }
  .tablet-mx-4 {
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
  .tablet-my-4 {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
  .tablet-m-6 {
    margin: 6px !important;
  }
  .tablet-mt-6 {
    margin-top: 6px !important;
  }
  .tablet-mr-6 {
    margin-right: 6px !important;
  }
  .tablet-mb-6 {
    margin-bottom: 6px !important;
  }
  .tablet-ml-6 {
    margin-left: 6px !important;
  }
  .tablet-mx-6 {
    margin-left: 6px !important;
    margin-right: 6px !important;
  }
  .tablet-my-6 {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }
  .tablet-m-8 {
    margin: 8px !important;
  }
  .tablet-mt-8 {
    margin-top: 8px !important;
  }
  .tablet-mr-8 {
    margin-right: 8px !important;
  }
  .tablet-mb-8 {
    margin-bottom: 8px !important;
  }
  .tablet-ml-8 {
    margin-left: 8px !important;
  }
  .tablet-mx-8 {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  .tablet-my-8 {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
  .tablet-m-12 {
    margin: 12px !important;
  }
  .tablet-mt-12 {
    margin-top: 12px !important;
  }
  .tablet-mr-12 {
    margin-right: 12px !important;
  }
  .tablet-mb-12 {
    margin-bottom: 12px !important;
  }
  .tablet-ml-12 {
    margin-left: 12px !important;
  }
  .tablet-mx-12 {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
  .tablet-my-12 {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }
  .tablet-m-16 {
    margin: 16px !important;
  }
  .tablet-mt-16 {
    margin-top: 16px !important;
  }
  .tablet-mr-16 {
    margin-right: 16px !important;
  }
  .tablet-mb-16 {
    margin-bottom: 16px !important;
  }
  .tablet-ml-16 {
    margin-left: 16px !important;
  }
  .tablet-mx-16 {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  .tablet-my-16 {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
  .tablet-m-24 {
    margin: 24px !important;
  }
  .tablet-mt-24 {
    margin-top: 24px !important;
  }
  .tablet-mr-24 {
    margin-right: 24px !important;
  }
  .tablet-mb-24 {
    margin-bottom: 24px !important;
  }
  .tablet-ml-24 {
    margin-left: 24px !important;
  }
  .tablet-mx-24 {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
  .tablet-my-24 {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
  .tablet-m-32 {
    margin: 32px !important;
  }
  .tablet-mt-32 {
    margin-top: 32px !important;
  }
  .tablet-mr-32 {
    margin-right: 32px !important;
  }
  .tablet-mb-32 {
    margin-bottom: 32px !important;
  }
  .tablet-ml-32 {
    margin-left: 32px !important;
  }
  .tablet-mx-32 {
    margin-left: 32px !important;
    margin-right: 32px !important;
  }
  .tablet-my-32 {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }
  .tablet-m-36 {
    margin: 36px !important;
  }
  .tablet-mt-36 {
    margin-top: 36px !important;
  }
  .tablet-mr-36 {
    margin-right: 36px !important;
  }
  .tablet-mb-36 {
    margin-bottom: 36px !important;
  }
  .tablet-ml-36 {
    margin-left: 36px !important;
  }
  .tablet-mx-36 {
    margin-left: 36px !important;
    margin-right: 36px !important;
  }
  .tablet-my-36 {
    margin-top: 36px !important;
    margin-bottom: 36px !important;
  }
  .tablet-m-40 {
    margin: 40px !important;
  }
  .tablet-mt-40 {
    margin-top: 40px !important;
  }
  .tablet-mr-40 {
    margin-right: 40px !important;
  }
  .tablet-mb-40 {
    margin-bottom: 40px !important;
  }
  .tablet-ml-40 {
    margin-left: 40px !important;
  }
  .tablet-mx-40 {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  .tablet-my-40 {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  .tablet-m-48 {
    margin: 48px !important;
  }
  .tablet-mt-48 {
    margin-top: 48px !important;
  }
  .tablet-mr-48 {
    margin-right: 48px !important;
  }
  .tablet-mb-48 {
    margin-bottom: 48px !important;
  }
  .tablet-ml-48 {
    margin-left: 48px !important;
  }
  .tablet-mx-48 {
    margin-left: 48px !important;
    margin-right: 48px !important;
  }
  .tablet-my-48 {
    margin-top: 48px !important;
    margin-bottom: 48px !important;
  }
  .tablet-m-60 {
    margin: 60px !important;
  }
  .tablet-mt-60 {
    margin-top: 60px !important;
  }
  .tablet-mr-60 {
    margin-right: 60px !important;
  }
  .tablet-mb-60 {
    margin-bottom: 60px !important;
  }
  .tablet-ml-60 {
    margin-left: 60px !important;
  }
  .tablet-mx-60 {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }
  .tablet-my-60 {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  .tablet-m-64 {
    margin: 64px !important;
  }
  .tablet-mt-64 {
    margin-top: 64px !important;
  }
  .tablet-mr-64 {
    margin-right: 64px !important;
  }
  .tablet-mb-64 {
    margin-bottom: 64px !important;
  }
  .tablet-ml-64 {
    margin-left: 64px !important;
  }
  .tablet-mx-64 {
    margin-left: 64px !important;
    margin-right: 64px !important;
  }
  .tablet-my-64 {
    margin-top: 64px !important;
    margin-bottom: 64px !important;
  }
  .tablet-m-80 {
    margin: 80px !important;
  }
  .tablet-mt-80 {
    margin-top: 80px !important;
  }
  .tablet-mr-80 {
    margin-right: 80px !important;
  }
  .tablet-mb-80 {
    margin-bottom: 80px !important;
  }
  .tablet-ml-80 {
    margin-left: 80px !important;
  }
  .tablet-mx-80 {
    margin-left: 80px !important;
    margin-right: 80px !important;
  }
  .tablet-my-80 {
    margin-top: 80px !important;
    margin-bottom: 80px !important;
  }
  .tablet-m-96 {
    margin: 96px !important;
  }
  .tablet-mt-96 {
    margin-top: 96px !important;
  }
  .tablet-mr-96 {
    margin-right: 96px !important;
  }
  .tablet-mb-96 {
    margin-bottom: 96px !important;
  }
  .tablet-ml-96 {
    margin-left: 96px !important;
  }
  .tablet-mx-96 {
    margin-left: 96px !important;
    margin-right: 96px !important;
  }
  .tablet-my-96 {
    margin-top: 96px !important;
    margin-bottom: 96px !important;
  }
  .tablet-m-120 {
    margin: 120px !important;
  }
  .tablet-mt-120 {
    margin-top: 120px !important;
  }
  .tablet-mr-120 {
    margin-right: 120px !important;
  }
  .tablet-mb-120 {
    margin-bottom: 120px !important;
  }
  .tablet-ml-120 {
    margin-left: 120px !important;
  }
  .tablet-mx-120 {
    margin-left: 120px !important;
    margin-right: 120px !important;
  }
  .tablet-my-120 {
    margin-top: 120px !important;
    margin-bottom: 120px !important;
  }
  .tablet-m-144 {
    margin: 144px !important;
  }
  .tablet-mt-144 {
    margin-top: 144px !important;
  }
  .tablet-mr-144 {
    margin-right: 144px !important;
  }
  .tablet-mb-144 {
    margin-bottom: 144px !important;
  }
  .tablet-ml-144 {
    margin-left: 144px !important;
  }
  .tablet-mx-144 {
    margin-left: 144px !important;
    margin-right: 144px !important;
  }
  .tablet-my-144 {
    margin-top: 144px !important;
    margin-bottom: 144px !important;
  }
  .tablet-m-160 {
    margin: 160px !important;
  }
  .tablet-mt-160 {
    margin-top: 160px !important;
  }
  .tablet-mr-160 {
    margin-right: 160px !important;
  }
  .tablet-mb-160 {
    margin-bottom: 160px !important;
  }
  .tablet-ml-160 {
    margin-left: 160px !important;
  }
  .tablet-mx-160 {
    margin-left: 160px !important;
    margin-right: 160px !important;
  }
  .tablet-my-160 {
    margin-top: 160px !important;
    margin-bottom: 160px !important;
  }
  .tablet-m-auto {
    margin: auto !important;
  }
  .tablet-mt-auto {
    margin-top: auto !important;
  }
  .tablet-mr-auto {
    margin-right: auto !important;
  }
  .tablet-mb-auto {
    margin-bottom: auto !important;
  }
  .tablet-ml-auto {
    margin-left: auto !important;
  }
  .tablet-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .tablet-my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .tablet-only-m-0 {
    margin: 0px !important;
  }
  .tablet-only-mt-0 {
    margin-top: 0px !important;
  }
  .tablet-only-mr-0 {
    margin-right: 0px !important;
  }
  .tablet-only-mb-0 {
    margin-bottom: 0px !important;
  }
  .tablet-only-ml-0 {
    margin-left: 0px !important;
  }
  .tablet-only-mx-0 {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .tablet-only-my-0 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  .tablet-only-m-4 {
    margin: 4px !important;
  }
  .tablet-only-mt-4 {
    margin-top: 4px !important;
  }
  .tablet-only-mr-4 {
    margin-right: 4px !important;
  }
  .tablet-only-mb-4 {
    margin-bottom: 4px !important;
  }
  .tablet-only-ml-4 {
    margin-left: 4px !important;
  }
  .tablet-only-mx-4 {
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
  .tablet-only-my-4 {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
  .tablet-only-m-6 {
    margin: 6px !important;
  }
  .tablet-only-mt-6 {
    margin-top: 6px !important;
  }
  .tablet-only-mr-6 {
    margin-right: 6px !important;
  }
  .tablet-only-mb-6 {
    margin-bottom: 6px !important;
  }
  .tablet-only-ml-6 {
    margin-left: 6px !important;
  }
  .tablet-only-mx-6 {
    margin-left: 6px !important;
    margin-right: 6px !important;
  }
  .tablet-only-my-6 {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }
  .tablet-only-m-8 {
    margin: 8px !important;
  }
  .tablet-only-mt-8 {
    margin-top: 8px !important;
  }
  .tablet-only-mr-8 {
    margin-right: 8px !important;
  }
  .tablet-only-mb-8 {
    margin-bottom: 8px !important;
  }
  .tablet-only-ml-8 {
    margin-left: 8px !important;
  }
  .tablet-only-mx-8 {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  .tablet-only-my-8 {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
  .tablet-only-m-12 {
    margin: 12px !important;
  }
  .tablet-only-mt-12 {
    margin-top: 12px !important;
  }
  .tablet-only-mr-12 {
    margin-right: 12px !important;
  }
  .tablet-only-mb-12 {
    margin-bottom: 12px !important;
  }
  .tablet-only-ml-12 {
    margin-left: 12px !important;
  }
  .tablet-only-mx-12 {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
  .tablet-only-my-12 {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }
  .tablet-only-m-16 {
    margin: 16px !important;
  }
  .tablet-only-mt-16 {
    margin-top: 16px !important;
  }
  .tablet-only-mr-16 {
    margin-right: 16px !important;
  }
  .tablet-only-mb-16 {
    margin-bottom: 16px !important;
  }
  .tablet-only-ml-16 {
    margin-left: 16px !important;
  }
  .tablet-only-mx-16 {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  .tablet-only-my-16 {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
  .tablet-only-m-24 {
    margin: 24px !important;
  }
  .tablet-only-mt-24 {
    margin-top: 24px !important;
  }
  .tablet-only-mr-24 {
    margin-right: 24px !important;
  }
  .tablet-only-mb-24 {
    margin-bottom: 24px !important;
  }
  .tablet-only-ml-24 {
    margin-left: 24px !important;
  }
  .tablet-only-mx-24 {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
  .tablet-only-my-24 {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
  .tablet-only-m-32 {
    margin: 32px !important;
  }
  .tablet-only-mt-32 {
    margin-top: 32px !important;
  }
  .tablet-only-mr-32 {
    margin-right: 32px !important;
  }
  .tablet-only-mb-32 {
    margin-bottom: 32px !important;
  }
  .tablet-only-ml-32 {
    margin-left: 32px !important;
  }
  .tablet-only-mx-32 {
    margin-left: 32px !important;
    margin-right: 32px !important;
  }
  .tablet-only-my-32 {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }
  .tablet-only-m-36 {
    margin: 36px !important;
  }
  .tablet-only-mt-36 {
    margin-top: 36px !important;
  }
  .tablet-only-mr-36 {
    margin-right: 36px !important;
  }
  .tablet-only-mb-36 {
    margin-bottom: 36px !important;
  }
  .tablet-only-ml-36 {
    margin-left: 36px !important;
  }
  .tablet-only-mx-36 {
    margin-left: 36px !important;
    margin-right: 36px !important;
  }
  .tablet-only-my-36 {
    margin-top: 36px !important;
    margin-bottom: 36px !important;
  }
  .tablet-only-m-40 {
    margin: 40px !important;
  }
  .tablet-only-mt-40 {
    margin-top: 40px !important;
  }
  .tablet-only-mr-40 {
    margin-right: 40px !important;
  }
  .tablet-only-mb-40 {
    margin-bottom: 40px !important;
  }
  .tablet-only-ml-40 {
    margin-left: 40px !important;
  }
  .tablet-only-mx-40 {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  .tablet-only-my-40 {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  .tablet-only-m-48 {
    margin: 48px !important;
  }
  .tablet-only-mt-48 {
    margin-top: 48px !important;
  }
  .tablet-only-mr-48 {
    margin-right: 48px !important;
  }
  .tablet-only-mb-48 {
    margin-bottom: 48px !important;
  }
  .tablet-only-ml-48 {
    margin-left: 48px !important;
  }
  .tablet-only-mx-48 {
    margin-left: 48px !important;
    margin-right: 48px !important;
  }
  .tablet-only-my-48 {
    margin-top: 48px !important;
    margin-bottom: 48px !important;
  }
  .tablet-only-m-60 {
    margin: 60px !important;
  }
  .tablet-only-mt-60 {
    margin-top: 60px !important;
  }
  .tablet-only-mr-60 {
    margin-right: 60px !important;
  }
  .tablet-only-mb-60 {
    margin-bottom: 60px !important;
  }
  .tablet-only-ml-60 {
    margin-left: 60px !important;
  }
  .tablet-only-mx-60 {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }
  .tablet-only-my-60 {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  .tablet-only-m-64 {
    margin: 64px !important;
  }
  .tablet-only-mt-64 {
    margin-top: 64px !important;
  }
  .tablet-only-mr-64 {
    margin-right: 64px !important;
  }
  .tablet-only-mb-64 {
    margin-bottom: 64px !important;
  }
  .tablet-only-ml-64 {
    margin-left: 64px !important;
  }
  .tablet-only-mx-64 {
    margin-left: 64px !important;
    margin-right: 64px !important;
  }
  .tablet-only-my-64 {
    margin-top: 64px !important;
    margin-bottom: 64px !important;
  }
  .tablet-only-m-80 {
    margin: 80px !important;
  }
  .tablet-only-mt-80 {
    margin-top: 80px !important;
  }
  .tablet-only-mr-80 {
    margin-right: 80px !important;
  }
  .tablet-only-mb-80 {
    margin-bottom: 80px !important;
  }
  .tablet-only-ml-80 {
    margin-left: 80px !important;
  }
  .tablet-only-mx-80 {
    margin-left: 80px !important;
    margin-right: 80px !important;
  }
  .tablet-only-my-80 {
    margin-top: 80px !important;
    margin-bottom: 80px !important;
  }
  .tablet-only-m-96 {
    margin: 96px !important;
  }
  .tablet-only-mt-96 {
    margin-top: 96px !important;
  }
  .tablet-only-mr-96 {
    margin-right: 96px !important;
  }
  .tablet-only-mb-96 {
    margin-bottom: 96px !important;
  }
  .tablet-only-ml-96 {
    margin-left: 96px !important;
  }
  .tablet-only-mx-96 {
    margin-left: 96px !important;
    margin-right: 96px !important;
  }
  .tablet-only-my-96 {
    margin-top: 96px !important;
    margin-bottom: 96px !important;
  }
  .tablet-only-m-120 {
    margin: 120px !important;
  }
  .tablet-only-mt-120 {
    margin-top: 120px !important;
  }
  .tablet-only-mr-120 {
    margin-right: 120px !important;
  }
  .tablet-only-mb-120 {
    margin-bottom: 120px !important;
  }
  .tablet-only-ml-120 {
    margin-left: 120px !important;
  }
  .tablet-only-mx-120 {
    margin-left: 120px !important;
    margin-right: 120px !important;
  }
  .tablet-only-my-120 {
    margin-top: 120px !important;
    margin-bottom: 120px !important;
  }
  .tablet-only-m-144 {
    margin: 144px !important;
  }
  .tablet-only-mt-144 {
    margin-top: 144px !important;
  }
  .tablet-only-mr-144 {
    margin-right: 144px !important;
  }
  .tablet-only-mb-144 {
    margin-bottom: 144px !important;
  }
  .tablet-only-ml-144 {
    margin-left: 144px !important;
  }
  .tablet-only-mx-144 {
    margin-left: 144px !important;
    margin-right: 144px !important;
  }
  .tablet-only-my-144 {
    margin-top: 144px !important;
    margin-bottom: 144px !important;
  }
  .tablet-only-m-160 {
    margin: 160px !important;
  }
  .tablet-only-mt-160 {
    margin-top: 160px !important;
  }
  .tablet-only-mr-160 {
    margin-right: 160px !important;
  }
  .tablet-only-mb-160 {
    margin-bottom: 160px !important;
  }
  .tablet-only-ml-160 {
    margin-left: 160px !important;
  }
  .tablet-only-mx-160 {
    margin-left: 160px !important;
    margin-right: 160px !important;
  }
  .tablet-only-my-160 {
    margin-top: 160px !important;
    margin-bottom: 160px !important;
  }
  .tablet-only-m-auto {
    margin: auto !important;
  }
  .tablet-only-mt-auto {
    margin-top: auto !important;
  }
  .tablet-only-mr-auto {
    margin-right: auto !important;
  }
  .tablet-only-mb-auto {
    margin-bottom: auto !important;
  }
  .tablet-only-ml-auto {
    margin-left: auto !important;
  }
  .tablet-only-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .tablet-only-my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
}
@media screen and (max-width: 1023px) {
  .touch-m-0 {
    margin: 0px !important;
  }
  .touch-mt-0 {
    margin-top: 0px !important;
  }
  .touch-mr-0 {
    margin-right: 0px !important;
  }
  .touch-mb-0 {
    margin-bottom: 0px !important;
  }
  .touch-ml-0 {
    margin-left: 0px !important;
  }
  .touch-mx-0 {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .touch-my-0 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  .touch-m-4 {
    margin: 4px !important;
  }
  .touch-mt-4 {
    margin-top: 4px !important;
  }
  .touch-mr-4 {
    margin-right: 4px !important;
  }
  .touch-mb-4 {
    margin-bottom: 4px !important;
  }
  .touch-ml-4 {
    margin-left: 4px !important;
  }
  .touch-mx-4 {
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
  .touch-my-4 {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
  .touch-m-6 {
    margin: 6px !important;
  }
  .touch-mt-6 {
    margin-top: 6px !important;
  }
  .touch-mr-6 {
    margin-right: 6px !important;
  }
  .touch-mb-6 {
    margin-bottom: 6px !important;
  }
  .touch-ml-6 {
    margin-left: 6px !important;
  }
  .touch-mx-6 {
    margin-left: 6px !important;
    margin-right: 6px !important;
  }
  .touch-my-6 {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }
  .touch-m-8 {
    margin: 8px !important;
  }
  .touch-mt-8 {
    margin-top: 8px !important;
  }
  .touch-mr-8 {
    margin-right: 8px !important;
  }
  .touch-mb-8 {
    margin-bottom: 8px !important;
  }
  .touch-ml-8 {
    margin-left: 8px !important;
  }
  .touch-mx-8 {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  .touch-my-8 {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
  .touch-m-12 {
    margin: 12px !important;
  }
  .touch-mt-12 {
    margin-top: 12px !important;
  }
  .touch-mr-12 {
    margin-right: 12px !important;
  }
  .touch-mb-12 {
    margin-bottom: 12px !important;
  }
  .touch-ml-12 {
    margin-left: 12px !important;
  }
  .touch-mx-12 {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
  .touch-my-12 {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }
  .touch-m-16 {
    margin: 16px !important;
  }
  .touch-mt-16 {
    margin-top: 16px !important;
  }
  .touch-mr-16 {
    margin-right: 16px !important;
  }
  .touch-mb-16 {
    margin-bottom: 16px !important;
  }
  .touch-ml-16 {
    margin-left: 16px !important;
  }
  .touch-mx-16 {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  .touch-my-16 {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
  .touch-m-24 {
    margin: 24px !important;
  }
  .touch-mt-24 {
    margin-top: 24px !important;
  }
  .touch-mr-24 {
    margin-right: 24px !important;
  }
  .touch-mb-24 {
    margin-bottom: 24px !important;
  }
  .touch-ml-24 {
    margin-left: 24px !important;
  }
  .touch-mx-24 {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
  .touch-my-24 {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
  .touch-m-32 {
    margin: 32px !important;
  }
  .touch-mt-32 {
    margin-top: 32px !important;
  }
  .touch-mr-32 {
    margin-right: 32px !important;
  }
  .touch-mb-32 {
    margin-bottom: 32px !important;
  }
  .touch-ml-32 {
    margin-left: 32px !important;
  }
  .touch-mx-32 {
    margin-left: 32px !important;
    margin-right: 32px !important;
  }
  .touch-my-32 {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }
  .touch-m-36 {
    margin: 36px !important;
  }
  .touch-mt-36 {
    margin-top: 36px !important;
  }
  .touch-mr-36 {
    margin-right: 36px !important;
  }
  .touch-mb-36 {
    margin-bottom: 36px !important;
  }
  .touch-ml-36 {
    margin-left: 36px !important;
  }
  .touch-mx-36 {
    margin-left: 36px !important;
    margin-right: 36px !important;
  }
  .touch-my-36 {
    margin-top: 36px !important;
    margin-bottom: 36px !important;
  }
  .touch-m-40 {
    margin: 40px !important;
  }
  .touch-mt-40 {
    margin-top: 40px !important;
  }
  .touch-mr-40 {
    margin-right: 40px !important;
  }
  .touch-mb-40 {
    margin-bottom: 40px !important;
  }
  .touch-ml-40 {
    margin-left: 40px !important;
  }
  .touch-mx-40 {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  .touch-my-40 {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  .touch-m-48 {
    margin: 48px !important;
  }
  .touch-mt-48 {
    margin-top: 48px !important;
  }
  .touch-mr-48 {
    margin-right: 48px !important;
  }
  .touch-mb-48 {
    margin-bottom: 48px !important;
  }
  .touch-ml-48 {
    margin-left: 48px !important;
  }
  .touch-mx-48 {
    margin-left: 48px !important;
    margin-right: 48px !important;
  }
  .touch-my-48 {
    margin-top: 48px !important;
    margin-bottom: 48px !important;
  }
  .touch-m-60 {
    margin: 60px !important;
  }
  .touch-mt-60 {
    margin-top: 60px !important;
  }
  .touch-mr-60 {
    margin-right: 60px !important;
  }
  .touch-mb-60 {
    margin-bottom: 60px !important;
  }
  .touch-ml-60 {
    margin-left: 60px !important;
  }
  .touch-mx-60 {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }
  .touch-my-60 {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  .touch-m-64 {
    margin: 64px !important;
  }
  .touch-mt-64 {
    margin-top: 64px !important;
  }
  .touch-mr-64 {
    margin-right: 64px !important;
  }
  .touch-mb-64 {
    margin-bottom: 64px !important;
  }
  .touch-ml-64 {
    margin-left: 64px !important;
  }
  .touch-mx-64 {
    margin-left: 64px !important;
    margin-right: 64px !important;
  }
  .touch-my-64 {
    margin-top: 64px !important;
    margin-bottom: 64px !important;
  }
  .touch-m-80 {
    margin: 80px !important;
  }
  .touch-mt-80 {
    margin-top: 80px !important;
  }
  .touch-mr-80 {
    margin-right: 80px !important;
  }
  .touch-mb-80 {
    margin-bottom: 80px !important;
  }
  .touch-ml-80 {
    margin-left: 80px !important;
  }
  .touch-mx-80 {
    margin-left: 80px !important;
    margin-right: 80px !important;
  }
  .touch-my-80 {
    margin-top: 80px !important;
    margin-bottom: 80px !important;
  }
  .touch-m-96 {
    margin: 96px !important;
  }
  .touch-mt-96 {
    margin-top: 96px !important;
  }
  .touch-mr-96 {
    margin-right: 96px !important;
  }
  .touch-mb-96 {
    margin-bottom: 96px !important;
  }
  .touch-ml-96 {
    margin-left: 96px !important;
  }
  .touch-mx-96 {
    margin-left: 96px !important;
    margin-right: 96px !important;
  }
  .touch-my-96 {
    margin-top: 96px !important;
    margin-bottom: 96px !important;
  }
  .touch-m-120 {
    margin: 120px !important;
  }
  .touch-mt-120 {
    margin-top: 120px !important;
  }
  .touch-mr-120 {
    margin-right: 120px !important;
  }
  .touch-mb-120 {
    margin-bottom: 120px !important;
  }
  .touch-ml-120 {
    margin-left: 120px !important;
  }
  .touch-mx-120 {
    margin-left: 120px !important;
    margin-right: 120px !important;
  }
  .touch-my-120 {
    margin-top: 120px !important;
    margin-bottom: 120px !important;
  }
  .touch-m-144 {
    margin: 144px !important;
  }
  .touch-mt-144 {
    margin-top: 144px !important;
  }
  .touch-mr-144 {
    margin-right: 144px !important;
  }
  .touch-mb-144 {
    margin-bottom: 144px !important;
  }
  .touch-ml-144 {
    margin-left: 144px !important;
  }
  .touch-mx-144 {
    margin-left: 144px !important;
    margin-right: 144px !important;
  }
  .touch-my-144 {
    margin-top: 144px !important;
    margin-bottom: 144px !important;
  }
  .touch-m-160 {
    margin: 160px !important;
  }
  .touch-mt-160 {
    margin-top: 160px !important;
  }
  .touch-mr-160 {
    margin-right: 160px !important;
  }
  .touch-mb-160 {
    margin-bottom: 160px !important;
  }
  .touch-ml-160 {
    margin-left: 160px !important;
  }
  .touch-mx-160 {
    margin-left: 160px !important;
    margin-right: 160px !important;
  }
  .touch-my-160 {
    margin-top: 160px !important;
    margin-bottom: 160px !important;
  }
  .touch-m-auto {
    margin: auto !important;
  }
  .touch-mt-auto {
    margin-top: auto !important;
  }
  .touch-mr-auto {
    margin-right: auto !important;
  }
  .touch-mb-auto {
    margin-bottom: auto !important;
  }
  .touch-ml-auto {
    margin-left: auto !important;
  }
  .touch-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .touch-my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop-m-0 {
    margin: 0px !important;
  }
  .desktop-mt-0 {
    margin-top: 0px !important;
  }
  .desktop-mr-0 {
    margin-right: 0px !important;
  }
  .desktop-mb-0 {
    margin-bottom: 0px !important;
  }
  .desktop-ml-0 {
    margin-left: 0px !important;
  }
  .desktop-mx-0 {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .desktop-my-0 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  .desktop-m-4 {
    margin: 4px !important;
  }
  .desktop-mt-4 {
    margin-top: 4px !important;
  }
  .desktop-mr-4 {
    margin-right: 4px !important;
  }
  .desktop-mb-4 {
    margin-bottom: 4px !important;
  }
  .desktop-ml-4 {
    margin-left: 4px !important;
  }
  .desktop-mx-4 {
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
  .desktop-my-4 {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
  .desktop-m-6 {
    margin: 6px !important;
  }
  .desktop-mt-6 {
    margin-top: 6px !important;
  }
  .desktop-mr-6 {
    margin-right: 6px !important;
  }
  .desktop-mb-6 {
    margin-bottom: 6px !important;
  }
  .desktop-ml-6 {
    margin-left: 6px !important;
  }
  .desktop-mx-6 {
    margin-left: 6px !important;
    margin-right: 6px !important;
  }
  .desktop-my-6 {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }
  .desktop-m-8 {
    margin: 8px !important;
  }
  .desktop-mt-8 {
    margin-top: 8px !important;
  }
  .desktop-mr-8 {
    margin-right: 8px !important;
  }
  .desktop-mb-8 {
    margin-bottom: 8px !important;
  }
  .desktop-ml-8 {
    margin-left: 8px !important;
  }
  .desktop-mx-8 {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  .desktop-my-8 {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
  .desktop-m-12 {
    margin: 12px !important;
  }
  .desktop-mt-12 {
    margin-top: 12px !important;
  }
  .desktop-mr-12 {
    margin-right: 12px !important;
  }
  .desktop-mb-12 {
    margin-bottom: 12px !important;
  }
  .desktop-ml-12 {
    margin-left: 12px !important;
  }
  .desktop-mx-12 {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
  .desktop-my-12 {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }
  .desktop-m-16 {
    margin: 16px !important;
  }
  .desktop-mt-16 {
    margin-top: 16px !important;
  }
  .desktop-mr-16 {
    margin-right: 16px !important;
  }
  .desktop-mb-16 {
    margin-bottom: 16px !important;
  }
  .desktop-ml-16 {
    margin-left: 16px !important;
  }
  .desktop-mx-16 {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  .desktop-my-16 {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
  .desktop-m-24 {
    margin: 24px !important;
  }
  .desktop-mt-24 {
    margin-top: 24px !important;
  }
  .desktop-mr-24 {
    margin-right: 24px !important;
  }
  .desktop-mb-24 {
    margin-bottom: 24px !important;
  }
  .desktop-ml-24 {
    margin-left: 24px !important;
  }
  .desktop-mx-24 {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
  .desktop-my-24 {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
  .desktop-m-32 {
    margin: 32px !important;
  }
  .desktop-mt-32 {
    margin-top: 32px !important;
  }
  .desktop-mr-32 {
    margin-right: 32px !important;
  }
  .desktop-mb-32 {
    margin-bottom: 32px !important;
  }
  .desktop-ml-32 {
    margin-left: 32px !important;
  }
  .desktop-mx-32 {
    margin-left: 32px !important;
    margin-right: 32px !important;
  }
  .desktop-my-32 {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }
  .desktop-m-36 {
    margin: 36px !important;
  }
  .desktop-mt-36 {
    margin-top: 36px !important;
  }
  .desktop-mr-36 {
    margin-right: 36px !important;
  }
  .desktop-mb-36 {
    margin-bottom: 36px !important;
  }
  .desktop-ml-36 {
    margin-left: 36px !important;
  }
  .desktop-mx-36 {
    margin-left: 36px !important;
    margin-right: 36px !important;
  }
  .desktop-my-36 {
    margin-top: 36px !important;
    margin-bottom: 36px !important;
  }
  .desktop-m-40 {
    margin: 40px !important;
  }
  .desktop-mt-40 {
    margin-top: 40px !important;
  }
  .desktop-mr-40 {
    margin-right: 40px !important;
  }
  .desktop-mb-40 {
    margin-bottom: 40px !important;
  }
  .desktop-ml-40 {
    margin-left: 40px !important;
  }
  .desktop-mx-40 {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  .desktop-my-40 {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  .desktop-m-48 {
    margin: 48px !important;
  }
  .desktop-mt-48 {
    margin-top: 48px !important;
  }
  .desktop-mr-48 {
    margin-right: 48px !important;
  }
  .desktop-mb-48 {
    margin-bottom: 48px !important;
  }
  .desktop-ml-48 {
    margin-left: 48px !important;
  }
  .desktop-mx-48 {
    margin-left: 48px !important;
    margin-right: 48px !important;
  }
  .desktop-my-48 {
    margin-top: 48px !important;
    margin-bottom: 48px !important;
  }
  .desktop-m-60 {
    margin: 60px !important;
  }
  .desktop-mt-60 {
    margin-top: 60px !important;
  }
  .desktop-mr-60 {
    margin-right: 60px !important;
  }
  .desktop-mb-60 {
    margin-bottom: 60px !important;
  }
  .desktop-ml-60 {
    margin-left: 60px !important;
  }
  .desktop-mx-60 {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }
  .desktop-my-60 {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  .desktop-m-64 {
    margin: 64px !important;
  }
  .desktop-mt-64 {
    margin-top: 64px !important;
  }
  .desktop-mr-64 {
    margin-right: 64px !important;
  }
  .desktop-mb-64 {
    margin-bottom: 64px !important;
  }
  .desktop-ml-64 {
    margin-left: 64px !important;
  }
  .desktop-mx-64 {
    margin-left: 64px !important;
    margin-right: 64px !important;
  }
  .desktop-my-64 {
    margin-top: 64px !important;
    margin-bottom: 64px !important;
  }
  .desktop-m-80 {
    margin: 80px !important;
  }
  .desktop-mt-80 {
    margin-top: 80px !important;
  }
  .desktop-mr-80 {
    margin-right: 80px !important;
  }
  .desktop-mb-80 {
    margin-bottom: 80px !important;
  }
  .desktop-ml-80 {
    margin-left: 80px !important;
  }
  .desktop-mx-80 {
    margin-left: 80px !important;
    margin-right: 80px !important;
  }
  .desktop-my-80 {
    margin-top: 80px !important;
    margin-bottom: 80px !important;
  }
  .desktop-m-96 {
    margin: 96px !important;
  }
  .desktop-mt-96 {
    margin-top: 96px !important;
  }
  .desktop-mr-96 {
    margin-right: 96px !important;
  }
  .desktop-mb-96 {
    margin-bottom: 96px !important;
  }
  .desktop-ml-96 {
    margin-left: 96px !important;
  }
  .desktop-mx-96 {
    margin-left: 96px !important;
    margin-right: 96px !important;
  }
  .desktop-my-96 {
    margin-top: 96px !important;
    margin-bottom: 96px !important;
  }
  .desktop-m-120 {
    margin: 120px !important;
  }
  .desktop-mt-120 {
    margin-top: 120px !important;
  }
  .desktop-mr-120 {
    margin-right: 120px !important;
  }
  .desktop-mb-120 {
    margin-bottom: 120px !important;
  }
  .desktop-ml-120 {
    margin-left: 120px !important;
  }
  .desktop-mx-120 {
    margin-left: 120px !important;
    margin-right: 120px !important;
  }
  .desktop-my-120 {
    margin-top: 120px !important;
    margin-bottom: 120px !important;
  }
  .desktop-m-144 {
    margin: 144px !important;
  }
  .desktop-mt-144 {
    margin-top: 144px !important;
  }
  .desktop-mr-144 {
    margin-right: 144px !important;
  }
  .desktop-mb-144 {
    margin-bottom: 144px !important;
  }
  .desktop-ml-144 {
    margin-left: 144px !important;
  }
  .desktop-mx-144 {
    margin-left: 144px !important;
    margin-right: 144px !important;
  }
  .desktop-my-144 {
    margin-top: 144px !important;
    margin-bottom: 144px !important;
  }
  .desktop-m-160 {
    margin: 160px !important;
  }
  .desktop-mt-160 {
    margin-top: 160px !important;
  }
  .desktop-mr-160 {
    margin-right: 160px !important;
  }
  .desktop-mb-160 {
    margin-bottom: 160px !important;
  }
  .desktop-ml-160 {
    margin-left: 160px !important;
  }
  .desktop-mx-160 {
    margin-left: 160px !important;
    margin-right: 160px !important;
  }
  .desktop-my-160 {
    margin-top: 160px !important;
    margin-bottom: 160px !important;
  }
  .desktop-m-auto {
    margin: auto !important;
  }
  .desktop-mt-auto {
    margin-top: auto !important;
  }
  .desktop-mr-auto {
    margin-right: auto !important;
  }
  .desktop-mb-auto {
    margin-bottom: auto !important;
  }
  .desktop-ml-auto {
    margin-left: auto !important;
  }
  .desktop-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .desktop-my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
}
.p-0 {
  padding: 0px !important;
}

.pt-0 {
  padding-top: 0px !important;
}

.pr-0 {
  padding-right: 0px !important;
}

.pb-0 {
  padding-bottom: 0px !important;
}

.pl-0 {
  padding-left: 0px !important;
}

.px-0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.py-0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.p-4 {
  padding: 4px !important;
}

.pt-4 {
  padding-top: 4px !important;
}

.pr-4 {
  padding-right: 4px !important;
}

.pb-4 {
  padding-bottom: 4px !important;
}

.pl-4 {
  padding-left: 4px !important;
}

.px-4 {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.py-4 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.p-6 {
  padding: 6px !important;
}

.pt-6 {
  padding-top: 6px !important;
}

.pr-6 {
  padding-right: 6px !important;
}

.pb-6 {
  padding-bottom: 6px !important;
}

.pl-6 {
  padding-left: 6px !important;
}

.px-6 {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.py-6 {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.p-8 {
  padding: 8px !important;
}

.pt-8 {
  padding-top: 8px !important;
}

.pr-8 {
  padding-right: 8px !important;
}

.pb-8 {
  padding-bottom: 8px !important;
}

.pl-8 {
  padding-left: 8px !important;
}

.px-8 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.py-8 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.p-12 {
  padding: 12px !important;
}

.pt-12 {
  padding-top: 12px !important;
}

.pr-12 {
  padding-right: 12px !important;
}

.pb-12 {
  padding-bottom: 12px !important;
}

.pl-12 {
  padding-left: 12px !important;
}

.px-12 {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.py-12 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.p-16 {
  padding: 16px !important;
}

.pt-16 {
  padding-top: 16px !important;
}

.pr-16 {
  padding-right: 16px !important;
}

.pb-16 {
  padding-bottom: 16px !important;
}

.pl-16 {
  padding-left: 16px !important;
}

.px-16 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.py-16 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.p-24 {
  padding: 24px !important;
}

.pt-24 {
  padding-top: 24px !important;
}

.pr-24 {
  padding-right: 24px !important;
}

.pb-24 {
  padding-bottom: 24px !important;
}

.pl-24 {
  padding-left: 24px !important;
}

.px-24 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.py-24 {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.p-32 {
  padding: 32px !important;
}

.pt-32 {
  padding-top: 32px !important;
}

.pr-32 {
  padding-right: 32px !important;
}

.pb-32 {
  padding-bottom: 32px !important;
}

.pl-32 {
  padding-left: 32px !important;
}

.px-32 {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

.py-32 {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

.p-36 {
  padding: 36px !important;
}

.pt-36 {
  padding-top: 36px !important;
}

.pr-36 {
  padding-right: 36px !important;
}

.pb-36 {
  padding-bottom: 36px !important;
}

.pl-36 {
  padding-left: 36px !important;
}

.px-36 {
  padding-left: 36px !important;
  padding-right: 36px !important;
}

.py-36 {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

.p-40 {
  padding: 40px !important;
}

.pt-40 {
  padding-top: 40px !important;
}

.pr-40 {
  padding-right: 40px !important;
}

.pb-40 {
  padding-bottom: 40px !important;
}

.pl-40 {
  padding-left: 40px !important;
}

.px-40 {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

.py-40 {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.p-48 {
  padding: 48px !important;
}

.pt-48 {
  padding-top: 48px !important;
}

.pr-48 {
  padding-right: 48px !important;
}

.pb-48 {
  padding-bottom: 48px !important;
}

.pl-48 {
  padding-left: 48px !important;
}

.px-48 {
  padding-left: 48px !important;
  padding-right: 48px !important;
}

.py-48 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.p-60 {
  padding: 60px !important;
}

.pt-60 {
  padding-top: 60px !important;
}

.pr-60 {
  padding-right: 60px !important;
}

.pb-60 {
  padding-bottom: 60px !important;
}

.pl-60 {
  padding-left: 60px !important;
}

.px-60 {
  padding-left: 60px !important;
  padding-right: 60px !important;
}

.py-60 {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

.p-64 {
  padding: 64px !important;
}

.pt-64 {
  padding-top: 64px !important;
}

.pr-64 {
  padding-right: 64px !important;
}

.pb-64 {
  padding-bottom: 64px !important;
}

.pl-64 {
  padding-left: 64px !important;
}

.px-64 {
  padding-left: 64px !important;
  padding-right: 64px !important;
}

.py-64 {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

.p-80 {
  padding: 80px !important;
}

.pt-80 {
  padding-top: 80px !important;
}

.pr-80 {
  padding-right: 80px !important;
}

.pb-80 {
  padding-bottom: 80px !important;
}

.pl-80 {
  padding-left: 80px !important;
}

.px-80 {
  padding-left: 80px !important;
  padding-right: 80px !important;
}

.py-80 {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

.p-96 {
  padding: 96px !important;
}

.pt-96 {
  padding-top: 96px !important;
}

.pr-96 {
  padding-right: 96px !important;
}

.pb-96 {
  padding-bottom: 96px !important;
}

.pl-96 {
  padding-left: 96px !important;
}

.px-96 {
  padding-left: 96px !important;
  padding-right: 96px !important;
}

.py-96 {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

.p-120 {
  padding: 120px !important;
}

.pt-120 {
  padding-top: 120px !important;
}

.pr-120 {
  padding-right: 120px !important;
}

.pb-120 {
  padding-bottom: 120px !important;
}

.pl-120 {
  padding-left: 120px !important;
}

.px-120 {
  padding-left: 120px !important;
  padding-right: 120px !important;
}

.py-120 {
  padding-top: 120px !important;
  padding-bottom: 120px !important;
}

.p-144 {
  padding: 144px !important;
}

.pt-144 {
  padding-top: 144px !important;
}

.pr-144 {
  padding-right: 144px !important;
}

.pb-144 {
  padding-bottom: 144px !important;
}

.pl-144 {
  padding-left: 144px !important;
}

.px-144 {
  padding-left: 144px !important;
  padding-right: 144px !important;
}

.py-144 {
  padding-top: 144px !important;
  padding-bottom: 144px !important;
}

.p-160 {
  padding: 160px !important;
}

.pt-160 {
  padding-top: 160px !important;
}

.pr-160 {
  padding-right: 160px !important;
}

.pb-160 {
  padding-bottom: 160px !important;
}

.pl-160 {
  padding-left: 160px !important;
}

.px-160 {
  padding-left: 160px !important;
  padding-right: 160px !important;
}

.py-160 {
  padding-top: 160px !important;
  padding-bottom: 160px !important;
}

.p-auto {
  padding: auto !important;
}

.pt-auto {
  padding-top: auto !important;
}

.pr-auto {
  padding-right: auto !important;
}

.pb-auto {
  padding-bottom: auto !important;
}

.pl-auto {
  padding-left: auto !important;
}

.px-auto {
  padding-left: auto !important;
  padding-right: auto !important;
}

.py-auto {
  padding-top: auto !important;
  padding-bottom: auto !important;
}

@media screen and (max-width: 767px) {
  .mobile-p-0 {
    padding: 0px !important;
  }
  .mobile-pt-0 {
    padding-top: 0px !important;
  }
  .mobile-pr-0 {
    padding-right: 0px !important;
  }
  .mobile-pb-0 {
    padding-bottom: 0px !important;
  }
  .mobile-pl-0 {
    padding-left: 0px !important;
  }
  .mobile-px-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .mobile-py-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  .mobile-p-4 {
    padding: 4px !important;
  }
  .mobile-pt-4 {
    padding-top: 4px !important;
  }
  .mobile-pr-4 {
    padding-right: 4px !important;
  }
  .mobile-pb-4 {
    padding-bottom: 4px !important;
  }
  .mobile-pl-4 {
    padding-left: 4px !important;
  }
  .mobile-px-4 {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .mobile-py-4 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .mobile-p-6 {
    padding: 6px !important;
  }
  .mobile-pt-6 {
    padding-top: 6px !important;
  }
  .mobile-pr-6 {
    padding-right: 6px !important;
  }
  .mobile-pb-6 {
    padding-bottom: 6px !important;
  }
  .mobile-pl-6 {
    padding-left: 6px !important;
  }
  .mobile-px-6 {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .mobile-py-6 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  .mobile-p-8 {
    padding: 8px !important;
  }
  .mobile-pt-8 {
    padding-top: 8px !important;
  }
  .mobile-pr-8 {
    padding-right: 8px !important;
  }
  .mobile-pb-8 {
    padding-bottom: 8px !important;
  }
  .mobile-pl-8 {
    padding-left: 8px !important;
  }
  .mobile-px-8 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .mobile-py-8 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .mobile-p-12 {
    padding: 12px !important;
  }
  .mobile-pt-12 {
    padding-top: 12px !important;
  }
  .mobile-pr-12 {
    padding-right: 12px !important;
  }
  .mobile-pb-12 {
    padding-bottom: 12px !important;
  }
  .mobile-pl-12 {
    padding-left: 12px !important;
  }
  .mobile-px-12 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .mobile-py-12 {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .mobile-p-16 {
    padding: 16px !important;
  }
  .mobile-pt-16 {
    padding-top: 16px !important;
  }
  .mobile-pr-16 {
    padding-right: 16px !important;
  }
  .mobile-pb-16 {
    padding-bottom: 16px !important;
  }
  .mobile-pl-16 {
    padding-left: 16px !important;
  }
  .mobile-px-16 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .mobile-py-16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .mobile-p-24 {
    padding: 24px !important;
  }
  .mobile-pt-24 {
    padding-top: 24px !important;
  }
  .mobile-pr-24 {
    padding-right: 24px !important;
  }
  .mobile-pb-24 {
    padding-bottom: 24px !important;
  }
  .mobile-pl-24 {
    padding-left: 24px !important;
  }
  .mobile-px-24 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .mobile-py-24 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .mobile-p-32 {
    padding: 32px !important;
  }
  .mobile-pt-32 {
    padding-top: 32px !important;
  }
  .mobile-pr-32 {
    padding-right: 32px !important;
  }
  .mobile-pb-32 {
    padding-bottom: 32px !important;
  }
  .mobile-pl-32 {
    padding-left: 32px !important;
  }
  .mobile-px-32 {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .mobile-py-32 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .mobile-p-36 {
    padding: 36px !important;
  }
  .mobile-pt-36 {
    padding-top: 36px !important;
  }
  .mobile-pr-36 {
    padding-right: 36px !important;
  }
  .mobile-pb-36 {
    padding-bottom: 36px !important;
  }
  .mobile-pl-36 {
    padding-left: 36px !important;
  }
  .mobile-px-36 {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }
  .mobile-py-36 {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  .mobile-p-40 {
    padding: 40px !important;
  }
  .mobile-pt-40 {
    padding-top: 40px !important;
  }
  .mobile-pr-40 {
    padding-right: 40px !important;
  }
  .mobile-pb-40 {
    padding-bottom: 40px !important;
  }
  .mobile-pl-40 {
    padding-left: 40px !important;
  }
  .mobile-px-40 {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .mobile-py-40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .mobile-p-48 {
    padding: 48px !important;
  }
  .mobile-pt-48 {
    padding-top: 48px !important;
  }
  .mobile-pr-48 {
    padding-right: 48px !important;
  }
  .mobile-pb-48 {
    padding-bottom: 48px !important;
  }
  .mobile-pl-48 {
    padding-left: 48px !important;
  }
  .mobile-px-48 {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  .mobile-py-48 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .mobile-p-60 {
    padding: 60px !important;
  }
  .mobile-pt-60 {
    padding-top: 60px !important;
  }
  .mobile-pr-60 {
    padding-right: 60px !important;
  }
  .mobile-pb-60 {
    padding-bottom: 60px !important;
  }
  .mobile-pl-60 {
    padding-left: 60px !important;
  }
  .mobile-px-60 {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  .mobile-py-60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .mobile-p-64 {
    padding: 64px !important;
  }
  .mobile-pt-64 {
    padding-top: 64px !important;
  }
  .mobile-pr-64 {
    padding-right: 64px !important;
  }
  .mobile-pb-64 {
    padding-bottom: 64px !important;
  }
  .mobile-pl-64 {
    padding-left: 64px !important;
  }
  .mobile-px-64 {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
  .mobile-py-64 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .mobile-p-80 {
    padding: 80px !important;
  }
  .mobile-pt-80 {
    padding-top: 80px !important;
  }
  .mobile-pr-80 {
    padding-right: 80px !important;
  }
  .mobile-pb-80 {
    padding-bottom: 80px !important;
  }
  .mobile-pl-80 {
    padding-left: 80px !important;
  }
  .mobile-px-80 {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
  .mobile-py-80 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  .mobile-p-96 {
    padding: 96px !important;
  }
  .mobile-pt-96 {
    padding-top: 96px !important;
  }
  .mobile-pr-96 {
    padding-right: 96px !important;
  }
  .mobile-pb-96 {
    padding-bottom: 96px !important;
  }
  .mobile-pl-96 {
    padding-left: 96px !important;
  }
  .mobile-px-96 {
    padding-left: 96px !important;
    padding-right: 96px !important;
  }
  .mobile-py-96 {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
  }
  .mobile-p-120 {
    padding: 120px !important;
  }
  .mobile-pt-120 {
    padding-top: 120px !important;
  }
  .mobile-pr-120 {
    padding-right: 120px !important;
  }
  .mobile-pb-120 {
    padding-bottom: 120px !important;
  }
  .mobile-pl-120 {
    padding-left: 120px !important;
  }
  .mobile-px-120 {
    padding-left: 120px !important;
    padding-right: 120px !important;
  }
  .mobile-py-120 {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
  }
  .mobile-p-144 {
    padding: 144px !important;
  }
  .mobile-pt-144 {
    padding-top: 144px !important;
  }
  .mobile-pr-144 {
    padding-right: 144px !important;
  }
  .mobile-pb-144 {
    padding-bottom: 144px !important;
  }
  .mobile-pl-144 {
    padding-left: 144px !important;
  }
  .mobile-px-144 {
    padding-left: 144px !important;
    padding-right: 144px !important;
  }
  .mobile-py-144 {
    padding-top: 144px !important;
    padding-bottom: 144px !important;
  }
  .mobile-p-160 {
    padding: 160px !important;
  }
  .mobile-pt-160 {
    padding-top: 160px !important;
  }
  .mobile-pr-160 {
    padding-right: 160px !important;
  }
  .mobile-pb-160 {
    padding-bottom: 160px !important;
  }
  .mobile-pl-160 {
    padding-left: 160px !important;
  }
  .mobile-px-160 {
    padding-left: 160px !important;
    padding-right: 160px !important;
  }
  .mobile-py-160 {
    padding-top: 160px !important;
    padding-bottom: 160px !important;
  }
  .mobile-p-auto {
    padding: auto !important;
  }
  .mobile-pt-auto {
    padding-top: auto !important;
  }
  .mobile-pr-auto {
    padding-right: auto !important;
  }
  .mobile-pb-auto {
    padding-bottom: auto !important;
  }
  .mobile-pl-auto {
    padding-left: auto !important;
  }
  .mobile-px-auto {
    padding-left: auto !important;
    padding-right: auto !important;
  }
  .mobile-py-auto {
    padding-top: auto !important;
    padding-bottom: auto !important;
  }
}
@media screen and (min-width: 768px) {
  .tablet-p-0 {
    padding: 0px !important;
  }
  .tablet-pt-0 {
    padding-top: 0px !important;
  }
  .tablet-pr-0 {
    padding-right: 0px !important;
  }
  .tablet-pb-0 {
    padding-bottom: 0px !important;
  }
  .tablet-pl-0 {
    padding-left: 0px !important;
  }
  .tablet-px-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .tablet-py-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  .tablet-p-4 {
    padding: 4px !important;
  }
  .tablet-pt-4 {
    padding-top: 4px !important;
  }
  .tablet-pr-4 {
    padding-right: 4px !important;
  }
  .tablet-pb-4 {
    padding-bottom: 4px !important;
  }
  .tablet-pl-4 {
    padding-left: 4px !important;
  }
  .tablet-px-4 {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .tablet-py-4 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .tablet-p-6 {
    padding: 6px !important;
  }
  .tablet-pt-6 {
    padding-top: 6px !important;
  }
  .tablet-pr-6 {
    padding-right: 6px !important;
  }
  .tablet-pb-6 {
    padding-bottom: 6px !important;
  }
  .tablet-pl-6 {
    padding-left: 6px !important;
  }
  .tablet-px-6 {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .tablet-py-6 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  .tablet-p-8 {
    padding: 8px !important;
  }
  .tablet-pt-8 {
    padding-top: 8px !important;
  }
  .tablet-pr-8 {
    padding-right: 8px !important;
  }
  .tablet-pb-8 {
    padding-bottom: 8px !important;
  }
  .tablet-pl-8 {
    padding-left: 8px !important;
  }
  .tablet-px-8 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .tablet-py-8 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .tablet-p-12 {
    padding: 12px !important;
  }
  .tablet-pt-12 {
    padding-top: 12px !important;
  }
  .tablet-pr-12 {
    padding-right: 12px !important;
  }
  .tablet-pb-12 {
    padding-bottom: 12px !important;
  }
  .tablet-pl-12 {
    padding-left: 12px !important;
  }
  .tablet-px-12 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .tablet-py-12 {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .tablet-p-16 {
    padding: 16px !important;
  }
  .tablet-pt-16 {
    padding-top: 16px !important;
  }
  .tablet-pr-16 {
    padding-right: 16px !important;
  }
  .tablet-pb-16 {
    padding-bottom: 16px !important;
  }
  .tablet-pl-16 {
    padding-left: 16px !important;
  }
  .tablet-px-16 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .tablet-py-16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .tablet-p-24 {
    padding: 24px !important;
  }
  .tablet-pt-24 {
    padding-top: 24px !important;
  }
  .tablet-pr-24 {
    padding-right: 24px !important;
  }
  .tablet-pb-24 {
    padding-bottom: 24px !important;
  }
  .tablet-pl-24 {
    padding-left: 24px !important;
  }
  .tablet-px-24 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .tablet-py-24 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .tablet-p-32 {
    padding: 32px !important;
  }
  .tablet-pt-32 {
    padding-top: 32px !important;
  }
  .tablet-pr-32 {
    padding-right: 32px !important;
  }
  .tablet-pb-32 {
    padding-bottom: 32px !important;
  }
  .tablet-pl-32 {
    padding-left: 32px !important;
  }
  .tablet-px-32 {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .tablet-py-32 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .tablet-p-36 {
    padding: 36px !important;
  }
  .tablet-pt-36 {
    padding-top: 36px !important;
  }
  .tablet-pr-36 {
    padding-right: 36px !important;
  }
  .tablet-pb-36 {
    padding-bottom: 36px !important;
  }
  .tablet-pl-36 {
    padding-left: 36px !important;
  }
  .tablet-px-36 {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }
  .tablet-py-36 {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  .tablet-p-40 {
    padding: 40px !important;
  }
  .tablet-pt-40 {
    padding-top: 40px !important;
  }
  .tablet-pr-40 {
    padding-right: 40px !important;
  }
  .tablet-pb-40 {
    padding-bottom: 40px !important;
  }
  .tablet-pl-40 {
    padding-left: 40px !important;
  }
  .tablet-px-40 {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .tablet-py-40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .tablet-p-48 {
    padding: 48px !important;
  }
  .tablet-pt-48 {
    padding-top: 48px !important;
  }
  .tablet-pr-48 {
    padding-right: 48px !important;
  }
  .tablet-pb-48 {
    padding-bottom: 48px !important;
  }
  .tablet-pl-48 {
    padding-left: 48px !important;
  }
  .tablet-px-48 {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  .tablet-py-48 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .tablet-p-60 {
    padding: 60px !important;
  }
  .tablet-pt-60 {
    padding-top: 60px !important;
  }
  .tablet-pr-60 {
    padding-right: 60px !important;
  }
  .tablet-pb-60 {
    padding-bottom: 60px !important;
  }
  .tablet-pl-60 {
    padding-left: 60px !important;
  }
  .tablet-px-60 {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  .tablet-py-60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .tablet-p-64 {
    padding: 64px !important;
  }
  .tablet-pt-64 {
    padding-top: 64px !important;
  }
  .tablet-pr-64 {
    padding-right: 64px !important;
  }
  .tablet-pb-64 {
    padding-bottom: 64px !important;
  }
  .tablet-pl-64 {
    padding-left: 64px !important;
  }
  .tablet-px-64 {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
  .tablet-py-64 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .tablet-p-80 {
    padding: 80px !important;
  }
  .tablet-pt-80 {
    padding-top: 80px !important;
  }
  .tablet-pr-80 {
    padding-right: 80px !important;
  }
  .tablet-pb-80 {
    padding-bottom: 80px !important;
  }
  .tablet-pl-80 {
    padding-left: 80px !important;
  }
  .tablet-px-80 {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
  .tablet-py-80 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  .tablet-p-96 {
    padding: 96px !important;
  }
  .tablet-pt-96 {
    padding-top: 96px !important;
  }
  .tablet-pr-96 {
    padding-right: 96px !important;
  }
  .tablet-pb-96 {
    padding-bottom: 96px !important;
  }
  .tablet-pl-96 {
    padding-left: 96px !important;
  }
  .tablet-px-96 {
    padding-left: 96px !important;
    padding-right: 96px !important;
  }
  .tablet-py-96 {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
  }
  .tablet-p-120 {
    padding: 120px !important;
  }
  .tablet-pt-120 {
    padding-top: 120px !important;
  }
  .tablet-pr-120 {
    padding-right: 120px !important;
  }
  .tablet-pb-120 {
    padding-bottom: 120px !important;
  }
  .tablet-pl-120 {
    padding-left: 120px !important;
  }
  .tablet-px-120 {
    padding-left: 120px !important;
    padding-right: 120px !important;
  }
  .tablet-py-120 {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
  }
  .tablet-p-144 {
    padding: 144px !important;
  }
  .tablet-pt-144 {
    padding-top: 144px !important;
  }
  .tablet-pr-144 {
    padding-right: 144px !important;
  }
  .tablet-pb-144 {
    padding-bottom: 144px !important;
  }
  .tablet-pl-144 {
    padding-left: 144px !important;
  }
  .tablet-px-144 {
    padding-left: 144px !important;
    padding-right: 144px !important;
  }
  .tablet-py-144 {
    padding-top: 144px !important;
    padding-bottom: 144px !important;
  }
  .tablet-p-160 {
    padding: 160px !important;
  }
  .tablet-pt-160 {
    padding-top: 160px !important;
  }
  .tablet-pr-160 {
    padding-right: 160px !important;
  }
  .tablet-pb-160 {
    padding-bottom: 160px !important;
  }
  .tablet-pl-160 {
    padding-left: 160px !important;
  }
  .tablet-px-160 {
    padding-left: 160px !important;
    padding-right: 160px !important;
  }
  .tablet-py-160 {
    padding-top: 160px !important;
    padding-bottom: 160px !important;
  }
  .tablet-p-auto {
    padding: auto !important;
  }
  .tablet-pt-auto {
    padding-top: auto !important;
  }
  .tablet-pr-auto {
    padding-right: auto !important;
  }
  .tablet-pb-auto {
    padding-bottom: auto !important;
  }
  .tablet-pl-auto {
    padding-left: auto !important;
  }
  .tablet-px-auto {
    padding-left: auto !important;
    padding-right: auto !important;
  }
  .tablet-py-auto {
    padding-top: auto !important;
    padding-bottom: auto !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .tablet-only-p-0 {
    padding: 0px !important;
  }
  .tablet-only-pt-0 {
    padding-top: 0px !important;
  }
  .tablet-only-pr-0 {
    padding-right: 0px !important;
  }
  .tablet-only-pb-0 {
    padding-bottom: 0px !important;
  }
  .tablet-only-pl-0 {
    padding-left: 0px !important;
  }
  .tablet-only-px-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .tablet-only-py-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  .tablet-only-p-4 {
    padding: 4px !important;
  }
  .tablet-only-pt-4 {
    padding-top: 4px !important;
  }
  .tablet-only-pr-4 {
    padding-right: 4px !important;
  }
  .tablet-only-pb-4 {
    padding-bottom: 4px !important;
  }
  .tablet-only-pl-4 {
    padding-left: 4px !important;
  }
  .tablet-only-px-4 {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .tablet-only-py-4 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .tablet-only-p-6 {
    padding: 6px !important;
  }
  .tablet-only-pt-6 {
    padding-top: 6px !important;
  }
  .tablet-only-pr-6 {
    padding-right: 6px !important;
  }
  .tablet-only-pb-6 {
    padding-bottom: 6px !important;
  }
  .tablet-only-pl-6 {
    padding-left: 6px !important;
  }
  .tablet-only-px-6 {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .tablet-only-py-6 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  .tablet-only-p-8 {
    padding: 8px !important;
  }
  .tablet-only-pt-8 {
    padding-top: 8px !important;
  }
  .tablet-only-pr-8 {
    padding-right: 8px !important;
  }
  .tablet-only-pb-8 {
    padding-bottom: 8px !important;
  }
  .tablet-only-pl-8 {
    padding-left: 8px !important;
  }
  .tablet-only-px-8 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .tablet-only-py-8 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .tablet-only-p-12 {
    padding: 12px !important;
  }
  .tablet-only-pt-12 {
    padding-top: 12px !important;
  }
  .tablet-only-pr-12 {
    padding-right: 12px !important;
  }
  .tablet-only-pb-12 {
    padding-bottom: 12px !important;
  }
  .tablet-only-pl-12 {
    padding-left: 12px !important;
  }
  .tablet-only-px-12 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .tablet-only-py-12 {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .tablet-only-p-16 {
    padding: 16px !important;
  }
  .tablet-only-pt-16 {
    padding-top: 16px !important;
  }
  .tablet-only-pr-16 {
    padding-right: 16px !important;
  }
  .tablet-only-pb-16 {
    padding-bottom: 16px !important;
  }
  .tablet-only-pl-16 {
    padding-left: 16px !important;
  }
  .tablet-only-px-16 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .tablet-only-py-16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .tablet-only-p-24 {
    padding: 24px !important;
  }
  .tablet-only-pt-24 {
    padding-top: 24px !important;
  }
  .tablet-only-pr-24 {
    padding-right: 24px !important;
  }
  .tablet-only-pb-24 {
    padding-bottom: 24px !important;
  }
  .tablet-only-pl-24 {
    padding-left: 24px !important;
  }
  .tablet-only-px-24 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .tablet-only-py-24 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .tablet-only-p-32 {
    padding: 32px !important;
  }
  .tablet-only-pt-32 {
    padding-top: 32px !important;
  }
  .tablet-only-pr-32 {
    padding-right: 32px !important;
  }
  .tablet-only-pb-32 {
    padding-bottom: 32px !important;
  }
  .tablet-only-pl-32 {
    padding-left: 32px !important;
  }
  .tablet-only-px-32 {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .tablet-only-py-32 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .tablet-only-p-36 {
    padding: 36px !important;
  }
  .tablet-only-pt-36 {
    padding-top: 36px !important;
  }
  .tablet-only-pr-36 {
    padding-right: 36px !important;
  }
  .tablet-only-pb-36 {
    padding-bottom: 36px !important;
  }
  .tablet-only-pl-36 {
    padding-left: 36px !important;
  }
  .tablet-only-px-36 {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }
  .tablet-only-py-36 {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  .tablet-only-p-40 {
    padding: 40px !important;
  }
  .tablet-only-pt-40 {
    padding-top: 40px !important;
  }
  .tablet-only-pr-40 {
    padding-right: 40px !important;
  }
  .tablet-only-pb-40 {
    padding-bottom: 40px !important;
  }
  .tablet-only-pl-40 {
    padding-left: 40px !important;
  }
  .tablet-only-px-40 {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .tablet-only-py-40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .tablet-only-p-48 {
    padding: 48px !important;
  }
  .tablet-only-pt-48 {
    padding-top: 48px !important;
  }
  .tablet-only-pr-48 {
    padding-right: 48px !important;
  }
  .tablet-only-pb-48 {
    padding-bottom: 48px !important;
  }
  .tablet-only-pl-48 {
    padding-left: 48px !important;
  }
  .tablet-only-px-48 {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  .tablet-only-py-48 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .tablet-only-p-60 {
    padding: 60px !important;
  }
  .tablet-only-pt-60 {
    padding-top: 60px !important;
  }
  .tablet-only-pr-60 {
    padding-right: 60px !important;
  }
  .tablet-only-pb-60 {
    padding-bottom: 60px !important;
  }
  .tablet-only-pl-60 {
    padding-left: 60px !important;
  }
  .tablet-only-px-60 {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  .tablet-only-py-60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .tablet-only-p-64 {
    padding: 64px !important;
  }
  .tablet-only-pt-64 {
    padding-top: 64px !important;
  }
  .tablet-only-pr-64 {
    padding-right: 64px !important;
  }
  .tablet-only-pb-64 {
    padding-bottom: 64px !important;
  }
  .tablet-only-pl-64 {
    padding-left: 64px !important;
  }
  .tablet-only-px-64 {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
  .tablet-only-py-64 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .tablet-only-p-80 {
    padding: 80px !important;
  }
  .tablet-only-pt-80 {
    padding-top: 80px !important;
  }
  .tablet-only-pr-80 {
    padding-right: 80px !important;
  }
  .tablet-only-pb-80 {
    padding-bottom: 80px !important;
  }
  .tablet-only-pl-80 {
    padding-left: 80px !important;
  }
  .tablet-only-px-80 {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
  .tablet-only-py-80 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  .tablet-only-p-96 {
    padding: 96px !important;
  }
  .tablet-only-pt-96 {
    padding-top: 96px !important;
  }
  .tablet-only-pr-96 {
    padding-right: 96px !important;
  }
  .tablet-only-pb-96 {
    padding-bottom: 96px !important;
  }
  .tablet-only-pl-96 {
    padding-left: 96px !important;
  }
  .tablet-only-px-96 {
    padding-left: 96px !important;
    padding-right: 96px !important;
  }
  .tablet-only-py-96 {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
  }
  .tablet-only-p-120 {
    padding: 120px !important;
  }
  .tablet-only-pt-120 {
    padding-top: 120px !important;
  }
  .tablet-only-pr-120 {
    padding-right: 120px !important;
  }
  .tablet-only-pb-120 {
    padding-bottom: 120px !important;
  }
  .tablet-only-pl-120 {
    padding-left: 120px !important;
  }
  .tablet-only-px-120 {
    padding-left: 120px !important;
    padding-right: 120px !important;
  }
  .tablet-only-py-120 {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
  }
  .tablet-only-p-144 {
    padding: 144px !important;
  }
  .tablet-only-pt-144 {
    padding-top: 144px !important;
  }
  .tablet-only-pr-144 {
    padding-right: 144px !important;
  }
  .tablet-only-pb-144 {
    padding-bottom: 144px !important;
  }
  .tablet-only-pl-144 {
    padding-left: 144px !important;
  }
  .tablet-only-px-144 {
    padding-left: 144px !important;
    padding-right: 144px !important;
  }
  .tablet-only-py-144 {
    padding-top: 144px !important;
    padding-bottom: 144px !important;
  }
  .tablet-only-p-160 {
    padding: 160px !important;
  }
  .tablet-only-pt-160 {
    padding-top: 160px !important;
  }
  .tablet-only-pr-160 {
    padding-right: 160px !important;
  }
  .tablet-only-pb-160 {
    padding-bottom: 160px !important;
  }
  .tablet-only-pl-160 {
    padding-left: 160px !important;
  }
  .tablet-only-px-160 {
    padding-left: 160px !important;
    padding-right: 160px !important;
  }
  .tablet-only-py-160 {
    padding-top: 160px !important;
    padding-bottom: 160px !important;
  }
  .tablet-only-p-auto {
    padding: auto !important;
  }
  .tablet-only-pt-auto {
    padding-top: auto !important;
  }
  .tablet-only-pr-auto {
    padding-right: auto !important;
  }
  .tablet-only-pb-auto {
    padding-bottom: auto !important;
  }
  .tablet-only-pl-auto {
    padding-left: auto !important;
  }
  .tablet-only-px-auto {
    padding-left: auto !important;
    padding-right: auto !important;
  }
  .tablet-only-py-auto {
    padding-top: auto !important;
    padding-bottom: auto !important;
  }
}
@media screen and (max-width: 1023px) {
  .touch-p-0 {
    padding: 0px !important;
  }
  .touch-pt-0 {
    padding-top: 0px !important;
  }
  .touch-pr-0 {
    padding-right: 0px !important;
  }
  .touch-pb-0 {
    padding-bottom: 0px !important;
  }
  .touch-pl-0 {
    padding-left: 0px !important;
  }
  .touch-px-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .touch-py-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  .touch-p-4 {
    padding: 4px !important;
  }
  .touch-pt-4 {
    padding-top: 4px !important;
  }
  .touch-pr-4 {
    padding-right: 4px !important;
  }
  .touch-pb-4 {
    padding-bottom: 4px !important;
  }
  .touch-pl-4 {
    padding-left: 4px !important;
  }
  .touch-px-4 {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .touch-py-4 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .touch-p-6 {
    padding: 6px !important;
  }
  .touch-pt-6 {
    padding-top: 6px !important;
  }
  .touch-pr-6 {
    padding-right: 6px !important;
  }
  .touch-pb-6 {
    padding-bottom: 6px !important;
  }
  .touch-pl-6 {
    padding-left: 6px !important;
  }
  .touch-px-6 {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .touch-py-6 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  .touch-p-8 {
    padding: 8px !important;
  }
  .touch-pt-8 {
    padding-top: 8px !important;
  }
  .touch-pr-8 {
    padding-right: 8px !important;
  }
  .touch-pb-8 {
    padding-bottom: 8px !important;
  }
  .touch-pl-8 {
    padding-left: 8px !important;
  }
  .touch-px-8 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .touch-py-8 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .touch-p-12 {
    padding: 12px !important;
  }
  .touch-pt-12 {
    padding-top: 12px !important;
  }
  .touch-pr-12 {
    padding-right: 12px !important;
  }
  .touch-pb-12 {
    padding-bottom: 12px !important;
  }
  .touch-pl-12 {
    padding-left: 12px !important;
  }
  .touch-px-12 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .touch-py-12 {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .touch-p-16 {
    padding: 16px !important;
  }
  .touch-pt-16 {
    padding-top: 16px !important;
  }
  .touch-pr-16 {
    padding-right: 16px !important;
  }
  .touch-pb-16 {
    padding-bottom: 16px !important;
  }
  .touch-pl-16 {
    padding-left: 16px !important;
  }
  .touch-px-16 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .touch-py-16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .touch-p-24 {
    padding: 24px !important;
  }
  .touch-pt-24 {
    padding-top: 24px !important;
  }
  .touch-pr-24 {
    padding-right: 24px !important;
  }
  .touch-pb-24 {
    padding-bottom: 24px !important;
  }
  .touch-pl-24 {
    padding-left: 24px !important;
  }
  .touch-px-24 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .touch-py-24 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .touch-p-32 {
    padding: 32px !important;
  }
  .touch-pt-32 {
    padding-top: 32px !important;
  }
  .touch-pr-32 {
    padding-right: 32px !important;
  }
  .touch-pb-32 {
    padding-bottom: 32px !important;
  }
  .touch-pl-32 {
    padding-left: 32px !important;
  }
  .touch-px-32 {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .touch-py-32 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .touch-p-36 {
    padding: 36px !important;
  }
  .touch-pt-36 {
    padding-top: 36px !important;
  }
  .touch-pr-36 {
    padding-right: 36px !important;
  }
  .touch-pb-36 {
    padding-bottom: 36px !important;
  }
  .touch-pl-36 {
    padding-left: 36px !important;
  }
  .touch-px-36 {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }
  .touch-py-36 {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  .touch-p-40 {
    padding: 40px !important;
  }
  .touch-pt-40 {
    padding-top: 40px !important;
  }
  .touch-pr-40 {
    padding-right: 40px !important;
  }
  .touch-pb-40 {
    padding-bottom: 40px !important;
  }
  .touch-pl-40 {
    padding-left: 40px !important;
  }
  .touch-px-40 {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .touch-py-40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .touch-p-48 {
    padding: 48px !important;
  }
  .touch-pt-48 {
    padding-top: 48px !important;
  }
  .touch-pr-48 {
    padding-right: 48px !important;
  }
  .touch-pb-48 {
    padding-bottom: 48px !important;
  }
  .touch-pl-48 {
    padding-left: 48px !important;
  }
  .touch-px-48 {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  .touch-py-48 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .touch-p-60 {
    padding: 60px !important;
  }
  .touch-pt-60 {
    padding-top: 60px !important;
  }
  .touch-pr-60 {
    padding-right: 60px !important;
  }
  .touch-pb-60 {
    padding-bottom: 60px !important;
  }
  .touch-pl-60 {
    padding-left: 60px !important;
  }
  .touch-px-60 {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  .touch-py-60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .touch-p-64 {
    padding: 64px !important;
  }
  .touch-pt-64 {
    padding-top: 64px !important;
  }
  .touch-pr-64 {
    padding-right: 64px !important;
  }
  .touch-pb-64 {
    padding-bottom: 64px !important;
  }
  .touch-pl-64 {
    padding-left: 64px !important;
  }
  .touch-px-64 {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
  .touch-py-64 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .touch-p-80 {
    padding: 80px !important;
  }
  .touch-pt-80 {
    padding-top: 80px !important;
  }
  .touch-pr-80 {
    padding-right: 80px !important;
  }
  .touch-pb-80 {
    padding-bottom: 80px !important;
  }
  .touch-pl-80 {
    padding-left: 80px !important;
  }
  .touch-px-80 {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
  .touch-py-80 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  .touch-p-96 {
    padding: 96px !important;
  }
  .touch-pt-96 {
    padding-top: 96px !important;
  }
  .touch-pr-96 {
    padding-right: 96px !important;
  }
  .touch-pb-96 {
    padding-bottom: 96px !important;
  }
  .touch-pl-96 {
    padding-left: 96px !important;
  }
  .touch-px-96 {
    padding-left: 96px !important;
    padding-right: 96px !important;
  }
  .touch-py-96 {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
  }
  .touch-p-120 {
    padding: 120px !important;
  }
  .touch-pt-120 {
    padding-top: 120px !important;
  }
  .touch-pr-120 {
    padding-right: 120px !important;
  }
  .touch-pb-120 {
    padding-bottom: 120px !important;
  }
  .touch-pl-120 {
    padding-left: 120px !important;
  }
  .touch-px-120 {
    padding-left: 120px !important;
    padding-right: 120px !important;
  }
  .touch-py-120 {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
  }
  .touch-p-144 {
    padding: 144px !important;
  }
  .touch-pt-144 {
    padding-top: 144px !important;
  }
  .touch-pr-144 {
    padding-right: 144px !important;
  }
  .touch-pb-144 {
    padding-bottom: 144px !important;
  }
  .touch-pl-144 {
    padding-left: 144px !important;
  }
  .touch-px-144 {
    padding-left: 144px !important;
    padding-right: 144px !important;
  }
  .touch-py-144 {
    padding-top: 144px !important;
    padding-bottom: 144px !important;
  }
  .touch-p-160 {
    padding: 160px !important;
  }
  .touch-pt-160 {
    padding-top: 160px !important;
  }
  .touch-pr-160 {
    padding-right: 160px !important;
  }
  .touch-pb-160 {
    padding-bottom: 160px !important;
  }
  .touch-pl-160 {
    padding-left: 160px !important;
  }
  .touch-px-160 {
    padding-left: 160px !important;
    padding-right: 160px !important;
  }
  .touch-py-160 {
    padding-top: 160px !important;
    padding-bottom: 160px !important;
  }
  .touch-p-auto {
    padding: auto !important;
  }
  .touch-pt-auto {
    padding-top: auto !important;
  }
  .touch-pr-auto {
    padding-right: auto !important;
  }
  .touch-pb-auto {
    padding-bottom: auto !important;
  }
  .touch-pl-auto {
    padding-left: auto !important;
  }
  .touch-px-auto {
    padding-left: auto !important;
    padding-right: auto !important;
  }
  .touch-py-auto {
    padding-top: auto !important;
    padding-bottom: auto !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop-p-0 {
    padding: 0px !important;
  }
  .desktop-pt-0 {
    padding-top: 0px !important;
  }
  .desktop-pr-0 {
    padding-right: 0px !important;
  }
  .desktop-pb-0 {
    padding-bottom: 0px !important;
  }
  .desktop-pl-0 {
    padding-left: 0px !important;
  }
  .desktop-px-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .desktop-py-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  .desktop-p-4 {
    padding: 4px !important;
  }
  .desktop-pt-4 {
    padding-top: 4px !important;
  }
  .desktop-pr-4 {
    padding-right: 4px !important;
  }
  .desktop-pb-4 {
    padding-bottom: 4px !important;
  }
  .desktop-pl-4 {
    padding-left: 4px !important;
  }
  .desktop-px-4 {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .desktop-py-4 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .desktop-p-6 {
    padding: 6px !important;
  }
  .desktop-pt-6 {
    padding-top: 6px !important;
  }
  .desktop-pr-6 {
    padding-right: 6px !important;
  }
  .desktop-pb-6 {
    padding-bottom: 6px !important;
  }
  .desktop-pl-6 {
    padding-left: 6px !important;
  }
  .desktop-px-6 {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .desktop-py-6 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  .desktop-p-8 {
    padding: 8px !important;
  }
  .desktop-pt-8 {
    padding-top: 8px !important;
  }
  .desktop-pr-8 {
    padding-right: 8px !important;
  }
  .desktop-pb-8 {
    padding-bottom: 8px !important;
  }
  .desktop-pl-8 {
    padding-left: 8px !important;
  }
  .desktop-px-8 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .desktop-py-8 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .desktop-p-12 {
    padding: 12px !important;
  }
  .desktop-pt-12 {
    padding-top: 12px !important;
  }
  .desktop-pr-12 {
    padding-right: 12px !important;
  }
  .desktop-pb-12 {
    padding-bottom: 12px !important;
  }
  .desktop-pl-12 {
    padding-left: 12px !important;
  }
  .desktop-px-12 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .desktop-py-12 {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .desktop-p-16 {
    padding: 16px !important;
  }
  .desktop-pt-16 {
    padding-top: 16px !important;
  }
  .desktop-pr-16 {
    padding-right: 16px !important;
  }
  .desktop-pb-16 {
    padding-bottom: 16px !important;
  }
  .desktop-pl-16 {
    padding-left: 16px !important;
  }
  .desktop-px-16 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .desktop-py-16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .desktop-p-24 {
    padding: 24px !important;
  }
  .desktop-pt-24 {
    padding-top: 24px !important;
  }
  .desktop-pr-24 {
    padding-right: 24px !important;
  }
  .desktop-pb-24 {
    padding-bottom: 24px !important;
  }
  .desktop-pl-24 {
    padding-left: 24px !important;
  }
  .desktop-px-24 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .desktop-py-24 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .desktop-p-32 {
    padding: 32px !important;
  }
  .desktop-pt-32 {
    padding-top: 32px !important;
  }
  .desktop-pr-32 {
    padding-right: 32px !important;
  }
  .desktop-pb-32 {
    padding-bottom: 32px !important;
  }
  .desktop-pl-32 {
    padding-left: 32px !important;
  }
  .desktop-px-32 {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .desktop-py-32 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .desktop-p-36 {
    padding: 36px !important;
  }
  .desktop-pt-36 {
    padding-top: 36px !important;
  }
  .desktop-pr-36 {
    padding-right: 36px !important;
  }
  .desktop-pb-36 {
    padding-bottom: 36px !important;
  }
  .desktop-pl-36 {
    padding-left: 36px !important;
  }
  .desktop-px-36 {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }
  .desktop-py-36 {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  .desktop-p-40 {
    padding: 40px !important;
  }
  .desktop-pt-40 {
    padding-top: 40px !important;
  }
  .desktop-pr-40 {
    padding-right: 40px !important;
  }
  .desktop-pb-40 {
    padding-bottom: 40px !important;
  }
  .desktop-pl-40 {
    padding-left: 40px !important;
  }
  .desktop-px-40 {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .desktop-py-40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .desktop-p-48 {
    padding: 48px !important;
  }
  .desktop-pt-48 {
    padding-top: 48px !important;
  }
  .desktop-pr-48 {
    padding-right: 48px !important;
  }
  .desktop-pb-48 {
    padding-bottom: 48px !important;
  }
  .desktop-pl-48 {
    padding-left: 48px !important;
  }
  .desktop-px-48 {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  .desktop-py-48 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .desktop-p-60 {
    padding: 60px !important;
  }
  .desktop-pt-60 {
    padding-top: 60px !important;
  }
  .desktop-pr-60 {
    padding-right: 60px !important;
  }
  .desktop-pb-60 {
    padding-bottom: 60px !important;
  }
  .desktop-pl-60 {
    padding-left: 60px !important;
  }
  .desktop-px-60 {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  .desktop-py-60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .desktop-p-64 {
    padding: 64px !important;
  }
  .desktop-pt-64 {
    padding-top: 64px !important;
  }
  .desktop-pr-64 {
    padding-right: 64px !important;
  }
  .desktop-pb-64 {
    padding-bottom: 64px !important;
  }
  .desktop-pl-64 {
    padding-left: 64px !important;
  }
  .desktop-px-64 {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
  .desktop-py-64 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .desktop-p-80 {
    padding: 80px !important;
  }
  .desktop-pt-80 {
    padding-top: 80px !important;
  }
  .desktop-pr-80 {
    padding-right: 80px !important;
  }
  .desktop-pb-80 {
    padding-bottom: 80px !important;
  }
  .desktop-pl-80 {
    padding-left: 80px !important;
  }
  .desktop-px-80 {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
  .desktop-py-80 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  .desktop-p-96 {
    padding: 96px !important;
  }
  .desktop-pt-96 {
    padding-top: 96px !important;
  }
  .desktop-pr-96 {
    padding-right: 96px !important;
  }
  .desktop-pb-96 {
    padding-bottom: 96px !important;
  }
  .desktop-pl-96 {
    padding-left: 96px !important;
  }
  .desktop-px-96 {
    padding-left: 96px !important;
    padding-right: 96px !important;
  }
  .desktop-py-96 {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
  }
  .desktop-p-120 {
    padding: 120px !important;
  }
  .desktop-pt-120 {
    padding-top: 120px !important;
  }
  .desktop-pr-120 {
    padding-right: 120px !important;
  }
  .desktop-pb-120 {
    padding-bottom: 120px !important;
  }
  .desktop-pl-120 {
    padding-left: 120px !important;
  }
  .desktop-px-120 {
    padding-left: 120px !important;
    padding-right: 120px !important;
  }
  .desktop-py-120 {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
  }
  .desktop-p-144 {
    padding: 144px !important;
  }
  .desktop-pt-144 {
    padding-top: 144px !important;
  }
  .desktop-pr-144 {
    padding-right: 144px !important;
  }
  .desktop-pb-144 {
    padding-bottom: 144px !important;
  }
  .desktop-pl-144 {
    padding-left: 144px !important;
  }
  .desktop-px-144 {
    padding-left: 144px !important;
    padding-right: 144px !important;
  }
  .desktop-py-144 {
    padding-top: 144px !important;
    padding-bottom: 144px !important;
  }
  .desktop-p-160 {
    padding: 160px !important;
  }
  .desktop-pt-160 {
    padding-top: 160px !important;
  }
  .desktop-pr-160 {
    padding-right: 160px !important;
  }
  .desktop-pb-160 {
    padding-bottom: 160px !important;
  }
  .desktop-pl-160 {
    padding-left: 160px !important;
  }
  .desktop-px-160 {
    padding-left: 160px !important;
    padding-right: 160px !important;
  }
  .desktop-py-160 {
    padding-top: 160px !important;
    padding-bottom: 160px !important;
  }
  .desktop-p-auto {
    padding: auto !important;
  }
  .desktop-pt-auto {
    padding-top: auto !important;
  }
  .desktop-pr-auto {
    padding-right: auto !important;
  }
  .desktop-pb-auto {
    padding-bottom: auto !important;
  }
  .desktop-pl-auto {
    padding-left: auto !important;
  }
  .desktop-px-auto {
    padding-left: auto !important;
    padding-right: auto !important;
  }
  .desktop-py-auto {
    padding-top: auto !important;
    padding-bottom: auto !important;
  }
}
.gap-0 {
  gap: 0px !important;
}

.gap-4 {
  gap: 4px !important;
}

.gap-6 {
  gap: 6px !important;
}

.gap-8 {
  gap: 8px !important;
}

.gap-12 {
  gap: 12px !important;
}

.gap-16 {
  gap: 16px !important;
}

.gap-24 {
  gap: 24px !important;
}

.font-mono {
  font-family: "Relative Mono";
}

/* Quick font sizes so you don't rely on headings etc */
.fs-8 {
  font-size: 0.5rem;
}

.fs-12 {
  font-size: 0.75rem;
}

.fs-14 {
  font-size: 0.875rem;
}

.fs-16 {
  font-size: 1rem;
}

.fs-18 {
  font-size: 1.125rem;
}

.fs-20 {
  font-size: 1.25rem;
}

.fs-24 {
  font-size: 1.5rem;
}

.fs-28 {
  font-size: 1.75rem;
}

.fs-32 {
  font-size: 2rem;
}

.fs-36 {
  font-size: 2.25rem;
}

.fs-40 {
  font-size: 2.5rem;
}

.fs-48 {
  font-size: 3rem;
}

.fs-60 {
  font-size: 3.75rem;
}

.fs-64 {
  font-size: 4rem;
}

.fs-80 {
  font-size: 5rem;
}

@media screen and (max-width: 767px) {
  .mobile-fs-8 {
    font-size: 0.5rem;
  }
  .mobile-fs-12 {
    font-size: 0.75rem;
  }
  .mobile-fs-14 {
    font-size: 0.875rem;
  }
  .mobile-fs-16 {
    font-size: 1rem;
  }
  .mobile-fs-18 {
    font-size: 1.125rem;
  }
  .mobile-fs-20 {
    font-size: 1.25rem;
  }
  .mobile-fs-24 {
    font-size: 1.5rem;
  }
  .mobile-fs-28 {
    font-size: 1.75rem;
  }
  .mobile-fs-32 {
    font-size: 2rem;
  }
  .mobile-fs-36 {
    font-size: 2.25rem;
  }
  .mobile-fs-40 {
    font-size: 2.5rem;
  }
  .mobile-fs-48 {
    font-size: 3rem;
  }
  .mobile-fs-60 {
    font-size: 3.75rem;
  }
  .mobile-fs-64 {
    font-size: 4rem;
  }
  .mobile-fs-80 {
    font-size: 5rem;
  }
}
@media screen and (min-width: 768px) {
  .tablet-fs-8 {
    font-size: 0.5rem;
  }
  .tablet-fs-12 {
    font-size: 0.75rem;
  }
  .tablet-fs-14 {
    font-size: 0.875rem;
  }
  .tablet-fs-16 {
    font-size: 1rem;
  }
  .tablet-fs-18 {
    font-size: 1.125rem;
  }
  .tablet-fs-20 {
    font-size: 1.25rem;
  }
  .tablet-fs-24 {
    font-size: 1.5rem;
  }
  .tablet-fs-28 {
    font-size: 1.75rem;
  }
  .tablet-fs-32 {
    font-size: 2rem;
  }
  .tablet-fs-36 {
    font-size: 2.25rem;
  }
  .tablet-fs-40 {
    font-size: 2.5rem;
  }
  .tablet-fs-48 {
    font-size: 3rem;
  }
  .tablet-fs-60 {
    font-size: 3.75rem;
  }
  .tablet-fs-64 {
    font-size: 4rem;
  }
  .tablet-fs-80 {
    font-size: 5rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .tablet-only-fs-8 {
    font-size: 0.5rem;
  }
  .tablet-only-fs-12 {
    font-size: 0.75rem;
  }
  .tablet-only-fs-14 {
    font-size: 0.875rem;
  }
  .tablet-only-fs-16 {
    font-size: 1rem;
  }
  .tablet-only-fs-18 {
    font-size: 1.125rem;
  }
  .tablet-only-fs-20 {
    font-size: 1.25rem;
  }
  .tablet-only-fs-24 {
    font-size: 1.5rem;
  }
  .tablet-only-fs-28 {
    font-size: 1.75rem;
  }
  .tablet-only-fs-32 {
    font-size: 2rem;
  }
  .tablet-only-fs-36 {
    font-size: 2.25rem;
  }
  .tablet-only-fs-40 {
    font-size: 2.5rem;
  }
  .tablet-only-fs-48 {
    font-size: 3rem;
  }
  .tablet-only-fs-60 {
    font-size: 3.75rem;
  }
  .tablet-only-fs-64 {
    font-size: 4rem;
  }
  .tablet-only-fs-80 {
    font-size: 5rem;
  }
}
@media screen and (max-width: 1023px) {
  .touch-fs-8 {
    font-size: 0.5rem;
  }
  .touch-fs-12 {
    font-size: 0.75rem;
  }
  .touch-fs-14 {
    font-size: 0.875rem;
  }
  .touch-fs-16 {
    font-size: 1rem;
  }
  .touch-fs-18 {
    font-size: 1.125rem;
  }
  .touch-fs-20 {
    font-size: 1.25rem;
  }
  .touch-fs-24 {
    font-size: 1.5rem;
  }
  .touch-fs-28 {
    font-size: 1.75rem;
  }
  .touch-fs-32 {
    font-size: 2rem;
  }
  .touch-fs-36 {
    font-size: 2.25rem;
  }
  .touch-fs-40 {
    font-size: 2.5rem;
  }
  .touch-fs-48 {
    font-size: 3rem;
  }
  .touch-fs-60 {
    font-size: 3.75rem;
  }
  .touch-fs-64 {
    font-size: 4rem;
  }
  .touch-fs-80 {
    font-size: 5rem;
  }
}
@media screen and (min-width: 1024px) {
  .desktop-fs-8 {
    font-size: 0.5rem;
  }
  .desktop-fs-12 {
    font-size: 0.75rem;
  }
  .desktop-fs-14 {
    font-size: 0.875rem;
  }
  .desktop-fs-16 {
    font-size: 1rem;
  }
  .desktop-fs-18 {
    font-size: 1.125rem;
  }
  .desktop-fs-20 {
    font-size: 1.25rem;
  }
  .desktop-fs-24 {
    font-size: 1.5rem;
  }
  .desktop-fs-28 {
    font-size: 1.75rem;
  }
  .desktop-fs-32 {
    font-size: 2rem;
  }
  .desktop-fs-36 {
    font-size: 2.25rem;
  }
  .desktop-fs-40 {
    font-size: 2.5rem;
  }
  .desktop-fs-48 {
    font-size: 3rem;
  }
  .desktop-fs-60 {
    font-size: 3.75rem;
  }
  .desktop-fs-64 {
    font-size: 4rem;
  }
  .desktop-fs-80 {
    font-size: 5rem;
  }
}
.fw-normal {
  font-weight: 400 !important;
}

.fw-medium {
  font-weight: 500 !important;
}

.fw-bold {
  font-weight: 700 !important;
}

.lh-1 {
  line-height: 1;
}

.lh-1-25 {
  line-height: 1.25;
}

.lh-1-5 {
  line-height: 1.5;
}

.lh-2 {
  line-height: 2;
}

/**
 * Navigation components
 *
 * 1. Accounts menu
 *
 */
/* ==========================================================================
1. Accounts menu
========================================================================== */
.accounts-menu {
  width: 286px;
  top: 48px;
  left: 24px;
  position: absolute;
  z-index: 1;
}
.accounts-menu:hover:before {
  opacity: 1;
}
.accounts-menu:before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(255, 90, 0, 0.2);
  filter: blur(100px);
  opacity: 0;
  transition: opacity 0.25s;
}
@media screen and (max-width: 1287px) {
  .accounts-menu {
    position: relative;
    top: auto;
    left: auto;
    margin-left: 24px;
    width: calc(100% - 48px);
    margin-top: 40px;
  }
  .accounts-menu .dropdown-menu {
    position: relative;
    margin-top: 40px;
  }
  .accounts-menu .dropdown-content {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    white-space: nowrap;
    padding-left: 4px !important;
  }
  .accounts-menu .dropdown-content .dropdown-line {
    width: auto !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
  .accounts-menu .dropdown-content p.dropdown-line:nth-of-type(1) {
    display: none !important;
  }
  .accounts-menu .dropdown-content hr {
    display: none !important;
  }
}
@media screen and (min-width: 1288px) {
  .accounts-menu {
    left: 50%;
    margin-left: -632px;
  }
}
.accounts-menu .dropdown-menu {
  width: 100%;
  position: relative;
  overflow: visible;
  margin-top: auto;
}
.accounts-menu .dropdown-menu .dropdown-line.active {
  background-color: rgba(215, 215, 215, 0.4980392157);
}

/**
* Cards
*
* Card for holding content
*
* 1. Minimal Card
*
* 2. Minimal Card w/ Titles
*
*/
@media screen and (max-width: 767px) {
  .card-minimal {
    width: 100%;
  }
}

.card-minimal-title {
  padding-top: 0;
}
.card-minimal-title h2 {
  display: flex;
  align-items: center;
  padding: 24px 0;
  min-height: 64px;
  position: relative;
  z-index: 0;
}
.card-minimal-title h2:first-of-type:before {
  border-radius: 16px 16px 0 0;
}
.card-minimal-title h2:before {
  content: "";
  position: absolute;
  left: -24px;
  top: 0;
  width: calc(100% + 48px);
  height: 100%;
  background-color: #F7F7F7;
  z-index: -1;
}

.card-minimal-borders .h-1:nth-of-type(1) {
  display: none;
}

/**
 *
 * Layouts
 *
 * For use everywhere - saves you adding margin, widths to components objects
 *
 * 1. Wrappers
 *
 * 2. Columns
 *
 * 3. Margins
 *
 * 4. Padding
 *
 * 5. Flex
 *
 * 6. Position
 *
 * 7. Text
 *
 * 8. Fonts
 *
 * 9. Grid
 *
 * 10. Background
 *
 * 11. Overlay
 *
 * 12. Borders
 *
 */
/* ==========================================================================
1. Wrappers
========================================================================== */
.wrapper {
  margin: auto 220px;
}

.container-fluid {
  margin-bottom: 80px;
}
@media screen and (max-width: 1023px) {
  .container-fluid {
    margin-left: 24px;
    margin-right: 24px;
  }
}

/* ==========================================================================
   2. Columns
   ========================================================================== */
/* ==========================================================================
   3. Margins
   ========================================================================== */
/* ==========================================================================
   7. Padding
   ========================================================================== */
/* ==========================================================================
   5. Flex
   ========================================================================== */
.dashboard-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

/* ==========================================================================
   6. Position
   ========================================================================== */
/* ==========================================================================
7. Text
========================================================================== */
/* ==========================================================================
8. Fonts
========================================================================== */
/* ==========================================================================
9. Grid
========================================================================== */
/* ==========================================================================
10. Background
========================================================================== */
/* ==========================================================================
11. Overflow
========================================================================== */
/* ==========================================================================
12. Borders
========================================================================== */
/* ==========================================================================
13. Block
========================================================================== */
/* ==========================================================================
14. Table
========================================================================== */
/* ==========================================================================
15. Float
========================================================================== */
/* ==========================================================================
16. Visibility
========================================================================== */
/* ==========================================================================
17. Box Shadow
========================================================================== */
/* ==========================================================================
18. Validation
========================================================================== */
/**
 * Sign In / Sign Up
 *
 *
 *
 * 1. Logo
 *
 * 1. Sign In / Sign Up Animation
 *
 */
.login .login-form {
  width: 396px;
}
@media screen and (max-width: 443px) {
  .login .login-form {
    margin-left: 24px;
    margin-right: 24px;
    width: 100%;
  }
}
.login .login-form .login-form-header__title {
  flex-grow: 1;
}

/**
 * A reserved place for nasty CSS hacks.
 *
 * If you need to add a quick fix for a live bug, constrained by time or something else. Add it here.
 *
 * This keeps the ‘main’ codebase clean and ensures these hacks don’t go unnoticed and unresolved.
 *
 */
body {
  background-color: #F7F7F7;
}

header.header .header-container .header-left.justify-content-center .header-logo {
  margin-right: 0;
}
header.header .header-container .header-left.justify-content-center .header-logo a {
  display: block;
}

.l-admin-alert-sticky {
  width: 50%;
  left: 25%;
}
@media screen and (max-width: 767px) {
  .l-admin-alert-sticky {
    width: 100% !important;
    left: 0;
  }
}

.input-error {
  color: #962224;
}

.h-1000 {
  height: 1000%;
}

.w-49 {
  width: 49%;
}

.mw-495 {
  max-width: 495px;
}

.h-1 {
  height: 1px;
}

.mh-160 {
  min-height: 160px;
}

.field_with_errors {
  width: 100%;
}

.control .form-validation-error {
  display: block;
  font-size: 14px;
  margin-top: 8px;
}

@keyframes a-slide-in-up {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.a-slide-in-up {
  animation: a-slide-in-up 0.5s;
}

@keyframes a-slide-out-down {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
  }
}
.a-slide-out-down {
  animation: a-slide-in-up 0.5s, a-slide-out-down 0.5s 3s forwards;
}

/* =========
  Password Strength Meter
  ========= */
.password-strength-meter .progress-indicator {
  width: 100%;
  height: 2px;
  position: relative;
  background: rgba(215, 215, 215, 0.4980392157);
}
.password-strength-meter .progress-indicator progress.progress:indeterminate {
  animation: unset;
  background-color: unset;
}
.password-strength-meter .progress-indicator progress.progress::-moz-progress-bar {
  animation: unset;
  background-color: unset;
}
.password-strength-meter .progress-indicator progress.progress.progress-indicator__fill {
  position: absolute;
  transition: width 0.5s ease-in-out;
}
.password-strength-meter .progress-indicator progress.progress.progress-indicator__fill--green:indeterminate {
  background-color: #00B87E;
}
.password-strength-meter .progress-indicator progress.progress.progress-indicator__fill--yellow:indeterminate {
  background-color: #E3A93D;
}
.password-strength-meter .progress-indicator progress.progress.progress-indicator__fill--red:indeterminate {
  background-color: #E34A4C;
}

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