/* ==========================================================================
X. Typography
========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&family=IBM+Plex+Sans:wght@500&display=swap");
/**
* Animations
*
* Keyframes from animate.css
*
* Inline the animation name with the CSS
*
* 1. Base - Use for inline HTML animations
*
* 2. a-fade-in
*
* 3. a-fade-in-up
*
* 4. a-slide-in-right
*
* 5. a-zoom-in
*
* 6. a-slide-in-up
*
* 7. a-slide-out-down
*
* 8. a-slight-fade-in-up
*
* 9. a-fade-in-up-20
*
* 10. scale-in
*
*/
/* ==========================================================================
  1. Base
  ========================================================================== */
html:not([data-turbo-preview]) .animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated--half {
  animation-duration: 0.5s;
}

/* ==========================================================================
   2. a-fade-in
   ========================================================================== */
@keyframes a-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* ==========================================================================
   3. a-fade-in-up
   ========================================================================== */
@keyframes a-fade-in-up {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* ==========================================================================
   4. a-slide-in-right
   ========================================================================== */
@keyframes a-slide-in-right {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.a-slide-in-right-05 {
  animation: a-slide-in-right 0.5s;
}

/* ==========================================================================
4. a-slide-in-right-320
========================================================================== */
@keyframes a-slide-in-right-320 {
  from {
    transform: translateX(-320px);
    visibility: visible;
  }
  to {
    transform: translateX(0);
  }
}
/* ==========================================================================
4. a-slide-in-right-360
========================================================================== */
@keyframes a-slide-in-right-360 {
  from {
    transform: translateX(360px);
    visibility: visible;
  }
  to {
    transform: translateX(0);
  }
}
/* ==========================================================================
   5. a-zoom-in
   ========================================================================== */
@keyframes a-zoom-in {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
/* ==========================================================================
   6. a-slide-in-up
   ========================================================================== */
@keyframes a-slide-in-up {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
  100% {
    display: none;
  }
}
.a-slide-in-up {
  animation-name: a-slide-in-up;
}

/* ==========================================================================
   7q. a-slide-out-down
   ========================================================================== */
@keyframes a-slide-out-down {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
  }
}
.a-slide-out-down {
  animation-name: a-slide-out-down;
}

/* ==========================================================================
   7b. a-slide-in-down
   ========================================================================== */
@keyframes a-slide-in-down {
  from {
    transform: translateY(-1000px);
  }
  to {
    transform: translateY(0);
  }
}
.a-slide-in-down {
  animation-name: a-slide-in-down;
}

/* ==========================================================================
   8. a-slight-fade-in-up
   ========================================================================== */
@keyframes a-slight-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ==========================================================================
9. a-fade-in-up--10
========================================================================== */
@keyframes a-fade-in-up--10 {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.a-fade-in-up--10 {
  animation: a-fade-in-up-20 1s;
}

/* ==========================================================================
9. a-fade-in-up-20
========================================================================== */
@keyframes a-fade-in-up-20 {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
article.c-written-tutorial header {
  animation: a-fade-in-up-20 2s;
}

.a-fade-in-up-20 {
  animation: a-fade-in-up-20 2s;
}

/* ==========================================================================
9. a-fade-in-down-20
========================================================================== */
@keyframes a-fade-in-down-20 {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.a-fade-in-down-20 {
  animation: a-fade-in-down-20 2s;
}

/* ==========================================================================
9. a-fade-in-down-80
========================================================================== */
@keyframes a-fade-in-down-80 {
  from {
    opacity: 0;
    transform: translateY(-80px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.a-fade-in-down-80 {
  animation: a-fade-in-down-80 2s;
}

/* ==========================================================================
9. a-scale-in
========================================================================== */
@keyframes a-scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.c-video-player__paywall .c-video-player__paywall-wrapper {
  animation: a-scale-in 1.5s;
}

/* ==========================================================================
10. a-scale-in-plain
========================================================================== */
@keyframes a-scale-in-plain {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}
.c-video-player__paywall .c-video-player__paywall-wrapper {
  animation: a-scale-in-plain 1.5s;
}

/* ==========================================================================
11a. a-scale-in
========================================================================== */
@keyframes a-scale-in-small {
  from {
    opacity: 0;
    transform: scale(0.99);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.c-empty-state, .c-search__loading, .c-search__no-results, html:not([data-turbo-preview]) .c-tutorial-item {
  animation: a-scale-in-small 0.75s;
}

.a-scale-in-small {
  animation: a-scale-in-small 0.75s;
}

/* ==========================================================================
11b. a-scale-in--large
========================================================================== */
@keyframes a-scale-in-large {
  from {
    opacity: 0;
    transform: scale(0.1);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.a-scale-in-large {
  animation: a-scale-in-large 0.75s;
}

/* ==========================================================================
12. File rotate 30
========================================================================== */
@keyframes a-file-rotate {
  0% {
    transform: translateX(0) translateY(0);
  }
  25% {
    transform: translateX(30px);
  }
  50% {
    transform: translateX(30px) translateY(30px);
  }
  75% {
    transform: translateX(0px) translateY(30px);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}
.c-search__loading .c-search__loading-animate img {
  animation: a-file-rotate 3s infinite;
}

.a-file-rotate {
  animation: a-file-rotate 3s infinite;
}

/* ==========================================================================
12. File rotate 5
========================================================================== */
@keyframes a-file-rotate--5 {
  0% {
    transform: translateX(0) translateY(0);
  }
  25% {
    transform: translateX(5px);
  }
  50% {
    transform: translateX(5px) translateY(5px);
  }
  75% {
    transform: translateX(0px) translateY(5px);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}
.a-file-rotate--5 {
  animation: a-file-rotate--5 3s infinite;
}

/* ==========================================================================
13. a-fade-out
========================================================================== */
@keyframes a-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* ==========================================================================
14. pulse
========================================================================== */
@keyframes a-pulse {
  0% {
    background-color: rgba(33, 33, 33, 0.75);
  }
  50% {
    background-color: rgb(21, 132, 67);
  }
  100% {
    background-color: rgba(33, 33, 33, 0.75);
  }
}
.a-pulse {
  animation: a-pulse 3s infinite;
}

/* ==========================================================================
14. a-background-gradient
========================================================================== */
@keyframes a-background-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/**
 * This file contains all application-wide Sass variables.
 *
 * 1. Fonts
 *
 * 2a. Colors
 *
 * 2b. Highlighter Colors
 *
 * 3. Elements
 */
/**
 * This file contains the font-face definitions for the fonts used across the site
 *
 * It was generated using http://google-webfonts-helper.herokuapp.com/fonts
 *
 * Remember to include latin-ext, primarily for names.
 *
 * 1. Bitter
 * 2. IBM Plex Sans
 * 3. IBM Plex Serif
 */
/* NOTE
 *
 * Creating these fonts (Bitter) was somewhat challenging, because they were updated in
 * Google Fonts with different spacing and weight. It was then very hard to find the
 * original font with the appropriate character set.
 * This directory contains the OTF files that we need.
 * You can use https://everythingfonts.com/subsetter to extract the appropriate subset
 * (Latin Extended) and then https://kombu.kanejaku.org to create the WOFF and WOFF2 versions
 * Current settings on the subset generator:
 *
 * - Basic Latin
 * - Latin-1 Supplement
 * - Advanced Punctuation
 * - Uppercase
 * - Lowercase
 * - Numerals
 * - Basic Punctuation
 * - Currency Symbols
 * - Latin Extended-A
 * - Latin Extended-B
 */
/* ==========================================================================
   1. Bitter
   ========================================================================== */
/* bitter-regular - latin-ext_latin */
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 400;
  src: url(/assets/bitter-1.300-latin_ext-regular-ea79c0f752f7656ce3694dca8312fcb969f83cbe92ca5298c5920ccffb126c5d.woff2) format("woff2"), url(/assets/bitter-1.300-latin_ext-regular-eecfd6c3af651231104ba7ae58079c215e1d4c00b80b2ff0e95ae0cbec63452c.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* bitter-italic - latin-ext_latin */
@font-face {
  font-family: "Bitter";
  font-style: italic;
  font-weight: 400;
  src: url(/assets/bitter-1.002-latin_ext-italic-f4a1b872a93d98cd9f7865f20340e22e936f3634fb142e2372b4598c98def35a.woff2) format("woff2"), url(/assets/bitter-1.002-latin_ext-italic-a6485dae55bfcf03d80c0b42c15a8555767d700b3be2db1a24bcbff003d2c606.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* bitter-700 - latin-ext_latin */
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 700;
  src: url(/assets/bitter-2.110-latin_ext-700-041b7c53b2f3ed8e2378eaef2841cfad596a7cf6af87bd91f96c9c3b26eec206.woff2) format("woff2"), url(/assets/bitter-2.110-latin_ext-700-57857445d4419a791376b73c9bdb14606d59d2aa09a947120d1b6a1e58965e42.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ==========================================================================
   2. IBM Plex Sans
   ========================================================================== */
/* ibm-plex-sans-regular - latin-ext_latin */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  src: url(/assets/ibm-plex-sans-v3-latin-ext_latin-regular-4126890a77928150a6f3be017f23c93df16f56e6940a72f231823ba29d2ee998.woff2) format("woff2"), url(/assets/ibm-plex-sans-v3-latin-ext_latin-regular-3213dca28efc701a797f1a261a9377b0c530a9ae3cfb72b187d1194f3bd196d3.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ibm-plex-sans-500 - latin-ext_latin */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  src: url(/assets/ibm-plex-sans-v3-latin-ext_latin-500-04aba1eb9b084332715891b2a764459df24188e66731279bad286bbe1447e5e8.woff2) format("woff2"), url(/assets/ibm-plex-sans-v3-latin-ext_latin-500-2827cf78c931acdac08d21fb21e3c1531fda43e342b49055f9a312cf336f366c.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ibm-plex-sans-700 - latin-ext_latin */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  src: url(/assets/ibm-plex-sans-v3-latin-ext_latin-700-946ed95688a6677fb113b84ac50ef140b42971e05e4da335a3ead116a7c9886b.woff2) format("woff2"), url(/assets/ibm-plex-sans-v3-latin-ext_latin-700-7dbcb16e805e3c4e19b6afc0fbe96a730c7229f129c00e1b239eda58b12f6063.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ==========================================================================
   3. IBM Plex Serif
   ========================================================================== */
/* ibm-plex-serif-regular - latin-ext_latin */
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 400;
  src: url(/assets/ibm-plex-serif-v4-latin-ext_latin-regular-e4f826dc262e20e2114e3637d5cab104d4851dee74421c968a6e29d6be2d8b0b.woff2) format("woff2"), url(/assets/ibm-plex-serif-v4-latin-ext_latin-regular-98933eb8c158bbfc91428e8e37644e6f906422073f220313353a4ae476c3bbfd.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ibm-plex-serif-500 - latin-ext_latin */
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 500;
  src: url(/assets/ibm-plex-serif-v4-latin-ext_latin-500-dcab0f62c8194ccb39b97113223f99f294112e0d173b18918c31f3494c203456.woff2) format("woff2"), url(/assets/ibm-plex-serif-v4-latin-ext_latin-500-ae2864b567a0cfaee3af57d9a8a800a374db2a8aee962b54bbcbf83d1c90fa15.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ibm-plex-serif-700 - latin-ext_latin */
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 700;
  src: url(/assets/ibm-plex-serif-v4-latin-ext_latin-700-ec4d87dbc9136c02618bd6878955a63e40207541c72e5109137d56e28ea65b3f.woff2) format("woff2"), url(/assets/ibm-plex-serif-v4-latin-ext_latin-700-cf316807d947f5b6ef4492a9ce6ec4a2f348ec1acf64a481cd6f0fbecb846ad0.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ==========================================================================
   4. IBM Plex Mono
   ========================================================================== */
/* ibm-plex-mono-medium */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  src: url(/assets/ibm-plex-mono-v1-500-ba9db195c954509bda2236e0303e51b261b85aef320cb28134ed97155de85914.woff2) format("woff2"), url(/assets/ibm-plex-mono-v1-500-37d084bbe45275af60e08db241605f8a7949a8ebc76074954fd9b02b72aa4857.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ==========================================================================
   1. Fonts
   ========================================================================== */
/* ==========================================================================
   2a. Colors
   ========================================================================== */
/* Blacks */
/* Greys */
/* Greens */
/* Blues */
/* Reds */
/* Purples */
/* Teals */
/* Yellows */
/* Brands */
/* Gradients */
/* ==========================================================================
   2b. Highlighter Colors
   ========================================================================== */
/* ==========================================================================
   3. Elements
   ========================================================================== */
/**
 * Consult bourbon.io for a comprehensive list of available mixins before adding one here
 *
 * 1. Card - Used for nearly every container as a background
 *
 * 2. Breakpoints - Powerful mixin with five presets for common screen sizes
 *
 * 3. Position Absolute - A full width/height pseudo element fill
 *
 * 4. Border Hover
 *
 * 5. Mobile scroll - Make overflow scroll springy on mobile
 *
 */
/* ==========================================================================
  1. Card
  ========================================================================== */
/* ==========================================================================
 2. Breakpoints
 ========================================================================== */
/* ==========================================================================
   3. Pseudo element absolute
   ========================================================================== */
/* ==========================================================================
  4. Border Hover
  ========================================================================== */
/* ==========================================================================
5. Mobile scroll
========================================================================== */
/* ==========================================================================
6. Hide Scrollbar
========================================================================== */
/* ==========================================================================
   Base
   ========================================================================== */
/* ==========================================================================
   Colors
   ========================================================================== */
.o-button {
  display: inline-flex;
  align-items: center;
  position: relative;
  height: 46px;
  line-height: 46px;
  padding: 0 15px;
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: 0.5625rem;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.5s;
  white-space: nowrap;
}

.o-button--green {
  display: inline-flex;
  align-items: center;
  position: relative;
  height: 46px;
  line-height: 46px;
  padding: 0 15px;
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: 0.5625rem;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.5s;
  white-space: nowrap;
  background: #158443;
}
.o-button--green:hover {
  background: rgb(8.8117647059%, 55.3882352941%, 28.1137254902%);
}

.o-button--orange {
  display: inline-flex;
  align-items: center;
  position: relative;
  height: 46px;
  line-height: 46px;
  padding: 0 15px;
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: 0.5625rem;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.5s;
  white-space: nowrap;
  background: #FD7401;
}
.o-button--orange:hover {
  background: rgb(99.6166126293%, 47.0925428439%, 3.0029952138%);
}

.o-button--dark {
  display: inline-flex;
  align-items: center;
  position: relative;
  height: 46px;
  line-height: 46px;
  padding: 0 15px;
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: 0.5625rem;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.5s;
  white-space: nowrap;
  background: #3B4048;
}
.o-button--dark:hover {
  background: rgb(25.1454273312%, 27.2763957491%, 30.6859452178%);
}

.o-button--black {
  display: inline-flex;
  align-items: center;
  position: relative;
  height: 46px;
  line-height: 46px;
  padding: 0 15px;
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: 0.5625rem;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.5s;
  white-space: nowrap;
  background: #333333;
}

.o-button--white-blue {
  display: inline-flex;
  align-items: center;
  position: relative;
  height: 46px;
  line-height: 46px;
  padding: 0 15px;
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: 0.5625rem;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.5s;
  white-space: nowrap;
  background: #ffffff;
  color: #157CB8;
}

.o-button--white-black-slate {
  display: inline-flex;
  align-items: center;
  position: relative;
  height: 46px;
  line-height: 46px;
  padding: 0 15px;
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: 0.5625rem;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.5s;
  white-space: nowrap;
  background: #ffffff;
  color: #2F4F4F !important;
}

/* ==========================================================================
   3a. Size
   ========================================================================== */
.o-button--nano {
  height: 32px;
  line-height: 32px;
  padding: 0 13px;
  font-size: 0.75rem; /* 12/16 */
}

@media (max-width: 600px) {
  .o-button--shrink {
    height: 36px;
    line-height: 36px;
    padding: 0 12px;
    font-size: 0.875rem;
  }
  .o-button--shrink i {
    display: none;
  }
}

/* ==========================================================================
   4. Icons
   ========================================================================== */
.o-button__svg {
  position: absolute;
  top: 50%;
  left: 50%;
}

.o-button__svg--grey {
  fill: #6E7687;
}

.o-button__svg--medium-grey {
  fill: #CACED2;
}

.o-button__svg--white {
  fill: #ffffff;
}

.o-button__svg--black {
  fill: #333333;
}

.o-button__svg--green {
  fill: #158443;
}

.o-button__svg--highlighter-yellow {
  fill: #FFE242;
}

.o-button__svg--highlighter-orange {
  fill: #FBBC5D;
}

.o-button__svg--highlighter-red {
  fill: #E58A8A;
}

.o-button__svg--highlighter-purple {
  fill: #A0AEF2;
}

.o-button__svg--highlighter-blue {
  fill: #85DDE9;
}

.o-button__svg--highlighter-green {
  fill: #90DE9C;
}

.o-button__icon--white {
  background: #ffffff;
}

.o-button__icon--yellow {
  background: #FCB526;
}

.o-button__icon--black {
  background: #333333;
}

.o-button__icon--green {
  background: #158443;
}

.o-button__icon--blue {
  background: #157CB8;
}

.o-button__icon--black-slate {
  background: #2F4F4F;
}

.o-button__icon--input {
  border: 2px solid #ffffff;
}

.o-button__icon {
  display: inline-block;
  vertical-align: middle;
  height: 24px;
  width: 24px;
  border-radius: 0.5625rem;
  position: relative;
}

.o-button__icon--left {
  display: inline-block;
  vertical-align: middle;
  height: 24px;
  width: 24px;
  border-radius: 0.5625rem;
  position: relative;
  margin-right: 10px;
}

.o-button__icon--right {
  display: inline-block;
  vertical-align: middle;
  height: 24px;
  width: 24px;
  border-radius: 0.5625rem;
  position: relative;
  margin-right: -2px;
  margin-left: 10px;
}

.o-button__icon--right-small {
  display: inline-block;
  vertical-align: middle;
  height: 15px;
  width: 15px;
  position: relative;
  margin-right: -2px;
  margin-left: 6px;
}

/* ==========================================================================
   Single button icons no text
   ========================================================================== */
.o-icon-button {
  display: flex;
  align-items: center;
  width: 36px;
  height: 36px;
  background: #ffffff;
  border-radius: 0.5625rem;
  cursor: pointer;
}
.o-icon-button svg {
  display: block;
  margin: 0 auto;
}

.o-icon-button--small {
  width: 27px;
  height: 27px;
}

.o-icon-button--tiny {
  width: 24px;
  height: 24px;
}

/* ==========================================================================
Text buttons with no background
========================================================================== */
.o-text-button {
  display: inline-flex;
  align-items: center;
  position: relative;
  height: 46px;
  line-height: 46px;
  padding: 0 15px;
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: 0.5625rem;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.5s;
  white-space: nowrap;
  padding-left: 0;
  padding-right: 0;
  height: 24px;
  line-height: 24px;
  border-radius: 0;
}
.o-text-button:hover .o-button__label {
  text-decoration: underline;
}
.o-text-button .o-button__icon--right {
  margin-left: 8px;
  margin-top: 1px;
}

/* ==========================================================================
   7. Video
   ========================================================================== */
.o-button-video {
  width: 96px;
  height: 96px;
  background: #333333;
  border: 6px solid #ffffff;
  border-radius: 21px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -48px 0 0 -48px;
  cursor: pointer;
  color: #ffffff;
}
.o-button-video:hover {
  background: #158443;
}
.o-button-video svg {
  position: absolute;
  width: 38px;
  height: 42px;
  fill: #ffffff;
  top: 50%;
  left: 50%;
  margin-top: -21px;
  margin-left: -17px;
}

.o-button-video-start {
  height: 76px;
  background: #333333;
  border: 6px solid #ffffff;
  border-radius: 12px;
  font-size: 1rem;
  padding: 0 27px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -38px 0 0 -103px;
}
.o-button-video-start:hover {
  background: #158443;
}
.o-button-video-start svg {
  width: 40px;
  height: 30px;
  fill: #ffffff;
  margin-left: -6px;
  margin-right: 6px;
}

.o-alert__close {
  order: 10;
  height: 16px;
  cursor: pointer;
}
.o-alert__close svg {
  width: 16px;
  height: 16px;
  fill: #ffffff;
}

/* ==========================================================================
11. Bookmarks
========================================================================== */
.o-button--bookmark {
  display: inline-flex;
  align-items: center;
  float: right;
  height: 46px;
  line-height: 46px;
  padding: 0 5px;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.5s;
  white-space: nowrap;
}
.o-button--bookmark:focus {
  outline: none;
}

/* ==========================================================================
15. Disclose
========================================================================== */
.o-button-disclose--small {
  display: flex;
  width: 15px;
  height: 9px;
  cursor: pointer;
}
.o-button-disclose--small svg {
  width: 15px;
  height: 9px;
}

.o-button-disclose--rotate svg {
  transform: rotate(180deg);
}

/* ==========================================================================
Custom layouts for buttons
========================================================================== */
/* A hack for buttons that need to wrap their children in a span */
.o-button__wrapper {
  display: flex;
  align-items: center;
}

/* ==========================================================================
Custom layouts for button icons
========================================================================== */
/* Misc */
.l-button__svg-checkmark {
  width: 14px;
  height: 11px;
  margin-top: -5px;
  margin-left: -7px;
}

.l-button__svg-plus {
  width: 12px;
  height: 12px;
  margin-top: -6px;
  margin-left: -6px;
}

.l-button__svg-question {
  width: 13px;
  position: relative;
  left: 3px;
  top: -1px;
}

.l-button__svg-close {
  width: 18px;
  transform: rotate(45deg);
}

.l-button__svg-bookmark-icon {
  width: 20px;
  height: 20px;
  margin-top: -20px;
  margin-left: -10px;
}

/* Arrows */
.l-button__svg-arrow {
  width: 14px;
  height: 14px;
  margin-top: -7px;
  margin-left: -7px;
}

.l-button__nub {
  width: 10px;
  height: 10px;
  margin-top: -6px;
  margin-left: -6px;
  position: relative;
  top: -15.5px;
}

/* Social */
.l-button__svg-speech-bubble {
  width: 22px;
  height: 22px;
  opacity: 0.5;
}

.l-button__svg-22 {
  width: 22px;
  height: 22px;
}

.l-button__svg-arrow-nav {
  transition: 0.25s all;
  width: 12px;
  height: 12px;
  margin-left: 3px;
}

/* ==========================================================================
Base
========================================================================== */
.o-badge {
  background: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 0.6875rem; /* 11/16 */
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #333333;
  padding: 5px 9px;
  box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
  border-radius: 0.5625rem;
  white-space: nowrap;
}

/* ==========================================================================
Tutorial badge
========================================================================== */
.o-badge-tutorial {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 58px;
  height: 58px;
  background: #333333;
  border: 4px solid #ffffff;
  border-radius: 12px;
  font-family: "Bitter", serif;
  font-size: 1.5em; /* 24/16 */
  font-weight: 700;
  color: #ffffff;
  overflow: hidden;
}
.o-badge-tutorial img {
  width: 100%;
  height: 100%;
}

.o-badge-tutorial--checkmark {
  background: #158443;
}
.o-badge-tutorial--checkmark svg {
  width: 18px;
  height: 18px;
  fill: #ffffff;
}

/* ==========================================================================
Product badge
========================================================================== */
.o-badge-product--highlight {
  background: none;
  color: #ffffff;
}

/* ==========================================================================
3. Dots
========================================================================== */
.c-dot-loader .a-dot-loader--1 {
  animation: a-dot-loader 1.5s infinite;
}
.c-dot-loader .a-dot-loader--2 {
  animation: a-dot-loader 1.5s infinite;
  animation-delay: 0.1s;
}
.c-dot-loader .a-dot-loader--3 {
  animation: a-dot-loader 1.5s infinite;
  animation-delay: 0.2s;
}

/* ==========================================================================
   Base
   ========================================================================== */
.o-tag {
  display: inline-block;
  background: #ffffff;
  height: 40px;
  line-height: 36px;
  padding: 0 12px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
  border-radius: 0.5625rem;
  text-decoration: none;
  border: 2px solid #D6E0EF;
  margin-right: 2px;
  margin-bottom: 8px;
  cursor: pointer;
}
.o-tag button {
  cursor: pointer;
  vertical-align: middle;
}
.o-tag button svg {
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  margin-left: 5px;
}

.o-tag--black {
  background: #3B4048;
  border: 2px solid #73859F;
  color: #ffffff;
}

/**
 * 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
========================================================================== */
/* ==========================================================================
1. Base
========================================================================== */
.o-fragment--tooltip, .o-tooltip, [data-tooltip]:before {
  background: #14161E;
  font-size: 0.875rem; /* 14/16 */
  font-weight: 600;
  border-radius: 0.5625rem;
  padding: 9px 18px;
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
  color: #ffffff;
  z-index: 99999;
  width: auto;
  white-space: nowrap;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ==========================================================================
2. Data tooltip
========================================================================== */
[data-tooltip] {
  position: relative;
}

[data-tooltip]:before {
  content: attr(data-tooltip);
}

[data-tooltip]:after {
  position: absolute;
  background: linear-gradient(to right bottom, #333333, #363638, #38393d, #3a3c43, #3b4048);
  top: 22px;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  transform: rotate(45deg);
  border-radius: 3px;
  opacity: 0;
}

[data-tooltip]:hover:before, [data-tooltip]:hover:after {
  visibility: visible;
  opacity: 1;
}

/* ==========================================================================
* 3. HTML tooltip
========================================================================== */
.o-button-tooltip:hover .o-tooltip {
  visibility: visible;
  opacity: 1;
}

.o-tooltip {
  height: 40px;
  line-height: 24px;
}
.o-tooltip:after {
  position: absolute;
  background: linear-gradient(to right bottom, #333333, #363638, #38393d, #3a3c43, #3b4048);
  top: 24px;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  transform: rotate(45deg);
  border-radius: 3px;
  opacity: 1;
  z-index: -1;
}

/* ==========================================================================
5. Note Taking
========================================================================== */
.o-fragment--tooltip {
  min-width: max-content;
}
.o-fragment--tooltip:after {
  position: absolute;
  background: #333333 !important;
  top: 34px !important;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  transform: rotate(45deg);
  border-radius: 3px;
  opacity: 1;
  z-index: -1;
}

/**
 *
 * Layouts
 *
 * LEGACY: moved from application/layouts/layouts.scss (WEB-7677). Only the
 * l-* utility classes that live markup still applies are left here, plus a
 * few that no code in the repo has ever applied (DB- or CMS-authored HTML
 * may still use them).
 *
 * 1. Wrappers
 *
 * 2. Columns
 *
 * 3. Margins
 *
 * 4. Padding
 *
 * 5. Flex
 *
 * 6. Position
 *
 * 7. Text
 *
 * 8. Fonts
 *
 * 9. Grid
 *
 * 10. Background
 *
 * 11. Borders
 *
 * 12. Block
 *
 * 13. Floats
 *
 */
/* ==========================================================================
1. Wrappers
========================================================================== */
.l-block {
  margin: 0 auto;
}
@media (max-width: 768px) {
  .l-block {
    max-width: none;
    padding: 0 20px;
  }
}

.l-block-padding-early {
  margin: 0 auto;
}
@media (max-width: 1280px) {
  .l-block-padding-early {
    max-width: none;
    padding: 0 20px;
  }
}

.l-block-no-padding-mobile {
  margin: 0 auto;
}
@media (max-width: 768px) {
  .l-block-no-padding-mobile {
    padding: 0;
  }
}

@media (max-width: 768px) {
  .l-block-padding-mobile-20 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 1200px) {
  .l-block-padding-1200 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (max-width: 768px) {
  .l-block-padding-mobile-24 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

.l-block-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 30px;
}

.l-height-0 {
  height: 0 !important;
}

.l-height-100 {
  height: 100vh;
}

.l-height-20 {
  height: 20px;
}

.l-height-200 {
  height: 200px;
}

.l-block--170 {
  max-width: 170px;
}

.l-block--224 {
  max-width: 224px;
}

.l-block--275 {
  max-width: 275px;
}

.l-block--card-320 {
  max-width: 320px;
}

.l-block--card-360 {
  max-width: 360px;
}

.l-block--card-420 {
  max-width: 420px;
}

.l-block--card-small {
  max-width: 640px;
}

.l-block--484 {
  max-width: 484px;
}

.l-block--686 {
  max-width: 686px;
}

.l-block--688 {
  max-width: 688px;
}

.l-block--696 {
  max-width: 696px;
}

.l-block--card-medium {
  max-width: 720px;
}

.l-block--806 {
  max-width: 806px;
}

.l-block--906 {
  max-width: 906px;
}

.l-block--912 {
  max-width: 912px;
}

.l-block--920 {
  max-width: 920px;
}

.l-block--968 {
  max-width: 968px;
}

.l-block--1080 {
  max-width: 1080px;
}

.l-block--1152 {
  max-width: 1152px;
}

.l-block--1200 {
  max-width: 1215px;
}

.l-block--1300 {
  max-width: 1300px;
}

.l-block--100 {
  max-width: 100%;
}

.l-block-wide {
  margin: 0;
  max-width: 1500px;
  padding: 0 0 0 30px;
}
@media (min-width: 1440px) {
  .l-block-wide {
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  .l-block-wide {
    max-width: none;
    padding: 0 20px;
  }
}

.l-block-wide-padding {
  padding: 0 30px;
}
@media (max-width: 768px) {
  .l-block-wide-padding {
    padding: 0 20px;
  }
}

/* ==========================================================================
  2. Columns
  ========================================================================== */
.l-full-col {
  width: 100%;
}

.l-half-col {
  width: 50%;
}

/* ==========================================================================
  3. Margins
  ========================================================================== */
.l-margin-auto {
  margin: 0 auto;
}

.l-margin-0 {
  margin-top: 0 !important;
}

@media (max-width: 992px) {
  .l-margin-0-tablet {
    margin-top: 0 !important;
  }
}

.l-margin-all-0 {
  margin: 0 !important;
}

.l-margin-1 {
  margin-top: 1px;
}

.l-margin-2 {
  margin-top: 2px;
}

.l-margin-3 {
  margin-top: 3px;
}

.l-margin-4 {
  margin-top: 4px;
}

.l-margin-6 {
  margin-top: 6px;
}

.l-margin-9 {
  margin-top: 9px;
}

.l-margin-9--force {
  margin-top: 9px !important;
}

.l-margin-10 {
  margin-top: 10px;
}

.l-margin-12 {
  margin-top: 12px;
}

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

.l-margin-15 {
  margin-top: 15px;
}

.l-margin-18 {
  margin-top: 18px;
}

.l-margin-18--i {
  margin-top: 18px !important;
}

.l-margin-20 {
  margin-top: 20px;
}

.l-margin-21 {
  margin-top: 21px;
}

.l-margin-21--force {
  margin-top: 21px !important;
}

.l-margin-24 {
  margin-top: 24px;
}

.l-margin-27 {
  margin-top: 27px;
}

.l-margin-30 {
  margin-top: 30px;
}

.l-margin-30--force {
  margin-top: 30px !important;
}

.l-margin-36 {
  margin-top: 36px;
}

.l-margin-40 {
  margin-top: 40px;
}

.l-margin-42 {
  margin-top: 42px;
}

.l-margin-45 {
  margin-top: 45px;
}

.l-margin-50 {
  margin-top: 50px;
}

.l-margin-60 {
  margin-top: 60px;
}

.l-margin-72 {
  margin-top: 72px;
}

.l-margin-90 {
  margin-top: 90px;
}

.l-margin-120 {
  margin-top: 120px;
}

.l-margin-145 {
  margin-top: 145px;
}

.l-margin-180 {
  margin-top: 180px;
}

.l-margin-240 {
  margin-top: 240px;
}
@media (max-width: 768px) {
  .l-margin-240 {
    margin-top: 180px;
  }
}

.l-margin-left-6 {
  margin-left: 6px;
}

.l-margin-left-9 {
  margin-left: 9px;
}

.l-margin-left-10 {
  margin-left: 10px;
}

.l-margin-left-6 {
  margin-left: 6px;
}

.l-margin-sides-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.l-margin-sides-2 {
  margin-left: 2px;
  margin-right: 2px;
}

.l-margin-sides-3 {
  margin-left: 3px;
  margin-right: 3px;
}

.l-margin-sides-8 {
  margin-left: 8px;
  margin-right: 8px;
}

.l-margin-n-9 {
  margin-top: -9px;
}

.l-margin-n-18 {
  margin-top: -18px;
}

.l-margin-n-20 {
  margin-top: -20px;
}

.l-margin-left-6 {
  margin-left: 6px;
}

.l-margin-left-9 {
  margin-left: 9px;
}

.l-margin-left-15 {
  margin-left: 15px;
}

.l-margin-left-18 {
  margin-left: 18px;
}

.l-margin-left-29 {
  margin-left: 29px;
}

.l-margin-right-0 {
  margin-right: 0 !important;
}

.l-margin-right-3 {
  margin-right: 3px;
}

.l-margin-right-4 {
  margin-right: 4px;
}

.l-margin-right-6 {
  margin-right: 6px;
}

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

.l-margin-right-9 {
  margin-right: 9px !important;
}

.l-margin-right-10 {
  margin-right: 10px !important;
}

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

.l-margin-right-15 {
  margin-right: 15px !important;
}

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

.l-margin-right-18 {
  margin-right: 18px !important;
}

.l-margin-right-21 {
  margin-right: 21px !important;
}

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

.l-margin-right-30 {
  margin-right: 30px !important;
}

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

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

.l-margin-bottom-n-10 {
  margin-bottom: -10px;
}

.l-margin-bottom-n-12 {
  margin-bottom: -12px;
}

.l-margin-bottom-n-18 {
  margin-bottom: -18px;
}

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

.l-margin-bottom-18 {
  margin-bottom: 18px !important;
}

.l-margin-right-n-24 {
  margin-right: -24px;
}

.l-margin-left-n-24 {
  margin-left: -24px;
}

.l-margin-bottom-20 {
  margin-bottom: 20px !important;
}

.l-margin-bottom-27 {
  margin-bottom: 27px !important;
}

.l-margin-bottom-45 {
  margin-bottom: 45px !important;
}

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

/* Responsive margins */
@media (max-width: 768px) {
  .l-margin-mobile-0 {
    margin-top: 0 !important;
  }
}

@media (max-width: 768px) {
  .l-margin-mobile-9 {
    margin-top: 9px;
  }
}

@media (max-width: 768px) {
  .l-margin-mobile-large-12 {
    margin-top: 12px;
  }
}

@media (max-width: 768px) {
  .l-margin-mobile-large-15 {
    margin-top: 15px;
  }
}

@media (max-width: 768px) {
  .l-margin-mobile-large-18 {
    margin-top: 18px;
  }
}

@media (max-width: 768px) {
  .l-margin-left-0--mobile-large {
    margin-left: 0 !important;
  }
}

@media (max-width: 600px) {
  .l-margin-mobile-large-40 {
    margin-top: 40px;
  }
}

@media (max-width: 600px) {
  .l-margin-mobile-18 {
    margin-top: 18px;
  }
}

@media (max-width: 600px) {
  .l-margin-mobile-30 {
    margin-top: 30px;
  }
}

@media (max-width: 768px) {
  .l-margin-mobile-large-30 {
    margin-top: 30px;
  }
}

@media (max-width: 992px) {
  .l-margin-tablet-60 {
    margin-top: 60px;
  }
}

@media (max-width: 992px) {
  .l-margin-tablet-30 {
    margin-top: 30px;
  }
}

@media (max-width: 768px) {
  .l-margin-mobile-large-60 {
    margin-top: 60px;
  }
}

@media (max-width: 768px) {
  .l-margin-mobile-large-90 {
    margin-top: 90px;
  }
}

@media (max-width: 768px) {
  .l-margin-mobile-large-left-20 {
    margin-left: 20px;
  }
}

/* ==========================================================================
   4. Padding
   ========================================================================== */
.l-padding-sides-0 {
  padding: 0 !important;
}

.l-padding-sides-20 {
  padding-left: 20px;
  padding-right: 20px;
}

.l-padding-sides-45 {
  padding-left: 45px;
  padding-right: 45px;
}

.l-padding-9 {
  padding-top: 9px;
}

.l-padding-30 {
  padding-top: 30px;
}

.l-padding-bottom-30 {
  padding-bottom: 30px;
}

.l-padding-bottom-60 {
  padding-bottom: 60px;
}

.l-padding-bottom-120 {
  padding-bottom: 120px;
}

.l-padding-bottom-120--force {
  padding-bottom: 120px !important;
}

.l-padding-all-15 {
  padding: 15px;
}

/* ==========================================================================
  5. Flex
  ========================================================================== */
.l-flex {
  display: flex;
}

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

.l-flex-nowrap-justify {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.l-flex-justify-center {
  display: flex;
  justify-content: center;
}

.l-flex-align-content--center {
  align-content: center;
}

/* ==========================================================================
6. Position
========================================================================== */
.l-relative {
  position: relative;
}

/* ==========================================================================
7. Text
========================================================================== */
.l-text-align-left {
  text-align: left;
}

.l-text-align-left--force {
  text-align: left !important;
}

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

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

/* ==========================================================================
8. Fonts
========================================================================== */
@media (max-width: 768px) {
  .l-font-header--mobile {
    font-size: 1.5em !important;
    line-height: 1.35;
  }
}

@media (max-width: 768px) {
  .l-font-header--mobile-27-1125 {
    font-size: 1.7rem !important;
    line-height: 1.125;
  }
}

.l-font-header ul {
  font-family: "Bitter", serif;
}

.l-font-semibold {
  font-weight: 600;
}

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

.l-line-height-1 {
  line-height: 1;
}

.l-line-height-1125 {
  line-height: 1.125;
}

.l-font-15 {
  font-size: 0.9375rem; /* 15/16 */
}

.l-font-16 {
  font-size: 1rem; /* 15/16 */
}

.l-font-17 {
  font-size: 1.0625rem; /* 24/16 */
}

.l-font-19 {
  font-size: 1.1875rem; /* 19/16 */
}

.l-font-24 {
  font-size: 1.5rem; /* 24/16 */
}

.l-font-27 {
  font-size: 1.6875rem;
}

@media (max-width: 768px) {
  .l-font-15--mobile {
    font-size: 0.9375rem; /* 15/16 */
  }
}

.l-color-grey {
  color: #6E7687 !important;
}

.l-color-grey-regent {
  color: #959DA5;
}

.l-color-grey-cadet {
  color: #ACB6BF;
}

.l-color-grey-chateau {
  color: #A7ADB4;
}

.l-color-white {
  color: #ffffff;
}

.l-color-white--force {
  color: #ffffff !important;
}

.l-color-white-hover:hover {
  color: #ffffff !important;
}

.l-color-black {
  color: #333333 !important;
}

.l-color-green {
  color: #158443;
}

.l-color-red {
  color: #CF3B2B;
}

.l-color-green--force {
  color: #158443 !important;
}

.l-color-neon--red {
  color: transparent !important;
  paint-order: fill stroke markers;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #FED128;
  text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 3vw #FA1C16, 0 0 0.4vw #FED128;
}
@media (max-width: 600px) {
  .l-color-neon--red {
    -webkit-text-stroke-width: 1px;
  }
}

.l-color-neon--blue {
  color: transparent !important;
  paint-order: fill stroke markers;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #28D7FE;
  text-shadow: 0 0 1vw #1041FF, 0 0 3vw #1041FF, 0 0 10vw #1041FF, 0 0 10vw #1041FF, 0 0 0.4vw #8BFDFE;
}
@media (max-width: 600px) {
  .l-color-neon--blue {
    -webkit-text-stroke-width: 1px;
  }
}

/* ==========================================================================
9. Grid
========================================================================== */
.l-grid {
  display: grid;
}

.l-grid-2-fr {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.l-grid-3-auto {
  display: grid;
  grid-template-columns: auto auto auto;
}

.l-grid-5 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important;
}

.l-grid-col-gap-8 {
  grid-column-gap: 8px;
}

.l-grid-col-gap-12 {
  grid-column-gap: 12px;
}

.l-grid-col-gap-20 {
  grid-column-gap: 20px;
}

.l-grid-col-gap-24 {
  grid-column-gap: 24px;
}

.l-grid-col-gap-26 {
  grid-column-gap: 26px;
}

.l-grid-row-gap-20 {
  grid-row-gap: 20px;
}

.l-grid-row-gap-26 {
  grid-row-gap: 26px;
}

.l-grid-row-gap-40 {
  grid-row-gap: 40px;
}

@media (max-width: 1080px) {
  .l-grid-2fr-1080 {
    display: grid;
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 768px) {
  .l-grid-mobile--force {
    display: grid;
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
10. Background
========================================================================== */
.l-background--blue-grey {
  background: #E2E6F7;
}

.l-background--black-slate {
  background: #2F4F4F !important;
}

.l-background--yellow-grandis {
  background: #FDCF74 !important;
}

.l-background--blue {
  background: #157CB8 !important;
}

/* ==========================================================================
11. Borders
========================================================================== */
.l-border-radius {
  border-radius: 0.5625rem;
}

/* ==========================================================================
12. Block
========================================================================== */
.l-display-block--force {
  display: block !important;
}

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

@media (max-width: 768px) {
  .l-block-mobile-large {
    display: block;
  }
}

@media (max-width: 600px) {
  .l-block-mobile {
    display: block;
  }
}

/* ==========================================================================
13. Floats
========================================================================== */
.l-image-float-left {
  float: left;
  margin-right: 30px;
}
.l-image-float-left img {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

.l-image-float-right {
  float: right;
  margin-left: 30px;
}
.l-image-float-right img {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

/**
 * Legacy video overlay layout (moved from application/layouts/videos.scss).
 *
 * Used by the episode-complete overlay and the video paywalls
 * (contents/_player, contents/player/_paywall_*) and the featured
 * in-progress banner (users/_in_progress_featured).
 **/
.l-video-overlay {
  background: linear-gradient(to right bottom, #333333, #363638, #38393d, #3a3c43, #3b4048);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.l-video-overlay h3 {
  font-size: 2.25rem; /* 42/16 */
  text-align: center;
  color: #ffffff;
}

.l-video-overlay--start {
  align-items: flex-start;
}

/**
 * Legacy tutorial collection layout (moved from application/layouts/tutorials.scss).
 *
 * Used by the curated user highlight and category listing sections
 * (curation/_user_highlight, curation/_category_listing).
 **/
/* ==========================================================================
1. Collection - Tutorial group layout
========================================================================== */
.l-tutorial-collection {
  padding-top: 42px;
}
.l-tutorial-collection .l-margin-24 {
  margin-top: 24px !important;
}

.l-block-tutorials {
  margin: 0;
  max-width: 1500px;
}
@media (min-width: 1440px) {
  .l-block-tutorials {
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  .l-block-tutorials {
    max-width: none;
  }
}

/* ==========================================================================
2. Container - Scroll tutorials horizontally
========================================================================== */
.l-tutorial-container {
  margin: 0 auto;
}
@media (max-width: 1280px) {
  .l-tutorial-container {
    padding-right: 0;
  }
}
.l-tutorial-container:hover .o-button__icon {
  opacity: 1;
}
.l-tutorial-container .c-tutorial-item {
  width: 300px;
  min-width: 300px;
}
@media (max-width: 992px) {
  .l-tutorial-container .c-tutorial-item {
    margin-top: 0 !important;
  }
}

.l-tutorial-container--slider {
  position: relative;
}
.l-tutorial-container--slider .c-tutorial-item {
  margin: 0 9px;
}
.l-tutorial-container--slider .o-button__icon--prev {
  left: 10px;
  position: absolute;
  top: 0;
  width: 50px;
  height: 100%;
  cursor: pointer;
  opacity: 0;
  transition: all 0.5s;
}
@media (max-width: 992px) {
  .l-tutorial-container--slider .o-button__icon--prev {
    opacity: 1;
  }
}
.l-tutorial-container--slider .o-button__icon--prev span {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  background: rgba(51, 51, 51, 0.5);
  transition: all 0.5s;
  margin-top: -25px;
  border-radius: 0.5625rem;
}
.l-tutorial-container--slider .o-button__icon--prev span:hover {
  background: rgba(51, 51, 51, 0.9);
}
.l-tutorial-container--slider .o-button__icon--prev svg {
  transform: rotate(180deg);
}
.l-tutorial-container--slider .o-button__icon--next {
  right: 10px;
  position: absolute;
  top: 0;
  width: 50px;
  height: 100%;
  cursor: pointer;
  opacity: 0;
  transition: all 0.5s;
}
@media (max-width: 992px) {
  .l-tutorial-container--slider .o-button__icon--next {
    opacity: 1;
  }
}
.l-tutorial-container--slider .o-button__icon--next span {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  background: rgba(51, 51, 51, 0.5);
  transition: all 0.5s;
  margin-top: -25px;
  border-radius: 0.5625rem;
}
.l-tutorial-container--slider .o-button__icon--next span:hover {
  background: rgba(51, 51, 51, 0.9);
}

/**
 *
 * Books (legacy)
 *
 * Moved from application/layouts/books.scss (WEB-7676). Only the rules that
 * still take effect remain: the chapter text sizes set by the reading
 * experience switcher (body classes from BooksHelper#book_body_classes) and
 * the image sizes Alexandria puts on chapter figures (figure.l-image-NN).
 *
 * 1. Chapter text size
 *
 * 2. Chapter image size
 *
 **/
/* ==========================================================================
1. Chapter text size
========================================================================== */
.l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content {
  font-size: 75%;
}
.l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content h1,
.l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content h2,
.l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content h3,
.l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content h4,
.l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content h5 {
  margin-top: 30px;
}
.l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content p,
.l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content blockquote {
  margin-top: 18px;
}
.l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content blockquote p:first-child {
  margin-top: 0 !important;
}

.l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content {
  font-size: 80%;
}
.l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content h1,
.l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content h2,
.l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content h3,
.l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content h4,
.l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content h5 {
  margin-top: 30px;
}
.l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content p,
.l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content blockquote {
  margin-top: 18px;
}
.l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content blockquote p:first-child {
  margin-top: 0 !important;
}

.l-chapter-text-size-85 .c-book-chapter .c-written-tutorial__content {
  font-size: 85%;
}

.l-chapter-text-size-90 .c-book-chapter .c-written-tutorial__content {
  font-size: 90%;
}

.l-chapter-text-size-100 .c-book-chapter .c-written-tutorial__content {
  font-size: 100%;
}

.l-chapter-text-size-110 .c-book-chapter .c-written-tutorial__content {
  font-size: 110%;
}

.l-chapter-text-size-120 .c-book-chapter .c-written-tutorial__content {
  font-size: 120%;
}

.l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content {
  font-size: 130%;
}
.l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content h1,
.l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content h2,
.l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content h3,
.l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content h4,
.l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content h5 {
  margin-top: 42px;
}
@media (max-width: 768px) {
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content h1,
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content h2,
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content h3,
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content h4,
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content h5 {
    margin-top: 30px !important;
  }
}
.l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content p,
.l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content blockquote {
  margin-top: 30px;
}
@media (max-width: 768px) {
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content ul,
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content ol,
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content p,
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content blockquote {
    margin-top: 24px !important;
  }
}
.l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content blockquote p:first-child {
  margin-top: 0 !important;
}

.l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content {
  font-size: 140%;
}
.l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content h1,
.l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content h2,
.l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content h3,
.l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content h4,
.l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content h5 {
  margin-top: 42px;
}
@media (max-width: 768px) {
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content h1,
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content h2,
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content h3,
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content h4,
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content h5 {
    margin-top: 30px !important;
  }
}
.l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content p,
.l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content blockquote {
  margin-top: 30px;
}
@media (max-width: 768px) {
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content ul,
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content ol,
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content p,
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content blockquote {
    margin-top: 24px !important;
  }
}
.l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content blockquote p:first-child {
  margin-top: 0 !important;
}

/* ==========================================================================
2. Chapter image size
========================================================================== */
.c-book-chapter .l-image-100 img {
  max-width: 100% !important;
}
.c-book-chapter .l-image-90 img {
  max-width: 90% !important;
}
.c-book-chapter .l-image-80 img {
  max-width: 80% !important;
}
.c-book-chapter .l-image-70 img {
  max-width: 70% !important;
}
.c-book-chapter .l-image-60 img {
  max-width: 60% !important;
}
.c-book-chapter .l-image-50 img {
  max-width: 50% !important;
}
.c-book-chapter .l-image-40 img {
  max-width: 40% !important;
}
.c-book-chapter .l-image-30 img {
  max-width: 30% !important;
}
.c-book-chapter .l-image-20 img {
  max-width: 20% !important;
}
.c-book-chapter .l-image-10 img {
  max-width: 10% !important;
}

.o-dropdown-menu {
  animation: a-slight-fade-in-up 0.25s;
}

html {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-display: auto;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.45;
  color: #333333;
  -webkit-backface-visibility: hidden;
  text-shadow: 0 -1px 1px rgba(255, 255, 255, 0.01);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 {
  font-size: 3rem;
  line-height: 1.125;
}

@media (max-width: 600px) {
  h1 {
    font-size: 1.875rem;
  }
}
h2 {
  font-size: 1.875rem;
  line-height: 1.25;
}

h3 {
  font-size: 1.5rem;
  line-height: 1.35;
}

h4 {
  font-size: 1.3125rem;
  line-height: 1.35;
}

.o-dropdown-menu {
  background: #ffffff;
  border-radius: 0.5625rem;
  box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.1);
  padding: 12px 0;
  width: 320px;
  position: absolute;
  z-index: 99999;
  display: none;
}

.o-dropdown-menu:before {
  content: "";
  position: absolute;
  background: #ffffff;
  top: -6px;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-left: -6px;
  transform: rotate(45deg);
  border-radius: 3px;
}

.o-dropdown-menu:after {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 20px;
}

.o-dropdown-menu li {
  display: flex;
  align-items: center;
  height: 54px;
  font-family: "Bitter", serif;
  padding: 0 24px;
}

.o-dropdown-menu li > a,
.o-dropdown-menu li > div > button {
  font-size: 1.0625rem !important;
  margin-left: 0 !important;
  width: 100%;
  color: #333333 !important;
}

.o-dropdown-menu li > a:hover,
.o-dropdown-menu li > div > button:hover {
  color: #158443 !important;
}

.o-dropdown-menu li i {
  min-width: 34px;
  height: 34px;
  margin-right: 15px;
}

.o-dropdown-menu--accessible {
  display: block;
}

.o-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.5625rem;
  min-height: 48px;
  color: #ffffff;
  padding: 14px 15px;
  position: relative;
  font-size: 0.9375em;
  margin-top: 10px;
}

.o-alert a {
  color: #ffffff;
}

@media (max-width: 600px) {
  .o-alert {
    font-size: 0.875rem;
  }
}
.o-alert .o-alert__close {
  order: 10;
  width: 16px;
  height: 16px;
  cursor: pointer;
  position: relative;
}

.o-alert .o-alert__close svg {
  width: 16px;
  height: 16px;
  fill: #ffffff;
  margin: -8px 0 0 -8px;
}

.o-alert--success {
  background: #14161E;
  padding-left: 94px;
}

.l-alert-banner {
  border-radius: 0;
  margin-top: 0;
}

.l-admin .container {
  padding-top: 36px;
  padding-bottom: 90px;
}

.l-black-friday-ui-sales-2021 {
  background: #0d0d0d !important;
}

.l-black-friday-ui-sales-2021 h1,
.l-black-friday-ui-sales-2021 h2,
.l-black-friday-ui-sales-2021 h3,
.l-black-friday-ui-sales-2021 h4 {
  color: #ffffff !important;
}

.l-black-friday-ui-sales-2021 p {
  color: #A7ADB4 !important;
}

.l-black-friday-ui-sales-2021 .o-button--green {
  background: #ffffff;
}

.l-black-friday-ui-sales-2021 .o-button--green .o-button__label {
  color: #0d0d0d;
}

.l-black-friday-ui-sales-2021 .o-button--green i {
  background: #0d0d0d;
}

.l-black-friday-ui-sales-2021 .o-button--green i svg {
  fill: #ffffff;
}

.l-black-friday-ui-pattern-2021 {
  position: relative;
}

.l-black-friday-ui-pattern-2021:before {
  content: "";
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  height: 120px;
  background-image: url(/assets/patterns/black-friday-2021-hero-pattern-style-1-aad4f39f6af8bd547f5e1cda523dc4aecc476aeca0340d78984c32e242ac88ae.png);
  background-repeat: repeat-x;
  background-size: 1480px;
}

.l-black-friday-ui-pattern-2021:after {
  content: "";
  position: absolute;
  bottom: -90px;
  left: 0;
  width: 100%;
  height: 120px;
  background-image: url(/assets/patterns/black-friday-2021-hero-pattern-style-2-cbf4df08a1a98cb35dbaf7d2149956f0dffe854767702da9245960bee1a4c304.png);
  background-repeat: repeat-x;
  background-size: 1480px;
}

.c-banner-draper.l-black-friday-ui-sales-2021 {
  position: relative;
  padding: 70px 0;
}

.c-banner-draper.l-black-friday-ui-sales-2021:before {
  content: "";
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  height: 120px;
  background-image: url(/assets/patterns/black-friday-2021-hero-pattern-style-1-aad4f39f6af8bd547f5e1cda523dc4aecc476aeca0340d78984c32e242ac88ae.png);
  background-repeat: repeat-x;
  background-size: 1480px;
}

.c-banner-draper.l-black-friday-ui-sales-2021:after {
  content: "";
  position: absolute;
  bottom: -90px;
  left: 0;
  width: 100%;
  height: 120px;
  background-image: url(/assets/patterns/black-friday-2021-hero-pattern-style-2-cbf4df08a1a98cb35dbaf7d2149956f0dffe854767702da9245960bee1a4c304.png);
  background-repeat: repeat-x;
  background-size: 1480px;
}

@media (max-width: 600px) {
  .c-banner-draper.l-black-friday-ui-sales-2021 .c-banner-draper__copy {
    text-align: center;
    margin-bottom: 20px;
    margin-right: 0 !important;
  }
}
.c-video-player__paywall.l-black-friday-ui-sales-2021 {
  position: absolute !important;
}

.hljs-builtin-name {
  color: #F08D49;
}

.hljs-class .hljs-title {
  color: #F8C555;
}

.hljs-function {
  color: #70A2FF;
}

.hljs {
  display: block;
  padding: 0.5em;
}

.light-code .hljs-comment,
.light-code .hljs-quote {
  color: #918791;
}

.light-code .hljs-variable,
.light-code .hljs-template-variable,
.light-code .hljs-attribute,
.light-code .hljs-tag,
.light-code .hljs-name,
.light-code .hljs-selector-id,
.light-code .hljs-selector-class,
.light-code .hljs-regexp,
.light-code .hljs-link,
.light-code .hljs-deletion {
  color: #E34A4C;
}

.light-code .hljs-number,
.light-code .hljs-built_in,
.light-code .hljs-builtin-name,
.light-code .hljs-literal,
.light-code .hljs-type,
.light-code .hljs-params {
  color: #FF5A00;
}

.light-code .hljs-class .hljs-title {
  color: #966B19;
}

.light-code .hljs-string,
.light-code .hljs-symbol,
.light-code .hljs-bullet,
.light-code .hljs-addition {
  color: #157857;
}

.light-code .hljs-meta {
  color: #1D7EAF;
}

.light-code .hljs-function,
.light-code .hljs-section,
.light-code .hljs-title {
  color: #2E5FFF;
}

.light-code .hljs-keyword,
.light-code .hljs-selector-tag {
  color: #6B2372;
}

.light-code .hljs {
  display: block;
  color: #14161E;
}

.light-code .hljs-emphasis {
  font-style: italic;
}

.light-code .hljs-strong {
  font-weight: bold;
}

/**
 * Legacy article layouts (moved from application/layouts/articles.scss).
 *
 * 1. Contributors: no template applies .l-contributors-article any more (the
 *    old article template that wrapped the contributors list in it was removed
 *    in WEB-6842). Kept because article bodies are CMS HTML and could still use
 *    it; liveness uncertain.
 *
 * 2. Community Care: contents/article_templates/_community_care (the
 *    chrome::community_care article chrome). The upcoming-events rules style
 *    the article body, which is CMS HTML from Koenig.
 *
 * 3. Article profile: .l-article-profile only appears in article bodies (CMS
 *    HTML from Koenig); see also kodeco/layouts/_article.scss.
 **/
/* ==========================================================================
1. Contributors
========================================================================== */
.l-contributors-article .l-block-wrapper {
  max-width: 720px;
  padding: 0;
}
@media (max-width: 1280px) {
  .l-contributors-article .l-block-wrapper {
    padding: 0 20px;
  }
}
@media (max-width: 768px) {
  .l-contributors-article .l-block-wrapper {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
.l-contributors-article .l-block-wrapper .l-grid-3 {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
  .l-contributors-article .l-block-wrapper .l-grid-3 {
    grid-template-columns: 1fr;
  }
}
.l-contributors-article .c-content-author__description {
  font-size: 0.875rem !important; /* 14/16 */
}

/* ==========================================================================
2. Community Care
========================================================================== */
@media (max-width: 768px) {
  .l-community-care-article .l-grid-row-gap-40 {
    grid-row-gap: 30px !important;
  }
}
@media (max-width: 768px) {
  .l-community-care-article .c-tutorial-item {
    margin-top: 0 !important;
  }
}
.l-community-care-article .c-tutorial-item .c-tutorial-item__title {
  font-size: 1.875rem !important; /* 30/16 */
}
@media (max-width: 768px) {
  .l-community-care-article .c-tutorial-item .c-tutorial-item__title {
    font-size: 1.3125rem !important; /* 21/16 */
  }
}
@media (max-width: 992px) {
  .l-community-care-article .c-tutorial--card.c-tutorial--floating-button {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 768px) {
  .l-community-care-article .c-tutorial--card.c-tutorial--floating-button {
    grid-template-columns: 1fr !important;
  }
}
.l-community-care-article .c-written-tutorial__introduction {
  background: #E2E6F7 !important;
}
.l-community-care-article .c-written-tutorial__introduction:before {
  background: #E2E6F7 !important;
}
.l-community-care-article header .l-block {
  position: relative;
  z-index: 1;
}
.l-community-care-article header .c-written-tutorial--event-artwork {
  z-index: 0 !important;
}
.l-community-care-article .l-community-care-upcoming-events {
  margin-bottom: -26px;
}
.l-community-care-article .l-community-care-upcoming-events ul {
  list-style: none;
  padding: 0 !important;
  margin: 0;
}
.l-community-care-article .l-community-care-upcoming-events ul li {
  display: flex;
  align-items: center;
  font-size: 1.5rem; /* 24/16 */
  font-family: "Bitter", serif;
  font-weight: 700;
  padding: 15px 0;
  border-bottom: 1px solid #eff3f6;
}
@media (max-width: 768px) {
  .l-community-care-article .l-community-care-upcoming-events ul li {
    font-size: 1.25rem;
  }
}
.l-community-care-article .l-community-care-upcoming-events ul li:last-child {
  border-bottom: none;
}
.l-community-care-article .l-community-care-upcoming-events ul li span {
  display: inline-flex;
  background: #158443;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 0.6875rem; /* 11/16 */
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffffff;
  padding: 3px 7px;
  border-radius: 0.5625rem;
  white-space: nowrap;
}
.l-community-care-article .l-community-care-upcoming-events ul li a {
  color: #333333;
  text-decoration: underline;
  margin-left: 12px;
}

/* ==========================================================================
* 3. Article profile
========================================================================== */
.l-article-profile {
  display: flex;
  margin-top: 24px;
}
.l-article-profile p {
  margin-top: 0 !important;
}
.l-article-profile img {
  margin-right: 20px !important;
  min-width: 150px;
  width: 150px;
  height: 150px;
}
@media (max-width: 768px) {
  .l-article-profile img {
    margin-right: 18px !important;
    min-width: 90px;
    width: 90px;
    height: 90px;
  }
}

/**
 *
 * Bookmarks (legacy)
 *
 * Moved from application/layouts/bookmarks.scss (WEB-7676). Only the rules
 * that still take effect remain.
 *
 * 1. Buttons on mobile
 *
 * 2. Remove button on mobile
 *
 **/
/* ==========================================================================
1. Buttons on mobile
========================================================================== */
/* A hacky approach to convert bookmark buttons to icons on mobile*/
@media (max-width: 600px) {
  .l-bookmark-button-mobile {
    margin-right: 0;
    margin-left: auto;
  }
  .l-bookmark-button-mobile button {
    background: none;
    padding: 0;
    border-radius: 0;
  }
  .l-bookmark-button-mobile button:hover {
    background: none;
  }
  .l-bookmark-button-mobile button i {
    width: 20px;
    height: 20px;
    margin: 0;
    background: none;
    border-radius: 0;
  }
  .l-bookmark-button-mobile button svg {
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
  }
}

/* ==========================================================================
2. Remove button position on mobile
========================================================================== */
@media (max-width: 768px) {
  .l-bookmark-button-remove {
    display: grid;
  }
}

/**
 *
 * SVG
 *
 * LEGACY: moved from application/layouts/svg.scss (WEB-7677). No code in the
 * repo has ever applied these two classes; DB- or CMS-authored HTML may.
 *
 * 1. Custom Sizes
 *
 * 2. Colors
 *
 *
 **/
/* ==========================================================================
1. Custom sizes
========================================================================== */
.l-disclose--small {
  width: 15px;
  height: 9px;
}

/* ==========================================================================
2. Colors
========================================================================== */
.l-svg-color-grey-raven {
  fill: #6E7687 !important;
}

/**
 * Navigation components (legacy)
 *
 * The rules from the old theme's components/navigation that live markup
 * still uses. Everything else in that file was dead or overridden and was
 * removed under WEB-7679.
 *
 * 1. Sidebar Article Navigation (book chapter table of contents)
 *
 * 2. Expanded dropdown menu (program admin edit banner cohort menu)
 *
 * 4. Mobile Navigator (book chapter and article action bars)
 *
 */
/**
 * This file contains variables for controlling layout.
 *
 * 1. Page layout
 * 2. Responsiveness
 *
 */
/* ==========================================================================
    1. Page layout
   ========================================================================== */
/* ==========================================================================
    2. Responsiveness
   ========================================================================== */
/* ==========================================================================
    Responsiveness
   ========================================================================== */
/* ==========================================================================
    Truncation
   ========================================================================== */
/* ==========================================================================
    Flexed spacing
   ========================================================================== */
/* ==========================================================================
    Aspect Ratio
   ========================================================================== */
/* ==========================================================================
  Hide Scrollbar
========================================================================== */
/* ==========================================================================
   1. Sidebar Article Navigation
   ========================================================================== */
.c-sidebar-navigator {
  position: relative;
  padding-bottom: 30px;
}
.c-sidebar-navigator li {
  list-style: none;
  margin-top: 16px;
  font-size: 0.875rem; /* 14/16 */
}
.c-sidebar-navigator li:last-child .c-sidebar-navigator__indicator:after {
  display: none;
}
.c-sidebar-navigator li:nth-last-child(2) .c-sidebar-navigator__indicator:after {
  display: none;
}
.c-sidebar-navigator li a {
  display: flex;
  align-items: flex-start;
  text-decoration: none;
  position: relative;
}

/* ==========================================================================
   2. Expanded Dropdown Menu
   ========================================================================== */
.c-dropdown-menu--expanded {
  background-color: #222222;
  width: 780px;
  left: 0;
  padding: 0;
  border-radius: 9px;
  overflow: hidden;
}
@media (max-width: 992px) {
  .c-dropdown-menu--expanded {
    left: 0;
    margin-left: 0;
    width: 600px;
  }
}
@media (max-width: 768px) {
  .c-dropdown-menu--expanded {
    padding-top: 0;
  }
}
.c-dropdown-menu--expanded:before {
  display: none;
}
@media (max-width: 992px) {
  .c-dropdown-menu--expanded:before {
    left: 50px;
  }
}
@media (max-width: 600px) {
  .c-dropdown-menu--expanded:before {
    display: none;
  }
}
@media (max-width: 768px) {
  .c-dropdown-menu--expanded {
    width: 100%;
    position: relative;
    left: 0;
    margin-left: 0;
    background: none;
    box-shadow: none;
    display: block !important;
    padding-bottom: 0;
  }
}
.c-dropdown-menu--expanded > li {
  display: block;
  height: auto;
  padding: 0;
}
@media (max-width: 600px) {
  .c-dropdown-menu--expanded li {
    padding: 0;
  }
  .c-dropdown-menu--expanded li a {
    color: #ffffff !important;
  }
}
.c-dropdown-menu--expanded .c-dropdown-menu__established {
  height: auto;
  position: relative;
  display: block;
}
@media (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__established {
    padding-left: 0;
    padding-right: 0;
  }
}
.c-dropdown-menu--expanded .c-dropdown-menu__established:before {
  content: "";
  width: calc(100% - 48px);
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 24px;
  background: #32363A;
  opacity: 0.5;
}
@media (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__established:before {
    display: none;
  }
}
.c-dropdown-menu--expanded .c-dropdown-menu__established:last-child:before {
  display: none;
}
.c-dropdown-menu--expanded .c-dropdown-menu__established:hover {
  background: #32363A;
}
@media (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__established:hover {
    background: none;
  }
}
.c-dropdown-menu--expanded .c-dropdown-menu__established:hover .l-button__svg-arrow-nav {
  transform: translateX(3px);
}
.c-dropdown-menu--expanded .c-dropdown-menu__established a {
  display: flex;
}
.c-dropdown-menu--expanded .c-dropdown-menu__established span {
  display: block;
}
.c-dropdown-menu--expanded .c-dropdown-menu__established span.o-dropdown-menu__title {
  font-size: 1rem !important; /* 18/16 */
  color: #ffffff;
}
@media (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__established span.o-dropdown-menu__title {
    font-size: 1.125rem !important; /* 18/16 */
  }
}
.c-dropdown-menu--expanded .c-dropdown-menu__established i {
  width: 48px;
  height: 48px;
  margin-right: 22px;
}
@media (max-width: 600px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__established i {
    display: none;
  }
}

.c-dropdown-menu--expanded-tutorials {
  width: 320px;
  padding: 12px 0;
}
.c-dropdown-menu--expanded-tutorials li {
  height: auto;
  padding: 12px 24px;
}

/* ==========================================================================
   4. Mobile Navigator
   ========================================================================== */
.c-mobile-navigator {
  position: fixed;
  height: 60px;
  line-height: 60px;
  z-index: 9999;
  display: none;
}
@media screen and (max-width: 1023px) {
  .c-mobile-navigator {
    display: grid;
  }
}
.c-mobile-navigator li {
  text-align: center;
}
.c-mobile-navigator li a {
  width: 100%;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.c-mobile-navigator li a:hover {
  background: #DBDDE0;
}

.c-mobile-navigator--book {
  background: #FAFAFA;
}
.c-mobile-navigator--book a:hover {
  background: #DBDDE0 !important;
}

/**
 * Notifications
 *
 * Notify the user via a modal/popup when they earn a badge for example
 *
 * 1. Badge/Achievements Notifications
 *
 */
/* ==========================================================================
   1. Badge/Achievements Notifications
   ========================================================================== */
.c-notification-badge {
  position: fixed;
  z-index: 9999999;
  top: 36px;
  right: 36px;
  width: 320px;
  background: #ffffff;
  text-align: center;
  padding: 24px 0 30px;
  border-radius: 0.5625rem;
  box-shadow: 0 2px 24px 0 rgba(55, 55, 55, 0.1);
  animation: a-scale-in 1s;
}
@media (max-width: 992px) {
  .c-notification-badge {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: none;
  }
}
@media (max-width: 600px) {
  .c-notification-badge {
    width: 90%;
  }
}
.c-notification-badge .c-notification-badge__close {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  border-radius: 0.5625rem;
  transition: background-color 0.5s;
}
.c-notification-badge .c-notification-badge__close:hover {
  background-color: #EFF3F6;
}
.c-notification-badge .c-notification-badge__close svg {
  width: 12px;
  height: 12px;
  fill: #333333;
}
.c-notification-badge img {
  min-height: 120px;
  width: 120px;
}
.c-notification-badge p {
  font-family: "Bitter", serif;
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 1.125rem; /* 18/16 */
}
.c-notification-badge a {
  color: #6E7687;
  font-size: 0.875rem; /* 14/16 */
}

.o-alert--danger {
  background: #CF3B2B;
  padding-left: 78px;
}

.o-alert--danger:before {
  content: "error";
  color: #CF3B2B;
  position: absolute;
  left: 15px;
  top: 12px;
  border-radius: 0.5625rem;
  background: #ffffff;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.33px;
  padding: 5px 8px 4px;
}

.o-alert--warning {
  background: #FCB526;
  padding-left: 94px;
}

.o-alert--warning:before {
  content: "warning";
  color: #FCB526;
  position: absolute;
  left: 15px;
  top: 12px;
  border-radius: 0.5625rem;
  background: #ffffff;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.33px;
  padding: 5px 8px 4px;
}

.o-alert--tip {
  background: #2F4F4F;
  padding-left: 58px;
}

.o-alert--tip:before {
  content: "tip";
  color: #2F4F4F;
  position: absolute;
  left: 15px;
  top: 12px;
  border-radius: 0.5625rem;
  background: #ffffff;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.33px;
  padding: 5px 8px 4px;
}

.o-alert--info {
  background: #14161E;
  padding-left: 68px;
}

.o-alert--info:before {
  content: "info";
  color: #2F4F4F;
  position: absolute;
  left: 15px;
  top: 12px;
  border-radius: 0.5625rem;
  background: #ffffff;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.33px;
  padding: 5px 8px 4px;
}

.o-alert--archive {
  background: #CF3B2B;
  padding-left: 90px;
}

.o-alert--archive:before {
  content: "archive";
  color: #CF3B2B;
  position: absolute;
  left: 15px;
  top: 12px;
  border-radius: 0.5625rem;
  background: #ffffff;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.33px;
  padding: 5px 8px 4px;
}

.o-alert--announce {
  background: #6767A8;
  padding-left: 138px;
}

.o-alert--announce:before {
  content: "announcement";
  color: #6767A8;
  position: absolute;
  left: 15px;
  top: 12px;
  border-radius: 0.5625rem;
  background: #ffffff;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.33px;
  padding: 5px 8px 4px;
}

.o-alert--subscription {
  background: #FDCF74;
  color: #333333;
  padding-left: 68px;
}

.o-alert--subscription:before {
  content: "info";
  color: #FDCF74;
  position: absolute;
  left: 15px;
  top: 12px;
  border-radius: 0.5625rem;
  background: #ffffff;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.33px;
  padding: 5px 8px 4px;
  background: #333333;
}

.o-alert--pro {
  background: #157CB8;
  padding-left: 68px;
}

.o-alert--pro:before {
  content: "pro";
  position: absolute;
  left: 15px;
  top: 12px;
  border-radius: 0.5625rem;
  background: #ffffff;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.33px;
  padding: 5px 8px 4px;
  background: #157CB8;
  border-radius: 0.5625rem;
  border: 2px solid #ffffff;
  color: #ffffff;
  padding: 2px 7px;
  top: 13px;
}

.c-box-list li {
  font-size: 0.9375rem;
  font-weight: 600;
  position: relative;
  margin-top: 18px;
  color: #ffffff;
  cursor: pointer;
  z-index: 1;
  padding-left: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
}

.c-box-list li:first-child {
  margin-top: 0;
}

.c-box-list li:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 0.4375rem;
  border: 2px solid #DBDDE0;
  z-index: -1;
}

.c-box-list li a {
  display: flex;
  margin-left: -30px;
  padding-left: 30px;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}

.c-box-list li a:hover {
  color: #158443;
}

.c-box-list--linked li:first-child:after {
  display: none;
}

.c-box-list--linked li:after {
  content: "";
  position: absolute;
  top: -15px;
  left: 9px;
  width: 2px;
  height: 12px;
  background: #585E66;
}

/* ==========================================================================
   3. Banner draper - Used for drapers and pillar heros
   ========================================================================== */
.c-banner-draper {
  height: 140px;
  overflow: hidden;
  position: relative;
}
.c-banner-draper:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 1080px) {
  .c-banner-draper {
    height: auto;
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
.c-banner-draper .c-banner-draper__wrapper {
  height: 100%;
  position: relative;
  z-index: 1;
}
.c-banner-draper .c-banner-draper__wrapper .c-banner-draper__flex-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
}
@media (max-width: 1080px) {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__flex-wrapper {
    display: grid;
    grid-template-columns: auto auto;
  }
}
@media (max-width: 600px) {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__flex-wrapper {
    grid-template-columns: 1fr;
  }
}
.c-banner-draper .c-banner-draper__wrapper .c-banner-draper__art {
  height: 100%;
}
@media (max-width: 1080px) {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__art {
    display: none;
  }
}
.c-banner-draper .c-banner-draper__wrapper .c-banner-draper__art img {
  position: relative;
}
.c-banner-draper .c-banner-draper__wrapper .c-banner-draper__copy {
  margin-left: 24px;
  margin-right: 24px;
}
@media (max-width: 1080px) {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__copy {
    margin-left: 0;
  }
}
.c-banner-draper .c-banner-draper__wrapper .c-banner-draper__copy h2 {
  display: flex;
  align-items: center;
  font-size: 1.6875rem; /* 27/16 */
  color: #ffffff;
}
@media (max-width: 600px) {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__copy h2 {
    font-size: 1.5rem; /* 24/16 */
  }
}
.c-banner-draper .c-banner-draper__wrapper .c-banner-draper__copy h2 a {
  color: #ffffff;
}
.c-banner-draper .c-banner-draper__wrapper .c-banner-draper__copy h2 .o-badge {
  position: relative;
  vertical-align: middle;
  margin-left: 14px;
}
.c-banner-draper .c-banner-draper__wrapper .c-banner-draper__copy p {
  font-family: "Bitter", serif;
  font-size: 1.0625rem; /* 17/16 */
  color: #F2F6FA;
  margin-top: 5px;
}
@media (max-width: 600px) {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__copy p {
    font-size: 0.9375rem; /* 15/16 */
  }
}

.c-banner-draper--no-height {
  height: auto;
  padding-top: 30px;
  padding-bottom: 30px;
}

/* ==========================================================================
   4. Banner draper - Pillar variations (iOS, Android, Unity, Unreal)
   ========================================================================== */
/* iOS */
.c-banner-draper--ios {
  background-color: #F64E1A;
}
.c-banner-draper--ios:before {
  background-image: url(/assets/patterns/ios-pattern@2x-afa82e7a21383f962e6cc10db0d78ffebb131d0ccd9727b43e238d7322e0ad12.png);
  background-size: cover;
}
.c-banner-draper--ios .c-banner-draper__art {
  width: 222px;
  margin-left: -30px;
}
.c-banner-draper--ios .c-banner-draper__art img {
  top: 24px;
}

/* Android */
.c-banner-draper--android {
  background-image: linear-gradient(to right, #0575e6, #00a0ff, #00c3f4, #00deb5, #00f260);
}
.c-banner-draper--android:before {
  background-image: url(/assets/patterns/android-pattern@2x-0acfc99c22ba9a9593d5d397392601e47bb5a1a8d5c1090f340a5d0c299f444b.png);
  background-size: cover;
}
.c-banner-draper--android .c-banner-draper__art {
  width: 140px;
}
.c-banner-draper--android .c-banner-draper__art img {
  top: 20px;
}

/* Server Side Swift */
.c-banner-draper--server-side-swift {
  background-color: #363B44;
}
.c-banner-draper--server-side-swift:before {
  background-image: url(/assets/patterns/server-side-swift-pattern@2x-f3dba2893826ed475bdd037b3b0397a8c096e2f21aee50d77781af37a953f59f.png);
  background-size: cover;
}
.c-banner-draper--server-side-swift .c-banner-draper__art {
  width: 140px;
}
.c-banner-draper--server-side-swift .c-banner-draper__art img {
  width: 100%;
}
.c-banner-draper--server-side-swift .o-button--dark {
  background: #FD7401;
}
.c-banner-draper--server-side-swift .o-button--dark svg {
  fill: #FD7401;
}

/* Unity */
.c-banner-draper--unity {
  background-color: #194A85;
}
.c-banner-draper--unity:before {
  background-image: url(/assets/patterns/unity-pattern@2x-ea54493ebce63300483f86d19b76151ab61e9b720dd2ffa7a9692f687f5d7985.png);
  background-size: cover;
}
.c-banner-draper--unity .c-banner-draper__art {
  width: 160px;
}
.c-banner-draper--unity .c-banner-draper__art img {
  top: 20px;
}

/* Flutter */
.c-banner-draper--flutter {
  background-color: #096ABB;
}
.c-banner-draper--flutter:before {
  background-image: url(/assets/patterns/flutter-pattern@2x-9e12512906f6b2a385152d09df75b94627d2f703c2c564245c1fdfc144f4eacf.png);
  background-size: cover;
}
.c-banner-draper--flutter .c-banner-draper__art {
  width: 160px;
}
.c-banner-draper--flutter .c-banner-draper__art img {
  top: 20px;
}

/* Unreal Engine */
.c-banner-draper--unreal-engine {
  background-color: #79376C;
}
.c-banner-draper--unreal-engine:before {
  background-image: url(/assets/patterns/unreal-engine-pattern@2x-48474441fbdadf19f554060204e7e715fdf4a428bb0ab43345320402699c5be0.png);
  background-size: cover;
}
.c-banner-draper--unreal-engine .c-banner-draper__art {
  width: 172px;
}
.c-banner-draper--unreal-engine .c-banner-draper__art img {
  top: 20px;
}

/* macOS */
.c-banner-draper--macos {
  background-color: #41AEA4;
}
.c-banner-draper--macos:before {
  background-image: url(/assets/patterns/macos-pattern@2x-ef0d6844edb6e457193f139c0ccfa6fd5bf50c13a07ea14791c1befbc290d0ab.png);
  background-size: cover;
}
.c-banner-draper--macos .c-banner-draper__art {
  width: 172px;
}
.c-banner-draper--macos .c-banner-draper__art img {
  top: 20px;
}

/* archive */
.c-banner-draper--archive {
  background-color: #333333;
}
.c-banner-draper--archive:before {
  background-image: url(/assets/patterns/archive-pattern@2x-1ce809bc4aa1a52ab4319309866b6e042d0148b4bcc20f4f63344adeb7d7363b.png);
  background-size: cover;
}
.c-banner-draper--archive .c-banner-draper__art {
  width: 120px;
}
.c-banner-draper--archive .c-banner-draper__art img {
  top: 30px;
}

/* podcast */
.c-banner-draper--podcast {
  background-color: #333333;
}
.c-banner-draper--podcast:before {
  background-image: url(/assets/patterns/podcast-pattern@2x-e0178d0b9c54e1e3a503e42e111d2098c5057345f09b3cdc5fb5aa162b4135de.png);
  background-size: cover;
}
.c-banner-draper--podcast .c-banner-draper__copy p {
  max-width: 720px;
}
.c-banner-draper--podcast .c-banner-draper__art {
  width: 120px;
}
.c-banner-draper--podcast .c-banner-draper__art img {
  top: 30px;
}

/* mobile app */
.c-banner-draper--mobile-app {
  background: #F2F6FA;
}
.c-banner-draper--mobile-app h2, .c-banner-draper--mobile-app p {
  color: #333333 !important;
}
.c-banner-draper--mobile-app .c-banner-draper__art img {
  width: 180px;
  top: 10px;
}

/* ==========================================================================
5. Banner draper - Campaign variations
========================================================================== */
.c-banner-draper--campaign {
  height: auto;
  min-height: 140px;
  display: flex;
  align-items: center;
  padding: 30px 0;
}
.c-banner-draper--campaign .c-banner-draper__copy p {
  margin-top: 9px;
}
@media (max-width: 768px) {
  .c-banner-draper--campaign .c-banner-draper__copy p {
    padding-right: 0;
  }
}

/* Create Account */
.c-banner-draper--account {
  background-color: #333333;
}
.c-banner-draper--account:before {
  background-image: url(/assets/patterns/flare-relate-pattern--dark-teal-ae0808f8dec26eea570712492e5bbdfe208f598016b1be055ba108966a73eb5f.png);
  background-size: cover;
}
.c-banner-draper--account .c-banner-draper__art {
  width: 300px;
}
.c-banner-draper--account .c-banner-draper__art img {
  top: 20px;
  margin-top: -40px;
  margin-bottom: -60px;
}

.c-banner-draper--account-list {
  padding-bottom: 60px;
}
.c-banner-draper--account-list:before {
  background-image: url(/assets/patterns/large-geometric-relate-pattern--dark-83ce2ab52da02a0fda9a08230d73ce14f6dbd16193a6eb1e339e35429af2ffcc.png);
  background-size: cover;
}
@media (max-width: 1080px) {
  .c-banner-draper--account-list .l-block-wrapper {
    width: 100%;
  }
}
.c-banner-draper--account-list h2 {
  font-size: 1.875rem !important; /* 30/16 */
  line-height: 1.35 !important;
}
@media (max-width: 768px) {
  .c-banner-draper--account-list h2 {
    font-size: 1.5rem !important; /* 24/16 */
    line-height: 1.25 !important;
  }
}
.c-banner-draper--account-list .c-banner-draper__art {
  width: 240px;
  min-width: 240px;
  margin-left: auto;
}
@media (max-width: 1080px) {
  .c-banner-draper--account-list .c-banner-draper__art {
    display: block !important;
  }
}
@media (max-width: 768px) {
  .c-banner-draper--account-list .c-banner-draper__art {
    display: none !important;
  }
}
.c-banner-draper--account-list .c-banner-draper__art img {
  top: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.c-banner-draper--account-list .c-box-list li {
  font-family: "Bitter", serif;
  font-size: 1.0625rem; /* 17/16 */
}
@media (max-width: 768px) {
  .c-banner-draper--account-list .c-box-list li {
    font-size: 0.9375rem; /* 15/16 */
  }
}
.c-banner-draper--account-list .c-box-list li:before {
  top: 3px;
}
@media (max-width: 768px) {
  .c-banner-draper--account-list .c-box-list li:before {
    top: 1px;
  }
}

/* Newsletter */
.c-banner-draper--newsletter {
  background-color: #158443;
}
.c-banner-draper--newsletter:before {
  background-image: url(/assets/patterns/geometric-relate-pattern--dark-e78f59cb4699e24d8f72a0d8d6d16483af21c3fd818ce1b9c417a5cc8733f466.png);
  background-size: cover;
}
.c-banner-draper--newsletter .c-banner-draper__art {
  width: 200px;
}
.c-banner-draper--newsletter .c-banner-draper__art img {
  margin-bottom: -120px;
}

/* Subscription */
.c-banner-draper--subscription {
  background-color: #FDCF74;
  padding: 45px 0;
}
.c-banner-draper--subscription .c-banner-draper__flex-wrapper {
  max-width: 912px;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 26px;
}
@media (max-width: 1080px) {
  .c-banner-draper--subscription .c-banner-draper__flex-wrapper {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 600px) {
  .c-banner-draper--subscription h2 {
    white-space: normal;
  }
}
.c-banner-draper--subscription h2, .c-banner-draper--subscription p {
  color: #333333 !important;
}
@media (max-width: 1080px) {
  .c-banner-draper--subscription h2, .c-banner-draper--subscription p {
    display: block !important;
  }
}
.c-banner-draper--subscription .c-banner-draper__copy {
  margin: 0 !important;
}
@media (max-width: 1080px) {
  .c-banner-draper--subscription .c-banner-draper__copy {
    order: 2;
    text-align: center;
    max-width: 560px;
    margin: 30px auto 0 !important;
  }
}
.c-banner-draper--subscription .c-banner-draper__art {
  width: 100%;
}
@media (max-width: 1080px) {
  .c-banner-draper--subscription .c-banner-draper__art {
    display: block !important;
    order: 1;
    max-width: 442px;
    margin: 0 auto;
  }
}
.c-banner-draper--subscription .c-banner-draper__art img {
  width: 100%;
}

.c-banner-draper--pro-subscription {
  background-color: #157CB8 !important;
}
.c-banner-draper--pro-subscription h2, .c-banner-draper--pro-subscription p {
  color: #ffffff !important;
}

.c-banner-draper--pro-subscription-wide:before {
  content: "";
  position: absolute;
  left: -100px;
  bottom: 0;
  top: auto;
  width: 340px;
  height: 210px;
  background-image: url(/assets/patterns/illustration-pro-subscription-items-banner--left@2x-31f3916e8318791188fa174cb5fd47adc10c8e806d2da943a1b78dfd31889771.png);
  background-size: cover;
}
@media (max-width: 1080px) {
  .c-banner-draper--pro-subscription-wide:before {
    left: -200px;
  }
}
@media (max-width: 600px) {
  .c-banner-draper--pro-subscription-wide:before {
    left: -275px;
  }
}
.c-banner-draper--pro-subscription-wide:after {
  content: "";
  position: absolute;
  right: -100px;
  bottom: 0;
  top: auto;
  width: 340px;
  height: 210px;
  background-image: url(/assets/patterns/illustration-pro-subscription-items-banner--right@2x-6bf8ea3b615a092f7f47b771138f6a592cf6271a629929cca837f667f4a7a6b2.png);
  background-size: cover;
}
@media (max-width: 1080px) {
  .c-banner-draper--pro-subscription-wide:after {
    right: -200px;
  }
}
@media (max-width: 600px) {
  .c-banner-draper--pro-subscription-wide:after {
    right: -275px;
  }
}

.c-banner-draper--team-subscription {
  background: #A5CEB5;
}
.c-banner-draper--team-subscription .c-banner-draper__art {
  display: inline-table;
  width: 420px;
}
@media (max-width: 768px) {
  .c-banner-draper--team-subscription .c-banner-draper__art {
    max-width: 300px;
    width: 100%;
  }
}

/* Learning Path */
.c-banner-draper--path {
  background-color: #333333;
}

.c-banner-draper--path-android {
  background-color: #C9DC8D;
}
.c-banner-draper--path-android .c-banner-draper__wrapper:before {
  content: "";
  width: 167px;
  height: 165px;
  position: absolute;
  left: -167px;
  top: 50%;
  margin-top: -84px;
  background-image: url(/assets/artwork/illustration-android-path-1-4816269d716633f79033611fb0061cbebcd3f396eeb63a3097b896ff07ed1377.svg);
  background-size: cover;
}
.c-banner-draper--path-android .c-banner-draper__wrapper:after {
  content: "";
  width: 175px;
  height: 168px;
  position: absolute;
  right: -175px;
  top: 50%;
  margin-top: -86px;
  background-image: url(/assets/artwork/illustration-android-path-2-926e39e35948a8c71e63e5488048173dd116bd1c8ba55d3f7cfbf861ff732e6a.svg);
  background-size: cover;
}

.c-banner-draper--path-ios {
  background-color: #FCAC6D;
}
.c-banner-draper--path-ios .c-banner-draper__wrapper:before {
  content: "";
  width: 167px;
  height: 175px;
  position: absolute;
  left: -167px;
  top: 50%;
  margin-top: -90px;
  background-image: url(/assets/artwork/illustration-ios-path-2-645ab9db690dfe533b48c574033de0e8219b6d3cad6257dce06b35e0df7d6e79.svg);
  background-size: cover;
}
.c-banner-draper--path-ios .c-banner-draper__wrapper:after {
  content: "";
  width: 195px;
  height: 158px;
  position: absolute;
  right: -195px;
  top: 50%;
  margin-top: -80px;
  background-image: url(/assets/artwork/illustration-ios-path-1-b38bf847db51e4c39d55d606c9068dc264153f3cb6cd806b5d0f7f111219dbc4.svg);
  background-size: cover;
}

.c-banner-draper--path-flutter {
  background-color: #C7E7F6;
}
.c-banner-draper--path-flutter .c-banner-draper__wrapper:before {
  content: "";
  width: 170px;
  height: 130px;
  position: absolute;
  left: -170px;
  top: 50%;
  margin-top: -65px;
  background-image: url(/assets/artwork/illustration-flutter-path-1-2826a5fe356022558251511fe47191025b8ca62ffe74d36760ad5e147de7a60c.svg);
  background-size: cover;
}
.c-banner-draper--path-flutter .c-banner-draper__wrapper:after {
  content: "";
  width: 222px;
  height: 134px;
  position: absolute;
  right: -222px;
  top: 50%;
  margin-top: -67px;
  background-image: url(/assets/artwork/illustration-flutter-path-2-b50f3988f24008897d0f68918cb8c4b6cd1cbdfac5f777776dfe45e3aa35781e.svg);
  background-size: cover;
}

.c-banner-draper--path-unity {
  background-color: #8CBDDA;
}
.c-banner-draper--path-unity .c-banner-draper__wrapper:before {
  content: "";
  width: 185px;
  height: 165px;
  position: absolute;
  left: -185px;
  top: 50%;
  margin-top: -75px;
  background-image: url(/assets/artwork/illustration-unity-path-1-648e7bb4411b2adeb3f71dded5c1f2cd1a0f7b88ad424e4e8b8a380db7dcc759.svg);
  background-size: cover;
}
.c-banner-draper--path-unity .c-banner-draper__wrapper:after {
  content: "";
  width: 155px;
  height: 166px;
  position: absolute;
  right: -155px;
  top: 50%;
  margin-top: -83px;
  background-image: url(/assets/artwork/illustration-unity-path-2-4688f78d49e6a90c49bb8125a20b9c2c9086b559322c44197dfe0669a13ecdb9.svg);
  background-size: cover;
}

.c-banner-draper--black-friday-2020 h2, .c-banner-draper--black-friday-2020 p {
  color: #ffffff !important;
}

/* ==========================================================================
7. Bottom banner
========================================================================== */
.c-banner-draper-sticky {
  display: flex;
  align-items: center;
  height: 80px;
  position: fixed;
  bottom: 0;
  left: 0;
}
@media (max-width: 992px) {
  .c-banner-draper-sticky {
    height: auto;
  }
}

.c-banner-draper-sticky--obfuscate {
  background: #ffffff;
  box-shadow: 0px 2px 24px 0 rgba(51, 51, 51, 0.1);
  height: 96px;
}
@media (max-width: 992px) {
  .c-banner-draper-sticky--obfuscate {
    margin: 0 24px;
    width: calc(100% - 48px);
    bottom: 72px;
    border-radius: 0.5625rem;
    padding: 24px;
    z-index: 0;
    height: auto;
  }
}
.c-banner-draper-sticky--obfuscate p {
  color: #333333 !important;
}
.c-banner-draper-sticky--obfuscate img {
  max-width: 170px !important;
}
.c-banner-draper-sticky--obfuscate .l-obfuscated-text {
  display: inline-block;
  width: 104px;
  text-align: center;
}

/* ==========================================================================
   10a. Sales Promotions (Teaspoon)
   ========================================================================== */
.c-banner-draper--teaspoon-launch {
  background: #FDCF74;
  height: auto;
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: center;
}
.c-banner-draper--teaspoon-launch .c-banner-draper__copy {
  margin: 0 !important;
}
.c-banner-draper--teaspoon-launch .c-banner-draper__copy h2, .c-banner-draper--teaspoon-launch .c-banner-draper__copy p {
  display: block !important;
  text-align: center;
  color: #333333 !important;
}

/* ==========================================================================
   10a. Sales Promotions (Black Friday 2020)
   ========================================================================== */
.c-banner-draper--black-friday--2020 {
  background: #222222;
  position: relative;
  height: auto;
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: center;
}

.c-banner-draper--black-friday--2020::before {
  content: "";
  position: absolute;
  width: 302px;
  height: 205px;
  position: absolute;
  left: -100px;
  top: auto;
  bottom: 0;
  background-image: url(/assets/patterns/black-friday-2020-top-banner-background-left-green@2x-ddd3afcdcf4e19be05da694a3cc6ef4309c43ebbc3e61cab7a90eb6ba63094bb.png);
  background-size: cover;
}

@media only screen and (max-width: 800px) {
  .c-banner-draper--black-friday--2020::before {
    display: none;
  }
}
.c-banner-draper--black-friday--2020::after {
  content: "";
  position: absolute;
  width: 302px;
  height: 205px;
  position: absolute;
  right: -100px;
  top: auto;
  bottom: 0;
  background-image: url(/assets/patterns/black-friday-2020-top-banner-background-right-green@2x-5c58fe59f9cffd45842df12bad8bc7b45a80d6f5fa4fd906107ed06dd7173c51.png);
  background-size: cover;
}

@media only screen and (max-width: 800px) {
  .c-banner-draper--black-friday--2020::after {
    display: none;
  }
}
@media only screen and (max-width: 800px) {
  .c-banner-draper--black-friday--2020 h2 {
    display: block !important;
  }
  .c-banner-draper--black-friday--2020 h2 > span {
    display: block;
  }
}
.c-banner-draper--black-friday--2020 .c-banner-draper__flex-wrapper {
  justify-content: center;
  text-align: center;
}

/* ==========================================================================
  11a. Community Header
  ========================================================================== */
.c-banner-draper--community {
  height: auto;
  padding-top: 140px;
  margin-top: -100px;
}
.c-banner-draper--community:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-position: top -150px center;
  background-size: 1400px;
  background-repeat: no-repeat;
  z-index: -1;
  width: 100%;
  height: 140px;
}
.c-banner-draper--community > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1152px;
}
@media (max-width: 1440px) {
  .c-banner-draper--community > div {
    margin: 0 auto;
  }
}
@media (max-width: 992px) {
  .c-banner-draper--community > div {
    flex-direction: column;
  }
}
.c-banner-draper--community .c-banner-draper__copy {
  max-width: 720px;
  padding-right: 30px;
}
@media (max-width: 992px) {
  .c-banner-draper--community .c-banner-draper__copy {
    text-align: center;
    padding-right: 0;
  }
}
.c-banner-draper--community .c-banner-draper__copy h2 {
  line-height: 1.125;
}
.c-banner-draper--community .c-banner-draper__copy h2, .c-banner-draper--community .c-banner-draper__copy p {
  margin-top: 9px;
}
.c-banner-draper--community .c-banner-draper__copy p {
  color: #6E7687;
}
.c-banner-draper--community .c-banner-draper__art {
  max-width: 526px;
  position: relative;
}
@media (max-width: 992px) {
  .c-banner-draper--community .c-banner-draper__art {
    margin-top: 30px;
  }
}
.c-banner-draper--community .c-banner-draper__art:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -16px;
  width: calc(100% + 32px);
  height: 200px;
  margin-top: -100px;
  border-radius: 12px;
  background-color: #D6E0EF;
  opacity: 0.4;
  z-index: -1;
}
@media (max-width: 768px) {
  .c-banner-draper--community .c-banner-draper__art:before {
    display: none;
  }
}
.c-banner-draper--community .c-banner-draper__art img {
  width: 100%;
  border-radius: 12px;
}

/* ==========================================================================
  11b. Community Hack (Change widths of tutorial layouts)
  ========================================================================== */
.c-banner-draper--community-width + div > div {
  max-width: 1152px;
}
@media (max-width: 1440px) {
  .c-banner-draper--community-width + div > div {
    margin: 0 auto;
  }
}
.c-banner-draper--community-width + div > div h3 {
  font-size: 1.875rem; /* 30/16 */
}
.c-banner-draper--community-width + div > div .l-border-bottom {
  border-bottom: none;
}

/* ==========================================================================
  11c. Community Adverts
  ========================================================================== */
.c-banner-draper--community-intersticial {
  height: auto;
  margin-top: 30px;
  margin-bottom: 30px;
}
.c-banner-draper--community-intersticial:before {
  display: none;
}
.c-banner-draper--community-intersticial > div {
  display: flex;
  align-items: center;
  max-width: 1152px;
}
@media (max-width: 1440px) {
  .c-banner-draper--community-intersticial > div {
    margin: 0 auto;
  }
}
.c-banner-draper--community-intersticial > div .c-banner-draper__copy {
  text-align: center;
  padding: 0 60px;
}
@media (max-width: 992px) {
  .c-banner-draper--community-intersticial > div .c-banner-draper__copy {
    padding: 0;
  }
}
.c-banner-draper--community-intersticial > div .c-banner-draper__copy h3 {
  font-size: 1.875rem; /* 30/16 */
}
.c-banner-draper--community-intersticial > div .c-banner-draper__copy p {
  color: #6E7687;
  margin-top: 12px;
}
.c-banner-draper--community-intersticial > div .c-banner-draper__art {
  min-width: 230px;
  height: 215px;
}
@media (max-width: 992px) {
  .c-banner-draper--community-intersticial > div .c-banner-draper__art {
    display: none;
  }
}
.c-banner-draper--community-intersticial > div .c-banner-draper__art img {
  width: 100%;
}

.c-banner-draper--community-connect .c-banner-draper__art--left {
  background-image: url(/assets/artwork/community-connect-left-bce21b6b2108866cbbf453b81faf599c264a9b97090d3a638629260e1a19e34f.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.c-banner-draper--community-connect .c-banner-draper__art--right {
  background-image: url(/assets/artwork/community-connect-right-74345afbd0f42e2fed5a8e4f8d4ac0d8c3decf3ca3cb59f1a4c151e3a14bed26.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

.c-banner-draper--community-resources .c-banner-draper__art--left {
  height: 228px !important;
  background-image: url(/assets/artwork/community-people-left-7c2e3b4d6f8ac4183f79f1a9c845e49d25b0831d8e7ad08db1923240be20e86c.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.c-banner-draper--community-resources .c-banner-draper__art--right {
  height: 221px !important;
  background-image: url(/assets/artwork/community-people-right-033285e844670c7bf19a5ae4560402289e11c53111ea950344d424598c83b019.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

/**
 * Legacy skeleton keyframes (moved from application/components/skeletons.scss).
 *
 * The o-skeleton / c-skeleton classes are gone, but the logged-in home
 * skeletons (kodeco/layouts/_home_loggedin.scss) still animate with
 * `animation-name: shimmer`, and this is the only definition of it.
 **/
@keyframes shimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
/**
 * Legacy tutorial cards (moved from application/components/tutorials.scss).
 *
 * Only the old card markup that still renders is styled here:
 * - the Community Care article chrome (contents/article_templates/_community_care),
 *   whose "Upcoming Events" card wraps the article body (CMS HTML from Koenig),
 *   so the descendant rules under .c-tutorial-item also style CMS content;
 * - the curated user highlight section (curation/_user_highlight);
 * - the container modifiers still set on curated content collections
 *   (curation/_content_collection_accessible) and on /announcements
 *   (home/announcements).
 **/
/* ==========================================================================
 1. Base
 ========================================================================== */
.c-tutorial-item {
  position: relative;
}
.c-tutorial-item > a {
  text-decoration: none;
  display: block; /* this might not be a good idea*/
}
.c-tutorial-item .o-button--mark-as-complete {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 27px;
  height: 27px;
  display: none;
}
@media (max-width: 768px) {
  .c-tutorial-item .o-button--mark-as-complete {
    display: none !important;
  }
}
.c-tutorial-item .o-button--mark-as-complete .checkbox__input {
  top: 0;
}
.c-tutorial-item .o-button--mark-as-complete button:focus {
  outline: none;
}
.c-tutorial-item .c-tutorial-item__art {
  background: #ffffff;
  border-radius: 0.5625rem;
  overflow: hidden;
  position: relative;
}
.c-tutorial-item .c-tutorial-item__art img {
  display: flex;
  width: 100%;
  height: auto;
  align-self: flex-start;
}
.c-tutorial-item .c-tutorial-item__art .o-badge {
  position: absolute;
  z-index: 1;
}
.c-tutorial-item .c-tutorial-item__text {
  display: flex;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__title {
    word-break: break-word;
  }
}
.c-tutorial-item .c-tutorial-item__text .c-tutorial-item__title {
  font-family: "Bitter", serif;
  font-size: 1.3125rem; /* 21/16 */
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.5px;
  color: #333333;
  padding-right: 12px;
}
.c-tutorial-item .c-tutorial-item__text > span {
  display: block;
  width: 100%;
  font-size: 0.9375rem;
}
.c-tutorial-item .c-tutorial-item__text .c-tutorial-item__description {
  width: 100%;
  margin-top: 8px;
  font-size: 0.9375rem;
  color: #6E7687;
}
.c-tutorial-item .c-tutorial-item__text .c-tutorial-item__description p, .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__description ul, .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__description ol {
  margin-top: 8px;
  font-size: 0.9375rem;
  color: #6E7687;
}
.c-tutorial-item .c-tutorial-item__text .c-tutorial-item__description ul, .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__description ol {
  padding-left: 10px;
}
.c-tutorial-item .c-tutorial-item__text .c-tutorial-item__platform {
  color: #6E7687;
}
.c-tutorial-item .c-tutorial-item__text .o-badge {
  width: auto;
  font-size: 0.6875rem; /* 11/16 */
  margin-top: 10px;
  display: none;
}
.c-tutorial-item .c-tutorial-item__text .o-badge--soon {
  display: none;
}
.c-tutorial-item.c-tutorial-item--complete [data-tooltip]:before {
  content: "Unmark as complete" !important;
  right: -96px;
}

/* ==========================================================================
 2. Card modifier (add to container not the tutorial)
 ========================================================================== */
@media (max-width: 992px) {
  .c-tutorial--card {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .c-tutorial--card {
    grid-template-columns: 1fr 1fr;
  }
}
.c-tutorial--card .c-tutorial-item {
  position: relative;
}
@media (max-width: 600px) {
  .c-tutorial--card .c-tutorial-item {
    margin-top: 45px;
  }
}
.c-tutorial--card .c-tutorial-item a {
  padding: 0 !important;
}
.c-tutorial--card .c-tutorial-item .c-tutorial-item__art {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-tutorial--card .c-tutorial-item .c-tutorial-item__art .o-badge {
  top: 12px;
  left: 12px;
}
.c-tutorial--card .c-tutorial-item .c-tutorial-item__text {
  padding: 0 12px;
  margin-top: 15px;
}
.c-tutorial--card .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__title {
  font-size: 21px;
  padding-right: 33px;
}
.c-tutorial--card .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__platform {
  align-self: flex-end;
  margin-top: 5px;
}
.c-tutorial--card .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__description {
  display: none;
}
.c-tutorial--card .c-tutorial-item .c-tutorial-item__text span.o-badge-tutorial {
  width: auto;
}
.c-tutorial--card .c-tutorial-item .c-tutorial-item__text span.o-badge-tutorial > img {
  width: auto;
}
.c-tutorial--card .c-tutorial-item .o-badge-tutorial {
  position: absolute;
  left: 12px;
  top: 132px;
}

/* ==========================================================================
 3c. Complex list modifier (add to container not the tutorial)
 ========================================================================== */
.c-tutorial--list-style-complex .c-tutorial-item {
  padding-bottom: 20px;
  border-bottom: 1px solid #DBDDE0;
}
@media (max-width: 992px) {
  .c-tutorial--list-style-complex .c-tutorial-item {
    padding-bottom: 0;
    border-bottom: none;
  }
}
@media (max-width: 992px) {
  .c-tutorial--list-style-complex .c-tutorial-item a {
    background: #ffffff;
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.075);
    border-radius: 0.5625rem;
    padding: 21px;
  }
}
.c-tutorial--list-style-complex .c-tutorial-item--in-progress {
  border-bottom: none;
}

.c-tutorial--list-style-complex-zero .c-tutorial-item__title {
  margin-top: 10px !important;
  padding-right: 0 !important;
}
.c-tutorial--list-style-complex-zero .c-tutorial-item__art, .c-tutorial--list-style-complex-zero .c-tutorial-item__platform {
  display: none !important;
}
.c-tutorial--list-style-complex-zero .c-tutorial-item__description {
  padding-right: 0 !important;
}

/* ==========================================================================
 6. Number modifier (add to container not the tutorial)
 ========================================================================== */
.c-tutorial--card.c-tutorial--number .c-tutorial-item__text {
  margin-top: 40px !important;
}

/* ==========================================================================
16. White background modifier
========================================================================== */
.c-tutorial--white .c-tutorial-item {
  background: #ffffff;
  box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
  border-radius: 0.5625rem;
  min-height: 340px;
  overflow: hidden;
}
.c-tutorial--white .c-tutorial-item .c-tutorial-item__art {
  border-radius: 0.5625rem 0.5625rem 0 0;
}
.c-tutorial--white .c-tutorial-item .c-tutorial-item__text {
  white-space: normal;
  padding: 0 18px;
  padding-bottom: 50px;
}
.c-tutorial--white .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__description {
  display: block;
}

/* ==========================================================================
17. Floating button
========================================================================== */
.c-tutorial--floating-button .c-tutorial-item .c-tutorial-item__text {
  padding-bottom: 100px;
}
.c-tutorial--floating-button .c-tutorial-item .o-button {
  position: absolute;
  bottom: 24px;
}

/* ==========================================================================
21. CTA Card
========================================================================== */
.c-tutorial--cta-card .c-tutorial-item > a {
  flex-direction: column;
}
.c-tutorial--cta-card.c-tutorial--floating-button .c-tutorial-item .c-tutorial-item__text {
  padding-bottom: 15px;
}

/**
 * Legacy video player rules (moved from application/components/videos.scss).
 *
 * 1. Player (Vimeo embed)
 * 2. Complete overlay
 * 3. Paywall (quiz board paywalls, contents/player/_paywall_*)
 *
 **/
/* ==========================================================================
 1. Player
 ========================================================================== */
div.vimeo-player > div[style] {
  padding: 0 0 0 0 !important;
  position: inherit !important;
}

/* ==========================================================================
 2. Complete
 ========================================================================== */
.c-video-player__complete {
  display: none;
}
@media (max-width: 768px) {
  .c-video-player__complete h3 {
    display: none;
  }
}
@media (max-width: 768px) {
  .c-video-player__complete .o-button--dark {
    background: none;
    margin-top: 9px;
  }
}

/* ==========================================================================
 3. Paywall
 ========================================================================== */
.c-video-player__paywall {
  display: none;
}
.c-video-player__paywall .c-video-player__paywall-wrapper {
  display: flex;
  padding: 30px;
  align-items: center;
  height: 100%;
  max-width: 960px;
  margin: 0 auto;
  animation-duration: 0.5s;
}
@media (max-width: 1080px) {
  .c-video-player__paywall .c-video-player__paywall-wrapper {
    padding: 60px;
  }
}
@media (max-width: 992px) {
  .c-video-player__paywall .c-video-player__paywall-wrapper {
    text-align: center;
  }
}
@media (max-width: 768px) {
  .c-video-player__paywall .c-video-player__paywall-wrapper {
    padding: 15px;
  }
}
.c-video-player__paywall .c-video-player__paywall-sign-in {
  font-size: 1rem;
}
@media (max-width: 600px) {
  .c-video-player__paywall .c-video-player__paywall-sign-in {
    display: none;
  }
}
.c-video-player__paywall .c-video-player__paywall-sign-in a {
  color: #158443;
}
.c-video-player__paywall .c-video-player__paywall-copy {
  padding-right: 30px;
}
@media (max-width: 992px) {
  .c-video-player__paywall .c-video-player__paywall-copy {
    padding-right: 0;
  }
}
@media (max-width: 992px) {
  .c-video-player__paywall .c-video-player__paywall-artwork {
    display: none;
  }
}
.c-video-player__paywall .c-video-player__paywall-artwork img {
  width: 320px;
}
@media (max-width: 992px) {
  .c-video-player__paywall h3 {
    text-align: center !important;
    line-height: 1.25;
  }
}
@media (max-width: 768px) {
  .c-video-player__paywall h3 {
    font-size: 1.5rem !important; /* 24/16 */
  }
}
@media (max-width: 400px) {
  .c-video-player__paywall h3 {
    font-size: 1.1875rem !important; /* 19/16 */
  }
}
@media (max-width: 1080px) {
  .c-video-player__paywall {
    align-items: center;
  }
  .c-video-player__paywall h3 {
    margin-top: 0 !important;
    font-size: 2.25rem; /* 36/16 */
  }
}

article.c-written-tutorial {
  padding-top: 60px;
  padding-bottom: 60px;
}
@media (max-width: 600px) {
  article.c-written-tutorial {
    padding-top: 0;
    margin-top: 0;
    overflow: hidden;
  }
}
article.c-written-tutorial header {
  display: grid;
  grid-template-columns: 1fr 210px;
  grid-column-gap: 25px;
}
@media (max-width: 1280px) {
  article.c-written-tutorial header {
    grid-column-gap: 30px;
  }
}
@media (max-width: 1080px) {
  article.c-written-tutorial header {
    grid-template-columns: 1fr 250px;
  }
}
@media (max-width: 768px) {
  article.c-written-tutorial header {
    grid-template-columns: 1fr 200px;
  }
}
@media (max-width: 600px) {
  article.c-written-tutorial header {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0;
    animation: none;
  }
}
article.c-written-tutorial header h1 {
  line-height: 1;
  color: #333333;
  word-break: break-word;
  font-size: 2.625rem; /* 42/16 */
}
@media (max-width: 768px) {
  article.c-written-tutorial header h1 {
    font-size: 2.25rem; /* 36/16 */
  }
}
@media (max-width: 600px) {
  article.c-written-tutorial header h1 {
    font-size: 1.875rem; /* 36/16 */
  }
}
article.c-written-tutorial header .c-written-tutorial__pull-quote {
  font-family: "IBM Plex Serif", serif;
  font-size: 1.0625rem; /* 18/16 */
}
@media (max-width: 600px) {
  article.c-written-tutorial header .c-written-tutorial__introduction {
    order: 2;
    margin-left: -20px;
    padding: 20px 20px 0 20px;
    background: #ffffff;
    z-index: 2;
  }
}

article.c-written-tutorial.c-written-tutorial--event {
  padding: 0;
  height: 100%;
  min-height: 100vh;
}
article.c-written-tutorial.c-written-tutorial--event header {
  display: block;
  padding: 60px 0 0 0;
  animation: none;
  background: #E2E6F7;
}
@media (max-width: 768px) {
  article.c-written-tutorial.c-written-tutorial--event header .c-written-tutorial__introduction {
    background: none;
    margin-left: 0;
    padding: 0;
  }
}
article.c-written-tutorial.c-written-tutorial--event header h1 {
  font-size: 3rem;
}
@media (max-width: 768px) {
  article.c-written-tutorial.c-written-tutorial--event header h1 {
    font-size: 2.5rem;
  }
}
article.c-written-tutorial.c-written-tutorial--event header h1 > span {
  display: none;
  font-size: 3rem;
}
article.c-written-tutorial.c-written-tutorial--event header .c-written-tutorial__pull-quote {
  font-family: "Bitter", serif;
}
@media (max-width: 768px) {
  article.c-written-tutorial.c-written-tutorial--event header p {
    font-size: 15px;
  }
}
article.c-written-tutorial.c-written-tutorial--event header.c-written-tutorial--event-header {
  background: none;
  padding: 0 0 0 0;
  position: relative;
  overflow: hidden;
}
article.c-written-tutorial.c-written-tutorial--event header.c-written-tutorial--event-header .c-written-tutorial__introduction {
  position: relative;
}
article.c-written-tutorial.c-written-tutorial--event header.c-written-tutorial--event-header .c-written-tutorial__introduction h1 {
  padding-top: 45px;
}
@media (max-width: 768px) {
  article.c-written-tutorial.c-written-tutorial--event header.c-written-tutorial--event-header .c-written-tutorial__introduction h1 {
    font-size: 2.0625rem; /* 33/16 */
  }
}
article.c-written-tutorial.c-written-tutorial--event header.c-written-tutorial--event-header .c-written-tutorial__introduction p {
  font-size: 1.1875rem; /* 19/16 */
}
@media (max-width: 768px) {
  article.c-written-tutorial.c-written-tutorial--event header.c-written-tutorial--event-header .c-written-tutorial__introduction p {
    font-size: 0.9375rem; /* 15/16 */
  }
}
article.c-written-tutorial.c-written-tutorial--event .c-written-tutorial--event-artwork img {
  width: 100%;
  border-radius: 0.5625rem;
}

.c-admin-edit-banner {
  background: #333333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  padding: 12px 15px;
  z-index: 9999;
}
@media (max-width: 768px) {
  .c-admin-edit-banner {
    justify-content: center;
  }
}
.c-admin-edit-banner a, .c-admin-edit-banner span {
  font-size: 0.9375rem; /* 15/16 */
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
}
.c-admin-edit-banner a {
  cursor: pointer;
  margin-right: 18px;
}
@media (max-width: 992px) {
  .c-admin-edit-banner .c-admin-edit-banner__links {
    display: none;
  }
}
@media (max-width: 768px) {
  .c-admin-edit-banner .c-admin-edit-banner__profile {
    display: none;
  }
}
.c-admin-edit-banner .c-admin-edit-banner__profile .c-admin-edit-banner__profile-username {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  white-space: nowrap;
}
.c-admin-edit-banner .o-text-button--warning:hover .o-tooltip {
  opacity: 1;
  visibility: visible;
}
.c-admin-edit-banner .o-text-button--warning li {
  display: block;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 12px;
  position: relative;
}
.c-admin-edit-banner .o-text-button--warning li:before {
  content: "";
  width: 3.5px;
  height: 13px;
  background-image: url(/assets/svg-icons/warning-d5e52e154c388e379e8676cde7ce41fa41669469ccafa9c3018f95f207f54603.png);
  background-size: cover;
  position: absolute;
  left: 0;
  top: 9px;
}
@media (max-width: 768px) {
  .c-admin-edit-banner .o-text-button--warning li {
    max-width: 200px;
  }
}
.c-admin-edit-banner .o-text-button--warning .o-tooltip {
  top: auto;
  bottom: 40px;
  line-height: 30px;
  height: auto;
}
.c-admin-edit-banner .o-text-button--warning .o-tooltip:after {
  display: none;
}
@media (max-width: 992px) {
  .c-admin-edit-banner .o-text-button--warning .o-tooltip {
    left: auto !important;
    right: 0;
    transform: none;
  }
}
@media (max-width: 768px) {
  .c-admin-edit-banner .o-text-button--warning .o-tooltip {
    left: 50% !important;
    right: auto;
    transform: translateX(-50%);
  }
}

.c-book-chapter header {
  display: block !important;
  animation: none !important;
}
.c-book-chapter header h1 {
  margin-top: 20px;
}
@media (max-width: 600px) {
  .c-book-chapter header .c-written-tutorial__introduction {
    margin-left: 0 !important;
    padding: 0 !important;
  }
}
.c-book-chapter .c-written-tutorial__content {
  animation: none !important;
}
.c-book-chapter .c-written-tutorial__content p, .c-book-chapter .c-written-tutorial__content ul, .c-book-chapter .c-written-tutorial__content ol {
  /* The base style sets em as bold, due to a legacy quirk in the style
   * used for articles in Wordpress. Books support <em> as italic and
   * <strong> as bold as is the convention for CommonMark.
   */
}
.c-book-chapter .c-written-tutorial__content p strong, .c-book-chapter .c-written-tutorial__content ul strong, .c-book-chapter .c-written-tutorial__content ol strong {
  font-weight: 700 !important;
  font-style: normal !important;
}
.c-book-chapter .c-written-tutorial__content p strong em, .c-book-chapter .c-written-tutorial__content ul strong em, .c-book-chapter .c-written-tutorial__content ol strong em {
  font-style: italic !important;
  font-weight: 700 !important;
}
.c-book-chapter .c-written-tutorial__content p em, .c-book-chapter .c-written-tutorial__content ul em, .c-book-chapter .c-written-tutorial__content ol em {
  font-style: italic !important;
  font-weight: 400 !important;
}
.c-book-chapter .c-written-tutorial__content p em strong, .c-book-chapter .c-written-tutorial__content ul em strong, .c-book-chapter .c-written-tutorial__content ol em strong {
  font-style: italic !important;
  font-weight: 700 !important;
}
.c-book-chapter h1 code, .c-book-chapter h2 code, .c-book-chapter h3 code, .c-book-chapter h4 code, .c-book-chapter h5 code {
  font-size: inherit !important;
  font-family: inherit !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}
.c-book-chapter h1 em, .c-book-chapter h2 em, .c-book-chapter h3 em, .c-book-chapter h4 em, .c-book-chapter h5 em {
  font-style: normal;
}
.c-book-chapter pre code {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
.c-book-chapter blockquote {
  font-family: inherit;
  background: #F2F6FA;
  font-size: 1em; /* 17/16 */
  padding: 20px 24px;
  border-radius: 0.5625rem;
  margin-top: 18px;
}
.c-book-chapter blockquote pre {
  margin-left: 0px;
  width: 100%;
}
@media (max-width: 768px) {
  .c-book-chapter blockquote {
    font-size: 0.9375rem; /* 15/16 */
  }
}
.c-book-chapter blockquote strong {
  font-weight: 700;
  font-style: normal;
}
.c-book-chapter blockquote em {
  font-style: italic;
}
@media (max-width: 768px) {
  .c-book-chapter blockquote p {
    font-size: 0.9375rem; /* 15/16 */
  }
}
.c-book-chapter blockquote p:first-child {
  margin-top: 0;
}
@media (max-width: 768px) {
  .c-book-chapter blockquote p:first-child {
    margin-top: 0 !important;
  }
}
.c-book-chapter figure {
  max-width: 720px;
  margin: 0 auto;
}
.c-book-chapter figure img {
  max-height: 720px;
}
.c-book-chapter figure figcaption {
  margin-top: 12px;
  text-align: center;
}
@media (max-width: 768px) {
  .c-book-chapter figure figcaption {
    font-size: 0.8125em; /* 13/16 */
  }
}
@media (max-width: 600px) {
  .c-book-chapter figure figcaption {
    text-align: left;
  }
}
.c-book-chapter .l-image-bordered img {
  border: 9px solid #DFE7F0;
  border-radius: 0.5625rem;
}

@media (max-width: 768px) {
  .c-book-chapter__team {
    padding-top: 15px;
  }
}
@media (max-width: 768px) {
  .c-book-chapter__team > div {
    margin-bottom: 24px;
  }
}
@media (max-width: 768px) {
  .c-book-chapter__team figure {
    width: 60px;
    min-width: 60px;
    margin-right: 15px;
  }
}
.c-book-chapter__team p strong:first-child {
  font-weight: 700;
}
@media (max-width: 768px) {
  .c-book-chapter__team p strong:first-child {
    font-size: 1.1875rem; /* 19/16 */
  }
}

.input__group {
  position: relative;
}
.input__group .input__icon-svg--search {
  width: 18px;
  height: 18px;
  position: absolute;
  left: 16px;
  top: 50%;
  margin-top: -11px;
  fill: #ffffff;
}

.c-global-search {
  width: 100%;
  background: #333333;
}
.c-global-search .c-global-search__recommendations {
  max-width: 960px;
  margin: 36px auto 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.c-global-search .c-global-search__recommendations::-webkit-scrollbar {
  width: 0 !important;
}
@media (max-width: 992px) {
  .c-global-search .c-global-search__recommendations {
    padding: 0 30px;
  }
}
.c-global-search .c-global-search__recommendations h3 {
  font-size: 1.3125rem; /* 21/16 */
  color: #ffffff;
  margin-bottom: 21px;
}

.c-global-search--overlay {
  position: fixed;
  z-index: 9999999;
  top: 0;
  left: 0;
  height: 100%;
  min-height: 100%;
  padding-top: 72px;
  padding-bottom: 72px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.c-global-search--overlay::-webkit-scrollbar {
  width: 0 !important;
}
@media (max-width: 600px) {
  .c-global-search--overlay {
    padding-top: 0;
  }
}

.c-search__loading {
  padding-bottom: 300px;
  padding-top: 100px;
  text-align: center;
}
.c-search__loading h3 {
  text-align: center;
}
.c-search__loading .c-search__loading-static {
  min-height: 220px;
}
.c-search__loading .c-search__loading-animate {
  position: relative;
  width: 150px;
  margin-top: 20px;
  margin-left: 30px;
}
.c-search__loading .c-search__loading-animate img {
  position: absolute;
  width: 50px;
  top: 0;
  left: 50px;
}
@media (max-width: 768px) {
  .c-search__loading .c-search__loading-animate img {
    width: 50px;
  }
}
.c-search__loading .c-search__loading-animate img.a-file-rotate--2 {
  top: 75px;
  left: 15px;
  animation-duration: 2.9s;
}
.c-search__loading .c-search__loading-animate img.a-file-rotate--3 {
  top: 75px;
  left: 85px;
  animation-duration: 3.1s;
}

.c-search__no-results h3 {
  font-size: 2.25rem; /* 36/16 */
  margin-top: 24px;
}
@media (max-width: 600px) {
  .c-search__no-results h3 {
    font-size: 1.3125rem !important;
  }
}

@media (max-width: 600px) {
  .c-global-search--book {
    padding-top: 24px;
  }
}
.c-global-search--book .input__icon-svg--search {
  margin-top: -9px;
}
@media (max-width: 992px) {
  .c-global-search--book .c-global-search__recommendations {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ==========================================================================
1a. Content Author
========================================================================== */
.c-content-author {
  display: flex;
}
@media (max-width: 768px) {
  .c-content-author {
    margin-top: 20px;
  }
}
.c-content-author img {
  display: flex;
  min-width: 60px;
  height: 60px;
  border-radius: 0.5625rem;
  border: 4px solid #ffffff;
  box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
  margin-right: 15px;
}
.c-content-author a {
  color: #333333;
  text-decoration: none;
}
.c-content-author .c-content-author__title {
  display: block;
  font-family: "Bitter", serif;
  font-size: 1rem; /* 18/16 */
  font-weight: 700;
  margin-top: 6px;
}
.c-content-author .c-content-author__title i {
  position: relative;
  margin-left: 15px;
  top: 1px;
}
.c-content-author .o-badge {
  display: inline-block;
  margin-top: 12px;
}

/* ==========================================================================
1b. Content Author (Dark)
========================================================================== */
.c-authors--dark .c-content-author .c-content-author__title {
  color: #ffffff;
}
.c-authors--dark .c-content-author img {
  border: 4px solid #434A53;
}
.c-authors--dark .c-content-author .o-badge {
  background: #434A53 !important;
  color: #ffffff !important;
}

/* ==========================================================================
3. Profile empty
========================================================================== */
.c-profile__empty {
  text-align: center;
}
.c-profile__empty img {
  width: 320px;
}

/* ==========================================================================
 1. Basic
 ========================================================================== */
.c-empty-state {
  text-align: center;
  position: relative;
}
.c-empty-state img {
  width: 200px;
}

/* ==========================================================================
 3. File Loader
 ========================================================================== */
.c-empty-state--loader .c-search__loading {
  margin-left: -20px;
}
.c-empty-state--loader .c-search__loading-animate {
  margin-top: 40px;
}

/* ==========================================================================
 5. Suggestions
 ========================================================================== */
.c-empty-state--suggestions h3 {
  font-size: 1.75rem; /* 32/16 */
}

/* ==========================================================================
 6. Illustration + Messaging
 ========================================================================== */
.c-empty-state--message {
  margin-top: 60px;
  text-align: center;
}
.c-empty-state--message h4 {
  font-size: 1.1875em; /* 19/16 */
  margin-top: 18px;
}
.c-empty-state--message p {
  font-size: 0.9375em; /* 15/16 */
  color: #6E7687;
  margin-top: 6px;
}
.c-empty-state--message img {
  width: 270px;
}

.c-empty-state--announcements img {
  width: 66px;
}

/**
 * <noscript /> components
 *
 * 1. Body insert
 *
 */
/* ==========================================================================
  1. body
  ========================================================================== */
.c-noscript__body {
  margin: 50px 0;
}
.c-noscript__body h1 {
  font-family: "Bitter", serif;
  font-weight: 700;
  font-size: 9rem; /* 144/16 */
  letter-spacing: -5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
@media only screen and (max-width: 600px) {
  .c-noscript__body h1 {
    font-size: 6rem;
  }
  .c-noscript__body h1 img {
    width: 90px;
  }
}
.c-noscript__body p {
  font-family: "Bitter", serif;
  font-size: 1.25rem; /* 20/16 */
  max-width: 720px;
  margin: 40px auto;
}

.c-review-module__errors span {
  color: #CF3B2B;
  text-transform: uppercase;
  font-size: 0.6875rem; /* 11/16 */
  letter-spacing: 0.5px;
  font-weight: 700;
}

.c-review-module__errors--inline {
  position: relative;
  top: 50%;
  left: 20px;
}

.c-review-module__errors--bottom {
  position: absolute;
  bottom: -74px;
  right: 0;
}

.c-review-module__answers {
  position: relative;
}
.c-review-module__answers input[type=checkbox] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.c-review-module__answers > input[type=checkbox]:hover + label {
  background: rgb(22.6745098039%, 24.5960784314%, 27.6705882353%);
}
.c-review-module__answers > input[type=checkbox]:checked + label {
  background: #158443;
  border-color: #00FF6A;
  color: #ffffff;
}
.c-review-module__answers label {
  padding: 7px 12px;
  border-radius: 0.5625rem;
  background: #3B4048;
  border: 2px solid #3B4048;
  font-weight: 600;
  font-size: 0.9375rem; /* 15/16 */
  white-space: nowrap;
  display: inline-flex;
  margin: 0 10px 10px 0;
}

/**
 * Reading Experience Tools (legacy)
 *
 * Moved from application/components/reading.scss (WEB-7676). Only the rules
 * that still take effect remain: kodeco/components/_reading.scss restyles the
 * notebook, the highlights and the reading experience selector, and wins every
 * tie.
 *
 * 1. Notebook & Highlighting
 *
 * 2. Reading Experience Widget
 *
 */
/* ==========================================================================
   1. Notebook & Highlighting
   ========================================================================== */
.c-notebook {
  box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.25);
}
@media (max-width: 992px) {
  .c-notebook {
    width: 100%;
    top: 0;
    border-radius: 0;
    box-shadow: none;
  }
}
.c-notebook .c-notebook__demo p {
  font-size: 1rem;
}
.c-notebook .c-notebook__entry:before {
  width: 3px;
  height: calc(100% - 15px);
  position: absolute;
  left: 0;
  top: 0;
  background: #FFE242;
  border-radius: 100px;
}
.c-notebook .c-notebook__entry.c-notebook__entry--yellow:before {
  background: #FFE242;
}
.c-notebook .c-notebook__entry.c-notebook__entry--orange:before {
  background: #FBBC5D;
}
.c-notebook .c-notebook__entry.c-notebook__entry--red:before {
  background: #E58A8A;
}
.c-notebook .c-notebook__entry.c-notebook__entry--purple:before {
  background: #A0AEF2;
}
.c-notebook .c-notebook__entry.c-notebook__entry--blue:before {
  background: #85DDE9;
}
.c-notebook .c-notebook__entry.c-notebook__entry--green:before {
  background: #90DE9C;
}

.o-fragment .o-fragment--tooltip-with-note {
  font-size: 0.875rem; /* 14/16 */
  box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.2);
}
.o-fragment .o-fragment--tooltip-with-note textarea:focus {
  box-shadow: none;
  outline: 0;
}
.o-fragment .o-fragment--tooltip-with-note textarea::placeholder {
  color: #6E7687 !important;
}

/* ==========================================================================
   2. Reading Experience Widget
   ========================================================================== */
.c-reading-experience-selector {
  background: #FAFAFA;
  padding: 21px 24px 24px;
  position: fixed;
  z-index: 9999999;
}
@media screen and (max-width: 1023px) {
  .c-reading-experience-selector {
    position: fixed;
    top: auto;
    right: auto;
    border-radius: 0;
    -webkit-overflow-scrolling: touch;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .c-reading-experience-selector::-webkit-scrollbar {
    width: 0 !important;
  }
  .c-reading-experience-selector {
    box-shadow: none;
    border-bottom: 0;
  }
}
@media screen and (max-width: 767px) {
  .c-reading-experience-selector {
    padding-left: 24px;
    padding-right: 24px;
  }
}
.c-reading-experience-selector h4 {
  font-weight: 600;
  font-size: 0.9375rem; /* 15/16 */
  letter-spacing: 0;
}
.c-reading-experience-selector > div {
  margin-top: 20px;
}
.c-reading-experience-selector > div:first-child {
  margin-top: 0;
}

/**
 * Utility classes are helper classes that perform one thing extremely well.
 *
 * They do it so well, they override everything else.
 *
 * As such, they often only contain one property, and they include the !important declaration.
 *
 * LEGACY: moved from application/utilities.scss (WEB-7677). Only the u-*
 * classes that live markup still applies are left here, plus .u-invisible,
 * which no code in the repo has ever applied (DB- or CMS-authored HTML may
 * still use it).
 *
 * 1. Show/Hide states for mobile screens
 *
 * 2. Show / Hide
 *
 */
/* ==========================================================================
  1. Show/Hide states for mobile screens
  ========================================================================== */
@media (max-width: 600px) {
  .u-hide-mobile {
    display: none;
  }
}

@media (max-width: 600px) {
  .u-hide-mobile--force {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .u-hide-mobile-large {
    display: none;
  }
}

@media (max-width: 768px) {
  .u-hide-mobile-large--force {
    display: none !important;
  }
}

/* ==========================================================================
2. Show / Hide
========================================================================== */
.u-show--flex {
  display: flex;
}

.u-hide {
  display: none;
}

.u-invisible {
  visibility: hidden;
}

/**
 * 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.
 *
 * LEGACY: moved from application/shame.scss (WEB-7677).
 *
 */
.c-banner-draper-sticky .o-alert__close {
  width: 20px;
}

.l-margin-right-20 {
  margin-right: 20px;
}

.l-margin-left-40 {
  margin-left: 40px;
}

.l-margin-left-99 {
  margin-left: 99px;
}

/* Community Page Double Banner Image */
.l-community-image {
  display: block;
  height: 250px;
}

.l-community-image--right {
  background-image: url(/assets/photos/community-connect-right-fe58d024caa00d2b9c02d522c8146885f5fa75cf97062c09ebc10fbe3efd972a.png);
  background-repeat: no-repeat;
}

/* Add/Remove highlighted transcripts background */
.bg-transcript--highlighted {
  background: #435E3E;
}

.bg-transcript--highlighted-typography {
  font-style: normal;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 22px;
  color: #DBDDE0;
}

.bg-transcript--highlighted--bubble {
  background: #158443;
}

.c-written-tutorial__content > figure svg {
  max-width: 688px;
  width: 100%;
  height: auto;
  margin-top: 20px;
}
.c-written-tutorial__content figure svg {
  max-width: 688px;
  width: 100%;
  height: auto;
  margin-top: 20px;
}

/* ==========================================================================
X. Arrows
========================================================================== */
#Arrow [id^=Tip] {
  fill: #ffffff;
}

[id^=Arrow_] [id^=Tip] {
  fill: #ffffff;
}

#ArrowGrey [id^=Tip] {
  fill: #ffffff;
}

[id^=ArrowGrey_] [id^=Tip] {
  fill: #ffffff;
}

#ArrowGreen [id^=Tip] {
  fill: #ffffff;
}

[id^=ArrowGreen_] [id^=Tip] {
  fill: #ffffff;
}

#ArrowTurquoise [id^=Tip] {
  fill: #ffffff;
}

[id^=ArrowTurquoise_] [id^=Tip] {
  fill: #ffffff;
}

#ArrowLightBlue [id^=Tip] {
  fill: #ffffff;
}

[id^=ArrowLightBlue_] [id^=Tip] {
  fill: #ffffff;
}

#ArrowDarkBlue [id^=Tip] {
  fill: #ffffff;
}

[id^=ArrowDarkBlue_] [id^=Tip] {
  fill: #ffffff;
}

#ArrowPurple [id^=Tip] {
  fill: #ffffff;
}

[id^=ArrowPurple_] [id^=Tip] {
  fill: #ffffff;
}

#ArrowPink [id^=Tip] {
  fill: #ffffff;
}

[id^=ArrowPink_] [id^=Tip] {
  fill: #ffffff;
}

#ArrowRed [id^=Tip] {
  fill: #ffffff;
}

[id^=ArrowRed_] [id^=Tip] {
  fill: #ffffff;
}

#ArrowYellow [id^=Tip] {
  fill: #ffffff;
}

[id^=ArrowYellow_] [id^=Tip] {
  fill: #ffffff;
}

/* ==========================================================================
X. Night Mode
========================================================================== */
.prefers-color-scheme--dark .c-written-tutorial__content {
  /* ==========================================================================
  X. Labels
  ========================================================================== */
}
.prefers-color-scheme--dark .c-written-tutorial__content text {
  fill: white;
}
.prefers-color-scheme--dark .c-written-tutorial__content text#TextGrey {
  fill: #D8DBE1 !important;
}
.prefers-color-scheme--dark .c-written-tutorial__content text[id^=TextGrey_] {
  fill: #D8DBE1 !important;
}
.prefers-color-scheme--dark .c-written-tutorial__content text#TextGreen {
  fill: #D6E18D !important;
}
.prefers-color-scheme--dark .c-written-tutorial__content text[id^=TextGreen_] {
  fill: #D6E18D !important;
}
.prefers-color-scheme--dark .c-written-tutorial__content text#TextTurquoise {
  fill: #97CFC1 !important;
}
.prefers-color-scheme--dark .c-written-tutorial__content text[id^=TextTurquoise_] {
  fill: #97CFC1 !important;
}
.prefers-color-scheme--dark .c-written-tutorial__content text#TextLightBlue {
  fill: #A6D9E2 !important;
}
.prefers-color-scheme--dark .c-written-tutorial__content text[id^=TextLightBlue_] {
  fill: #A6D9E2 !important;
}
.prefers-color-scheme--dark .c-written-tutorial__content text#TextDarkBlue {
  fill: #B9C3E4 !important;
}
.prefers-color-scheme--dark .c-written-tutorial__content text[id^=TextDarkBlue_] {
  fill: #B9C3E4 !important;
}
.prefers-color-scheme--dark .c-written-tutorial__content text#TextPurple {
  fill: #D3BDDB !important;
}
.prefers-color-scheme--dark .c-written-tutorial__content text[id^=TextPurple_] {
  fill: #D3BDDB !important;
}
.prefers-color-scheme--dark .c-written-tutorial__content text#TextPink {
  fill: #F2BCD7 !important;
}
.prefers-color-scheme--dark .c-written-tutorial__content text[id^=TextPink_] {
  fill: #F2BCD7 !important;
}
.prefers-color-scheme--dark .c-written-tutorial__content text#TextRed {
  fill: #F7B39C !important;
}
.prefers-color-scheme--dark .c-written-tutorial__content text[id^=TextRed_] {
  fill: #F7B39C !important;
}
.prefers-color-scheme--dark .c-written-tutorial__content text#TextYellow {
  fill: #FFD46F !important;
}
.prefers-color-scheme--dark .c-written-tutorial__content text[id^=TextYellow_] {
  fill: #FFD46F !important;
}
.prefers-color-scheme--dark .c-written-tutorial__content {
  /* ==========================================================================
  X. Shapes
  ========================================================================== */
}
.prefers-color-scheme--dark .c-written-tutorial__content #Shape rect:nth-of-type(1) {
  fill: #14161E;
}
.prefers-color-scheme--dark .c-written-tutorial__content #Shape rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=Shape_] rect:nth-of-type(1) {
  fill: #14161E;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=Shape_] rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content {
  /* ==========================================================================
  X. Shapes w/ Inner
  ========================================================================== */
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInner > rect:nth-of-type(1) {
  fill: #14161E;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInner > rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInner_] > rect:nth-of-type(1) {
  fill: #14161E;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInner_] > rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerFore > rect:nth-of-type(1) {
  fill: #14161E;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerFore > rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerFore_] > rect:nth-of-type(1) {
  fill: #14161E;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerFore_] > rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerClear > rect {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerClear_] > rect {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content {
  /* ==========================================================================
  X. Shapes w/ Patterns
  ========================================================================== */
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerPattern #ShapeInnerBack > rect:nth-of-type(1) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerPattern #ShapeInnerFore > rect:nth-of-type(1) {
  fill: #14161E;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerPattern #ShapeInnerFore > rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerPattern_] [id^=ShapeInnerBack_] > rect:nth-of-type(1) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerPattern_] [id^=ShapeInnerFore_] > rect:nth-of-type(1) {
  fill: #14161E;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerPattern_] [id^=ShapeInnerFore_] > rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapePattern path {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapePattern_] path {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapePattern rect:nth-of-type(1) {
  fill: #14161E;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapePattern_] rect:nth-of-type(1) {
  fill: #14161E;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapePattern rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapePattern_] rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerPattern #ShapeBackground {
  fill: #14161E;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerPattern_] [id^=ShapeBackground_] {
  fill: #14161E;
}
.prefers-color-scheme--dark .c-written-tutorial__content {
  /* ==========================================================================
  X. Arrows
  ========================================================================== */
}
.prefers-color-scheme--dark .c-written-tutorial__content #Arrow circle {
  fill: #14161E;
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=Arrow_] circle {
  fill: #14161E;
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content #Arrow [id^=Line] {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=Arrow_] [id^=Line] {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content #Arrow [id^=Tip] {
  fill: #14161E;
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=Arrow_] [id^=Tip] {
  fill: #14161E;
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content {
  /* ==========================================================================
  X. Arrow (Grey)
  ========================================================================== */
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowGrey circle {
  fill: #14161E;
  stroke: #D8DBE1;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowGrey_] circle {
  fill: #14161E;
  stroke: #D8DBE1;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowGrey [id^=Line] {
  stroke: #D8DBE1;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowGrey_] [id^=Line] {
  stroke: #D8DBE1;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowGrey [id^=Tip] {
  fill: #14161E;
  stroke: #D8DBE1;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowGrey_] [id^=Tip] {
  fill: #14161E;
  stroke: #D8DBE1;
}
.prefers-color-scheme--dark .c-written-tutorial__content {
  /* ==========================================================================
  X. Arrow (Green)
  ========================================================================== */
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowGreen circle {
  fill: #14161E;
  stroke: #D6E18D;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowGreen_] circle {
  fill: #14161E;
  stroke: #D6E18D;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowGreen [id^=Line] {
  stroke: #D6E18D;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowGreen_] [id^=Line] {
  stroke: #D6E18D;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowGreen [id^=Tip] {
  fill: #14161E;
  stroke: #D6E18D;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowGreen_] [id^=Tip] {
  fill: #14161E;
  stroke: #D6E18D;
}
.prefers-color-scheme--dark .c-written-tutorial__content {
  /* ==========================================================================
  X. Arrow (Turquoise)
  ========================================================================== */
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowTurquoise circle {
  fill: #14161E;
  stroke: #97CFC1;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowTurquoise_] circle {
  fill: #14161E;
  stroke: #97CFC1;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowTurquoise [id^=Line] {
  stroke: #97CFC1;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowTurquoise_] [id^=Line] {
  stroke: #97CFC1;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowTurquoise [id^=Tip] {
  fill: #14161E;
  stroke: #97CFC1;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowTurquoise_] [id^=Tip] {
  fill: #14161E;
  stroke: #97CFC1;
}
.prefers-color-scheme--dark .c-written-tutorial__content {
  /* ==========================================================================
  X. Arrow (LightBlue)
  ========================================================================== */
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowLightBlue circle {
  fill: #14161E;
  stroke: #A6D9E2;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowLightBlue_] circle {
  fill: #14161E;
  stroke: #A6D9E2;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowLightBlue [id^=Line] {
  stroke: #A6D9E2;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowLightBlue_] [id^=Line] {
  stroke: #A6D9E2;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowLightBlue [id^=Tip] {
  fill: #14161E;
  stroke: #A6D9E2;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowLightBlue_] [id^=Tip] {
  fill: #14161E;
  stroke: #A6D9E2;
}
.prefers-color-scheme--dark .c-written-tutorial__content {
  /* ==========================================================================
  X. Arrow (DarkBlue)
  ========================================================================== */
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowDarkBlue circle {
  fill: #14161E;
  stroke: #B9C3E4;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowDarkBlue_] circle {
  fill: #14161E;
  stroke: #B9C3E4;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowDarkBlue [id^=Line] {
  stroke: #B9C3E4;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowDarkBlue_] [id^=Line] {
  stroke: #B9C3E4;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowDarkBlue [id^=Tip] {
  fill: #14161E;
  stroke: #B9C3E4;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowDarkBlue_] [id^=Tip] {
  fill: #14161E;
  stroke: #B9C3E4;
}
.prefers-color-scheme--dark .c-written-tutorial__content {
  /* ==========================================================================
  X. Arrow (Purple)
  ========================================================================== */
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowPurple circle {
  fill: #14161E;
  stroke: #D3BDDB;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowPurple_] circle {
  fill: #14161E;
  stroke: #D3BDDB;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowPurple [id^=Line] {
  stroke: #D3BDDB;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowPurple_] [id^=Line] {
  stroke: #D3BDDB;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowPurple [id^=Tip] {
  fill: #14161E;
  stroke: #D3BDDB;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowPurple_] [id^=Tip] {
  fill: #14161E;
  stroke: #D3BDDB;
}
.prefers-color-scheme--dark .c-written-tutorial__content {
  /* ==========================================================================
  X. Arrow (Pink)
  ========================================================================== */
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowPink circle {
  fill: #14161E;
  stroke: #F2BCD7;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowPink_] circle {
  fill: #14161E;
  stroke: #F2BCD7;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowPink [id^=Line] {
  stroke: #F2BCD7;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowPink_] [id^=Line] {
  stroke: #F2BCD7;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowPink [id^=Tip] {
  fill: #14161E;
  stroke: #F2BCD7;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowPink_] [id^=Tip] {
  fill: #14161E;
  stroke: #F2BCD7;
}
.prefers-color-scheme--dark .c-written-tutorial__content {
  /* ==========================================================================
  X. Arrow (Red)
  ========================================================================== */
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowRed circle {
  fill: #14161E;
  stroke: #F7B39C;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowRed_] circle {
  fill: #14161E;
  stroke: #F7B39C;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowRed [id^=Line] {
  stroke: #F7B39C;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowRed_] [id^=Line] {
  stroke: #F7B39C;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowRed [id^=Tip] {
  fill: #14161E;
  stroke: #F7B39C;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowRed_] [id^=Tip] {
  fill: #14161E;
  stroke: #F7B39C;
}
.prefers-color-scheme--dark .c-written-tutorial__content {
  /* ==========================================================================
  X. Arrow (Yellow)
  ========================================================================== */
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowYellow circle {
  fill: #14161E;
  stroke: #FFD46F;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowYellow_] circle {
  fill: #14161E;
  stroke: #FFD46F;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowYellow [id^=Line] {
  stroke: #FFD46F;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowYellow_] [id^=Line] {
  stroke: #FFD46F;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ArrowYellow [id^=Tip] {
  fill: #14161E;
  stroke: #FFD46F;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowYellow_] [id^=Tip] {
  fill: #14161E;
  stroke: #FFD46F;
}
.prefers-color-scheme--dark .c-written-tutorial__content {
  /* ==========================================================================
  X. Lines
  ========================================================================== */
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeLine {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeLine_] {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeLineGrey {
  stroke: #D8DBE1;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeLineGrey_] {
  stroke: #D8DBE1;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeLineGreen {
  stroke: #D6E18D;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeLineGreen_] {
  stroke: #D6E18D;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeLineTurquoise {
  stroke: #97CFC1;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeLineTurquoise_] {
  stroke: #97CFC1;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeLineLightBlue {
  stroke: #A6D9E2;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeLineLightBlue_] {
  stroke: #A6D9E2;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeLineDarkBlue {
  stroke: #B9C3E4;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeLineDarkBlue_] {
  stroke: #B9C3E4;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeLinePurple {
  stroke: #D3BDDB;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeLinePurple_] {
  stroke: #D3BDDB;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeLinePink {
  stroke: #F2BCD7;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeLinePink_] {
  stroke: #F2BCD7;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeLineRed {
  stroke: #F7B39C;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeLineRed_] {
  stroke: #F7B39C;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeLineYellow {
  stroke: #FFD46F;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeLineYellow_] {
  stroke: #FFD46F;
}
.prefers-color-scheme--dark .c-written-tutorial__content {
  /* ==========================================================================
  X. Shadows
  ========================================================================== */
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeShadow rect {
  fill: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeShadow_] rect {
  fill: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content {
  /* ==========================================================================
  X. Color Conversion (Grey)
  ========================================================================== */
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeGrey rect:nth-of-type(1) {
  fill: #717680;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeGrey rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeGrey_] rect:nth-of-type(1) {
  fill: #717680;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeGrey_] rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeGrey > rect:nth-of-type(1) {
  fill: #717680;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeGrey > rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeGrey_] > rect:nth-of-type(1) {
  fill: #717680;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeGrey_] > rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content {
  /* ==========================================================================
  X. Color Conversion (Green)
  ========================================================================== */
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeGreen rect:nth-of-type(1) {
  fill: #598131;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeGreen rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeGreen_] rect:nth-of-type(1) {
  fill: #598131;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeGreen_] rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeGreen > rect:nth-of-type(1) {
  fill: #598131;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeGreen > rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeGreen_] > rect:nth-of-type(1) {
  fill: #598131;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeGreen_] > rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content {
  /* ==========================================================================
  X. Color Conversion (Turquoise)
  ========================================================================== */
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeTurquoise rect:nth-of-type(1) {
  fill: #417D86;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeTurquoise rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeTurquoise_] rect:nth-of-type(1) {
  fill: #417D86;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeTurquoise_] rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeTurquoise > rect:nth-of-type(1) {
  fill: #417D86;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeTurquoise > rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeTurquoise_] > rect:nth-of-type(1) {
  fill: #417D86;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeTurquoise_] > rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content {
  /* ==========================================================================
  X. Color Conversion (Light Blue)
  ========================================================================== */
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeLightBlue rect:nth-of-type(1) {
  fill: #26809C;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeLightBlue rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeLightBlue_] rect:nth-of-type(1) {
  fill: #26809C;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeLightBlue_] rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeLightBlue > rect:nth-of-type(1) {
  fill: #26809C;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeLightBlue > rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeLightBlue_] > rect:nth-of-type(1) {
  fill: #26809C;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeLightBlue_] > rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content {
  /* ==========================================================================
  X. Color Conversion (Dark Blue)
  ========================================================================== */
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeDarkBlue rect:nth-of-type(1) {
  fill: #0074E0;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeDarkBlue rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeDarkBlue_] rect:nth-of-type(1) {
  fill: #0074E0;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeDarkBlue_] rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeDarkBlue > rect:nth-of-type(1) {
  fill: #0074E0;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeDarkBlue > rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeDarkBlue_] > rect:nth-of-type(1) {
  fill: #0074E0;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeDarkBlue_] > rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content {
  /* ==========================================================================
  X. Color Conversion (Purple)
  ========================================================================== */
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapePurple rect:nth-of-type(1) {
  fill: #9A53B2;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapePurple rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapePurple_] rect:nth-of-type(1) {
  fill: #9A53B2;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapePurple_] rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForePurple > rect:nth-of-type(1) {
  fill: #9A53B2;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForePurple > rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForePurple_] > rect:nth-of-type(1) {
  fill: #9A53B2;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForePurple_] > rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content {
  /* ==========================================================================
  X. Color Conversion (Pink)
  ========================================================================== */
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapePink rect:nth-of-type(1) {
  fill: #C34693;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapePink rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapePink_] rect:nth-of-type(1) {
  fill: #C34693;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapePink_] rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForePink > rect:nth-of-type(1) {
  fill: #C34693;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForePink > rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForePink_] > rect:nth-of-type(1) {
  fill: #C34693;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForePink_] > rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content {
  /* ==========================================================================
  X. Color Conversion (Red)
  ========================================================================== */
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeRed rect:nth-of-type(1) {
  fill: #C23100;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeRed rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeRed_] rect:nth-of-type(1) {
  fill: #C23100;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeRed_] rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeRed > rect:nth-of-type(1) {
  fill: #C23100;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeRed > rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeRed_] > rect:nth-of-type(1) {
  fill: #C23100;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeRed_] > rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content {
  /* ==========================================================================
  X. Color Conversion (Yellow)
  ========================================================================== */
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeYellow rect:nth-of-type(1) {
  fill: #9E6B05;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeYellow rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeYellow_] rect:nth-of-type(1) {
  fill: #9E6B05;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeYellow_] rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeYellow > rect:nth-of-type(1) {
  fill: #9E6B05;
}
.prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeYellow > rect:nth-of-type(2) {
  stroke: #ffffff;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeYellow_] > rect:nth-of-type(1) {
  fill: #9E6B05;
}
.prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeYellow_] > rect:nth-of-type(2) {
  stroke: #ffffff;
}

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

/* Controlling column layouts */
/* 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 {
  width: 24px;
  height: 24px;
  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;
  cursor: pointer;
  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;
  cursor: pointer;
  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;
  cursor: pointer;
  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;
  cursor: pointer;
  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;
  cursor: pointer;
  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;
  cursor: pointer;
  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(72.7058823529%, 22.2352941176%, 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;
  cursor: pointer;
  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 {
  width: 20px;
  height: 20px;
  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;
  cursor: pointer;
  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 {
  width: 16px;
  height: 16px;
  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;
  cursor: pointer;
  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 {
  width: 12px;
  height: 12px;
  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 {
  width: 40px;
  height: 40px;
  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 {
  width: 12px;
  height: 12px;
  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 {
  width: 24px;
  height: 24px;
  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;
}

/* ==========================================================================
4b. Navigation — Icons
========================================================================== */
.dropdown.dropdown-navigation .dropdown-content a.dropdown-line,
.dropdown.dropdown-navigation .dropdown-content p.dropdown-line {
  padding-left: 36px;
}
.dropdown.dropdown-navigation .dropdown-content a.dropdown-line.dropdown-line-with-icon {
  position: relative;
}
.dropdown.dropdown-navigation .dropdown-content a.dropdown-line.dropdown-line-with-icon > .dropdown-line-icon {
  position: absolute;
  left: 10px;
  top: 14px;
  width: 16px;
  height: 16px;
  line-height: 0;
  opacity: 0.4;
}
.dropdown.dropdown-navigation .dropdown-content a.dropdown-line.dropdown-line-with-icon > .dropdown-line-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}
.dropdown.dropdown-navigation .dropdown-content a.dropdown-line.dropdown-line-with-icon > span > .dropdown-subtitle {
  margin-top: 2px;
}

/* ==========================================================================
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 {
  width: 8px;
  height: 8px;
  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;
  width: 16px;
  height: 16px;
  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 {
  width: 20px;
  height: 20px;
  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;
  width: 10px;
  height: 10px;
  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 {
  width: 24px;
  height: 24px;
  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 {
  width: 20px;
  height: 20px;
  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 {
  width: 12px;
  height: 12px;
  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 {
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
  flex-shrink: 0;
}
.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 {
  width: 120px;
  height: 120px;
  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;
  width: 20px;
  height: 20px;
  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 {
    width: 10px;
    height: 10px;
    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-domain {
  position: relative;
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line.dropdown-line-domain:before {
  content: "";
  position: absolute;
  left: 14px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 4px;
  background-color: var(--domain-accent, #D7D7D7);
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line.dropdown-line-domain:hover {
  background-color: var(--domain-accent-hover, rgba(215, 215, 215, 0.4980392157));
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line.dropdown-line-sss {
  --domain-accent: #F26FAA;
  --domain-accent-hover: rgba(242, 111, 170, 0.2);
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line.dropdown-line-progro {
  --domain-accent: #E3A93D;
  --domain-accent-hover: rgba(227, 169, 61, 0.2);
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line.dropdown-line-gametech {
  --domain-accent: #B44EBF;
  --domain-accent-hover: rgba(180, 78, 191, 0.2);
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line.dropdown-line-ai {
  --domain-accent: #E6978A;
  --domain-accent-hover: rgba(230, 151, 138, 0.2);
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line.dropdown-line-ios {
  --domain-accent: #8763D2;
  --domain-accent-hover: rgba(135, 99, 210, 0.2);
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line.dropdown-line-android {
  --domain-accent: #00B87E;
  --domain-accent-hover: rgba(0, 184, 126, 0.2);
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line.dropdown-line-flutter {
  --domain-accent: #2EA4DD;
  --domain-accent-hover: rgba(46, 164, 221, 0.2);
}
@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 {
  width: 18px;
  height: 18px;
  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 {
  width: 115px;
  height: 24px;
  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(52.9411764706%, 12%, 12.7058823529%) !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-domain {
  position: relative;
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content a.dropdown-line.dropdown-line-domain:before {
  content: "";
  position: absolute;
  left: 14px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 4px;
  background-color: var(--domain-accent, #D7D7D7);
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content a.dropdown-line.dropdown-line-domain:hover {
  background-color: var(--domain-accent-hover, rgba(215, 215, 215, 0.4980392157));
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content a.dropdown-line.dropdown-line-sss {
  --domain-accent: #F26FAA;
  --domain-accent-hover: 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-sss {
  --domain-accent: #E3A93D;
  --domain-accent-hover: rgba(227, 169, 61, 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 {
  --domain-accent: #B44EBF;
  --domain-accent-hover: rgba(180, 78, 191, 0.5);
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content a.dropdown-line.dropdown-line-ai {
  --domain-accent: #E6978A;
  --domain-accent-hover: rgba(230, 151, 138, 0.5);
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content a.dropdown-line.dropdown-line-ios {
  --domain-accent: #8763D2;
  --domain-accent-hover: rgba(135, 99, 210, 0.5);
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content a.dropdown-line.dropdown-line-android {
  --domain-accent: #00B87E;
  --domain-accent-hover: rgba(0, 184, 126, 0.5);
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content a.dropdown-line.dropdown-line-flutter {
  --domain-accent: #2EA4DD;
  --domain-accent-hover: rgba(46, 164, 221, 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;
}

/**
 *  Message banners
 *
 * 1. Base
 *
 */
/* ==========================================================================
  1. Base
 ========================================================================== */
.banner.content-top {
  margin-bottom: 40px;
}

/**
 *
 * DO NOT EDIT BASE
 *
 *
 * X. Icons within buttons with text - customise the icon color and background
 *
 */
/* ==========================================================================
   Base
   ========================================================================== */
/* ==========================================================================
   X. Icons
   ========================================================================== */
.btn-normalw .o-button__icon--input, .btn-icon .o-button__icon--input {
  border-radius: 50%;
}
.btn-normalw .o-button__icon--left, .btn-icon .o-button__icon--left {
  border-radius: 50%;
}

/* ==========================================================================
X. Code block (pre) buttons w/ color switcher
========================================================================== */
.button-copy {
  width: 32px;
  height: 32px;
  background-color: transparent;
  border-radius: 8px;
  cursor: pointer;
  position: absolute;
  top: 18px;
  right: 52px;
  white-space: nowrap;
}
.button-copy:before {
  content: "";
  display: flex;
  width: 32px;
  height: 32px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(/assets/svg-icons/clipboard-d3125f0e5d15417adecb7889c1d7cd3719c5ab8ea4d3a8431e7ad5b18cf162ee.svg);
  background-size: 14px 16px;
  background-repeat: no-repeat;
  background-position: center center;
}
.button-copy:after {
  content: "Copy";
  position: absolute;
  top: -48px;
  left: 50%;
  margin-left: -33px;
  width: 66px;
  height: 40px;
  background-color: #14161E;
  color: #FFFFFF;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  display: none;
}
.button-copy:hover {
  background-color: #3B3D43;
}
.button-copy:hover:after {
  display: flex;
}

.button-code {
  width: 32px;
  height: 32px;
  background-color: transparent;
  position: absolute;
  top: 18px;
  right: 16px;
  border-radius: 8px;
  cursor: pointer;
  background-image: url(/assets/svg-icons/color-palette-49cad584136d3456bd9fe236bf7a6e064f89e4c7158f5b56286985d7408b70ec.svg);
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center center;
}
.button-code:after {
  content: "Switch color (Light)";
  position: absolute;
  top: -48px;
  left: 50%;
  margin-left: -80px;
  width: 160px;
  height: 40px;
  background-color: #14161E;
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  display: none;
}
.button-code:hover {
  background-color: #3B3D43;
  background-image: url(/assets/svg-icons/color-palette-49cad584136d3456bd9fe236bf7a6e064f89e4c7158f5b56286985d7408b70ec.svg);
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center center;
}
.button-code:hover:after {
  display: flex;
}

.light-code .button-copy:before {
  background-image: url(/assets/svg-icons/clipboard-black-3cf79234109ca7a31f5e7c2aad031712009485086ea4e4be2e13296ff5817c8b.svg);
}
.light-code .button-copy:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.light-code .button-code {
  background-image: url(/assets/svg-icons/color-palette-black-28d8d941019b5553218c1c8da8eb971e972d9bd67230c820f661e09b932b926b.svg);
}
.light-code .button-code:after {
  content: "Switch color (Dark)";
}
.light-code .button-code:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}

/**
* Tables
*
* 1. Features Table
*
*
*/
/* ==========================================================================
1. Features Table
========================================================================== */
.features-table {
  border: 1px solid #14161E;
  background-color: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .features-table {
    overflow-x: scroll;
  }
}
.features-table table {
  width: 100%;
  border-collapse: collapse;
}
.features-table table thead {
  height: 104px;
  background-color: #F7F7F7;
}
.features-table table thead tr th {
  font-size: 1.25rem;
  border: 1px solid #F7F7F7;
}
@media screen and (max-width: 767px) {
  .features-table table thead tr th {
    font-size: 1rem;
    padding-inline: 24px;
  }
}
.features-table table thead tr th:first-child {
  text-align: left;
  padding-left: 24px;
}
.features-table table thead tr th:last-child {
  padding-right: 24px;
}
.features-table table thead tr th:nth-of-type(2) {
  width: 200px;
}
@media screen and (max-width: 767px) {
  .features-table table thead tr th:nth-of-type(2) {
    width: 120px;
  }
}
.features-table table thead tr th:nth-of-type(3) {
  width: 200px;
}
@media screen and (max-width: 767px) {
  .features-table table thead tr th:nth-of-type(3) {
    width: 120px;
  }
}
.features-table table thead tr th:nth-of-type(4) {
  width: 200px;
}
@media screen and (max-width: 767px) {
  .features-table table thead tr th:nth-of-type(4) {
    width: 120px;
  }
}
.features-table table tbody td {
  text-align: center;
}
@media screen and (max-width: 767px) {
  .features-table table tbody td {
    font-size: 0.875rem;
  }
}
.features-table table tbody td:first-child {
  text-align: left;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 24px;
}
.features-table table tbody td > i {
  display: inline-flex;
  justify-content: center;
  background-color: #00B87E;
  width: 28px;
  height: 28px;
  border-radius: 100px;
}
.features-table table tbody td > i svg {
  fill: #FFFFFF;
  width: 14px;
}
.features-table table th.highlighted, .features-table table td.highlighted {
  background-color: rgba(255, 136, 71, 0.2);
}

/**
 *
 * DO NOT EDIT BASE
 *
 * Add additional color classes if required
 *
 * Every tooltip you'll ever need can be created from these o-tooltip class
 *
 * To modify use custom -l classes on html element
 *
 * 1. Base
 *
 * 2. Data tooltip
 *
 * 3. HTML tooltip
 *
 * 4x. Modifiers
 *
 * 5. Note Taking
 *
 * Z. Custom Layouts
 *
 */
/* ==========================================================================
1. Base
========================================================================== */
.o-fragment--tooltip {
  color: #FFFFFF;
}

/* ==========================================================================
2. Data tooltip
========================================================================== */
/* ==========================================================================
* 3. HTML tooltip
========================================================================== */
/* ==========================================================================
4a. Top Left
========================================================================== */
/* ==========================================================================
4b. Top Right
========================================================================== */
/* ==========================================================================
5. Note Taking
========================================================================== */
.o-fragment--tooltip {
  opacity: 1;
  visibility: visible;
  display: flex;
  flex-direction: row;
  background: #14161E !important;
  height: 48px;
  padding: 0 7px 0 7px !important;
  user-select: none;
  border-radius: 16px;
}
.o-fragment--tooltip span {
  cursor: pointer;
}
.o-fragment--tooltip:after {
  content: none;
}
.o-fragment--tooltip > span {
  display: flex;
  align-items: center;
  line-height: 1;
}
.o-fragment--tooltip > div {
  display: flex;
  align-items: center;
  line-height: 1;
}
.o-fragment--tooltip > div > button {
  display: flex;
  align-items: center;
  line-height: 1;
}
.o-fragment--tooltip svg {
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
}
.o-fragment--tooltip .o-tooltip__color {
  /* These are needed because Safari thinks it's ok to "select" a span. But we use
     the concept of selection to determine whether or not the tooltip for a fragment
     should be shown. Since only one thing can be selected at once, if the colour box
     can be selected then the text selection is lost, and hence the annotation.
  */
  user-select: none;
  -webkit-user-select: none;
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  position: relative;
  margin-left: 5px;
  margin-right: 5px;
}
.o-fragment--tooltip .o-tooltip__color--selected {
  width: 28px;
  height: 28px;
}
.o-fragment--tooltip .o-tooltip__color--selected:before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 16px;
  border: 3px solid #14161E;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -12px 0 0 -12px;
}
.o-fragment--tooltip .o-tooltip__color--yellow {
  background: #E3A93D;
}
.o-fragment--tooltip .o-tooltip__color--orange {
  background: #CF7F42;
}
.o-fragment--tooltip .o-tooltip__color--red {
  background: #E34A4C;
}
.o-fragment--tooltip .o-tooltip__color--purple {
  background: #B44EBF;
}
.o-fragment--tooltip .o-tooltip__color--blue {
  background: #106790;
}
.o-fragment--tooltip .o-tooltip__color--green {
  background: #AEB740;
}
.o-fragment--tooltip .o-tooltip__svg {
  display: flex;
  width: 20px;
  height: 24px;
  margin: 0 8px;
}
.o-fragment--tooltip .o-tooltip__svg svg {
  width: 20px;
}
.o-fragment--tooltip .o-tooltip__svg--delete {
  margin-left: 13px;
}
.o-fragment--tooltip .o-tooltip__svg--note {
  margin: 0 5px 0 10px;
}

/* ==========================================================================
Z. Custom Layouts
========================================================================== */
/**
 *  Written content
 *
 * 1. Checkbox ul
 * 2. Bulletless ul
 * 3. Embedded google form
 *
 */
/* ==========================================================================
  1. Checkbox ul
 ========================================================================== */
.written-content.checkbox-ul ul {
  padding-left: 0 !important;
}
.written-content.checkbox-ul ul li {
  list-style: none;
  padding-left: 40px;
  font-size: 16px;
  line-height: 1.5;
}
.written-content.checkbox-ul ul li::before {
  content: "";
  background-image: url(/assets/murakami/sprites/kodeco-icons/checkmark-completed-9477e13da288703753677ee812161f7fbb1c658e20ca71db3f2f11c7b746d476.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  display: inline-block;
  background-color: transparent;
  left: 0;
  width: 24px;
  height: 24px;
  top: calc(50% - 12px);
}

/* ==========================================================================
  2. Bulletless ul
 ========================================================================== */
.written-content.bulletless-ul ul {
  padding-left: 0 !important;
}
.written-content.bulletless-ul ul li {
  list-style: none;
  padding-left: 0;
}

/* ==========================================================================
  3. Embedded google form
 ========================================================================== */
.written-content .gform-iframe {
  width: 100%;
}

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

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

/**
 *  AI Disclosure (WEB-7659)
 *
 * 1. Variables
 * 2. Card
 * 3. Rows
 * 4. Lesson line
 * 5. Jump links
 * 6. Pre-policy notice
 * 7. Responsive
 * 8. Dark mode
 *
 */
/* ==========================================================================
  1. Variables
========================================================================== */
/* ==========================================================================
  2. Card
========================================================================== */
.ai-disclosure {
  box-sizing: border-box;
  container-type: inline-size;
  display: block;
  width: 100%;
  padding: 20px 24px;
  border: 1px solid #14161E;
  border-radius: 16px;
  background-color: #FFFFFF;
  color: #14161E;
}
.ai-disclosure .ai-disclosure__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #D7D7D7;
}
.ai-disclosure .ai-disclosure__heading {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #14161E;
}
.ai-disclosure .ai-disclosure__policy-link {
  font-size: 16px;
  line-height: 1.5;
  color: #CE3F00;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ai-disclosure {
  /* ==========================================================================
    3. Rows
  ========================================================================== */
}
.ai-disclosure .ai-disclosure__rows {
  margin: 0;
  padding: 14px 0 0;
}
.ai-disclosure .ai-disclosure__row {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  margin-top: 12px;
}
.ai-disclosure .ai-disclosure__row:first-child {
  margin-top: 0;
}
.ai-disclosure .ai-disclosure__label {
  display: grid;
  grid-template-columns: 30px 96px;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #3B3D43;
}
.ai-disclosure .ai-disclosure__icon {
  display: block;
  padding-top: 3px;
}
.ai-disclosure .ai-disclosure__icon .icon,
.ai-disclosure .ai-disclosure__icon svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: #3B3D43;
  stroke: #3B3D43;
}
.ai-disclosure .ai-disclosure__value {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: #14161E;
  text-wrap: pretty;
}
.ai-disclosure {
  /* The media row is answered per type, so it reads as a sub-list:
     "Diagrams: AI · Illustrations: Author". The middot is decoration between
     list items, so it is a pseudo-element rather than markup, and it never
     ends up orphaned at the end of a wrapped line. Each pair is free to wrap
     internally, which is what keeps the narrowest card from overflowing. */
}
.ai-disclosure .ai-disclosure__media {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ai-disclosure .ai-disclosure__media-item {
  display: flex;
  gap: 4px;
  min-width: 0;
  margin: 0;
  /* The kodeco theme gives every `li` a relative position and a left inset,
     so that its ::before square can be placed inside it. Undo both. */
  position: static;
  padding-left: 0;
  /* That square is drawn with ::before, which is also the only pseudo-element
     available for the separator. Take it back: no marker on the first item,
     a middot on every item that follows one. */
}
.ai-disclosure .ai-disclosure__media-item::before {
  content: none;
}
.ai-disclosure .ai-disclosure__media-item + .ai-disclosure__media-item::before {
  content: "·";
  position: static;
  width: auto;
  height: auto;
  /* 4px here plus the list's 4px inner gap matches the 8px between pairs */
  margin: 0 4px 0 0;
  background: none;
  border-radius: 0;
  color: #3B3D43;
}
.ai-disclosure .ai-disclosure__media-type {
  color: #3B3D43;
}
.ai-disclosure .ai-disclosure__meta {
  display: block;
  margin-top: 4px;
  font-family: "Relative Mono", monospace;
  font-size: 14px;
  line-height: 1.5;
  color: #3B3D43;
}
.ai-disclosure .ai-disclosure__meta-segment {
  white-space: nowrap;
}

/* The module's left column strips padding and radius off its `.tile`s, so the
   card deliberately carries no `.tile` class and keeps its own box here. */
.content-middle-left .ai-disclosure {
  margin-top: 80px;
}

/* ==========================================================================
  4. Lesson line
========================================================================== */
.ai-disclosure-line {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #14161E;
}
.ai-disclosure-line .ai-disclosure-line__value {
  color: #14161E;
}
.ai-disclosure-line .ai-disclosure-line__separator {
  color: #3B3D43;
}
.ai-disclosure-line .ai-disclosure-line__link {
  color: #3B3D43;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
  5. Jump links
========================================================================== */
.ai-disclosure-jump .icon,
.ai-disclosure-jump svg {
  width: 18px;
  height: 18px;
}

.ai-disclosure-jump-inline {
  font-size: 16px;
  color: #CE3F00;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
  6. Pre-policy notice
========================================================================== */
.ai-disclosure-notice {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 19px 24px;
  border: 1px solid #14161E;
  border-radius: 16px;
}
.ai-disclosure-notice .ai-disclosure-notice__link {
  color: #CE3F00;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.content-middle-left .ai-disclosure-notice {
  margin-top: 80px;
}

/* ==========================================================================
  7. Responsive
========================================================================== */
/* The card is fluid and has no breakpoints of its own: the value drops below
   its label when the card — not the viewport — gets narrow. The media query is
   a fallback for engines without container query support. */
@container (max-width: 480px) {
  .ai-disclosure .ai-disclosure__row {
    grid-template-columns: minmax(0, 1fr);
  }
  .ai-disclosure .ai-disclosure__media {
    flex-direction: column;
    gap: 4px 0;
  }
  /* One pair per line needs no separator, and a leading middot on a wrapped
     line reads as a bullet nobody asked for. */
  .ai-disclosure .ai-disclosure__media-item + .ai-disclosure__media-item::before {
    content: none;
  }
}
@media (max-width: 480px) {
  .ai-disclosure .ai-disclosure__row {
    grid-template-columns: minmax(0, 1fr);
  }
  .ai-disclosure .ai-disclosure__media {
    flex-direction: column;
    gap: 4px 0;
  }
  /* One pair per line needs no separator, and a leading middot on a wrapped
     line reads as a bullet nobody asked for. */
  .ai-disclosure .ai-disclosure__media-item + .ai-disclosure__media-item::before {
    content: none;
  }
}
/* ==========================================================================
  8. Dark mode
========================================================================== */
/* Neither dark surface in the original brief clears 3:1 against the page, so
   the card's boundary in dark mode is a 1px light border, not a fill.

   Murakami's night mode paints every h1-h5, span, p and a white with
   `!important`, which would flatten the muted label, the mono sub-line, the
   separator and both orange links. The colours below match that weight so the
   card keeps its own palette; the values are the ones in spec §4. */
.prefers-color-scheme--dark .ai-disclosure {
  border-color: #D7D7D7;
  background-color: #14161E;
  color: #FFFFFF;
}
.prefers-color-scheme--dark .ai-disclosure .ai-disclosure__header {
  border-bottom-color: #3B3D43;
}
.prefers-color-scheme--dark .ai-disclosure .ai-disclosure__heading {
  color: #FFFFFF !important;
}
.prefers-color-scheme--dark .ai-disclosure .ai-disclosure__policy-link {
  color: #FF5A00 !important;
}
.prefers-color-scheme--dark .ai-disclosure .ai-disclosure__label,
.prefers-color-scheme--dark .ai-disclosure .ai-disclosure__label-text {
  color: #D7D7D7 !important;
}
.prefers-color-scheme--dark .ai-disclosure .ai-disclosure__icon .icon,
.prefers-color-scheme--dark .ai-disclosure .ai-disclosure__icon svg {
  fill: #D7D7D7;
  stroke: #D7D7D7;
}
.prefers-color-scheme--dark .ai-disclosure .ai-disclosure__value,
.prefers-color-scheme--dark .ai-disclosure .ai-disclosure__media-value {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .ai-disclosure .ai-disclosure__media-type {
  color: #D7D7D7 !important;
}
.prefers-color-scheme--dark .ai-disclosure .ai-disclosure__media-item + .ai-disclosure__media-item::before {
  color: #D7D7D7;
}
.prefers-color-scheme--dark .ai-disclosure .ai-disclosure__meta,
.prefers-color-scheme--dark .ai-disclosure .ai-disclosure__meta-segment {
  color: #D7D7D7 !important;
}
.prefers-color-scheme--dark .ai-disclosure-line {
  color: #FFFFFF !important;
}
.prefers-color-scheme--dark .ai-disclosure-line .ai-disclosure-line__value {
  color: #FFFFFF !important;
}
.prefers-color-scheme--dark .ai-disclosure-line .ai-disclosure-line__separator,
.prefers-color-scheme--dark .ai-disclosure-line .ai-disclosure-line__link {
  color: #D7D7D7 !important;
}
.prefers-color-scheme--dark .ai-disclosure-jump-inline {
  color: #FF5A00 !important;
}
.prefers-color-scheme--dark .ai-disclosure-notice__link {
  color: #FF5A00 !important;
}

/**
* Book Chapter
*
*
* X. Chapter layout
*
* X. Chapter layout w/chapters
*
* X. Chapter actions
*
* X. Chapter search
*
* X. Chapter obfuscation
*
*/
/* ==========================================================================
X. Chapter layout
========================================================================== */
.chapter-layout {
  max-width: 1584px;
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: 296px 676px 296px;
  grid-column-gap: 32px;
  justify-content: space-between;
}
@media screen and (max-width: 1631px) {
  .chapter-layout {
    margin-left: 24px;
    margin-right: 24px;
  }
}
@media screen and (max-width: 1347px) {
  .chapter-layout {
    grid-template-columns: 98px calc(100% - 260px) 98px;
  }
}
@media screen and (max-width: 1199px) {
  .chapter-layout {
    grid-template-columns: 98px 1fr 98px !important;
  }
}
@media screen and (max-width: 1023px) {
  .chapter-layout {
    grid-template-columns: 100% !important;
  }
}
.chapter-layout .chapter-navigation .btn-chapters-desktop .btn-icon {
  min-width: 40px;
  min-height: 40px;
}
@media screen and (max-width: 1199px) {
  .chapter-layout .chapter-navigation .btn-chapters-desktop {
    display: none;
  }
}
.chapter-layout .chapter-navigation .btn-chapters-mobile {
  display: none;
}
@media screen and (max-width: 1199px) {
  .chapter-layout .chapter-navigation .btn-chapters-mobile {
    display: flex;
  }
}
@media screen and (max-width: 1023px) {
  .chapter-layout .chapter-navigation .btn-chapters-mobile {
    display: none;
  }
}
.chapter-layout .chapter-navigation .toc-collapsed {
  display: block;
  margin-top: -8px;
  position: sticky;
  top: 40px;
}
.chapter-layout .chapter-navigation .toc-collapsed .toc-container {
  overflow: visible;
}
.chapter-layout .chapter-navigation .toc-collapsed .toc-container .btn-label {
  justify-content: flex-start;
}
.chapter-layout .chapter-navigation .toc-collapsed .toc-container .btn-label a {
  padding-left: 0;
}
@media screen and (max-width: 1199px) {
  .chapter-layout .chapter-navigation .toc-expanded .btn-chapters-close .btn-chapters-close-desktop {
    display: none;
  }
}
.chapter-layout .chapter-navigation .toc-expanded .btn-chapters-close .btn-chapters-close-mobile {
  display: none;
}
@media screen and (max-width: 1199px) {
  .chapter-layout .chapter-navigation .toc-expanded .btn-chapters-close .btn-chapters-close-mobile {
    display: block;
    max-height: 12px;
    max-width: 12px;
  }
}
@media screen and (max-width: 1199px) {
  .chapter-layout .chapter-navigation .toc-expanded .toc-container {
    max-height: calc(100vh - 48px);
  }
}
@media screen and (max-width: 1023px) {
  .chapter-layout .chapter-navigation .toc-expanded .toc-container {
    max-height: calc(100vh - 124px);
  }
}
@media screen and (max-width: 1199px) {
  .chapter-layout .chapter-navigation .toc-expanded {
    display: none;
  }
}
.chapter-layout .written-content {
  max-width: 676px;
  width: 100%;
  margin: 0 auto;
}
.chapter-layout .written-content pre {
  border: 1px solid #14161E;
}
.chapter-layout #c-global-header {
  width: 40px;
  justify-self: flex-end;
}

/* ==========================================================================
X. Chapter layout w/chapters
========================================================================== */
@media screen and (max-width: 1347px) {
  .l-admin--sidebar-open .chapter-layout {
    grid-template-columns: 296px calc(100% - 656px) 296px;
  }
}
@media screen and (max-width: 1199px) {
  .l-admin--sidebar-open .chapter-layout .toc-collapsed {
    display: block !important;
  }
}
@media screen and (max-width: 1023px) {
  .l-admin--sidebar-open .chapter-layout .toc-collapsed {
    display: none !important;
  }
}
@media screen and (max-width: 1199px) {
  .l-admin--sidebar-open .chapter-layout .toc-expanded {
    display: none !important;
    width: calc(100% - 48px);
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 9999999;
  }
}
@media screen and (min-width: 1200px) {
  .l-admin--sidebar-open .chapter-layout .toc-expanded .toc-body {
    padding-bottom: 176px;
  }
}
@media screen and (max-width: 1199px) {
  .l-admin--sidebar-open.s_show_mobile_menu .chapter-layout .toc-expanded {
    display: block !important;
  }
}
@media screen and (max-width: 1199px) {
  .l-admin--sidebar-open.s_show_mobile_menu .chapter-layout .toc-expanded .toc .toc-body {
    padding-bottom: 144px;
  }
}
@media screen and (max-width: 1023px) {
  .l-admin--sidebar-open.s_show_mobile_menu .chapter-layout .toc-expanded .toc .toc-body {
    padding-bottom: 220px;
  }
}

/* ==========================================================================
X. Chapter actions
========================================================================== */
.icon-close {
  width: 12px;
  height: 12px;
}

.chapter-actions-sticky {
  position: sticky;
  top: 40px;
}

.chapter-actions .icon-notepad {
  width: 15px;
  height: 20px;
}
.chapter-actions .icon-customize {
  width: 22px;
  height: 14px;
  max-height: none;
  max-width: none;
}
.chapter-actions .icon-arrow {
  width: 14px;
  height: 15px;
}
.chapter-actions li .modal > .modal-wrapper {
  text-align: left;
}
.chapter-actions li .modal > .modal-wrapper > p {
  line-height: 1.5em;
}

/* ==========================================================================
X. Chapter search
========================================================================== */
.chapter-search .chapter-search-results ul li {
  padding: 24px 0;
}
.chapter-search .pagination {
  width: 100%;
}
.chapter-search .pagination .page {
  border-bottom: none;
}
.chapter-search .pagination .next {
  margin-left: auto;
}

/* ==========================================================================
X. Chapter obfuscation
========================================================================== */
.c-banner-draper-sticky-chapter {
  max-width: 1188px !important;
}
@media screen and (max-width: 1023px) {
  .c-banner-draper-sticky-chapter {
    bottom: 100px !important;
  }
}
@media screen and (max-width: 767px) {
  .c-banner-draper-sticky-chapter {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}
@media screen and (max-width: 767px) {
  .c-banner-draper-sticky-chapter > div {
    flex-direction: column;
    align-items: flex-start;
  }
}
.c-banner-draper-sticky-chapter .btn-normalw {
  text-decoration: none;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .c-banner-draper-sticky-chapter .btn-normalw {
    margin-left: 0 !important;
    margin-top: 16px;
  }
}

/**
* Cards
*
* Designs for card style components
*
* 1. Follow Pillar Card
*
* 2. Skill Level Card
*
* 3. Plan Card
*
* 4a. Card Platform
*
* 4b. Card Platform Variations
*
* 5. Option Card
*
* 6. Simple Card
*
* 7. Book card artwork
*
* 8. Multi-modal learning path module card
*
* 9. Minimal card (used in search results)
*
*/
/* ==========================================================================
1. Follow Pillar Card
========================================================================== */
/* ==========================================================================
2. Skill Level Card
========================================================================== */
/* ==========================================================================
3. Plan Card
========================================================================== */
/* ==========================================================================
3. Plan Card (Neon)
========================================================================== */
/* ==========================================================================
4a. Card Platform
========================================================================== */
/* ==========================================================================
4b. Card Platform Variations
========================================================================== */
/* ==========================================================================
5. Option card
========================================================================== */
/* ==========================================================================
6. Simple card
========================================================================== */
/* ==========================================================================
7. Book card artwork
========================================================================== */
.card .card-topright .card-artwork-edition {
  overflow: hidden;
}
.card .card-topright .card-artwork-edition > img {
  min-width: 100%;
  min-height: 100%;
}
.card .card-topright .card-artwork-blog {
  background-color: rgba(207, 127, 66, 0.15);
}
.card .card-topright .card-artwork-blog > img.blog-artwork-mask {
  width: 53px;
  height: 53px;
  object-fit: cover;
  max-width: none;
  max-height: none;
  mask-image: url(/assets/murakami/sprites/kodeco-brand/symbol-orange-784b3dd32c5dc95a8db65d615796025c757688cf5056f633db6c136c2d2b6ab1.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url(/assets/murakami/sprites/kodeco-brand/symbol-orange-784b3dd32c5dc95a8db65d615796025c757688cf5056f633db6c136c2d2b6ab1.svg);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.card .card-topright .card-artwork-kodebit {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #14161E;
}
.card .card-topright .card-artwork-kodebit > img {
  width: 60px;
  height: auto;
}

/* ==========================================================================
8. Multi-modal LP hompage module card
========================================================================== */
.learning-path.content-module .card .card-topleft .badge > svg {
  fill: #FFFFFF;
}
.learning-path.content-module .card .card-description .description-row {
  display: inline-flex;
  gap: 16px;
  align-items: flex-end;
  width: 100%;
  z-index: 4;
}
@media screen and (max-width: 767px) {
  .learning-path.content-module .card .card-description .description-row {
    flex-direction: column;
  }
}
.learning-path.content-module .card .card-description .description-row .do-not-shrink {
  flex-shrink: 0;
}
.learning-path.content-module .card .card-description .description-row .description-action {
  display: flex;
  flex-shrink: 0;
  gap: 16px;
}
@media screen and (max-width: 767px) {
  .learning-path.content-module .card .card-description .description-row .description-action {
    align-self: flex-start;
  }
}
@media screen and (max-width: 767px) {
  .learning-path.content-module .card .card-description .description-row.description-with-progress {
    flex-direction: row;
  }
}
.learning-path.content-module .card .card-description .description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.learning-path.content-module .card .card-action .accordion {
  z-index: 3;
}
.learning-path.content-module .card .card-action .accordion details[open] .accordion-open {
  display: inline;
}
.learning-path.content-module .card .card-action .accordion details[open] .accordion-closed {
  display: none;
}
.learning-path.content-module .card .card-action .accordion details:not([open]) .accordion-open {
  display: none;
}
.learning-path.content-module .card .card-action .accordion details:not([open]) .accordion-closed {
  display: inline;
}
.learning-path.content-module .card .card-action .accordion-trigger {
  padding: 0;
}
.learning-path.content-module .card .card-action .accordion-trigger .trigger-text {
  font-weight: 500;
}
.learning-path.content-module .card .card-action ul.lesson-list li {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.learning-path.content-module .card .card-action ul.lesson-list li .left-icon {
  flex-shrink: 0;
  flex-grow: 0;
}
.learning-path.content-module .card .card-action ul.lesson-list li .right-text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.learning-path.content-module .card .card-action ul.lesson-list li .right-text span:first-child a:first-child:hover {
  text-decoration: underline;
}
.learning-path.content-module .card .card-action ul.lesson-list li:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
9. Minimal card (used in search results)
========================================================================== */
.card-minimal .card-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 1rem;
  background-color: #FFFFFF;
}
.card-minimal .card-top .tooltip {
  z-index: 2;
}
.card-minimal .card-top > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-minimal .card-top .card-title {
  font-size: 1.5rem;
  margin: 0;
}
.card-minimal .card-top .card-subtitle {
  font-size: 1rem;
  margin: 0;
}
.card-minimal .card-top {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
.card-minimal .card-bottom {
  gap: 16px;
  align-items: center;
}
.card-minimal .card-bottom .card-metadata {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
.card-minimal .card-bottom .card-metadata svg {
  width: 20px;
  height: 20px;
}
.card-minimal .card-bottom .icon {
  width: 16px;
  height: 16px;
}
.card-minimal .card-bottom .snippet {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/**
 *  Child content list is a type of accordion used on the video course and book
 *  homepages. We provide overrides for interactivity, and child content status.
 *
 * 1. Overrides
 * 2. Actions
 * 3. Appearance
 *
 */
/* ==========================================================================
  1. Overrides
 ========================================================================== */
.child-content-list {
  border-radius: 16px;
}
.child-content-list .accordion-trigger {
  padding: 24px;
}
.child-content-list .accordion-trigger .accordion-number {
  color: #FFFFFF;
  background-color: #14161E;
  border-radius: 12px;
}
.child-content-list .accordion-trigger .accordion-number[data-type=quiz] {
  background-color: #597CEE;
}
.child-content-list .accordion-trigger .accordion-number svg {
  fill: white;
}
.child-content-list .accordion-trigger .accordion-number .badge {
  font-size: 1.125rem;
  letter-spacing: unset;
  font-weight: 400;
}
.child-content-list .accordion-trigger .accordion-header a.accordion-title {
  text-decoration: none;
  color: #14161E;
  word-break: break-word;
}
.child-content-list .accordion-trigger .accordion-header a.accordion-title:hover {
  text-decoration: underline;
  color: #CE3F00;
  transition: none;
}
.child-content-list .accordion-trigger .accordion-opener {
  display: flex;
  align-items: center;
}
.child-content-list .content-description {
  margin-top: -16px;
}
.child-content-list .content-description p {
  margin-top: 16px;
}
.child-content-list .content-description p:first-of-type {
  margin-top: 0;
}
.child-content-list .content-description p > code {
  font-size: 0.875rem;
  background-color: rgba(215, 215, 215, 0.4980392157);
  padding: 2px 6px;
  border-radius: 8px;
}

/* ==========================================================================
 2. Actions
========================================================================== */
.child-content-list .accordion-trigger .accordion-number .child-content-action--number {
  display: inline;
  color: #FFFFFF;
}
.child-content-list .accordion-trigger .accordion-number .child-content-action--checkmark {
  display: none;
  max-width: 14px;
  max-height: 14px;
}
.child-content-list .child-content--completed .accordion-trigger .accordion-number {
  background-color: #00B87E;
}
.child-content-list .child-content--completed .accordion-trigger .accordion-number .child-content-action--number {
  display: none;
}
.child-content-list .child-content--completed .accordion-trigger .accordion-number .child-content-action--checkmark {
  display: inline;
}

/* ==========================================================================
 3. Appearance
========================================================================== */
.child-content-list-header {
  font-size: 1.5rem;
  margin-top: 48px;
  margin-bottom: 32px;
  word-break: break-word;
}

.child-content-list-header + .child-content-list-description {
  margin-top: -8px;
  word-break: break-word;
}

.child-content-list-description {
  margin-bottom: 32px;
}
.child-content-list-description p, .child-content-list-description ul, .child-content-list-description ol {
  margin-top: 20px;
  word-break: break-word;
}
.child-content-list-description p:first-of-type, .child-content-list-description ul:first-of-type, .child-content-list-description ol:first-of-type {
  margin-top: 0;
}

/**
 * Content
 *
 * Components for written tutorials, videos and screencasts
 *
 * 1. Written Tutorial
 *
 * 1a. Written Tutorial (Dark)
 *
 * 1b. Written Tutorial (Event)
 *
 * 2. Light code blocks
 *
 * 3. Admin Edit Banner
 *
 * 4. Sticky Options Banner
 *
 * 5. Book Chapter
 *
 * 5a. Book Chapter (Dedications)
 *
 * 5b. Book Chapter (Team)
 *
 * 6. Content Module
 */
/* ==========================================================================
 1. Written Tutorial
 ========================================================================== */
/* ==========================================================================
 5. Book Chapter
 ========================================================================== */
.c-book-chapter code {
  font-size: 0.9375rem;
}
.c-book-chapter pre code {
  font-size: 0.875rem;
}
.c-book-chapter figure.l-image-bordered img {
  padding: 8px;
  border-radius: 16px;
  border: 1px solid #14161E;
}
.c-book-chapter figure figcaption {
  font-family: "Relative Mono" !important;
  font-size: 0.875rem;
  color: #14161E;
  margin-bottom: 40px;
}
.c-book-chapter blockquote p {
  font-size: 1rem;
  font-family: "Relative" !important;
}
.c-book-chapter blockquote a {
  color: #CE3F00;
}
.c-book-chapter blockquote.card > div {
  background: #FF8847;
}
.c-book-chapter blockquote.card .card-topright::before {
  box-shadow: -4px 4px 0 4px #FF8847;
}
.c-book-chapter blockquote.card .card-topright .card-artwork svg {
  width: 24px;
  height: 24px;
  fill: #FFFFFF;
}

.book-chapter__links {
  padding: 1.5rem 0;
  border-bottom: 1px solid #D7D7D7;
  border-top: 1px solid #D7D7D7;
}
.book-chapter__links a.prev {
  color: #14161E;
}
.book-chapter__links a.next {
  color: #FFFFFF;
}

/* ==========================================================================
 5a. Book Chapter (Dedications)
 ========================================================================== */
.c-book-chapter__dedications {
  max-width: 568px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 18px;
}
.c-book-chapter__dedications p {
  text-align: center;
}
.c-book-chapter__dedications p:nth-child(even) {
  margin-top: 12px !important;
  margin-bottom: 48px;
}

/* ==========================================================================
 5b. Book Chapter (Team)
 ========================================================================== */
.c-book-chapter__team h2 {
  margin-bottom: 24px;
}
.c-book-chapter__team {
  padding-top: 24px;
}
@media screen and (max-width: 767px) {
  .c-book-chapter__team {
    padding-top: 15px;
  }
}
.c-book-chapter__team > div {
  display: flex;
  margin-bottom: 45px;
}
@media screen and (max-width: 767px) {
  .c-book-chapter__team > div {
    margin-bottom: 24px;
  }
}
.c-book-chapter__team figure {
  width: 180px;
  min-width: 180px;
  margin-right: 24px;
}
@media screen and (max-width: 767px) {
  .c-book-chapter__team figure {
    width: 60px;
    min-width: 60px;
    margin-right: 15px;
  }
}
.c-book-chapter__team figure img {
  width: 100%;
  height: auto;
  margin: auto;
}
.c-book-chapter__team p {
  margin: 0 !important;
}
.c-book-chapter__team p strong:first-child {
  font-size: 1.5rem;
  line-height: 0;
}
@media screen and (max-width: 767px) {
  .c-book-chapter__team p strong:first-child {
    font-size: 1.25rem;
  }
}
.c-book-chapter__team .l-image-bordered img {
  border: 1px solid #14161E;
  border-radius: 16px;
}

/* ==========================================================================
  6. Content Module
========================================================================== */
@media screen and (max-width: 1023px) {
  .content-module .triad {
    width: 398px;
    max-width: 398px;
    margin: 0 auto;
  }
}
.content-module .breadcrumbs.breadcrumbs-video {
  text-align: unset;
  padding: unset;
  width: min(1536px, 100vw - 48px);
}
.content-module .breadcrumbs.breadcrumbs-video .dropdown,
.content-module .breadcrumbs.breadcrumbs-video > a.dropdown-line {
  display: inline-block;
}
.content-module nav ul.content-list--padded li {
  padding: 12px 24px;
  margin: unset;
  align-items: center;
}
.content-module nav ul.content-list--padded li:hover, .content-module nav ul.content-list--padded li.active {
  background: #F7F7F7;
}
.content-module nav ul.content-list--padded li:not(.content-list--completed) .content-list--icon-circle {
  display: none;
}
.content-module nav ul.content-list--padded li.content-list--completed .content-icon {
  display: none;
}
.content-module .video-episode {
  margin-top: 80px;
  gap: 32px;
}
@media screen and (max-width: 1023px) {
  .content-module .video-episode {
    gap: 0;
    margin-top: 24px;
  }
}
@media screen and (min-width: 1024px) {
  .content-module .video-episode.video-episode-toc--open:not(.content-module .video-episode.video-episode--cinema) {
    grid-template-columns: 396px 1fr 40px;
  }
}
@media screen and (min-width: 1024px) {
  .content-module .video-episode.video-episode-toc--open:not(.content-module .video-episode.video-episode--cinema) .content-action__wrapper {
    grid-row: span 2;
  }
}
@media screen and (max-width: 1023px) {
  .content-module .video-episode .content-action__wrapper {
    padding-top: 36px;
    padding-bottom: 24px;
  }
}
@media screen and (max-width: 1023px) {
  .content-module .video-episode.text .video-toc {
    grid-row: 3;
  }
}
.content-module .video-episode .video-toc {
  z-index: 0;
}
@media screen and (max-width: 1023px) {
  .content-module .video-episode .video-toc {
    margin: unset;
  }
}
.content-module .video-episode .video-toc .toc-expanded {
  padding-right: unset;
}
.content-module .video-episode .video-toc .toc-expanded .toc .toc-body {
  padding: 24px 0;
}
.content-module .video-episode .video-toc .section-list-header--wrapper {
  padding: 36px 24px 0;
  gap: 24px;
}
.content-module .video-episode .video-actions {
  max-height: 498px;
}
.content-module .video-episode.video-episode--cinema .video-actions {
  position: relative;
  top: 0;
}
.content-module .c-book-chapter header h1 {
  margin-top: unset;
}
.content-module .child-content-list > details #segment-tooltip::after {
  content: "Display segments";
}
.content-module .child-content-list > details[open] #segment-tooltip::after {
  content: "Hide segments";
}
.content-module .accordion-trigger.accordion-metadata {
  padding-left: 104px;
  gap: 24px;
}
.content-module .accordion-trigger.accordion-metadata .description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.content-module .accordion-trigger.accordion-metadata .accordion-opener {
  margin: unset;
  align-self: end;
}
.content-module .content-description {
  display: grid;
  gap: 16px;
  padding-top: 16px;
  padding-right: 24px;
}
.content-module .content-description .content-segment {
  display: flex;
  gap: 16px;
  align-items: center;
  min-height: 48px;
}
.content-module .content-description .content-segment-icon {
  width: 24px;
  height: 24px;
}
.content-module .content-description .content-segment-icon svg {
  width: 24px;
  height: 24px;
}
.content-module .content-description .content-segment-info {
  display: grid;
  align-items: center;
}
.content-module .content-description .content-segment-info .segment-title {
  text-decoration: none;
}
.content-module .content-description .content-segment-info .segment-title:hover {
  text-decoration: underline;
}
.content-module .content-description .content-segment-info .segment-metadata {
  font-size: 0.875rem;
}
.content-module footer.content-footer a {
  color: #FFFFFF;
}
.content-module footer.content-footer .contributors.tile a {
  color: #CE3F00;
}

/**
 *  Content Hero
 *
 * 1. Variables
 * 2. Hero
 * 3. Responsiveness
 * 4. Chromeless Page hero
 * 5. Book specific
 * 6. Content module specific
 * 7. Content module learning path specific
 *
 */
/* ==========================================================================
  1. Variables
 ========================================================================== */
/* This exists in column world, but we only have 14 of the 16. So we'll need to
  do some maths to work out widths and padding.
 */
/* ==========================================================================
  2. Hero
 ========================================================================== */
.content-hero {
  background-color: #14161E;
  border-radius: 40px;
  color: #FFFFFF;
  display: grid;
  padding: 80px 98px;
  grid-template-columns: 398px 1fr 98px;
  grid-column-gap: 8%;
}
@media screen and (max-width: 1279px) {
  .content-hero {
    padding: 80px;
    grid-template-columns: 398px 1fr;
  }
}
@media screen and (max-width: 1023px) {
  .content-hero {
    grid-template-columns: 1fr;
    padding: 80px 40px;
  }
}
@media screen and (max-width: 767px) {
  .content-hero .modal .fc-white {
    color: #FFFFFF;
  }
}
.content-hero .content-hero-left {
  width: 398px;
  max-width: 398px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-left {
    margin: 0 auto !important;
  }
}
.content-hero .content-hero-left p a {
  color: inherit;
}
.content-hero .content-hero-right, .content-module .content-hero.content-hero--dark .content-hero-left {
  min-width: 100%;
}
.content-hero .content-hero-right .content-hero-badge, .content-module .content-hero.content-hero--dark .content-hero-left .content-hero-badge {
  margin-bottom: 16px;
}
.content-hero .content-hero-right h1, .content-module .content-hero.content-hero--dark .content-hero-left h1 {
  font-size: 3rem;
  word-break: break-word;
}
.content-hero .content-hero-right p.description, .content-module .content-hero.content-hero--dark .content-hero-left p.description {
  display: block;
  font-size: 1.125rem;
  margin-top: 24px;
  word-break: break-word;
}
.content-hero .content-hero-right p.description a, .content-module .content-hero.content-hero--dark .content-hero-left p.description a {
  color: #FFFFFF;
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-right p.description a, .content-module .content-hero.content-hero--dark .content-hero-left p.description a {
    color: #14161E;
  }
}
.content-hero .content-hero-right .metadata, .content-module .content-hero.content-hero--dark .content-hero-left .metadata {
  margin-top: 24px;
  gap: 0;
}
@media screen and (max-width: 959px) {
  .content-hero .content-hero-right .metadata, .content-module .content-hero.content-hero--dark .content-hero-left .metadata {
    flex-direction: column;
  }
}
.content-hero .content-hero-right .metadata .icon-prefix, .content-module .content-hero.content-hero--dark .content-hero-left .metadata .icon-prefix {
  align-items: center;
}
.content-hero .content-hero-right .metadata > div > span, .content-module .content-hero.content-hero--dark .content-hero-left .metadata > div > span {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.content-hero .content-hero-right .metadata .version-count, .content-module .content-hero.content-hero--dark .content-hero-left .metadata .version-count {
  white-space: nowrap;
}
.content-hero .content-hero-right .metadata svg, .content-module .content-hero.content-hero--dark .content-hero-left .metadata svg {
  position: relative;
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-right .metadata svg, .content-module .content-hero.content-hero--dark .content-hero-left .metadata svg {
    fill: #14161E;
  }
}
.content-hero .content-hero-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: 32px;
}
.content-hero .content-hero-cta a.hero-other-versions {
  color: #FFFFFF;
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-cta a.hero-other-versions {
    color: #14161E !important;
  }
}
.content-hero .content-hero-cta .progress-control progress {
  background-color: rgba(215, 215, 215, 0.2);
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-cta .progress-control progress {
    background-color: rgba(215, 215, 215, 0.8);
  }
}
.content-hero .content-hero-cta .progress-control .dropdown .btn-iconxsm svg {
  fill: #D7D7D7;
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-cta .progress-control .dropdown .btn-iconxsm svg {
    fill: #14161E;
  }
}
.content-hero .content-hero-cta .progress-control + p {
  margin-top: 24px;
}
.content-hero .content-hero-cta .progress-control + p + a {
  margin-top: 24px;
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-cta a.btn-largew.bg-black-night {
    border: none !important;
    color: #FFFFFF !important;
  }
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-cta a.btn-largew.bg-black-night:hover {
    background-color: #43454B !important;
  }
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-cta a.btn-largew.dark-bc-white {
    border: 1px solid #FFFFFF !important;
  }
}
.content-hero .content-hero-cta .btn-largew {
  min-height: 56px;
  padding-top: 16px;
  padding-bottom: 16px;
  height: auto;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-cta a.bg-orange-determination {
    color: #FFFFFF !important;
  }
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-cta .mobile-fc-black-night {
    color: #14161E;
  }
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-cta .mobile-fc-white {
    color: #FFFFFF;
  }
}
.content-hero .content-hero-action,
.content-hero a.content-hero-action {
  min-height: 32px;
  align-items: center;
  color: #FFFFFF;
  margin-top: 8px;
}
.content-hero .content-hero-action.icon-prefix,
.content-hero a.content-hero-action.icon-prefix {
  gap: 0;
}
.content-hero .content-hero-action.icon-prefix a,
.content-hero .content-hero-action.icon-prefix span,
.content-hero a.content-hero-action.icon-prefix a,
.content-hero a.content-hero-action.icon-prefix span {
  color: #FFFFFF;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-action.icon-prefix a,
  .content-hero .content-hero-action.icon-prefix span,
  .content-hero a.content-hero-action.icon-prefix a,
  .content-hero a.content-hero-action.icon-prefix span {
    color: #14161E;
  }
}
.content-hero .content-hero-action.icon-prefix svg,
.content-hero a.content-hero-action.icon-prefix svg {
  fill: #FFFFFF;
  margin-right: 16px;
}
.content-hero .modal {
  /* This is a hack, but I don't know how to do it better */
}
.content-hero .modal a.fc-orange-determination {
  color: #CE3F00;
}
.content-hero .modal.modal-share {
  color: #14161E;
}
.content-hero.content-hero--dark .tooltip-text {
  background-color: #3B3D43;
}

/* ==========================================================================
  2. Responsiveness
 ========================================================================== */
@media screen and (max-width: 767px) {
  .content-hero {
    background-color: unset;
    color: unset;
    padding: 0;
    flex-flow: wrap;
    margin-top: 80px;
  }
  .content-hero .content-hero-left {
    margin-left: 0;
    width: 100%;
  }
  .content-hero .content-hero-left .btn-largew.bg-black-night {
    border: 1px solid #14161E;
    color: #14161E;
    background-color: transparent;
  }
  .content-hero .content-hero-right {
    margin-top: 24px;
    margin-left: 0;
    width: 100%;
    padding: 0;
  }
  .content-hero .content-hero-right h1 {
    font-size: 2.25rem;
  }
  .content-hero .content-hero-right a {
    color: #14161E;
  }
  .content-hero .content-hero-action,
  .content-hero a.content-hero-action {
    color: #14161E;
  }
  .content-hero .content-hero-action.icon-prefix a,
  .content-hero a.content-hero-action.icon-prefix a {
    color: #14161E;
  }
  .content-hero .content-hero-action.icon-prefix svg,
  .content-hero a.content-hero-action.icon-prefix svg {
    fill: #14161E;
  }
  .content-hero .content-hero-share {
    width: 100%;
  }
}
/* ==========================================================================
  4. Chromeless page
 ========================================================================== */
.content-hero-chromeless {
  display: flex;
}
.content-hero-chromeless img {
  border-radius: 40px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .content-hero-chromeless img {
    border-radius: 24px;
  }
}

/* ==========================================================================
  5. Book specific
 ========================================================================== */
.book-cover-art {
  text-align: center;
}
.book-cover-art img {
  width: 100%;
  border-radius: 32px;
  border: 1px solid #D7D7D7;
}

.tile .image {
  min-width: 24px;
  display: block;
  margin-right: 0.8em;
}

/* ==========================================================================
  6. Content module specific
 ========================================================================== */
@media screen and (min-width: 1024px) {
  .content-module .content-hero {
    grid-column-gap: 105px;
    grid-template-columns: minmax(494px, 690px) minmax(230px, 378px);
    padding: 72px 106px;
    min-height: 676px;
  }
}
.content-module .content-hero .content-hero-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 398px;
}
@media screen and (max-width: 1023px) {
  .content-module .content-hero .content-hero-right {
    grid-row: 1;
    min-width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .content-module .content-hero .content-hero-left {
    display: grid;
    width: unset;
    min-width: 100%;
    margin: unset;
  }
}
@media screen and (max-width: 1023px) {
  .content-module .content-hero .content-hero-left {
    grid-row: 2;
    min-width: 100%;
  }
}
.content-module .content-hero .content-hero-left .content-hero-cta {
  max-width: 494px;
}
.content-module .content-hero .content-hero-left .metadata {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  margin-top: 24px;
}
.content-module .content-hero .content-hero-left .programme-metadata {
  display: flex;
  align-self: flex-end;
}
@media screen and (max-width: 767px) {
  .content-module .content-hero .content-hero-left .programme-metadata {
    flex-direction: column;
    align-items: flex-start;
  }
}
.content-module .content-hero .content-hero-left .programme-metadata__segment {
  display: flex;
  gap: 16px;
  padding-right: 20px;
  padding-left: 20px;
  border-right: 1px solid #FFFFFF;
  margin-top: 36px;
}
@media screen and (max-width: 767px) {
  .content-module .content-hero .content-hero-left .programme-metadata__segment {
    border-right: none;
    padding-left: unset;
    padding-right: unset;
  }
}
.content-module .content-hero .content-hero-left .programme-metadata__segment:first-of-type {
  padding-left: 0;
}
.content-module .content-hero .content-hero-left .programme-metadata__segment:last-of-type {
  border-right: none;
  padding-right: 0;
}
.content-module .content-hero .content-hero-left .programme-metadata__segment-icon {
  align-self: center;
}
.content-module .content-hero .content-hero-left .programme-metadata__segment-info {
  display: grid;
  align-items: center;
  gap: 6px;
}
@media screen and (max-width: 767px) {
  .content-module .content-hero.content-hero--dark svg {
    fill: #14161E;
  }
}

/* ==========================================================================
  7. Content module learning path specific
 ========================================================================== */
.content-module.learning-path .content-hero {
  background-color: #FFFFFF;
  color: inherit;
  min-height: 564px;
  border: 1px #14161E solid;
}
@media screen and (max-width: 767px) {
  .content-module.learning-path .content-hero {
    background-color: inherit;
    border: none;
  }
}
.content-module.learning-path .content-hero .content-hero-left {
  display: grid;
}
.content-module.learning-path .content-hero .content-hero-left .metadata {
  gap: 0px;
}
@media screen and (max-width: 767px) {
  .content-module.learning-path .content-hero .content-hero-left .metadata {
    grid-row: 6;
  }
}
.content-module.learning-path .content-hero .content-hero-left .programme-metadata__segment {
  border-color: #14161E;
}

/* ==========================================================================
  8. Program
 ========================================================================== */
@media screen and (min-width: 1024px) {
  .program .content-hero {
    grid-column-gap: 105px;
    grid-template-columns: minmax(494px, 690px) minmax(230px, 378px);
    padding: 72px 106px;
    min-height: 676px;
  }
}
.program .content-hero .content-hero-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 398px;
}
@media screen and (max-width: 1023px) {
  .program .content-hero .content-hero-right {
    grid-row: 1;
    min-width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .program .content-hero .content-hero-left {
    display: grid;
    width: unset;
    min-width: 100%;
    margin: unset;
  }
}
@media screen and (max-width: 1023px) {
  .program .content-hero .content-hero-left {
    grid-row: 2;
    min-width: 100%;
  }
}
.program .content-hero .content-hero-left .content-hero-cta {
  max-width: 494px;
}
.program .content-hero .content-hero-left .metadata {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  margin-top: 24px;
}
.program .content-hero .content-hero-left .programme-metadata {
  display: flex;
  align-self: flex-end;
}
@media screen and (max-width: 767px) {
  .program .content-hero .content-hero-left .programme-metadata {
    flex-direction: column;
    align-items: flex-start;
  }
}
.program .content-hero .content-hero-left .programme-metadata__segment {
  display: flex;
  gap: 16px;
  padding-right: 20px;
  padding-left: 20px;
  border-right: 1px solid #FFFFFF;
  margin-top: 36px;
}
@media screen and (max-width: 767px) {
  .program .content-hero .content-hero-left .programme-metadata__segment {
    border-right: none;
    padding-left: unset;
    padding-right: unset;
  }
}
.program .content-hero .content-hero-left .programme-metadata__segment:first-of-type {
  padding-left: 0;
}
.program .content-hero .content-hero-left .programme-metadata__segment:last-of-type {
  border-right: none;
  padding-right: 0;
}
.program .content-hero .content-hero-left .programme-metadata__segment-icon {
  align-self: center;
}
.program .content-hero .content-hero-left .programme-metadata__segment-info {
  display: grid;
  align-items: center;
  gap: 6px;
}
@media screen and (max-width: 767px) {
  .program .content-hero.content-hero--dark svg {
    fill: #14161E;
  }
}

/**
 *  Contributors
 *
 * 1. Contributors' tile appearance
 * 2. Grid
 * 3. Primary Contributors
 *
 */
/* ==========================================================================
  1. Contributors' Tile Appearance
 ========================================================================== */
.contributors.tile {
  border: 1px solid #14161E;
}
.contributors.tile .tile-header h2 {
  margin: 0;
}
.contributors.tile a {
  color: #CE3F00;
}
.contributors.tile .contributor {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
.contributors.tile .contributor p {
  margin: 0;
}

.modal-contributors .contributors.tile {
  border: none;
  padding: unset;
}

/* ==========================================================================
  2. Grid
 ========================================================================== */
@media screen and (max-width: 959px) {
  .contributors.tile {
    margin-bottom: 144px;
  }
}
.contributors.tile .contributors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin: 48px 80px 72px;
}
@media screen and (max-width: 959px) {
  .contributors.tile .contributors-grid {
    grid-template-columns: 1fr;
    margin-left: 0;
    margin-right: 0;
  }
}

.modal-contributors .contributors.tile .contributors-grid {
  margin: 0;
}

/* ==========================================================================
  3. Primary contributors
 ========================================================================== */
.primary-contributors {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.primary-contributors .contributor-avatars {
  display: flex;
  gap: 48px;
  flex-flow: row wrap;
}
@media screen and (max-width: 959px) {
  .primary-contributors .contributor-avatars {
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
    gap: 30px;
  }
}
.primary-contributors .contributor-avatars .contributor img {
  max-width: 198px;
  max-height: 198px;
  border: none;
  padding: 0;
  border-radius: 24px;
}
@media screen and (max-width: 767px) {
  .primary-contributors .contributor-avatars .contributor img {
    max-width: 99px;
    max-height: 99px;
  }
}
.primary-contributors .contributor-avatars .contributor .contributor-name {
  margin-top: 16px;
  font-family: "Relative Mono";
  font-size: 1rem;
  text-align: center;
  display: block;
}
.primary-contributors .contributor-avatars .contributor .contributor-name > a {
  color: #CE3F00;
}
.primary-contributors p {
  margin-top: 16px;
  font-family: "Relative Mono";
  font-size: 0.875rem;
}
@media screen and (max-width: 767px) {
  .primary-contributors p {
    text-align: center;
  }
}
.primary-contributors a {
  color: #CE3F00;
}

/**
* Module background
*
* 1a. Module Background
*
* 1b. Module Background: Pattern Variations
*
*
*/
/* ==========================================================================
1a. Module Background
========================================================================== */
.module-background {
  width: 100%;
  height: 1000px;
  background-color: #14161E;
  border-radius: 0 48px 48px 48px;
  position: relative;
  z-index: -1;
  overflow: hidden;
}
.module-background:before {
  content: "";
  height: 240px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #F7F7F7;
  border-radius: 0 48px 0 0;
}
.module-background video {
  position: absolute;
  width: 100%;
  z-index: -1;
}
.module-background .module-background-round-top {
  width: 240px;
  height: 240px;
  position: relative;
}
.module-background .module-background-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;
}
.module-background .module-background-round-bottom {
  width: 240px;
  height: 240px;
  bottom: 0;
  left: 100%;
  position: relative;
}
.module-background .module-background-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. Module Background: Pattern Variations
========================================================================== */
.module-background-yellow {
  background-image: url(/assets/artwork/kodeco/module-page-header-yellow@1.5x-a226a061de6efb99f4331ce9b5a9fe4e7b302fdc99017c0aa90eac39b6d72294.jpg);
  background-size: 100%;
}

/**
 *  Modal
 *
 * 1. Full screen
 *
 */
/* ==========================================================================
  1. Full screen
 ========================================================================== */
.modal .modal-wrapper__full-screen .written-content > * {
  font-family: "Relative";
}
.modal .modal-wrapper__full-screen .written-content p {
  margin: unset;
  line-height: 1.5;
}
.modal .modal-wrapper__full-screen .toggle-button__description > * {
  font-size: inherit !important;
  line-height: inherit !important;
}
.modal .modal-wrapper__full-screen .toggle-button__description > p:first-of-type {
  display: inline;
}

/**
 * Navigation components
 *
 * 1. Sidebar - Branded sidebar can be used anywhere as alternative navigation to horizontal use layout modifiers to change width
 *
 * 1a. Sidebar Article
 *
 * 1b. Sidebar Article (White)
 *
 * 1c. My Interests - Logged in homepage
 *
 * 1d. Sidebar (Book)
 *
 * 2. Toggle States for Mobile Menus
 *
 * 3. Main Navigation
 *
 * 4. Explore: Dropdown Menu
 *
 * 5. User: Dropdown Menu
 *
 * 6. Pillar Navigation
 *
 * 7. Footer
 *
 * 8. Tabs
 *
 * 9. Mobile Navigator
 *
 * 10. Book Navigation
 *
 * 11. Paginator
 *
 */
/* ==========================================================================
   1. Sidebar
   ========================================================================== */
/* ==========================================================================
  1d. Sidebar Book
  ========================================================================== */
.c-sidebar-navigator li:after {
  background: none;
}
.c-sidebar-navigator li a {
  color: #14161E;
  gap: unset !important;
  margin-bottom: 0px !important;
}
.c-sidebar-navigator li a .c-sidebar-navigator__indicator {
  display: block;
  width: 4px;
  height: 4px;
  background: #14161E;
  border-radius: 50%;
  margin: 8px 24px 0 8px;
}
.c-sidebar-navigator li a.c-sidebar-navigator__link.is-active {
  text-decoration: underline;
}

/* ==========================================================================
   9. a Mobile Navigator
   ========================================================================== */
.c-mobile-navigator {
  background: #F7F7F7;
  bottom: 24px;
  left: 24px;
  width: calc(100% - 48px);
  border: 1px solid #14161E;
  box-shadow: unset;
  border-radius: 16px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 8px;
}

/* ==========================================================================
  12. Action wrapper
========================================================================== */
.content-action__wrapper {
  position: relative;
  height: 100%;
}

/**
* Photo mosiac 
*
* 1. Photo mosaic pieces
* 
*
*/
/* ==========================================================================
1. Photo mosaic pieces
========================================================================== */
.photo-mosaic-piece {
  width: 182px;
  height: 182px;
  border-radius: 24px;
}

.photo-mosaic-piece-l {
  width: 280px;
  height: 280px;
}

.photo-mosaic-piece-s {
  width: 82px;
  height: 82px;
  border-radius: 16px;
}

/**
 *  Program Hero
 *
 * 1. Variables
 * 2. Hero
 * 3. Testimonials
 * 5. Plan Cards
 * 6. FAQs
 * 7. Program metadata
 * 8. Resources
 * 9. Reasons To Believe(RTBs)
 * 10. Banner With Image
 *
 */
/* ==========================================================================
  1. Variables
========================================================================== */
/* ==========================================================================
  2. Hero
========================================================================== */
.program .content-hero {
  grid-template-columns: minmax(494px, 780px) minmax(230px, 320px);
  border: unset;
  padding: 120px 0;
  min-height: 320px;
}
@media screen and (max-width: 767px) {
  .program .content-hero {
    grid-template-columns: 1fr;
    padding-bottom: 60px;
    padding-top: 30px;
    color: #FFFFFF;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .program .content-hero {
    grid-template-columns: 1fr;
  }
}
.program .content-hero .modal .written-content {
  color: #14161E;
}
@media screen and (max-width: 1023px) {
  .program .content-hero-left .metadata > div {
    max-width: unset;
  }
}
@media screen and (max-width: 767px) {
  .program .content-hero-left nav.breadcrumbs a {
    color: #FFFFFF;
  }
}
@media screen and (max-width: 767px) {
  .program .content-hero-left nav.breadcrumbs .dropdown .dropdown-menu .dropdown-content a.dropdown-line {
    color: #14161E;
  }
}
@media screen and (max-width: 767px) {
  .program .content-hero-left nav.breadcrumbs .icon {
    fill: #FFFFFF;
  }
}
@media screen and (max-width: 1023px) {
  .program .content-hero .content-hero-right {
    display: none;
  }
}
.program .content-module .content-middle {
  grid-template-columns: 66.33% 30.33%;
  grid-column-gap: 5.33%;
}
@media screen and (max-width: 767px) {
  .program .content-module .content-middle {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 1023px) {
  .program .content-module .content-middle {
    grid-template-columns: 1fr;
  }
}
.program .content-middle {
  grid-template-columns: 66.33% 24.33%;
}
@media screen and (max-width: 1023px) {
  .program .content-middle {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 767px) {
  .program .content-middle .content-middle-right {
    margin-top: 0;
  }
}
.program .content-middle .content-middle-right .contributors img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
}
@media screen and (max-width: 767px) {
  .program .content-middle .content-middle-right .contributors.tile {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .program .content-middle .content-middle-right .contributors.tile {
    margin-bottom: 0;
  }
}
.program .content-middle .content-middle-left .prerequisites > div > ul {
  margin: 16px 0 16px 24px;
}
.program .content-middle .content-middle-left .prerequisites > div > ul > li {
  position: relative;
}
.program .content-middle .content-middle-left .prerequisites > div > ul > li:before {
  content: "•";
  color: #CE3F00;
  position: absolute;
  display: inline-block;
  background-color: transparent;
  left: -16px;
}
.program .content-middle .content-middle-left .prerequisites > div > ul > li + li {
  margin-top: 16px;
}
.program .content-middle .content-middle-left .prerequisites > div > ul > li > a {
  color: #CE3F00;
}

.program-index-hero {
  max-width: 1188px;
  gap: 24px;
  display: flex;
}
.program-index-hero--image-wrapper {
  display: flex;
  flex-direction: column;
}
.program-index-hero--image-wrapper .program-index-hero--image {
  max-width: 414px;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
}

/* ==========================================================================
  3. Testimonials
========================================================================== */
.program .testimonials {
  background-color: #FFFFFF;
}
.program .testimonials .testimonial-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}
@media screen and (max-width: 1023px) {
  .program .testimonials .testimonial-list {
    margin-top: 40px;
    grid-template-columns: 1fr;
  }
}
.program .testimonials .testimonial-list .card-image .card-topleft {
  z-index: 1;
}
.program .testimonials .testimonial-list .card-image .card-topleft .badge {
  margin-top: 24px;
}
.program .testimonials .testimonial-list .card-image .card-topleft .badge img {
  border-radius: 12px;
  height: auto;
  width: 100%;
}
.program .testimonials .testimonial-list .card-title {
  font-size: 1.25rem;
  font-weight: 500;
}
.program .testimonials .testimonial-list .card-metadata {
  margin-top: 8px;
  font-weight: 500;
}
.program .testimonials .testimonial-list .card-description {
  height: 100%;
  align-items: flex-start;
}

/* ==========================================================================
  5. Plan Cards
========================================================================== */
.program .plan_cards {
  display: flex;
  justify-content: center;
  align-items: center;
}
.program .plan_cards__container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  gap: 16px;
  margin-top: 24px;
}
@supports (selector(:has(*))) {
  .program .plan_cards__container:has(.plan_card:only-child) {
    grid-template-columns: 1fr;
    justify-content: center;
  }
  .program .plan_cards__container:has(.plan_card:nth-child(2):nth-last-child(1)) {
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
  }
  @media screen and (max-width: 1023px) {
    .program .plan_cards__container:has(.plan_card:nth-child(2):nth-last-child(1)) {
      grid-template-columns: 380px;
      margin-top: 40px;
    }
  }
}
@media screen and (max-width: 1023px) {
  .program .plan_cards__container {
    grid-template-columns: 380px;
    margin-top: 40px;
  }
}
.program .plan_cards__container .plan_card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  border-radius: 16px;
  padding: 24px 40px 24px 24px;
  max-width: 380px;
  width: 100%;
}
.program .plan_cards__footer {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
  color: #FFFFFF;
  margin-top: 24px;
}
@media screen and (max-width: 767px) {
  .program .plan_cards__footer {
    margin-top: 40px;
    gap: 40px;
  }
}
.program .plan_cards__footer > p {
  font-size: 1.125rem;
  line-height: 1.375rem;
}
.program .plan_cards__footer > a {
  color: #FFFFFF;
  font-size: 1.125rem;
  line-height: 1.375rem;
}

/* ==========================================================================
  6. FAQs
========================================================================== */
.program .faqs .content-middle {
  grid-template-columns: 24.33% 66.33%;
  margin-top: 80px;
}
@media screen and (max-width: 767px) {
  .program .faqs .content-middle {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .program .faqs .content-middle {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }
}
@media screen and (max-width: 767px) {
  .program .faqs .content-middle .content-middle-right.faq {
    margin-top: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .program .faqs .content-middle .content-middle-right.faq {
    margin-top: 40px;
  }
}
.program .faqs .content-middle .content-middle-right.faq .accordion-content details .content-description {
  padding-left: 24px;
}

/* ==========================================================================
  7. Program Metadata
========================================================================== */
.program .programme-metadata {
  display: flex;
  background-color: #FFFFFF;
  border: 1px solid #14161E;
  border-radius: 16px;
  padding: 24px;
  margin-top: 36px;
}
.program .programme-metadata > * {
  flex-grow: 1;
}
@media screen and (max-width: 767px) {
  .program .programme-metadata {
    flex-direction: column;
    gap: 24px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .program .programme-metadata {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .program .programme-metadata > * {
    flex: 1 0 50%;
  }
}
.program .programme-metadata__segment {
  display: flex;
  gap: 16px;
  padding-right: 20px;
  padding-left: 20px;
  border-right: 1px solid #14161E;
}
@media screen and (max-width: 767px) {
  .program .programme-metadata__segment {
    padding: 0;
    border-right: none;
    border-bottom: 1px solid #14161E;
    padding-bottom: 24px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .program .programme-metadata__segment {
    padding-right: 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .program .programme-metadata__segment:nth-of-type(2) {
    border-right: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .program .programme-metadata__segment:nth-of-type(3) {
    padding-left: 0;
    padding-top: 20px;
  }
}
.program .programme-metadata__segment:first-of-type {
  padding-left: 0;
}
.program .programme-metadata__segment:last-of-type {
  border-right: none;
  padding-right: 0;
}
@media screen and (max-width: 767px) {
  .program .programme-metadata__segment:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .program .programme-metadata__segment:last-of-type {
    padding-top: 20px;
  }
}
.program .programme-metadata__segment-icon {
  width: 30px;
  height: 30px;
  align-self: center;
}
.program .programme-metadata__segment-info {
  display: grid;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
  8. Resources
========================================================================== */
.program .content-middle .written-content ul li,
.program .content-middle .written-content ol li {
  font-family: "Relative";
  font-size: 1rem;
  line-height: 1.5rem;
}
.program .content-middle .written-content ul li {
  margin-top: 0px;
  padding-left: 24px;
}
.program .content-middle .written-content ul li::before {
  left: 12px;
  height: 3px;
  width: 3px;
  border-radius: 100%;
  background-color: #14161E;
}
.program .content-middle .written-content h1 {
  font-size: 1.25rem;
  line-height: 1.25;
  margin-top: unset;
}
.program .content-middle .written-content h2 {
  font-size: 2rem;
  line-height: 1.25;
  margin-top: unset;
}
.program .content-middle .written-content h3 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin-top: unset;
}
.program .content-middle .written-content h4 {
  font-size: 1.25rem;
  line-height: 1.25;
  margin-top: unset;
}
.program .content-middle .written-content .card-minimal.additional-information {
  gap: 30px;
}
.program .content-middle .written-content .card-minimal.additional-information a {
  color: #FFFFFF;
  margin-top: 1.875rem;
}

/* ==========================================================================
  9. Reasons To Believe(RTBs)
========================================================================== */
.program .rtbs {
  background-color: #FFFFFF;
  display: flex;
  flex-direction: row;
  gap: 40px;
}
@media screen and (max-width: 767px) {
  .program .rtbs {
    flex-direction: column;
    gap: 24px;
  }
}
.program .rtbs .rtbs-image {
  flex-shrink: 0;
  width: 50%;
}
@media screen and (max-width: 767px) {
  .program .rtbs .rtbs-image {
    width: 100%;
  }
}
.program .rtbs .rtbs-image img {
  width: 100%;
}
.program .rtbs .rtbs-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.program .rtbs .rtbs-content ul > li {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 1rem;
}
.program .rtbs .rtbs-content ul > li span.checkmark {
  height: 24px;
}
.program .rtbs .rtbs-content ul > li svg {
  fill: #14161E;
  width: 24px;
  height: 24px;
}

/* ==========================================================================
  10. Banner with Image
========================================================================== */
.program .banner-w-image--container {
  max-width: 1188px;
  margin: 0 auto;
  padding: 80px 0;
  color: #14161E;
  display: flex;
  gap: 48px;
}
@media screen and (max-width: 767px) {
  .program .banner-w-image--container {
    flex-direction: column;
    margin: 0 24px;
    gap: 48px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .program .banner-w-image--container {
    flex-direction: column;
    margin: 0 24px;
  }
}
.program .banner-w-image--container div:nth-child(1) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}
.program .banner-w-image--container div:nth-child(1) h2 {
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 3rem;
}
.program .banner-w-image--container div:nth-child(1) p {
  font-size: 1.25rem;
  line-height: 1.5625rem;
}
.program .banner-w-image--container div:nth-child(2) > img {
  border-radius: 1rem;
}
@media screen and (max-width: 767px) {
  .program .banner-w-image--container div:nth-child(2) > img {
    width: 327px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .program .banner-w-image--container div:nth-child(2) > img {
    width: 100%;
  }
}

/* ==========================================================================
  11. Prerequisites
========================================================================== */
.program .content-middle-right .prerequisites a {
  color: #CE3F00;
}
.program .content-middle-right .prerequisites li {
  padding-bottom: 8px;
}

/**
 *
 * These are the components for progress elements (mark as complete, checkmarks etc.)
 *
 *
 * 1. Mark as complete
 * 2. Checkmark
 * 3. Dropdown trigger icon size
 *
 **/
/* ==========================================================================
   1. Mark as complete
   ========================================================================== */
.btn-mark-complete {
  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;
  border: 1px solid #14161E;
  transition: all 0.5s;
}
.btn-mark-complete:hover {
  background-color: rgba(215, 215, 215, 0.5);
}
.btn-mark-complete > span {
  display: flex;
  align-items: center;
}
.btn-mark-complete i {
  display: inline-flex;
}
.btn-mark-complete svg {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.btn-mark-complete--completed {
  background-color: #00B87E;
  color: #FFFFFF;
  border-color: #00B87E !important;
}
.btn-mark-complete--completed:focus {
  background-color: #00B87E;
  border-color: #00B87E !important;
}
.btn-mark-complete--completed:hover {
  background-color: #157857 !important;
  border-color: #157857 !important;
}
.btn-mark-complete--completed svg {
  fill: #FFFFFF;
}

.btn-icon-mark-complete i {
  border: none;
}
.btn-icon-mark-complete svg {
  margin: 0;
  position: static;
  width: 20px;
  height: 20px;
}

.content-list--completed .content-list--icon-dot {
  background-color: #FFFFFF !important;
}

/* ==========================================================================
   2. Checkmark
  ========================================================================== */
.checkmark-complete {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #00B87E;
}
.checkmark-complete svg {
  width: 10px;
  height: 8px;
}

/* ==========================================================================
   3. Dropdown trigger icon size
  ========================================================================== */
.dropdown .dropdown-trigger .btn-iconxsm svg,
.accordion .dropdown-trigger .btn-iconxsm svg {
  width: 8px;
  height: 8px;
}

/**
* Reading Experience Tools
*
* 1a. Notebook & Highlighting
*
* 1b. Highlighter Colors
*
* 2. Reading Experience Widget
*
*/
/* ==========================================================================
   1a. Notebook & Highlighting
   ========================================================================== */
.c-notebook {
  height: 80%;
  width: 495px;
  background: #FFFFFF;
  border: 1px solid #14161E;
  padding: unset;
  position: fixed;
  top: 160px;
  right: 48px;
  z-index: 9999999;
  border-radius: 16px;
  overflow-y: unset;
}
@media screen and (max-width: 1023px) {
  .c-notebook {
    width: calc(100% - 48px);
    height: calc(100vh - 180px);
    top: 80px;
    box-shadow: none;
    left: 24px;
  }
}
.c-notebook-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #F7F7F7;
  padding: 12px 24px;
  font-size: 1.125rem;
  border-radius: 16px 16px 0 0;
}
.c-notebook-content {
  overflow-y: auto;
  max-height: 85%;
}
.c-notebook .modal .modal-wrapper {
  max-width: 594px;
}
.c-notebook .modal .modal-wrapper .mt-24:first-of-type {
  margin-top: 8px !important;
}
.c-notebook h3 {
  padding-right: unset;
  line-height: unset;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
  font-size: 1.125rem;
}
.c-notebook .c-notebook__demo {
  position: relative;
  margin-top: 90px;
}
.c-notebook .c-notebook__demo:before {
  content: "";
  position: absolute;
  top: -90px;
  left: 0;
  width: 100%;
  height: calc(100% + 90px);
  background: transparent;
  z-index: 99999999;
}
.c-notebook .c-notebook__demo p mark {
  background: rgba(227, 74, 76, 0.4);
  color: #14161E;
}
.c-notebook .c-notebook__demo .o-fragment--tooltip {
  top: -64px;
}
.c-notebook .c-notebook__entry {
  padding-left: unset;
  padding-bottom: unset;
  margin-top: unset;
  position: relative;
  border-bottom: 1px solid #14161E;
}
.c-notebook .c-notebook__entry:before {
  content: none;
}
.c-notebook .c-notebook__entry:not(:first-child) {
  padding-top: 24px;
}
.c-notebook .c-notebook__entry:last-child {
  border-bottom: 0;
}
.c-notebook .c-notebook__entry a {
  text-decoration: none;
}
.c-notebook .c-notebook__entry h4 {
  font-size: 1.125rem;
  /* 18/16 */
}
.c-notebook .c-notebook__entry .c-notebook__actions {
  display: flex;
  align-content: center;
  align-items: baseline;
  justify-content: space-between;
}
.c-notebook .c-notebook__entry .c-notebook__action {
  font-size: 0.875rem;
  font-weight: 400;
  text-decoration: underline;
  cursor: pointer;
}
.c-notebook .c-notebook__entry .c-notebook__entry-text {
  font-size: 0.875rem;
  margin-top: 8px;
  padding-bottom: 7px;
}
.c-notebook .c-notebook__entry .c-notebook__entry-text mark {
  color: #14161E;
  background-color: transparent;
}
.c-notebook .c-notebook__entry .c-notebook__entry-note {
  font-size: 0.875rem;
  font-style: normal;
  margin: 16px auto;
}
.c-notebook .c-notebook__entry .c-notebook__entry-note .text-area {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 0.875rem;
}
.c-notebook .c-notebook__entry .c-notebook__entry-note span {
  color: #14161E;
  padding-left: 32px;
  position: relative;
}
.c-notebook .c-notebook__entry .c-notebook__entry-note span::before {
  content: "";
  background-image: url(/assets/murakami/sprites/kodeco-icons/pencil-742a620a4e8a9b57e9aab1fe2ea15e9999b95424461a3e828634fc91d8d882db.svg);
  position: absolute;
  left: 0;
  width: 16px;
  height: 16px;
  top: 0px;
}

.o-fragment--id {
  display: block;
  position: relative;
  top: -48px;
  visibility: hidden;
}

article.c-book-chapter div blockquote {
  padding-top: 1px;
}

.o-fragment {
  position: relative;
}
.o-fragment mark {
  color: #14161E;
  background-color: #E3A93D;
}
.o-fragment .o-fragment--annotation {
  cursor: pointer;
}
.o-fragment .o-fragment--annotation-note {
  border-bottom: 3px solid #E3A93D;
}
.o-fragment .o-fragment--tooltip-with-note {
  background: #FFFFFF;
  border: 1px solid #14161E;
  border-radius: 16px;
  padding: 24px;
  position: absolute;
  transform: translateX(-50%);
  color: #14161E;
  z-index: 99999;
  width: auto;
  white-space: nowrap;
  text-transform: none !important;
  letter-spacing: 0 !important;
  user-select: none;
  font-weight: 400;
}
.o-fragment .o-fragment--tooltip-with-note:after {
  display: none;
}
.o-fragment .o-fragment--tooltip-with-note:hover {
  background-color: #ebebeb;
}
.o-fragment .o-fragment--tooltip-with-note:focus-within {
  border-color: #FF5A00;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
  background: #FFFFFF;
}
.o-fragment .o-fragment--tooltip-with-note span {
  cursor: pointer;
}
.o-fragment .o-fragment--tooltip-with-note textarea {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: #14161E;
  width: 100%;
  min-width: 270px;
  min-height: 100px;
  font-size: 0.875rem;
  resize: none;
}
.o-fragment .o-fragment--tooltip-with-note textarea::placeholder {
  color: #8C8C8C;
}
.o-fragment .o-fragment--tooltip-with-note .o-fragment__actions {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.o-fragment .o-fragment--tooltip-with-note .o-fragment__action {
  color: #14161E;
  text-decoration: underline;
}

/* ==========================================================================
   1b. Highlighter Colors
   ========================================================================== */
mark.o-fragment--highlighter-yellow {
  background: rgba(227, 169, 61, 0.4);
}
mark.o-fragment--highlighter-yellow.o-fragment--annotation-note {
  border-bottom: 3px solid #E3A93D;
}

mark.o-fragment--highlighter-orange {
  background: rgba(207, 127, 66, 0.4);
}
mark.o-fragment--highlighter-orange.o-fragment--annotation-note {
  border-bottom: 3px solid #CF7F42;
}

mark.o-fragment--highlighter-red {
  background: rgba(227, 74, 76, 0.4);
}
mark.o-fragment--highlighter-red.o-fragment--annotation-note {
  border-bottom: 3px solid #E34A4C;
}

mark.o-fragment--highlighter-purple {
  background: rgba(180, 78, 191, 0.4);
}
mark.o-fragment--highlighter-purple.o-fragment--annotation-note {
  border-bottom: 3px solid #B44EBF;
}

mark.o-fragment--highlighter-blue {
  background: rgba(16, 103, 144, 0.4);
}
mark.o-fragment--highlighter-blue.o-fragment--annotation-note {
  border-bottom: 3px solid #106790;
}

mark.o-fragment--highlighter-green {
  background: rgba(174, 183, 64, 0.4);
}
mark.o-fragment--highlighter-green.o-fragment--annotation-note {
  border-bottom: 3px solid #AEB740;
}

/* ==========================================================================
  1c. Non-highlighting notebook
========================================================================== */
@media screen and (min-width: 1024px) {
  .c-notebook.non-highlighting {
    position: absolute;
    top: 0;
    right: 48px;
  }
  .c-notebook.non-highlighting .c-notebook__entry .c-notebook__actions {
    justify-content: flex-start;
  }
}

/* ==========================================================================
   2. Reading Experience Widget
   ==========================================================================
*/
.c-reading-experience-selector {
  top: 90px;
  right: 90px;
  color: #14161E;
  background-color: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #14161E;
  box-shadow: unset;
  width: 395px;
}
@media screen and (max-width: 1023px) {
  .c-reading-experience-selector {
    width: calc(100% - 48px);
    left: 24px;
    padding: 24px;
    bottom: 100px;
  }
}
.c-reading-experience-selector h1,
.c-reading-experience-selector h2,
.c-reading-experience-selector h3,
.c-reading-experience-selector h4,
.c-reading-experience-selector h5,
.c-reading-experience-selector h6 {
  font-family: "Relative";
  font-weight: 400;
  line-height: 1.25;
}
.c-reading-experience-selector .c-reading-experience-selector__checkbox--large {
  height: 50px;
  border: 1px solid #14161E;
  border-radius: 12px;
  background: #FFFFFF;
  cursor: pointer;
  position: relative;
  z-index: 0;
}
.c-reading-experience-selector .c-reading-experience-selector__checkbox--large input {
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.c-reading-experience-selector .c-reading-experience-selector__checkbox--large label {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -35px;
  margin-top: -15px;
  color: #14161E;
  white-space: nowrap;
  width: 70px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 0.9375rem;
  /* 15/16 */
  z-index: -1;
  font-weight: 400;
}
.c-reading-experience-selector .c-reading-experience-selector__radio {
  appearance: radio;
  -webkit-appearance: radio;
}
.c-reading-experience-selector .c-reading-experience-selector__radio:checked ~ label {
  color: #FFFFFF;
}
.c-reading-experience-selector .c-reading-experience-selector__radio:checked + span {
  position: absolute;
  z-index: -1;
  background: #14161E;
  border: 1px solid #14161E;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  left: -2px;
  top: -2px;
  border-radius: 12px;
}

/**
 *  ScreenCast
 *
 * 1. Player container
 *
 */
/* ==========================================================================
  1. Player container
 ========================================================================== */
@media screen and (min-width: 1024px) {
  .screencast.video-episode:not(.video-episode--cinema) {
    width: min(1288px, 100vw - 60px);
    grid-template-columns: 0px 1fr 40px;
    grid-column-gap: 30px;
  }
}

/**
 * Search
 *
 * Search component styles
 *
 * 1. Search box
 *
 * 2. Search box overlay
 *
 * 3. Library - Platform filter
 *
 * 4. Library - Filters
 *
 * 5. Library - Controls
 *
 * 6. Loading Results
 *
 * 7. No Results
 *
 * 8. Book Search
 *
 *
 */
/* ==========================================================================
  1. Search box
  ========================================================================== */
/* ==========================================================================
8. Book Search
========================================================================== */
.c-global-search--book {
  background: rgba(20, 22, 30, 0.5);
}
.c-global-search--book .input__icon-svg--search {
  fill: unset;
  height: 16px;
  top: 54%;
}
.c-global-search--book .c-global-search__recommendations {
  margin-top: 20px;
}
@media screen and (min-width: 768px), print {
  .c-global-search--book .c-global-search__recommendations {
    padding-left: 0;
    padding-right: 0;
  }
}
.c-global-search--book .c-global-search__recommendations h3 {
  color: #14161E;
}
.c-global-search--book .c-global-search__recommendations ul li {
  border-bottom: 1px solid #14161E;
  padding: 15px 0;
}
.c-global-search--book .c-global-search__recommendations ul li a {
  color: #14161E;
  text-decoration: none;
}
.c-global-search--book .c-global-search__recommendations ul li p {
  font-size: 0.875rem;
  color: #14161E;
}
.c-global-search--book .c-global-search__recommendations ul li .c-search__results--highlight {
  background: rgb(100%, 67.6470588235%, 50%);
  font-weight: 400;
  padding: 0;
}
.c-global-search--book .c-global-search__recommendations .c-search__results-chapter {
  font-family: "Relative";
  margin-bottom: 6px;
  font-size: 1.125rem;
  font-weight: 400;
  text-decoration: underline;
}
.c-global-search--book .c-global-search__recommendations .c-search__results-chapter:hover {
  color: #CE3F00;
}

/* ==========================================================================
7. No Results
========================================================================== */
.c-search__no-results {
  text-align: center;
}
.c-search__no-results p {
  font-family: inherit;
  font-style: italic;
  font-size: 1.5rem;
}

/**
 *  Share modal
 *
 * 1. Overrides
 *
 */
/* ==========================================================================
 1. Overrides
========================================================================== */
.modal-share h4 {
  margin: 0;
}

/**
 *  Spoilers
 *
 * 1. Base
 *
 */
/* ==========================================================================
  1. Base
 ========================================================================== */
.spoiler {
  border: 1px solid #14161E;
  border-radius: 8px;
  background-color: #FFFFFF;
}
.spoiler details {
  cursor: auto;
}
.spoiler details summary {
  border-radius: 8px;
  background-color: rgba(255, 136, 71, 0.2);
}
.spoiler details summary .accordion-trigger {
  padding: 8px 24px;
}
.spoiler details summary .trigger-text {
  font-size: 1.125rem;
}
.spoiler details[open] summary {
  border-radius: 8px 8px 0px 0px;
}
.spoiler .spoiler-content {
  padding: 16px 24px;
}

/**
 *  Table of Contents
 *
 * 1. Toggling show/hide
 * 2. Appearance
 *
 */
/* ==========================================================================
  1. Toggling show/hide
 ========================================================================== */
.l-admin .toc-collapsed {
  display: unset;
}
@media screen and (max-width: 1023px) {
  .l-admin .toc-collapsed {
    display: none;
  }
}
.l-admin .toc-expanded {
  display: none;
}
.l-admin.l-admin--sidebar-open .toc-collapsed {
  display: none;
}
.l-admin.l-admin--sidebar-open .toc-expanded {
  display: unset;
}
@media screen and (max-width: 1023px) {
  .l-admin.l-admin--sidebar-open .toc-expanded {
    display: none;
  }
}

/* ==========================================================================
  2. Appearance
 ========================================================================== */
.toc-container {
  position: sticky;
  top: 40px;
  max-height: calc(100vh - 80px);
  overflow: hidden;
  scrollbar-width: none;
}
.toc-container::-webkit-scrollbar {
  display: none;
}

.toc {
  border: 1px solid #14161E;
  border-radius: 16px;
  background-color: #FFFFFF;
  overflow: hidden;
}
.toc .toc-header {
  background-color: #F7F7F7;
  border-radius: 16px 16px 0 0;
  display: flex;
  align-items: center;
}
.toc .toc-header h2 {
  margin: 24px;
  flex-grow: 1;
  font-size: 1.125rem;
}
.toc .toc-header .tooltip {
  margin-right: 16px;
}
.toc .toc-body {
  padding: 24px;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.toc .toc-body::-webkit-scrollbar {
  display: none;
}
.toc .toc-body h2.title {
  font-size: 1.25rem;
  margin-bottom: 8px;
}
.toc .toc-body h2.title a {
  text-decoration: none;
}
.toc .toc-body h2.title a:hover {
  text-decoration: underline;
}
.toc .toc-body p.duration {
  font-size: 0.875rem;
}
.toc .toc-body nav {
  list-style: none;
}
.toc .toc-body nav a {
  text-decoration: none;
  display: flex;
  margin-bottom: 12px;
  gap: 16px;
}
.toc .toc-body nav a:hover {
  text-decoration: underline;
}
.toc .toc-body nav a i.toc-item-indicator {
  flex-shrink: 0;
  display: block;
  position: relative;
  width: 20px;
  height: 20px;
  background: none;
  border: 2px solid #14161E;
  border-radius: 50%;
  margin-top: 2px;
}
.toc .toc-body nav a.is-active i.toc-item-indicator::after {
  content: "";
  width: 4px;
  height: 4px;
  position: absolute;
  top: 6px;
  left: 6px;
  background: #14161E;
  border-radius: 2px;
}

.turbo-progress-bar {
  z-index: 1000000;
}

/**
 * Tutorials
 *
 * Tutorial cards form the base of all tutorials advertisements around the site
 *
 * NOTE - All modifiers should be added to the wrapper/container not the tutorial itself
 *
 * 1. Base: The most common tutorial card items
 *
 */
/* ==========================================================================
 1. Base
 ========================================================================== */
.learning-path .card .card-bottom {
  display: grid;
}
.learning-path .card .card-bottom .card-title {
  max-height: 90px;
}
.learning-path .card .card-bottom .card-metadata {
  align-self: end;
}
.learning-path .card .card-bottom .card-description {
  display: grid;
}
.learning-path .card .card-bottom .card-description .card-text {
  -webkit-line-clamp: 4;
}

/**
*
*
* 1. Content Counter
*
*
*/
/* ==========================================================================
1. Content Counter
========================================================================== */
.content-counter {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  z-index: 0;
}
.content-counter > button {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.content-counter:before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 98px;
  height: 98px;
  left: 0;
  top: 0;
  background-color: rgba(255, 90, 0, 0.4);
  filter: blur(100px);
  opacity: 0;
  transition: opacity 0.25s;
}
.content-counter:hover:before {
  opacity: 1;
}

.counter-image {
  width: 98px;
  height: 98px;
  border-radius: 12px;
  transition: box-shadow 0.5s;
}

.counter-title {
  font-size: 1rem;
  margin-top: 16px;
  max-width: 98px;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  .counter-title {
    white-space: normal;
  }
}

.counter-count {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
  font-size: 0.8125rem;
  color: #FF5A00;
  background-color: #FF5A00;
  border-radius: 100%;
  border: 2px solid #F7F7F7;
  display: none;
}
.counter-count:before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  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;
}

.is-highlighted-border .content-counter .counter-count {
  display: flex;
}

/**
 * Curation / Domain Home Page Components
 *
 * 0. Accessibility utilities
 * 1. Domain page section spacing
 * 2. Two-column grid alignment modifier
 * 3. Banner template section
 * 4. Content collection sections
 * 5. Program / learning path collection sections
 */
/* ==========================================================================
   0. Accessibility utilities
   ========================================================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   1. Domain page section spacing
   ========================================================================== */
.c-domain-sections > section,
.c-domain-sections > div {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
@media screen and (max-width: 767px) {
  .c-domain-sections > section,
  .c-domain-sections > div {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
.c-domain-sections > section + section,
.c-domain-sections > div + div,
.c-domain-sections > section + div,
.c-domain-sections > div + section {
  border-top: 1px solid rgba(215, 215, 215, 0.4980392157);
}
.c-domain-sections .two-column-grid {
  grid-column-gap: 2.5rem;
}
.c-domain-sections > .c-template-banner {
  padding-top: 0;
  padding-bottom: 0;
  border-top: none;
}
.c-domain-sections > .c-template-banner:first-child {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  border-radius: 0;
  min-height: 420px;
}

/* ==========================================================================
   2. Two-column grid alignment modifier
   ========================================================================== */
.two-column-grid--centered {
  align-items: center;
}

/* ==========================================================================
   3. Banner template section
   ========================================================================== */
.c-template-banner {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  display: flex;
  align-items: center;
  border-radius: 12px;
}
.c-template-banner__bg-image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.c-template-banner__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.c-template-banner__overlay--light {
  background: rgba(0, 0, 0, 0.45);
}
.c-template-banner__overlay--dark {
  background: rgba(255, 255, 255, 0.5);
}
.c-template-banner__content {
  position: relative;
  z-index: 2;
  padding: 2.5rem 1.5rem;
}
.c-template-banner__content > h2, .c-template-banner__content > p, .c-template-banner__content > div {
  max-width: 60%;
}
@media screen and (max-width: 767px) {
  .c-template-banner__content > h2, .c-template-banner__content > p, .c-template-banner__content > div {
    max-width: 100%;
  }
}
.c-template-banner--light .c-template-banner__content {
  color: #ffffff;
}
.c-template-banner--dark .c-template-banner__content {
  color: #1a1a1a;
}

/* ==========================================================================
   4. Content collection sections
   ========================================================================== */
.c-content-collection h3 {
  font-size: 1.75rem;
}
.c-content-collection .c-content-collection__subtitle {
  color: #43454B;
  margin-top: 0.25rem;
}

/* ==========================================================================
   5. Program / learning path collection sections
   ========================================================================== */
.c-program-collection h3 {
  font-size: 1.75rem;
}
.c-program-collection .c-program-collection__subtitle {
  color: #43454B;
  margin-top: 0.25rem;
}

/**
 *  Video Player
 *
 * 1. Player container
 * 2. Preloader
 * 3. Complete
 * 4. Responsiveness
 *
 */
/* ==========================================================================
  1. Player container
 ========================================================================== */
.video-player {
  width: 100%;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}
.video-player::before {
  content: "";
  display: inline-block;
  padding-bottom: 56.25%;
}
.video-player > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.c-video-player__video-container.l-block--1080 {
  max-width: none;
}

.c-video-player__video {
  width: 100%;
  height: 100%;
}
.c-video-player__video > * {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
  2. Preloader
 ========================================================================== */
.title-slide {
  background-color: #14161E;
  color: #FFFFFF;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.title-slide.quiz {
  position: unset;
  background-color: #FFFFFF;
  color: #14161E;
  border: 1px solid #14161E;
  border-radius: 24px;
}
@media screen and (max-width: 767px) {
  .title-slide.quiz {
    gap: 16px;
    max-width: 100%;
    padding: 24px;
  }
}
.title-slide.quiz .quiz-loader {
  transform: translateY(-50%);
  top: 50%;
  position: relative;
  margin-top: -80px;
}
.title-slide.quiz .slide-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  gap: 24px;
  max-width: 594px;
  width: 100%;
  height: auto;
  top: unset;
  left: unset;
  position: relative;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .title-slide.quiz .slide-action {
    gap: 16px;
    max-width: 100%;
  }
}
.title-slide.quiz .slide-action .details {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  gap: 12px;
  flex: none;
  order: 0;
  flex-grow: 0;
  max-width: inherit;
}
.title-slide.quiz .slide-action .details .info {
  flex: none;
  order: 0;
  flex-grow: 0;
  text-align: center;
  text-transform: capitalize;
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 2px;
}
@media screen and (max-width: 767px) {
  .title-slide.quiz .slide-action .details .info {
    font-size: 0.75rem;
  }
}
.title-slide.quiz .slide-action .details .title {
  flex: none;
  order: 1;
  flex-grow: 0;
  font-size: 2rem;
  line-height: 1.25;
  text-align: center;
  max-width: inherit;
  padding: 0 24px;
}
@media screen and (max-width: 767px) {
  .title-slide.quiz .slide-action .details .title {
    font-size: 1.5rem;
    line-height: 1.5;
  }
}
.title-slide.quiz .slide-action .details p {
  font-size: 0.875rem;
  text-align: center;
  order: 2;
}
@media screen and (max-width: 767px) {
  .title-slide.quiz .slide-action .details p {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .title-slide.quiz .slide-action .btn-start-quiz {
    height: 40px;
    padding: 0 16px;
    font-size: 0.875rem;
    border-radius: 12px;
  }
}
.title-slide h1 {
  font-size: 2.5rem;
  line-height: 1.25;
  width: calc(100% - 64px);
  margin-top: 32px;
  margin-bottom: 8px;
  margin-left: 32px;
}
.title-slide p {
  font-size: 1rem;
  margin-left: 32px;
}
.title-slide .slide-episode {
  position: absolute;
  left: 32px;
  bottom: 32px;
  width: calc(75% - 64px);
}
.title-slide .slide-episode h2 {
  line-height: 1;
  padding-bottom: 8px;
  font-size: 0.75rem;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  font-weight: 500;
}
.title-slide .slide-episode h3 {
  font-size: 2.5rem;
  line-height: 1.25;
}
.title-slide figure {
  width: 21%;
  height: auto;
  position: absolute;
  bottom: 32px;
  right: 32px;
}
.title-slide figure img {
  width: 100%;
  height: 100%;
}
.title-slide .slide-action {
  position: absolute;
  top: calc(50% - 60px);
  left: calc(50% - 60px);
  width: 120px;
  height: 120px;
}
.title-slide .slide-action--round {
  border-radius: 50%;
  background-color: #FFFFFF;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title-slide .slide-action--round svg {
  width: 48px;
  height: 48px;
  max-width: 48px;
  max-height: 48px;
  fill: #14161E;
}
.title-slide .slide-action--play::before {
  content: "";
  position: absolute;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 100%;
  transform: scale(1);
  animation: button-pulse 1.25s infinite;
  z-index: -1;
}
.title-slide .slide-action--play svg {
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
  margin-left: 6px;
}
.title-slide .slide-domain, .title-slide .slide-domain--ai, .title-slide .slide-domain--book, .title-slide .slide-domain--video-course, .title-slide .slide-domain--learning-path, .title-slide .slide-domain--multi-domain, .title-slide .slide-domain--professional-growth, .title-slide .slide-domain--server-side-swift, .title-slide .slide-domain--ios, .title-slide .slide-domain--gametech, .title-slide .slide-domain--flutter, .title-slide .slide-domain--android, .title-slide .slide-domain--article {
  /* For Chrome, Edge & Opera */
  -webkit-mask: url(/assets/murakami/backgrounds/domain-pattern-e91ab1919aa70863f57140f46a3ad0963245dbecaf37cf4f1b7a8f24f1837ec1.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  /* For Safari & Firefox */
  mask: url(/assets/murakami/backgrounds/domain-pattern-e91ab1919aa70863f57140f46a3ad0963245dbecaf37cf4f1b7a8f24f1837ec1.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  position: absolute;
  opacity: 0.2;
  left: 10%;
  height: 100%;
  width: 100%;
  z-index: -1;
}
.title-slide .slide-domain--article {
  background-color: #157857;
}
.title-slide .slide-domain--android {
  background-color: #00B87E;
}
.title-slide .slide-domain--flutter {
  background-color: #2EA4DD;
}
.title-slide .slide-domain--gametech {
  background-color: #B44EBF;
}
.title-slide .slide-domain--ios {
  background-color: #8763D2;
}
.title-slide .slide-domain--server-side-swift {
  background-color: #F26FAA;
}
.title-slide .slide-domain--professional-growth {
  background-color: #E3A93D;
}
.title-slide .slide-domain--multi-domain {
  background-color: #AC9FAB;
}
.title-slide .slide-domain--learning-path {
  background-color: #597CEE;
}
.title-slide .slide-domain--video-course {
  background-color: #E34A4C;
}
.title-slide .slide-domain--book {
  background-color: #FF8847;
}
.title-slide .slide-domain--ai {
  background-color: #E6978A;
}

.segment-slide .slide-episode h2 {
  text-transform: unset;
  letter-spacing: normal !important;
  font-weight: 400;
}
.segment-slide .slide-episode h3 {
  font-size: 1.5rem;
}

/* ==========================================================================
 3a. Complete - Autoplay
 ========================================================================== */
.title-slide-autoplay {
  align-items: center;
}
.title-slide-autoplay h3 {
  font-size: 2.5rem;
  line-height: 2.5rem;
  position: absolute;
  top: 50%;
  margin-top: -154px;
}
.title-slide-autoplay p {
  font-size: 1rem;
  line-height: 1rem;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin-top: -97px;
  margin-left: auto;
  margin-right: auto;
}
.title-slide-autoplay .title-slide-autoplay--cancel {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin-top: 77px;
  margin-left: auto;
  margin-right: auto;
}
.title-slide-autoplay .slide-action-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  cursor: pointer;
  border-radius: 100px;
  z-index: 1;
}
.title-slide-autoplay .slide-action-complete {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: -1;
}
.title-slide-autoplay .slide-action-complete.slide-action-complete--fill {
  transform: rotate(-90deg);
}

.slide-icon--cover {
  background-color: white;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.slide-icon--cover .slide-action-complete--icon {
  width: 40px;
  height: 40px;
  fill: #14161E;
  margin-right: -5px;
}

/* ==========================================================================
  4. Responsiveness
 ========================================================================== */
@media screen and (max-width: 767px) {
  .c-video-player__video-container.l-block {
    padding: 0;
  }
  .title-slide h1 {
    font-size: 1rem;
    width: calc(100% - 48px);
    margin-top: 24px;
    margin-left: 24px;
  }
  .title-slide p {
    margin-left: 24px;
  }
  .title-slide .slide-episode {
    left: 24px;
    bottom: 24px;
    width: calc(100% - 48px);
  }
  .title-slide .slide-episode h3 {
    font-size: 1rem;
  }
  .title-slide .slide-action {
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-left: -30px;
    margin-top: -30px;
  }
  .title-slide .slide-action--round {
    background-color: transparent;
  }
  .title-slide .slide-action--round svg {
    width: 28px;
    height: 28px;
    max-width: 28px;
    max-height: 28px;
    fill: #FFFFFF;
  }
  .title-slide .slide-action--play::before {
    content: none;
  }
  .title-slide .slide-action--play svg {
    width: 28px;
    height: 28px;
    max-width: 28px;
    max-height: 28px;
    margin-left: 3px;
  }
  .title-slide-autoplay h3 {
    display: none;
  }
  .title-slide-autoplay p {
    font-size: 0.875rem;
    line-height: 0.875rem;
    margin-left: auto;
    margin-top: -60px;
  }
  .title-slide-autoplay .title-slide-autoplay--cancel {
    margin-top: 40px;
    font-size: 0.875rem;
    line-height: 0.875rem;
  }
  .title-slide-autoplay .slide-action-loader {
    width: 60px;
    height: 60px;
  }
  .slide-icon--cover {
    width: 50px;
    height: 50px;
  }
  .slide-icon--cover .slide-action-complete--icon {
    width: 20px;
    height: 20px;
  }
  .segment-slide .slide-episode h2 {
    text-transform: unset;
    letter-spacing: normal !important;
    font-weight: 400;
  }
}
/**
 * Version Modal
 * This resets some styling that gets applied by the modal being inside content-hero

**/
.version-modal {
  display: inline-flex;
}
.version-modal .version-count {
  color: #FFFFFF;
  transition: all 0.5s ease-out;
}
@media screen and (max-width: 767px) {
  .version-modal .version-count {
    color: #14161E;
    background-color: transparent;
    border-color: #14161E;
  }
}
.version-modal .modal .modal-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.version-modal .modal .modal-wrapper .btn-icon svg,
.version-modal .modal .modal-wrapper .btn-iconsm svg {
  fill: #14161E;
  margin-right: 0 !important;
  top: unset;
  left: unset;
}

.schools-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 12px 24px;
  text-align: center;
  background-color: var(--bg-white, #fff);
  border-top: 1px solid var(--bc-black-plaza, #e0e0e0);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.schools-sticky-cta.is-visible {
  transform: translateY(0);
}
.prefers-color-scheme--dark .schools-sticky-cta {
  background-color: var(--dark-bg-clear, #1a1a2e);
  border-top-color: var(--dark-bc-black-plaza, #333);
}

.schools-timeline {
  display: flex;
  gap: 0;
  position: relative;
  overflow-x: auto;
  padding-bottom: 8px;
}

.schools-timeline-step {
  flex: 1;
  min-width: 140px;
  text-align: center;
  position: relative;
  padding-top: 32px;
}
.schools-timeline-step::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--bc-black-night, #333);
}
.schools-timeline-step:first-child::before {
  left: 50%;
}
.schools-timeline-step:last-child::before {
  right: 50%;
}
.prefers-color-scheme--dark .schools-timeline-step::before {
  background-color: var(--dark-bc-black-plaza, #555);
}

.schools-timeline-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--bg-black-night, #333);
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
}
.prefers-color-scheme--dark .schools-timeline-dot {
  background-color: var(--dark-bg-orange-determination, #f60);
}

.schools-formats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.schools-section-alt {
  background-color: #f0f0f2;
  border-radius: 12px;
  padding: 40px 32px;
}
.prefers-color-scheme--dark .schools-section-alt {
  background-color: rgba(255, 255, 255, 0.05);
}

.schools-panel {
  padding: 32px;
  border-radius: 1rem;
  border: 1px solid var(--bc-black-night, #333);
  background-color: var(--bg-white, #fff);
}
.prefers-color-scheme--dark .schools-panel {
  background-color: transparent;
  border-color: #444;
}

.schools-outcomes-list {
  line-height: 2;
  padding-left: 20px;
}

.schools-cta-centered {
  text-align: center;
}

@media (max-width: 768px) {
  .schools-hero-image {
    display: none;
  }
  .schools-formats-grid {
    grid-template-columns: 1fr;
  }
  .schools-timeline {
    flex-direction: column;
    gap: 16px;
  }
  .schools-timeline-step {
    padding-top: 0;
    padding-left: 40px;
    text-align: left;
    min-width: auto;
  }
  .schools-timeline-step::before {
    top: 0;
    bottom: 0;
    left: 12px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .schools-timeline-step:first-child::before {
    top: 12px;
  }
  .schools-timeline-step:last-child::before {
    bottom: auto;
    height: 12px;
  }
  .schools-timeline-dot {
    top: 0;
    left: 0;
    transform: none;
  }
  .schools-sticky-cta {
    padding: 12px 16px;
  }
  .schools-sticky-cta .btn-normalw {
    width: 100%;
    display: block;
  }
}
/**
 *
 *  Layout for the /about page
 *
 *  1. Base layout
 *  2. Responsiveness
 *
 */
/* ==========================================================================
  1. Base layout
 ========================================================================== */
.about h1 {
  font-size: 3.5rem;
  line-height: 4.375rem;
}
.about p {
  font-size: 1.5rem;
  line-height: 1.5;
  margin-bottom: 24px;
}

/* ==========================================================================
  2. Hero
========================================================================== */
.about .hero-page-header {
  background-color: #FF5A00;
  background-blend-mode: luminosity;
  mix-blend-mode: darken;
  background-position-y: -260px;
  background-repeat: no-repeat;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .about .hero-page-header {
    background-position-y: unset;
  }
}
.about .hero-page-header::before {
  width: calc(100% - 840px);
}
@media screen and (max-width: 1199px) {
  .about .hero-page-header::before {
    width: calc(100% - 360px);
  }
}
@media screen and (max-width: 979px) {
  .about .hero-page-header::before {
    width: 100%;
  }
}
.about .hero-page-header-round-bottom {
  left: calc(100% - 840px);
}
@media screen and (max-width: 1199px) {
  .about .hero-page-header-round-bottom {
    left: calc(100% - 360px);
  }
}
.about .hero-page-header + div {
  margin-top: -160px;
}
@media screen and (max-width: 1551px) {
  .about .hero-page-header + div > div {
    padding-right: 240px;
  }
}
@media screen and (max-width: 1199px) {
  .about .hero-page-header + div > div {
    padding-right: unset;
  }
}

/* ==========================================================================
  3. Team
========================================================================== */
.team-grid {
  display: grid;
  grid-template-columns: 295px 1fr;
  column-gap: 98px;
}
@media screen and (max-width: 767px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}
.team-grid:not(:last-of-type) {
  padding-bottom: 120px;
  border-bottom: 1px solid #D7D7D7;
}
.team-grid:not(:first-of-type) {
  padding-top: 120px;
}
.team-grid p {
  font-size: 1rem;
  line-height: 1.5rem;
}
.team-grid__people {
  display: grid;
  column-gap: 50px;
  row-gap: 50px;
  grid-template-columns: repeat(auto-fit, minmax(198px, 198px));
  grid-row: 1/4;
}
@media screen and (max-width: 767px) {
  .team-grid__people {
    grid-auto-flow: column;
    overflow-y: hidden;
    margin: 40px 0;
    grid-row: 2;
  }
}
.team-grid__people .member {
  position: relative;
  max-width: 198px;
  max-height: 198px;
  border-radius: 16px;
}
.team-grid__people .member:hover {
  box-shadow: 0 0 100px 0 rgba(255, 90, 0, 0.4);
}
.team-grid__people .member::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #14161E;
  opacity: 0.4;
  border-radius: 16px;
  z-index: 1;
}
.team-grid__people .member img {
  border-radius: 16px;
  min-width: 198px;
  height: 198px;
  z-index: 0;
}
.team-grid__people .member__name {
  font-family: "Relative Mono";
  font-size: 1.125rem;
  line-height: 1.4375rem;
  position: absolute;
  left: 16px;
  bottom: 16px;
  text-decoration: none;
  color: #FFFFFF;
  width: min-content;
  white-space: break-spaces;
  z-index: 2;
}
.team-grid .description {
  grid-column: 1;
  grid-row: 2;
  margin-top: 24px;
}
@media screen and (max-width: 767px) {
  .team-grid .description {
    grid-row: 3;
    margin-top: unset;
  }
}

/* ==========================================================================
 4. Values
========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.about-grid .about-grid-text-left {
  margin-right: 15%;
}
.about-grid .about-grid-text-right {
  margin-left: 15%;
}
.about-grid .about-grid-image img {
  border-radius: 40px;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 1023px) {
  .about-grid .about-grid-text-left h1,
  .about-grid .about-grid-text-right h1 {
    font-size: 2.5rem;
  }
  .about-grid .about-grid-text-left p,
  .about-grid .about-grid-text-right p {
    font-size: 1.25rem;
  }
}
@media screen and (max-width: 767px) {
  .about-grid {
    grid-template-columns: 1fr;
    row-gap: 75px;
  }
  .about-grid #about-cell-3 {
    grid-row: 4;
  }
  .about-grid #about-cell-4 {
    grid-row: 3;
  }
  .about-grid .about-grid-text-left {
    margin-right: 0;
  }
  .about-grid .about-grid-text-right {
    margin-left: 0;
  }
}
/* ==========================================================================
 5. Team Directory
========================================================================== */
.team-directory .team-grid h2 {
  font-size: 2.5rem;
  line-height: 3.125rem;
}
.team-directory .content-switcher {
  min-height: 56px;
  height: 56px;
  margin-bottom: 80px;
  border: 1px solid #14161E;
  border-radius: 12px;
  background-color: #FFFFFF;
}
.team-directory .content-switcher .scroll-box {
  padding: unset;
}
.team-directory .content-switcher .scroll-box .btn-switch {
  height: 40px;
  min-width: max-content;
  background-color: #FFFFFF;
}
.team-directory .content-switcher .scroll-box .btn-switch.active, .team-directory .content-switcher .scroll-box .btn-switch.is-active {
  background-color: rgba(215, 215, 215, 0.4980392157);
}

/**
 *
 *  Achievements / Badge Layout kodeco variant page
 *
 */
.achievements .achievement-category:not(:last-child) {
  border-bottom: 1px solid #D7D7D7;
}
.achievements .badge-container {
  width: 12.5rem;
  height: 12.5rem;
}
.achievements .badge-container img.greyed {
  filter: grayscale(100%);
  opacity: 0.5;
}

/*
*
* Annotations page
*
*/
.annotations .notebook {
  background: #FFFFFF;
  border: 1px solid #14161E;
  border-radius: 1rem;
}
.annotations .notebook > div, .annotations .notebook > h3 {
  position: relative;
}
.annotations .notebook.card-glow:hover {
  z-index: unset;
}

/**
 *  Article Page
 *
 * 1. RW Overrides
 * 2. Chromeless
 * 3. Article (Tutorial)
 */
/* ==========================================================================
  1. RW Overrides
 ========================================================================== */
/* These two shouldn't have any styling attributes—they're there to support show/hide only */
.l-admin {
  padding: 0;
}

.l-admin--sidebar-open {
  padding: 0;
}

/* ==========================================================================
  2. Chromeless
 ========================================================================== */
.chromeless-layout {
  max-width: 594px;
  margin: 0 auto;
  position: relative;
}
.chromeless-layout .written-content {
  padding-top: 16px;
}
.chromeless-layout .written-content h1 + h2 {
  margin-top: 24px;
}
.chromeless-layout .written-content h2,
.chromeless-layout .written-content h3,
.chromeless-layout .written-content h4 {
  margin-top: 40px;
}
.chromeless-layout .written-content h3 {
  font-size: 1.25rem;
}
.chromeless-layout .written-content p,
.chromeless-layout .written-content ul,
.chromeless-layout .written-content ol {
  font-size: 1.125rem;
  margin-top: 24px;
}
.chromeless-layout .written-content p ul,
.chromeless-layout .written-content p ol,
.chromeless-layout .written-content ul ul,
.chromeless-layout .written-content ul ol,
.chromeless-layout .written-content ol ul,
.chromeless-layout .written-content ol ol {
  margin-top: 16px;
}
.chromeless-layout .l-article-profile img {
  margin-top: 0;
}
.chromeless-layout .content-footer {
  margin: 40px 0 120px 0;
  gap: normal;
}
.chromeless-layout .content-footer .content-footer-actions .icon-prefix {
  margin-bottom: 0;
}
.chromeless-layout .content-footer .primary-contributors {
  margin: 80px 0 0 0;
}
.chromeless-layout .content-footer .primary-contributors .contributor {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chromeless-layout .content-footer .primary-contributors .contributor a {
  color: #14161E;
}

.chromeless-layout.chromeless-wide {
  max-width: 800px;
}

.chromeless-toc {
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (max-width: 1019px) {
  .chromeless-toc {
    position: relative;
    max-width: 594px;
    margin: 0 auto 24px;
  }
}
.chromeless-toc .chromeless-date {
  display: block;
  font-size: 1rem;
}
.chromeless-toc .chromeless-author {
  display: block;
  margin-top: 16px;
  font-size: 1rem;
}

.chromeless-content .title {
  font-size: 3rem;
}
@media screen and (max-width: 767px) {
  .chromeless-content .title {
    font-size: 2.5rem;
  }
}
.chromeless-content .description {
  font-size: 2rem;
  margin-top: 24px;
  line-height: 1.25;
}
@media screen and (max-width: 767px) {
  .chromeless-content .description {
    font-size: 1.5rem;
  }
}

/* ==========================================================================
  3. Article (Tutorial)
 ========================================================================== */
.article-layout {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 80px;
  position: relative;
}
.article-layout a.bg-black-night {
  color: #FFFFFF;
}
.article-layout .fc-orange-determination {
  color: #CE3F00;
}
.article-layout .toc-collapsed {
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (max-width: 1023px) {
  .article-layout .toc-collapsed {
    align-items: flex-start;
    position: relative;
    max-width: 692px;
    width: 100%;
    margin: 0 auto 40px;
  }
}
@media screen and (max-width: 1023px) {
  .article-layout .toc-collapsed {
    display: none !important;
  }
}
.article-layout .toc-collapsed a {
  padding-left: 0;
}
@media screen and (min-width: 1024px) {
  .article-layout .toc-expanded {
    position: relative;
    max-width: 692px;
    width: 100%;
    margin: 0 auto 80px;
  }
}
.article-layout .toc-expanded .toc-container .scrollactive-nav {
  margin-top: 16px;
}
@media screen and (max-width: 1023px) {
  .article-layout .toc-expanded .toc-container {
    max-height: 240px;
  }
}
.article-layout .toc-container {
  margin-top: 0;
}
.article-layout .written-content {
  max-width: 692px;
  margin: 0 auto;
}
.article-layout .written-content pre {
  border: 1px solid #14161E;
  white-space: break-spaces;
  word-break: break-word;
  font-size: 0.875rem;
  overflow: visible;
}
.article-layout .written-content code {
  word-break: break-word;
}
.article-layout .written-content .content-footer {
  gap: 80px;
}
.article-layout .written-content .content-footer .content-footer-actions .icon-prefix {
  margin: 8px 0 0 0;
  padding: 4px 0;
}
.article-layout .written-content .content-footer .modal h3 {
  margin-top: 0;
}
.article-layout .written-content .primary-contributors .contributor-avatars .contributor img {
  margin-top: 0;
  margin-bottom: 24px;
}
.article-layout.l-admin--sidebar-open {
  grid-template-columns: 396px 1fr;
  grid-column-gap: 98px;
}
@media screen and (max-width: 1279px) {
  .article-layout.l-admin--sidebar-open {
    grid-template-columns: 298px 1fr;
    grid-column-gap: 48px;
  }
}
@media screen and (max-width: 1023px) {
  .article-layout.l-admin--sidebar-open {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 1023px) {
  .article-layout.l-admin--sidebar-open .toc-expanded {
    display: none;
  }
}

/* ==========================================================================
  4. Article TOC
 ========================================================================== */
/* ==========================================================================
X. Chapter layout w/chapters
========================================================================== */
@media screen and (min-width: 1024px) {
  .article-layout .toc-expanded .toc .toc-body {
    max-height: calc(100vh - 152px);
  }
}
.article-layout .c-mobile-navigator {
  display: none;
}
@media screen and (max-width: 767px) {
  .article-layout .btn-chapters-close .btn-chapters-close-desktop {
    display: none;
  }
}
.article-layout .btn-chapters-close .btn-chapters-close-mobile {
  display: none;
}
@media screen and (max-width: 767px) {
  .article-layout .btn-chapters-close .btn-chapters-close-mobile {
    display: block;
    max-height: 12px;
    max-width: 12px;
  }
}
@media screen and (max-width: 1023px) {
  .article-layout.s_show_mobile_menu.l-admin--sidebar-open .toc-expanded {
    display: block !important;
    position: fixed;
    width: calc(100% - 48px);
    top: 24px;
    left: 24px;
    z-index: 9999999;
  }
  .article-layout.s_show_mobile_menu.l-admin--sidebar-open .toc-expanded .toc-container {
    max-height: calc(100vh - 124px);
    height: calc(100vh - 124px);
  }
}
@media screen and (max-width: 1023px) {
  .article-layout.s_show_mobile_menu.l-admin--sidebar-open .toc-expanded .toc .toc-body {
    padding-bottom: 220px;
  }
}

/**
 *
 * Books
 *
 * For use on book sales and chapters pages
 *
 * 1. Edition Page

 * 2. Sidebar
 *
 * 4. Chapter font style
 *
 * 6. Chapter font size
 *
 * 7. Chapter page size
 *
 **/
/* ==========================================================================
1. Edition Page
========================================================================== */
.book-description {
  margin-bottom: 40px;
}
.book-description p {
  display: inline;
}
.book-description .modal-more {
  color: #CE3F00;
  text-decoration: underline;
}
.book-description .modal-description-only {
  margin: 0 24px;
}
.book-description .modal-description-only .written-content p {
  margin-top: 20px;
  display: block;
}
.book-description .modal-description-only .written-content h1,
.book-description .modal-description-only .written-content h2,
.book-description .modal-description-only .written-content h3,
.book-description .modal-description-only .written-content h4 {
  margin-top: 20px;
}

/* ==========================================================================
1. TOC/Sidebar
========================================================================== */
.l-admin.l-admin--sidebar-open .chapter-toc-container.toc-expanded {
  display: unset;
}

/* ==========================================================================
4. Chapter font style
========================================================================== */
.l-chapter-font-serif .written-content .c-book-chapter .c-written-tutorial__content p,
.l-chapter-font-serif .written-content .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-font-serif .written-content .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-font-serif .written-content .c-book-chapter .c-written-tutorial__content .note,
.l-chapter-font-serif .written-content .c-book-chapter .c-written-tutorial__content figcaption {
  font-family: "IBM Plex Serif", serif !important;
}

.c-reading-experience-selector .l-chapter-font-serif label {
  font-family: "Relative";
}

.l-chapter-font-sans-serif .written-content .c-book-chapter .c-written-tutorial__content p,
.l-chapter-font-sans-serif .written-content .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-font-sans-serif .written-content .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-font-sans-serif .written-content .c-book-chapter .c-written-tutorial__content .note {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}
.l-chapter-font-sans-serif .written-content .c-book-chapter .c-written-tutorial__content figcaption {
  font-family: "Relative Mono" !important;
}

/* ==========================================================================
6. Chapter text size
========================================================================== */
.written-content .c-book-chapter .c-written-tutorial__content h1,
.written-content .c-book-chapter .c-written-tutorial__content h2 {
  font-size: 1.875em;
}
@media screen and (max-width: 767px) {
  .written-content .c-book-chapter .c-written-tutorial__content h1,
  .written-content .c-book-chapter .c-written-tutorial__content h2 {
    font-size: 1.5em;
    /* 24/16 */
  }
}
.written-content .c-book-chapter .c-written-tutorial__content h3 {
  font-size: 1.5em;
}
@media screen and (max-width: 767px) {
  .written-content .c-book-chapter .c-written-tutorial__content h3 {
    font-size: 1.25em;
    /* 21/16 */
  }
}
.written-content .c-book-chapter .c-written-tutorial__content h4 {
  font-size: 1.188em;
}
@media screen and (max-width: 767px) {
  .written-content .c-book-chapter .c-written-tutorial__content h4 {
    font-size: 1em;
  }
}
.written-content .c-book-chapter .c-written-tutorial__content ul,
.written-content .c-book-chapter .c-written-tutorial__content ol,
.written-content .c-book-chapter .c-written-tutorial__content p,
.written-content .c-book-chapter .c-written-tutorial__content blockquote {
  font-size: 1em;
}
@media screen and (max-width: 767px) {
  .written-content .c-book-chapter .c-written-tutorial__content ul,
  .written-content .c-book-chapter .c-written-tutorial__content ol,
  .written-content .c-book-chapter .c-written-tutorial__content p,
  .written-content .c-book-chapter .c-written-tutorial__content blockquote {
    font-size: 0.9375em;
    /* 15/16 */
    margin-top: 18px;
  }
}
.written-content .c-book-chapter .c-written-tutorial__content ul p,
.written-content .c-book-chapter .c-written-tutorial__content ol p,
.written-content .c-book-chapter .c-written-tutorial__content p p,
.written-content .c-book-chapter .c-written-tutorial__content blockquote p {
  font-size: 1em;
}
.written-content .c-book-chapter .c-written-tutorial__content ul li p,
.written-content .c-book-chapter .c-written-tutorial__content ol li p,
.written-content .c-book-chapter .c-written-tutorial__content p li p,
.written-content .c-book-chapter .c-written-tutorial__content blockquote li p {
  margin-top: 0.5rem;
  font-size: 1em;
  display: inherit;
}
.written-content .c-book-chapter .c-written-tutorial__content ul ul,
.written-content .c-book-chapter .c-written-tutorial__content ul ol,
.written-content .c-book-chapter .c-written-tutorial__content ol ul,
.written-content .c-book-chapter .c-written-tutorial__content ol ol,
.written-content .c-book-chapter .c-written-tutorial__content p ul,
.written-content .c-book-chapter .c-written-tutorial__content p ol,
.written-content .c-book-chapter .c-written-tutorial__content blockquote ul,
.written-content .c-book-chapter .c-written-tutorial__content blockquote ol {
  font-size: 1em;
}
.written-content .c-book-chapter .c-written-tutorial__content blockquote.card-minimal {
  background: #FF8847;
  border-color: #14161E;
}
.written-content .c-book-chapter .c-written-tutorial__content blockquote.card-minimal p {
  margin-left: 0px;
}
.written-content .c-book-chapter .c-written-tutorial__content blockquote.card-minimal p .obfuscated-text {
  background-color: #14161E;
  color: #FFFFFF;
  display: inline-block;
  padding: 0 10px;
  text-align: center;
}
.written-content .c-book-chapter .c-written-tutorial__content blockquote.card-minimal p + p {
  margin-top: 16px;
}
.written-content .c-book-chapter .c-written-tutorial__content pre {
  font-size: 0.875em;
}
.written-content .c-book-chapter .c-written-tutorial__content pre code {
  font-size: 1em;
}
.written-content .c-book-chapter .c-written-tutorial__content code {
  font-size: 0.875em;
}
.written-content .c-book-chapter .c-written-tutorial__content blockquote {
  padding-top: 24px;
}

.l-chapter-text-size-75 .written-content .c-book-chapter .c-written-tutorial__content {
  font-size: 75%;
}
.l-chapter-text-size-75 .written-content .c-book-chapter .c-written-tutorial__content h1,
.l-chapter-text-size-75 .written-content .c-book-chapter .c-written-tutorial__content h2,
.l-chapter-text-size-75 .written-content .c-book-chapter .c-written-tutorial__content h3,
.l-chapter-text-size-75 .written-content .c-book-chapter .c-written-tutorial__content h4,
.l-chapter-text-size-75 .written-content .c-book-chapter .c-written-tutorial__content h5 {
  margin-top: 30px;
}
.l-chapter-text-size-75 .written-content .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-text-size-75 .written-content .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-text-size-75 .written-content .c-book-chapter .c-written-tutorial__content p,
.l-chapter-text-size-75 .written-content .c-book-chapter .c-written-tutorial__content blockquote {
  margin-top: 18px;
}
.l-chapter-text-size-75 .written-content .c-book-chapter .c-written-tutorial__content blockquote p:first-child {
  margin-top: 0 !important;
}

.l-chapter-text-size-80 .written-content .c-book-chapter .c-written-tutorial__content {
  font-size: 80%;
}
.l-chapter-text-size-80 .written-content .c-book-chapter .c-written-tutorial__content h1,
.l-chapter-text-size-80 .written-content .c-book-chapter .c-written-tutorial__content h2,
.l-chapter-text-size-80 .written-content .c-book-chapter .c-written-tutorial__content h3,
.l-chapter-text-size-80 .written-content .c-book-chapter .c-written-tutorial__content h4,
.l-chapter-text-size-80 .written-content .c-book-chapter .c-written-tutorial__content h5 {
  margin-top: 30px;
}
.l-chapter-text-size-80 .written-content .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-text-size-80 .written-content .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-text-size-80 .written-content .c-book-chapter .c-written-tutorial__content p,
.l-chapter-text-size-80 .written-content .c-book-chapter .c-written-tutorial__content blockquote {
  margin-top: 18px;
}
.l-chapter-text-size-80 .written-content .c-book-chapter .c-written-tutorial__content blockquote p:first-child {
  margin-top: 0 !important;
}

.l-chapter-text-size-85 .written-content .c-book-chapter .c-written-tutorial__content {
  font-size: 85%;
}

.l-chapter-text-size-90 .written-content .c-book-chapter .c-written-tutorial__content {
  font-size: 90%;
}

.l-chapter-text-size-100 .written-content .c-book-chapter .c-written-tutorial__content {
  font-size: 100%;
}

.l-chapter-text-size-110 .written-content .c-book-chapter .c-written-tutorial__content {
  font-size: 110%;
}

.l-chapter-text-size-120 .written-content .c-book-chapter .c-written-tutorial__content {
  font-size: 120%;
}

.l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content {
  font-size: 130%;
}
.l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content h1,
.l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content h2,
.l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content h3,
.l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content h4,
.l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content h5 {
  margin-top: 42px;
}
@media screen and (max-width: 767px) {
  .l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content h1,
  .l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content h2,
  .l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content h3,
  .l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content h4,
  .l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content h5 {
    margin-top: 30px !important;
  }
}
.l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content p,
.l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content blockquote {
  margin-top: 30px;
}
@media screen and (max-width: 767px) {
  .l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content ul,
  .l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content ol,
  .l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content p,
  .l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content blockquote {
    margin-top: 24px !important;
  }
}
.l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content blockquote p:first-child {
  margin-top: 0 !important;
}

.l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content {
  font-size: 140%;
}
.l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content h1,
.l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content h2,
.l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content h3,
.l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content h4,
.l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content h5 {
  margin-top: 42px;
}
@media screen and (max-width: 767px) {
  .l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content h1,
  .l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content h2,
  .l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content h3,
  .l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content h4,
  .l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content h5 {
    margin-top: 30px !important;
  }
}
.l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content p,
.l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content blockquote {
  margin-top: 30px;
}
@media screen and (max-width: 767px) {
  .l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content ul,
  .l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content ol,
  .l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content p,
  .l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content blockquote {
    margin-top: 24px !important;
  }
}
.l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content blockquote p:first-child {
  margin-top: 0 !important;
}

/* ==========================================================================
7. Chapter page size
========================================================================== */
.l-page-size-456 .written-content,
.l-page-size-456 .c-book-chapter {
  max-width: 495px;
}

.l-page-size-572 .written-content,
.l-page-size-572 .c-book-chapter {
  max-width: 594px;
}

.l-page-size-920 .l-admin--sidebar-open .chapter-layout {
  grid-template-columns: 296px 890px 296px;
}
@media screen and (max-width: 1545px) {
  .l-page-size-920 .l-admin--sidebar-open .chapter-layout {
    grid-template-columns: 296px calc(100% - 656px) 296px;
  }
}
.l-page-size-920 .chapter-layout {
  grid-template-columns: 98px 890px 98px;
}
@media screen and (max-width: 1149px) {
  .l-page-size-920 .chapter-layout {
    grid-template-columns: 98px calc(100% - 260px) 98px;
  }
}
.l-page-size-920 .written-content,
.l-page-size-920 .c-book-chapter {
  max-width: 890px;
}

.l-page-size-1036 .l-admin--sidebar-open .chapter-layout {
  grid-template-columns: 296px calc(100% - 656px) 296px;
}
.l-page-size-1036 .chapter-layout {
  grid-template-columns: 98px calc(100% - 260px) 98px;
}
.l-page-size-1036 .written-content,
.l-page-size-1036 .c-book-chapter {
  max-width: 1286px;
}

@media screen and (max-width: 767px) {
  .bookmarks-banner {
    flex-direction: column;
    align-items: start;
    gap: 1.5rem;
  }
}
.bookmarks-content {
  margin: 7.5rem 0 28.9375rem 0;
}
.bookmarks-content-empty {
  font-size: 1.75rem;
}
.bookmarks .card .card-bottom .card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/**
 *
 * Carbon ads custom CSS classes to fix layout, display and positioning
 *
 * 1. Content
 *
 * 2. Hero
 *
 *
 *
 **/
/* REFERENCES

  https://codepen.io/collection/nrwLmB
  https://codepen.io/collection/AyEoKk
  https://buysellads.gitbook.io/monetization/custom-template-integration/about
*/
/* ==========================================================================
1. Content
========================================================================== */
@media screen and (min-width: 1500px) {
  .carbon-ad-box {
    position: absolute;
    right: -180px;
    max-width: 150px;
    height: 100%;
  }
}
.carbon-ad-box #carbonads {
  /* Based on "Align Left" in https://codepen.io/collection/AyEoKk/?cursor=ZD0xJm89MSZwPTEmdj03&__cf_chl_captcha_tk__=pmd_nMU9jysxWV_aE06SoBFAY_rg3XuwrdiH7SYN_b499Bw-1634128889-0-gqNtZGzNA1CjcnBszQdl */
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.5;
  overflow: hidden;
  text-align: left;
  position: relative;
}
@media screen and (min-width: 1500px) {
  .carbon-ad-box #carbonads {
    position: sticky;
    top: 16px;
  }
}
.carbon-ad-box #carbonads a {
  text-decoration: none;
  color: inherit;
}
.carbon-ad-box #carbonads a:hover {
  color: inherit;
}
.carbon-ad-box #carbonads span {
  display: block;
  overflow: hidden;
}
.carbon-ad-box #carbonads img {
  margin: 0;
  padding: 0;
}
.carbon-ad-box #carbonads .carbon-img {
  display: block;
  margin: 0 auto 8px;
  line-height: 1;
}
.carbon-ad-box #carbonads .carbon-text {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
}
.carbon-ad-box #carbonads .carbon-poweredby {
  display: block;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
@media screen and (max-width: 1498px) {
  .carbon-ad-box #carbonads {
    margin: 20px 0;
  }
  .carbon-ad-box #carbonads .carbon-wrap {
    display: flex;
    flex-direction: row;
    gap: 10px;
  }
  .carbon-ad-box #carbonads .carbon-img {
    margin: 0;
  }
  .carbon-ad-box #carbonads .carbon-text {
    margin-bottom: 28px;
    padding: 10px 10px 0 10px;
    font-size: 12px;
  }
  .carbon-ad-box #carbonads .carbon-poweredby {
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
}

/* ==========================================================================
2. Hero
========================================================================== */
#carbon-hero-ad {
  z-index: 100;
  margin-top: 50px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  overflow: hidden;
  max-width: 400px;
  border-radius: 12px;
  box-shadow: 0 1px 8px 1px hsla(0, 100%, 100%, 0.05);
}
#carbon-hero-ad * {
  margin: initial;
  padding: initial;
}
#carbon-hero-ad .native-banner {
  display: flex;
  justify-content: space-between;
  text-decoration: none;
  background-color: #14161E;
  color: #FFFFFF;
  flex-flow: row nowrap;
}
#carbon-hero-ad .native-img {
  display: flex;
  align-items: center;
  padding: 0 20px;
  line-height: 0;
  box-sizing: border-box;
}
#carbon-hero-ad .native-img img {
  line-height: 1;
  max-width: 125px;
}
#carbon-hero-ad a {
  color: #FFFFFF;
}
#carbon-hero-ad .native-details {
  display: flex;
  align-items: start;
  padding: 10px;
  flex-flow: column nowrap;
}
#carbon-hero-ad .native-company {
  font-size: 10px;
  font-weight: 600;
  max-width: 80%;
  text-transform: uppercase;
}
#carbon-hero-ad .native-desc {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}
#carbon-hero-ad .native-cta {
  margin-top: 4px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  border: solid 1px hsla(0, 100%, 100%, 0.1);
  border-radius: 4px;
}

/**
 *  Collection Pages
 *
 *  This is for video collections and (possibly) books.
 *
 * 1. Content Middle
 */
/* ==========================================================================
  1. Content Middle
 ========================================================================== */
.content-middle {
  display: grid;
  grid-column-gap: 8.33%;
  grid-template-columns: 33.33% 58.33%;
}
@media screen and (max-width: 959px) {
  .content-middle {
    grid-template-columns: 1fr;
    margin-bottom: 0;
  }
}
.content-middle .content-middle-left .tile {
  padding: 0;
  border-radius: 0;
  margin-top: 80px;
}
.content-middle .content-middle-left .tile:first-of-type {
  margin-top: 0;
}
.content-middle .content-middle-left .tile .tile-header {
  min-height: 24px;
  margin-bottom: 20px;
}
.content-middle .content-middle-left .tile p,
.content-middle .content-middle-left .tile ul,
.content-middle .content-middle-left .tile ol {
  margin-top: 20px;
  padding-left: 0;
}
.content-middle .content-middle-left .tile p:first-of-type,
.content-middle .content-middle-left .tile ul:first-of-type,
.content-middle .content-middle-left .tile ol:first-of-type {
  margin-top: 0;
}
.content-middle .content-middle-left .tile p + ul {
  margin-top: 20px;
}
.content-middle .content-middle-left .tile p + ul:first-of-type {
  margin-top: 20px;
}
.content-middle .content-middle-left .tile p + ol {
  margin-top: 20px;
}
.content-middle .content-middle-left .tile p + ol:first-of-type {
  margin-top: 20px;
}
@media screen and (max-width: 959px) {
  .content-middle .content-middle-right {
    margin-top: 80px;
  }
}
.content-middle .content-middle-right .child-content-list-header:first-of-type {
  margin-top: 0;
}
.content-middle .content-middle-right .accordion-title:hover {
  text-decoration: underline !important;
  color: #CE3F00 !important;
  transition: none;
}
.content-middle .content-footer {
  margin: 0;
}

/**
 *  Content Pages
 *
 *  This is shared between articles, video collections and books.
 *
 * 1. Footer
 */
/* ==========================================================================
  1. Footer
 ========================================================================== */
footer.content-footer {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin: 48px 0;
}
footer.content-footer a {
  color: #14161E;
}
footer.content-footer .content-footer-actions .icon-prefix {
  margin-bottom: 16px;
}
footer.content-footer .content-footer-actions .icon-prefix svg {
  fill: #14161E;
}

/* new class for path builder as a placeholder */
.path-builder {
  display: flex;
  gap: 96px;
}
@media screen and (max-width: 1023px) {
  .path-builder {
    flex-direction: column;
    gap: 48px;
  }
}
.path-builder nav.path-builder-nav {
  max-width: 298px;
  width: 100%;
}
.path-builder .path-builder-container {
  border-radius: 16px;
  padding: 24px;
  background-color: #14161E;
  margin-top: 96px;
  max-width: 792px;
  width: 100%;
  border: 1px solid #FFFFFF;
}
@media screen and (max-width: 1023px) {
  .path-builder .path-builder-container {
    margin-top: unset;
  }
}
.path-builder .path-builder-container .search.input-icon .input-right {
  right: 16px;
  width: auto;
  font-size: 14px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6) !important;
}
.path-builder .path-builder-container .search.input-icon .search-normal {
  padding-right: 120px;
}
.path-builder .path-builder-container .error-message {
  background-color: #962224;
  inline-size: fit-content;
  margin-top: 8px;
  padding: 13px 16px;
  border-radius: 0.5rem;
  position: relative;
  top: -30px;
}
.path-builder .path-builder-container .clip {
  position: relative;
  top: 16px;
  left: 32px;
  z-index: 1;
}
.path-builder .path-builder-container {
  /* Placeholder for list items until we can get a fix for the murakami version */
}
.path-builder .path-builder-container .ol-list li::before {
  left: -1em;
  top: 1em;
  border: none;
}
.path-builder .path-builder-container .ol-list li {
  max-width: 701px;
}
.path-builder .path-builder-container .reposition-control {
  position: absolute;
  display: grid;
  gap: 8px;
  left: -56px;
  top: 0;
}
.path-builder svg.icon {
  max-height: 16px;
  max-width: 16px;
}
.path-builder .tooltip .tooltip-text {
  max-width: 245px;
}
.path-builder .suggestions {
  position: relative;
  background-color: #2B2D34;
  border: 1px solid #FFFFFF;
  border-radius: 16px;
  top: -30px;
  max-width: 744px;
  padding: 24px;
  z-index: 1;
  display: flex;
  gap: 24px;
}
.path-builder .suggestions-content {
  max-width: 610px;
}
.path-builder .suggestions-btn {
  align-self: flex-end;
}
.path-builder .suggestions-link {
  font-size: 1.25rem;
  line-height: 1.25rem;
  text-decoration: none;
  border-bottom: 1px solid #FFFFFF;
}
.path-builder .suggestions-metadata {
  margin-top: 24px;
  font-size: 1rem;
  line-height: 1rem;
  display: flex;
  align-items: center;
  column-gap: 8px;
}
.path-builder .suggestions-metadata > svg {
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
}
.path-builder .suggestions-description {
  margin-top: 16px;
  align-items: flex-end;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.delete-modal,
.share-modal,
.preview {
  width: 100%;
}
.delete-modal svg,
.share-modal svg,
.preview svg {
  cursor: pointer;
  max-width: 20px;
  max-height: 20px;
}

.assignees-table.elementary-table {
  border: 1px solid #FFFFFF;
}
.assignees-table.elementary-table .tooltip > svg {
  max-width: 16px;
  max-height: 16px;
  margin-bottom: -4px;
}
.assignees-table.elementary-table .tooltip .tooltip-text.tooltip-text-multi {
  max-width: none;
}
.assignees-table.elementary-table .dropdown {
  display: flex;
  justify-content: flex-start;
}
.assignees-table.elementary-table .dropdown .dropdown-menu {
  right: 0;
  margin-top: 20px;
  left: unset;
}
.assignees-table.elementary-table .dropdown .dropdown-menu .dropdown-content a.dropdown-line {
  display: flex;
  justify-content: flex-start;
}

.cards-clp .card.card-clp:hover .card-bottom .card-action {
  z-index: 3;
}
.cards-clp .card.card-clp .card-bottom .card-action .tooltip svg.none-editable-assignee {
  opacity: 0.2;
}
.cards-clp .card.card-clp .card-bottom .card-action .tooltip .tooltip-text {
  text-align: center;
}
.cards-clp .card.card-clp .card-bottom .card-action svg.icon {
  width: 20px;
  height: 20px;
}
.cards-clp .card.card-clp .card-bottom .card-action .dropdown .dropdown-menu {
  z-index: 999999;
}
.cards-clp .card.card-clp .card-bottom .card-action .dropdown .dropdown-menu a.dropdown-line,
.cards-clp .card.card-clp .card-bottom .card-action .dropdown .dropdown-menu p.dropdown-line,
.cards-clp .card.card-clp .card-bottom .card-action .dropdown .dropdown-menu button.dropdown-line {
  display: flex;
  justify-content: flex-start;
}
.cards-clp .card.card-clp .card-bottom .card-action .dropdown .dropdown-menu p.dropdown-line {
  cursor: default;
}
.cards-clp .card.card-clp .card-bottom .card-action .dropdown .dropdown-menu p.dropdown-line svg.none-editable-assignee,
.cards-clp .card.card-clp .card-bottom .card-action .dropdown .dropdown-menu p.dropdown-line > span {
  opacity: 0.2;
}

/* ============================================================
 Team Library
============================================================ */
.team-library-member .tabs-content {
  padding: 32px 0;
}
.team-library-admin .tabs-content {
  padding: 24px 0;
}

/* ============================================================
 Assignee Modal
============================================================ */
.assignee-modal .modal-sticky-content {
  padding: unset;
  padding-bottom: 80px;
}
.assignee-modal .modal-sticky-content .elementary-table {
  border: unset;
}
.assignee-modal .elementary-table {
  border-radius: none;
}
.assignee-modal .elementary-table.is-controls .checkbox {
  padding-left: 16px;
}
.assignee-modal .elementary-table.is-controls td {
  margin: 4px;
}
.assignee-modal .elementary-table.is-controls .user-profile {
  display: flex;
  gap: 16px;
  height: 40px;
}
.assignee-modal .elementary-table.is-controls .user-profile .user-info img.profile-pic {
  border: 1px solid #FFFFFF;
  border-radius: 8px;
  width: 40px;
}
.assignee-modal .checkbox {
  display: inline-block;
}

/* ============================================================
 Progress indicator
============================================================ */
.progress-bar {
  width: 20px;
  height: 20px;
  position: relative;
}
.progress-bar .circle {
  fill: transparent;
  transform: rotate(-90deg);
}
.progress-bar .circle .circle-outline {
  /* Opacity for remaining progress */
  stroke: rgba(215, 215, 215, 0.2);
  stroke-width: 2px;
}
.progress-bar .circle .circle-progress {
  /* Solid color for completed progress */
  stroke: #00B87E;
  stroke-width: 2px;
  fill: transparent;
  stroke-dasharray: 0 56.55;
}

/**
 *
 *  A collection of styles that don't really fit anywhere else, and are used globally.
 *
 *  1. Body
 *
 */
/* ==========================================================================
 1. Body
========================================================================== */
.body {
  background-color: #F7F7F7;
}

/**
 *
 *  Library / Layout kodeco variant page
 *
 */
.library {
  max-width: 1584px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  grid-column-gap: 48px;
  position: relative;
}
.library > div {
  min-width: 0;
}
@media screen and (max-width: 1631px) {
  .library {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media screen and (max-width: 1439px) {
  .library {
    grid-template-columns: 280px 1fr;
  }
}
@media screen and (max-width: 959px) {
  .library {
    grid-template-columns: 1fr;
  }
}
.library .library-state {
  max-width: 396px;
  margin: 0 auto;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.library .library-state h3 {
  font-size: 1.75rem;
  line-height: 1.25;
}
.library .library-state h3 span {
  background-color: rgba(255, 136, 71, 0.5);
}
.library .library-state .loading, .library .library-state .loading-progress {
  width: 100%;
}
.library .library-search {
  display: flex;
  column-gap: 8px;
}
@media screen and (max-width: 767px) {
  .library .library-search {
    flex-direction: column;
    row-gap: 16px;
  }
}
@media screen and (max-width: 1439px) {
  .library > div:last-of-type {
    display: none;
  }
}
.library .search {
  width: 100%;
}
.library .search input {
  width: 100%;
}
.library .toggle-filter {
  position: absolute;
  left: 0;
  width: 280px;
  display: none;
}
@media screen and (max-width: 1631px) {
  .library .toggle-filter {
    left: 24px;
  }
}
@media screen and (max-width: 959px) {
  .library .toggle-filter {
    position: relative;
    left: auto;
    display: flex;
  }
}
.library .toc {
  position: absolute;
  left: 0;
  width: 280px;
  display: unset;
  overflow: visible;
}
@media screen and (max-width: 1631px) {
  .library .toc {
    left: 24px;
  }
}
@media screen and (max-width: 959px) {
  .library .toc {
    position: fixed;
    width: calc(100% - 48px);
    left: 24px;
    top: 108px;
    z-index: 10;
    height: calc(100% - 108px);
    background-color: #FFFFFF;
    overflow: hidden;
  }
  .library .toc.hidden {
    display: none;
  }
}
@media screen and (max-width: 959px) {
  .library .toc:before {
    content: "";
    width: calc(100% + 48px);
    height: calc(100% + 48px);
    position: absolute;
    left: -24px;
    top: -24px;
    z-index: -1;
    background-color: rgba(20, 22, 30, 0.5);
  }
}
@media screen and (max-width: 959px) {
  .library .toc .toc-header {
    position: absolute;
    width: 100%;
    z-index: 3;
  }
}
.library .toc .toc-header .tooltip {
  display: none;
}
@media screen and (max-width: 959px) {
  .library .toc .toc-header .tooltip {
    display: inline-block;
  }
}
.library .toc .toc-header .tooltip svg {
  max-width: 12px;
  max-height: 12px;
}
.library .toc .toc-body {
  padding: 0;
  max-height: none;
  overflow-y: visible;
  overflow-x: visible;
}
@media screen and (max-width: 959px) {
  .library .toc .toc-body {
    padding-top: 80px;
    overflow-y: scroll;
    height: 100%;
    background-color: #FFFFFF;
    border-radius: 16px;
  }
}
.library .toc .accordion {
  min-width: auto;
}
.library .toc .accordion .accordion-menu:nth-last-child(n+2) {
  padding-bottom: 8px;
}
.library .toc .accordion .accordion-trigger {
  padding: 0 24px;
}
.library .toc .accordion .accordion-trigger .trigger-text {
  font-size: 1.125rem;
}
.library .card, .library .card-minimal {
  margin-bottom: 16px;
}
.library .card .card-bottom .card-title, .library .card-minimal .card-bottom .card-title {
  font-size: 1.5rem;
}
.library .card .card-bottom mark, .library .card-minimal .card-bottom mark {
  background-color: rgba(255, 136, 71, 0.5) !important;
}
.library .card .card-content mark, .library .card-minimal .card-content mark {
  background-color: rgba(255, 136, 71, 0.5) !important;
}
.library .filter-tag {
  display: inline-flex;
  align-items: center;
  height: 40px;
  border-radius: 12px;
  font-size: 0.875rem;
  padding: 0 8px 0 16px;
  border: 1px solid #14161E;
  background-color: #FFFFFF;
  margin-right: 4px;
  margin-bottom: 8px;
}
.library .filter-tag button {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 8px;
}
.library .filter-tag button:hover {
  background-color: rgba(215, 215, 215, 0.5);
}
.library .filter-tag button svg {
  width: 8px;
  height: 8px;
}

/* ==========================================================================
2. Recent program and course cards
========================================================================== */
section.recent-programs-and-courses .tabs-content {
  padding: 0;
}
section.recent-programs-and-courses .card-wrapper {
  max-width: 100%;
}
@media screen and (max-width: 767px) {
  section.recent-programs-and-courses .card-wrapper {
    overflow-x: hidden;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  section.recent-programs-and-courses .card-wrapper {
    overflow-x: hidden;
  }
}
section.recent-programs-and-courses .card-wrapper .card-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  column-gap: 1rem;
  overflow-x: auto;
  padding-top: 24px;
  padding-bottom: 24px;
  scrollbar-color: hsl(21, 100%, 50%) hsla(0, 0%, 100%, 0.1);
  scrollbar-width: thin;
}
section.recent-programs-and-courses .card-wrapper .card-container::-webkit-scrollbar {
  height: 2px;
}
section.recent-programs-and-courses .card-wrapper .card-container::-webkit-scrollbar-track {
  background: hsla(0, 0%, 100%, 0.1);
}
section.recent-programs-and-courses .card-wrapper .card-container::-webkit-scrollbar-thumb {
  background: #FF5A00;
}
section.recent-programs-and-courses .card {
  width: 380px;
  height: 346px;
  flex-shrink: 0;
}
section.recent-programs-and-courses .card .card-bottom .card-description .card-text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.l-kodebit-article {
  min-height: 100vh;
}

.kodebits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 30px;
}

.kodebits-index-hero, .kodebit-header {
  background: #14161E;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.kodebits-index-hero::after, .kodebit-header::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.07;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/%23noiseFilter)'/%3E%3C/svg%3E");
}
.kodebits-index-hero::before, .kodebit-header::before {
  content: "";
  position: absolute;
  width: 60%;
  height: 200%;
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
  transition: background 0.5s ease;
}
.kodebits-index-hero > *, .kodebit-header > * {
  position: relative;
  z-index: 1;
}

.kodebit-header {
  color: #D7D7D7;
  padding: 40px 0;
}
.kodebit-header::before {
  top: -50%;
  right: 10%;
  width: 80%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 60%);
}
.kodebit-header .kodebit-header-flex-wrapper {
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 768px), print {
  .kodebit-header .kodebit-header-flex-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
  }
}
@media screen and (min-width: 768px), print {
  .kodebit-header .kodebit-header-content {
    flex: 1;
    max-width: 60%;
  }
}
.kodebit-header .kodebit-header-icons {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
@media screen and (min-width: 768px), print {
  .kodebit-header .kodebit-header-icons {
    display: grid;
    margin-right: -20px;
  }
}

.kodebits-index-hero {
  padding: 80px 0 60px;
}
.kodebits-index-hero::before {
  top: -50%;
  right: 10%;
  background: radial-gradient(circle at 60% 40%, rgba(255, 90, 0, 0.4) 0%, rgba(255, 90, 0, 0.15) 40%, rgba(0, 0, 0, 0) 70%);
}

.kodebit-index-title {
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  margin-bottom: 16px;
  line-height: 1.1;
}
@media screen and (min-width: 768px), print {
  .kodebit-index-title {
    font-size: 4.5rem;
  }
}

.kodebit-index-description {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #D7D7D7;
  max-width: 600px;
}

.kodebit-card.glassy-card {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 30px;
  border-radius: 24px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-decoration: none;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}
.prefers-color-scheme--dark .kodebit-card.glassy-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
.kodebit-card.glassy-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.15);
}
.prefers-color-scheme--dark .kodebit-card.glassy-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.kodebit-card.glassy-card:hover .arrow-icon, .prefers-color-scheme--dark .kodebit-card.glassy-card:hover .arrow-icon {
  transform: translateX(4px);
  fill: #FF8847;
}
.kodebit-card.glassy-card .card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.kodebit-card.glassy-card .card-icon-wrapper {
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prefers-color-scheme--dark .kodebit-card.glassy-card .card-icon-wrapper {
  background: rgba(255, 255, 255, 0.1);
}
.kodebit-card.glassy-card .icon-mask {
  width: 24px;
  height: 24px;
  background-color: #333;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.prefers-color-scheme--dark .kodebit-card.glassy-card .icon-mask {
  background-color: #fff;
}
.kodebit-card.glassy-card .card-domain-label {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #3B3D43;
}
.prefers-color-scheme--dark .kodebit-card.glassy-card .card-domain-label {
  color: #D7D7D7;
}
.kodebit-card.glassy-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.kodebit-card.glassy-card .card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #14161E;
  margin-bottom: 8px;
  line-height: 1.3;
}
.prefers-color-scheme--dark .kodebit-card.glassy-card .card-title {
  color: #FFFFFF;
}
.kodebit-card.glassy-card .card-date {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #07080A;
  margin-bottom: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.prefers-color-scheme--dark .kodebit-card.glassy-card .card-date {
  color: rgba(215, 215, 215, 0.4980392157);
}
.kodebit-card.glassy-card .card-description {
  font-size: 1rem;
  line-height: 1.6;
  color: #14161E;
  margin-bottom: 24px;
  flex: 1;
}
.prefers-color-scheme--dark .kodebit-card.glassy-card .card-description {
  color: #D7D7D7;
}
.kodebit-card.glassy-card .card-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.875rem;
  color: #14161E;
}
.prefers-color-scheme--dark .kodebit-card.glassy-card .card-cta {
  color: #FFFFFF;
}
.kodebit-card.glassy-card .arrow-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s, fill 0.2s;
}
.prefers-color-scheme--dark .kodebit-card.glassy-card .arrow-icon {
  fill: #D7D7D7;
}

.glassy-icon-card {
  width: 160px;
  height: 160px;
  background-color: #14161E;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  background: linear-gradient(135deg, #14161E 0%, rgba(255, 255, 255, 0.1) 100%);
}
.glassy-icon-card .icon-mask {
  width: 80px;
  height: 80px;
  background-color: #FFFFFF;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.glassy-icon-card .tech-icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
}
.glassy-icon-card.tech-card {
  transform: translateY(40px);
}

.kodebit-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 600px) {
  .kodebit-navigation {
    grid-template-columns: 1fr;
  }
}

.glassy-nav-tile {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 16px;
  padding: 24px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  background: rgba(215, 215, 215, 0.2);
  border: 1px solid rgba(215, 215, 215, 0.4980392157);
  position: relative;
  overflow: hidden;
  gap: 20px;
}
.prefers-color-scheme--dark .glassy-nav-tile {
  background: #14161E;
  border-color: rgba(255, 255, 255, 0.1);
}
.glassy-nav-tile .nav-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.glassy-nav-tile .nav-icon-wrapper {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.glassy-nav-tile .icon-mask {
  width: 32px;
  height: 32px;
  background-color: #888;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  transition: background-color 0.3s;
}
.glassy-nav-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}
.glassy-nav-tile.nav-placeholder {
  visibility: hidden;
}
@media (max-width: 600px) {
  .glassy-nav-tile.nav-placeholder {
    display: none;
  }
}
.glassy-nav-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.3);
}
.glassy-nav-tile:hover::before {
  opacity: 1;
}
.glassy-nav-tile .nav-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 4px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.glassy-nav-tile .nav-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: inherit;
  line-height: 1.3;
}
.glassy-nav-tile.nav-prev {
  text-align: right;
  flex-direction: row-reverse;
}
.glassy-nav-tile.nav-next {
  text-align: left;
}

.glassy-pill {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  padding: 6px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #D7D7D7;
  white-space: nowrap;
}
.glassy-pill .pill-icon {
  width: 16px;
  height: 16px;
}

.difficulty-pill {
  cursor: help;
  user-select: none;
  letter-spacing: 0.15em;
}
.difficulty-pill.difficulty-beginner {
  border-color: rgba(21, 120, 87, 0.3);
  background: rgba(21, 120, 87, 0.1);
  color: rgba(21, 120, 87, 0.8);
}
.prefers-color-scheme--dark .difficulty-pill.difficulty-beginner {
  border-color: rgba(21, 120, 87, 0.4);
  background: rgba(21, 120, 87, 0.15);
  color: #157857 !important;
}
.difficulty-pill.difficulty-intermediate {
  border-color: rgba(227, 169, 61, 0.3);
  background: rgba(227, 169, 61, 0.1);
  color: rgba(227, 169, 61, 0.8);
}
.prefers-color-scheme--dark .difficulty-pill.difficulty-intermediate {
  border-color: rgba(227, 169, 61, 0.4);
  background: rgba(227, 169, 61, 0.15);
  color: #E3A93D !important;
}
.difficulty-pill.difficulty-advanced {
  border-color: rgba(150, 34, 36, 0.3);
  background: rgba(150, 34, 36, 0.1);
  color: rgba(150, 34, 36, 0.8);
}
.prefers-color-scheme--dark .difficulty-pill.difficulty-advanced {
  border-color: rgba(150, 34, 36, 0.4);
  background: rgba(150, 34, 36, 0.15);
  color: #962224 !important;
}

.card-date .difficulty-pill {
  font-size: 0.65rem;
  padding: 3px 10px;
  letter-spacing: 0.1em;
  margin-left: 8px;
}

.kodebit-logo {
  height: 48px;
  width: auto;
  display: block;
  margin-bottom: 16px;
}

.kodebit-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

h1.kodebit-title {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  color: #FFFFFF;
  letter-spacing: -0.02em !important;
}
@media (max-width: 768px) {
  h1.kodebit-title {
    font-size: 2rem;
  }
}

.kodebit-date {
  font-size: 0.875rem;
  color: #D7D7D7;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kodebit-description {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #D7D7D7;
  max-width: 800px;
}

.kodebit-content-body {
  font-size: 1.125rem;
  line-height: 1.8;
  color: inherit;
}

.kodebit-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 40px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 30px;
}
.prefers-color-scheme--dark .kodebit-footer {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.kodebit-project-blurb {
  flex: 1;
  min-width: 280px;
}
.kodebit-project-blurb h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}
.kodebit-project-blurb p {
  font-size: 0.95rem;
  color: rgba(0, 0, 0, 0.5);
}
.prefers-color-scheme--dark .kodebit-project-blurb p {
  color: #F7F7F7;
}

.kodebit-socials {
  display: flex;
  gap: 16px;
}
.kodebit-socials .social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #D7D7D7;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.prefers-color-scheme--dark .kodebit-socials .social-link {
  background: #14161E;
}
.kodebit-socials .social-link svg {
  fill: #F7F7F7;
  width: 24px;
  height: 24px;
}
.kodebit-socials .social-link:hover {
  background: rgba(215, 215, 215, 0.4980392157);
  transform: translateY(-2px);
}
.prefers-color-scheme--dark .kodebit-socials .social-link:hover {
  background: #30363D;
}
.kodebit-socials .social-link:hover svg {
  fill: #FF8847;
}

.kodebit-header.domain-ios::before {
  background: radial-gradient(circle at 60% 40%, rgba(135, 99, 210, 0.18) 0%, rgba(135, 99, 210, 0.05) 40%, rgba(0, 0, 0, 0) 70%);
}

.domain-ios .glassy-icon-card {
  background: linear-gradient(135deg, #14161E 0%, rgba(135, 99, 210, 0.15) 100%);
}
.domain-ios .glassy-icon-card.domain-card .icon-mask {
  background-color: #8763D2;
}

.glassy-pill.domain-ios {
  border-color: rgba(135, 99, 210, 0.3);
  background: rgba(135, 99, 210, 0.1);
  color: rgb(64.8814749781%, 54.3459174715%, 86.8305531168%);
}

.glassy-nav-tile.domain-ios .icon-mask {
  background-color: rgb(41.0008779631%, 23.3011413521%, 77.8753292362%);
}
.glassy-nav-tile.domain-ios:hover {
  border-color: rgba(135, 99, 210, 0.5);
}
.glassy-nav-tile.domain-ios:hover .icon-mask {
  background-color: #8763D2;
}
.glassy-nav-tile.domain-ios.nav-prev::before {
  background: radial-gradient(circle at 10% 50%, rgba(135, 99, 210, 0.25) 0%, rgba(135, 99, 210, 0) 60%);
}
.glassy-nav-tile.domain-ios.nav-next::before {
  background: radial-gradient(circle at 90% 50%, rgba(135, 99, 210, 0.25) 0%, rgba(135, 99, 210, 0) 60%);
}

.kodebit-card.domain-ios .icon-mask {
  background-color: #8763D2 !important;
}
.kodebit-card.domain-ios .card-domain-label {
  color: #8763D2 !important;
}
.kodebit-card.domain-ios:hover {
  border-color: rgba(135, 99, 210, 0.4);
  box-shadow: 0 10px 30px rgba(135, 99, 210, 0.15);
}
@media (prefers-color-scheme: dark) {
  .kodebit-card.domain-ios:hover {
    box-shadow: 0 20px 40px rgba(135, 99, 210, 0.1);
  }
}
.kodebit-card.domain-ios:hover::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at top right, rgba(135, 99, 210, 0.08), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  .kodebit-card.domain-ios:hover::before {
    background: radial-gradient(circle at top right, rgba(135, 99, 210, 0.15), transparent 70%);
  }
}

.kodebit-header.domain-android::before {
  background: radial-gradient(circle at 60% 40%, rgba(0, 184, 126, 0.18) 0%, rgba(0, 184, 126, 0.05) 40%, rgba(0, 0, 0, 0) 70%);
}

.domain-android .glassy-icon-card {
  background: linear-gradient(135deg, #14161E 0%, rgba(0, 184, 126, 0.15) 100%);
}
.domain-android .glassy-icon-card.domain-card .icon-mask {
  background-color: #00B87E;
}

.glassy-pill.domain-android {
  border-color: rgba(0, 184, 126, 0.3);
  background: rgba(0, 184, 126, 0.1);
  color: rgb(0%, 92.1568627451%, 63.1074168798%);
}

.glassy-nav-tile.domain-android .icon-mask {
  background-color: rgb(0%, 52.1568627451%, 35.716112532%);
}
.glassy-nav-tile.domain-android:hover {
  border-color: rgba(0, 184, 126, 0.5);
}
.glassy-nav-tile.domain-android:hover .icon-mask {
  background-color: #00B87E;
}
.glassy-nav-tile.domain-android.nav-prev::before {
  background: radial-gradient(circle at 10% 50%, rgba(0, 184, 126, 0.25) 0%, rgba(0, 184, 126, 0) 60%);
}
.glassy-nav-tile.domain-android.nav-next::before {
  background: radial-gradient(circle at 90% 50%, rgba(0, 184, 126, 0.25) 0%, rgba(0, 184, 126, 0) 60%);
}

.kodebit-card.domain-android .icon-mask {
  background-color: #00B87E !important;
}
.kodebit-card.domain-android .card-domain-label {
  color: #00B87E !important;
}
.kodebit-card.domain-android:hover {
  border-color: rgba(0, 184, 126, 0.4);
  box-shadow: 0 10px 30px rgba(0, 184, 126, 0.15);
}
@media (prefers-color-scheme: dark) {
  .kodebit-card.domain-android:hover {
    box-shadow: 0 20px 40px rgba(0, 184, 126, 0.1);
  }
}
.kodebit-card.domain-android:hover::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at top right, rgba(0, 184, 126, 0.08), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  .kodebit-card.domain-android:hover::before {
    background: radial-gradient(circle at top right, rgba(0, 184, 126, 0.15), transparent 70%);
  }
}

.kodebit-header.domain-ai::before {
  background: radial-gradient(circle at 60% 40%, rgba(230, 151, 138, 0.18) 0%, rgba(230, 151, 138, 0.05) 40%, rgba(0, 0, 0, 0) 70%);
}

.domain-ai .glassy-icon-card {
  background: linear-gradient(135deg, #14161E 0%, rgba(230, 151, 138, 0.15) 100%);
}
.domain-ai .glassy-icon-card.domain-card .icon-mask {
  background-color: #E6978A;
}

.glassy-pill.domain-ai {
  border-color: rgba(230, 151, 138, 0.3);
  background: rgba(230, 151, 138, 0.1);
  color: rgb(93.7172051919%, 73.8635735985%, 70.5965202983%);
}

.glassy-nav-tile.domain-ai .icon-mask {
  background-color: rgb(86.6749516708%, 44.5677989506%, 37.6387738194%);
}
.glassy-nav-tile.domain-ai:hover {
  border-color: rgba(230, 151, 138, 0.5);
}
.glassy-nav-tile.domain-ai:hover .icon-mask {
  background-color: #E6978A;
}
.glassy-nav-tile.domain-ai.nav-prev::before {
  background: radial-gradient(circle at 10% 50%, rgba(230, 151, 138, 0.25) 0%, rgba(230, 151, 138, 0) 60%);
}
.glassy-nav-tile.domain-ai.nav-next::before {
  background: radial-gradient(circle at 90% 50%, rgba(230, 151, 138, 0.25) 0%, rgba(230, 151, 138, 0) 60%);
}

.kodebit-card.domain-ai .icon-mask {
  background-color: #E6978A !important;
}
.kodebit-card.domain-ai .card-domain-label {
  color: #E6978A !important;
}
.kodebit-card.domain-ai:hover {
  border-color: rgba(230, 151, 138, 0.4);
  box-shadow: 0 10px 30px rgba(230, 151, 138, 0.15);
}
@media (prefers-color-scheme: dark) {
  .kodebit-card.domain-ai:hover {
    box-shadow: 0 20px 40px rgba(230, 151, 138, 0.1);
  }
}
.kodebit-card.domain-ai:hover::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at top right, rgba(230, 151, 138, 0.08), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  .kodebit-card.domain-ai:hover::before {
    background: radial-gradient(circle at top right, rgba(230, 151, 138, 0.15), transparent 70%);
  }
}

.kodebit-header.domain-flutter::before {
  background: radial-gradient(circle at 60% 40%, rgba(46, 164, 221, 0.18) 0%, rgba(46, 164, 221, 0.05) 40%, rgba(0, 0, 0, 0) 70%);
}

.domain-flutter .glassy-icon-card {
  background: linear-gradient(135deg, #14161E 0%, rgba(46, 164, 221, 0.15) 100%);
}
.domain-flutter .glassy-icon-card.domain-card .icon-mask {
  background-color: #2EA4DD;
}

.glassy-pill.domain-flutter {
  border-color: rgba(46, 164, 221, 0.3);
  background: rgba(46, 164, 221, 0.1);
  color: rgb(35.2408617768%, 71.8034374244%, 89.4650205761%);
}

.glassy-nav-tile.domain-flutter .icon-mask {
  background-color: rgb(11.8518518519%, 52.9847494553%, 72.8540305011%);
}
.glassy-nav-tile.domain-flutter:hover {
  border-color: rgba(46, 164, 221, 0.5);
}
.glassy-nav-tile.domain-flutter:hover .icon-mask {
  background-color: #2EA4DD;
}
.glassy-nav-tile.domain-flutter.nav-prev::before {
  background: radial-gradient(circle at 10% 50%, rgba(46, 164, 221, 0.25) 0%, rgba(46, 164, 221, 0) 60%);
}
.glassy-nav-tile.domain-flutter.nav-next::before {
  background: radial-gradient(circle at 90% 50%, rgba(46, 164, 221, 0.25) 0%, rgba(46, 164, 221, 0) 60%);
}

.kodebit-card.domain-flutter .icon-mask {
  background-color: #2EA4DD !important;
}
.kodebit-card.domain-flutter .card-domain-label {
  color: #2EA4DD !important;
}
.kodebit-card.domain-flutter:hover {
  border-color: rgba(46, 164, 221, 0.4);
  box-shadow: 0 10px 30px rgba(46, 164, 221, 0.15);
}
@media (prefers-color-scheme: dark) {
  .kodebit-card.domain-flutter:hover {
    box-shadow: 0 20px 40px rgba(46, 164, 221, 0.1);
  }
}
.kodebit-card.domain-flutter:hover::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at top right, rgba(46, 164, 221, 0.08), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  .kodebit-card.domain-flutter:hover::before {
    background: radial-gradient(circle at top right, rgba(46, 164, 221, 0.15), transparent 70%);
  }
}

:root {
  --blog-shadow-color: rgba(0, 0, 0, 0.1);
  --blog-shadow-color-hover: rgba(0, 0, 0, 0.15);
  --blog-surface-muted: #f9f9f9;
  --blog-surface-muted-hover: #f0f0f0;
  --blog-header-panel-bg: rgba(20, 22, 30, 0.6);
  --blog-header-panel-border: rgba(255, 255, 255, 0.18);
}

.prefers-color-scheme--dark {
  --blog-shadow-color: rgba(0, 0, 0, 0.45);
  --blog-shadow-color-hover: rgba(0, 0, 0, 0.6);
  --blog-surface-muted: #111318;
  --blog-surface-muted-hover: #1a1d24;
  --blog-header-panel-bg: rgba(10, 11, 16, 0.75);
  --blog-header-panel-border: rgba(255, 255, 255, 0.08);
}

.blog-index-hero {
  background: linear-gradient(135deg, #597CEE 0%, #8763D2 100%);
  color: #FFFFFF;
  padding: 60px 0;
}
@media (max-width: 768px) {
  .blog-index-hero {
    padding: 40px 0;
  }
}

.blog-hero-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.blog-index-title {
  font-size: 3.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
  line-height: 1.2;
}
@media (max-width: 768px) {
  .blog-index-title {
    font-size: 2.5rem;
  }
}

.blog-index-description {
  font-size: 1.25rem;
  font-weight: 400;
  opacity: 0.95;
  line-height: 1.6;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}
@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.blog-card {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px var(--blog-shadow-color);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  color: inherit;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--blog-shadow-color-hover);
}

.blog-card-image {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: var(--blog-surface-muted-hover);
}

.blog-card-placeholder {
  background: linear-gradient(135deg, #F26FAA 0%, #E34A4C 100%);
}

.blog-card-content {
  padding: 1.5rem;
}

.prefers-color-scheme--dark .blog-card {
  background: #0E0F14;
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .blog-card-content {
  background: #0E0F14;
}
.prefers-color-scheme--dark .blog-card-title {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .blog-card-meta,
.prefers-color-scheme--dark .blog-card-excerpt,
.prefers-color-scheme--dark .blog-reading-time {
  color: #D7D7D7;
}
.prefers-color-scheme--dark .author-name {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .blog-date {
  color: rgba(215, 215, 215, 0.4980392157);
}
.prefers-color-scheme--dark .blog-card-cta {
  color: #FF8847;
}

.blog-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.3;
  color: #14161E;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: #5F4F5E;
}

.blog-author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.author-name {
  font-weight: 600;
  color: #14161E;
}

.blog-date {
  color: #AC9FAB;
}

.blog-card-excerpt {
  font-size: 1rem;
  line-height: 1.6;
  color: #5F4F5E;
  margin-bottom: 1rem;
}

.blog-reading-time {
  font-size: 0.85rem;
  color: #AC9FAB;
  margin-bottom: 1rem;
}

.blog-card-cta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: #FF8847;
}
.blog-card-cta .arrow-icon {
  width: 16px;
  height: 16px;
  color: inherit;
  fill: currentColor;
  stroke: currentColor;
  transition: transform 0.2s ease;
}
.blog-card-cta .arrow-icon * {
  fill: currentColor;
  stroke: currentColor;
}
.blog-card:hover .blog-card-cta .arrow-icon {
  transform: translateX(4px);
}

.blog-header {
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  padding: 60px 0 40px;
}
@media (max-width: 768px) {
  .blog-header {
    padding: 40px 0 30px;
  }
}

.blog-header-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.blog-header-media--gradient {
  background-image: linear-gradient(135deg, #597CEE 0%, #8763D2 100%);
}

.blog-header--with-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 30, 0.35);
  z-index: 1;
}

.prefers-color-scheme--dark .blog-header-media--gradient {
  background-image: linear-gradient(135deg, #0E0F14 0%, #3C2C64 100%);
}
.prefers-color-scheme--dark .blog-header--with-image::before {
  background: rgba(14, 15, 20, 0.55);
}

.blog-header-panel {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding: 32px;
  border-radius: 16px;
  background: var(--blog-header-panel-bg);
  border: 1px solid var(--blog-header-panel-border);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
@media (max-width: 768px) {
  .blog-header-panel {
    padding: 24px;
  }
}

.blog-breadcrumb .breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 0.9rem;
  transition: opacity 0.2s ease;
}
.blog-breadcrumb .breadcrumb-link:hover {
  opacity: 0.7;
}
.blog-breadcrumb .breadcrumb-link .arrow-icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
  color: currentColor;
}

.blog-title {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  .blog-title {
    font-size: 2rem;
  }
}

.blog-meta {
  margin-bottom: 1.5rem;
}

.blog-author-inline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.author-avatar-small {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.author-details .author-name {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.blog-date-and-time {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  opacity: 0.9;
}
.blog-date-and-time .reading-time-separator {
  opacity: 0.6;
}

.blog-header .blog-date,
.blog-header .reading-time,
.blog-header .blog-date-and-time {
  color: rgba(255, 255, 255, 0.85);
}
.blog-header .author-name {
  color: #FFFFFF;
}
.blog-header .reading-time-separator {
  color: rgba(255, 255, 255, 0.7);
}

.blog-description {
  font-size: 1.25rem;
  line-height: 1.6;
  opacity: 0.95;
  font-weight: 400;
}

.blog-content-body .written-content .blog-image-attribution {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid #D7D7D7;
  font-size: 0.9rem;
  line-height: 1.4;
  margin-top: 2.5rem;
}
.blog-content-body .written-content .blog-image-attribution .blog-image-attribution-thumbnail {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 12px;
  overflow: hidden;
  background: #D7D7D7;
}
.blog-content-body .written-content .blog-image-attribution .blog-image-attribution-thumbnail img {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 12px;
}
.blog-content-body .written-content .blog-image-attribution .blog-image-attribution-text p {
  margin: 0;
}
.blog-content-body .written-content .blog-image-attribution .blog-image-attribution-text p + p {
  margin-top: 0.25rem;
}
.blog-content-body .written-content .blog-image-attribution a {
  color: inherit;
  text-decoration: underline;
}

.blog-author-bio {
  border-top: 2px solid #D7D7D7;
  padding-top: 2rem;
}

.author-bio-card {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
@media (max-width: 768px) {
  .author-bio-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.author-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.author-bio-content {
  flex: 1;
}

.author-bio-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #14161E;
}

.author-bio-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #5F4F5E;
}

.blog-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (max-width: 768px) {
  .blog-navigation {
    grid-template-columns: 1fr;
  }
}

.blog-nav-tile {
  display: block;
  padding: 1.5rem;
  background: var(--blog-surface-muted);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease, transform 0.2s ease;
}
.blog-nav-tile:not(.nav-placeholder):hover {
  background: var(--blog-surface-muted-hover);
  transform: translateY(-2px);
}
.blog-nav-tile.nav-placeholder {
  opacity: 0;
  pointer-events: none;
}

.nav-content .nav-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #597CEE;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.nav-content .nav-title {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: #14161E;
  line-height: 1.3;
}

.prefers-color-scheme--dark .blog-nav-tile {
  background: #0E0F14;
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .blog-nav-tile:not(.nav-placeholder):hover {
  background: #30363D;
}
.prefers-color-scheme--dark .nav-content .nav-label {
  color: #FF8847;
}
.prefers-color-scheme--dark .nav-content .nav-title {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .blog-content-body .written-content .blog-image-attribution {
  background: #0E0F14;
  border-color: #30363D;
  color: #D7D7D7;
}
.prefers-color-scheme--dark .blog-content-body .written-content .blog-image-attribution .blog-image-attribution-thumbnail {
  background: #30363D;
}

.blog-footer-link {
  margin-top: 3rem;
}
.blog-footer-link .button-link {
  display: inline-block;
  padding: 1rem 2rem;
  background: #597CEE;
  color: #FFFFFF;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: background 0.2s ease, transform 0.2s ease;
}
.blog-footer-link .button-link:hover {
  background: #2C48A1;
  transform: translateY(-2px);
}

/**
*
* Night Mode
*
*
* 1. Global
* 2. Homepage (Logged In)
* 3. Homepage (Logged Out)
* 4. Notebook Card
* 5. Author About page
* 6. Library
* 7. Content TOC
* 8. Reviews
* 9a. Video — Episode Info
* 9b. Video — Player
* 10a. Article — TOC
* 10b. Article — Footer
* 10c. Article — Spoilers
* 11a. Content (accordion, header, footer)
* 11b. Content — Modals
* 12a. Book Chapter — TOC
* 12b. Book Chapter — Highlighting Tooltip
* 12c. Book Chapter — Highlighting Colours
* 12d. Book Chapter — Experience Switcher
* 12e. Book Chapter — Notebook
* 12f. Book Chapter — Search
* 12g. Book Chapter — Content
* 12h. Book Chapter — Mobile Nav?
* 13. Learning Paths
* 14. Loading
* 15. Community Banners
* 17. Newsletter
* 18. Loader for Domain pages
* 20. About and team directory
* 21. Achievements
* 22. Banners / Messaging
* 23. Content pre, blockquote etc.
* 24. Homepage: Why Kodeco
* 25. Code Formatting
* 26. Quiz
* 27. Program
* 28. Progress - Mark as complete
* 29. Content Module
*
* X. Apply to CSS
*
**/
/* ==========================================================================
1. Dark styles as a placeholder to use for JS and OS with single stylesheet
========================================================================== */
/* ==========================================================================
Apply to CSS with class
========================================================================== */
.prefers-color-scheme--dark {
  background-color: #0E0F14;
  color: #FFFFFF !important;
  /* ==========================================================================
  1. Global
  ========================================================================== */
}
.prefers-color-scheme--dark .body {
  background-color: #0E0F14;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  2. Homepage (Logged In)
  ========================================================================== */
}
.prefers-color-scheme--dark .home-section {
  border-color: #30363D;
}
.prefers-color-scheme--dark .select {
  background-color: transparent;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .select:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .select-options {
  background-color: #14161E;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .select-options-item:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .content-counter .counter-count {
  color: #FF5A00 !important;
  border: 2px solid #FFFFFF !important;
}
.prefers-color-scheme--dark .home-popular-search label.search svg {
  fill: #FFFFFF !important;
}
.prefers-color-scheme--dark .home-popular-search input.search-normal {
  background-color: #07080A;
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .home-popular-search input.search-normal:hover {
  background-color: #3B3D43 !important;
}
.prefers-color-scheme--dark .home-popular-search input.search-normal:focus {
  background-color: #07080A !important;
  border-color: #FF5A00;
  box-shadow: 0px 0px 0px 4px rgba(255, 136, 71, 0.2);
}
.prefers-color-scheme--dark .home-popular-search .search-tags a {
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .home-popular-search .search-tags a:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .my-topics .topic-tag {
  background-color: transparent;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
}
.prefers-color-scheme--dark .my-topics .topic-tag svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .home-note-card {
  background-color: #14161E;
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .home-note-card svg {
  fill: #14161E !important;
}
.prefers-color-scheme--dark .skeleton-search,
.prefers-color-scheme--dark .skeleton-domain,
.prefers-color-scheme--dark .skeleton-card,
.prefers-color-scheme--dark .skeleton-note,
.prefers-color-scheme--dark .skeleton-bookmark,
.prefers-color-scheme--dark .skeleton-topic,
.prefers-color-scheme--dark .skeleton-card-100 {
  opacity: 0.1;
}
.prefers-color-scheme--dark .skeleton-container .skeleton-domain,
.prefers-color-scheme--dark .skeleton-container .skeleton-card {
  opacity: 0.1;
}
.prefers-color-scheme--dark .skeleton-tags > div {
  opacity: 0.1;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  3. Homepage (Logged Out)
  ========================================================================== */
}
.prefers-color-scheme--dark section.kodeco-home-hero_v1 .kodeco-home-hero-content h1 span.fc-orange-glow, .prefers-color-scheme--dark section.kodeco-home-hero_v2 .kodeco-home-hero-content h1 span.fc-orange-glow {
  color: #FF5A00;
}
.prefers-color-scheme--dark section.kodeco-home-hero_v1 .module-background::before, .prefers-color-scheme--dark section.kodeco-home-hero_v2 .module-background::before {
  background-color: #0E0F14;
}
.prefers-color-scheme--dark section.kodeco-home-hero_v1 .module-background .module-background-round-top::before, .prefers-color-scheme--dark section.kodeco-home-hero_v2 .module-background .module-background-round-top::before {
  box-shadow: -12px -12px 0 12px #0E0F14;
}
.prefers-color-scheme--dark section.kodeco-home-hero_v1 .module-background .module-background-round-bottom::before, .prefers-color-scheme--dark section.kodeco-home-hero_v2 .module-background .module-background-round-bottom::before {
  box-shadow: -12px -12px 0 12px #0E0F14;
}
.prefers-color-scheme--dark section.home-logos_v1 .home-logos-grid > div, .prefers-color-scheme--dark section.home-logos_v2 .home-logos-grid > div {
  background-color: #14161E;
  border-color: #30363D;
}
.prefers-color-scheme--dark section.home-logos_v1 .home-logos-grid > div > img, .prefers-color-scheme--dark section.home-logos_v2 .home-logos-grid > div > img {
  filter: unset;
}
.prefers-color-scheme--dark section.home-testimonials_v1 .testimonials-card--container .card .card-topright .card-artwork span.badge, .prefers-color-scheme--dark section.home-testimonials_v2 .testimonials-card--container .card .card-topright .card-artwork span.badge {
  background-color: #14161E !important;
  border: 1px solid #30363D !important;
}
.prefers-color-scheme--dark section.home-testimonials_v1 .testimonials-card--container .card .card-topright .card-artwork span.badge svg, .prefers-color-scheme--dark section.home-testimonials_v2 .testimonials-card--container .card .card-topright .card-artwork span.badge svg {
  fill: #FFFFFF !important;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  4. Notebook Card
  ========================================================================== */
}
.prefers-color-scheme--dark .annotations .notebook {
  background-color: #14161E;
  border: 1px solid #30363D;
  color: #FFFFFF;
}
.prefers-color-scheme--dark .annotations .notebook .badge svg {
  fill: #14161E;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  5. Author about page
  ========================================================================== */
}
.prefers-color-scheme--dark section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-right {
  background-color: #0E0F14;
}
.prefers-color-scheme--dark section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-right::before {
  box-shadow: 12px 12px 0px 12px #0E0F14;
}
.prefers-color-scheme--dark section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-right::after {
  box-shadow: 12px 10px 0px 10px #0E0F14;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  6. Library
  ========================================================================== */
}
.prefers-color-scheme--dark .library mark.highlight {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .library .accordion .accordion-menu .dropdown-menu {
  background-color: #14161E;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .library-search label.search svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .library-search .dropdown .dropdown-trigger {
  background-color: transparent;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .library-search .dropdown .dropdown-trigger:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .library-search .dropdown .dropdown-trigger:target {
  border-color: #FF5A00;
}
.prefers-color-scheme--dark .library-search .dropdown details[open] .dropdown-trigger {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .library-applied-filters .filter-tag {
  background-color: #14161E;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .library-applied-filters .filter-tag svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .card-minimal .card-content {
  background-color: #14161E;
}
.prefers-color-scheme--dark .card-artwork-kodebit {
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  7. Content TOC
  ========================================================================== */
}
.prefers-color-scheme--dark .section-list ul.content-list--padded li:hover, .prefers-color-scheme--dark .section-list ul.content-list--padded li.active {
  background: #3B3D43;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  8. Reviews
  ========================================================================== */
}
.prefers-color-scheme--dark .rating-questions .rate-star {
  border: 1px solid #FFFFFF !important;
  background-color: transparent !important;
}
.prefers-color-scheme--dark .rating-questions .rate-star:hover {
  background-color: #3B3D43 !important;
}
.prefers-color-scheme--dark .rating-questions .rate-star svg {
  fill: #FFFFFF !important;
}
.prefers-color-scheme--dark .rating-questions .c-rate__star--green {
  background-color: #CE3F00 !important;
}
.prefers-color-scheme--dark .rating-questions .c-rate__star--green:hover {
  background-color: rgba(206, 63, 0, 0.8) !important;
}
.prefers-color-scheme--dark .rating-questions .c-review-module__answers > input[type=checkbox]:checked + label {
  background-color: #CE3F00;
  border: 1px solid #FFFFFF !important;
}
.prefers-color-scheme--dark .rating-questions .c-review-module__answers > input[type=checkbox]:checked + label:hover {
  background-color: rgba(206, 63, 0, 0.8);
}
.prefers-color-scheme--dark .rating-questions .c-review-module__answers label {
  border: 1px solid #FFFFFF !important;
  background-color: transparent;
  color: #FFFFFF !important;
}
.prefers-color-scheme--dark .rating-questions .c-review-module__answers label:hover {
  background-color: #3B3D43 !important;
  border: 1px solid #FFFFFF !important;
  color: #FFFFFF;
}
.prefers-color-scheme--dark .rating-questions .text-area {
  background-color: #07080A;
  color: #FFFFFF;
  border: 1px solid #FFFFFF !important;
}
.prefers-color-scheme--dark .rating-questions .text-area:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .rating-questions .text-area:focus {
  background-color: #07080A;
  border-color: #FF5A00 !important;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  9a. Video — Episode info
  ========================================================================== */
}
.prefers-color-scheme--dark .modal-contributors .contributors.tile {
  background-color: #14161E;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  9b. Video — Player
  ========================================================================== */
}
.prefers-color-scheme--dark .video-player {
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .title-slide {
  background-color: #14161E;
  outline: 1px solid #3B3D43;
}
.prefers-color-scheme--dark .title-slide.quiz {
  color: #FFFFFF;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  10a. Article TOC
  ========================================================================== */
}
.prefers-color-scheme--dark .article-layout .toc .toc-body nav a i.toc-item-indicator {
  border-color: #FFFFFF;
}
.prefers-color-scheme--dark .article-layout .toc .toc-body nav a i.toc-item-indicator:after {
  background: #FFFFFF;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  10b. Article Footer
  ========================================================================== */
}
.prefers-color-scheme--dark .content-footer .btn-mark-complete {
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .content-footer .btn-mark-complete:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .content-footer .content-footer-actions .icon-prefix svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  10c. Article — Spoilers
  ========================================================================== */
}
.prefers-color-scheme--dark .spoiler {
  border-color: #30363D;
  background-color: #14161E;
}
.prefers-color-scheme--dark .spoiler details summary {
  background-color: #CE3F00;
}
.prefers-color-scheme--dark .spoiler details summary span.dark-bg-black-night:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  10d. Article — Figcaptions
  ========================================================================== */
}
.prefers-color-scheme--dark .figcaption {
  color: #D7D7D7;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  11a. Content
  ========================================================================== */
}
.prefers-color-scheme--dark .accordion-content {
  border-color: #30363D;
  background-color: #14161E;
}
.prefers-color-scheme--dark .accordion-content details:not(:last-child) {
  border-bottom: 1px solid #30363D;
}
.prefers-color-scheme--dark .accordion-content .accordion-trigger .accordion-number {
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .accordion-content .accordion-trigger .accordion-title:hover {
  color: #FFFFFF !important;
}
.prefers-color-scheme--dark .content-hero {
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .content-hero .book-cover-art img {
  border: 1px solid #3B3D43;
}
@media screen and (max-width: 767px) {
  .prefers-color-scheme--dark .content-hero {
    border: none;
  }
}
@media screen and (max-width: 767px) {
  .prefers-color-scheme--dark .content-hero .dark-bg-orange-determination:hover {
    background-color: #ff4f02 !important;
  }
}
@media screen and (max-width: 767px) {
  .prefers-color-scheme--dark .content-hero .metadata,
  .prefers-color-scheme--dark .content-hero .hero-other-versions {
    color: #FFFFFF !important;
  }
}
.prefers-color-scheme--dark .content-hero .content-hero-action svg,
.prefers-color-scheme--dark .content-hero .metadata svg {
  fill: #FFFFFF !important;
}
.prefers-color-scheme--dark .content-hero.content-hero--dark svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .learning-path .content-hero {
  background-color: #14161E;
  border: 1px solid #30363D;
}
@media screen and (max-width: 767px) {
  .prefers-color-scheme--dark .learning-path .content-hero {
    background-color: inherit;
    border: none;
  }
}
.prefers-color-scheme--dark .content-footer section.contributors {
  background-color: #14161E !important;
  border-color: #30363D !important;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  11b. Content — Shared Modals
  ========================================================================== */
}
.prefers-color-scheme--dark .content-hero-share .modal-share .modal-wrapper {
  background-color: #14161E;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .content-hero-share .modal-share .modal-wrapper .btn-icon svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .content-hero-share .modal-share .modal-wrapper .modal-table {
  border-bottom: 1px solid rgba(215, 215, 215, 0.1019607843);
}
.prefers-color-scheme--dark .content-hero-share .modal-share .modal-wrapper .modal-table .btn-normalw {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .version-modal .modal .modal-wrapper .btn-icon svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .modal .modal-wrapper.modal-tight.modal-share button.btn-icon svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  11c. Content — Ratings/Reviews Modal
  ========================================================================== */
}
.prefers-color-scheme--dark .content-hero-right .modal-ratings .modal-wrapper {
  background-color: #14161E !important;
  color: #FFFFFF !important;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .content-hero-right .modal-ratings .modal-wrapper .btn-icon svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .content-hero-right .modal-ratings .modal-wrapper .fc-black-night {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .content-hero-right .modal-ratings .modal-wrapper .rating-form .rating-questions {
  color: #FFFFFF !important;
}
.prefers-color-scheme--dark .content-hero-right .modal-ratings .modal-wrapper .rating-form .rating-questions p {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .content-hero-right .modal-ratings .modal-wrapper .rating-form .rating-questions .text-area {
  background-color: #07080A;
  color: #FFFFFF;
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .content-hero-right .modal-ratings .modal-wrapper .rating-form .rating-questions .text-area:hover {
  background-color: unset;
}
.prefers-color-scheme--dark .content-hero-right .modal-ratings .modal-wrapper .rating-form .rating-questions .text-area:focus {
  border-color: #FF5A00;
}
.prefers-color-scheme--dark .user-rating {
  border-bottom: 1px solid #3B3D43;
}
.prefers-color-scheme--dark .user-rating-self {
  background-color: rgba(7, 8, 10, 0.5);
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  12a. Book Chapter TOC
  ========================================================================== */
}
.prefers-color-scheme--dark .toc {
  background-color: #14161E;
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .toc .toc-body {
  background-color: initial;
}
.prefers-color-scheme--dark .toc .toc-body .accordion .btn-iconsm svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .toc .toc-header {
  background-color: #14161E;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  12b. Book Chapter Highlighting Tooltip
  ========================================================================== */
}
.prefers-color-scheme--dark .o-fragment--tooltip {
  background: #D7D7D7 !important;
  box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.3);
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .o-fragment--tooltip:after {
  background: #D7D7D7 !important;
}
.prefers-color-scheme--dark .o-fragment--tooltip .o-tooltip__svg svg.o-button__svg--white {
  fill: #14161E !important;
}
.prefers-color-scheme--dark .o-fragment--tooltip .o-tooltip__color--selected:before {
  border: 3px solid #D7D7D7;
}
.prefers-color-scheme--dark .o-fragment--tooltip .o-tooltip__color--yellow {
  background: #966B19;
}
.prefers-color-scheme--dark .o-fragment--tooltip .o-tooltip__color--orange {
  background: #CE3F00;
}
.prefers-color-scheme--dark .o-fragment--tooltip .o-tooltip__color--red {
  background: #962224;
}
.prefers-color-scheme--dark .o-fragment--tooltip .o-tooltip__color--purple {
  background: #4D3285;
}
.prefers-color-scheme--dark .o-fragment--tooltip .o-tooltip__color--blue {
  background: #106790;
}
.prefers-color-scheme--dark .o-fragment--tooltip .o-tooltip__color--green {
  background: #157857;
}
.prefers-color-scheme--dark .o-button__svg--highlighter-yellow {
  fill: #966B19;
}
.prefers-color-scheme--dark .o-button__svg--highlighter-orange {
  fill: #CE3F00;
}
.prefers-color-scheme--dark .o-button__svg--highlighter-red {
  fill: #962224;
}
.prefers-color-scheme--dark .o-button__svg--highlighter-purple {
  fill: #4D3285;
}
.prefers-color-scheme--dark .o-button__svg--highlighter-blue {
  fill: #106790;
}
.prefers-color-scheme--dark .o-button__svg--highlighter-green {
  fill: #157857;
}
.prefers-color-scheme--dark .o-fragment--tooltip-with-note {
  background: #07080A !important;
  border: 1px solid #30363D !important;
}
.prefers-color-scheme--dark .o-fragment--tooltip-with-note:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .o-fragment--tooltip-with-note:focus, .prefers-color-scheme--dark .o-fragment--tooltip-with-note:active {
  border-color: #FF5A00 !important;
  box-shadow: 0px 0px 0px 4px rgba(255, 136, 71, 0.2);
}
.prefers-color-scheme--dark .o-fragment--tooltip-with-note textarea {
  color: #FFFFFF;
  background-color: #07080A;
}
.prefers-color-scheme--dark .o-fragment--tooltip-with-note textarea::placeholder {
  color: #FFFFFF !important;
}
.prefers-color-scheme--dark .o-fragment__action {
  color: #FFFFFF !important;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  12c. Book Chapter Highlighting Colors
  ========================================================================== */
}
.prefers-color-scheme--dark .o-fragment mark {
  color: #FFFFFF;
  background-color: #966B19;
}
.prefers-color-scheme--dark mark.o-fragment--highlighter-yellow {
  background: #E3A93D;
}
.prefers-color-scheme--dark mark.o-fragment--highlighter-yellow.o-fragment--annotation-note {
  border-bottom: 3px solid #966B19;
}
.prefers-color-scheme--dark mark.o-fragment--highlighter-orange {
  background: #CE3F00;
}
.prefers-color-scheme--dark mark.o-fragment--highlighter-orange.o-fragment--annotation-note {
  border-bottom: 3px solid #FF5A00;
}
.prefers-color-scheme--dark mark.o-fragment--highlighter-red {
  background: #962224;
}
.prefers-color-scheme--dark mark.o-fragment--highlighter-red.o-fragment--annotation-note {
  border-bottom: 3px solid #E34A4C;
}
.prefers-color-scheme--dark mark.o-fragment--highlighter-purple {
  background: #B44EBF;
}
.prefers-color-scheme--dark mark.o-fragment--highlighter-purple.o-fragment--annotation-note {
  border-bottom: 3px solid #8763D2;
}
.prefers-color-scheme--dark mark.o-fragment--highlighter-blue {
  background: #106790;
}
.prefers-color-scheme--dark mark.o-fragment--highlighter-blue.o-fragment--annotation-note {
  border-bottom: 3px solid #2EA4DD;
}
.prefers-color-scheme--dark mark.o-fragment--highlighter-green {
  background: #157857;
}
.prefers-color-scheme--dark mark.o-fragment--highlighter-green.o-fragment--annotation-note {
  border-bottom: 3px solid #3C4425;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  12d. Book Reading Experience Switcher
  ========================================================================== */
}
.prefers-color-scheme--dark .c-reading-experience-selector {
  background: #0E0F14;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .c-reading-experience-selector h4 {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .c-reading-experience-selector .c-reading-experience-selector__checkbox--large {
  background: #14161E;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .c-reading-experience-selector .c-reading-experience-selector__checkbox--large label {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .c-reading-experience-selector .c-reading-experience-selector__checkbox--large .c-reading-experience-selector__radio:checked + span {
  background-color: #CE3F00;
  border: 2px solid #CE3F00;
}
.prefers-color-scheme--dark .c-reading-experience-selector .c-reading-experience-selector__checkbox--large .c-reading-experience-selector__radio:checked + span:hover {
  background-color: #CE3F00;
}
.prefers-color-scheme--dark .c-reading-experience-selector .c-reading-experience-selector__checkbox--large .c-reading-experience-selector__radio:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  12e. Book Reading Notebook
  ========================================================================= */
}
.prefers-color-scheme--dark .c-notebook {
  background-color: #0E0F14;
  border-color: #FFFFFF;
}
.prefers-color-scheme--dark .c-notebook .c-notebook-header {
  background-color: inherit;
}
.prefers-color-scheme--dark .c-notebook .c-notebook__entry {
  border-bottom: 1px solid #30363D;
}
.prefers-color-scheme--dark .c-notebook .c-notebook__entry .c-notebook__entry-text {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .c-notebook .c-notebook__entry .c-notebook__entry-note span::before {
  filter: invert(1);
}
.prefers-color-scheme--dark .c-notebook .c-notebook__entry .c-notebook__entry-note .text-area {
  background: #07080A;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
}
.prefers-color-scheme--dark .c-notebook .c-notebook__entry .c-notebook__entry-note .text-area::placeholder {
  color: #FFFFFF !important;
}
.prefers-color-scheme--dark .c-notebook .c-notebook__entry .c-notebook__entry-note .text-area:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .c-notebook .c-notebook__entry .c-notebook__entry-note .text-area:active, .prefers-color-scheme--dark .c-notebook .c-notebook__entry .c-notebook__entry-note .text-area:focus {
  background-color: #07080A;
  border-color: #FF5A00 !important;
}
.prefers-color-scheme--dark .c-notebook .c-notebook__demo p mark {
  color: #FFFFFF;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  12f. Book Reading Search
  ========================================================================== */
}
.prefers-color-scheme--dark .chapter-search .modal-wrapper,
.prefers-color-scheme--dark .c-global-search--book .modal-wrapper {
  background-color: #14161E !important;
  border-color: #FFFFFF;
}
.prefers-color-scheme--dark .chapter-search .modal-wrapper svg.input__icon-svg--search,
.prefers-color-scheme--dark .c-global-search--book .modal-wrapper svg.input__icon-svg--search {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .chapter-search .modal-wrapper .c-global-search__recommendations .chapter-search-results ul li,
.prefers-color-scheme--dark .c-global-search--book .modal-wrapper .c-global-search__recommendations .chapter-search-results ul li {
  border-bottom: 1px solid #3B3D43;
}
.prefers-color-scheme--dark .chapter-search .modal-wrapper .c-global-search__recommendations .chapter-search-results ul li .c-search__results--highlight,
.prefers-color-scheme--dark .c-global-search--book .modal-wrapper .c-global-search__recommendations .chapter-search-results ul li .c-search__results--highlight {
  background-color: rgba(206, 63, 0, 0.5);
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  12g. Book Chapter Content
  ========================================================================== */
}
.prefers-color-scheme--dark .c-book-chapter h1,
.prefers-color-scheme--dark .c-book-chapter h2,
.prefers-color-scheme--dark .c-book-chapter h3,
.prefers-color-scheme--dark .c-book-chapter h4,
.prefers-color-scheme--dark .c-book-chapter h5,
.prefers-color-scheme--dark .c-book-chapter p,
.prefers-color-scheme--dark .c-book-chapter ol,
.prefers-color-scheme--dark .c-book-chapter ul {
  color: #FFFFFF !important;
}
.prefers-color-scheme--dark .c-book-chapter blockquote {
  background-color: #14161E;
}
.prefers-color-scheme--dark .c-book-chapter figcaption {
  color: #D7D7D7 !important;
}
.prefers-color-scheme--dark .c-book-chapter .figcaption {
  color: #D7D7D7 !important;
}
.prefers-color-scheme--dark .c-book-chapter .l-image-bordered img {
  border-color: #FFFFFF !important;
}
.prefers-color-scheme--dark .book-chapter__links {
  border-color: #30363D;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  12h. Book Chapter Mobile Navigation
  ========================================================================== */
}
.prefers-color-scheme--dark .c-mobile-navigator--book {
  background: #0E0F14;
}
.prefers-color-scheme--dark .c-mobile-navigator {
  background: #0E0F14;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .c-mobile-navigator a:hover {
  background: #3B3D43 !important;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
    12i. Book Chapter Sidebar
  ========================================================================== */
}
.prefers-color-scheme--dark .chapter-navigation .c-sidebar-navigator__indicator {
  background: #FFFFFF;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  13. Learning Paths
  ========================================================================== */
}
.prefers-color-scheme--dark .learning-path-completion-card {
  background: #14161E;
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  14. Loading
  ========================================================================== */
}
.prefers-color-scheme--dark .library-state .loading .loading-icon svg {
  fill: #FFFFFF;
  -webkit-filter: invert(1);
  /* safari 6.0 - 9.0 */
  filter: invert(1);
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  15. Community Banners
  ========================================================================== */
}
.prefers-color-scheme--dark .c-banner-draper--community {
  color: white;
}
.prefers-color-scheme--dark .c-banner-draper--community:before {
  filter: invert(100%);
}
.prefers-color-scheme--dark .c-banner-draper--community .c-banner-draper__art:before {
  opacity: 0.1;
}
.prefers-color-scheme--dark .c-banner-draper--community-width + div .l-color-invert--dark {
  color: #D7D7D7 !important;
}
.prefers-color-scheme--dark .c-banner-draper--community-connect .c-banner-draper__art--left {
  background-image: url(/assets/artwork/community-connect-left--dark-d188b7bd4185599663b17c1ecdcd8595b5b689fc1357c89b7460ab638417a4c2.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.prefers-color-scheme--dark .c-banner-draper--community-connect .c-banner-draper__art--right {
  background-image: url(/assets/artwork/community-connect-right--dark-df53d5871133c3f43c52673105e9a0772f5590bc0da5de2209ae52bf23900d7d.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.prefers-color-scheme--dark .c-banner-draper--community-resources .c-banner-draper__art--left {
  background-image: url(/assets/artwork/community-people-left--dark-56d19ee88d857675cc159ce5d9180b6051607aa104e333a9100dab7b5f7901b0.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.prefers-color-scheme--dark .c-banner-draper--community-resources .c-banner-draper__art--right {
  background-image: url(/assets/artwork/community-people-right--dark-3d80de63d6da52637150422392d46502420957cfa5843f6dc457e3389178924a.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  17. Newsletter
  ========================================================================== */
}
.prefers-color-scheme--dark .l-background--grey {
  background-color: #14161E;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
  18. Domain Page loader (cos it is inline SVG inside JS)
  ========================================================================== */
}
.prefers-color-scheme--dark .loading .loading-icon svg g {
  fill: #FFFFFF;
  -webkit-filter: invert(1);
  /* safari 6.0 - 9.0 */
  filter: invert(1);
}
.prefers-color-scheme--dark {
  /* ==========================================================================
    20. About and team directory
  ========================================================================== */
}
.prefers-color-scheme--dark .about .hero-page-header {
  mix-blend-mode: lighten;
}
.prefers-color-scheme--dark .about .fc-orange-glow {
  color: #FF5A00 !important;
}
.prefers-color-scheme--dark .team-directory .team-grid:not(:last-of-type) {
  border-bottom: 1px solid #3B3D43;
}
.prefers-color-scheme--dark .team-directory .content-switcher {
  background-color: #0E0F14;
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .team-directory .content-switcher .scroll-box .btn-switch {
  background-color: #0E0F14;
  color: #FFFFFF;
}
.prefers-color-scheme--dark .team-directory .content-switcher .scroll-box .btn-switch:hover, .prefers-color-scheme--dark .team-directory .content-switcher .scroll-box .btn-switch.is-active, .prefers-color-scheme--dark .team-directory .content-switcher .scroll-box .btn-switch.active {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
    21. Achievements
  ========================================================================== */
}
.prefers-color-scheme--dark .achievement-category {
  border-bottom: 1px solid #30363D !important;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
    22. Banners / Messaging
  ========================================================================== */
}
.prefers-color-scheme--dark .obscure-banner .card-topleft {
  background-color: #CE3F00;
  border: 1px solid #FFFFFF;
  border-style: solid solid none solid;
}
.prefers-color-scheme--dark .obscure-banner .card-bottom {
  background-color: #CE3F00;
  border: 1px solid #FFFFFF;
  border-style: none solid solid solid;
}
.prefers-color-scheme--dark .obscure-banner .card-bottom:before {
  border: 1px solid #FFFFFF !important;
  border-style: solid solid none none !important;
}
.prefers-color-scheme--dark .obscure-banner .card-topright:before {
  border: 1px solid #FFFFFF !important;
  border-style: none none solid solid !important;
  box-shadow: -4px 4px 0 4px #CE3F00 !important;
}
.prefers-color-scheme--dark .obscure-banner .card-topright .card-artwork {
  border: 1px solid #FFFFFF !important;
}
.prefers-color-scheme--dark .c-banner-draper-sticky--obfuscate {
  background-color: #CE3F00;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
    23. Content pre, blockquote etc.
  ========================================================================== */
}
.prefers-color-scheme--dark .c-written-tutorial__content pre,
.prefers-color-scheme--dark .written-content pre {
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .c-written-tutorial__content code,
.prefers-color-scheme--dark .written-content code {
  background-color: #14161E;
}
.prefers-color-scheme--dark .c-written-tutorial__content .btn-mark-complete,
.prefers-color-scheme--dark .written-content .btn-mark-complete {
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .c-written-tutorial__content .btn-mark-complete svg,
.prefers-color-scheme--dark .written-content .btn-mark-complete svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .c-written-tutorial__content .btn-mark-complete.btn-mark-complete--completed,
.prefers-color-scheme--dark .written-content .btn-mark-complete.btn-mark-complete--completed {
  border: none;
}
.prefers-color-scheme--dark .c-written-tutorial__content.checkbox-ul li::before,
.prefers-color-scheme--dark .written-content.checkbox-ul li::before {
  filter: invert(1);
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre, .prefers-color-scheme--dark .light-code.written-content pre {
  background-color: #F7F7F7;
  color: #14161E;
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre span, .prefers-color-scheme--dark .light-code.written-content pre span {
  color: #14161E !important;
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre, .prefers-color-scheme--dark .light-code.written-content pre {
  /* Comment */
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-comment,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-quote, .prefers-color-scheme--dark .light-code.written-content pre .hljs-comment,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-quote {
  color: #918791 !important;
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre, .prefers-color-scheme--dark .light-code.written-content pre {
  /* Red */
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-variable,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-template-variable,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-attribute,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-tag,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-name,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-selector-id,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-selector-class,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-regexp,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-link,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-deletion, .prefers-color-scheme--dark .light-code.written-content pre .hljs-variable,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-template-variable,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-attribute,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-tag,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-name,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-selector-id,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-selector-class,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-regexp,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-link,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-deletion {
  color: #E34A4C !important;
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre, .prefers-color-scheme--dark .light-code.written-content pre {
  /* Orange */
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-number,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-built_in,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-builtin-name,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-literal,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-type,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-params, .prefers-color-scheme--dark .light-code.written-content pre .hljs-number,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-built_in,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-builtin-name,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-literal,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-type,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-params {
  color: #FF5A00 !important;
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre, .prefers-color-scheme--dark .light-code.written-content pre {
  /* Yellow */
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-class .hljs-title, .prefers-color-scheme--dark .light-code.written-content pre .hljs-class .hljs-title {
  color: #966B19 !important;
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre, .prefers-color-scheme--dark .light-code.written-content pre {
  /* Green */
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-string,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-symbol,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-bullet,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-addition, .prefers-color-scheme--dark .light-code.written-content pre .hljs-string,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-symbol,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-bullet,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-addition {
  color: #157857 !important;
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre, .prefers-color-scheme--dark .light-code.written-content pre {
  /* Aqua */
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-meta, .prefers-color-scheme--dark .light-code.written-content pre .hljs-meta {
  color: #1D7EAF !important;
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre, .prefers-color-scheme--dark .light-code.written-content pre {
  /* Blue */
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-function,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-section,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-title, .prefers-color-scheme--dark .light-code.written-content pre .hljs-function,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-section,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-title {
  color: #2E5FFF !important;
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre, .prefers-color-scheme--dark .light-code.written-content pre {
  /* Purple */
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre span.hljs-keyword,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre span.hljs-selector-tag, .prefers-color-scheme--dark .light-code.written-content pre span.hljs-keyword,
.prefers-color-scheme--dark .light-code.written-content pre span.hljs-selector-tag {
  color: #6B2372 !important;
}
.prefers-color-scheme--dark .written-content blockquote {
  background-color: #0E0F14;
}
.prefers-color-scheme--dark .written-content blockquote.card-minimal {
  background-color: #CE3F00 !important;
  border-color: #FFFFFF;
}
.prefers-color-scheme--dark .written-content .c-book-chapter .c-written-tutorial__content blockquote.card-minimal {
  background-color: #CE3F00 !important;
  border-color: #FFFFFF;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
    24. Homepage: Why Kodeco
  ========================================================================== */
}
.prefers-color-scheme--dark .why-card-container .card .card-topleft {
  border: 1px solid #30363D;
  border-style: solid solid none solid;
}
.prefers-color-scheme--dark .why-card-container .card .card-topright:before {
  border: 1px solid #30363D;
  border-style: none none solid solid;
}
.prefers-color-scheme--dark .why-card-container .card .card-bottom {
  border: 1px solid #30363D;
  border-style: none solid solid solid;
}
.prefers-color-scheme--dark .why-card-container .card .card-bottom:before {
  border: 1px solid #30363D;
  border-style: solid solid none none;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
    25. Code Formatting
  ========================================================================== */
  /* Comment */
}
.prefers-color-scheme--dark .hljs-comment,
.prefers-color-scheme--dark .hljs-quote {
  color: #999999 !important;
}
.prefers-color-scheme--dark {
  /* Red */
}
.prefers-color-scheme--dark .hljs-variable,
.prefers-color-scheme--dark .hljs-template-variable,
.prefers-color-scheme--dark .hljs-attribute,
.prefers-color-scheme--dark .hljs-tag,
.prefers-color-scheme--dark .hljs-name,
.prefers-color-scheme--dark .hljs-selector-id,
.prefers-color-scheme--dark .hljs-selector-class,
.prefers-color-scheme--dark .hljs-regexp,
.prefers-color-scheme--dark .hljs-link,
.prefers-color-scheme--dark .hljs-deletion {
  color: #F64E1A !important;
}
.prefers-color-scheme--dark {
  /* Orange */
}
.prefers-color-scheme--dark .hljs-number,
.prefers-color-scheme--dark .hljs-built_in,
.prefers-color-scheme--dark .hljs-builtin-name,
.prefers-color-scheme--dark .hljs-literal,
.prefers-color-scheme--dark .hljs-type,
.prefers-color-scheme--dark .hljs-params {
  color: #F08D49 !important;
}
.prefers-color-scheme--dark {
  /* Yellow */
}
.prefers-color-scheme--dark .hljs-class .hljs-title {
  color: #F8C555 !important;
}
.prefers-color-scheme--dark {
  /* Green */
}
.prefers-color-scheme--dark .hljs-string,
.prefers-color-scheme--dark .hljs-symbol,
.prefers-color-scheme--dark .hljs-bullet,
.prefers-color-scheme--dark .hljs-addition {
  color: #7EC699 !important;
}
.prefers-color-scheme--dark {
  /* Aqua */
}
.prefers-color-scheme--dark .hljs-meta {
  color: #18B5AB !important;
}
.prefers-color-scheme--dark {
  /* Blue */
}
.prefers-color-scheme--dark .hljs-function,
.prefers-color-scheme--dark .hljs-section,
.prefers-color-scheme--dark .hljs-title {
  color: #70A2FF !important;
}
.prefers-color-scheme--dark {
  /* Purple */
}
.prefers-color-scheme--dark .hljs-keyword,
.prefers-color-scheme--dark .hljs-selector-tag {
  color: #CC99CD !important;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
    26. Quiz
  ========================================================================== */
}
.prefers-color-scheme--dark .title-slide.quiz form.main > footer button[disabled] {
  background-color: rgba(215, 215, 215, 0.5) !important;
}
.prefers-color-scheme--dark .title-slide.quiz form.main > footer button[disabled]:hover {
  background-color: rgba(215, 215, 215, 0.5) !important;
}
.prefers-color-scheme--dark .title-slide.quiz .quiz-ui .written-content > code {
  border-color: #3B3D43;
}
.prefers-color-scheme--dark .title-slide.quiz .quiz-ui .toggle-button__input:checked + .toggle-button__label .toggle-button__icon {
  border: none;
  background-color: #FF5A00;
}
.prefers-color-scheme--dark .title-slide.quiz .quiz-ui .toggle-button__input.correct + .toggle-button__label .toggle-button__icon {
  border: none;
  background-color: #00B87E;
}
.prefers-color-scheme--dark .title-slide.quiz .quiz-ui .toggle-button__input.incorrect + .toggle-button__label .toggle-button__icon {
  border: none;
  background-color: #E34A4C;
}
.prefers-color-scheme--dark .title-slide.quiz .quiz-ui .toggle-button__icon {
  border: 1px solid #FFFFFF;
  background-color: transparent;
}
.prefers-color-scheme--dark #lottie-animation {
  filter: invert(1);
}
.prefers-color-scheme--dark {
  /* ==========================================================================
    27. Program
  ========================================================================== */
}
@media screen and (max-width: 767px) {
  .prefers-color-scheme--dark .program .program-hero {
    background-color: #14161E;
  }
}
.prefers-color-scheme--dark .program .content-hero {
  border: unset;
}
.prefers-color-scheme--dark .program .content-hero .modal .written-content {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .program .programme-metadata {
  background-color: #14161E;
  border-color: #30363D;
}
.prefers-color-scheme--dark .program .programme-metadata__segment {
  border-color: #30363D;
}
.prefers-color-scheme--dark .program .rtbs {
  background-color: #14161E;
}
.prefers-color-scheme--dark .program .rtbs .rtbs-content ul > li svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .program .contributors {
  background-color: #14161E;
  border-color: #30363D;
}
.prefers-color-scheme--dark .program .testimonials {
  background-color: #14161E;
}
.prefers-color-scheme--dark .program .plan_cards__container .plan_card {
  background-color: #0E0F14;
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .program .faqs .content-middle .content-middle-left.faq > p a {
  color: #FFFFFF !important;
}
.prefers-color-scheme--dark .program .content-middle .written-content ul li::before {
  background-color: #FFFFFF;
}
.prefers-color-scheme--dark .features-table {
  border-color: #3B3D43;
  background-color: #14161E;
}
.prefers-color-scheme--dark .features-table table thead {
  background-color: #07080A;
}
.prefers-color-scheme--dark .features-table table thead tr th {
  border: 1px solid #07080A;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
    28. Progress - Mark as complete
  ========================================================================== */
}
.prefers-color-scheme--dark .btn-mark-complete svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark {
  /* ==========================================================================
    29. Content Module
  ========================================================================== */
}
.prefers-color-scheme--dark .content-module nav ul.content-list--padded li:hover, .prefers-color-scheme--dark .content-module nav ul.content-list--padded li.active {
  background: #3B3D43;
}

/**
 *
 * Layouts
 *
 * For use on path pages
 *
 * 1. Grid
 *
 * 2. Hero
 *
 * 3. Course List
 *
 * 4. Multi-modal LP home page
 *
 **/
/* ==========================================================================
1. Grid
========================================================================== */
.learning-path-grid {
  display: grid;
  grid-template-columns: 398px 1fr;
  grid-column-gap: 98px;
}
@media screen and (max-width: 1023px) {
  .learning-path-grid {
    grid-template-columns: 1fr;
    grid-row-gap: 80px;
    max-width: 692px;
    margin: 0 auto;
  }
}
.learning-path-grid .get-started {
  max-width: 100%;
  width: 100%;
  justify-content: center;
}

/* ==========================================================================
2. Hero
========================================================================== */
.learning-path-grid .hero-wrapper {
  display: grid;
  grid-template-columns: 1fr;
}
.learning-path-grid .hero-wrapper .triad {
  max-width: 398px;
  margin: 0 auto;
}
.learning-path-grid .hero h1 {
  display: none;
}
@media screen and (max-width: 1023px) {
  .learning-path-grid .hero h1 {
    display: block;
    margin-bottom: 24px;
  }
}
@media screen and (max-width: 767px) {
  .learning-path-grid .hero h1 {
    font-size: 2.5rem;
    line-height: 1.25;
  }
}
.learning-path-grid .hero p {
  font-size: 1.125rem;
  line-height: 1.5;
  margin-top: 20px;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .learning-path-grid .hero p {
    font-size: 1rem;
  }
}
.learning-path-grid .hero p:first-of-type {
  margin-top: 0;
}

/* ==========================================================================
3. Course List
========================================================================== */
.learning-path-wrapper h1 {
  font-size: 3rem;
  line-height: 1.125;
}
@media screen and (max-width: 1023px) {
  .learning-path-wrapper h1 {
    display: none;
  }
}
.learning-path-list {
  max-width: 43.25rem;
}
@media screen and (max-width: 767px) {
  .learning-path-list {
    margin-top: 5rem;
  }
}
.learning-path-list .card .card-topleft > span.badge {
  font-weight: normal !important;
  letter-spacing: 0;
}
.learning-path-next-course {
  margin-top: 9rem;
}
.learning-path-next-course .content-item--collection {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media screen and (max-width: 1279px) {
  .learning-path-next-course .content-item--collection {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 1023px) {
  .learning-path-next-course .content-item--collection {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 767px) {
  .learning-path-next-course .content-item--collection {
    grid-template-columns: 1fr;
  }
}
.learning-path-next-course .card .card-bottom {
  display: grid;
}
.learning-path-next-course .card .card-bottom .card-description {
  display: grid;
}
.learning-path-next-course .card .card-bottom .card-description .card-text {
  -webkit-line-clamp: 4;
}
.learning-path-completion {
  margin-top: 9rem;
}
.learning-path-completion-card {
  margin-top: 2rem;
  background: #FFFFFF;
  border: 1px solid #14161E;
  border-radius: 16px;
  align-items: center;
  display: grid;
  grid-template-columns: 232px 1fr;
  grid-column-gap: 40px;
  padding: 40px;
}
@media screen and (max-width: 767px) {
  .learning-path-completion-card {
    grid-template-columns: 1fr;
    padding: 40px 24px;
  }
}
@media screen and (max-width: 767px) {
  .learning-path-completion-card {
    flex-direction: column;
  }
}
.learning-path-completion-card-artwork {
  max-width: 232px;
  width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .learning-path-completion-card-artwork {
    margin: 0 auto 40px;
  }
}
.learning-path-completion-card-artwork .triad-top-right img, .learning-path-completion-card-artwork .triad-bottom-left img {
  padding: 20px !important;
}

/* ==========================================================================
3. Multi-modal LP Homepage
========================================================================== */
.learning-path.content-module .achievements .badge-container {
  width: 165px;
  height: 165px;
  padding: 20px;
}
.learning-path.content-module .achievements .badge-container.dotted-outline {
  border: dashed 1px #3B3D43;
  border-radius: 16px;
}

/**
 *
 *  profile kodeco variant page
 *
 */
.profile .biography-wrapper {
  display: flex;
  justify-content: center;
}
.profile .biography-wrapper .biography {
  width: 37.125rem;
  line-height: 2.25rem;
}
.profile .biography-wrapper .biography h1 {
  line-height: 3.75rem;
}
@media screen and (max-width: 767px) {
  .profile .biography-wrapper .biography h1 {
    line-height: 3.125rem;
  }
}
.profile .biography-wrapper .biography .bio-description {
  line-height: 2.25rem;
}
@media screen and (max-width: 767px) {
  .profile .biography-wrapper .biography .bio-description {
    line-height: 1.875rem;
  }
}
.profile .biography-wrapper .biography .bio-description a {
  color: #FF5A00;
}
.profile .biography-wrapper .biography .bio-description p {
  font-size: inherit;
}
.profile .biography-wrapper .biography .modal .modal-wrapper {
  position: absolute;
  top: 0;
}

/**
 *  Contribution Modal
 */
.modal-contribution {
  overflow: hidden;
}
.modal-contribution .modal-wrapper {
  height: 80vh;
  overflow-y: scroll;
  overflow-x: hidden;
}
.modal-contribution .modal-wrapper::-webkit-scrollbar {
  display: none;
}

/**
* Banner Artwork
*
*/
/* ==========================================================================
1a. Banner Artwork
========================================================================== */
section.profile-artwork {
  position: relative;
  max-width: 1680px;
  margin: 40px auto 0;
  overflow: hidden;
  border-radius: 48px 48px 24px 48px;
}
@media screen and (min-width: 768px) {
  section.profile-artwork {
    background-size: 100%;
    background-image: url(/assets/artwork/kodeco/module-page-header-yellow@1.5x-a226a061de6efb99f4331ce9b5a9fe4e7b302fdc99017c0aa90eac39b6d72294.jpg);
  }
}
@media screen and (max-width: 767px) {
  section.profile-artwork {
    margin-top: 80px;
  }
}
section.profile-artwork .profile-artwork-top {
  border-radius: 48px 48px 48px 0;
  padding-top: 80px;
  height: 240px;
}
@media screen and (max-width: 767px) {
  section.profile-artwork .profile-artwork-top {
    display: none;
    height: 200px;
  }
}
section.profile-artwork .profile-artwork-top > div {
  display: grid;
  grid-template-columns: 496px 594px;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  section.profile-artwork .profile-artwork-top > div {
    grid-template-columns: 1fr;
    grid-row-gap: 80px;
  }
}
@media screen and (max-width: 767px) {
  section.profile-artwork .profile-artwork-top > div {
    padding-bottom: 0;
  }
}
section.profile-artwork .profile-artwork-bottom {
  grid-template-columns: 1fr 240px;
  height: 240px;
  display: grid;
}
@media screen and (max-width: 767px) {
  section.profile-artwork .profile-artwork-bottom {
    display: flex;
  }
}
section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-left {
  border-radius: 0 0 48px 48px;
}
@media screen and (max-width: 767px) {
  section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-left {
    display: none;
  }
}
section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-right {
  position: relative;
  justify-content: end;
  background-color: #F7F7F7;
  border-radius: 48px 0;
}
@media screen and (max-width: 767px) {
  section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-right {
    margin: 0 auto;
  }
}
section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-right:before {
  content: "";
  width: 120px;
  height: 48px;
  position: absolute;
  bottom: 0;
  left: -120px;
  border-radius: 0 0 48px 0;
  box-shadow: 12px 12px 0px 12px #F7F7F7;
}
@media screen and (max-width: 767px) {
  section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-right:before {
    display: none;
  }
}
section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-right:after {
  content: "";
  width: 120px;
  height: 48px;
  position: absolute;
  top: -48px;
  right: 0px;
  border-radius: 0 0 48px 0;
  box-shadow: 12px 10px 0px 10px #F7F7F7;
}
@media screen and (max-width: 767px) {
  section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-right:after {
    display: none;
  }
}
section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-right-profile-picture {
  overflow: hidden;
  border-radius: 24px;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}
@media screen and (max-width: 767px) {
  section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-right-profile-picture {
    position: unset;
  }
}
section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-right-profile-picture img {
  max-width: 200px;
  min-width: 100%;
  min-height: 100%;
}

/**
 *  Tutorials
 *
 * 1. Containers modifier
 * 4. Cards
 *
 */
/* ==========================================================================
  1. Containers modifier
 ========================================================================== */
.content--empty-state {
  max-width: 396px;
  text-align: center;
  margin: 60px 0;
}
.content--empty-state h4 {
  font-size: 1.75rem;
}

/* ==========================================================================
  4. Cards
 ========================================================================== */
@media screen and (min-width: 1024px) {
  .tutorial-card-container .card {
    height: 353px;
  }
}
.tutorial-card-container .card .card-bottom .card-title {
  font-size: 1.5rem;
}
.tutorial-card-container .card .card-bottom .card-description .dropdown .dropdown-menu {
  min-width: 298px;
}

/**
 *
 * These are the components that makeup the logged in home page
 *
 *
 * 0. Home Layout
 * 1. Popular Searches
 * 2. New Content
 * 3. Tutorial Progress
 * 4. Community
 * 5. Empty States
 * 6. Skeletons
 * 7. Achievements
 * 8. My topics + subscriber nonsense stuff
 * 9. My notes
 * 10. Dropdowns
 *
 **/
/* ==========================================================================
  0. Home layout
 ========================================================================== */
.home-grid {
  display: grid;
  grid-template-columns: 1fr 296px;
  grid-column-gap: 100px;
}
@media screen and (max-width: 1179px) {
  .home-grid {
    display: block;
  }
}

.home-section {
  padding-bottom: 40px;
  border-bottom: 1px solid #D7D7D7;
}

.home-section-header {
  display: flex;
  justify-content: space-between;
}

/* ==========================================================================
  1. Popular Searches
 ========================================================================== */
.home-popular-search input {
  margin-top: 32px;
  margin-bottom: 16px;
  width: 100%;
}
.home-popular-search .search-tags :nth-child(n+1) {
  margin-right: 8px;
  margin-bottom: 8px;
}
@media screen and (max-width: 1023px) {
  .home-popular-search .search-tags {
    overflow-x: scroll;
    /* IE and Edge */
    -ms-overflow-style: none;
    /* Firefox */
    scrollbar-width: none;
  }
  .home-popular-search .search-tags::-webkit-scrollbar {
    display: none;
  }
  .home-popular-search .search-tags {
    white-space: nowrap;
  }
}

/* ==========================================================================
  2. New content
 ========================================================================== */
.new-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(98px, 1fr));
  column-gap: 40px;
  row-gap: 40px;
}
.new-content-grid > div {
  display: flex;
  justify-content: center;
}

.new-content .card-action .btn-icon svg {
  max-width: 20px !important;
  max-height: 20px !important;
}

/* ==========================================================================
  3. Tutorial progress
 ========================================================================== */
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
}
@media screen and (max-width: 767px) {
  .card-grid {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 16px;
    padding-bottom: 24px;
  }
}

/* ==========================================================================
  4. Community
 ========================================================================== */
.home-community-card .card .card-bottom .card-title {
  font-size: 1.5rem;
}

@media screen and (max-width: 1023px) {
  .home-community-list {
    border-bottom: 1px solid #D7D7D7;
  }
  .home-community-list .card-grid {
    flex-direction: column;
  }
}

/* ==========================================================================
  5. Empty States
 ========================================================================== */
.progress-empty {
  text-align: center;
  margin: 40px auto;
  max-width: 496px;
}
.progress-empty .btn-small,
.progress-empty .btn-normalw,
.progress-empty .btn-normalt {
  min-width: fit-content;
}

/* ==========================================================================
  6. Skeletons
 ========================================================================== */
.skeleton-search {
  max-width: 100%;
  border-radius: 12px;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #E1E3E6 8%, #E6E8EB 18%, #E1E3E6 33%);
  background-size: 800px 104px;
  height: 48px;
  margin-top: 32px;
}

.skeleton-container {
  margin-top: 40px;
  display: flex;
}
.skeleton-container :nth-child(n+2) {
  margin-left: 32px;
}
.skeleton-container .skeleton-domain {
  max-width: 100%;
  border-radius: 12px;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #E1E3E6 8%, #E6E8EB 18%, #E1E3E6 33%);
  background-size: 800px 104px;
  height: 98px;
  width: 98px;
  margin-right: 8px;
}

.skeleton-card {
  max-width: 100%;
  border-radius: 12px;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #E1E3E6 8%, #E6E8EB 18%, #E1E3E6 33%);
  background-size: 800px 104px;
  height: 320px;
  width: 380px;
}

.skeleton-note {
  max-width: 100%;
  border-radius: 12px;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #E1E3E6 8%, #E6E8EB 18%, #E1E3E6 33%);
  background-size: 800px 104px;
  height: 244px;
}

.skeleton-bookmark {
  max-width: 100%;
  border-radius: 12px;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #E1E3E6 8%, #E6E8EB 18%, #E1E3E6 33%);
  background-size: 800px 104px;
  height: 338px;
}

.skeleton-topic {
  max-width: 100%;
  border-radius: 12px;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #E1E3E6 8%, #E6E8EB 18%, #E1E3E6 33%);
  background-size: 800px 104px;
  height: 104px;
}

.skeleton-card-100 {
  max-width: 100%;
  border-radius: 12px;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #E1E3E6 8%, #E6E8EB 18%, #E1E3E6 33%);
  background-size: 800px 104px;
  height: 320px;
  width: 100%;
}

.skeleton-tags {
  display: flex;
  flex-direction: row;
  column-gap: 8px;
}
.skeleton-tags > div {
  max-width: 100%;
  border-radius: 12px;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #E1E3E6 8%, #E6E8EB 18%, #E1E3E6 33%);
  background-size: 800px 104px;
  width: 80px;
  height: 40px;
}

/* ==========================================================================
  7. Achievements
 ========================================================================== */
.home-achievements .achievement-title {
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 700;
  display: block;
  max-width: 118px;
  margin: 24px auto 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.home-achievements .achievement-subtitle {
  font-size: 0.875rem;
  line-height: 1;
  margin-top: 16px;
  display: block;
}
@media screen and (max-width: 1023px) {
  .home-achievements .card-grid {
    display: grid;
  }
}

/* ==========================================================================
  8. My topics + subscriber nonsense stuff
 ========================================================================== */
@media screen and (max-width: 1023px) {
  .my-topics {
    margin-top: 80px;
  }
}
.my-topics .topic-tag {
  display: inline-flex;
  align-items: center;
  height: 40px;
  border-radius: 12px;
  font-size: 0.875rem;
  padding: 0 8px 0 16px;
  border: 1px solid #14161E;
  background-color: #FFFFFF;
  margin-right: 4px;
  margin-bottom: 8px;
}
.my-topics .topic-tag button {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 8px;
}
.my-topics .topic-tag button:hover {
  background-color: rgba(215, 215, 215, 0.5);
}
.my-topics .topic-tag button svg {
  width: 8px;
  height: 8px;
}

.select {
  min-height: 16px;
  background-color: #FFFFFF;
  border: 1px solid #14161E;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
}
.select-options {
  background-color: #FFFFFF;
  border: 1px solid #14161E;
  border-radius: 12px;
  padding: 8px;
  margin-top: 8px;
  position: absolute;
  width: 100%;
  z-index: 1;
}
.select-options-item {
  font-size: 1rem;
  cursor: pointer;
  padding: 12px 16px;
  border-radius: 8px;
}
.select-options-item:hover {
  background-color: #D7D7D7;
}

/* ==========================================================================
  9. My notes
 ========================================================================== */
.home-note-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 16px;
  border: 1px solid #14161E;
  background-color: #FFFFFF;
  padding: 24px;
  min-height: 196px;
  width: 100%;
}
.home-note-card.card-glow:hover {
  z-index: unset;
}
.home-note-card .card-text {
  white-space: nowrap;
}
@media screen and (min-width: 1024px) {
  .home-note-card .card-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media screen and (max-width: 1023px) {
  .home-note-card {
    margin-bottom: 40px;
  }
}

/* ==========================================================================
  10. Dropdown
 ========================================================================== */
.home-grid .card .dropdown .dropdown-menu .dropdown-content {
  min-width: 298px;
}

/* ==========================================================================
  11. My bookmarks
 ========================================================================== */
.my-bookmarks .card .card-bottom .card-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/**
 *  Video Episode Page
 *
 * 1. Layout
 * 2. Cinema Mode
 * 3. Actions
 * 4. Table of Contents
 * 5. Transcript
 * 6. Notes
 * 7. Responsiveness
 */
/* ==========================================================================
  1. Layout
 ========================================================================== */
.breadcrumbs-video {
  text-align: center;
  padding-left: 24px;
  padding-right: 24px;
  max-width: 1536px;
  margin: 0 auto;
}
@media screen and (max-width: 1019px) {
  .breadcrumbs-video {
    text-align: left;
  }
}
@media screen and (max-width: 1019px) {
  .breadcrumbs-video > a.dropdown-line {
    display: none;
  }
}
.breadcrumbs-video .dropdown {
  display: none;
}
@media screen and (max-width: 1019px) {
  .breadcrumbs-video .dropdown {
    display: inline-flex;
  }
}

.video-episode {
  display: grid;
  grid-template-columns: 98px 1fr 98px;
  grid-template-rows: max-content 1fr;
  width: min(1536px, 100vw - 48px);
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  grid-column-gap: 16px;
  place-items: start;
}
@media screen and (max-width: 1279px) {
  .video-episode {
    grid-template-columns: 64px 1fr 64px;
  }
}
.video-episode .video-toc {
  grid-column: 1;
  grid-row: 1/3;
  width: 100%;
  z-index: 1;
}
@media screen and (max-width: 1023px) {
  .video-episode .video-toc {
    margin-top: 24px;
  }
}
.video-episode .video-toc .toc-collapsed {
  text-align: center;
}
.video-episode .video-toc .toc-collapsed .toc-container {
  overflow: visible;
}
.video-episode .video-toc .toc-collapsed .toc-container .btn-label > span {
  padding-left: 0;
}
.video-episode .video-toc .toc-container {
  margin-top: 0;
}
.video-episode .video-toc .toc-header {
  min-height: 64px;
}
.video-episode .video-toc .toc-header h2 {
  margin: 0 24px;
}
.video-episode .video-toc .toc-body {
  padding: 16px 24px 24px;
}
.video-episode .video-toc .toc-body h2 {
  margin-bottom: 4px;
}
.video-episode .video-toc .section-list-header--wrapper, .video-episode .video-toc .content-list {
  padding: 24px 0 0 0;
}
.video-episode .video-player {
  grid-column: 2;
  grid-row: 1;
}
@media screen and (max-width: 1023px) {
  .video-episode .video-player {
    margin-bottom: 16px;
  }
}
.video-episode .video-actions {
  grid-column: 3;
  grid-row: 1;
  grid-gap: 4px;
}
.video-episode .video-details {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  margin-top: 24px;
}

/* ==========================================================================
  2. Cinema Mode
 ========================================================================== */
.video-episode.video-episode--cinema {
  grid-template-columns: 380px 1fr;
  grid-template-rows: min-content min-content 1fr;
  grid-row-gap: 40px;
  grid-column-gap: 48px;
}
@media screen and (max-width: 1023px) {
  .video-episode.video-episode--cinema {
    display: flex;
    flex-direction: column;
    grid-row-gap: inherit;
  }
}
.video-episode.video-episode--cinema .video-toc {
  grid-row: 2/4;
}
@media screen and (max-width: 1023px) {
  .video-episode.video-episode--cinema .video-toc {
    order: 4;
  }
}
.video-episode.video-episode--cinema .video-toc .toc-collapsed, .video-episode.video-episode--cinema .video-toc .toc-toggle {
  display: none !important;
}
.video-episode.video-episode--cinema .video-toc .toc-expanded {
  display: flex !important;
}
.video-episode.video-episode--cinema .video-toc .toc {
  width: 100%;
}
.video-episode.video-episode--cinema .video-player {
  grid-column: 1/3;
}
@media screen and (min-width: 1680px) {
  .video-episode.video-episode--cinema .video-player .title-slide h1 {
    font-size: 4.375rem;
  }
}
@media screen and (min-width: 1680px) {
  .video-episode.video-episode--cinema .video-player .title-slide p {
    font-size: 1.125rem;
  }
}
@media screen and (min-width: 1680px) {
  .video-episode.video-episode--cinema .video-player .title-slide .slide-episode h2 {
    font-size: 0.875rem;
  }
}
.video-episode.video-episode--cinema .video-player .title-slide .slide-episode h3 {
  line-height: 1.25;
}
@media screen and (min-width: 1680px) {
  .video-episode.video-episode--cinema .video-player .title-slide .slide-episode h3 {
    font-size: 4.375rem;
  }
}
.video-episode.video-episode--cinema .video-actions {
  grid-column: 2;
  grid-row: 2;
  margin-left: 0;
}
.video-episode.video-episode--cinema .video-details {
  grid-column: 2;
  grid-row: 3;
  margin-top: 0;
}
@media screen and (max-width: 1023px) {
  .video-episode.video-episode--cinema .video-details {
    margin-top: 24px;
  }
}

/* ==========================================================================
  3. Actions
 ========================================================================== */
.video-episode .video-actions {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: center;
}
.video-episode .video-actions .spacer {
  flex-grow: 1;
  flex-shrink: 1;
}
.video-episode .video-actions .btn-icon-arrow svg {
  max-height: 15px;
  width: 14px;
  height: 15px;
}
.video-episode.video-episode--cinema .video-actions {
  flex-direction: row;
}

/* ==========================================================================
  4. Table of Contents
 ========================================================================== */
.video-episode .video-toc .toc-collapsed {
  display: block;
}
.video-episode .video-toc .toc-expanded {
  display: none;
}

.video-episode-toc--open {
  grid-template-columns: 380px 5fr 98px;
}
@media screen and (max-width: 1279px) {
  .video-episode-toc--open {
    grid-template-columns: 292px 5fr 64px;
  }
}
@media screen and (max-width: 1023px) {
  .video-episode-toc--open {
    grid-template-columns: 1fr;
  }
}
.video-episode-toc--open.video-episode--cinema {
  grid-template-columns: 380pxr 5fr !important;
}
@media screen and (max-width: 1279px) {
  .video-episode-toc--open.video-episode--cinema {
    grid-template-columns: 380pxr 5fr !important;
  }
}
.video-episode-toc--open .video-toc .toc-collapsed {
  display: none;
}
.video-episode-toc--open .video-toc .toc-expanded {
  display: block;
  padding-right: 16px;
}
@media screen and (max-width: 1023px) {
  .video-episode-toc--open .video-toc .toc-expanded {
    padding-right: 0;
  }
}

/* ==========================================================================
  5. Transcript
 ========================================================================== */
.transcript {
  position: relative;
  max-width: none;
  margin: 0 auto;
}
.transcript .video-timestamp {
  display: flex;
  align-items: center;
  position: absolute;
  left: -62px;
  height: 24px;
  padding: 0 8px;
  cursor: pointer;
  font-size: 0.875rem;
  text-decoration: underline;
  color: #14161E;
  font-weight: 400;
  background: none;
  box-shadow: none;
  border: none;
}
.transcript ul li {
  position: relative;
}
.transcript ul li .video-timestamp {
  margin-left: 0px;
}
.transcript ul li p {
  margin-left: 0px;
}
.transcript ul li p .video-timestamp {
  margin-left: -24px;
}
.transcript ol li span.video-timestamp {
  left: -82px;
}
.transcript blockquote {
  margin-left: 62px;
}
.transcript blockquote > p {
  margin-left: 0px;
  margin-top: 0px;
}
.transcript blockquote > p span.video-timestamp {
  left: -86px;
}
.transcript blockquote.card-minimal {
  background: #FF8847;
  border-color: #14161E;
}
.transcript blockquote.card-minimal p {
  margin-left: 0px;
}
.transcript blockquote.card-minimal p .obfuscated-text {
  background-color: #14161E;
  color: #FFFFFF;
  display: inline-block;
  padding: 0 10px;
  text-align: center;
}
.transcript blockquote.card-minimal p + p {
  margin-top: 16px;
}
.transcript ul, .transcript p, .transcript ol, .transcript pre {
  font-size: 1rem;
  margin-left: 62px;
  position: relative;
}
.transcript pre code {
  padding: 0;
  border: none;
}
.transcript .o-tooltip {
  background-color: #14161E;
  border: none;
}
.transcript .bg-transcript--highlighted {
  background-color: rgba(255, 90, 0, 0.5);
}
.transcript .bg-transcript--highlighted-typography {
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  color: #14161E;
}
.transcript .bg-transcript--highlighted--bubble {
  background: none;
  color: #CE3F00;
  font-weight: 700;
}

/* ==========================================================================
  6. Notes
 ========================================================================== */
.notes {
  max-width: none;
  margin: 0 auto;
}

/* ==========================================================================
  7. Responsiveness
 ========================================================================== */
@media screen and (max-width: 1023px) {
  .video-episode {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .video-episode .video-toc {
    grid-row: 4;
    grid-column: 1;
  }
  .video-episode .video-toc .toc-collapsed {
    display: none;
  }
  .video-episode .video-toc .toc-expanded {
    display: block;
  }
  .video-episode .video-toc .toc-expanded .toc-toggle {
    display: none;
  }
  .video-episode .video-player {
    grid-row: 1;
    grid-column: 1;
  }
  .video-episode .video-actions {
    grid-row: 2;
    grid-column: 1;
    margin-left: 0;
    flex-direction: row;
    width: 100%;
  }
  .video-episode .video-actions .cinema-mode {
    display: none;
  }
  .video-episode .video-details {
    grid-row: 3;
    grid-column: 1;
  }
}
/**
 *
 * Home
 *
 * 1. Hero
 *
 * 2. Reasons To Believe(RTBs)
 *
 * 3. Program Cards
 *
 * 4. Banners with Text, Images and Logos
 *
 * 5. Testimonials
 *
 * 6. Community
 *
 *
 *
 **/
/* ==========================================================================
1. Hero
========================================================================== */
.kodeco-home-hero--container {
  max-width: 1188px;
  margin: 0 auto;
  padding-top: 80px;
  padding-bottom: 40px;
  display: flex;
  gap: 80px;
  color: #FFFFFF;
}
@media screen and (max-width: 767px) {
  .kodeco-home-hero--container {
    flex-direction: column;
    margin: 0 24px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .kodeco-home-hero--container {
    flex-direction: column;
    margin: 0 24px;
  }
}
.kodeco-home-hero--container div:nth-child(1) {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 32px;
}
.kodeco-home-hero--container div:nth-child(1) h1 {
  font-size: 4rem;
  font-weight: 500;
  line-height: 4.5rem;
}
@media screen and (max-width: 767px) {
  .kodeco-home-hero--container div:nth-child(1) h1 {
    font-size: 2.5rem;
    line-height: 3rem;
  }
}
.kodeco-home-hero--container div:nth-child(1) p {
  font-size: 1.25rem;
  line-height: 1.875rem;
}
@media screen and (max-width: 767px) {
  .kodeco-home-hero--container div:nth-child(1) p {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}
@media screen and (max-width: 767px) {
  .kodeco-home-hero--container div:nth-child(1) div {
    display: block;
  }
}
.kodeco-home-hero--container div:nth-child(2) > img {
  border-radius: 2rem;
}
@media screen and (max-width: 767px) {
  .kodeco-home-hero--container div:nth-child(2) > img {
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .kodeco-home-hero--container div:nth-child(2) > img {
    width: 100%;
  }
}
.kodeco-home-hero--logos {
  margin-top: 40px;
}
.kodeco-home-hero--logos p {
  font-size: 1.25rem;
  line-height: 1.875rem;
  color: #FFFFFF;
  text-align: center;
}
.kodeco-home-hero--logos__wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-column-gap: 48px;
  margin-top: 24px;
}
@media screen and (max-width: 767px) {
  .kodeco-home-hero--logos__wrapper {
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .kodeco-home-hero--logos__wrapper {
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
}
.kodeco-home-hero--logos__wrapper > div {
  background-color: #14161E;
  border-radius: 1rem;
  border: 1px solid #FFFFFF;
  width: 95px;
  height: 95px;
}
@media screen and (max-width: 767px) {
  .kodeco-home-hero--logos__wrapper > div {
    width: 56px;
    height: 56px;
  }
}
.kodeco-home-hero--logos__wrapper > div > img {
  width: 100%;
  height: 100%;
  filter: brightness(1000%) saturate(0%) contrast(100%);
}

/* ==========================================================================
2. Resons To Believe(RTBs)
========================================================================== */
.rtbs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.rtbs--title {
  font-size: 4rem;
  line-height: 4.5rem;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .rtbs--title {
    font-size: 2.5rem;
    line-height: 3rem;
  }
}
.rtbs--description {
  font-size: 2rem;
  line-height: 2.5rem;
  margin-top: 24px;
}
@media screen and (max-width: 767px) {
  .rtbs--description {
    text-align: left;
  }
}
.rtbs-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 24px;
  margin-top: 64px;
}
@media screen and (max-width: 767px) {
  .rtbs-list {
    grid-template-columns: 1fr;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .rtbs-list {
    grid-template-columns: 1fr;
  }
}
.rtbs-list-item {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 24px;
}
@media screen and (max-width: 767px) {
  .rtbs-list-item {
    padding: 24px 0;
  }
}
.rtbs-list-item--image {
  padding: 16px;
}
.rtbs-list-item--image > svg {
  width: 56px;
  height: 56px;
}
.rtbs-list-item--info {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.rtbs-list-item--info-title {
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 500;
}
.rtbs-list-item--info-description {
  font-size: 1.5rem;
  line-height: 1.875rem;
}

/* ==========================================================================
3. Program Cards
========================================================================== */
section.program-cards {
  margin-top: 160px;
  max-width: 1680px;
}
@media screen and (max-width: 767px) {
  section.program-cards {
    margin-top: 0;
  }
}
section.program-cards h2 {
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 3rem;
  color: #FFFFFF;
}
@media screen and (max-width: 767px) {
  section.program-cards h2 {
    padding-top: 80px;
    font-size: 2.5rem;
    line-height: 1.25;
  }
}
section.program-cards .program-cards-top {
  display: grid;
  grid-template-columns: 938px 1fr;
  grid-template-rows: 1fr 200px;
}
@media screen and (max-width: 1279px) {
  section.program-cards .program-cards-top {
    grid-template-columns: 75% 1fr;
  }
}
@media screen and (max-width: 767px) {
  section.program-cards .program-cards-top {
    grid-template-columns: 50% 1fr;
    grid-template-rows: 1fr 120px;
  }
}
section.program-cards .program-cards-top .program-cards-right {
  position: relative;
  grid-row-start: span 2;
}
section.program-cards .program-cards-top .program-cards-right::before {
  content: "";
  width: 60px;
  height: 60px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0 0 0 48px;
  box-shadow: -13px 13px 0 12px #14161E;
}
section.program-cards .program-cards-left {
  border-radius: 48px 48px 0 0;
  background-color: #14161E;
}
section.program-cards .program-cards-bottom {
  border-radius: 0 48px 48px 48px;
  padding-bottom: 144px;
  background-color: #14161E;
}
@media screen and (max-width: 767px) {
  section.program-cards .program-cards-bottom {
    padding-bottom: 80px;
  }
}
section.program-cards .program-cards-bottom .program-cards-wrapper--description {
  color: #FFFFFF;
  font-size: 1.25rem;
  line-height: 1.875rem;
  margin-top: 16px;
}
section.program-cards .program-card-wrapper {
  max-width: 100%;
}
@media screen and (max-width: 767px) {
  section.program-cards .program-card-wrapper {
    overflow-x: hidden;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  section.program-cards .program-card-wrapper {
    overflow-x: hidden;
  }
}
section.program-cards .program-card-wrapper .program-card-container {
  display: flex;
  flex-wrap: nowrap;
  column-gap: 1rem;
  overflow-x: auto;
  padding-bottom: 65px;
  scrollbar-color: hsl(21, 100%, 50%) hsla(0, 0%, 100%, 0.1);
  scrollbar-width: thin;
  padding-top: 80px;
}
section.program-cards .program-card-wrapper .program-card-container::-webkit-scrollbar {
  height: 2px;
}
section.program-cards .program-card-wrapper .program-card-container::-webkit-scrollbar-track {
  background: hsla(0, 0%, 100%, 0.1);
}
section.program-cards .program-card-wrapper .program-card-container::-webkit-scrollbar-thumb {
  background: #FF5A00;
}
section.program-cards .program-card-wrapper .card {
  width: 385px;
  height: 325px;
  flex-shrink: 0;
}
section.program-cards .program-card-wrapper .card > div {
  background-color: #14161E;
}
section.program-cards .program-card-wrapper .card > div .card-title {
  color: #FFFFFF;
}
section.program-cards .program-card-wrapper .card > div .card-text {
  color: #FFFFFF;
  -webkit-line-clamp: 3;
}
section.program-cards .program-card-wrapper .card-topright::before {
  border: 1px #30363D;
  border-style: none none solid solid;
  box-shadow: -4px 4px 0 4px #14161E;
}
section.program-cards .program-card-wrapper .card-topleft {
  border: 1px #30363D;
  border-style: solid solid none solid;
}
section.program-cards .program-card-wrapper .card-topleft .tooltip-text {
  background-color: #3B3D43;
}
section.program-cards .program-card-wrapper .card-bottom {
  border: 1px #30363D;
  border-style: none solid solid solid;
}
section.program-cards .program-card-wrapper .card-bottom::before {
  border: 1px #30363D;
  border-style: solid solid none none;
}
section.program-cards .program-card-wrapper .card-bottom .card-metadata p.tooltip span.tooltip-text {
  max-width: unset;
}

/* ==========================================================================
4. Banners with Text, Images and Logos
========================================================================== */
.banner-w-image--container, .banner-w-logos--container {
  max-width: 1188px;
  margin: 0 auto;
  padding: 160px 0;
  color: #14161E;
  display: flex;
  gap: 48px;
}
@media screen and (max-width: 767px) {
  .banner-w-image--container, .banner-w-logos--container {
    flex-direction: column;
    margin: 0 24px;
    gap: 48px;
    padding: 80px 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .banner-w-image--container, .banner-w-logos--container {
    flex-direction: column;
    margin: 0 24px;
  }
}
.banner-w-image--container div:nth-child(1), .banner-w-logos--container div:nth-child(1) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}
.banner-w-image--container div:nth-child(1) h2, .banner-w-logos--container div:nth-child(1) h2 {
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 3rem;
}
.banner-w-image--container div:nth-child(1) p, .banner-w-logos--container div:nth-child(1) p {
  font-size: 1.25rem;
  line-height: 1.5625rem;
}

@media screen and (max-width: 767px) {
  .banner-w-image--container div:nth-child(2) > img {
    width: 327px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .banner-w-image--container div:nth-child(2) > img {
    width: 100%;
  }
}

.banner-w-logos--container {
  color: #FFFFFF;
}
.banner-w-logos--container div:nth-child(2) p {
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .banner-w-logos--container div:nth-child(2) p {
    text-align: left;
  }
}
.banner-w-logos--container div:nth-child(2) .banner-w-logos--wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  margin-top: 24px;
}
.banner-w-logos--container div:nth-child(2) .banner-w-logos--wrapper > div {
  background-color: #14161E;
  border-radius: 1rem;
  border: 1px solid #9F9F9F;
  width: 95px;
  height: 95px;
}
.banner-w-logos--container div:nth-child(2) .banner-w-logos--wrapper > div > img {
  width: 100%;
  height: 100%;
  filter: brightness(1000%) saturate(0%) contrast(100%);
}

/* ==========================================================================
5. Testimonials
========================================================================== */
.testimonials--container {
  display: flex;
  gap: 48px;
}
@media screen and (max-width: 767px) {
  .testimonials--container {
    flex-direction: column;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .testimonials--container {
    flex-direction: column;
  }
}
.testimonials--container .testimonials--title {
  font-size: 3rem;
  line-height: 3.5rem;
  font-weight: 500;
  color: #FF5A00;
  min-width: 296px;
}
@media screen and (max-width: 767px) {
  .testimonials--container .testimonials--title {
    max-width: 296px;
    font-size: 2.5rem;
    line-height: 3rem;
  }
}
.testimonials--container .testimonials--wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 48px;
}
@media screen and (max-width: 767px) {
  .testimonials--container .testimonials--wrapper {
    flex-direction: column;
  }
}
.testimonials--container .testimonials--wrapper .testimonial {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}
.testimonials--container .testimonials--wrapper .testimonial--quote {
  font-size: 1.25rem;
  line-height: 1.5625rem;
}
.testimonials--container .testimonials--wrapper .testimonial--details .author {
  font-size: 1.25rem;
  line-height: 1.5625rem;
}
.testimonials--container .testimonials--wrapper .testimonial--details .company {
  font-size: 1rem;
  line-height: 1.5rem;
}

/* ==========================================================================
6. Community
========================================================================== */
section.home-kodeco-community {
  position: relative;
  max-width: 1680px;
  margin: 144px auto 0;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community {
    margin: 0 !important;
  }
}
section.home-kodeco-community .home-kodeco-community-top {
  background-color: #14161E;
  border-radius: 48px 0 48px 48px;
  padding-bottom: 80px;
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community .home-kodeco-community-top {
    border-radius: 0 0 48px 48px;
    padding-bottom: 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  section.home-kodeco-community .home-kodeco-community-top {
    border-radius: 0 0 48px 48px;
    padding-bottom: 0;
  }
}
section.home-kodeco-community .home-kodeco-community-top > div {
  display: grid;
  grid-template-columns: 532px 576px;
  gap: 140px;
}
@media screen and (max-width: 979px) {
  section.home-kodeco-community .home-kodeco-community-top > div {
    padding-bottom: 80px;
    grid-template-columns: 1fr;
    grid-row-gap: 80px;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community .home-kodeco-community-top > div {
    padding-bottom: 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  section.home-kodeco-community .home-kodeco-community-top > div {
    padding-bottom: 0;
  }
}
section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-top-left {
  align-self: center;
}
@media screen and (max-width: 979px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-top-left {
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-top-left {
    text-align: left;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-top-left {
    text-align: left;
  }
}
section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-top-left h2 {
  color: #FFFFFF;
  font-size: 4rem;
  line-height: 4.5rem;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-top-left h2 {
    font-size: 2.5rem;
    line-height: 3rem;
  }
}
section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-top-left p {
  font-size: 1.5rem;
  line-height: 2.25rem;
  color: #FFFFFF;
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-top-left div {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-top-left div {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-top-left div a:nth-child(2) {
    margin-left: 0 !important;
    margin-top: 16px;
  }
}
@media screen and (max-width: 979px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-top-right {
    width: 594px;
    justify-self: center;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-top-right {
    width: 100%;
  }
}
section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic {
  margin-top: -140px;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic {
    display: none;
  }
}
section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .home-kodeco-community-mosaic-top {
  position: relative;
}
section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece {
  background-color: #14161E;
  background-image: url(/assets/photos/community-sprite@1.5x-5647f81805df16acadef3a134b7d84f2da50d725d694767a1bc978c8cb8a58ad.jpg);
  background-repeat: no-repeat;
}
section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-1 {
  background-size: 1680px;
  position: relative;
  left: 106px;
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-1 {
    display: none;
  }
}
section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-2 {
  background-size: 1092px;
  background-position: top 0px left -546px;
  margin-top: 40px;
  margin-left: calc(100% - 640px);
  transform: scaleX(-1);
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-2 {
    display: none;
  }
}
section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-3 {
  background-size: 1092px;
  background-position: top 0px left -364px;
  position: relative;
  left: 158px;
  transform: scaleX(-1);
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-3 {
    display: none;
  }
}
section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-4 {
  background-size: 1092px;
  background-position: top 0px left -728px;
  position: absolute;
  top: 0;
  left: 40px;
  transform: scaleX(-1);
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-4 {
    display: none;
  }
}
section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-5 {
  background-size: 492px;
  background-position: top 0px left -82px;
  position: absolute;
  top: 0;
  right: 480px;
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-5 {
    display: none;
  }
}
section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-6 {
  background-size: 492px;
  background-position: top 0px left -410px;
  position: absolute;
  right: 100px;
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-6 {
    display: none;
  }
}
section.home-kodeco-community .home-kodeco-community-bottom {
  display: grid;
  grid-template-columns: 262px 1fr;
  height: 222px;
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community .home-kodeco-community-bottom {
    height: 120px;
    grid-template-columns: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  section.home-kodeco-community .home-kodeco-community-bottom {
    height: 120px;
    grid-template-columns: none;
  }
}
section.home-kodeco-community .home-kodeco-community-bottom .home-kodeco-community-bottom-left {
  position: relative;
}
section.home-kodeco-community .home-kodeco-community-bottom .home-kodeco-community-bottom-left:before {
  content: "";
  width: 120px;
  height: 48px;
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: 0 0 48px 0;
  box-shadow: 12px 12px 0 12px #14161E;
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community .home-kodeco-community-bottom .home-kodeco-community-bottom-left:before {
    display: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  section.home-kodeco-community .home-kodeco-community-bottom .home-kodeco-community-bottom-left:before {
    display: none;
  }
}
section.home-kodeco-community .home-kodeco-community-bottom .home-kodeco-community-bottom-right {
  border-radius: 48px 48px 0 0;
  background-color: #14161E;
}

/**
*
* Home
*
* 1. V1: Hero
*
* 2. V1: Intro
*
* 3. V1: Why
*
* 4. V1: Platforms
*
* 5. V1: Content
*
* 6. V1: Community
*
* 7. V1: Logos
*
* 8. V1: Testimonials
*
* 9. V2: Hero
*
* 10. V2: Intro
*
* 11. V2: Why
*
* 12. V2: Platforms
*
* 13. V2: Content
*
* 14. V2: Community
*
* 15. V2: Logos
*
* 16. V2: Testimonials
*
*
*
**/
/* ==========================================================================
2. V1: Intro
========================================================================== */
section.home-intro_v1 {
  display: grid;
  grid-template-columns: 445px 1fr;
  grid-column-gap: 14%;
  margin-top: 144px;
}
@media screen and (max-width: 1079px) {
  section.home-intro_v1 {
    grid-column-gap: 98px;
  }
}
@media screen and (max-width: 979px) {
  section.home-intro_v1 {
    grid-template-columns: 1fr;
    grid-row-gap: 80px;
  }
}
@media screen and (max-width: 767px) {
  section.home-intro_v1 {
    grid-row-gap: 32px;
  }
}
section.home-intro_v1 h2 {
  font-size: 3rem;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  section.home-intro_v1 h2 {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media screen and (max-width: 767px) {
  section.home-intro_v1 p {
    font-size: 1.125rem;
  }
}
section.home-intro_v1 .home-intro-photo img {
  width: 100%;
  height: 445px;
  border-radius: 40px;
}
@media screen and (max-width: 979px) {
  section.home-intro_v1 .home-intro-photo img {
    max-width: 420px;
  }
}
@media screen and (max-width: 767px) {
  section.home-intro_v1 .home-intro-photo img {
    border-radius: 24px;
  }
}

/* ==========================================================================
3. V1: Why
========================================================================== */
section.home-why_v1 {
  margin-top: 144px;
  max-width: 1680px;
}
section.home-why_v1 h2 {
  font-size: 4.5rem;
  line-height: 1;
  max-width: 692px;
  color: #FFFFFF;
}
@media screen and (max-width: 767px) {
  section.home-why_v1 h2 {
    padding-top: 80px;
    font-size: 2.5rem;
    line-height: 1.25;
  }
}
section.home-why_v1 .home-why-top {
  display: grid;
  grid-template-columns: 938px 1fr;
  grid-template-rows: 1fr 240px;
}
@media screen and (max-width: 1279px) {
  section.home-why_v1 .home-why-top {
    grid-template-columns: 75% 1fr;
  }
}
@media screen and (max-width: 767px) {
  section.home-why_v1 .home-why-top {
    grid-template-columns: 50% 1fr;
    grid-template-rows: 1fr 120px;
  }
}
section.home-why_v1 .home-why-top .home-why-right {
  position: relative;
  grid-row-start: span 2;
}
section.home-why_v1 .home-why-top .home-why-right::before {
  content: "";
  width: 60px;
  height: 60px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0 0 0 48px;
  box-shadow: -13px 13px 0 12px #14161E;
}
section.home-why_v1 .home-why-left {
  border-radius: 48px 48px 0 0;
  background-color: #14161E;
}
section.home-why_v1 .home-why-bottom {
  border-radius: 0 48px 48px 48px;
  padding-bottom: 144px;
  background-color: #14161E;
}
@media screen and (max-width: 767px) {
  section.home-why_v1 .home-why-bottom {
    padding-bottom: 80px;
  }
}
section.home-why_v1 .why-card-wrapper {
  max-width: 100%;
  margin-top: 80px;
}
section.home-why_v1 .why-card-wrapper .why-card-container {
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 1rem;
  overflow-x: scroll;
  padding-bottom: 65px;
  scrollbar-color: hsl(21, 100%, 50%) hsla(0, 0%, 100%, 0.1);
  scrollbar-width: thin;
}
section.home-why_v1 .why-card-wrapper .why-card-container::-webkit-scrollbar {
  height: 2px;
}
section.home-why_v1 .why-card-wrapper .why-card-container::-webkit-scrollbar-track {
  background: hsla(0, 0%, 100%, 0.1);
}
section.home-why_v1 .why-card-wrapper .why-card-container::-webkit-scrollbar-thumb {
  background: #FF5A00;
}
section.home-why_v1 .why-card-wrapper .card {
  width: 380px;
  min-height: 460px;
}
@media screen and (max-width: 767px) {
  section.home-why_v1 .why-card-wrapper .card {
    width: 328px;
  }
}
section.home-why_v1 .why-card-wrapper .card > div {
  background-color: #14161E;
}
section.home-why_v1 .why-card-wrapper .card > div .badge {
  background-color: #14161E;
  border: 1px solid #FFFFFF;
}
section.home-why_v1 .why-card-wrapper .card > div .badge > span {
  font-size: 1.25rem;
  font-weight: normal;
  line-height: 20px;
  color: #FFFFFF;
}
section.home-why_v1 .why-card-wrapper .card > div .card-title {
  color: #FFFFFF;
}
section.home-why_v1 .why-card-wrapper .card > div .card-text {
  -webkit-line-clamp: unset;
  color: #D7D7D7;
}
section.home-why_v1 .why-card-wrapper .card-topright::before {
  border: 1px #FFFFFF;
  border-style: none none solid solid;
  box-shadow: -4px 4px 0 4px #14161E;
}
section.home-why_v1 .why-card-wrapper .card-topleft {
  border: 1px #FFFFFF;
  border-style: solid solid none solid;
}
section.home-why_v1 .why-card-wrapper .card-bottom {
  border: 1px #FFFFFF;
  border-style: none solid solid solid;
}
section.home-why_v1 .why-card-wrapper .card-bottom::before {
  border: 1px #FFFFFF;
  border-style: solid solid none none;
}

/* ==========================================================================
4. V1: Platforms
========================================================================== */
section.home-platforms_v1 .home-platforms-grid-outer {
  display: grid;
  grid-template-columns: 37% 56%;
  grid-column-gap: 7%;
}
@media screen and (max-width: 1023px) {
  section.home-platforms_v1 .home-platforms-grid-outer {
    grid-template-columns: 1fr;
    grid-row-gap: 80px;
  }
}
section.home-platforms_v1 .home-platforms-grid-outer h2 {
  font-size: 3.5rem;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  section.home-platforms_v1 .home-platforms-grid-outer h2 {
    font-size: 2.5rem;
    line-height: 1.25;
  }
}
@media screen and (max-width: 399px) {
  section.home-platforms_v1 .home-platforms-grid-outer > div a:nth-of-type(1) {
    display: none;
  }
}
section.home-platforms_v1 .home-platforms-grid-outer > div a:nth-of-type(2) {
  display: none;
}
@media screen and (max-width: 399px) {
  section.home-platforms_v1 .home-platforms-grid-outer > div a:nth-of-type(2) {
    display: inline-flex;
  }
}
@media screen and (max-width: 1023px) {
  section.home-platforms_v1 .home-platforms-grid-outer:nth-of-type(2) {
    margin-top: 80px !important;
  }
}
section.home-platforms_v1 .home-platforms-grid-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 24px;
}
@media screen and (max-width: 1199px) {
  section.home-platforms_v1 .home-platforms-grid-inner {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 1023px) {
  section.home-platforms_v1 .home-platforms-grid-inner {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 767px) {
  section.home-platforms_v1 .home-platforms-grid-inner {
    grid-template-columns: 1fr;
  }
}
section.home-platforms_v1 .home-platforms-grid-inner .card {
  min-height: 380px;
}
section.home-platforms_v1 .home-platforms-grid-inner .card .card-bottom {
  display: flex;
  flex-direction: column;
}
section.home-platforms_v1 .home-platforms-grid-inner .card .card-bottom .card-title {
  margin-bottom: 16px;
}
section.home-platforms_v1 .home-platforms-grid-inner .card .card-bottom .card-description {
  margin-top: auto;
}
section.home-platforms_v1 .home-platforms-grid-inner .card .card-bottom .card-description .card-text {
  display: block;
}

/* ==========================================================================
5. V1: Content
========================================================================== */
section.home-content_v1 {
  margin-top: 144px;
  position: relative;
}
section.home-content_v1 h2 {
  max-width: 792px;
  font-size: 4rem;
  line-height: 1;
  margin: 0 auto;
  text-align: center;
}
@media screen and (max-width: 767px) {
  section.home-content_v1 h2 {
    font-size: 2.5rem;
    line-height: 1.25;
    text-align: left;
  }
}
section.home-content_v1 .home-content-slider {
  margin-top: 120px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
}
@media screen and (max-width: 767px) {
  section.home-content_v1 .home-content-slider {
    margin-top: 40px;
    gap: 8px;
    overflow-x: scroll;
  }
}
@media screen and (max-width: 767px) {
  section.home-content_v1 .home-content-slider a {
    white-space: nowrap;
  }
}
section.home-content_v1 .button__icon--prev {
  position: absolute;
  left: 0;
  padding-left: 36px;
  top: 50px;
  height: 150px;
  display: none;
}
section.home-content_v1 .button__icon--prev > span {
  position: absolute;
  top: 100px;
  cursor: pointer;
}
section.home-content_v1 .button__icon--prev .prev--icon {
  width: 10px;
  height: 10px;
  rotate: -180deg;
}
section.home-content_v1 .button__icon--next {
  position: absolute;
  background: linear-gradient(90.87deg, rgba(247, 247, 247, 0) 0.63%, #F7F7F7 99.25%);
  width: 164px;
  height: 150px;
  right: 0;
  opacity: 1;
  padding-right: 36px;
  top: 50px;
  display: none;
}
section.home-content_v1 .button__icon--next > span {
  position: absolute;
  top: 100px;
  right: 24px;
  cursor: pointer;
}
section.home-content_v1 .button__icon--next .next--icon {
  width: 10px;
  height: 10px;
}
section.home-content_v1 .content-card-wrapper {
  max-width: 100%;
}
section.home-content_v1 .content-card-wrapper .content-card-container {
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 16px;
  overflow-x: scroll;
  padding-bottom: 65px;
  scrollbar-color: hsl(21, 100%, 50%) hsla(228, 20%, 10%, 0.1);
  scrollbar-width: thin;
  padding-top: 48px;
}
section.home-content_v1 .content-card-wrapper .content-card-container::-webkit-scrollbar {
  height: 2px;
}
section.home-content_v1 .content-card-wrapper .content-card-container::-webkit-scrollbar-track {
  background: hsla(228, 20%, 10%, 0.1);
}
section.home-content_v1 .content-card-wrapper .content-card-container::-webkit-scrollbar-thumb {
  background: #FF5A00;
}
section.home-content_v1 .content-card-wrapper .card {
  width: 380px;
  min-height: 460px;
}
section.home-content_v1 .content-card-wrapper .card .card-bottom .card-metadata {
  margin-top: 16px;
}
section.home-content_v1 .content-card-wrapper .card-description {
  margin-top: 16px;
}
section.home-content_v1 .content-card-wrapper .card-description .card-text {
  -webkit-line-clamp: 4;
}

/* ==========================================================================
6. V1: Community
========================================================================== */
section.home-kodeco-community_v1 {
  position: relative;
  max-width: 1680px;
  margin: 144px auto 0;
  overflow: hidden;
}
section.home-kodeco-community_v1 .home-kodeco-community-top {
  background-color: #14161E;
  border-radius: 48px 48px 48px 0;
  padding-top: 80px;
}
section.home-kodeco-community_v1 .home-kodeco-community-top > div {
  display: grid;
  grid-template-columns: 496px 594px;
  justify-content: space-between;
}
@media screen and (max-width: 979px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top > div {
    padding-bottom: 80px;
    grid-template-columns: 1fr;
    grid-row-gap: 80px;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top > div {
    padding-bottom: 0;
  }
}
section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-top-left {
  align-self: center;
}
@media screen and (max-width: 979px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-top-left {
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-top-left {
    text-align: left;
  }
}
section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-top-left h2 {
  font-size: 3.5rem;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-top-left h2 {
    font-size: 2.5rem;
    line-height: 1.25;
  }
}
section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-top-left p {
  color: #D7D7D7;
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-top-left .btn-larget:first-of-type {
    display: none;
  }
}
section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-top-left .btn-larget:last-of-type {
  display: none;
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-top-left .btn-larget:last-of-type {
    display: inline-flex;
  }
}
@media screen and (max-width: 979px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-top-right {
    width: 594px;
    justify-self: center;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-top-right {
    width: 100%;
  }
}
section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .home-kodeco-community-mosaic-top {
  position: relative;
}
section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece {
  background-color: #14161E;
  background-image: url(/assets/photos/community-sprite@1.5x-5647f81805df16acadef3a134b7d84f2da50d725d694767a1bc978c8cb8a58ad.jpg);
  background-repeat: no-repeat;
}
section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-1 {
  background-size: 1680px;
  position: relative;
  left: 106px;
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-1 {
    display: none;
  }
}
section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-2 {
  background-size: 1092px;
  background-position: top 0px left -546px;
  margin-top: 40px;
  margin-left: calc(100% - 182px);
}
@media screen and (max-width: 1139px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-2 {
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    margin-left: 0;
  }
}
@media screen and (max-width: 979px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-2 {
    margin-left: calc(100% - 182px);
    left: auto;
    transform: none;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-2 {
    display: none;
  }
}
section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-3 {
  background-size: 1092px;
  background-position: top 0px left -364px;
  position: relative;
  left: 158px;
  display: none;
}
@media screen and (max-width: 1139px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-3 {
    left: 0;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-3 {
    display: none;
  }
}
section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-4 {
  background-size: 1092px;
  background-position: top 0px left -728px;
  position: absolute;
  bottom: 0;
  right: 40px;
}
@media screen and (max-width: 399px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-4 {
    display: none;
  }
}
section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-5 {
  background-size: 492px;
  background-position: top 0px left -82px;
  position: absolute;
  top: 0;
  right: 108px;
}
@media screen and (max-width: 1039px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-5 {
    right: auto;
    left: 8px;
  }
}
@media screen and (max-width: 979px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-5 {
    right: 108px;
    left: auto;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-5 {
    right: 20px;
    top: -120px;
  }
}
@media screen and (max-width: 399px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-5 {
    display: none;
  }
}
section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-6 {
  background-size: 492px;
  background-position: top 0px left -410px;
  position: absolute;
  left: 8px;
}
@media screen and (max-width: 399px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-6 {
    display: none;
  }
}
section.home-kodeco-community_v1 .home-kodeco-community-bottom {
  display: grid;
  grid-template-columns: 1fr 262px;
  height: 222px;
}
@media screen and (max-width: 399px) {
  section.home-kodeco-community_v1 .home-kodeco-community-bottom {
    height: 120px;
    grid-template-columns: 1fr 120px;
  }
}
section.home-kodeco-community_v1 .home-kodeco-community-bottom .home-kodeco-community-bottom-left {
  border-radius: 0 0 48px 48px;
  background-color: #14161E;
}
section.home-kodeco-community_v1 .home-kodeco-community-bottom .home-kodeco-community-bottom-right {
  position: relative;
}
section.home-kodeco-community_v1 .home-kodeco-community-bottom .home-kodeco-community-bottom-right:before {
  content: "";
  width: 120px;
  height: 48px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 48px 0 0 0;
  box-shadow: -12px -12px 0 12px #14161E;
}
@media screen and (max-width: 399px) {
  section.home-kodeco-community_v1 .home-kodeco-community-bottom .home-kodeco-community-bottom-right:before {
    width: 60px;
  }
}

/* ==========================================================================
7. V1: Logos
========================================================================== */
section.home-logos_v1 {
  margin-top: 144px;
}
section.home-logos_v1 h2 {
  font-size: 3rem;
}
@media screen and (max-width: 767px) {
  section.home-logos_v1 h2 {
    font-size: 2.5rem;
    line-height: 1.25;
    text-align: left;
  }
}
section.home-logos_v1 .home-logos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}
@media screen and (max-width: 767px) {
  section.home-logos_v1 .home-logos-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: 40px !important;
  }
}
section.home-logos_v1 .home-logos-grid > div {
  background-color: #FFFFFF;
  border: 1px solid #BFBFC2;
  border-radius: 16px;
}
section.home-logos_v1 .home-logos-grid > div img {
  width: 100%;
  height: 100%;
  filter: brightness(10%) hue-rotate(240deg) saturate(50%);
}

/* ==========================================================================
8. V1: Testimonials
========================================================================== */
section.home-testimonials_v1 {
  margin-top: 144px;
}
section.home-testimonials_v1 h2 {
  font-size: 3rem;
  line-height: 1;
  text-align: center;
  max-width: 545px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  section.home-testimonials_v1 h2 {
    font-size: 2.5rem;
    line-height: 1.25;
    text-align: left;
  }
}
section.home-testimonials_v1 .testimonials-card--wrapper {
  margin-top: 80px;
  max-width: 100%;
}
@media screen and (max-width: 767px) {
  section.home-testimonials_v1 .testimonials-card--wrapper {
    margin-top: 40px;
  }
}
section.home-testimonials_v1 .testimonials-card--wrapper .testimonials-card--container {
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 1rem;
  overflow-x: scroll;
  padding-bottom: 64px;
  scrollbar-color: hsl(21, 100%, 50%) hsla(228, 20%, 10%, 0.1);
  scrollbar-width: thin;
}
section.home-testimonials_v1 .testimonials-card--wrapper .testimonials-card--container::-webkit-scrollbar {
  height: 2px;
}
section.home-testimonials_v1 .testimonials-card--wrapper .testimonials-card--container::-webkit-scrollbar-track {
  background: hsla(228, 20%, 10%, 0.1);
}
section.home-testimonials_v1 .testimonials-card--wrapper .testimonials-card--container::-webkit-scrollbar-thumb {
  background: #FF5A00;
}
section.home-testimonials_v1 .testimonials-card--wrapper .card {
  width: 380px;
}
@media screen and (max-width: 767px) {
  section.home-testimonials_v1 .testimonials-card--wrapper .card {
    width: 328px;
  }
}
section.home-testimonials_v1 .testimonials-card--wrapper .card .card-topleft {
  z-index: 1;
}
section.home-testimonials_v1 .testimonials-card--wrapper .card .card-topleft .badge {
  border: 0;
  overflow: hidden;
  margin-top: 24px;
}
section.home-testimonials_v1 .testimonials-card--wrapper .card .card-topleft .badge img {
  width: 100%;
  height: 100%;
}
section.home-testimonials_v1 .testimonials-card--wrapper .card .card-description {
  height: 270px;
}
section.home-testimonials_v1 .testimonials-card--wrapper .card .card-text {
  font-size: 1.125rem;
  line-height: 27px;
  -webkit-line-clamp: unset;
}
section.home-testimonials_v1 .testimonials-card--wrapper .card .card-date {
  font-size: 1.125rem;
  line-height: 18px;
}
section.home-testimonials_v1 .testimonials-card--wrapper .card .card-title,
section.home-testimonials_v1 .testimonials-card--wrapper .card .card-metadata {
  color: #CE3F00;
  font-size: 1.125rem;
  line-height: 18px;
  font-weight: 700;
}
section.home-testimonials_v1 .testimonials-card--wrapper .card .card-metadata {
  color: #14161E;
  margin-top: 8px;
}
section.home-testimonials_v1 .testimonials-card--wrapper .card .card-description {
  flex-direction: column;
  align-items: flex-start;
}
section.home-testimonials_v1 .testimonials-card--wrapper .badge {
  width: 56px;
  height: 56px;
  border: 1px solid #14161E;
  border-radius: 0.75rem;
}
section.home-testimonials_v1 .testimonials-card--wrapper .badge .svg {
  width: 24px;
  height: 19px;
}

/* ==========================================================================
1. V1: Hero
========================================================================== */
section.kodeco-home-hero_v1 {
  position: relative;
  z-index: 1;
}
section.kodeco-home-hero_v1 .kodeco-home-hero-content {
  padding-top: 80px;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero_v1 .kodeco-home-hero-content {
    padding-top: 60px;
  }
}
section.kodeco-home-hero_v1 .kodeco-home-hero-content h1 {
  max-width: 675px;
  margin: 0 auto;
  text-align: center;
  font-size: 4.5rem;
  line-height: 1;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero_v1 .kodeco-home-hero-content h1 {
    font-size: 3.5rem;
    line-height: 1.25;
    text-align: left;
    max-width: none;
  }
}
@media screen and (max-width: 767px) {
  section.kodeco-home-hero_v1 .kodeco-home-hero-content h1 {
    font-size: 2.5rem;
  }
}
section.kodeco-home-hero_v1 .kodeco-home-hero-content h1 span {
  color: #FF5A00;
}
section.kodeco-home-hero_v1 .kodeco-home-hero-content p {
  max-width: 495px;
  margin-top: 122px;
  font-size: 1.25rem;
  line-height: 1.5;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero_v1 .kodeco-home-hero-content p {
    margin-top: 32px;
    max-width: 100%;
  }
}
@media screen and (max-width: 767px) {
  section.kodeco-home-hero_v1 .kodeco-home-hero-content p {
    max-width: auto;
    font-size: 1.125rem;
  }
}
section.kodeco-home-hero_v1 .module-background {
  max-width: 1680px;
  margin: -144px auto 0;
  height: 700px;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero_v1 .module-background {
    height: 700px;
  }
}
@media screen and (max-width: 767px) {
  section.kodeco-home-hero_v1 .module-background {
    display: none;
  }
}
section.kodeco-home-hero_v1 .module-background:before {
  width: 742px;
  border-radius: 0 0 48px 0;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero_v1 .module-background:before {
    width: 100%;
  }
}
section.kodeco-home-hero_v1 .module-background .module-background-round-top {
  position: absolute;
  top: 0;
  left: 742px;
}
section.kodeco-home-hero_v1 .module-background .module-background-round-top:before {
  top: 0;
  bottom: auto;
  border-radius: 48px 0 0 0;
  box-shadow: -12px -12px 0 12px #F7F7F7;
}
section.kodeco-home-hero_v1 .module-background .module-background-round-bottom {
  position: absolute;
  top: 240px;
  left: 0;
  bottom: auto;
}
section.kodeco-home-hero_v1 .module-background .module-background-round-bottom:before {
  top: 0;
  bottom: auto;
  border-radius: 48px 0 0 0;
  box-shadow: -12px -12px 0 12px #F7F7F7;
}

/* ==========================================================================
==========================================================================
============================================================================ */
/* ==========================================================================
9. V2: Hero
========================================================================== */
section.kodeco-home-hero_v2 {
  position: relative;
  z-index: 1;
}
section.kodeco-home-hero_v2 .kodeco-home-hero-content {
  padding-top: 80px;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero_v2 .kodeco-home-hero-content {
    padding-top: 60px;
  }
}
section.kodeco-home-hero_v2 .kodeco-home-hero-content h1 {
  max-width: 675px;
  margin: 0 auto;
  text-align: center;
  font-size: 4rem;
  line-height: 1;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero_v2 .kodeco-home-hero-content h1 {
    font-size: 3.5rem;
    line-height: 1.25;
    text-align: left;
    max-width: none;
  }
}
@media screen and (max-width: 767px) {
  section.kodeco-home-hero_v2 .kodeco-home-hero-content h1 {
    font-size: 2.5rem;
  }
}
section.kodeco-home-hero_v2 .kodeco-home-hero-content h1 span {
  color: #FF5A00;
}
section.kodeco-home-hero_v2 .kodeco-home-hero-content p {
  max-width: 495px;
  margin-top: 80px;
  font-size: 1.25rem;
  line-height: 1.5;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero_v2 .kodeco-home-hero-content p {
    margin-top: 32px;
    max-width: 100%;
  }
}
@media screen and (max-width: 767px) {
  section.kodeco-home-hero_v2 .kodeco-home-hero-content p {
    max-width: auto;
    font-size: 1.125rem;
  }
}
section.kodeco-home-hero_v2 .module-background {
  max-width: 1680px;
  margin: -144px auto 0;
  height: 700px;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero_v2 .module-background {
    height: 700px;
  }
}
@media screen and (max-width: 767px) {
  section.kodeco-home-hero_v2 .module-background {
    display: none;
  }
}
section.kodeco-home-hero_v2 .module-background:before {
  width: 742px;
  border-radius: 0 0 48px 0;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero_v2 .module-background:before {
    width: 100%;
  }
}
section.kodeco-home-hero_v2 .module-background .module-background-round-top {
  position: absolute;
  top: 0;
  left: 742px;
}
section.kodeco-home-hero_v2 .module-background .module-background-round-top:before {
  top: 0;
  bottom: auto;
  border-radius: 48px 0 0 0;
  box-shadow: -12px -12px 0 12px #F7F7F7;
}
section.kodeco-home-hero_v2 .module-background .module-background-round-bottom {
  position: absolute;
  top: 240px;
  left: 0;
  bottom: auto;
}
section.kodeco-home-hero_v2 .module-background .module-background-round-bottom:before {
  top: 0;
  bottom: auto;
  border-radius: 48px 0 0 0;
  box-shadow: -12px -12px 0 12px #F7F7F7;
}

/* ==========================================================================
10. V2: Intro
========================================================================== */
section.home-intro_v2 {
  display: grid;
  grid-template-columns: 445px 1fr;
  grid-column-gap: 14%;
  margin-top: 144px;
}
@media screen and (max-width: 1079px) {
  section.home-intro_v2 {
    grid-column-gap: 98px;
  }
}
@media screen and (max-width: 979px) {
  section.home-intro_v2 {
    grid-template-columns: 1fr;
    grid-row-gap: 80px;
  }
}
@media screen and (max-width: 767px) {
  section.home-intro_v2 {
    grid-row-gap: 32px;
  }
}
section.home-intro_v2 h2 {
  font-size: 3rem;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  section.home-intro_v2 h2 {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media screen and (max-width: 767px) {
  section.home-intro_v2 p {
    font-size: 1.125rem;
  }
}
section.home-intro_v2 .home-intro-photo img {
  width: 100%;
  height: 445px;
  border-radius: 40px;
}
@media screen and (max-width: 979px) {
  section.home-intro_v2 .home-intro-photo img {
    max-width: 420px;
  }
}
@media screen and (max-width: 767px) {
  section.home-intro_v2 .home-intro-photo img {
    border-radius: 24px;
  }
}

/* ==========================================================================
11. V2: Why
========================================================================== */
section.home-why_v2 {
  margin-top: 144px;
  max-width: 1680px;
}
section.home-why_v2 h2 {
  font-size: 4.5rem;
  line-height: 1;
  max-width: 692px;
  color: #FFFFFF;
}
@media screen and (max-width: 767px) {
  section.home-why_v2 h2 {
    padding-top: 80px;
    font-size: 2.5rem;
    line-height: 1.25;
  }
}
section.home-why_v2 .home-why-top {
  display: grid;
  grid-template-columns: 938px 1fr;
  grid-template-rows: 1fr 240px;
}
@media screen and (max-width: 1279px) {
  section.home-why_v2 .home-why-top {
    grid-template-columns: 75% 1fr;
  }
}
@media screen and (max-width: 767px) {
  section.home-why_v2 .home-why-top {
    grid-template-columns: 50% 1fr;
    grid-template-rows: 1fr 120px;
  }
}
section.home-why_v2 .home-why-top .home-why-right {
  position: relative;
  grid-row-start: span 2;
}
section.home-why_v2 .home-why-top .home-why-right::before {
  content: "";
  width: 60px;
  height: 60px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0 0 0 48px;
  box-shadow: -13px 13px 0 12px #14161E;
}
section.home-why_v2 .home-why-left {
  border-radius: 48px 48px 0 0;
  background-color: #14161E;
}
section.home-why_v2 .home-why-bottom {
  border-radius: 0 48px 48px 48px;
  padding-bottom: 144px;
  background-color: #14161E;
}
@media screen and (max-width: 767px) {
  section.home-why_v2 .home-why-bottom {
    padding-bottom: 80px;
  }
}
section.home-why_v2 .why-card-wrapper {
  max-width: 100%;
  margin-top: 80px;
}
section.home-why_v2 .why-card-wrapper .why-card-container {
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 1rem;
  overflow-x: scroll;
  padding-bottom: 65px;
  scrollbar-color: hsl(21, 100%, 50%) hsla(0, 0%, 100%, 0.1);
  scrollbar-width: thin;
}
section.home-why_v2 .why-card-wrapper .why-card-container::-webkit-scrollbar {
  height: 2px;
}
section.home-why_v2 .why-card-wrapper .why-card-container::-webkit-scrollbar-track {
  background: hsla(0, 0%, 100%, 0.1);
}
section.home-why_v2 .why-card-wrapper .why-card-container::-webkit-scrollbar-thumb {
  background: #FF5A00;
}
section.home-why_v2 .why-card-wrapper .card {
  width: 380px;
  min-height: 460px;
}
@media screen and (max-width: 767px) {
  section.home-why_v2 .why-card-wrapper .card {
    width: 328px;
  }
}
section.home-why_v2 .why-card-wrapper .card > div {
  background-color: #14161E;
}
section.home-why_v2 .why-card-wrapper .card > div .badge {
  background-color: #14161E;
  border: 1px solid #FFFFFF;
}
section.home-why_v2 .why-card-wrapper .card > div .badge > span {
  font-size: 1.25rem;
  font-weight: normal;
  line-height: 20px;
  color: #FFFFFF;
}
section.home-why_v2 .why-card-wrapper .card > div .card-title {
  color: #FFFFFF;
}
section.home-why_v2 .why-card-wrapper .card > div .card-text {
  -webkit-line-clamp: unset;
  color: #D7D7D7;
}
section.home-why_v2 .why-card-wrapper .card-topright::before {
  border: 1px #FFFFFF;
  border-style: none none solid solid;
  box-shadow: -4px 4px 0 4px #14161E;
}
section.home-why_v2 .why-card-wrapper .card-topleft {
  border: 1px #FFFFFF;
  border-style: solid solid none solid;
}
section.home-why_v2 .why-card-wrapper .card-bottom {
  border: 1px #FFFFFF;
  border-style: none solid solid solid;
}
section.home-why_v2 .why-card-wrapper .card-bottom::before {
  border: 1px #FFFFFF;
  border-style: solid solid none none;
}

/* ==========================================================================
12. V2: Platforms
========================================================================== */
section.home-platforms_v2 .home-platforms-grid-outer {
  display: grid;
  grid-template-columns: 37% 56%;
  grid-column-gap: 7%;
}
@media screen and (max-width: 1023px) {
  section.home-platforms_v2 .home-platforms-grid-outer {
    grid-template-columns: 1fr;
    grid-row-gap: 80px;
  }
}
section.home-platforms_v2 .home-platforms-grid-outer h2 {
  font-size: 3.5rem;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  section.home-platforms_v2 .home-platforms-grid-outer h2 {
    font-size: 2.5rem;
    line-height: 1.25;
  }
}
@media screen and (max-width: 399px) {
  section.home-platforms_v2 .home-platforms-grid-outer > div a:nth-of-type(1) {
    display: none;
  }
}
section.home-platforms_v2 .home-platforms-grid-outer > div a:nth-of-type(2) {
  display: none;
}
@media screen and (max-width: 399px) {
  section.home-platforms_v2 .home-platforms-grid-outer > div a:nth-of-type(2) {
    display: inline-flex;
  }
}
@media screen and (max-width: 1023px) {
  section.home-platforms_v2 .home-platforms-grid-outer:nth-of-type(2) {
    margin-top: 80px !important;
  }
}
section.home-platforms_v2 .home-platforms-grid-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 24px;
}
@media screen and (max-width: 1199px) {
  section.home-platforms_v2 .home-platforms-grid-inner {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 1023px) {
  section.home-platforms_v2 .home-platforms-grid-inner {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 767px) {
  section.home-platforms_v2 .home-platforms-grid-inner {
    grid-template-columns: 1fr;
  }
}
section.home-platforms_v2 .home-platforms-grid-inner .card {
  min-height: 380px;
}
section.home-platforms_v2 .home-platforms-grid-inner .card .card-bottom {
  display: flex;
  flex-direction: column;
}
section.home-platforms_v2 .home-platforms-grid-inner .card .card-bottom .card-title {
  margin-bottom: 16px;
}
section.home-platforms_v2 .home-platforms-grid-inner .card .card-bottom .card-description {
  margin-top: auto;
}
section.home-platforms_v2 .home-platforms-grid-inner .card .card-bottom .card-description .card-text {
  display: block;
}

/* ==========================================================================
13. V2: Content
========================================================================== */
section.home-content_v2 {
  margin-top: 144px;
  position: relative;
}
section.home-content_v2 h2 {
  max-width: 792px;
  font-size: 3.5rem;
  line-height: 1;
  margin: 0 auto;
  text-align: center;
}
@media screen and (max-width: 767px) {
  section.home-content_v2 h2 {
    font-size: 2.5rem;
    line-height: 1.25;
    text-align: left;
  }
}
section.home-content_v2 .home-content-slider {
  margin-top: 120px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
}
@media screen and (max-width: 767px) {
  section.home-content_v2 .home-content-slider {
    margin-top: 40px;
    gap: 8px;
    overflow-x: scroll;
  }
}
@media screen and (max-width: 767px) {
  section.home-content_v2 .home-content-slider a {
    white-space: nowrap;
  }
}
section.home-content_v2 .button__icon--prev {
  position: absolute;
  left: 0;
  padding-left: 36px;
  top: 50px;
  height: 150px;
  display: none;
}
section.home-content_v2 .button__icon--prev > span {
  position: absolute;
  top: 100px;
  cursor: pointer;
}
section.home-content_v2 .button__icon--prev .prev--icon {
  width: 10px;
  height: 10px;
  rotate: -180deg;
}
section.home-content_v2 .button__icon--next {
  position: absolute;
  background: linear-gradient(90.87deg, rgba(247, 247, 247, 0) 0.63%, #F7F7F7 99.25%);
  width: 164px;
  height: 150px;
  right: 0;
  opacity: 1;
  padding-right: 36px;
  top: 50px;
  display: none;
}
section.home-content_v2 .button__icon--next > span {
  position: absolute;
  top: 100px;
  right: 24px;
  cursor: pointer;
}
section.home-content_v2 .button__icon--next .next--icon {
  width: 10px;
  height: 10px;
}
section.home-content_v2 .content-card-wrapper {
  max-width: 100%;
}
section.home-content_v2 .content-card-wrapper .content-card-container {
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 16px;
  overflow-x: scroll;
  padding-bottom: 65px;
  scrollbar-color: hsl(21, 100%, 50%) hsla(228, 20%, 10%, 0.1);
  scrollbar-width: thin;
  padding-top: 48px;
}
section.home-content_v2 .content-card-wrapper .content-card-container::-webkit-scrollbar {
  height: 2px;
}
section.home-content_v2 .content-card-wrapper .content-card-container::-webkit-scrollbar-track {
  background: hsla(228, 20%, 10%, 0.1);
}
section.home-content_v2 .content-card-wrapper .content-card-container::-webkit-scrollbar-thumb {
  background: #FF5A00;
}
section.home-content_v2 .content-card-wrapper .card {
  width: 380px;
  min-height: 460px;
}
section.home-content_v2 .content-card-wrapper .card .card-bottom .card-metadata {
  margin-top: 16px;
}
section.home-content_v2 .content-card-wrapper .card-description {
  margin-top: 16px;
}
section.home-content_v2 .content-card-wrapper .card-description .card-text {
  -webkit-line-clamp: 4;
}

/* ==========================================================================
14. V2: Community
========================================================================== */
section.home-kodeco-community_v2 {
  position: relative;
  max-width: 1680px;
  margin: 144px auto 0;
  overflow: hidden;
}
section.home-kodeco-community_v2 .home-kodeco-community-top {
  background-color: #14161E;
  border-radius: 48px 48px 48px 0;
  padding-top: 80px;
}
section.home-kodeco-community_v2 .home-kodeco-community-top > div {
  display: grid;
  grid-template-columns: 496px 594px;
  justify-content: space-between;
}
@media screen and (max-width: 979px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top > div {
    padding-bottom: 80px;
    grid-template-columns: 1fr;
    grid-row-gap: 80px;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top > div {
    padding-bottom: 0;
  }
}
section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-top-left {
  align-self: center;
}
@media screen and (max-width: 979px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-top-left {
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-top-left {
    text-align: left;
  }
}
section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-top-left h2 {
  font-size: 3.5rem;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-top-left h2 {
    font-size: 2.5rem;
    line-height: 1.25;
  }
}
section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-top-left p {
  color: #D7D7D7;
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-top-left .btn-larget:first-of-type {
    display: none;
  }
}
section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-top-left .btn-larget:last-of-type {
  display: none;
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-top-left .btn-larget:last-of-type {
    display: inline-flex;
  }
}
@media screen and (max-width: 979px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-top-right {
    width: 594px;
    justify-self: center;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-top-right {
    width: 100%;
  }
}
section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .home-kodeco-community-mosaic-top {
  position: relative;
}
section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece {
  background-color: #14161E;
  background-image: url(/assets/photos/community-sprite@1.5x-5647f81805df16acadef3a134b7d84f2da50d725d694767a1bc978c8cb8a58ad.jpg);
  background-repeat: no-repeat;
}
section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-1 {
  background-size: 1680px;
  position: relative;
  left: 106px;
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-1 {
    display: none;
  }
}
section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-2 {
  background-size: 1092px;
  background-position: top 0px left -546px;
  margin-top: 40px;
  margin-left: calc(100% - 182px);
}
@media screen and (max-width: 1139px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-2 {
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    margin-left: 0;
  }
}
@media screen and (max-width: 979px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-2 {
    margin-left: calc(100% - 182px);
    left: auto;
    transform: none;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-2 {
    display: none;
  }
}
section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-3 {
  background-size: 1092px;
  background-position: top 0px left -364px;
  position: relative;
  left: 158px;
  display: none;
}
@media screen and (max-width: 1139px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-3 {
    left: 0;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-3 {
    display: none;
  }
}
section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-4 {
  background-size: 1092px;
  background-position: top 0px left -728px;
  position: absolute;
  bottom: 0;
  right: 40px;
}
@media screen and (max-width: 399px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-4 {
    display: none;
  }
}
section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-5 {
  background-size: 492px;
  background-position: top 0px left -82px;
  position: absolute;
  top: 0;
  right: 108px;
}
@media screen and (max-width: 1039px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-5 {
    right: auto;
    left: 8px;
  }
}
@media screen and (max-width: 979px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-5 {
    right: 108px;
    left: auto;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-5 {
    right: 20px;
    top: -120px;
  }
}
@media screen and (max-width: 399px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-5 {
    display: none;
  }
}
section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-6 {
  background-size: 492px;
  background-position: top 0px left -410px;
  position: absolute;
  left: 8px;
}
@media screen and (max-width: 399px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-6 {
    display: none;
  }
}
section.home-kodeco-community_v2 .home-kodeco-community-bottom {
  display: grid;
  grid-template-columns: 1fr 262px;
  height: 222px;
}
@media screen and (max-width: 399px) {
  section.home-kodeco-community_v2 .home-kodeco-community-bottom {
    height: 120px;
    grid-template-columns: 1fr 120px;
  }
}
section.home-kodeco-community_v2 .home-kodeco-community-bottom .home-kodeco-community-bottom-left {
  border-radius: 0 0 48px 48px;
  background-color: #14161E;
}
section.home-kodeco-community_v2 .home-kodeco-community-bottom .home-kodeco-community-bottom-right {
  position: relative;
}
section.home-kodeco-community_v2 .home-kodeco-community-bottom .home-kodeco-community-bottom-right:before {
  content: "";
  width: 120px;
  height: 48px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 48px 0 0 0;
  box-shadow: -12px -12px 0 12px #14161E;
}
@media screen and (max-width: 399px) {
  section.home-kodeco-community_v2 .home-kodeco-community-bottom .home-kodeco-community-bottom-right:before {
    width: 60px;
  }
}

/* ==========================================================================
15. V2: Logos
========================================================================== */
section.home-logos_v2 {
  margin-top: 144px;
}
section.home-logos_v2 h2 {
  font-size: 3rem;
}
@media screen and (max-width: 767px) {
  section.home-logos_v2 h2 {
    font-size: 2.5rem;
    line-height: 1.25;
    text-align: left;
  }
}
section.home-logos_v2 .home-logos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}
@media screen and (max-width: 767px) {
  section.home-logos_v2 .home-logos-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: 40px !important;
  }
}
section.home-logos_v2 .home-logos-grid > div {
  background-color: #FFFFFF;
  border: 1px solid #BFBFC2;
  border-radius: 16px;
}
section.home-logos_v2 .home-logos-grid > div img {
  width: 100%;
  height: 100%;
  filter: brightness(10%) hue-rotate(240deg) saturate(50%);
}

/* ==========================================================================
16. V2: Testimonials
========================================================================== */
section.home-testimonials_v2 {
  margin-top: 144px;
}
section.home-testimonials_v2 h2 {
  font-size: 3rem;
  line-height: 1;
  text-align: center;
  max-width: 545px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  section.home-testimonials_v2 h2 {
    font-size: 2.5rem;
    line-height: 1.25;
    text-align: left;
  }
}
section.home-testimonials_v2 .testimonials-card--wrapper {
  margin-top: 80px;
  max-width: 100%;
}
@media screen and (max-width: 767px) {
  section.home-testimonials_v2 .testimonials-card--wrapper {
    margin-top: 40px;
  }
}
section.home-testimonials_v2 .testimonials-card--wrapper .testimonials-card--container {
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 1rem;
  overflow-x: scroll;
  padding-bottom: 64px;
  scrollbar-color: hsl(21, 100%, 50%) hsla(228, 20%, 10%, 0.1);
  scrollbar-width: thin;
}
section.home-testimonials_v2 .testimonials-card--wrapper .testimonials-card--container::-webkit-scrollbar {
  height: 2px;
}
section.home-testimonials_v2 .testimonials-card--wrapper .testimonials-card--container::-webkit-scrollbar-track {
  background: hsla(228, 20%, 10%, 0.1);
}
section.home-testimonials_v2 .testimonials-card--wrapper .testimonials-card--container::-webkit-scrollbar-thumb {
  background: #FF5A00;
}
section.home-testimonials_v2 .testimonials-card--wrapper .card {
  width: 380px;
}
@media screen and (max-width: 767px) {
  section.home-testimonials_v2 .testimonials-card--wrapper .card {
    width: 328px;
  }
}
section.home-testimonials_v2 .testimonials-card--wrapper .card .card-topleft {
  z-index: 1;
}
section.home-testimonials_v2 .testimonials-card--wrapper .card .card-topleft .badge {
  border: 0;
  overflow: hidden;
  margin-top: 24px;
}
section.home-testimonials_v2 .testimonials-card--wrapper .card .card-topleft .badge img {
  width: 100%;
  height: 100%;
}
section.home-testimonials_v2 .testimonials-card--wrapper .card .card-description {
  height: 270px;
}
section.home-testimonials_v2 .testimonials-card--wrapper .card .card-text {
  font-size: 1.125rem;
  line-height: 27px;
  -webkit-line-clamp: unset;
}
section.home-testimonials_v2 .testimonials-card--wrapper .card .card-date {
  font-size: 1.125rem;
  line-height: 18px;
}
section.home-testimonials_v2 .testimonials-card--wrapper .card .card-title,
section.home-testimonials_v2 .testimonials-card--wrapper .card .card-metadata {
  color: #CE3F00;
  font-size: 1.125rem;
  line-height: 18px;
  font-weight: 700;
}
section.home-testimonials_v2 .testimonials-card--wrapper .card .card-metadata {
  color: #14161E;
  margin-top: 8px;
}
section.home-testimonials_v2 .testimonials-card--wrapper .card .card-description {
  flex-direction: column;
  align-items: flex-start;
}
section.home-testimonials_v2 .testimonials-card--wrapper .badge {
  width: 56px;
  height: 56px;
  border: 1px solid #14161E;
  border-radius: 0.75rem;
}
section.home-testimonials_v2 .testimonials-card--wrapper .badge .svg {
  width: 24px;
  height: 19px;
}

/*
*
* Rating Layouts
*
* For use on rating components
*
* 1. Modal
*
* 2. Reviews header
*
* 3. Rating
*
* 4. Rating form
*
*/
/* ==========================================================================
Universal
========================================================================== */
.rating-dot {
  margin: 0 4px;
}

/* ==========================================================================
1. Modal
========================================================================== */
.modal-ratings {
  overflow: hidden;
}
.modal-ratings p {
  margin-top: 0;
}
.modal-ratings .modal-wrapper {
  height: 80vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

/* ==========================================================================
2. Reviews header
========================================================================== */
.ratings-header .ratings-wrapper {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .ratings-header .ratings-wrapper {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 16px;
  }
}
@media screen and (max-width: 767px) {
  .ratings-header .ratings-controls-top {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    width: 100%;
  }
  .ratings-header .ratings-controls-top > div, .ratings-header .ratings-controls-top .btn-normalw {
    width: 100%;
    margin: 0 !important;
  }
  .ratings-header .ratings-controls-top .btn-normalw {
    order: 0;
  }
  .ratings-header .ratings-controls-top a {
    order: 1;
    text-align: center;
  }
}
.ratings-header p.icon-prefix > svg {
  margin: 0 8px 0 16px;
}
.ratings-header p.icon-prefix .rating-avg {
  font-weight: 700;
}
.ratings-header .dropdown {
  color: #14161E;
}
.ratings-header .dropdown .dropdown-trigger {
  border: 1px solid #14161E;
  border-radius: 0.75rem;
  padding: 12px 8px 12px 16px;
}
.ratings-header .dropdown .dropdown-menu {
  min-width: 298px;
}
.ratings-header .dropdown .dropdown-menu .dropdown-content span.dropdown-line {
  display: block;
  margin: 8px;
  padding: 12px 16px;
  list-style: none;
  text-align: left;
  justify-content: center;
  border-radius: 8px;
}
.ratings-header .dropdown .dropdown-menu .dropdown-content span.dropdown-line:hover {
  background: rgba(215, 215, 215, 0.5);
}
.ratings-header .dropdown .dropdown-menu .dropdown-content span.dropdown-line > a {
  text-decoration: none !important;
}

.user-rating-self {
  margin: 20px -24px 0 -24px;
  padding: 0 24px;
  background: #F7F7F7;
}

/* ==========================================================================
3. Rating
========================================================================== */
.user-rating {
  height: auto;
  display: flex;
  width: 100%;
  align-items: flex-start;
  flex-direction: column;
  border-bottom: 1px solid #D7D7D7;
  color: #14161E;
}
.user-rating .user-rating-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.user-rating .user-rating-top .user-rating-account {
  display: flex;
  align-items: center;
  margin-top: 24px;
}
.user-rating .user-rating-top .user-rating-account .rating-profile-pic-small {
  width: 40px;
  height: 40px;
  border-radius: 0.75rem;
}
.user-rating .user-rating-top .user-rating-account .user-rating-account-left {
  margin-left: 16px;
}
.user-rating .user-rating-top .user-rating-account .user-rating-account-left .rating-username {
  font-size: 1rem;
  line-height: 1rem;
}
.user-rating .user-rating-top .user-rating-account .user-rating-account-left .rating-date {
  display: flex;
  font-size: 0.875rem;
  line-height: 0.875rem;
  margin-top: 8px;
}
.user-rating .user-rating-top .user-rating-account .user-rating-account-left span.icon-prefix > svg {
  max-width: 12px;
  max-height: 12px;
  margin-right: 2px;
}
.user-rating .user-rating-top .user-rating-account .user-rating-account-left span.icon-prefix .rating-avg {
  font-weight: 700;
}
.user-rating .user-rating-bottom > p {
  font-size: 1rem;
  line-height: 1.5rem;
  margin: 18px 0 24px 0;
}

/* ==========================================================================
4. Rating form
========================================================================== */
.rating-form {
  margin-top: 24px;
}
.rating-form p {
  font-size: 1rem;
  line-height: 1rem;
  color: #14161E;
  font-weight: 500;
  margin-top: 16px;
}
.rating-form .rating-questions {
  animation: a-slight-fade-in-up 0.25s;
  position: relative;
}
.rating-form .rating-questions .rating-button--small {
  width: 40px;
  height: 40px;
  border-radius: 0.75rem;
}
.rating-form .rating-questions .add-rating .rate-star {
  display: inline-flex;
  justify-content: center;
  background: #F7F7F7;
  border: 1px solid #14161E;
  margin: 0 3px;
  transition: background-color 0.25s ease-out;
}
.rating-form .rating-questions .add-rating .rate-star:hover {
  background: rgba(215, 215, 215, 0.4980392157);
}
.rating-form .rating-questions .add-rating .rate-star svg {
  fill: #14161E;
  width: 20px;
  height: 19px;
}
.rating-form .rating-questions .add-rating .c-rate__star--green {
  background: #FF8847;
}
.rating-form .rating-questions .add-rating .c-rate__star--green:hover {
  background: #FF8847;
}
.rating-form .c-review-module__answers > input[type=checkbox]:hover + label {
  background: rgba(215, 215, 215, 0.4980392157);
  border-color: #14161E;
  color: #14161E;
  transition: background-color 0.25s ease-out;
}
.rating-form .c-review-module__answers > input[type=checkbox]:checked + label {
  background: #FF8847;
  border-color: #14161E;
  color: #14161E;
}
.rating-form .c-review-module__answers label {
  padding: 12px 16px;
  border-radius: 0.75rem;
  background: #F7F7F7;
  border: 1px solid #14161E;
  font-weight: 400;
  color: #14161E;
  font-size: 0.875rem;
  line-height: 0.875rem;
  white-space: nowrap;
  display: inline-flex;
  margin: 0 8px 10px 0;
}
.rating-form .text-area {
  padding: 24px;
  font-size: 1rem;
}

/**
*
* Onboarding
*
* Layouts for onboarding views
*
* 1. Wrapper, title and inputs
*
* 2. Hello
*
* 3. Progress
*
* 4. Generate Recommendations
*
**/
/* ==========================================================================
  1. Wrapper, title and inputs
========================================================================== */
.container-onboarding {
  min-width: 594px;
}
@media screen and (max-width: 641px) {
  .container-onboarding {
    min-width: auto;
  }
}
.container-onboarding .lh-32 {
  line-height: 1.25;
}
.container-onboarding .control label.radio {
  display: flex;
}

/* ==========================================================================
  2. Hello
========================================================================== */
.onboarding-hello .card-minimal {
  width: 288px;
  height: 240px;
}
@media screen and (max-width: 767px) {
  .onboarding-hello .card-minimal {
    width: 100%;
  }
}
.onboarding-hello .card-minimal__title {
  display: flex;
  flex: 1;
  align-items: center;
  text-align: center;
  justify-content: center;
  font-size: 1.375rem;
  line-height: 1.75rem;
}

/* ==========================================================================
  3. Progress
========================================================================== */
.onboarding-progress {
  position: absolute;
  top: 80px;
  left: 0;
  display: flex;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .onboarding-progress {
    display: none;
  }
}
.onboarding-progress li {
  width: 25%;
  height: 2px;
  position: relative;
}
.onboarding-progress__bar--complete:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #00B87E;
}

/* ==========================================================================
  4. Geneate Recommendations
========================================================================== */
@media screen and (max-width: 767px) {
  .generate-recommendations {
    font-size: 1.5rem;
    text-align: center;
  }
}

/**
 * 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.
 *
 */
/* ==========================================================================
  Grids
========================================================================== */
.two-column-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-column-gap: 1rem;
  grid-row-gap: 1.5rem;
}
@media screen and (max-width: 1023px) {
  .two-column-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 767px) {
  .two-column-grid {
    grid-template-columns: 1fr;
  }
}

.three-column-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-column-gap: 1rem;
  grid-row-gap: 1.5rem;
}
@media screen and (max-width: 1023px) {
  .three-column-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 767px) {
  .three-column-grid {
    grid-template-columns: 1fr;
  }
}

.card-minh-342 .card {
  min-height: 342px;
}
@media screen and (max-width: 767px) {
  .card-minh-342 .card {
    min-height: auto;
  }
}

.l-font-header {
  font-family: "Relative";
}

.l-font-relative {
  font-family: "Relative" !important;
}

@media screen and (max-width: 1023px) {
  .touch-display-none {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .mobile-display-none {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .mobile-display-block {
    display: block;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .tablet-display-none {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  .desktop-display-none {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .mobile-w-100 {
    width: 100%;
  }
}

.content {
  width: 100%;
}

.line-height-1 {
  line-height: 1;
}

.w-152 {
  width: 152px;
}

.h-152 {
  height: 152px;
}

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

.max-w-unset {
  max-width: unset !important;
}

.w-742 {
  width: 742px;
}

/* ==========================================================================
  RW Overrides
 ========================================================================== */
.c-admin-edit-banner {
  left: 0;
  width: 100vw;
}

.btn-icon i.o-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon i.o-button__icon .l-button__svg-bookmark-icon {
  margin: 0;
  position: static;
}

.written-content blockquote {
  border-left: 0.375rem solid #FF5A00;
}
.written-content blockquote p {
  margin: 0;
}
.written-content blockquote p:last-child {
  margin-bottom: 0;
}
.written-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0 1.75rem;
  border-radius: 0.625rem;
  overflow: hidden;
  border: 1px solid #D7D7D7;
}
.written-content th,
.written-content td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #D7D7D7;
}
.written-content th {
  background: #F7F7F7;
  color: #14161E;
  font-weight: 700;
}
.written-content tbody tr:nth-child(even) {
  background: rgba(247, 247, 247, 0.6);
}

.prefers-color-scheme--dark .written-content table {
  border-color: #30363D;
  background: #0E0F14;
}
.prefers-color-scheme--dark .written-content th,
.prefers-color-scheme--dark .written-content td {
  border-bottom-color: #30363D;
  color: #D7D7D7;
}
.prefers-color-scheme--dark .written-content th {
  background: #30363D;
  color: #FFFFFF;
}
.prefers-color-scheme--dark .written-content tbody tr:nth-child(even) {
  background: rgba(48, 54, 61, 0.7);
}

.footer-signup-modal .modal-tight .btn-normalw {
  color: #FFFFFF;
}

.modal .modal-wrapper.modal-tight.modal-share button.btn-icon svg {
  fill: #14161E;
  max-width: 12px;
  max-height: 12px;
}

.subscription-plan-sale {
  display: block;
  text-decoration: line-through;
  font-size: 1rem;
  line-height: 1;
}

.svg-w-12 {
  height: 12px;
  width: 12px;
}

.svg-w-20 {
  height: 20px;
  width: 20px;
}

.w-8 {
  height: 8px;
  width: 8px;
}

.w-16 {
  height: 16px;
  width: 16px;
}

.w-18 {
  height: 18px;
  width: 18px;
}

.svg-20 {
  height: 20px;
  width: 20px;
}

.w-24 {
  height: 24px;
  width: 24px;
}

@media screen and (min-width: 1024px) {
  .desktop-h-auto {
    height: auto;
  }
}

.z-index-0 {
  z-index: 0 !important;
}

.z-index-1 {
  z-index: 1;
}

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

.z-index-3 {
  z-index: 3;
}

.font-mono {
  font-family: "Relative Mono" !important;
}

@media screen and (max-width: 767px) {
  .mobile-mt-0 {
    margin-top: 0 !important;
  }
}

.minw-282 {
  min-width: 282px;
}

.grid-gap-16 {
  grid-gap: 16px;
}

.modal-790 .modal-wrapper {
  width: 790px;
}
@media screen and (max-width: 837px) {
  .modal-790 .modal-wrapper {
    width: 100%;
  }
}

.modal-table-selected h4 {
  background-color: rgba(255, 136, 71, 0.5) !important;
}

.written-content pre {
  overflow: visible;
  white-space: break-spaces;
  word-break: break-word;
  padding: 24px;
}
.written-content.light-code pre {
  padding: 24px;
  border: 1px solid #14161E;
  background-color: #FFFFFF;
  color: #14161E;
}
.written-content.light-code pre code {
  background-color: inherit;
}

.overflow-hidden {
  overflow: hidden;
}

.bg-hover-grey-thought-50:hover {
  background-color: rgba(215, 215, 215, 0.5);
}

.tooltip-text-multi {
  line-height: 1.5;
}

@media screen and (max-width: 1439px) {
  .overflow-desktop {
    position: relative;
    display: flex;
    white-space: nowrap;
    overflow-x: scroll;
    margin-left: -24px;
    margin-right: -24px;
    padding: 0 24px 0 24px;
    -webkit-overflow-scrolling: touch;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .overflow-desktop::-webkit-scrollbar {
    width: 0 !important;
  }
  .overflow-desktop .card {
    white-space: normal;
  }
}

@media screen and (max-width: 1023px) {
  .overflow-mobile {
    position: relative;
    display: flex;
    white-space: nowrap;
    overflow-x: scroll;
    margin-left: -24px;
    margin-right: -24px;
    padding: 0 24px 0 24px;
    -webkit-overflow-scrolling: touch;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .overflow-mobile::-webkit-scrollbar {
    width: 0 !important;
  }
  .overflow-mobile.mt-32 {
    margin-top: -32px !important;
    padding-top: 64px;
  }
  .overflow-mobile .card {
    white-space: normal;
  }
}

@media screen and (max-width: 767px) {
  .mobile-text-align-left {
    text-align: left;
  }
}

.figcaption {
  font-family: "Relative Mono" !important;
  font-size: 0.875rem;
  color: #14161E;
  margin-bottom: 40px;
  text-align: center;
}

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

/* ==========================================================================
  Badge class handling in content sidebar
========================================================================== */
.section-list ul.content-list li .content-list--icon .badge {
  width: unset;
  height: unset;
}

/* ==========================================================================
  HubSpot
========================================================================== */
#hubspot-messages-iframe-container {
  z-index: 999999 !important;
}

.written-content .article-pagination {
  margin-top: 2rem;
}
.written-content .article-pagination ul li::before {
  display: none;
}

/* ==========================================================================
  Paywall
 ========================================================================== */
.written-content .c-book-chapter .c-written-tutorial__content ol li p.paywall {
  display: block;
}

details > div {
  box-sizing: border-box;
}

.section-list .section-list-header--wrapper .section-list-header h4 {
  font-size: 1rem;
}

/* ==========================================================================
  Accordion
 ========================================================================== */
.accordion-content-non-clickable details > summary {
  cursor: default;
}

/* ==========================================================================
  Program pages
 ========================================================================== */
.child-content-list .accordion-trigger .accordion-number svg.sc-black-night {
  fill: #14161E;
}

.card.normal-height {
  height: auto;
}

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